:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#eef4fb;background:#080d17;--cyan:#6debdc;--orange:#ffb367}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.4}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #fff;outline-offset:4px}main{max-width:1200px;margin:auto;padding:22px 30px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:15px}.brand{font-size:24px;font-weight:900;letter-spacing:2px;color:white;text-decoration:none}.brand span{color:var(--cyan)}.brand small{display:block;font-size:9px;letter-spacing:6px;margin-top:5px}.prototype{font-size:10px;letter-spacing:3px;color:#9baabd}.prototype b{display:block;font-size:9px;letter-spacing:1.4px;margin-top:7px;color:#d9af76}.quiet{background:transparent;border:1px solid #354051;border-radius:6px;padding:10px 14px;font-size:12px}.battle{height:740px;position:relative;isolation:isolate;border:1px solid #394151;border-radius:12px;overflow:hidden;background:#101c30}.arena-backdrop,.shade{position:absolute;inset:0;z-index:-2}.arena-backdrop{background:radial-gradient(ellipse at 50% 50%,#34446d 0, #152b43 35%,#0c1527 75%);background-size:cover;background-position:center;transition:background-image .3s}.shade{z-index:-1;background:linear-gradient(#060c19ee,#07101a66 30%,#060e1a66 60%,#080e1bf5 80%)}.opponent-row,.player-row{position:absolute;left:18%;right:5%;display:grid;grid-template-columns:1fr 90px;gap:10px 28px;align-items:center}.opponent-row{top:18px}.player-row{bottom:22px}.row-label{font-size:9px;letter-spacing:2px;color:#aebdce;grid-column:1/-1}.row-label small{float:right;font-size:8px;color:#8093a9;letter-spacing:1px}.hand{display:flex;justify-content:center;gap:12px}.card-back{border:5px solid #000;background:#102344;position:relative;border-radius:7px;overflow:hidden;display:grid;place-items:center;box-shadow:2px 3px 0 #02050b,4px 5px 0 #34415a}.card-back img{width:85%;mix-blend-mode:lighten;pointer-events:none}.opponent-row .card-back{width:65px;height:87px}.deck .card-back{width:61px;height:82px}.deck small{display:block;font-size:8px;letter-spacing:1px;margin-top:9px;color:#a9b6c9;text-align:center}.deck{justify-self:center}.scoreboard{position:absolute;top:158px;left:19%;right:14%;display:grid;grid-template-columns:1fr 72px 1fr;gap:18px}.hp-line{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px;color:#bcc9db}.hp-line strong{font-size:18px;letter-spacing:0;color:#fff}.health{height:8px;background:#02080e;border:1px solid #546172;margin-top:8px;transform:skew(-15deg)}.health div{height:100%;background:var(--orange);transition:width .2s}.cpu-score .health div{background:var(--cyan)}h2{font-size:15px;font-weight:700;margin:10px 0}.player-score h2{color:var(--orange)}.cpu-score h2{color:var(--cyan)}.versus{text-align:center;font-size:27px;font-style:italic;color:#b5c3d8}.versus small{display:block;font-size:8px;letter-spacing:1px;font-style:normal;margin-top:8px}.actions{position:absolute;left:3%;top:262px;display:grid;gap:16px}.actions button{background:#0d1929d9;border:1px solid #566277;border-radius:10px;width:75px;height:87px;font-size:9px;letter-spacing:1px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.actions button:hover:not(:disabled){border-color:var(--orange);background:#293147}.actions span{font-size:45px;color:#ffdb6b;line-height:42px}.actions svg{width:29px;height:34px;fill:none;stroke:#ff7d85;stroke-width:4}.fighters{position:absolute;left:20%;right:14%;top:270px;display:flex;justify-content:space-between}.fighter{width:34%;position:relative;text-align:center}.fighter img{width:100%;height:185px;object-fit:contain;filter:drop-shadow(0 6px 10px #000);border-radius:5px}.platform{height:13px;background:#ffb36730;border:1px solid #ffb36770;border-radius:50%;margin-top:5px;box-shadow:0 0 22px #ffb36740}.cpu .platform{background:#6debdc30;border-color:#6debdc70;box-shadow:0 0 22px #6debdc40}.status{height:24px;color:#a1e9ff;font-size:10px;font-weight:bold}.arena-message{position:absolute;top:505px;left:14%;right:9%;text-align:center}#turn{font-size:12px;font-weight:bold;letter-spacing:1px}#active{font-size:10px;color:#adc2d2;margin-top:8px}.card{width:125px;height:132px;background:#101d2b;border:1px solid #657583;border-radius:8px;overflow:hidden;text-align:left;padding:0;transition:transform .15s,box-shadow .15s;position:relative}.card:hover:not(:disabled){transform:translateY(-8px);box-shadow:0 0 20px #6debdc33;border-color:var(--cyan)}.card img{width:100%;height:63px;object-fit:cover;display:block}.card b{display:block;font-size:12px;padding:7px 8px 0}.card small{display:block;font-size:9px;line-height:1.3;padding:4px 8px;color:#aabed0}.card .dev{position:absolute;right:4px;top:4px;background:#05121de6;font-size:7px;padding:3px;letter-spacing:1px}.below{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;margin:24px 0}.eyebrow{font-size:9px;letter-spacing:2px;color:#8b9bb0}ol{list-style:none;padding:0;margin:10px 0;font-size:11px;line-height:1.8;color:#c5ceda}li:last-child{color:var(--cyan)}details{font-size:11px;line-height:1.7;color:#9eadc0}summary{cursor:pointer;color:#d4dbe5}select{background:#172339;color:white;border:1px solid #586476;border-radius:4px;padding:5px;margin-left:8px}footer{display:flex;justify-content:space-between;border-top:1px solid #253044;padding-top:17px;font-size:8px;letter-spacing:2px;color:#748499}footer span{letter-spacing:0}.outcome{position:absolute;inset:0;z-index:4;background:#050b17dd;display:grid;place-items:center;text-align:center;backdrop-filter:blur(5px)}.outcome[hidden]{display:none}.outcome span{font-size:10px;letter-spacing:3px;color:var(--cyan)}.outcome h2{font-size:42px}.outcome p{font-size:13px;color:#aebed1}.outcome button{padding:12px 24px;border:0;border-radius:6px;background:var(--cyan);color:#071422;font-weight:bold}.lunge{animation:lunge .35s}.cpu.lunge{animation:cpu-lunge .35s}.hit{animation:hit .35s}@keyframes lunge{50%{transform:translateX(25px)}}@keyframes cpu-lunge{50%{transform:translateX(-25px)}}@keyframes hit{50%{filter:brightness(2);transform:translateY(-4px)}}@media(max-width:650px){main{padding:12px 10px}header{margin-bottom:14px}.brand{font-size:18px}.brand small{font-size:7px;letter-spacing:4px}.prototype{display:none}.quiet{font-size:10px;padding:8px}.battle{height:690px}.opponent-row,.player-row{left:18%;right:3%;grid-template-columns:1fr 47px;column-gap:9px}.hand{gap:6px}.opponent-row .card-back{width:46px;height:64px}.deck .card-back{width:42px;height:59px;border-width:4px}.scoreboard{left:18%;right:6%;top:136px;grid-template-columns:1fr 30px 1fr;gap:9px}.score h2{font-size:11px}.hp-line{font-size:7px;letter-spacing:1px}.hp-line strong{font-size:14px}.versus{font-size:20px}.versus small{font-size:7px}.actions{left:3%;top:240px}.actions button{width:47px;height:67px;font-size:7px}.actions span{font-size:34px}.actions svg{width:24px}.fighters{left:21%;right:7%;top:240px}.fighter{width:41%}.fighter img{height:160px}.arena-message{top:452px;left:18%;right:4%}#turn{font-size:10px}#active{font-size:9px;line-height:1.4}.card{width:calc((100vw - 143px)/3);height:130px;min-width:0}.card b{font-size:10px;padding:6px 5px 0}.card small{font-size:8px;padding:4px 5px}.row-label{font-size:7px;letter-spacing:1px}.row-label small{display:block;float:none;margin-top:4px;font-size:6px}.below{grid-template-columns:1fr;gap:8px}.status{font-size:8px}footer{font-size:7px;gap:10px;line-height:1.5}.outcome h2{font-size:30px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}


@media(max-width:650px){.opponent-row,.player-row{grid-template-columns:minmax(0,1fr) 47px}.hand{min-width:0}.player-row .card{width:auto;flex:1;min-width:0}.versus small{white-space:nowrap;font-size:6px}.row-label small{line-height:1.5}}
@media(max-width:650px){.arena-message{top:430px}.card .dev{font-size:6px;white-space:nowrap;letter-spacing:0}.card small{font-size:8px}.card b{font-size:9px}}
/* Arena-only approved visuals; original portrait sizing remains the fallback. */
.fighter-visual{height:185px;position:relative}
.fighter-visual canvas{position:absolute;height:220px;width:auto;max-width:none;left:50%;bottom:-13px;transform:translateX(-50%);image-rendering:pixelated;pointer-events:none}
.fighter-visual [hidden]{display:none}
@media(max-width:650px){.fighter-visual{height:160px}.fighter-visual canvas{height:190px;bottom:-11px}}
.motion-toggle{font-size:11px;color:#bcc9db;display:flex;align-items:center;gap:5px}.motion-toggle input{accent-color:var(--cyan)}@media(max-width:650px){header{flex-wrap:wrap}.motion-toggle{font-size:10px}}
.animated-fighter.hit{animation:stationary-hit .35s}@keyframes stationary-hit{50%{filter:brightness(2)}}
/* The room is confined to the combat window; cards and controls stay outside. */
.battle{background:#0b1422}
.arena-scene{position:absolute;left:15%;right:11%;top:144px;height:385px;z-index:-1;overflow:hidden;border:3px solid #25394b;box-shadow:0 0 0 2px #030913;pointer-events:none;background:#0b1422}
.arena-scene .arena-backdrop{inset:0;z-index:0;background-image:url('assets/synth-arena-core.svg');background-size:100% 100%;background-position:center;image-rendering:pixelated;transition:none}
.arena-scene .arena-backdrop[style*="url"]{background-size:cover;image-rendering:auto}
.arena-scene .shade{inset:0;z-index:1;background:linear-gradient(#050b16e6 0%,#050b16b0 20%,transparent 43%)}
.arena-floor{position:absolute;left:0;right:0;bottom:0;height:67px;z-index:2;background:#1a2939 url('assets/synth-arena-floor.svg') center/100% 100%;image-rendering:pixelated}
.platform{visibility:hidden}
.scoreboard,.arena-message,.status{text-shadow:0 2px 2px #02050b}
@media(max-width:650px){.arena-scene{left:17%;right:3%;top:124px;height:348px}.arena-floor{height:72px}.arena-scene .arena-backdrop{background-size:auto 100%}.arena-message{background:#07101ac9;padding:3px 2px}}
/* Supplied arena artwork. Both layers use identical framing so the floor
   aligns with the full image and stays in place during Biosphere changes. */
.arena-scene{--scene-height:379px}
.arena-scene .arena-backdrop{background-image:url('assets/synth-arena-approved.png');background-size:cover;background-position:center bottom}
.arena-floor{background-image:url('assets/synth-arena-approved.png');background-size:auto var(--scene-height);background-position:center bottom}
@media(max-width:650px){.arena-scene{--scene-height:342px}.arena-scene .arena-backdrop{background-size:cover}}
/* Supplied outer shell and four-state action sheets. Card faces are unchanged. */
.battle{background:#081321 url('assets/battle-shell.png') center/100% 100% no-repeat;border-color:#284159;border-radius:4px}
.actions{gap:18px}
.actions button{position:relative;width:110px;height:83px;padding:0;border:0;border-radius:0;background:transparent;font-size:0;gap:0;isolation:isolate}
.actions button span,.actions button svg{display:none}
.actions button::before{content:"";position:absolute;inset:0;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none}
.actions #attack::before{background-image:url('assets/attack-states.png');background-size:220% 292%;background-position:6.6% 17%}
.actions #defend{height:66px}
.actions #defend::before{background-image:url('assets/defend-states.png');background-size:220% 369%;background-position:5.9% 24.6%}
.actions button:hover:not(:disabled){background:transparent}
.actions #attack:hover:not(:disabled)::before,.actions #attack:focus-visible::before{background-position:94.3% 17%}
.actions #defend:hover:not(:disabled)::before,.actions #defend:focus-visible::before{background-position:94.3% 24.6%}
.actions #attack:active:not(:disabled)::before{background-position:6.6% 79%}
.actions #defend:active:not(:disabled)::before{background-position:5.9% 74.4%}
.actions button:disabled{opacity:1}
.actions #attack:disabled::before{background-position:94.3% 79%}
.actions #defend:disabled::before{background-position:94.3% 74.4%}
@media(max-width:650px){.actions button{width:47px;height:36px}.actions #defend{height:28px}.actions{gap:18px}}
@media(max-width:650px){.actions button,.actions #defend{height:48px}.actions #attack::before{top:6px;bottom:6px}.actions #defend::before{top:10px;bottom:10px}.actions{gap:8px}}
/* Gold framing follows the SynthArena brand without tinting the supplied art. */
main{max-width:1530px;display:grid;grid-template-columns:250px minmax(0,1fr);column-gap:26px;align-items:start}
header{grid-column:2;grid-row:1}
.gold-panel{background:linear-gradient(135deg,rgba(114,85,25,.18),rgba(39,31,15,.36));border:1px solid #9c7a3b70;border-radius:9px;box-shadow:0 0 18px #c49b2e0c,inset 0 1px #e9c97716}
.battle-frame{grid-column:2;grid-row:2;padding:10px;min-width:0}
.battle-feed{grid-column:1;grid-row:2;min-height:540px;padding:22px 18px;border-top:2px solid #bf9b53}
.battle-feed h2{font-size:11px;letter-spacing:2px;color:#e1c47f;margin:0 0 22px;padding-bottom:15px;border-bottom:1px solid #b68d403d}
.battle-feed ol{font-size:12px;line-height:1.7;margin:0;overflow-wrap:anywhere}
.battle-feed li{padding:12px 0;border-bottom:1px solid #c4a2501c;color:#c9c5b9}
.battle-feed li:last-child{color:#f0d38e}
.below{grid-column:2;grid-template-columns:1fr;margin:20px 0}
footer{grid-column:2}
.quiet{border-color:#ad8a444f;color:#dfc58b;background:#8c692810}
@media(max-width:1400px){main{max-width:1200px;grid-template-columns:minmax(0,1fr)}header,.battle-frame,.battle-feed,.below,footer{grid-column:1;grid-row:auto}.battle-frame{grid-row:2}.battle-feed{grid-row:3;min-height:0;margin-top:18px}.battle-feed h2{margin-bottom:8px}.battle-feed li{padding:6px 0}}
@media(max-width:650px){.battle-frame{padding:4px}.battle-feed{padding:16px}}
/* Supplied logo and restart grouped with the battle feed. */
header{justify-content:center;margin-bottom:16px}
.game-logo{display:block;width:min(480px,85%);line-height:0}
.game-logo img{display:block;width:100%;height:auto}
.battle-sidebar{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:14px;min-width:0}
.battle-sidebar .battle-feed{margin:0}
.battle-sidebar #restart{align-self:stretch;min-height:40px}
@media(max-width:1400px){.battle-sidebar{grid-column:1;grid-row:3;margin-top:18px}.battle-sidebar .battle-feed{margin-top:0}}
@media(max-width:650px){header{margin-bottom:10px}.game-logo{width:min(360px,95%)}}
/* Music volume beneath the encounter restart control. */
.music-control{padding:16px 10px 0;color:#dfc58b}
.music-control label{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.5px;margin-bottom:8px}
.music-control output{font-size:10px;letter-spacing:0;color:#bfb59d}
.music-control input{display:block;width:100%;height:24px;margin:0;accent-color:#dfc58b;cursor:pointer}
.music-control input:focus-visible{outline:2px solid #dfc58b;outline-offset:4px;border-radius:4px}

.fighter-selectors{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
/* Selection occupies the same outer game panel, with no active arena underneath. */
[hidden]{display:none!important}
.character-selection{min-height:830px;padding:36px;background:#081321 url('assets/battle-shell.png') center/100% 100% no-repeat;border:1px solid #284159;border-radius:4px}
.selection-heading{text-align:center;margin-bottom:28px}
.selection-heading h1{font-size:clamp(21px,3vw,32px);letter-spacing:3px;color:#f0d38e;margin:12px 0}
.selection-heading p,.selection-preview>p{color:#c5ceda;font-size:13px;line-height:1.5}
.selection-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:center}
.fighter-roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fighter-choice{min-width:0;border:2px solid #68707b;border-radius:6px;padding:8px;background:#071321e8;position:relative}
.fighter-choice img{display:block;width:100%;height:112px;object-fit:contain}
.fighter-choice span{display:block;min-height:32px;margin-top:8px;font-size:12px;line-height:1.35}
.fighter-choice:hover{border-color:#f0d38e}
.fighter-choice[aria-pressed=true]{border-color:#f0d38e;background:#58451ee8;box-shadow:0 0 16px #e9c97740}
.fighter-choice[aria-pressed=true]::after{content:"✓";position:absolute;top:5px;right:7px;color:#fff0bc;font-weight:bold}
.selection-preview{text-align:center;background:#071321df;border:1px solid #ad8a4466;padding:22px 16px;border-radius:8px;min-width:0}
.selection-preview>img{width:100%;height:290px;object-fit:contain}
.selection-preview h2{font-size:24px;color:#f0d38e}
#confirm-fighter{width:100%;min-height:48px;padding:12px;border:1px solid #f0d38e;border-radius:4px;background:#d9b86d;color:#111a24;font-weight:bold}
@media(max-width:850px){.character-selection{padding:24px 16px}.selection-layout{gap:16px}.fighter-roster{gap:8px}.fighter-choice img{height:90px}.selection-preview>img{height:230px}}
@media(max-width:650px){.character-selection{min-height:720px;padding:18px 10px}.selection-heading{margin-bottom:18px}.selection-heading h1{letter-spacing:1px}.selection-layout{grid-template-columns:1fr}.fighter-choice{padding:5px}.fighter-choice img{height:76px}.fighter-choice span{font-size:11px}.selection-preview{padding:12px}.selection-preview>img{height:135px}.selection-preview h2{font-size:20px;margin:6px 0}.selection-preview>p{margin:6px 0}}

/* Arcade ladder inside the persistent gold game frame. */
.battle-lineup{min-height:830px;padding:36px;background:#081321 url('assets/battle-shell.png') center/100% 100% no-repeat;border:1px solid #284159;border-radius:4px}
.opponent-ladder{display:flex;flex-direction:column;gap:12px;max-width:560px;margin:0 auto}
.ladder-panel{width:100%;min-height:58px;padding:14px 18px;border:2px solid #808894;border-radius:5px;font-weight:bold;font-size:16px;line-height:1.4;text-align:center;box-shadow:0 3px 0 #020812}
.ladder-panel.locked{background:#555c66;color:#f3f4f6;opacity:1}
.ladder-panel.available{background:#45668e;color:#fff;border-color:#9db8df}
.ladder-panel.available:hover{background:#5379a5;border-color:#f0d38e}
.ladder-panel.completed{background:#c3e796;color:#1d3516;border-color:#e0f7bc;opacity:1}
@media(max-width:650px){.battle-lineup{min-height:720px;padding:18px 10px}.opponent-ladder{gap:10px}.ladder-panel{min-height:52px;font-size:14px;padding:12px 8px}}


.save-choices{display:flex;flex-direction:column;gap:12px;max-width:660px;margin:24px auto 0;padding:16px;background:#081321;border:1px solid #dfc58b;border-radius:6px}
.save-choices button{min-height:48px;white-space:normal;overflow-wrap:anywhere;padding:12px;line-height:1.5}
.save-choices button:focus-visible{outline:3px solid #f0d38e;outline-offset:3px}
.save-help,#save-status{font-size:13px;line-height:1.6;color:#dfc58b}

/* Start and battle information use the existing persistent frame. */
.start-screen{min-height:830px;display:grid;place-items:center;background:#081321 url('assets/battle-shell.png') center/100% 100% no-repeat;border:1px solid #284159;border-radius:4px}
#start-game{min-width:180px;min-height:58px;padding:16px 36px;border:2px solid #f0d38e;border-radius:4px;background:#d9b86d;color:#111a24;font-size:22px;font-weight:bold;box-shadow:0 4px 0 #58451e}
#start-game:hover{background:#f0d38e}
.battle-feed{display:flex;flex-direction:column}
.battle-feed #active{margin-top:auto;padding-top:20px;font-size:12px;line-height:1.8;color:#adc2d2;white-space:pre-line;overflow-wrap:anywhere}
.opponent-row>.row-label{grid-column:1;grid-row:1;text-align:center}
.opponent-row>#cpu-hand{grid-column:1;grid-row:2}
.opponent-row>#cpu-deck{grid-column:2;grid-row:2}
.battle .player-row{grid-template-columns:110px minmax(0,1fr) 70px;column-gap:12px}
.player-row>.row-label{grid-row:1}
.player-row>#turn{grid-column:1;grid-row:2;font-size:12px;line-height:1.6;letter-spacing:0;text-align:left;overflow-wrap:anywhere;text-shadow:0 2px 2px #02050b}
.player-row>#player-hand{grid-column:2;grid-row:2}
.player-row>#player-deck{grid-column:3;grid-row:2}
@media(max-width:650px){.start-screen{min-height:720px}.battle .player-row{left:3%;right:3%;grid-template-columns:52px minmax(0,1fr) 34px;column-gap:5px}.player-row>#turn{font-size:9px;line-height:1.5}.player-row>#player-deck .card-back{width:32px}.battle-feed #active{padding-top:14px}}