/* Vertical REVERSE card table: the same battle order on phone and desktop. */
body.arena-battle-open { overflow: hidden; background: #10141c; }
body.arena-battle-open #app-container { width: var(--arena-viewport-width,100vw) !important; max-width: none !important; height: var(--arena-viewport-height,100dvh); margin: 0; background: #10141c url('assets/arena/nocturne-324.webp') center/cover; transform: none; }
body.arena-battle-open .app-main { overflow: auto !important; }
body.arena-battle-open #tab-arena { flex: 1; min-height: 0; background: transparent; }
body.arena-battle-open #tab-arena #arena-battle {
  --table-ink: #304839; --table-red: #b04d3e; --arena-card-width: min(172px,calc((max(560px,var(--arena-viewport-height,100dvh)) - 356px) * .315));
  display: grid !important; position: relative; grid-template-columns: minmax(0,1fr); grid-template-rows: 44px 64px minmax(300px,1fr) auto;
  width: 100%; max-width: 560px; height: auto !important; min-height: max(560px,var(--arena-viewport-height,100dvh)); margin: 0 auto; padding: 12px 12px max(12px,env(safe-area-inset-bottom)); gap: 10px; overflow: hidden;
  color: var(--table-ink); background: linear-gradient(#080b1238,#080b1220),url('assets/arena/nocturne-324.webp') center/cover;
}
#tab-arena #arena-battle .arena-battle-hud { grid-column: 1/-1; grid-row: 1; display: grid; grid-template-columns: 32px minmax(0,1fr) auto 32px 32px; gap: 5px; align-items: center; min-height: 0; padding: 4px 8px; border: 1px solid #fffae8b3; border-radius: 8px; background: #efeed3f5; box-shadow: 0 3px 12px #173e3333; }
#arena-battle :is(.arena-battle-back,.battle-help-button,.battle-options summary) { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; gap: 6px; border: 1px solid #b7c199; border-radius: 5px; background: #e3e7c5; color: #3d573a; cursor: pointer; }
#arena-battle :is(.arena-battle-back,.battle-help-button) { font: 700 12px/1 var(--font-body); white-space: nowrap; }
#arena-battle :is(.arena-battle-back,.battle-help-button) svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#arena-battle :is(.arena-battle-back,.battle-help-button) span { display: none; }
#arena-battle .battle-brand { display: flex; align-items: center; gap: 5px; min-width: 0; }
#arena-battle .battle-brand > svg { width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: #a34032; stroke-width: 3; }
#arena-battle .battle-brand > div { display: flex; flex-direction: column; }
#arena-battle .battle-brand b { color: #973b2e; font: 900 18px/1 var(--font-body); letter-spacing: -.04em; }
#arena-battle .battle-brand small { color: #6f7c5a; font: 600 8px/1.5 var(--font-body); }
#arena-battle :is(.battle-mode-label,.arena-battle-score) { display: none; }
#arena-battle #battle-round-badge { white-space: nowrap; color: #536748; font: 700 10px/1 var(--font-body); }
#arena-battle .battle-options summary svg { width: 22px; height: 22px; }
#arena-battle .battle-options-menu { top: 36px; border-color: #8ea278; background: #eff1db; color: #345238; }
#arena-battle .battle-options-menu button { color: #345238; }
#arena-battle .battle-player-rail { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; gap: 7px; min-height: 0; }
#arena-battle .battle-player-plaque { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; column-gap: 7px; padding: 7px; min-width: 0; border: 1px solid #adbf9273; border-radius: 7px; background: #234e41ed; color: #eff4d8; box-shadow: inset 0 1px #e6efce26; }
#arena-battle .battle-player-plaque--enemy { grid-column: 1; grid-row: 1; }
#arena-battle .battle-player-plaque--self { grid-column: 2; grid-row: 1; margin: 0; }
#arena-battle .battle-player-crest { grid-row: 1/3; width: 34px; height: 34px; overflow: hidden; border: 2px solid #dac68e; border-radius: 50%; background: #345f47 url('assets/card-back.png') center/cover; }
#arena-battle .battle-player-crest > :is(img,video,canvas) { width: 100%; height: 100%; object-fit: cover; }
#arena-battle :is(.arena-battle-opponent,.battle-player-name) { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-width: 0; height: auto; padding: 0; background: none; border: 0; color: #f3f4df; text-align: left; }
#arena-battle :is(.arena-battle-opponent small,.battle-player-name small) { color: #bccfac; font: 500 10px/1.2 var(--font-body); }
#arena-battle :is(.arena-battle-opponent span,.battle-player-name strong) { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 11px/1.4 var(--font-body); color: #f1f2da; }
#arena-battle .battle-plaque-health { display: flex; align-items: center; gap: 3px; font: 800 13px/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
#arena-battle .battle-plaque-health svg { width: 10px; height: 10px; fill: #dd927a; }
#arena-battle :is(.battle-plaque-footer,.battle-rail-emblem) { display: none; }
#arena-battle .battle-chronicle-button { grid-column: 3; grid-row: 1; align-self: center; display: grid; place-items: center; width: 32px; min-height: 38px; padding: 0; border: 1px solid #99ad82; border-radius: 6px; background: #244f40; color: #e8edd0; }
#arena-battle .battle-chronicle-button span { display: none; }
#arena-battle .battle-chronicle-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
#tab-arena #arena-battle .battlefield-arena { grid-column: 1; grid-row: 3; display: block; width: 100%; height: 100%; min-height: 0; max-height: none; margin: 0; border: 0; border-radius: 0; background: none; overflow: visible; box-shadow: none; }
#tab-arena #arena-battle .battlefield-stage { display: grid; grid-template-rows: minmax(0,1fr) 40px minmax(0,1fr); width: 100%; height: 100%; min-height: 0; padding: 0; background: none; overflow: visible; }
#arena-battle .battlefield-atmosphere { background: radial-gradient(ellipse,#f7f0c122,transparent 70%); }
#tab-arena #arena-battle .battlefield-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0; min-height: 0; }
#arena-battle .battle-enemy-deck { display: none; }
#arena-battle .battle-side-heading { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: calc(var(--arena-card-width) * 4 + 21px); padding: 0 2px; gap: 5px; min-height: 16px; }
#tab-arena #arena-battle .battle-side-heading :is(strong,span) { font: 700 10px/1.3 var(--font-body); color: #34502f; text-shadow: 0 1px #ffffc7b0; letter-spacing: 0; text-transform: none; }
#tab-arena #arena-battle .battle-lane-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); flex: none; width: 100%; max-width: calc(var(--arena-card-width) * 4 + 21px); height: auto; min-height: 0; max-height: none; gap: 7px; align-items: start; }
#tab-arena #arena-battle .battle-lane-slot { display: flex; width: 100%; height: auto; min-width: 0; justify-content: center; }
#tab-arena #arena-battle .battle-card-frame { position: relative; width: 100%; height: auto; max-width: var(--arena-card-width); aspect-ratio: .63; margin: 0; }
#tab-arena #arena-battle .battle-card-unit { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 1px solid #858862; border-radius: 7px; background: #f3eed1; box-shadow: 0 0 0 2px #f9f2d57a,0 4px 9px #2343344d; overflow: hidden; }
#tab-arena #arena-battle .battle-card-unit.player { border-color: #658153; }
#tab-arena #arena-battle .battle-card-unit.enemy { border-color: #a78361; }
#tab-arena #arena-battle .battle-card-media { position: absolute; inset: 3px 3px 40px; width: auto; height: auto; border-radius: 4px; background-color: #bdd095; }
#tab-arena #arena-battle .battle-card-media > :is(img,video,canvas) { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
#tab-arena #arena-battle .battle-card-info { position: absolute; inset: auto 0 0; display: block; height: 38px; min-height: 38px; padding: 3px 4px 4px; border-top: 1px solid #bdc19a; background: #efedcf; }
#tab-arena #arena-battle .battle-card-name { display: block; margin: 0 0 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #354a33; font: 800 9px/1.1 var(--font-body); text-align: center; }
#tab-arena #arena-battle .battle-card-stats { display: grid; grid-template-columns: minmax(0,1fr); gap: 2px; margin: 0; font: 700 10px/1 var(--font-body); color: #354d33; }
#tab-arena #arena-battle .battle-card-stats b { display: flex; align-items: center; gap: 3px; min-width: 0; color: #355231; white-space: nowrap; }
#tab-arena #arena-battle .battle-card-stats b:first-child { color: #a05c3c; }
#tab-arena #arena-battle .battle-card-stats b:last-child { color: #355231; }
#tab-arena #arena-battle .battle-card-stats svg { width: 10px; height: 10px; flex: 0 0 10px; }
#tab-arena #arena-battle .battle-card-hp { height: 2px; background: #c9cba6; }
#tab-arena #arena-battle .battle-card-hp i { background: #7b9d57; }
#tab-arena #arena-battle .enemy .battle-card-hp i { background: #b9856a; }
#tab-arena #arena-battle :is(.battle-card-lane-mark,.battle-card-inspect) { width: 19px; height: 19px; top: 4px; border: 1px solid #a9b583; border-radius: 50%; background: #f4f0d6ee; color: #4c663a; font-size: 9px; }
#tab-arena #arena-battle .battle-card-lane-mark { left: 4px; }
#tab-arena #arena-battle .battle-card-inspect { right: 4px; }
#tab-arena #arena-battle .battle-card-unit.selected-attacker { transform: translateY(-4px); border-color: #759f38; box-shadow: 0 0 0 3px #dbeca1,0 5px 12px #42673788; }
#tab-arena #arena-battle .battle-card-unit.selected-target { transform: translateY(4px); border-color: #b65341; box-shadow: 0 0 0 3px #f0cba3,0 5px 12px #965f4966; }
#tab-arena #arena-battle .battle-card-unit.target-candidate { border-color: #c38158; animation: reverseTargetPulse 1.6s ease-in-out infinite; }
#tab-arena #arena-battle :is(.battle-card-state,.battle-card-target-mark) { top: 28px; left: 3px; right: 3px; padding: 2px; background: #cfe295ed; color: #345127; font-size: 8px; }
#tab-arena #arena-battle .battle-card-target-mark { background: #ebc6a1ed; color: #7f4938; }
#tab-arena #arena-battle .battle-card-unit.dead .battle-card-media { opacity: .5; filter: grayscale(1); }
#tab-arena #arena-battle .battle-card-death-label { background: #415345e8; color: #f1f4db; font-size: 9px; }
#tab-arena #arena-battle .battle-round-meta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0; }
#arena-battle .battle-center-sigil { width: 18px; height: 18px; fill: #e9e5bf22; stroke: #6c854b88; stroke-width: 1.5; }
#tab-arena #arena-battle .battle-center-copy { max-width: 85%; }
#tab-arena #arena-battle .battle-center-copy strong { padding: 5px 10px; border: 1px solid #b6bd88; border-radius: 5px; background: #e5e9c3ef; color: #476033; font-size: 11px; }
#tab-arena #arena-battle .battle-center-copy small { color: #536344; font-size: 9px; }
#tab-arena #arena-battle .battle-turn-rule { background: #8ca16a55; height: 1px; }
#tab-arena #arena-battle .battle-target-path path { stroke: #819f3d; stroke-width: 3; stroke-dasharray: 6 4; animation: reverseArrow 1s linear infinite; }
#tab-arena #arena-battle .battle-target-path marker path { fill: #819f3d; stroke: none; }
#arena-battle .battle-side-panel { display: none; min-height: 0; }
#arena-battle :is(.battle-inspector,.battle-desktop-log) { display: none; }
body.arena-battle-open #tab-arena #arena-battle #battle-tactical-panel { position: relative; grid-column: 1; grid-row: 4; width: 100%; padding: 9px; margin: 0; border: 1px solid #c6d2a577 !important; border-radius: 8px !important; background: #234e40ed !important; box-shadow: 0 3px 10px #21433444; }
#arena-battle .battle-selection-summary { display: flex; align-items: center; gap: 5px; margin: 0 0 7px; padding: 0; min-height: 20px; border: 0; background: none; }
#arena-battle .battle-selection-summary[hidden] { display: none; }
#arena-battle .battle-selection-summary strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e3ecc7; font-size: 10px; }
#arena-battle .battle-selection-summary svg { width: 16px; height: 16px; fill: none; stroke: #b9d28c; stroke-width: 1.7; }
#arena-battle #battle-clear-selection { width: 32px; height: 32px; padding: 0; border: 1px solid #9eb98070; border-radius: 4px; background: #325946; color: #dce9bb; }
body.arena-battle-open #tab-arena #arena-battle .active-caster-info { margin: 0 0 6px; padding: 0; border: 0; background: none; }
body.arena-battle-open #tab-arena #arena-battle #caster-name { color: #d3dfb8; font: 600 11px/1.2 var(--font-body); }
body.arena-battle-open #tab-arena #arena-battle #btn-arena-attack { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px !important; margin: 0; padding: 9px; border: 1px solid #70923e !important; border-radius: 5px !important; background: linear-gradient(#c7df85,#96ba56) !important; color: #31511f !important; font-size: 14px !important; font-weight: 800; box-shadow: inset 0 1px #eef8c4,0 2px 5px #1e3e3233; }
body.arena-battle-open #tab-arena #arena-battle #btn-arena-attack:disabled { background: #b9c399 !important; color: #65784b !important; border-color: #8ca568 !important; opacity: 1; }
body.arena-battle-open #tab-arena #arena-battle #btn-arena-attack[hidden] { display: none; }
#tab-arena #arena-battle .battle-log-drawer { position: absolute; z-index: 90; inset: auto 0 0; width: min(480px,100%); height: min(70%,350px); border-radius: 12px 12px 0 0 !important; border-color: #9ab17d !important; background: #234c3e !important; color: #e3ebcc; }
body.arena-battle-open :is(.arena-battle-info-dialog,.arena-confirm-dialog,.arena-card-detail-dialog) { max-height: calc(var(--arena-viewport-height) - 36px); border-color: #9dad7c; background: #eff0d6; color: #345037; }
body.arena-battle-open :is(.arena-battle-info-dialog,.arena-confirm-dialog,.arena-card-detail-dialog) :is(p,span,small) { color: #60754e; }
body.arena-battle-open :is(.arena-battle-info-dialog,.arena-confirm-dialog,.arena-card-detail-dialog) button { border-color: #92aa6b; background: #ccdda7; color: #355027; }
#arena-battle :is(button,summary):focus-visible { outline: 3px solid #a64d37; outline-offset: 2px; }
body.arena-battle-open .guided-tour .guided-tour__popup { border-color: #97ae6a; background: #eef1d6; color: #3b5634; }
body.arena-battle-open .guided-tour :is(.guided-tour__title,.guided-tour__text,.guided-tour__count) { color: #3b5634; }
body.arena-battle-open .guided-tour .guided-tour__popup :is(.guided-tour__skip,.guided-tour__back) { color: #5f7450; }
body.arena-battle-open .guided-tour .guided-tour__next { background: #b4d276; border-color: #8cab54; color: #2d4c21; }
body.arena-battle-open .guided-tour .guided-tour__progress { background: #7e9f49; }
@media (min-width:1000px) {
  body.arena-battle-open #tab-arena #arena-battle { --arena-card-width: min(162px,calc((max(620px,var(--arena-viewport-height)) - 280px) * .31)); max-width: 1040px; grid-template-columns: minmax(0,1fr) 260px; grid-template-rows: 48px 68px minmax(300px,1fr) auto; padding: 18px 22px; gap: 14px 20px; }
  #tab-arena #arena-battle .arena-battle-hud { grid-template-columns: auto minmax(0,1fr) auto auto auto auto auto; padding-inline: 10px; }
  #arena-battle :is(.arena-battle-back,.battle-help-button) { width: auto; padding: 0 11px; }
  #arena-battle :is(.arena-battle-back,.battle-help-button) span { display: inline; }
  #arena-battle .battle-brand b { font-size: 23px; }
  #arena-battle .battle-brand small { font-size: 10px; }
  #arena-battle :is(.battle-mode-label,.arena-battle-score) { display: block; padding: 7px 10px; border: 1px solid #b2bf89; border-radius: 5px; background: #d5dfae; color: #4c613b; font: 800 12px/1 var(--font-body); white-space: nowrap; }
  #arena-battle #battle-round-badge { font-size: 12px; }
  #arena-battle .battle-player-rail { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 42px; }
  #arena-battle .battle-player-crest { width: 40px; height: 40px; }
  #arena-battle .battle-player-plaque { grid-template-columns: 40px minmax(0,1fr); padding: 10px; }
  #arena-battle :is(.arena-battle-opponent span,.battle-player-name strong) { font-size: 13px; }
  #arena-battle .battle-plaque-health { font-size: 14px; }
  #tab-arena #arena-battle .battlefield-arena { grid-column: 1; grid-row: 3; }
  #arena-battle .battle-side-panel { grid-column: 2; grid-row: 2/5; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 14px; }
  #arena-battle :is(.battle-inspector,.battle-desktop-log) { display: flex; flex-direction: column; min-height: 0; padding: 14px; border: 1px solid #ccd4ac; border-radius: 8px; background: #eeedd3f5; }
  #arena-battle .battle-desktop-log { background: #234e41f5; color: #e1ebca; border-color: #99ad80; overflow: hidden; }
  #arena-battle .battle-panel-heading { display: flex; align-items: center; gap: 7px; padding-bottom: 9px; border-bottom: 1px solid #93a67866; }
  #arena-battle .battle-panel-heading h2 { margin: 0; font-size: 13px; }
  #arena-battle .battle-panel-heading svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  #arena-battle .battle-inspector-content { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr); gap: 10px; padding-top: 11px; }
  #arena-battle .battle-inspector-art { width: 100%; aspect-ratio: .68; overflow: hidden; border: 1px solid #9caf76; border-radius: 5px; background: #e1e3bc; }
  #arena-battle .battle-inspector-art > :is(img,video,canvas,div) { width: 100%; height: 100%; object-fit: cover; }
  #arena-battle .battle-inspector-copy h3 { margin: 0 0 9px; color: #345132; font-size: 13px; }
  #arena-battle .battle-inspector-copy dl { margin: 0; font-size: 11px; }
  #arena-battle .battle-inspector-copy dt { color: #758660; font-size: 10px; }
  #arena-battle .battle-inspector-copy dd { margin: 0 0 6px; color: #345234; }
  #arena-battle .battle-inspector-copy p { font-size: 11px; }
  #arena-battle .battle-desktop-log-list { min-height: 0; overflow: auto; font-size: 12px; }
  #arena-battle .battle-desktop-log-list .battle-log-entry { padding: 9px 0; border-bottom: 1px solid #9bb18333; color: #dce6c4; }
  body.arena-battle-open #tab-arena #arena-battle #battle-tactical-panel { grid-column: 1; grid-row: 4; }
  #tab-arena #arena-battle .battle-card-name { font-size: 11px; }
  #tab-arena #arena-battle .battle-card-stats { grid-template-columns: minmax(0,1fr) minmax(0,1fr); font-size: 11px; }
  #tab-arena #arena-battle .battle-side-heading :is(strong,span) { font-size: 12px; }
}
@media (max-width:359px) {
  #arena-battle .battle-brand b { font-size: 16px; }
  #arena-battle .battle-brand > svg { width: 17px; flex-basis: 17px; }
  #arena-battle #battle-round-badge { font-size: 9px; }
  #tab-arena #arena-battle .battle-card-stats { font-size: 9px; }
  #tab-arena #arena-battle .battle-card-name { font-size: 8px; }
  #arena-battle .battle-player-plaque { column-gap: 5px; padding: 6px; }
}
#arena-battle :is(button,summary) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover:hover) { #arena-battle :is(.arena-battle-back,.battle-help-button,.battle-options summary):hover { background: #cfdcaf; border-color: #91a76c; } #arena-battle .battle-options-menu button:hover { background: #dce6c2; } }
#arena-battle :is(.arena-battle-back,.battle-help-button,.battle-options summary,.battle-chronicle-button):active { transform: translateY(1px); }
@keyframes reverseTargetPulse { 50% { box-shadow: 0 0 0 2px #e3d7a2,0 4px 9px #806b444d; } }
@keyframes reverseArrow { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion:reduce) { #tab-arena #arena-battle :is(.battle-card-unit,.battle-target-path path) { animation: none; transition: none; } }
html[data-arena-effects="minimal"] #tab-arena #arena-battle :is(.battle-card-unit,.battle-target-path path) { animation: none; }
#arena-battle :is(.battle-card-inspect,#battle-clear-selection,.close-drawer-btn,.battle-options-menu button) svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#arena-battle .battle-card-inspect { display: grid; place-items: center; }
#arena-battle .battle-options-menu button { display: flex; align-items: center; gap: 8px; }
#arena-battle #btn-arena-attack svg { width: 18px; height: 18px; flex: 0 0 18px; }
.arena-media-status { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #dfe6be; background: #1f322577; pointer-events: none; }
.arena-media-status svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; animation: reverseArtRetry 2s linear infinite; }
.arena-media-status small { font-size: 9px; }
@keyframes reverseArtRetry { to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .arena-media-status svg { animation: none; } }
body.arena-battle-open :is(.arena-battle-info-dialog,.arena-card-detail-dialog) button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
body.arena-battle-open :is(.arena-battle-info-dialog,.arena-card-detail-dialog) button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#tab-arena #arena-battle .battle-card-inspect { width: 24px; height: 24px; }

#arena-battle .arena-battle-opponent small { display: flex; align-items: center; gap: 3px; }
#arena-battle .arena-battle-opponent small svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* Nocturne: forged frames over a quiet, illustrated rooftop fighting circle. */
body.arena-battle-open #tab-arena #arena-battle { --table-ink: #e9ecf1; --table-red: #dc6977; color: var(--table-ink); }
#tab-arena #arena-battle .arena-battle-hud { background: #10151feb; border-color: #6e788749; border-radius: 10px; box-shadow: 0 3px 14px #0005,inset 0 1px #ffffff08; }
#arena-battle .battle-brand b { color: #f1f1f5; letter-spacing: -.035em; }
#arena-battle .battle-brand > svg { stroke: #de6374; }
#arena-battle .battle-brand small { color: #98a4b6; }
#arena-battle :is(.arena-battle-back,.battle-help-button,.battle-options summary) { color: #dce2ed; background: #242b37; border-color: #6c778b5c; border-radius: 7px; box-shadow: inset 0 1px #ffffff09; }
#arena-battle :is(.battle-mode-label,.arena-battle-score) { background: #262d38; border-color: #68778f60; color: #dce2ed; }
#arena-battle #battle-round-badge { color: #bdc7d6; }
#arena-battle .battle-options-menu { background: #181f2b; border-color: #536175; box-shadow: 0 16px 30px #0008; }
#arena-battle .battle-options-menu button { color: #e0e6ef; }
#arena-battle .battle-player-plaque { background: #111822e8; border-color: #65728359; border-radius: 10px; box-shadow: inset 0 1px #ffffff09,0 3px 10px #0002; }
#arena-battle .battle-player-plaque--enemy { border-left: 2px solid #c06b79; }
#arena-battle .battle-player-plaque--self { border-left: 2px solid #69a6c4; }
#arena-battle .battle-player-crest { border-color: #a5adb8; background-color: #222c39; }
#arena-battle :is(.arena-battle-opponent small,.battle-player-name small) { color: #9ca9bb; }
#arena-battle :is(.arena-battle-opponent span,.battle-player-name strong,.battle-plaque-health) { color: #edf0f5; }
#arena-battle .battle-plaque-health svg { fill: #ca818e; }
#arena-battle .battle-player-plaque--self .battle-plaque-health svg { fill: #83bdd4; }
#arena-battle .battle-chronicle-button { color: #b9c9dc; background: #171f2b; border-color: #5b6f8c80; }
#arena-battle .battlefield-atmosphere { background: radial-gradient(ellipse,#b5c5e009,transparent 70%); }
#tab-arena #arena-battle .battle-side-heading :is(strong,span) { color: #c6d0df; text-shadow: 0 1px 3px #000; letter-spacing: 0; }
#tab-arena #arena-battle .battle-side-heading span { color: #99afc9; font-weight: 600; }
#tab-arena #arena-battle .battle-card-unit { --frame-metal: #bdc5d1; border: 1px solid #b6bdca; border-radius: 9px; background: linear-gradient(135deg,#737d8a,#232b37 20%,#171e29 80%,#778696); box-shadow: inset 0 0 0 1px #080d16,0 5px 14px #0008; transition: transform .18s ease,border-color .18s,box-shadow .18s; }
#tab-arena #arena-battle .battle-card-unit[data-rarity="2"] { --frame-metal: #8dbbda; border-color: #82accb; }
#tab-arena #arena-battle .battle-card-unit[data-rarity="3"] { --frame-metal: #b9a1dc; border-color: #ad94cc; }
#tab-arena #arena-battle .battle-card-unit[data-rarity="4"] { --frame-metal: #e4c289; border-color: #d5b27b; }
#tab-arena #arena-battle .battle-card-unit[data-rarity="5"] { --frame-metal: #e697a4; border-color: #d4818e; }
#tab-arena #arena-battle .battle-card-media { inset: 4px 4px 41px; border-radius: 5px 5px 0 0; background-color: #141b26; }
#tab-arena #arena-battle .battle-card-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 7px #0006; }
#arena-battle .battle-card-filigree { position: absolute; z-index: 3; inset: 0; pointer-events: none; color: var(--frame-metal); }
#arena-battle .battle-card-filigree svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: .8; vector-effect: non-scaling-stroke; opacity: .8; }
#tab-arena #arena-battle .battle-card-info { inset: auto 3px 3px; height: 38px; min-height: 38px; border-color: #5866758c; border-radius: 0 0 4px 4px; background: #121a27f2; color: #e7eaf0; }
#tab-arena #arena-battle .battle-card-name { color: #edf0f5; font-weight: 700; }
#tab-arena #arena-battle .battle-card-stats b { color: #a7d6e4; font-variant-numeric: tabular-nums; }
#tab-arena #arena-battle .battle-card-stats b:first-child { color: #e6c79b; }
#tab-arena #arena-battle .battle-card-stats svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
#tab-arena #arena-battle .battle-card-hp { background: #3a485b; }
#tab-arena #arena-battle .battle-card-hp i { background: #79b8cc; transition: width .24s; }
#tab-arena #arena-battle .enemy .battle-card-hp i { background: #bf7384; }
#tab-arena #arena-battle :is(.battle-card-lane-mark,.battle-card-inspect) { background: #161d2bed; color: #e2e7ee; border-color: #8393a3; box-shadow: 0 1px 4px #0007; }
#tab-arena #arena-battle .battle-card-lane-mark { border-radius: 4px 0 4px 0; font-weight: 800; }
#tab-arena #arena-battle .battle-card-inspect { right: 2px; top: 2px; border-radius: 0 6px 0 6px; }
#tab-arena #arena-battle .battle-card-unit.selected-attacker { border-color: #a2d7ed; box-shadow: 0 0 0 2px #8dccdf,0 5px 20px #4a93b84d; }
#tab-arena #arena-battle .battle-card-unit.selected-target { border-color: #e993a1; box-shadow: 0 0 0 2px #dd7487,0 5px 20px #bc53684d; }
#tab-arena #arena-battle .battle-card-unit.target-candidate { border-color: #c88191; animation: none; box-shadow: 0 0 0 1px #c8819145,0 5px 14px #0008; }
#tab-arena #arena-battle .battle-card-state { color: #d8f0fb; background: #244b62e8; font-weight: 700; }
#tab-arena #arena-battle .battle-card-target-mark { color: #ffe0e7; background: #723747e8; font-weight: 700; }
#tab-arena #arena-battle .battle-card-death-label { color: #d0d6df; background: #161d2bee; }
#tab-arena #arena-battle .battle-card-unit.dead { border-color: #606776; box-shadow: 0 3px 9px #0005; }
#tab-arena #arena-battle .battle-card-unit.dead .battle-card-media { opacity: .35; }
#tab-arena #arena-battle .battle-center-copy strong { color: #e2e7ee; background: #171f2cf0; border-color: #6a7d9270; border-radius: 20px; padding: 6px 12px; font-weight: 700; }
#tab-arena #arena-battle .battle-center-copy small { color: #b7c6da; text-shadow: 0 1px #000; }
#arena-battle .battle-center-sigil { stroke: #9bafca88; fill: #bfd5f008; }
#tab-arena #arena-battle .battle-turn-rule { background: #a8bdd333; }
#tab-arena #arena-battle .battle-target-path path { stroke: #8fcee6; }
#tab-arena #arena-battle .battle-target-path marker path { fill: #8fcee6; }
body.arena-battle-open #tab-arena #arena-battle #battle-tactical-panel { background: #101722ed !important; border-color: #6f829a59 !important; border-radius: 10px !important; box-shadow: inset 0 1px #ffffff09,0 5px 15px #0003; }
#arena-battle .battle-selection-summary strong { color: #e0e8f3; }
#arena-battle .battle-selection-summary svg { stroke: #9fc7dd; }
#arena-battle #battle-clear-selection { color: #cbd6e4; background: #232e3e; border-color: #61738b80; border-radius: 6px; }
body.arena-battle-open #tab-arena #arena-battle #caster-name { color: #a8b9cf; }
body.arena-battle-open #tab-arena #arena-battle #btn-arena-attack { color: #fff4f4 !important; border-color: #dc8492 !important; border-radius: 7px !important; background: linear-gradient(#b34e61,#913346) !important; box-shadow: inset 0 1px #f4afbb4d,0 4px 10px #0004; gap: 7px; }
body.arena-battle-open #tab-arena #arena-battle #btn-arena-attack:disabled { background: #2a3546 !important; border-color: #687b944d !important; color: #9bacbf !important; box-shadow: inset 0 1px #ffffff08; }
#arena-battle :is(.battle-inspector,.battle-desktop-log) { background: #111924f2; border-color: #65758966; color: #e3e9f1; box-shadow: inset 0 1px #ffffff08; }
#arena-battle .battle-panel-heading { border-color: #63758a66; }
#arena-battle .battle-panel-heading h2 { color: #e0e6f0; }
#arena-battle .battle-inspector-art { background: #172331; border-color: #76869a; }
#arena-battle .battle-inspector-copy :is(h3,dd) { color: #e3e9f1; }
#arena-battle .battle-inspector-copy :is(dt,p) { color: #9fb0c6; }
#tab-arena #arena-battle .battle-log-drawer { position: fixed; left: 0; right: 0; bottom: 0; width: min(480px,100%); height: min(70dvh,480px); background: #111924 !important; border-color: #697d97 !important; color: #e0e7f1; box-shadow: 0 -18px 60px #0008; }
#arena-battle .battle-log-drawer .drawer-header { color: #e5ebf4; border-color: #647b983d; }
#arena-battle .close-drawer-btn { color: #c7d4e6; background: #222e40; border: 1px solid #5a6f8c; border-radius: 7px; width: 32px; height: 32px; display: grid; place-items: center; }
#arena-battle :is(.battle-log-entry,.battle-desktop-log-list .battle-log-entry) { color: #c7d3e2; border-color: #7287a326; padding: 10px 0; }
#arena-battle .chronicle-attack { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 7px; align-items: center; }
#arena-battle .chronicle-strike { color: #9ec9e0; }
#arena-battle .chronicle-attack[data-side="enemy"] .chronicle-strike { color: #db93a3; }
#arena-battle .chronicle-attack svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: 0 0 auto; }
#arena-battle .chronicle-strike svg { width: 22px; height: 22px; }
#arena-battle .chronicle-side { color: #92a8c0; font-size: 9px; }
#arena-battle .chronicle-attack p { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin: 4px 0; color: #e4eaf3; font-size: 11px; line-height: 1.3; }
#arena-battle .chronicle-attack small { display: flex; align-items: center; gap: 3px; color: #a0b3cb; font-size: 10px; }
#arena-battle .chronicle-damage { align-self: center; color: #e8a3ad; font-size: 12px; font-variant-numeric: tabular-nums; }
#arena-battle .chronicle-round { display: flex; align-items: center; gap: 6px; color: #d3deed; font-weight: 700; }
#arena-battle .chronicle-round svg { width: 15px; height: 15px; fill: none; stroke: #b2c5df; stroke-width: 1.5; }
#arena-battle :is(.chronicle-turn,.chronicle-system) { color: #91a4be; font-size: 10px; }
body.arena-battle-open :is(.arena-battle-info-dialog,.arena-confirm-dialog,.arena-card-detail-dialog) { background: #172131; color: #e7eef7; border-color: #607895; box-shadow: 0 14px 80px #0008; }
body.arena-battle-open :is(.arena-battle-info-dialog,.arena-confirm-dialog,.arena-card-detail-dialog) :is(p,span,small) { color: #a6b9d1; }
body.arena-battle-open :is(.arena-battle-info-dialog,.arena-confirm-dialog,.arena-card-detail-dialog) button { background: #293951; color: #e2eaf5; border-color: #637d9f; }
body.arena-battle-open .guided-tour .guided-tour__popup { background: #192438; color: #e6eef8; border-color: #708aac; box-shadow: 0 12px 70px #0009; }
body.arena-battle-open .guided-tour :is(.guided-tour__title,.guided-tour__text,.guided-tour__count) { color: #e1eaf7; }
body.arena-battle-open .guided-tour .guided-tour__popup :is(.guided-tour__skip,.guided-tour__back) { color: #a8bdd8; }
body.arena-battle-open .guided-tour .guided-tour__next { background: #ad4d64; color: #fff; border-color: #d8879d; }
body.arena-battle-open .guided-tour .guided-tour__progress { background: #d68095; }
#arena-battle :is(button,summary):focus-visible { outline-color: #b1d6ed; }
@media(hover:hover) { #arena-battle :is(.arena-battle-back,.battle-help-button,.battle-options summary):hover { background: #354255; border-color: #8ba3c2; } #arena-battle .battle-options-menu button:hover { background: #2a3a51; } }
.arena-media-status { color: #d0deee; background: #10192588; }
.arena-strike-ghost { border-color: #c5dcec; background: #162333; box-shadow: 0 8px 24px #0008,0 0 18px #90c4df55; }
.arena-strike-trail { position: absolute; z-index: 58; height: 14px; margin-top: -7px; transform-origin: left center; pointer-events: none; color: #adddf4; animation: nocturneTrail .3s ease-out both; }
.arena-strike-trail[data-side="enemy"] { color: #f6a3b3; }
.arena-strike-trail svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 0 4px currentColor); }
.arena-impact-glyph { position: absolute; z-index: 73; width: 80px; height: 80px; pointer-events: none; transform: translate(-50%,-50%); color: #fce2d7; animation: nocturneImpact .3s ease-out both; }
.arena-impact-glyph svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; stroke-width: .8; }
.arena-impact-glyph circle { fill: none; opacity: .55; }
.arena-hit-number { color: #fff0ee; font-weight: 900; text-shadow: 0 2px 5px #270511,0 0 8px #c04567; }
.arena-impact-burst::before { border-color: #f2b9cb; }
.arena-impact-burst::after { background: #fff2f4; }
.arena-impact-burst i { background: #efa0b8; }
.arena-death-shards i { background: #b8cce4; }
@keyframes nocturneTrail { 0%,30% { opacity: 0; } 65% { opacity: .75; } 100% { opacity: 0; } }
@keyframes nocturneImpact { 0% { opacity: 0; scale: .65; } 20% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.3; } }
@media(prefers-reduced-motion:reduce) { .arena-strike-trail,.arena-impact-glyph { display: none; } #tab-arena #arena-battle .battle-card-hp i { transition: none; } }

#tab-arena #arena-battle .battle-card-stats b:last-child { color: #a7d6e4; }
#tab-arena #arena-battle .battle-log-drawer { inset: auto 0 0; margin: 0 auto; transform: none; max-width: 100%; }
#tab-arena #arena-battle .battle-log-drawer { animation: nocturneDrawer .22s ease-out; }
@keyframes nocturneDrawer { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media(min-width:1000px) {
  #tab-arena #arena-battle :is(.arena-battle-back,.battle-help-button) { width: auto; min-width: 88px; padding-inline: 10px; }
  #tab-arena #arena-battle :is(.arena-battle-back,.battle-help-button) svg { flex-shrink: 0; }
  #tab-arena #arena-battle .arena-battle-hud { column-gap: 8px; }
}
@media(prefers-reduced-motion:reduce) { #tab-arena #arena-battle .battle-log-drawer { animation: none; } }