:root{--bg:#ffffff;--bg2:#f7f7f8;--ink:#16181d;--mut:#5c6270;--line:rgba(0,0,0,.10);--acc:#002FA7}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.55 -apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;-webkit-tap-highlight-color:transparent}
.wrap{max-width:560px;margin:0 auto;padding:14px 14px 40px}
header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}
header h1{font-size:1.35rem;letter-spacing:-.01em}
header h1 a{color:inherit;text-decoration:none}
.meta{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px;color:var(--mut);font-variant-numeric:tabular-nums}
#timer{font-weight:600;color:var(--ink)}
#grid{display:grid;gap:6px;margin:0 auto;max-width:440px}
.cell{aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:var(--bg2);font-size:clamp(20px,7vw,34px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .06s}
.cell:active{transform:scale(.94)}
.cell.given{border-width:2px;border-color:rgba(0,0,0,.28)}
.cell.sel{outline:3px solid var(--acc);outline-offset:1px}
.cell.bad{box-shadow:inset 0 0 0 3px #C8102E}
#palette{display:grid;gap:5px;margin:14px auto 0;max-width:440px}
.pal{aspect-ratio:1;border:1px solid var(--line);border-radius:8px;font-size:clamp(16px,5vw,24px);cursor:pointer}
.pal.used{opacity:.22;filter:grayscale(.6)}
.bar{display:flex;gap:8px;justify-content:center;margin:14px 0}
.btn{border:1px solid var(--line);background:var(--bg2);border-radius:9px;padding:9px 16px;font-size:.95rem;cursor:pointer;color:var(--ink);text-decoration:none}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
#win{border:1px solid var(--line);border-radius:12px;padding:18px;margin:16px 0;text-align:center;background:var(--bg2)}
#win h2{font-size:1.2rem;margin-bottom:6px}
#win p{color:var(--mut);margin:4px 0}
.rules{border-top:1px solid var(--line);margin-top:22px;padding-top:14px;color:var(--mut);font-size:.92rem}
.rules h2{font-size:1rem;color:var(--ink);margin-bottom:6px}
.rules li{margin:4px 0 4px 18px}
.modes{margin:10px 0;font-size:.92rem;color:var(--mut)}
.modes a{color:var(--acc)}
footer{border-top:1px solid var(--line);margin-top:26px;padding-top:12px;font-size:.85rem;color:var(--mut)}
footer a{color:var(--acc)}
.subline{margin-top:8px}
.embed header,.embed .rules,.embed footer,.embed .modes,.embed .subline,.embed .gamesnav{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#101216;--bg2:#1a1d23;--ink:#e8eaf0;--mut:#9aa1b0;--line:rgba(255,255,255,.14);--acc:#7aa2ff}
  .cell.given{border-color:rgba(255,255,255,.4)}
}