/* ═══════════════════════════════════════════════════════════════
   HEROESCM — SHARED BASE
   Design tokens + universal zone layout.
   Each variant HTML inlines a theme stylesheet AFTER this one.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ds-bg-dark: #1a1209; --ds-bg: #2a1f10; --ds-bg-panel: #1e160c; --ds-bg-inset: #151008;
  --ds-wood-dark: #3a2510; --ds-wood: #5c3d1e; --ds-wood-light: #7a5230; --ds-wood-highlight: #9a6b3a;
  --ds-gold: #c9a84c; --ds-gold-light: #e8c96d; --ds-gold-dark: #8a6f2e;
  --ds-metal: #8b7355; --ds-steel: #6b6b6b;
  --ds-parchment: #d4c5a0; --ds-parchment-dark: #c4b48a; --ds-parchment-text: #3a2a15;
  --ds-text: #e0d8c0; --ds-text-dim: #8a7a60; --ds-text-bright: #f5ecd5;
  --ds-red: #cc4444; --ds-green: #44aa66; --ds-blue: #4488cc; --ds-purple: #8855cc;
  --ds-rarity-common: #8a8a8a; --ds-rarity-uncommon: #44aa66; --ds-rarity-rare: #4488cc;
  --ds-rarity-epic: #8855cc; --ds-rarity-legendary: #c9a84c;
  --gold: var(--ds-gold); --gold-light: var(--ds-gold-light); --gold-dark: var(--ds-gold-dark);
  --text: var(--ds-text); --text-dim: var(--ds-text-dim); --text-bright: var(--ds-text-bright);
  --border: #3a2a18;
}

html, body { background: #0b0805; color: var(--text); font-family: 'Crimson Text', serif; }

/* ══════ PAGE NAV ══════ */
.topnav {
  position: sticky; top: 0; z-index: 100;
  display: flex; justify-content: center; gap: 4px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(10,7,3,0.98), rgba(10,7,3,0.88));
  border-bottom: 1px solid rgba(201,168,76,0.15);
  backdrop-filter: blur(8px);
}
.topnav a {
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
  padding: 7px 18px;
  border: 1px solid var(--border); border-radius: 3px;
  background: rgba(0,0,0,0.4);
  transition: 0.2s;
}
.topnav a:hover { color: var(--gold-light); border-color: var(--gold-dark); background: rgba(30,22,10,0.6); }
.topnav a.active {
  color: #1a1209;
  background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-dark));
  border-color: var(--gold-light);
  box-shadow: 0 0 12px rgba(201,168,76,0.3);
}

.page-hd {
  max-width: 1736px; margin: 24px auto 10px;
  padding: 0 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.page-hd .num {
  font-family: 'Cinzel', serif; color: var(--gold-dark);
  font-size: 0.7rem; letter-spacing: 3px; font-weight: 700;
}
.page-hd h1 {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: var(--gold-light); font-size: 1.8rem;
  letter-spacing: 3px; text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}
.page-hd .sub {
  color: var(--text-dim); font-size: 1rem; line-height: 1.5;
  max-width: 1100px; font-style: italic;
}

/* ══════ STAGE ══════ */
.stage-wrap {
  display: flex; justify-content: center;
  padding: 20px 20px 40px;
}
.stage {
  position: relative;
  width: 1736px; height: 1157px;
  background: #000;
  overflow: hidden;
  border: 1px solid rgba(201,168,76,0.15);
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
  flex-shrink: 0;
}
.stage-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
}
.lobby-overlay { position: absolute; inset: 0; z-index: 1; }

/* ══════ ZONES — geometry preserved from original lobby.html ══════ */
.zone {
  position: absolute;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.zone-header { left: 22%; top: 1.5%; width: 56%; height: 10%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4%; flex-direction: row; gap: 16px;
}
.zone-battle {
  left: 4.7%; top: calc(17.5% - 12px + 34px);
  width: 38.8%; bottom: 48.9%;
  overflow: hidden;
}
.zone-army { left: 56.2%; top: 16.2%; width: 39.1%; height: 34.9%; padding: 6px 8px; }
.zone-inv { left: 4.7%; top: 54.7%; width: 38.8%; height: 35.0%; padding: 10px 14px; }
.zone-news { left: 56.5%; top: 55.9%; width: 38.8%; height: 33.5%; padding: 10px 14px; }

/* ══════ TAB STRIPS (positioned outside zones) ══════ */
.battle-title-bar {
  position: absolute;
  left: 4.7%; width: 38.8%;
  top: calc(11.5% + 25px);
  text-align: center;
  line-height: 24px; height: 24px;
  font-family: 'Cinzel', serif; font-weight: 700;
  color: var(--gold); font-size: 1.05rem;
  letter-spacing: 2px; text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  z-index: 2;
}
.battle-title-actions {
  position: absolute;
  right: calc(56.2% + 310px); width: 39.1%;
  top: calc(11.2% - 40px);
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 6px;
  z-index: 4;
  pointer-events: auto;
}
.battle-title-btn {
  font-family: 'Cinzel', serif; font-size: 0.78rem; font-weight: 700;
  color: var(--gold-light, #e8c96d);
  background: linear-gradient(180deg, rgba(60,42,18,0.92), rgba(26,18,9,0.92));
  border: 1px solid var(--gold-dark, #8a6f2e);
  border-radius: 3px;
  padding: 5px 16px; cursor: pointer; transition: 0.2s;
  letter-spacing: 1.5px; text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  box-shadow: 0 0 8px rgba(201,168,76,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.battle-title-btn:hover {
  color: #1a1209;
  background: linear-gradient(180deg, var(--gold-light, #e8c96d), var(--gold, #c9a84c), var(--gold-dark, #8a6f2e));
  border-color: var(--gold-light, #e8c96d);
  box-shadow: 0 0 14px rgba(201,168,76,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
  text-shadow: none;
}
.battle-tabs {
  position: absolute;
  left: 4.7%; top: calc(17.5% - 12px);
  width: 38.8%;
  display: flex; gap: 0; z-index: 2;
}
.army-tabs {
  position: absolute;
  left: 56.2%; width: 39.1%;
  top: 13.7%;
  display: flex; gap: 0; z-index: 2;
}
.inv-tabs {
  position: absolute;
  left: 4.7%; width: 38.8%;
  top: calc(52.8% + 3px - 4px);
  display: flex; gap: 0; z-index: 2;
}
.news-tabs {
  position: absolute;
  left: 56.5%; width: 38.8%;
  top: calc(52.8% + 3px);
  display: flex; gap: 0; z-index: 2;
}

/* Universal tab — theme will override visuals */
.tab {
  flex: 1; padding: 7px 4px;
  text-align: center;
  font-family: 'Cinzel', serif; font-size: 0.82rem; font-weight: 600;
  color: var(--text-dim);
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border);
  cursor: pointer; transition: 0.2s;
  letter-spacing: 1px;
}
.tab:first-child { border-radius: 4px 0 0 0; }
.tab:last-child  { border-radius: 0 4px 0 0; }
.tab:hover { color: var(--text); border-color: var(--gold-dark); }
.tab.active {
  color: var(--gold-light);
  background: rgba(12,7,2,0.6);
  border-color: var(--gold-dark);
  border-bottom-color: rgba(12,7,2,0.6);
  position: relative; z-index: 3;
}
.tab.disabled {
  color: rgba(224,216,192,0.2);
  cursor: not-allowed; pointer-events: none;
  background: rgba(0,0,0,0.6);
  border-color: rgba(58,42,24,0.25);
  text-decoration: line-through;
  opacity: 0.5;
}

/* ══════ HEADER ══════ */
.zone-header { gap: 14px; padding: 0 3%; }
.h-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; justify-content: flex-start; transform: translateX(50px); }
.h-center { display: flex; align-items: center; gap: 8px; flex-shrink: 0; transform: translateX(50px); }
.h-right { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; justify-content: flex-end; }
.hero-name {
  font-family: 'Cinzel', serif; font-size: 1.25rem;
  font-weight: 700; color: var(--text-bright);
  text-shadow: 0 2px 8px rgba(0,0,0,0.9); letter-spacing: 1.5px;
  flex-shrink: 0;
}
.lv-badge {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #1a1209; font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 0.72rem; padding: 2px 10px; border-radius: 3px;
  letter-spacing: 1px;
}
.xp-wrap {
  flex: 1; min-width: 60px; max-width: 220px; height: 8px;
  background: rgba(0,0,0,0.7); border: 1px solid var(--border);
  border-radius: 4px; overflow: hidden;
}
.xp-fill {
  height: 100%; width: 85%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}
.xp-txt { font-size: 0.7rem; color: var(--text-dim); font-family: 'Cinzel', serif; letter-spacing: 1px; }

.h-center { display: flex; align-items: center; gap: 8px; }
.gold-coin {
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d878, var(--gold), var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #2a1f10;
  box-shadow: 0 0 10px rgba(201,168,76,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  font-family: 'Cinzel', serif;
}
.gold-val {
  font-family: 'Cinzel', serif; font-size: 1.5rem;
  font-weight: 700; color: var(--gold-light);
  text-shadow: 0 0 12px rgba(201,168,76,0.4); letter-spacing: 1px;
}
.h-gold { display: flex; align-items: center; gap: 8px; }
.h-right { display: flex; align-items: center; gap: 14px; }
.online { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-dim); font-family: 'Cinzel', serif; letter-spacing: 1px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #44aa66; box-shadow: 0 0 6px #44aa66; }
.btn-out {
  font-family: 'Cinzel', serif; font-size: 0.75rem; font-weight: 600;
  color: var(--text-dim); background: rgba(0,0,0,0.4);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 4px 14px; cursor: pointer; transition: 0.2s; letter-spacing: 1.5px;
  text-transform: uppercase;
}
.btn-out:hover { color: var(--text); border-color: var(--gold-dark); }

/* ══════ UNIVERSAL HELPERS ══════ */
.section-label {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: var(--gold-dark); letter-spacing: 1.8px; text-transform: uppercase;
  font-size: 0.62rem;
  text-align: center; padding: 0 0 4px; flex-shrink: 0;
}

.gilt-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark) 15%, var(--gold) 50%, var(--gold-dark) 85%, transparent);
  opacity: 0.6; flex-shrink: 0;
}

/* Rarity colored edges */
.r-common    { --r: var(--ds-rarity-common); }
.r-uncommon  { --r: var(--ds-rarity-uncommon); }
.r-rare      { --r: var(--ds-rarity-rare); }
.r-epic      { --r: var(--ds-rarity-epic); }
.r-legendary { --r: var(--ds-rarity-legendary); }

/* Item glyph placeholder fills */
.glyph {
  width: 82%; height: 82%; border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.25),
              inset 0 -1px 3px rgba(0,0,0,0.5),
              0 1px 2px rgba(0,0,0,0.6);
}
.g-gem    { background: radial-gradient(circle at 30% 30%, #8cf, #246 70%, #000); }
.g-ring   { background: radial-gradient(circle at 35% 35%, var(--gold-light), var(--gold-dark) 60%, #3a2a10); border-radius: 50%; }
.g-blade  { background: linear-gradient(135deg, #b8b8c0, #4a4a58 60%, #1a1a22); }
.g-shield { background: radial-gradient(ellipse at 50% 40%, #7a5230, #3a2510 70%, #1a0a05); }
.g-potion { background: radial-gradient(circle at 40% 30%, #cc4444, #550a0a); }
.g-scroll { background: linear-gradient(180deg, #d4c5a0, #8a7a60); }
.g-herb   { background: radial-gradient(circle at 40% 30%, #66cc88, #1a4422); }
.g-skull  { background: radial-gradient(circle at 50% 35%, #d4c5a0, #8a7a60 60%, #2a1f10); }
.g-orb    { background: radial-gradient(circle at 35% 30%, #b898ff, #4a2a8a 70%, #1a0a2a); }
.g-coin   { background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold-dark)); border-radius: 50%; }
.g-key    { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }
.g-cloak  { background: linear-gradient(135deg, #3a2a55, #1a0a22); }
.g-boot   { background: linear-gradient(135deg, #5c3d1e, #2a1f10); }
.g-tome   { background: linear-gradient(135deg, #6b2020, #2a0a0a); }

/* ══════ PANES ══════ */
.pane { display: none; flex: 1; min-height: 0; flex-direction: column; width: 100%; }
.pane.active { display: flex; }
.pane-inv.active { display: flex; flex-direction: row; gap: 10px; }

/* ══════ BATTLE ZONE — Hunt pane ══════ */
.battle-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 8px 12px; gap: 6px; }
.hunt-top {
  display: flex; gap: 10px; min-height: 0;
  flex: 1;
}
.hunt-left { flex: 1.6; min-width: 0; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.hunt-help-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; min-height: 0; }

.hunt-banner {
  display: flex; gap: 10px; align-items: stretch;
}
.hunt-preview {
  width: 140px; align-self: stretch;
  flex-shrink: 0; border: 1px solid var(--border); border-radius: 3px;
  background: linear-gradient(135deg, #3a2a18 0%, #1a0f05 100%);
  overflow: hidden;
  position: relative;
}
.hunt-preview::after {
  content: 'DESERT'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; color: rgba(201,168,76,0.3);
  letter-spacing: 3px; font-size: 0.75rem;
}
.hunt-info { flex: 1; min-width: 0; }
.hunt-title {
  font-family: 'Cinzel', serif; font-weight: 700; color: var(--gold-light);
  font-size: 0.95rem; letter-spacing: 1.5px; margin-bottom: 3px;
}
.hunt-desc {
  font-size: 0.82rem; color: var(--text-dim); line-height: 1.35;
  margin-bottom: 6px;
}

.diff-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Cinzel', serif; font-size: 0.65rem; font-weight: 700;
  padding: 2px 10px; border-radius: 2px;
  text-transform: uppercase; letter-spacing: 1.5px;
  border: 1px solid; background: rgba(0,0,0,0.4);
}
.diff-easy    { color: #7ec86e; border-color: #4a7a40; }
.diff-medium  { color: #e8c96d; border-color: #9a7a30; }
.diff-hard    { color: #e87a5a; border-color: #8a4a30; }
.diff-extreme { color: #d080ff; border-color: #7a40ac; }

.reward-row {
  display: flex; gap: 14px; margin-top: 6px;
  font-family: 'Cinzel', serif; font-size: 0.75rem;
}
.reward-row .rw { display: flex; align-items: center; gap: 5px; color: var(--text); }
.reward-row .rw-lbl { color: var(--text-dim); font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; }
.reward-row .rw-v { color: var(--gold-light); font-weight: 700; }

.map-effect {
  padding: 6px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(90,60,30,0.4);
  border-radius: 3px;
  font-size: 0.78rem; color: var(--text-dim); line-height: 1.3;
}
.map-effect-lbl {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: var(--gold); font-size: 0.64rem;
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 2px;
}

.enemy-row { display: flex; gap: 4px; flex: 1; min-height: 0; align-items: stretch; }
.enemy-slot {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 3px 2px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(90,60,30,0.45);
  border-radius: 2px;
  gap: 3px;
}
.enemy-slot.empty { opacity: 0.25; }
.enemy-img {
  width: 100%; flex: 1; min-height: 44px;
  background-size: cover; background-position: center 20%;
  border-radius: 2px;
  position: relative;
}
.enemy-name {
  font-family: 'Crimson Text', serif; font-size: 0.65rem;
  color: var(--text-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.enemy-count {
  font-family: 'Cinzel', serif; font-size: 0.72rem;
  color: var(--gold-light); font-weight: 700;
}

.hunt-buttons {
  display: flex; gap: 8px; padding-top: 6px;
  border-top: 1px solid rgba(90,60,30,0.3);
  flex-shrink: 0;
  justify-content: center;
  align-items: stretch;
}
.btn { font-family: 'Cinzel', serif; font-weight: 700; cursor: pointer; transition: 0.2s; }
.btn-skip, .btn-help, .btn-attack {
  flex: 1;
  min-width: 0;
  padding: 9px 16px;
  font-size: 0.78rem;
  letter-spacing: 1.8px; text-transform: uppercase;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
}
.btn-skip {
  color: var(--text-dim);
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border);
}
.btn-skip:hover { color: var(--text); border-color: var(--gold-dark); }
.btn-attack {
  color: #1a1209;
  background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-dark));
  border: 1.5px solid var(--gold-light);
  box-shadow: 0 0 12px rgba(201,168,76,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  font-weight: 900;
}
.btn-attack:hover {
  box-shadow: 0 0 22px rgba(201,168,76,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-help {
  color: #d8c8ff;
  background: linear-gradient(180deg, #3a2a5c, #1e1030);
  border: 1px solid #7a5aac;
}
.btn-help:hover { border-color: #a07adc; background: linear-gradient(180deg, #4e3a7c, #2e1850); }

/* Help Needed list */
.help-label {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: var(--gold-light); font-size: 0.82rem;
  letter-spacing: 1.5px; text-align: center;
  padding: 2px 0 2px; border-bottom: 1px solid rgba(90,60,30,0.3);
}
.help-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; min-height: 0; }
.help-list::-webkit-scrollbar { width: 6px; }
.help-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.4); }
.help-list::-webkit-scrollbar-thumb { background: var(--ds-wood); border-radius: 3px; }
.help-card {
  padding: 6px 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(90,60,30,0.35);
  border-radius: 3px;
  display: flex; flex-direction: column; gap: 3px;
}
.help-card-hd { display: flex; justify-content: space-between; align-items: center; }
.help-name { font-family: 'Cinzel', serif; font-size: 0.74rem; font-weight: 700; color: var(--gold-light); letter-spacing: 0.5px; }
.help-lv { font-family: 'Cinzel', serif; font-size: 0.62rem; color: var(--text-dim); letter-spacing: 1px; }
.help-meta { display: flex; gap: 5px; align-items: center; font-size: 0.68rem; color: var(--text-dim); }
.help-units { display: flex; gap: 2px; }
.help-unit {
  width: 20px; height: 20px; border-radius: 2px;
  background-size: cover; background-position: center 25%;
  border: 1px solid rgba(90,60,30,0.4);
}
.help-btn {
  font-family: 'Cinzel', serif; font-size: 0.62rem; font-weight: 700;
  padding: 3px 8px; border-radius: 2px;
  color: var(--gold-light);
  background: linear-gradient(180deg, #5c3d1e, #3a2510);
  border: 1px solid var(--gold-dark);
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer;
}
.help-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* "Min my level" toggle — rendered only on the owner's own help card. */
.help-minlvl-row {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Crimson Text', serif; font-size: 0.74rem;
  color: var(--text-dim);
  margin-top: 2px;
  cursor: pointer;
  user-select: none;
}
.help-minlvl-row input[type="checkbox"] {
  width: 12px; height: 12px; margin: 0;
  accent-color: var(--gold-dark, #c9a84c);
  cursor: pointer;
}
.help-minlvl-row:hover { color: var(--text, #e0d8c0); }

/* Locked help card — min-level filter excludes the current player.
   Greyed out + subtle lock overlay, sorted to the bottom of the list. */
.help-card.help-card-locked {
  opacity: 0.5;
  filter: grayscale(0.4);
  cursor: not-allowed;
}
.help-card.help-card-locked .help-name,
.help-card.help-card-locked .help-lv,
.help-card.help-card-locked .help-enemies {
  color: var(--text-dim, #8a7a52);
}
.help-card.help-card-locked .help-btn {
  background: linear-gradient(180deg, #3a2510, #1a1208);
  border-color: rgba(90,60,30,0.5);
}

/* Coming Soon pane treatments */
.coming-soon {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  text-align: center; padding: 20px;
}
.cs-title {
  font-family: 'Cinzel', serif; font-weight: 900;
  color: var(--gold-light); font-size: 1.2rem;
  letter-spacing: 4px; text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.cs-desc {
  font-family: 'Crimson Text', serif; font-style: italic;
  color: var(--text-dim); font-size: 0.9rem; line-height: 1.4;
  max-width: 360px;
}
.cs-visual { width: 120px; height: 120px; position: relative; }

/* ══════ CUSTOM BATTLE PANE ══════
   Sandbox 1v1 form — see docs/superpowers/specs/2026-04-21-custom-battle-design.md */
.pane-custom { padding: 10px 12px; }
.cb-wrap { display: flex; flex-direction: column; gap: 10px; }
.cb-intro {
  font-family: 'Crimson Text', serif; font-size: 0.86rem;
  color: var(--text-dim); line-height: 1.3;
}
.cb-intro .cb-cost { color: var(--gold-dark, #c9a84c); font-style: italic; }
.cb-section {
  background: rgba(20,14,8,0.55);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,0.2);
  border-radius: 3px;
  padding: 8px 10px 10px;
}
.cb-section-title {
  font-family: 'Cinzel', serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-light, #e8c96d);
  margin-bottom: 6px;
}
.cb-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; flex-wrap: wrap; }
.cb-label {
  font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 1px;
  color: var(--text-dim); text-transform: uppercase;
  min-width: 108px; flex-shrink: 0;
}
.cb-input {
  font-family: 'Crimson Text', serif; font-size: 0.92rem;
  color: var(--text, #e0d8c0);
  background: rgba(10,6,3,0.75);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 5px 8px;
  min-width: 0;
}
.cb-input:focus { outline: none; border-color: var(--gold-dark, #c9a84c); }
.cb-input-num { width: 110px; }
.cb-input-small { width: 72px; }
.cb-hint { font-size: 0.76rem; color: var(--text-dim); font-style: italic; }
.cb-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Crimson Text', serif; font-size: 0.88rem;
  color: var(--text, #e0d8c0); cursor: pointer;
  margin-right: 4px;
}
.cb-check input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--gold-dark, #c9a84c); margin: 0;
}
.cb-btn {
  font-family: 'Cinzel', serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 2px; cursor: pointer;
  transition: filter 0.15s, box-shadow 0.2s;
}
.cb-btn-apply {
  color: var(--gold-light, #e8c96d);
  background: linear-gradient(180deg, rgba(90,60,30,0.9), rgba(30,20,10,0.9));
  border: 1px solid var(--gold-dark, #c9a84c);
}
.cb-btn-apply:hover { filter: brightness(1.15); box-shadow: 0 0 8px rgba(201,168,76,0.4); }
.cb-status {
  font-size: 0.78rem; color: var(--text-dim); font-style: italic;
  margin-top: 4px;
}
.cb-status.armed { color: #8ce89a; font-style: normal; }
.cb-status.error { color: #e68a8a; font-style: normal; }
.cb-start-row { display: flex; justify-content: center; margin-top: 4px; }
.cb-btn-start {
  font-size: 0.88rem; letter-spacing: 2px;
  padding: 10px 26px;
  color: var(--gold-light, #e8c96d);
  background: linear-gradient(180deg, rgba(122,82,48,0.95), rgba(58,37,16,0.98));
  border: 1px solid var(--gold-dark, #c9a84c);
  box-shadow: inset 0 1px 0 rgba(255,220,140,0.25), 0 0 10px rgba(201,168,76,0.25);
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
}
.cb-btn-start:hover:not(:disabled) {
  filter: brightness(1.2);
  box-shadow: inset 0 1px 0 rgba(255,220,140,0.35), 0 0 18px rgba(201,168,76,0.55);
}
.cb-btn-start:disabled {
  opacity: 0.42; cursor: not-allowed;
  filter: grayscale(0.5);
}

/* ══════ ARMY ZONE ══════ */
.army-body { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 4px; }
.tier-tabs { display: flex; gap: 2px; flex-shrink: 0; }
.tier-tab {
  flex: 1; padding: 2px 0; text-align: center;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 0.6rem; letter-spacing: 1.5px;
  color: var(--text-dim);
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: 2px; cursor: pointer; transition: 0.2s;
}
.tier-tab:hover { color: var(--text); }
.tier-tab.active {
  color: var(--gold-light); background: rgba(92,61,30,0.4);
  border-color: var(--gold-dark);
  box-shadow: 0 0 8px rgba(201,168,76,0.2), inset 0 0 6px rgba(201,168,76,0.1);
}

.unit-cols { display: flex; gap: 4px; flex-shrink: 0; }
.unit-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.unit-card {
  width: 100%; aspect-ratio: 1;
  background: rgba(0,0,0,0.45);
  border: 1.5px solid var(--border);
  border-radius: 3px;
  position: relative; overflow: hidden;
  transition: 0.2s;
}
.unit-card-img {
  width: 100%; height: 100%; background-size: cover; background-position: center 20%;
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000);
}
.unit-col:hover .unit-card { border-color: var(--gold-dark); box-shadow: 0 0 8px rgba(201,168,76,0.25); }
.unit-col.selected .unit-card {
  border-color: var(--gold); box-shadow: 0 0 14px rgba(201,168,76,0.45);
}
/* Unaffordable: points spent on other units leave no room for even one
   of this unit AND nothing is currently picked. Greys out the entire
   column + blocks interaction until the budget frees up. Columns with
   count > 0 never get this class — the user must always be able to
   decrement stacks they already placed. */
.unit-col.unaffordable {
  opacity: 0.38;
  filter: grayscale(0.8);
  pointer-events: none;
}
.unit-col.unaffordable .unit-cost { color: var(--danger, #cc4444); }

/* Inventory hero-info faction passive caption — shown under the stat stack
   for necromancers (morale immunity) / beastlands (speed bonus). Subtle
   italic gold so it reads as a note rather than another stat row. */
.i-faction-passive {
  margin-top: 6px;
  font-family: 'Crimson Text', serif;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--gold-dark, #c9a84c);
  text-align: center;
  opacity: 0.9;
}
.unit-badge {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 900;
  color: #fff;
  background: rgba(30,10,50,0.92);
  border: 1px solid rgba(139,92,246,0.7);
  border-radius: 3px;
  padding: 0 5px; min-width: 22px; text-align: center;
  text-shadow: 0 1px 3px #000;
}
.unit-max {
  font-family: 'Cinzel', serif; font-size: 0.55rem; font-weight: 700;
  color: var(--text-dim); letter-spacing: 1px;
}
.unit-name {
  font-family: 'Cinzel', serif; font-size: 0.62rem; font-weight: 600;
  color: var(--text-dim);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center;
}
.unit-col.selected .unit-name { color: var(--gold-light); }
.unit-cost {
  font-family: 'Cinzel', serif; font-size: 0.52rem; font-weight: 600;
  color: var(--gold-dark);
}
.slider-wrap {
  width: 100%; height: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 2px;
  background: rgba(0,0,0,0.3); padding: 4px 0; gap: 3px;
  /* Anchor for the absolutely-positioned +/− stepper buttons below. */
  position: relative;
}
.slider-wrap input[type=range] {
  -webkit-appearance: none; appearance: none;
  writing-mode: vertical-lr; direction: rtl;
  width: 5px; height: 66px;
  background: rgba(58,42,24,0.6); border-radius: 3px;
  outline: none; cursor: pointer;
}
/* Slider thumb — a gold square stamped with a PLUS so it visually reads
   as an interactive "add a unit" handle rather than a generic dot. Square
   shape (with tiny corner radius) feels more grabable than a circle. The
   + is drawn via an inline SVG data-URI so it scales cleanly at any size.
   Keep the plus glyph in the faction-neutral dark wood color. */
.slider-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 3.5l-4.5 5h3v5h3v-5h3z' fill='%231a1209'/></svg>") center/72% no-repeat,
    linear-gradient(180deg, var(--gold-light), var(--gold-dark));
  border: 1.5px solid #9a6b3a; border-radius: 3px; cursor: grab;
}
.slider-wrap input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; }
.slider-wrap input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 3.5l-4.5 5h3v5h3v-5h3z' fill='%231a1209'/></svg>") center/72% no-repeat,
    linear-gradient(180deg, var(--gold-light), var(--gold-dark));
  border: 1.5px solid #9a6b3a; border-radius: 3px; cursor: grab;
}

/* Stepper buttons — absolutely positioned INSIDE the slider-wrap so they
   don't push the slider's flex layout (which would shift the thumb's
   screen position). One on each side of the slider thumb's track, small
   enough to coexist with the 5 px-wide track without visual crowding. */
.slider-wrap .slider-step {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 16px; height: 10px;
  padding: 0; margin: 0;
  background: linear-gradient(180deg, rgba(201,168,76,0.35), rgba(90,60,30,0.45));
  color: var(--gold-light);
  border: 1px solid var(--gold-dark); border-radius: 2px;
  font-family: sans-serif; font-size: 0.55rem; line-height: 1;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.75;
  transition: opacity 0.12s, filter 0.12s, transform 0.08s;
}
.slider-wrap .slider-step:hover  { opacity: 1; filter: brightness(1.3); }
.slider-wrap .slider-step:active { transform: translate(-50%, 1px); }
.slider-wrap .slider-step-up   { top:    2px; }
.slider-wrap .slider-step-down { bottom: 2px; }

.army-lower {
  display: flex; gap: 6px; flex: 1; min-height: 0;
  padding-top: 4px; border-top: 1px solid rgba(90,60,30,0.25);
}
.sel-preview {
  width: 28.5%; flex-shrink: 0; align-self: stretch;
  border: 1px solid var(--border); border-radius: 3px;
  background: linear-gradient(135deg, rgba(60,30,50,0.4), rgba(20,8,25,0.6)), rgba(0,0,0,0.4);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  position: relative;
}
.sel-preview-img {
  width: 100%; height: 100%;
  background-size: cover; background-position: center bottom;
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000);
}
.sel-right { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.sel-info-row { flex: 1; display: flex; min-height: 0; gap: 8px; }
.sel-stats { flex: 1; display: flex; flex-direction: column; padding: 0 4px; min-width: 0; }
.sel-unit-name {
  font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 700;
  color: var(--gold-light); margin-bottom: 4px; letter-spacing: 1px;
  flex-shrink: 0;
}
.sel-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px;
  flex: 1; font-size: 0.78rem; align-content: start;
}
.sel-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 2px; border-bottom: 1px dotted rgba(90,60,30,0.3);
}
.sel-stat:last-child { border-bottom: none; }
.sel-stat-lbl { color: var(--text-dim); font-family: 'Cinzel', serif; font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; }
.sel-stat-val { color: var(--text-bright); font-weight: 700; font-family: 'Cinzel', serif; }

.sel-abilities { flex: 1.1; padding: 0 4px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.sel-ab-title {
  font-family: 'Cinzel', serif; font-size: 0.82rem; font-weight: 700;
  color: var(--gold); margin-bottom: 4px; letter-spacing: 1.2px; text-transform: uppercase;
  flex-shrink: 0;  /* keep the "Abilities" header pinned at the top */
}
/* The list itself scrolls when it has more abilities than fit in .sel-abilities.
   min-height: 0 + flex: 1 lets it actually shrink within its flex parent so
   the scrollbar appears instead of the list pushing under the next panel. */
#ab-abilities-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;  /* breathing room for the scrollbar track */
}
#ab-abilities-list::-webkit-scrollbar { width: 6px; }
#ab-abilities-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
#ab-abilities-list::-webkit-scrollbar-thumb { background: var(--ds-wood); border-radius: 3px; }
.ability-item {
  margin-bottom: 6px; padding: 4px 6px;
  border-left: 2px solid var(--gold-dark);
  background: rgba(201,168,76,0.04);
  border-radius: 0 2px 2px 0;
}
.ability-name {
  font-family: 'Cinzel', serif; font-size: 0.72rem; font-weight: 700;
  color: var(--text-bright); letter-spacing: 0.8px;
}
.ability-desc {
  font-size: 0.78rem; color: var(--text-dim); line-height: 1.3;
  font-family: 'Crimson Text', serif;
}

.army-footer {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 4px 0 2px;
  border-top: 1px solid rgba(90,60,30,0.25);
  flex-shrink: 0;
}
.a-pts { font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--gold-light); font-weight: 700; letter-spacing: 1px; }
.a-pts .over { color: var(--ds-red); }
.btn-reset, .btn-apply {
  font-family: 'Cinzel', serif; font-size: 0.7rem; font-weight: 700;
  padding: 5px 16px; border-radius: 3px;
  cursor: pointer; transition: 0.2s;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.btn-reset {
  color: var(--text-dim);
  background: rgba(0,0,0,0.35); border: 1px solid var(--border);
}
.btn-reset:hover { color: var(--text); border-color: var(--gold-dark); }
.btn-apply {
  color: #1a1209;
  background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-dark));
  border: 1.5px solid var(--gold-light);
  box-shadow: 0 0 10px rgba(201,168,76,0.3);
}
.btn-apply.needs-apply {
  color: #ffcccc;
  background: linear-gradient(180deg, #cc3333, #881111);
  border-color: #ff4444;
  animation: pulseApply 1s ease-in-out infinite;
}
@keyframes pulseApply {
  0%,100% { box-shadow: 0 0 6px 2px rgba(220,50,50,0.9); }
  50%     { box-shadow: 0 0 18px 4px rgba(220,50,50,0.3); }
}

/* Faction chooser */
.faction-grid {
  display: flex; gap: 10px; padding: 8px 8px 8px 35px;
  flex: 1; min-height: 0;
}
.faction-card {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 14px 10px;
  border: 1px solid var(--border); border-radius: 4px;
  background: rgba(0,0,0,0.3);
  cursor: pointer; transition: 0.2s;
  text-align: center; position: relative;
}
.faction-card:hover { border-color: var(--gold-dark); background: rgba(0,0,0,0.45); }
.faction-card.active {
  border-color: var(--gold);
  background: rgba(30,22,10,0.6);
  box-shadow: 0 0 14px rgba(201,168,76,0.18);
}
.faction-card.locked {
  filter: grayscale(0.8) brightness(0.55);
  cursor: not-allowed; pointer-events: none;
}
.faction-sigil {
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(201,168,76,0.2), rgba(20,10,5,0.8));
  border: 1px solid var(--gold-dark);
  color: var(--gold-light);
  font-family: 'Cinzel', serif; font-weight: 900;
}
.faction-name {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: var(--text); font-size: 0.95rem; letter-spacing: 1.5px;
  text-transform: uppercase;
}
.faction-card.active .faction-name { color: var(--gold-light); }
.faction-desc { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; font-style: italic; }
.faction-bonus {
  font-family: 'Cinzel', serif; font-size: 0.7rem;
  color: var(--gold); letter-spacing: 0.5px;
  padding: 4px 8px; border-radius: 2px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
}
.faction-units { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 2px; }
.faction-tag {
  font-family: 'Cinzel', serif; font-size: 0.58rem;
  color: var(--text-dim); letter-spacing: 0.8px;
  padding: 1px 5px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 2px;
}
.faction-current {
  position: absolute; top: -8px; right: -6px;
  font-family: 'Cinzel', serif; font-size: 0.6rem; font-weight: 700;
  color: #1a1209; background: var(--gold-light);
  padding: 3px 8px; border-radius: 2px;
  letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.faction-locked-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; pointer-events: none;
  background: rgba(0,0,0,0.45);
}
.faction-lock-icon {
  font-family: 'Cinzel', serif; font-size: 1.8rem;
  color: var(--gold-dark);
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.faction-lock-text {
  font-family: 'Cinzel', serif; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-dark);
}

/* ══════ INVENTORY ══════ */
.inv-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pane-inv { align-items: flex-start; }

/* Shared sizing: all cells are the same square */
.pane-inv {
  --i-gap: 4px;
  --i-col-w: clamp(150px, 26%, 220px);
  --i-cell: calc((var(--i-col-w) - var(--i-gap) * 2) / 3);
  gap: 10px;
  /* Don't fill the full inv-body — size to content so the row height
     is driven by backpack's last cell. Combined with align-self:stretch
     on the other two columns, their bottoms land on the same line as
     backpack's bottom. Magic book inside .i-info uses position:absolute
     bottom:14 which now sits on the real bottom of the shrunk panel. */
  flex: 0 0 auto;
}
.i-info-col { flex: 1 1 160px; min-width: 140px; display: flex; flex-direction: column; gap: 4px; align-self: stretch; }

.i-hero-col {
  display: flex; flex-direction: column; flex-shrink: 0;
  width: var(--i-col-w);
  gap: 8px;
  /* Parent .pane-inv uses `align-items: flex-start`, so by default this
     column stays at its natural (portrait + pockets) height. Stretch
     it to match backpack's row height so `margin-top: auto` on the
     Pockets block has room to push into. */
  align-self: stretch;
}
.i-hero-col-top, .i-hero-col-bottom { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
/* Pin the Pockets block (gilt-rule + label + cells) to the bottom of
   the hero column. Note: the actual override happens in lobby.html's
   `.v1 .i-hero-col-bottom` rule (higher specificity than base.css). */
.i-hero-col-bottom { margin-top: auto; }
.i-hero-frame {
  position: relative;
  width: var(--i-col-w);
  height: var(--i-col-w);
  min-height: var(--i-col-w);
  flex-shrink: 0;
  background: rgba(0,0,0,0.3); overflow: hidden;
  border: 1px solid var(--border); border-radius: 3px;
}
.i-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; z-index: 1; pointer-events: none;
}
.i-equip-overlay {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(3, var(--i-cell));
  grid-template-rows: repeat(3, var(--i-cell));
  gap: var(--i-gap); z-index: 2; padding: 0;
  justify-content: space-between; align-content: space-between;
}
.i-extra {
  display: grid;
  grid-template-columns: repeat(3, var(--i-cell));
  grid-auto-rows: var(--i-cell);
  gap: var(--i-gap);
  flex-shrink: 0;
}
.i-eq {
  width: var(--i-cell); height: var(--i-cell);
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--border); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.46rem; color: rgba(201,168,76,0.55);
  cursor: pointer; transition: 0.2s; font-family: 'Cinzel', serif;
  text-transform: uppercase; letter-spacing: 0.5px;
  position: relative; overflow: hidden;
  box-sizing: border-box;
}
.i-eq:hover { border-color: var(--gold-dark); background: rgba(30,20,8,0.6); }
.i-eq.has-item { border-color: var(--gold-dark); background: rgba(201,168,76,0.1); }

/* Backpack column: SAME cell size as everything else, 3×5 grid */
.i-backpack-col {
  display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0; width: var(--i-col-w);
  /* Match the other two columns' heights so all three bottoms align.
     Parent .pane-inv has align-items: flex-start, so without this the
     col stays at grid-content height while .i-info-col / .i-hero-col
     stretch past it. */
  align-self: stretch;
}
.i-backpack {
  display: grid;
  grid-template-columns: repeat(3, var(--i-cell));
  grid-auto-rows: var(--i-cell);
  gap: var(--i-gap);
  width: var(--i-col-w);
  flex-shrink: 0;
}
.i-slot {
  width: var(--i-cell); height: var(--i-cell);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(74,53,32,0.35); border-radius: 2px;
  cursor: pointer; transition: 0.2s;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}
.i-slot:hover { border-color: var(--gold-dark); background: rgba(92,61,30,0.15); }
.i-slot.has-item { border-color: rgba(140,120,80,0.6); background: rgba(40,30,15,0.55); }

.i-info-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
.i-info {
  flex: 1; min-width: 0;
  border: 1px solid var(--border); border-radius: 3px;
  background: rgba(0,0,0,0.3);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
  color: var(--text);
  overflow: hidden;
}
.i-hero-name {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: var(--gold-light); font-size: 0.9rem;
  text-align: center; letter-spacing: 1.5px;
}
.i-hero-sub {
  text-align: center; color: var(--text-dim);
  font-size: 0.68rem; font-family: 'Cinzel', serif;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.i-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 2px;
  border-bottom: 1px dashed rgba(90,60,30,0.3);
  font-family: 'Crimson Text', serif;
}
.i-stat:last-child { border-bottom: none; }
.i-stat-lbl { color: var(--text-dim); font-family: 'Cinzel', serif; font-size: 0.66rem; letter-spacing: 1.2px; text-transform: uppercase; }
.i-stat-val { color: var(--text-bright); font-weight: 700; font-family: 'Cinzel', serif; font-size: 0.85rem; }
.i-stat-bonus { color: var(--gold-light); font-size: 0.72rem; font-family: 'Cinzel', serif; font-weight: 700; margin-left: 5px; }

.i-footer {
  display: flex; justify-content: space-between;
  padding-top: 3px; font-family: 'Cinzel', serif;
  font-size: 0.62rem; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-dim);
}
.i-footer .sv { color: var(--gold); font-weight: 700; }

/* ══════ NEWS / CHAT ══════ */
.news-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.news-scroll { flex: 1; overflow-y: auto; padding-right: 10px; }
.news-scroll::-webkit-scrollbar { width: 8px; }
.news-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.35); }
.news-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--ds-wood-light), var(--ds-wood-dark)); border-radius: 4px; }

.news-item {
  padding: 12px 0; border-bottom: 1px solid rgba(90,60,30,0.2);
  display: flex; flex-direction: column; gap: 4px;
}
.news-item:first-child { padding-top: 4px; }
.news-item:last-child { border-bottom: none; }
.news-date {
  font-family: 'Cinzel', serif; font-size: 0.68rem; font-weight: 700;
  color: var(--gold-dark); letter-spacing: 1.8px; text-transform: uppercase;
}
.news-head {
  font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700;
  color: var(--text-bright); letter-spacing: 1.2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  margin: 1px 0;
}
.news-desc {
  font-family: 'Crimson Text', serif; font-size: 0.92rem;
  color: var(--text-dim); line-height: 1.4;
  /* Truncate long descriptions in the panel — full content opens in the
     news modal on click. Three lines ≈ one "card" height. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-item-clickable {
  cursor: pointer;
  transition: background 120ms ease;
}
.news-item-clickable:hover {
  background: linear-gradient(90deg, rgba(201,168,76,0.06) 0%, rgba(201,168,76,0) 100%);
}

/* ═══════════ NEWS MODAL ═══════════
   Full-article reader. Lives on <body>, opened from the News panel.
   Same dark-wood + gold-filigree theme as the rest of the lobby. */
.news-modal-bg {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,6,3,0.72);
  backdrop-filter: blur(2px);
}
.news-modal-bg.open { display: flex; }
.news-modal {
  width: 640px; max-width: 92vw; max-height: 80vh;
  display: flex; flex-direction: column; position: relative;
  padding: 30px 36px 26px;
  background: linear-gradient(180deg, rgba(60,42,24,0.98) 0%, rgba(26,18,9,0.98) 100%);
  border: 2px solid var(--ds-wood, #5c3d1e);
  box-shadow: inset 0 0 0 1px var(--gold-dark, #c9a84c),
              0 0 40px rgba(0,0,0,0.85);
  color: var(--text, #e0d8c0);
}
.news-modal-close {
  position: absolute; top: 8px; right: 14px;
  background: transparent; border: none; padding: 4px 10px;
  color: var(--text-dim, #8a7a52);
  font-family: 'Cinzel', serif; font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}
.news-modal-close:hover { color: var(--gold-light, #e8c96d); }
.news-modal-date {
  font-family: 'Cinzel', serif; font-size: 0.7rem; font-weight: 700;
  color: var(--gold-dark, #c9a84c); letter-spacing: 2px;
  text-transform: uppercase;
}
.news-modal-head {
  font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 700;
  color: var(--gold-light, #e8c96d); letter-spacing: 1.5px;
  margin: 6px 0 18px;
  text-shadow: 0 0 16px rgba(201,168,76,0.4), 0 2px 4px rgba(0,0,0,0.8);
  border-bottom: 1px solid rgba(201,168,76,0.28);
  padding-bottom: 10px;
}
.news-modal-body {
  overflow-y: auto; flex: 1 1 auto; min-height: 0;
  font-family: 'Crimson Text', serif; font-size: 1rem; line-height: 1.55;
  color: var(--text, #e0d8c0);
  padding-right: 6px;
}
.news-modal-body p { margin: 0 0 14px; }
.news-modal-body p:last-child { margin-bottom: 0; }
.news-modal-body::-webkit-scrollbar { width: 6px; }
.news-modal-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.35); }
.news-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ds-wood-light, #7a5228), var(--ds-wood-dark, #3a2510));
  border-radius: 3px;
}

/* chat */
.chat-wrap { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding-left: 57px; }
.chat-msgs { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding-right: 8px; }
.chat-msgs::-webkit-scrollbar { width: 6px; }
.chat-msgs::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.chat-msgs::-webkit-scrollbar-thumb { background: var(--ds-wood); border-radius: 3px; }

.chat-msg {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 8px;
  border-radius: 2px;
  background: rgba(0,0,0,0.25);
  border-left: 2px solid rgba(90,60,30,0.4);
}
.chat-msg-head { display: flex; align-items: baseline; gap: 6px; }
.chat-name {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.5px;
  color: var(--text);
}
.chat-time {
  font-family: 'Cinzel', serif; font-size: 0.58rem;
  color: var(--text-dim); letter-spacing: 1px;
}
.chat-text {
  font-family: 'Crimson Text', serif; font-size: 0.88rem;
  color: var(--text); line-height: 1.35;
}
.chat-msg.king {
  background: linear-gradient(90deg, rgba(201,168,76,0.18), rgba(201,168,76,0.02));
  border-left-color: var(--gold-light);
  box-shadow: inset 0 0 14px rgba(201,168,76,0.1);
}
.chat-msg.king .chat-name {
  color: var(--gold-light);
  text-shadow: 0 0 6px rgba(232,201,109,0.5);
}
.chat-msg.king .chat-name::before {
  content: '♛ '; color: var(--gold-light);
}
.chat-msg.king .chat-text { color: var(--gold-light); }

.chat-input-row { display: flex; gap: 6px; flex-shrink: 0; align-items: stretch; }
.chat-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border); border-radius: 3px;
  color: var(--text); font-family: 'Crimson Text', serif; font-size: 0.88rem;
  padding: 7px 10px; outline: none;
  font-style: italic;
}
.chat-input::placeholder { color: var(--text-dim); font-style: italic; }
.chat-input:focus { border-color: var(--gold-dark); background: rgba(20,14,7,0.6); }
.chat-send {
  font-family: 'Cinzel', serif; font-size: 0.72rem; font-weight: 700;
  color: var(--gold-light);
  background: linear-gradient(180deg, var(--ds-wood-light), var(--ds-wood-dark));
  border: 1px solid var(--gold-dark); border-radius: 3px;
  padding: 5px 16px; cursor: pointer;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.chat-send:hover { border-color: var(--gold-light); color: var(--gold-light); }

/* annotations */
.anno {
  max-width: 1736px; margin: 20px auto 60px; padding: 0 20px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.anno-card {
  background: rgba(20,14,7,0.7);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: 3px;
  padding: 12px 14px;
}
.anno-card h4 {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: var(--gold); font-size: 0.7rem; letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 6px;
}
.anno-card ul { list-style: none; }
.anno-card li {
  font-size: 0.82rem; color: var(--text-dim);
  padding: 2px 0 2px 12px; position: relative;
  line-height: 1.35;
}
.anno-card li::before { content: '◆'; position: absolute; left: 0; top: 1px; color: var(--gold-dark); font-size: 0.55rem; }
.anno-card li strong { color: var(--text); font-weight: 600; }