:root {
  color-scheme: light;
  --ink: #143f48;
  --paper: #fff7e5;
  --red: #b9412c;
  --stripe: repeating-linear-gradient(127deg,#b74735 0 13px,#fff5df 13px 23px,#2d6870 23px 36px,#fff5df 36px 46px);
  font-family: "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--ink); }
button { color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
button:focus-visible { outline: 3px solid #ffbc36; outline-offset: -3px; }
button:not(:disabled):active { transform: translateY(2px); }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linejoin: round; stroke-linecap: round; }
.symbols, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#game { display: grid; height: 100%; grid-template-rows: auto minmax(0,1fr) auto; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px clamp(10px, 2.4vw, 28px); }
header { background: var(--ink); color: var(--paper); box-shadow: 0 2px 0 #10333a; z-index: 1; }
.brand, .instruments, .meter, .route, .action, .lift { display: flex; align-items: center; }
.brand { gap: 10px; font: bold clamp(16px, 2.6vw, 25px)/1 Georgia, serif; }
.roundel { width: 33px; height: 33px; display: grid; place-content: center; border: 1px solid #b2cebf; border-radius: 50%; color: #ffc57c; }
.roundel svg { width: 21px; }
.instruments, .meter { gap: 6px; }
.meter { margin-right: 8px; color: #ffdb9e; }
.meter svg { width: 21px; }
.tool { border: 1px solid #68878b; border-radius: 12px; background: #244f57; color: var(--paper); width: 44px; height: 44px; display: grid; place-items: center; }
.tool:disabled { opacity: .45; }
.stage { position: relative; isolation: isolate; background: #91d9da url('./coast.webp') center bottom/cover; overflow: hidden; }
canvas { width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.screen { position: absolute; inset: 0; display: grid; align-items: center; justify-items: center; background: #153a455e; overflow: auto; padding: 12px; }
.screen[hidden] { display:none; }
.screen.intro { justify-items: start; padding: clamp(12px, 3.8vw, 60px); background: linear-gradient(90deg,#173d4288,transparent 68%),url('./cover.webp') center 2%/cover; }
.postcard { position: relative; width: min(100%, 365px); max-height:100%; overflow:auto; padding: clamp(16px, 2.4vw, 25px); border: 1px solid #fff6df; border-radius: 6px 18px 12px 6px; background: var(--paper); box-shadow: 2px 6px 0 #153b413b, 0 12px 40px #1b363645; }
.postcard::before { content: ""; display: block; height: 6px; position: absolute; inset: 0 0 auto; background: var(--stripe); border-radius: 6px 18px 0 0; }
.overline { color: #963a29; font-size: 10px; letter-spacing: .17em; text-transform: uppercase; font-weight: 800; }
h1 { font: bold clamp(28px,3.4vw,42px)/1.02 Georgia,serif; margin: 9px 0 12px; letter-spacing: -.045em; }
.postcard p { font-size: clamp(14px,1.55vw,17px); margin: 0 0 17px; line-height: 1.45; }
.action, .lift { gap: 12px; justify-content: center; border: 1px solid #983420; border-radius: 13px; background: var(--red); color: white; box-shadow: 0 3px 0 #853521; min-height: 46px; padding: 8px 16px; font-weight: bold; }
.action svg { width: 20px; }
.action { width: 100%; }
.action svg { flex:none; }
#selection label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: bold; }
#choose-level { width: 100%; min-height: 44px; background: #fffdf4; border: 1px solid #9cae9d; border-radius: 9px; padding: 8px; color: var(--ink); font: 600 14px system-ui,sans-serif; }
#choose-level:focus-visible { outline: 3px solid #d99c36; outline-offset: 2px; }
#level-hint { font-size: 12px; line-height: 1.4; color: #53615a; margin: 7px 0 13px; }
.postcard #journey-summary { font-size: 10px; color: #53615a; margin: 12px 0 0; line-height: 1.25; }
.secondary, .text-action { width:100%; min-height:44px; border:1px solid #a9b3a4; border-radius:10px; margin-top:9px; background:#eef0e4; font-weight:bold; font-size:13px; }
.text-action { border:0; background:transparent; margin-top:3px; text-decoration:underline; text-underline-offset:3px; }
.preview-pilot { position:absolute; pointer-events:none; right:9%; top:26%; width:clamp(170px,32vw,420px); filter:drop-shadow(0 14px 10px #234b4326); }
.screen.intro:not([data-theme="coast"]) { background:linear-gradient(90deg,#173d4230,transparent 68%),var(--preview) center bottom/cover; }
.flight-status { position:absolute; z-index:1; top:10px; left:10px; right:10px; display:flex; align-items:flex-start; gap:6px; flex-direction:column; pointer-events:none; }
#shield-status, #bonus-message { display:inline-flex; align-items:center; gap:6px; max-width:100%; background:#fff7e5f0; color:#15494e; border:1px solid #81cfc1; border-radius:11px; padding:6px 9px; font-size:12px; font-weight:bold; box-shadow:0 2px 5px #17465220; }
#shield-status svg { width:17px; height:17px; }
#game:not([data-phase="flying"]) .flight-status { display:none; }
#game[data-theme="underwater"] { --ink:#103e50; --red:#a44c29; }
#game[data-theme="aurora"] { --ink:#253e56; --red:#895173; }
footer { background: var(--paper); min-height: 60px; padding-bottom: max(7px,env(safe-area-inset-bottom)); border-top: 3px solid #d8c7a8; }
.route { flex-wrap: wrap; width: min(38vw, 210px); column-gap: 8px; row-gap: 4px; line-height: 1.05; }
#region { flex-basis: 100%; font: bold clamp(14px,2vw,19px)/1.12 Georgia,serif; }
.route-line { flex: 1; height: 6px; border-radius: 4px; overflow: hidden; background: #d6ddd0; }
.route-line i { display: block; width: 0; height: 100%; background: #287779; }
#progress { font-size: 10px; font-variant-numeric: tabular-nums; }
.lift { margin-left: auto; background: var(--ink); border-color: #133940; box-shadow: 0 3px 0 #0c292f; min-width: 116px; }
.lift svg { width: 19px; }
kbd { color: #e2ebe3; border: 1px solid #729394; padding: 3px 5px; border-radius: 4px; font: normal 11px system-ui,sans-serif; }
#hint { text-align: right; max-width: 220px; font-size: 13px; color: #435d5e; }
#game[data-phase="flying"] #hint, #game:not([data-phase="flying"]) .lift { display: none; }
@media (hover:hover) { .tool:hover:not(:disabled), .lift:hover { background: #32626a; } .action:hover { background: #a83623; } }
@media (max-width: 540px) and (min-height: 390px) {
  .screen.intro { align-items: end; justify-items: stretch; background: linear-gradient(0deg,#153e4860,transparent 60%),url('./cover.webp') 57% top/auto 70% no-repeat,#5ba6aa; }
  .intro .postcard { width: 100%; }
  .screen.intro:not([data-theme="coast"]) { background:var(--preview) center/auto 100%; }
  .preview-pilot { top:5%; right:15%; width:70%; max-height:32%; object-fit:contain; }
  .postcard { padding:15px 18px; }
  .postcard p { font-size:14px; margin-bottom:12px; }
  h1 { font-size:32px; margin-top:7px; margin-bottom:8px; }
  .intro .postcard { max-height:78%; }
}
@media (pointer:coarse) { kbd { display: none; } }
@media (max-width: 380px) { .roundel { display: none; } header, footer { gap: 5px; padding-inline: 8px; } #hint { max-width: 160px; } }
@media (max-height: 470px) {
  .screen.intro { padding: 9px 3vw; }
  .postcard { width: min(100%, 365px); padding: 13px 17px; }
  h1 { font-size: 28px; margin: 5px 0; }
  .postcard p { font-size: 14px; margin-bottom: 9px; }
  header, footer { min-height: 0; padding-block: 2px; } .lift { min-height: 44px; }
  .screen.intro .postcard { max-height:100%; }
  .preview-pilot { top:13%; right:6%; width:28%; }
  .postcard #journey-summary { margin-top:8px; }
}
.reward { display:flex; align-items:center; gap:12px; margin:12px 0; color:#855524; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }
.reward svg { flex:none; width:54px; height:54px; padding:12px; color:#775025; background:linear-gradient(135deg,#fff0a6,#efb44c); border:2px solid #fff8cf; outline:2px solid #d99737; border-radius:50%; box-shadow:0 4px 0 #b97c33; }
.victory .postcard { border-color:#ffe299; box-shadow:0 0 0 5px #ffd06033,0 12px 40px #1b363645; animation:prize-arrival .6s ease-out both; }
#game[data-phase="delivered"] footer { display:none; }
@keyframes prize-arrival { from { opacity:0; transform:translateY(16px) scale(.96); } to { opacity:1; transform:none; } }
@media(max-height:620px) { .reward { gap:9px; margin-block:8px; font-size:10px; }.reward svg { width:36px; height:36px; padding:7px; } }
@media(max-height:470px) and (min-width:541px) {
  .victory .postcard { width:min(610px,100%); display:grid; grid-template-columns:1fr 1fr; gap:6px 22px; align-items:center; }
  .victory #eyebrow { display:none; }.victory .reward { grid-column:1; grid-row:1; margin:0; }
  .victory h1 { grid-column:1; grid-row:2; }.victory #message { grid-column:1; grid-row:3; font-size:12px; margin:0; }
  .victory .action { grid-column:2; grid-row:1; }.victory .secondary { grid-column:2; grid-row:2; margin:0; }
  .victory .text-action { grid-column:2; grid-row:3; margin:0; }.victory #journey-summary { grid-column:1/-1; margin:0; }
}
@media(prefers-reduced-motion:reduce) { .victory .postcard { animation:none; } }