/* Biased — single committed dark look: a listening room, not a document.
   Layout: fixed-width centred column, the play control as the only large
   object on the page, everything else kept quiet underneath it. */

:root{
  --bg:#0c0a13;
  --surface:#161327;
  --surface-2:#201c35;
  --fg:#efecf7;
  --muted:#8d87a9;
  --accent:#7c5cff;        /* the one loud colour */
  --accent-soft:#2a2150;
  --cyan:#2bd4e6;          /* live/playing only */
  --good:#3ddc97;
  --bad:#ff6b6b;
  --line:#2b2642;
  --display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- top bar ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:600px;margin:0 auto;
  padding-left:max(18px,env(safe-area-inset-left,0px));
  padding-right:max(18px,env(safe-area-inset-right,0px));
  padding-block:18px 10px;
}
.brand{display:flex;align-items:center;gap:9px}
.brand .mark{
  width:13px;height:13px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.brand .name{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.015em}
.modes{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.mode{
  border:0;background:transparent;color:var(--muted);
  font-family:var(--mono);font-size:12px;padding:6px 13px;border-radius:999px;cursor:pointer;
}
.mode.on{background:var(--accent);color:#fff;font-weight:600}
.mode:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---- column ---- */
.wrap{
  max-width:600px;margin:0 auto;
  padding-left:max(18px,env(safe-area-inset-left,0px));
  padding-right:max(18px,env(safe-area-inset-right,0px));
  padding-block:6px 56px;
  display:flex;flex-direction:column;gap:18px;
}

.intro h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(25px,6.4vw,34px);line-height:1.15;letter-spacing:-.025em;
  margin:0 0 6px;text-wrap:balance;
}
.intro h1 em{font-style:normal;color:var(--accent)}
.tagline{margin:0;color:var(--muted);font-size:12.5px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}

/* ---- stage ---- */
.stage{display:flex;flex-direction:column;align-items:center;gap:20px}
.playbtn{
  width:132px;height:132px;border-radius:50%;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 32%,var(--surface-2),var(--surface));
  color:var(--fg);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:transform .12s ease,border-color .2s ease,box-shadow .2s ease;
}
.playbtn .dur{font-family:var(--display);font-weight:800;font-size:29px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.playbtn .hint{font-size:10px;color:var(--muted);letter-spacing:.11em;text-transform:uppercase;margin-top:5px}
.playbtn:hover:not(:disabled){border-color:var(--accent)}
.playbtn:active:not(:disabled){transform:scale(.97)}
.playbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.playbtn:disabled{opacity:.4;cursor:progress}
.playbtn.playing{border-color:var(--cyan);box-shadow:0 0 0 5px rgba(43,212,230,.11)}

.ladder{display:flex;gap:6px;width:100%;list-style:none;margin:0;padding:0}
.ladder li{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.ladder li .track{display:block;width:100%;height:7px;border-radius:999px;background:var(--surface-2);transition:background .2s}
.ladder li.spent .track{background:var(--bad)}
.ladder li.won .track{background:var(--good)}
.ladder li.here .track{background:var(--cyan)}
.ladder li span.t{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.ladder li.here span.t{color:var(--cyan)}

/* ---- guessing ---- */
.guessrow{display:flex;gap:8px;flex-wrap:wrap}
.field{position:relative;flex:1 1 230px;min-width:0}
input[type=text]{
  width:100%;padding:12px 14px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--fg);
  font-family:var(--mono);font-size:14px;
}
input[type=text]::placeholder{color:var(--muted)}
input[type=text]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.ac{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
  background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
  max-height:244px;overflow-y:auto;box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.ac div{padding:10px 13px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13px}
.ac div:last-child{border-bottom:0}
.ac div:hover,.ac div.sel{background:var(--accent);color:#fff}
.ac div u{display:block;text-decoration:none;color:var(--muted);font-size:11px;margin-top:2px}
.ac div:hover u,.ac div.sel u{color:rgba(255,255,255,.78)}

.act{
  padding:12px 17px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--fg);
  font-family:var(--mono);font-size:13px;cursor:pointer;white-space:nowrap;
}
.act:hover:not(:disabled){border-color:var(--accent)}
.act:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.act.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.act:disabled{opacity:.4;cursor:not-allowed}

.tries{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.tries li{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:baseline;overflow-wrap:anywhere}
.tries li::before{content:"×";color:var(--bad);font-weight:600;flex:0 0 auto}
.tries li.skip::before{content:"→";color:var(--muted)}

/* ---- result ---- */
.reveal{display:flex;gap:15px;align-items:center}
.reveal img{width:84px;height:84px;border-radius:10px;flex:0 0 auto;background:var(--surface-2);object-fit:cover}
.reveal .meta{min-width:0}
.reveal p{margin:0}
.verdict{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.015em}
.verdict.win{color:var(--good)}
.verdict.lose{color:var(--bad)}
.rtitle{font-size:14.5px;margin-top:4px!important;overflow-wrap:anywhere}
.rartist{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.squares{font-size:19px;letter-spacing:3px;margin:16px 0 0}
.resultactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.nextup{margin:13px 0 0;font-size:12px;color:var(--muted)}

/* ---- stats ---- */
.stats h2{font-family:var(--display);font-weight:800;font-size:14px;margin:0 0 14px;letter-spacing:-.01em}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0}
.statgrid div{min-width:0}
.statgrid dt{font-size:10.5px;color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
.statgrid dd{
  margin:3px 0 0;font-family:var(--display);font-weight:800;
  font-size:23px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}

/* ---- settings ---- */
.settings .row{display:flex;align-items:center;gap:13px;font-size:12.5px;color:var(--muted)}
.settings input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--accent)}
.settings output{font-variant-numeric:tabular-nums;width:3ch;text-align:right;color:var(--fg)}

.colophon{color:var(--muted);font-size:11.5px;text-align:center;margin:0;text-wrap:balance}

/* ---- toast ---- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(26px + env(safe-area-inset-bottom,0px));
  background:var(--surface-2);border:1px solid var(--accent);
  color:var(--fg);padding:11px 18px;border-radius:999px;font-size:13px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);z-index:60;
}

@media (max-width:420px){
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .playbtn{width:120px;height:120px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}