/* Orbital instrument panel: ink outlines, brass structure, arcade numerals. */
:root { --void:#060d20; --pearl:#f1f6ff; --glacial:#65dcff; --gold:#ffcb66; --orchid:#ff667d; }
body { background:#060d20; }
.arena-grid-overlay { background-image:radial-gradient(ellipse at 50% 45%, transparent 48%, rgba(2,6,18,.42)); }
.hud-panel { background:linear-gradient(150deg,rgba(21,42,69,.94),rgba(8,16,35,.94)); border:1px solid #69839c66; box-shadow:0 4px 0 #020817,0 9px 22px #0005,inset 0 1px #bce9ff26; backdrop-filter:blur(10px); }
/* Let the live stats float over the arena; keep structural/interactive panels framed. */
body > header .hud-panel:has(#hud-score),
body > aside .hud-panel:has(#radar-total-mass),
body > aside .hud-panel:has(#hud-predicted-torque) { background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none; text-shadow:0 1px 3px #020817,0 0 7px #020817; }
.mode-tab { letter-spacing:.015em!important; }
.mode-tab.active { background:linear-gradient(160deg,#31516c,#18334b); border-color:#7ce2ff; box-shadow:inset 0 2px #c8f5ff26,0 2px 0 #020817; }
#arena-controls-dock .hud-panel { border-color:#b78b4b99; }
#arena-controls-dock button { border-radius:8px; font-weight:700; min-height:44px; }
#btn-drop-piece { background-image:linear-gradient(#ffe7a8,#e7ad48)!important; color:#122238!important; border:2px solid #ffe4a2; box-shadow:0 4px 0 #805026,0 7px 15px #0006!important; font-family:'Bungee','Space Grotesk',sans-serif!important; letter-spacing:.035em!important; }
#btn-drop-piece:active { transform:translateY(2px); box-shadow:0 2px 0 #805026!important; }
#btn-worlds { color:#9cecff; border-color:#83caff66; white-space:nowrap; }
#btn-worlds { display:none!important; }
#hud-score, #hud-timer, #hud-elevation, #hud-tilt-angle { font-family:'Bungee','Space Grotesk',sans-serif!important; font-variant-numeric:tabular-nums; letter-spacing:-.025em; -webkit-text-stroke:.75px #071426; paint-order:stroke fill; text-shadow:1px 2px 0 #123d61,2px 3px 0 #020818; line-height:1.1; }
#hud-score { color:#fff0bd; font-size:30px; text-shadow:1px 2px 0 #3e2a12,2px 3px 0 #020818,0 0 12px #0009; }
#hud-timer { font-size:24px; color:#fff7df; text-shadow:1px 2px 0 #3e2a12,2px 3px 0 #020818,0 0 12px #0009; }
#hud-elevation { font-size:23px; color:#ffd878!important; text-shadow:1px 2px 0 #3e2a12,2px 3px 0 #020818,0 0 12px #0009; }
#hud-tilt-angle { font-size:16px; text-shadow:1px 2px 0 #071426,2px 3px 0 #020818,0 0 9px #0009; }
#hud-clock-label { color:#d7d0bf!important; }
#radar-total-mass, #radar-com-offset, #radar-stability-pct { font-size:13px; text-shadow:1px 2px 0 #030817,0 0 8px #000b; }
#hud-harmony-badge { color:#d2f9ff; background:#23536d; border:1px solid #70d4e755; text-shadow:0 1px #030916; }
#active-artifact-card { background:#071126e6; border-color:#6195ba66; box-shadow:inset 0 1px #def6ff17,0 2px 0 #020817; }
#active-piece-name { font-family:'Bungee','Space Grotesk',sans-serif; font-size:13px; letter-spacing:.01em; }
#hud-piece-counter { background:#2b425e; color:#e1f4ff; }
button:focus-visible, input:focus-visible { outline:2px solid #fff0bc; outline-offset:3px; }
.score-floater { width:max-content; max-width:290px; text-align:center; transform-origin:50% 80%; animation:comic-score 1.15s cubic-bezier(.15,.7,.25,1) forwards; }
.score-number { display:block; font-family:'Bungee','Space Grotesk',sans-serif; font-size:clamp(25px,3vw,43px); line-height:1.08; color:var(--score-color,#ffe4a0); -webkit-text-stroke:2px #081126; paint-order:stroke fill; text-shadow:2px 3px 0 #132642,4px 5px 0 #020713,0 0 14px #0007; transform:rotate(-5deg); }
.score-caption { display:inline-block; margin-top:6px; padding:4px 8px; border:1px solid #e1f7ff99; border-radius:4px; background:#10223bed; box-shadow:2px 3px #03091d; color:#edf8ff; font-size:10px; font-weight:700; letter-spacing:.045em; }
@keyframes comic-score { 0% { opacity:0; transform:translate(-50%,-45%) scale(.55) rotate(-5deg); } 16% { opacity:1; transform:translate(-50%,-55%) scale(1.12) rotate(1deg); } 30% { transform:translate(-50%,-60%) scale(1); } 76% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-105%) scale(.96); } }
#world-dialog { width:min(650px,calc(100vw - 24px)); color:#f1f6ff; background:linear-gradient(145deg,#1b304b,#080f24); border:1px solid #81a7c5; border-radius:18px; box-shadow:0 9px 0 #020615,0 35px 90px #000a; padding:24px; }
#world-dialog::backdrop { background:#020614b8; backdrop-filter:blur(7px); }
.world-heading { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.world-heading h2 { font-family:'Bungee','Space Grotesk',sans-serif; font-size:22px; margin:0; }
.world-heading button { width:36px; height:36px; background:#ffffff10; border:1px solid #ffffff30; border-radius:8px; }
.world-intro { color:#b5c9dc; font-size:13px; margin:10px 0 22px; max-width:52ch; }
.world-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.world-option { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; min-height:215px; background:#071326; border:1px solid #6e9ac355; border-radius:12px; text-align:center; cursor:pointer; transition:border-color .15s,background .15s; }
.world-option:hover { background:#152e49; border-color:#94e4ff; }
.world-option[aria-pressed=true] { border-color:#f7d58d; }
.world-option strong { font-family:'Bungee','Space Grotesk',sans-serif; font-size:14px; }
.world-option small { font-size:11px; line-height:1.4; color:#bed1e4; }
.world-option em { margin-top:auto; font-size:11px; font-style:normal; font-weight:700; color:#ffe2a1; }
.planet-icon { width:72px; height:72px; border-radius:50%; box-shadow:inset -18px -8px 22px #01091be6,0 0 22px #65caff25; background:repeating-linear-gradient(15deg,#9e764b 0 5px,#c89e67 7px 10px,#deb675 14px 17px); }
.planet-icon.ice { background:repeating-linear-gradient(-35deg,#e2e8e6 0 8px,#8cabb3 9px 10px,#d8e3df 11px 20px); }
.planet-icon.ember { background:radial-gradient(ellipse at 38% 30%,#ffbc72,#b64e35 30%,#652b35 70%); }
@media(max-width:1100px) and (min-width:641px) { body>aside { top:140px!important; transform:scale(.88); transform-origin:top left; } body>aside:last-of-type { transform-origin:top right; } }
@media(max-width:640px) {
 #hud-score { font-size:23px; } #hud-timer { font-size:20px; } #hud-elevation { font-size:18px; } #hud-tilt-angle { font-size:14px; }
 #radar-total-mass, #radar-com-offset, #radar-stability-pct { font-size:12px; }
 #hud-speed-mult { display:none; } #hud-harmony-badge { font-size:8px; }
 #active-piece-name { font-size:10px!important; }
 #btn-drop-piece { font-size:12px; }
 #arena-controls-dock button { font-size:9px; }
 .score-floater { max-width:230px; } .score-number { font-size:29px; } .score-caption { font-size:8px; }
 #world-dialog { padding:18px; } .world-grid { grid-template-columns:1fr; gap:9px; }
 .world-option { min-height:91px; display:grid; grid-template-columns:58px 1fr; grid-template-rows:auto auto auto; text-align:left; padding:10px 14px; gap:3px 13px; align-items:center; }
 .planet-icon { width:55px; height:55px; grid-row:1/4; }
 .world-option strong { font-size:12px; } .world-option em { margin:0; }
}
@media(prefers-reduced-motion:reduce) { .score-floater { animation:score-still .9s linear forwards!important; } @keyframes score-still { 0%,85% { opacity:1; transform:translate(-50%,-50%); } 100% { opacity:0; transform:translate(-50%,-50%); } } }

/* Let the arena carry the interface: keep the text, lose the floating cards. */
body > header > div > .hud-panel,
body > aside .hud-panel,
#arena-controls-dock > div.hud-panel {
 background:transparent!important; border-color:transparent!important; box-shadow:none!important; backdrop-filter:none!important;
}
#active-artifact-card { background:transparent!important; border-color:transparent!important; box-shadow:none!important; }
#upcoming-queue-list > div { background:transparent!important; border-color:transparent!important; padding-left:0; padding-right:0; }
#ai-thought-log, #input-architect-name { background:transparent!important; border-color:transparent!important; box-shadow:none!important; }
body > aside:first-of-type .grid > div { background:transparent!important; border-color:transparent!important; padding-left:0; padding-right:0; }
#hud-piece-counter, #hud-harmony-badge { background:transparent!important; border-color:transparent!important; box-shadow:none!important; }
#hud-piece-counter { padding-left:0!important; padding-right:0!important; }
#hud-harmony-badge { display:inline-flex; justify-content:center; min-width:8.5em; padding-left:0!important; padding-right:0!important; white-space:nowrap; }
#btn-audio-toggle, #btn-copy-challenge { background:transparent!important; border-color:transparent!important; box-shadow:none!important; }
.mode-tab.active { background:transparent!important; border-color:transparent!important; box-shadow:none!important; color:#fff0bd!important; text-decoration:underline; text-decoration-color:#ffcb66; text-decoration-thickness:2px; text-underline-offset:6px; }
#leaderboard-list > div { background:transparent!important; border-color:transparent!important; padding-left:0; padding-right:0; }
#leaderboard-list > div > div:first-child > span { color:#ffe08a!important; }
#leaderboard-list > div > div:first-child > div > div:first-child { color:#fff8e8!important; }
#leaderboard-list > div > div:first-child > div > div:last-child { color:#d0d6df!important; }
#leaderboard-list > div > div:last-child > div:first-child { color:#fff0bd!important; font-size:14px; text-shadow:1px 2px #030817,0 0 8px #000b; }
#leaderboard-list > div > div:last-child > div:last-child { color:#f2d58e!important; }
#arena-controls-dock button { background:transparent!important; background-image:none!important; border-color:transparent!important; box-shadow:none!important; }
#arena-controls-dock button { text-shadow:0 1px 3px #020817,0 0 7px #020817; }
#arena-controls-dock #btn-drop-piece { color:#fff0bd!important; font-size:15px; letter-spacing:.07em!important; text-shadow:0 1px 3px #020817,0 0 10px #000!important; }
#arena-controls-dock #btn-drop-piece:active { transform:translateY(1px); }
#btn-audio-toggle, #btn-copy-challenge, #arena-controls-dock button { transition:color .15s ease,text-shadow .15s ease; }
#btn-audio-toggle:hover, #btn-copy-challenge:hover, #arena-controls-dock button:hover { color:#fff0bd!important; text-shadow:0 0 10px #ffcf67a8; }
#arena-controls-dock button:focus-visible, #btn-audio-toggle:focus-visible, #btn-copy-challenge:focus-visible, .mode-tab:focus-visible { outline:2px solid #fff0bc; outline-offset:2px; }

/* Fixed HUD columns keep changing score digits and harmony copy from shifting the clock. */
body > header > div > .hud-panel:has(#hud-score) {
 display:grid!important; grid-template-columns:185px 112px 180px 110px 104px; gap:0 14px!important; align-items:center;
}
body > header > div > .hud-panel:has(#hud-score) > div:nth-child(2),
body > header > div > .hud-panel:has(#hud-score) > div:nth-child(4),
body > header > div > .hud-panel:has(#hud-score) > div:nth-child(6) { display:none!important; }
body > header > div > .hud-panel:has(#hud-score) > div:nth-child(1) { grid-column:1; }
body > header > div > .hud-panel:has(#hud-score) > div:nth-child(3) { grid-column:2; }
body > header > div > .hud-panel:has(#hud-score) > div:nth-child(5) { grid-column:3; }
body > header > div > .hud-panel:has(#hud-score) > div:nth-child(7) { grid-column:4; }
body > header > div > .hud-panel:has(#hud-score) > #btn-audio-toggle { grid-column:5; justify-self:end; }
#hud-score { display:block; width:8ch; white-space:nowrap; text-align:left; }
#hud-timer { display:block; width:6ch; white-space:nowrap; text-align:right; }
#hud-elevation { display:block; width:6.5ch; white-space:nowrap; }

/* Floating score captions read as a brief label, never as another card. */
.score-caption { display:block; width:max-content; max-width:100%; margin:5px auto 0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#fff8e8; font-size:14px; line-height:1.35; text-shadow:0 1px 3px #020817,0 0 8px #000; }
.score-floater[data-exit="0"] { animation-name:score-exit-left; }
.score-floater[data-exit="1"] { animation-name:score-exit-right; }
.score-floater[data-exit="2"] { animation-name:score-exit-center; }
@keyframes score-exit-left { 0% { opacity:0; transform:translate(-50%,-45%) scale(.88); } 16% { opacity:1; transform:translate(calc(-50% - 8px),-56%) scale(1.04); } 78% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% - 26px),-104%) scale(.96); } }
@keyframes score-exit-right { 0% { opacity:0; transform:translate(-50%,-45%) scale(.88); } 16% { opacity:1; transform:translate(calc(-50% + 8px),-56%) scale(1.04); } 78% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + 26px),-104%) scale(.96); } }
@keyframes score-exit-center { 0% { opacity:0; transform:translate(-50%,-45%) scale(.88); } 16% { opacity:1; transform:translate(-50%,-58%) scale(1.05); } 78% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-112%) scale(.96); } }
.score-floater[data-direction="down"][data-exit="0"] { animation-name:score-exit-down-left; }
.score-floater[data-direction="down"][data-exit="1"] { animation-name:score-exit-down-right; }
.score-floater[data-direction="down"][data-exit="2"] { animation-name:score-exit-down-center; }
@keyframes score-exit-down-left { 0% { opacity:0; transform:translate(-50%,-45%) scale(.88); } 16% { opacity:1; transform:translate(calc(-50% - 8px),-56%) scale(1.04); } 78% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% - 26px),12%) scale(.96); } }
@keyframes score-exit-down-right { 0% { opacity:0; transform:translate(-50%,-45%) scale(.88); } 16% { opacity:1; transform:translate(calc(-50% + 8px),-56%) scale(1.04); } 78% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + 26px),12%) scale(.96); } }
@keyframes score-exit-down-center { 0% { opacity:0; transform:translate(-50%,-45%) scale(.88); } 16% { opacity:1; transform:translate(-50%,-58%) scale(1.05); } 78% { opacity:1; } 100% { opacity:0; transform:translate(-50%,20%) scale(.96); } }

@media(max-width:640px) {
 body > header > div > .hud-panel:has(#hud-score) { width:100%; grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,.9fr) 28px; gap:0 5px!important; padding:.3rem .35rem!important; }
 body > header > div > .hud-panel:has(#hud-score) > div:nth-child(4),
 body > header > div > .hud-panel:has(#hud-score) > div:nth-child(6) { display:none!important; }
 body > header > div > .hud-panel:has(#hud-score) > div:nth-child(5) { grid-column:2; }
 body > header > div > .hud-panel:has(#hud-score) > div:nth-child(7) { grid-column:3; }
 body > header > div > .hud-panel:has(#hud-score) > #btn-audio-toggle { grid-column:4; }
 body > header > div > .hud-panel:has(#hud-score) > div:nth-child(1) { min-width:0; gap:.3rem!important; }
 body > header > div > .hud-panel:has(#hud-score) > div:nth-child(1) > div:first-child { display:none!important; }
 #hud-tilt-angle { width:4ch; text-align:right; }
 #hud-score { width:100%; font-size:20px; }
 #hud-timer { width:100%; font-size:18px; }
 #hud-harmony-badge { min-width:0; font-size:7px!important; }
 #btn-audio-toggle { width:34px; min-width:34px; min-height:36px; padding:.35rem!important; }
 #arena-controls-dock #btn-drop-piece { font-size:12px; }
 .score-caption { font-size:12px; }
 #leaderboard-list > div > div:last-child > div:first-child { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .score-floater[data-exit] { animation:score-still .9s linear forwards!important; } }