.battle-system .hero-hud{ gap: 8px; }
.battle-system .arena-content{ --enemy-hud-row: 32px; --player-hud-row: 32px; grid-template-rows: var(--enemy-hud-row) 20px minmax(0,1fr) var(--phase-row,48px) minmax(0,1fr) 20px var(--player-hud-row) 44px; gap: 2px; padding: 4px 6px; }
.battle-system .arena-content:has(.hostile .hero-conditions){ --enemy-hud-row: 44px; }
.battle-system .arena-content:has(.friendly .hero-conditions){ --player-hud-row: 44px; }
.battle-system .hero-seal{ width: 30px; height: 30px; flex-basis: 30px; }
.battle-system .hero-health{ min-width: 0; }
.battle-system .hero-heading > span:first-child{ min-width: 0; }
.battle-system .hero-heading > span:first-child > small{ display: none; }
.battle-system .hero-heading strong{ font-size: 15px; line-height: 1.25; letter-spacing: 0; }
.battle-system .hero-heading .hp{ font-size: 18px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.battle-system .hero-heading .hp > small{ font-size: 12px; }
.battle-system .health{ height: 5px; }
.battle-system .battle-divider{ gap: 8px; }
.battle-system .battle-divider > div{ display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center; align-items: baseline; gap: 2px 10px; max-width: calc(100% - 16px); }
.battle-system .battle-turn-label{ color: var(--pm-ui-muted); font-size: 12px; line-height: 1.3; white-space: nowrap; }
.battle-system #phase-label{ font-size: 14px; line-height: 1.3; letter-spacing: .02em; }
.battle-system #phase-hint{ grid-column: 1 / -1; font-size: 11px; line-height: 1.3; color: var(--pm-ui-muted); max-height: 29px; }
.battle-system #phase-hint.target-blocked{ color: var(--pm-ui-danger); }
.battle-system .stamina-caption{ gap: 8px; }
.battle-system .stamina-caption > b{ flex: none; font-family: inherit; font-size: 24px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.battle-system .stamina-caption > b > span{ font: inherit; color: inherit; line-height: inherit; letter-spacing: 0; max-width: none; }
.battle-system .stamina-caption .reflex-budget{ max-width: 140px; font-size: 11px; line-height: 1.3; letter-spacing: 0; white-space: normal; }
.battle-system .turn-controls .end-turn{ min-height: 44px; font-size: 13px; padding: 8px 14px; background: var(--pm-ui-accent); color: var(--pm-ui-on-accent); }
.battle-system .hand-heading > span{ font-size: 13px; letter-spacing: 0; color: var(--pm-ui-text); }
.battle-system .hand-heading > span > b{ font-size: 13px; color: var(--pm-ui-muted); }
.battle-system .battle-journal-button{ min-height: 44px; border: 0; background: transparent; color: var(--pm-ui-accent); font-size: 13px; padding: 8px 10px; }
.battle-system .battle-journal-button > .exp-icon{ width: 18px; height: 18px; }
.battle-system .inspect-button{ border-color: transparent; background: transparent; }
.battle-system .battle-pointer-hint, .battle-system .battle-keyboard-hint{ font-size: 12px; line-height: 1.4; color: var(--pm-ui-muted); letter-spacing: 0; }
.battle-system .selection-help .selected-card-detail{ border: 0; background: transparent; }
.battle-system .selected-card-detail b{ font-size: 13px; }
.battle-system .selection-help .tap-burn{ font-size: 13px; }
@media (max-width: 360px){.battle-system .hero-heading strong{ font-size: 13px; }
.battle-system .hero-heading .hp{ font-size: 17px; }
.battle-system .stamina-caption .reflex-budget{ max-width: 114px; }

}
@media (max-height: 480px) and (min-width: 600px){.battle-system .arena-content{ --phase-row: 42px; }
.battle-system .hero-heading strong{ font-size: 14px; }
.battle-system .hero-heading .hp{ font-size: 17px; }
.battle-system #phase-label{ font-size: 13px; }
.battle-system #phase-hint{ font-size: 10px; }

}
.game-battle .battle-system .arena{ border: 0; border-radius: 24px; box-shadow: none; }
.game-battle .battle-system .hero-hud{ border-radius: 18px; background: color-mix(in srgb,var(--pm-ui-surface) 94%,transparent); box-shadow: 0 3px 10px var(--pm-ui-shadow); padding-right: 6px; }
.game-battle .battle-system .hero-seal{ border: 0; border-radius: 50%; box-shadow: none; }
.game-battle .battle-system .hero-health{ background: transparent; }
.game-battle .battle-system .hero-heading strong{ font-size: 13px; font-weight: 600; }
.game-battle .battle-system .health{ height: 3px; margin-top: 3px; border-radius: 999px; }
.game-battle .battle-system .unit-slot:not(.occupied){ background: transparent; border: 1px dashed color-mix(in srgb,var(--pm-ui-line) 75%,transparent); box-shadow: none; }
.game-battle .battle-system .unit-slot.occupied{ border: 0; box-shadow: 0 4px 12px var(--pm-ui-shadow); }
.game-battle .battle-system .support-slot{ border: 0; border-radius: 999px; background: color-mix(in srgb,var(--pm-ui-surface-raised) 70%,transparent); box-shadow: none; }
.game-battle .battle-system .battle-divider > i{ opacity: .25; }
.game-battle .battle-system #phase-label{ text-transform: lowercase; font-weight: 650; letter-spacing: 0; color: var(--pm-ui-text); }
.game-battle .battle-system #phase-label::first-letter{ text-transform: uppercase; }
.game-battle .battle-system .turn-controls .end-turn{ border-radius: 999px; min-width: 140px; box-shadow: 0 3px 10px var(--pm-ui-shadow); text-transform: lowercase; }
.game-battle .battle-system .stamina-caption{ padding: 0 10px; height: 36px; border-radius: 999px; background: var(--pm-ui-surface); box-shadow: 0 3px 10px var(--pm-ui-shadow); }
.game-battle .battle-system .turn-controls{ gap: 8px; }
.game-battle .battle-system .turn-controls .stamina-caption{ flex: 1; min-width: 0; }
.game-battle .battle-system .stamina-caption .reflex-budget{ flex: 1; min-width: 0; max-width: none; }
.game-battle .battle-system .stamina-caption > b{ font-size: 20px; color: var(--pm-ui-text); }
.game-battle .battle-system .stamina-caption > b > span{ color: inherit; }
.game-battle .battle-system .hand-heading > span{ text-transform: lowercase; font-size: 12px; }
.game-battle .battle-system .hand-heading > span::first-letter{ text-transform: uppercase; }
.game-battle .battle-system .battle-journal-button{ border-radius: 999px; background: var(--pm-ui-surface); box-shadow: 0 3px 10px var(--pm-ui-shadow); color: var(--pm-ui-text); }
.game-battle .battle-system .battle-journal-button > :is(span,.exp-icon){ color: inherit; font-size: inherit; }
.game-battle .battle-system .inspect-button{ border-radius: 50%; background: var(--pm-ui-surface); }
.game-battle .battle-system .selection-help .tap-burn{ border-radius: 999px; background: var(--pm-ui-surface-raised); color: var(--pm-ui-text); }
.game-battle .unit-slot > .unit-live-numbers{ position: absolute; top: 4px; right: 4px; z-index: 3; display: flex; gap: 8px; margin: 0; padding: 3px 6px; border-radius: 999px; font: 700 13px/1.2 system-ui; color: var(--pm-ui-text); background: var(--pm-ui-surface); box-shadow: 0 2px 7px var(--pm-ui-shadow); }
.game-battle .unit-live-numbers :is(.atk,.hp){ color: var(--pm-ui-text); font: inherit; }
.game-battle .unit-slot > .status-chips{ top: 29px; }
.game-battle .unit-caption{ padding-top: 12px; color: var(--pm-ui-over-art-text); }
.game-battle .unit-caption strong{ font-size: 11px; line-height: 1.25; color: var(--pm-ui-over-art-text); }
.game-battle .unit-caption .unit-trait{ font-size: 9px; color: var(--pm-ui-over-art-muted); }
p){ color: var(--pm-ui-text); }
.hp){ color: var(--pm-ui-text); }
.selection-help){ color: var(--pm-ui-text); }
.inspect-button,.selected-card-detail){ background: var(--pm-ui-surface-raised); color: var(--pm-ui-text); border: 0; border-radius: 999px; }
.practice-system{ color: var(--pm-ui-text); }
.practice-system .practice-heading :is(h2,small){ color: var(--pm-ui-text); }
.practice-system .practice-heading h2{ font-size: 20px; letter-spacing: 0; }
.practice-system .practice-hero{ background: transparent; border: 0; box-shadow: none; border-radius: 0; grid-template-columns: 52% minmax(0,1fr); }
.practice-system .practice-copy{ gap: 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.practice-system .practice-copy h1{ font-size: 28px; font-family: inherit; font-weight: 650; letter-spacing: -.02em; color: var(--pm-ui-text); }
.practice-system .practice-copy > .eyebrow{ color: var(--pm-ui-muted); font-size: 13px; letter-spacing: 0; }
.practice-system .practice-details{ border: 0; }
.practice-system .practice-details > summary{ min-height: 44px; display: flex; align-items: center; font-size: 14px; line-height: 1.4; color: var(--pm-ui-muted); cursor: pointer; }
.practice-system .practice-details p{ color: var(--pm-ui-text); font-size: 14px; line-height: 1.5; }
.practice-system .practice-details .hero-perk{ border: 0; border-radius: 0; padding: 12px 0; margin: 0; background: transparent; }
.practice-system .practice-details .hero-perk :is(span,strong,p){ color: var(--pm-ui-text); }
.practice-system .practice-copy > .ghost{ min-height: 44px; font-size: 14px; }
.practice-system .practice-selection{ color: var(--pm-ui-muted); font-size: 13px; }
.practice-system .opponent-picker{ display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 4px 8px; width: min(320px,100%); }
.practice-system .opponent-picker > .eyebrow{ color: var(--pm-ui-muted); font-size: 13px; letter-spacing: 0; }
.practice-system .opponent-picker > .eyebrow{ grid-column: 1 / -1; text-align: center; }
.practice-system .opponent-picker > strong{ color: var(--pm-ui-text); font-size: 15px; min-width: 0; width: auto; text-align: center; }
.practice-system .opponent-picker > button{ min-width: 44px; min-height: 44px; background: var(--pm-ui-surface); color: var(--pm-ui-text); border: 0; border-radius: 50%; }
.practice-system .practice-footer{ flex-wrap: wrap; }
.practice-system .practice-footer :is(.end-turn,.ghost){ min-height: 48px; font-size: 15px; }
.game-practice .shell:has(.practice-system){ background: var(--pm-ui-ink); background-image: none; color: var(--pm-ui-text); }
.practice-system .practice-footer > .end-turn{ background: var(--pm-ui-accent); color: var(--pm-ui-on-accent); border: 0; border-radius: 999px; box-shadow: 0 3px 12px var(--pm-ui-shadow); }
.practice-system :is(.practice-heading,.practice-selection) > .icon-button{ width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 0; background: var(--pm-ui-surface); color: var(--pm-ui-text); }
.practice-system .practice-portrait :is(.art,.foil-art,img){ display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.practice-system .practice-portrait::after{ display: none; }
@media (max-aspect-ratio: 4/3){.practice-system .practice-hero{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0; }
.practice-system .practice-portrait{ width: 180px; max-width: 100%; height: clamp(140px,calc(100dvh - 470px),240px); flex: none; border-radius: 14px; overflow: hidden; background: var(--pm-ui-surface-raised); box-shadow: 0 8px 24px var(--pm-ui-shadow); }
.practice-system .practice-copy{ flex: none; width: 100%; max-width: 400px; padding: 0 8px; gap: 8px; text-align: center; overflow: visible; }
.practice-system .practice-details > summary{ justify-content: center; }
.practice-system .practice-copy > .ghost{ align-self: center; padding: 10px 18px; background: var(--pm-ui-surface); color: var(--pm-ui-text); border-radius: 999px; }

}
@media (max-height: 500px) and (min-width: 601px){.practice-system{ grid-template-rows: 44px minmax(0,1fr) 44px 48px; gap: 6px 16px; }
.practice-system .practice-portrait{ height: 100%; max-height: 180px; width: auto; aspect-ratio: 3 / 4; flex: none; align-self: center; }
.practice-system .practice-copy h1{ font-size: 24px; }
.practice-system .practice-copy{ gap: 4px; }
.practice-system .practice-copy > .ghost{ position: static; }
.practice-system .practice-details[open]{ max-height: 100px; overflow-y: auto; }
.practice-system .opponent-picker > .eyebrow{ display: none; }

}
.coin-flip{ background: var(--pm-ui-ink); backdrop-filter: none; color: var(--pm-ui-text); }
.coin-flip .coin-flip-content{ color: var(--pm-ui-text); }
.coin-flip .eyebrow{ color: var(--pm-ui-muted); font-size: 13px; letter-spacing: 0; }
.coin-flip h2{ color: var(--pm-ui-text); font-family: inherit; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.coin-flip .coin-result,
.coin-flip:is(.ally-first,.enemy-first) .coin-result{ color: var(--pm-ui-text); font-size: 19px; line-height: 1.4; }
.coin-flip .coin-rule{ color: var(--pm-ui-muted); font-size: 15px; line-height: 1.5; }
.coin-flip .coin-continue{ width: min(260px,100%); min-height: 48px; margin-inline: auto; border: 0; border-radius: 999px; background: var(--pm-ui-accent); color: var(--pm-ui-on-accent); font-size: 15px; box-shadow: 0 3px 12px var(--pm-ui-shadow); }
@media (max-height: 500px) and (min-width: 601px){.coin-flip .coin-flip-content{ display: grid; grid-template-columns: 180px minmax(0,1fr); align-items: center; column-gap: 24px; width: min(600px,100%); }
.coin-flip .coin-stage{ grid-column: 1; grid-row: 1 / 6; height: 210px; }
.coin-flip-content > :not(.coin-stage){ grid-column: 2; }

}
.game-practice .shell:has(.practice-system) .wordmark,
.game-practice .shell:has(.practice-system) .wordmark span{ color: var(--pm-ui-text); }
.practice-system .practice-copy h1{ text-shadow: none; }
.coin-flip button.end-turn{ background: var(--pm-ui-accent); background-image: none; color: var(--pm-ui-on-accent); border: 0; border-radius: 999px; }
.empty-title,.lane-number){ color: var(--pm-ui-muted); }
small){ color: var(--pm-ui-text); }
@media (max-height: 500px) and (min-width: 601px){.practice-system .opponent-picker{ grid-column: 2; grid-row: 3; margin: 0; justify-self: center; }
.practice-system .practice-copy{ min-height: 0; overflow-y: auto; justify-content: flex-start; padding-block: 0; }
.practice-system .practice-copy > *{ flex-shrink: 0; }
.practice-system .practice-details{ display: block; }
.practice-system .practice-copy > .ghost{ min-height: 44px; }

}
html[data-theme=light] :is(.game-battle{
 background: color-mix(in srgb,var(--pm-ui-muted) 22%,var(--pm-ui-surface));
 border: 1px dashed color-mix(in srgb,var(--pm-ui-text) 38%,var(--pm-ui-surface));
}
html[data-theme=light] :is(.game-battle,.empty-title,.lane-number){
 color: var(--pm-ui-muted); opacity: 1;
}
html[data-theme=light] :is(.game-battle{
 background: color-mix(in srgb,var(--pm-ui-muted) 20%,var(--pm-ui-surface));
 border: 1px solid color-mix(in srgb,var(--pm-ui-text) 28%,var(--pm-ui-surface));
}
html[data-theme=light] :is(.game-battle,span,.reserve){
 color: var(--pm-ui-text); opacity: 1;
}
:is(.game-battle,#phase-hint,.battle-pointer-hint,.battle-keyboard-hint,.reflex-budget,.hero-heading .hp > small){
 color: var(--pm-ui-muted);
}
:is(.game-battle{ color: var(--pm-ui-danger); }
:is(.game-battle,strong,p,small){ color: var(--pm-ui-text); }
html[data-theme=light] :is(.game-battle,.selected-card-detail b){ color: var(--pm-ui-text); }
html[data-theme=light] :is(.game-battle{color:var(--pm-ui-muted)!important}
html[data-theme=dark] :is(.game-battle{background:rgba(12,20,28,.28);border:1px dashed rgba(204,221,230,.38)}
html[data-theme=dark] :is(.game-battle,.empty-title,.lane-number){color:#c3d1da;opacity:1}
html[data-theme=dark] :is(.game-battle{background:rgba(28,39,48,.85);border:1px solid rgba(204,221,230,.3)}
html[data-theme=dark] :is(.game-battle,span,.reserve){color:#dbe5eb;opacity:1}