@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:ital,wght@0,400;0,600;0,800;1,400&display=swap');

:root {
  --blue: #0f2dbe;
  --blue-dark: #0a1f86;
  --red: #e2001a;
  --ink: #10131c;
  --paper: #f7f7f2;
}

/* touch-action does not inherit — set it everywhere to stop double-tap zoom.
   user-select / touch-callout off everywhere so fast taps never select text
   or pop the copy/paste & "look up" menu on mobile. */
* {
  box-sizing: border-box; margin: 0; padding: 0;
  touch-action: manipulation;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
html, body { height: 100%; background: #0a0c12; }
body {
  display: grid;
  place-items: center;
  font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#frame {
  position: relative;
  width: min(100vw, calc(100vh * (16 / 9)));
  width: min(100dvw, calc(100dvh * (16 / 9)));
  aspect-ratio: 16 / 9;
  box-shadow: 0 0 80px rgba(0,0,0,.6);
}
/* on the all-dark end screen the frame glow reads as a stray band in the
   letterbox area — drop it so page and screen are one flat black */
body:has(#end:not(.hidden)) #frame { box-shadow: none; }
canvas#game {
  width: 100%; height: 100%; display: block;
  /* The backing store is rendered just under display resolution (see
     fitCanvas/PIXEL in game.js); nearest-neighbour upscaling gives text and
     sprites a deliberate, crisp pixel-art chunkiness rather than a blur. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #aee0f7;
}
.hidden { display: none !important; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  z-index: 10;
}

/* ---------- HUD ---------- */
#hud {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: flex-start; align-items: flex-start;
  padding: 12px 16px;
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--ink);
  pointer-events: none;
  z-index: 5;
}
/* in-game HUD: no plate, just crisp outlined text over the level */
#hud > div {
  display: flex; gap: 12px; align-items: center;
  text-shadow:
    -1.5px -1.5px 0 var(--paper),  1.5px -1.5px 0 var(--paper),
    -1.5px  1.5px 0 var(--paper),  1.5px  1.5px 0 var(--paper),
    -1.5px 0 0 var(--paper),  1.5px 0 0 var(--paper),
     0 -1.5px 0 var(--paper),  0 1.5px 0 var(--paper),
     0 2px 3px rgba(16,19,28,.28);
}

/* ---------- Title ---------- */
#title {
  background: var(--paper);
  color: var(--ink);
  gap: 13px;
  padding: 28px;
  overflow: hidden;
}
#title::before {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 6px;
  background: repeating-linear-gradient(90deg, var(--blue) 0 36px, var(--paper) 36px 48px);
}
#lang-switch {
  position: absolute; top: 20px; right: 22px;
  display: flex;
  z-index: 3;
  box-shadow: 3px 3px 0 rgba(16,19,28,.35);
}
.lang-btn { height: 34px; }
.lang-btn {
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-weight: 800; font-size: 10px;
  letter-spacing: 2px;
  border: 2px solid var(--ink);
  padding: 7px 13px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.lang-btn + .lang-btn { border-left: none; }
#lang-icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 2px solid var(--ink);
}
#lang-icon + .lang-btn { border-left: none; }
.lang-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.lang-btn:not(.active):hover { background: #e8e8e0; }

.h1-wrap { position: relative; }
#title h1 {
  font-family: 'Archivo Black', 'Helvetica Neue', sans-serif;
  font-size: 92px; line-height: .84;
  letter-spacing: -3px;
  color: var(--blue);
  animation: title-in .65s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes title-in {
  from { transform: scale(.7) rotate(-3deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}
#h1-perch {
  position: absolute; top: 0; right: 2px;
  transform: translateY(-62%);
  line-height: 0;
  animation: bob 1.8s ease-in-out infinite;
  cursor: pointer;
}
#h1-perch canvas { image-rendering: pixelated; }
@keyframes bob { 50% { transform: translateY(calc(-62% - 6px)); } }

.tagline {
  background: var(--red); color: #fff;
  padding: 5px 16px;
  font-weight: 800; font-size: 12px; letter-spacing: 6px;
  transform: rotate(-2deg);
}

.en { color: #8a8d96; font-style: italic; font-weight: 400; font-size: 11.5px; }
.controls {
  font-size: 10.5px; letter-spacing: 1.5px; font-weight: 600; color: #4a4d56;
  border-top: 1px solid #d8d8d0; border-bottom: 1px solid #d8d8d0;
  padding: 7px 18px;
}
.harmless { font-size: 12px; font-weight: 700; line-height: 1.6; }
.harmless .ast { color: var(--red); }
.ast-note { font-size: 10.5px; }

/* deep-link mode: the destination, quietly, where the board would be */
#solo-city {
  color: #9a9da6;
  font-weight: 800; font-size: 14px; letter-spacing: 6px;
  margin: 10px 0 34px;
}

/* ---------- SBB departure board (city select) ---------- */
#city-board {
  margin: 26px 0 12px;
  background: #101216;
  border: 3px solid #1c1f26;
  box-shadow: 0 4px 0 rgba(16,19,28,.35), inset 0 0 22px rgba(0,0,0,.55);
  padding: 6px 8px;
  width: min(440px, 88%);
  z-index: 2;
}
.dep-head, .dep-row {
  display: grid;
  grid-template-columns: 52px 1fr 34px 96px;
  gap: 10px;
  align-items: center;
  text-align: left;
  font-family: inherit;
  letter-spacing: 1.5px;
}
.dep-head {
  color: #7d838f;
  font-size: 8.5px; font-weight: 800;
  padding: 2px 8px 5px;
  border-bottom: 1px solid #23262e;
}
.dep-head .dep-time { grid-column: 1 / 3; white-space: nowrap; }
.dep-row {
  width: 100%;
  background: none; border: none;
  color: #ffb400;
  font-size: 12px; font-weight: 800;
  padding: 6px 8px;
  cursor: pointer;
  transition: background .1s;
}
.dep-row + .dep-row { border-top: 1px solid #1a1d24; }
.dep-row:hover { background: #1a1d24; }
.dep-row.selected { background: #232a3d; box-shadow: inset 3px 0 0 #ffb400, inset 0 0 0 1px #2c3550; }
.dep-row.selected .dep-dest { color: #fff; }
.dep-row.locked { opacity: .45; cursor: default; }
.dep-row.locked:hover { background: none; }
.dep-row .dep-dest { white-space: nowrap; overflow: hidden; }
.dep-row .dep-gleis { text-align: center; }
.dep-row .dep-status {
  font-size: 9px; letter-spacing: 1px;
  color: #ff5d5d;
  text-align: right;
  white-space: nowrap;
}
.dep-row .dep-status.done { color: #7be36e; }
/* the chosen row blinks BOARDING, like the real thing */
.dep-row.selected .dep-status.done { animation: dep-blink 1.3s steps(1) infinite; }
@keyframes dep-blink { 55% { opacity: .2; } }

#start-btn {
  background: var(--blue); color: #fff;
  font-family: inherit; font-weight: 800; font-size: 13px;
  letter-spacing: 2.5px;
  border: none; padding: 14px 34px;
  cursor: pointer;
  transition: background .12s, transform .12s;
  z-index: 2;
}
#start-btn:hover { background: var(--blue-dark); transform: translateY(-2px); }

/* small resume-reset link under the start button */
#restart-link {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 10px;
  letter-spacing: 2px;
  color: #9a9da6;
  text-decoration: underline; text-underline-offset: 3px;
  z-index: 2;
}
#restart-link:hover { color: var(--ink); }


.foot {
  position: absolute; bottom: 9px; left: 0; right: 0;
  font-size: 9.5px; letter-spacing: 1.5px; color: #9a9da6;
}

/* ---------- Pigeon parade ---------- */
#title-parade {
  position: absolute; left: 0; right: 0; bottom: 24px;
  height: 92px;
  overflow: hidden;
  pointer-events: none;
}
.parade-group {
  position: absolute; bottom: 0; left: -380px;
  display: flex; align-items: flex-end; gap: 16px;
  animation: cross 14s linear infinite;
}
@keyframes cross { from { left: -380px; } to { left: 100%; } }
.parade-pigeon { animation: hop-r .42s ease-in-out infinite alternate; }
@keyframes hop-r {
  from { transform: scaleX(-1) translateY(0); }
  to { transform: scaleX(-1) translateY(-7px); }
}
.parade-pigeon-l { animation: hop-l .46s ease-in-out infinite alternate; }
@keyframes hop-l {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}
.parade-worker { margin-right: 34px; animation: run .3s ease-in-out infinite alternate; }
@keyframes run {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-5px) rotate(3deg); }
}

/* ---------- Decision ---------- */
#decision {
  background: radial-gradient(ellipse at 50% 58%, rgba(8,10,16,.18) 0%, rgba(8,10,16,.86) 78%);
  color: #f2f2ee;
  gap: 26px;
}
.decision-text {
  font-size: 15px; line-height: 1.8; letter-spacing: .5px; font-weight: 600;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
#close-cage-btn {
  background: var(--red); color: #fff;
  font-family: 'Archivo Black', 'Helvetica Neue', sans-serif;
  font-size: 19px; letter-spacing: 2.5px;
  border: none; padding: 20px 40px;
  cursor: pointer;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226,0,26,.55); }
  50% { box-shadow: 0 0 0 16px rgba(226,0,26,0); }
}
#close-cage-btn:hover { background: #ff0f2a; }

/* ---------- Game over ---------- */
#end {
  /* full-viewport, one black. The layout adapts to its content: a single
     centered column normally, type scaled to the viewport so long and
     short endings both compose; on height-starved landscape phones it
     splits into two columns (ending left, ask right). */
  position: fixed; inset: 0;
  z-index: 30;
  background: #000;
  color: #f2f2ee;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: clamp(12px, 2.6vh, 22px);
  padding: 24px;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  overflow-y: auto;
}
/* landscape phones: not enough height to stack — ending left, ask right */
@media (max-height: 540px) and (min-width: 640px) {
  #end {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, auto);
    grid-template-areas:
      "title donate"
      "msg   donate"
      "again donate";
    align-content: center;
    align-items: center;
    justify-content: center;
    column-gap: clamp(26px, 5vw, 64px);
    row-gap: 12px;
  }
  #end #go-title { grid-area: title; align-self: end; }
  #end #go-message { grid-area: msg; max-width: 46ch; }
  #end #again-btn { grid-area: again; justify-self: center; align-self: start; margin-top: 2px; }
  #end #donate-card { grid-area: donate; align-self: center; margin-top: 0; }
  /* the epilogue has no donate column — collapse back to one column */
  #end.epilogue {
    grid-template-columns: minmax(0, auto);
    grid-template-areas: "title" "msg" "again";
  }
  #end #next-btn { grid-area: again; justify-self: center; align-self: start; margin-top: 2px; }
}
#go-title {
  font-family: 'Archivo Black', 'Helvetica Neue', sans-serif;
  font-size: clamp(36px, min(10vh, 10vw), 72px); line-height: 1;
  letter-spacing: 2px;
  color: #fff;
  animation: go-in 1.3s ease both;
}
@keyframes go-in {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
#go-message {
  font-size: clamp(12.5px, min(2.5vh, 3.6vw), 17px); line-height: 1.7;
  font-weight: 600;
  color: #c6ccd6;
  letter-spacing: .5px;
  max-width: min(620px, 92vw);
  animation: msg-in 1.5s ease 2.6s both;
}
#go-message span { display: block; }
#go-message span + span { margin-top: clamp(10px, 2vh, 20px); }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
#again-btn {
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-weight: 800; font-size: 13px; letter-spacing: 2.5px;
  border: none; padding: 14px 34px;
  cursor: pointer;
  transition: background .12s, transform .12s;
  animation: msg-in 1.2s ease 4.2s both;
}
#again-btn:hover { background: #fff; transform: translateY(-2px); }

/* mid-journey epilogue: the line continues — a NEXT button instead of the
   donate ask (the ask waits for the finale) */
#next-btn {
  background: var(--blue); color: #fff;
  font-family: inherit; font-weight: 800; font-size: 13px; letter-spacing: 2.5px;
  border: none; padding: 14px 34px;
  cursor: pointer;
  transition: background .12s, transform .12s;
  animation: msg-in 1.2s ease 3.4s both;
}
#next-btn:hover { background: var(--blue-dark); transform: translateY(-2px); }
#end:not(.epilogue) #next-btn { display: none; }
#end.epilogue #again-btn,
#end.epilogue #donate-card { display: none; }
#go-message .onward { display: block; margin-top: clamp(10px, 2vh, 20px); color: #8d96a1; }

/* ---------- Touch controls ---------- */
#touch-controls {
  position: absolute; inset: 0;
  display: none;
  pointer-events: none;
  z-index: 7;
}
body.touch #touch-controls { display: block; }
body.touch .controls { display: none; }
.tc-btn {
  pointer-events: auto;
  position: absolute; bottom: 16px;
  width: 64px; height: 64px;
  padding: 0;
  border-radius: 0;
  border: 3px solid #10131c;
  background: rgba(247,247,242,.85);
  box-shadow: 4px 4px 0 rgba(16,19,28,.55);
  display: grid; place-items: center;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tc-btn canvas { image-rendering: pixelated; }
.tc-btn.held {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 rgba(16,19,28,.55);
  background: #c3cdfa;
}
#tc-left { left: 14px; }
#tc-right { left: 94px; }
#tc-jump { right: 14px; width: 74px; height: 74px; background: rgba(226,0,26,.88); }
#tc-jump.held { background: #ff2238; }

/* ---------- Rotate hint (portrait phones) ---------- */
#rotate-hint {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  background: var(--paper); color: var(--ink);
  font-weight: 800; font-size: 13px; letter-spacing: 2px;
  text-align: center;
  z-index: 30;
}
@media (orientation: portrait) {
  /* Phones can't always rotate (orientation lock, in-app webviews), so a
     "please rotate" wall is a dead end. Instead we render rotated: spin the
     whole frame 90° and ask the player to hold the phone sideways. If they
     CAN rotate, the OS flips to landscape, this query stops matching and the
     game renders natively — either way it ends up landscape. */
  body.touch #frame {
    position: fixed;
    top: 50%; left: 50%;
    width: min(100vh, calc(100vw * (16 / 9)));
    width: min(100dvh, calc(100dvw * (16 / 9)));
    height: auto;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
  }
  /* The rotated frame is physically small — reuse the compact title layout
     (the max-height media query below can't see it, the viewport is "tall"). */
  body.touch #title { gap: 7px; padding: 48px 14px 14px; }
  body.touch #title h1 { font-size: 52px; letter-spacing: -2px; }
  body.touch #h1-perch { zoom: .65; }
  body.touch .tagline { font-size: 10px; padding: 4px 12px; letter-spacing: 4px; }
  body.touch .harmless { font-size: 10.5px; line-height: 1.4; }
  body.touch #start-btn { padding: 10px 24px; font-size: 11.5px; }
  body.touch #title-parade { height: 58px; bottom: 12px; }
  body.touch #title-parade .parade-group { zoom: .65; }
  body.touch #city-board { width: min(340px, 92%); padding: 3px 5px; margin: 12px 0 5px; }
  body.touch .dep-head { font-size: 7px; padding: 1px 6px 3px; }
  body.touch .dep-row { font-size: 9.5px; padding: 2.5px 6px; grid-template-columns: 38px 1fr 26px 74px; gap: 7px; }
  body.touch .dep-row .dep-status { font-size: 7.5px; }
  body.touch .foot { display: none; }
  body.touch #lang-switch { top: 12px; right: 12px; }
  body.touch .lang-btn { font-size: 9px; padding: 5px 9px; }
  body.touch .decision-text { font-size: 12px; }
  body.touch #close-cage-btn { font-size: 14px; padding: 14px 22px; letter-spacing: 2px; }
  body.touch #again-btn { padding: 10px 24px; font-size: 11.5px; }
  body.touch #credits-card { padding: 12px 16px 10px; width: min(460px, 94%); }
  body.touch #credits-title { font-size: 14px; margin-bottom: 7px; }
  body.touch #credits-card .help-head { font-size: 8.5px; margin-bottom: 6px; }
  body.touch #credits-card .help-block { margin-bottom: 7px; }
  body.touch .cr-text { font-size: 10px; line-height: 1.55; margin-bottom: 6px; }
  body.touch .cr-list li { font-size: 10px; margin: 4px 0; padding-left: 14px; }
  body.touch .cr-note { font-size: 8.5px; margin: 2px 0 7px; }
  body.touch #credits-close { padding: 6px 16px; font-size: 10px; }
  body.touch #donate-card { margin-top: 2px; padding: 10px 16px 10px; max-width: 420px; }
  body.touch #donate-card br { display: none; }
  body.touch #donate-title { font-size: 8.5px; letter-spacing: 3px; margin-bottom: 5px; }
  body.touch #donate-text { font-size: 10px; line-height: 1.5; margin-bottom: 8px; }
  body.touch #donate-btn { padding: 7px 18px; font-size: 10px; }
  body.touch #donate-alt { font-size: 8.5px; margin-top: 6px; }
  body.touch #next-btn { padding: 10px 24px; font-size: 11.5px; }
  body.touch #restart-link { font-size: 8.5px; }
  body.touch #brief-card { width: min(360px, 92%); }
  body.touch #brief-head { font-size: 9px; padding: 7px 14px; letter-spacing: 2px; }
  body.touch #brief-title { font-size: 15px; padding: 12px 14px 0; }
  body.touch #brief-task { font-size: 11px; line-height: 1.55; padding: 8px 14px 0; }
  body.touch #brief-go { font-size: 8.5px; padding: 12px 14px 11px; }
  /* "Hold your device sideways" nudge — shown briefly, then JS hides it */
  body.touch #rotate-hint { display: flex; }
  body.touch.turn-dismissed #rotate-hint { display: none; }
}
#rotate-pigeon canvas { image-rendering: pixelated; }
#rotate-pigeon { line-height: 0; animation: hint-bob 1.8s ease-in-out infinite; }
@keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.rot-icon { font-size: 38px; animation: rot-wiggle 1.7s ease-in-out infinite; }
@keyframes rot-wiggle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }

/* ---------- Small screens (phones, landscape) ---------- */
@media (max-height: 560px) {
  #title { gap: 7px; padding: 48px 14px 14px; }
  #title h1 { font-size: 52px; letter-spacing: -2px; }
  #h1-perch { zoom: .65; }
  .tagline { font-size: 10px; padding: 4px 12px; letter-spacing: 4px; }
  .harmless { font-size: 10.5px; line-height: 1.4; }
  #start-btn { padding: 10px 24px; font-size: 11.5px; }
  #title-parade { height: 58px; bottom: 12px; }
  #title-parade .parade-group { zoom: .65; }
  #city-board { width: min(340px, 92%); padding: 3px 5px; margin: 12px 0 5px; }
  .dep-head { font-size: 7px; padding: 1px 6px 3px; }
  .dep-row { font-size: 9.5px; padding: 2.5px 6px; grid-template-columns: 38px 1fr 26px 74px; gap: 7px; }
  .dep-row .dep-status { font-size: 7.5px; }
  .foot { display: none; }
  #lang-switch { top: 12px; right: 12px; }
  .lang-btn { font-size: 9px; padding: 5px 9px; }
  .decision-text { font-size: 12px; }
  #close-cage-btn { font-size: 14px; padding: 14px 22px; letter-spacing: 2px; }
  #again-btn { padding: 10px 24px; font-size: 11.5px; }
  #donate-card { margin-top: 2px; padding: 10px 16px 10px; max-width: 420px; }
  #donate-card br { display: none; }
  #donate-title { font-size: 8.5px; letter-spacing: 3px; margin-bottom: 5px; }
  #donate-text { font-size: 10px; line-height: 1.5; margin-bottom: 8px; }
  #donate-btn { padding: 7px 18px; font-size: 10px; }
  #donate-alt { font-size: 8.5px; margin-top: 6px; }
}

/* ---------- Fader ---------- */
#fader {
  /* fades the WHOLE viewport to the end screen's pure black */
  position: fixed; inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 2.1s ease;
  pointer-events: none;
  z-index: 8;
}
#fader.on { opacity: 1; }

/* ---------- Help button (title, top-left — mirrors the language switch) ---------- */
/* ---------- Corner controls ----------
   Top-left: one segmented, game-style group — ♪ | ? CONTROLS | ♥ CREDITS —
   sharing borders like the language switch, with the hard offset shadow the
   rest of the UI wears. Mid-game only ♪ remains and the group hops to the
   top-right, next to the ✕ exit. */
#corner-left {
  position: absolute; top: 20px; left: 22px;
  display: flex;
  z-index: 12;
  box-shadow: 3px 3px 0 rgba(16,19,28,.35);
}
#corner-left button {
  height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-weight: 800; font-size: 10px; letter-spacing: 2px;
  border: 2px solid var(--ink);
  padding: 0 12px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
#corner-left button + button { border-left: none; }
#corner-left button { gap: 7px; }
.btn-icon { display: block; image-rendering: pixelated; }
#corner-left button:hover .btn-icon,
#exit-btn:hover .btn-icon { filter: invert(1); }
#music-btn { width: 34px; padding: 0; position: relative; }
#music-btn.off .btn-icon { opacity: .45; }
#music-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
#credits-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
#music-btn.off { color: var(--red); }
#music-btn.off::after {
  content: ''; position: absolute;
  left: 5px; right: 5px; top: 50%; height: 2px;
  background: var(--red); transform: rotate(-24deg);
  pointer-events: none;
}
#music-btn.off:hover { background: var(--red); color: #fff; border-color: var(--red); }
#music-btn.off:hover::after { background: #fff; }

/* mid-game: only the note survives, and the group moves beside the exit */
body:has(#title.hidden) #corner-left { left: auto; right: 64px; }
body:has(#title.hidden) #help-btn,
body:has(#title.hidden) #credits-btn { display: none; }

#exit-btn {
  position: absolute; top: 20px; right: 22px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  font-size: 15px; line-height: 1; font-weight: 800;
  border: 2px solid var(--ink);
  cursor: pointer;
  z-index: 12;
  box-shadow: 3px 3px 0 rgba(16,19,28,.35);
  transition: background .12s, color .12s;
}
#exit-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
/* the exit is hidden on the title and the decision moment, but stays on a
   city's ending screen so you can leave and continue later */
body:has(#title:not(.hidden)) #exit-btn,
body:has(#decision:not(.hidden)) #exit-btn { display: none; }
body:has(#end:not(.hidden)) #corner-left,
body:has(#decision:not(.hidden)) #corner-left { display: none; }
/* the ending overlay sits at z-index 30; lift the exit above it so it
   isn't painted behind the full-screen ending */
body:has(#end:not(.hidden)) #exit-btn { z-index: 31; }

/* ---------- Help overlay ---------- */
/* ---------- Arrival briefing (the work order) ---------- */
#brief {
  background: rgba(8,10,16,.55);
  z-index: 18;
  padding: 20px;
}
#brief-card {
  background: #f7f7f2; color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(16,19,28,.45);
  width: min(430px, 92%);
  text-align: left;
  transform: rotate(-.5deg);
  animation: title-in .35s cubic-bezier(.2,1.4,.4,1) both;
}
#brief-head {
  background: var(--blue); color: #fff;      /* per-city: set inline from the palette */
  font-size: 11px; font-weight: 800; letter-spacing: 3px;
  padding: 9px 18px;
}
#brief-title {
  font-family: 'Archivo Black', 'Helvetica Neue', sans-serif;
  font-size: 19px; letter-spacing: 1px;
  padding: 16px 18px 0;
}
#brief-task {
  font-size: 13px; line-height: 1.65; font-weight: 600;
  letter-spacing: .3px;
  padding: 10px 18px 0;
  max-width: 44ch;
}
#brief-go {
  font-size: 9.5px; font-weight: 800; letter-spacing: 2.5px;
  color: #8a8d96;
  padding: 16px 18px 14px;
  animation: brief-blink 1.4s steps(2, start) infinite;
}
@keyframes brief-blink { to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  #brief-go { animation: none; }
}
body.touch #brief-card { transform: rotate(-.5deg) scale(.92); }

#help-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,16,.74);
  z-index: 20;
  padding: 20px;
}
#help-card {
  position: relative;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(16,19,28,.45);
  padding: 26px 30px 24px;
  width: min(460px, 92%);
  text-align: left;
  animation: title-in .35s cubic-bezier(.2,1.4,.4,1) both;
}
#help-x {
  position: absolute; top: 6px; right: 10px;
  background: none; border: none; color: var(--ink);
  font-size: 26px; line-height: 1; font-weight: 800;
  cursor: pointer; padding: 4px;
}
#help-x:hover { color: var(--red); }
#help-title {
  font-family: 'Archivo Black', 'Helvetica Neue', sans-serif;
  font-size: 22px; letter-spacing: 1px; color: var(--blue);
  margin-bottom: 16px;
}
.help-block { margin-bottom: 16px; }
/* Show only the controls for the current device: keys on desktop, the
   on-screen buttons on touch. */
.help-block-mobile { display: none; }
body.touch .help-block-desktop { display: none; }
body.touch .help-block-mobile { display: block; }
.help-head {
  font-size: 10px; font-weight: 800; letter-spacing: 3px;
  color: #8a8d96;
  border-bottom: 1px solid #d8d8d0;
  padding-bottom: 5px; margin-bottom: 10px;
}
.help-row {
  display: flex; align-items: center; gap: 14px;
  margin: 9px 0;
}
.help-keys { display: flex; align-items: center; gap: 5px; min-width: 132px; }
.help-or { color: #9a9da6; font-size: 11px; font-weight: 700; }
.help-act { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
#help-card kbd {
  font-family: inherit; font-weight: 800; font-size: 12px;
  min-width: 26px; height: 26px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(16,19,28,.45);
}
#help-card kbd.kbd-wide { min-width: 56px; }
.help-pad {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  background: rgba(247,247,242,1); color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(16,19,28,.45);
}
.help-pad-jump { background: var(--red); color: #fff; }
#help-close {
  margin-top: 6px;
  background: var(--blue); color: #fff;
  font-family: inherit; font-weight: 800; font-size: 12px; letter-spacing: 2px;
  border: none; padding: 11px 26px;
  cursor: pointer;
  transition: background .12s;
}
#help-close:hover { background: var(--blue-dark); }

/* ---------- Credits overlay ---------- */
#credits-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,16,.74);
  z-index: 20;
  padding: 20px;
}
#credits-card {
  position: relative;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(16,19,28,.45);
  padding: 26px 30px 24px;
  width: min(500px, 92%);
  max-height: 92%;
  overflow-y: auto;
  text-align: left;
  animation: title-in .35s cubic-bezier(.2,1.4,.4,1) both;
}
#credits-x {
  position: absolute; top: 6px; right: 10px;
  background: none; border: none; color: var(--ink);
  font-size: 26px; line-height: 1; font-weight: 800;
  cursor: pointer; padding: 4px;
}
#credits-x:hover { color: var(--red); }
#credits-title {
  font-family: 'Archivo Black', 'Helvetica Neue', sans-serif;
  font-size: 22px; letter-spacing: 1px; color: var(--blue);
  margin-bottom: 16px;
}
.cr-text {
  font-size: 12.5px; line-height: 1.7; font-weight: 600;
  margin: 0 0 8px;
}
.cr-contact { display: block; margin-top: 10px; }
.cr-text a, .cr-list a { color: var(--blue); font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--blue); }
.cr-text a:hover, .cr-list a:hover { color: var(--red); border-color: var(--red); }
.cr-list {
  list-style: none; padding: 0; margin: 4px 0 0;
}
.cr-list li {
  font-size: 12.5px; font-weight: 700;
  margin: 7px 0;
  padding-left: 18px;
  position: relative;
}
.cr-list li::before { content: '→'; position: absolute; left: 0; color: var(--red); font-weight: 800; }
.cr-note {
  font-size: 10.5px; color: #8a8d96; font-weight: 600;
  line-height: 1.5;
  margin: 4px 0 14px;
}
#credits-close {
  margin-top: 2px;
  background: var(--blue); color: #fff;
  font-family: inherit; font-weight: 800; font-size: 12px; letter-spacing: 2px;
  border: none; padding: 11px 26px;
  cursor: pointer;
  transition: background .12s;
}
#credits-close:hover { background: var(--blue-dark); }

/* ---------- Donation card (end screen) ----------
   No box, no fill: a hairline rule and text, so the end screen keeps its
   color. It fades in only after the ending has had its moment. */
#donate-card {
  /* its own quiet box — deliberately more modest than the ending text */
  border: 1px solid rgba(247,247,242,.22);
  padding: 16px 22px 14px;
  max-width: 330px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .9s ease, transform .9s ease;
  pointer-events: none;
}
#donate-card.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#donate-title {
  font-size: 9px; font-weight: 800; letter-spacing: 3px;
  color: var(--red);
  margin-bottom: 8px;
}
#donate-text {
  font-size: 10.5px; font-weight: 600; line-height: 1.6;
  color: #b9c0c9;
  margin: 0 0 11px;
}
#donate-btn {
  display: inline-block;
  background: var(--red); color: #fff;
  font-weight: 800; font-size: 10.5px; letter-spacing: 2px;
  text-decoration: none;
  padding: 8px 24px;
  transition: transform .12s, background .12s;
}
#donate-btn:hover { background: #b1000f; transform: translateY(-1px); }
#donate-alt {
  font-size: 9px; color: #7d848f; font-weight: 600;
  margin: 9px 0 0;
}
#donate-alt a { color: #cfd6df; font-weight: 700; }
#donate-alt a:hover { color: #fff; }

@media (max-height: 560px) {
  #corner-left { top: 12px; left: 12px; }
  #corner-left button { height: 28px; font-size: 9px; padding: 0 9px; }
  #music-btn { width: 28px; padding: 0; font-size: 13px; }
  body:has(#title.hidden) #corner-left { left: auto; right: 50px; }
  #exit-btn { top: 12px; right: 12px; width: 28px; height: 28px; font-size: 13px; }
  #lang-switch .lang-btn { height: 28px; }
  #lang-icon { width: 28px; height: 28px; }
  #help-card { padding: 18px 20px; }
  #credits-card { padding: 12px 16px 10px; width: min(460px, 94%); }
  #help-title { font-size: 18px; }
  #credits-title { font-size: 14px; margin-bottom: 7px; }
  #credits-card .help-head { font-size: 8.5px; margin-bottom: 6px; }
  #credits-card .help-block { margin-bottom: 7px; }
  .cr-text { font-size: 10px; line-height: 1.55; margin-bottom: 6px; }
  .cr-list li { font-size: 10px; margin: 4px 0; padding-left: 14px; }
  .cr-note { font-size: 8.5px; margin: 2px 0 7px; }
  #credits-close { padding: 6px 16px; font-size: 10px; }
}

/* ---------- No-JS fallback ---------- */
.noscript-note {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 24px;
  background: var(--paper); color: var(--ink);
  text-align: center;
}
.noscript-note h2 {
  font-family: 'Archivo Black', 'Helvetica Neue', sans-serif;
  font-size: 28px; color: var(--blue); letter-spacing: 1px;
}
.noscript-note p { max-width: 560px; font-size: 15px; line-height: 1.7; font-weight: 600; }
@media (orientation: portrait) {
  body.touch #corner-left { top: 12px; left: 12px; }
  body.touch #corner-left button { height: 28px; font-size: 9px; padding: 0 9px; }
  body.touch #music-btn { width: 28px; padding: 0; font-size: 13px; }
}

/* Extreme heights (in-app debug bars, tiny landscape phones): shrink the
   title composition until it genuinely fits under the corner buttons. */
@media (max-height: 380px) {
  #title { padding-top: 44px; gap: 5px; }
  #title h1 { font-size: 38px; letter-spacing: -1px; }
  #h1-perch { zoom: .5; }
  .harmless { display: none; }
  .controls { display: none; }
  .tagline { font-size: 9px; letter-spacing: 3px; padding: 3px 10px; }
  #city-board { zoom: .8; margin: 8px 0 3px; }
  #start-btn { padding: 8px 18px; font-size: 10.5px; }
  #title-parade { display: none; }
}