/* Whodle styles.
   Ported from the v0 prototype, which Charlie was happy with — the tile-flip, the
   colour system and the layout are deliberately unchanged. Everything new (stats,
   leaderboard, tester bar, nickname) follows the same tokens.

   No inline styles anywhere: the app runs under a strict CSP with style-src 'self'. */

/* Palette. Deliberately NOT Wordle's: the original values here were its exact hexes —
   #6aaa64 green, #c9b458 amber, #787c7e grey, #121213 dark ground — and NYT's 2024
   takedown wave cited look and feel, colour scheme included, alongside the name. These
   also fixed two real accessibility failures: white-on-green measured 2.78:1 and the
   gold score text 2.07:1, both under the 4.5:1 AA floor. Keep any replacement above it. */
:root{
  --bg:#ffffff; --panel:#ffffff; --ink:#17181a; --muted:#6f7378; --faint:#a3a6aa;
  --line:#d6d9de; --line-dark:#8a8d91; --soft:#f2f3f4; --softer:#fafbfb;
  --green:#1e7a45; --green-d:#17663a; --green-tint:#e6f4ec; --amber:#9a6700; --red:#c14b46;
  --flap:#383a3e; --flap2:#292b2f; --shadow:0 12px 30px rgba(0,0,0,.14);
  --r:8px; --maxw:500px;
}
html[data-theme="dark"]{
  --bg:#101114; --panel:#17181a; --ink:#f4f4f5; --muted:#9a9da0; --faint:#6d7074;
  --line:#383a3e; --line-dark:#565a5e; --soft:#26282b; --softer:#1e2023;
  --green:#1e7a45; --green-d:#17663a; --green-tint:#1b3226; --amber:#e0b341; --red:#d1534d;
  --flap:#494c50; --flap2:#383a3e; --shadow:0 12px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
  display:flex; justify-content:center; min-height:100%;
  transition:background .2s ease,color .2s ease;
}
.wrap{width:100%; max-width:var(--maxw); display:flex; flex-direction:column; min-height:100vh}

/* ---- header ---- */
header{border-bottom:1px solid var(--line); padding:9px 12px 11px; position:relative}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hbtns{display:flex;align-items:center;gap:6px;min-width:72px}
.hbtns.right{justify-content:flex-end}
.iconbtn{background:none;border:1px solid var(--line);color:var(--muted);width:32px;height:32px;
  border-radius:8px;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s}
.iconbtn:hover{background:var(--soft);color:var(--ink);border-color:var(--line-dark)}
.brand{text-align:center;flex:1}
.logo{font-size:30px; font-weight:800; letter-spacing:4px; text-transform:uppercase; line-height:1}
.logo .o{color:var(--green)}
.tag{color:var(--muted); font-size:12px; margin-top:2px; letter-spacing:.3px}
.nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:9px;font-size:12.5px;color:var(--muted)}
.nav .pill{background:var(--soft);border-radius:20px;padding:3px 12px;letter-spacing:.3px}
.nav b{color:var(--ink)}
.streakpill{background:var(--green-tint);border:1px solid var(--green);border-radius:20px;padding:2px 10px;font-size:12.5px}
.streakpill b{color:var(--ink)}

/* tester-only controls; hidden unless the server says this session is a tester */
.testerbar{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;
  font-size:11.5px;color:var(--faint);letter-spacing:.4px;text-transform:uppercase}
.testerbar b{color:var(--muted);letter-spacing:0;text-transform:none}
.testerbar button{background:none;border:1px dashed var(--line);color:var(--faint);width:24px;height:24px;
  border-radius:6px;cursor:pointer;font-size:13px;line-height:1}
.testerbar button:hover{background:var(--soft);color:var(--ink)}

.body{flex:1; padding:18px 16px 8px; display:flex; flex-direction:column}
.loading{text-align:center;color:var(--muted);font-size:14px;padding:40px 0}

/* ---- status bar ---- */
.status{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-bottom:16px;font-size:12.5px;color:var(--muted);text-align:center}
.status .worth b{color:var(--green);font-weight:800}
.status .dot{color:var(--faint)}
.status .guessleft b{color:var(--ink)}

/* ---- clue tiles ---- */
.tiles{display:flex;flex-direction:column;gap:10px}
.tile{position:relative;border-radius:var(--r);min-height:64px;perspective:900px}
.tile .txt{
  border:2px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);
  padding:14px 15px 14px 52px;font-size:15.5px;min-height:64px;display:flex;align-items:center;
  transform-origin:top center;line-height:1.35;
}
.tile .txt::before{
  content:attr(data-n);position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.flap{
  position:absolute;inset:0;border-radius:var(--r);background:linear-gradient(180deg,var(--flap) 0 50%,var(--flap2) 50% 100%);
  color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-size:14px;font-weight:600;letter-spacing:.3px;transform-origin:bottom center;backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.flap::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.45)}
.flap .worthtag{background:rgba(255,255,255,.16);padding:2px 8px;border-radius:20px;font-size:12px}
.flap.clickable:hover{filter:brightness(1.12)}
.flap.locked{background:var(--soft);color:var(--faint);cursor:default}
.flap.locked::before{background:rgba(0,0,0,.06)}
.flap .chev{font-size:12px;opacity:.8}

.tile.revealing .flap{animation:flapAway .45s cubic-bezier(.4,.1,.5,1) forwards}
.tile.revealing .txt{animation:flapIn .5s .12s cubic-bezier(.3,1.3,.5,1) both}
@keyframes flapAway{0%{transform:rotateX(0)}100%{transform:rotateX(90deg);opacity:0}}
@keyframes flapIn{0%{transform:rotateX(-92deg);opacity:0}60%{opacity:1}100%{transform:rotateX(0);opacity:1}}
.tile.open .flap{display:none}

/* ---- wrong guesses ---- */
.guesses{margin:14px 0 2px;display:flex;flex-direction:column;gap:6px}
.wrong{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-left:4px solid var(--red);
  color:var(--muted);border-radius:6px;padding:8px 12px;font-size:14px;background:var(--softer);animation:pop .25s}
.wrong s{color:var(--ink);text-decoration:line-through;text-decoration-color:var(--red)}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- input ---- */
.inputzone{margin-top:16px}
.combo{position:relative}
.combo input,.nickzone input{width:100%;background:var(--panel);border:2px solid var(--line);color:var(--ink);
  border-radius:var(--r);padding:14px 15px;font-size:16px;outline:none;transition:border-color .15s}
.combo input:focus,.nickzone input:focus{border-color:var(--line-dark)}
.combo input::placeholder,.nickzone input::placeholder{color:var(--faint)}
.menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:var(--panel);border:2px solid var(--line);
  border-radius:var(--r);max-height:240px;overflow-y:auto;box-shadow:var(--shadow);display:none;z-index:20}
.menu.open{display:block}
.opt{padding:12px 15px;font-size:15px;cursor:pointer;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}
.opt:last-child{border-bottom:none}
.opt:hover,.opt.hi{background:var(--green-tint)}
.opt small{color:var(--faint);font-size:12px}
.opt .none{color:var(--faint)}
.chosen-chip{display:none;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;
  background:var(--green-tint);border:1.5px solid var(--green);border-radius:var(--r);padding:10px 14px;font-weight:600}
.chosen-chip.show{display:flex}
.chosen-chip .clear{cursor:pointer;color:var(--muted);font-weight:700}

.row2{display:flex;gap:8px;margin-top:10px}
.row2.spaced{margin-top:16px}
.btn{flex:1;border:none;border-radius:var(--r);padding:14px;font-size:15px;font-weight:800;cursor:pointer;
  letter-spacing:.5px;text-transform:uppercase;transition:background .15s,filter .15s}
.btn.guess{background:var(--green);color:#fff}
.btn.guess:hover{background:var(--green-d)}
.btn.guess:disabled{background:var(--soft);color:var(--faint);cursor:not-allowed}
.btn.narrow{flex:0 0 auto;padding:14px 20px}
.btn.skip{flex:0 0 auto;background:var(--panel);color:var(--muted);border:2px solid var(--line);text-transform:none;font-weight:600;letter-spacing:0}
.btn.skip:hover{background:var(--soft);color:var(--ink)}
.btn.skip:disabled{opacity:.4;cursor:not-allowed}

/* ---- result ---- */
.result{border:2px solid var(--line);border-radius:12px;padding:22px 18px;text-align:center;animation:pop .35s;margin-top:4px;background:var(--panel)}
.result.win{border-color:var(--green)}
.result.lose{border-color:var(--red)}
.result h2{font-size:19px;margin-bottom:2px}
.result .who{font-size:26px;font-weight:800;margin:8px 0 2px}
.result .sub{color:var(--muted);font-size:13.5px;line-height:1.45}
.scorebig{font-size:46px;font-weight:800;margin:12px 0 0}
.win .scorebig{color:var(--green)} .lose .scorebig{color:var(--red)}
.scorebig span{font-size:16px;color:var(--muted);font-weight:600}
.badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#c9a227,#f0d264);
  color:#3a2c00;font-weight:800;font-size:13px;padding:7px 14px;border-radius:20px;margin-top:12px}
.sharegrid{font-size:24px;letter-spacing:4px;margin:16px 0 2px}
.nexttime{color:var(--faint);font-size:12.5px;margin-top:14px}

/* ---- difficulty rating ---- */
.rating{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rating .q{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:10px}
.ratebtns{display:flex;gap:5px}
/* Five equal segments across a 375px phone leaves ~62px each, so the labels are short
   and allowed to wrap to two lines. min-height keeps every one a 44px touch target. */
.ratebtn{flex:1 1 0;min-width:0;min-height:46px;padding:6px 3px;border:1.5px solid var(--line);
  background:var(--panel);color:var(--muted);border-radius:7px;cursor:pointer;font-size:10.5px;
  font-weight:700;line-height:1.2;transition:background .15s,border-color .15s,color .15s}
.ratebtn:hover:not(:disabled){background:var(--soft);color:var(--ink);border-color:var(--line-dark)}
.ratebtn.on{background:var(--green);border-color:var(--green);color:#fff}
.ratebtn:disabled{cursor:default}
.rating .thanks{margin-top:9px;font-size:12px;color:var(--faint)}

footer{padding:18px 16px 26px;text-align:center;color:var(--faint);font-size:12px;border-top:1px solid var(--line);margin-top:14px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);
  color:var(--bg);padding:11px 20px;border-radius:6px;font-size:14px;font-weight:600;opacity:0;transition:.3s;pointer-events:none;max-width:90%;text-align:center;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hidden{display:none!important}

/* ---- modals ---- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;
  z-index:50;opacity:0;pointer-events:none;transition:opacity .22s}
.overlay.show{opacity:1;pointer-events:auto}
@media(min-width:520px){.overlay{align-items:center}}
.modal{background:var(--panel);color:var(--ink);width:100%;max-width:var(--maxw);border-radius:16px 16px 0 0;
  padding:24px 22px 26px;box-shadow:var(--shadow);max-height:90vh;overflow-y:auto;position:relative;
  transform:translateY(100%);transition:transform .28s cubic-bezier(.3,1,.5,1)}
@media(min-width:520px){.modal{border-radius:16px;transform:translateY(24px)}}
.overlay.show .modal{transform:translateY(0)}
.modal .x{position:absolute;top:14px;right:16px}
.modal h2{font-size:22px;font-weight:800;text-align:center;letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px}
.modal .subhead{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);
  text-align:center;margin:20px 0 10px}
.modal .lead{text-align:center;color:var(--muted);font-size:13.5px;margin-bottom:18px}
.modal .footnote{margin-top:18px;margin-bottom:0;font-size:12px;color:var(--faint)}
.rule{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.rule .ico{flex:0 0 34px;height:34px;border-radius:9px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:18px}
.rule .rt{font-size:14px;line-height:1.4}
.rule .rt b{color:var(--ink)}
.rule .rt small{color:var(--muted);display:block;margin-top:1px;font-size:12.5px}
.scoretable{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:16px 0 4px}
.scoretable div{display:flex;justify-content:space-between;padding:9px 14px;font-size:13.5px;border-bottom:1px solid var(--line)}
.scoretable div:last-child{border-bottom:none}
.scoretable div:nth-child(odd){background:var(--softer)}
.scoretable .k{color:var(--muted)} .scoretable .v{font-weight:700}
.scoretable .v.gold{color:var(--amber)}
.modal .cta{width:100%;margin-top:18px;background:var(--green);color:#fff;border:none;border-radius:var(--r);
  padding:14px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;cursor:pointer}
.modal .cta:hover{background:var(--green-d)}

/* ---- stats ---- */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{background:var(--softer);border:1px solid var(--line);border-radius:10px;padding:12px 6px;text-align:center}
.stat .n{font-size:24px;font-weight:800;line-height:1.1}
.stat .l{font-size:10.5px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.4px;line-height:1.25}
.dist{display:flex;flex-direction:column;gap:6px}
.distrow{display:flex;align-items:center;gap:10px;font-size:13px}
.distrow .k{width:58px;color:var(--muted);flex:0 0 auto}
.distrow .track{flex:1;background:var(--soft);border-radius:5px;overflow:hidden;height:22px}
.distrow .barfill{background:var(--green);height:22px;border-radius:5px;display:flex;align-items:center;
  justify-content:flex-end;padding-right:8px;color:#fff;font-weight:700;font-size:12px;min-width:26px}
.distrow.failed .barfill{background:var(--red)}

/* ---- leaderboard ---- */
.board{display:flex;flex-direction:column;gap:6px}
.boardrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;
  padding:10px 13px;font-size:14px;background:var(--softer)}
.boardrow.you{border-color:var(--green);background:var(--green-tint)}
.boardrow .rank{width:22px;color:var(--muted);font-weight:700;flex:0 0 auto}
.boardrow .who{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boardrow .meta{color:var(--muted);font-size:12px;flex:0 0 auto}
.boardrow .pts{font-weight:800;width:52px;text-align:right;flex:0 0 auto}
.boardempty{text-align:center;color:var(--faint);font-size:13.5px;padding:14px 0}
.nickzone{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.niclabel{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);margin-bottom:8px}
.nickzone .row2{margin-top:0}
.nickhint{color:var(--faint);font-size:11.5px;margin-top:8px}