/* Spindle · glass UI. Tokens first so the whole thing re-themes from one place. */
:root {
  --aqua: #5fe9dc; --aqua-d: #19a9b8; --lime: #b9ff7a; --ink: #0b2447; --ink-soft: #3b5c80;
  --glass-a: rgba(255,255,255,.58); --glass-b: rgba(210,244,255,.30); --edge: rgba(255,255,255,.75);
  --glow: 0 0 22px rgba(95,233,220,.45);
  --font: "Avenir Next", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #04101f; overflow: hidden; font-family: var(--font); color: var(--ink); overscroll-behavior: none; touch-action: none; }
#stage, #game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.hidden { display: none !important; }

/* glass surface used by every pill and card */
.pill, .card {
  background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -8px 14px rgba(95,233,220,.18), 0 6px 22px rgba(4,20,48,.35);
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  color: var(--ink);
}
.pill { border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; letter-spacing: .01em; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { position: absolute; pointer-events: none; }
#pipsWrap { top: calc(14px + var(--sat)); left: calc(14px + var(--sal)); display: flex; gap: 10px; align-items: center; }
#pipsWrap .lbl { font-weight: 600; color: var(--ink-soft); }
#pips { display: flex; gap: 6px; }
#pips i { width: 12px; height: 12px; border-radius: 50%; background: rgba(11,36,71,.18); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); transition: all .6s; }
#pips i.on { background: radial-gradient(circle at 35% 30%, #fff, var(--aqua) 55%, var(--aqua-d)); box-shadow: var(--glow); }
#btnMenu { top: calc(14px + var(--sat)); right: calc(14px + var(--sar)); pointer-events: auto; cursor: pointer; font-family: inherit; }
#toast { top: calc(18px + var(--sat)); left: 50%; transform: translate(-50%, -12px); opacity: 0; transition: opacity .5s, transform .5s; max-width: min(86vw, 520px); text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#prompt { bottom: calc(112px + var(--sab)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; animation: rise .35s ease-out; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
kbd { font: 700 12px var(--font); background: var(--ink); color: #fff; border-radius: 6px; padding: 3px 8px; box-shadow: 0 2px 0 rgba(0,0,0,.35); }

#fuel { bottom: calc(26px + var(--sab)); left: 50%; transform: translateX(-50%); transition: opacity .8s; }
#fuel.dim { opacity: .28; }
#fuel svg { filter: drop-shadow(0 0 8px rgba(95,233,220,.6)); }
#fuel .track { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.4); stroke-width: 3; }
#fuel .arc { fill: none; stroke: var(--aqua); stroke-width: 4; stroke-linecap: round; transition: stroke .3s; }
#fuel.low .arc { stroke: #ffb25e; }
#fuel.locked .arc { stroke: #ff7a8a; }
#hint { left: calc(18px + var(--sal)); bottom: calc(18px + var(--sab)); margin: 0; font-size: 12px; color: rgba(255,255,255,.88); text-shadow: 0 1px 6px rgba(0,0,0,.65); transition: opacity 2s; }
#hint b { color: #fff; background: rgba(255,255,255,.16); border-radius: 5px; padding: 1px 6px; }
#hint.gone { opacity: 0; }

/* overlays */
.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: radial-gradient(ellipse at 50% 85%, rgba(6,40,70,.55), rgba(2,10,24,.78)); transition: opacity .9s; touch-action: auto; }
.overlay.gone { opacity: 0; pointer-events: none; }
.card { border-radius: 30px; padding: 26px 30px; width: min(92vw, 460px); text-align: center; }
.card h1 { font-size: clamp(46px, 11vw, 74px); line-height: 1; margin: 4px 0 8px; font-weight: 300; letter-spacing: .06em; color: #fff; text-shadow: 0 0 28px rgba(95,233,220,.75), 0 2px 0 rgba(11,36,71,.35); }
.card h2 { margin: 2px 0 14px; font-weight: 600; }
.title-card { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(150,230,240,.12)); color: #eaffff; }
.title-card .sub { margin: 0 0 18px; font-size: 17px; color: #d9fbff; }
.small { font-size: 12.5px; color: rgba(225,248,255,.8); margin: 10px 0 0; line-height: 1.5; }
.card:not(.title-card) .small { color: var(--ink-soft); }
.load { height: 6px; border-radius: 6px; background: rgba(255,255,255,.2); overflow: hidden; margin: 6px 0; }
#loadBar { height: 100%; width: 0; background: linear-gradient(90deg, var(--aqua), var(--lime)); transition: width .3s; }
#title.ready .load, #title.ready #loadText { display: none; }
#btnStart { display: none; }
#title.ready #btnStart { display: inline-block; }
.go { font: 700 17px var(--font); color: var(--ink); border: 1px solid #fff; border-radius: 999px; padding: 12px 40px; margin-top: 8px; cursor: pointer;
  background: linear-gradient(180deg, #f4fffb, #aef5e8 55%, #6fe3d2); box-shadow: inset 0 2px 0 #fff, 0 6px 20px rgba(95,233,220,.5); transition: transform .15s, box-shadow .15s; }
.go:hover { transform: translateY(-1px); box-shadow: inset 0 2px 0 #fff, 0 10px 26px rgba(95,233,220,.65); }
.go:focus-visible, .btn:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0; font-weight: 600; }
.row.btns { justify-content: center; flex-wrap: wrap; }
.btn { font: 600 14px var(--font); color: var(--ink); border-radius: 999px; padding: 9px 16px; border: 1px solid var(--edge); cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(190,236,250,.55)); box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(4,20,48,.2); }
.btn:hover { background: linear-gradient(180deg, #fff, rgba(190,245,250,.8)); }
.btn.danger { color: #8a1f3a; }
input[type=range] { width: 55%; accent-color: var(--aqua-d); }
select { font: 600 14px var(--font); border-radius: 999px; padding: 7px 12px; border: 1px solid var(--edge); background: rgba(255,255,255,.8); color: var(--ink); }

#fade { position: fixed; inset: 0; z-index: 30; background: #fff; opacity: 0; pointer-events: none; }

/* touch controls */
#joy { display: none; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,.06)); border: 2px solid rgba(255,255,255,.5); }
#joy.on { display: block; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #a9f3ea); box-shadow: 0 0 14px rgba(95,233,220,.7); }
#touchBtns { display: none; right: calc(14px + var(--sar)); bottom: calc(14px + var(--sab)); }
body.touch #touchBtns { display: grid; grid-template-columns: auto auto; gap: 10px; pointer-events: none; }
.tb { pointer-events: auto; font: 700 13px var(--font); color: var(--ink); width: 62px; height: 62px; border-radius: 50%; border: 1px solid #fff; touch-action: none;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(160,235,240,.5)); box-shadow: inset 0 2px 0 #fff, 0 4px 14px rgba(4,20,48,.35); }
.tb.big { width: 82px; height: 82px; grid-row: span 2; align-self: end; font-size: 16px; }
.tb.down { background: linear-gradient(180deg, #d8fff8, #7be8d8); transform: scale(.95); }
body.touch #hint { display: none; }
body.touch #fuel { bottom: calc(110px + var(--sab)); left: auto; right: calc(120px + var(--sar)); transform: none; }
body.touch #prompt { bottom: calc(220px + var(--sab)); }
body.photo #hud { display: none; }
@media (prefers-reduced-motion: reduce) { #toast, #prompt, .overlay, #pips i { transition: none; animation: none; } }
@media (max-width: 560px) { .card { padding: 20px 18px; } #hint { display: none; } }