/* ===================================================================================================
   BATTLE ARENA — single source of truth for stage geometry, formation, sprites, grounding, bars.
   (old competing rules removed from style.css / starborn_ui.css / starborn_panels.css)

   Stage: top/bottom come from JS (G.battle.layoutStage) measuring the real header and action panel,
          so the arena never sits under the buttons, the log feed or the boss bar on any screen size.
   Ally side (left): 2 columns x 3 rows. Hero = front column, middle row. Summons / follower fill the
          other 5 cells (slot-1..slot-5). Every unit = flex column [sprite box][name][bar] inside its own
          cell -> bars can never cover another unit's bars.
   Foe side (right): same 3 row grid -> the single foe stands on the same ground line as the hero
          (bottom of row 2), packs use a mirrored 2x3 formation.
   Grounding: the sprite box is a size container; the <img> is a square of min(width,height) sitting on
          the box bottom, pushed down by --padb (transparent pixels under the feet, js/sprites.js) via the
          Animations only use `transform`, so they can never undo the mirror or lift the feet.
   =================================================================================================== */
#battle .battle-stage { position: absolute; left: 0; right: 0; top: var(--stage-top, 120px); bottom: var(--stage-bottom, 236px); z-index: 2; overflow: visible; }
/* both sides stand on the painted ground band (--grid-top / --grid-h set by G.battle.layoutGround) */
#battle .side { position: absolute; top: var(--grid-top, 0px); height: var(--grid-h, 100%); align-items: stretch; justify-items: stretch; }
#battle #foe-row { align-items: stretch; justify-items: stretch; }

/* ---------- formation (ally side + foe packs) ----------
   Every unit is a box whose BOTTOM EDGE IS ITS FEET LINE:
     --cx = horizontal centre (% of the side width), --fy = feet line (% of the ground band), --cw = box width.
   Name / HP bars hang under the feet (absolute). Units are NOT stacking contexts, so sprites are layered by depth
   (lower feet = closer = drawn on top) and every bar (z 25) is drawn above every sprite and is semi-transparent:
   a sprite can never hide a bar. Same-column units are >= sprite + labels apart, columns are offset (staggered). */
#battle .side-me { position: absolute; left: 1%; width: 50%; z-index: 5; }
#battle #summon-wrap { display: contents; }
#battle .side-me .unit, #battle .side-foe.pack #foe-row .fighter.foe {
  position: absolute; left: calc(var(--cx) - var(--cw) / 2); bottom: calc(100% - var(--fy)); width: var(--cw); height: 46%;
  min-width: 0; min-height: 0; display: block; padding: 0; z-index: auto; }
#battle .side-me .unit > .u-spr, #battle .side-me .hero-wrap > .fighter.hero, #battle .side-foe.pack #foe-row .fighter.foe > .u-spr {
  position: absolute; inset: 0; width: auto; height: auto; flex: none; }
/* labels under the feet */
#battle .side-me .summon > .s-name { position: absolute; left: 50%; top: calc(100% + 1px); translate: -50% 0; max-width: 130%; margin: 0; }
#battle .side-me .summon > .s-sub { position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0; margin: 0; }
#battle .side-me .summon > .s-bar { position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0; margin: 0; }
#battle .side-me .hero-wrap > .unit-bars { position: absolute; left: 50%; top: calc(100% + 2px); translate: -50% 0; margin: 0; }
#battle .side-foe.pack #foe-row .fighter.foe > .f-bar { position: absolute; left: 50%; top: calc(100% + 2px); translate: -50% 0; margin: 0; }

/* ally slots (feet points). Hero = front column, summons = two staggered back columns */
#battle .summon.slot-1 { --cx: 15%; --fy: 7%;  --cw: 32%; }   /* back-left   */
#battle .summon.slot-2 { --cx: 44%; --fy: 27%; --cw: 32%; }   /* back-mid    */
#battle .summon.slot-3 { --cx: 14%; --fy: 49%; --cw: 32%; }   /* mid-left    */
#battle .slot-hero     { --cx: 77%; --fy: 60%; --cw: 40%; }   /* hero, front */
#battle .summon.slot-5 { --cx: 43%; --fy: 73%; --cw: 32%; }   /* front-mid   */
#battle .summon.slot-4 { --cx: 16%; --fy: 88%; --cw: 32%; }   /* front-left  */
#battle .summon.slot-1 > .u-spr { z-index: 2; }
#battle .summon.slot-2 > .u-spr { z-index: 3; }
#battle .summon.slot-3 > .u-spr { z-index: 4; }
#battle .slot-hero > .fighter.hero { z-index: 6; }
#battle .summon.slot-5 > .u-spr { z-index: 7; }
#battle .summon.slot-4 > .u-spr { z-index: 8; }
#battle .unit > .unit-bars, #battle .summon > .s-name, #battle .summon > .s-sub, #battle .summon > .s-bar,
#battle .fighter.foe > .f-bar { z-index: 25; }
/* Ward bubble around a summon / follower while it has an active Ward (class set by renderSummons) */
#battle .summon.ward-on > .u-spr::after { content: ''; position: absolute; left: 50%; bottom: -4px; translate: -50% 0; z-index: 3; pointer-events: none;
  width: calc(clamp(48px, 86cqw, 70px) * var(--us, 1) * 1.08); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(150,70,255,.10) 40%, rgba(160,90,255,.28) 62%, rgba(215,170,255,.85) 70%, rgba(150,70,255,.25) 73%, transparent 76%);
  animation: wardShimmer 3s ease-in-out infinite; }

/* ---------- sprite box + grounded sprite (hero, summons, followers, foes) ---------- */
#battle .u-spr, #battle .fighter.hero { position: relative; flex: 1 1 0; min-height: 0; width: 100%; container-type: size; }
#battle .u-spr > img, #battle .fighter.hero > img {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  width: calc(clamp(48px, 86cqw, 70px) * var(--us, 1)); height: calc(clamp(48px, 86cqw, 70px) * var(--us, 1));
  object-fit: contain; image-rendering: auto;
  translate: -50% calc(var(--padb, 0) * 100%);
  scale: var(--flip, 1) 1;
  transform-origin: 50% 100%;
  animation: unitBreath 3.4s ease-in-out infinite;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .65));
}
/* real flyers hover a little above their own ground shadow (no sideways sway) */
#battle .u-spr > img.flyer { animation: unitHover 2.6s ease-in-out infinite; }
/* rigged sprites (G.SPRITE_RIGS): staff box = exact copy of the body box; the staff image inside rotates around the
   hand (transform-origin set inline), the hand layer is drawn on top so the fingers stay wrapped around the shaft. */
#battle .u-spr > .rig-staff {
  position: absolute; left: 50%; bottom: 0; z-index: 3; pointer-events: none;
  width: calc(clamp(48px, 86cqw, 70px) * var(--us, 1)); height: calc(clamp(48px, 86cqw, 70px) * var(--us, 1));
  translate: -50% calc(var(--padb, 0) * 100%); scale: var(--flip, 1) 1; transform-origin: 50% 100%;
  animation: unitBreath 3.4s ease-in-out infinite;
}
#battle .u-spr > .rig-staff > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .55)); }
#battle .u-spr > img.rig-hand { z-index: 4; pointer-events: none; }
#battle .u-spr > .shadow, #battle .fighter.hero > .shadow {
  position: absolute; left: 50%; bottom: -3px; z-index: 1; translate: -50% 0;
  width: calc(min(100cqw, 100cqh) * .62 * var(--us, 1)); height: 10px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); filter: none;
}
/* breathing = tiny vertical expansion anchored at the feet: feet stay on the ground, no tilt, no sway */
@keyframes unitBreath { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.018); } }
@keyframes unitHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* other screens (status hub, map portrait, cosmetics stage) still use `breathe` - now without any sideways squash */
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.018); } }
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- hero ---------- */
#battle .slot-hero { --us: 1.45; }
#battle .hero-wrap .ward-bubble { position: absolute; inset: auto; left: 50%; bottom: -5px; translate: -50% 0; width: calc(clamp(48px, 86cqw, 70px) * 1.45 * 1.05); height: calc(clamp(48px, 86cqw, 70px) * 1.45 * 1.05); border-radius: 50%; z-index: 3; pointer-events: none; }
#battle .hero-wrap .unit-bars { flex: none; width: 52%; margin-top: 1px; display: grid; grid-template-columns: minmax(0, 1fr) 0fr; column-gap: 0; row-gap: 1px; opacity: 0.82; }
#battle .hero-wrap .unit-bars.has-ward { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5px; }
#battle .hero-wrap .unit-bars .bar { position: relative; height: 5px; margin-top: 0; border-radius: 1.5px; border: 1px solid rgba(0, 0, 0, 0.6); overflow: hidden; min-width: 0; background: rgba(18, 8, 22, 0.4); backdrop-filter: blur(2px); }
#battle .hero-wrap .unit-bars .bar.hp { grid-column: 1 / -1; grid-row: 1; height: 8px; }
#battle .hero-wrap .unit-bars .bar.mp { grid-column: 1; grid-row: 2; height: 7px; background: rgba(18, 8, 30, 0.4); }
#battle .hero-wrap .unit-bars .bar.ward { grid-column: 2; grid-row: 2; height: 7px; visibility: hidden; border-width: 0; background: rgba(8, 16, 32, 0.4); }
#battle .hero-wrap .unit-bars.has-ward .bar.ward { visibility: visible; border-width: 1px; }
#battle .hero-wrap .unit-bars .bar i { opacity: 0.72; }
#battle .hero-wrap .unit-bars .bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 6px; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 0 2px #000, 0 0 1px #000; z-index: 2; }
#battle .hero-wrap .status-row { position: absolute; left: 50%; right: auto; top: calc(100% + 1px); translate: -50% 0; width: max-content; max-width: 130px; z-index: 8; justify-content: center; pointer-events: none; margin: 0; }

/* ---------- summons / follower ---------- */
#battle .summon { --us: 1.05; pointer-events: auto; text-shadow: 0 1px 3px #000; }
#battle .summon .s-name { flex: none; max-width: 100%; font-size: 7.5px; line-height: 9px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; text-shadow: 0 1px 3px #000, 0 0 3px #000; }
#battle .summon .s-sub { flex: none; font-size: 7px; line-height: 9px; color: #9fd3e6; }
#battle .summon .s-bar { flex: none; position: relative; width: 54%; height: 8px; margin-top: 1px; background: rgba(30, 7, 11, 0.35); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 1.5px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); backdrop-filter: blur(2px); opacity: 0.82; }
#battle .summon .s-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ef4444, #991b1b); transition: width .25s ease; opacity: 0.72; }
#battle .summon .s-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 6px; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 0 2px #000, 0 0 1px #000; }

/* ---------- foe side ---------- */
#battle .side-foe { right: 2%; width: 44%; position: absolute; z-index: 5; }
#battle #foe-row { width: 100%; height: 100%; position: relative; }
#battle #foe-row .fighter.foe { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
#battle #foe-row .fighter.foe .u-spr > img,
#battle #foe-row .fighter.foe .u-spr > .rig-staff,
#battle #foe-row .fighter.foe .u-spr > .lord-aura-bg,
#battle #foe-row .fighter.foe .u-spr > .lord-aura-fg { width: calc(clamp(60px, 90cqw, 95px) * var(--us, 1)); height: calc(clamp(60px, 90cqw, 95px) * var(--us, 1)); }
#battle .fighter.foe.big { --us: 1.55; }
#battle .fighter.foe.huge { --us: 2.0; }
/* The Supreme Apex Lords - Colossal Monumental scale */
#battle .fighter.foe.lord-asmodeus,
#battle .fighter.foe.lord-lucifer,
#battle .fighter.foe.lord-fallen_angel,
#battle .fighter.foe.lord-king_in_yellow,
#battle .fighter.foe.lord-hildread,
#battle #foe-row .fighter.foe.lord-asmodeus,
#battle #foe-row .fighter.foe.lord-lucifer,
#battle #foe-row .fighter.foe.lord-fallen_angel,
#battle #foe-row .fighter.foe.lord-king_in_yellow,
#battle #foe-row .fighter.foe.lord-hildread {
  --us: 2.85;
}
#battle .fighter.foe .f-bar { display: none; }
#battle .fighter.foe.gone, #battle .fighter.foe.dying .f-bar { visibility: hidden; }
/* pack: 3 staggered columns x 2 (front column = left, nearest the hero). Same feet-box system as the ally side. */
#battle .side-foe.pack > .unit-bars { display: none; }
#battle .side-foe.pack #foe-row { position: relative; width: 100%; height: 100%; display: block; }
#battle .side-foe.pack #foe-row .fighter.foe { --us: 1.0; --cw: 33%; }
#battle .side-foe.pack .fighter.foe .f-bar { display: block; flex: none; position: relative; width: 72%; height: 8px; margin-top: 1px; background: rgba(42, 7, 11, 0.4); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 1.5px; overflow: hidden; backdrop-filter: blur(2px); opacity: 0.82; }
#battle .fighter.foe .f-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(#e0343f, #9c0f1b); transition: width .25s; opacity: 0.75; }
#battle .fighter.foe .f-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 6px; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 0 2px #000, 0 0 1px #000; }
#battle .side-foe.pack #foe-row .foe-slot-5 { --cx: 82%; --fy: 24%; }   /* back column  */
#battle .side-foe.pack #foe-row .foe-slot-2 { --cx: 52%; --fy: 30%; }   /* mid column   */
#battle .side-foe.pack #foe-row .foe-slot-1 { --cx: 18%; --fy: 50%; }   /* front column (leader) */
#battle .side-foe.pack #foe-row .foe-slot-6 { --cx: 85%; --fy: 62%; }
#battle .side-foe.pack #foe-row .foe-slot-4 { --cx: 48%; --fy: 82%; }
#battle .side-foe.pack #foe-row .foe-slot-3 { --cx: 15%; --fy: 94%; }
#battle .side-foe.pack .foe-slot-5 > .u-spr { z-index: 2; }
#battle .side-foe.pack .foe-slot-2 > .u-spr { z-index: 3; }
#battle .side-foe.pack .foe-slot-1 > .u-spr { z-index: 4; }
#battle .side-foe.pack .foe-slot-6 > .u-spr { z-index: 5; }
#battle .side-foe.pack .foe-slot-4 > .u-spr { z-index: 6; }
#battle .side-foe.pack .foe-slot-3 > .u-spr { z-index: 7; }
#battle .fighter.foe .tgt-hand { left: -14px; top: 30%; }
/* Small-group centering & smooth formation expansion:
   When the player starts with 0 summons (allies-1) and summons 1..5 companions, the Hero and existing summons
   glide smoothly into the full 6v6 formation without jumping or overlapping. 5-6 allies & 5-6 foes use the exact 6v6 coordinates. */
#battle .side-me .unit,
#battle .side-foe.pack #foe-row .fighter.foe {
  transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#battle .side-me.allies-1 .slot-hero     { --cx: 46%; --fy: 60%; }

#battle .side-me.allies-2 .slot-hero     { --cx: 56%; --fy: 60%; }
#battle .side-me.allies-2 .summon.slot-1 { --cx: 24%; --fy: 46%; }
#battle .side-me.allies-2 .summon.slot-5 { --cx: 26%; --fy: 76%; }

#battle .side-me.allies-3 .slot-hero     { --cx: 65%; --fy: 60%; }
#battle .side-me.allies-3 .summon.slot-1 { --cx: 24%; --fy: 32%; }
#battle .side-me.allies-3 .summon.slot-5 { --cx: 32%; --fy: 76%; }
#battle .side-me.allies-3 .summon.slot-2 { --cx: 34%; --fy: 28%; }

#battle .side-me.allies-4 .slot-hero     { --cx: 77%; --fy: 60%; }
#battle .side-me.allies-4 .summon.slot-1 { --cx: 15%; --fy: 18%; }
#battle .side-me.allies-4 .summon.slot-2 { --cx: 44%; --fy: 27%; }
#battle .side-me.allies-4 .summon.slot-5 { --cx: 43%; --fy: 73%; }

#battle .side-foe.pack.foes-2 #foe-row .foe-slot-1 { --cx: 38%; --fy: 56%; }
#battle .side-foe.pack.foes-2 #foe-row .foe-slot-2 { --cx: 70%; --fy: 38%; }
#battle .side-foe.pack.foes-3 #foe-row .foe-slot-1 { --cx: 38%; --fy: 54%; }
#battle .side-foe.pack.foes-3 #foe-row .foe-slot-2 { --cx: 70%; --fy: 32%; }
#battle .side-foe.pack.foes-3 #foe-row .foe-slot-3 { --cx: 66%; --fy: 84%; }
#battle .side-foe.pack.foes-4 #foe-row .foe-slot-1 { --cx: 28%; --fy: 48%; }
#battle .side-foe.pack.foes-4 #foe-row .foe-slot-2 { --cx: 64%; --fy: 28%; }
#battle .side-foe.pack.foes-4 #foe-row .foe-slot-3 { --cx: 32%; --fy: 88%; }
#battle .side-foe.pack.foes-4 #foe-row .foe-slot-4 { --cx: 68%; --fy: 76%; }

/* Highlight the currently clicked/active spell or action button during turn resolution */
#battle .starborn-spell-mini.active-cast,
#battle .starborn-abtn.active-cast,
#battle .o-quick-pill.active-cast,
#battle .starborn-spell-card.active-cast {
  opacity: 1 !important;
  border-color: #ffd36b !important;
  background: linear-gradient(180deg, rgba(92, 64, 24, 0.96), rgba(44, 28, 12, 0.98)) !important;
  box-shadow: 0 0 14px rgba(255, 211, 107, 0.9), inset 0 0 8px rgba(255, 211, 107, 0.45) !important;
  transform: translateY(-1px) scale(1.03);
  z-index: 5;
}

/* single foe / boss: the big HP bar under it stays big and readable (reference layout) */
#battle .side-foe:not(.pack) > .unit-bars .bar { height: 12px; margin-top: 2px; border-radius: 3px; border: 1px solid #000; background: #3a0d14; backdrop-filter: none; }
#battle .side-foe:not(.pack) > .unit-bars .bar i { background: linear-gradient(#e0343f, #9c0f1b); }
#battle .side-foe:not(.pack) > .unit-bars .bar span { font-size: 9px; line-height: 10px; font-weight: 700; }

/* turn counter sits in the free band between the header and the arena */
#battle .turn-num { top: calc(var(--stage-top, 120px) - 44px) !important; }

/* ---------- action panel (main: potions row, 4 recent spells, Attack/Defend/Spells/Flee) ---------- */
#battle .battle-actions { gap: 6px; }
#battle .starborn-quick-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-bottom: 0 !important; }
#battle .b-recent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#battle .b-recent.empty { grid-template-columns: 1fr; }
#battle .b-recent-empty { text-align: center; font-size: 11px; color: var(--mut, #a99); padding: 8px 0; }
#battle .starborn-spell-mini { position: relative; min-width: 0; height: 54px; padding: 15px 4px 4px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(28, 22, 42, .9), rgba(16, 12, 26, .92)); border: 1.5px solid rgba(147, 197, 253, .35);
  color: #f3e6d0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5); font-family: 'Cinzel', serif; }
#battle .starborn-spell-mini:disabled { opacity: .42; cursor: not-allowed; }
#battle .starborn-spell-mini:active { transform: translateY(1px); border-color: #ffd36b; }
#battle .starborn-spell-mini .starborn-icon { position: absolute; left: 5px; top: 3px; font-size: 12px; line-height: 1; }
#battle .starborn-spell-mini .mana-corner { position: absolute; right: 5px; top: 3px; font-size: 9px; font-weight: 700; color: #93c5fd; line-height: 1; }
#battle .starborn-spell-mini .starborn-label { width: 100%; font-size: 9.5px; line-height: 11px; font-weight: 700; text-align: center; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#battle .b-main4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#battle .b-main4 .starborn-abtn { height: 48px; min-height: 48px; padding: 3px 2px; min-width: 0; }
#battle .b-main4 .starborn-abtn .starborn-icon { font-size: 16px; }
#battle .b-main4 .starborn-abtn .starborn-label { font-size: 10.5px; letter-spacing: .04em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* spell list: one row per spell = [cast button with name + generated summary][details] */
#battle .b-spells-list { gap: 6px; }
#battle .b-spell-row { display: flex; gap: 6px; align-items: stretch; }
#battle .b-spell-row .starborn-spell-card { flex: 1 1 auto; min-width: 0; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 6px 54px 6px 10px; text-align: left; min-height: 46px; }
#battle .b-spell-row .starborn-spell-card .starborn-icon { flex: none; }
#battle .b-spell-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
#battle .b-spell-txt .starborn-label { font-size: 11.5px; line-height: 13px; white-space: normal; }
#battle .b-spell-sum { font-family: system-ui, sans-serif; font-size: 10.5px; line-height: 13px; color: #c9b8a6; text-transform: none; letter-spacing: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#battle .b-spell-info { flex: none; width: 38px; border-radius: 10px; border: 1.5px solid rgba(255, 211, 107, .45); background: rgba(30, 20, 28, .85);
  color: #ffd36b; font: italic 700 16px Georgia, serif; cursor: pointer; }

/* generated spell description (popups everywhere) */
.sk-desc { margin: 8px 0; text-align: left; }
.sk-desc .sk-flavor { font-style: italic; color: #c9b8a6; margin-bottom: 6px; font-size: 12px; }
.sk-desc .sk-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; font-size: 12px; line-height: 1.35; }
.sk-desc .sk-row { display: contents; }
.sk-desc .sk-row b { color: #ffd36b; font-weight: 700; white-space: nowrap; }
.sk-desc .sk-row span { color: #f3e6d0; overflow-wrap: anywhere; }

/* ---------- item tier / rarity badges + generated item description ---------- */
.it-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 3px 0; font-size: 11px; line-height: 14px; min-width: 0; }
.it-badges .t-badge, .it-badges .r-badge { display: inline-block; padding: 0 5px; border: 1px solid; border-radius: 4px; font-weight: 800; font-size: 10.5px; line-height: 15px; background: rgba(0, 0, 0, .35); white-space: nowrap; }
.it-badges .q-txt { font-weight: 700; white-space: nowrap; }
.it-badges .st-txt { color: #c9b8a6; flex-basis: 100%; overflow-wrap: anywhere; }
.it-desc { margin: 8px 0; text-align: left; font-size: 12px; line-height: 1.4; }
.it-desc .it-usage { color: #f3e6d0; margin-bottom: 6px; }
.it-desc .it-sec { color: #ffd36b; font-weight: 700; margin: 6px 0 2px; }
.it-desc .it-fx { color: #9fe3ff; overflow-wrap: anywhere; }
.it-desc .it-fx.off { color: #8a7f76; }
.it-desc .it-fx.imm { color: #ffd27a; margin-top: 4px; }
.it-desc .it-req { color: #c9b8a6; margin-top: 6px; overflow-wrap: anywhere; }
.inv-grid2 .gt { position: relative; }
.inv-grid2 .gt .gt-t { position: absolute; left: 2px; top: 1px; font-style: normal; font-weight: 800; font-size: 10px; line-height: 1; text-shadow: 0 1px 2px #000, 0 0 2px #000; }

/* Keep player interface, hero HP/MP bars, and boss HP bars visible during special spell dark eclipses */
#battle .battle-bottom { z-index: 50 !important; }
#battle .raid-bar { z-index: 50 !important; }
#battle .cast-banner { z-index: 50 !important; }
#battle .battle-top { z-index: 50 !important; }
#battle .hero-wrap .unit-bars { z-index: 45 !important; }
#battle .side-foe .unit-bars { z-index: 45 !important; }
#battle #foe-ward-wrap { z-index: 45 !important; }

/* ===== Carcosa Water Reflections (Lake Hali) ===== */
/* 1. Pure mirror reflection directly under feet */
#battle.theme-carcosa .u-spr > img,
#battle.theme-carcosa #hero-fighter > img,
#battle.theme-carcosa #hero-sprite {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, 
    rgba(0, 0, 0, 0.90) 0%, 
    rgba(0, 0, 0, 0.65) 40%, 
    rgba(0, 0, 0, 0.30) 75%, 
    transparent 100%);
}

/* 2. No black circle / ground shadow on water: ONLY REFLECTION */
#battle.theme-carcosa .u-spr > .shadow,
#battle.theme-carcosa .fighter.hero > .shadow,
#battle.theme-carcosa .fighter.foe .shadow {
  display: none !important;
}

/* 3. During Raid battles (boss HP is already in #raid-bar at top), hide redundant HP bar under boss so robe is never cut off */
#battle.theme-carcosa .side-foe > .unit-bars,
#battle:has(#raid-bar.on) .side-foe > .unit-bars,
#battle #raid-bar.on ~ #battle-stage #side-foe > .unit-bars {
  display: none !important;
}



/* 1 vs 1: the single foe stands on the SAME feet line as the hero (--fy 60%), facing him across the arena */
#battle .side-foe:not(.pack) #foe-row .fighter.foe { position: absolute; left: 0; top: 0; width: 100%; height: 60%; }
#battle .side-foe:not(.pack) > .unit-bars { position: absolute; left: 50%; top: calc(60% + 2px); translate: -50% 0; width: 72%; }