/* Four visible adventurers, readable combat playback, and purposeful effects. */
.arena {
  container-type: inline-size;
  isolation: isolate;
  height: auto;
  min-height: 0;
  padding-bottom: 14px;
  border-color: #657e726b;
  box-shadow: inset 0 1px 0 #d9ecd912, 0 16px 42px #030c1229;
}
.arena .arena-top { padding: 16px 18px 13px; }
.arena .next-intent { background: #102028c9; border-color: #91b5ab4a; }
.arena .combatants {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(100px, .9fr);
  gap: 16px;
  padding: 0 20px;
  align-items: stretch;
  z-index: 2;
}
.arena .versus { display: none; }
.arena .combatant { display: flex; flex-direction: column; min-width: 0; }
.arena .fighter-info { width: 100%; max-width: none; margin: 0; }
.arena .fighter-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1px 8px;
  min-height: 40px;
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
}
.arena .fighter-meta > span:first-child { display: block; min-height: 0; }
.arena .fighter-meta > span:last-child { font-size: 13px; font-weight: 700; color: #ecf3df; }
.arena .health-track { height: 11px; border: 1px solid #0612158c; margin-top: 4px; }
.arena .health-fill { transition: width .38s cubic-bezier(.17,.8,.3,1); }
.arena .fighter-caption, .arena .arena-caption { display: none; }

#hero-art { display: block; height: auto; min-height: 0; margin-top: 10px; overflow: visible; }
#party-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 6px 8px;
  position: relative;
  width: 100%;
  padding-bottom: 3px;
}
.stage-member {
  --member-accent: var(--green);
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 0 3px 7px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: linear-gradient(180deg, transparent 35%, #0a19225c);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.stage-member[data-character="hero"] { --member-accent: #d8ecac; }
.stage-member[data-character="bram"] { --member-accent: #8ccddc; }
.stage-member[data-character="lyra"] { --member-accent: #c5a1ed; }
.stage-member[data-character="mira"] { --member-accent: #f5da91; }
.stage-member[data-character="riven"] { --member-accent: #f0a08b; }
.stage-member[data-character="orrin"] { --member-accent: #8cbde9; }
.stage-member[data-character="sera"] { --member-accent: #f4c78e; }
.member-figure { position: relative; display: grid; place-items: end center; height: 128px; min-width: 0; }
.character-avatar { display: block; width: auto; height: 100%; max-width: 100%; overflow: visible; filter: drop-shadow(0 5px 4px #050d144f); }
.avatar-figure { transform-box: fill-box; transform-origin: 50% 95%; animation: fb-breathe 4.6s ease-in-out infinite; }
.avatar-cloak { transform-box: fill-box; transform-origin: 50% 4%; animation: fb-cloak 5s ease-in-out infinite; }
.avatar-weapon { transform-box: fill-box; transform-origin: 35% 70%; }
.avatar-magic { transform-box: fill-box; transform-origin: center; animation: fb-magic-glow 3s ease-in-out infinite; }
.stage-member:nth-child(2) .avatar-figure { animation-delay: -.8s; }
.stage-member:nth-child(3) .avatar-figure { animation-delay: -1.7s; }
.stage-member:nth-child(4) .avatar-figure { animation-delay: -2.6s; }
.stage-name { display: block; position: relative; z-index: 3; font-size: 13px; font-weight: 700; line-height: 1.4; color: #f1f5e8; text-align: center; overflow-wrap: anywhere; }
.stage-action { display: block; position: relative; z-index: 3; min-height: 17px; margin-top: 2px; color: #aec2be; font-size: 11px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.stage-member.is-selected { border-color: #cee7a357; background: linear-gradient(180deg, transparent 20%, #b4d37c19); }
.stage-member.is-selected .avatar-ring { opacity: .75; }
.stage-member.is-ready .stage-action { color: var(--member-accent); }
.stage-member.is-ready .stage-name::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 2px 5px; border-radius: 50%; background: var(--member-accent); box-shadow: 0 0 6px var(--member-accent); }
.stage-member.is-acting { z-index: 5; border-color: var(--member-accent); background: linear-gradient(180deg, #f5edbe09, #c7e9a525); box-shadow: 0 0 18px #e0e6a823; }
.stage-member.is-acting .stage-action { color: #fff2cb; font-weight: 700; }
.stage-member.is-acting .avatar-ring { opacity: 1; }
.stage-member.is-acting .avatar-figure { animation: fb-member-lunge .64s cubic-bezier(.15,.66,.3,1) both; }
.stage-member.is-acting .avatar-weapon { animation: fb-weapon-swing .6s ease both; }
.stage-member:is([data-character="lyra"], [data-character="mira"], [data-character="orrin"], [data-character="sera"]).is-acting .avatar-figure { animation-name: fb-member-cast; }
.stage-member:is([data-character="lyra"], [data-character="sera"]).is-acting .avatar-weapon { animation-name: fb-bow-release; }
.stage-member:is([data-character="mira"], [data-character="orrin"]).is-acting .avatar-weapon { animation-name: fb-staff-cast; }
.stage-member.is-hit .avatar-figure { animation: fb-member-hit .5s ease both; }
.stage-member.is-hit { border-color: #f39f8680; }
.stage-member.is-healing { box-shadow: inset 0 0 22px #a9e9ae36, 0 0 14px #9ce8ac24; }
.stage-member.is-healing .avatar-figure { animation: fb-heal-glow .75s ease both; }
.stage-member.is-healing .stage-action { color: #bcf2bf; }
.stage-member.is-healing::after {
  content: "";
  position: absolute;
  inset: 12% 7% 24%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 14% 80%, #deffba 0 2px, transparent 3px), radial-gradient(circle at 75% 75%, #deffba 0 2px, transparent 3px), radial-gradient(circle at 50% 40%, #deffba 0 3px, transparent 4px), radial-gradient(circle at 85% 22%, #deffba 0 2px, transparent 3px);
  animation: fb-heal-particles .8s ease-out both;
}
.stage-member.is-guarding::before {
  content: "";
  position: absolute;
  inset: 15% 6% 25%;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(50% 0, 93% 18%, 88% 60%, 70% 86%, 50% 100%, 30% 86%, 12% 60%, 7% 18%);
  background: linear-gradient(135deg, #c2f0ed6b, #9edcee15 47%, #93d3eb4d);
  box-shadow: inset 0 0 16px #c8fbff;
  animation: fb-ward .8s ease-out both;
}
.stage-member.is-guarding .stage-action { color: #b4e3f3; }

#enemy-art {
  flex: 1;
  min-height: 228px;
  height: auto;
  margin-top: 16px;
  align-items: center;
  overflow: visible;
}
.arena #enemy-art img, .arena[data-stage="4"] #enemy-art img { height: 224px; width: 100%; max-width: 245px; object-fit: contain; object-position: center; transform-origin: 50% 80%; }
#enemy-art .ground-shadow { bottom: 20%; width: 85%; max-width: 145px; opacity: .8; }
.arena .intent-badge { min-height: 46px; margin-top: 4px; background: #1d2432c7; border-color: #de9a7769; font-size: 13px; font-weight: 600; color: #f1c8af; }
#enemy-art.is-acting img, #enemy-art.attack img { animation: fb-enemy-lunge .7s cubic-bezier(.12,.72,.25,1) both; }
#enemy-art.is-hit img, #enemy-art.hit img { animation: fb-enemy-hit .55s ease both; }
#enemy-art.is-defeated, #enemy-art.defeated { opacity: .24; filter: grayscale(.8); transition: opacity .7s, filter .7s; }
#enemy-art.is-defeated img { animation: fb-enemy-defeat .8s ease-out both; }

#action-callout {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  min-height: 82px;
  margin: 14px 16px 0;
  padding: 13px 15px;
  border: 1px solid #92b3ac66;
  border-left: 3px solid #cfe7a2;
  border-radius: 11px;
  background: linear-gradient(115deg, #132a32f0, #14232de8);
  box-shadow: 0 8px 20px #03101636;
  text-align: left;
}
#action-callout .actor { align-self: baseline; color: #e0f0bc; font-size: 13px; line-height: 1.6; font-weight: 700; }
#action-callout .action { align-self: baseline; min-width: 0; font-size: 16px; line-height: 1.4; color: #f6f3dc; font-weight: 750; overflow-wrap: anywhere; }
#action-callout .detail { grid-column: 1 / -1; min-width: 0; font-size: 13px; line-height: 1.55; color: #c5d7d1; overflow-wrap: anywhere; }
#action-callout .detail strong, #action-callout .detail b { color: #fff0bd; }
#action-callout.is-active { animation: fb-callout-in .25s ease-out both; }
.arena[data-effect="enemy"] #action-callout { border-left-color: #eda88d; }
.arena[data-effect="heal"] #action-callout { border-left-color: #b2e8b2; }
.arena[data-effect="guard"] #action-callout { border-left-color: #9dd6ea; }
.arena[data-effect="special"] #action-callout { border-left-color: #e7c68d; background: linear-gradient(115deg, #38322af0, #172934e8); }
.arena[data-effect="victory"] #action-callout { border-color: #d1da9a88; background: linear-gradient(115deg, #35492bf0, #1a302be8); }

#turn-order { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin: 12px 16px 0; }
#turn-order .turn-chip, #turn-order .order-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 8px;
  color: #c0d2cd;
  border: 1px solid #89a6a03b;
  border-radius: 7px;
  background: #102029b3;
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transition: background .2s, border-color .2s, opacity .2s;
}
#turn-order .is-active, #turn-order .active { background: #d6e7a925; border-color: #d6e7a9b3; color: #f1f8d8; box-shadow: 0 0 12px #d6e7a91a; }
#turn-order .is-done, #turn-order .complete { opacity: .6; }
#turn-order .turn-chip b { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 4px; background: #dae6bb18; font-size: 10px; }
#turn-order .is-enemy { border-color: #c797785c; color: #e2b8a1; }
#battle-playback { position: relative; z-index: 4; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin: 9px 16px 0; }
#battle-playback button { min-height: 44px; min-width: 44px; padding: 8px 13px; border: 1px solid #8aada266; border-radius: 8px; background: #172c32d9; color: #e1ead7; font-size: 13px; font-weight: 650; }
#battle-playback button:hover:not(:disabled) { background: #2c4645; border-color: #d6e7a9a6; }
#battle-playback button[aria-pressed="true"] { background: #d6e7a9; border-color: #d6e7a9; color: #20352c; }
#battle-playback button:disabled { opacity: .5; }
#battle-playback .playback-note { font-size: 12px; color: #b4c9bf; line-height: 1.4; }

#battle-effects { position: absolute; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; }
.combat-projectile {
  --effect-color: #e6e9b8;
  position: absolute;
  left: var(--from-x, 24%);
  top: var(--from-y, 44%);
  display: block;
  width: 48px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--effect-color));
  box-shadow: 0 0 11px var(--effect-color);
  transform-origin: center;
  animation: fb-projectile .43s cubic-bezier(.12,.52,.58,1) both;
}
.combat-projectile > svg { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); color: #fff5d4; overflow: visible; }
.combat-projectile.arrow > svg, .combat-projectile.slash > svg, .combat-projectile.enemy > svg { display: none; }
.combat-projectile.arrow { --effect-color: #d9c4ed; height: 3px; width: 48px; }
.combat-projectile.arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 9px; height: 9px; border-top: 3px solid #f2e9d0; border-right: 3px solid #f2e9d0; transform: rotate(45deg); }
.combat-projectile.spell { --effect-color: #efda9e; width: 23px; height: 23px; border: 3px solid #fff2c9; background: radial-gradient(circle, #fff9df, #ead78c 35%, #b1d8bc00 75%); box-shadow: 0 0 17px #eee3a6; }
.combat-projectile.spell::after { content: ""; position: absolute; inset: -8px; border: 1px solid #f1e1a76e; border-radius: 50%; }
.combat-projectile.slash { --effect-color: #f3dfab; width: 67px; height: 33px; background: transparent; border-top: 5px solid #fcf2d3; border-radius: 80% 20% 0 0; box-shadow: 0 -5px 12px #ead89e77; animation-name: fb-slash; }
.combat-projectile.enemy { --effect-color: #f1a188; height: 13px; width: 39px; background: linear-gradient(270deg, transparent, #efae8b); animation-duration: .5s; }
.combat-projectile.heal { --effect-color: #c0f0ae; width: 14px; height: 14px; background: #dafac1; clip-path: polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%); animation-duration: .6s; }
.combat-projectile.guard { --effect-color: #acdfee; width: 28px; height: 35px; border: 2px solid #c5eff9; background: #9fdae73d; border-radius: 6px 6px 55% 55%; animation-duration: .5s; }
.battle-number {
  position: absolute;
  z-index: 11;
  width: max-content;
  max-width: 90%;
  color: #fff2c7;
  font-size: clamp(25px, 6cqw, 40px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.8px;
  text-shadow: 0 2px 0 #172126, 2px 0 0 #172126, -2px 0 0 #172126, 0 -2px 0 #172126, 0 5px 10px #071118;
  pointer-events: none;
  animation: fb-number-rise 1.05s cubic-bezier(.1,.6,.35,1) both;
}
.battle-number.heal { color: #c8f8b9; }
.battle-number.guard { color: #b2e3f4; font-size: clamp(22px, 5cqw, 32px); }
.battle-number.critical { color: #ffd98a; font-size: clamp(30px, 7cqw, 48px); }
.battle-number small { display: block; font-size: 11px; font-weight: 800; text-align: center; line-height: 1.6; letter-spacing: .5px; }
.arena.resolving::after { display: none; }
.arena[data-effect]::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.arena[data-effect="special"]::before { background: radial-gradient(ellipse at 72% 45%, #f1d49426, transparent 70%); animation: fb-arena-wash .75s ease both; }
.arena[data-effect="enemy"]::before { background: linear-gradient(90deg, #e7978018, transparent 90%); animation: fb-arena-wash .7s ease both; }
.arena[data-effect="heal"]::before { background: radial-gradient(ellipse at 27% 48%, #addf9f24, transparent 72%); animation: fb-arena-wash .8s ease both; }
.arena[data-effect="guard"]::before { background: radial-gradient(ellipse at 28% 48%, #8ccfe024, transparent 70%); animation: fb-arena-wash .8s ease both; }
.arena[data-effect="victory"]::before { background: radial-gradient(ellipse at 50% 35%, #e8dd8a2e, transparent 70%); opacity: 1; transition: opacity .8s; }

@container (min-width: 700px) {
  .arena .combatants { grid-template-columns: minmax(0, 2fr) minmax(190px, 1fr); gap: 24px; padding: 0 26px; }
  #party-stage { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; min-height: 245px; align-items: end; }
  .member-figure { height: 173px; }
  .stage-member:nth-child(2), .stage-member:nth-child(4) { margin-bottom: 15px; }
  #hero-art { display: flex; align-items: end; flex: 1; }
  #enemy-art { min-height: 228px; }
  .arena #enemy-art img, .arena[data-stage="4"] #enemy-art img { height: 250px; max-width: 250px; }
  .stage-name { font-size: 14px; }
  .stage-action { font-size: 12px; min-height: 18px; }
  #action-callout { margin-left: 24px; margin-right: 24px; }
}
@container (max-width: 440px) {
  .arena .combatants { grid-template-columns: minmax(0, 1.45fr) minmax(85px, .9fr); gap: 10px; padding: 0 11px; }
  .arena .fighter-meta { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: end; gap: 2px; min-height: 53px; font-size: 12px; }
  .arena .fighter-meta > span:last-child { font-size: 12px; }
  .arena .fighter-meta > span:first-child { min-height: 0; }
  .arena .health-track { height: 10px; }
  #party-stage { gap: 5px 3px; }
  .stage-member { padding: 0 0 4px; border-radius: 9px; }
  .member-figure { height: 106px; }
  .stage-name { font-size: 12px; }
  .stage-action { min-height: 16px; font-size: 11px; line-height: 1.35; }
  #enemy-art { min-height: 202px; margin-top: 14px; }
  .arena #enemy-art img, .arena[data-stage="4"] #enemy-art img { height: 204px; max-width: 170px; width: calc(100% + 12px); }
  .arena .intent-badge { font-size: 12px; padding: 6px; min-height: 46px; line-height: 1.4; }
  .arena .intent-badge svg { width: 13px; flex: none; }
  #action-callout { margin: 12px 10px 0; min-height: 86px; padding: 10px 11px; gap: 2px 7px; }
  #action-callout .action { font-size: 15px; }
  #action-callout .actor, #action-callout .detail { font-size: 12px; }
  #turn-order { gap: 4px; margin: 10px 10px 0; }
  #turn-order .turn-chip, #turn-order .order-chip { font-size: 11px; padding: 4px 6px; }
  #battle-playback { margin: 7px 10px 0; gap: 6px; }
  #battle-playback button { padding: 7px 11px; font-size: 12px; }
}

@keyframes fb-breathe { 0%, 100% { transform: translateY(0) rotate(-.25deg); } 50% { transform: translateY(-2.2px) rotate(.25deg); } }
@keyframes fb-cloak { 0%, 100% { transform: skewX(-.5deg); } 50% { transform: skewX(1.2deg); } }
@keyframes fb-magic-glow { 0%, 100% { opacity: .85; } 50% { opacity: 1; filter: drop-shadow(0 0 3px #f3eaa8); } }
@keyframes fb-member-lunge { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-5px) rotate(-4deg); } 52% { transform: translateX(18px) rotate(8deg); } 72% { transform: translateX(9px) rotate(3deg); } }
@keyframes fb-member-cast { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px) rotate(-2deg); } 65% { transform: translateY(-3px) rotate(2deg); filter: brightness(1.18); } }
@keyframes fb-weapon-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-28deg); } 54% { transform: rotate(24deg); } 75% { transform: rotate(11deg); } }
@keyframes fb-bow-release { 0%, 100% { transform: translateX(0) scaleX(1); } 30% { transform: translateX(-2px) scaleX(.88); } 58% { transform: translateX(4px) scaleX(1.06); } }
@keyframes fb-staff-cast { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-12deg) translateY(-3px); } 60% { transform: rotate(13deg); filter: brightness(1.35); } }
@keyframes fb-member-hit { 0%, 100% { transform: translateX(0); filter: none; } 15% { transform: translateX(-7px) rotate(-5deg); filter: brightness(1.7) sepia(.4); } 45% { transform: translateX(3px); } 68% { transform: translateX(-3px); } }
@keyframes fb-enemy-lunge { 0%, 100% { transform: translateX(0) rotate(0); } 22% { transform: translateX(8px) rotate(3deg); } 52% { transform: translateX(-24px) rotate(-8deg); } 75% { transform: translateX(-9px) rotate(-2deg); } }
@keyframes fb-enemy-hit { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(10px) rotate(5deg); filter: brightness(1.7); } 48% { transform: translateX(-3px) rotate(-2deg); filter: brightness(1.25); } 75% { transform: translateX(3px); } }
@keyframes fb-enemy-defeat { from { transform: translateY(0); } to { transform: translateY(12px) rotate(6deg); } }
@keyframes fb-heal-glow { 0%, 100% { filter: none; } 40% { filter: brightness(1.3) drop-shadow(0 0 7px #d1efb2); } }
@keyframes fb-heal-particles { from { transform: translateY(14px); opacity: 0; } 35% { opacity: 1; } to { transform: translateY(-28px); opacity: 0; } }
@keyframes fb-ward { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: .9; transform: scale(1.06); } 75% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes fb-callout-in { from { opacity: .55; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fb-projectile { 0% { left: var(--from-x, 24%); top: var(--from-y, 44%); opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scale(.7); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: var(--to-x, 80%); top: var(--to-y, 43%); opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) scale(1.1); } }
@keyframes fb-slash { 0% { left: var(--to-x, 78%); top: var(--to-y, 43%); opacity: 0; transform: translate(-50%, -50%) rotate(-55deg) scale(.5); } 35% { opacity: 1; transform: translate(-50%, -50%) rotate(-25deg) scale(1.1); } 75% { opacity: 1; } 100% { left: var(--to-x, 78%); top: var(--to-y, 43%); opacity: 0; transform: translate(-50%, -35%) rotate(10deg) scale(1.25); } }
@keyframes fb-number-rise { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.8); } 17% { opacity: 1; transform: translate(-50%, -8px) scale(1.1); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -52px) scale(.95); } }
@keyframes fb-arena-wash { 0%, 100% { opacity: 0; } 35%, 65% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .arena *, .arena *::before, .arena *::after, .arena::before, .character-avatar * { animation: none !important; transition: none !important; }
  .stage-member.is-acting .avatar-ring, .stage-member.is-selected .avatar-ring { opacity: 1; }
  .stage-member.is-guarding::before { opacity: .3; }
  .stage-member.is-healing::after { opacity: .65; }
  .combat-projectile { display: none; }
  .battle-number { opacity: 1; transform: translate(-50%, -20px); }
}
html[data-motion="reduced"] .arena *,
html[data-motion="reduced"] .arena *::before,
html[data-motion="reduced"] .arena *::after,
html[data-motion="reduced"] .arena::before,
html[data-motion="reduced"] .character-avatar * { animation: none !important; transition: none !important; }
html[data-motion="reduced"] .stage-member:is(.is-acting, .is-selected) .avatar-ring { opacity: 1; }
html[data-motion="reduced"] .stage-member.is-guarding::before { opacity: .3; }
html[data-motion="reduced"] .stage-member.is-healing::after { opacity: .65; }
html[data-motion="reduced"] .combat-projectile { display: none; }
html[data-motion="reduced"] .battle-number { opacity: 1; transform: translate(-50%, -20px); }