:root{color-scheme:dark;--bg:#080d18;--panel:#101928;--line:#29384c;--cream:#f4f0df;--lime:#dbff72;--pink:#ff7aab;--muted:#96a5b8}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 60% 0%,#192544 0,transparent 55%),var(--bg);color:var(--cream);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif}main{width:min(1180px,94%);margin:auto;padding:25px 0 18px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px}.wordmark{display:flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none;font-size:25px;font-weight:950;letter-spacing:-1.5px}.wordmark img{height:39px;transform:rotate(-20deg)}.outline{font-weight:350;margin-left:5px}.edition{font:11px ui-monospace,monospace;letter-spacing:2px;color:var(--lime)}.edition span{color:var(--muted)}i{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--lime)}.topline{display:flex;align-items:center;justify-content:space-between;padding:25px 0 23px}.eyebrow{font:10px ui-monospace,monospace;letter-spacing:2.3px;color:var(--lime)}h1{font-size:30px;line-height:1.15;margin:9px 0 0;letter-spacing:-1px}.personal{text-align:right;display:grid;gap:1px}.personal>span,.personal small{font-size:10px;color:var(--muted);letter-spacing:1px}.personal strong{font:700 26px ui-monospace,monospace;letter-spacing:2px}.personal small{letter-spacing:0}.cabinet{border:1px solid #425169;border-radius:13px;overflow:hidden;box-shadow:0 24px 80px #0007;background:var(--panel)}.hud{display:flex;justify-content:space-between;align-items:center;padding:16px 23px;background:#111a29}.stage{display:grid;gap:3px}.stage small{color:var(--lime);font:700 12px ui-monospace,monospace;letter-spacing:1.5px}.stage span{font-size:12px;color:#aebccc}.counters{display:flex;gap:34px}.counters>div{display:grid;gap:2px}.counters small{font:9px ui-monospace,monospace;letter-spacing:1.5px;color:var(--muted)}.counters strong{font:700 21px ui-monospace,monospace}.pink{color:var(--pink)}.screen{position:relative;aspect-ratio:16/9;background:#0b1020;overflow:hidden}canvas{display:block;width:100%;height:100%}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#060e1df5,#0b1629ce 70%,#101c2b95);display:flex;align-items:center;justify-content:center;gap:60px;padding:30px}.overlay[hidden]{display:none}.intro-art{position:relative;border-radius:50%;width:230px;height:260px;background:radial-gradient(ellipse,#dbff7222,transparent 68%);display:grid;place-items:center}.intro-art img{height:215px;image-rendering:pixelated;filter:drop-shadow(0 16px 0 #0005);animation:breathe 2s ease-in-out infinite}@keyframes breathe{50%{transform:translateY(-8px) rotate(-2deg)}}h2{font-size:66px;line-height:.96;letter-spacing:-3px;margin:18px 0;color:var(--cream)}.overlay p{font-size:15px;color:#bbc8d8}.overlay .micro{font-size:10px;color:var(--muted);margin-bottom:0}button{font:600 12px ui-sans-serif,system-ui;cursor:pointer;color:var(--cream);border:1px solid #39485c;background:#152031;border-radius:7px;min-height:46px;padding:0 17px;touch-action:none;user-select:none;-webkit-user-select:none;transition:background .12s}button:hover{background:#27384a}button:active,button.held{background:#536536;color:var(--lime)}button:focus-visible{outline:3px solid var(--lime);outline-offset:3px}button:disabled{opacity:.55;cursor:wait}.primary{background:var(--lime);border:0;color:#182117;min-height:50px;padding:0 30px;font-size:15px;margin-top:7px}.primary:hover{background:#eeffaa}.underbar{height:35px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;font:10px ui-monospace,monospace;letter-spacing:.6px;color:#b4c1d2;border-top:1px solid var(--line)}#bark-status{color:var(--lime)}#announcement{position:absolute;left:50%;top:12%;transform:translateX(-50%);font:700 16px ui-monospace,monospace;color:var(--lime);background:#071020da;padding:8px 16px;border-radius:5px;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap}.controls{display:flex;justify-content:space-between;gap:10px;margin-top:17px}.movement,.utilities{display:flex;gap:7px}.movement button:nth-child(-n+2){font-size:23px;min-width:52px}.movement button:nth-child(4){color:var(--lime);border-color:#6a7c47}kbd{font:9px ui-monospace,monospace;margin-left:8px;opacity:.55}.utilities button{font-size:11px;padding:0 13px;color:#becbda}footer{display:flex;justify-content:space-between;gap:15px;margin-top:17px;color:var(--muted);font-size:10px}footer b{color:#d4dfec;margin-right:10px;font-weight:600;letter-spacing:1px}.local-note{color:#66788f;font-size:10px;margin:15px 0 0}.mobile-only{display:none}@media(min-width:1200px) and (max-height:900px){main{width:min(1020px,94%);padding-top:15px}.topline{padding:16px 0}.screen{max-height:540px}header{padding-bottom:12px}}
@media(max-width:650px){main{width:94%;padding-top:16px}.wordmark{font-size:21px}.wordmark img{height:31px}.edition{font-size:8px;letter-spacing:1px}.edition span{display:none}.topline{padding:22px 0 19px;align-items:end}.eyebrow{font-size:8px;letter-spacing:1.1px}h1{font-size:23px;line-height:1.15}.mobile-only{display:block}.personal strong{font-size:21px}.personal>span{font-size:8px}.personal small{font-size:8px}.hud{padding:12px;align-items:start;gap:12px}.stage small{font-size:8px;letter-spacing:.5px}.stage span{font-size:9px;max-width:118px;line-height:1.3}.counters{gap:11px}.counters small{font-size:7px;letter-spacing:.5px}.counters strong{font-size:13px}.screen{aspect-ratio:4/5}.overlay{padding:20px;gap:10px}.intro-art{position:absolute;right:10px;bottom:28px;width:110px;height:135px;opacity:.75}.intro-art img{height:120px}.overlay>div:nth-child(2){width:100%;z-index:1}h2{font-size:52px}.overlay p{font-size:12px;max-width:215px}.overlay .micro{font-size:8px;max-width:185px}.primary{padding:0 22px;font-size:13px}.underbar{font-size:7px;padding:0 9px;letter-spacing:0;height:32px}.controls{flex-direction:column;gap:10px}.movement{display:grid;grid-template-columns:1fr 1fr 1.4fr 1.4fr}.movement button{min-height:59px;padding:0 5px}.movement kbd{display:none}.utilities{justify-content:space-between}.utilities button{flex:1;min-height:44px}.controls{margin-top:13px}footer{font-size:9px;line-height:1.8}footer>span:last-child{display:none}.local-note{font-size:9px}#announcement{font-size:10px;max-width:90%;white-space:normal;text-align:center}}
@media(orientation:landscape) and (max-height:550px){main{width:min(760px,94%);padding:8px 0}header,.topline,footer,.local-note{display:none}.hud{padding:7px 14px}.hud .stage span{display:none}.counters strong{font-size:15px}.screen{aspect-ratio:16/9;max-height:calc(100dvh - 140px)}.overlay{gap:20px;padding:15px}h2{font-size:35px;margin:8px 0}.intro-art{height:150px;width:130px}.intro-art img{height:130px}.overlay p{font-size:11px;margin:6px 0}.primary{min-height:42px}.underbar{height:25px}.controls{margin-top:7px}.controls button{min-height:42px}.eyebrow{font-size:8px}}
@media(prefers-reduced-motion:reduce){.intro-art img{animation:none}*{transition:none!important}}
@media(min-width:1200px) and (max-height:1100px){main{width:min(1020px,94%)}}
@media(max-width:650px) and (orientation:portrait){.screen{max-height:calc(100dvh - 430px);min-height:260px}}
.screen{width:100%}
#announcement{max-width:90%;white-space:normal;text-align:center;overflow-wrap:break-word}
.screen:has(.overlay:not([hidden])) #announcement{visibility:hidden}
@media(max-width:650px) and (orientation:portrait){.hud{flex-wrap:wrap}.hud .stage{width:100%}.hud .stage span{max-width:none}.counters{width:100%;justify-content:space-between}.counters strong{white-space:nowrap}.screen{max-height:calc(100dvh - 450px)}}
.overlay-actions{display:flex;gap:8px;flex-wrap:wrap}.overlay{overflow-y:auto}.overlay-actions button{font-size:13px;min-height:44px}.practice{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:15px 0;color:var(--muted);font-size:12px}.practice select{max-width:100%;background:var(--panel);color:var(--cream);border:1px solid var(--line);border-radius:8px;padding:12px;font:inherit}.practice span{font-size:10px}#game:focus{outline:none}
@media(max-width:650px){.overlay h2{font-size:32px;line-height:1.05;margin:8px 0}.overlay{align-items:flex-start}.overlay .intro-art{opacity:.35;pointer-events:none}.overlay p{max-width:100%;margin:8px 0}.overlay .micro{max-width:100%;font-size:9px}.overlay-actions button{padding:0 12px;min-height:42px;font-size:12px}.practice{gap:8px}.practice select{flex:1;min-width:0}.practice span{width:100%}}