:root{
  --h:200;
  --bg:#0c0d12; --panel:#161824; --line:#272b3c;
  --fg:#eef0f8; --muted:#aab1c7; --track:#22253400;
  --accent:hsl(var(--h) 72% 62%);
  --accent2:hsl(calc(var(--h) + 40) 78% 64%);
  /* lighter variants for text: the fill colours drop below 4.5:1 on dark at blue hues */
  --accentText:hsl(var(--h) 85% 74%);
  --quip:hsl(calc(var(--h) + 40) 92% 77%);
  --hot:#ff6b81;
  --card:rgba(255,255,255,.035);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.5 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
  -webkit-font-smoothing:antialiased;
  /* phones: no double-tap zoom, no grey tap flash, no rubber-band scroll */
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; overscroll-behavior:none;
}
/* the glow behind the centre. one fixed colour on every bar; the bar's own hue lives in the fill.
   change --glowH to move it: 205 is slate blue, 170 teal, 230 a cooler blue. */
:root{--glowH:205}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(70% 55% at 50% 42%, hsl(var(--glowH) 55% 22% / .5), transparent 70%);
}
h1,h2,p{margin:0}
button{font:inherit;color:inherit}

/* ---- hud ---- */
#hud{position:relative;z-index:5;padding:0 0 6px}
.run{height:6px;background:#1b1e2b}
.runFill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .45s cubic-bezier(.2,.8,.2,1)}
.hudRow{display:flex;align-items:center;gap:14px;padding:9px clamp(12px,3vw,26px) 0;font-size:13.5px;color:var(--muted)}
.filled{color:var(--accentText)}
.hudRow .link{margin-left:auto}
.link{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13.5px;padding:2px 4px;border-radius:6px}
.link:hover{color:var(--fg)}
.link.dim{margin-left:0;opacity:.9}

/* ---- stage ---- */
#wrap{
  position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; justify-content:safe center; gap:10px;
  padding:10px clamp(12px,4vw,40px) 6vh; text-align:center;
  transition:opacity .25s ease, transform .25s ease;
  /* if a bar is ever taller than the screen, let it scroll instead of clipping the title.
     no text selection or long-press callout: several bars are press-and-hold. */
  overflow-y:auto; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
#wrap.out{opacity:0; transform:translateY(-10px)}
#title{font-size:clamp(26px,3.8vw,38px); letter-spacing:-.02em; font-weight:650}
#note{color:var(--muted); font-size:clamp(14px,1.6vw,16px); max-width:640px}
/* touch-action:none so a finger dragged across a bar sends pointermove, not a scroll */
#stage{width:min(900px,94vw); margin-top:16px; display:flex; justify-content:center; touch-action:none}

/* short screens (phones in landscape, small phones with browser chrome) */
@media (max-height:700px){
  #wrap{gap:6px; padding-bottom:2vh}
  #title{font-size:22px}
  #note{font-size:13px}
  #stage{margin-top:6px}
  .skipBottom{margin-top:10px}
  .lv, #stage .fin{padding:12px clamp(12px,3vw,24px)}
  .lv{gap:12px}
}

/* the play area is a card: text sits on one consistent surface */
.lv, #stage .fin{
  position:relative; width:100%; background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:clamp(18px,3vw,30px) clamp(14px,3vw,32px); box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.lv{display:flex;flex-direction:column;align-items:center;gap:18px;outline:none}
.lv>*{max-width:100%}

/* shared bar */
.tb{width:100%;height:34px;border-radius:99px;background:#1a1d2b;overflow:hidden;position:relative;
  border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.tf{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 0 16px hsl(var(--h) 72% 62% / .45)}
.say{font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);min-height:1.5em;text-align:center}
.quip{font:500 15px/1.5 ui-sans-serif,system-ui;color:var(--quip);min-height:1.5em;text-align:center;
  opacity:0;transform:translateY(4px);transition:opacity .22s,transform .22s;order:99}
.quip.on{opacity:1;transform:none}
.skipBottom{margin-top:22px;opacity:.65}
.skipBottom:hover{opacity:1}
.row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.btn{background:#1f2331;border:1px solid var(--line);color:var(--fg);padding:10px 20px;border-radius:99px;
  cursor:pointer;font-size:15px;transition:transform .1s,background .15s,border-color .15s}
.btn:hover:not(:disabled){background:#2a2f42;border-color:var(--accent)}
.btn:active:not(:disabled){transform:scale(.96)}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:transparent}
.big-num{font:700 clamp(28px,5vw,46px)/1 ui-monospace,monospace;font-variant-numeric:tabular-nums}
/* ctx.keys(): a keyboard conduit for the typing bars. shows as a pill, never shows what you typed. */
.kin{background:#1a1e2c;border:1px solid var(--line);color:transparent;caret-color:transparent;border-radius:99px;
  padding:8px 16px;font:14px ui-monospace,monospace;text-align:center;width:min(260px,80vw);outline:none}
.kin::placeholder{color:var(--muted)}
.kin:focus{border-color:var(--accent)}
.err{color:var(--hot);font:13px ui-monospace,monospace}

/* desktop: there is room, so the supporting text gets a size up.
   kept after the base rules because those use the font shorthand. */
@media (min-width:900px){
  .hudRow, .link{font-size:16px}
  .hudRow{gap:18px}
  #note{font-size:18px; max-width:720px}
  .say{font-size:17px}
  .quip{font-size:17px}
  .btn{font-size:16px; padding:11px 24px}
  #menu .mBox h2{font-size:24px}
  #menu .mLine{font-size:16px}
  #menu .mLine.dim{font-size:15px}
}

/* ---- win flash ---- */
#flash{position:fixed;inset:0;z-index:40;display:grid;place-items:center;pointer-events:none;opacity:0;
  background:radial-gradient(50% 40% at 50% 50%, hsl(var(--h) 70% 45% / .3), transparent 70%);
  transition:opacity .2s}
#flash.on{opacity:1}
/* the win line lands right on top of the filled bar, so it gets its own dark pill */
#flashText{font:700 clamp(20px,3vw,30px) ui-sans-serif,system-ui;color:var(--accentText);
  background:rgba(12,13,18,.9);border:1px solid hsl(var(--h) 72% 62% / .55);border-radius:99px;padding:10px 28px;
  box-shadow:0 10px 40px rgba(0,0,0,.55),0 0 30px hsl(var(--h) 70% 50% / .35);
  transform:scale(.9); transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
#flash.on #flashText{transform:none}

/* ---- menu ---- */
#menu[hidden]{display:none}
#menu{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px}
.mBack{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px)}
.mBox{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:22px;width:min(460px,100%);display:grid;gap:12px;text-align:center}
.mBox h2{font-size:20px}
.mLine{font-size:14px;color:var(--muted)}
.mLine.dim{opacity:.85;font-size:13px;line-height:1.5}
.mBtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* ---- front page ---- */
body.home #hud, body.home #wrap{display:none}
#home[hidden]{display:none}
#home{position:relative;z-index:2;flex:1;display:flex;align-items:center;align-items:safe center;justify-content:center;
  overflow-y:auto;padding:24px clamp(12px,4vw,40px);text-align:center;user-select:none;-webkit-user-select:none}
.hBox{width:min(760px,100%);display:grid;gap:14px;justify-items:center}
.hWho{font:13.5px ui-monospace,monospace;color:var(--accentText);letter-spacing:.08em}
.hTitle{font-size:clamp(30px,5vw,46px);letter-spacing:-.02em;font-weight:700}
.hLine{font-size:clamp(16px,2vw,20px);color:var(--fg);max-width:600px}
.hNote{font:15px/1.5 ui-monospace,monospace;color:var(--muted);min-height:1.5em;max-width:600px}
.hCards{display:grid;grid-template-columns:1fr;gap:12px;width:100%;margin-top:10px}
@media (min-width:640px){.hCards{grid-template-columns:1fr 1fr}}
.hCard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:12px;
  justify-items:center;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.hCard .tb{width:100%}
.hCard.soon{opacity:.55}
.hCardT{font:600 15px ui-sans-serif,system-ui;color:var(--fg)}
.hCardS{font:14px/1.5 ui-monospace,monospace;color:var(--muted)}
/* a first visit gets the short version: no greeting label, no cards for things that are not here yet */
body.firstVisit .hCard.soon, body.firstVisit .hWho{display:none}
body.firstVisit .hCards{grid-template-columns:1fr;max-width:440px}
@media (min-width:900px){.hCardS{font-size:15px}.hWho{font-size:15px}.hCardT{font-size:16px}}

/* ---- today's three ---- */
body.daily #btnPrev, body.daily #btnNext, body.daily #btnReset{display:none}
#stage .d3{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
#stage .d3 .one{display:grid;gap:6px;justify-items:center;width:120px}
#stage .d3 .sq{width:56px;height:56px;border-radius:12px;background:#22263a;border:1px solid var(--line)}
#stage .d3 .sq.on{background:var(--accent)}
#stage .d3 .nm{font:13px/1.4 ui-monospace,monospace;color:var(--muted);text-align:center}
body.firstVisit #hDailyCard, body.firstVisit #hLongCard, body.firstVisit #hWorldCard{display:none}

/* ---- the start gate ---- */
.gate{display:grid;gap:14px;justify-items:center;padding:10px 0}

/* ---- touch layout ----
   a hand on the play area covers whatever sits under it. on touch the bar, the status line and
   the quip move to the top of the card, so the thing you tap or drag is always the lowest thing. */
@media (pointer:coarse){
  .lv>.tb{order:-3}
  .lv>.say{order:-2}
  .lv>.quip{order:-1}
  .lv57>.tb{order:0}   /* Any% labels its two bars; keep them with their tags */
}

/* ---- generous tap targets on touch ----
   a fingertip is about 40px wide and lands a little off. small things that have to be tapped get
   an invisible halo (a pseudo-element counts as part of the element for hit testing), and the
   very small ones get bigger outright. mouse play is untouched. */
@media (pointer:coarse){
  .lv24 .hole::after, .lv29 .tg::after, .lv43 .jb::after, .lv94 .fly::after{
    content:''; position:absolute; inset:-16px; border-radius:50%;
  }
  .lv75 .ch, .lv89 .bub{position:relative}
  .lv75 .ch::after{content:''; position:absolute; inset:0 -9px}
  .lv89 .bub::after{content:''; position:absolute; inset:-4px; border-radius:50%}
  /* #stage so these outrank the bars' own rules, which load after this sheet */
  #stage .lv95 .mini{height:26px}
  #stage .lv95 .field{gap:10px}
  #stage .lv48 .x{font-size:22px;padding:8px 10px;top:0;right:2px}
  #stage .lv43 .jb{width:44px;height:44px}
}

/* ---- the long bar and the world bar ---- */
#hLongCard{cursor:default}
#hLongCard .tf, #hWorldCard .tf{transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.hCard .note{color:var(--quip);margin-top:-6px}

/* ---- finale ---- */
#stage .fin{display:grid;gap:14px;justify-items:center}
#stage .grid100{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;width:min(520px,80vw)}
#stage .px{aspect-ratio:1;border-radius:2px;background:#22263a}
#stage .px.on{background:var(--accent)}