:root{
  --bg:#14100e; --bg2:#1d1714; --panel:#231c18; --line:#3a2e28; --line2:#4d3d35;
  --ink:#f3e9df; --muted:#a8968a; --faint:#6f5f55;
  --safelight:#e2493b; --safelight-glow:rgba(226,73,59,.35);
  --warm:#f4b860; --cool:#7fd3dd;
  --hit:#6cc276; --hit-bg:#1f3a24; --flip:#e9c046; --flip-bg:#3d331a; --miss-bg:#2a2320;
  --radius:12px;
  --col-w:min(68px, calc((100vw - 32px - 4 * 10px) / 5));
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 500px at 50% -200px, rgba(226,73,59,.16), transparent 70%),
    var(--bg);
  color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  min-height:100dvh; display:flex; flex-direction:column;
}
button{font:inherit;color:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--line);
  max-width:640px;width:100%;margin:0 auto;
}
.brand{display:flex;align-items:baseline;gap:10px}
.brand h1{font-family:var(--serif);font-weight:800;font-size:22px;letter-spacing:.2px;margin:0;line-height:1}
.brand h1 span{color:var(--safelight)}
.icons{display:flex;gap:4px}
.icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid transparent;background:transparent;
  display:grid;place-items:center;color:var(--muted);
}
.icon-btn:hover,.icon-btn:focus-visible{color:var(--ink);border-color:var(--line2);outline:none}
.icon-btn svg{width:20px;height:20px}

/* ---------- mode bar ---------- */
main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:14px 16px 28px;display:flex;flex-direction:column;align-items:center}
.modebar{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;margin-bottom:14px}
.tabs{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:3px}
.tab{border:0;background:transparent;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.tab[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.meta{font-size:12.5px;color:var(--muted);text-align:right;line-height:1.35}
.meta b{color:var(--ink);font-weight:600}
.tier{display:inline-block;padding:1px 7px;border-radius:999px;border:1px solid var(--line2);font-size:11px;margin-left:4px;letter-spacing:.3px;text-transform:uppercase}
.tier.t0{color:#9fd8a6}.tier.t1{color:#f0cf74}.tier.t2{color:#f08a7e}

/* ---------- exposures (attempt counter) ---------- */
.exposures{display:flex;align-items:center;gap:6px;margin:2px 0 14px}
.exposures .lbl{font-size:12px;color:var(--muted);margin-right:4px;letter-spacing:.4px;text-transform:uppercase}
.frame{width:18px;height:13px;border-radius:2px;border:1.5px solid var(--line2);position:relative}
.frame.used{background:var(--safelight);border-color:var(--safelight);box-shadow:0 0 8px var(--safelight-glow)}

/* ---------- board ---------- */
.board-wrap{position:relative;padding:14px 12px;border-radius:16px;background:var(--bg2);border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03)}
.sprockets{display:flex;justify-content:space-between;padding:0 4px;gap:6px}
.sprockets i{display:block;width:10px;height:6px;border-radius:2px;background:#0d0a09;box-shadow:inset 0 0 0 1px #2c231f}
.sprockets.top{margin-bottom:10px}.sprockets.bottom{margin-top:10px}
.board{display:flex;gap:10px;position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.row-labels{position:absolute;left:-2px;top:0;bottom:0;display:none}

.col{
  width:var(--col-w);border-radius:var(--radius);position:relative;
  background:var(--panel);border:1.5px solid var(--line2);
  display:flex;flex-direction:column;overflow:hidden;cursor:grab;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s, box-shadow .2s;
  outline:none;
}
.col:focus-visible{box-shadow:0 0 0 3px var(--safelight-glow);border-color:var(--safelight)}
.col.selected{border-color:var(--safelight)}
.col.locked{cursor:default;background:var(--hit-bg);border-color:var(--hit)}
.col.dragging{z-index:5;cursor:grabbing;transition:none;box-shadow:0 18px 30px rgba(0,0,0,.5);border-color:var(--ink)}
.col.drop-target{border-color:var(--warm);border-style:dashed}
.cell{
  height:calc(var(--col-w) * 1.02);display:grid;place-items:center;position:relative;
  font-family:var(--mono);font-weight:700;font-size:calc(var(--col-w) * .5);text-transform:uppercase;
  transition:transform .2s cubic-bezier(.5,0,.3,1), color .3s, text-shadow .3s;
}
.cell.top{color:var(--warm)}
.cell.bot{color:var(--cool)}
.col .divider{height:1.5px;background:repeating-linear-gradient(90deg,var(--line2) 0 5px,transparent 5px 9px);margin:0 8px}
.col.flipping .cell.top{transform:translateY(100%)}
.col.flipping .cell.bot{transform:translateY(-100%)}
.col.locked .cell{color:#e7f6e8}
/* a row that currently spells a real word glows */
.board.word-top .cell.top{text-shadow:0 0 14px rgba(244,184,96,.75)}
.board.word-bot .cell.bot{text-shadow:0 0 14px rgba(127,211,221,.75)}
.badge{position:absolute;top:4px;right:5px;width:15px;height:15px;opacity:.9}
.col .grip{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:16px;height:3px;border-radius:2px;background:var(--line2)}
.col.locked .grip{display:none}

/* row word indicators */
.row-hints{display:flex;justify-content:space-between;width:100%;max-width:400px;margin:10px auto 0;font-size:12px;color:var(--faint);gap:10px}
.row-hint{display:flex;align-items:center;gap:6px}
.row-hint .dot{width:8px;height:8px;border-radius:50%;background:var(--line2);transition:background .2s, box-shadow .2s}
.row-hint.on{color:var(--ink)}
.row-hint.top.on .dot{background:var(--warm);box-shadow:0 0 8px var(--warm)}
.row-hint.bot.on .dot{background:var(--cool);box-shadow:0 0 8px var(--cool)}

/* ---------- controls ---------- */
.controls{display:flex;gap:10px;margin-top:18px;width:100%;max-width:400px}
.btn{
  flex:1;height:50px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);
  font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .08s, background .2s, opacity .2s;
}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--safelight);border-color:var(--safelight);color:#1a0806;box-shadow:0 6px 20px var(--safelight-glow)}
.btn.primary:hover:not(:disabled){filter:brightness(1.08)}
.btn.ghost{flex:0 0 auto;width:50px}
.btn[hidden]{display:none}
.hint-line{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center;min-height:18px}

/* ---------- history ---------- */
.history{margin-top:22px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:8px}
.history h2{font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);margin:0 0 2px;font-weight:600}
.hrow{display:flex;gap:6px;align-items:center}
.hrow .n{width:18px;font-size:11px;color:var(--faint);font-family:var(--mono)}
.hcell{flex:1;height:44px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:14px;line-height:1.05;text-transform:uppercase;border:1px solid transparent;position:relative}
.hcell.g{background:var(--hit-bg);border-color:var(--hit);color:#dff3e1}
.hcell.y{background:var(--flip-bg);border-color:var(--flip);color:#f8ecc6}
.hcell.x{background:var(--miss-bg);border-color:var(--line);color:var(--muted)}
.hcell .t{opacity:.95}.hcell .b{opacity:.75}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;top:76px;transform:translate(-50%,-8px);background:var(--ink);color:#1b1310;
  padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:60;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- modals ---------- */
dialog{border:1px solid var(--line2);background:var(--bg2);color:var(--ink);border-radius:18px;padding:0;
  width:min(440px, calc(100vw - 24px));max-height:calc(100dvh - 40px);box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(8,5,4,.72);backdrop-filter:blur(2px)}
.modal{padding:22px 22px 20px;overflow:auto}
.modal h2{font-family:var(--serif);font-weight:800;font-size:24px;margin:0 0 6px}
.modal p{color:#d9cbbf;line-height:1.5;font-size:14.5px;margin:8px 0}
.modal .close{position:absolute;top:10px;right:10px}
.modal ul{padding-left:18px;margin:8px 0;color:#d9cbbf;font-size:14.5px;line-height:1.5}
.modal li{margin:4px 0}
.ex{display:flex;gap:6px;margin:10px 0}
.ex .hcell{flex:0 0 46px;height:52px;font-size:16px}
.legend{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center;margin:12px 0;font-size:14px;color:#d9cbbf}
.legend .hcell{width:34px;height:34px;flex:none;font-size:12px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 18px;text-align:center}
.stats-grid .v{font-family:var(--serif);font-size:30px;font-weight:800;line-height:1}
.stats-grid .k{font-size:11.5px;color:var(--muted);margin-top:4px}
.dist{display:flex;flex-direction:column;gap:5px;margin:8px 0 6px}
.dist .r{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px}
.dist .bar{height:20px;min-width:24px;border-radius:5px;background:var(--line);display:flex;align-items:center;justify-content:flex-end;padding:0 7px;font-size:12px;font-weight:700}
.dist .bar.cur{background:var(--safelight);color:#1a0806}
.result-head{text-align:center}
.reveal{display:flex;flex-direction:column;gap:6px;align-items:center;margin:12px 0 4px}
.reveal .w{display:flex;gap:5px}
.reveal .w span{width:38px;height:42px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:20px;text-transform:uppercase;background:var(--panel);border:1px solid var(--line2)}
.reveal .w.a span{color:var(--warm)}.reveal .w.b span{color:var(--cool)}
.next{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.next .cd{font-family:var(--mono);font-size:22px;font-weight:700}
.next .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.modal .btn{height:46px}

/* ---------- win animation ---------- */
@keyframes develop{0%{filter:invert(1) hue-rotate(180deg) brightness(.6)}60%{filter:invert(0) brightness(1.4)}100%{filter:none}}
.board.developed .col{animation:develop 1.1s ease-out both}
.board.developed .col:nth-child(2){animation-delay:.08s}
.board.developed .col:nth-child(3){animation-delay:.16s}
.board.developed .col:nth-child(4){animation-delay:.24s}
.board.developed .col:nth-child(5){animation-delay:.32s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.board.shake{animation:shake .45s}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.col.pop{animation:pop .3s}

footer{text-align:center;color:var(--faint);font-size:12px;padding:10px 16px 18px}
kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:var(--muted)}
@media (max-width:420px){ .brand h1{font-size:20px} .meta{font-size:11.5px} .hide-sm{display:none} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* ---------- Duotone additions ---------- */
.brand h1 .d{color:var(--warm)} .brand h1 .t{color:var(--cool)}
.icon-btn.signed-in{color:var(--cool)}
.loading .col{animation:pulse 1.2s ease-in-out infinite;cursor:default}
.loading .cell{color:transparent!important}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.banner{width:100%;max-width:400px;margin:0 auto 12px;padding:10px 12px;border-radius:10px;border:1px solid #6b2a24;background:#2b1513;color:#f6c9c3;font-size:13.5px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.banner button{border:1px solid #6b2a24;background:transparent;border-radius:8px;padding:5px 10px;font-size:13px;color:#f6c9c3}
.global{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px;padding:12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);text-align:center}
.global .v{font-family:var(--serif);font-size:22px;font-weight:800;line-height:1}
.global .k{font-size:11px;color:var(--muted);margin-top:4px}
.global-note{font-size:12.5px;color:var(--muted);text-align:center;margin:6px 0 0}
.section-k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:14px}
.form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.form label{font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.form input{height:44px;border-radius:10px;border:1px solid var(--line2);background:var(--bg);color:var(--ink);padding:0 12px;font:inherit;font-size:15px}
.form input:focus{outline:none;border-color:var(--cool);box-shadow:0 0 0 3px rgba(127,211,221,.18)}
.form .err{color:#f39a8f;font-size:13px;min-height:16px}
.linkish{background:none;border:0;padding:0;color:var(--cool);font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.subtabs{display:flex;gap:4px;margin:10px 0 2px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px}
.subtabs button{flex:1;border:0;background:transparent;border-radius:999px;padding:7px 8px;font-size:13px;font-weight:600;color:var(--muted)}
.subtabs button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.code{font-family:var(--mono);font-weight:700;font-size:20px;letter-spacing:1px;text-align:center;padding:14px;border-radius:12px;background:var(--bg);border:1px dashed var(--cool);color:var(--cool);margin:10px 0;user-select:all}
.who{display:flex;align-items:center;gap:12px;margin:10px 0 4px}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:19px;background:linear-gradient(135deg,var(--warm),var(--cool));color:#15100d}
.muted{color:var(--muted)}