/* Gumwall Grand Prix styles, moved out of game.html on 11/04. */

:root { --ice:#E2F8FF; --pink:#F26374; --cobalt:#0632A7; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--ice); color:#000; font-family:'futura-pt',Futura,'Avenir Next','Century Gothic',sans-serif; }
.wrap { max-width:1620px; margin:0 auto; padding:14px 14px 40px; }
h1 { font-family:'Manbow Lines',Futura,sans-serif; color:var(--cobalt); font-size:34px; font-weight:400; letter-spacing:1px; }
.sub { font-weight:700; font-size:14px; margin-bottom:14px; }
#stage { position:relative; border:2.5px solid var(--cobalt); background:#fff; }
#stage, #stage * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
#stage input { -webkit-user-select:text; user-select:text; }
#gl { display:block; width:100%; height:auto; cursor:grab; box-shadow:inset 0 0 140px rgba(6,50,167,0.16); }
#hud { position:absolute; top:10px; left:10px; }
.strip { display:flex; background:rgba(255,255,255,0.93); border:2px solid var(--cobalt); border-radius:12px; overflow:hidden; }
.pod { padding:5px 12px; min-width:82px; text-align:center; border-left:2px solid #dceef3; }
.pod:first-child { border-left:0; }
.pod.sensor { display:none; }
#stage.cad #pod_cad, #stage.hr #pod_hr { display:block; }
#fm_scorepod { background:#ffe1e6; }
#stage.fm { border-color:var(--pink); }
#stage.fm #minimap { border-color:var(--pink) !important; }
#stage.fm .strip { border-color:var(--pink); }
.pod b { display:block; font-size:10px; letter-spacing:0.08em; color:var(--cobalt); }
.pod span { font-size:22px; font-weight:700; }
.pod small { font-size:10px; color:#555; }
#lapbox { position:absolute; top:10px; right:10px; text-align:right; }
#lapstrip { display:inline-flex; }
#msg { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); max-width:72%; background:rgba(255,255,255,0.95); border:2px solid var(--cobalt); border-radius:10px; padding:6px 14px; text-align:center; font-weight:700; color:var(--cobalt); font-size:13.5px; line-height:1.35; }
#msg:empty { display:none; }
#connbadge { display:none; align-items:center; gap:6px; background:rgba(255,255,255,0.92); border:2px solid var(--cobalt); border-radius:10px; padding:6px 10px; font-size:11px; font-weight:700; color:var(--cobalt); }
.dot { width:9px; height:9px; border-radius:50%; background:#c8d2d6; flex:none; display:inline-block; margin-right:8px; }
#connbadge .dot { background:#2ecc71; margin-right:0; }
#connbadge.stale .dot, .dot.stale { background:#f2b705; animation:conn-pulse 1s infinite; }
#connbadge.lost .dot, .dot.lost { background:#e0483e; animation:none; }
.dot.ok { background:#2ecc71; }
@keyframes conn-pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.pairrow { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:2px solid #dceef3; }
.pairrow:first-of-type { border-top:none; }
.pairrow > div:first-child { display:flex; align-items:center; font-size:14px; }
.pairrow b { margin-right:8px; }
.prstat { font-size:11.5px; color:#667; font-weight:400; }
#routeload { display:none; position:fixed; inset:0; z-index:60; background:rgba(10,14,18,0.55); align-items:center; justify-content:center; pointer-events:none; }
#routeload .card { background:rgba(255,255,255,0.96); border:2.5px solid var(--cobalt); border-radius:12px; padding:16px 24px; text-align:center; font-weight:700; color:var(--cobalt); }
#routeload .spin { width:22px; height:22px; margin:0 auto 8px; border:3px solid #cde6ef; border-top-color:var(--cobalt); border-radius:50%; animation:route-spin 0.7s linear infinite; }
@keyframes route-spin { to{transform:rotate(360deg)} }
.bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0; }
button.b { font-family:'Manbow Lines',Futura,sans-serif; font-size:15px; letter-spacing:0.6px; background:var(--pink); color:#fff; border:none; border-radius:10px; padding:10px 14px 8px; cursor:pointer; }
button.b.ghost { background:#fff; color:var(--cobalt); box-shadow:inset 0 0 0 2px var(--cobalt); }
button.b.cotw { color:var(--pink); box-shadow:inset 0 0 0 2px var(--pink); }
button.b.cotw.on { background:var(--pink); color:#fff; }
#authbox { margin:0 0 12px; padding:12px 14px; background:#fff; border:2px solid var(--cobalt); border-radius:10px; font-size:14px; line-height:1.5; }
#sumnudge { margin:4px 0 14px; padding:12px 14px; background:var(--ice); border:2px solid var(--cobalt); border-radius:10px; font-size:13.5px; line-height:1.5; text-align:left; }
#sumnudge .bar { margin:8px 0 0; }
#sumnudge input { padding:8px 10px; border:1.5px solid var(--cobalt); border-radius:6px; font-family:inherit; font-size:14px; flex:1 1 150px; min-width:0; }
select, input[type=number] { padding:6px 8px; border:1.5px solid var(--cobalt); border-radius:6px; background:var(--ice); font-family:inherit; font-size:13px; }
#course { font-family:'Manbow Lines',Futura,sans-serif; font-size:17px; letter-spacing:0.5px; padding:10px 14px; border:2.5px solid var(--pink); border-radius:10px; background:#fff; color:var(--cobalt); box-shadow:3px 3px 0 rgba(242,99,116,0.5); cursor:pointer; }
.note { font-size:12px; color:#444; }
.conngroup { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.glabel { font-family:'Manbow Lines',Futura,sans-serif; font-size:12px; letter-spacing:0.8px; color:var(--cobalt); margin-right:2px; }
.gsection { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding-right:14px; margin-right:14px; border-right:2px solid #dceef3; }
.gsection:last-child { border-right:none; padding-right:0; margin-right:0; }
#gearpanel .bar { border-top:2px solid #dceef3; padding-top:8px; margin-top:8px; }
#gearpanel .bar:first-child { border-top:none; padding-top:0; margin-top:0; }
.lb { background:#fff; border:2px solid var(--cobalt); padding:10px 14px; margin-top:10px; display:none; max-width:420px; }
.lb h3 { color:var(--cobalt); font-size:15px; }
.lb div { font-size:13px; padding:2px 0; border-bottom:1px solid #d8ecf4; }
#intro { position:fixed; inset:0; background:#000; z-index:99; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; cursor:pointer; text-align:center; padding:0 14px; }
#intro .fadewrap { display:flex; flex-direction:column; align-items:center; gap:26px; opacity:0; animation:introIn 0.9s ease-out forwards; transition:opacity 0.7s ease-in; }
#intro.out .fadewrap { opacity:0 !important; }
#intro .go { position:absolute; bottom:9vh; left:0; right:0; text-align:center; color:#8a7328; font-size:12px; letter-spacing:4px; opacity:0; transition:opacity 0.6s; }
#intro.ready .go { opacity:1; animation:flash 1.1s ease-in-out infinite alternate; }
#intro .snd { position:absolute; top:18px; right:18px; height:34px; border:2px solid #8a7328; border-radius:17px; background:transparent; color:#d4af37; font-family:'Manbow Lines',Futura,sans-serif; font-size:11px; letter-spacing:2px; padding:3px 14px 0; cursor:pointer; }
#intro .snd.on { background:#d4af37; color:#000; }
@keyframes introIn { from{opacity:0} to{opacity:1} }
#intro img { height:150px; filter:invert(0.82) sepia(1) saturate(4.5) hue-rotate(-14deg) brightness(1.05); }
#intro .t { font-family:'Manbow Lines',Futura,sans-serif; color:#d4af37; font-size:clamp(24px,7.5vw,44px); letter-spacing:clamp(2px,1vw,6px); text-shadow:0 0 22px rgba(212,175,55,0.55); }
#intro .p { color:#8a7328; font-size:13px; letter-spacing:4px; }
/* late-90s PC-game splash: black, fade the logo card in over 0.5s, hold it
   2s, fade back to black over 1s, then cut straight to the game (the black
   backdrop never moves, so the cut off #intro is invisible) */
@keyframes introFade { 0%{opacity:0} 14.29%{opacity:1} 71.43%{opacity:1} 100%{opacity:0} }
@keyframes flash { from { opacity:0.55; } to { opacity:1; } }
/* freedom mode */
.fm_only { display:none; }
#stage.fm .fm_only { display:block; }
#fm_scorepod { margin-top:6px; background:#ffe1e6; padding-bottom:5px; }
#fm_ammo { display:flex; justify-content:space-between; gap:8px; font-size:10.5px; line-height:1.2; margin-top:2px; }
#fm_ammo em { font-style:normal; font-weight:700; color:var(--cobalt); letter-spacing:0.04em; }
#fm_ammo i { font-style:normal; font-weight:700; font-variant-numeric:tabular-nums; }
#fm_ammo.rl i { color:var(--pink); }
#msg.quiet { opacity:0; transition:opacity 0.8s; }
#fm_tl { position:absolute; left:10px; bottom:84px; z-index:3; display:flex; gap:8px; align-items:center; }
#fm_switch { display:flex; align-items:center; gap:8px; height:34px; padding:0 12px 0 4px; border:2px solid var(--pink); border-radius:17px; background:#fff; color:var(--pink); font-family:'Manbow Lines',Futura,sans-serif; font-size:13px; letter-spacing:1px; cursor:pointer; position:relative; }
#fm_switch .knob { width:24px; height:24px; border-radius:50%; background:var(--pink); position:relative; transition:transform .18s; }
#fm_switch .knob:after { content:''; position:absolute; left:6px; top:11px; width:12px; height:2px; background:#fff; box-shadow:0 -3px 0 #fff; }
#fm_switch .lbl { padding-top:2px; }
#fm_switch .new { position:absolute; top:-9px; right:-8px; background:#ffe9a8; color:#000; font-family:'futura-pt',Futura,sans-serif; font-size:9px; letter-spacing:0.08em; padding:1px 5px; border-radius:6px; border:1.5px solid var(--cobalt); }
#fm_switch.seen .new { display:none; }
#stage:not(.fm) #fm_switch:not(.seen) { animation:fmpulse 5s ease-in-out infinite; }
@keyframes fmpulse { 0%,18%,100%{box-shadow:0 0 0 0 rgba(242,99,116,0.6)} 9%{box-shadow:0 0 0 10px rgba(242,99,116,0)} }
#stage.fm #fm_switch { background:var(--pink); color:#fff; }
#stage.fm #fm_switch .knob { background:#fff; transform:translateX(0); }
#stage.fm #fm_switch .knob:after { background:var(--pink); box-shadow:0 -3px 0 var(--pink); }
#stage.fm #fm_switch { flex-direction:row-reverse; padding:0 4px 0 12px; }
#fm_seg { display:inline-flex; border:2px solid var(--cobalt); border-radius:17px; overflow:hidden; background:#fff; height:34px; }
#fm_seg button { border:0; background:transparent; color:var(--cobalt); font-family:'Manbow Lines',Futura,sans-serif; font-size:12px; letter-spacing:1px; padding:3px 12px 0; cursor:pointer; }
#fm_seg button.on { background:var(--cobalt); color:#fff; }
#fm_mute.off, #musicbtn.off { color:var(--pink); border-color:var(--pink); }
#fm_mute, #musicbtn { height:34px; border:2px solid var(--cobalt); border-radius:17px; background:#fff; color:var(--cobalt); font-family:'Manbow Lines',Futura,sans-serif; font-size:11px; letter-spacing:1px; padding:3px 10px 0; cursor:pointer; }
#fm_ammo { position:absolute; left:50%; bottom:84px; transform:translateX(-50%); z-index:3; background:rgba(255,255,255,0.93); border:2px solid var(--pink); border-radius:12px; padding:5px 14px 6px; text-align:center; min-width:150px; }
#fm_ammo em { display:block; font-style:normal; font-family:'Manbow Lines',Futura,sans-serif; font-size:13px; letter-spacing:1px; color:var(--pink); }
#fm_ammo i { display:block; font-style:normal; font-weight:700; font-size:20px; line-height:1.1; font-variant-numeric:tabular-nums; }
#fm_ammo.rl i { color:var(--pink); font-size:14px; line-height:1.6; }
#fm_wave { position:absolute; left:50%; bottom:150px; transform:translateX(-50%); z-index:3; background:rgba(255,255,255,0.9); border:2px solid var(--cobalt); border-radius:12px; padding:2px 12px 1px; font-size:11px; font-weight:700; letter-spacing:1px; color:var(--cobalt); white-space:nowrap; }
#fm_wave.hot { border-color:var(--pink); color:var(--pink); }
#fm_wave:empty { display:none; }
#fm_boss { position:absolute; left:50%; bottom:150px; transform:translateX(-50%); z-index:4; width:300px; background:rgba(255,255,255,0.93); border:2px solid var(--pink); border-radius:12px; padding:5px 12px 7px; text-align:center; pointer-events:none; }
#fm_boss b { display:block; font-family:'Manbow Lines',Futura,sans-serif; font-weight:400; font-size:17px; letter-spacing:3px; color:var(--pink); line-height:1; }
#fm_boss span { display:block; font-size:10px; font-weight:700; letter-spacing:1px; color:var(--cobalt); margin-top:3px; }
#fm_boss .bar { height:8px; background:#e3edf3; border-radius:4px; margin-top:5px; overflow:hidden; }
#fm_boss .bar i { display:block; height:100%; background:var(--pink); transition:width .25s; }
#stage.fm #fm_boss:empty, #stage.fm #fm_wave:empty { display:none; }
#stage:not(.fm) #fm_boss, #stage:not(.fm) #fm_wave, #stage:not(.fm) #fm_seg, #stage:not(.fm) #fm_ammo, #stage:not(.fm) #fm_scorepod, #stage:not(.fm) #fm_posse, #stage:not(.fm) #fm_board { display:none; }
#softbtn { position:absolute; left:10px; bottom:126px; z-index:3; height:28px; border:2px solid var(--cobalt); border-radius:14px; background:#fff; color:var(--cobalt); font-family:'Manbow Lines',Futura,sans-serif; font-size:11px; letter-spacing:1px; padding:3px 10px 0; cursor:pointer; display:none; }
#softbtn.on { background:var(--cobalt); color:#fff; }
#stage.demo #softbtn { display:block; }
@media (max-width:700px){ #softbtn { bottom:104px; font-size:9px; height:24px; } }
#demohint { position:absolute; left:0; right:0; top:26%; display:flex; justify-content:center; pointer-events:none; z-index:4; }
#demohint .card { pointer-events:auto; position:relative; background:rgba(255,255,255,0.95); border:2.5px solid var(--cobalt); border-radius:12px; padding:14px 44px 14px 20px; text-align:center; box-shadow:4px 4px 0 rgba(242,99,116,0.6); }
#demohint b { display:block; font-family:'Manbow Lines',Futura,sans-serif; font-weight:400; font-size:20px; letter-spacing:2px; color:var(--cobalt); margin-bottom:6px; }
#demohint .k { display:block; font-size:14px; font-weight:700; margin:3px 0; }
#demohint .or { display:block; font-size:12px; color:#667; margin:6px 0 2px; }
#demohint .b { margin:4px 0 0; font-size:14px; padding:8px 14px 6px; }
#demohint .x { position:absolute; top:4px; right:8px; border:0; background:none; font-size:22px; color:var(--cobalt); cursor:pointer; }
#demohint kbd { display:inline-block; min-width:18px; padding:1px 6px 0; border:1.5px solid var(--cobalt); border-bottom-width:3px; border-radius:5px; background:#fff; font-size:12px; font-weight:700; color:var(--cobalt); }
#demohint .touch_only { display:none; }
#stage.touch #demohint .k:not(.touch_only) { display:none; }
#stage.touch #demohint .touch_only { display:block; }
#stage.touch:not(.phone) #fm_tl, #stage.touch:not(.phone) .fm_only, #stage.touch:not(.phone) #fm_ammo { display:none !important; }
/* ---------- phone match layout: four corners, thumbs in the bottom two, nothing persistent in the middle ---------- */
body.match { overflow:hidden; }
body.match #stage { position:fixed; inset:0; z-index:50; border:0; border-radius:0; background:#000; }
body.match .wrap > *:not(#stage) { visibility:hidden; }
/* fixed overlays stay usable in a match: the finish screen, controller pairing, the boards */
body.match .wrap > #summary, body.match .wrap > #padmodal, body.match .wrap > #lb, body.match .wrap > #statsbox, body.match #summary, body.match #padmodal { visibility:visible !important; }
#stage.phone #hud { top:calc(6px + env(safe-area-inset-top)); left:calc(8px + env(safe-area-inset-left)); }
#stage.phone .strip { border-width:1.5px; border-radius:9px; }
#stage.phone .pod { padding:2px 7px 1px; min-width:0; }
#stage.phone .pod b { font-size:7px; letter-spacing:.06em; }
#stage.phone .pod span { font-size:15px; }
#stage.phone .pod small { font-size:8px; }
#stage.phone #hud .pod:nth-child(6) { display:none; }
#stage.phone #lapbox { top:calc(42px + env(safe-area-inset-top)); left:calc(8px + env(safe-area-inset-left)); right:auto; text-align:left; }
#stage.phone #fm_posse { font-size:8px; margin-top:2px; padding:1px 6px; }
#stage.phone #nearby { display:none !important; }
#stage.phone.riders #nearby { display:block !important; font-size:9px !important; min-width:0 !important; }
#stage.phone #minimap { width:60px !important; height:60px !important; top:calc(6px + env(safe-area-inset-top)) !important; right:calc(144px + env(safe-area-inset-right)) !important; bottom:auto !important; border-width:1.5px !important; }
#stage.phone #elevstrip { height:14px !important; bottom:0 !important; left:224px !important; right:224px !important; width:auto !important; border-radius:6px 6px 0 0; }
#stage.phone #fm_wave { top:calc(8px + env(safe-area-inset-top)); bottom:auto; font-size:10px; padding:2px 10px 1px; }
#stage.phone #fm_boss { top:calc(32px + env(safe-area-inset-top)); bottom:auto; width:200px; padding:3px 10px 5px; }
#stage.phone #fm_boss b { font-size:13px; } #stage.phone #fm_boss span { font-size:8px; } #stage.phone #fm_boss .bar { height:5px; margin-top:3px; }
#stage.phone #fm_feed { left:50%; transform:translateX(-50%); top:calc(60px + env(safe-area-inset-top)); max-width:60%; font-size:10.5px; text-align:center; }
#stage.phone #fm_ann { font-size:30px; top:18%; letter-spacing:3px; } #stage.phone #fm_ann.big { font-size:40px; }
#stage.phone #fm_pop { font-size:18px; top:30%; } #stage.phone #fm_pop .fm_chain { font-size:26px; } #stage.phone #fm_pop small { font-size:10px; }
#stage.phone #fm_board { display:none !important; }
#stage.phone #msg { top:calc(84px + env(safe-area-inset-top)); bottom:auto; left:50%; right:auto; transform:translateX(-50%); max-width:70%; font-size:10.5px; padding:3px 9px; background:rgba(255,255,255,.85); border-width:1.5px; }
#stage.phone #demohint { top:14%; } #stage.phone #demohint .card { padding:8px 30px 8px 12px; } #stage.phone #demohint b { font-size:14px; } #stage.phone #demohint .k { font-size:11px; }
#stage.phone #keyhelp, #stage.phone > #softbtn, #stage.phone > #fm_tl { display:none !important; }
#stage.phone #touchpedal { display:flex !important; left:calc(12px + env(safe-area-inset-left)); bottom:calc(12px + env(safe-area-inset-bottom)); width:84px; height:84px; font-size:13px; }
#stage.phone #touchleft { display:flex !important; left:calc(104px + env(safe-area-inset-left)); bottom:calc(58px + env(safe-area-inset-bottom)); width:54px; height:54px; font-size:18px; }
#stage.phone #touchright { display:flex !important; left:calc(164px + env(safe-area-inset-left)); bottom:calc(20px + env(safe-area-inset-bottom)); width:54px; height:54px; font-size:18px; }
.tc { position:absolute; display:none; align-items:center; justify-content:center; border-radius:50%; font-family:'Manbow Lines',Futura,sans-serif; letter-spacing:1px; color:#fff; touch-action:none; z-index:6; }
#stage.phone.fm .tc { display:flex; }
#tc_fire { right:calc(12px + env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom)); width:84px; height:84px; background:rgba(242,99,116,.9); font-size:14px; box-shadow:0 0 0 3px rgba(255,255,255,.75); }
#tc_fire.on { transform:scale(.94); background:rgba(200,50,70,.96); }
#tc_ads { right:calc(106px + env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom)); width:54px; height:54px; background:rgba(6,50,167,.8); font-size:9px; }
#tc_ads.on { background:rgba(6,50,167,1); transform:scale(.94); }
#tc_reload { right:calc(20px + env(safe-area-inset-right)); bottom:calc(106px + env(safe-area-inset-bottom)); width:46px; height:46px; background:rgba(6,50,167,.8); font-size:9px; }
#stage.phone #fm_ammo { left:auto; right:calc(72px + env(safe-area-inset-right)); bottom:calc(92px + env(safe-area-inset-bottom)); transform:none; min-width:0; width:118px; padding:3px 8px 4px; border-radius:10px; text-align:left; z-index:6; }
#stage.phone #fm_ammo em { font-size:10px; } #stage.phone #fm_ammo i { font-size:15px; } #stage.phone #fm_ammo.rl i { font-size:11px; line-height:1.3; }
#stage.phone #fm_guns { flex-wrap:wrap; gap:3px; } #stage.phone #fm_guns span { width:7px; height:7px; }
#tc_menu, #tc_fm { position:absolute; top:calc(6px + env(safe-area-inset-top)); height:38px; border-radius:19px; background:rgba(255,255,255,.92); border:2px solid var(--cobalt); color:var(--cobalt); display:none; align-items:center; justify-content:center; z-index:8; font-family:'Manbow Lines',Futura,sans-serif; letter-spacing:1px; cursor:pointer; }
#tc_menu { right:calc(8px + env(safe-area-inset-right)); width:38px; font-size:20px; padding:0; }
#tc_fm { right:calc(52px + env(safe-area-inset-right)); padding:3px 12px 0; font-size:11px; border-color:var(--pink); color:var(--pink); }
#stage.fm #tc_fm { background:var(--pink); color:#fff; }
#stage.phone #tc_menu, #stage.phone #tc_fm { display:flex; }
#tc_sheet { position:absolute; top:0; right:0; bottom:0; width:min(300px,78%); background:rgba(255,255,255,.97); border-left:2.5px solid var(--cobalt); transform:translateX(105%); transition:transform .2s; z-index:9; padding:calc(12px + env(safe-area-inset-top)) 14px 14px; overflow:auto; display:none; flex-direction:column; gap:8px; }
#stage.phone #tc_sheet { display:flex; }
#stage.phone.sheet #tc_sheet { transform:none; }
#tc_sheet h6 { margin:6px 0 0; font-family:'Manbow Lines',Futura,sans-serif; font-weight:400; font-size:11px; letter-spacing:1.5px; color:var(--cobalt); }
#tc_sheet .b, #tc_sheet #fm_switch, #tc_sheet #fm_mute, #tc_sheet #musicbtn, #tc_sheet #softbtn, #tc_sheet #fm_seg { position:static; display:flex; height:42px; min-height:42px; width:100%; align-items:center; justify-content:center; font-size:12px; margin:0; box-sizing:border-box; }
#tc_sheet #fm_seg button { flex:1; font-size:11px; }
#tc_sheet #fm_switch .new { display:none; }
#tc_sheet .x { position:absolute; top:6px; right:10px; border:0; background:none; font-size:26px; color:var(--cobalt); cursor:pointer; }
#tc_sheet .note { font-size:10.5px; }
#tc_rotate { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(6,50,167,.94); color:#fff; z-index:20; text-align:center; font-family:'Manbow Lines',Futura,sans-serif; font-size:18px; letter-spacing:2px; line-height:1.6; padding:20px; }
body.match.portrait #tc_rotate { display:flex; }
#tc_rotate small { display:block; margin-top:6px; }
#tc_play { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:none; z-index:7; font-size:15px; padding:12px 26px 10px; }
body.phone:not(.match) #tc_play { display:block; }
/* the phone lobby: the stage is a preview with one button on it; every control lives in the match screen or the bars below */
body.phone:not(.match) #stage > :not(#gl):not(#tc_play):not(#intro):not(#routeload):not(#pairmodal):not(#msg) { display:none !important; }
body.phone .bar .b, body.phone #course { min-height:44px; }
body.phone #course { width:100%; }
#stage.touch .touch_only { display:block; }
.touch_only { display:none; }
.kbody .ksec { margin-bottom:6px; }
.kbody .ksec h5 { font-family:'Manbow Lines',Futura,sans-serif; font-size:10px; letter-spacing:1px; color:var(--cobalt); margin:0 0 2px; }
.kbody .ksec > div, .kbody .ksec span > div { display:inline-block; margin:0 10px 3px 0; white-space:nowrap; }
.kbody kbd { display:inline-block; min-width:18px; padding:1px 5px 0; margin-right:3px; border:1.5px solid var(--cobalt); border-bottom-width:3px; border-radius:5px; background:#fff; font-family:inherit; font-size:10.5px; font-weight:700; color:var(--cobalt); text-align:center; }
.kbody .kcredit { opacity:.55; font-size:10px; margin-top:4px; }
#keyhelp .kbody { max-width:460px; }
.tabs { display:flex; gap:0; margin:12px 0 0; border-bottom:2px solid var(--cobalt); }
.tabs button { font-family:'Manbow Lines',Futura,sans-serif; font-size:13px; letter-spacing:1px; padding:8px 14px 6px; border:2px solid transparent; border-bottom:0; background:transparent; color:var(--cobalt); cursor:pointer; border-radius:10px 10px 0 0; }
.tabs button.on { background:#fff; border-color:var(--cobalt); margin-bottom:-2px; border-bottom:2px solid #fff; }
.bar.tab { display:none; background:#fff; border:2px solid var(--cobalt); border-top:0; border-radius:0 0 10px 10px; padding:12px 14px; margin:0 0 12px; }
.bar.tab.on { display:flex; }
.bar.tab .sep { width:2px; height:26px; background:#dceef3; margin:0 4px; }
@media (max-width:700px){ #fm_tl { bottom:62px; } .tabs button { font-size:10px; padding:6px 8px 4px; } }
#stage.fm #gl { cursor:none; }
#fm_resume { display:none !important; }
.glyph { display:inline-block; min-width:16px; padding:0 4px; border:1.5px solid #333; border-radius:9px; font-size:9.5px; line-height:14px; text-align:center; font-weight:700; color:#333; background:#fff; vertical-align:1px; }
#fm_ui { position:absolute; inset:0; pointer-events:none; }
#fm_cross { position:absolute; left:50%; top:50%; width:28px; height:28px; margin:-14px 0 0 -14px;
  background:linear-gradient(90deg,var(--cobalt) 0 9px,transparent 9px 19px,var(--cobalt) 19px) 0 13px/28px 2px no-repeat,
             linear-gradient(180deg,var(--cobalt) 0 9px,transparent 9px 19px,var(--cobalt) 19px) 13px 0/2px 28px no-repeat;
  filter:drop-shadow(0 0 1px #fff); }
#fm_cross.on { background:linear-gradient(90deg,var(--pink) 0 9px,transparent 9px 19px,var(--pink) 19px) 0 13px/28px 2px no-repeat,
             linear-gradient(180deg,var(--pink) 0 9px,transparent 9px 19px,var(--pink) 19px) 13px 0/2px 28px no-repeat; }
#fm_cross.no { opacity:0.45; }
#fm_posse { font-size:10px; font-weight:700; color:#a33; letter-spacing:0.06em; margin-top:4px; background:rgba(255,255,255,0.88); display:inline-block; padding:2px 8px; border-radius:7px; }
#fm_board { position:absolute; left:10px; top:150px; background:rgba(255,255,255,0.88); border:2px solid var(--cobalt); border-radius:8px; padding:4px 8px; font-size:11px; min-width:130px; pointer-events:none; }
#fm_board b { display:block; font-size:9px; letter-spacing:0.08em; color:var(--cobalt); }
#fm_board div { display:flex; justify-content:space-between; gap:10px; }
#fm_board div.me { color:var(--pink); font-weight:700; }
#sumcard { background:#fff; border:3px solid var(--cobalt); border-radius:14px; padding:22px 26px 20px; width:min(760px,100%); text-align:center; box-shadow:0 18px 60px rgba(6,50,167,0.35); }
.sumhead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.sumtitle { font-family:'Manbow Lines',Futura,sans-serif; color:var(--cobalt); font-size:28px; letter-spacing:3px; }
.sumcourse { font-weight:700; font-size:14px; color:#334; letter-spacing:1px; text-transform:uppercase; }
#sumimg { display:none; width:100%; border:2px solid var(--cobalt); border-radius:10px; margin:0 0 14px; }
.sumgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0 0 12px; }
.sumgrid .t { border:2px solid var(--cobalt); border-radius:10px; padding:9px 6px 6px; background:#f7fbff; }
.sumgrid .t b { display:block; font-size:22px; line-height:1; letter-spacing:0.5px; color:#000; font-variant-numeric:tabular-nums; }
.sumgrid .t b small { font-size:12px; font-weight:400; color:#556; }
.sumgrid .t span { display:block; margin-top:5px; font-family:'Manbow Lines',Futura,sans-serif; font-size:11px; letter-spacing:1px; color:var(--cobalt); }
.sumgrid .t.hi { background:#ffe1e6; border-color:var(--pink); }
.sumgrid .t.hi span { color:var(--pink); }
#sumbody { font-size:13px; line-height:1.6; color:#334; margin:0 0 10px; }
.sumbtns { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:6px; }
.sumbtns .b { margin:0; }
#sumstrava.strava { background:#fc4c02; border-color:#fc4c02; color:#fff; }
@media (max-width:560px){ .sumgrid { grid-template-columns:repeat(2,1fr); } #sumcard { padding:16px 14px; } .sumtitle { font-size:22px; } }
#sumawards .awards { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:0 0 14px; }
#sumawards .awards span { display:inline-block; background:#ffe1e6; border:2px solid var(--pink); border-radius:9px; padding:5px 10px 4px; font-size:11px; line-height:1.3; max-width:150px; }
#sumawards .awards b { display:block; font-family:'Manbow Lines',Futura,sans-serif; font-size:12px; letter-spacing:1px; color:var(--pink); }
#fm_cross.lock { border-radius:50%; box-shadow:0 0 0 2px var(--pink), 0 0 0 4px rgba(255,255,255,0.7); transform:scale(1.15); }
#fm_guns { margin-top:4px; display:flex; gap:3px; justify-content:center; }
#fm_guns span { display:inline-block; width:9px; height:9px; border:1.5px solid var(--cobalt); border-radius:50%; background:#fff; cursor:pointer; font-size:0; }
#fm_guns span.sel { background:var(--cobalt); transform:scale(1.25); }
#fm_guns span.lock { opacity:0.3; cursor:default; }
#fm_guns span.boss { border-color:var(--pink); }
#fm_guns span.boss.sel { background:var(--pink); }
#fm_scope { position:absolute; inset:0; display:none; pointer-events:none;
  background:radial-gradient(circle at center, transparent 0 31%, rgba(0,0,0,0.97) 32%); }
#fm_scope:before, #fm_scope:after { content:''; position:absolute; background:rgba(0,0,0,0.85); }
#fm_scope:before { left:0; right:0; top:50%; height:1.5px; }
#fm_scope:after { top:0; bottom:0; left:50%; width:1.5px; }
.fm_dn { position:absolute; transform:translate(-50%,-50%); font-weight:700; font-size:15px; color:#fff; text-shadow:0 1px 0 #000,0 0 4px #000; pointer-events:none; display:none; }
.fm_dn.gold { color:#ffd542; font-size:18px; }
#fm_feed { position:absolute; left:10px; top:66px; max-width:46%; font-size:12px; font-weight:700; color:var(--cobalt); text-shadow:0 1px 0 #fff,0 0 6px #fff; pointer-events:none; }
#fm_feed div { margin-bottom:3px; transition:opacity 2.5s; }
#fm_feed div.old { opacity:0; }
#fm_ann { position:absolute; left:0; right:0; top:22%; text-align:center; font-family:'Manbow Lines',Futura,sans-serif; font-size:44px; letter-spacing:4px; color:var(--pink); text-shadow:0 2px 0 #fff,0 0 14px #fff,0 0 2px var(--cobalt); opacity:0; pointer-events:none; }
#fm_ann.big { font-size:60px; color:#c0392b; }
#fm_ann.go { animation:fmann 1.5s ease-out forwards; }
@keyframes fmann { 0%{opacity:0;transform:scale(1.6)} 12%{opacity:1;transform:scale(1)} 75%{opacity:1;transform:scale(1.02)} 100%{opacity:0;transform:scale(1.1)} }
#fm_pop small { display:block; font-family:'futura-pt',Futura,sans-serif; font-size:13px; letter-spacing:0; font-weight:700; }
#fm_pop .fm_bad { color:#c0392b; }
#fm_hit { position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; opacity:0; transform:rotate(45deg);
  background:linear-gradient(90deg,#fff 0 11px,transparent 11px 23px,#fff 23px) 0 16px/34px 2.5px no-repeat,
             linear-gradient(180deg,#fff 0 11px,transparent 11px 23px,#fff 23px) 16px 0/2.5px 34px no-repeat;
  filter:drop-shadow(0 0 2px #000); transition:opacity 0.12s; }
#fm_hit.hit { opacity:1; }
#fm_hit.kill { opacity:1; background-color:transparent;
  background:linear-gradient(90deg,var(--pink) 0 11px,transparent 11px 23px,var(--pink) 23px) 0 16px/34px 2.5px no-repeat,
             linear-gradient(180deg,var(--pink) 0 11px,transparent 11px 23px,var(--pink) 23px) 16px 0/2.5px 34px no-repeat; transform:rotate(45deg) scale(1.3); }
#fm_pop { position:absolute; left:0; right:0; top:38%; text-align:center; font-family:'Manbow Lines',Futura,sans-serif; font-size:26px; letter-spacing:2px; color:var(--cobalt); text-shadow:0 1px 0 #fff,0 0 8px #fff; opacity:0; }
#fm_pop .fm_chain { font-size:40px; color:var(--pink); }
#fm_pop.go { animation:fmpop 1.1s ease-out forwards; }
@keyframes fmpop { 0%{opacity:0;transform:translateY(12px) scale(0.8)} 15%{opacity:1;transform:translateY(0) scale(1.05)} 70%{opacity:1;transform:translateY(-18px) scale(1)} 100%{opacity:0;transform:translateY(-40px) scale(1)} }
#fm_resume { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(6,50,167,0.18); pointer-events:auto; cursor:crosshair; }
#fm_resume > div { font-family:'Manbow Lines',Futura,sans-serif; color:#fff; font-size:34px; letter-spacing:3px; text-align:center; text-shadow:0 2px 0 var(--cobalt),0 0 12px var(--cobalt); }
#fm_resume small { display:block; font-family:'futura-pt',Futura,sans-serif; font-size:13px; letter-spacing:0; font-weight:700; margin-top:6px; }
#keyhelp { position:absolute; bottom:10px; right:10px; }
#keyhelp .kbody { display:none; background:rgba(255,255,255,0.94); border:2px solid var(--cobalt); border-radius:10px; padding:8px 12px; font-size:11.5px; line-height:1.5; margin-bottom:6px; }
#keyhelp.open .kbody { display:block; }
#keyhelp button { margin:0; font-size:11px; padding:5px 9px; }
#chatbox { position:absolute; left:10px; bottom:82px; width:340px; max-width:60%; display:none;
  background:rgba(255,255,255,0.55); border:2.5px solid var(--cobalt); border-radius:10px; padding:7px 9px;
  box-shadow:3px 3px 0 rgba(242,99,116,0.5); z-index:5; }
#chatlog { text-shadow:0 1px 0 rgba(255,255,255,0.85); }
#chatlog .ts { color:#667; font-size:10px; margin-right:4px; }
#chatbox.open { display:block; }
#chatbox .tabs2 { display:flex; gap:5px; margin-bottom:4px; }
#chatbox .tabs2 button { margin:0; font-size:10px; padding:4px 7px; }
#chatlog { height:108px; overflow-y:auto; font-size:12px; padding:2px 3px; margin-bottom:4px; }
#chatlog div b { color:var(--cobalt); }
#chatbox input { width:100%; padding:5px 7px; border:1.5px solid var(--cobalt); border-radius:6px; background:rgba(226,248,255,0.9); font-family:inherit; font-size:13px; }
#statsbox { background:#fff; border:2px solid var(--cobalt); padding:10px 14px; margin-top:10px; display:none; max-width:460px; font-size:13px; }
@media (max-width: 700px) {
  .wrap { padding:6px 6px 32px; }
  h1 { font-size:20px; }
  .sub { font-size:11px; margin-bottom:8px; }
  .pod { min-width:44px; padding:2px 5px; }
  .strip { border-width:1.5px; border-radius:7px; }
  .pod span { font-size:12px; }
  .pod b { font-size:6.5px; letter-spacing:0.04em; }
  .pod small { font-size:8px; }
  #hud { left:4px; top:4px; }
  #lapbox { top:4px; right:4px; }
  #lapbox .pod { min-width:56px; }
  #touchpedal { bottom:54px !important; } #touchleft, #touchright { bottom:62px !important; }
  #msg { left:6px; right:6px; transform:none; max-width:none; font-size:11.5px; padding:4px 8px; bottom:6px; }
  #minimap { width:60px !important; height:60px !important; bottom:44px !important; right:5px !important; border-width:1.5px !important; }
  #elevstrip { height:26px !important; bottom:20px !important; left:5px !important; right:70px !important; width:calc(100% - 80px) !important; }
  #nearby { font-size:9.5px !important; min-width:80px !important; }
  #chatbox { bottom:56px !important; width:75% !important; }
  #chatlog { height:80px; font-size:11px; }
  #msg { bottom:0; left:0; right:0; background:rgba(255,255,255,0.92); font-size:9.5px; padding:3px 5px; text-shadow:none; }
  #keyhelp { bottom:26px; right:6px; }
  #keyhelp button { font-size:9px; padding:4px 6px; }
}
/* fullscreen: one dock along the bottom holds the course row and the MORE
   panel; everything else that is bottom-anchored lifts by the dock's
   measured height (--dock, set from JS) so nothing lands on top of it */
#fsbar { position:absolute; bottom:0; top:auto; left:0; right:0; display:none; z-index:8; flex-direction:column-reverse; align-items:stretch; gap:0; background:rgba(255,255,255,0.95); border-top:2px solid var(--cobalt); box-shadow:0 -4px 18px rgba(6,50,167,0.18); max-height:62vh; overflow:auto; }
#fsbar #mainbar { padding:8px 12px; margin:0; gap:8px; }
#fsbar #course { flex:0 1 auto; width:auto; max-width:280px; font-size:14px; padding:7px 10px; }
#fsbar #mainbar button.b { font-size:11px; padding:6px 10px 4px; }
#fsbar #gearpanel { margin:0; padding:0 12px 10px; border-top:1.5px dashed rgba(6,50,167,0.3); }
#fsbar #gearpanel .bar.tab { border:0; border-radius:0; padding:10px 0 0; margin:0; background:transparent; }
#fsbar #authbox, #fsbar .lb { margin:0 12px 10px; }
#stage:fullscreen { border:none; --dock:0px; }
#stage:fullscreen #fsbar { display:flex; }
#stage:fullscreen #touchpedal { bottom:calc(14px + var(--dock)) !important; }
#stage:fullscreen #touchleft, #stage:fullscreen #touchright { bottom:calc(26px + var(--dock)) !important; }
@media (max-width:700px) { .noop-fs { display:none; }
  #touchpedal { bottom:30px; left:6px; width:58px; height:58px; font-size:11px; }
  #touchleft { bottom:34px; left:74px; width:44px; height:44px; font-size:16px; }
  #touchright { bottom:34px; left:126px; width:44px; height:44px; font-size:16px; }
  .bar { gap:4px; margin:8px 0; }
  button.b { font-size:10px; padding:6px 8px 4px; border-radius:8px; }
  #course { font-size:11.5px; padding:6px 8px; box-shadow:2px 2px 0 rgba(242,99,116,0.5); }
  select, input[type=number] { font-size:12px !important; padding:4px 6px; }
  .note { font-size:10px; }
  #touchpedal,#touchleft,#touchright { display:flex !important; }
}
#touchpedal { display:none; position:absolute; bottom:14px; left:10px; width:74px; height:74px; border-radius:50%; background:rgba(242,99,116,0.85); color:#fff; font-weight:700; font-size:13px; align-items:center; justify-content:center; user-select:none; touch-action:none; }
/* steer left/right: same touch pattern as PEDAL, sits beside it so a thumb
   can reach pedal + either steering button without regripping the phone */
#touchleft,#touchright { display:none; position:absolute; bottom:26px; width:60px; height:60px; border-radius:50%; background:rgba(6,50,167,0.78); color:#fff; font-weight:700; font-size:20px; align-items:center; justify-content:center; user-select:none; touch-action:none; }
#touchleft { left:92px; }
#touchright { left:158px; }

/* arcade build: no shop chrome, the game is the page */
html.arcade .sub, html.arcade #about, html.arcade footer, html.arcade #mcnav, html.arcade .topbar { display:none !important; }
html.arcade .wrap { padding-top:8px; }
html.arcade h1 { font-size:24px; }
/* short screens (a phone held sideways): the finish card without the picture, five tiles across */
@media (max-height:520px){ #sumimg { display:none !important; } .sumgrid { grid-template-columns:repeat(5,1fr); gap:6px; } .sumgrid .t { padding:6px 4px 4px; } .sumgrid .t b { font-size:17px; } .sumgrid .t span { font-size:9px; } #sumcard { padding:12px 14px 12px; } .sumtitle { font-size:20px; } #sumbody { font-size:12px; margin-bottom:6px; } #sumawards .awards { margin-bottom:8px; } #summary { padding:2vh 8px; } }

/* compact HUD (desktop and fullscreen): the view wins. Every overlay is a
   step smaller and sits tighter to the edges; the bottom offsets carry the
   fullscreen dock height (--dock, 0 outside fullscreen) so one set of rules
   serves both. Phone keeps its own layout above. */
#stage:not(.phone) .strip { border-width:1.5px; border-radius:9px; }
#stage:not(.phone) .pod { padding:3px 9px 2px; min-width:62px; }
#stage:not(.phone) .pod b { font-size:8.5px; }
#stage:not(.phone) .pod span { font-size:16px; }
#stage:not(.phone) .pod small { font-size:9px; }
#stage:not(.phone) #hud, #stage:not(.phone) #lapbox { top:8px; }
#stage:not(.phone) #hud { left:8px; } #stage:not(.phone) #lapbox { right:8px; }
#stage:not(.phone) #nearby { font-size:10px !important; padding:3px 7px !important; margin-top:5px !important; line-height:1.35; }
#stage:not(.phone) #minimap { width:72px !important; height:72px !important; bottom:calc(38px + var(--dock,0px)) !important; right:8px !important; border-width:1.5px !important; background:rgba(255,255,255,0.7) !important; }
#stage:not(.phone) #elevstrip { height:22px !important; bottom:calc(8px + var(--dock,0px)) !important; left:8px !important; right:88px !important; width:calc(100% - 96px) !important; background:rgba(255,255,255,0.55) !important; border-radius:6px !important; }
#stage:not(.phone) #keyhelp { bottom:calc(8px + var(--dock,0px)); right:8px; }
#stage:not(.phone) #keyhelp button { font-size:10px; padding:4px 7px; }
#stage:not(.phone) #msg { top:48px; bottom:auto; font-size:12px; padding:4px 10px; border-width:1.5px; max-width:56%; }
#stage:not(.phone) #softbtn { bottom:calc(94px + var(--dock,0px)); left:8px; height:24px; font-size:10px; padding:2px 9px 0; border-radius:12px; }
#stage:not(.phone) #fm_tl { bottom:calc(60px + var(--dock,0px)); left:8px; gap:6px; }
#stage:not(.phone) #fm_switch { height:28px; font-size:11px; border-radius:14px; padding:0 10px 0 3px; gap:6px; }
#stage:not(.phone) #fm_switch .knob { width:20px; height:20px; }
#stage:not(.phone) #fm_switch .knob:after { left:4px; top:9px; width:11px; }
#stage:not(.phone) #fm_mute, #stage:not(.phone) #musicbtn { height:28px; font-size:10px; border-radius:14px; padding:2px 10px 0; }
#stage:not(.phone) #fm_seg { height:28px; border-radius:14px; }
#stage:not(.phone) #fm_seg button { font-size:10.5px; }
#stage:not(.phone) #fm_ammo { bottom:calc(62px + var(--dock,0px)); min-width:120px; padding:3px 10px 4px; }
#stage:not(.phone) #fm_ammo em { font-size:11px; } #stage:not(.phone) #fm_ammo i { font-size:16px; }
#stage:not(.phone) #fm_wave, #stage:not(.phone) #fm_boss { bottom:calc(112px + var(--dock,0px)); }
#stage:not(.phone) #fm_boss { width:240px; } #stage:not(.phone) #fm_boss b { font-size:14px; }
#stage:not(.phone) #fm_board { top:118px; font-size:10px; min-width:110px; }
#stage:not(.phone) #chatbox { bottom:calc(60px + var(--dock,0px)); }
#stage:not(.phone) #connbadge { padding:4px 8px; font-size:10px; }
#stage:not(.phone) #demohint { top:22%; }
#stage:not(.phone) #demohint .card { padding:10px 36px 10px 16px; border-width:2px; }
#stage:not(.phone) #demohint b { font-size:16px; margin-bottom:4px; }
#stage:not(.phone) #demohint .k { font-size:12px; }
#stage:not(.phone) #demohint .or { font-size:11px; margin:4px 0 1px; }
#stage:not(.phone) #demohint .b { font-size:12px; padding:6px 12px 4px; }
#stage:not(.phone) #demohint kbd { font-size:11px; min-width:16px; }

/* volume pops: hover SOUND or MUSIC and its slider rises above the button */
.volwrap { position:relative; display:inline-flex; }
.volpop { display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:7px; background:rgba(255,255,255,0.96); border:1.5px solid var(--cobalt); border-radius:10px; padding:7px 10px 5px; box-shadow:2px 2px 0 rgba(242,99,116,0.45); z-index:5; }
.volpop:after { content:''; position:absolute; top:100%; left:50%; margin-left:-6px; border:6px solid transparent; border-top-color:var(--cobalt); }
.volpop input[type=range] { width:110px; margin:0; display:block; accent-color:var(--pink); }
.volwrap:hover .volpop, .volwrap:focus-within .volpop { display:block; }
#tc_sheet .volwrap { display:flex; flex-direction:column-reverse; gap:6px; }
#tc_sheet .volpop { display:block; position:static; transform:none; margin:0; box-shadow:none; border:0; padding:0 4px; }
#tc_sheet .volpop:after { display:none; }
#tc_sheet .volpop input[type=range] { width:100%; }

/* SOUND and MUSIC as round icon buttons: a slash across the icon means off;
   the word only shows inside the phone sheet */
#stage:not(.phone) #fm_mute.iconbtn, #stage:not(.phone) #musicbtn.iconbtn { width:30px; height:30px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; position:relative; }
.iconbtn .lbl { display:none; }
.iconbtn svg { display:block; }
.iconbtn.off { color:var(--pink); border-color:var(--pink); }
.iconbtn.off:after { content:''; position:absolute; left:50%; top:50%; width:20px; height:2px; margin:-1px 0 0 -10px; background:var(--pink); transform:rotate(-45deg); border-radius:1px; }
#tc_sheet .iconbtn .lbl { display:inline; margin-left:8px; }
#tc_sheet .iconbtn:after { display:none; }
#tc_sheet .iconbtn.off .lbl:after { content:' OFF'; }
#tc_sheet .iconbtn:not(.off) .lbl:after { content:' ON'; }

#voicebtn.off { color:var(--pink); border-color:var(--pink); }