:root{--navy: #000080;--navy-deep: #00004a;--blue: #0000a8;--azure: #0080c0;--azure-light: #40b0e0;--lapis: #1a3a8a;--lapis-deep: #0a1a4a;--teal: #008080;--stone-0: #ffffff;--stone-1: #dfdfdf;--stone-2: #c0c0c0;--stone-3: #a0a0a0;--stone-4: #808080;--stone-5: #404040;--stone-6: #000000;--ink: #000000;--paper: #ffffff;--font-ui: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;--font-mono: "Courier New", Courier, monospace;--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E")}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden}body{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 0%,rgba(64,176,224,.12),transparent 55%),radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.6),transparent 70%),var(--lapis-deep);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body:before{content:"";position:fixed;inset:0;z-index:0;background-image:var(--grain);background-size:180px 180px;mix-blend-mode:soft-light;opacity:.4;pointer-events:none}body:after{content:"";position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.55) 100%);pointer-events:none}.frame{position:fixed;top:50%;left:50%;z-index:1;width:450px;height:800px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:var(--stone-2);border:2px solid var(--lapis);box-shadow:inset 0 0 0 1px var(--azure),inset 0 0 0 2px var(--stone-6),0 0 30px #000c;transform:translate(-50%,-50%) scale(var(--scale, 1));transform-origin:center}.frame:after{content:"";position:absolute;inset:0;z-index:5;background-image:var(--grain);background-size:180px 180px;mix-blend-mode:soft-light;opacity:.3;pointer-events:none}.titlebar{flex:0 0 24px;display:flex;align-items:center;gap:5px;padding:0 5px;background:var(--navy);border-bottom:1px solid var(--lapis-deep);box-shadow:inset 0 1px 0 var(--azure-light),inset 0 -1px 0 var(--lapis);user-select:none}.titlebar-icon{flex:0 0 16px;width:16px;height:16px;display:grid;place-items:center;background:var(--stone-2);border:1px solid var(--stone-6);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4)}.titlebar-icon svg{display:block;width:12px;height:12px}.titlebar-text{margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--paper);text-shadow:0 1px 0 #000}.titlebar-95{color:var(--azure-light)}.titlebar-edition{margin-left:auto;font-size:8px;letter-spacing:.16em;color:var(--azure-light);text-shadow:0 1px 0 #000}.topbar{flex:0 0 28px;display:flex;gap:2px;padding:2px;background:var(--stone-2);border-bottom:1px solid var(--lapis);box-shadow:inset 0 1px 0 var(--stone-0),inset 0 -1px 0 var(--azure)}.bar-button{height:24px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 7px;font-family:var(--font-ui);font-size:10px;font-weight:700;color:var(--ink);background:var(--stone-2);border:1px solid var(--lapis-deep);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4);cursor:pointer}.bar-button:hover{background:var(--stone-1)}.bar-button:active{box-shadow:inset 1px 1px 0 var(--stone-4),inset -1px -1px 0 var(--stone-0)}.bar-button:focus-visible{outline:1px dotted var(--ink);outline-offset:-3px}.bar-primary{flex:1}.led{width:6px;height:6px;flex:0 0 6px;background:var(--lapis-deep);border:1px solid var(--stone-6);box-shadow:inset 1px 1px #000,inset -1px -1px 0 var(--lapis)}[aria-pressed=true] .led{background:var(--azure);box-shadow:inset 1px 1px 0 var(--azure-light),inset -1px -1px 0 var(--lapis-deep)}.stage{flex:1;display:grid;place-items:center;background:var(--stone-2);box-shadow:inset 0 1px 0 var(--stone-0),inset 0 -1px 0 var(--stone-4)}.board-frame{position:relative;width:374px;height:744px;padding:2px;background:var(--stone-2);border:1px solid var(--stone-6);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4),inset 0 0 0 1px var(--lapis),inset 0 0 0 2px var(--azure)}.board{width:370px;height:740px;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(20,1fr);background:var(--lapis-deep);box-shadow:inset 2px 2px #000}.cell{position:relative;background:var(--lapis-deep);box-shadow:inset 0 0 0 1px var(--lapis)}.cell.p1{background:#00b8c8;box-shadow:inset 1px 1px #7ae0e8,inset -1px -1px #006a78,inset 0 0 0 1px #003a44}.cell.p2{background:#e8c020;box-shadow:inset 1px 1px #fff0a0,inset -1px -1px #8a6a00,inset 0 0 0 1px #4a3a00}.cell.p3{background:#a050c8;box-shadow:inset 1px 1px #d8a0f0,inset -1px -1px #5a2a78,inset 0 0 0 1px #2a0a3a}.cell.p4{background:#40b840;box-shadow:inset 1px 1px #a0e8a0,inset -1px -1px #1a6a1a,inset 0 0 0 1px #0a3a0a}.cell.p5{background:#e04848;box-shadow:inset 1px 1px #f8a0a0,inset -1px -1px #8a1a1a,inset 0 0 0 1px #4a0a0a}.cell.p6{background:#4868e0;box-shadow:inset 1px 1px #a0b0f8,inset -1px -1px #1a2a8a,inset 0 0 0 1px #0a1a4a}.cell.p7{background:#e08020;box-shadow:inset 1px 1px #f8c080,inset -1px -1px #8a4a00,inset 0 0 0 1px #4a2a00}.board-badge,.board-score{position:absolute;top:6px;z-index:2;padding:2px 5px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--azure-light);background:var(--lapis-deep);border:1px solid var(--azure);box-shadow:inset 1px 1px 0 var(--lapis),inset -1px -1px #000;text-shadow:0 1px 0 #000}.board-badge{left:6px}.board-score{right:6px;font-size:11px;letter-spacing:.08em;color:var(--paper)}.modal-layer{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#000020a6}.modal-layer[hidden]{display:none}.dialog{width:300px;background:var(--stone-2);border:1px solid var(--stone-6);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4),0 0 0 1px var(--stone-6),0 0 0 2px var(--azure),0 0 0 3px var(--lapis),0 12px 30px #0009}.dialog-titlebar{height:24px;display:flex;align-items:center;padding:0 6px;background:var(--navy);border-bottom:1px solid var(--lapis-deep);box-shadow:inset 0 1px 0 var(--azure-light),inset 0 -1px 0 var(--lapis);font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--paper);text-shadow:0 1px 0 #000}.dialog-body{display:flex;flex-direction:column;gap:4px;padding:8px}.dialog-toggle{height:24px;display:flex;align-items:center;gap:6px;padding:0 7px;font-family:var(--font-ui);font-size:10px;font-weight:700;color:var(--ink);text-align:left;background:var(--stone-2);border:1px solid var(--lapis-deep);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4);cursor:pointer}.dialog-toggle:active{box-shadow:inset 1px 1px 0 var(--stone-4),inset -1px -1px 0 var(--stone-0)}.dialog-toggle:focus-visible,.dialog-buttons button:focus-visible{outline:1px dotted var(--ink);outline-offset:-3px}.dialog-buttons{display:flex;justify-content:flex-end;gap:4px;padding:0 8px 8px}.dialog-buttons button{min-width:80px;height:24px;font-family:var(--font-ui);font-size:10px;font-weight:700;color:var(--ink);background:var(--stone-2);border:1px solid var(--lapis-deep);box-shadow:inset 1px 1px 0 var(--stone-0),inset -1px -1px 0 var(--stone-4);cursor:pointer}.dialog-buttons button:active{box-shadow:inset 1px 1px 0 var(--stone-4),inset -1px -1px 0 var(--stone-0)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important;animation:none!important}}