/* Arena edition: legible HUDs over distinct environments. */
body{transition:background .4s;color:var(--ink)}
.tiny{writing-mode:horizontal-tb;max-width:90px;font-size:7px;letter-spacing:1.2px;line-height:1.5}
#world{outline:none;touch-action:none}
h1{font-size:clamp(56px,7.2vw,106px);line-height:.9;letter-spacing:-1.6px}
.intro{max-width:330px;font-size:13px;line-height:1.65}
.eyebrow{line-height:1.5}
.controls{gap:11px;flex-wrap:wrap}
.controls kbd{font-size:7px;white-space:nowrap}
.controls span{white-space:nowrap}
.footer-note{white-space:nowrap;margin-left:20px}
.stage-caption{bottom:16%;left:55%;display:block;padding:9px 12px;background:#f7f6eddb;border:1px solid #ffffff50;border-radius:8px;backdrop-filter:blur(8px)}
.stage-caption>.live-dot{display:inline-block;margin-right:7px;vertical-align:middle}
.stage-caption>span:last-child{position:static;display:block;margin:6px 0 0 13px;font-size:7px;letter-spacing:1px}
.map-card{background:#fff9;box-shadow:0 3px 0 #182b4410}
.map-card.active{box-shadow:0 3px 0 #cc593433}
.map-card .mini{font-family:Arial,sans-serif}
.floating-note{top:23%;right:4%;font-size:9px;letter-spacing:1.4px}
.icon{transition:background .2s,box-shadow .2s}
.icon.active{background:#fff9;color:var(--coral);box-shadow:0 0 0 3px #f1644818}
.icon[aria-pressed="false"]{opacity:.62}
#hazardHint{position:fixed;right:3%;bottom:124px;font-size:8px;font-weight:800;letter-spacing:.7px;background:#f8f5edee;padding:9px 12px;border-radius:8px;box-shadow:0 4px 18px #18243c13}
#hazardHint>span{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;background:#ff693d;color:white;border-radius:5px;font-size:12px;margin-right:6px}
#spectatorBanner{position:fixed;left:50%;bottom:94px;transform:translateX(-50%);padding:14px 25px;max-width:80vw;text-align:center;border-radius:12px;background:#1d2843ed;color:#fff;box-shadow:0 12px 35px #11182730;border:1px solid #ffffff35;pointer-events:none}
#spectatorBanner b{display:block;font-size:11px;letter-spacing:1px}
#spectatorBanner span{display:block;font-size:11px;opacity:.75;margin-top:5px}
body.spectating #hazardHint{display:none}
body.spectating .controls{opacity:.45}
#playersHud .player-hud{min-width:164px}
.player-hud.dead{opacity:.62}
.player-hud.dead small{font-size:7px}
.panel{backdrop-filter:blur(12px)}
.panel h2{font-size:44px}
.rank-row strong{text-align:right;white-space:nowrap}
.rank-row strong small{display:block;font-size:9px;font-weight:500;margin-top:3px}
.score-rules{font-size:10px;color:#657085;padding-top:10px;border-top:1px solid #25324b18;line-height:1.6}
/* Orbital scenery has a deep starfield; keep menu chrome above it readable. */
body:is([data-theme="orbit"],[data-theme="lava"]) header .brand,
body:is([data-theme="orbit"],[data-theme="lava"]) #menu,
body:is([data-theme="orbit"],[data-theme="lava"]) footer{color:#edf2ff}
body:is([data-theme="orbit"],[data-theme="lava"]) .intro{color:#c1cce0}
body:is([data-theme="orbit"],[data-theme="lava"]) h1 em{color:#73e5df}
body:is([data-theme="orbit"],[data-theme="lava"]) .demo-pill{border-color:#d6e5ff40;color:#d9e7ff}
body:is([data-theme="orbit"],[data-theme="lava"]) .icon{background:#24314bc9;border-color:#a4c6e544;color:#d2e3f7}
body:is([data-theme="orbit"],[data-theme="lava"]) .icon.active{color:#73e5df;box-shadow:0 0 0 3px #73e5df15}
body:is([data-theme="orbit"],[data-theme="lava"]) .brand-icon{background:#7765cb}
body:is([data-theme="orbit"],[data-theme="lava"]) #menu .primary{background:#7461c4;box-shadow:0 4px 0 #493c84}
body:is([data-theme="orbit"],[data-theme="lava"]) #menu .secondary{background:#1e2b42d9;border-color:#afc9e344;color:#f0f4ff}
body:is([data-theme="orbit"],[data-theme="lava"]) .map-card{background:#25324bd6;border-color:#91abc03d;color:#dce5f4}
body:is([data-theme="orbit"],[data-theme="lava"]) .map-card.active{border-color:#7fe5df;background:#30435de8;box-shadow:0 3px 0 #7fe5df33}
body:is([data-theme="orbit"],[data-theme="lava"]) .map-card small{color:#b7c6dd}
body:is([data-theme="orbit"],[data-theme="lava"]) .stage-caption>span:last-child{color:#b8c9e1}
body:is([data-theme="orbit"],[data-theme="lava"]) .floating-note span{color:#72e6df}
body:is([data-theme="orbit"],[data-theme="lava"]) footer{border-top-color:#ccdfff30}
body:is([data-theme="orbit"],[data-theme="lava"]) kbd{border-color:#c2d6ef40;background:#34455d80;color:#edf2ff}
@media(max-height:760px) and (min-width:800px){h1{font-size:64px;line-height:.88;margin:16px 0}.intro{font-size:11px}.stage-caption{bottom:16%}#menu .primary,#menu .secondary{padding:13px 19px}}
@media(max-width:1100px){.footer-note{display:none}.controls{gap:8px}.controls kbd{font-size:6.5px}#hazardHint{max-width:240px}}
@media(max-width:800px){h1{font-size:53px;max-width:260px}.intro{font-size:11px;max-width:250px}.stage-caption{left:48%;bottom:17%}.floating-note{display:none}#spectatorBanner{bottom:85px;width:88%;max-width:88vw;padding:12px}#spectatorBanner b{font-size:9px}#spectatorBanner span{font-size:10px}#hazardHint{right:3%;bottom:143px;max-width:190px;font-size:7px}.controls{gap:4px 8px}.controls kbd{font-size:5.8px}.controls span{font-size:5.8px}#playersHud .player-hud{min-width:136px}#menu .eyebrow{max-width:270px;font-size:8px}}
@media(prefers-reduced-motion:reduce){body,.primary,.secondary,.icon{transition:none}}
@media(max-width:360px){.brand{font-size:15px;letter-spacing:-.7px}.brand-icon{width:30px;height:30px;font-size:27px;line-height:26px}.tools{gap:6px}.tools .icon{width:32px;height:32px}}
body[data-theme="lava"] h1 em{color:#ffba76}
body[data-theme="lava"] .intro{color:#e3c8c0}
body[data-theme="lava"] .brand-icon{background:#d46a43}
body[data-theme="lava"] #menu .primary{background:#d96d46;box-shadow:0 4px 0 #8f3e2a}
body[data-theme="lava"] .map-card{background:#412d3cd6}
body[data-theme="lava"] .map-card.active{border-color:#ffb76f;background:#5b3b43e8;box-shadow:0 3px 0 #ffb76f33}
body[data-theme="lava"] .floating-note span,body[data-theme="lava"] .icon.active{color:#ffb76f}
body[data-theme="lava"] .icon.active{box-shadow:0 0 0 3px #ffb76f20}
body[data-theme="lava"] .stage-caption>span:last-child{color:#e4c4b8}
body:is([data-theme="orbit"],[data-theme="lava"]) .stage-caption{background:#141d31de;border-color:#ffffff20}
