:root{--grove:#12211c;--grove-2:#1a2f28;--grove-3:#244036;--edge:#2f5346;--cream:#f5efe0;--cream-dim:#a9bdb2;--gold:#e8bf5a;--leaf:#7fb069;--sky:#86b8d6;--violet:#b39ddb;--radius:14px;--font:"Avenir Next Rounded", ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{background:radial-gradient(120% 90% at 50% 0%, #1a3129 0%, var(--grove) 62%);color:var(--cream);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0}#app{flex-direction:column;display:flex;position:fixed;inset:0;container:stage/size}#bar,main{width:100%;max-width:560px;margin-inline:auto}#bar{border-bottom:1px solid #f5efe014;align-items:center;gap:12px;padding:10px 14px;display:flex}.brand{align-items:center;gap:8px;display:flex}.brand h1{letter-spacing:-.01em;margin:0;font-size:17px;font-weight:800}.mark{background:linear-gradient(150deg, var(--leaf), var(--gold));border-radius:50% 50% 50% 4px;width:18px;height:18px;display:inline-block}.modes{background:var(--grove-2);border-radius:999px;gap:4px;margin-left:auto;padding:3px;display:flex}.modes button{color:var(--cream-dim);font:700 12.5px var(--font);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:5px 12px}.modes button[aria-selected=true]{background:var(--grove-3);color:var(--cream)}.tally{color:var(--cream-dim);white-space:nowrap;font-size:11.5px;font-weight:700}main{--column-chrome:303px;--fit:max(0px, 100cqh - var(--column-chrome) - 16px);flex-direction:column;flex:1;gap:8px;min-height:0;padding:10px 14px 14px;display:flex}.section-label{letter-spacing:1.6px;text-transform:uppercase;color:var(--cream-dim);margin:0 0 6px;font-size:10px;font-weight:800}.section-label span{color:var(--gold);letter-spacing:0;text-transform:none;font-size:11.5px}#grid{grid-template-columns:repeat(var(--cols,6), 1fr);width:min(100%, calc((min(34cqh, 292px, var(--fit) * .58) / var(--rows,6)) * var(--cols,6)));gap:4px;margin:0 auto;display:grid}.cell{aspect-ratio:1;border-radius:7px;place-items:center;font-size:clamp(12px,4.2cqmin,22px);font-weight:800;display:grid}.cell.blank{background:0 0}.cell.empty{background:var(--grove-2);border:1.5px solid var(--edge)}.cell.filled{background:var(--cream);color:var(--grove);animation:.26s cubic-bezier(.2,1.4,.4,1) drop}.cell.filled.hint{color:#4a4130;background:#e2d6b4}@keyframes drop{0%{opacity:0;transform:scale(.6)translateY(-6px)}to{opacity:1;transform:none}}#extras-wrap{background:var(--grove-2);border:1.5px solid var(--edge);border-radius:var(--radius);flex-direction:column;flex:1;min-height:104px;padding:10px 12px 4px;display:flex;overflow:hidden;mask-image:linear-gradient(#000 calc(100% - 14px),#0000 100%)}#extras-wrap .section-label{justify-content:space-between;align-items:baseline;display:flex}.extras-count{font-weight:800;color:var(--gold)!important;font-size:22px!important}.extras{scrollbar-width:thin;flex-wrap:wrap;align-content:flex-start;gap:5px;padding-bottom:12px;display:flex;overflow-y:auto}.chip{letter-spacing:.3px;background:#0000002e;border:1.5px solid;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;animation:.22s ease-out pop}.chip.len-3{color:var(--leaf);border-color:var(--leaf)}.chip.len-4{color:var(--sky);border-color:var(--sky)}.chip.len-5{color:var(--violet);border-color:var(--violet)}.chip.len-6{color:var(--gold);border-color:var(--gold)}@keyframes pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}.extras-empty{color:var(--cream-dim);margin:0;font-size:12px;line-height:1.45}.current{letter-spacing:3px;min-height:34px;color:var(--gold);place-items:center;font-size:21px;font-weight:800;display:grid}.current.active{cursor:pointer;background:#e8bf5a1a;border:1.5px solid #e8bf5a66;border-radius:999px;justify-self:center;width:max-content;margin:0 auto;padding:2px 18px}.current.good{color:var(--cream);animation:.4s ease-out bump}.current.extra{color:var(--leaf);animation:.4s ease-out bump}.current.bad{color:#d98b7a;animation:.36s ease-out shake}@keyframes bump{50%{transform:scale(1.18)}}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}#wheel-wrap{place-items:center;display:grid}.wheel{width:min(64cqw, 25cqh, 250px, var(--fit) * .42);aspect-ratio:1;background:var(--grove-2);border:2px solid var(--edge);touch-action:none;border-radius:50%;position:relative}.trace{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.trace path{stroke:var(--gold);stroke-width:7px;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.8}.letter{aspect-ratio:1;border:2px solid var(--edge);background:var(--grove-3);width:27%;color:var(--cream);font:800 clamp(14px, 5.2cqmin, 25px) var(--font);cursor:pointer;border-radius:50%;place-items:center;transition:transform .1s,background .1s;display:grid;position:absolute;transform:translate(-50%,-50%)}.letter.on{background:var(--gold);color:var(--grove);border-color:var(--gold);transform:translate(-50%,-50%)scale(1.08)}.controls{justify-content:center;gap:8px;display:flex}.controls button{border:1.5px solid var(--edge);background:var(--grove-2);color:var(--cream);font:800 13px var(--font);cursor:pointer;border-radius:999px;padding:9px 18px}.controls button:disabled{opacity:.45;cursor:default}.controls button.primary{background:var(--gold);color:var(--grove);border-color:var(--gold)}.toast{border:1px solid var(--edge);color:var(--cream);opacity:0;pointer-events:none;background:#0a1410f0;border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:700;transition:opacity .16s,transform .16s;position:absolute;bottom:22%;left:50%;transform:translate(-50%)translateY(8px)}.toast.show{opacity:1;transform:translate(-50%)}dialog#done{border:1.5px solid var(--edge);background:var(--grove-2);color:var(--cream);border-radius:18px;width:calc(100% - 36px);max-width:340px;padding:0}dialog#done::backdrop{background:#060e0bb8}.done-inner{text-align:center;padding:22px 20px 18px}.done-eyebrow{letter-spacing:1.8px;text-transform:uppercase;color:var(--leaf);margin:0 0 4px;font-size:10px;font-weight:800}.done-inner h2{letter-spacing:4px;margin:0 0 10px;font-size:20px}.done-score{color:var(--cream-dim);margin:0 0 12px;font-size:14px}.done-score b{color:var(--gold);font-size:26px}.done-shape{white-space:pre-wrap;margin:0 0 16px;font-family:inherit;font-size:15px;line-height:1.35}.done-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.done-actions button{border:1.5px solid var(--edge);background:var(--grove-3);color:var(--cream);font:800 13px var(--font);cursor:pointer;border-radius:999px;padding:9px 16px}.done-actions button.primary{background:var(--gold);color:var(--grove);border-color:var(--gold)}.done-note{color:var(--cream-dim);margin:12px 0 0;font-size:11px;line-height:1.5}#cross-promo{background:var(--grove-3);border:1px solid var(--edge);color:var(--cream);text-align:left;border-radius:12px;margin-top:14px;padding:10px 12px;text-decoration:none;display:block}.promo-kicker{letter-spacing:1.4px;text-transform:uppercase;color:var(--cream-dim);font-size:9px;font-weight:800;display:block}.promo-body{margin-top:3px;font-size:12px;line-height:1.4;display:block}@container stage (height<=640px){#extras-wrap{min-height:66px;padding-top:8px}.current{min-height:26px;font-size:18px}main{--column-chrome:239px;gap:6px;padding:8px 14px 10px}.controls button{padding:7px 15px}}.bar-btn{min-width:34px;min-height:34px;color:var(--cream-dim);font:inherit;letter-spacing:.06em;cursor:pointer;background:0 0;border:1px solid #f5efe02e;border-radius:999px;flex:none;padding:6px 10px;font-size:13px;font-weight:800}.bar-btn:hover{color:var(--cream)}
