:root{--ink: #0b0a08;--ink-2: #14110d;--ink-3: #1c1813;--line: #2b2620;--line-2: #3b342b;--parchment: #ece5d2;--parchment-dim: #a89e84;--parchment-faint: #6c6452;--gold: #d4a957;--gold-bright: #f0c97e;--gold-deep: #a8842f;--ember: #c0532a;--ember-deep: #8a3a1a;--correct: #c79740;--correct-glow: rgba(212, 169, 87, .45);--present: #b85d2a;--present-glow: rgba(192, 83, 42, .35);--absent: #2a2520;--cell: 17vmin;--cell-max: 76px;--flip: .55s;--f-display: "Fraunces", "Times New Roman", serif;--f-ui: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box}html,body{margin:0;background:var(--ink);color:var(--parchment);font-family:var(--f-ui);font-size:15px;-webkit-text-size-adjust:100%}body{min-height:100dvh;display:flex;flex-direction:column;align-items:center;background:radial-gradient(1100px 700px at 50% -10%,rgba(212,169,87,.08),transparent 70%),radial-gradient(900px 600px at 50% 110%,rgba(192,83,42,.06),transparent 70%),var(--ink);background-attachment:fixed;overflow-x:hidden;position:relative}.grain{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:.35;mix-blend-mode:overlay;z-index:1}.vignette{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.55) 100%);z-index:2}header,main,footer{position:relative;z-index:3}header{width:100%;max-width:520px;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;padding:22px 22px 14px}.rune-mark{width:44px;height:44px;color:var(--gold);opacity:.85;animation:rune-spin 90s linear infinite}.rune-mark svg{display:block;width:100%;height:100%}@keyframes rune-spin{to{transform:rotate(360deg)}}.title-block{text-align:center}.overline{margin:0;font-size:.62rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--parchment-faint)}.overline span{color:var(--gold);font-variant-numeric:tabular-nums}header h1{margin:2px 0 0;font-family:var(--f-display);font-optical-sizing:auto;font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 1;font-weight:500;font-style:italic;font-size:clamp(2.4rem,8vw,3.1rem);line-height:.95;color:var(--parchment);letter-spacing:-.01em;background:linear-gradient(180deg,var(--parchment) 0%,var(--gold-bright) 65%,var(--gold-deep) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 40px rgba(212,169,87,.15)}.tagline{margin:4px 0 0;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:.82rem;color:var(--parchment-dim);letter-spacing:.02em}.tagline em{color:var(--gold);font-style:italic}.header-actions{display:flex;gap:6px;align-items:center}.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--ink-2);color:var(--parchment-dim);font-family:var(--f-ui);font-size:.85rem;cursor:pointer;transition:color .18s,border-color .18s,transform .12s}.icon-btn:hover{border-color:var(--gold);color:var(--gold)}.icon-btn:active{transform:scale(.94)}main#app{width:100%;max-width:520px;flex:1;display:flex;flex-direction:column;align-items:center;gap:18px;padding:14px 22px 28px}.modebar{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--ink-2);padding:3px;gap:2px}.tab{border:0;background:transparent;color:var(--parchment-dim);padding:7px 18px;border-radius:999px;font-family:var(--f-ui);font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:color .18s,background .18s}.tab:hover{color:var(--parchment)}.tab.on{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));color:var(--ink);box-shadow:0 0 16px var(--correct-glow)}.mode-sub{margin:-6px 0 0;color:var(--parchment-dim);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;text-align:center}.board{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;perspective:700px}.board:before,.board:after,.board>.corner-tl,.board>.corner-tr,.board>.corner-bl,.board>.corner-br{content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--gold);opacity:.6;pointer-events:none}.board:before{top:0;left:0;border-right:0;border-bottom:0}.board:after{top:0;right:0;border-left:0;border-bottom:0}.board>.corner-bl{bottom:0;left:0;border-right:0;border-top:0}.board>.corner-br{bottom:0;right:0;border-left:0;border-top:0}.row{display:flex;gap:10px;justify-content:center;animation:row-in .5s ease both}.row:nth-child(2){animation-delay:.04s}.row:nth-child(3){animation-delay:.08s}.row:nth-child(4){animation-delay:.12s}.row:nth-child(5){animation-delay:.16s}.row:nth-child(6){animation-delay:.2s}@keyframes row-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.cell{width:min(var(--cell),var(--cell-max));height:min(var(--cell),var(--cell-max));border:1.5px solid var(--line);border-radius:4px;display:grid;place-items:center;background:var(--ink-2);color:var(--parchment-dim);transition:border-color .15s,background .15s,transform .12s,box-shadow .2s;position:relative}.row.draft .cell{cursor:pointer;border-style:dashed;border-color:var(--line-2)}.row.draft .cell:hover{border-color:var(--gold);border-style:solid}.cell.pending{border-color:var(--gold);border-style:solid;color:var(--parchment)}.cell.sel{border-color:var(--gold);border-style:solid;box-shadow:0 0 0 2px var(--correct-glow),inset 0 0 18px #d4a9571f;color:var(--parchment)}.cell.sel:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border:1px solid var(--gold);border-radius:6px;opacity:.5;pointer-events:none;animation:sel-pulse 1.6s ease-in-out infinite}@keyframes sel-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.1;transform:scale(1.06)}}.cell.correct{background:linear-gradient(160deg,var(--gold-bright),var(--gold-deep));border-color:var(--gold-deep);color:var(--ink);box-shadow:0 0 24px var(--correct-glow),inset 0 1px #ffffff40}.cell.present{background:linear-gradient(160deg,#d8693a,var(--ember-deep));border-color:var(--ember-deep);color:var(--parchment);box-shadow:0 0 18px var(--present-glow)}.cell.absent{background:var(--absent);border-color:var(--absent);color:var(--parchment-faint)}.cell.flip{animation:flip var(--flip) cubic-bezier(.5,0,.5,1)}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.row.win .cell{animation:bounce .6s ease}.row.win .cell:nth-child(2){animation-delay:.07s}.row.win .cell:nth-child(3){animation-delay:.14s}.row.win .cell:nth-child(4){animation-delay:.21s}.row.win .cell:nth-child(5){animation-delay:.28s}.row.win .cell:nth-child(6){animation-delay:.35s}@keyframes bounce{0%,to{transform:translateY(0)}35%{transform:translateY(-14px)}60%{transform:translateY(-3px)}}.glyph{width:70%;height:70%;color:inherit}.glyph.big{width:64px;height:64px}.preview-wrap{display:flex;align-items:center;gap:12px}.preview-label{font-family:var(--f-display);font-style:italic;font-size:.78rem;color:var(--parchment-faint);letter-spacing:.04em}.preview{width:min(var(--cell),var(--cell-max));height:min(var(--cell),var(--cell-max));border:1px dashed var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--gold);background:radial-gradient(circle at center,rgba(212,169,87,.08),transparent 70%),var(--ink-2)}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:380px}.prim{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:6px;background:var(--ink-2);color:var(--parchment-dim);cursor:pointer;display:grid;place-items:center;transition:border-color .15s,color .15s,transform .1s,background .15s}.prim:hover{border-color:var(--gold);color:var(--gold);background:var(--ink-3)}.prim:active{transform:scale(.94)}.prim .glyph{width:56%;height:56%}.prim .key{position:absolute;top:4px;left:6px;font-family:var(--f-ui);font-size:.55rem;color:var(--parchment-faint);letter-spacing:.1em}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.btn{border:1px solid var(--line-2);background:transparent;color:var(--parchment);padding:10px 18px;border-radius:4px;font-family:var(--f-ui);font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:border-color .18s,color .18s,background .18s,transform .1s}.btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.32;cursor:default}.btn.primary{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));border-color:var(--gold-deep);color:var(--ink);font-weight:600;box-shadow:0 0 18px var(--correct-glow);position:relative;overflow:hidden}.btn.primary:hover:not(:disabled){color:var(--ink);box-shadow:0 0 28px var(--correct-glow)}.btn.primary:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,245,220,.5),transparent);transform:translate(-100%);transition:transform .7s}.btn.primary:hover:not(:disabled):before{transform:translate(100%)}.btn.small{padding:6px 12px;font-size:.65rem}.end{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;animation:end-in .6s ease both}@keyframes end-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.end-msg{font-family:var(--f-display);font-style:italic;font-size:1.4rem;font-weight:400;margin:0;color:var(--gold)}.end-sub{color:var(--parchment-faint);margin:0;font-size:.68rem;text-transform:uppercase;letter-spacing:.28em}.best{color:var(--parchment-dim);font-size:.78rem;margin:0;letter-spacing:.04em}.answer{display:flex;gap:10px}.answer .glyph{width:42px;height:42px;color:var(--gold)}.trophy{display:flex;flex-direction:column;align-items:center;gap:12px}.trophy-glyph{width:156px;height:156px;color:var(--gold);background:radial-gradient(circle at center,rgba(212,169,87,.15),transparent 70%),var(--ink-2);border:1px solid var(--gold-deep);border-radius:50%;padding:22px;box-shadow:0 0 56px var(--correct-glow),inset 0 0 32px #d4a9571a;animation:trophy-glow 3s ease-in-out infinite}@keyframes trophy-glow{0%,to{box-shadow:0 0 56px var(--correct-glow),inset 0 0 32px #d4a9571a}50%{box-shadow:0 0 80px var(--correct-glow),inset 0 0 40px #d4a9572e}}.trophy-line{margin:0;font-family:var(--f-ui);font-size:.78rem;font-weight:500;letter-spacing:.14em;color:var(--parchment-dim);font-variant-numeric:tabular-nums}.trophy-line strong{color:var(--gold);font-weight:500}.share{display:flex;flex-direction:column;gap:12px;align-items:center}.share-links{display:flex;gap:8px}.countdown{color:var(--parchment-faint);font-family:var(--f-ui);font-variant-numeric:tabular-nums;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin:6px 0 0}.zen{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}.zen-stage{width:196px;height:196px;display:grid;place-items:center;color:var(--gold);background:radial-gradient(circle at center,rgba(212,169,87,.12),transparent 70%),var(--ink-2);border:1px solid var(--gold-deep);border-radius:50%;box-shadow:0 0 48px var(--correct-glow),inset 0 0 24px #d4a95714}.zen-glyph{width:76%;height:76%}.zen .row.draft{flex-wrap:wrap;justify-content:center}.zen .mode-sub{text-align:center;max-width:360px;font-family:var(--f-display);font-style:italic;text-transform:none;letter-spacing:.02em;font-size:.85rem;color:var(--parchment-dim)}footer{font-size:.65rem;color:var(--parchment-faint);padding:22px;text-align:center;width:100%;max-width:520px;letter-spacing:.12em;text-transform:uppercase}footer p{margin:12px 0 0}footer a{color:var(--parchment-dim);text-decoration:none;border-bottom:1px solid var(--line-2);transition:color .15s,border-color .15s}footer a:hover{color:var(--gold);border-bottom-color:var(--gold)}footer .dot{color:var(--gold);margin:0 6px}.footer-rule{display:block;height:1px;width:60%;margin:0 auto;background:linear-gradient(90deg,transparent,var(--line-2) 30%,var(--gold) 50%,var(--line-2) 70%,transparent)}dialog{border:1px solid var(--line-2);border-radius:6px;background:var(--ink-2);color:var(--parchment);font-family:var(--f-ui);max-width:420px;width:calc(100% - 28px);padding:28px;position:relative}dialog:before,dialog:after{content:"";position:absolute;width:16px;height:16px;border:1.5px solid var(--gold);opacity:.6}dialog:before{top:8px;left:8px;border-right:0;border-bottom:0}dialog:after{bottom:8px;right:8px;border-left:0;border-top:0}dialog::backdrop{background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}dialog h2{margin-top:0;font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.5rem;color:var(--gold);letter-spacing:0}dialog h3{font-family:var(--f-ui);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--parchment-dim);margin:18px 0 10px}dialog p{line-height:1.6;font-size:.85rem;color:var(--parchment-dim)}dialog p strong{color:var(--parchment);font-weight:500}dialog form{margin-top:18px;display:flex;justify-content:flex-end}.legend{list-style:none;padding:0;font-size:.85rem}.legend li{display:flex;align-items:center;gap:12px;margin:10px 0;color:var(--parchment-dim)}.swatch{width:22px;height:22px;border-radius:3px;display:inline-block}.swatch.correct{background:linear-gradient(160deg,var(--gold-bright),var(--gold-deep));box-shadow:0 0 10px var(--correct-glow)}.swatch.present{background:linear-gradient(160deg,#d8693a,var(--ember-deep))}.swatch.absent{background:var(--absent)}kbd{border:1px solid var(--line-2);border-radius:3px;padding:2px 6px;font-family:var(--f-ui);font-size:.75em;background:var(--ink);color:var(--gold)}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;margin-bottom:6px}.stat-grid>div{display:flex;flex-direction:column;gap:4px;padding:10px 4px;background:var(--ink);border:1px solid var(--line);border-radius:4px}.stat-grid b{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.7rem;color:var(--gold);font-variant-numeric:tabular-nums}.stat-grid span{font-size:.55rem;color:var(--parchment-faint);text-transform:uppercase;letter-spacing:.2em}.dist{display:flex;flex-direction:column;gap:5px}.dist-row{display:flex;align-items:center;gap:8px;font-family:var(--f-ui)}.dist-i{width:14px;color:var(--parchment-faint);font-size:.8rem;font-variant-numeric:tabular-nums}.dist-bar{background:var(--absent);border-radius:2px;padding:3px 8px;font-size:.75rem;text-align:right;min-width:24px;color:var(--parchment-dim);font-variant-numeric:tabular-nums}.dist-bar.hi{background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));color:var(--ink);font-weight:600}.toast{position:fixed;left:50%;top:18%;transform:translate(-50%,-8px);background:var(--ink);color:var(--gold);border:1px solid var(--gold);padding:10px 18px;border-radius:3px;font-family:var(--f-ui);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:100;box-shadow:0 0 24px var(--correct-glow)}.toast.show{opacity:1;transform:translate(-50%)}.qr-frame{margin:18px auto 12px;width:220px;padding:14px;background:var(--parchment);border:1px solid var(--gold-deep);border-radius:6px;position:relative;box-shadow:0 0 36px var(--correct-glow)}.qr-frame:before,.qr-frame:after{content:"";position:absolute;width:12px;height:12px;border:1.5px solid var(--gold)}.qr-frame:before{top:-2px;left:-2px;border-right:0;border-bottom:0}.qr-frame:after{bottom:-2px;right:-2px;border-left:0;border-top:0}#qr-canvas{display:block}#qr-canvas svg{display:block;width:100%;height:auto}.qr-url{font-family:var(--f-ui);font-size:.72rem;color:var(--gold);text-align:center;word-break:break-all;letter-spacing:.02em;margin:0 0 18px;text-transform:none}.qr-actions{display:flex;justify-content:space-between;gap:10px}@media (pointer: coarse),(max-width: 520px){.desktop-only{display:none!important}}::selection{background:var(--gold);color:var(--ink)}@media (max-width: 380px){header{grid-template-columns:40px 1fr auto;padding:16px 14px 10px}.rune-mark{width:32px;height:32px}header h1{font-size:2rem}main#app{padding:10px 14px 22px;gap:14px}.board{padding:16px}.preview-label{display:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important;animation:none!important}}