/* The demo shares the game's arena. Its own shell stays inside the landing dialog. */
.in-battle-demo {scroll-behavior:auto;background:var(--theme-canvas,#f6faf8)}
.battle-demo-page {position:relative;max-width:1640px;margin:auto;padding:26px 30px 16px;min-height:100dvh;background:radial-gradient(ellipse at 95% 0,var(--theme-glow,#55c4ca12),transparent 55%);color:var(--theme-ink,#173c4b)}
.demo-battle-heading {display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:12px}
.demo-battle-heading .eyebrow {font-size:9px;letter-spacing:.21em;margin:0 0 8px}
.demo-battle-heading h1 {font-size:clamp(24px,2.5vw,37px);line-height:1.1;letter-spacing:-.045em;margin:0}
.demo-battle-heading h1 em {color:var(--theme-accent,#14808a);font-style:normal}
.demo-battle-utilities {display:flex;align-items:center;gap:10px;font-size:12px}
.demo-playback-choice {display:flex;align-items:stretch;gap:3px;padding:3px;min-height:42px;border:1px solid var(--theme-line,#c4dadc);border-radius:12px;background:var(--theme-surface,#fff)}
.demo-playback-choice button {display:flex;align-items:center;justify-content:center;gap:5px;inline-size:98px;border:1px solid transparent;border-radius:8px;padding:6px 11px;background:transparent;color:var(--theme-muted,#5d7379);font:inherit;white-space:nowrap;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease}
.demo-playback-choice button[aria-pressed=true] {background:var(--theme-soft,#eaf5f4);border-color:var(--theme-line,#c4dadc);color:var(--theme-ink,#173c4b);font-weight:700}
.demo-playback-choice button:hover:not(:disabled) {background:var(--theme-hover,#d9f2ef);color:var(--theme-ink,#173c4b)}
.demo-playback-choice button:disabled {opacity:.5;cursor:default}
.demo-playback-choice button>span {font-size:17px;line-height:1}
.demo-sound-toggle {display:flex;align-items:center;gap:8px;min-height:42px;padding:9px 14px;border:1px solid var(--theme-line,#c4dadc);border-radius:12px;background:var(--theme-surface,#fff);color:inherit;cursor:pointer;font:inherit;white-space:nowrap}
.demo-sound-toggle>span {font-size:19px;color:var(--theme-accent,#14808a)}
.demo-sound-toggle[aria-pressed=false] {color:var(--theme-muted,#5d7379)}
.demo-home {color:inherit;text-decoration:none}
.demo-battle-intro {font-size:12px;color:var(--theme-muted,#526d77);margin:0 0 22px}
.battle-demo-page .arena {margin-top:0}
.battle-demo-page .team-heading {display:none}
.is-embedded .demo-battle-heading>div:first-child,.is-embedded .demo-home {display:none}
.is-embedded .demo-battle-heading {position:absolute;top:12px;right:30px;margin:0}
.is-embedded .demo-battle-intro {min-height:32px;margin:0 330px 15px 0;display:flex;align-items:center}
.battle-demo-page .team-heading .team-select {display:none}
.battle-demo-page .portrait-button {cursor:default}
.battle-demo-page .portrait-button:disabled {opacity:1}
.battle-demo-page .arena .tech-grid {grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible}
.battle-demo-page .arena .tech-heading {margin-top:0}
.battle-demo-page .arena .tech-detail {min-height:148px}
.battle-demo-page .battle-log {margin-top:20px}
.demo-result-actions {display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.demo-result-actions .button {background:var(--theme-button,#173c4b);color:#fff;padding:14px 20px;border:1px solid var(--theme-line,#b5d8dc);border-radius:12px;font-size:13px;text-decoration:none}
.battle-demo-page .demo-result-actions .demo-replay {background:color-mix(in srgb,var(--theme-accent,#16818c) 12%,var(--theme-surface,#fff));color:var(--theme-ink,#173c4b);border:1px solid var(--theme-accent,#16818c);border-radius:12px;padding:14px 20px;min-height:48px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff12;transition:background .16s ease,box-shadow .16s ease}
.battle-demo-page .demo-result-actions .demo-replay:hover:not(:disabled) {background:color-mix(in srgb,var(--theme-accent,#16818c) 23%,var(--theme-surface,#fff));box-shadow:inset 0 1px 0 #ffffff20,0 3px 12px #00000016}
.battle-demo-page .demo-result-actions .demo-replay:disabled {opacity:.55;cursor:wait}
.demo-entry-note {display:block;color:var(--theme-muted,#526d77);font-size:11px;line-height:1.7;margin-top:16px}
.demo-battle-footer {display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--theme-line,#cbdfe0);margin-top:24px;padding-top:16px;font-size:11px;color:var(--theme-muted,#526d77)}
.demo-battle-footer a {color:var(--theme-ink,#173c4b);font-weight:600;text-decoration:none}
.demo-battle-preparing {min-height:65vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--theme-muted,#526d77)}
.demo-battle-preparing>span {font-size:45px;color:var(--theme-accent,#168c95)}
.demo-battle-error {font-size:13px;color:var(--theme-danger,#9b3146)}
.battle-demo-page :is(a,button):focus-visible {outline:2px solid var(--theme-accent,#168c95);outline-offset:4px}
@media(max-width:1100px) {
 .battle-demo-page {padding:20px 18px 16px}
 .is-embedded .demo-battle-heading {right:18px}
 .battle-demo-page .arena .command-center .tech-grid {grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}
 .battle-demo-page .arena .tech-grid .tech-image {height:auto;aspect-ratio:1;max-height:150px}
 .battle-demo-page .arena .tech-detail.details-open {min-height:0}
}
@media(max-width:600px) {
 .battle-demo-page {padding:15px 12px 16px}
 .is-embedded .demo-battle-heading {position:static;margin-bottom:12px}
 .demo-battle-heading {align-items:stretch;gap:14px;flex-direction:column}
 .demo-battle-heading h1 {font-size:25px}
 .demo-battle-heading .eyebrow {font-size:8px;letter-spacing:.15em}
 .demo-battle-utilities {gap:8px;justify-content:space-between;font-size:11px;flex-wrap:wrap}
 .demo-playback-choice {min-height:44px}
 .demo-playback-choice button {inline-size:86px;padding:6px 10px}
 .demo-sound-toggle {padding:8px 10px;min-height:44px;font-size:11px}
 .is-embedded .demo-home {display:none}
 .demo-battle-intro {margin-bottom:14px;font-size:11px;line-height:1.6}
 .is-embedded .demo-battle-intro {min-height:0;margin:0 0 14px}
 .demo-battle-footer {align-items:center;font-size:10px}
 .demo-result-actions {flex-direction:column;gap:9px}
 .demo-result-actions :is(a,button) {min-height:46px}
 .battle-demo-page .arena .portrait-name strong {font-size:12px}
}