/* battle.css — battle screen specific styles
   Depends on: tokens.css, components.css */

/* ── ENEMY SECTION ──────────────────────────────────────── */
#enemy-section {
  background:    var(--bg-header);
  border-bottom: 1.5px solid var(--border);
  padding:       var(--space-4) var(--space-4) var(--space-3);
  cursor:        pointer;
  transition:    background var(--dur-fast);
  user-select:   none;
  /* Solid panel — text must be readable regardless of backdrop */
  position:      relative;
  z-index: var(--z-local-1);
}

#enemy-section:active {
  background: var(--bg-inset);
}

/* ── COMBATANT ROWS ─────────────────────────────────────── */
.combatant-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  margin-bottom: var(--space-2) + 2px;
  margin-bottom: 10px;
}

/* ── PORTRAITS ──────────────────────────────────────────── */
.portrait {
  width:         var(--portrait-size);
  height:        var(--portrait-size);
  border-radius: var(--radius-md);
  border:        var(--portrait-border) solid var(--border);
  flex-shrink:   0;
  overflow:      hidden;
  background:    var(--bg-header);
  display:       flex;
  align-items:   center;
  justify-content: center;
  position:      relative;
}

.portrait img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* ── CLASS SKILL READY STATE ─────────────────────────────── */

.portrait.skill-ready {
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 12px 4px rgba(var(--accent-rgb, 200,118,42), 0.6),
    0 0 28px 8px rgba(var(--accent-rgb, 200,118,42), 0.25);
  animation: skill-pulse 2s ease-in-out infinite;
}

@keyframes skill-pulse {
  0%, 100% { box-shadow:
    0 0 0 2px var(--accent),
    0 0 10px 3px rgba(var(--accent-rgb, 200,118,42), 0.5),
    0 0 22px 6px rgba(var(--accent-rgb, 200,118,42), 0.2); }
  50%       { box-shadow:
    0 0 0 2px var(--accent),
    0 0 18px 6px rgba(var(--accent-rgb, 200,118,42), 0.8),
    0 0 36px 12px rgba(var(--accent-rgb, 200,118,42), 0.35); }
}

.portrait-skill-badge {
  position:        absolute;
  bottom:          0;
  left:            0;
  right:           0;
  background:      var(--accent);
  color:           #000;
  font-family:     var(--font-display);
  font-size:       8px;
  font-weight:     var(--weight-bold);
  letter-spacing:  0.06em;
  text-align:      center;
  padding:         2px 0;
  border-radius:   0 0 var(--radius-sm) var(--radius-sm);
  pointer-events:  none;
  text-shadow:     none;
}

/* ── COMBATANT INFO ─────────────────────────────────────── */
.combatant-info {
  flex:      1;
  min-width: 0;
}

.combatant-name {
  font-family:    var(--font-display);
  font-size:      var(--text-base);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.03em;
  margin-bottom:  var(--space-1);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  color:          var(--text-primary);
  text-shadow:    0 1px 6px rgba(0,0,0,1), 0 0 20px rgba(0,0,0,0.8), 0 2px 2px rgba(0,0,0,1);
}

/* ── HP BAR ─────────────────────────────────────────────── */
.hp-bar-track {
  height:        var(--hp-bar-h);
  background:    var(--hp-track);
  border-radius: var(--bar-radius);
  overflow:      hidden;
  border:        1px solid var(--border);
}

.hp-bar-fill {
  height:        100%;
  border-radius: var(--bar-radius);
  background:    var(--hp-enemy-mid);
  box-shadow:    0 0 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15);
  transition:
    width            var(--dur-slow) ease,
    background-color var(--dur-slow) ease;
}

/* ── MP BAR ─────────────────────────────────────────────── */
.mp-bar-track {
  height:        var(--mp-bar-h);
  background:    var(--mp-track);
  border-radius: var(--bar-radius);
  overflow:      hidden;
  border:        1px solid var(--mp-border);
  margin-top:    var(--space-1);
}

/* Enemy MP bar hidden until JS confirms enemy has a special attack */
#enemy-mp-track { display: none; }
#enemy-mp-label { display: none; }

.mp-bar-fill {
  height:        100%;
  background:    var(--mp-fill);
  border-radius: var(--bar-radius);
  box-shadow:    0 0 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12);
  transition:    width var(--dur-slow) ease;
}

/* ── HP / MP LABEL ──────────────────────────────────────── */
.hp-label {
  font-size:   var(--text-sm);
  color:       var(--text-primary);
  margin-top:  var(--space-1);
  font-style:  italic;
  text-shadow: 0 1px 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.9);
}

.mp-label {
  font-size:   var(--text-sm);
  color:       var(--mp-fill);
  font-style:  italic;
  text-shadow: 0 1px 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.9);
  filter:      brightness(1.4);
}

/* ── STAT BARS (HP, MP, XP, Level) ──────────────────────── */

.stat-bars {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  margin-top:     var(--space-2);
}

.stat-bar-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.stat-bar-label {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.04em;
  color:          var(--text-primary);
  text-shadow:    0 1px 3px rgba(0,0,0,0.9);
  width:          20px;
  flex-shrink:    0;
}

.stat-bar-track {
  flex:          1;
  height:        6px;
  border-radius: 3px;
  overflow:      hidden;
  border:        1px solid var(--border);
}

.stat-bar-track--hp { background: rgba(192, 57, 43, 0.15); }
.stat-bar-track--mp { background: rgba(41, 128, 185, 0.15); }
.stat-bar-track--energy { background: var(--energy-track); }
.stat-bar-track--xp { background: var(--hp-track); }

.stat-bar-fill {
  height:        100%;
  border-radius: 3px;
  transition:    width var(--dur-slow) ease;
}

.stat-bar-fill--hp { background: #c0392b; }
.stat-bar-fill--mp { background: var(--mp-fill); }
.stat-bar-fill--energy {
  background:    var(--energy-fill);
  height:        var(--energy-bar-h);
  border-radius: var(--bar-radius);
  transition:    width var(--dur-med) ease;
  box-shadow:    0 0 6px var(--energy-fill);
}
.stat-bar-fill--xp { background: var(--accent); }

.stat-bar-value {
  font-size:   var(--text-xs);
  color:       var(--text-primary);
  white-space: nowrap;
  min-width:   52px;
  text-align:  right;
  text-shadow: 0 1px 4px rgba(0,0,0,1);
  font-weight: var(--weight-bold);
}

.stat-bar-value span:first-child {
  font-weight: var(--weight-bold);
  color:       var(--text-primary);
}

.stat-max {
  color:       var(--text-secondary);
  margin-left: 2px;
}

.stat-bar-row--level {
  margin-top: 1px;
}

.stat-level-value {
  font-family:    var(--font-display);
  font-size:      var(--text-base);
  font-weight:    var(--weight-bold);
  color:          var(--accent);
  letter-spacing: 0.04em;
}

/* ── TAP HINT ───────────────────────────────────────────── */
.tap-hint {
  font-size:        var(--text-xs);
  font-style:       italic;
  text-align:       right;
  margin-top:       var(--space-1);
  /* Pill backing so it's always readable against any backdrop */
  display:          inline-block;
  float:            right;
  color:            var(--text-primary);
  background:       rgba(0,0,0,0.45);
  padding:          2px 8px;
  border-radius:    var(--radius-full);
  border:           1px solid rgba(255,255,255,0.08);
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── COMBAT LOG ─────────────────────────────────────────── */
#log-section {
  flex:           1;
  background:     rgba(0,0,0,0.50);
  border-bottom:  1.5px solid var(--border);
  min-height:     120px;
  display:        flex;
  flex-direction: column;
  position:       relative;
  z-index: var(--z-local-1);
}

/* Backdrop image — anchored to battle-scroll, behind all panels */
#battle-backdrop {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  opacity:             0.28;
  pointer-events:      none;
  transition:          background-image 0.6s ease;
  z-index: var(--z-base);
}

/* Log text sits above the backdrop */
#log-inner {
  position:       relative;
  z-index:        var(--z-local-1);
  flex:           1;
  overflow-y:     auto;
  padding:        var(--space-3) var(--space-4);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.log-entry {
  font-size:     var(--text-base);
  line-height:   1.45;
  padding:       3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-shadow:   0 1px 3px rgba(0,0,0,0.8);
  color:         var(--text-primary);
  animation:     logFadeIn var(--dur-med) ease;
}

.log-entry:last-child {
  border-bottom: none;
}

.log-entry.player-action { color: #7a3c0a; font-weight: var(--weight-bold); }
.log-entry.enemy-action  { color: var(--color-danger); }
.log-entry.system        { color: var(--text-secondary); font-style: italic; }
.log-entry.victory       { color: var(--color-success); font-weight: var(--weight-bold); }
.log-entry.defeat        { color: var(--color-danger);  font-weight: var(--weight-bold); }
.log-entry.save-ok       { color: var(--color-success); font-size: var(--text-sm); font-style: italic; }
.log-entry.save-fail     { color: var(--text-secondary); font-size: var(--text-sm); font-style: italic; }
.log-entry.enemy-special   { color: #8b2060; font-weight: var(--weight-bold); }
.log-entry.player-ultimate { color: #9a6200; font-weight: var(--weight-bold); font-style: italic; }
.log-entry.levelup          { color: var(--accent); font-weight: var(--weight-bold); font-style: italic; }

@keyframes logFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── PLAYER SECTION ─────────────────────────────────────── */
#player-section {
  background:    var(--bg-base);
  border-bottom: 1.5px solid var(--border);
  padding:       var(--space-3) var(--space-4);
  position:      relative;
  z-index: var(--z-local-1);
}

/* ── ACTION BUTTONS ─────────────────────────────────────── */
#actions {
  background:  var(--bg-header);
  border-top:  1.5px solid var(--border);
  position:    relative;
  z-index: var(--z-local-1);
  padding:     10px var(--space-4);
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         var(--space-2);
  flex-shrink: 0;
}

/* ── ENEMY INFO MODAL ───────────────────────────────────── */
.enemy-lore {
  font-style:    italic;
  color:         var(--text-secondary);
  font-size:     var(--text-base);
  margin-bottom: var(--space-3);
  line-height:   1.5;
}

.resist-section-label {
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  letter-spacing: 0.04em;
  color:          var(--text-secondary);
  margin-bottom:  var(--space-2);
}

.resistance-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-2);
}

.resist-card {
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       var(--space-2) var(--space-2) + 2px;
  padding:       var(--space-2) 10px;
  font-size:     var(--text-sm);
}

.resist-label {
  color:      var(--text-secondary);
  font-style: italic;
  font-size:  var(--text-xs);
}

.resist-val {
  font-weight: var(--weight-bold);
  margin-top:  var(--space-1);
}

.resist-val.weak    { color: var(--color-danger); }
.resist-val.resist  { color: var(--color-success); }
.resist-val.neutral { color: var(--text-secondary); }

/* ── ITEM LIST ───────────────────────────────────────────── */
/* Spell cards have moved to spells.css */

.item-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.item-row {
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       10px var(--space-3);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  gap:           10px;
  transition:    background var(--dur-fast);
  user-select:   none;
}

.item-row:active      { background: var(--bg-inset); }
.item-row.cant-afford { opacity: 0.5; cursor: not-allowed; }

.item-name {
  font-weight: var(--weight-bold);
  font-size:   var(--text-base);
  color:       var(--text-primary);
}

.item-desc {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  font-style: italic;
}

.item-qty {
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

.item-icon {
  width:           32px;
  height:          32px;
  border-radius:   var(--radius-sm);
  background:      var(--bg-header);
  border:          1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--text-xs);
  font-family:     var(--font-display);
  color:           var(--text-secondary);
  flex-shrink:     0;
}

/* ── ENEMY INFO MODAL ────────────────────────────────────── */

/* Backdrop strip — blurred zone image behind portrait header */
.einfo-backdrop-strip {
  position:           relative;
  height:             110px;
  overflow:           hidden;
  border-radius:      var(--radius-xl) var(--radius-xl) 0 0;
  flex-shrink:        0;
  background-color:   var(--bg-header);
  background-size:    cover;
  background-position: center top;
}

.einfo-backdrop-overlay {
  position: absolute;
  inset:    0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.65) 100%);
}

.einfo-portrait-strip {
  position:    absolute;
  inset:       0;
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-3) var(--space-4);
}

.einfo-portrait {
  width:         64px;
  height:        64px;
  border-radius: var(--radius-md);
  border:        2px solid rgba(255,255,255,0.2);
  object-fit:    cover;
  flex-shrink:   0;
  position:      relative;
  z-index: var(--z-local-1);
}

.einfo-strip-info {
  flex:     1;
  min-width: 0;
  position: relative;
  z-index: var(--z-local-1);
}

.einfo-strip-name {
  font-family:    var(--font-display);
  font-size:      var(--text-lg);
  font-weight:    var(--weight-bold);
  color:          #ffffff;
  text-shadow:    0 1px 6px rgba(0,0,0,1), 0 0 20px rgba(0,0,0,0.8);
  letter-spacing: 0.03em;
}

/* Lore text — lives below the backdrop strip in the body, always readable */
.einfo-lore {
  font-size:    var(--text-sm);
  color:        var(--text-primary);
  font-style:   italic;
  line-height:  1.6;
  padding:      var(--space-2) var(--space-3);
  background:   var(--bg-inset);
  border-left:  3px solid var(--border);
  border-radius: var(--radius-sm);
}

.einfo-body {
  padding:        var(--space-4);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.einfo-section-label {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.06em;
  color:          var(--text-secondary);
  text-transform: uppercase;
  margin-bottom:  calc(-1 * var(--space-1));
}

.einfo-stats {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.einfo-stat-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.einfo-stat-label {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.04em;
  color:          var(--text-secondary);
  width:          22px;
  flex-shrink:    0;
}

.einfo-bar-track {
  flex:          1;
  height:        8px;
  border-radius: 4px;
  overflow:      hidden;
  border:        1px solid rgba(255,255,255,0.08);
}

.einfo-hp-track { background: rgba(192,57,43,0.18); }
.einfo-mp-track { background: rgba(41,128,185,0.18); }

.einfo-bar-fill {
  height:        100%;
  border-radius: 4px;
  transition:    width var(--dur-slow) ease;
}

.einfo-hp-fill { background: var(--hp-player); }
.einfo-mp-fill { background: var(--mp-fill); }

.einfo-stat-value {
  font-size:   var(--text-xs);
  color:       var(--text-primary);
  white-space: nowrap;
  min-width:   52px;
  text-align:  right;
  font-weight: var(--weight-bold);
}

/* ── Special attack block ────────────────────────────────── */

.einfo-special {
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  border-left:   3px solid #8b2060;
  border-radius: var(--radius-md);
  padding:       var(--space-2) var(--space-3);
}

.einfo-special.exhausted {
  opacity:          0.55;
  border-left-color: var(--text-secondary);
}

.einfo-special-name {
  font-family:    var(--font-display);
  font-size:      var(--text-base);
  font-weight:    var(--weight-bold);
  color:          var(--text-primary);
  margin-bottom:  var(--space-1);
}

.einfo-special-meta {
  display:     flex;
  gap:         var(--space-4);
  font-size:   var(--text-xs);
}

.einfo-special-dmg  { color: #ff8866; font-weight: var(--weight-bold); }
.einfo-special-cost { color: var(--mp-fill); font-weight: var(--weight-bold); }

.einfo-exhausted-label {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  font-style: italic;
  margin-top: var(--space-1);
}

/* ── Resistance list ─────────────────────────────────────── */

.einfo-resist-list {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.einfo-resist-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       7px var(--space-2);
  border-radius: var(--radius-sm);
  background:    var(--bg-inset);
  border:        1px solid var(--border);
}

/* Element icon badge — larger than old text badge, shows SVG icon */
.einfo-el-icon {
  width:           34px;
  height:          34px;
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-size:       9px;
  font-family:     var(--font-display);
  font-weight:     var(--weight-bold);
  color:           var(--text-primary);
  letter-spacing:  0.03em;
}

.einfo-el-icon img {
  width:  18px;
  height: 18px;
  display: block;
}

.einfo-el-name {
  flex:            1;
  font-size:       var(--text-sm);
  color:           var(--text-primary);
  text-decoration: none;
}

/* Resistance badge — pill with coloured bg instead of raw coloured text */
.einfo-resist-badge {
  font-family:    var(--font-display);
  font-size:      10px;
  font-weight:    var(--weight-bold);
  letter-spacing: 0.04em;
  padding:        3px 9px;
  border-radius:  var(--radius-full);
  white-space:    nowrap;
  min-width:      54px;
  text-align:     center;
}

.einfo-resist-pct {
  font-size:   var(--text-xs);
  color:       var(--text-secondary);
  min-width:   34px;
  text-align:  right;
  font-variant-numeric: tabular-nums;
}

/* Row state modifiers — extend .einfo-resist-row */

.einfo-row--immune {
  background:   var(--bg-inset);
  border-color: var(--border);
}

.einfo-row--absorb {
  background:   rgba(20,80,40,0.25);
  border-color: #1e5a30;
}

.einfo-row--best {
  background:   rgba(120,30,10,0.25);
  border-color: #7a1a10;
  box-shadow:   0 0 0 1px rgba(200,80,50,0.3);
}

/* Heal value in pct column */
.einfo-pct--heal {
  color:       #44ee88;
  font-weight: var(--weight-bold);
}

/* Immune value in pct column */
.einfo-pct--immune {
  color:       #6688cc;
  font-weight: var(--weight-bold);
}

/* continued from PROFILE MODAL above */

/* ── CLASS SKILL BUTTON ──────────────────────────────────── */

.btn-class-skill {
  background:    linear-gradient(135deg, #2a0a3a 0%, #1a0828 100%);
  color:         #c8a8f0;
  border:        1px solid #4a2a6e;
  font-family:   var(--font-display);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-bold);
  letter-spacing: 0.04em;
  border-radius: var(--radius-md);
  padding:       var(--space-2) var(--space-3);
  transition:    background var(--dur-fast), border-color var(--dur-fast);
}

.btn-class-skill:active {
  background: linear-gradient(135deg, #3a1a4e 0%, #2a1040 100%);
}

.btn-class-skill:disabled {
  opacity: 0.45;
}

/* ── ATTACK CHOICE MODAL ─────────────────────────────────── */

.attack-modal {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  padding:        var(--space-2) 0;
}

.attack-modal-btn {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  background:     var(--bg-inset);
  border:         1px solid var(--border);
  border-radius:  var(--radius-md);
  padding:        var(--space-3) var(--space-4);
  text-align:     left;
  cursor:         pointer;
  transition:     background var(--dur-fast), border-color var(--dur-fast);
  position:       relative;
}

.attack-modal-btn:active {
  background: var(--bg-header);
}

.attack-modal-normal {
  border-left: 3px solid var(--accent);
}

.attack-modal-skill {
  border-left: 3px solid #6a2a9e;
}

.attack-modal-skill.unavailable {
  opacity: 0.5;
  cursor:  default;
}

.attack-modal-btn-label {
  position:  absolute;
  top:       var(--space-2);
  right:     var(--space-3);
}

.attack-modal-cd {
  font-family:    var(--font-display);
  font-size:      10px;
  font-weight:    var(--weight-bold);
  color:          var(--text-secondary);
  background:     var(--bg-header);
  border:         1px solid var(--border);
  border-radius:  var(--radius-full);
  padding:        1px 7px;
}

.attack-modal-btn-name {
  font-family:    var(--font-display);
  font-size:      var(--text-base);
  font-weight:    var(--weight-bold);
  color:          var(--text-primary);
  letter-spacing: 0.03em;
}

.attack-modal-btn-desc {
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  line-height: 1.4;
}

.attack-modal-btn-meta {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  font-style: italic;
  margin-top: 2px;
}

/* ── PROFILE MODAL ───────────────────────────────────────── */

.profile-class-note {
  font-size:    var(--text-sm);
  color:        var(--text-secondary);
  font-style:   italic;
  line-height:  1.5;
  margin-bottom: var(--space-1);
  padding:      var(--space-2) var(--space-3);
  background:   var(--bg-inset);
  border-radius: var(--radius-sm);
}

.profile-class-note strong {
  color: var(--text-primary);
  font-style: normal;
}

.class-card {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  border-left:   4px solid var(--border);
  border-radius: var(--radius-md);
  padding:       var(--space-3);
  text-align:    left;
  cursor:        pointer;
  width:         100%;
  transition:    background var(--dur-fast), border-color var(--dur-fast);
}

.class-card:active {
  background: var(--bg-header);
}

.class-card--active {
  background:   var(--bg-header);
  box-shadow:   0 0 0 1px var(--border);
}

.class-card-icon {
  font-size:   24px;
  line-height: 1;
  flex-shrink: 0;
  width:       32px;
  text-align:  center;
}

/* Replaces class-card-icon — circular SVG symbol badge */
.class-card-symbol {
  width:           44px;
  height:          44px;
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.class-card-symbol img { display: block; }

.class-card-info {
  flex:     1;
  min-width: 0;
}

.class-card-name {
  font-family:    var(--font-display);
  font-size:      var(--text-base);
  font-weight:    var(--weight-bold);
  color:          var(--text-primary);
  letter-spacing: 0.03em;
  margin-bottom:  3px;
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
}

.class-active-badge {
  font-family:    var(--font-display);
  font-size:      9px;
  font-weight:    var(--weight-bold);
  letter-spacing: 0.06em;
  color:          var(--text-primary);
  background:     rgba(255,255,255,0.12);
  border:         1px solid rgba(255,255,255,0.2);
  border-radius:  var(--radius-full);
  padding:        1px 6px;
  text-transform: uppercase;
}

.class-card-tagline {
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  line-height: 1.4;
}

/* ── ATTACK MODAL SKILL SYMBOL ROW ──────────────────────── */

.attack-modal-skill-row {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
}

.attack-modal-symbol {
  width:           38px;
  height:          38px;
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  margin-top:      2px;
}

.attack-modal-symbol img { display: block; }

/* ── PROFILE PAGE ────────────────────────────────────────── */

.profile-modal {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  padding:        var(--space-1) 0;
}

.profile-section {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.profile-section-title {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
}

.profile-locked-badge {
  font-size:   9px;
  background:  var(--bg-header);
  border:      1px solid var(--border);
  border-radius: var(--radius-full);
  padding:     1px 6px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color:       var(--text-secondary);
  text-transform: none;
  font-weight: normal;
}

/* Avatar + name row */
.profile-name-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-2);
  background:  var(--bg-inset);
  border:      1px solid var(--border);
  border-radius: var(--radius-md);
}

.profile-avatar {
  width:         64px;
  height:        64px;
  border-radius: var(--radius-md);
  object-fit:    cover;
  border:        2px solid var(--border);
  flex-shrink:   0;
}

.profile-name-info { flex: 1; min-width: 0; }

.profile-username {
  font-family:    var(--font-display);
  font-size:      var(--text-lg);
  font-weight:    var(--weight-bold);
  color:          var(--text-primary);
  letter-spacing: 0.03em;
}

.profile-class-label {
  font-size:  var(--text-sm);
  color:      var(--text-secondary);
  font-style: italic;
  margin-top: 2px;
}

/* Stat grid */
.profile-stats {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.profile-stat-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         5px var(--space-2);
  border-radius:   var(--radius-sm);
}

.profile-stat-row:nth-child(odd) { background: var(--bg-inset); }

.profile-stat-label {
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
}

.profile-stat-value {
  font-size:   var(--text-sm);
  font-weight: var(--weight-bold);
  color:       var(--text-primary);
  font-family: var(--font-display);
}

/* XP bar under XP stat row */
.profile-xp-track {
  height:        4px;
  background:    var(--hp-track);
  border-radius: 2px;
  overflow:      hidden;
  margin:        2px var(--space-2) 4px;
}

.profile-xp-fill {
  height:     100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width var(--dur-slow) ease;
}

/* Class buttons — compact horizontal-ish list */
.profile-class-btn {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-2) var(--space-3);
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  border-left:   4px solid var(--border);
  border-radius: var(--radius-md);
  text-align:    left;
  cursor:        pointer;
  width:         100%;
  transition:    background var(--dur-fast), border-color var(--dur-fast);
}

.profile-class-btn.active { box-shadow: 0 0 0 1px var(--border); }
.profile-class-btn:active  { filter: brightness(1.1); }

.profile-class-sym {
  width:           32px;
  height:          32px;
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.profile-class-sym img { display: block; }

.profile-class-text { flex: 1; min-width: 0; }

.profile-class-name {
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  color:          var(--text-primary);
  display:        flex;
  align-items:    center;
  gap:            6px;
}

.profile-active-pip { color: var(--accent); font-size: 10px; }

.profile-class-tag {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  margin-top: 1px;
}

/* Locked subclass panel */
.profile-locked-panel {
  display:        flex;
  align-items:    center;
  gap:            var(--space-3);
  padding:        var(--space-3);
  background:     var(--bg-inset);
  border:         1px solid var(--border);
  border-radius:  var(--radius-md);
  opacity:        0.65;
}

.profile-locked-icon { font-size: 22px; flex-shrink: 0; }

.profile-locked-text {
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  font-style:  italic;
  line-height: 1.4;
}

/* ── TURN INDICATOR ──────────────────────────────────────── */

.turn-indicator {
  width:          0;
  height:         0;
  border-top:     9px solid transparent;
  border-bottom:  9px solid transparent;
  border-left:    13px solid var(--accent);
  align-self:     center;
  flex-shrink:    0;
  order:          -1;          /* sits before the portrait in the flex row */
  margin-right:   6px;
  opacity:        0;
  transition:     opacity 0.2s ease;
  pointer-events: none;
  filter: drop-shadow(0 0 4px var(--accent));
}

.turn-indicator.active {
  opacity: 1;
  animation: turn-pulse 1.2s ease-in-out infinite;
}

@keyframes turn-pulse {
  0%, 100% { opacity: 1;    filter: drop-shadow(0 0 4px var(--accent)); }
  50%       { opacity: 0.45; filter: drop-shadow(0 0 10px var(--accent)); }
}

#enemy-turn-indicator {
  border-left-color: var(--hp-enemy-mid);
  filter: drop-shadow(0 0 4px var(--hp-enemy-mid));
}

#enemy-turn-indicator.active {
  animation: turn-pulse-enemy 1.2s ease-in-out infinite;
}

@keyframes turn-pulse-enemy {
  0%, 100% { opacity: 1;    filter: drop-shadow(0 0 4px var(--hp-enemy-mid)); }
  50%       { opacity: 0.45; filter: drop-shadow(0 0 10px var(--hp-enemy-mid)); }
}

/* ── ENERGY BAR — per-class colour tokens ────────────────── */
/* Set via data-class attribute on #player-section by ui.js
   when a class is selected. Arcanist omitted — uses MP bar. */

#player-section[data-class="sentinel"] {
  --energy-fill:  var(--energy-sentinel);
  --energy-track: rgba(74, 106, 170, 0.15);
  --energy-label: #7a9aca;
}
#player-section[data-class="shadow"] {
  --energy-fill:  var(--energy-shadow);
  --energy-track: rgba(106, 90, 170, 0.15);
  --energy-label: #9a8aca;
}
#player-section[data-class="warden"] {
  --energy-fill:  var(--energy-warden);
  --energy-track: rgba(170, 58, 42, 0.15);
  --energy-label: #ca7a6a;
}
#player-section[data-class="soulbinder"] {
  --energy-fill:  var(--energy-soulbinder);
  --energy-track: rgba(138, 42, 170, 0.15);
  --energy-label: #ba7aca;
}

/* ── COMPANION PORTRAIT ──────────────────────────────────── */
/* Beastmaster beast + Necromancer reanimated companion.
   Sits beside the player portrait — smaller, distinct border. */

#companion-section {
  display: flex;
  align-items: center;
  margin-left: var(--space-2);
}

.portrait--companion {
  width:  55px;
  height: 55px;
  border: 2px solid #3a8a3a;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 8px rgba(58, 138, 58, 0.50);
  animation: companion-pulse 2.5s ease-in-out infinite;
}

.portrait--companion img {
  width:  100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.companion-nameplate {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.72);
  font-size: 8px;
  text-align: center;
  padding: 1px 0;
  color: #aaffaa;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Reanimated CSS filter — grayscale + purple tint */
.portrait--reanimated {
  filter: grayscale(0.65) hue-rotate(200deg) brightness(0.6) sepia(0.35);
  border-color: #6a2a9a;
  box-shadow: 0 0 8px rgba(106, 42, 154, 0.60);
  animation: reanimated-pulse 2.5s ease-in-out infinite;
}

.portrait--reanimated .companion-nameplate {
  color: #cc88ff;
}

@keyframes companion-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(58, 138, 58, 0.45); }
  50%       { box-shadow: 0 0 12px rgba(58, 138, 58, 0.80); }
}

@keyframes reanimated-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(106, 42, 154, 0.45); }
  50%       { box-shadow: 0 0 12px rgba(106, 42, 154, 0.80); }
}

/* Apex Predator frenzy — brighter, faster pulse */
.portrait--companion.companion--frenzy {
  border-color: #ff6a2a;
  animation: frenzy-pulse 0.8s ease-in-out infinite;
}

@keyframes frenzy-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 106, 42, 0.60); }
  50%       { box-shadow: 0 0 18px rgba(255, 106, 42, 1.00); }
}

/* ── ATTACK MODAL SKILL CARDS ────────────────────────────── */
/* New card-based layout replacing the old two-button layout. */

.attack-modal-energy-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.attack-modal-energy-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  min-width: 52px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.attack-modal-energy-track {
  flex: 1;
  height: 5px;
  background: var(--energy-track);
  border-radius: var(--bar-radius);
  overflow: hidden;
}

.attack-modal-energy-fill {
  height: 100%;
  border-radius: var(--bar-radius);
  transition: width var(--dur-med) ease;
}

.attack-modal-energy-val {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  min-width: 48px;
  text-align: right;
}

.attack-modal-skills {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.attack-modal-tabs {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2);
}

.attack-modal-tab {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.attack-modal-tab.active {
  background: var(--bg-header);
  color: var(--text-primary);
  border-color: var(--accent);
}

/* Skill cards */
.skill-card {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
  user-select: none;
}

.skill-card:active { background: var(--bg-header); }

.skill-card--normal { border-left: 3px solid var(--accent); }

.skill-card--ultimate {
  border-left: 3px solid #c8a020;
  background: rgba(200, 160, 32, 0.06);
}

.skill-card--cooldown {
  opacity: 0.6;
  cursor: not-allowed;
}

.skill-card--blocked {
  opacity: 0.55;
  cursor: not-allowed;
}

.skill-card--locked {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}

.skill-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.skill-card-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.skill-card-name--locked { color: var(--text-secondary); }

.skill-tier-badge {
  font-size: 10px;
  font-weight: var(--weight-bold);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.skill-tier-0 { background: rgba(200,150,60,0.25); color: #c8963c; }
.skill-tier-1 { background: rgba(80,160,80,0.20);  color: #50a050; }
.skill-tier-2 { background: rgba(60,100,200,0.20); color: #6080c8; }
.skill-tier-3 { background: rgba(180,60,180,0.20); color: #b040b0; }
.skill-tier-4 { background: rgba(200,160,32,0.25); color: #c8a020; }

.skill-card-cd-badge {
  font-size: 10px;
  padding: 1px 5px;
  background: rgba(200,60,60,0.25);
  color: #e06060;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.skill-card-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: var(--space-1);
}

.skill-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.skill-card-cost {
  font-size: 10px;
  color: #5090c8;
  background: rgba(50,90,200,0.15);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

.skill-card-hp-cost {
  font-size: 10px;
  color: #c86060;
  background: rgba(200,60,60,0.15);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}

.skill-card-cd-info {
  font-size: 10px;
  color: var(--text-secondary);
  margin-left: auto;
}

.skill-level-pips {
  display: flex;
  gap: 3px;
  align-items: center;
}

.skill-level-pip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
}

.skill-level-pip.filled {
  background: var(--accent);
}

/* ── PROFILE — locked subclass cards ────────────────────── */
.profile-class-btn--locked {
  opacity: 0.55;
  cursor: not-allowed;
  border-style: dashed;
}

.profile-class-sym--locked {
  background: var(--bg-inset);
  color: var(--text-secondary);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── PROFILE — attribute panel ───────────────────────────── */
.attr-grid {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.attr-row {
  display:     grid;
  grid-template-columns: 36px 1fr 32px 32px 1fr;
  align-items: center;
  gap:         var(--space-2);
  padding:     var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  background:  var(--bg-inset);
  border:      1px solid var(--border);
}

.attr-label {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.06em;
  color:          var(--accent);
  text-align:     center;
}

.attr-name {
  font-size:  var(--text-sm);
  color:      var(--text-primary);
}

.attr-val {
  font-family: var(--font-display);
  font-size:   var(--text-sm);
  font-weight: var(--weight-bold);
  color:       var(--text-primary);
  text-align:  center;
}

.attr-plus-btn {
  width:         28px;
  height:        28px;
  border-radius: var(--radius-sm);
  border:        1px solid var(--accent);
  background:    transparent;
  color:         var(--accent);
  font-size:     18px;
  line-height:   1;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  padding:       0;
  transition:    background var(--dur-fast), color var(--dur-fast);
}

.attr-plus-btn:active {
  background: var(--accent);
  color:      var(--bg-base);
}

.attr-plus-btn--disabled {
  border-color: var(--border);
  color:        var(--text-secondary);
  opacity:      0.4;
  cursor:       not-allowed;
}

.attr-effect {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  text-align: right;
  white-space: nowrap;
}

.attr-unspent-badge {
  font-family:  var(--font-display);
  font-size:    10px;
  background:   var(--accent);
  color:        var(--bg-base);
  border-radius: var(--radius-full);
  padding:      1px 8px;
  letter-spacing: 0.04em;
  font-weight:  var(--weight-bold);
  text-transform: none;
  animation:    pulse 1.4s ease-in-out infinite;
}

/* ── BOSS FIGHT TREATMENTS ──────────────────────────────────── */

/* Gold HP bar for bosses */
.enemy-hp-fill--boss {
  background: linear-gradient(90deg, #8b6914, #d4a520, #f0c040, #d4a520) !important;
  box-shadow: 0 0 6px rgba(212,165,32,0.5);
}

/* Boss name — larger, spaced, slightly warm toned */
.enemy-name--boss {
  font-size:      var(--text-lg) !important;
  letter-spacing: 0.06em;
  color:          #e8d080 !important;
  font-weight:    var(--weight-bold);
}

/* Boss section — subtle gold top border + act badge */
.enemy-section--boss {
  border-top:  2px solid rgba(212,165,32,0.35) !important;
  position:    relative;
}

/* Act badge — top right corner of enemy section */
.enemy-section--boss::before {
  content:        attr(data-boss-act);
  position:       absolute;
  top:            var(--space-2);
  right:          var(--space-3);
  font-size:      var(--text-xs);
  color:          rgba(212,165,32,0.70);
  letter-spacing: 0.12em;
  font-weight:    var(--weight-bold);
  pointer-events: none;
}

/* Boss intro log line — centred, amber, spaced */
.log-entry.boss-intro {
  text-align:     center;
  color:          #e8c050;
  font-weight:    var(--weight-bold);
  letter-spacing: 0.12em;
  font-size:      var(--text-sm);
  padding:        var(--space-2) 0 var(--space-1);
  border-top:     1px solid rgba(212,165,32,0.20);
  border-bottom:  1px solid rgba(212,165,32,0.20);
  margin:         var(--space-1) 0;
}

/* Boss lore — italic, muted, atmospheric */
.log-entry.boss-lore {
  color:       var(--text-secondary);
  font-style:  italic;
  font-size:   var(--text-xs);
  text-align:  center;
  padding:     var(--space-1) var(--space-3) var(--space-2);
  opacity:     0.80;
}

/* Boss gimmick log lines — distinctive from normal system messages */
.log-entry.boss-gimmick {
  color:       #d08040;
  font-size:   var(--text-xs);
  font-style:  italic;
}

/* ── HORIZONTAL WIDE BACKDROP ───────────────────────────── */
/* 16:9 zone image shown at top of battle area.              */
/* Regular floors: clear, atmospheric.                       */
/* Boss floors: .is-boss class adds more opacity + blur.     */

#battle-backdrop-wide {
  position:            absolute;
  top:                 0;
  left:                0;
  right:               0;
  height:              200px;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  opacity:             0;
  pointer-events:      none;
  z-index: var(--z-base);
  transition:          background-image 0.6s ease,
                       opacity 0.6s ease,
                       filter 0.6s ease;

  /* Fade to transparent at the bottom so it blends into the log */
  -webkit-mask-image: linear-gradient(to bottom,
    black 0%, black 55%, transparent 100%);
  mask-image:         linear-gradient(to bottom,
    black 0%, black 55%, transparent 100%);
}

/* Active — regular floor */
#battle-backdrop-wide.wide-active {
  opacity: 0.30;
  filter:  none;
}

/* Boss floor — more presence, subtle blur */
#battle-backdrop-wide.wide-boss {
  opacity: 0.45;
  filter:  blur(1.5px) brightness(0.85) saturate(1.3);
}

/* ── CO-OP PARTNER HUD ───────────────────────────────────── */

#coop-partner-hud {
  border-top:  1px solid var(--border);
  padding-top: var(--space-2);
  margin-top:  var(--space-2);
}

.coop-partner-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.coop-partner-portrait {
  width:         36px;
  height:        36px;
  border-radius: var(--radius-sm);
  overflow:      hidden;
  flex-shrink:   0;
  background:    var(--bg-inset);
  border:        1px solid var(--border);
}

.coop-partner-portrait img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: top center;
  display:         block;
}

.coop-partner-info {
  flex:      1;
  min-width: 0;
}

.coop-partner-name {
  font-family:  var(--font-display);
  font-size:    var(--text-xs);
  font-weight:  var(--weight-bold);
  color:        var(--text-secondary);
  margin-bottom: 2px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.coop-partner-status {
  font-size:  16px;
  flex-shrink: 0;
  width:       20px;
  text-align:  center;
}

.coop-partner-status--ready    { color: #44cc44; }
.coop-partner-status--choosing { color: var(--text-secondary); }

/* 30s action timer bar */
.coop-timer-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin-top:  var(--space-2);
}

.coop-timer-track {
  flex:          1;
  height:        4px;
  border-radius: var(--radius-full);
  background:    var(--bg-inset);
  overflow:      hidden;
  border:        1px solid var(--border);
}

.coop-timer-fill {
  height:           100%;
  border-radius:    var(--radius-full);
  background:       var(--accent);
  transition:       width 1s linear;
}

.coop-timer-val {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  color:          var(--accent);
  min-width:      20px;
  text-align:     right;
  flex-shrink:    0;
}

/* ── CO-OP BATTLE LAYOUT (mobile — Layout B) ─────────────
   When .coop-active is on #screen-game, player section
   splits into two equal columns: P1 left, Partner right.
   This is the default (mobile) layout.
   Desktop overrides are in layout.css @media block.        */

#screen-game.coop-active #player-section {
  padding:        0;
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
}

#screen-game.coop-active #player-section > .combatant-row {
  flex:         1;
  padding:      var(--space-3) var(--space-4);
  border-right: 1.5px solid var(--border);
  min-width:    0;
}

/* Partner HUD becomes the right half column */
#screen-game.coop-active #coop-partner-hud {
  flex:           1;
  min-width:      0;
  border-top:     none;
  margin-top:     0;
  padding:        var(--space-3) var(--space-3) var(--space-3) var(--space-3);
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            var(--space-2);
}

/* Bigger partner portrait in side-by-side layout */
#screen-game.coop-active .coop-partner-portrait {
  width:  48px;
  height: 48px;
}

/* Timer row spans full width below both columns */
#screen-game.coop-active #coop-timer-row {
  order:         10;
  width:         100%;
  padding:       var(--space-2) var(--space-4);
  border-top:    1px solid var(--border);
  background:    var(--bg-base);
}

/* Companion section stays within P1 column */
#screen-game.coop-active #companion-section {
  display: none; /* hide in co-op to save space */
}