:root{--bg:#141713;--panel:#1c201b;--line:#343b30;--text:#f2f3e9;--muted:#a4ad9c;--lime:#bcf96b;--purple:#ac96f0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid var(--purple);outline-offset:5px}a{color:inherit;text-decoration:none}header{height:100px;max-width:1320px;margin:auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;letter-spacing:-1.8px}.brand span{color:var(--lime)}.brand i{font-style:normal;color:var(--lime);margin-left:12px;font-size:32px}.header-right{display:flex;gap:30px;align-items:center}.status{font-size:10px;letter-spacing:1.8px;color:#c6cebf;display:flex;align-items:center;gap:9px}.status b{width:6px;height:6px;background:var(--lime);border-radius:50%}.icon{border:1px solid var(--line);background:transparent;color:var(--text);width:37px;height:37px;border-radius:50%;font-size:20px}main{max-width:1320px;padding:0 48px;margin:auto}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:50px;padding:65px 0 58px;align-items:center}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--muted)}.hero-copy>.eyebrow{display:flex;gap:25px;color:var(--lime);margin-bottom:24px}h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;letter-spacing:-1.5px}h1{font-size:clamp(54px,5.5vw,78px);line-height:1.04;font-weight:600}h1 em{font-style:normal;color:var(--lime)}.hero p{font-size:16px;line-height:1.7;color:var(--muted);margin:24px 0 30px}.hero-actions{display:flex;gap:12px}.primary,.secondary{border-radius:8px;padding:16px 22px;font-weight:700;display:inline-flex;justify-content:center;gap:25px;align-items:center;border:1px solid transparent;transition:transform .15s,background .15s}.primary{background:var(--lime);color:#202a17}.secondary{background:transparent;color:var(--text);border-color:#48513e}.primary:hover:not(:disabled),.secondary:hover{transform:translateY(-2px)}.secondary:hover{background:#252c20}.hero-note{display:flex;gap:20px;font-size:11px;color:var(--muted);margin-top:22px}.hero-art{height:375px;border-radius:18px;background:#252d22;position:relative;overflow:hidden;background-image:radial-gradient(#69785a55 1px,transparent 1px);background-size:22px 22px}.orbit{position:absolute;border:1px solid #879c5a40;border-radius:50%;width:420px;height:210px;left:15px;top:80px;transform:rotate(-25deg)}.o2{transform:rotate(35deg)}.blob{position:absolute;width:155px;height:165px;border-radius:45% 45% 38% 38%;box-shadow:inset -13px -13px 0 #0002,0 18px 0 #1113}.blob:after,.blob:before{content:'';position:absolute;width:40px;height:32px;bottom:-10px;background:inherit;border-radius:50%}.blob:before{left:16px}.blob:after{right:16px}.purple{background:var(--purple);left:65px;top:75px;transform:rotate(-18deg)}.lime{background:var(--lime);right:48px;top:153px;transform:rotate(17deg)}.eyes{font-family:monospace;font-weight:bold;font-size:70px;letter-spacing:10px;color:#27311e;margin:16px 0 0 38px;line-height:1}.mouth{width:25px;height:12px;border-radius:0 0 20px 20px;background:#27311e;position:absolute;top:93px;left:65px}.float-label{position:absolute;background:#f0eedf;color:#25291f;padding:11px 14px;border-radius:5px;font-size:10px;font-weight:bold;box-shadow:4px 4px 0 #1115;z-index:2}.label1{top:29px;right:24px;transform:rotate(7deg)}.label2{bottom:46px;left:29px;transform:rotate(-7deg);background:var(--purple)}.label2 b{font-size:24px;position:absolute;right:-24px;top:-23px;color:var(--purple)}.spark{position:absolute;right:32px;top:76px;font-size:65px;color:var(--lime)}.art-bottom{position:absolute;bottom:0;background:#1c241c;width:100%;padding:14px 20px;font-size:9px;letter-spacing:1.5px;display:flex;justify-content:space-between;color:#c8d0bc}.section-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;gap:16px}h2{font-size:32px;font-weight:500}.section-top h2{margin-top:10px}.pill{font-size:9px;border:1px solid var(--line);padding:9px 12px;border-radius:30px;letter-spacing:1px;white-space:nowrap;color:var(--muted)}.game-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}.game-card{background:var(--panel);color:var(--text);padding:0;text-align:left;border:1px solid var(--line);border-radius:12px;overflow:hidden}.card-art{height:235px;background:#ac97e7;position:relative;overflow:hidden}.tag{position:absolute;top:20px;left:20px;background:#262332;color:white;border-radius:4px;font-size:9px;letter-spacing:1px;padding:8px 10px;z-index:1}.mini-arena{position:absolute;width:300px;height:190px;border:12px solid #d6c4ff;background:#7e67b9;border-radius:50%;transform:rotate(-18deg);left:-25px;top:81px;box-shadow:0 18px 0 #55427d}.pawn{position:absolute;width:50px;height:55px;background:var(--lime);border-radius:22px 22px 16px 16px;box-shadow:0 7px 0 #0003}.pawn:after{content:'••';color:#283222;font-size:25px;position:absolute;left:12px;top:6px;letter-spacing:3px}.p1{left:62px;top:15px;transform:rotate(15deg)}.p2{left:165px;top:70px;background:#ff966c;transform:rotate(-15deg)}.p3{left:195px;top:-52px;background:#f2eddb;transform:rotate(30deg)}.card-sticker{position:absolute;right:32px;top:59px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:55px;line-height:.9;color:#292039;letter-spacing:-3px;transform:rotate(7deg)}.card-sticker span{color:#f8f4e8}.play-circle{position:absolute;bottom:17px;right:20px;border:1px solid #4f3b6e;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#292039;font-size:23px}.card-info{padding:22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.card-info h3{font-size:23px;letter-spacing:-.5px}.card-info p{font-size:12px;color:var(--muted);margin:6px 0 0}.card-info>span{text-align:right;font-size:11px;line-height:1.8;white-space:nowrap}.card-info small{font-size:8px;color:var(--muted);letter-spacing:1px}.how-card{border:1px solid var(--line);border-radius:12px;padding:28px 32px;background:linear-gradient(135deg,#23291f,#1a1f18)}.how-card h3{font-size:28px;line-height:1.1;margin-top:15px}.how-card ol{list-style:none;padding:0;margin:25px 0 0;display:grid;gap:20px}.how-card li{display:flex;gap:18px;font-size:13px}.how-card li b{color:var(--lime);font-size:11px;padding-top:2px}.how-card small{display:block;font-size:11px;color:var(--muted);margin-top:5px}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:55px;padding:25px 0 30px;font-size:10px;color:var(--muted)}footer>span:first-child{font-weight:bold;color:var(--text);font-size:16px}footer>span:nth-child(2){font-size:8px;letter-spacing:1.5px}.hidden{display:none!important}dialog{background:#20261d;color:var(--text);border:1px solid #526044;border-radius:15px;padding:32px;width:min(440px,calc(100% - 28px));box-shadow:0 24px 100px #0007}dialog::backdrop{background:#080c08bb;backdrop-filter:blur(5px)}dialog h2{margin-top:15px}dialog p{color:var(--muted);font-size:14px;line-height:1.6}dialog form{display:flex;flex-direction:column;gap:16px}dialog label{display:flex;flex-direction:column;gap:9px;font-size:12px}input{background:#131911;border:1px solid #48543e;border-radius:7px;padding:14px;color:white;outline:none;width:100%}input:focus{border-color:var(--lime)}dialog small{color:var(--muted);font-size:10px;line-height:1.6}.close{position:absolute;right:15px;top:12px;background:none;border:none;color:var(--muted);font-size:28px}#form-error{color:#ffa68d;margin:0;font-size:12px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--lime);color:#1b2514;padding:14px 22px;border-radius:8px;display:none;z-index:10;font-size:13px;max-width:90vw}.room-view{padding-top:36px}.room-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.room-top h2{margin-top:12px}.lobby-layout{display:grid;grid-template-columns:340px 1fr;gap:25px}.panel{padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.join-panel{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.join-panel canvas{border-radius:10px;width:190px!important;height:190px!important}.room-code{font-family:monospace;font-size:40px;letter-spacing:5px;color:var(--lime)}.join-panel small{overflow-wrap:anywhere;color:var(--muted);font-size:11px}.join-panel p{font-size:11px;line-height:1.6;color:var(--muted)}.players-panel{display:flex;flex-direction:column}.players-panel h3{font-size:23px}.player{padding:17px 10px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line)}.avatar{width:35px;height:38px;border-radius:14px 14px 10px 10px;display:grid;place-items:center;color:#223019;font-weight:bold;letter-spacing:4px;padding-left:3px}.player .ready{margin-left:auto;color:var(--lime);font-size:10px;letter-spacing:1px}.empty{text-align:center;padding:55px 20px;color:var(--muted);line-height:1.8}.lobby-bottom{margin-top:auto;padding-top:24px}.lobby-bottom p{font-size:12px;color:var(--muted)}.lobby-bottom button{width:100%}#game-stage{position:relative}.game-hud{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;padding:15px}#arena{width:100%;max-height:70vh;object-fit:contain;border-radius:15px;background:#1c251d}.result{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#10170e99,#0a0f09e6);backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;text-align:center}.result h2{font-size:48px;color:var(--lime)}.controller{text-align:center;padding-top:35px;max-width:750px}.controller h2{margin-top:20px;font-size:36px}.controller p{color:var(--muted);font-size:14px}.controller-controls{display:flex;align-items:center;justify-content:center;gap:50px;margin:45px 0}.controller-controls button{touch-action:none;user-select:none}#joystick{width:210px;height:210px;border-radius:50%;border:2px solid #526444;background:radial-gradient(#34432b,#1d281a);position:relative;touch-action:none;user-select:none;flex-shrink:0}.cross{color:#4e6140;position:absolute;inset:0;display:grid;place-items:center;font-size:110px;font-weight:300}#stick{width:80px;height:80px;background:var(--lime);border-radius:50%;position:absolute;left:63px;top:63px;box-shadow:0 6px 0 #7fa943;pointer-events:none}#dash{background:var(--purple);border:0;width:110px;height:110px;border-radius:50%;font-weight:700;color:#281d41;box-shadow:0 7px 0 #6e58a7;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px}#dash span{font-size:25px}#dash:active{transform:translateY(5px);box-shadow:0 2px 0 #6e58a7}.control-note{line-height:1.8;font-size:12px!important;margin-bottom:30px}
@media(min-width:1500px){header,main{max-width:1400px}.hero{padding-top:80px;padding-bottom:70px}.hero-art{height:410px}}@media(max-width:800px){header{height:76px;padding:0 24px}main{padding:0 24px}.status{display:none}.hero{grid-template-columns:1fr;gap:30px;padding:40px 0}.hero-art{height:300px}.hero h1{font-size:64px}.game-grid{grid-template-columns:1fr}.section-top{align-items:flex-start}.section-top h2{font-size:26px}.section-top>.pill{display:none}.hero-note{gap:14px}.how-card{padding:25px}.card-art{height:240px}footer>span:nth-child(2){display:none}.lobby-layout{grid-template-columns:1fr}.room-top{gap:15px}.room-top h2{font-size:26px}.room-top .secondary{font-size:11px;padding:12px}.room-view{padding-top:30px}.controller-controls{gap:25px}#joystick{width:185px;height:185px}#stick{left:50.5px;top:50.5px}#dash{width:95px;height:95px}.game-hud{font-size:9px}.card-sticker{right:20px;font-size:48px}.mini-arena{left:-55px}.card-info{padding:18px}.card-info p{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.extra-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:24px}.extra-art{height:200px;background:var(--accent);position:relative;overflow:hidden;color:#222c22;background-image:repeating-linear-gradient(-35deg,transparent,transparent 35px,#ffffff18 35px,#ffffff18 37px)}.extra-art strong{position:absolute;bottom:24px;left:22px;font:700 30px 'Space Grotesk',sans-serif;letter-spacing:-1.4px;z-index:1}.game-symbol{font-size:140px;position:absolute;right:28px;top:-8px;opacity:.35;transform:rotate(-12deg)}.extra-card .card-info{display:block}.extra-card .card-info>span{display:block;text-align:left;margin-top:14px}.game-select-label{font-size:10px;letter-spacing:1px;color:var(--muted)}#game-select{display:block;width:100%;margin-top:10px;padding:13px;background:#131911;color:var(--lime);border:1px solid #526444;border-radius:8px;font:600 18px 'Space Grotesk',sans-serif}#game-rules{font-size:12px;line-height:1.6;color:var(--muted);margin-bottom:20px}@media(max-width:1000px){.extra-games{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.extra-games{grid-template-columns:1fr}.controller-controls:has(#joystick.hidden) #dash{width:190px;height:190px;font-size:32px}.game-hud{flex-wrap:wrap}}

/* Keep held gestures on the controller; never invoke text selection or iOS callouts. */
.controller,.controller *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.controller-controls,.controller-controls *{touch-action:none;overscroll-behavior:contain}
#joystick .cross{pointer-events:none}

/* Arcade library: the games, room actions and phone instructions come first. */
header{height:80px}.audio-toggle{min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);padding:10px 14px;font-size:12px}.icon{width:44px;height:44px}.header-right{gap:10px}.launch{display:grid;grid-template-columns:1fr 280px;gap:56px;padding:48px 0 32px;align-items:center}.launch h1{font-size:clamp(36px,4.4vw,60px);line-height:1.08;margin-top:16px}.launch p{color:var(--muted);max-width:480px;line-height:1.65;font-size:15px}.launch-actions{display:grid;gap:8px}.launch-actions small{color:var(--muted);font-size:11px;margin:0 0 12px 4px}.launch-actions button{justify-content:space-between}.steps{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:0 0 38px;padding:20px 0;border-block:1px solid var(--line);gap:24px}.steps li{display:flex;gap:14px;align-items:center;font-size:13px}.steps b{font:500 22px monospace;color:var(--lime)}.steps small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.catalog h2{font-size:28px}.extra-games{margin-top:0;gap:18px}.extra-art{height:150px;background-image:none}.extra-art strong{font-size:27px;bottom:18px;left:18px}.game-symbol{font-size:110px;right:20px;top:-5px;opacity:.25}.tag{top:14px;left:18px}.card-info{padding:18px}.card-info h3{display:none}.card-info p{font-size:13px;line-height:1.5;margin:0;min-height:39px}.extra-card .card-info>span{margin-top:12px;font-size:11px}.game-card{transition:transform .15s,border-color .15s}.game-card:hover{transform:translateY(-3px);border-color:var(--lime)}.play-circle{width:34px;height:34px;bottom:16px;right:16px}.card-info small{font-size:10px}footer a{text-decoration:underline;text-underline-offset:4px}input:focus-visible,select:focus-visible{outline:3px solid var(--lime);outline-offset:3px}.close{min-width:44px;min-height:44px}.player>span:nth-child(2){overflow-wrap:anywhere;min-width:0}.empty{white-space:pre-line}.room-top{gap:20px}.room-top h2{font-size:30px}
@media(max-width:800px){.launch{grid-template-columns:1fr;gap:16px;padding-top:30px}.launch-actions{grid-template-columns:1fr 1fr;gap:10px}.launch-actions button{grid-row:1;padding:14px 12px;gap:6px;font-size:13px}.launch-actions small{grid-row:2}.steps{gap:16px;grid-template-columns:1fr;margin-bottom:28px;padding:18px 0}.steps small{display:inline;margin-left:8px}.extra-games{grid-template-columns:repeat(2,minmax(0,1fr))}footer{gap:18px;flex-wrap:wrap}.room-top h2{font-size:25px}.header-right{gap:6px}.brand{font-size:25px}.brand i{margin-left:5px;font-size:24px}.audio-toggle{padding:8px;font-size:11px}}
@media(max-width:520px){header,main{padding-left:20px;padding-right:20px}.extra-games{grid-template-columns:1fr}.extra-art{height:140px}.card-info p{min-height:0}.launch h1{font-size:38px}.steps small{display:block;margin-left:0}.panel{padding:20px}.room-top{align-items:flex-start}.controller-controls{gap:20px}footer>span:last-child{display:none}}
.players-panel .section-top>.pill{display:inline-flex}

/* One audio entry point, with separate and explicitly named controls. */
.audio-menu{position:relative;z-index:5}.audio-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:9px;font-size:13px;background:var(--panel)}.audio-menu summary::-webkit-details-marker{display:none}.audio-menu summary:focus-visible,#motion-toggle:focus-visible{outline:3px solid var(--lime);outline-offset:4px}.audio-menu[open] summary{border-color:var(--lime)}.audio-panel{position:absolute;top:54px;right:0;width:260px;padding:20px;border:1px solid #48513e;border-radius:12px;background:#20261d;box-shadow:0 18px 50px #0008;display:grid;gap:8px}.audio-panel strong{font-size:14px;margin-bottom:8px}.audio-panel button{text-align:left;font-size:13px}.audio-panel button[aria-pressed=true]{border-color:var(--lime);color:var(--lime)}.audio-panel small{font-size:11px;line-height:1.5;color:var(--muted);margin-bottom:8px}
.launch{grid-template-columns:1.1fr 1fr;gap:40px}.launch-actions{grid-template-columns:1fr 1fr;max-width:470px;margin-top:24px}.launch-actions button{grid-row:1;gap:10px;padding:15px;font-size:13px}.launch-actions small{grid-row:2}.launch h1{font-size:clamp(36px,4vw,56px)}
.hero-scene{--glow:#bcf96b;position:relative;border:1px solid #3a4532;border-radius:22px;overflow:hidden;isolation:isolate;background:radial-gradient(120% 85% at 50% 0%,#2c3b24 0%,#1a2316 55%,#11170f 100%)}.hero-scene:before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#86a46522 1px,transparent 1px);background-size:18px 18px;-webkit-mask:linear-gradient(#000,#0000 70%);mask:linear-gradient(#000,#0000 70%)}
.hero-room{position:relative;padding:26px 26px 0}.hero-room:after{content:'';position:absolute;left:0;right:0;bottom:0;height:64px;z-index:-1;border-top:1px solid #ffffff0a;background:radial-gradient(45% 70% at 50% 0%,color-mix(in srgb,var(--glow) 16%,transparent),transparent),linear-gradient(#18201499,#0d120b);transition:background .6s}
.tv-aura{position:absolute;left:12%;right:12%;top:10%;height:58%;z-index:-1;border-radius:50%;background-color:var(--glow);opacity:.2;filter:blur(52px);transition:background-color .6s}
.tv{position:relative;padding:10px 10px 22px;border-radius:18px;background:linear-gradient(#272d25,#111410);box-shadow:0 0 0 1px #000,inset 0 1px 0 #ffffff21,inset 0 -2px 0 #0009,0 30px 50px -18px #000e,0 0 70px -12px color-mix(in srgb,var(--glow) 40%,transparent);transition:box-shadow .6s}
.tv-screen{display:block;position:relative;width:100%;aspect-ratio:1100/594;padding:0;border:0;border-radius:9px;overflow:hidden;cursor:pointer;color:inherit;background:radial-gradient(circle at 50% 45%,#22301c,#090c08 72%);box-shadow:0 0 0 2px #050705}.tv-screen:disabled{cursor:default}
.tv-screen canvas{position:absolute;left:0;top:-9.428%;width:100%;height:auto;aspect-ratio:1100/650;display:block}
.tv-screen:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,#ffffff1c 0%,#ffffff08 32%,#0000 32.5%),repeating-linear-gradient(#0000 0 2px,#00000012 2px 3px);box-shadow:inset 0 0 0 1px #ffffff10,inset 0 0 50px #000a}
.tv-chip{position:absolute;left:10px;top:10px;z-index:1;display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:99px;background:#0b120ed0;font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.1em;color:#e8f5d6}.tv-chip i{width:7px;height:7px;border-radius:50%;background:#ff5d5d;box-shadow:0 0 8px #ff5d5d;animation:live-dot 1.6s ease-in-out infinite}
.tv-cta{position:absolute;right:10px;bottom:13px;z-index:1;display:flex;gap:6px;padding:7px 12px;border-radius:99px;background:var(--lime);color:#172211;font:700 12px 'Space Grotesk',sans-serif;box-shadow:0 6px 18px #0008;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}.tv-cta span{transition:transform .2s}
.tv-screen:hover .tv-cta,.tv-screen:focus-visible .tv-cta{opacity:1;transform:none}.tv-screen:hover .tv-cta span{transform:translateX(3px)}.tv-screen:active .tv-cta{transform:scale(.96)}.tv-screen:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
@media(hover:none){.tv-cta{opacity:.95;transform:none}}
.tv-progress{position:absolute;left:0;right:0;bottom:0;z-index:1;height:3px;background:#ffffff14}.tv-progress i{display:block;height:100%;background:var(--glow);transform-origin:0 50%;transform:scaleX(0)}.hero-still .tv-progress{opacity:0}
.tv-brand{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;font:700 9px 'Space Grotesk',sans-serif;letter-spacing:.2em;color:#6b7663}.tv-brand i{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 6px var(--lime)}
.tv-stand{display:block;margin:0 auto;width:24%;height:28px;background:linear-gradient(90deg,#11140f,#2d3429 50%,#11140f);clip-path:polygon(32% 0,68% 0,100% 100%,0 100%)}
.fans{position:relative;z-index:2;display:flex;align-items:flex-end;gap:6px;height:72px;margin:-50px 3% 0;padding-bottom:10px;pointer-events:none}.fan:nth-child(2){margin-right:auto}
.fan{position:relative;flex:none;width:56px;height:62px;--skin:#bcf96b}.fan-violet{--skin:#b8a1ef;width:60px;height:68px}.fan-peach{--skin:#ffad82;width:48px;height:54px}.fan-sky{--skin:#87d6f5}
.fan:before{content:'';position:absolute;left:6%;right:6%;bottom:-5px;height:10px;border-radius:50%;background:#000a}
.fan-body{position:absolute;inset:0;border-radius:46% 46% 38% 38%;background:var(--skin);box-shadow:inset -7px -5px 0 #0002,inset 4px 4px 0 #fff3;transform-origin:50% 100%;animation:fan-bob 2.6s ease-in-out infinite}.fan-violet .fan-body{animation-delay:-.9s}.fan-peach .fan-body{animation-delay:-1.7s}.fan-sky .fan-body{animation-delay:-.4s}
.fan-body i{position:absolute;top:27%;width:10%;height:14%;border-radius:6px;background:#253021;animation:buddy-blink 5s infinite}.fan-body i:first-child{left:32%}.fan-body i+i{left:auto;right:32%}
.fan-body b{position:absolute;left:41%;top:45%;width:18%;height:9%;border-radius:0 0 10px 10px;background:#253021}
.fan-phone{position:absolute;left:28%;bottom:13%;width:44%;height:23%;border-radius:4px;background:#0f140d;box-shadow:0 0 0 2px #0a0d09,0 0 14px color-mix(in srgb,var(--skin) 55%,transparent);animation:fan-tap .45s ease-in-out infinite alternate}.fan-phone:after{content:'';position:absolute;inset:3px;border-radius:2px;background:linear-gradient(135deg,var(--skin),#fffc)}
.fan-phone:before{content:'';position:absolute;z-index:1;left:-22%;right:-22%;top:15%;height:70%;background:radial-gradient(circle at 18% 50%,var(--skin) 28%,#0000 30%) left/50% 100% no-repeat,radial-gradient(circle at 82% 50%,var(--skin) 28%,#0000 30%) right/50% 100% no-repeat;filter:brightness(.9)}
.scene-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:#141b12;border-top:1px solid #2b3526;color:#c5d4b5}.now-playing{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0}
.now-playing small{font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.16em;color:var(--glow);transition:color .6s}.now-playing b{font:700 17px 'Space Grotesk',sans-serif;color:var(--text)}.now-playing span{font:11px monospace;letter-spacing:1px;color:#92a383}
.scene-caption button{min-height:44px;background:none;border:0;color:#d3e3bf;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;cursor:pointer}.motion-paused *{animation-play-state:paused!important}
@keyframes fan-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes fan-tap{to{transform:translateY(1.5px) rotate(-2deg)}}
@keyframes live-dot{50%{opacity:.3}}
@keyframes buddy-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@media(max-width:800px){.launch{grid-template-columns:1fr;gap:24px}.launch-actions{max-width:none}.mascot-scene{width:100%}.launch h1{font-size:38px}}
@media(max-width:520px){.hero-room{padding:16px 14px 0}.tv{padding:7px 7px 18px;border-radius:14px}.tv-brand{bottom:4px;font-size:8px}.tv-chip{left:7px;top:7px;padding:4px 7px;font-size:9px}.tv-cta{right:7px;bottom:9px;padding:5px 10px;font-size:11px}.tv-stand{height:22px}.fans{height:56px;margin-top:-40px}.fan{width:42px;height:47px}.fan-violet{width:45px;height:51px}.fan-peach{width:36px;height:41px}.now-playing b{font-size:15px}.scene-caption{padding:8px 14px}}
@media(prefers-reduced-motion:reduce){.mascot-scene:not(.motion-paused) *{animation-duration:8s}}

/* Phone remote: large tactile targets only; the page itself cannot zoom or select text. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.remote-mode{position:fixed;inset:0;width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.remote-mode>header{display:none}
body.remote-mode #controller{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;margin:0;padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:center;overflow:hidden}
body.remote-mode .controller-controls{width:100%;max-width:620px;display:flex;align-items:center;justify-content:space-evenly;gap:clamp(18px,8vw,70px);margin:0;touch-action:none}
body.remote-mode #joystick{appearance:none;-webkit-appearance:none;border:3px solid #708558;background:radial-gradient(circle at 35% 25%,#485a39,#202b1c);box-shadow:inset 0 0 0 9px #ffffff09,0 12px 28px #0005;width:min(42vw,230px,36dvh);height:min(42vw,230px,36dvh);min-width:150px;min-height:150px;border-radius:50%;position:relative;display:grid;place-items:center;padding:0;touch-action:none;user-select:none;-webkit-user-select:none}
body.remote-mode #joystick .cross{font-size:100px;color:#60734f;pointer-events:none}
body.remote-mode #stick{width:36%;height:36%;left:32%;top:32%;background:linear-gradient(145deg,#d3ffa0,#a6e84e);border-radius:50%;box-shadow:inset 0 3px 3px #ffffff90,0 7px 0 #6e9b32,0 10px 17px #0005;pointer-events:none}
body.remote-mode #dash{appearance:none;-webkit-appearance:none;width:min(27vw,150px,26dvh);height:min(27vw,150px,26dvh);min-width:100px;min-height:100px;border:3px solid #c1aaff;border-radius:50%;background:radial-gradient(circle at 35% 25%,#d0c2ff,#9479dc);box-shadow:inset 0 -7px 0 #7358bd,0 11px 25px #0005;color:#2a2040;font-size:clamp(30px,9vw,56px);display:grid;place-items:center;padding:0;touch-action:none;user-select:none;-webkit-user-select:none}
body.remote-mode #dash:after{content:attr(data-action);position:absolute;margin-top:clamp(98px,29vw,152px);font:700 clamp(12px,3.5vw,17px) 'Space Grotesk',sans-serif;letter-spacing:.06em;color:#eee6ff;text-shadow:0 2px 6px #0009}
body.remote-mode #dash:active{transform:scale(.94);box-shadow:inset 0 2px 0 #ffffff70,0 4px 10px #0005}
body.remote-mode .leave-control{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));width:42px;height:42px;border:1px solid #ffffff25;border-radius:50%;background:#ffffff0a;color:#bbc2b4;font-size:26px;line-height:1;touch-action:manipulation}
body.remote-mode #joystick:focus,body.remote-mode #dash:focus{outline:none}
@media(max-width:420px){body.remote-mode .controller-controls{justify-content:space-around;gap:12px}body.remote-mode #joystick{width:min(46vw,190px,34dvh);height:min(46vw,190px,34dvh);min-width:142px;min-height:142px}body.remote-mode #dash{width:min(29vw,125px,24dvh);height:min(29vw,125px,24dvh);min-width:92px;min-height:92px}body.remote-mode #dash:after{margin-top:clamp(92px,28vw,128px)}}

.ranking{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-width:min(420px,80vw)}.ranking li{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:12px;padding:10px 16px;border-radius:14px;background:#ffffff0d;border:1px solid #ffffff14;font-family:"Space Grotesk",sans-serif;font-weight:600;counter-increment:rank}.ranking li:before{content:counter(rank);color:var(--muted);width:18px}.ranking li.first{background:linear-gradient(90deg,#bcf96b26,#ffffff08);border-color:#bcf96b66;transform:scale(1.04)}.ranking .rank-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 12px currentColor}.ranking b{color:var(--lime);letter-spacing:.04em}.ranking{counter-reset:rank}

/* iOS zooms into inputs under 16px; keep form fields at 16px so focusing never zooms. */
input,select{font-size:16px}
.conn-banner{position:fixed;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:20;padding:8px 16px;border-radius:999px;background:#ff8a5c;color:#1b120c;font:700 13px 'Space Grotesk',sans-serif;box-shadow:0 6px 18px #0006;animation:conn-pulse 1s ease-in-out infinite alternate}.conn-banner.hidden{display:none}@keyframes conn-pulse{to{opacity:.55}}@media (prefers-reduced-motion:reduce){.conn-banner{animation:none}}

/* Batch B: one focus ring, AA-ish borders, no micro text on the landing. */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.audio-menu summary:focus-visible,#motion-toggle:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
input,.secondary,#game-select{border-color:#6f7d60}
.eyebrow,.pill,.tag,footer,footer>span:nth-child(2),.steps small,.launch-actions small,.scene-caption,.scene-caption button,dialog small,.game-select-label,.audio-panel small,#form-error{font-size:12px}
.card-info p{font-size:14px}.room-actions{display:flex;gap:10px;flex-wrap:wrap}
/* Lobby sized for a TV across the room. */
@media(min-width:801px){.lobby-layout{grid-template-columns:clamp(340px,30vw,460px) 1fr}}
.join-panel canvas{width:min(34vh,360px)!important;height:min(34vh,360px)!important}
.room-code{font-size:clamp(48px,6vh,80px);letter-spacing:.12em;line-height:1}
.join-panel small{font-size:16px}.join-panel p{font-size:15px}#game-rules{font-size:16px}
.player{font-size:22px;padding:12px 10px}.avatar{width:48px;height:48px;flex:none;padding:0;letter-spacing:0;border-radius:16px 16px 12px 12px;font:700 22px 'Space Grotesk',sans-serif}.player .ready{font-size:13px}
@media(min-width:1200px) and (min-height:760px){.lobby-layout{min-height:calc(100dvh - 250px)}}
/* Round HUD: the timer is the one number people look for. */
.game-hud{align-items:center;gap:24px;padding:12px 20px;font-size:16px;color:#c6cebf}
#timer{order:-1;font:700 clamp(32px,3.2vw,40px) 'Space Grotesk',sans-serif;color:var(--lime);font-variant-numeric:tabular-nums;min-width:3ch}
#game-tip{flex:1;font-size:clamp(16px,1.4vw,22px)}#alive-label{font-size:clamp(15px,1.2vw,20px);white-space:nowrap}#alive-label:empty{display:none}
.hud-btn{min-height:44px;padding:8px 14px;border:1px solid #6f7d60;border-radius:8px;background:transparent;color:var(--text);font-size:14px}
@media(max-width:600px){.game-hud{font-size:12px}#timer{font-size:26px}}
/* TV mode: while a round runs the stage takes the whole viewport (black bars are fine). */
body.tv-play{overflow:hidden}body.tv-play>header,body.tv-play .room-top{display:none}
body.tv-play #game-stage{position:fixed;inset:0;z-index:30;background:#000;display:flex;flex-direction:column}
body.tv-play #arena{flex:1;min-height:0;width:100%;height:100%;max-height:none;border-radius:0;background:#000;object-fit:contain}
body.tv-play .game-hud{order:2;padding:10px max(24px,3vw)}
/* Results. */
.result{overflow:auto;padding:24px}.result h2{font-size:clamp(40px,5vw,64px)}
.ranking{min-width:min(560px,86vw)}.ranking li{font-size:22px;padding:12px 18px;text-align:left;grid-template-columns:28px 36px 1fr auto}
.ranking .rank-dot{width:34px;height:34px;display:grid;place-items:center;color:#1a2214;font-size:16px;font-weight:700;box-shadow:0 0 0 2px #ffffff30}
/* Phone controller: slim info strip, colour identity, buttons stay dominant. */
.controller-strip{display:none}
body.remote-mode #controller{flex-direction:column;justify-content:flex-start;gap:4px}
body.remote-mode .controller-strip{display:flex;align-items:center;gap:12px;width:100%;flex:none;text-align:left}
#controller-swatch{flex:none;width:40px;height:40px;border-radius:13px 13px 10px 10px;background:var(--me,#b8fa63);color:#1a2214;display:grid;place-items:center;font:700 20px 'Space Grotesk',sans-serif}
.strip-text{flex:1;min-width:0;display:grid;gap:2px}
.strip-top{display:flex;gap:8px;align-items:baseline;white-space:nowrap;overflow:hidden;font-size:14px;color:var(--text)}
#controller-name{color:var(--me,var(--lime));font:700 17px 'Space Grotesk',sans-serif;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:55%}#controller-game-label{min-width:0;overflow:hidden;text-overflow:ellipsis}#controller-room{flex:none}
#controller-room{color:var(--muted);font-size:12px}
#controller-status{font-size:14px;line-height:1.3;color:#c6cebf;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.remote-mode .leave-control{position:static;flex:none;width:auto;min-width:44px;height:44px;margin-right:8px;padding:0 16px;border-radius:22px;font-size:14px;font-weight:600;color:#d3dacb;border-color:#6f7d60}
body.remote-mode .leave-control.armed{background:#ff8a5c;border-color:#ff8a5c;color:#1b120c}
body.remote-mode .controller-controls{flex:1;align-self:stretch;max-width:none;justify-content:space-between;padding-inline:6vw;transition:opacity .2s}
body.remote-mode #stick{background:radial-gradient(circle at 35% 30%,#ffffffb0,#fff0 55%),var(--me,#b8fa63);box-shadow:inset 0 3px 3px #ffffff90,0 7px 0 color-mix(in srgb,var(--me,#b8fa63) 55%,#000),0 10px 17px #0005}
body.remote-mode #joystick.active{border-color:var(--me,#bcf96b);box-shadow:inset 0 0 0 9px #ffffff12,0 0 0 5px color-mix(in srgb,var(--me,#bcf96b) 35%,transparent),0 12px 28px #0005}
body.remote-mode #dash{position:relative;color:#1d1530;overflow:visible}
body.remote-mode #dash:after{margin-top:0;top:calc(100% + 14px);left:50%;transform:translateX(-50%);white-space:nowrap}
/* Cooldown ring charges up around the action button; a full lime ring means ready. */
@property --cool{syntax:'<percentage>';inherits:true;initial-value:100%}
@keyframes dash-cool{from{--cool:0%;filter:brightness(.7) saturate(.5)}to{--cool:100%;filter:none}}
body.remote-mode #dash:before{content:'';position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(var(--lime) var(--cool),#ffffff1f 0);-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 calc(100% - 5px));pointer-events:none}
@media(orientation:landscape){body.remote-mode #joystick{width:max(180px,min(56dvh,280px));height:max(180px,min(56dvh,280px))}body.remote-mode #dash{width:max(110px,min(40dvh,170px));height:max(110px,min(40dvh,170px))}}
@media(max-width:420px){body.remote-mode .controller-controls{justify-content:space-between;padding-inline:5vw}}
.controller-controls[inert],#controller:has(#conn-banner:not(.hidden)) .controller-controls{opacity:.3;filter:grayscale(.7)}
body.remote-mode .conn-banner{top:50%;transform:translate(-50%,-50%);font-size:15px;padding:12px 20px;max-width:88vw;text-align:center}
.controller-result{position:fixed;left:6vw;right:6vw;top:calc(max(18px,env(safe-area-inset-top)) + 56px);z-index:15;pointer-events:none;display:grid;gap:6px;place-items:center;padding:20px;border-radius:20px;background:#141713eb;border:2px solid var(--me,var(--lime));box-shadow:0 18px 50px #000a;text-align:center;animation:result-pop .35s cubic-bezier(.16,1,.3,1)}
.controller-result strong{font:700 clamp(30px,9vw,52px) 'Space Grotesk',sans-serif;color:var(--me,var(--lime));line-height:1.1;overflow-wrap:anywhere}
.controller-result span{font-size:15px;color:#c6cebf}
@keyframes result-pop{from{opacity:0;transform:scale(.9)}}
@media(prefers-reduced-motion:reduce){.controller-result{animation:none}}
/* Reduced motion: the landing fans stand still unless the visitor presses "Putar animasi". */
@media (prefers-reduced-motion:reduce){.motion-paused .fan-body,.motion-paused .fan-body *,.motion-paused .tv-chip i{animation:none}}
body.remote-mode #dash.holding{transform:scale(.92);filter:brightness(1.15);box-shadow:inset 0 2px 0 #ffffff70,0 0 0 6px #ffffff30,0 0 34px #ffe27a88}
/* Ketapel pad: one big drag surface; the band follows the finger, the arrow points where the shot goes. */
body.remote-mode #sling{position:relative;flex:1;align-self:stretch;min-height:240px;margin:6px 0;border-radius:28px;border:3px dashed color-mix(in srgb,var(--me,#bcf96b) 60%,transparent);background:radial-gradient(circle at 50% 45%,#2c3a25,#151a13 70%);touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden;display:block;cursor:grab}
body.remote-mode #sling.pulling{border-style:solid;border-color:var(--me,#bcf96b);cursor:grabbing}
#sling .sling-hint{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:700 clamp(18px,6vw,30px)/1.25 'Space Grotesk',sans-serif;letter-spacing:.04em;color:#ffffff40;pointer-events:none;transition:opacity .15s}
#sling.pulling .sling-hint{opacity:.12}
#sling-anchor,#sling-band,#sling-arrow{position:absolute;opacity:0;pointer-events:none;transition:opacity .1s}
#sling-anchor{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffffc0,#fff0 55%),var(--me,#b8fa63);box-shadow:0 0 0 6px #ffffff22,0 6px 14px #0007}
#sling-band{height:12px;margin-top:-6px;transform-origin:0 50%;border-radius:6px;background:repeating-linear-gradient(90deg,#8a5a34 0 10px,#b07a48 10px 20px);box-shadow:0 3px 8px #0007}
#sling-arrow{height:8px;margin-top:-4px;transform-origin:0 50%;border-radius:4px;background:#9ef07a}
#sling-arrow{color:#9ef07a}#sling-arrow:after{content:'';position:absolute;right:-14px;top:-8px;border:12px solid transparent;border-left:16px solid currentColor;border-right:0}
#sling-power{position:absolute;top:14px;right:20px;font:800 clamp(30px,10vw,54px) 'Space Grotesk',sans-serif;color:var(--me,#bcf96b);text-shadow:0 3px 10px #000a;pointer-events:none}
@media(prefers-reduced-motion:reduce){#sling .sling-hint,#sling-anchor,#sling-band,#sling-arrow{transition:none}}
/* Choice pad (pad:'choice'): host-driven menus as big real buttons; lists and face grids scroll on their own. */
body.remote-mode #choice{flex:1;align-self:stretch;min-height:0;display:flex;flex-direction:column;gap:10px;padding:6px 0 2px}
.choice-title{margin:0;font:700 clamp(18px,5.2vw,26px)/1.2 'Space Grotesk',sans-serif;text-align:center;color:var(--text);overflow-wrap:anywhere}
.choice-note{margin:0;min-height:1.3em;text-align:center;font:700 16px 'Space Grotesk',sans-serif;color:var(--me,var(--lime))}
.choice-body{flex:1;min-height:0;display:grid;gap:12px}
.choice-btn{appearance:none;-webkit-appearance:none;position:relative;border:0;border-radius:22px;background:var(--tone,#2b3326);color:#14180f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px;min-height:56px;font:800 clamp(30px,10vw,54px)/1 'Space Grotesk',sans-serif;box-shadow:inset 0 -7px 0 #0003,0 8px 18px #0005;touch-action:manipulation;transition:transform .12s,opacity .15s,filter .15s,outline-color .15s}
.choice-btn b{font:inherit;overflow-wrap:anywhere}.choice-btn small{font:600 14px/1.2 'DM Sans',sans-serif;opacity:.75}
.choice-btn .shape{font-size:.5em;opacity:.55}
.choice-btn:active{transform:scale(.96)}
.choice-btn:focus-visible{outline:4px solid #fff;outline-offset:3px}
.choice-btn.picked{outline:5px solid #fff;outline-offset:-5px;transform:scale(1.03);filter:brightness(1.08)}
.choice-btn.dim{opacity:.25;filter:grayscale(.7)}
.choice-btn:disabled{opacity:.3;filter:grayscale(1);cursor:default}
.choice-buttons{grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));grid-auto-rows:1fr}
.choice-list{display:flex;flex-direction:column;gap:10px;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;padding:2px 2px 10px}
.choice-list .choice-btn{flex:none;align-items:flex-start;text-align:left;font-size:clamp(19px,5.4vw,23px);background:#252c22;color:var(--text);border:2px solid #3e4838;box-shadow:none;border-radius:16px;padding:12px 16px}
.choice-list .choice-btn:first-child:not(:disabled){border-color:var(--me,var(--lime));background:color-mix(in srgb,var(--me,#bcf96b) 18%,#1c201b)}
.choice-grid{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));align-content:start;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;gap:8px;padding:6px 6px 10px}
.choice-grid .choice-btn{background:#ece6d4;border-radius:14px;padding:4px 2px 7px;font-size:13px;min-height:0;box-shadow:inset 0 -4px 0 #0002,0 4px 10px #0004}
.choice-grid .choice-btn b{font:700 13px 'Space Grotesk',sans-serif;color:#1a2214}
.choice-grid canvas{width:100%;max-width:78px;aspect-ratio:1;height:auto}
.choice-grid .choice-btn:disabled{background:#2a2f38;opacity:.45}
.choice-grid .choice-btn:disabled:after{content:'✕';position:absolute;inset:0;display:grid;place-items:center;font-size:44px;color:#ff8c78cc}
.choice-grid .choice-btn.armed{outline:4px solid var(--me,var(--lime));outline-offset:2px;transform:scale(1.06);z-index:1}
.choice-grid .choice-btn:not(:has(canvas)){grid-column:1/-1;background:#252c22;color:var(--text);border:2px solid #3e4838;min-height:52px}.choice-grid .choice-btn:not(:has(canvas)) b{color:var(--text);font-size:17px}
.choice-numpad{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:1fr;gap:10px}
.choice-display{grid-column:1/-1;display:block;padding:10px 16px;border-radius:18px;background:#0b120e;border:2px solid var(--me,var(--lime));text-align:right;font:800 clamp(40px,13vw,64px)/1.1 'Space Grotesk',sans-serif;color:var(--me,var(--lime));font-variant-numeric:tabular-nums}
.choice-numpad .key{background:#2b3326;color:var(--text);font-size:clamp(26px,8vw,40px);border-radius:18px;min-height:48px}
.choice-numpad .key:nth-last-child(1){background:var(--me,var(--lime));color:#14180f}.choice-numpad .key:nth-last-child(3){background:#3b2a26;color:#ffb3a0}
.choice-wait{place-items:center}.choice-dots{font:800 40px 'Space Grotesk',sans-serif;color:#ffffff40;letter-spacing:.2em;animation:choice-pulse 1.4s ease-in-out infinite}
@keyframes choice-pulse{50%{opacity:.35}}
/* Board pad (kind 'board'): a square grid sized to the largest fit (container units), real buttons per cell; chess wood squares, sea-battle waters. */
.choice-board{display:flex;flex-direction:column;gap:8px}
.board-wrap{flex:1;min-height:0;container-type:size;display:grid;place-items:center}
.board{--cell:calc(min(100cqw,100cqh*var(--w)/var(--h))/var(--w));display:grid;grid-template-columns:repeat(var(--w),var(--cell));grid-template-rows:repeat(var(--h),var(--cell));border-radius:10px;overflow:hidden;box-shadow:0 0 0 4px #0008,0 12px 30px #0007;touch-action:manipulation}
.board .cell{appearance:none;-webkit-appearance:none;position:relative;border:0;margin:0;padding:0;display:grid;place-items:center;font:400 calc(var(--cell)*.8)/1 "Noto Sans Symbols 2","Segoe UI Symbol","Apple Symbols","DejaVu Sans",serif;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.board .cell[aria-disabled=true]{cursor:default}
.board .cell:focus-visible{outline:3px solid #fff;outline-offset:-3px;z-index:2}
.board .coord{position:absolute;left:2px;bottom:1px;font:700 calc(var(--cell)*.2)/1 'Space Grotesk',sans-serif;opacity:.7;pointer-events:none;white-space:pre}
.board-chess .light{background:#efe3c8;color:#8a6446}.board-chess .dark{background:#b0815c;color:#f3e7cf}
.board-chess .pc{line-height:1;transform:translateY(4%);pointer-events:none}
.board-chess .pc.w{color:#fbf5e6;text-shadow:0 0 1px #2a2117,1px 1px 0 #2a2117,-1px -1px 0 #2a2117,1px -1px 0 #2a2117,-1px 1px 0 #2a2117,0 3px 4px #0006}
.board-chess .pc.b{color:#22201d;text-shadow:0 0 1px #efe6d2,1px 1px 0 #efe6d2aa,-1px -1px 0 #efe6d2aa,0 3px 4px #0006}
.board-chess .m-l{box-shadow:inset 0 0 0 100vmax #ffe27a5c}
.board-chess .m-c{background:radial-gradient(circle,#ff3b2a 0 35%,#ff3b2a00 75%),#b0815c}
.board-chess .m-s{box-shadow:inset 0 0 0 calc(var(--cell)*.08) var(--me,#b8fa63),inset 0 0 0 100vmax #b8fa6340}
.board-chess .m-t:after{content:'';position:absolute;width:32%;height:32%;border-radius:50%;background:#2c5a1ccc;box-shadow:0 0 0 3px #b8fa6399;pointer-events:none}
.board-chess .m-t:has(.pc):after{width:88%;height:88%;background:none;box-shadow:inset 0 0 0 calc(var(--cell)*.07) #2c8a1ccc}
.board-sea{gap:1px;background:#0a2038;padding:1px}
.board-sea .cell{background:#154471;color:#d8ecff;font:800 calc(var(--cell)*.62)/1 'Space Grotesk',sans-serif}
.board-sea .c-f{background:linear-gradient(160deg,#1b4f80,#123a63)}
.board-sea .c-f:not([aria-disabled=true]):active{background:#2a6aa6}
.board-sea .c-S{background:#8fa3b5;box-shadow:inset 0 -4px 0 #0003;border-radius:5px}
.board-sea .c-o:before{content:'';width:26%;height:26%;border-radius:50%;background:#d8ecff}
.board-sea .c-x{background:#c2412c}.board-sea .c-x:before{content:'✕';color:#ffe3c4}
.board-sea .c-k{background:#5a1f1a}.board-sea .c-k:before{content:'✕';color:#ff8c78}
.board-sea .m-f{outline:3px solid #ffe27a;outline-offset:-3px;z-index:1;animation:cell-pulse 1s ease-in-out 3}
.board-sea .coord{color:#8fb3d1}
@keyframes cell-pulse{50%{outline-color:#ffe27a33}}
.board-legend{margin:0;text-align:center;font:700 15px/1.3 'Space Grotesk',sans-serif;color:#c6cebf}
.board-opts{display:flex;gap:10px}
.board-opts .choice-btn{flex:1;min-height:50px;font-size:clamp(16px,4.6vw,20px);background:#2b3326;color:var(--text);border-radius:16px}
.board-opts .choice-btn.armed{background:#ff6b4a;color:#14180f;outline:3px solid #fff;outline-offset:2px}
@media(orientation:landscape) and (max-height:520px){.choice-board{display:grid;grid-template-columns:1fr minmax(150px,32%);grid-template-rows:1fr auto;column-gap:12px}.choice-board .board-wrap{grid-row:1/3}.board-opts{flex-direction:column;align-self:end}.board-legend{align-self:end}}
@media(prefers-reduced-motion:reduce){.board-sea .m-f{animation:none}}

@media(prefers-reduced-motion:reduce){.choice-btn{transition:none}.choice-dots{animation:none}}
/* FPS pad: stick on the left, a drag-to-turn look area on the right that holds TEMBAK and the small second button. */
body.remote-mode #fps-look{position:relative;flex:1;align-self:stretch;min-height:190px;margin:6px 0 6px 4vw;border-radius:28px;border:3px dashed color-mix(in srgb,var(--me,#bcf96b) 45%,transparent);background:radial-gradient(circle at 38% 45%,#25301f,#121610 72%);touch-action:none;cursor:ew-resize;overflow:hidden}
body.remote-mode #fps-look.active{border-style:solid;border-color:var(--me,#bcf96b);background:radial-gradient(circle at 38% 45%,#2f3d27,#141912 72%)}
#fps-look .look-hint{position:absolute;left:0;right:42%;top:42%;transform:translateY(-50%);text-align:center;font:700 clamp(13px,3.4vw,20px)/1.3 'Space Grotesk',sans-serif;letter-spacing:.06em;color:#ffffff3a;pointer-events:none;transition:opacity .15s}
#fps-look.active .look-hint{opacity:.25}
body.remote-mode #fps-fire,body.remote-mode #fps-b2{appearance:none;-webkit-appearance:none;position:absolute;border-radius:50%;display:grid;place-items:center;touch-action:none;font-family:'Space Grotesk',sans-serif}
body.remote-mode #fps-fire{--size:clamp(96px,32dvh,150px);right:14px;bottom:14px;width:var(--size);height:var(--size);border:3px solid #ffb38a;background:radial-gradient(circle at 35% 25%,#ffc9a8,#e2603a);box-shadow:inset 0 -7px 0 #a8412a,0 10px 24px #0007;color:#3a120a;font-size:clamp(30px,10dvh,46px);font-weight:800}
body.remote-mode #fps-fire:after{content:attr(data-action);position:absolute;bottom:15%;left:0;right:0;text-align:center;font-size:12px;font-weight:800;letter-spacing:.08em}
body.remote-mode #fps-fire.holding{transform:scale(.93);filter:brightness(1.15);box-shadow:inset 0 2px 0 #ffffff70,0 0 0 6px #ffffff30,0 0 34px #ff9a5c88}
body.remote-mode #fps-b2{--size:clamp(60px,20dvh,86px);right:calc(clamp(96px,32dvh,150px) + 30px);bottom:20px;width:var(--size);height:var(--size);border:3px solid #9fd8ff;background:radial-gradient(circle at 35% 25%,#cdeeff,#4f9fd0);box-shadow:inset 0 -5px 0 #2f6f99,0 8px 18px #0007;color:#0d2433;font-size:16px;font-weight:800;letter-spacing:.04em}
body.remote-mode #fps-b2.holding{transform:scale(.92);filter:brightness(1.15)}
body.remote-mode #fps-fire:focus,body.remote-mode #fps-b2:focus{outline:none}body.remote-mode #fps-fire:focus-visible,body.remote-mode #fps-b2:focus-visible,#shout:focus-visible{outline:3px solid #fff;outline-offset:3px}
body.remote-mode.fps-pad .controller-controls{padding-inline:3vw}
@media(orientation:portrait){body.remote-mode #fps-look{margin-left:3vw}body.remote-mode #fps-fire{--size:clamp(84px,24vw,130px)}body.remote-mode #fps-b2{right:22px;bottom:calc(clamp(84px,24vw,130px) + 26px)}#fps-look .look-hint{right:0;top:22%}}
/* Solo spectators: a single shout button. */
body.remote-mode .watch:not(.hidden){flex:1;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;padding:10px 6vw}
.watch b{font:700 clamp(24px,6.5vw,38px)/1.15 'Space Grotesk',sans-serif;color:var(--me,var(--lime))}
.watch span{color:#c6cebf;font-size:15px;max-width:32ch}
#shout{appearance:none;-webkit-appearance:none;border:3px solid #ffd27a;border-radius:999px;padding:16px 44px;background:radial-gradient(circle at 35% 25%,#ffe9b0,#f0a83a);box-shadow:inset 0 -6px 0 #b8741c,0 10px 24px #0007;font:800 clamp(24px,7vw,34px) 'Space Grotesk',sans-serif;color:#3a2206;touch-action:manipulation;cursor:pointer}
#shout:active{transform:scale(.95);box-shadow:inset 0 2px 0 #ffffff70,0 4px 10px #0005}
@media(prefers-reduced-motion:reduce){#fps-look .look-hint{transition:none}}
/* Lobby how-to cards: tinted by the selected game's colour (--game, set by howto.js); fixed min-heights so switching games never jumps the layout. */
.howto{--game:var(--lime);display:grid;gap:12px;margin:18px 0 22px}.howto-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr);gap:10px}
.howto-card{position:relative;min-height:198px;padding:16px 16px 18px;border-radius:14px;border:1px solid color-mix(in srgb,var(--game) 32%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--game) 13%,#161a15),#161a15 70%);box-shadow:inset 0 1px 0 #ffffff0d;transition:border-color .25s,background .25s}
.howto-card:before{content:'';position:absolute;left:16px;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--game)}
.howto-card h4{margin:0 0 10px;font:700 14px 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--game)}.howto-card h4 span{font-size:16px;letter-spacing:0;margin-right:4px}
.howto-card p{margin:0;font:600 clamp(19px,1.35vw,22px)/1.25 'Space Grotesk',sans-serif;color:var(--text);text-wrap:balance}
.howto-chips,.howto-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.howto-chips li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 9px;border-radius:10px;background:#0e110dcc;border:1px solid #ffffff14;font:600 18px/1.15 'DM Sans',sans-serif;color:var(--text)}
.howto-icon{font-size:19px;line-height:1}
.howto-meta li{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:99px;border:1px dashed color-mix(in srgb,var(--game) 40%,var(--line));font:500 17px/1.2 'DM Sans',sans-serif;color:#d7dccd}.howto-meta .howto-icon{font-size:16px}
.howto-more summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font:700 13px 'Space Grotesk',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-radius:8px}.howto-more summary::-webkit-details-marker{display:none}
.howto-more summary:after{content:'+';display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);font-size:15px;transition:transform .2s}.howto-more[open] summary:after{transform:rotate(45deg)}.howto-more summary:hover{color:var(--text)}
.howto-more #game-rules{margin:4px 0 0;padding:14px 16px;border-left:3px solid var(--game);background:#ffffff08;border-radius:0 10px 10px 0;font-size:16px;line-height:1.6;color:#c9cfbf}
@media(max-width:900px){.howto-cards{grid-template-columns:1fr 1fr}.howto-ctrl{grid-column:1/-1;order:3}.howto-card{min-height:0}}
@media(max-width:520px){.howto-cards{grid-template-columns:1fr}.howto-card{padding:14px}.howto-card p{font-size:19px}.howto-chips li{font-size:16px}.howto-meta li{font-size:15px}}
@media(prefers-reduced-motion:reduce){.howto-card,.howto-more summary:after{transition:none}}
.boot-stuck{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;display:flex;gap:12px;align-items:center;padding:12px 14px 12px 20px;border-radius:999px;background:#ffd86b;color:#1b160a;font-weight:600;box-shadow:0 10px 30px #0008}.boot-stuck button{border:0;border-radius:999px;padding:8px 16px;background:#1b160a;color:#ffd86b;font-weight:700;min-height:44px}
/* Action pads (joystick / fps) always use a landscape frame. On a portrait phone body.rot turns the whole controller 90° (top of the phone = left of the pad) so the player just holds it sideways; app.js maps pointers into this frame. Safe-area insets rotate with it. */
.sens-toggle{display:none}
body.remote-mode.action-pad #controller{gap:0;padding:max(6px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
body.remote-mode.rot #controller{inset:auto;left:0;top:0;width:var(--fh,100dvh);height:var(--fw,100dvw);max-width:none;transform-origin:0 0;transform:translateX(var(--fw,100dvw)) rotate(90deg);padding:max(6px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-top))}
body.remote-mode.action-pad .controller-strip{height:44px;gap:10px;padding:0 2px;border-bottom:1px solid #ffffff10}
body.remote-mode.action-pad #controller-swatch{width:28px;height:28px;font-size:14px;border-radius:10px 10px 8px 8px}
body.remote-mode.action-pad .strip-text{display:flex;align-items:center;white-space:nowrap;overflow:hidden}
body.remote-mode.action-pad .strip-top{flex:none;max-width:58%;gap:0;align-items:center;font-size:13px}
body.remote-mode.action-pad #controller-name{font-size:15px;max-width:none;flex:0 1 auto}
body.remote-mode.action-pad #controller-room{display:none}
body.remote-mode.action-pad #controller-game-label:before,body.remote-mode.action-pad #controller-status:before{content:'•';margin:0 8px;color:#6f7a66}
body.remote-mode.action-pad #controller-status{display:block;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:var(--muted)}
body.remote-mode.action-pad .leave-control{height:34px;min-width:0;padding:0 14px;margin:0;font-size:13px}
body.remote-mode.fps-pad .sens-toggle{display:inline-flex;align-items:center;flex:none;height:34px;padding:0 12px;border-radius:17px;border:1px solid color-mix(in srgb,var(--me,#bcf96b) 45%,#ffffff20);background:#ffffff08;color:var(--me,#bcf96b);font:700 12px 'Space Grotesk',sans-serif;letter-spacing:.04em;touch-action:manipulation}
body.remote-mode.fps-pad .sens-toggle:active{background:#ffffff18}
/* Thumb zones: left 45% = floating stick, right = buttons / look surface. Sizes key off vmin (the phone's short side in both orientations). */
body.remote-mode.action-pad .controller-controls{--F:clamp(104px,30vmin,160px);--S:clamp(68px,19vmin,100px);--gx:clamp(18px,4.5vmax,48px);--gy:clamp(12px,5vmin,32px);position:relative;display:block;flex:1;align-self:stretch;min-height:0;margin:0;padding:0}
body.remote-mode.action-pad #joystick{position:absolute;left:0;top:0;bottom:0;width:45%;height:auto;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;display:block;cursor:grab}
body.remote-mode.action-pad #joystick.active{box-shadow:none}
#joy-base{--r:var(--stick-r,64px);position:absolute;left:34%;top:60%;width:calc(var(--r)*2);height:calc(var(--r)*2);margin:calc(var(--r)*-1) 0 0 calc(var(--r)*-1);border-radius:50%;border:2px solid color-mix(in srgb,var(--me,#bcf96b) 40%,#ffffff30);background:radial-gradient(circle,#ffffff0d 0 30%,#0000 31%),radial-gradient(circle at 50% 40%,#3a4a30cc,#1a2117cc);box-shadow:inset 0 0 0 8px #ffffff06,0 10px 26px #0006;opacity:.38;pointer-events:none;transition:opacity .15s}
#joystick.active #joy-base{opacity:1;border-color:var(--me,#bcf96b);box-shadow:inset 0 0 0 8px #ffffff0a,0 0 0 6px color-mix(in srgb,var(--me,#bcf96b) 22%,transparent),0 10px 26px #0006}
body.remote-mode.action-pad #stick{position:absolute;left:50%;top:50%;width:48%;height:48%;margin:-24% 0 0 -24%}
/* Primary on the right-thumb rest spot, secondary up-left along the thumb's arc; labels sit inside so they never fight the rims. */
body.remote-mode.action-pad #dash{position:absolute;right:var(--gx);bottom:var(--gy);width:var(--F);height:var(--F);min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:calc(var(--F)*.28);line-height:1;transition:transform .08s,filter .08s}
body.remote-mode.action-pad #dash:after,body.remote-mode.action-pad #fps-fire:after{position:static;transform:none;margin:0;inset:auto;font:800 clamp(11px,calc(var(--F)*.1),15px) 'Space Grotesk',sans-serif;letter-spacing:.08em;color:inherit;text-shadow:none;white-space:nowrap;max-width:86%;overflow:hidden;text-overflow:ellipsis}
body.remote-mode.action-pad #fps-look{position:absolute;right:0;top:0;bottom:0;left:auto;width:55%;min-height:0;margin:0;border:0;border-radius:0;background:none;overflow:visible;cursor:ew-resize}
body.remote-mode.action-pad #fps-look:before{content:'';position:absolute;left:0;top:14%;bottom:14%;width:1px;background:linear-gradient(#0000,#ffffff1c,#0000);pointer-events:none}
body.remote-mode.action-pad #fps-look.active{border:0;background:radial-gradient(ellipse at 45% 45%,color-mix(in srgb,var(--me,#bcf96b) 9%,transparent),transparent 65%)}
body.remote-mode.action-pad #fps-look .look-hint{left:0;right:calc(var(--F) + var(--gx));top:30%;font-size:clamp(12px,3.2vmin,16px)}
body.remote-mode.action-pad #fps-fire{right:var(--gx);bottom:var(--gy);width:var(--F);height:var(--F);flex-direction:column;display:flex;align-items:center;justify-content:center;gap:2px;font-size:calc(var(--F)*.28);line-height:1;transition:transform .08s,filter .08s}
body.remote-mode.action-pad #fps-b2{right:calc(var(--gx) + var(--F)/2 - var(--S)/2 + (var(--F)/2 + var(--S)/2 + 18px)*.6);bottom:calc(var(--gy) + var(--F)/2 - var(--S)/2 + (var(--F)/2 + var(--S)/2 + 18px)*.8);width:var(--S);height:var(--S);font-size:clamp(12px,calc(var(--S)*.18),16px);transition:transform .08s,filter .08s}
body.remote-mode.action-pad #fps-b2.holding{box-shadow:inset 0 2px 0 #ffffff70,0 0 0 6px #ffffff30,0 0 30px #6cc4ff88}
body.remote-mode.action-pad .controller-result{position:fixed;left:0;right:0;top:56px;margin:auto;width:min(560px,78%)}
@media(prefers-reduced-motion:reduce){#joy-base,body.remote-mode.action-pad #dash,body.remote-mode.action-pad #fps-fire,body.remote-mode.action-pad #fps-b2{transition:none}}
/* Double-tap zoom off everywhere while locked; controls keep their own touch-action:none. */
html.zoom-locked,html.zoom-locked body{touch-action:manipulation;-webkit-text-size-adjust:100%}