.versus-shell { width:min(100% - 32px, 1020px); margin:0 auto; padding:28px 0 60px; text-align:center; }
.versus-back { display:inline-block; margin-bottom:10px; font:800 12px ui-monospace,monospace; letter-spacing:.12em; }
.versus-logo-link { display:block; width:fit-content; max-width:82vw; margin:0 auto; }
.versus-logo { display:block; width:min(390px,82vw); margin:0 auto -12px; }
.versus-logo.is-square-logo { width:min(260px,64vw); margin-bottom:-20px; }
.versus-eyebrow { margin:0; color:var(--pink); font:800 12px ui-monospace,monospace; letter-spacing:.17em; text-shadow:0 0 10px #ff5dcb; }
.versus-shell h1 { margin:7px 0 8px; color:#ecffff; font:900 clamp(28px,6vw,52px)/1 ui-monospace,monospace; letter-spacing:.1em; text-shadow:0 0 8px #fff,0 0 23px var(--cyan); }
.versus-intro { max-width:650px; margin:0 auto 25px; color:var(--muted); }
.versus-audio-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin:-10px auto 24px; }
.versus-audio-controls button { position:relative; width:132px; margin:0; padding:9px 9px 9px 37px; border:1px solid var(--cyan); border-radius:99px; background:#0b2940; color:#dffcff; text-align:left; font:800 10px ui-monospace,monospace; letter-spacing:.04em; box-shadow:0 0 11px #00d9ff33; cursor:pointer; }
.versus-audio-controls button::before { content:''; position:absolute; top:5px; left:6px; width:19px; height:19px; border-radius:50%; background:#75ef73; box-shadow:0 0 10px #a9ff58; transition:.2s ease; }
.versus-audio-controls button[aria-pressed="true"] { border-color:#ff5dcb; background:#241025; color:#ffb8e8; box-shadow:0 0 11px #ff5dcb55; }
.versus-audio-controls button[aria-pressed="true"]::before { transform:translateX(99px); background:#ff5dcb; box-shadow:0 0 10px #ff8bd8; }
.versus-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:16px; align-items:stretch; text-align:left; }
body[data-versus-view="challenge"] .online-only,
body[data-versus-view="online"] .challenge-only { display:none !important; }
/* The arena canvas is shared by Challenge and private online matches. Its
   surrounding layout also holds Challenge's keyboard displays, so restore
   the layout for online play while keeping those displays hidden. */
body[data-versus-view="online"] .challenge-streamer-layout { display:block !important; }
body[data-versus-view="online"] .challenge-input-display { display:none !important; }
/* Never let Challenge-only layout rules hide the shared online arena. */
body[data-versus-view="online"] .challenge-game-wrap,
body[data-versus-view="online"] #versus-game { display:block !important; visibility:visible !important; opacity:1 !important; }
body[data-versus-view="challenge"] .versus-grid { grid-template-columns:minmax(0, 620px); justify-content:center; }
body[data-versus-view="challenge"].challenge-map-visible .versus-grid { display:none; }
body[data-versus-view="challenge"].challenge-level-active .challenge-map-card,
body[data-versus-view="challenge"].challenge-level-active .versus-grid { display:none !important; }
body[data-versus-view="challenge"].challenge-level-active .versus-back,
body[data-versus-view="challenge"].challenge-level-active .versus-logo-link,
body[data-versus-view="challenge"].challenge-level-active #versus-eyebrow,
body[data-versus-view="challenge"].challenge-level-active #versus-heading,
body[data-versus-view="challenge"].challenge-level-active #versus-intro,
body[data-versus-view="challenge"].challenge-level-active .versus-footnote { display:none !important; }
body[data-versus-view="challenge"].challenge-level-active .versus-audio-controls { display:none !important; }
.versus-round-active .versus-grid,
.versus-round-active .match-card,
.versus-round-active .challenge-map-card { display:none; }
.versus-card { padding:20px; border:2px solid #30ddf0a6; border-radius:12px; background:linear-gradient(145deg,#111a32ef,#050816f5); box-shadow:0 0 24px #00d9ff2b,inset 0 0 18px #00d9ff12; }
.versus-card h2 { margin:0 0 13px; color:#fff; font:800 17px ui-monospace,monospace; letter-spacing:.08em; text-shadow:0 0 10px var(--cyan); }
.versus-card h3 { margin:20px 0 8px; color:var(--yellow); font:800 12px ui-monospace,monospace; letter-spacing:.1em; }
.guest-status,.lobby-message { min-height:20px; margin:0 0 14px; color:var(--cyan-soft); font:700 11px ui-monospace,monospace; letter-spacing:.05em; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0; }
.stat-grid div { min-height:60px; padding:7px 4px; border:1px solid #34dff041; border-radius:6px; background:#0207118c; text-align:center; }
.stat-grid dt { color:var(--muted); font:700 9px ui-monospace,monospace; letter-spacing:.04em; }
.stat-grid dd { margin:3px 0 0; color:#fff; font:900 18px ui-monospace,monospace; text-shadow:0 0 8px #fff; }
.win-types { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.win-types span { padding:4px 6px; border:1px solid #ff5dcb71; border-radius:4px; color:#ffb8e8; font:700 9px ui-monospace,monospace; }
.win-types b { color:#fff; }
.recent-results { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.recent-results li { padding:7px; border-left:3px solid #34dff0; background:#071120; color:#dffcff; font:700 10px ui-monospace,monospace; }
.recent-results .result-loss,.recent-results .result-quit { border-left-color:#ff5d7a; }
.room-card { display:flex; flex-direction:column; }
.challenge-map-card { display:none; max-width:760px; margin:0 auto; text-align:left; overflow:hidden; }
body[data-versus-view="challenge"] .challenge-map-card { display:block; }
body[data-versus-view="challenge"]:not(.challenge-map-visible) .challenge-map-card { display:none; }
.challenge-map-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:7px; }
.challenge-map-heading h2 { margin:4px 0 0; font-size:23px; }
.quick-play-button { width:auto; min-width:142px; margin:0; }
.challenge-map-intro { max-width:620px; margin:0 0 14px; color:#bcd4dd; font:700 12px/1.5 ui-monospace,monospace; }
.challenge-map-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-bottom:13px; color:#bff9ff; font:800 10px ui-monospace,monospace; letter-spacing:.09em; }
.challenge-map-meta b { color:#a9ff58; font-size:16px; text-shadow:0 0 9px #75ef73; }
.challenge-map-objectives { display:none; margin:0 0 13px; padding:10px 12px; border:1px solid #34dff066; border-radius:7px; background:#051326c9; box-shadow:inset 0 0 14px #00d9ff12; }
html.android-app-shell .challenge-map-objectives { display:block; }
.challenge-map-objectives strong { display:block; margin-bottom:8px; color:#fff58a; font:900 10px ui-monospace,monospace; letter-spacing:.1em; }
.challenge-map-objectives ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; margin:0; padding:0; list-style:none; }
.challenge-map-objectives li { display:flex; gap:6px; align-items:flex-start; color:#c0d2dd; font:700 10px/1.3 ui-monospace,monospace; }
.challenge-map-objectives li i { display:grid; width:14px; height:14px; flex:0 0 14px; place-items:center; border:1px solid #698597; border-radius:50%; color:#a2b6c4; font:900 9px/1 ui-monospace,monospace; font-style:normal; }
.challenge-map-objectives li.achieved { color:#dfffd4; }.challenge-map-objectives li.achieved i { border-color:#75ef73; background:#1c5522; color:#c7ff94; }
.challenge-path { position:relative; display:grid; grid-template-columns:repeat(3,minmax(70px,1fr)); grid-template-rows:repeat(25,80px); gap:0; height:680px; padding:18px 32px; overflow-y:auto; overscroll-behavior:contain; border:1px solid #34dff044; border-radius:10px; background:repeating-linear-gradient(90deg,transparent 0 36px,#27dff013 37px 38px),repeating-linear-gradient(0deg,transparent 0 36px,#b84dff0b 37px 38px),radial-gradient(ellipse at 50% 97%,#35f3b524 0 10%,transparent 32%),radial-gradient(ellipse at 18% 58%,#00d9ff13 0 7%,transparent 27%),radial-gradient(ellipse at 80% 26%,#b84dff15 0 6%,transparent 24%),linear-gradient(145deg,#091a3188,#030610b8 68%),url('../maps/challenge-map-background.png') center / cover no-repeat; scrollbar-color:#36dff0 #050916; scrollbar-width:thin; }
.challenge-path::before { content:''; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.6; background:linear-gradient(90deg,transparent 0 6%,#00d9ff13 6.2% 6.45%,transparent 6.7% 93.3%,#b84dff13 93.55% 93.8%,transparent 94%),radial-gradient(circle at 50% 50%,transparent 0 40%,#00d9ff0c 72%,transparent 100%); }
.challenge-path::-webkit-scrollbar { width:8px; }.challenge-path::-webkit-scrollbar-track { background:#050916; }.challenge-path::-webkit-scrollbar-thumb { border:1px solid #7eeeff; border-radius:99px; background:#164b62; }
.challenge-path-lines { position:absolute; z-index:0; top:0; left:0; overflow:visible; pointer-events:none; }
.challenge-path-lines polyline { fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px currentColor); }
.challenge-level { position:relative; z-index:1; display:grid; width:62px; height:62px; place-items:center; justify-self:center; align-self:center; border:2px solid #7d57d7; border-radius:50%; background:radial-gradient(circle at 34% 28%,#39244f,#100b24 62%); color:#c69cff; font:900 16px ui-monospace,monospace; box-shadow:0 0 13px #b84dff66,inset 0 0 12px #b84dff33; scroll-margin:10px; }
.challenge-level::after { content:attr(data-mode); position:absolute; top:calc(100% + 3px); left:50%; transform:translateX(-50%); white-space:nowrap; color:#9071b6; font:800 7px ui-monospace,monospace; letter-spacing:.08em; }
.challenge-level.classic { border-color:#28d9f0; background:radial-gradient(circle at 34% 28%,#1f4a60,#071422 62%); color:#c5faff; box-shadow:0 0 13px #00d9ff77,inset 0 0 12px #00d9ff33; }
.challenge-level.warpstrike { border-color:#b84dff; background:radial-gradient(circle at 34% 28%,#4b2168,#140920 62%); color:#edd6ff; box-shadow:0 0 14px #b84dff88,inset 0 0 12px #b84dff44; }
.challenge-level.rookie { border-color:#75ef73; background:radial-gradient(circle at 34% 28%,#356f1d,#0a2112 64%); color:#eaffda; box-shadow:0 0 13px #75ef7366,inset 0 0 12px #a9ff5844; }
.challenge-level.rival { border-color:#28d9f0; background:radial-gradient(circle at 34% 28%,#1f4a60,#071422 62%); color:#c5faff; box-shadow:0 0 13px #00d9ff77,inset 0 0 12px #00d9ff33; }
.challenge-level.champion { border-color:#b84dff; background:radial-gradient(circle at 34% 28%,#4b2168,#140920 62%); color:#edd6ff; box-shadow:0 0 14px #b84dff88,inset 0 0 12px #b84dff44; }
.challenge-level.legend { border-color:#ffe168; background:radial-gradient(circle at 34% 28%,#744a0a,#241505 64%); color:#fff6c8; box-shadow:0 0 16px #ffc92888,inset 0 0 14px #ffe16855; }
.challenge-level.current { border-color:#a9ff58; color:#f3ffe9; cursor:pointer; box-shadow:0 0 8px #fff,0 0 22px #75ef73,inset 0 0 14px #a9ff5855; animation:challengeCurrentPulse 1.65s ease-in-out infinite; }
.challenge-level.rank-platinum { border-color:#f2f6ff; background:radial-gradient(circle at 34% 28%,#8597b8,#202a3d 64%); color:#ffffff; box-shadow:0 0 16px #dbe8ffcc,inset 0 0 14px #f7fbff77; }
.challenge-level.rank-gold { border-color:#ffd34e; background:radial-gradient(circle at 34% 28%,#80620d,#2b1a04 64%); color:#fff6bf; box-shadow:0 0 16px #ffc928aa,inset 0 0 14px #ffe16866; }
.challenge-level.rank-neutral { border-color:#aab5bf; background:radial-gradient(circle at 34% 28%,#54616d,#182029 64%); color:#eef3f7; box-shadow:0 0 13px #b8c4cc88,inset 0 0 12px #d8e1e755; }
.challenge-level.rank-silver { border-color:#d9e4ee; background:radial-gradient(circle at 34% 28%,#687989,#1b2630 64%); color:#f4f8fc; box-shadow:0 0 16px #c9d6e4aa,inset 0 0 14px #e8f1fa66; }
.challenge-level.rank-bronze { border-color:#d88949; background:radial-gradient(circle at 34% 28%,#75401f,#291308 64%); color:#ffe0be; box-shadow:0 0 16px #cd713faa,inset 0 0 14px #f09a5b66; }

/* Completed Challenge levels use the same textured medals as Solo. The level
   number sits over the star as an engraved mark rather than replacing it. */
.challenge-level.has-medal { background:#050b18; overflow:visible; }
.challenge-level-medal { position:absolute; inset:5px; display:block; border-radius:50%; background:url('../medals/tier-medals-v1.png') left center / 300% auto no-repeat; filter:drop-shadow(0 0 8px currentColor); }
.challenge-level-medal.silver { background-position:50% center; }
.challenge-level-medal.bronze { background-position:100% center; }
.challenge-level-medal.platinum { background-image:url('../medals/challenge-platinum-medal-v1.png'); background-position:center; background-size:contain; }
.challenge-medal-number { position:absolute; inset:0; display:grid; place-items:center; color:#130d05; font:900 12px/1 ui-monospace,monospace; font-style:normal; letter-spacing:-.04em; text-shadow:0 1px 0 #fff9,0 -1px 0 #0009; }
.challenge-level-medal.silver .challenge-medal-number { color:#101820; }
.challenge-level-medal.bronze .challenge-medal-number { color:#241006; }
.challenge-rank { position:absolute; z-index:2; right:-4px; bottom:-8px; left:-4px; padding:2px 1px; border:1px solid currentColor; border-radius:7px; background:#020611ee; font-size:7px; box-shadow:0 0 6px currentColor; }

.challenge-platinum-popup { position:fixed; z-index:120; inset:0; display:grid; padding:20px; place-items:center; background:#000d; }
.challenge-platinum-popup[hidden] { display:none; }
.challenge-platinum-panel { width:min(92vw,480px); padding:22px; border:2px solid #dffaff; border-radius:20px; background:radial-gradient(circle at 50% 20%,#173f75,#07142e 52%,#02040c); box-shadow:0 0 34px #25dfffaa,inset 0 0 36px #25dfff33; text-align:center; }
.challenge-platinum-art { position:relative; width:min(62vw,260px); margin:0 auto; isolation:isolate; }
.challenge-platinum-art img { display:block; width:100%; filter:drop-shadow(0 0 18px #21ddff); }
.challenge-platinum-art::after { position:absolute; inset:3%; border-radius:50%; background:linear-gradient(115deg,transparent 28%,#fff9 42%,transparent 54%); background-size:220% 100%; mix-blend-mode:screen; content:""; animation:challenge-platinum-shine 3.2s linear infinite; }
@keyframes challenge-platinum-shine { from{background-position:160% 0} to{background-position:-70% 0} }
.challenge-platinum-panel p { margin:8px 0; color:#64eaff; font:900 11px ui-monospace,monospace; letter-spacing:.14em; }
.challenge-platinum-panel h2 { margin:8px 0 20px; color:#fff; font:900 clamp(24px,7vw,38px)/1.05 ui-monospace,monospace; text-shadow:0 0 14px #32dfff; }
@media (prefers-reduced-motion:reduce) { .challenge-platinum-art::after { animation:none; background-position:50%; } }
.challenge-level.current::after { color:#baff8d; }
.challenge-level.completed { cursor:pointer; filter:saturate(.76) brightness(.84); }
.challenge-level.locked { cursor:not-allowed; }
.challenge-level.coming-soon { filter:saturate(.35) brightness(.72); }
.challenge-level.coming-soon::after { color:#ffe168; text-shadow:0 0 8px #ffe16899; }
.challenge-ad-free-offer { position:relative; z-index:1; display:grid; width:min(148px,calc(100% - 8px)); min-height:58px; place-items:center; align-self:center; justify-self:center; border:2px solid #ffe168; border-radius:8px; background:linear-gradient(145deg,#5b3a0d,#1d1204 68%); color:#fff6c8; cursor:pointer; box-shadow:0 0 16px #ffc92899,inset 0 0 14px #ffe16844; font-family:ui-monospace,monospace; text-align:center; }
.challenge-ad-free-offer strong { font-size:12px; letter-spacing:.08em; }.challenge-ad-free-offer small { color:#fff; font-size:12px; font-weight:900; }.challenge-ad-free-offer:hover,.challenge-ad-free-offer:focus-visible { transform:scale(1.04); box-shadow:0 0 10px #fff,0 0 24px #ffc928cc,inset 0 0 16px #ffe16866; }
.challenge-lock { position:relative; display:grid; width:30px; height:23px; place-items:center; border:2px solid #b99aca; border-radius:4px; background:linear-gradient(145deg,#432b57,#1a1026); box-shadow:inset 0 0 8px #d9b6ff44; }
.challenge-lock::before { content:''; position:absolute; bottom:100%; left:50%; width:16px; height:12px; border:2px solid #b99aca; border-bottom:0; border-radius:10px 10px 0 0; transform:translateX(-50%); }
.challenge-lock b { position:relative; z-index:1; color:#f1dcff; font:900 9px ui-monospace,monospace; letter-spacing:-.08em; }
@keyframes challengeCurrentPulse { 50% { transform:scale(1.08); box-shadow:0 0 12px #fff,0 0 31px #75ef73,inset 0 0 17px #a9ff5877; } }
.challenge-rule-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:15px 0 8px; }
.challenge-rule-button { padding:10px 8px; border:1px solid #34dff0; border-radius:6px; background:#0b2940; color:#bff9ff; font:900 10px ui-monospace,monospace; letter-spacing:.05em; cursor:pointer; box-shadow:0 0 12px #00d9ff33; }
.challenge-rule-button.warpstrike-rule { border-color:#c875ff; color:#e3bdff; background:#241238; box-shadow:0 0 12px #b84dff33; }
.challenge-rule-button[aria-expanded="true"] { background:#1a5169; color:#fff; box-shadow:0 0 15px #00d9ff77; }
.challenge-rule-button.warpstrike-rule[aria-expanded="true"] { background:#4a2168; box-shadow:0 0 15px #b84dff77; }
.challenge-rules-panel[hidden] { display:none; }
.challenge-rules-panel { padding:11px 13px; border:1px solid #34dff066; border-radius:6px; background:#020711c9; color:#bcd4dd; font:700 11px/1.45 ui-monospace,monospace; }
.challenge-rules-panel strong { color:#fff58a; font:900 11px ui-monospace,monospace; letter-spacing:.08em; }
.challenge-rules-panel p { margin:6px 0 0; }
.challenge-map-message { margin:0; color:#bff9ff; }
.challenge-record-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:0 0 14px; }
.challenge-record-grid span { padding:7px 5px; border:1px solid #34dff044; border-radius:5px; background:#0207118c; color:#a9c1cd; text-align:center; font:800 8px ui-monospace,monospace; letter-spacing:.04em; }
.challenge-record-grid b { display:block; margin-top:3px; color:#fff; font-size:15px; text-shadow:0 0 8px #fff; }
.challenge-objective-popover[hidden] { display:none; }
.challenge-objective-popover { position:fixed; z-index:30; width:246px; padding:13px 14px; border:1px solid #72eeff; border-radius:8px; background:linear-gradient(145deg,#132c48f8,#050816fb); color:#dffcff; text-align:left; box-shadow:0 0 24px #00d9ff55,inset 0 0 15px #00d9ff18; pointer-events:none; }
.challenge-objective-popover strong { color:#fff58a; font:900 11px ui-monospace,monospace; letter-spacing:.09em; }
.challenge-objective-popover ul { display:grid; gap:8px; margin:11px 0 0; padding:0; list-style:none; }
.challenge-objective-popover li { display:flex; gap:8px; align-items:center; color:#c0d2dd; font:700 11px/1.3 ui-monospace,monospace; }
.challenge-objective-popover li i { width:15px; height:15px; display:grid; flex:0 0 15px; place-items:center; border:1px solid #698597; border-radius:50%; color:#a2b6c4; font:900 10px/1 ui-monospace,monospace; font-style:normal; }
.challenge-objective-popover li.achieved { color:#dfffd4; }.challenge-objective-popover li.achieved i { border-color:#75ef73; background:#1c5522; color:#c7ff94; box-shadow:0 0 9px #75ef7388; }
.challenge-objective-popover[data-touch="true"] { top:auto; right:14px; bottom:14px; left:14px !important; width:auto; max-height:min(70vh,520px); overflow:auto; pointer-events:auto; }
.objective-close { width:100%; margin-top:13px; padding:9px; border:1px solid #40e9f5; border-radius:5px; background:#08243b; color:#dfffff; font:900 11px ui-monospace,monospace; letter-spacing:.1em; }
.challenge-level-loader[hidden] { display:none; }
.challenge-level-loader { display:grid; min-height:70vh; place-items:center; }
.challenge-loader-core { display:grid; min-width:min(90vw,360px); padding:34px 26px; border:2px solid #36dff0; border-radius:14px; background:radial-gradient(circle at 50% 36%,#163d5c,#050816 68%); color:#dffcff; text-align:center; box-shadow:0 0 32px #00d9ff55,inset 0 0 30px #00d9ff22; }
.challenge-loader-core p,.challenge-loader-core span,.challenge-loader-core i { margin:0; font:800 12px ui-monospace,monospace; letter-spacing:.13em; }
.challenge-loader-core .challenge-loader-objectives { max-width:310px; margin:13px auto 0; color:#dffcff; font-size:9px; line-height:1.45; letter-spacing:.04em; }
.challenge-loader-core p { color:#ffb8e8; text-shadow:0 0 9px #ff5dcb; }.challenge-loader-core strong { margin:10px 0 7px; color:#a9ff58; font:900 68px/1 ui-monospace,monospace; text-shadow:0 0 12px #fff,0 0 28px #75ef73; }.challenge-loader-core span { color:#bff9ff; }.challenge-loader-core i { margin-top:23px; color:#fff58a; font-style:normal; animation:loaderBlink .48s steps(2,end) infinite; }
@keyframes loaderBlink { 50% { opacity:.32; } }
.versus-mode-picker { display:grid; grid-template-columns:1fr 52px 1fr; align-items:center; gap:8px; margin:0 0 8px; color:var(--cyan-soft); font:800 9px ui-monospace,monospace; letter-spacing:.07em; }
.versus-mode-picker > span:first-child { text-align:right; }
.versus-mode-picker > span:last-child { color:#b875ff; }
.versus-mode-switch { position:relative; display:block; width:52px; height:28px; cursor:pointer; }
.versus-mode-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.versus-mode-switch span { position:absolute; inset:0; border:1px solid #37dff6; border-radius:99px; background:#071a2e; box-shadow:0 0 11px #00d9ff44; transition:.2s ease; }
.versus-mode-switch span::after { content:''; position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius:50%; background:#75ef73; box-shadow:0 0 10px #a9ff58; transition:.2s ease; }
.versus-mode-switch input:checked + span { border-color:#cb75ff; background:#281441; box-shadow:0 0 14px #b84dff88; }
.versus-mode-switch input:checked + span::after { transform:translateX(23px); background:#b84dff; box-shadow:0 0 12px #dc9cff; }
.versus-mode-switch input:focus-visible + span { outline:2px solid #fff; outline-offset:3px; }
.mode-description { min-height:31px; margin:0 0 12px; color:#bcd4dd; font:700 10px/1.45 ui-monospace,monospace; }
.room-card label { margin-bottom:7px; color:var(--cyan-soft); font:800 11px ui-monospace,monospace; letter-spacing:.1em; }
.room-card select,.room-card input { width:100%; margin-bottom:12px; padding:11px; border:1px solid var(--cyan); border-radius:5px; background:#020712; color:#fff; font:800 15px ui-monospace,monospace; }
.room-rule { flex:1; color:#bcd4dd; font-size:12px; line-height:1.45; }
.versus-button { width:100%; margin-top:10px; padding:12px 9px; border:1px solid #75ef73; border-radius:6px; background:linear-gradient(135deg,#85d84b,#57b944); color:#031008; font:900 12px ui-monospace,monospace; letter-spacing:.06em; cursor:pointer; box-shadow:0 0 15px #75ef7355; }
.versus-button:hover { filter:brightness(1.15); }
.versus-button.secondary { border-color:var(--cyan); background:linear-gradient(135deg,#11425b,#0d263d); color:#bff9ff; box-shadow:0 0 15px #00d9ff44; }
.challenge-share-prompt { position:absolute; z-index:9; top:63%; left:50%; width:min(78%,440px); box-sizing:border-box; transform:translateX(-50%); padding:9px; border:1px solid var(--cyan); border-radius:7px; background:#071629f2; color:#d8fbff; text-align:center; font:800 11px ui-monospace,monospace; letter-spacing:.07em; box-shadow:0 0 14px #00d9ff66; }
.challenge-share-prompt > div { display:flex; gap:8px; align-items:center; margin-top:9px; }
.challenge-share-prompt .versus-button { flex:1; width:auto; margin:0; }
.challenge-share-prompt .text-button { margin:0; padding:8px; color:#ded0ff; }
.match-card { max-width:980px; margin:20px auto 0; }
.match-card h2 { font-size:28px; }
body[data-versus-view="online"] .room-card .pre-room-settings { display:none; }
.private-lobby { display:grid; grid-template-columns:minmax(300px,1.15fr) minmax(280px,.85fr); gap:18px; margin:18px 0 14px; text-align:left; }
.lobby-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.lobby-section-heading h3,.lobby-panel h3 { margin:0 0 10px; color:#e9fdff; font:900 13px ui-monospace,monospace; letter-spacing:.12em; }
.lobby-section-heading span { color:#74deed; font:800 9px ui-monospace,monospace; letter-spacing:.08em; }
#lobby-grid { display:block; width:min(100%,480px); aspect-ratio:1; margin:auto; border:1px solid #23d9f5; border-radius:7px; background:#06101d; box-shadow:inset 0 0 28px #000b,0 0 20px #00d9ff2e; touch-action:none; }
.lobby-sidebar { display:grid; align-content:start; gap:10px; }
.lobby-panel { padding:12px; border:1px solid #1b8196; border-radius:7px; background:linear-gradient(145deg,#0a1728ee,#040914ee); box-shadow:inset 0 0 15px #00d9ff0c; }
.lobby-player-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.lobby-player-slot { display:grid; grid-template-columns:15px 1fr auto auto auto; gap:8px; align-items:center; min-height:32px; padding:7px 9px; border:1px solid #1c5060; border-radius:5px; color:#dffcff; font:800 11px ui-monospace,monospace; }
.lobby-player-slot.empty { color:#557481; border-style:dashed; }
.lobby-player-swatch { width:11px; height:11px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.lobby-player-badge { color:#fff58a; font-size:9px; letter-spacing:.08em; }
.lobby-player-score { color:#7cecff; }
.lobby-remove-cpu { padding:3px 6px; border:1px solid #ff6077; border-radius:4px; background:#2a0b13; color:#ff9bac; font:900 9px ui-monospace,monospace; }
.lobby-match-settings label { display:block; margin:9px 0 5px; color:#78eafa; font:800 9px ui-monospace,monospace; letter-spacing:.1em; }
.lobby-match-settings select,.lobby-cpu-row select { width:100%; padding:8px; border:1px solid #258da0; border-radius:4px; background:#020712; color:#fff; font:800 11px ui-monospace,monospace; }
.lobby-match-settings select:disabled,.lobby-match-settings input:disabled { opacity:.72; }
.lobby-cpu-row { display:grid; grid-template-columns:1fr auto; gap:7px; }
.lobby-cpu-row .versus-button { min-width:86px; padding:8px; }
.lobby-local-audio > div { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.lobby-local-audio button { padding:8px; border:1px solid #23a4b9; border-radius:5px; background:#082034; color:#dffcff; font:800 10px ui-monospace,monospace; }
body:not(.online-lobby-screen) .private-lobby { display:none; }
.text-button { margin-top:8px; border:0; background:transparent; color:var(--pink); font:800 11px ui-monospace,monospace; letter-spacing:.08em; cursor:pointer; }
.arena-card { max-width:720px; margin:20px auto 0; }
.arena-scoreboard { display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:8px; margin-bottom:12px; }
.arena-scoreboard > div, .arena-scoreboard .score-extra { display:grid; gap:3px; padding:9px; border:1px solid #35ddf068; border-radius:7px; background:#020712b8; min-width:0; }
.arena-scoreboard .score-host { border-color:#89ef58aa; }
.arena-scoreboard .score-guest { border-color:#ff5d7aaa; }
.arena-scoreboard .score-orbs { border-color:#a9ff58aa; }
.arena-scoreboard .score-extra { border-color:#d58cffaa; }
.arena-scoreboard .cpu-outcome { color:#ff91ad; font-size:8px; min-height:1em; }
.arena-scoreboard .cpu-extra-scoreboards { display:contents; }
.arena-scoreboard.has-extra-cpus .score-clock { min-width:0; }
.arena-scoreboard small { color:#bcd4dd; font:800 10px ui-monospace,monospace; letter-spacing:.09em; }
.arena-scoreboard i { color:#fff58a; font-style:normal; }
.arena-scoreboard strong { color:#ecffff; font:900 23px/1 ui-monospace,monospace; text-shadow:0 0 10px #00d9ff; }
.arena-clock strong { color:var(--yellow); }
#versus-game { display:block; width:min(100%,600px); height:auto; margin:0 auto; border:3px solid var(--cyan); border-radius:10px; background:#050a16; box-shadow:0 0 22px #00d9ff66, inset 0 0 25px #00d9ff22; touch-action:none; }
.challenge-game-wrap { position:relative; width:min(100%,600px); margin:0 auto; }
.challenge-game-wrap #versus-game { width:100%; }
.challenge-streamer-layout { position:relative; display:block; }
#level17-intro-text { position:absolute; z-index:3; display:grid; place-items:center; box-sizing:border-box; padding:5px 8px; overflow:hidden; pointer-events:none; white-space:pre-line; color:#dfe9ef; font-family:ui-monospace,monospace; font-weight:800; line-height:1.35; text-align:left; text-shadow:0 0 7px #fff,0 0 13px #b9c8d4; transition:opacity .08s linear; }
#level17-intro-text.level17-objective-text { color:#eaffda; font-weight:900; line-height:1.15; text-align:center; text-shadow:0 0 8px #eaffda,0 0 16px #a9ff58; }
.challenge-input-display { position:absolute; top:50%; z-index:2; display:grid; width:112px; justify-items:center; gap:7px; transform:translateY(-50%); }
.challenge-input-wasd { right:calc(100% + 18px); }
.challenge-input-arrows { left:calc(100% + 18px); }
.challenge-input-display .input-role { margin:0; color:#ff83dd; font:800 10px ui-monospace,monospace; letter-spacing:.13em; text-shadow:0 0 7px #ff5dcb; }
.challenge-input-display .key-grid { display:grid; grid-template-columns:repeat(3,30px); grid-template-rows:repeat(2,27px); gap:4px; justify-content:center; }
.challenge-input-display .input-key { display:grid; width:auto; height:auto; place-items:center; border:1px solid #52627a; border-radius:4px; background:linear-gradient(#202b40,#0b1020); color:#9faec4; font:800 13px ui-monospace,monospace; box-shadow:0 3px 0 #02040a; transition:color .08s,border-color .08s,background .08s,box-shadow .08s,transform .08s; }
.challenge-input-display .key-grid .input-key { width:30px; height:27px; }
.challenge-input-display .key-up,.challenge-input-display .key-w { grid-column:2; }
.challenge-input-display .key-left,.challenge-input-display .key-a { grid-column:1; grid-row:2; }
.challenge-input-display .key-down,.challenge-input-display .key-s { grid-column:2; grid-row:2; }
.challenge-input-display .key-right,.challenge-input-display .key-d { grid-column:3; grid-row:2; }
.challenge-input-display .input-key.active { border-color:#fff58a; background:#0e7187; color:#fff; transform:translateY(2px); box-shadow:0 1px 0 #02040a,0 0 8px #fff,0 0 18px #00d9ff,inset 0 0 8px #fff58a88; }
.challenge-input-display .space-key { grid-column:1/-1; width:96px; height:28px; margin:3px auto 0; font-size:10px; letter-spacing:.14em; }
.challenge-input-display .input-key.released { animation:challengeInputRelease .22s ease-out; }
@keyframes challengeInputRelease { from { border-color:#fff58a; color:#fff; box-shadow:0 0 15px #00d9ff; } }
.arena-status { min-height:20px; margin:12px 0 5px; color:#dffcff; font:800 12px ui-monospace,monospace; letter-spacing:.08em; text-align:center; }
.arena-help { margin:9px auto 0; color:var(--muted); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.04em; text-align:center; }
.versus-controls { display:none; grid-template-columns:repeat(3,52px); justify-content:center; gap:5px; margin:12px auto 4px; }
.versus-controls button { height:45px; border:1px solid var(--cyan); border-radius:7px; background:#0b2940; color:#dffcff; font-size:20px; box-shadow:0 0 11px #00d9ff33; touch-action:manipulation; }
.versus-controls button:first-child { grid-column:2; }
.warp-controls { margin:13px auto 5px; color:#cf9dff; font:800 10px ui-monospace,monospace; letter-spacing:.1em; text-align:center; }
.warp-controls > div { display:grid; grid-template-columns:repeat(3,44px); justify-content:center; gap:4px; margin-top:6px; }
.warp-controls button { height:39px; border:1px solid #c27bff; border-radius:7px; background:#24133c; color:#efe0ff; font-size:17px; box-shadow:0 0 10px #b84dff55; touch-action:manipulation; }
.warp-controls button:first-child { grid-column:2; }
.fire-button { display:block; margin:12px auto 0; padding:9px 15px; border:1px solid #5de9ff; border-radius:6px; background:linear-gradient(135deg,#144b65,#10253e); color:#edfcff; font:900 11px ui-monospace,monospace; letter-spacing:.1em; box-shadow:0 0 14px #00d9ff77; }
.fire-button[hidden] { display:none; }
/* Desktop Challenge uses the live keyboard visualiser beside the board. The
   separate touch-only Warp Exit and Fire controls would duplicate it. */
body[data-versus-view="challenge"] .warp-controls,
body[data-versus-view="challenge"] .fire-button { display:none !important; }
.forfeit-button { display:block; margin:12px auto 0; color:#ff8299; }
.back-to-lobby-button { display:block; margin:12px auto 0; color:#7ff4ff; }
.back-to-lobby-button[hidden] { display:none; }
.versus-footnote { max-width:700px; margin:22px auto 0; color:var(--muted); font-size:12px; }
@media (max-width:820px) { .versus-grid { grid-template-columns:1fr 1fr; } .profile-card { grid-column:1 / -1; } }
@media (max-width:860px) { .challenge-input-display { display:none; } }
@media (max-width:860px) {
  body[data-versus-view="challenge"] .warp-controls:not([hidden]) { display:block !important; }
  body[data-versus-view="challenge"] .fire-button:not([hidden]) { display:block !important; }
}

/* The two keyboard groups remain transparent to the established desktop
   positioning. Tablet landscape turns them into one optional streamer panel. */
.challenge-streamer-inputs { display:contents; }
.challenge-streamer-inputs[hidden] { display:none !important; }
.challenge-streamer-close { display:none; }

/* Challenge tablet landscape mirrors Solo: a large central board with the
   physical controls anchored to the screen corners. Portrait is intentionally
   excluded so its existing stacked layout remains unchanged. */
@media (min-width:700px) and (max-width:1400px) and (orientation:landscape) and (pointer:coarse) {
  body[data-versus-view="challenge"].challenge-level-active .versus-shell {
    width:100%;
    max-width:none;
    min-height:100dvh;
    padding:4px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  body[data-versus-view="challenge"].challenge-level-active .arena-card {
    width:min(98vw, 620px);
    max-width:620px;
    margin:0 auto;
    padding:6px 10px 8px;
  }
  body[data-versus-view="challenge"].challenge-level-active .arena-scoreboard { margin-bottom:6px; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-game-wrap { width:min(560px, calc(100dvh - 115px), calc(100vw - 380px)); max-width:560px; }
  body[data-versus-view="challenge"].challenge-level-active #versus-game { width:100%; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-touch-controls,
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"].challenge-level-active .challenge-touch-controls {
    --touch-pad-size:clamp(112px,17vmin,148px);
    --touch-stick-size:clamp(78px,12vmin,108px);
    --touch-fire-size:clamp(76px,12vmin,104px);
    position:fixed;
    z-index:14;
    right:0;
    bottom:0;
    left:0;
    display:flex;
    width:100vw;
    height:auto;
    min-height:calc(var(--touch-pad-size) + 38px + max(12px, env(safe-area-inset-bottom)) + 1cm);
    margin:0;
    padding:0 max(18px, env(safe-area-inset-right)) calc(max(12px, env(safe-area-inset-bottom)) + 1cm) max(18px, env(safe-area-inset-left));
    align-items:flex-end;
    justify-content:space-between;
    pointer-events:none;
  }
  body[data-versus-view="challenge"].challenge-level-active .challenge-touch-controls > * { pointer-events:auto; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-touch-controls .touch-control-stack,
  body[data-versus-view="challenge"].challenge-level-active .challenge-touch-controls .challenge-fire-touch { align-self:flex-end; margin-top:0; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-touch-controls .challenge-fire-touch { width:var(--touch-fire-size); height:var(--touch-fire-size); margin:0 10px 5px; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-streamer-inputs {
    position:fixed;
    z-index:40;
    top:max(70px,13dvh);
    right:max(10px,env(safe-area-inset-right));
    display:grid;
    grid-template-columns:repeat(2,112px);
    gap:8px;
    width:auto;
    padding:28px 8px 10px;
    border:1px solid #00d9ff88;
    border-radius:9px;
    background:#050a16e8;
    box-shadow:0 0 18px #00d9ff55,inset 0 0 14px #00d9ff12;
    transform:scale(.82);
    transform-origin:top right;
  }
  body[data-versus-view="challenge"].challenge-level-active .challenge-streamer-inputs[hidden] { display:none !important; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-input-display,
  html.android-app-shell body[data-versus-view="challenge"].challenge-level-active .challenge-input-display { position:static; display:grid !important; transform:none; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-streamer-close {
    position:absolute;
    top:3px;
    right:4px;
    display:grid;
    width:25px;
    height:25px;
    margin:0;
    padding:0;
    place-items:center;
    border:1px solid #ff74c9aa;
    border-radius:50%;
    background:#1c0a20;
    color:#ffd8f1;
    font:900 18px/1 system-ui,sans-serif;
    box-shadow:0 0 9px #ff4fc777;
    touch-action:manipulation;
  }
  body[data-versus-view="challenge"].challenge-level-active .arena-status { margin:6px 0 2px; }
  body[data-versus-view="challenge"].challenge-level-active .forfeit-button { margin:5px auto 0; }
}

/* The waiting grid is keyboard/swipe-only on desktop. Touch devices reuse
   the exact D-pad or joystick selected for Solo and Challenge. */
@media (max-width:1200px) and (pointer:coarse) {
  body[data-versus-view="online"] .lobby-touch-controls,
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .lobby-touch-controls {
    grid-template-columns:var(--touch-pad-size);
    grid-template-rows:auto;
    width:var(--touch-pad-size);
    justify-content:center;
    margin:10px auto 0;
  }
  body[data-versus-view="online"] .lobby-touch-controls > .touch-control-stack:first-child,
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .lobby-touch-controls > .touch-control-stack:first-child {
    grid-column:1;
    grid-row:1;
    align-self:start;
  }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .lobby-touch-controls { width:var(--touch-stick-size); grid-template-columns:var(--touch-stick-size); }
}
.challenge-game-wrap .test-ad-revive { position:absolute; z-index:8; bottom:8%; left:50%; transform:translateX(-50%); border-color:#e3a0ff; background:#6f3fbb; color:#fff; box-shadow:0 0 12px #d36dff99; }
.challenge-game-wrap .test-ad-revive.watch-ad-option { display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.challenge-game-wrap .test-ad-revive[hidden] { display:none !important; }
.challenge-game-wrap .test-ad-revive.watch-ad-option::before { content:""; width:38px; height:28px; flex:0 0 38px; background:url('../icons/watch-ad-clapperboard.svg') center/contain no-repeat; filter:drop-shadow(0 0 4px #e3a0ff99); }
@media (max-width:700px) { .challenge-objective-popover:not([data-touch="true"]) { display:none !important; } }
@media (max-width:540px) { .versus-shell { width:min(100% - 22px,1020px); padding-top:17px; } .versus-grid { grid-template-columns:1fr; } .profile-card { grid-column:auto; } .arena-card { padding:12px 8px; } .arena-scoreboard { gap:5px; } .arena-scoreboard.has-extra-cpus { gap:4px; } .arena-scoreboard small { font-size:8px; letter-spacing:.04em; } .arena-scoreboard strong { font-size:18px; } .versus-controls { display:grid; } .challenge-map-card { padding:15px 11px; } .challenge-map-heading { align-items:flex-start; } .challenge-map-heading h2 { font-size:18px; } .quick-play-button { min-width:112px; padding:10px 7px; font-size:10px; } .challenge-path { grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:repeat(25,70px); height:68vh; min-height:460px; padding:15px 13px; } .challenge-path-lines { top:0; right:auto; bottom:auto; left:0; height:auto; } .challenge-level { width:52px; height:52px; font-size:13px; } .challenge-level::after { top:calc(100% + 2px); font-size:6px; } }

/* Challenge reuses the same three-part mobile controller as Solo. */
.challenge-touch-controls { display:none; }
/* Challenge's touch controller already supplies the D-pad, Warp Exit stick,
   and logo fire button. Never reintroduce the obsolete desktop fallbacks. */
body[data-versus-view="challenge"] .warp-controls,
body[data-versus-view="challenge"] .fire-button { display:none !important; }
.challenge-fire-touch[hidden] { display:none; }
@media (max-width:1200px) and (pointer:coarse) {
  body[data-versus-view="challenge"] .challenge-touch-controls {
    --touch-pad-size:clamp(132px,36vw,168px);
    --touch-fire-size:clamp(92px,25vw,118px);
    --touch-stick-size:clamp(96px,25vw,116px);
    display:grid;
    grid-template-columns:var(--touch-pad-size) var(--touch-fire-size) var(--touch-stick-size);
    width:100%;
    margin:8px auto 0;
    padding:0 2px 3px;
    align-items:center;
    justify-content:space-between;
    column-gap:clamp(4px,1.4vw,10px);
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
  }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-control-stack { display:grid; justify-items:center; gap:5px; }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad { position:relative; width:var(--touch-pad-size); height:var(--touch-pad-size); filter:drop-shadow(0 0 7px #27e7ff55); }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-button { position:absolute; display:grid; width:34%; height:34%; margin:0; padding:0; place-items:center; border:1px solid #73eaff; border-radius:5px; background:linear-gradient(#1d2941ee,#080d1aee); box-shadow:inset 0 0 10px #27e7ff27,0 0 0 2px #07101e; touch-action:none; }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-button::before { position:absolute; inset:-5px; content:""; }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-button::after { width:0; height:0; content:""; border:calc(var(--touch-pad-size) * .052) solid transparent; opacity:.72; }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-button.up { top:0; left:33%; }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-button.right { top:33%; right:0; }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-button.down { bottom:0; left:33%; }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-button.left { top:33%; left:0; }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-button.up::after { border-bottom-color:#bff9ff; transform:translateY(-28%); }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-button.right::after { border-left-color:#bff9ff; transform:translateX(28%); }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-button.down::after { border-top-color:#bff9ff; transform:translateY(28%); }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-button.left::after { border-right-color:#bff9ff; transform:translateX(-28%); }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-button.active { border-color:#fff; background:#fff58a; filter:brightness(1.35); transform:scale(.91); box-shadow:inset 0 0 14px #fff,0 0 17px #fff,0 0 25px #00d9ff; }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad-center { position:absolute; top:33%; left:33%; width:34%; height:34%; border-radius:4px; background:#0b1222; box-shadow:inset 0 0 12px #27e7ff22; }
  body[data-versus-view="challenge"] .challenge-touch-controls .challenge-fire-touch { display:block; align-self:center; width:var(--touch-fire-size); height:var(--touch-fire-size); margin:0; padding:3px; object-fit:contain; filter:drop-shadow(0 0 9px #00d9ff99); cursor:pointer; touch-action:none; }
  body[data-versus-view="challenge"] .challenge-touch-controls .challenge-fire-touch:active,
  body[data-versus-view="challenge"] .challenge-touch-controls .challenge-fire-touch.active { transform:scale(.94); filter:brightness(1.65) drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px #00d9ff); }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-joystick { position:relative; width:var(--touch-stick-size); height:var(--touch-stick-size); margin:0; border:1px solid #27e7ff8c; border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 13%,#27e7ff13 14% 15%),#06101de8; box-shadow:0 0 10px #27e7ff42,inset 0 0 12px #000; touch-action:none; }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-stick-knob { position:absolute; top:14%; left:14%; width:72%; height:72%; border:2px solid #efa9ff; border-radius:50%; background:radial-gradient(circle at 36% 28%,#4a435b,#10111a 65%); box-shadow:0 4px 9px #000b,0 0 8px #ff55da87,inset 0 0 7px #fff2; pointer-events:none; will-change:transform; }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-warp-label { position:relative; top:15px; color:#8ff7ff; font:800 clamp(9px,2vw,11px) ui-monospace,monospace; letter-spacing:.12em; text-shadow:0 0 7px #00d9ff; }
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-steer-joystick,
  body[data-versus-view="challenge"] .challenge-touch-controls .touch-steer-label { display:none; }
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls .touch-dpad { display:none; }
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls .touch-steer-joystick,
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls .touch-steer-label { display:block; }
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls {
    grid-template-columns:var(--touch-stick-size) var(--touch-fire-size) var(--touch-stick-size);
    align-items:start;
  }
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls .touch-control-stack,
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls .challenge-fire-touch { align-self:start; }
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls .challenge-fire-touch { margin-top:calc((var(--touch-stick-size) - var(--touch-fire-size)) / 2); }
  body[data-versus-view="challenge"].challenge-level-active .challenge-input-display { display:none !important; }
  html.android-app-shell .challenge-input-display { display:none !important; }
  body[data-versus-view="challenge"] .arena-help { display:none; }
  body[data-versus-view="challenge"] .versus-controls,
  body[data-versus-view="challenge"] .warp-controls,
  body[data-versus-view="challenge"] .fire-button { display:none !important; }
}

@media (min-width:700px) and (max-width:1200px) and (pointer:coarse) {
  body[data-versus-view="online"] .challenge-touch-controls { grid-template-columns:var(--touch-pad-size) 1fr var(--touch-stick-size); grid-template-rows:auto auto; width:min(100%,680px); align-items:end; }
  body[data-versus-view="online"] .challenge-touch-controls > .touch-control-stack:first-child { grid-column:1; grid-row:1 / span 2; align-self:end; }
  body[data-versus-view="online"] .challenge-touch-controls > .challenge-fire-touch { grid-column:3; grid-row:1; align-self:end; justify-self:center; margin-bottom:8px; }
  body[data-versus-view="online"] .challenge-touch-controls > .touch-control-stack:last-child { grid-column:3; grid-row:2; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls { grid-template-columns:var(--touch-stick-size) var(--touch-fire-size) var(--touch-stick-size); grid-template-rows:auto; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls > .touch-control-stack:first-child, html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls > .challenge-fire-touch, html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls > .touch-control-stack:last-child { grid-row:1; align-self:start; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls > .touch-control-stack:first-child { grid-column:1; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls > .challenge-fire-touch { grid-column:2; justify-self:center; margin:calc((var(--touch-stick-size) - var(--touch-fire-size)) / 2) 0 0; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls > .touch-control-stack:last-child { grid-column:3; }
}

/* Final tablet-landscape Challenge override. It intentionally follows every
   shared phone/tablet rule; portrait receives none of these declarations. */
@media (min-width:700px) and (max-width:1400px) and (orientation:landscape) and (pointer:coarse) {
  body[data-versus-view="challenge"].challenge-level-active .versus-shell { width:100%; max-width:none; min-height:100dvh; padding:4px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  body[data-versus-view="challenge"].challenge-level-active .arena-card { width:min(98vw,620px); max-width:620px; margin:0 auto; padding:6px 10px 8px; }
  body[data-versus-view="challenge"].challenge-level-active .arena-scoreboard { margin-bottom:6px; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-game-wrap { width:min(560px,calc(100dvh - 115px),calc(100vw - 380px)); max-width:560px; }
  body[data-versus-view="challenge"].challenge-level-active #versus-game { width:100%; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-touch-controls,
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"].challenge-level-active .challenge-touch-controls {
    --touch-pad-size:clamp(112px,17vmin,148px); --touch-stick-size:clamp(78px,12vmin,108px); --touch-fire-size:clamp(76px,12vmin,104px);
    position:fixed; z-index:14; right:0; bottom:0; left:0; display:grid; width:100vw; height:auto;
    min-height:calc(var(--touch-pad-size) + 38px + max(12px,env(safe-area-inset-bottom)) + 1cm);
    margin:0; padding:0 max(18px,env(safe-area-inset-right)) calc(max(12px,env(safe-area-inset-bottom)) + 1cm) max(18px,env(safe-area-inset-left));
    grid-template-columns:var(--touch-pad-size) 1fr var(--touch-stick-size); grid-template-rows:auto auto;
    align-items:end; justify-content:space-between; pointer-events:none;
  }
  body[data-versus-view="challenge"].challenge-level-active .challenge-touch-controls > * { pointer-events:auto; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-touch-controls > .touch-control-stack:first-child { grid-column:1; grid-row:1 / span 2; align-self:end; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-touch-controls > .challenge-fire-touch { grid-column:3; grid-row:1; align-self:end; justify-self:center; width:var(--touch-fire-size); height:var(--touch-fire-size); margin:0 0 8px; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-touch-controls > .touch-control-stack:last-child { grid-column:3; grid-row:2; align-self:end; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-streamer-inputs {
    position:fixed; z-index:40; top:max(70px,13dvh); right:max(10px,env(safe-area-inset-right)); display:grid;
    grid-template-columns:repeat(2,112px); gap:8px; width:auto; padding:28px 8px 10px; border:1px solid #00d9ff88;
    border-radius:9px; background:#050a16e8; box-shadow:0 0 18px #00d9ff55,inset 0 0 14px #00d9ff12;
    transform:scale(.82); transform-origin:top right;
  }
  body[data-versus-view="challenge"].challenge-level-active .challenge-streamer-inputs[hidden] { display:none !important; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-input-display,
  html.android-app-shell body[data-versus-view="challenge"].challenge-level-active .challenge-input-display { position:static; display:grid !important; transform:none; }
  body[data-versus-view="challenge"].challenge-level-active .challenge-streamer-close {
    position:absolute; top:3px; right:4px; display:grid; width:25px; height:25px; margin:0; padding:0; place-items:center;
    border:1px solid #ff74c9aa; border-radius:50%; background:#1c0a20; color:#ffd8f1; font:900 18px/1 system-ui,sans-serif;
    box-shadow:0 0 9px #ff4fc777; touch-action:manipulation;
  }
  body[data-versus-view="challenge"].challenge-level-active .arena-status { margin:6px 0 2px; }
  body[data-versus-view="challenge"].challenge-level-active .forfeit-button { margin:5px auto 0; }
}

/* Waiting-lobby steering matches Solo/Challenge on touch hardware and stays
   hidden on desktop. Kept last so the arena's iPad grid cannot override it. */
@media (max-width:1200px) and (pointer:coarse) {
  body[data-versus-view="online"] .lobby-touch-controls,
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .lobby-touch-controls {
    grid-template-columns:var(--touch-pad-size);
    grid-template-rows:auto;
    width:var(--touch-pad-size);
    justify-content:center;
    margin:10px auto 0;
  }
  body[data-versus-view="online"] .lobby-touch-controls > .touch-control-stack:first-child,
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .lobby-touch-controls > .touch-control-stack:first-child {
    grid-column:1;
    grid-row:1;
    align-self:start;
  }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .lobby-touch-controls {
    width:var(--touch-stick-size);
    grid-template-columns:var(--touch-stick-size);
  }
}

/* A match is a focused screen. The lobby remains available before/after it,
   but never competes with the grid and controls on a phone or iPad. */
body[data-versus-view="online"].online-game-screen .versus-back,
body[data-versus-view="online"].online-game-screen .versus-logo-link,
body[data-versus-view="online"].online-game-screen #versus-eyebrow,
body[data-versus-view="online"].online-game-screen #versus-heading,
body[data-versus-view="online"].online-game-screen #versus-intro,
body[data-versus-view="online"].online-game-screen .versus-audio-controls,
body[data-versus-view="online"].online-game-screen .versus-grid,
body[data-versus-view="online"].online-game-screen .match-card,
body[data-versus-view="online"].online-game-screen .versus-footnote { display:none !important; }
body[data-versus-view="online"].online-game-screen .arena-card { margin-top:10px; }
/* Creating or joining a room opens a dedicated lobby view. The settings page
   returns only after the player leaves the room. */
body[data-versus-view="online"].online-lobby-screen .versus-back,
body[data-versus-view="online"].online-lobby-screen .versus-logo-link,
body[data-versus-view="online"].online-lobby-screen #versus-eyebrow,
body[data-versus-view="online"].online-lobby-screen #versus-heading,
body[data-versus-view="online"].online-lobby-screen #versus-intro,
body[data-versus-view="online"].online-lobby-screen .versus-audio-controls,
body[data-versus-view="online"].online-lobby-screen .versus-grid,
body[data-versus-view="online"].online-lobby-screen .arena-card,
body[data-versus-view="online"].online-lobby-screen .versus-footnote { display:none !important; }
body[data-versus-view="online"].online-lobby-screen .match-card { margin-top:10px; }
@media (max-width:760px) { .private-lobby { grid-template-columns:1fr; } .lobby-sidebar { grid-template-columns:1fr; } #lobby-grid { width:min(100%,420px); } }
@media (max-width:390px) and (pointer:coarse) { body[data-versus-view="challenge"] .challenge-touch-controls { --touch-pad-size:clamp(124px,35vw,138px); --touch-stick-size:clamp(90px,24vw,100px); --touch-fire-size:clamp(86px,24vw,100px); } }

/* Online matches use the exact same phone controller as Solo and Challenge.
   Keep this separate from the desktop key-grid so it cannot reappear on a
   phone just because the player joined an online room. */
@media (max-width:1200px) and (pointer:coarse) {
  body[data-versus-view="online"] .challenge-touch-controls { --touch-pad-size:clamp(132px,36vw,168px); --touch-fire-size:clamp(92px,25vw,118px); --touch-stick-size:clamp(96px,25vw,116px); display:grid; grid-template-columns:var(--touch-pad-size) var(--touch-fire-size) var(--touch-stick-size); width:100%; margin:8px auto 0; padding:0 2px 3px; align-items:center; justify-content:space-between; column-gap:clamp(4px,1.4vw,10px); touch-action:none; user-select:none; -webkit-user-select:none; }
  body[data-versus-view="online"] .challenge-touch-controls .touch-control-stack { display:grid; justify-items:center; gap:5px; }
  body[data-versus-view="online"] .challenge-touch-controls .touch-dpad { position:relative; display:block; width:var(--touch-pad-size); height:var(--touch-pad-size); filter:drop-shadow(0 0 7px #27e7ff55); }
  body[data-versus-view="online"] .challenge-touch-controls .touch-dpad-button { position:absolute; display:grid; width:34%; height:34%; margin:0; padding:0; place-items:center; border:1px solid #73eaff; border-radius:5px; background:linear-gradient(#1d2941ee,#080d1aee); box-shadow:inset 0 0 10px #27e7ff27,0 0 0 2px #07101e; touch-action:none; }
  body[data-versus-view="online"] .challenge-touch-controls .touch-dpad-button::after { width:0; height:0; content:""; border:calc(var(--touch-pad-size) * .052) solid transparent; opacity:.72; }
  body[data-versus-view="online"] .challenge-touch-controls .touch-dpad-button.up { top:0; left:33%; } body[data-versus-view="online"] .challenge-touch-controls .touch-dpad-button.right { top:33%; right:0; } body[data-versus-view="online"] .challenge-touch-controls .touch-dpad-button.down { bottom:0; left:33%; } body[data-versus-view="online"] .challenge-touch-controls .touch-dpad-button.left { top:33%; left:0; }
  body[data-versus-view="online"] .challenge-touch-controls .touch-dpad-button.up::after { border-bottom-color:#bff9ff; transform:translateY(-28%); } body[data-versus-view="online"] .challenge-touch-controls .touch-dpad-button.right::after { border-left-color:#bff9ff; transform:translateX(28%); } body[data-versus-view="online"] .challenge-touch-controls .touch-dpad-button.down::after { border-top-color:#bff9ff; transform:translateY(28%); } body[data-versus-view="online"] .challenge-touch-controls .touch-dpad-button.left::after { border-right-color:#bff9ff; transform:translateX(-28%); }
  body[data-versus-view="online"] .challenge-touch-controls .touch-dpad-center { position:absolute; top:33%; left:33%; width:34%; height:34%; border-radius:4px; background:#0b1222; box-shadow:inset 0 0 12px #27e7ff22; }
  body[data-versus-view="online"] .challenge-touch-controls .challenge-fire-touch { display:block; align-self:center; width:var(--touch-fire-size); height:var(--touch-fire-size); margin:0; padding:3px; object-fit:contain; filter:drop-shadow(0 0 9px #00d9ff99); cursor:pointer; touch-action:none; }
  body[data-versus-view="online"] .challenge-touch-controls .touch-joystick { position:relative; display:block; width:var(--touch-stick-size); height:var(--touch-stick-size); margin:0; border:1px solid #27e7ff8c; border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 13%,#27e7ff13 14% 15%),#06101de8; box-shadow:0 0 10px #27e7ff42,inset 0 0 12px #000; touch-action:none; }
  body[data-versus-view="online"] .challenge-touch-controls .touch-stick-knob { position:absolute; top:14%; left:14%; width:72%; height:72%; border:2px solid #efa9ff; border-radius:50%; background:radial-gradient(circle at 36% 28%,#4a435b,#10111a 65%); box-shadow:0 4px 9px #000b,0 0 8px #ff55da87,inset 0 0 7px #fff2; pointer-events:none; }
  body[data-versus-view="online"] .challenge-touch-controls .touch-warp-label { position:relative; top:15px; color:#8ff7ff; font:800 clamp(9px,2vw,11px) ui-monospace,monospace; letter-spacing:.12em; text-shadow:0 0 7px #00d9ff; }
  body[data-versus-view="online"] .challenge-touch-controls .touch-steer-joystick, body[data-versus-view="online"] .challenge-touch-controls .touch-steer-label { display:none; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls .touch-dpad { display:none; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls .touch-steer-joystick, html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls .touch-steer-label { display:block; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls { grid-template-columns:var(--touch-stick-size) var(--touch-fire-size) var(--touch-stick-size); align-items:start; }
  body[data-versus-view="online"] .versus-controls, body[data-versus-view="online"] .warp-controls, body[data-versus-view="online"] .fire-button, body[data-versus-view="online"] .arena-help { display:none !important; }
}

/* iPad mirrors Solo: D-pad on the left, WarpStrike above the right joystick. */
@media (min-width:700px) and (pointer:coarse) {
  body[data-versus-view="challenge"] .challenge-touch-controls {
    grid-template-columns:var(--touch-pad-size) 1fr var(--touch-stick-size);
    grid-template-rows:auto auto;
    width:min(100%,680px);
    align-items:end;
  }
  body[data-versus-view="challenge"] .challenge-touch-controls > .touch-control-stack:first-child { grid-column:1; grid-row:1 / span 2; align-self:end; }
  body[data-versus-view="challenge"] .challenge-touch-controls > .challenge-fire-touch { grid-column:3; grid-row:1; align-self:end; justify-self:center; margin-bottom:8px; }
  body[data-versus-view="challenge"] .challenge-touch-controls > .touch-control-stack:last-child { grid-column:3; grid-row:2; }
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls { grid-template-columns:var(--touch-stick-size) var(--touch-fire-size) var(--touch-stick-size); grid-template-rows:auto; }
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls > .touch-control-stack:first-child,
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls > .challenge-fire-touch,
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls > .touch-control-stack:last-child { grid-row:1; align-self:start; }
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls > .touch-control-stack:first-child { grid-column:1; }
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls > .challenge-fire-touch { grid-column:2; justify-self:center; margin:calc((var(--touch-stick-size) - var(--touch-fire-size)) / 2) 0 0; }
  html[data-touch-steering="joystick"] body[data-versus-view="challenge"] .challenge-touch-controls > .touch-control-stack:last-child { grid-column:3; }
}

/* Keep the online controller in the same iPad arrangement as Challenge.
   This comes last so it wins over the compact phone layout above. */
@media (min-width:700px) and (max-width:1200px) and (pointer:coarse) {
  body[data-versus-view="online"] .lobby-touch-controls { grid-template-columns:var(--touch-pad-size) !important; grid-template-rows:auto !important; width:var(--touch-pad-size) !important; justify-content:center; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .lobby-touch-controls { grid-template-columns:var(--touch-stick-size) !important; width:var(--touch-stick-size) !important; }
  body[data-versus-view="online"] .lobby-touch-controls > .touch-control-stack:first-child,
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .lobby-touch-controls > .touch-control-stack:first-child { grid-column:1 !important; grid-row:1 !important; align-self:start; }
  body[data-versus-view="online"] .challenge-touch-controls { grid-template-columns:var(--touch-pad-size) 1fr var(--touch-stick-size); grid-template-rows:auto auto; width:min(100%,680px); align-items:end; }
  body[data-versus-view="online"] .challenge-touch-controls > .touch-control-stack:first-child { grid-column:1; grid-row:1 / span 2; align-self:end; }
  body[data-versus-view="online"] .challenge-touch-controls > .challenge-fire-touch { grid-column:3; grid-row:1; align-self:end; justify-self:center; margin-bottom:8px; }
  body[data-versus-view="online"] .challenge-touch-controls > .touch-control-stack:last-child { grid-column:3; grid-row:2; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls { grid-template-columns:var(--touch-stick-size) var(--touch-fire-size) var(--touch-stick-size); grid-template-rows:auto; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls > .touch-control-stack:first-child,
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls > .challenge-fire-touch,
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls > .touch-control-stack:last-child { grid-row:1; align-self:start; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls > .touch-control-stack:first-child { grid-column:1; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls > .challenge-fire-touch { grid-column:2; justify-self:center; margin:calc((var(--touch-stick-size) - var(--touch-fire-size)) / 2) 0 0; }
  html[data-touch-steering="joystick"] body[data-versus-view="online"] .challenge-touch-controls > .touch-control-stack:last-child { grid-column:3; }
}