/* Local arcade expansion */
#library{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gamecard{display:flex;flex-direction:column;transition:transform .18s,border-color .18s}.gamecard:hover{transform:translateY(-4px);border-color:#707466}.cardbody{display:flex;flex-direction:column;flex:1}.cardbody h3{font-size:25px}.cardbody>p{min-height:68px}.cardfoot{margin-top:auto;padding-top:16px}.cardfoot small{line-height:1.7}.cardbody details{margin-bottom:12px;color:#b6b9c2;font-size:13px}.cardbody summary{cursor:pointer;width:fit-content}.cardbody details p{font-size:13px;line-height:1.6}.art{height:170px;isolation:isolate}.rally .art{background:linear-gradient(125deg,#7ba458 0 22%,#ece3b1 22% 24%,#384653 24% 76%,#ece3b1 76% 78%,#7ba458 78%)}.rally .art:after{content:'';position:absolute;width:200%;border-top:4px dashed #f9f4d070;transform:rotate(-55deg);z-index:-1}.cardcar{height:126px;width:auto;filter:drop-shadow(7px 8px 0 #0003);transform:rotate(34deg)}.cardcar.one{margin-right:30px;transform:translateY(15px) rotate(34deg)}.cardcar.two{transform:translateY(-20px) rotate(34deg)}.blast .art{background:repeating-conic-gradient(#605574 0% 25%,#514763 0% 50%) 0/70px 70px}.cardperson{height:125px;width:auto;filter:drop-shadow(4px 7px 0 #0004)}.cardbomb{font-size:105px!important;color:#ffbc58!important;text-shadow:0 0 28px #ff9843!important;transform:rotate(8deg)!important;margin-left:25px}.tiles .art{background:linear-gradient(135deg,#183943,#27536a)}.cardtiles{font-size:66px;line-height:.8;letter-spacing:6px;transform:rotate(-13deg);color:#f9ce63;text-shadow:5px 6px #162e43;margin-right:28px}.tiles .cardperson{transform:translateY(-7px)}.trivia .art{background:radial-gradient(ellipse,#a28ec6,#5e4d79 55%,#3c3454)}.trivia .art>span{color:#e0ceff}.dash .art{background:repeating-linear-gradient(135deg,transparent 0 25px,#d8ff9c20 25px 27px),#35492a}.blast button{background:#ffc483}.trivia button{background:#d5b9ff}.tiles button{background:#85e2e5}.in-game .intro,.in-game .pair,.in-game .players-panel,.in-game #shelf-title{display:none}.in-game #host{display:block;padding-top:24px}.in-game #arena{padding:18px 22px}.in-game footer{margin-top:24px}.in-game #error{margin-top:10px}#gamecanvas{display:block;width:100%;height:auto;aspect-ratio:5/3;border-radius:14px;margin:16px 0;background:#162330}.arcade-players{display:flex;gap:10px;flex-wrap:wrap}.mini-player{display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid #41444c;border-radius:8px;font-size:12px}.mini-player i{width:11px;height:11px;border-radius:50%;background:var(--player)}.mini-player b{font-size:10px;color:#b7bdc1}.mini-player.out{opacity:.45;text-decoration:line-through}.playhint{font-size:12px;line-height:1.6;margin-bottom:0}.rules{max-width:700px;margin:0 auto 25px;font-size:19px}.adaptive{background:#302e41;border:1px solid #554a6b;border-radius:13px;padding:20px;margin-top:22px;display:grid;gap:10px}.adaptive strong{font-size:26px}.adaptive>span:last-of-type,.adaptive small{font-size:13px;color:#cac4d7}.accuracy-track{height:12px;background:#191b22;border-radius:8px;position:relative;margin:4px 0}.accuracy-track i{display:block;background:#c2f76e;height:100%;border-radius:8px}.accuracy-track b{position:absolute;left:50%;top:-4px;height:20px;border-left:2px solid #fff}.phone #controller{padding-bottom:15px}.phone #pad{user-select:none;-webkit-user-select:none}.phone [data-control]{touch-action:none;user-select:none;-webkit-user-select:none}.phone [data-control].pressed{filter:brightness(1.3);transform:translateY(3px);box-shadow:none}.dpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,75px);gap:8px;margin:20px auto;width:min(310px,100%)}.dpad button{background:#3f485b;color:#fff;font-size:28px;border:1px solid #58657b;box-shadow:0 4px #11161e;padding:0}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad span{grid-area:2/2;display:grid;place-items:center;color:#617085;font-size:30px}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}.steer{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}.steer button{background:#3f485b;color:#fff;min-height:140px;font-size:50px;border:1px solid #56647a;box-shadow:0 6px #11161e}.steer small{display:block;font-size:12px;letter-spacing:3px;margin-top:8px}.boost{display:block;width:100%;padding:25px;font-size:23px;box-shadow:0 5px #6f9636}.bombbutton{background:#ffc483;box-shadow:0 5px #936435}.phone meter{display:block;width:100%;height:24px;margin-top:17px}.controller-help{font-size:12px;text-align:center;color:#a8adb5}.targetcue{padding:18px;text-align:center;font-size:20px;font-weight:800;border:1px solid #546171;border-radius:12px}.targetcue[data-color="0"]{background:#f07b79;color:#1a2029}.targetcue[data-color="1"]{background:#78b6f4;color:#1a2029}.targetcue[data-color="2"]{background:#f4ce67;color:#1a2029}.targetcue[data-color="3"]{background:#75d7b7;color:#1a2029}#out-message{font-size:24px;padding:50px 15px;text-align:center}footer a,.credits a{color:#c2f76e}.credits{max-width:850px;padding-bottom:70px}.credits h1{font-size:52px;letter-spacing:-2px;line-height:1.05}.credits h2{margin-top:36px}.credits p{font-size:17px}.phone main{padding-top:24px}.phone .identity{padding-bottom:15px}@media(min-width:1550px){.in-game #host{max-width:1350px}}@media(max-width:1000px){#library{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){#library{grid-template-columns:1fr}.cardbody>p{min-height:0}.in-game #host{padding:16px 10px}.in-game #arena{padding:12px}.in-game .sectiontitle h2{font-size:19px}.rules{font-size:16px}.phone .dpad{grid-template-rows:repeat(3,65px);max-width:270px}.phone .boost{padding:21px}.phone .steer button{min-height:120px}.credits h1{font-size:40px}}
.tower .art{background:repeating-linear-gradient(0deg,#2c435a 0 30px,#8cabca 30px 33px,#2c435a 33px 55px)}
.sling .art{background:linear-gradient(#3f6c8b 0 60%,#728d53 60% 100%)}
.puck .art{background:radial-gradient(circle at center,transparent 35%,#74bbd4 36% 37%,transparent 38%),linear-gradient(90deg,#daf1f4 49%,#e8878c 49% 51%,#daf1f4 51%)}
.puck .new-symbol{color:#203f59;text-shadow:4px 5px #aac6d1}
.derby .art{background:repeating-linear-gradient(90deg,#24323e 0 30%,#d4b877 30% 31%,#24323e 31% 60%)}
.climb .art{background:linear-gradient(155deg,#5b91aa 0 34%,#d5925d 34% 60%,#ac6140 60%)}
.new-symbol{font-size:115px!important;margin-right:35px;line-height:1}
.tower-drop{width:100%;min-height:300px;margin-top:25px;background:#c7b4ff;font-size:34px;box-shadow:0 8px #756197}

/* Neon Dash canvas + phone feedback */
#dashcanvas{display:block;width:100%;height:auto;aspect-ratio:5/3;border-radius:14px;margin:16px 0;background:#0b0d14}
.rankbadge{font-size:40px;font-weight:900;text-align:center;min-height:48px}.tap.flash{filter:brightness(1.35)}.tap.surge{background:#5ff3ff}.tap.hot{background:#ff5d73}
.dash-margin{text-align:center;font-size:22px;font-weight:800;color:#f5f3ec}
/* In-game: keep the whole canvas inside the window (TV and ~768 px laptops) */
.in-game header{height:64px}
.in-game #gamecanvas,.in-game #dashcanvas{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 250px);min-height:240px;margin:10px auto}
.in-game #arena .playhint{max-width:1000px;margin-left:auto;margin-right:auto}
/* Laptop playtest during a game: the keyboard panel sits beside the canvas so no scrolling is needed */
@media(min-width:1100px){
 body.in-game.laptop-on #host{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;align-items:start}
 body.in-game.laptop-on #arena{grid-column:1;grid-row:1}
 body.in-game.laptop-on #laptop-test{grid-column:2;grid-row:1;position:sticky;top:8px;padding:14px;order:0}
 body.in-game.laptop-on .test-players{grid-template-columns:1fr;gap:10px}
 body.in-game.laptop-on .test-player{padding:10px}
 body.in-game.laptop-on .test-player p{margin:4px 0}
 body.in-game.laptop-on #error,body.in-game.laptop-on footer{grid-column:1/-1}
}
.phone .dpad .direction-label{display:block;font-size:9px;letter-spacing:.2px;line-height:1.2;padding:2px 3px;font-weight:800}


/* Neon Dash heat: the TAP button fills from the bottom in orange as heat builds (--heat 0-1, set by app.js). */
.tap{background-image:linear-gradient(to top,rgba(255,140,60,.55) calc(var(--heat,0)*100%),transparent calc(var(--heat,0)*100%))}
.tap.vent{outline:4px dashed #5ff3ff;outline-offset:-10px}
/* Dash tap reply flashes (120 ms): stalled dud, SURGE hit, REDLINE hit. */
.tap.dud{filter:grayscale(1) brightness(.7)}.tap.surgehit{box-shadow:0 0 0 6px #5ff3ff inset}.tap.redhit{box-shadow:0 0 0 6px #ff9d4d inset}
/* Tiles: SHOVE is locked in the last half second of a warning. */
[data-control].locked{opacity:.4;filter:grayscale(1)}

/* ================= Phone app shell: every phone screen fits the viewport, the page never scrolls =================
   Scoped to the controller page (#phone-header / #phone-main exist only in play.html; body.phone). ID selectors are used
   for layout-critical sizes on purpose so per-game themes (body.phone[data-game] ...) keep their looks but cannot
   reintroduce fixed heights or big margins that would push the page past one screen. Only an inner panel (a long
   list) may scroll. */
html:has(body.phone){height:100%;overflow:hidden;overscroll-behavior:none}
body.phone{height:100vh;height:100dvh;min-height:0!important;overflow:hidden;display:flex;flex-direction:column;overscroll-behavior:none;
 padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)!important}
#phone-header{flex:none;height:auto;min-height:0;padding:6px 14px;gap:10px;margin:0}
#phone-header .brand{font-size:18px;letter-spacing:-.8px;white-space:nowrap}
#phone-header .status{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#phone-main{flex:1 1 auto;min-height:0;width:100%;max-width:560px;margin:0 auto;padding:10px 12px 8px;display:flex;flex-direction:column;overflow:hidden}
#phone-main>#error{flex:none;margin:4px 0 0;min-height:0;font-size:13px;line-height:1.3}#phone-main>#error:empty{display:none}
/* Join form: compact; the form itself scrolls (never the page) if a keyboard leaves too little room. */
#phone-main>#join{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:center}
#join h1{font-size:clamp(30px,9vw,46px);margin:0 0 4px}
#join label{margin:clamp(8px,2.2vh,20px) 0}
#join input{padding:13px 14px}
#join .primary{margin-top:clamp(8px,2vh,18px);min-height:56px}
/* Controller column: compact top row, optional status line, then the controls take every remaining pixel. */
#phone-main>#controller{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;padding:0;overflow:hidden}
#controller>*{flex:none;margin-top:0;margin-bottom:0}
#controller>.bwp{flex:1 1 auto;min-height:0}
#controller .phone-top{display:flex;align-items:center;gap:8px;min-width:0}
body.phone .identity{padding-bottom:0}
#controller .phone-top>.identity{flex:1 1 auto;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.phone #controller .identity .avatar{width:32px;height:32px;flex:none}
#controller .phone-top>.sectiontitle{flex:0 8 auto;min-width:0;margin:0;gap:8px}
#controller .phone-top>.sectiontitle>b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
#controller .phone-top .timer{flex:none;font-size:22px!important;line-height:1.1;white-space:nowrap}
#controller #phone-subtitle{margin:0;font-size:14px;line-height:1.3;min-height:calc(2.6em + 12px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#controller .controller-help{flex:none;margin:0;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 10px}
#controller .controller-help::before,#controller .controller-help::after{display:none}
#controller #out-message{flex:1 1 auto;display:grid;place-items:center;margin:0;padding:12px;font-size:20px}
#controller #out-message[hidden]{display:none}
/* The pad: a flexible column; each control grows into the free space instead of using fixed pixel heights. */
#controller #pad{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:clamp(8px,1.6vh,14px);margin:0}
#controller #pad[hidden]{display:none}
#pad>*{flex:none;margin:0}
#controller #pad:has(>.dpad){justify-content:space-evenly}
#pad>.dpad{flex:none;width:max(150px,min(100cqw,58cqh));height:auto;max-width:100%;aspect-ratio:1;align-self:center;margin:0 auto;grid-template-rows:repeat(3,minmax(40px,1fr));gap:8px}
#pad>.dpad button{min-height:0;height:auto}
#pad>.steer{flex:3 1 0;min-height:96px;margin:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:12px}
#pad>.steer button{min-height:0;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
#pad>.boost{flex:0 1 clamp(64px,14vh,120px);min-height:60px;height:auto;padding:8px 12px;margin:0 0 6px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#pad>.tower-drop{flex:1 1 0;min-height:96px;margin:0}
#pad>meter#energy{flex:none;height:18px;margin:0;width:100%}
#pad>.targetcue{flex:none;padding:8px 12px;margin:0;font-size:18px}
/* Round (circle / balloon) buttons from the themes: the size comes from the free height, the width follows. */
#controller #pad{container-type:size}
body.phone:is([data-game="rally"],[data-game="tiles"],[data-game="blast"],[data-game="sling"]) #pad>.boost{flex:none;width:max(72px,min(100cqw - 40px,36cqh));height:auto;min-height:0;aspect-ratio:1;align-self:center;margin:6px auto 10px;padding:8px}
/* Last Tile Standing also shows the called colour between the d-pad and SHOVE. */
body.phone[data-game="tiles"] #pad>.dpad{width:max(140px,min(100cqw,46cqh))}
body.phone[data-game="tiles"] #pad>.boost{width:max(72px,min(100cqw - 40px,28cqh))}
body.phone[data-game="tower"] #pad>.tower-drop{flex:none;width:max(96px,min(100cqw - 60px,100cqh - 60px));height:auto;min-height:0;aspect-ratio:1;align-self:center;margin:auto;padding:8px}
/* Waiting screens (lobby, countdown, results, Neon Dash): one centred column that fills the screen. */
#controller>.phone-screen{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:clamp(4px,1.2vh,12px);text-align:center;overflow:hidden}
.phone-screen>*{flex:none;margin:0}
.phone-screen h2{font-size:clamp(22px,4.2vh,32px);line-height:1.15}
.phone-screen p{line-height:1.4}
#controller .phone-screen .bigcount{font-size:clamp(64px,17vh,120px);line-height:1;margin:0 auto}
.phone-screen .phone-tip{font-size:15px}
.phone-screen>.tap{flex:1 1 0;width:100%;height:auto;min-height:120px;margin:0 0 10px}
.phone-screen>.rankbadge{font-size:clamp(26px,5vh,40px);min-height:0}
#controller .phone-screen>#tapscore{font-size:18px;margin:0}
.phone-screen>.bwx-phone{flex:0 1 auto;min-height:0;overflow-y:auto;margin:4px 0 0}
.phone-screen .phoneanswers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.phone-screen .phoneanswers button{min-height:64px;padding:12px}
/* Landscape phones: the movement control on the left, the action button on the right. */
@media (orientation:landscape) and (max-height:520px){
 #phone-header{padding-top:3px;padding-bottom:3px}
 #phone-main{max-width:none;padding:6px 16px 6px}
 #controller{gap:6px}
 #controller #phone-subtitle{min-height:0;-webkit-line-clamp:1;padding-top:4px;padding-bottom:4px}
 #controller .controller-help{display:none}
 #controller #pad:has(>.dpad,>.steer){display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:10px 16px}
 #pad:has(>.dpad,>.steer)>.dpad,#pad:has(>.dpad,>.steer)>.steer{grid-column:1;grid-row:1/-1;min-height:0;height:100%}
 #pad:has(>.dpad,>.steer)>.dpad{width:min(56cqw,100cqh);height:auto;justify-self:center;align-self:center}
 #pad:has(>.dpad,>.steer)>.targetcue{grid-column:2;grid-row:1}
 #pad:has(>.dpad,>.steer)>[data-control="action"]{grid-column:2;grid-row:2;min-height:0;height:auto;max-height:100%;margin:0}
 #pad:has(>.dpad,>.steer)>meter#energy{grid-column:2;grid-row:3}
 body.phone:is([data-game="rally"],[data-game="tiles"],[data-game="blast"],[data-game="sling"]) #pad>.boost{width:max(64px,min(38cqw,100cqh - 70px));height:auto;max-height:none;justify-self:center;align-self:center;margin:4px auto}
 #controller>.phone-screen>.tap{min-height:0}
 #controller .phone-screen .bigcount{font-size:clamp(48px,22vh,96px)}
}/* Compact during active play only; title treatment survives briefing and results. */
body.host.in-game.compact-gameplay .topbar{height:44px;min-height:44px;gap:12px;padding:0 16px}
body.host.in-game.compact-gameplay .topbar>.brand,body.host.in-game.compact-gameplay .topbar>.tabs{display:none}
body.host.compact-gameplay #host{padding-top:6px;padding-bottom:6px}
body.host.compact-gameplay #arena{padding:6px 10px;background:var(--panel,#20232a)}
body.host.compact-gameplay #arena>.sectiontitle{min-height:32px;margin:0;gap:8px;justify-content:flex-end}
body.host.compact-gameplay #arena>.sectiontitle>h2,
body.phone.compact-gameplay #controller>.phone-top>.sectiontitle>b{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.host.compact-gameplay #arena>.sectiontitle .timer{font-size:18px!important;color:var(--accent,#c2f76e)!important}
body.host.compact-gameplay #arena>.sectiontitle button{min-height:32px;padding:6px 10px}
body.host.compact-gameplay #gamecanvas,body.host.compact-gameplay #dashcanvas{max-height:calc(100vh - 152px);max-height:calc(100dvh - 152px);min-height:0;margin:4px auto}
body.host.compact-gameplay #arena>.playhint,body.host.compact-gameplay #host>footer{display:none}
body.host.compact-gameplay .arcade-players{gap:4px;justify-content:center}
body.host.compact-gameplay .mini-player{padding:3px 7px;font-size:11px;gap:5px}
body.phone.compact-gameplay #phone-main{padding-top:4px}
body.phone.compact-gameplay #phone-main>#controller{gap:4px}
body.phone.compact-gameplay #controller>.phone-top{min-height:28px}
body.phone.compact-gameplay #controller .identity .avatar{width:26px;height:26px}
body.phone.compact-gameplay #controller>.phone-top .timer{font-size:18px!important;color:var(--accent,#c2f76e)!important}
body.phone.compact-gameplay #controller #phone-subtitle{min-height:0;padding-top:3px;padding-bottom:3px;font-size:12px}
body.phone.compact-gameplay #controller #phone-subtitle:empty{display:none}
/* Nested game HUDs must not inherit the page header's fixed 80px height. */
body.phone.compact-gameplay #controller #pad header{height:auto;min-height:0;padding:4px 8px;gap:8px}
@media(max-height:520px){
 body.host.in-game.compact-gameplay .topbar{height:36px;min-height:36px}
 body.host.compact-gameplay #gamecanvas,body.host.compact-gameplay #dashcanvas{max-height:calc(100dvh - 130px)}
}
/* Approved game art also carries through the shared briefing, ready check and results shell. */
body[data-game]:not([data-game=""]):not([data-game=sniper]) :is(#arena,#phone-header,.practice-panel,.game-briefing){background:var(--panel,#20232a);color:var(--text,#f5f3ec);border-color:var(--accent,#707466)}
body[data-game]:not([data-game=""]):not([data-game=sniper]) :is(.game-briefing,.practice-panel) :is(p,small,footer,.eyebrow){color:var(--muted,var(--text,#b6b9c2))}
body[data-game]:not([data-game=""]):not([data-game=sniper]) :is(#arena,#controller,.practice-panel) :is(.primary,.practice-ready){background:var(--accent,#c2f76e);color:var(--on-accent,#182019)}
body[data-game]:not([data-game=""]):not([data-game=sniper]) :is(#arena,#controller,.practice-panel) .quiet{background:var(--panel,#272a32);color:var(--text,#dfdfdf);box-shadow:inset 0 0 0 1px var(--accent,#707466)}
body[data-game]:not([data-game=""]):not([data-game=sniper]) :is(#phone-header .brand,#phone-header .status,.identity,.briefing-icon){color:var(--text,#f5f3ec)}
body[data-game]:not([data-game=""]):not([data-game=sniper]) :is(.practice-player,.score){border-color:var(--accent,#707466);color:var(--text,#f5f3ec)}

/* Every TV game owns the viewport; supporting controls live in the overlay. */
body.host.in-game{margin:0!important;overflow:hidden;background:#101216}
body.host.in-game #host,body.host.in-game .watch-layout{display:block!important;position:fixed;inset:0;width:100%;height:100dvh;max-width:none!important;margin:0!important;padding:0!important;overflow:hidden}
body.host.in-game #arena{box-sizing:border-box;position:absolute;inset:0;width:100%;height:100%;max-width:none!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:auto}
body.host.in-game #arena:has(>canvas){display:flex!important;align-items:center;justify-content:center;overflow:hidden;background:#101216!important}
body.host.in-game #arena > canvas#gamecanvas,body.host.in-game #arena > canvas#dashcanvas{flex:none;width:min(100vw,166.666667dvh)!important;height:min(100dvh,60vw)!important;max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important;aspect-ratio:5/3;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;object-fit:contain}
body.host.in-game #host > footer{display:none!important}
body.host.in-game #arena > .center{box-sizing:border-box;min-height:65dvh;display:flex;flex-direction:column;justify-content:center}
#tv-game-menu{position:fixed;z-index:10000;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));color:#f4f6fa;font:14px/1.45 system-ui,sans-serif}
#tv-game-menu > summary{list-style:none;display:grid;place-items:center;width:36px;height:36px;border:1px solid #b2bfd577;border-radius:8px;background:#111722cc;color:#fff;font-size:23px;cursor:pointer;box-shadow:0 2px 8px #0005}
#tv-game-menu > summary::-webkit-details-marker{display:none}
#tv-game-menu > summary:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
#tv-game-menu .tv-menu-panel{position:absolute;right:0;top:44px;box-sizing:border-box;width:min(420px,calc(100vw - 16px));max-height:calc(100dvh - 64px);overflow:auto;overscroll-behavior:contain;padding:16px;border:1px solid #69768a;border-radius:12px;background:#17202ef5;box-shadow:0 12px 40px #0008}
#tv-game-menu .tv-menu-controls{display:grid;gap:14px;margin-top:12px}
body.host #tv-game-menu .topbar{display:flex!important;position:static!important;flex-wrap:wrap;height:auto!important;min-height:0!important;padding:0!important;gap:8px;background:none;border:0}
#tv-game-menu .topbar .brand,#tv-game-menu .topbar .tabs{display:none}
body.host.in-game #tv-game-menu #party-panel,body.host.in-game #tv-game-menu #laptop-test,body.host.in-game #tv-game-menu .practice-panel,body.host.in-game #tv-game-menu aside{position:static!important;max-width:none!important;max-height:none!important;width:auto!important;margin:0!important;padding:12px;transform:none!important}
body.host.in-game #tv-game-menu .sectiontitle{display:flex;flex-wrap:wrap;gap:8px;margin:0;justify-content:space-between}
body.host.in-game #tv-game-menu .sectiontitle h2,body.host.in-game #tv-game-menu .sectiontitle h1{position:static;width:auto;height:auto;clip-path:none;overflow:visible;white-space:normal;font-size:20px;margin:0}
body.host.in-game #tv-game-menu .playhint{display:block!important;font-size:14px}
body.host.in-game #tv-game-menu #error:empty{display:none}
#tv-game-menu button{cursor:pointer;min-height:36px}
#tv-game-menu .practice-heading{flex-wrap:wrap}
#tv-game-menu .audio-panel{position:static!important}
#tv-game-menu .tv-menu-controls{display:flex;flex-direction:column;align-items:stretch}
#tv-game-menu .tv-menu-controls > *{flex:none;grid-area:auto!important;min-width:0;min-height:0;order:0}
body.host #tv-game-menu .arcade-players{display:flex;flex-wrap:wrap;gap:6px}
body.host #tv-game-menu .mini-player{padding:6px 8px}
body.host.in-game #arena > .bw{box-sizing:border-box;max-height:none;min-height:100%;padding:16px}
body.host.in-game #arena:not(:has(>canvas)){overflow-x:hidden}