:root{color-scheme:dark;--bg:#0d1424;--panel:#151f33;--line:#2c3850;--muted:#a5b3c9;--text:#edf2fa;--gold:#ffce72;--blue:#87b9ff;--cell:#edf2fa;--ink:#101828;--sel:#ffce72;--word:#9cc3ff;--bad:#e5484d;--good:#2f9e6e}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
a{color:var(--blue)}
.usb-bar{display:flex;gap:16px;padding:10px 28px;border-bottom:1px solid var(--line);font-size:13px}
.usb-bar a{color:var(--muted);text-decoration:none;font-weight:600}
.usb-bar a:hover{color:var(--text)}
header,main,footer{max-width:1100px;margin:auto}
header{padding:26px 28px 20px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
h1{font:600 34px/1.2 Georgia,serif;margin:6px 0 4px}
.star{color:var(--gold);margin-left:14px}
.byline{margin:0;color:var(--muted);font-size:14px}
.byline #puzzleTitle{color:var(--gold)}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
button,select{font:600 14px/1.4 system-ui;border:1px solid var(--line);border-radius:8px;background:#1e2b43;color:var(--text);padding:9px 14px;cursor:pointer;transition:background .15s}
button:hover:not(:disabled),select:hover{background:#30435e}
button:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
button:disabled{cursor:default;opacity:.45}
.primary{background:var(--gold);color:#1c2433;border-color:var(--gold)}
.primary:hover:not(:disabled){background:#ffe1a4}
.timer{display:flex;flex-direction:column;align-items:flex-end;margin-right:6px;min-width:56px}
.timer small{font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:700}
.timer strong{font:500 22px/1.1 Georgia,serif;color:var(--gold);font-variant-numeric:tabular-nums}
.menu{position:relative}
.dropdown{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;display:flex;flex-direction:column;min-width:160px;box-shadow:0 10px 30px #0008}
.dropdown[hidden]{display:none}
.dropdown button{background:transparent;border:0;text-align:left;border-radius:6px}
.dropdown .danger{color:#ff9a9d;border-top:1px solid var(--line);border-radius:0 0 6px 6px;margin-top:4px}
.dropdown .auto{display:flex;gap:8px;align-items:center;font-size:14px;padding:9px 14px;border-top:1px solid var(--line);margin-top:4px;color:var(--muted);cursor:pointer}
main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;padding:24px 28px;align-items:start}
.board{display:flex;flex-direction:column;align-items:center;gap:14px}
.cluebar{width:100%;max-width:520px;display:flex;align-items:stretch;background:#233550;border:1px solid #496080;border-radius:10px;min-height:58px}
.nav-clue{background:transparent;border:0;font-size:26px;line-height:1;padding:0 14px;color:var(--muted)}
.cluebar-text{flex:1;display:flex;align-items:center;gap:10px;padding:10px 4px;font-size:17px;cursor:pointer;user-select:none}
.cluebar-text b{color:var(--gold);font-weight:700;white-space:nowrap}
.grid-wrap{position:relative;width:100%;max-width:max(240px,min(520px,calc(100vh - 450px)))}
@supports (height:100svh){.grid-wrap{max-width:max(240px,min(520px,calc(100svh - 450px)))}}
.grid{display:grid;gap:0;border:3px solid #050a14;background:#050a14;border-radius:4px;touch-action:manipulation;user-select:none;outline:none}
.cell{position:relative;aspect-ratio:1;background:var(--cell);color:var(--ink);border:1px solid #6d7a90;display:flex;align-items:center;justify-content:center;font:600 clamp(26px,9vw,46px)/1 system-ui,sans-serif;text-transform:uppercase;cursor:pointer}
.cell.block{background:#050a14;border-color:#050a14;cursor:default}
.cell .num{position:absolute;top:3px;left:5px;font-size:clamp(10px,2.6vw,14px);font-weight:600;color:#33415a}
.cell.word{background:var(--word)}
.cell.active{background:var(--sel)}
.cell.wrong::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1.5px),var(--bad) calc(50% - 1.5px),var(--bad) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.cell.wrong{color:var(--bad)}
.cell.revealed::before{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 12px 12px 0;border-color:transparent #2563eb transparent transparent}
.cell.correct{color:#1d4ed8}
.grid.solved .cell:not(.block){animation:pop .5s ease both}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.08);background:#b8f0d4}100%{transform:scale(1)}}
.paused{position:absolute;inset:0;background:#0d1424f2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:4px;border:1px solid var(--line)}
.paused[hidden]{display:none}
.paused p{font:500 26px Georgia,serif;margin:0}
.status{min-height:22px;margin:0;color:var(--muted);font-size:15px;text-align:center}
.status.win{color:var(--gold)}
.keyboard{display:none;width:100%;max-width:520px;flex-direction:column;gap:6px}
.keyboard .row{display:flex;gap:5px;justify-content:center}
.keyboard button{flex:1;padding:14px 0;font-size:16px;border-radius:6px;min-width:0;max-width:44px;background:#26344f}
.keyboard button.wide{max-width:70px;flex:1.5;font-size:13px}
.clues{display:flex;flex-direction:column;gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.clues ol{list-style:none;margin:10px 0 0;padding:0}
.clues li{display:flex;gap:10px;padding:7px 10px;margin:0 -10px;border-radius:7px;cursor:pointer;font-size:15px;color:var(--text);border-left:4px solid transparent}
.clues li b{min-width:20px;color:var(--muted)}
.clues li.cross{border-left-color:var(--word)}
.clues li.current{background:#233550;border-left-color:var(--gold)}
.clues li.current b{color:var(--gold)}
.clues li.done{color:var(--muted)}
.clues li .news{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--blue);margin-left:6px;white-space:nowrap}
.archive select{width:100%;margin-top:10px}
.streak{font-size:14px;color:var(--muted);margin:10px 0 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
footer{padding:12px 28px 32px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:13px}
footer a{color:var(--blue);text-decoration:none}
dialog{max-width:520px;width:calc(100% - 32px);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:26px}
dialog::backdrop{background:#000b}
dialog h2{font:500 28px/1.2 Georgia,serif;margin:4px 0 8px}
dialog p,dialog li{color:var(--muted);font-size:15px}
dialog ul{padding-left:20px}
dialog .big{font:500 44px/1 Georgia,serif;color:var(--gold);margin:10px 0}
.newslinks{list-style:none;padding:0!important;margin:14px 0 0}
.newslinks li{padding:10px 0;border-top:1px solid var(--line)}
.newslinks a{color:var(--text);font-weight:600;text-decoration:none}
.newslinks a:hover{color:var(--gold)}
.newslinks small{display:block;color:var(--muted);font-size:13px}
.dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.dialog-actions [hidden]{display:none}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
@media(max-width:900px){main{grid-template-columns:1fr}.clues{display:grid;grid-template-columns:1fr 1fr}.clues .archive{grid-column:1/-1}}
@media(max-width:640px){
  .usb-bar{padding:10px 16px}
  header{padding:12px 16px;flex-direction:column;align-items:stretch;gap:10px}
  header .eyebrow{display:none}
  h1{font-size:24px;margin:0 0 2px}
  .star{margin-left:8px}
  .byline{font-size:13px}
  .tools{justify-content:flex-start;flex-wrap:nowrap;gap:6px}
  .timer{flex-direction:row;align-items:baseline;gap:6px;margin-right:auto;min-width:0}
  .timer small{display:none}
  .timer strong{font-size:20px}
  .tools button{padding:7px 10px;font-size:13px}
  main{padding:14px 12px;gap:18px}
  .board{gap:10px}
  .cluebar{min-height:52px}
  .cluebar-text{font-size:15px;line-height:1.35}
  .keyboard button{padding:12px 0}
  .clues{grid-template-columns:1fr}
  footer{flex-direction:column;padding:12px 16px 28px}
}
@media (pointer:coarse),(max-width:640px){.keyboard{display:flex}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}