:root{color:#263e33;font-synthesis:none;--ink:#263e33;--paper:#fffaf0;--gold:#f2c66d;background:#a0b7a0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{border:2px solid var(--ink);background:var(--paper);min-height:44px;color:var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;justify-content:center;align-items:center;padding:11px 17px;font-weight:700;display:inline-flex}button:active,button.pressed{box-shadow:none;transform:translate(3px,3px)}button:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}.primary{background:var(--ink);color:var(--paper)}.full{width:100%;margin-top:12px}a{color:var(--ink)}input,textarea,select{width:100%;min-height:46px;color:var(--ink);background:#fffdf5;border:2px solid #a7b49c;border-radius:0;padding:12px;font-size:16px;display:block}input:focus,textarea:focus,select:focus{outline:3px solid var(--gold);outline-offset:2px}canvas{image-rendering:pixelated}.notice{background:#f9e6d9;border-left:4px solid #bc745e;margin:12px 0;padding:12px;line-height:1.5}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.stage{width:100%;height:100dvh;position:relative;overflow:hidden}.arena{width:100%;height:100%}.arena canvas{display:block}.stage-qr{background:var(--paper);border:2px solid var(--ink);justify-items:center;gap:2px;padding:5px;text-decoration:none;display:grid;position:absolute;top:18px;right:18px;box-shadow:3px 3px #263e3333}.stage-qr img{width:105px;height:105px;image-rendering:pixelated;display:block}.stage-qr span{letter-spacing:1px;font-size:11px}.stage-question{background:var(--paper);border:3px solid var(--ink);text-align:center;max-width:65%;padding:14px 20px;font-size:clamp(18px,2vw,30px);position:absolute;top:10%;left:50%;transform:translate(-50%)}.stage-status{font-size:12px;position:absolute;bottom:16px;left:16px}.stage-loading{place-content:center;height:100dvh;display:grid}.pause-overlay{color:var(--paper);pointer-events:none;background:#263e3399;place-items:center;font-size:60px;display:grid;position:absolute;inset:0}.join{place-items:center;min-height:100svh;padding:24px;display:grid}.join-card{background:var(--paper);border:2px solid var(--ink);gap:14px;width:100%;max-width:350px;padding:24px;display:grid;box-shadow:6px 6px #526e59}.avatar-preview{justify-content:center;padding-bottom:12px;display:flex}.swatches{justify-content:space-between;gap:5px;display:flex}.swatch{width:30px;min-height:30px;box-shadow:none;border-color:#0000;padding:0}.swatch.selected{border-color:var(--ink);outline:2px solid var(--paper);outline-offset:-4px}.controller{max-width:520px;min-height:100svh;padding:env(safe-area-inset-top,0px) 20px env(safe-area-inset-bottom,12px);overscroll-behavior:none;background:#f2eddf;margin:0 auto}.controller header{justify-content:space-between;align-items:center;gap:12px;padding-top:16px;display:flex}.player-identity{align-items:center;gap:12px;display:flex}.player-identity strong{font-size:16px;display:block}.player-identity small{letter-spacing:1px;color:#677b68;font-size:10px;display:block}.control-half{justify-content:center;align-items:center;min-height:45svh;padding:20px 0;display:flex}.dpad{touch-action:none;-webkit-user-select:none;user-select:none;grid-template-rows:repeat(3,66px);grid-template-columns:repeat(3,74px);gap:10px;display:grid}.dpad button{touch-action:none;-webkit-user-select:none;user-select:none;padding:0;font-size:28px}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .jump{background:var(--gold);grid-area:2/2;font-size:14px}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}.chat-half{border-top:2px dashed #c5c9b5;padding:24px 0}.chat-half textarea{resize:none;min-height:120px}.inline{align-items:center;gap:14px;margin-top:12px;display:flex}.inline small{color:#6a7d6a;flex:1;font-size:11px}.connection{color:#a75943;font-size:11px}@media (width<=620px){.stage-qr{top:8px;right:8px}.stage-qr img{width:80px;height:80px}.stage-qr span{font-size:9px}.stage-question{max-width:85%;top:20%}.join-card{padding:20px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}:root{color:#f1f5ff;--ink:#f1f5ff;--paper:#151e3b;--gold:#ffe15a;background:#0a102b}body{background:#0a102b}button{color:#f1f5ff;background:#253254;border-color:#6676a0;box-shadow:3px 3px #080d22}button:focus-visible,a:focus-visible{outline-offset:5px;outline:3px solid #ffe15a}.primary{color:#0a102b;background:#16bfff;border-color:#6ce0ff}input,textarea,select{color:#f1f5ff;background:#101831;border-color:#4d5f8a}input::placeholder,textarea::placeholder{color:#a1afcc}.stage,.stage-loading{background:#0a102b}.stage-qr{color:#0a102b;background:#f1f5ff;border:4px solid #0a102b;gap:4px;padding:6px;top:auto;bottom:max(18px,50dvh - 29.6875vw + 24px);right:max(18px,50vw - 84.2105dvh + 24px);box-shadow:4px 4px #070d24}.stage-qr img{width:86px;height:86px}.stage-qr span{letter-spacing:2px;font-size:9px;font-weight:800}.join-card{background:#151e3b;border-color:#64759d;box-shadow:6px 6px #080d22}.controller{background:#151e3b}.player-identity small,.inline small{color:#a8b9d9}.player-identity canvas{width:48px!important;height:48px!important}.chat-half{border-color:#35496d}.dpad .jump{color:#0a102b;background:#ffe15a;border-color:#fff0a0}.notice{color:#ffe2ed;background:#45233c;border-color:#ff75b2}.connection{color:#ffe15a}@media (width<=620px){.stage-qr{top:auto}.stage-qr img{width:64px;height:64px}.stage-qr span{font-size:8px}}.remote-control{--remote-ink:#090e26;--remote-text:#f1f5ff;--remote-cyan:#27caff;--remote-pink:#ff62b0;width:100%;max-width:460px;min-height:100svh;padding:max(24px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));color:var(--remote-text);overscroll-behavior:none;background:#10172f;border-left:4px solid #080d23;border-right:4px solid #080d23;flex-direction:column;margin:0 auto;display:flex}.remote-header{border-bottom:2px solid #283656;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:0 2px 16px;display:flex}.remote-identity{align-items:center;gap:12px;min-width:0;display:flex}.remote-identity strong{letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap;font-size:19px;overflow:hidden}.remote-player-mark{background:var(--player-color);flex:none;width:10px;height:10px;box-shadow:0 -3px #10172f,3px 0 #10172f}.remote-connection{color:#bbc9e4;letter-spacing:.06em;flex-direction:column;flex-shrink:0;align-items:flex-end;gap:7px;font-size:9px;display:flex}.remote-signal{color:#38d9ac;align-items:flex-end;gap:3px;height:13px;display:flex}.remote-signal i{background:currentColor;width:4px;display:block}.remote-signal i:first-child{height:5px}.remote-signal i:nth-child(2){height:9px}.remote-signal i:nth-child(3){height:13px}.is-preview .remote-signal{color:#ffe15a}.is-reconnecting .remote-signal,.is-disconnected .remote-signal{color:#ff8bad}.remote-movement{flex:1 0 auto;justify-content:center;align-items:center;min-height:390px;padding:28px 0 32px;display:flex}.remote-deck{background:#1c2948;border:3px solid #41557e;border-color:#6279a2 #41557e #263759;width:100%;padding:24px 14px 28px;position:relative;box-shadow:0 7px #080d23,inset 0 3px #354968}.remote-screw{background:#0a112a;width:6px;height:6px;position:absolute;box-shadow:inset 2px 2px #60779c}.remote-screw.top-left{top:8px;left:8px}.remote-screw.top-right{top:8px;right:8px}.remote-screw.bottom-left{bottom:8px;left:8px}.remote-screw.bottom-right{bottom:8px;right:8px}.remote-pad{--key:clamp(70px,21vw,88px);grid-template-columns:repeat(3,var(--key));touch-action:none;-webkit-user-select:none;user-select:none;grid-template-rows:repeat(3,80px);justify-content:center;gap:8px;display:grid}.remote-pad button{color:#0a2343;background:var(--remote-cyan);touch-action:none;-webkit-user-select:none;user-select:none;border-top:3px solid #85e4ff;border-bottom:7px solid #126999;border-left:3px solid #4bd6ff;border-right:3px solid #1377ae;border-radius:0;min-width:0;padding:0;box-shadow:0 5px #080e26}.remote-pad button:active,.remote-pad button.is-pressed{background:#85e5ff;border-bottom-width:3px;transform:translateY(4px);box-shadow:0 1px #080e26}.remote-pad button:focus-visible,.remote-send:focus-visible{outline-offset:5px;outline:3px solid #ffe15a}.remote-pad button:disabled{opacity:.4;cursor:not-allowed;transform:none}.remote-direction svg{filter:drop-shadow(0 2px #6ce4ff);width:29px;height:31px}.remote-up{grid-area:1/2}.remote-left{grid-area:2/1}.remote-right{grid-area:2/3}.remote-down{grid-area:3/2}.remote-left svg{transform:rotate(-90deg)}.remote-right svg{transform:rotate(90deg)}.remote-down svg{transform:rotate(180deg)}.remote-pad .remote-jump{background:var(--remote-pink);border-color:#ffb1d7 #bd3d80 #a62b70 #ff96cd;grid-area:2/2;justify-content:center;align-items:center;padding:0;display:flex}.remote-pad .remote-jump:active{background:#f9c}.remote-avatar{pointer-events:none;flex:none;width:64px;height:64px;display:block}.remote-avatar canvas{width:64px;height:64px;image-rendering:pixelated;display:block}.remote-avatar.is-jumping{animation:.32s steps(6,end) remote-avatar-jump}@keyframes remote-avatar-jump{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.remote-chat{background:#161f3a;border:3px solid #455b83;border-top-color:#607aa2;flex:none;margin:0 0 18px;position:relative;box-shadow:0 6px #080d23}.remote-chat:after{content:"";background:#161f3a;border-bottom:3px solid #455b83;border-left:3px solid #455b83;width:18px;height:12px;position:absolute;bottom:-15px;left:20px;box-shadow:-3px 3px #080d23}.remote-chat:focus-within{border-color:#79daff}.remote-chat form{padding:20px 18px 16px}.remote-chat-title{color:#a7c3e8;align-items:center;gap:11px;margin:0 0 17px;display:flex}.remote-chat-title>svg{flex:none;width:18px;height:18px}.remote-chat-title>canvas{width:82px;height:14px}.remote-chat textarea{resize:vertical;color:#f1f5ff;min-height:100px;max-height:220px;box-shadow:none;background:0 0;border:0;border-radius:0;padding:0;font-family:inherit;font-size:16px;line-height:1.65}.remote-chat textarea:focus{outline:none}.remote-chat textarea::placeholder{color:#a8b7d0;opacity:1}.remote-chat textarea:disabled{opacity:.6}.remote-chat-bottom{justify-content:space-between;align-items:center;gap:10px;min-height:48px;margin-top:12px;display:flex}.remote-chat-bottom small{color:#c4d2ec;font-size:11px;line-height:1.4}.remote-send{color:#0b1531;background:#27caff;border-top:2px solid #91e7ff;border-bottom:5px solid #11618d;border-left:2px solid #91e7ff;border-right:2px solid #1776a1;border-radius:0;flex:none;width:52px;min-height:48px;padding:10px;box-shadow:0 3px #080e26}.remote-send svg{width:22px;height:22px}.remote-send:disabled{opacity:1;color:#a7badd;cursor:default;background:#293b5d;border-color:#50688e #50688e #1d2b47}.remote-send:active{box-shadow:none;transform:translateY(3px)}.remote-notice{overflow-wrap:anywhere;background:#1c2948;border:2px solid #607aa2;margin:2px 0 10px;padding:12px;font-size:12px;line-height:1.5}@media (height>=780px){.remote-movement{min-height:440px}.remote-chat textarea{min-height:115px}}@media (width<=360px){.remote-control{padding-left:16px;padding-right:16px}.remote-deck{padding-left:7px;padding-right:7px}.remote-pad{--key:70px;grid-template-rows:repeat(3,72px);gap:7px}.remote-movement{min-height:340px}.remote-identity strong{font-size:17px}}@media (orientation:landscape) and (height<=560px){.remote-control{grid-template-columns:1fr 1fr;column-gap:24px;max-width:900px;min-height:100svh;display:grid}.remote-header{grid-column:1/-1}.remote-movement{min-height:290px;padding:20px 0}.remote-deck{width:auto;padding:14px 22px 20px}.remote-pad{--key:64px;grid-template-rows:repeat(3,62px);gap:6px}.remote-chat{align-self:center}.remote-notice{grid-column:1/-1}}@media (width<=360px){.remote-pad .remote-jump{border-bottom-width:5px}.remote-pad .remote-jump:active{border-bottom-width:3px}}@media (orientation:landscape) and (height<=560px){.remote-avatar,.remote-avatar canvas{width:32px;height:32px}}@media (prefers-reduced-motion:reduce){.remote-avatar.is-jumping{animation:none}}.stage-welcome{background:#0a102b;place-items:center;height:100dvh;min-height:100svh;padding:24px;display:grid;overflow:auto}.stage-welcome-content{justify-items:center;gap:28px;display:grid}.stage-welcome-qr{color:#f1f5ff;justify-items:center;gap:12px;text-decoration:none;display:grid}.stage-welcome-qr img{aspect-ratio:1;width:min(68dvh,72vw,680px);height:auto;image-rendering:pixelated;border:4px solid #fff;display:block;box-shadow:6px 6px #05091c}.stage-welcome-qr [role=status]{aspect-ratio:1;background:#151e3b;place-items:center;width:min(68dvh,72vw,680px);display:grid}.stage-welcome-qr .stage-room-code{letter-spacing:.15em;font-size:clamp(14px,2vw,20px);font-weight:700}.stage-play{border-width:3px;min-width:180px;min-height:58px;font-size:24px;box-shadow:5px 5px #05091c}.stage-qr-link{color:#0a102b;justify-items:center;gap:4px;text-decoration:none;display:grid}.stage-display:focus{outline:none}.stage-question-navigation{gap:10px;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.stage-question-navigation button{color:#f1f5ff;background:#0a102b;border:2px solid #f1f5ff;min-width:48px;min-height:44px;box-shadow:3px 3px #05091c}.stage-question-navigation button:last-child{color:#0a102b;background:#16bfff;border-color:#16bfff}.stage-question-navigation button:focus-visible{outline-offset:4px;outline:3px solid #ffe15a}@media (width<=620px){.stage-question-navigation{gap:8px;bottom:8px}}@media (height<=520px){.stage-welcome{padding:12px}.stage-welcome-content{gap:16px}.stage-welcome-qr{gap:8px}.stage-welcome-qr img,.stage-welcome-qr [role=status]{width:min(56dvh,60vw)}.stage-play{min-height:48px;font-size:20px}}