:root{--bg:#0b1120;--surface:#131c30;--surface-raised:#1c2740;--line:#2a3755;--text:#e8ecf4;--muted:#94a3bd;--player:#ff6b5e;--player-deep:#d43f33;--ai:#f5c451;--ai-deep:#cf9a22;--radius:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(900px 500px at 75% -10%, #1b2a4d 0%, transparent 70%), var(--bg);color:var(--text);background-attachment:fixed;font-family:Inter,system-ui,sans-serif;line-height:1.5}h1,h2,p,dl,dd{margin:0}h1,.brand,.stat-value,.verdict{font-family:Sora,Inter,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}button:focus-visible{outline:2px solid var(--ai);outline-offset:2px}.muted{color:var(--muted);font-size:14px}.app{flex-direction:column;max-width:1200px;min-height:100dvh;margin:0 auto;padding:0 24px 24px;display:flex}.topbar{justify-content:space-between;align-items:center;padding:16px 0;display:flex}.brand{align-items:center;gap:10px;font-size:16px;font-weight:600;display:flex}.brand-mark{grid-template-columns:1fr 1fr;gap:2px;width:22px;display:grid}.brand-mark i{aspect-ratio:1;background:var(--player);border-radius:50%}.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){background:var(--ai)}.ghost{border:1px solid var(--line);border-radius:10px;min-width:40px;min-height:40px;padding:0 14px;font-size:14px;font-weight:500;transition:background .15s,border-color .15s}.ghost:hover{background:var(--surface-raised);border-color:var(--muted)}.primary{background:var(--player);color:#2b0805;border-radius:12px;min-height:52px;padding:0 32px;font-family:Sora,Inter,sans-serif;font-size:17px;font-weight:600;transition:transform .12s,background .15s}.primary:hover{background:#ff8277;transform:translateY(-1px)}.primary:active{transform:translateY(0)}.home{flex:1;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:64px;padding:16px 0 32px;display:grid}.home h1{letter-spacing:-.03em;font-size:clamp(40px,5.4vw,64px);font-weight:700;line-height:1.05}.home h1 span{color:var(--ai)}.tagline{max-width:44ch;color:var(--muted);margin-top:14px;font-size:18px}.home h2{color:var(--muted);margin:28px 0 10px;font-size:13px;font-weight:500}.levels{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.level{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-align:left;flex-direction:column;gap:4px;padding:12px 14px;transition:border-color .15s,background .15s;display:flex}.level:hover{border-color:var(--muted)}.level strong{font-size:15px;font-weight:600}.level span{color:var(--muted);font-size:12.5px;line-height:1.35}.level.selected{border-color:var(--ai);background:var(--surface-raised)}.steppers{flex-wrap:wrap;gap:24px;margin-bottom:28px;display:flex}.stepper{align-items:center;gap:12px;font-size:15px;display:flex}.stepper>div{align-items:center;gap:4px;display:flex}.stepper output{text-align:center;min-width:28px;font-weight:600}.engine{color:var(--muted);margin-top:16px;font-size:14px}.engine p{align-items:center;gap:8px;display:flex}.engine .muted{font-size:13px}.engine.error{color:var(--player);flex-direction:column;align-items:flex-start;gap:8px;display:flex}.dot{background:var(--ai);border-radius:50%;flex:none;width:8px;height:8px}.engine.ready .dot{background:#5fd08f}.engine.loading .dot{animation:1.2s ease-in-out infinite pulse}.loader{background:var(--surface-raised);border-radius:3px;max-width:280px;height:3px;margin-top:8px;position:relative;overflow:hidden}.loader:after{content:"";background:var(--ai);border-radius:3px;width:40%;animation:1.4s ease-in-out infinite slide;position:absolute;inset:0 auto 0 0}.record{text-align:center;grid-template-columns:repeat(3,1fr);margin-top:20px;display:grid}.record div{flex-direction:column-reverse;display:flex}.record dd{font-family:Sora,Inter,sans-serif;font-size:24px;font-weight:600}.record dt{color:var(--muted);font-size:13px}.board{width:min(100%, calc((100dvh - 150px) * var(--cols) / (var(--rows) + 1)));touch-action:manipulation;margin:0 auto;position:relative}.board-hover-row{aspect-ratio:var(--cols);position:relative}.board-grid{aspect-ratio:var(--cols) / var(--rows);position:relative}.home .board-hover-row{display:none}.tokens,.plate,.columns{position:absolute;inset:0}.plate{pointer-events:none;width:100%;height:100%}.slot{position:absolute}.slot .token{position:absolute;inset:8%}.token{border-radius:50%;display:block}.token.player{background:radial-gradient(circle at 36% 30%, #ffa196 0%, var(--player) 45%, var(--player-deep) 100%);box-shadow:inset 0 0 0 calc(var(--ring,5px)) #78140a47}.token.ai{background:radial-gradient(circle at 36% 30%, #ffe39b 0%, var(--ai) 45%, var(--ai-deep) 100%);box-shadow:inset 0 0 0 calc(var(--ring,5px)) #78500040}.token.neutral{background:var(--muted)}.slot.landing{opacity:.22}.slot.dropping{animation:drop var(--drop-ms) cubic-bezier(.45, 0, .9, .5) both}.slot.dimmed{filter:saturate(.45)brightness(.6);transition:filter .4s}.slot.winning .token{animation:1.1s ease-in-out infinite glow}.columns{top:calc(-100% / var(--rows));display:flex}.column{border-radius:12px;flex:1;transition:background .12s}.column.active{background:#e8ecf40d}.column[aria-disabled=true]{cursor:default}.game{flex:1;grid-template-columns:minmax(0,1fr) 320px;align-items:center;gap:40px;display:grid}.side{flex-direction:column;gap:14px;display:flex}.status{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);grid-template-columns:34px minmax(0,1fr);align-items:center;gap:12px;padding:16px;display:grid}.status h1{letter-spacing:-.01em;font-size:19px;font-weight:600}.status .primary{grid-column:1/-1;width:100%}.status-token{--ring:3px;width:34px;height:34px}.status.thinking .status-token{animation:1.2s ease-in-out infinite pulse}.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:16px}.panel h2{color:var(--muted);font-size:13px;font-weight:500}.panel>.muted{margin-top:6px}.verdict{margin-top:4px;font-size:16px;font-weight:600}.stats-row{gap:32px;margin-top:14px;display:flex}.stats-row div{flex-direction:column;display:flex}.stat-value{font-variant-numeric:tabular-nums;font-size:22px;font-weight:600}.stat-label{color:var(--muted);font-size:12.5px}.gauge{margin-top:16px}.gauge-labels{color:var(--muted);justify-content:space-between;font-size:12.5px;display:flex}.gauge-track{background:var(--player);border-radius:8px;height:8px;margin-top:4px;overflow:hidden;transform:scaleX(-1)}.gauge-fill{background:var(--ai);height:100%;transition:width .35s ease-out}.bars{grid-template-columns:repeat(var(--cols), minmax(0, 1fr));gap:4px;margin-top:18px;display:grid}.bar-column{color:var(--muted);text-align:center;flex-direction:column;gap:4px;font-size:12px;display:flex}.bar-track{background:var(--bg);border-radius:4px;align-items:flex-end;height:76px;display:flex}.bar{background:#3d4e74;border-radius:4px;width:100%;transition:height .3s ease-out}.bar-column.best{color:var(--ai);font-weight:600}.bar-column.best .bar{background:var(--ai)}.legend{color:var(--muted);margin-top:8px;font-size:12.5px}.side-footer{justify-content:space-between;align-items:center;gap:12px;display:flex}.credit{color:var(--muted);font-size:12.5px}@keyframes drop{0%{transform:translateY(calc(var(--fall) * -100%))}72%{animation-timing-function:ease-out;transform:translateY(0)}85%{transform:translateY(calc(var(--fall) * -3.5%));animation-timing-function:ease-in}to{transform:translateY(0)}}@keyframes glow{0%,to{outline-offset:-2px;outline:0 solid #ffffffd9}50%{outline-offset:-8px;outline:4px solid #ffffffd9}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(260%)}}@media (width<=900px){.app{padding:0 16px 16px}.home{grid-template-columns:minmax(0,1fr);gap:32px}.home-side{order:-1;width:100%;max-width:420px;margin:0 auto}.primary{width:100%}.game{grid-template-columns:minmax(0,1fr);align-items:start;gap:16px}.board{width:min(100%, calc((100dvh - 220px) * var(--cols) / (var(--rows) + 1)))}.status{order:-1}.side{display:contents}.game .status{grid-row:1}.token{--ring:3px}}@media (width<=480px){.levels{grid-template-columns:minmax(0,1fr)}.level{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
