/* Presentation only: retain the fixed combat canvas and formation coordinates. */
#game-root .battle-view { background: #dedbcc; }
#game-root .battle-view__stage {
  background-color: #e4e0d2;
  background-image: linear-gradient(#eee9dd22, #eee9dd22), var(--battle-background-image, none);
}
#game-root .battle-view { --combat-ink: #303c35; --combat-paper: #f1ecdded; --combat-edge: #9a906d; }
#game-root .battle-view[data-battle-scene="heart-demon"] {
  --combat-ink: #f1e6c9; --combat-paper: #303b3bec; --combat-edge: #ac9d7a;
  background: #303738;
}
#game-root .battle-view[data-battle-scene="heart-demon"] .battle-view__stage { background-color: #343d3e; }
#game-root .battle-combatant__identity :is(strong, span) { color: var(--combat-ink); text-shadow: 0 1px 3px var(--combat-paper); }
#game-root .battle-combatant__name { color: var(--combat-ink); text-shadow: 0 1px 3px var(--combat-paper); }
#game-root .battle-combatant .battle-combatant__art:not(.has-image) {
  background: var(--combat-paper); border-color: var(--combat-edge);
  box-shadow: inset 0 0 0 3px #a49a7422; color: var(--combat-ink);
}
#game-root .battle-view :is(.battle-round-control, .battle-flee-control, .battle-skip-control, .battle-speed-control, .battle-action-label) {
  color: var(--combat-ink); background: var(--combat-paper); border-color: var(--combat-edge);
  text-shadow: none;
}
#game-root .battle-view button:disabled { opacity: .65; }
#game-root .battle-damage-number { text-shadow: -1px -1px 1px #25302b, 1px 1px 1px #25302b, 0 1px 3px #25302b; }
#game-root .battle-view__result {
  background: #eee9da; color: #354137; border: 1px solid #9c916c;
  box-shadow: inset 0 0 0 4px #eee9da, inset 0 0 0 5px #b4aa86, 0 12px 38px #18251e55;
}
#game-root .battle-view__result > strong { color: #3f5845; font-size: 24px; }
#game-root .battle-view__result.is-fail > strong { color: #944d3c; }
#game-root .battle-view__result span { color: #525b4e; font-size: 14px; }
#game-root .battle-view__result button { font-size: 17px; }
#game-root .battle-view-result-log { background: #e2ddcb; border-color: #b1a888; }
#game-root .battle-view-result-log :is(summary, ol) { color: #38453c; font-size: 14px; }
#game-root .battle-view-result-log ol { scrollbar-color: #a29c85 #e2ddcb; }
#game-root .battle-flee-dialog {
  box-sizing: border-box;
  width: min(290px, calc(var(--game-base-width) - 32px));
  min-width: 0;
}
#game-root .battle-flee-dialog > .battle-flee-dialog__content {
  box-sizing: border-box; width: 100%;
  background: transparent; border: 0; box-shadow: none;
}
#game-root .battle-flee-dialog .attribute-modal__heading { display: block; text-align: center; }
#game-root .battle-flee-dialog h2 { width: 100%; text-align: center; }
#game-root .battle-flee-dialog__content p { color: #525b4e; font-size: 14px; }
#game-root .battle-flee-dialog button { font-size: 18px !important; }
#game-root .bag-slot > .bag-slot__count {
  top: 3px; right: 3px; z-index: 3;
  max-width: calc(100% - 6px); padding: 2px 4px;
  border-radius: 4px; background: #455144; color: #fff9e8;
  font-size: 11px; line-height: 1.2; font-weight: 700;
  white-space: nowrap; overflow: visible; text-overflow: clip;
  pointer-events: none; text-shadow: none;
}
/* Shared card-combat effects. Only opacity and transform animate. */
.battle-card-fx-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:8;contain:layout style}
.battle-card-fx{position:absolute;pointer-events:none;transform:translate(-50%,-50%);animation:card-fx-pulse .42s both;--fx-color:#aee8ff}
.battle-card-fx::before,.battle-card-fx::after{content:"";position:absolute;pointer-events:none}
.battle-card-fx--slash{background:url('../assets/images/battlefield/combat-vfx-v5/crescent.webp') center/contain no-repeat;animation-name:card-fx-slash;animation-timing-function:cubic-bezier(.12,.65,.28,1);filter:drop-shadow(0 0 2px #ffe6b0)}
.battle-card-fx--orb{animation-name:card-fx-flight}
.battle-card-fx--orb::before{width:26px;height:26px;left:calc(50% - 13px);top:calc(50% - 13px);border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff 0 8%,#c8fbff 18%,#66d7f0 36%,#2b799b80 62%,transparent 73%);box-shadow:0 0 14px #9beaff80}
.battle-card-fx--orb::after{inset:20% 28%;border-radius:50%;border:1px solid #b1efff75;transform:rotate(-30deg);background:radial-gradient(ellipse,#82dfff35,transparent 65%)}
.battle-card-fx--impact{background:radial-gradient(ellipse at center,#fffbd9b0, #9adcf650 15%,transparent 52%);animation-name:card-fx-impact}
.battle-card-fx--impact::before{inset:42% 8%;background:linear-gradient(90deg,transparent,#fffce5,transparent);clip-path:polygon(0 50%,44% 42%,50% 0,56% 42%,100% 50%,56% 58%,50% 100%,44% 58%);transform:rotate(-25deg)}
.battle-card-fx--poison{background:url('../assets/images/battle/card-vfx/poison.svg') center/contain no-repeat;animation-name:card-fx-rise;filter:drop-shadow(0 0 2px #9a48b978)}
.battle-card-fx--burn{background:url('../assets/images/battle/card-vfx/burn-v2.png') center/contain no-repeat;animation-name:card-fx-burn;animation-timing-function:ease-out;filter:saturate(.62);mask-image:linear-gradient(to bottom,transparent 5%,#0008 24%,#000 43%);-webkit-mask-image:linear-gradient(to bottom,transparent 5%,#0008 24%,#000 43%)}
.battle-card-fx--heal{background:radial-gradient(ellipse at 50% 85%,#8fe1a660,transparent 60%);animation-name:card-fx-rise}
.battle-card-fx--heal::before{inset:15% 20%;background:radial-gradient(circle at 15% 70%,#d4ffdd 0 2px,transparent 3px),radial-gradient(circle at 70% 55%,#a9efbe 0 2px,transparent 3px),radial-gradient(circle at 45% 85%,#fff6cc 0 2px,transparent 3px),radial-gradient(circle at 85% 25%,#dbffce 0 1px,transparent 3px)}
.battle-card-fx--shield::before{inset:4% 1%;border:1px solid #c5f0ff;border-radius:48%;background:linear-gradient(115deg,transparent 35%,#b1e9ff40 50%,transparent 65%);box-shadow:inset 0 0 10px #b1e9ff40,0 0 7px #b1e9ff65}
.battle-combatant__art.has-battle-shield::after{content:"";position:absolute;inset:-3% -5%;z-index:2;pointer-events:none;border:2px solid #388ce2;border-radius:48%;background:radial-gradient(ellipse at 40% 35%,#b3e8ff06 30%,#2879d52e 65%,#206bc56b 91%,#83cfff85);box-shadow:inset 0 0 12px #246dc46b,0 0 7px #4cafff70}
.battle-card-fx--revive{background:linear-gradient(90deg,transparent,#eecb7038, #fff4c580,#eecb7038,transparent);animation-name:card-fx-revive}
.battle-card-fx--revive::before{inset:65% 2% 7%;border-radius:50%;border-bottom:2px solid #ffe8a6;background:radial-gradient(ellipse at bottom,#fff3c490,transparent 70%)}
.battle-card-fx--revive b{position:absolute;bottom:7%;left:0;width:100%;text-align:center;color:#fff2bd;font-size:17px;text-shadow:0 1px 3px #493315;letter-spacing:4px}
@keyframes card-fx-pulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes card-fx-slash{0%{opacity:0;transform:translate(-53%,-12%) rotate(-104deg) scale(.42,.32)}12%{opacity:.7;transform:translate(-52%,-20%) rotate(-99deg) scale(.58,.46)}38%{opacity:1;transform:translate(-50%,-46%) rotate(-90deg) scale(.72,.68)}65%{opacity:.75;transform:translate(-48%,-68%) rotate(-83deg) scale(.68,.58)}100%{opacity:0;transform:translate(-46%,-80%) rotate(-78deg) scale(.55,.35)}}
@keyframes card-fx-flight{0%{opacity:0;transform:translate(calc(-50% + var(--fx-dx)),calc(-50% + var(--fx-dy))) scale(.65)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes card-fx-impact{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
@keyframes card-fx-rise{0%{opacity:0;transform:translate(-50%,-40%) scale(.9)}28%{opacity:1}100%{opacity:0;transform:translate(-50%,-65%) scale(1.05)}}
@keyframes card-fx-revive{0%{opacity:0;transform:translate(-50%,-38%) scaleY(.4)}30%,65%{opacity:1;transform:translate(-50%,-50%) scaleY(1)}100%{opacity:0;transform:translate(-50%,-56%) scaleY(1.08)}}
@media(prefers-reduced-motion:reduce){.battle-card-fx{animation-name:card-fx-pulse}}
.battle-damage-number--healing{color:#a0efb0!important;font-weight:700}

@keyframes card-fx-burn{0%{opacity:0;transform:translate(-50%,-15%) scale(.68,.29)}15%{opacity:.7;transform:translate(-50%,-23%) scale(.75,.35)}55%{opacity:.65;transform:translate(-50%,-44%) scale(.78,.40)}100%{opacity:0;transform:translate(-50%,-63%) scale(.76,.43)}}

