/* Layout: one full-bleed game screen, HUD on top, touch pads at the bottom corners.
   Colours and fonts are tokens from game.json (engine.js and tools/build.py write them onto :root);
   the values here are only a neutral fallback. --x-rgb tokens are space-separated channels for rgb(... / alpha). */
:root{
  --night:#101418; --void:#08090B; --cyan:#58C4DD; --pink:#E8729F; --sodium:#DC853E; --burlap:#D6C3A2; --royal:#2C579A;
  --night-rgb:16 20 24; --void-rgb:8 9 11; --cyan-rgb:88 196 221; --pink-rgb:232 114 159; --burlap-rgb:214 195 162;
  --display:Impact, "Arial Narrow", sans-serif;
  --mono:ui-monospace, Menlo, monospace;
  color-scheme:dark;
}
html,body{height:100%;margin:0}
body{background:var(--void);color:var(--burlap);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:var(--mono)}
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--void)}
canvas{display:block;width:100%;height:100%;object-fit:contain;background:var(--night)}
#hud{position:fixed;top:0;left:0;right:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-bottom:8px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(var(--void) 0%,rgb(var(--void-rgb) / 0) 100%);pointer-events:none}
#hud > *{pointer-events:auto}
.brand{font-family:var(--display);font-size:28px;letter-spacing:.04em;color:#fff;text-shadow:0 0 12px var(--pink),0 0 2px var(--pink);line-height:1}
.seg{display:inline-flex;border:1px solid rgb(var(--cyan-rgb) / .5);border-radius:6px;overflow:hidden}
.seg button{font-family:var(--display);font-size:20px;letter-spacing:.06em;padding:6px 14px;min-height:40px;min-width:72px;border:0;background:transparent;color:var(--cyan);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--cyan);color:var(--void)}
.chip{font-family:var(--mono);font-size:12px;padding:8px 10px;min-height:40px;border:1px solid rgb(var(--pink-rgb) / .6);border-radius:6px;background:transparent;color:var(--pink);cursor:pointer}
.chip[aria-pressed="true"]{background:rgb(var(--pink-rgb) / .18)}
button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.stat{font-family:var(--display);font-size:22px;letter-spacing:.05em;color:#fff}
.stat small{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:.08em;margin-right:6px}
#menuBtn{margin-left:0}
.lives{display:flex;gap:3px;align-items:center;min-height:42px}
.lives img{height:42px;width:auto;filter:drop-shadow(0 0 6px rgb(var(--pink-rgb) / .55)) drop-shadow(0 1px 2px #000);animation:life-bob 2.4s ease-in-out infinite}
.lives img:nth-child(2n){animation-delay:-1.2s}
@keyframes life-bob{50%{transform:translateY(-2px) rotate(-4deg)}}
#coins{display:inline-block;color:#FFD84A;text-shadow:0 0 10px rgba(255,216,74,.7),0 0 2px #000;font-family:var(--mono);font-weight:700;font-size:28px;letter-spacing:0}
.score{margin-left:auto}
#score{display:inline-block;color:#7CFF8A;text-shadow:0 0 12px rgba(124,255,138,.6),0 0 2px #000;font-family:var(--mono);font-weight:700;font-size:28px;letter-spacing:0;font-variant-numeric:tabular-nums}
.bump{animation:bump .28s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.35)}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
.fly{position:fixed;font-family:var(--mono);font-weight:700;white-space:nowrap;will-change:transform}
.fly-g{font-size:22px;color:#FFD84A;text-shadow:0 0 10px rgba(255,216,74,.8),0 2px 0 #1a1200}
.fly-cash{font-size:20px;color:#7CFF8A;text-shadow:0 0 10px rgba(124,255,138,.8),0 2px 0 #062a0c;display:grid}
.fly-cash span{grid-area:1/1;text-align:center}.fly-cash .fly-a{color:#FFD84A;text-shadow:0 0 10px rgba(255,216,74,.8)}
/* Title screen: key art full-bleed, wordmark and menu in the calm left 40% */
#title{position:fixed;inset:0;display:none;align-items:center;background:var(--void) center/cover no-repeat;
  padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
#title::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--void-rgb) / .78) 0%,rgb(var(--void-rgb) / .35) 45%,rgb(var(--void-rgb) / 0) 70%)}
.on-title #title{display:flex}
.on-title #hud,.on-title .pads{display:none}
.t-copy{position:relative;display:flex;flex-direction:column;gap:14px;max-width:min(42vw,520px)}
.t-kicker{font-family:var(--mono);font-size:clamp(13px,1.5vw,18px);letter-spacing:.28em;color:var(--cyan);text-transform:uppercase;text-shadow:0 0 10px rgb(var(--cyan-rgb) / .6)}
.t-word{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(52px,8vw,112px);line-height:.9;letter-spacing:.03em;color:#FFECF4;
  text-shadow:0 0 18px var(--pink),0 0 42px rgb(var(--pink-rgb) / .7),0 0 2px var(--pink)}
.t-menu{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:10px}
.t-menu button{font-family:var(--display);font-size:clamp(26px,3.4vw,38px);letter-spacing:.06em;padding:6px 18px;min-height:48px;border:2px solid rgb(var(--cyan-rgb) / .7);
  border-radius:6px;background:rgb(var(--night-rgb) / .6);color:#fff;cursor:pointer;backdrop-filter:blur(2px)}
.t-menu button:hover,.t-menu button:focus-visible{background:var(--cyan);color:var(--void)}
.t-menu .t-sub{font-size:clamp(20px,2.4vw,26px);border-color:rgb(var(--pink-rgb) / .6);color:var(--pink)}
.t-best{position:relative;font-family:var(--mono);font-weight:700;font-size:clamp(14px,1.6vw,20px);color:#7CFF8A;text-shadow:0 0 10px rgba(124,255,138,.6)}
.t-keys{position:relative;font-size:12px;color:rgb(var(--burlap-rgb) / .8)}
@media (pointer:coarse){.t-keys{display:none}}
.t-settings{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.t-settings p{flex-basis:100%;margin:0;font-size:12px;line-height:1.4;color:rgb(var(--burlap-rgb) / .85);max-width:46ch}
/* title entrance: kicker, wordmark, then each menu button drop in with a bounce; the first button blinks until it is used */
@keyframes t-drop{0%{transform:translateY(-120vh)}70%{transform:translateY(10px)}85%{transform:translateY(-4px)}100%{transform:none}}
@keyframes t-blink{0%,49%{background:var(--cyan);color:var(--void)}50%,100%{background:rgb(var(--night-rgb) / .6);color:#fff}}
.on-title .t-kicker,.on-title .t-word,.on-title .t-menu button,.on-title .t-settings{animation:t-drop .55s cubic-bezier(.2,.8,.3,1) both}
.on-title .t-kicker{animation-delay:.05s}.on-title .t-word{animation-delay:.18s}
.on-title .t-menu button:nth-child(1){animation:t-drop .55s cubic-bezier(.2,.8,.3,1) .5s both,t-blink .84s steps(1) 1.2s infinite}
.on-title .t-menu button:nth-child(2){animation-delay:.64s}.on-title .t-menu button:nth-child(3){animation-delay:.78s}
.on-title .t-menu button:nth-child(1):hover,.on-title .t-menu button:nth-child(1):focus-visible{animation:none;background:var(--cyan);color:var(--void)}
@media (prefers-reduced-motion:reduce){.on-title .t-kicker,.on-title .t-word,.on-title .t-menu button{animation:none!important}}
@media (max-width:640px){.t-copy{max-width:none}#title::before{background:rgb(var(--void-rgb) / .55)}}
.pads{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-end;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.pad{display:flex;gap:14px;pointer-events:auto}
.pad button{width:84px;height:84px;border-radius:50%;border:2px solid rgb(var(--cyan-rgb) / .7);background:rgb(var(--night-rgb) / .55);color:var(--cyan);
  font-family:var(--display);font-size:26px;touch-action:none;backdrop-filter:blur(2px)}
.pad button.on{background:rgb(var(--cyan-rgb) / .35);color:#fff}
#jumpBtn{width:104px;height:104px;border-color:rgb(var(--pink-rgb) / .8);color:var(--pink)}
#jumpBtn.on{background:rgb(var(--pink-rgb) / .35)}
#err{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;text-align:center;font-size:14px;line-height:1.5;color:#fff;background:var(--void)}
@media (pointer:fine){.pads{opacity:.35}}
@media (prefers-reduced-motion:reduce){.brand{text-shadow:none}.lives img,.bump{animation:none}}
@media (max-width:640px){.brand{display:none}.lives img{height:32px}#coins,#score{font-size:22px}}

[hidden]{display:none!important}

/* tap-to-start gate and intro film: full screen, above everything, black like the intro's own cards */
#gate,#intro{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#000;z-index:20}
.on-gate #gate,.on-intro #intro{display:flex}
.on-gate #hud,.on-gate .pads,.on-intro #hud,.on-intro .pads{display:none}
#gate{cursor:pointer}
#gateText{font-family:"Courier New",Courier,monospace;font-size:clamp(20px,3vw,34px);color:#ebebeb;margin:0;animation:gate-blink 1.1s steps(1) infinite}
@keyframes gate-blink{50%{opacity:0}}
#introVid{width:100%;height:100%;object-fit:contain;background:#000}
#introSkip{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 16px);color:#ebebeb;border-color:rgba(235,235,235,.5)}