/* FlyHadeda — chunky arcade pixel styling. The scene is drawn on a
   low-resolution canvas and upscaled with smoothing off; everything here is
   the cabinet around it, so it uses flat blocks, hard shadows and 1px borders
   rather than gradients or rounded corners. */

:root {
  --sky: #25b3fa;
  --ink: #071016;
  --ink-soft: #0e1c24;
  --paper: #fffdf1;
  --lime: #e8ff4f;
  --orange: #e86f2d;
  --orange-dark: #963412;
  --red: #b51f31;
  --deep-blue: #06466d;
  --blue: #0164b2;
  --slate: #26383e;
  --slate-soft: #3b5157;
  --mist: #8eb9c2;
  --pixel-font: "Press Start 2P", "Courier New", monospace;
}

* { box-sizing: border-box; }

/* `[hidden] { display: none }` lives in the UA stylesheet, so ANY author rule
   that sets `display` silently beats it — and several below do (.card-overlay,
   .modal, .hud, .pixel-btn, .drawer are all flex/block). Without this override
   the start card, the game-over card and the leaderboard all render at once on
   a fresh load, each dimming the scene. Must stay `!important`: some of those
   selectors are more specific than an attribute selector. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--pixel-font);
  font-size: 12px;
  line-height: 1.7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* The stage is locked to the scene's 16:9 and grown to whatever the viewport
   allows, so the game fills the screen. Everything else is absolutely
   positioned inside it, which keeps the HUD glued to the canvas rather than
   drifting into the letterbox on non-16:9 displays. */
.stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  /* Repeated in dvh for mobile: `vh` measures the viewport as if the URL bar
     were hidden, so on a phone the stage overflows and the bottom of the
     scene sits off-screen. Browsers without dvh simply ignore these. */
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  overflow: hidden;
  line-height: 0;
  background: var(--sky);
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  /* Keeps the upscale crisp — this is the whole pixel look. */
  image-rendering: pixelated;
  touch-action: manipulation;
  cursor: pointer;
}

/* --- top bar (overlaid on the scene) ------------------------------------ */

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  line-height: 1.7;
  pointer-events: none;
}
.topbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.wordmark {
  margin: 0;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--paper);
  text-shadow: 2px 2px 0 rgba(6, 26, 45, 0.85);
}
.wordmark span { color: var(--lime); }

.icon-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
.icon-btn:hover { background: var(--lime); }
.icon-btn.is-off { background: var(--slate); color: var(--mist); }

/* --- HUD ---------------------------------------------------------------- */

.hud {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 52px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  line-height: 1.7;
  text-shadow: 2px 2px 0 rgba(6, 26, 45, 0.8);
}

.hud-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.hud-stat { display: flex; flex-direction: column; gap: 2px; }
.hud-stat.right { align-items: flex-end; }

.hud-label {
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
}

.hud-value { font-size: 15px; }
.hud-value.big { font-size: 24px; color: var(--lime); }

/* Clearance chip — lights up only while you are over a roof, because that is
   the only time the number means anything. */
.chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 6px 9px;
  border: 2px solid rgba(255, 253, 241, 0.4);
  background: rgba(7, 16, 22, 0.5);
}
.chip-label {
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
}
.chip-value { font-size: 17px; }
.chip-hint {
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--lime);
  opacity: 0.55;
}
.chip.is-live {
  border-color: var(--lime);
  background: rgba(232, 255, 79, 0.16);
}
.chip.is-live .chip-value { color: var(--lime); }
.chip.is-live .chip-hint { opacity: 1; }
.chip.is-hot {
  border-color: var(--orange);
  background: rgba(232, 111, 45, 0.24);
}
.chip.is-hot .chip-value { color: var(--orange); }

/* Poo bonus lights up once you have actually landed one, so it reads as
   something earned rather than another idle counter. */
#hud-poo-stat .hud-value { color: var(--paper); }
#hud-poo-stat.is-earned .hud-value { color: var(--orange); }

.hud-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
.badge {
  font-size: 8px;
  letter-spacing: 1px;
  padding: 4px 7px;
  border: 2px solid var(--ink);
  background: var(--lime);
  color: var(--ink);
  text-shadow: none;
}
.badge.blackout { background: var(--orange); color: var(--paper); }

/* --- toast (per-stadium bonus) ------------------------------------------ */

.toast {
  position: absolute;
  left: 50%;
  top: 24%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 10px 14px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  line-height: 1.7;
  pointer-events: none;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
  animation: toast-pop 0.18s steps(3) both;
}
.toast .toast-title { display: block; font-size: 11px; }
.toast .toast-points { display: block; font-size: 17px; color: var(--orange-dark); margin-top: 4px; }
.toast .toast-sub { display: block; font-size: 8px; opacity: 0.7; margin-top: 3px; }
.toast.tier-1 { background: var(--lime); }

@keyframes toast-pop {
  from { transform: translateX(-50%) scale(0.7); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* --- cards over the stage ----------------------------------------------- */

.card-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 16, 22, 0.55);
  line-height: 1.7;
}

.card {
  width: min(430px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 20px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
}

.kicker {
  margin: 0 0 6px;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange-dark);
}
.card-title { margin: 0 0 10px; font-size: 20px; color: var(--deep-blue); }
.card-line { margin: 0 0 10px; font-size: 11px; }
.card-sub { margin: 0 0 14px; font-size: 9px; line-height: 2; color: var(--slate); }
.card-note { margin: 10px 0 0; font-size: 8px; line-height: 1.9; color: var(--slate-soft); }

.final-stats { margin: 0 0 14px; text-align: left; }
.final-stats div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 9px;
  padding: 4px 0;
  border-bottom: 2px dotted rgba(38, 56, 62, 0.25);
}
.final-stats dt { color: var(--slate); }
.final-stats dd { margin: 0; }
.final-stats dd.highlight { color: var(--orange-dark); }

/* --- share row (on the game-over card) ---------------------------------- */

.share {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px dotted rgba(38, 56, 62, 0.3);
}
.share-label {
  margin: 0 0 8px;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange-dark);
}
.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.share-btn {
  flex: 0 0 auto;
  padding: 8px 10px;
  font-size: 8px;
  background: var(--mist);
}
.share-btn:hover { background: var(--lime); }
.share-note {
  margin: 10px 0 0;
  font-size: 8px;
  line-height: 1.8;
  color: var(--slate);
  min-height: 14px;
}

.loading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  padding: 8px 14px;
  font-size: 9px;
  background: rgba(7, 16, 22, 0.85);
  color: var(--lime);
  line-height: 1.7;
}

.status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  font-size: 8px;
  line-height: 1.8;
  color: var(--paper);
  background: linear-gradient(to top, rgba(7, 16, 22, 0.75), rgba(7, 16, 22, 0));
  pointer-events: none;
}
.status.ok { color: var(--lime); }
.status.err { color: #ffb3a8; }

/* Poo control, for touch only. A device with a keyboard already has Space, so
   showing this on desktop is just clutter over the status line. Gated on a
   coarse pointer with no hover, which is a touchscreen without a mouse.
   The HUD is pointer-events: none, so this has to opt back in. */
/* Visibility is decided in JS, not here. `@media (hover: none) and
   (pointer: coarse)` requires BOTH to be true and devices disagree about what
   they report, so a phone could end up with no way to poo at all. The button
   carries the `hidden` attribute in the markup and game.js clears it. */
.poo-btn {
  display: block;
  position: absolute;
  left: 16px;
  bottom: calc(46px + env(safe-area-inset-bottom));
  padding: 14px 18px;
  border: 3px solid var(--ink);
  background: var(--orange);
  color: var(--paper);
  font-family: var(--pixel-font);
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: none;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
  touch-action: manipulation;
}
.poo-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
}

/* Touchscreen without a mouse: no Space key, so this is the only way to poo. */

/* Portrait crushes a 16:9 scene into a thin strip. */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  .rotate-hint {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30%;
    z-index: 9;
    margin: 0;
    padding: 8px;
    text-align: center;
    font-size: 9px;
    line-height: 1.8;
    color: var(--ink);
    background: var(--lime);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    pointer-events: none;
  }
}

/* Release stamp, always visible bottom-right. */
.version {
  position: absolute;
  right: 8px;
  bottom: calc(4px + env(safe-area-inset-bottom));
  z-index: 8;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--paper);
  opacity: 0.5;
  text-shadow: 1px 1px 0 rgba(6, 26, 45, 0.9);
  pointer-events: none;
  line-height: 1.7;
}

/* --- buttons ------------------------------------------------------------ */

.pixel-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 11px 14px;
  border: 3px solid var(--ink);
  background: var(--mist);
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}
.pixel-btn:hover:not(:disabled) { background: var(--paper); }
.pixel-btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
.pixel-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pixel-btn.primary { background: var(--lime); }
.pixel-btn.primary:hover:not(:disabled) { background: #f2ff91; }
.pixel-btn.small {
  width: auto;
  margin-top: 0;
  padding: 8px 11px;
  font-size: 9px;
  border-width: 2px;
  background: var(--paper);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}
.pixel-btn.small:hover { background: var(--lime); }

/* The advertising link is an <a>, so it needs the button metrics restated. */
a.pixel-btn {
  display: inline-block;
  width: auto;
  text-decoration: none;
  text-align: center;
}
/* City picker. Selectors must include .pixel-btn to out-specify
   `.pixel-btn.small`, which sets its own background and hover — a bare
   `.city-btn` loses that battle and previously left the button paper-on-paper,
   i.e. invisible until hovered. Styled to match the other top-bar buttons,
   with a marker square to say "this is a place, not an action". */
.pixel-btn.city-btn {
  background: var(--paper);
  color: var(--ink);
}
.pixel-btn.city-btn:hover { background: var(--lime); color: var(--ink); }

/* A drawn square rather than a glyph: Press Start 2P has no symbol
   characters, so anything exotic falls through to a fallback font or tofu. */
.city-btn::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--orange);
}

a.pixel-btn.advertise { background: var(--orange); color: var(--paper); }
a.pixel-btn.advertise:hover { background: #f0854a; }

/* --- wallet drawer ------------------------------------------------------ */

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  width: min(330px, 92vw);
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--ink-soft);
  border-left: 3px solid var(--slate);
  box-shadow: -8px 0 0 rgba(0, 0, 0, 0.35);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.drawer-head h3 {
  margin: 0;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mist);
}

.pixel-card {
  padding: 14px 16px;
  border: 3px solid var(--slate);
  background: rgba(0, 0, 0, 0.25);
  margin-bottom: 14px;
}
.pixel-card h3 {
  margin: 0 0 12px;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mist);
}

/* Coin beside the heading, so the wallet card carries the token's identity.
   The source is pixel art, so it must not be smoothed on the way down. */
.wallet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.wallet-head h3 { margin: 0; }
.coin {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.addr {
  font-size: 9px;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.addr-bal {
  font-size: 9px;
  margin-bottom: 10px;
  color: var(--mist);
}

.stat-list { margin: 0 0 8px; }
.stat-list div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 9px;
  padding: 4px 0;
}
.stat-list dt { color: var(--mist); }
.stat-list dd { margin: 0; }

.fine { font-size: 8px; line-height: 2; color: #6d8a92; }
.modal-card .fine, .card .fine { color: var(--slate); }

/* --- leaderboard modal -------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 16, 22, 0.85);
  line-height: 1.7;
}
.modal-card {
  width: min(420px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  padding: 20px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
}
.modal-card h3 { margin: 0 0 14px; font-size: 14px; color: var(--deep-blue); }

.board { margin: 0 0 12px; padding: 0; list-style: none; }
.board li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 10px;
  padding: 7px 0;
  border-bottom: 2px dotted rgba(38, 56, 62, 0.25);
}
.board .rank { color: var(--orange-dark); }
.board .tag { color: var(--slate); }
.board li.you { background: rgba(232, 255, 79, 0.35); }
.board li.you .tag { color: var(--ink); }
/* Status rows (loading / empty / error) are a single text node, so they must
   opt out of the three-column grid or they get crushed into the rank column. */
.board li.empty {
  display: block;
  color: var(--slate);
}

@media (max-width: 700px) {
  .wordmark { font-size: 11px; }
  .hud { padding: 44px 10px 10px; }
  .hud-value.big { font-size: 16px; }
  .hud-value, .chip-value { font-size: 11px; }
  .hud-label, .chip-label { font-size: 7px; }
  .chip-hint { font-size: 6px; }
  .card-title { font-size: 15px; }
  .card { padding: 16px; }
  .pixel-btn.small { padding: 7px 9px; font-size: 8px; }
}

/* A phone held in landscape is WIDE but SHORT — a Galaxy A26 is 891x411 CSS
   px — so it sails straight past the width breakpoint above and picks up the
   full desktop HUD, which then sits on top of a game area only 411px tall.
   Since the game asks players to rotate for a bigger view, that is the
   orientation that matters most on mobile. The binding constraint there is
   height, so key off it: the score has to be readable without competing with
   the bird for the same pixels. line-height carries as much of the bulk as
   font-size does, which is why it is dropped too. */
@media (max-height: 500px) {
  .hud {
    padding: 40px 10px 8px;
    gap: 4px;
    line-height: 1.4;
  }
  .hud-value.big { font-size: 14px; }
  .hud-value, .chip-value { font-size: 10px; }
  .hud-label, .chip-label { font-size: 6px; }
  .chip-hint { font-size: 6px; }
  .badge { font-size: 7px; padding: 3px 5px; }
  .hud-badges { gap: 4px; }
}