: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}

/* ---- 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}
}

/* ---- 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)}