/* Layout adapted from Chromium neterror.css (BSD; vendor/LICENSE.chromium).
 * Copyright 2013 The Chromium Authors. All rights reserved. */
:root { color-scheme: light; background: #f7f7f7; }
body { margin: 0; min-height: 100vh; background: #f7f7f7; transition: background 1s; }
#game { position: relative; margin: 0 auto; max-width: 600px; padding-top: 100px; width: 100%; }
#loading { position: absolute; top: 70px; margin: 0; width: 100%; text-align: center; color: #68727c; font: 13px monospace; }
.runner-container { height: 150px; max-width: 600px; overflow: hidden; position: absolute; top: 35px; width: 44px; }
.runner-container canvas { height: 150px; max-width: 600px; position: absolute; top: 0; image-rendering: pixelated; }
.runner-canvas { filter: none; }
body.taxed { background: #dedede; }
body.inverted.taxed { background: #252525; }
body.taxed .runner-canvas { filter: grayscale(1) contrast(.92) brightness(.8); transition: filter 1.4s ease-out; }
.taxed-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; background: linear-gradient(transparent 16%, rgba(18, 14, 22, .7) 40%, rgba(18, 14, 22, .7) 60%, transparent 84%); transition: opacity .55s ease-out; }
.taxed-overlay[hidden] { display: none; }
.taxed-overlay.visible { opacity: 1; }
.taxed-title { color: #ad61df; font: 900 clamp(28px, 6vw, 42px)/1 "Arial Black", "Impact", sans-serif; letter-spacing: .06em; text-shadow: 0 2px 0 #39134f, 0 0 18px rgba(124, 51, 168, .28); transform: scale(1.12); transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.taxed-overlay.visible .taxed-title { transform: scale(1); }
body.inverted { background: #243249; }
@media (max-height: 320px) and (orientation: landscape) {
  .runner-container { top: 10px; }
}