:root {
  color-scheme: dark;
  --ink: #1d2e38; --paper: #fff3d4; --yellow: #ffd060; --mint: #8ce2bd; --accent: #ef8262;
  font-family: "Trebuchet MS", system-ui, sans-serif; color: var(--paper);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--ink); }
button, select { font: inherit; }
button { cursor: pointer; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
[hidden] { display: none !important; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
#game { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
header { display: flex; justify-content: space-between; align-items: center; padding: max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left)); gap: 12px; background: var(--ink); border-bottom: 2px solid #41515a; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand > svg { color: var(--yellow); width: 32px; height: 32px; }
.brand small { display: block; color: #b6c6c6; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.brand strong { font-size: clamp(17px,2.4vw,25px); line-height: 1.05; font-weight: 900; letter-spacing: -.05em; }
.tools { display: flex; gap: 5px; }
.tools button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #66757a; background: #31434d; border-radius: 12px; box-shadow: 0 2px 0 #101e26; }
.tools [aria-pressed="true"] { background: #425e50; color: #baf4bd; }
.stage { min-height: 0; position: relative; overflow: hidden; isolation: isolate; background: #263541; }
canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.hud { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; align-items: start; gap: 7px; pointer-events: none; }
.floor-meter, .score-meter { color: var(--ink); background: var(--paper); box-shadow: 0 3px 0 #11212855; border: 2px solid var(--ink); border-radius: 10px; padding: 5px 11px; }
.hud span { display: block; font-size: 9px; font-weight: 900; letter-spacing: .09em; line-height: 1.1; }
.floor-meter strong, .score-meter strong { font-weight: 900; font-size: 25px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.floor-meter small { margin-left: 4px; font-weight: 700; font-size: 11px; }
.score-meter { background: #d5e7dd; }
#combo { margin-left: auto; transform: rotate(3deg); color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 10px; padding: 5px 10px; min-width: 65px; text-align: center; box-shadow: 2px 3px 0 #10202c88; }
#combo strong { font-size: 25px; font-weight: 900; line-height: .95; }
#combo span { font-size: 8px; margin-top: 3px; }
#combo-time { display: block; width: 100%; height: 3px; margin-top: 4px; accent-color: var(--ink); border: 0; background: #b98932; }
#combo-time::-webkit-progress-bar { background: #b98932; } #combo-time::-webkit-progress-value { background: var(--ink); }
.powers { position: absolute; top: 76px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 5px; pointer-events: none; }
.powers span { font-size: 11px; font-weight: bold; color: var(--ink); background: var(--mint); border: 1px solid var(--ink); padding: 5px 8px; border-radius: 9px; }
#clock { background: #d9c5ff; }
#announcement { position: absolute; top: 115px; left: 12px; right: 12px; margin: 0; text-align: center; font-size: 13px; font-weight: 800; color: var(--paper); text-shadow: 1px 2px 2px var(--ink); pointer-events: none; }
.screen { position: absolute; inset: 0; display: grid; align-items: safe center; justify-items: center; padding: 16px; overflow: auto; background: #0b1b2b88; overscroll-behavior: contain; }
.screen.intro { justify-items: start; padding-inline: clamp(16px,4vw,50px); background: linear-gradient(90deg,#10212de0, #13283455 70%); }
.postcard { position: relative; width: min(350px,100%); padding: clamp(18px,2.6vw,28px); border: 2px solid #fff7df; border-radius: 5px 25px 8px 25px; color: var(--ink); background: var(--paper); box-shadow: 5px 6px 0 #102029aa; }
.postcard::before { content: ""; position: absolute; left: 24px; top: -5px; width: 78px; height: 8px; border: 1px solid var(--ink); background: var(--yellow); transform: rotate(-3deg); }
.eyebrow { margin: 0 0 9px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .10em; color: #a14c32; }
h1 { margin: 0 0 13px; font: 900 clamp(31px,4.8vw,61px)/.94 "Arial Black", system-ui, sans-serif; letter-spacing: -.075em; text-transform: uppercase; }
#message { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
#selection label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 900; }
select { color-scheme: light; background: #fffaf0; color: var(--ink); border: 2px solid #98aba3; border-radius: 9px; min-height: 44px; padding: 8px 10px; width: 100%; font-weight: bold; font-size: 13px; }
#stage-hint { color: #495b59; font-size: 12px; line-height: 1.4; margin: 9px 0 13px; }
.primary { width: 100%; min-height: 48px; padding: 10px 12px; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 12px; font-weight: 900; box-shadow: 0 4px 0 #9a622d; }
.primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #9a622d; }
.other-actions { display: flex; gap: 8px; }
.other-actions button { flex: 1; min-height: 44px; color: var(--ink); border: 1px solid #9eaca0; background: transparent; border-radius: 9px; padding: 8px; font-size: 12px; font-weight: 700; margin-top: 13px; }
#tip { font-size: 11px; color: #546560; line-height: 1.5; margin: 14px 0 0; }
.controls { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background: #202f39; border-top: 2px solid #5a6767; user-select: none; -webkit-user-select: none; }
.directions { display: flex; gap: 7px; }
.movement, .jump { display: flex; justify-content: center; align-items: center; gap: 8px; border: 1px solid #dae8dd; border-radius: 13px; height: 56px; box-shadow: 0 4px 0 #081923, inset 0 1px 0 #fff7; touch-action: none; }
.movement { width: 66px; background: linear-gradient(#495e68,#33474f); color: #f0f7e5; }
.jump { width: 175px; background: linear-gradient(#ffd975,#edb953); color: var(--ink); border-color: #ffe9ac; font-size: 22px; font-weight: 900; box-shadow: 0 4px 0 #985f2e; }
.movement.held, .jump.held, .movement:active, .jump:active { transform: translateY(3px); box-shadow: 0 1px 0 #081923, inset 0 2px 4px #18272677; }
.movement.held { background: #5f8374; }
kbd { font: 700 10px/1.2 ui-monospace,monospace; opacity: .8; }
.momentum { max-width: 170px; flex: 1; }
.momentum span { display: block; font-size: 9px; font-weight: bold; letter-spacing: .12em; color: #b5c8c8; margin-bottom: 5px; }
.speed-track { height: 8px; background: #101f28; border: 1px solid #6f8283; border-radius: 5px; overflow: hidden; }
#speed { display: block; height: 100%; width: 0%; background: var(--mint); }
#game:not([data-phase="playing"]) .controls { opacity: .6; }
#game:not([data-phase="playing"]) :is(.hud,.powers,#announcement) { visibility: hidden; }
@media(hover:hover) { button:hover:not(:disabled) { filter: brightness(1.09); } }
@media(pointer:coarse) { kbd { display: none; } }
@media(max-width:540px) {
  .brand > svg { width: 25px; height: 25px; }
  .brand { gap: 6px; } .brand small { font-size: 8px; }
  header { gap: 6px; }
  .screen.intro { justify-items: center; }
  .screen { padding: 12px; }
  .postcard { padding: 20px; width: min(355px,100%); }
  h1 { font-size: 39px; } #message { font-size: 13px; }
  .controls { gap: 12px; } .movement { width: 58px; } .jump { width: 106px; }
  .jump kbd,.movement kbd { display: none; } .momentum { max-width: 80px; }
}
@media(max-width:355px) {
  .brand > svg { display: none; } header { padding-inline: 8px; }
  .tools button { width: 44px; } .tools { gap: 4px; }
  .controls { gap: 8px; padding-inline: 8px; } .directions { gap: 5px; }
  .movement { width: 51px; } .jump { width: 95px; } .momentum span { font-size: 8px; letter-spacing: 0; }
}
@media(max-height:480px) and (min-width:541px) {
  header { padding-block: 3px; } .brand small { display: none; }
  .controls { padding-block: 5px 8px; } .movement,.jump { height: 44px; }
  .screen { align-items: start; padding: 9px; }
  .screen.intro { padding: 9px 16px; }
  .postcard { width: min(610px,100%); padding: 12px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 18px; align-items: center; }
  h1 { grid-column: 1; font-size: 28px; margin: 0; }
  .eyebrow { font-size: 9px; margin: 0; }
  #message { grid-column: 1; font-size: 12px; margin: 4px 0; }
  #selection { grid-column: 2; grid-row: 1 / 4; }
  #stage-hint { margin-block: 6px; font-size: 11px; }
  .primary { grid-column: 2; min-height: 44px; }
  .other-actions { grid-column: 1; grid-row: 4; }.other-actions button { margin: 0; min-height: 44px; }
  #tip { grid-column: 1; grid-row: 4; margin: 0; font-size: 10px; }
  .hud { top: 6px; }.hud strong { font-size: 20px; } .floor-meter,.score-meter { padding: 4px 8px; }
  .powers { top: 58px; } #announcement { top: 94px; }
}
.reward { display:flex; align-items:center; gap:12px; margin:4px 0 14px; 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,5px 6px 0 #102029aa; animation:prize-arrival .6s ease-out both; }
.victory h1 { font-size:clamp(28px,4vw,46px); line-height:1.02; }
#game[data-phase="complete"] .controls { 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-bottom:9px; font-size:10px; }.reward svg { width:36px; height:36px; padding:7px; } }
@media(max-height:480px) and (min-width:541px) {
  .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; }
  .victory .primary { grid-column:2; grid-row:1/3; }.victory .other-actions { grid-column:2; grid-row:3; }
}
@media(max-height:620px) and (max-width:540px) {
  .victory .postcard { padding:16px; }.victory h1 { font-size:30px; margin-bottom:9px; }
  .victory #message { font-size:12px; line-height:1.35; margin-bottom:10px; }
}
@media(prefers-reduced-motion:reduce) { .victory .postcard { animation:none; } }