/* Reuse the original midnight-glass arena, mint/violet platforms and grid. */
.color-readback{--color-shot-offset:24px;margin:18px 0 24px;color:#dceff7}
.color-arrival-embedded.color-arrival{height:clamp(260px,32vw,350px);margin:0 -38px;border:0;border-radius:0;box-shadow:none;grid-template-rows:minmax(0,1fr)}
.color-arrival-embedded .arrival-topline{position:absolute;z-index:4;top:10px;left:20px;right:20px;height:22px;padding:0;border:0;background:transparent}
.color-arrival-embedded .arrival-arena{grid-row:1;height:100%}
.color-arrival-embedded .arrival-identity{position:absolute;bottom:0;left:0;right:0;padding:0 12px 5px}
.color-arrival-embedded .arrival-kicker{display:none}
.color-arrival-embedded .arrival-name{font-size:21px;margin:0}
.color-arrival-embedded .arrival-rule{margin-top:5px}
.color-stage-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.color-stage-heading strong{font:500 .64rem var(--mono);letter-spacing:.14em;color:#8ae8ce}
.color-stage-heading span{font:400 .61rem/1.7 var(--mono);color:#9fb8cb;text-align:right}
.color-fighters{display:grid;grid-template-columns:1fr 1fr;gap:72px;padding-bottom:14px}
.color-fighters>div{min-width:0;padding-bottom:12px;border-bottom:3px solid #78efd06b}
.color-fighters>div:last-child{border-color:#b59afa73}
.color-role{display:block;font:400 .56rem var(--mono);letter-spacing:.12em;color:#8fb0b9;margin-bottom:7px}
.color-outcome{display:inline-block;margin-left:10px;padding:3px 8px;border:1px solid #79efd077;border-radius:5px;font:600 .66rem/1.3 var(--sans,system-ui);letter-spacing:.06em;color:#b4ffe6;background:#79efd018}
.color-outcome[data-result=lose]{color:#ffd3dc;border-color:#ff9ca766;background:#ff9ca714}
.color-fighters strong{display:block;color:#dcfff3;font-size:1.03rem;line-height:1.5;overflow-wrap:anywhere}
.color-fighters>div:last-child strong{color:#e1d8ff}
.color-score-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.color-score-heading .mono{font-size:.66rem;color:#b7cbd9;white-space:nowrap}
.color-health{height:7px;margin-top:10px;background:#203344;border-radius:8px;overflow:hidden}.color-health i{display:block;width:100%;height:100%;background:#79efd0}.color-fighters>div:last-child .color-health i{background:#b59afa}
.color-fighters>div:has(.color-health:not([hidden])){border-bottom-color:transparent;padding-bottom:2px}
.color-fighters small{display:block;margin-top:6px;font-size:.68rem;line-height:1.7;color:#96b2c3}
.color-fighters .color-assets{color:#cfbf9a;font-size:.62rem}
.color-screen{position:relative;isolation:isolate;height:clamp(260px,32vw,350px);margin:0 -38px;overflow:hidden;background:radial-gradient(ellipse at 24% 90%,#1ad3b414,transparent 38%),radial-gradient(ellipse at 76% 80%,#8350fa21,transparent 40%)}
.color-screen .arena-horizon{top:52%}.color-screen .arena-city{inset:24% 9% 48%}.color-screen .arena-grid{inset:53% -40% -65%}
.color-actor{position:absolute;bottom:14%;width:22%;height:64%;display:grid;place-items:center;z-index:3;transform-origin:center bottom}
.color-actor-0{left:12.5%}.color-actor-1{right:12.5%}
.color-actor img,.color-actor canvas{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center bottom;image-rendering:pixelated;filter:drop-shadow(0 0 14px #68f8d51a)}
.color-actor-1 img,.color-actor-1 canvas{filter:drop-shadow(0 0 14px #a78aff24)}
.color-actor span{font:600 6rem var(--mono);color:#97c6c6}
.color-shot{position:absolute;width:72px;height:72px;top:48%;z-index:5;image-rendering:pixelated;filter:drop-shadow(0 0 9px #a8fff18c)}
.color-burst{position:absolute;top:48%;width:80px;height:80px;background:var(--burst-color,#afffe4);transform:translate(-50%,-50%);clip-path:polygon(45% 0,55% 30%,80% 10%,70% 40%,100% 50%,70% 60%,90% 90%,55% 75%,45% 100%,35% 70%,10% 90%,25% 60%,0 50%,30% 40%,15% 10%,40% 30%);opacity:.8;z-index:6}
#color-screen-label{position:absolute;inset:35% 25% auto;text-align:center;font:600 clamp(1rem,3vw,1.7rem)/1.5 var(--mono);letter-spacing:.1em;color:#c0e8e5;z-index:4;text-shadow:0 0 25px #71dbd36b}
.color-damage{position:absolute;top:22%;transform:translateX(-50%);font:600 1.7rem var(--mono);color:#fff0b4;z-index:8;text-shadow:0 2px 8px #000}
.color-readback[data-phase=complete][data-inferred=true] #color-screen-label{color:#dfd4ff;text-shadow:0 0 25px #aa7cea88}
.color-playback{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
.readback-panel .color-playback p{margin:0;font-size:.8rem;color:#c1d4de;line-height:1.7}
#color-stage-round{font-size:.65rem;white-space:nowrap;color:#8ed6c1}
.color-playback-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.color-playback-controls button{font-size:.85rem;border-radius:30px;padding:12px 22px;min-width:112px;color:#c2d2dd;background:transparent;border:1px solid #8098ae66}
.color-playback-controls #color-pause{color:#072c26;background:linear-gradient(#a2ffe4,#58cfb4);border-color:#a5ffe2;font-weight:600}
.color-playback-controls label{display:flex;align-items:center;gap:8px;color:#a0b7c7;font-size:.7rem;margin:0}
.color-playback-controls select{border-radius:8px;padding:8px;background:#101f31;color:#e7f7fa;border:1px solid #7898ac55;min-height:44px}
.color-playback-controls button:disabled{opacity:.4;cursor:not-allowed}
.color-timeline{display:flex;align-items:center;gap:14px;margin-top:21px}
.color-timeline input{flex:1;min-width:0;accent-color:#82e9ce;padding:0;height:28px;background:transparent}
.color-timeline span{color:#88a2b4;font-size:.65rem;min-width:85px}
.readback-panel .color-stage-note{font-size:.67rem;color:#91aaba;line-height:1.8;margin:10px 0 0}
.color-readback [hidden]{display:none!important}
body:has(#color-readback-dialog[open]){overflow:hidden}
.color-readback-launcher{margin-top:18px}.color-readback-launcher[hidden]{display:none}.color-readback-launcher button{min-height:44px;width:100%;padding:10px 16px;border:1px solid #88cdbb77;border-radius:10px;background:#8be7cb14;color:#b6f5df;font-size:.78rem}
dialog.color-readback-dialog{width:min(1140px,calc(100vw - 48px));max-height:calc(100dvh - 40px);border-radius:26px}
.color-dialog-header{padding:32px 38px 0}
.color-dialog-header button{flex-shrink:0;font:300 1.8rem/1 system-ui;background:transparent;color:#bfcede;width:44px;border-radius:50%;border:1px solid #b6ccdf30}
.color-dialog-header button:hover{background:#d4ecff14;color:#fff}
.color-dialog-content{padding:0 38px 24px;overflow:hidden}
.color-dialog-content .readback-panel{margin:0;padding:0;border:0}
#readback-result{margin:14px 0;padding:12px 14px;background:#b5cfe509;border:1px solid #a4c6d62a;border-radius:9px}
#readback-result strong{font-size:.8rem;color:#d0deea}#readback-result p{margin:7px 0;font-size:.68rem}
#readback-result-words{display:block;font:400 .76rem/1.7 var(--mono);color:#d2e7e8;overflow-wrap:anywhere}
@media(max-width:760px){
 body:has(#color-readback-dialog[open]) #mobile-selection{display:none}
 dialog.color-readback-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);border-radius:20px}
 .color-dialog-header{padding:22px 18px 0;gap:10px}.color-dialog-header>div:first-child{padding-left:12px}
 .color-dialog-header h2{font-size:1.2rem;letter-spacing:.1em}.color-dialog-header p{font-size:.78rem;letter-spacing:.12em}
 .color-dialog-content{padding:0 18px 22px}.color-readback{--color-shot-offset:20px;margin-top:20px}
 .color-stage-heading{gap:8px;margin-bottom:17px}.color-stage-heading span{font-size:.52rem;max-width:65%}
 .color-fighters{gap:24px;padding-bottom:8px}.color-fighters strong{font-size:.86rem}.color-fighters small{font-size:.59rem}
 .color-score-heading{display:block}.color-score-heading .mono{display:block;margin-top:5px;font-size:.61rem}.color-damage{font-size:1.3rem}
 .color-screen{height:235px;margin:0 -18px}.color-arrival-embedded.color-arrival{height:235px;margin:0 -18px}.color-arrival-embedded .arrival-topline{left:16px;right:16px;top:7px}.color-arrival-embedded .arrival-name{font-size:18px}.color-actor{width:29%;height:60%;bottom:16%}.color-actor-0{left:9%}.color-actor-1{right:9%}
 .color-actor span{font-size:4rem}.color-shot{width:56px;height:56px}.color-burst{width:64px;height:64px}
 .readback-panel .color-playback p{font-size:.69rem}#color-stage-round{font-size:.58rem}
 .color-playback-controls{gap:8px;margin-top:12px}.color-playback-controls button{min-width:95px;padding:11px 15px;font-size:.75rem}
 .color-playback-controls label{gap:5px}.color-playback-controls select{padding:7px}
 .color-timeline{gap:8px;margin-top:16px}.color-timeline span{font-size:.6rem;min-width:75px}
 .readback-panel .color-stage-note{font-size:.61rem}
}