:root{color-scheme:dark;--bg:#10151c;--panel:#171e27;--line:#303b49;--text:#edf3f5;--muted:#98a8b9;--cyan:#65e4f0;--orange:#ffb36b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer;background:#222d3a;color:var(--text);border:1px solid #435064;border-radius:8px;padding:10px 14px;font-weight:700}button:hover{background:#303e4f}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}a{color:var(--cyan)}header{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;gap:16px}h1{margin:6px 0;font-size:clamp(22px,2.8vw,38px);letter-spacing:-1.3px}.dot{color:var(--cyan)}.eyebrow{font:11px monospace;letter-spacing:2px;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--muted)}.display-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px;padding:0 32px 24px;max-width:1900px;margin:auto}.play-area{align-self:start;min-width:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}.game-bar{display:flex;align-items:center;gap:20px;min-height:54px;padding:10px 16px;background:var(--panel);font:12px monospace}.game-bar button{margin-left:auto;font-size:12px;padding:7px 10px}#game{width:100%;aspect-ratio:12/7;background:#111820}#game canvas{display:block}.game-footer{display:flex;flex-wrap:wrap;gap:16px;padding:16px;background:var(--panel);font-size:12px;line-height:1.5;color:var(--muted)}.game-footer b{color:var(--cyan);margin-right:6px}#progress{color:#b8f3c6;font:11px monospace;margin-left:auto}aside{padding:20px 18px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}h2{font-size:26px;line-height:1.15;margin:12px 0 20px}.qr-wrap{background:white;border-radius:8px;padding:5px;width:220px;height:220px}.qr-wrap img{display:block}.room-label{font:13px monospace;margin:14px 0 10px;color:var(--muted)}.room-label strong{font-size:24px;letter-spacing:3px;color:white}#join-link{font-size:12px}.players{margin:22px 0}.player-status{border-top:1px solid var(--line);padding:12px 0;font-weight:bold;font-size:13px}.player-status span{float:right;color:var(--muted);font-size:11px;font-weight:normal}.cyan{color:var(--cyan)}.orange{color:var(--orange)}.hint,.small,details{font-size:12px;color:var(--muted);line-height:1.6}.small{font-size:10px;margin-top:20px}details summary{cursor:pointer}details button{font-size:12px}.controller{overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#join-panel{max-width:420px;margin:15vh auto;padding:24px}#join-panel h1{font-size:34px}#join-panel p{color:var(--muted)}#join-form{display:flex;gap:8px;margin-top:28px}input{min-width:0;width:170px;background:var(--panel);color:white;border:1px solid var(--line);border-radius:8px;padding:14px;letter-spacing:3px;text-transform:uppercase}.controller-header{padding:12px 20px;border-bottom:1px solid var(--line)}.controller-header h1{font-size:24px}.controller-header #connection{font-size:11px;color:var(--muted);margin-left:auto}.controller-header button{font-size:22px;padding:6px 12px}.controller-message{color:var(--muted);font-size:12px;text-align:center;padding:14px 18px;line-height:1.5}.control-grid{max-width:820px;margin:10vh auto 5vh;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:12px 24px;align-items:center}.control-grid section{text-align:center}.control-grid .eyebrow{display:block;margin-bottom:24px}.jump{display:grid;place-items:center;margin:auto;width:min(100%,190px);aspect-ratio:1;border-radius:50%;border:2px solid var(--accent,var(--cyan));background:#1d2c38;color:var(--accent,var(--cyan));font-size:24px;touch-action:none}.pressed{background:#415367!important;box-shadow:inset 0 0 0 3px var(--accent,var(--cyan))}#move-pad{position:relative;margin:auto;width:min(100%,210px);aspect-ratio:1;border:2px solid #526072;background:radial-gradient(circle,#293747 0,#1a232e 65%);border-radius:50%;touch-action:none;overflow:hidden}.pad-cross:after{content:'';position:absolute;background:#374454;height:1px;width:100%;top:50%;left:0}#move-stick{position:absolute;left:50%;top:50%;width:66px;height:66px;background:var(--accent,var(--cyan));border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 3px 18px #0005}.pad-arrows{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);font-size:22px;color:#8294a7;pointer-events:none}.controller-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;max-width:820px;margin:10px auto;padding:14px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.5}.controller-footer button{font-size:11px;white-space:nowrap}#phone-error{color:#ff8989;text-align:center;padding:12px;font-size:14px}[hidden]{display:none!important}@media(max-width:1000px){.display-layout{grid-template-columns:minmax(0,1fr) 235px;padding:0 16px;gap:12px}aside{padding:12px}.qr-wrap{width:200px;height:200px}.qr-wrap img{width:190px;height:190px}header{padding:18px 16px}.game-bar{gap:10px;font-size:10px}}@media(max-width:650px){.display-layout{display:flex;flex-direction:column}aside{display:grid;grid-template-columns:1fr 1fr;gap:8px}aside h2{font-size:22px}.qr-wrap{grid-row:1/5;grid-column:2}aside .players,aside .hint,aside details,aside .small{grid-column:1/3}.top-actions #network{display:none}.game-bar{flex-wrap:wrap}.game-footer{padding:10px}.game-footer span{display:block}.controller .control-grid{gap:20px;padding:8px 18px}.controller .eyebrow{font-size:9px;letter-spacing:1px}.jump{font-size:21px}.controller-footer{font-size:10px}}@media(orientation:landscape) and (max-height:500px){.controller-header{padding:4px 18px}.controller-header h1{font-size:18px;margin:2px 0}.controller-message{padding:6px}.control-grid{margin:4px auto;gap:100px;max-width:740px;padding:0 20px}.control-grid .eyebrow{margin-bottom:8px}#move-pad{width:160px}.jump{width:150px}.controller-footer{margin:10px auto;padding:8px 20px}}
@media(max-width:700px){.display>header{flex-wrap:wrap}.display .top-actions{flex-wrap:wrap;gap:8px}}
.controller-brand{text-align:center;padding:9px 12px 2px;color:var(--muted);font-size:11px;letter-spacing:.5px}.skin-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:560px;margin:0 auto;padding:4px 18px}.skin-option{min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 4px;background:#19232e;border:1px solid #394859}.skin-option canvas{width:44px;height:44px;image-rendering:pixelated;pointer-events:none}.skin-option span{font-size:10px;color:var(--muted);pointer-events:none}.skin-option.selected{border-color:var(--accent,var(--cyan));box-shadow:inset 0 0 0 1px var(--accent,var(--cyan));background:#263847}.skin-option.selected span{color:var(--text)}.controller .control-grid{margin-top:4vh;margin-bottom:3vh}.display h1{font-size:clamp(23px,2.6vw,36px)}.display>header{flex-wrap:wrap}@media(orientation:landscape) and (max-height:500px){.controller-brand{padding:3px;font-size:9px}.skin-picker{position:absolute;left:50%;top:90px;transform:translateX(-50%);width:120px;grid-template-columns:1fr 1fr;padding:0;gap:5px;z-index:2}.skin-option{padding:2px}.skin-option canvas{height:33px;width:33px}.skin-option span{font-size:8px}.controller .control-grid{margin:5px auto;gap:170px}.controller-footer{margin-top:10px}.controller-message{padding:4px}}
#badges{color:#efd097;white-space:nowrap}
/* Lobby and the immersive, full-viewport play screen. */
.lobby-screen{min-height:100dvh;background:radial-gradient(ellipse at 10% 0,#233c4b 0,transparent 55%),#101b25;color:#edf1ec;padding:0 max(24px,calc((100vw - 1460px)/2));position:relative}.lobby-screen:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(90deg,transparent 0,transparent 119px,#527082 120px,#527082 121px),repeating-linear-gradient(0deg,transparent 0,transparent 139px,#527082 140px,#527082 141px)}.lobby-header{position:relative;padding:24px 0;border-bottom:1px solid #344551;font-size:11px;letter-spacing:1.5px;color:#92a7b1}.lobby-brand{color:#d2ddd9;font-size:13px;font-weight:700}.lobby-layout{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:52px;padding:36px 0 22px}.lobby-kicker{font:10px monospace;letter-spacing:2px;color:#b4b49b;margin:0 0 19px}.lobby-question{font:italic 23px Georgia,serif;color:#a9bbc0;margin:0 0 7px}.lobby-main>h1{font:normal clamp(34px,4.5vw,66px)/1.03 Georgia,serif;letter-spacing:-1.7px;margin:0;color:#f0e9d9}.lobby-main>h1>span{color:#d9b47d}.lobby-intro{max-width:620px;font-size:13px;line-height:1.7;color:#9aafb8;margin:19px 0 23px}.lobby-players{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lobby-player{position:relative;display:flex;align-items:center;gap:10px;border:1px solid #40515d;border-radius:9px;background:#1b2c387d;min-height:100px;padding:7px 12px}.lobby-player.joined{background:#263d457d;border-color:#71918d}.lobby-player canvas{width:70px;height:82px;image-rendering:pixelated}.lobby-player b{display:block;font:10px monospace;letter-spacing:1px;margin-bottom:8px}.lobby-player span{display:block;font-size:12px;color:#b5c1c4;margin-bottom:6px}.lobby-player small{display:block;font-size:10px;color:#8298a3}.join-indicator{width:7px;height:7px;border-radius:50%;background:#4d606a;margin-left:auto;flex-shrink:0}.joined .join-indicator{background:#a6d4ac;box-shadow:0 0 10px #a6d4ac44}.lobby-start-row{display:flex;align-items:center;gap:18px;margin-top:20px}.start-game{padding:15px 28px;border:1px solid #d3b786;color:#192d37;background:#e1bd83;font-size:15px;min-width:290px;border-radius:6px}.start-game:hover{background:#f0cf97}.start-game:disabled{cursor:default;color:#8b9ca3;background:#283b47;border-color:#3a505d;opacity:1}.lobby-start-row>span{font:11px monospace;color:#aebcbf}.start-hint{font-size:10px;color:#8198a4;margin:10px 0 0}.lobby-join{align-self:start;background:#152631ed;border:1px solid #3c505e;border-radius:10px;padding:26px}.lobby-join h2{font:normal 27px Georgia,serif;margin:10px 0 22px}.lobby-join .qr-wrap{width:254px;height:254px;padding:7px;border-radius:7px}.lobby-join .qr-wrap img{width:240px;height:240px}.lobby-join .room-label{margin-top:19px}.lobby-join p:not(.eyebrow){font-size:11px;line-height:1.8;color:#9aafb8;margin:18px 0}.lobby-join a{font-size:11px;line-height:1.6}.lobby-divider{border-top:1px solid #344c5b;margin:22px 0}.join-chip{font:9px monospace;letter-spacing:1px;background:#263e4c;padding:6px 8px;border-radius:3px;color:#b5ced6}.sound-note{font-size:10px!important}.lobby-join details{margin-top:24px;font-size:10px}.guide-heading{display:flex;justify-content:space-between;align-items:center;margin:30px 0 12px;gap:10px}.guide-heading h2{font:normal 24px Georgia,serif;margin:0}.guide-heading>span{font:8px monospace;letter-spacing:1px;color:#829aa5}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.guide-grid article{border:1px solid #334b58;border-radius:7px;overflow:hidden;background:#162934}.guide-grid canvas{display:block;width:100%;aspect-ratio:28/13;image-rendering:pixelated}.guide-grid h3{font-size:14px;margin:13px 13px 8px}.guide-grid h3 em{font:10px monospace;color:#bba57e;margin-right:8px;font-style:normal}.guide-grid p{font-size:11px;line-height:1.7;margin:0 13px 16px;color:#96adb6}.guide-grid b{color:#c8d7d9;font-weight:500}.badge-guide{font-size:10px;line-height:1.7;color:#a6b5b5;margin:13px 0 0}.lobby-footer{position:relative;display:flex;justify-content:space-between;gap:16px;border-top:1px solid #344551;padding:17px 0 23px;color:#748c99;font:9px monospace;letter-spacing:1px}.game-screen{position:fixed;inset:0;background:#000;z-index:10}.game-screen #game{width:100%;height:100%;aspect-ratio:auto}.game-hud{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:14px;min-height:46px;padding:8px 18px;background:linear-gradient(#0e1824ee,#0e1824aa);font:11px monospace;color:#d3dfe0}.game-wordmark{font-size:9px;letter-spacing:1px;color:#9fb4bb}.game-hud #progress{margin-left:0;font-size:10px;color:#d2c093}.game-hud #network{font-size:9px;color:#839ba8}.game-hud-actions{margin-left:auto;display:flex;align-items:center;gap:6px}.game-hud button{font:10px Arial,sans-serif;padding:6px 8px;border-radius:4px}.game-hud #badges{color:#efc98c}#game-loading{position:absolute;inset:0;display:grid;place-items:center;background:#101c28;color:#d6c5a4;font:italic 26px Georgia,serif;z-index:3}.playing{overflow:hidden}.skin-picker-label{max-width:560px;margin:8px auto 0;padding:0 18px;color:#d9e3e2;font-size:12px;font-weight:bold}.skin-picker-label small{display:block;color:#8ba2ad;font-weight:normal;font-size:10px;margin-top:4px}@media(min-width:1600px){.lobby-layout{padding-top:48px}}@media(max-width:1100px){.lobby-layout{gap:25px;grid-template-columns:minmax(0,1fr) 300px}.lobby-join{padding:20px}.lobby-join .qr-wrap{width:254px}.lobby-player{gap:4px;padding:5px}.lobby-player canvas{width:55px;height:75px}.lobby-main>h1{font-size:48px}.game-hud{gap:9px}.game-wordmark,.game-hud #network{display:none}}@media(max-width:800px){.lobby-layout{display:flex;flex-direction:column}.lobby-join{order:-1;display:grid;grid-template-columns:1fr 180px;gap:8px 16px;width:100%}.lobby-join .qr-wrap{grid-column:2;grid-row:1/6;width:180px;height:180px;padding:5px}.lobby-join .qr-wrap img{width:170px;height:170px}.lobby-join h2{font-size:24px}.lobby-join .room-label{margin-top:0}.lobby-join .lobby-divider,.lobby-join .join-chip,.lobby-join .sound-note,.lobby-join details{grid-column:1/3}.lobby-main>h1{font-size:44px}.guide-grid{grid-template-columns:1fr}.guide-grid article{display:grid;grid-template-columns:140px 1fr}.guide-grid canvas{grid-row:1/3;height:100%;object-fit:contain;align-self:center}.guide-grid h3{margin-bottom:0}.lobby-start-row{flex-wrap:wrap}.lobby-footer{flex-direction:column}.game-hud #progress{display:none}.game-hud-actions{flex-wrap:wrap}.game-hud{font-size:10px}.start-game{min-width:0;flex:1}}@media(orientation:landscape) and (max-height:500px){.skin-picker-label{position:absolute;top:70px;left:50%;transform:translateX(-50%);width:150px;text-align:center;padding:0;font-size:10px}.skin-picker-label small{display:none}.skin-picker{top:93px}}
@media(orientation:landscape) and (max-height:500px){.skin-picker-label{top:94px;font-size:10px}.skin-picker{top:113px}.controller #status{max-width:95%;margin-left:auto;margin-right:auto}}
.lobby-story{max-width:850px;font-size:clamp(22px,1.65vw,28px);line-height:1.4;color:#e7ece6;margin:22px 0 12px}.lobby-intro{max-width:850px;font-size:clamp(15px,1.05vw,18px);line-height:1.6;color:#b3c4cd;margin:0 0 23px}
.latency-notice{margin:18px 0 0;padding:14px 17px;border:1px solid #806c43;border-left:3px solid #dfba76;border-radius:6px;background:#dfba7610;color:#c9c2b0;font-size:14px;line-height:1.6}.latency-notice strong{display:block;color:#efd09a;margin-bottom:3px}