/* ============================================================
   STYLE.CSS — Dark fantasy theme
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0d0d1a;
  --bg2:        #13132a;
  --bg3:        #1a1a35;
  --border:     #2a2a55;
  --gold:       #c9a84c;
  --gold-light: #e8c96d;
  --gold-dark:  #8a6f2e;
  --text:       #e0d8c0;
  --text-dim:   #8a8470;
  --red:        #cc4444;
  --green:      #44aa66;
  --blue:       #4488cc;
  --purple:     #8855cc;
  --knights:    #c9a84c;
  --necromancers: #8b5cf6;
  --radius:     8px;
  --shadow:     0 4px 24px rgba(0,0,0,0.6);
}

html, body {
  height: 100%;
  font-family: var(--ds-font-body, 'Crimson Text'), Georgia, serif;
  background: var(--ds-bg-dark);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(60,40,20,0.3) 0%, transparent 60%),
    url('images/ui/tex_leather.png');
  background-repeat: repeat;
  background-size: auto, 300px;
  color: var(--ds-text);
  overflow: hidden;
}

/* ── Screens ──────────────────────────────────────────────── */
.screen { display: none; width: 100vw; height: 100vh; overflow-y: auto; }
.screen.active { display: flex; flex-direction: column; }

/* ── HUD (top bar — two rows) ─────────────────────────────── */
#hud {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(58,37,16,0.92) 0%, rgba(30,22,12,0.95) 100%),
    url('images/ui/tex_wood_dark.png') repeat center / 200px;
  border-bottom: 2px solid var(--ds-gold-dark, #8a6f2e);
  box-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 1px 0 rgba(201,168,76,0.15) inset;
}
#hud.visible { display: flex; }

/* Centered content wrapper (matches page max-width) */
.hud-inner {
  max-width: 880px; width: 100%; margin: 0 auto;
}

/* Row 1: identity + resources + gold */
.hud-top-row {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 16px;
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
.hud-identity { display: flex; align-items: center; gap: 10px; }
.hud-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; background: rgba(201,168,76,0.08);
  box-shadow: 0 0 8px rgba(201,168,76,0.2);
}
#hud-name  { font-size: 0.95rem; color: var(--gold); font-weight: bold; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
#hud-level { font-size: 0.8rem; color: var(--text-dim); }
#hud-gold  { margin-left: auto; font-size: 0.9rem; color: var(--gold-light); white-space: nowrap; }
#hud-xpbar { width: 100px; height: 5px; background: rgba(0,0,0,0.4); border-radius: 3px; overflow: hidden; border: 1px solid rgba(201,168,76,0.15); }
#hud-xpfill{ height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); transition: width 0.4s; }
/* Resource items */
.hud-res { font-size: 0.82rem; color: var(--text-dim); padding: 2px 6px; border-radius: 4px; }
.hud-res b { color: var(--text); }
.hud-res-gold b { color: var(--gold-light); }

/* Row 2: navigation tabs */
.hud-nav-row {
  display: flex; align-items: stretch; gap: 0;
  padding: 0 16px;
}
.hud-nav-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); font-family: var(--ds-font-heading, 'Cinzel'), Georgia, serif;
  font-size: 0.75rem; padding: 6px 12px 5px; text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.hud-nav-btn:hover { color: var(--gold); background: rgba(201,168,76,0.05); }
.hud-nav-btn.active { color: var(--gold-light); border-bottom-color: var(--gold); background: rgba(201,168,76,0.08); }
.hud-nav-sep { color: var(--border); font-size: 0.9rem; user-select: none; display: flex; align-items: center; opacity: 0.3; }
.hud-nav-spacer { flex: 1; }
.hud-nav-logout { color: var(--text-dim); opacity: 0.7; transition: color 0.15s, opacity 0.15s; }
.hud-nav-logout:hover { color: #e06060; opacity: 1; }
.hud-online { font-size: 0.75rem; color: var(--text-dim); display: flex; align-items: center; gap: 2px; margin-right: 8px; white-space: nowrap; }

/* ── Welcome / Auth screen ────────────────────────────────── */
#screen-auth {
  align-items: center; justify-content: center;
  background: #000;
  position: relative;
  overflow: auto; /* scroll if window is smaller than the 1736×1157 stage */
}
/* Legacy class from the old full-viewport bg — kept in case anything else
   references it. The login page now uses .auth-stage-bg inside .auth-stage
   (defined inline in index.html), so this class is effectively unused. */
.auth-bg-video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  object-fit: cover;
  z-index: 0;
}
#screen-auth::before {
  content: none;
}
.auth-box {
  position: relative; z-index: 1;
  background: none;
  border: 32px solid transparent;
  border-image: url('images/ui/frame_ornate.png') 130 / 32px / 0 stretch;
  padding: 20px 28px 12px;
  width: 420px;
  box-shadow: none;
  flex-shrink: 0;
  overflow: hidden;
  transform: translateX(19px);
}
/* Parchment on ::before — inset: 0 covers the full box, z-index: -1
   places the pseudo-element BEHIND the border-image so the frame renders
   on top; transparent cut-outs in the frame PNG reveal parchment. */
.auth-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(180,165,130,0.93) 0%, rgba(160,145,110,0.95) 100%),
    url('images/ui/tex_parchment.png') repeat center / 300px;
  z-index: -1;
  pointer-events: none;
}
.auth-box > * { position: relative; z-index: 1; }
/* Inner safe area is now 494×494 px — room for comfortable sizing */
.auth-box h1 {
  text-align: center; color: var(--ds-wood-dark, #3a2510); font-size: 1.3rem; margin-bottom: 5px;
  font-family: var(--ds-font-heading);
  text-shadow: none;
  letter-spacing: 0.03em;
}
.auth-box .subtitle {
  text-align: center; color: #6a5a40; font-size: 0.72rem; margin-bottom: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
/* Auth tabs inside frame */
.auth-box .auth-tabs {
  border-color: var(--ds-wood);
  background: var(--ds-wood-dark);
  border-radius: 6px;
  margin-bottom: 14px;
}
.auth-box .auth-tab { background: transparent; padding: 8px; font-size: 0.78rem; color: var(--ds-parchment); font-family: var(--ds-font-heading); text-transform: uppercase; letter-spacing: 0.04em; }
.auth-box .auth-tab.active { background: var(--ds-wood-light); color: var(--ds-gold-light); }
/* Form fields */
.auth-box .form-group { margin-bottom: 12px; }
.auth-box .form-group label { font-size: 0.75rem; margin-bottom: 4px; color: #5a4a30; font-family: var(--ds-font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.auth-box .form-group input {
  padding: 10px 14px; font-size: 0.9rem;
  background: var(--ds-bg-inset); border: 2px solid var(--ds-wood-dark); border-radius: 6px;
  color: var(--ds-text); box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
  font-family: var(--ds-font-body);
}
.auth-box .form-group input:focus {
  border-color: var(--ds-gold-dark); background: var(--ds-bg-inset); outline: none;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 6px rgba(201,168,76,0.2);
}
/* Faction cards */
.auth-box .faction-grid { gap: 10px; margin-bottom: 14px; }
.auth-box .faction-card { padding: 10px; background: var(--ds-bg-inset); border: 2px solid var(--ds-wood-dark); border-radius: 6px; }
.auth-box .faction-card.selected { border-color: var(--ds-gold); box-shadow: 0 0 8px rgba(201,168,76,0.3); }
.auth-box .faction-card .faction-emoji { font-size: 1.4rem; margin-bottom: 3px; }
.auth-box .faction-card .faction-name { font-size: 0.75rem; color: var(--ds-text); }
.auth-box .faction-card .faction-desc { display: none; }
.auth-box .btn-primary {
  padding: 12px; font-size: 0.9rem; margin-top: 4px;
  background: linear-gradient(180deg, rgba(122,82,48,0.75) 0%, rgba(92,61,30,0.85) 50%, rgba(58,37,16,0.95) 100%),
    url('images/ui/tex_wood_dark.png') repeat center / 120px;
  border: 2px solid var(--ds-gold-dark); color: var(--ds-gold-light);
  font-family: var(--ds-font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6); border-radius: 4px; cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
}
/* ── Register mode ─────────── */
.auth-box.register-active .faction-grid { gap: 8px; margin-bottom: 10px; }
.auth-box.register-active .faction-card { padding: 8px; }
.auth-box.register-active .faction-card .faction-emoji { font-size: 1.2rem; margin-bottom: 2px; }
.auth-box.register-active .faction-card .faction-name { font-size: 0.7rem; }
/* Global auth-tabs base */
.auth-tabs { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.auth-tab { flex: 1; padding: 10px; text-align: center; cursor: pointer; color: var(--text-dim);
            transition: background 0.2s, color 0.2s; font-size: 0.9rem; }
.auth-tab.active { background: var(--gold-dark); color: var(--gold-light); }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 6px; }
.form-group input, .form-group select {
  width: 100%; padding: 10px 12px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 0.95rem; font-family: inherit;
}
.form-group input:focus, .form-group select:focus {
  outline: none; border-color: var(--gold);
}
.form-error { color: var(--red); font-size: 0.82rem; margin-top: 8px; min-height: 20px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--ds-radius-sm); cursor: pointer;
  font-family: var(--ds-font-heading); font-weight: 600;
  font-size: 0.85rem; border: 2px solid var(--ds-wood-light);
  transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  background:
    linear-gradient(180deg, rgba(122,82,48,0.75) 0%, rgba(92,61,30,0.85) 50%, rgba(58,37,16,0.95) 100%),
    url('images/ui/tex_wood_dark.png') repeat center / 120px;
  color: var(--ds-gold-light);
  box-shadow: var(--ds-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn:hover {
  border-color: var(--ds-gold); transform: translateY(-1px);
  box-shadow: var(--ds-shadow-md), 0 0 8px rgba(201,168,76,0.3);
}
.btn-primary {
  border-color: var(--ds-gold);
  box-shadow: var(--ds-shadow-sm), 0 0 8px rgba(201,168,76,0.3);
  width: 100%;
}
.btn-primary:hover { border-color: var(--ds-gold-light); box-shadow: var(--ds-shadow-md), 0 0 12px rgba(201,168,76,0.4); }
.btn-secondary {
  background: transparent; border: 1px solid var(--ds-gold-dark); color: var(--ds-gold);
  box-shadow: none; text-shadow: none;
}
.btn-secondary:hover { background: rgba(201,168,76,0.08); border-color: var(--ds-gold); box-shadow: 0 0 8px rgba(201,168,76,0.2); }
.btn-danger {
  background: linear-gradient(180deg, #6b2020 0%, #4a1515 50%, #3a1010 100%);
  border-color: var(--ds-red); color: var(--ds-red-light);
}
.btn-danger:hover { border-color: var(--ds-red-light); background: linear-gradient(180deg, #7a2525 0%, #5a1a1a 50%, #4a1515 100%); box-shadow: var(--ds-shadow-md), 0 0 8px rgba(204,68,68,0.3); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; pointer-events: none; }

/* ── Faction selection ────────────────────────────────────── */
.faction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.faction-card {
  background: var(--bg3); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 16px 12px; text-align: center;
  cursor: pointer; transition: all 0.2s;
}
.faction-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.faction-card.selected { border-color: var(--gold); background: rgba(201,168,76,0.1); }
.faction-card .faction-emoji { font-size: 2rem; margin-bottom: 8px; }
.faction-card .faction-name { font-size: 0.9rem; color: var(--gold); font-weight: bold; }
.faction-card .faction-desc { font-size: 0.72rem; color: var(--text-dim); margin-top: 6px; }

/* ── Map screen (two-column layout) ──────────────────────── */
#screen-map {
  padding-top: 76px;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.main-layout {
  display: flex; flex: 1; overflow: hidden;
  width: 100%; max-width: 880px;
}
.main-left {
  flex-shrink: 0; width: 500px;
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 20px;
  border-right: 2px solid rgba(92,61,30,0.4);
  overflow-y: auto;
}
.main-right {
  flex: 1; padding: 16px 18px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  animation: fadeInPanel 0.25s ease;
}
@keyframes fadeInPanel {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Location header in right panel */
.main-loc-header {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
.main-loc-icon {
  font-size: 1.8rem; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(92,61,30,0.15);
  border: 1px solid var(--ds-wood);
  border-radius: 8px;
}
.main-loc-header h2 { color: var(--ds-gold-light); font-size: 1.15rem; font-family: var(--ds-font-heading); }
.main-loc-coords { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }

.map-title { color: var(--ds-gold-light); font-family: var(--ds-font-heading); font-size: 0.85rem; margin-bottom: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.map-grid {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 90px);
  grid-template-rows: repeat(5, 90px); gap: 3px;
  background: url('images/map.jpg?v=2') center center / cover no-repeat;
  overflow: hidden;
  border: 3px solid var(--ds-wood);
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 0 0 1px var(--ds-wood-dark);
}
.map-cell {
  border-radius: 3px; border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; position: relative; overflow: hidden;
  transition: all 0.2s; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 0.7rem; text-align: center; padding: 4px;
  background: rgba(0,0,0,0.18);
}
.map-cell .cell-type-icon {
  font-size: 1.1rem; margin-bottom: 2px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}
.map-cell .cell-indicators {
  position: absolute; bottom: 3px; right: 3px;
  display: flex; gap: 2px; font-size: 0.55rem;
}
.map-cell .cell-indicators .ind-hunt { color: #ff6b6b; }
.map-cell .cell-indicators .ind-ent  { color: var(--gold); }

.map-cell.type-city    { background: rgba(50,30,5,0.45);  border-color: rgba(201,168,76,0.5); }
.map-cell.type-town    { background: rgba(5,25,5,0.38);   border-color: rgba(42,100,42,0.45); }
.map-cell.type-village { background: rgba(5,20,5,0.30);   border-color: rgba(26,68,26,0.35); }
.map-cell.type-wild    { background: rgba(0,0,0,0.15);    border-color: rgba(60,55,40,0.20); }
.map-cell:hover        { border-color: var(--gold); transform: scale(1.06); z-index: 1; background: rgba(0,0,0,0.5); box-shadow: 0 0 12px rgba(201,168,76,0.3); }
.map-cell.current      {
  border-color: var(--gold); border-width: 2px;
  box-shadow: 0 0 16px rgba(201,168,76,0.5), 0 0 32px rgba(201,168,76,0.15);
  animation: currentPulse 2s ease-in-out infinite;
}
@keyframes currentPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(201,168,76,0.5); }
  50%      { box-shadow: 0 0 24px rgba(201,168,76,0.8), 0 0 40px rgba(201,168,76,0.2); }
}
.map-cell .cell-name   { color: #fff; font-size: 0.58rem; line-height: 1.2; font-weight: 600;
                         text-shadow: 0 1px 4px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.9); }
.map-cell .cell-player { position: absolute; top: 3px; right: 4px; font-size: 0.6rem;
                         color: var(--gold); text-shadow: 0 1px 3px rgba(0,0,0,0.9); }

/* ── Location screen ──────────────────────────────────────── */
#screen-location { padding-top: 76px; }
.location-header {
  background: var(--bg2); border-bottom: 1px solid var(--border);
  padding: 20px 24px; display: flex; align-items: center; gap: 16px;
}
.location-header h2 { color: var(--gold); font-size: 1.3rem; }
.location-type-badge {
  padding: 3px 10px; border-radius: 12px; font-size: 0.75rem;
  background: var(--bg3); border: 1px solid var(--border);
}
.location-body { padding: 20px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Hunt panel */
.hunt-panel {
  position: relative;
  background:
    linear-gradient(135deg, rgba(180,165,130,0.93) 0%, rgba(160,145,110,0.95) 100%),
    url('images/ui/tex_parchment.png') repeat center / 300px;
  border: 3px solid var(--ds-wood);
  border-radius: 4px;
  padding: 14px 16px;
  box-shadow: var(--ds-shadow-md), 0 0 0 1px var(--ds-wood-dark);
  color: var(--ds-parchment-text);
}
.hunt-panel h3 { color: var(--ds-wood-dark, #3a2510); margin-bottom: 10px; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; font-family: var(--ds-font-heading); }
.hunt-ready { color: #2a7744; font-size: 0.85rem; margin-bottom: 10px; font-weight: 600; }
.hunt-cooldown { color: #6a5a40; font-size: 0.85rem; margin-bottom: 10px; }

/* Enterprise list */
.enterprises-panel {
  position: relative;
  background:
    linear-gradient(135deg, rgba(180,165,130,0.93) 0%, rgba(160,145,110,0.95) 100%),
    url('images/ui/tex_parchment.png') repeat center / 300px;
  border: 3px solid var(--ds-wood);
  border-radius: 4px;
  padding: 14px 16px;
  box-shadow: var(--ds-shadow-md), 0 0 0 1px var(--ds-wood-dark);
  color: var(--ds-parchment-text);
}
.enterprises-panel h3 { color: var(--ds-wood-dark, #3a2510); margin-bottom: 10px; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; font-family: var(--ds-font-heading); }
.enterprise-item {
  background: rgba(0,0,0,0.08); border: 1px solid rgba(92,61,30,0.3);
  border-radius: 6px; padding: 10px 12px; margin-bottom: 8px;
}
.enterprise-item:last-child { margin-bottom: 0; }
/* header row */
.enterprise-item .ent-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.enterprise-item .ent-emoji  { font-size: 1.4rem; flex-shrink: 0; margin-top: 1px; }
.enterprise-item .ent-title-col { flex: 1; min-width: 0; }
.enterprise-item .ent-name  { font-size: 0.9rem; color: var(--text); display: block; }
/* meta row: pay | workers | balance */
.enterprise-item .ent-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 2px; flex-wrap: wrap;
}
.enterprise-item .ent-pay  { font-size: 0.75rem; color: var(--gold); }
.enterprise-item .ent-workers-inline { display: flex; align-items: center; gap: 3px; }
.enterprise-item .ent-workers-count  { font-size: 0.75rem; color: var(--text-dim); }
.enterprise-item .ent-workers-count.full { color: var(--red); }
.enterprise-item .ent-workers-label  { font-size: 0.7rem; color: var(--border); }
.enterprise-item .ent-balance {
  margin-left: auto; font-size: 0.7rem; color: var(--text-dim);
  background: rgba(201,168,76,0.08); border-radius: 3px; padding: 1px 5px;
}
/* worker bar */
.slots-bar { height: 3px; background: var(--bg); border-radius: 2px; overflow: hidden; margin-bottom: 7px; }
.ent-bar   { margin-top: 4px; }
.slots-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.3s; }
.slots-fill.full { background: var(--red); }
/* stock row */
.ent-stock-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; font-size: 0.75rem; color: var(--text-dim);
  background: var(--bg); border-radius: 4px; padding: 4px 7px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.ent-stock-label { display: flex; align-items: center; gap: 5px; }
.ent-buy-row { display: flex; gap: 4px; }
.ent-buy-row .btn { padding: 2px 7px; font-size: 0.72rem; }
.ent-action-btn   { width: 100%; }

/* ── Army builder ─────────────────────────────────────────── */
#screen-army { padding-top: 76px; }
.army-builder {
  max-width: 880px; margin: 0 auto; padding: 24px;
  display: flex; flex-direction: column;
}
.army-builder h2 { color: var(--gold); text-align: center; margin-bottom: 6px; }
.army-budget { text-align: center; color: var(--text-dim); font-size: 0.9rem; margin-bottom: 20px; }
.army-budget span { color: var(--gold-light); font-weight: bold; }
.army-points-free { color: #6ecf6e; font-size: 0.85rem; margin-left: 6px; }

/* ── Difficulty Selector ── */
.difficulty-selector {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 16px; padding: 0 10px;
}
.diff-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 14px; border: 2px solid var(--wood-dark); border-radius: 6px;
  background: rgba(40,25,10,0.6); color: var(--text-dim); cursor: pointer;
  font-family: var(--font-body); font-size: 0.8rem; transition: all 0.15s;
  min-width: 80px;
}
.diff-btn:hover { border-color: var(--gold-dark); background: rgba(60,40,15,0.7); }
.diff-btn.selected { border-color: var(--gold-light); background: rgba(80,55,20,0.8); color: var(--text-light); box-shadow: 0 0 8px rgba(201,168,76,0.3); }
.diff-emoji { font-size: 1.3rem; }
.diff-label { font-weight: 600; font-size: 0.82rem; }
.diff-reward { font-size: 0.7rem; color: var(--gold-dark); }
.diff-btn.diff-super_easy { --accent: #6ecf6e; }
.diff-btn.diff-easy { --accent: #8bc34a; }
.diff-btn.diff-medium { --accent: #ffa726; }
.diff-btn.diff-hard { --accent: #ef5350; }
.diff-btn.diff-extreme { --accent: #b71c1c; }
.diff-btn.selected.diff-super_easy { border-color: #6ecf6e; }
.diff-btn.selected.diff-easy { border-color: #8bc34a; }
.diff-btn.selected.diff-medium { border-color: #ffa726; }
.diff-btn.selected.diff-hard { border-color: #ef5350; }
.diff-btn.selected.diff-extreme { border-color: #b71c1c; box-shadow: 0 0 12px rgba(183,28,28,0.4); }
.coop-tag { font-size: 0.6rem; background: var(--gold-dark); color: #1a1209; padding: 1px 4px; border-radius: 3px; font-weight: 700; vertical-align: middle; }

.army-builder-actions {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  margin-bottom: 20px;
}
.army-btn-start {
  padding: 14px 48px; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.08em;
  max-width: 340px;
}
.army-btn-apply {
  padding: 10px 24px; font-size: 0.9rem; font-weight: 600;
}
.army-btn-reset {
  padding: 10px 20px; font-size: 0.85rem;
}
#army-applied-status {
  text-align: center; margin: -12px 0 10px;
}
.army-applied-label {
  font-size: 0.8rem; color: var(--ds-green, #6ecf6e);
  font-family: 'Crimson Text', serif; letter-spacing: 0.04em;
}

#army-units {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

.unit-card {
  width: 196px;
  display: flex; flex-direction: column;
  background: linear-gradient(135deg, #2a1f0e 0%, #1a1408 50%, #2a1f0e 100%);
  border: 2px solid #8b6914;
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(0,0,0,0.6), inset 0 0 20px rgba(139,105,20,0.1);
  font-size: 13px;
  color: #e0d8c0;
  overflow: hidden;
}
.unit-card .uip-portrait img {
  max-width: 150px; max-height: 170px;
  object-fit: contain;
  object-position: center bottom;
}
.unit-card .uip-stat {
  padding: 4px 8px; gap: 4px; white-space: nowrap;
}
.unit-card .uip-abilities {
  flex: 1; min-height: 52px;
}
.unit-card .unit-counter {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 8px;
  border-top: 1px solid rgba(139,105,20,0.3);
  background: rgba(0,0,0,0.2);
}
.unit-card .unit-cost {
  text-align: center; font-size: 0.75rem; color: #8a6f2e;
  padding: 0 8px 8px;
}
.unit-count-display { width: 40px; text-align: center; font-size: 1rem; color: var(--gold); }
.count-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg3); color: var(--text); cursor: pointer; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.count-btn:hover { border-color: var(--gold); color: var(--gold); }
.unit-card.locked { opacity: 0.35; }
.unit-card.locked .count-btn { pointer-events: none; }

/* ── Combat screen ────────────────────────────────────────── */
#screen-combat {
  padding-top: 0; flex-direction: row;
  background-color: #0d0a05;
}

/* ── Combat loading overlay ────────────────────────────────── */
.combat-loading {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #0d0a05;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.combat-loading-inner {
  text-align: center;
  width: 320px;
}
.combat-loading-title {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: #c9a84c;
  margin-bottom: 20px;
  letter-spacing: 2px;
}
.combat-loading-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(92,61,30,0.4);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(154,107,58,0.4);
}
.combat-loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #9a6b3a, #c9a84c, #e8c96d);
  border-radius: 3px;
  transition: width 0.15s ease;
}
.combat-loading-text {
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  color: #a09070;
  margin-top: 12px;
}

/* ── Combat sidebar (left, for log) ────────────────────────── */
.combat-sidebar {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1a150a 0%, #0d0a05 100%);
  border-right: 2px solid rgba(201,168,76,0.2);
  z-index: 20;
}

/* ── Combat main: scale-wrapper fills available space ──────── */
.combat-main-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background-color: #0d0a05;
  min-width: 0;
}
/* ── Combat main area (FIXED size, scaled to fit) ─────────── */
.combat-main {
  width: 1200px;
  height: 700px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  /* Background zoomed into clear ground — per-map bgSize/bgPos set via JS */
  background: url('images/battle_background_desert1.jpg') center 25% / 130% no-repeat;
  background-color: #1a150a;
}
/* Combat audio toggle — floating top-right corner. Defaults to 🔇
   (muted), both music and SFX off until the user clicks it. */
.combat-audio-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 180;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
  background: linear-gradient(180deg, rgba(90,60,30,0.85), rgba(30,20,10,0.9));
  border: 1px solid var(--ds-wood, #5c3d1e);
  color: var(--gold-light, #e8c96d);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,210,140,0.15), 0 0 8px rgba(0,0,0,0.55);
  transition: filter 0.15s, border-color 0.15s;
}
.combat-audio-btn:hover { filter: brightness(1.2); border-color: var(--gold-dark, #c9a84c); }
.combat-audio-btn.muted { color: var(--text-dim, #8a7a52); opacity: 0.82; }

/* Animated video background for maps that have video */
.combat-bg-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  display: none; /* shown via JS when map has video */
  pointer-events: none;
}

/* Formation bar (pre-battle) — styled as HoMM title banner */
.coop-formation-panel{
  position: absolute; z-index: 25;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 28px;
  background: linear-gradient(180deg, rgba(42,31,10,0.95) 0%, rgba(26,21,10,0.95) 100%);
  border: 2px solid #c9a84c;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.coop-formation-timer{
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: #e8c96d;
  letter-spacing: 2px;
}
.coop-formation-timer.urgent{ color: #d04040; animation: coop-timer-pulse 0.8s ease-in-out infinite alternate; }
@keyframes coop-timer-pulse { from { opacity: 0.7; } to { opacity: 1; } }
.coop-ally-status{
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  color: #c9b890;
  font-style: italic;
}
.coop-ally-status.ready{ color: #4ac96d; font-style: normal; }
#btn-coop-ready.ready-done{ opacity: 0.6; cursor: default; }
/* Formation bar — holds only the Start Battle button, centered on
   the battlefield during troop placement. Split hint moved to
   .formation-title up top. */
.formation-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  position: absolute; z-index: 25;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: transparent; border: none; padding: 0;
  /* No CSS transition — the tips panel positions itself based on the
     button's rect at the moment it opens. A mid-transition position
     would leave the panel offset from the final button location. */
}
/* Lifted when the Helpful Tips panel is visible beneath the button —
   tips panel is tall (3 items ~= 400px), so we push the button almost
   to the top of the viewport. Panel anchors directly below the button,
   which then sits entirely above the bottom formation roster with
   clear vertical separation. Once tips dismiss (Got it / outside-
   click / don't-show-again), we drop the class and the button snaps
   back to center. */
.formation-bar.tips-up {
  /* Button center ~50px from top → button+400px panel ends near the
     midline, far above the roster row at the bottom. */
  top: 50px;
  transform: translateX(-50%);
}

/* Start Battle button — bigger HoMM-style plate with crossed-sword
   glyphs flanking the label and a pulsing gold glow that reads as
   a call-to-action without being obnoxious. Swords are painted via
   ::before / ::after so the button's own text stays one line. */
.formation-bar .btn-primary {
  position: relative;
  padding: 11px 52px;
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1a1000;
  text-shadow: 0 1px 0 rgba(255,230,170,0.35);
  background: linear-gradient(180deg, #e8c96d 0%, #c9a84c 45%, #8a6f2e 100%);
  border: 2px solid #e8c96d;
  border-radius: 4px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,230,170,0.55),
    inset 0 -2px 0 rgba(0,0,0,0.25),
    0 4px 14px rgba(0,0,0,0.7),
    0 0 0 3px rgba(42,26,10,0.8);
  animation: start-battle-glow 1.6s ease-in-out infinite;
  transition: filter 160ms ease, transform 160ms ease;
}
.formation-bar .btn-primary::before,
.formation-bar .btn-primary::after {
  content: '⚔';
  position: absolute;
  top: 50%;
  font-size: 1.15rem;
  color: #2a1a08;
  text-shadow: 0 1px 0 rgba(255,230,170,0.45);
  transform: translateY(-55%);
  pointer-events: none;
}
.formation-bar .btn-primary::before { left: 14px; }
.formation-bar .btn-primary::after  { right: 14px; transform: translateY(-55%) scaleX(-1); }
.formation-bar .btn-primary:hover {
  filter: brightness(1.08);
  transform: scale(1.03);
}
.formation-bar .btn-primary:active {
  filter: brightness(0.92);
  transform: scale(0.98);
}
/* Pulse — contrast bumped so the glow is clearly visible at rest
   without crossing into "neon" territory. 0 → 32px gold halo. */
@keyframes start-battle-glow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,230,170,0.55),
      inset 0 -2px 0 rgba(0,0,0,0.25),
      0 4px 14px rgba(0,0,0,0.7),
      0 0 0 3px rgba(42,26,10,0.8),
      0 0 0 6px rgba(232,201,109,0);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,230,170,0.75),
      inset 0 -2px 0 rgba(0,0,0,0.25),
      0 4px 18px rgba(0,0,0,0.75),
      0 0 0 3px rgba(42,26,10,0.8),
      0 0 32px 6px rgba(255,220,130,0.95);
  }
}

/* Split-hint row inside formation-title (third line under main + hint). */
.formation-title-split {
  margin-top: 2px;
  color: #a89872;
  font-style: italic;
}
.formation-bar .btn-primary {
  background: linear-gradient(180deg, #c9a84c, #8a6f2e);
  border: 2px solid #e8c96d;
  color: #1a1000;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

/* Formation mode title — centered above battlefield */
.formation-title {
  display: none; /* shown via JS in formation phase */
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,14,5,0.88) 0%, rgba(10,7,2,0.92) 100%);
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 6px;
  padding: 10px 32px 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
.formation-title-main {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ds-gold-light);
  text-shadow: 0 0 16px rgba(201,168,76,0.6), 0 2px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}
.formation-title-hint {
  font-family: 'Crimson Text', serif;
  font-size: 0.92rem;
  color: #c8b890;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  margin-top: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Combat log — thin banner at the TOP showing last 2 messages (HoMM style) */
.combat-log {
  display: none; /* Removed: duplicate of sidebar combat log panel */
}
.combat-log p { margin: 0; line-height: 1.5; }
.combat-log .log-dmg    { color: var(--red); }
.combat-log .log-player { color: #7ab8f5; }
.combat-log .log-enemy  { color: #e07060; }
.combat-log .log-event  { color: var(--gold); }

/* ── Combat log panel — scrollable side panel ────────────────── */
.combat-log-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(18,14,8,0.95) 0%, rgba(10,8,4,0.98) 100%);
  font-family: 'Georgia', 'Times New Roman', serif;
  overflow: hidden;
}

/* Coop chat panel — takes the lower half of the sidebar in coop matches.
   Hidden by default (display:none in HTML), shown via JS when _coopState is set. */
.coop-chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(12,10,6,0.95) 0%, rgba(8,6,4,0.98) 100%);
  border-top: 2px solid rgba(201,168,76,0.35);
  font-family: 'Georgia', 'Times New Roman', serif;
  overflow: hidden;
  max-height: 50%;
}
.coop-chat-header {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(42,31,10,0.95) 0%, rgba(26,21,10,0.95) 100%);
  border-bottom: 1px solid rgba(201,168,76,0.25);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.coop-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #e0d8c0;
}
.coop-chat-body .cc-msg { margin: 2px 0; }
.coop-chat-body .cc-msg .cc-from { color: #c9a84c; font-weight: 600; margin-right: 4px; }
.coop-chat-input-row {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(10,8,4,0.98);
  border-top: 1px solid rgba(201,168,76,0.2);
}
.coop-chat-input {
  flex: 1;
  background: rgba(30,22,12,0.7);
  border: 1px solid rgba(201,168,76,0.3);
  color: #e0d8c0;
  padding: 4px 8px;
  font-family: 'Crimson Text', serif;
  font-size: 0.85rem;
  border-radius: 2px;
  outline: none;
}
.coop-chat-input:focus { border-color: rgba(201,168,76,0.7); }
.coop-chat-send {
  background: linear-gradient(180deg, rgba(122,82,48,0.95), rgba(58,37,16,0.98));
  border: 1px solid rgba(201,168,76,0.5);
  color: #e8c96d;
  padding: 4px 12px;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
}
.coop-chat-send:hover { background: linear-gradient(180deg, rgba(142,102,58,0.95), rgba(78,48,22,0.98)); }
.coop-chat-send:active { transform: translateY(1px); }
.combat-log-header {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(42,31,10,0.95) 0%, rgba(26,21,10,0.95) 100%);
  border-bottom: 1px solid rgba(201,168,76,0.25);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.combat-log-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  font-size: 0.76rem;
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.3) transparent;
}
.combat-log-body::-webkit-scrollbar { width: 5px; }
.combat-log-body::-webkit-scrollbar-track { background: transparent; }
.combat-log-body::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 3px; }
.combat-log-body::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.5); }

.combat-log-entry {
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text-dim);
}
.combat-log-entry:last-child { border-bottom: none; }
.combat-log-entry.log-player-action { color: #d4b44a; }
.combat-log-entry.log-enemy-action  { color: #c45a4a; }
.combat-log-entry .log-dmg   { color: var(--red); font-weight: bold; }
.combat-log-entry .log-kills { color: #e07060; }
.combat-log-entry .log-heal  { color: #5cbf5c; }
.combat-log-entry .log-special { color: var(--gold); }
.combat-log-entry.log-round-separator {
  text-align: center;
  color: rgba(201,168,76,0.5);
  font-size: 0.7rem;
  border-bottom: 1px solid rgba(201,168,76,0.12);
  padding: 3px 0;
  margin: 2px 0;
}

/* ── Right-side vertical action buttons — HoMM3 wood panel ──── */
.combat-side-actions {
  position: absolute;
  right: 14px;
  top: 30%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 20;
  background: linear-gradient(180deg, #3a2a14 0%, #2a1c0a 50%, #1e1408 100%);
  border: 2px solid #5a4820;
  border-radius: 8px;
  padding: 8px 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 16px rgba(0,0,0,0.7);
}
.combat-side-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 72px;
  height: 56px;
  border: 1px solid #6a5830;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(60,45,20,0.8) 0%, rgba(30,20,8,0.9) 100%);
  color: var(--gold-light);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.combat-side-btn::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
  border-radius: 3px 3px 0 0;
  pointer-events: none;
}
.combat-btn-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
  flex-shrink: 0;
}
.combat-side-btn span {
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: rgba(224,216,192,0.6);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  text-transform: uppercase;
}
.combat-side-btn:hover {
  border-color: #c9a84c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 10px rgba(201,168,76,0.35);
  background: linear-gradient(180deg, rgba(80,60,25,0.9) 0%, rgba(40,28,10,0.95) 100%);
}
.combat-side-btn:hover .combat-btn-icon {
  filter: drop-shadow(0 0 4px rgba(201,168,76,0.5)) drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}
.combat-side-btn:hover span {
  color: rgba(232,201,109,0.9);
}
.combat-side-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.combat-side-btn--danger { }
.combat-side-btn--danger span { color: rgba(200,140,120,0.6); }
.combat-side-btn--danger:hover span { color: rgba(230,160,140,0.9); }
.combat-side-btn--danger:hover {
  border-color: #c06050;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 10px rgba(200,60,40,0.3);
}
.combat-side-btn--magic { }
.combat-side-btn--magic span { color: rgba(170,150,230,0.6); }
.combat-side-btn--magic:hover span { color: rgba(190,170,255,0.9); }
.combat-side-btn--magic:hover {
  border-color: #8060e0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 12px rgba(130,90,255,0.4);
}

/* ── Spell popup ── */
.spell-popup {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #1a1030 0%, #0d0820 100%);
  border: 2px solid #5b3cc4; border-radius: 8px;
  padding: 12px; min-width: 280px; max-width: 340px; z-index: 200;
  box-shadow: 0 0 30px rgba(139,92,246,0.4);
}
.spell-popup-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; font-weight: bold; color: #c4b5fd; font-size: 14px;
}
.spell-mana-display { font-size: 12px; color: #818cf8; }
.spell-popup-close {
  background: none; border: none; color: #a78bfa; font-size: 18px; cursor: pointer;
}
.spell-popup-close:hover { color: #fff; }
.spell-list { display: flex; flex-direction: column; gap: 6px; }
.spell-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.3);
  border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.spell-item:hover { background: rgba(139,92,246,0.25); border-color: #8b6cf6; }
.spell-item.disabled { opacity: 0.4; cursor: not-allowed; }
.spell-item .spell-emoji { font-size: 20px; }
.spell-item .spell-info { flex: 1; }
.spell-item .spell-name { font-size: 13px; font-weight: bold; color: #e0d5ff; }
.spell-item .spell-desc { font-size: 11px; color: #a78bfa; }
.spell-item .spell-cost { font-size: 11px; color: #818cf8; white-space: nowrap; }

/* ── Turn banner (top center of battlefield) ──── */
.turn-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
}
.turn-banner.visible { opacity: 1; }

/* Outer decorative frame */
.turn-banner-label {
  position: relative;
  padding: 5px 28px 5px 28px;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  white-space: nowrap;
  /* Stone/parchment bg */
  background:
    linear-gradient(180deg,
      rgba(8,6,3,0.97) 0%,
      rgba(20,14,6,0.97) 50%,
      rgba(8,6,3,0.97) 100%);
  border-radius: 3px;
  /* decorative corner notches via clip-path */
}
/* Top/bottom gold lines */
.turn-banner-label::before {
  content: '';
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(201,168,76,0.4);
  border-bottom: 1px solid rgba(201,168,76,0.4);
  pointer-events: none;
}

.turn-banner.player-turn .turn-banner-label {
  color: #e8d898;
  border: 2px solid rgba(80,160,255,0.85);
  box-shadow:
    0 0 8px rgba(40,120,240,0.6),
    0 0 20px rgba(60,140,255,0.4),
    0 0 40px rgba(40,100,220,0.2),
    inset 0 1px 0 rgba(120,180,255,0.1);
  animation: playerTurnPulse 1.8s ease-in-out infinite;
}
.turn-banner.enemy-turn .turn-banner-label {
  color: #e8c8b8;
  border: 2px solid rgba(240,60,40,0.85);
  box-shadow:
    0 0 8px rgba(240,40,30,0.6),
    0 0 20px rgba(255,50,40,0.4),
    0 0 40px rgba(220,20,10,0.2),
    inset 0 1px 0 rgba(255,100,60,0.1);
  animation: enemyTurnPulse 1.8s ease-in-out infinite;
}

.turn-banner-unit {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 16px;
  background: rgba(8,5,2,0.92);
  border: 1px solid rgba(201,168,76,0.25);
  border-top: none;
  border-radius: 0 0 4px 4px;
  color: #c9a84c;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}
.turn-banner-portrait {
  width: 26px;
  height: 26px;
  object-fit: cover;
  object-position: center top;
  border-radius: 3px;
  border: 1px solid rgba(201,168,76,0.45);
  box-shadow: 0 0 4px rgba(0,0,0,0.6);
  flex-shrink: 0;
}
.turn-banner-emoji {
  font-size: 0.85rem;
  line-height: 1;
}

/* ── Active unit info overlay (bottom-left, legacy — hidden) ──── */
.combat-unit-info {
  display: none;
  position: absolute;
  left: 16px;
  bottom: 90px;
  padding: 8px 14px;
  background: rgba(4, 4, 14, 0.92);
  border: 2px solid rgba(201,168,76,0.3);
  border-radius: 6px;
  color: var(--gold);
  font-size: 0.9rem;
  z-index: 20;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.combat-unit-info .turn-indicator {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 14px;
  border-radius: 4px;
  margin-right: 10px;
  vertical-align: middle;
}
.combat-unit-info .turn-indicator.player-turn {
  background: rgba(40,120,220,0.5);
  border: 2px solid rgba(100,180,255,0.8);
  color: #fff;
  box-shadow: 0 0 12px rgba(80,160,255,0.5), inset 0 0 8px rgba(100,180,255,0.15);
  animation: playerTurnPulse 1.5s ease-in-out infinite;
}
.combat-unit-info .turn-indicator.enemy-turn {
  background: rgba(200,50,50,0.5);
  border: 2px solid rgba(255,100,100,0.8);
  color: #fff;
  box-shadow: 0 0 12px rgba(255,80,80,0.5), inset 0 0 8px rgba(255,100,100,0.15);
  animation: enemyTurnPulse 1.5s ease-in-out infinite;
}
@keyframes playerTurnPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(40,120,240,0.6), 0 0 20px rgba(60,140,255,0.4),
                0 0 40px rgba(40,100,220,0.2), inset 0 1px 0 rgba(120,180,255,0.1);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 14px rgba(60,150,255,0.8), 0 0 30px rgba(80,160,255,0.5),
                0 0 55px rgba(40,120,240,0.3), inset 0 1px 0 rgba(120,180,255,0.15);
    transform: scale(1.04);
  }
}
@keyframes enemyTurnPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(240,40,30,0.6), 0 0 20px rgba(255,50,40,0.4),
                0 0 40px rgba(220,20,10,0.2), inset 0 1px 0 rgba(255,100,60,0.1);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 14px rgba(255,60,40,0.8), 0 0 30px rgba(255,50,40,0.5),
                0 0 55px rgba(240,20,10,0.3), inset 0 1px 0 rgba(255,100,60,0.15);
    transform: scale(1.04);
  }
}
/* Whole info panel glow per side */
.combat-unit-info.info-player-turn {
  border-color: rgba(80,160,255,0.6);
  box-shadow: 0 0 16px rgba(80,160,255,0.3);
}
.combat-unit-info.info-enemy-turn {
  border-color: rgba(255,80,80,0.6);
  box-shadow: 0 0 16px rgba(255,80,80,0.3);
}

/* ── Bottom strip: turn-order portrait bar ───────────────────── */
.combat-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  overflow: visible;
  background: none;
  pointer-events: none;
}
/* ATB / Turn-order bar — HoMM-style initiative bar at bottom center */
.atb-bar {
  position: relative;
  display: flex; gap: 5px; padding: 8px 20px 10px;
  background: transparent;
  overflow-x: auto; overflow-y: visible; flex-shrink: 0;
  align-items: flex-end;
  justify-content: center;
  min-height: 96px;
  margin-top: -80px;
  padding-top: 70px;
}
/* Dark background only behind the cards, not the glow overflow area */
.atb-bar::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 96px;
  background: linear-gradient(180deg, #2e2008 0%, #120d04 100%);
  border-top: 2px solid #4a3810;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.7);
  z-index: -1;
  pointer-events: none;
}
.atb-unit {
  position: relative; flex-shrink: 0;
  width: 72px; height: 83px;
  border-radius: 5px; overflow: hidden;
  border: 2px solid #5a4820;
  pointer-events: auto;
  background-color: #1a1208;
  background-size: cover;
  background-position: center;
  cursor: default;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), border-color 0.15s, box-shadow 0.15s;
  display: flex; flex-direction: column;
  box-shadow: 0 3px 10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}
.atb-unit::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 40%);
  pointer-events: none; z-index: 1;
}
.atb-unit.player {
  border-color: rgba(80,140,220,0.8);
  background-color: #0d1828;
  box-shadow: 0 3px 10px rgba(0,0,0,0.7), 0 0 8px rgba(60,120,200,0.2);
}
.atb-unit.enemy {
  border-color: rgba(200,60,60,0.8);
  background-color: #281010;
  box-shadow: 0 3px 10px rgba(0,0,0,0.7), 0 0 8px rgba(200,60,60,0.2);
}
.atb-unit.active {
  border-width: 3px;
  transform: translateY(-12px) scale(1.18);
  z-index: 5;
  overflow: visible;
}
/* Player active — blue glow */
.atb-unit.active.player {
  border-color: #3080dd;
  box-shadow: 0 0 0 2px rgba(30,100,220,0.6),
              0 0 22px rgba(40,120,240,1),
              0 0 44px rgba(20,80,220,0.7),
              0 0 70px rgba(0,60,200,0.4),
              0 4px 14px rgba(0,0,0,0.7);
  animation: atb-active-glow-player 1.5s ease-in-out infinite alternate;
}
/* Coop: ally units in ATB bar — green border + green active glow. */
.atb-unit.player.owner-ally {
  border-color: rgba(80,200,100,0.8);
  background-color: #0e281a;
  box-shadow: 0 3px 10px rgba(0,0,0,0.7), 0 0 8px rgba(60,200,90,0.2);
}
.atb-unit.active.player.owner-ally {
  border-color: #30c860;
  box-shadow: 0 0 0 2px rgba(30,200,80,0.6),
              0 0 22px rgba(60,230,100,1),
              0 0 44px rgba(30,200,80,0.7),
              0 0 70px rgba(10,170,60,0.4),
              0 4px 14px rgba(0,0,0,0.7);
  animation: atb-active-glow-ally 1.5s ease-in-out infinite alternate;
}
@keyframes atb-active-glow-ally {
  from {
    box-shadow: 0 0 0 2px rgba(30,200,80,0.6),
                0 0 22px rgba(60,230,100,1),
                0 0 44px rgba(30,200,80,0.7),
                0 0 70px rgba(10,170,60,0.4),
                0 4px 14px rgba(0,0,0,0.7);
  }
  to {
    box-shadow: 0 0 0 3px rgba(60,230,110,0.8),
                0 0 30px rgba(100,255,140,1),
                0 0 60px rgba(60,230,100,0.9),
                0 0 90px rgba(30,200,80,0.6),
                0 4px 14px rgba(0,0,0,0.7);
  }
}
/* Enemy active — red glow */
.atb-unit.active.enemy {
  border-color: #cc3030;
  box-shadow: 0 0 0 2px rgba(200,30,30,0.6),
              0 0 22px rgba(220,40,40,1),
              0 0 44px rgba(200,20,20,0.7),
              0 0 70px rgba(180,0,0,0.4),
              0 4px 14px rgba(0,0,0,0.7);
  animation: atb-active-glow-enemy 1.5s ease-in-out infinite alternate;
}
@keyframes atb-active-glow-player {
  from {
    box-shadow: 0 0 0 2px rgba(30,100,220,0.6),
                0 0 22px rgba(40,120,240,1),
                0 0 44px rgba(20,80,220,0.7),
                0 0 70px rgba(0,60,200,0.4),
                0 4px 14px rgba(0,0,0,0.7);
  }
  to {
    box-shadow: 0 0 0 3px rgba(50,130,250,0.8),
                0 0 30px rgba(60,140,255,1),
                0 0 55px rgba(30,100,240,0.8),
                0 0 90px rgba(0,70,220,0.5),
                0 4px 14px rgba(0,0,0,0.7);
  }
}
@keyframes atb-active-glow-enemy {
  from {
    box-shadow: 0 0 0 2px rgba(200,30,30,0.6),
                0 0 22px rgba(220,40,40,1),
                0 0 44px rgba(200,20,20,0.7),
                0 0 70px rgba(180,0,0,0.4),
                0 4px 14px rgba(0,0,0,0.7);
  }
  to {
    box-shadow: 0 0 0 3px rgba(240,50,50,0.8),
                0 0 30px rgba(240,50,50,1),
                0 0 55px rgba(220,30,30,0.8),
                0 0 90px rgba(200,0,0,0.5),
                0 4px 14px rgba(0,0,0,0.7);
  }
}
.atb-portrait {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
}
.atb-img {
  width: 100%; flex: 1;
  object-fit: cover; object-position: center 10%;
  display: block; min-height: 0;
  image-rendering: pixelated;
}
.atb-img-portrait {
  object-fit: cover;
  object-position: center top;
  image-rendering: auto;
}
.atb-count {
  position: absolute; bottom: 18px; right: 3px;
  font-size: 0.85rem; font-weight: 700; line-height: 1;
  font-family: 'Cinzel', serif;
  color: #fff; text-shadow: 0 0 6px rgba(0,0,0,1), 0 1px 3px rgba(0,0,0,1);
  background: rgba(0,0,0,0.7);
  padding: 1px 5px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.12);
  z-index: 2;
}
.atb-name {
  text-align: center; font-size: 0.6rem; font-weight: 600; line-height: 1.2;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.02em;
  color: rgba(230,215,175,0.95); padding: 3px 3px 4px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(10,7,2,0.9) 100%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid rgba(201,168,76,0.2);
  z-index: 2;
}
/* Phase separator in ATB bar */
.atb-separator {
  display: flex; align-items: center; justify-content: center;
  width: 18px; flex-shrink: 0;
  color: rgba(201,168,76,0.4); font-size: 0.7rem;
  border-left: 1px dashed rgba(201,168,76,0.25);
  border-right: 1px dashed rgba(201,168,76,0.25);
  margin: 0 1px;
  align-self: stretch;
}
/* Waiting / future units */
.atb-unit.waiting { opacity: 0.5; filter: brightness(0.8); }
.atb-unit.future  { opacity: 0.35; filter: brightness(0.7) saturate(0.7); }
/* Disabled combat side button (Wait unavailable) */
.combat-side-btn--disabled {
  opacity: 0.35 !important;
  pointer-events: none;
  filter: grayscale(0.7);
  cursor: not-allowed;
}

/* ── Top-down perspective with preserve-3d for upright sprites ──
   Grid rotates 40° around top edge. preserve-3d lets unit tokens
   counter-rotate with rotateX(-40deg) to stand perpendicular to
   the camera — classic HOMM billboard-sprite style.              */
.combat-grid-wrap {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
  overflow: visible; padding: 0 8px 0;
  margin-top: -8px;
  perspective: 1800px;
  perspective-origin: 50% 60%;
  position: relative;
  z-index: 1; /* above video background */
}
.combat-grid {
  /* HEX: absolute positioning, not CSS grid */
  display: block;
  position: relative;
  width: 1007px;
  height: 562px;
  transform: rotateX(50deg) scale(1.8);
  transform-origin: bottom center;
  transform-style: preserve-3d;
  background: none;
  border-radius: 0;
  padding: 0;
  pointer-events: none;         /* cells don't catch events — overlay does */
}
/* Cells: absolutely positioned hexagons via clip-path */
.grid-cell {
  transform-style: flat;
  position: absolute;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(0,0,0,0.08);
  transition: background 0.12s;
  overflow: visible;
  pointer-events: none;         /* overlay handles all pointer events */
}
.grid-cell:hover { background: rgba(92,61,30,0.30); }
/* Perf/UX 2026-04-24: bumped opacity 30 → 50, added inner glow so the
   "can move here" / "can attack" cells read at a glance instead of
   blending into the ground. */
.grid-cell.highlight {
  background: rgba(90,210,130,0.45) !important;
  box-shadow: inset 0 0 10px rgba(120,255,160,0.35);
}
.grid-cell.attack-range {
  background: rgba(230,80,80,0.42) !important;
  box-shadow: inset 0 0 10px rgba(255,110,110,0.35);
}
/* Contested cells: I can move/attack here AND an enemy threatens here.
   Without a distinct style the green .highlight with !important hides
   the red .enemy-preview, so the player can't see where it's unsafe to
   stop. Diagonal green/red stripes preserve both readings at a glance —
   striped pattern reads as "danger" in most UIs (hazard tape). The
   amber inset shadow adds a warning halo. */
.grid-cell.highlight.enemy-preview,
.grid-cell.attack-range.enemy-preview {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(230,80,80,0.55)  0px, rgba(230,80,80,0.55)  8px,
      rgba(90,210,130,0.50) 8px, rgba(90,210,130,0.50) 16px
    ) !important;
  box-shadow:
    inset 0 0 12px rgba(255,170,60,0.55),
    0 0 6px rgba(255,120,60,0.35);
}
.grid-cell.active-cell { background: rgba(201,168,76,0.45); }
/* Team-tinted active cell so the current turn is instantly readable. */
.grid-cell.active-cell.active-host  { background: rgba(40,120,240,0.32); }
.grid-cell.active-cell.active-ally  { background: rgba(60,220,100,0.32); }
.grid-cell.active-cell.active-enemy { background: rgba(220,40,40,0.30); }
.grid-cell.deploy-zone { background: rgba(68,136,204,0.18); }
.grid-cell.hero-target { background: rgba(136,85,204,0.28); }
.grid-cell.enemy-preview { background: rgba(204,68,68,0.15); }
/* SVG hex grid line overlay */
.hex-grid-lines {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 1;
}
.hex-grid-lines polygon {
  fill: none;
  stroke: var(--grid-line-color, rgba(92,75,40,0.45));
  stroke-width: 1;
}
/* Overlay: no hex clip needed */
.combat-overlay { clip-path: none; }
/* Tokens counter-rotate to stand perpendicular to camera (billboard) */
.unit-token, .hero-token {
  transform: rotateX(-50deg);
  transform-origin: bottom center;
}

.token-emoji { display: block; }

/* ── Floating damage numbers (Heroes 3 style) ──────────────── */
.floating-damage {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translateX(-50%);
  animation: floatDamageUp 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 700;
  font-size: 28px;
  white-space: nowrap;
  color: #ff4422;
  letter-spacing: 0.03em;
  text-shadow:
    -1px -1px 0 #1a0800, 1px -1px 0 #1a0800,
    -1px  1px 0 #1a0800, 1px  1px 0 #1a0800,
     0   -2px 0 #1a0800, 0    2px 0 #1a0800,
    -2px  0   0 #1a0800, 2px  0   0 #1a0800,
     0    0  10px rgba(255, 60, 0, 0.6),
     0    0  20px rgba(200, 0, 0, 0.3);
}
.floating-damage.heal {
  color: #44ff88;
  text-shadow:
    -1px -1px 0 #001a00, 1px -1px 0 #001a00,
    -1px  1px 0 #001a00, 1px  1px 0 #001a00,
     0    0  10px rgba(0, 220, 80, 0.7),
     0    0  20px rgba(0, 180, 60, 0.4);
}
.floating-damage.miss {
  color: #aaaaaa;
  font-size: 18px;
  font-style: italic;
  letter-spacing: 0.1em;
  text-shadow: -1px -1px 0 #000, 1px 1px 0 #000, 0 0 8px rgba(150,150,150,0.5);
}
.floating-damage.killed {
  font-size: 22px;
  color: #ffaa00;
  letter-spacing: 0.05em;
  animation: floatKilledUp 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  text-shadow:
    -1px -1px 0 #1a0800, 1px -1px 0 #1a0800,
    -1px  1px 0 #1a0800, 1px  1px 0 #1a0800,
     0    0  10px rgba(255, 160, 0, 0.7),
     0    0  22px rgba(200, 80, 0, 0.4);
}
@keyframes floatKilledUp {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.7); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0px) scale(1.15); }
  40%  { opacity: 1; transform: translateX(-50%) translateY(-20px) scale(1.0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-80px) scale(0.85); }
}
@keyframes floatDamageUp {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.6); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.2); }
  35%  { opacity: 1; transform: translateX(-50%) translateY(-20px) scale(1.0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-110px) scale(0.8); }
}

/* ── Transparent click overlay ──────────────────────────────── */
/* Sits on top of the 3D grid, same plane, catches ALL pointer events.
   Single flat element → no 3D hit-testing gaps between cells. */
.combat-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 50;
  cursor: default;
  pointer-events: auto;         /* this IS the event target */
  transform: translateZ(1px);   /* push forward in 3D stacking context */
}

/* ── Right-click Unit Info Popup (HoMM3 style) ────────────── */
/* ── Auto-finish / surrender modal ─────────────────────────────────
   Click-activated modal offered to the winning player (hunt / coop host)
   or losing player (PvP) when one side has collapsed to ≤20% strength
   and the outcome is near-certain. Matches the lobby elixir modal
   aesthetic. */
.auto-finish-modal-wrap {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Crimson Text', serif;
}
.auto-finish-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
.auto-finish-modal {
  position: relative;
  min-width: 320px; max-width: 420px;
  padding: 20px 22px 18px;
  background: linear-gradient(180deg, #2a1e10 0%, #1a1209 100%);
  border: 2px solid #8a6f2e;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,168,76,0.15) inset;
  color: #e0d8c0;
  animation: afModalIn 0.18s ease-out;
}
@keyframes afModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.auto-finish-title {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  color: #e8c96d;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-align: center;
}
.auto-finish-body {
  font-size: 0.98rem;
  line-height: 1.45;
  color: #d0c6a8;
  margin-bottom: 18px;
  padding: 10px 0;
  border-top: 1px solid rgba(138, 111, 46, 0.3);
  border-bottom: 1px solid rgba(138, 111, 46, 0.3);
}
.auto-finish-body b { color: #e8c96d; }
.auto-finish-btns {
  display: flex; gap: 10px; justify-content: space-between;
}
.af-btn {
  flex: 1;
  padding: 10px 12px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #3a2a14 0%, #241810 100%);
  color: #e0d8c0;
  border: 1px solid #8a6f2e;
  border-radius: 3px;
  cursor: pointer;
  transition: filter 0.12s, transform 0.12s, box-shadow 0.2s;
}
.af-btn:hover  { filter: brightness(1.3); }
.af-btn:active { transform: translateY(1px); }
.af-btn.af-secondary { color: #c0b38c; }
.af-btn.af-win {
  color: #a8e0a0;
  border-color: #3f7a35;
  box-shadow: 0 0 0 1px rgba(80,180,100,0.25) inset;
  animation: afWinPulse 1.6s ease-in-out infinite;
}
@keyframes afWinPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(80,180,100,0.25) inset; }
  50%      { box-shadow: 0 0 12px rgba(80,180,100,0.55), 0 0 0 1px rgba(80,180,100,0.45) inset; }
}
.af-btn.af-surrender {
  color: #ffaaaa;
  border-color: #7a2a2a;
  box-shadow: 0 0 0 1px rgba(220,80,80,0.25) inset;
  animation: afSurrenderPulse 1.4s ease-in-out infinite;
}
@keyframes afSurrenderPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(220,80,80,0.25) inset; }
  50%      { box-shadow: 0 0 12px rgba(220,80,80,0.55), 0 0 0 1px rgba(220,80,80,0.5) inset; }
}

.unit-info-popup {
  position: fixed;
  z-index: 300;
  min-width: 240px;
  max-width: 300px;
  /* Stone texture bg */
  background:
    linear-gradient(180deg,
      rgba(32,20,8,0.99) 0%,
      rgba(20,13,5,0.99) 40%,
      rgba(26,17,7,0.99) 100%);
  /* Layered gold border */
  border: 2px solid #7a5c10;
  outline: 1px solid rgba(201,168,76,0.2);
  border-radius: 3px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.9),
    0 0 0 1px rgba(0,0,0,0.8),
    inset 0 0 40px rgba(100,60,0,0.08);
  padding: 0;
  font-size: 12px;
  color: #d8ceb0;
  pointer-events: none;
  /* Fade+scale in */
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  display: block;
  visibility: hidden;
}
.unit-info-popup.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
}

/* Decorative top line */
.unit-info-popup::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, #c9a84c 30%, #e8d070 50%, #c9a84c 70%, transparent 100%);
  pointer-events: none;
}

/* Gold header bar */
.uip-header {
  background: linear-gradient(180deg,
    rgba(80,55,12,0.9) 0%,
    rgba(55,38,8,0.9) 100%);
  padding: 8px 14px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(139,105,20,0.6);
  position: relative;
}
.uip-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #f0d878;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 10px rgba(200,160,40,0.3);
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.uip-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: #9a7e40;
  margin-top: 3px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Unit image area */
.uip-portrait {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  padding: 6px 0;
  background:
    radial-gradient(ellipse at center, rgba(40,28,8,0.6) 0%, rgba(0,0,0,0.5) 100%);
  border-bottom: 1px solid rgba(100,70,10,0.5);
  overflow: hidden;
  position: relative;
}
.uip-portrait img {
  max-width: 150px;
  max-height: 170px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8));
}
.uip-portrait img.uip-portrait-art {
  max-width: 170px;
  max-height: 180px;
  image-rendering: auto;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.9));
  border-radius: 2px;
}
.uip-portrait .uip-emoji {
  font-size: 56px;
  line-height: 1;
}

/* Stats grid */
.uip-stats {
  /* ONE flat grid, not six separate ones. Columns SHARED across all
     three rows → icons in column 1 are all at same X, labels in
     column 2 same X, values in column 3 same X; mirror pattern in
     cols 4-6 for the right column pair.
     - icon cols: 14px fixed
     - label cols: `max-content` = width of the widest label across
       all rows → "SPELL POWER" drives the column width, shorter
       labels just sit inside without ellipsis.
     - value cols: `max-content` = widest value (35-50) drives width.
     Row gap 2px for vertical breathing. */
  display: grid;
  grid-template-columns:
    14px max-content max-content
    14px max-content max-content;
  column-gap: 6px;
  row-gap: 2px;
  justify-content: space-between;  /* push the two column-triples to popup edges */
  align-items: center;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(100,70,10,0.35);
}
/* .uip-stat wrapper no longer exists — stats-html is now a flat list
   of icon/label/val spans directly inside .uip-stats, letting the
   parent grid control cross-row column alignment. */
.uip-stat-icon {
  width: 14px;
  text-align: center;
  font-size: 11px;
  flex-shrink: 0;
  opacity: 0.85;
}
.uip-stat-label {
  font-family: 'Cinzel', serif;
  color: #6a6050;
  font-size: 9px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}
.uip-stat-val {
  font-family: 'Cinzel', serif;
  color: #e8c860;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  /* Right-align inside the grid's last (1fr) column — every value
     ends at the same X relative to its cell's right edge. */
  text-align: right;
  text-shadow: 0 0 8px rgba(200,160,40,0.4);
}

/* Abilities section */
.uip-abilities {
  padding: 5px 12px 8px;
  border-top: 1px solid rgba(100,70,10,0.3);
}
.uip-abilities-title {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  color: #6a6050;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.uip-ability {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 11px;
  color: #b89840;
}

/* HP bar in popup */
.uip-hp-section {
  padding: 4px 12px 6px;
}
.uip-hp-bar {
  height: 5px;
  background: rgba(0,0,0,0.6);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(100,70,10,0.4);
}
.uip-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #2a8848, #48bb70);
  box-shadow: 0 0 4px rgba(60,200,100,0.4);
}
.uip-hp-fill.low {
  background: linear-gradient(90deg, #aa2222, #cc4422);
  box-shadow: 0 0 4px rgba(200,60,40,0.4);
}
.uip-hp-text {
  font-size: 10px;
  color: #6a6050;
  text-align: center;
  margin-top: 3px;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
}

/* ── Hero info popup — equipment grid + pockets ─────────────
   Extends .unit-info-popup when `.hero` class is added. Click-to-
   reveal hero sheet for any hero panel in combat (solo/coop/pvp). */
.unit-info-popup.hero {
  width: 260px;
  max-width: 260px;
}
.uip-hero-section {
  padding: 6px 12px 10px;
  border-top: 1px solid rgba(100,70,10,0.3);
}
.uip-hero-section-title {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  color: #6a6050;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 5px;
}
/* Grids — match the lobby-inventory look (3 × cell, 4px gap,
   centered). Cell size ~52px ≈ the lobby `--i-cell` on narrow
   viewports. Keeps hero popup visually consistent with "Equipped"
   panel the player sees in lobby inventory. */
.uip-hero-equip-grid,
.uip-hero-pockets-grid {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-auto-rows: 52px;
  gap: 4px;
  justify-content: center;
  padding: 4px 0;
}
/* Cell base — identical geometry to lobby .i-slot. Empty cells get
   a dashed border with a centered SLOT-NAME label; filled cells
   switch to a solid border with a subtle darker fill and the
   artifact image taking most of the cell. */
.uip-hero-cell,
.uip-hero-pocket {
  position: relative;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(74,53,32,0.35);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.uip-hero-cell.empty,
.uip-hero-pocket.empty {
  background: rgba(0,0,0,0.25);
  border-style: dashed;
  border-color: rgba(100,70,10,0.35);
}
.uip-hero-cell.filled {
  border-color: rgba(140,120,80,0.6);
  background: rgba(40,30,15,0.55);
}
.uip-hero-cell-slot {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: #6a6050;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}
.uip-hero-cell-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.uip-hero-cell-emoji {
  font-size: 18px;
  line-height: 1;
}
.uip-hero-cell-dur {
  position: absolute;
  bottom: 1px; right: 2px;
  font-family: 'Cinzel', serif;
  font-size: 8px;
  color: #e0d8c0;
  background: rgba(0,0,0,0.7);
  padding: 0 2px;
  border-radius: 1px;
  pointer-events: none;
}
.uip-hero-cell.broken {
  outline: 1px solid rgba(200,50,50,0.7);
  filter: grayscale(0.5) brightness(0.7);
}
.uip-hero-cell.broken::after {
  content: 'BROKEN';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 8px;
  color: #ff4040;
  background: rgba(0,0,0,0.55);
  letter-spacing: 0.1em;
  pointer-events: none;
}
/* Hover on a filled cell — subtle gold glow, cursor stays default
   (the whole popup is the primary affordance, not individual cells). */
.uip-hero-cell.filled:hover {
  border-color: #c9a84c;
  box-shadow: 0 0 5px rgba(201,168,76,0.45);
}

/* ── Combat tips panel — formation-phase "Helpful tips!" floater
   Anchored below the Start Battle / Ready button via JS positioning.
   Fixed + translateX(-50%) so it stays centred regardless of stage-fit
   transforms on small laptops. */
.combat-tips-panel {
  position: fixed;
  z-index: 9600;
  transform: translateX(-50%);
  width: 330px;
  max-width: 92vw;
  background: linear-gradient(180deg, #2a1f14 0%, #1a120a 100%);
  border: 1px solid #c9a84c;
  border-radius: 5px;
  padding: 14px 16px 12px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,220,140,0.25);
  color: #e0d8c0;
  font-family: 'Crimson Text', serif;
  font-size: 13px;
  line-height: 1.45;
  animation: combat-tips-in 0.22s ease-out;
}
@keyframes combat-tips-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.combat-tips-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8c96d;
  text-align: center;
  margin-bottom: 9px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}
.combat-tips-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.combat-tips-item {
  position: relative;
  padding: 7px 8px 7px 10px;
  margin-bottom: 4px;
  border-left: 2px solid rgba(100,70,20,0.6);
  background: rgba(0,0,0,0.25);
  border-radius: 2px;
}
.combat-tips-item.is-new {
  border-left-color: #ffd97a;
  background: rgba(201,168,76,0.1);
  animation: combat-tips-new-pulse 1.6s ease-in-out infinite;
}
@keyframes combat-tips-new-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,217,122,0.0); }
  50%     { box-shadow: 0 0 8px 1px rgba(255,217,122,0.45); }
}
.combat-tips-badge {
  display: inline-block;
  background: linear-gradient(180deg, #e8c96d 0%, #b88a2a 100%);
  color: #1a1209;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 9px;
  letter-spacing: 0.15em;
  padding: 1px 5px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.combat-tips-text {
  color: #e0d8c0;
}
.combat-tips-hide {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #a89776;
  cursor: pointer;
  user-select: none;
  margin-bottom: 10px;
}
.combat-tips-hide input {
  margin: 0;
  cursor: pointer;
}
.combat-tips-got-it {
  display: block;
  width: 100%;
  padding: 8px 0;
  background: linear-gradient(180deg, #5c3d1e 0%, #3a2510 100%);
  border: 1px solid #c9a84c;
  border-radius: 3px;
  color: #e8c96d;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,220,140,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  transition: background 0.12s, color 0.12s;
}
.combat-tips-got-it:hover {
  background: linear-gradient(180deg, #6d4a23 0%, #47301a 100%);
  color: #fff3d0;
}
.combat-tips-got-it:active {
  transform: translateY(1px);
}

/* ── Combat animations ───────────────────────────────────────── */
@keyframes combat-move {
  from { transform: translate(var(--move-dx,0px), var(--move-dy,0px)) rotateX(-50deg); }
  to   { transform: translate(0px, 0px) rotateX(-50deg); }
}
@keyframes combat-lunge {
  0%   { margin-left: 0px; margin-top: 0px; }
  35%  { margin-left: var(--lunge-dx, 0px); margin-top: var(--lunge-dy, 0px); }
  100% { margin-left: 0px; margin-top: 0px; }
}
@keyframes combat-recoil {
  0%   { margin-left: 0px; margin-top: 0px; }
  40%  { margin-left: var(--recoil-dx, 0px); margin-top: var(--recoil-dy, 0px); }
  100% { margin-left: 0px; margin-top: 0px; }
}

/* Projectile — sprite strip div that flies from source to target */
.hero-projectile {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 100;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: pixelated;
}
.hero-projectile.proj-lich {
  image-rendering: auto;
  mask-image: radial-gradient(ellipse 45% 45% at center, black 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 45% 45% at center, black 50%, transparent 100%);
}

/* Hero panel: positioned to the left of the top-left grid cells */
.hero-panel {
  position: absolute; z-index: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 0; padding: 0;
  background: none; border: none;
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.45));
  pointer-events: none;
}
/* Hero active — tight blue contour glow (host: player 1) */
.hero-panel.hero-active {
  filter: drop-shadow(0 0 1px rgba(40,120,240,0.9))
          drop-shadow(0 0 3px rgba(40,120,240,0.7));
  animation: heroContourPulse 0.9s ease-in-out infinite;
}
@keyframes heroContourPulse {
  0%, 100% {
    filter: drop-shadow(0 0 1px rgba(40,120,240,0.9))
            drop-shadow(0 0 3px rgba(40,120,240,0.7));
  }
  50% {
    filter: drop-shadow(0 0 2px rgba(60,140,255,1))
            drop-shadow(0 0 4px rgba(40,120,240,0.8));
  }
}
/* Hero active — green contour glow for player 2 (ally in coop) */
.hero-panel.hero-active-ally,
#hero-panel-ally.hero-active {
  filter: drop-shadow(0 0 1px rgba(60,220,90,0.9))
          drop-shadow(0 0 3px rgba(60,220,90,0.7));
  animation: heroContourPulseAlly 0.9s ease-in-out infinite;
}
@keyframes heroContourPulseAlly {
  0%, 100% {
    filter: drop-shadow(0 0 1px rgba(60,220,90,0.9))
            drop-shadow(0 0 3px rgba(60,220,90,0.7));
  }
  50% {
    filter: drop-shadow(0 0 2px rgba(100,255,120,1))
            drop-shadow(0 0 4px rgba(60,220,90,0.8));
  }
}
.hero-panel-avatar {
  font-size: 3rem; line-height: 1; cursor: default; user-select: none;
}
.hero-panel-img {
  width: 160px; height: 160px;
  object-fit: contain;
  pointer-events: none;
}
.hero-panel-sprite {
  pointer-events: none;
  transform-origin: bottom center;
  filter: brightness(1.1) contrast(1.15) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4));
}
.hero-panel-sprite[data-hero-faction="beastlands"][data-hero-anim="attack"] {
  background-image: url('images/sprites_sm/hero_beast_attack.png') !important;
  background-size: 20010px 138px !important;  /* 145 * 138 */
  animation: hero-sprite-attack 1.5s steps(145) 1 !important;
}
.hero-panel-sprite[data-hero-faction="necromancers"][data-hero-anim="attack"] {
  background-image: url('images/sprites_sm/hero_necro_attack.png') !important;
  background-size: 12282px 138px !important;  /* 89 * 138 */
  animation: hero-sprite-attack-necro 1.5s steps(89) 1 !important;
}
@keyframes hero-sprite-idle {
  from { background-position: 0 0; }
  to   { background-position: -20010px 0; } /* beastlands: 145 * 138 */
}
@keyframes hero-sprite-idle-necro {
  from { background-position: 0 0; }
  to   { background-position: -33396px 0; } /* necromancers: 242 * 138 */
}
@keyframes hero-sprite-attack {
  from { background-position: 0 0; }
  to   { background-position: -20010px 0; } /* beastlands: 145 * 138 */
}
@keyframes hero-sprite-attack-necro {
  from { background-position: 0 0; }
  to   { background-position: -12282px 0; } /* necromancers: 89 * 138 */
}
/* Hero projectile (axe for beastlands, ball for necro) */
.hero-ball {
  position: absolute;
  width: 60px; height: 60px;
  /* background-image set by JS per faction (necro ball / beast axe) */
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 20;
}
@keyframes hero-ball-anim {
  from { background-position: 0 0; }
  to   { background-position: -1980px 0; } /* necro ball strip: 33 frames × 60px */
}
/* Ground shadow under hero (elliptical, like unit tokens) */
.hero-panel::after {
  content: '';
  position: absolute;
  bottom: 9px; left: calc(50% - 18px);
  transform: translateX(-50%);
  width: 80px; height: 18px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}
/* Beastlands hero round shadow — shifted 7px right */
.hero-panel:has([data-hero-faction="beastlands"])::after {
  left: calc(50% - 11px);
}
/* Hero projection shadow — silhouette of the hero sprite */
.hero-shadow-sprite {
  position: absolute !important;
  bottom: 9px;
  left: 0;
  pointer-events: none;
  filter: brightness(0);
  opacity: 0.25;
  transform-origin: bottom center;
  transform: scaleY(0.4) skewX(-25deg);
  z-index: 1;
}
/* Beastlands hero shadow fine-tune — raise 6px, shift left 4px */
.hero-shadow-sprite[data-hero-faction="beastlands"] {
  bottom: 15px;
  left: -4px;
}
.hero-shadow-sprite[data-hero-faction="beastlands"][data-hero-anim="attack"] {
  background-image: url('images/sprites_sm/hero_beast_attack.png') !important;
  background-size: 20010px 138px !important;
  animation: hero-sprite-attack 1.5s steps(145) 1 !important;
}
.hero-shadow-sprite[data-hero-faction="necromancers"][data-hero-anim="attack"] {
  background-image: url('images/sprites_sm/hero_necro_attack.png') !important;
  background-size: 12282px 138px !important;
  animation: hero-sprite-attack-necro 1.5s steps(89) 1 !important;
}
.hero-panel-name {
  font-size: 0.85rem; font-weight: 700;
  color: var(--gold-light); text-align: center;
  width: 100%;
  margin-top: -4px;
  margin-left: -35px; /* compensate for character being left-of-center in sprite frame */
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,1);
  letter-spacing: 0.5px;
}
/* Coop / PvP team colours on the hero nickname so you can see at a
   glance which hero is whose. Host (team A / first player) → blue;
   ally / guest (team B / second player) → green. Single-player solo
   hunts keep the default gold. */
.hero-panel.hero-role-host .hero-panel-name { color: #6eb6ff; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(74,144,226,0.6); }
.hero-panel.hero-role-ally .hero-panel-name { color: #7ee98a; text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(80,200,100,0.6); }
/* YOU badge — tiny pill above the mine-hero panel. Visible in coop +
   PvP only (JS toggles .hero-mine on whichever panel is the local
   player's hero — see renderCombatGrid in hex-combat.js).
   Uses ::before because ::after is already used by .hero-panel for
   the ground shadow ellipse — overriding that one made the YOU text
   render TWICE (bar-sized shadow at the bottom PLUS a pill on top). */
.hero-panel.hero-mine::before {
  content: 'YOU';
  position: absolute;
  top: -6px;
  left: calc(50% - 35px);   /* same x-offset as .hero-panel-name — centers on the hero character, not the frame */
  transform: translateX(-50%);
  padding: 1px 5px;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem; font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  color: #1a1209;
  background: linear-gradient(180deg, #ffd97a, #c9a84c);
  border: 1px solid #8a6f2e;
  border-radius: 2px;
  text-align: center;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.35);
  pointer-events: none;
  z-index: 20;
}
.hero-panel-hint {
  display: none;
  font-size: 0.6rem; color: var(--text-dim); text-align: center; line-height: 1.2;
  min-height: 14px;
}
/* Grid cells — hex terrain tiles (position/size set by hex-combat.js) */
.grid-cell.player-zone:not(.highlight):not(.attack-range):not(.active-cell):not(.hero-target):not(.enemy-preview):not(.deploy-zone) { background: rgba(100,80,40,0.05); }
.grid-cell.enemy-zone:not(.highlight):not(.attack-range):not(.active-cell):not(.hero-target):not(.enemy-preview):not(.deploy-zone)  { background: rgba(180,150,90,0.03); }
.grid-cell.has-unit    { cursor: default; }
.grid-cell.will-attack {
  background: rgba(230,80,80,0.55) !important;
  border: 2px solid rgba(255,100,100,0.95) !important;
  box-shadow: inset 0 0 14px rgba(255,100,100,0.5), 0 0 10px rgba(255,80,80,0.5);
  cursor: crosshair;
  z-index: 6;
}

/* Hover target — cell the unit will move to / attack from. Was very
   subtle white outline; now a crisp gold contour so player immediately
   sees the chosen destination. */
.grid-cell.hover-target {
  background: rgba(255,215,100,0.30) !important;
  border: 2px solid rgba(255,215,100,1) !important;
  box-shadow: inset 0 0 16px rgba(255,215,100,0.5), 0 0 10px rgba(255,215,100,0.6);
  z-index: 6;
}
.grid-cell.splash-highlight {
  background: rgba(80, 255, 80, 0.25) !important;
  border-color: rgba(80, 255, 80, 0.7) !important;
  box-shadow: inset 0 0 12px rgba(80, 255, 80, 0.3), 0 0 8px rgba(80, 255, 80, 0.4);
  z-index: 5;
}

/* Formation deploy zone (cols 0-1) */
.grid-cell.deploy-zone{
  background: rgba(68,136,204,0.18);
}

/* PvP: badge marking the local player's own hero panel. Both team-A and
   team-B panels are visible on every client, so without an explicit
   "YOU" tag the user can mistake the opponent's hero for their own. */
.hero-panel.hero-mine::before{
  content: 'YOU';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  font-family: Cinzel, serif;
  font-size: 0.55rem;
  letter-spacing: 1px;
  color: #e8c96d;
  background: rgba(20,14,8,0.92);
  border: 1px solid #c9a84c;
  border-radius: 3px;
  z-index: 20;
  pointer-events: none;
}

/* Unit footprint preview (formation & movement hover for multi-cell units) */
.grid-cell.footprint-preview {
  background: rgba(255,255,255,0.35) !important;
}

/* Enemy movement preview on hover */
.grid-cell.enemy-preview{ background: rgba(255,90,90,0.15); }
/* Approach preview — cell where the active unit will stand before attacking
   an enemy that requires moving adjacent first. MOST important visual cue:
   "if I click this enemy, MY unit will stand HERE first". Made bold gold
   + pulsing so it's the brightest thing on the grid. */
.grid-cell.approach-preview {
  background: rgba(255,210,80,0.55) !important;
  border: 2px solid rgba(255,230,120,1) !important;
  box-shadow:
    inset 0 0 16px rgba(255,230,120,0.5),
    0 0 10px rgba(255,210,80,0.6);
  z-index: 5;
  animation: approach-preview-pulse 1.2s ease-in-out infinite;
}
@keyframes approach-preview-pulse {
  0%, 100% { filter: brightness(1.0); }
  50%      { filter: brightness(1.3); }
}
/* Approach cell that's ALSO threatened by an enemy — keep the pulsing
   gold fill but swap the border to warning red so "safe approach" vs
   "walk-in-and-eat-a-counter" is obvious at a glance. */
.grid-cell.approach-preview.enemy-preview {
  border: 2px solid rgba(255,80,80,1) !important;
  box-shadow:
    inset 0 0 16px rgba(255,140,60,0.6),
    0 0 10px rgba(255,80,80,0.7) !important;
}

/* Hero target mode */
.grid-cell.hero-target{ cursor: crosshair; }

/* Unit token — billboard sprite, no frame, anchored at cell bottom */
.unit-token {
  width: 80px; height: 56px; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  border: none; background: none;
  position: relative; user-select: none;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.45));
}
.unit-token.player-unit { background: none; border: none; }
.unit-token.enemy-unit  { background: none; border: none; }
/* Player active — bright blue contour */
.unit-token.player-unit.active-unit, .hero-token.active-unit {
  filter:
    drop-shadow(0 0 1px rgba(80,160,255,0.9))
    drop-shadow(0 0 3px rgba(40,120,255,0.7))
    drop-shadow(0 0 7px rgba(30,100,240,0.4))
    drop-shadow(0 0 12px rgba(20,80,220,0.2));
  animation: activeUnitPulsePlayer 1.2s ease-in-out infinite;
}
/* Coop: ally units — bright green contour (overrides player-unit blue) */
.unit-token.player-unit.owner-ally.active-unit, .hero-token.owner-ally.active-unit {
  filter:
    drop-shadow(0 0 1px rgba(120,240,140,0.9))
    drop-shadow(0 0 3px rgba(80,220,100,0.7))
    drop-shadow(0 0 7px rgba(50,200,80,0.4))
    drop-shadow(0 0 12px rgba(30,180,60,0.2));
  animation: activeUnitPulseAlly 1.2s ease-in-out infinite;
}
@keyframes activeUnitPulseAlly {
  0%, 100% {
    filter:
      drop-shadow(0 0 1px rgba(120,240,140,0.9))
      drop-shadow(0 0 3px rgba(80,220,100,0.7))
      drop-shadow(0 0 7px rgba(50,200,80,0.4))
      drop-shadow(0 0 12px rgba(30,180,60,0.2));
  }
  50% {
    filter:
      drop-shadow(0 0 2px rgba(160,255,180,0.95))
      drop-shadow(0 0 5px rgba(100,240,130,0.8))
      drop-shadow(0 0 10px rgba(60,220,90,0.45))
      drop-shadow(0 0 16px rgba(30,180,60,0.25));
  }
}
.combat-grid.is-animating .unit-token.player-unit.owner-ally.active-unit,
.combat-grid.is-animating .hero-token.owner-ally.active-unit {
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.45));
  animation: none;
}
/* Enemy active — bright red contour */
.unit-token.enemy-unit.active-unit {
  filter:
    drop-shadow(0 0 1px rgba(255,60,60,0.9))
    drop-shadow(0 0 3px rgba(240,30,30,0.7))
    drop-shadow(0 0 7px rgba(220,20,20,0.4))
    drop-shadow(0 0 12px rgba(200,0,0,0.2));
  animation: activeUnitPulseEnemy 1.2s ease-in-out infinite;
}
@keyframes activeUnitPulsePlayer {
  0%, 100% {
    filter:
      drop-shadow(0 0 1px rgba(80,160,255,0.9))
      drop-shadow(0 0 3px rgba(40,120,255,0.7))
      drop-shadow(0 0 7px rgba(30,100,240,0.4))
      drop-shadow(0 0 12px rgba(20,80,220,0.2));
  }
  50% {
    filter:
      drop-shadow(0 0 2px rgba(120,180,255,0.95))
      drop-shadow(0 0 5px rgba(60,150,255,0.8))
      drop-shadow(0 0 10px rgba(40,120,255,0.45))
      drop-shadow(0 0 16px rgba(20,80,220,0.25));
  }
}
@keyframes activeUnitPulseEnemy {
  0%, 100% {
    filter:
      drop-shadow(0 0 1px rgba(255,60,60,0.9))
      drop-shadow(0 0 3px rgba(240,30,30,0.7))
      drop-shadow(0 0 7px rgba(220,20,20,0.4))
      drop-shadow(0 0 12px rgba(200,0,0,0.2));
  }
  50% {
    filter:
      drop-shadow(0 0 2px rgba(255,100,100,0.95))
      drop-shadow(0 0 5px rgba(255,50,50,0.8))
      drop-shadow(0 0 10px rgba(240,30,30,0.45))
      drop-shadow(0 0 16px rgba(200,0,0,0.25));
  }
}
/* Disable glow during animations (player) — but only in SOLO. In coop we keep
   it so the current turn is always readable to both players even while an
   animation is playing for a different unit. */
.combat-grid.is-animating .unit-token.player-unit.active-unit:not(.owner-host):not(.owner-ally),
.combat-grid.is-animating .hero-token.active-unit:not(.owner-host):not(.owner-ally) {
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.45));
  animation: none;
}
/* Enemy active during animations — keep red glow (same as idle active) */
.combat-grid.is-animating .unit-token.enemy-unit.active-unit {
  filter:
    drop-shadow(0 0 1px rgba(255,60,60,0.9))
    drop-shadow(0 0 3px rgba(240,30,30,0.7))
    drop-shadow(0 0 7px rgba(220,20,20,0.4))
    drop-shadow(0 0 12px rgba(200,0,0,0.2));
  animation: activeUnitPulseEnemy 1.2s ease-in-out infinite;
}
/* Dead units (corpses) must NEVER have active glow */
.unit-token.dead.active-unit {
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.45)) !important;
  animation: none !important;
}
/* Enemy destination cell — red pulsing highlight showing where enemy will stand */
.grid-cell.enemy-dest {
  background: rgba(220,40,40,0.25);
  border-color: rgba(255,60,60,0.7);
  box-shadow: inset 0 0 12px rgba(255,40,40,0.3), 0 0 8px rgba(220,0,0,0.3);
  animation: enemyDestPulse 1s ease-in-out infinite;
  z-index: 5;
}
@keyframes enemyDestPulse {
  0%, 100% { box-shadow: inset 0 0 12px rgba(255,40,40,0.3), 0 0 8px rgba(220,0,0,0.3); }
  50%      { box-shadow: inset 0 0 18px rgba(255,60,60,0.45), 0 0 14px rgba(220,0,0,0.5); }
}
.unit-token.selected { filter: drop-shadow(0 0 6px rgba(120,200,255,0.9)) drop-shadow(0 0 12px rgba(120,200,255,0.4)); }
/* Red contour flash when unit takes damage */
.unit-token.hit-flash {
  filter:
    drop-shadow(0 0 3px rgba(255,40,40,1))
    drop-shadow(0 0 3px rgba(255,40,40,1))
    drop-shadow(0 0 6px rgba(255,0,0,0.8)) !important;
  animation: hit-flash-pulse 0.3s ease-out 1 !important;
}
@keyframes hit-flash-pulse {
  0%   { filter: drop-shadow(0 0 4px rgba(255,40,40,1)) drop-shadow(0 0 4px rgba(255,40,40,1)) drop-shadow(0 0 8px rgba(255,0,0,0.9)); }
  100% { filter: drop-shadow(0 0 0px rgba(255,40,40,0)) drop-shadow(0 0 0px rgba(255,40,40,0)) drop-shadow(0 0 0px rgba(255,0,0,0)); }
}
.unit-token.dead        { opacity: 0.15; filter: none; }
.unit-token.death-corpse { opacity: 1; pointer-events: none; transform: rotateX(-50deg); filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.45)); }
.unit-token.death-corpse[data-unit-type="wight"] { transform: rotateX(-50deg) translateY(-10px); }
/* Corpse sprite: override !important idle rules — show static last frame of death */
.unit-token.death-corpse .token-img.sprite-sheet {
  animation: none !important;
  /* background-image/size/position set via inline styles in JS */
}
.unit-token.death-rising { transition: transform 1.2s ease-out; transform: rotateX(-50deg); }
.unit-token[data-unit-type="wight"].death-rising { transform: rotateX(-50deg) translateY(-10px); }
.unit-token .token-emoji { font-size: 3.2rem; line-height: 1; }
.unit-token .token-img {
  width: 120px; height: 120px;
  object-fit: contain;
  display: block;
  margin-bottom: 5px;
  pointer-events: none;
  image-rendering: crisp-edges;
  filter: contrast(1.08) saturate(1.1);
  will-change: transform;
  backface-visibility: hidden;
  /* Universal: push sprite down to compensate ~24% transparent bottom padding */
  transform: translateY(24%);
}
/* Sprite sheet divs: override img-specific defaults */
.unit-token .token-img.sprite-sheet {
  object-fit: unset;
  image-rendering: auto;
  transform: none;
  margin-bottom: 2px;
  flex-shrink: 0;
  display: block;  /* canvas needs display:block to respect width/height */
}
/* Ground shadow under every unit (elliptical fallback for non-sprite units) */
.unit-token::before {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 10px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.45) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.unit-token.dead::before { display: none; }
/* Larger shadow for big creatures */
.unit-token[data-unit-type="troll"]::before {
  width: 68px; height: 14px;
}
.unit-token[data-unit-type="ogre"]::before {
  width: 142px; height: 35px;
  bottom: -3px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, transparent 70%);
}
.unit-token[data-unit-type="dread_rider"]::before {
  width: 175px; height: 38px;
  bottom: 0px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, transparent 70%);
}
/* Skeleton shadow */
.unit-token[data-unit-type="skeleton"]::before {
  width: 78px; height: 15px;
  bottom: 6px;
}
/* Wight shadow */
.unit-token[data-unit-type="wight"]::before {
  width: 60px; height: 12px;
  bottom: 7px;
}
/* Zombie shadow */
.unit-token[data-unit-type="zombie"]::before {
  width: 78px; height: 15px;
  bottom: 10px;
  margin-left: -2px;
}
/* Kobolt shadow */
.unit-token[data-unit-type="kobolt"]::before {
  width: 78px; height: 17px;
  bottom: 10px;
}
/* Bandit shadow */
.unit-token[data-unit-type="bandit"]::before {
  width: 78px; height: 19px;
  bottom: 7px;
  margin-left: 4px;
}
/* Hydra shadow */
.unit-token[data-unit-type="hydra"]::before {
  width: 104px; height: 20px;
  bottom: 2px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 70%);
}
/* Lich shadow */
.unit-token[data-unit-type="lich"]::before {
  width: 86px; height: 17px;
  bottom: 9px;
}
/* Vampire shadow */
.unit-token[data-unit-type="vampire"]::before {
  width: 86px; height: 21px;
  bottom: 5px;
}
/* Wolf shadow */
.unit-token[data-unit-type="wolf"]::before {
  width: 82px; height: 20px;
  bottom: 4px;
}
/* Death shadow (2×2 unit — 3× default) */
.unit-token[data-unit-type="death_unit"]::before {
  width: 156px; height: 38px;
  bottom: 10px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, transparent 70%);
}

/* Cast shadow — separate element in unit-layer, lies flat on grid (no billboard) */
/* Shadow left = cell center. translateX(-50%) centers it. Bottom center = cell center at feet level. */
.unit-shadow {
  pointer-events: none;
  transform-origin: bottom center;
  opacity: 0.25;
}
/* Player units: shadow goes up + slightly right */
.unit-shadow[data-side="player"] {
  transform: translateX(-50%) translateY(-100%) skewX(-25deg) scaleY(0.4);
}
/* Enemy units: shadow goes up + slightly left */
.unit-shadow[data-side="enemy"] {
  transform: translateX(-50%) translateY(-100%) skewX(25deg) scaleY(0.4);
}
/* Per-unit `scaleY` overrides go HERE so the higher-specificity
   `[data-unit-type=…][data-side=…]` selectors win over the generic
   `[data-side=…]` above. Keep the rest of the transform identical
   (translateX, translateY, skewX) — only scaleY differs. Adding more
   units later: copy this two-line pattern, change the unit-type and
   the scaleY value. No JS changes; CSS specificity is deterministic
   and these rules incur zero perf cost (transform stays GPU-composited). */
.unit-shadow[data-unit-type="steel_tyrant"][data-side="player"] {
  transform: translateX(-50%) translateY(-100%) skewX(-25deg) scaleY(0.5);
}
.unit-shadow[data-unit-type="steel_tyrant"][data-side="enemy"] {
  transform: translateX(-50%) translateY(-100%) skewX(25deg) scaleY(0.5);
}
.unit-shadow[data-unit-type="war_reaper"][data-side="player"] {
  transform: translateX(-50%) translateY(-100%) skewX(-35deg) scaleY(0.8);
}
.unit-shadow[data-unit-type="war_reaper"][data-side="enemy"] {
  transform: translateX(-50%) translateY(-100%) skewX(35deg) scaleY(0.8);
}
.unit-shadow .shadow-canvas {
  display: block;
}
/* Per-unit shadow canvas sizes (match sprite display sizes) */
.unit-shadow[data-unit-type="zombie"] .shadow-canvas { width: 156px; height: 156px; }
.unit-shadow[data-unit-type="skeleton"] .shadow-canvas { width: 154px; height: 136px; }
.unit-shadow[data-unit-type="wight"] .shadow-canvas { width: 145px; height: 132px; }
.unit-shadow[data-unit-type="ogre"] .shadow-canvas { width: 220px; height: 155px; }
.unit-shadow[data-unit-type="dread_rider"] .shadow-canvas { width: 240px; height: 216px; }
.unit-shadow[data-unit-type="wolf"] .shadow-canvas { width: 119px; height: 73px; }
.unit-shadow[data-unit-type="wyvern"] .shadow-canvas { width: 240px; height: 240px; }
.unit-shadow[data-unit-type="goblin"] .shadow-canvas { width: 110px; height: 98px; }
.unit-shadow[data-unit-type="kobolt"] .shadow-canvas { width: 153px; height: 126px; }
.unit-shadow[data-unit-type="lich"] .shadow-canvas { width: 184px; height: 154px; }
.unit-shadow[data-unit-type="vampire"] .shadow-canvas { width: 169px; height: 155px; }
.unit-shadow[data-unit-type="hydra"] .shadow-canvas { width: 267px; height: 198px; }

.unit-token .token-emoji {
  pointer-events: none;
}
/* Stack count badge — positioned by JS (_positionCountBadge) relative to grid cell */
.unit-token .token-count {
  position: absolute; bottom: 0px;
  font-size: 0.85rem; color: white; font-weight: bold;
  text-shadow: 0 0 4px black;
  background: rgba(0,0,0,0.75);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.3);
  min-width: 22px; text-align: center;
}
.unit-token.player-unit .token-count { border-color: rgba(68,136,204,0.8); background: rgba(10,30,60,0.85); }
.unit-token.enemy-unit .token-count  { border-color: rgba(204,68,68,0.8);  background: rgba(60,10,10,0.85); }
.hp-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  border-radius: 0 0 3px 3px; background: rgba(0,0,0,0.5); overflow: hidden;
}
.hp-fill { height: 100%; background: var(--green); transition: width 0.2s; }
.hp-fill.low { background: var(--red); }

/* Floating count badges — active unit pulse */
.badge-active-player {
  border-color: rgba(40,120,240,0.95) !important;
  box-shadow: 0 0 6px rgba(40,120,240,0.8), 0 0 14px rgba(40,120,240,0.4);
  animation: badgePulsePlayer 0.9s ease-in-out infinite !important;
}
.badge-active-enemy {
  border-color: rgba(220,40,40,0.95) !important;
  box-shadow: 0 0 6px rgba(220,40,40,0.8), 0 0 14px rgba(220,40,40,0.4);
  animation: badgePulseEnemy 0.9s ease-in-out infinite !important;
}
@keyframes badgePulsePlayer {
  0%, 100% { box-shadow: 0 0 4px rgba(40,120,240,0.6), 0 0 10px rgba(40,120,240,0.3); }
  50%      { box-shadow: 0 0 8px rgba(60,140,255,1), 0 0 18px rgba(40,120,240,0.6); }
}
@keyframes badgePulseEnemy {
  0%, 100% { box-shadow: 0 0 4px rgba(220,40,40,0.6), 0 0 10px rgba(220,40,40,0.3); }
  50%      { box-shadow: 0 0 8px rgba(240,50,50,1), 0 0 18px rgba(220,40,40,0.6); }
}

/* ── Sprite size system ──────────────────────────────────────
   3 tiers: small (140px), medium (168px), large (185px).
   All use the same margin formula to anchor feet at cell bottom.
   New units: just add data-unit-type to the correct tier.
   ──────────────────────────────────────────────────────────── */

/* ── Sprite size & positioning ──────────────────────────────
   Default .token-img has translateY(24%) to compensate ~24%
   transparent padding at bottom of all sprites.
   Outliers override translateY with their measured value.
   New units: just add to a tier — translateY(24%) auto-applies.

   Measured bottom transparency per sprite (from alpha channel):
     24%: skeleton, zombie, pikeman, swordsman, spearman, archer, troll
     25%: skeleton, zombie, swordsman
     21%: bandit
     27%: elfarcher, griffin, wight
     19%: goblin
     29%: wolf
     16%: ogre
     18%: wyvern
   ──────────────────────────────────────────────────────────── */

/* MEDIUM tier — 156px (humanoids, ~24-25% bottom padding → default) */
.unit-token[data-unit-type="skeleton"] .token-img,
.unit-token[data-unit-type="zombie"] .token-img,
.unit-token[data-unit-type="pikeman"] .token-img,
.unit-token[data-unit-type="swordsman"] .token-img,
.unit-token[data-unit-type="spearman"] .token-img {
  width: 156px; height: 156px;
}
/* Bandit — 21% */
.unit-token[data-unit-type="bandit"] .token-img {
  width: 156px; height: 156px;
  transform: translateY(21%);
}

/* SMALL tier — 130px */
.unit-token[data-unit-type="goblin"] .token-img {
  width: 130px; height: 130px;
  transform: translateY(19%);
}
/* Wolf — 29% */
.unit-token[data-unit-type="wolf"] .token-img {
  width: 143px; height: 143px;
  margin-left: 20px;
  transform: translateY(29%);
}

/* Ranged — 150px */
.unit-token[data-unit-type="archer"] .token-img {
  width: 150px; height: 150px;
}
/* ogre: sprite-sheet only — no GIF .token-img overrides */
.unit-token[data-unit-type="troll"] .token-img {
  width: 182px; height: 182px;
}
.unit-token[data-unit-type="griffin"] .token-img {
  width: 182px; height: 182px;
  transform: translateY(27%);
}
.unit-token[data-unit-type="wyvern"] .token-img {
  width: 182px; height: 182px;
  transform: translateY(18%);
}
/* Large creatures get bigger ground shadow */
.unit-token[data-unit-type="troll"]::before,
.unit-token[data-unit-type="griffin"]::before {
  width: 62px; height: 12px;
}
.unit-token[data-unit-type="goblin"]::before {
  width: 78px; height: 15px;
  bottom: 11px;
}
.unit-token[data-unit-type="wolf"]::before {
  bottom: 5px;
}
.unit-token[data-unit-type="wyvern"]::before {
  width: 155px; height: 30px;
  bottom: -3px;
}

/* SPECIAL — wight (sprite sheet) */
.unit-token[data-unit-type="wight"] .token-img {
  margin-left: 10px;
  image-rendering: auto;
}
.unit-token .token-img.sprite-sheet {
  /* Sprite sheets are pre-cropped — no translateY compensation needed */
  transform: none !important;
  image-rendering: auto !important;
  will-change: auto;
  backface-visibility: visible;
  filter: none;
  /* Canvas elements don't use background */
  background: none !important;
}
.unit-token .token-img.sprite-sheet.flipped {
  transform: scaleX(-1) !important;
}
.unit-token[data-unit-type="zombie"] .token-img.sprite-sheet {
  width: 156px !important; height: 156px !important;
  margin-left: 0;
  margin-bottom: -15px;
  filter: brightness(1.1) contrast(1.15) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
/* Skeleton display */
.unit-token[data-unit-type="skeleton"] .token-img.sprite-sheet {
  /* Aspect fixed 2026-04-24: frame 304×268 (1.134:1). Old CSS 154×154
     squished horizontally 13 %, which combined with the attack-lunge
     drift amplified visual "desync" between frames — other units'
     CSS already matches their content aspect so they didn't suffer.
     Use 154×136 to match content aspect (1.134:1). */
  width: 154px !important; height: 136px !important;
  margin-left: 0;
  margin-bottom: 0px;
  filter: brightness(1.3) contrast(1.3) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
.unit-token[data-unit-type="wight"] .token-img.sprite-sheet {
  width: 145px !important; height: 132px !important;
  margin-left: 0 !important;
  margin-bottom: 10px;
  filter: brightness(1.1) contrast(1.15) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
.unit-token[data-unit-type="ogre"] .token-img.sprite-sheet {
  /* Aspect fixed 2026-04-24: frame is 452×318 (1.42:1) after re-crop.
     Position measured via DOM rects: canvas bottom was 20 px below
     cell bottom, so shift up by 20 px (margin-bottom: -30 → -10). */
  width: 220px !important; height: 155px !important;
  margin-left: 0;
  margin-bottom: -10px;
  filter: drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
.unit-token[data-unit-type="dread_rider"] .token-img.sprite-sheet {
  width: 240px !important; height: 216px !important;
  margin-left: 0;
  margin-bottom: -5px;
  filter: contrast(1.25) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
.unit-token[data-unit-type="death_unit"] {
  height: 56px !important;
  max-height: 56px !important;
}
.unit-token[data-unit-type="death_unit"] .token-img.sprite-sheet {
  width: 240px !important; height: 227px !important;
  margin-left: 0;
  margin-bottom: -10px;
  position: relative;
  top: -20px;
  left: 10px;
  filter: contrast(1.2) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
.unit-shadow[data-unit-type="death_unit"] .shadow-canvas { width: 240px; height: 227px; }
.unit-token[data-unit-type="wolf"] .token-img.sprite-sheet {
  width: 119px !important; height: 73px !important;
  margin-left: 0 !important;
  margin-bottom: 10px;
  filter: brightness(1.1) contrast(1.1) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
.unit-token[data-unit-type="wyvern"] .token-img.sprite-sheet {
  width: 192px !important; height: 192px !important;
  margin-left: 0;
  margin-bottom: -15px;
  filter: brightness(1.1) contrast(1.2) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
.unit-token[data-unit-type="manbearpig"]::before {
  width: 104px; height: 20px;
  bottom: 5px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 70%);
}
.unit-token[data-unit-type="manbearpig"] .token-img.sprite-sheet {
  width: 173px !important; height: 154px !important;
  margin-left: 0;
  margin-bottom: 0px;
  filter: contrast(1.2) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
.unit-shadow[data-unit-type="manbearpig"] .shadow-canvas { width: 173px; height: 154px; }
.unit-token[data-unit-type="bandit"] .token-img.sprite-sheet {
  width: 131px !important; height: 136px !important;
  margin-left: 9px !important;
  margin-bottom: 5px;
  filter: brightness(1.1) contrast(1.15) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
.unit-token[data-unit-type="goblin"] .token-img.sprite-sheet {
  width: 110px !important; height: 98px !important;
  margin-left: 0 !important;
  margin-bottom: 6px;
  filter: brightness(1.25) contrast(1.2) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
.unit-token[data-unit-type="kobolt"] .token-img.sprite-sheet {
  width: 153px !important; height: 126px !important;
  margin-left: 6px !important;
  margin-bottom: 0px;
  filter: brightness(1.1) contrast(1.15) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
.unit-token[data-unit-type="lich"] .token-img.sprite-sheet {
  width: 184px !important; height: 154px !important;
  margin-left: 0 !important;
  margin-bottom: 5px;
  filter: brightness(1.1) contrast(1.3) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}
.unit-token[data-unit-type="vampire"] .token-img.sprite-sheet {
  width: 169px !important; height: 155px !important;
  margin-left: 0 !important;
  margin-bottom: -2px;
  filter: brightness(1.1) contrast(1.25) drop-shadow(1px 0 0 rgba(0,0,0,0.4)) drop-shadow(-1px 0 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(0,0,0,0.4)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) !important;
}

.unit-token[data-unit-type="hydra"]::before {
  width: 156px; height: 30px;
  bottom: -1px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 70%);
}
.unit-token[data-unit-type="hydra"] .token-img.sprite-sheet {
  width: 267px !important; height: 198px !important;
  margin-left: 0;
  margin-bottom: -15px;
  filter: contrast(1.45) drop-shadow(1px 0 0 rgba(0,0,0,0.5)) drop-shadow(-1px 0 0 rgba(0,0,0,0.5)) drop-shadow(0 1px 0 rgba(0,0,0,0.5)) drop-shadow(0 -1px 0 rgba(0,0,0,0.5)) !important;
}

/* ── Machinas (2026-04-25) — display sizes follow the convert_unit.py
   "Display-size suggestion" output, scaled per tier so heavier units
   read bigger on the grid. Margins + ground-shadow ::before are
   COPIED from the beastlands tier-mate (T1 goblin → drone, T2 wolf
   → mech_spider, ...) as a starting point — exact per-sprite tuning
   left for a later pass once the source art is finalised. NO outline
   drop-shadow on machinas: the metallic source already has its own
   dark edges baked in. */
/* T1 — drone (← goblin offsets) */
.unit-token[data-unit-type="drone"]::before {
  width: 78px; height: 15px;
  bottom: 11px;
}
.unit-token[data-unit-type="drone"] .token-img.sprite-sheet {
  width: 121px !important; height: 100px !important;  /* +10 % vs 110×91 baseline */
  margin-left: 0 !important;
  margin-bottom: 6px;
  filter: contrast(1.1) !important;
}
.unit-shadow[data-unit-type="drone"] .shadow-canvas { width: 121px; height: 100px; }
/* T2 — mech_spider (← wolf offsets) */
.unit-token[data-unit-type="mech_spider"]::before {
  width: 82px; height: 20px;
  bottom: 5px;
  /* Base .unit-token::before sets transform: translateX(-50%) for centering;
     keep that and add scale(1.15) → ground shadow +15 % all sides. */
  transform: translateX(-50%) scale(1.15);
  transform-origin: center;
}
.unit-token[data-unit-type="mech_spider"] .token-img.sprite-sheet {
  width: 144px !important; height: 82px !important;
  margin-left: 0 !important;
  margin-bottom: 10px;
  position: relative;
  top: 25px;       /* lower the sprite 25 px vs its hex cell anchor (was 20) */
  filter: contrast(1.1) !important;
}
.unit-shadow[data-unit-type="mech_spider"] .shadow-canvas {
  width: 144px; height: 82px;
  position: relative; left: -9px; top: 2px;  /* projected shadow: 9 px left + 2 px down (was -4/2) */
}
/* T3 — ironclad_walker (← kobolt offsets) */
.unit-token[data-unit-type="ironclad_walker"]::before {
  width: 78px; height: 17px;
  bottom: 10px;
  /* Base .unit-token::before sets transform: translateX(-50%) for centering;
     keep that and add scale(1.5) → ground shadow +50 % all sides. */
  transform: translateX(-50%) scale(1.5);
  transform-origin: center;
}
.unit-token[data-unit-type="ironclad_walker"] .token-img.sprite-sheet {
  width: 145px !important; height: 123px !important;
  margin-left: 6px !important;
  margin-bottom: 0px;
  position: relative;
  top: 20px;       /* lower the sprite 20 px vs its hex cell anchor (was 10) */
  left: 7px;       /* nudge sprite 7 px right */
  filter: contrast(1.1) !important;
}
/* T4 — golem (← wyvern offsets) */
.unit-token[data-unit-type="golem"]::before {
  width: 155px; height: 30px;
  bottom: -3px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.75) 0%, transparent 70%);  /* darker than base 0.45 */
  /* Base .unit-token::before sets transform: translateX(-50%) for centering.
     scaleX(0.75) compresses horizontally by 25 % (12.5 % from each side);
     scaleY(1.4) keeps the +20 / +20 vertical stretch from before. */
  transform: translateX(-50%) scale(0.75, 1.4);
  transform-origin: center;
}
.unit-token[data-unit-type="golem"] .token-img.sprite-sheet {
  width: 130px !important; height: 124px !important;
  margin-left: 0;
  margin-bottom: -15px;
  position: relative;
  top: 5px;        /* lower the sprite 5 px vs its hex cell anchor */
  left: 5px;       /* nudge sprite 5 px right */
  filter: contrast(1.1) !important;
}
.unit-shadow[data-unit-type="golem"] .shadow-canvas {
  width: 130px; height: 124px;
  position: relative; left: -7px;  /* projected shadow nudged 7 px left */
}
/* T5 — tank (← manbearpig offsets) */
.unit-token[data-unit-type="tank"]::before {
  width: 104px; height: 20px;
  bottom: 5px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 70%);
}
.unit-token[data-unit-type="tank"] .token-img.sprite-sheet {
  width: 165px !important; height: 134px !important;
  margin-left: 0;
  margin-bottom: 0px;
  position: relative;
  top: 10px;        /* lower the sprite 10 px vs its hex cell anchor (was 5) */
  left: 5px;        /* nudge sprite 5 px right */
  filter: contrast(1.1) !important;
}
.unit-shadow[data-unit-type="tank"] .shadow-canvas {
  width: 165px; height: 134px;
  position: relative; top: -10px;  /* projected shadow nudged 10 px up */
}
/* T6 — war_reaper (← ogre offsets) */
.unit-token[data-unit-type="war_reaper"]::before {
  width: 142px; height: 35px;
  bottom: -3px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.85) 0%, transparent 70%);  /* heavier centre alpha (was 0.6) — darker shadow under reaper's bulk */
  /* base .unit-token::before uses transform: translateX(-50%) for
     centering. Asymmetric scale: 1.2 × 1.8 = uniform-1.5 baseline then
     −20 % width (1.5×0.8=1.2) and +20 % height (1.5×1.2=1.8). Reads as
     a longer, narrower ellipse — closer to the reaper's actual footprint. */
  transform: translateX(-50%) scale(1.2, 1.8);
  transform-origin: center;
}
.unit-token[data-unit-type="war_reaper"] .token-img.sprite-sheet {
  width: 200px !important; height: 182px !important;
  margin-left: 0;
  margin-bottom: -10px;
  filter: contrast(1.1) !important;
}
.unit-shadow[data-unit-type="war_reaper"] .shadow-canvas {
  width: 200px; height: 182px;
  position: relative; left: -5px; top: 10px;  /* projected shadow: 5 px left + 10 px down */
}
/* T7 — steel_tyrant (← hydra offsets) */
.unit-token[data-unit-type="steel_tyrant"]::before {
  width: 156px; height: 30px;
  bottom: -1px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.85) 0%, transparent 70%);  /* heavier centre alpha for tyrant — reads as a real cast shadow under a 250-ton mech */
  /* base .unit-token::before uses transform: translateX(-50%) for centering;
     keep that and ADD scaleY(1.45) with origin shifted to 33 % from bottom →
     stretches ellipse +30 % UPWARD and +15 % DOWNWARD (asymmetric).
     Math: at origin y=67 % from top, scaleY(1.45) moves top by
     (1.45-1)*0.67 = 0.30 of height (up) and bottom by 0.45*0.33 = 0.15
     (down). Width stays 156 px (no scaleX). */
  transform: translateX(-50%) scaleY(1.45);
  transform-origin: center 67%;
}
.unit-token[data-unit-type="steel_tyrant"] .token-img.sprite-sheet {
  width: 288px !important; height: 247px !important;  /* +15 % vs original 250×215 (boss-tier read) */
  margin-left: 0;
  margin-bottom: -15px;
  position: relative;
  top: 30px;       /* lower the sprite 30 px vs its hex cell anchor */
  filter: contrast(1.1) !important;
}
.unit-shadow[data-unit-type="steel_tyrant"] .shadow-canvas {
  width: 288px; height: 247px;                          /* must match sprite display size */
  position: relative; left: -5px; top: 5px;             /* projected shadow nudged 5 px left + 5 px down */
}

/* ── Bullet-burst FX (Steel Tyrant ranged attack) ──────────────
   Pure DOM/CSS — no sprite asset needed. Each impact is a single
   absolutely-positioned div with a radial-gradient and box-shadow,
   animated for ~220 ms then removed via `animationend`. Tracers are
   thin yellow lines scaled along the firing line, also self-cleaning
   on animationend. GPU-composited (transform + opacity), so even
   spawning 8 of them in 320 ms doesn't trigger reflow. */
.bullet-impact {
  position: absolute;
  width: 5px; height: 5px;          /* was 8 — smaller per user feedback (2026-04-25) */
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd060 25%, #ff5400 55%, transparent 80%);
  animation: bullet-impact-flash 220ms ease-out forwards;
  /* z-index NOT fixed any more — set inline to defender.y so units in
     front (higher row → bigger z-index) occlude the impact correctly.
     See _playBulletBurst — impact div is now appended to defEl so it
     also inherits the target's stacking position automatically. */
  will-change: transform, opacity;
}
@keyframes bullet-impact-flash {
  0%   { transform: scale(0.5); opacity: 1;   box-shadow: 0 0 5px 1px #fff,  0 0 9px 3px #ff8800; }
  35%  { transform: scale(1.6); opacity: 0.95;box-shadow: 0 0 11px 4px #fff, 0 0 17px 6px #ff5400; }
  100% { transform: scale(2.2); opacity: 0;   box-shadow: 0 0 14px 6px transparent; }
}
.bullet-tracer {
  position: absolute;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,200,0) 0%, rgba(255,220,120,0.95) 50%, rgba(255,255,200,0) 100%);
  transform-origin: left center;
  animation: bullet-tracer-fade 110ms linear forwards;
  z-index: 49;
  box-shadow: 0 0 4px 1px rgba(255,200,80,0.7);
  will-change: opacity;
}
@keyframes bullet-tracer-fade {
  0%   { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ── Combat Result Overlay (victory/defeat on top of combat) ── */
.combat-result-overlay {
  position: absolute; inset: 0; z-index: 9999; /* PROMO: inside combat-main, was position:fixed */
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.10);
  animation: cro-fadeIn 0.6s ease-out;
}
@keyframes cro-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.combat-result-card {
  position: relative;
  width: 440px;
  height: 440px;
  padding: 50px 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #0a0804;
  border: 2px solid #c9a84c;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.8),
    0 0 40px rgba(201,168,76,0.25),
    0 0 80px rgba(201,168,76,0.1),
    0 20px 60px rgba(0,0,0,0.8);
  animation: cro-slideUp 0.5s ease-out;
}
@keyframes cro-slideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Video background for result card */
.combat-result-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: 10px;
}
/* All card content above video */
.combat-result-card > *:not(.combat-result-video) {
  position: relative;
  z-index: 1;
}

/* emblem removed — victory.png is now the card background */

.combat-result-title {
  font-family: 'Cinzel', serif;
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 20px;
  line-height: 1;
  padding: 8px 0;
  background: rgba(0,0,0,0.55);
  border-top: 1px solid rgba(201,168,76,0.3);
  border-bottom: 1px solid rgba(201,168,76,0.3);
}
.combat-result-title.win {
  color: #e8c96d;
  text-shadow:
    0 0 20px rgba(201,168,76,0.7),
    0 0 40px rgba(201,168,76,0.4),
    0 2px 6px rgba(0,0,0,1);
}
.combat-result-title.loss {
  color: #c0392b;
  text-shadow:
    0 0 20px rgba(192,57,43,0.6),
    0 0 40px rgba(192,57,43,0.3),
    0 2px 6px rgba(0,0,0,1);
}

.combat-result-rewards {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
.combat-result-rewards::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 1px; height: 40px;
  background: rgba(201,168,76,0.3);
}
.combat-result-reward {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1;
}
.combat-result-reward-val {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #e8c96d;
}
.combat-result-reward-lbl {
  font-family: 'Crimson Text', serif;
  font-size: 0.85rem;
  color: rgba(224,216,192,0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* divider now rendered via .combat-result-rewards::after */

.combat-result-artifact {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  text-align: center;
  backdrop-filter: blur(4px);
}
.combat-result-artifact .art-emoji { font-size: 2rem; }
.combat-result-artifact .art-name { font-size: 1rem; color: #e8c96d; font-family: 'Cinzel', serif; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }

.combat-result-levelup {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1000;
  background: linear-gradient(135deg, #c9a84c, #e8c96d);
  border-radius: 6px;
  padding: 10px 20px;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}


.combat-result-btn {
  position: relative;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #e0d8c0;
  background: linear-gradient(180deg, #3a2a10 0%, #1e1508 100%);
  border: 1px solid #c9a84c;
  border-radius: 6px;
  padding: 12px 40px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}
.combat-result-btn:hover {
  background: linear-gradient(180deg, #4a3818 0%, #2e1f0a 100%);
  box-shadow: 0 0 16px rgba(201,168,76,0.3);
  color: #e8c96d;
}

/* ── Result screen (legacy, kept for fallback) ───────────────── */
#screen-result { padding-top: 76px; align-items: center; justify-content: center; }
.result-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 40px; width: 420px; text-align: center;
  box-shadow: var(--shadow);
}
.result-box h2 { font-size: 1.8rem; margin-bottom: 20px; }
.result-box h2.win  { color: var(--gold); }
.result-box h2.loss { color: var(--red); }
.result-rewards { margin: 20px 0; display: flex; gap: 20px; justify-content: center; }
.reward-item { text-align: center; }
.reward-item .reward-val { font-size: 1.4rem; color: var(--gold-light); font-weight: bold; }
.reward-item .reward-lbl { font-size: 0.78rem; color: var(--text-dim); margin-top: 4px; }
.artifact-reward {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px; margin: 16px 0;
  display: flex; align-items: center; gap: 12px;
}
.artifact-reward .art-emoji { font-size: 2rem; }
.artifact-reward .art-name  { font-size: 1rem; color: var(--gold); }
.artifact-reward .art-rarity { font-size: 0.78rem; color: var(--text-dim); }
.levelup-banner {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #1a1000; border-radius: 8px; padding: 12px;
  font-weight: bold; font-size: 1rem; margin: 12px 0;
}

/* ── Inventory layout (HoMM3 style, two-column) ─────────── */
#screen-inventory { padding-top: 76px; align-items: center; }
.inv-layout {
  display: flex; flex: 1; overflow: hidden;
  width: 100%; max-width: 900px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: calc(100vh - 100px);
}
.inv-left-col {
  width: 360px; flex-shrink: 0;
  padding: 14px 16px; border-right: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
}
.inv-right-col { flex: 1; padding: 14px 18px; overflow-y: auto; }
.inv-right-header { margin-bottom: 14px; }
.inv-right-header h2 { color: var(--gold); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Hero panel (portrait + equipment grid) ──────────────── */
.inv-hero-panel {
  display: flex; gap: 12px; align-items: flex-start;
}
.inv-hero-portrait {
  width: 150px; height: 170px; flex-shrink: 0;
  background: var(--bg2); border: 2px solid var(--border);
  border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.inv-hero-portrait img {
  width: 180%; height: 180%; object-fit: contain;
  image-rendering: pixelated;
}

/* ── Equipment grid (3×3 right of portrait) ──────────────── */
.inv-equip-grid {
  display: grid; grid-template-columns: repeat(3, 54px);
  grid-template-rows: repeat(3, 54px); gap: 4px;
  flex-shrink: 0;
}
.pdoll-slot {
  width: 54px; height: 54px;
  border: 2px solid var(--border); border-radius: 4px;
  background: var(--bg2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  cursor: default; position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.pdoll-slot.unlocked-empty {
  border-color: rgba(100,100,130,0.5);
  background: rgba(20,20,40,0.6);
}
.pdoll-slot.has-item {
  border-color: var(--gold-dark); background: rgba(201,168,76,0.1);
  cursor: pointer;
}
.pdoll-slot.has-item:hover {
  border-color: var(--gold); background: rgba(201,168,76,0.18);
}
.pdoll-slot-icon  { font-size: 1.3rem; line-height: 1; }
.pdoll-slot-label {
  font-size: 0.48rem; color: var(--text-dim); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.02em;
  white-space: nowrap;
}
.pdoll-slot-name {
  font-size: 0.5rem; color: var(--gold-light);
  max-width: 48px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: center;
}
.pdoll-slot-dur {
  position: absolute; bottom: 1px; left: 2px; right: 2px;
  height: 2px; background: rgba(0,0,0,0.4); border-radius: 1px;
  overflow: hidden;
}
.pdoll-slot-dur-fill { height: 100%; border-radius: 1px; }

/* ── Hero stats panel ────────────────────────────────────── */
.inv-hero-stats {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
}
.inv-hero-stats-title {
  font-size: 0.72rem; color: var(--gold); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 8px;
  border-bottom: 1px solid var(--border); padding-bottom: 5px;
}
.hero-stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 0; font-size: 0.82rem;
}
.hero-stat-row + .hero-stat-row { border-top: 1px solid rgba(42,42,85,0.4); }
.hero-stat-name { color: var(--text-dim); display: flex; align-items: center; gap: 5px; }
.hero-stat-val  { color: var(--gold-light); font-weight: bold; }
.hero-stat-val.has-bonus { color: var(--green); }

/* ── Backpack grid (right side) ──────────────────────────── */
.inv-artifact-bag {
  display: grid; grid-template-columns: repeat(7, 56px); gap: 5px;
  justify-content: center;
}
.inv-bag-slot {
  width: 56px; height: 56px;
  background: var(--bg2); border: 2px solid var(--border);
  border-radius: 4px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  text-align: center; position: relative; cursor: default;
  transition: border-color 0.15s, background 0.15s;
  box-sizing: border-box;
}
/* Empty unlocked slot */
.inv-bag-slot.empty {
  border-color: rgba(100,100,130,0.5);
  background: rgba(20,20,40,0.5);
}
/* Locked slot */
.inv-bag-slot.locked {
  border-color: rgba(60,55,50,0.6);
  background: rgba(30,28,25,0.7);
}
.inv-bag-slot.locked::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(60,55,50,0.3) 4px, rgba(60,55,50,0.3) 8px
  );
  border-radius: 2px;
}
/* Occupied slot */
.inv-bag-slot.occupied {
  border-color: rgba(140,130,100,0.6);
  background: rgba(40,35,25,0.6);
  cursor: pointer;
}
.inv-bag-slot.occupied:hover {
  border-color: var(--gold-dark); background: rgba(201,168,76,0.12);
}
.inv-bag-slot.occupied.equipped {
  border-color: rgba(100,95,80,0.5); background: rgba(30,28,25,0.7);
  opacity: 0.5;
}
.inv-bag-slot.occupied.broken {
  opacity: 1;
  border-color: var(--red) !important;
  background: rgba(180,40,40,0.12);
  box-shadow: 0 0 6px rgba(220,50,50,0.3);
}
.inv-bag-slot.occupied.broken::after {
  content: 'BROKEN';
  position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
  font-size: 0.4rem; font-weight: bold; text-transform: uppercase;
  color: #fff; background: var(--red);
  padding: 1px 4px; border-radius: 2px;
  line-height: 1.2; letter-spacing: 0.3px;
  z-index: 2;
}

.inv-bag-emoji { font-size: 1.4rem; line-height: 1; }
.inv-bag-name  {
  font-size: 0.52rem; color: var(--text-dim);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 0 2px;
}
.inv-bag-badge {
  position: absolute; top: 1px; right: 2px;
  font-size: 0.45rem; background: var(--gold-dark); color: var(--gold-light);
  border-radius: 2px; padding: 1px 3px; text-transform: uppercase;
}
.inv-bag-lock  { font-size: 0.9rem; opacity: 0.3; position: relative; z-index: 1; }
.inv-bag-dur {
  position: absolute; bottom: 1px; left: 2px; right: 2px;
  height: 2px; background: rgba(0,0,0,0.4); border-radius: 1px;
  overflow: hidden;
}
.inv-bag-dur-fill { height: 100%; border-radius: 1px; }

/* ── Artifact detail tooltip ─────────────────────────────── */
.inv-artifact-tooltip {
  display: none; position: fixed; z-index: 300;
  background: var(--bg2); border: 2px solid var(--gold-dark);
  border-radius: 6px; padding: 12px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  min-width: 200px; max-width: 260px;
  pointer-events: none;
}
.inv-artifact-tooltip.visible { display: block; pointer-events: auto; }
.inv-tooltip-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.inv-tooltip-emoji { font-size: 1.6rem; }
.inv-tooltip-name { color: var(--gold); font-size: 0.9rem; font-weight: bold; }
.inv-tooltip-slot { font-size: 0.7rem; color: var(--text-dim); }
.inv-tooltip-stats {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 8px;
}
.inv-tooltip-stat {
  font-size: 0.78rem; color: var(--green);
}
.inv-tooltip-durbar {
  width: 100%; height: 4px; background: rgba(0,0,0,0.4);
  border-radius: 2px; overflow: hidden; margin-bottom: 4px;
}
.inv-tooltip-durbar-fill { height: 100%; border-radius: 2px; }
.inv-tooltip-dur-label {
  font-size: 0.68rem; color: var(--text-dim); margin-bottom: 8px;
}
.inv-tooltip-actions {
  display: flex; gap: 6px; flex-wrap: wrap; padding-top: 6px;
  border-top: 1px solid var(--border);
}
.inv-tooltip-actions .btn { padding: 4px 10px; font-size: 0.72rem; }

/* Legacy bag styles (kept for compat) */
.inv-art-durbar { width: 100%; height: 2px; background: var(--bg); border-radius: 1px; overflow: hidden; }
.inv-art-durfill{ height: 100%; border-radius: 1px; }

/* Rarity colours (used in both old and new cards) */
.rarity-common    { color: #aaa; }
.rarity-uncommon  { color: var(--green); }
.rarity-rare      { color: var(--blue); }
.rarity-epic      { color: var(--purple); }
.rarity-legendary { color: var(--gold); }
/* legacy (market/other screens) */
.artifact-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; cursor: pointer; transition: border-color 0.2s;
}
.artifact-card:hover { border-color: var(--gold); }
.artifact-card.equipped { border-color: var(--gold); background: rgba(201,168,76,0.08); }
.artifact-card.broken   {
  opacity: 1;
  border-color: var(--red) !important;
  background: rgba(180,40,40,0.10);
  box-shadow: 0 0 6px rgba(220,50,50,0.3);
  position: relative;
}
.artifact-card.broken::after {
  content: 'BROKEN';
  position: absolute; top: 8px; right: 8px;
  font-size: 0.6rem; font-weight: bold; text-transform: uppercase;
  color: #fff; background: var(--red);
  padding: 2px 6px; border-radius: 3px;
  letter-spacing: 0.5px;
}
.artifact-card .ac-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.artifact-card .ac-emoji  { font-size: 1.6rem; }
.artifact-card .ac-name   { font-size: 0.9rem; color: var(--text); }
.artifact-card .ac-rarity { font-size: 0.72rem; color: var(--text-dim); }
.durability-bar { height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.dur-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.artifact-card .ac-actions { display: flex; gap: 6px; }
.ac-actions .btn { padding: 5px 10px; font-size: 0.78rem; }

/* ── Market screen ────────────────────────────────────────── */
#screen-market { padding-top: 76px; align-items: center; }
.market-body { padding: 20px 24px; width: 100%; max-width: 880px; }
.market-body h2 { color: var(--gold); margin-bottom: 16px; }
.market-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.market-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.market-card .mc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.market-card .mc-seller { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 8px; }
.market-card .mc-price  { font-size: 1.1rem; color: var(--gold-light); font-weight: bold; margin-bottom: 10px; }

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  z-index: 200; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background:
    linear-gradient(180deg,
      rgba(32,20,8,0.99) 0%,
      rgba(20,13,5,0.99) 40%,
      rgba(26,17,7,0.99) 100%);
  border: 2px solid #7a5c10;
  outline: 1px solid rgba(201,168,76,0.2);
  border-radius: 3px;
  padding: 0;
  min-width: 320px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.9),
    0 0 0 1px rgba(0,0,0,0.8),
    inset 0 0 40px rgba(100,60,0,0.08);
  position: relative;
  overflow: hidden;
}
.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, #c9a84c 30%, #e8d070 50%, #c9a84c 70%, transparent 100%);
  pointer-events: none;
}
.modal-header {
  background: linear-gradient(180deg,
    rgba(80,55,12,0.9) 0%,
    rgba(55,38,8,0.9) 100%);
  padding: 10px 18px 8px;
  text-align: center;
  border-bottom: 1px solid rgba(139,105,20,0.6);
}
.modal h3 {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: #f0d878;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 10px rgba(200,160,40,0.3);
  letter-spacing: 0.06em;
  margin: 0;
}
.modal-body {
  padding: 18px 22px 20px;
}
.modal-body label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: #9a8a60;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 10px;
}
.modal-body .text-dim {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: #d8ceb0;
  text-align: center;
}
.modal-body .text-dim b {
  color: #e8c860;
  font-size: 14px;
  text-shadow: 0 0 8px rgba(200,160,40,0.4);
}
.modal-split-unit {
  text-align: center;
  margin-bottom: 12px;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: #e8c860;
  text-shadow: 0 0 6px rgba(200,160,40,0.3);
}
/* Custom range slider for modal */
.modal-body input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(100,70,10,0.5);
  border-radius: 3px;
  outline: none;
  margin: 8px 0;
}
.modal-body input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8c860, #c9a84c);
  border: 2px solid #7a5c10;
  box-shadow: 0 0 6px rgba(200,160,40,0.5);
  cursor: pointer;
}
.modal-body input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8c860, #c9a84c);
  border: 2px solid #7a5c10;
  box-shadow: 0 0 6px rgba(200,160,40,0.5);
  cursor: pointer;
}
.modal-actions {
  display: flex; gap: 10px; padding: 0 22px 16px; justify-content: flex-end;
}
.modal-actions .btn {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 6px 20px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.modal-actions .btn-primary {
  background: linear-gradient(180deg, #c9a84c 0%, #8a6a20 100%);
  border: 1px solid #e8c860;
  color: #1a1209;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.modal-actions .btn-primary:hover {
  background: linear-gradient(180deg, #e8c860 0%, #c9a84c 100%);
  box-shadow: 0 0 10px rgba(200,160,40,0.5);
}
.modal-actions .btn-secondary {
  background: linear-gradient(180deg, rgba(60,40,12,0.8) 0%, rgba(40,25,8,0.8) 100%);
  border: 1px solid rgba(139,105,20,0.5);
  color: #9a8a60;
}
.modal-actions .btn-secondary:hover {
  border-color: #c9a84c;
  color: #d8ceb0;
}

/* ── Toast notifications ──────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 999;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 16px; font-size: 0.85rem;
  box-shadow: var(--shadow); animation: slideIn 0.3s ease;
  max-width: 300px;
}
.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--blue); }
.toast.gold    { border-left: 3px solid var(--gold); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Misc helpers ─────────────────────────────────────────── */
.sep { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.text-gold { color: var(--gold); }
.text-dim  { color: var(--text-dim); }
.text-center { text-align: center; }
.mt-12 { margin-top: 12px; }
.back-btn { color: var(--text-dim); cursor: pointer; font-size: 0.85rem; }
.back-btn:hover { color: var(--gold); }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* ── HUD resources row ────────────────────────────────────── */
#hud-resources { display: flex; gap: 10px; align-items: center; }
.hud-res { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; }
.hud-res b { color: var(--text); }

/* ── Travel banner ────────────────────────────────────────── */
.travel-banner {
  width: 100%; text-align: center; padding: 8px 16px;
  background: linear-gradient(90deg, rgba(68,136,204,0.12), rgba(68,136,204,0.2), rgba(68,136,204,0.12));
  border-bottom: 1px solid rgba(68,136,204,0.4);
  border-top: 1px solid rgba(68,136,204,0.2);
  font-size: 0.85rem; color: #8bb8e8; flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(68,136,204,0.15);
  animation: travelBannerPulse 3s ease-in-out infinite;
}
@keyframes travelBannerPulse {
  0%, 100% { background: linear-gradient(90deg, rgba(68,136,204,0.12), rgba(68,136,204,0.2), rgba(68,136,204,0.12)); }
  50%      { background: linear-gradient(90deg, rgba(68,136,204,0.18), rgba(68,136,204,0.28), rgba(68,136,204,0.18)); }
}
.map-cell.traveling-dest {
  border-color: var(--blue); box-shadow: 0 0 12px rgba(68,136,204,0.5);
  animation: pulse-blue 1.5s infinite;
}
@keyframes pulse-blue {
  0%,100% { box-shadow: 0 0 8px rgba(68,136,204,0.4); }
  50%      { box-shadow: 0 0 20px rgba(68,136,204,0.8); }
}

/* ── Enterprise stock (legacy, kept for compat) ─────────── */
.ent-stock {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-dim);
  background: var(--bg); border-radius: 4px;
  padding: 5px 8px; margin-bottom: 6px;
}

/* ── Market tabs ──────────────────────────────────────────── */
.market-tabs { display: flex; gap: 0; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.market-tab  { flex: 1; padding: 8px; text-align: center; cursor: pointer; color: var(--text-dim);
               background: var(--bg3); border: none; font-family: inherit; font-size: 0.88rem;
               transition: background 0.2s, color 0.2s; }
.market-tab.active { background: var(--gold-dark); color: var(--gold-light); }
.market-tab:hover:not(.active) { color: var(--gold); }

/* ── Inventory sections ───────────────────────────────────── */
.inv-section { margin-bottom: 28px; }
.inv-section h3 { color: var(--gold); font-size: 1rem; margin-bottom: 12px; }

/* ── Equipment slots grid ─────────────────────────────────── */
.equip-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.equip-slot {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; text-align: center;
  transition: border-color 0.2s; min-height: 90px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.equip-slot.has-item { border-color: var(--gold-dark); }
.equip-slot.empty    { opacity: 0.55; }
.slot-label { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 4px; }
.slot-body  { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.empty-slot { font-size: 0.7rem; color: var(--border); }
.slot-item-name { font-size: 0.7rem; }
.slot-dur-bar { width: 44px; height: 3px; background: var(--bg); border-radius: 2px; overflow: hidden; }
.slot-dur-fill { height: 100%; border-radius: 2px; }

/* ── Resources grid ───────────────────────────────────────── */
.resources-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
.resource-cell {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 6px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.res-emoji { font-size: 1.5rem; }
.res-name  { font-size: 0.65rem; color: var(--text-dim); }
.res-qty   { font-size: 1.1rem; color: var(--gold-light); font-weight: bold; }

/* ── Artifact inner grid ──────────────────────────────────── */
.artifact-grid-inner {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}

/* ── Equipped badge ───────────────────────────────────────── */
.equipped-badge {
  font-size: 0.65rem; background: var(--gold-dark); color: var(--gold-light);
  border-radius: 4px; padding: 2px 6px; white-space: nowrap;
}

/* ── Travel preview panel (fixed bottom bar) ──────────────── */
.travel-preview {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, #1a1530, #0f0c20);
  border-top: 2px solid var(--gold-dark);
  padding: 14px 24px; z-index: 90; gap: 16px; align-items: center;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.7), 0 -1px 0 rgba(201,168,76,0.1);
  animation: slideUp 0.2s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.tp-content { display: flex; align-items: center; gap: 14px; flex: 1; }
.tp-icon    { font-size: 2rem; }
.tp-name    { font-size: 1rem; color: var(--gold); font-weight: bold; }
.tp-time    { font-size: 0.82rem; color: var(--text-dim); margin-top: 3px; }
.tp-actions { display: flex; gap: 10px; }
.map-cell.travel-pending {
  border-color: var(--gold-dark);
  box-shadow: 0 0 14px rgba(201,168,76,0.35);
  animation: pulse-gold 1.8s infinite;
}
@keyframes pulse-gold {
  0%,100% { box-shadow: 0 0 8px rgba(201,168,76,0.3); }
  50%     { box-shadow: 0 0 18px rgba(201,168,76,0.65); }
}

/* ── Enterprise stock / buy row (legacy, replaced by ent-stock-row) ── */
.ent-stock-info {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px; font-size: 0.78rem;
}
.ent-price { color: var(--gold-dark); font-size: 0.72rem; }
.priority-badge {
  font-size: 0.68rem; background: rgba(204,170,0,0.15);
  color: var(--gold-dark); border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}
.priority-mine { background: rgba(68,170,102,0.18); color: var(--green); }

/* ── Buildings panel ──────────────────────────────────────── */
/* ── Castle screen ────────────────────────────────────────── */
#screen-castle { padding-top: 76px; align-items: center; overflow-y: auto; }
.castle-body {
  width: 100%; max-width: 720px; margin: 0 auto; padding: 24px;
}
.castle-body h2 { color: var(--gold); margin-bottom: 4px; }

/* Category groups */
.castle-category { margin-bottom: 20px; }
.castle-category-title {
  font-size: 0.9rem; font-weight: bold; color: var(--gold);
  text-transform: uppercase; letter-spacing: 1px;
  padding: 6px 0; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Building card */
.building-item {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px 14px; margin-bottom: 6px;
  transition: border-color 0.2s;
}
.building-item.built {
  border-color: rgba(68,170,102,0.3);
  background: rgba(68,170,102,0.05);
}
.building-item.locked {
  opacity: 0.55;
}
.building-item.coming-soon {
  opacity: 0.4;
  border-style: dashed;
}
.building-item.available:hover {
  border-color: var(--gold);
}

.building-header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px;
}
.building-emoji { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.building-info  { flex: 1; }
.building-name  { font-size: 0.95rem; color: var(--gold); font-weight: bold; }
.building-desc  { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; }

.building-cost  {
  font-size: 0.82rem; color: var(--text);
  background: var(--bg); border-radius: 4px; padding: 6px 10px;
  line-height: 1.7; margin-bottom: 4px;
}
.building-prereq {
  font-size: 0.78rem; color: var(--red); margin-top: 4px;
  padding: 4px 10px; background: rgba(204,68,68,0.08); border-radius: 4px;
}
.building-benefit {
  color: var(--green); font-size: 0.85rem;
  padding: 8px 12px; background: rgba(68,170,102,0.1); border-radius: 4px;
}
.built-badge {
  font-size: 0.72rem; background: rgba(68,170,102,0.2); color: var(--green);
  border-radius: 4px; padding: 3px 8px; white-space: nowrap; margin-left: auto;
}
.locked-badge {
  font-size: 0.72rem; background: rgba(180,180,180,0.15); color: var(--text-dim);
  border-radius: 4px; padding: 3px 8px; white-space: nowrap; margin-left: auto;
}

/* ── Encounter screen ─────────────────────────────────────── */
#screen-encounter { align-items: center; justify-content: center; }
.encounter-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 40px; width: 500px; max-width: 95vw;
  text-align: center; box-shadow: var(--shadow);
}
.encounter-box h2 { font-size: 1.6rem; color: var(--gold); margin-bottom: 4px; }
.enc-army {
  display: flex; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin: 16px 0;
}
.enc-creature {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 14px; text-align: center; min-width: 70px;
}
.enc-creature .enc-unit-emoji { font-size: 1.8rem; }
.enc-creature .enc-unit-name { font-size: 0.78rem; color: var(--text-dim); margin-top: 4px; }
.enc-creature .enc-unit-count { font-size: 1rem; color: var(--text); font-weight: bold; }

/* ── Hero token (combat) ──────────────────────────────────── */
.hero-token {
  width: 80px; height: 56px; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background: none; border: none;
  position: relative; user-select: none;
  pointer-events: none;
  overflow: visible;
}
.hero-token::before {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 10px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.45) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.hero-token .token-emoji { font-size: 1.3rem; line-height: 1; }
.hero-token .hero-sprite {
  width: 115px; height: 115px;
  object-fit: contain;
  display: block;
  image-rendering: crisp-edges;
  filter: contrast(1.08) saturate(1.1);
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none;
  margin-bottom: -20px;
  margin-left: 10px;
}
.hero-token .token-hero-label {
  font-size: 0.52rem; color: var(--gold-light);
  max-width: 60px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: center; line-height: 1;
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
}

/* ── Hunt type odds panel ─────────────────────────────────── */
.hunt-type-odds {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px 16px; margin-bottom: 16px;
  max-width: 480px; margin-left: auto; margin-right: auto;
}
.ht-title {
  font-size: 0.72rem; color: var(--text-dim); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.06em; text-align: center;
}
.ht-rows { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.ht-row  { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; justify-content: center; }
.ht-emoji { font-size: 1rem; width: 22px; text-align: center; flex-shrink: 0; }
.ht-label { width: 56px; color: var(--text); font-weight: bold; }
.ht-prob  { width: 32px; }
.ht-gold  { width: 78px; }
.ht-art   { flex: 1; }


/* ── Hunt difficulty badges ─────────────────────────────────── */
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; margin-left:8px; border:1px solid var(--border); }
.badge-easy { background: rgba(0,200,0,0.15); }
.badge-medium { background: rgba(255,200,0,0.15); }
.badge-hard { background: rgba(255,0,0,0.15); }

/* ── HUD gold in resources (first slot, highlighted) ────────── */
.hud-res-gold {
  color: var(--gold-light) !important;
  font-weight: bold;
  padding: 1px 6px;
  background: rgba(201,168,76,0.1);
  border-radius: 4px;
  border: 1px solid rgba(201,168,76,0.25);
  margin-right: 2px;
}
.hud-res-gold b { color: var(--gold-light); }

/* ── Hunt discovery panel ────────────────────────────────────── */
.hunt-disc-intro {
  font-size: 0.82rem; color: var(--text-dim); margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.hunt-disc-desc {
  font-size: 0.78rem; color: var(--text-dim); margin-bottom: 12px;
  opacity: 0.8;
}
.hunt-disc-creature {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  margin-bottom: 12px;
}
.hunt-creature-emoji { font-size: 2.4rem; flex-shrink: 0; }
.hunt-creature-info  { flex: 1; }
.hunt-creature-name  { font-size: 1.05rem; color: var(--text); font-weight: bold; margin-bottom: 3px; }
.hunt-creature-gold  { font-size: 0.88rem; color: var(--gold-light); margin-bottom: 3px; }
.hunt-creature-diff  { font-size: 0.82rem; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.diff-badge { font-weight: 700; padding: 1px 7px; border-radius: 4px; font-size: 0.78rem; }
.diff-easy   { background: rgba(76,175,80,0.18);  color: #6fcf72; border: 1px solid rgba(76,175,80,0.4); }
.diff-medium { background: rgba(201,168,76,0.18); color: var(--gold-light); border: 1px solid rgba(201,168,76,0.4); }
.diff-hard   { background: rgba(220,80,80,0.18);  color: #e07070; border: 1px solid rgba(220,80,80,0.4); }
.diff-art    { font-size: 0.74rem; color: var(--text-dim); }
.hunt-disc-actions   {
  display: flex; gap: 10px; margin-top: 10px;
}
.hunt-disc-actions .btn { flex: 1; }

/* ── Enterprise overview cards ───────────────────────────────── */
.ent-overview-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; margin-bottom: 8px;
  transition: border-color 0.2s;
}
.ent-overview-card:hover { border-color: var(--gold-dark); }
.ent-overview-card:last-child { margin-bottom: 0; }
.ent-overview-left {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.ent-overview-emoji { font-size: 1.5rem; flex-shrink: 0; }
.ent-overview-info  { flex: 1; min-width: 0; }
.ent-overview-name  { font-size: 0.9rem; color: var(--text); margin-bottom: 3px; }
.ent-overview-stats {
  display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-dim);
  flex-wrap: wrap;
}
.ent-overview-sep { color: var(--border); }
.ent-working-badge {
  display: inline-block; font-size: 0.65rem; padding: 1px 6px;
  background: rgba(68,170,102,0.2); color: var(--green);
  border: 1px solid rgba(68,170,102,0.4); border-radius: 3px;
  margin-left: 4px; vertical-align: middle;
}

/* ── Enterprise detail panel ─────────────────────────────────── */
.ent-detail-panel {
  display: flex; flex-direction: column; gap: 0;
}
.ent-detail-back {
  background: none; border: none; color: var(--text-dim);
  font-family: inherit; font-size: 0.82rem; cursor: pointer;
  padding: 0 0 12px 0; text-align: left; transition: color 0.15s;
}
.ent-detail-back:hover { color: var(--gold); }

.ent-detail-header {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  margin-bottom: 12px;
}
.ent-detail-emoji { font-size: 2rem; flex-shrink: 0; }
.ent-detail-title { flex: 1; }
.ent-detail-name  { font-size: 1.05rem; color: var(--gold-light); font-weight: bold; }
.ent-detail-zone  { font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; }

/* Stat table */
.ent-detail-stats {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 4px;
}
.ent-detail-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid rgba(42,42,85,0.6);
}
.ent-detail-row:last-child { border-bottom: none; }
.ent-detail-label { font-size: 0.8rem; color: var(--text-dim); }
.ent-detail-value { font-size: 0.88rem; color: var(--text); font-weight: bold; }

/* Workers section */
.ent-workers-section {
  margin-top: 14px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.ent-workers-header {
  font-size: 0.8rem; color: var(--text); font-weight: bold; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ent-workers-count-badge {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 6px; font-size: 0.75rem; color: var(--gold);
}
.ent-workers-list {
  font-size: 0.78rem; color: var(--text-dim); line-height: 1.6; word-break: break-word;
}

/* Production table */
.ent-produced-section {
  margin-top: 14px;
}
.ent-produced-title {
  font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 8px;
}
.ent-prod-table {
  width: 100%; border-collapse: collapse;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  font-size: 0.8rem;
}
.ent-prod-table th {
  background: var(--bg2); color: var(--text-dim); font-weight: normal;
  padding: 7px 10px; text-align: left; font-size: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.ent-prod-table td {
  padding: 9px 10px; color: var(--text);
  border-bottom: 1px solid rgba(42,42,85,0.4);
}
.ent-prod-table tr:last-child td { border-bottom: none; }
.ent-prod-buy-cell {
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
}
.ent-prod-buy-cell .btn { padding: 3px 9px; font-size: 0.74rem; }

/* ── NEWS ── */
.news-body { padding: 16px; max-width: 600px; margin: 0 auto; }
.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-item {
  background: rgba(30,30,60,0.8); border: 1px solid rgba(100,100,200,0.2);
  border-radius: 8px; padding: 12px; cursor: pointer; transition: all 0.15s;
}
.news-item:hover { border-color: rgba(100,100,200,0.5); }
.news-item.unread { border-left: 3px solid #f59e0b; }
.news-item .news-title { font-weight: bold; font-size: 14px; color: #e0d5ff; }
.news-item .news-date { font-size: 11px; color: #6b7280; margin-top: 4px; }
.news-item .news-text { font-size: 13px; color: #9ca3af; margin-top: 6px; line-height: 1.4; }
.news-badge {
  display: inline-block; background: #f59e0b; color: #000; font-size: 10px;
  font-weight: bold; border-radius: 8px; padding: 1px 5px; margin-left: 4px;
  min-width: 14px; text-align: center;
}

/* ── CHAT ── */
.chat-body { padding: 16px; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; height: calc(100vh - 80px); }
.chat-messages {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  background: rgba(10,10,30,0.6); border: 1px solid rgba(100,100,200,0.2);
  border-radius: 8px; padding: 10px; margin: 10px 0;
}
.chat-msg { font-size: 13px; line-height: 1.4; }
.chat-msg .chat-name { font-weight: bold; margin-right: 6px; }
.chat-msg .chat-text { color: #d1d5db; }
.chat-msg .chat-time { font-size: 10px; color: #6b7280; margin-left: 6px; }
.chat-input-row { display: flex; gap: 8px; }
.chat-input {
  flex: 1; background: rgba(30,30,60,0.8); border: 1px solid rgba(100,100,200,0.3);
  border-radius: 6px; padding: 8px 12px; color: #e0e0ff; font-size: 13px;
}
.chat-input:focus { outline: none; border-color: #818cf8; }
.chat-send { white-space: nowrap; }

/* ── Leaderboard ──────────────────────────────────────────── */
.leaderboard-body {
  max-width: 700px; margin: 0 auto; padding: 16px;
}
.lb-tabs { display: flex; gap: 4px; margin: 12px 0; }
.lb-tab {
  padding: 6px 16px; border-radius: 6px; cursor: pointer;
  background: rgba(30,30,60,0.6); border: 1px solid rgba(100,100,200,0.2);
  color: var(--text-dim); font-size: 0.8rem; transition: all 0.15s;
}
.lb-tab:hover { border-color: rgba(100,100,200,0.5); }
.lb-tab.active { background: rgba(80,80,180,0.3); border-color: #818cf8; color: #e0e0ff; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.lb-table th {
  text-align: left; padding: 8px 10px; color: var(--text-dim); font-weight: 600;
  border-bottom: 1px solid rgba(100,100,200,0.2); font-size: 0.7rem; text-transform: uppercase;
}
.lb-table td { padding: 7px 10px; border-bottom: 1px solid rgba(60,60,100,0.15); }
.lb-table tr:hover td { background: rgba(60,60,120,0.15); }
.lb-rank { font-weight: bold; color: var(--text-dim); width: 30px; }
.lb-rank-1 { color: #ffd700; }
.lb-rank-2 { color: #c0c0c0; }
.lb-rank-3 { color: #cd7f32; }
.lb-faction { font-size: 0.7rem; color: var(--text-dim); }
.lb-val { font-weight: bold; color: #e0e0ff; }

/* ── Hover tooltip (combat) — hidden, replaced by damage preview ── */
.unit-hover-tip { display: none !important; }
/* ── Damage preview card (floats above enemy token on hover) ── */
.combat-dmg-preview {
  position: fixed; z-index: 9990; pointer-events: none;
  transform: translate(-50%, calc(-100% - 55px));
  background: none;
  border: none;
  padding: 0;
}
.combat-dmg-preview::before { display: none; }
.combat-dmg-preview::after { display: none; }
.cdp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.1rem; font-weight: 700;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1.4;
}
.cdp-icon {
  display: inline-block;
  width: 1.2em;
  text-align: center;
  flex-shrink: 0;
}
.cdp-dmg {
  color: #ffe78a;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 0 8px rgba(255,210,60,0.8), 0 0 20px rgba(255,190,30,0.5), 0 0 36px rgba(201,168,76,0.3);
}
.cdp-kills {
  color: #ff8a6a;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 0 8px rgba(220,80,50,0.8), 0 0 20px rgba(200,60,40,0.5), 0 0 36px rgba(180,40,20,0.3);
}

/* ── Active unit ring (flat on grid plane, double dashed counter-rotating) ─── */
.unit-active-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  border: none;
  background: none;
}
/* Outer ring — dashed, rotates clockwise */
.unit-active-ring::before {
  content: '';
  position: absolute;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  border-radius: 50%;
  border: 2.5px dashed rgba(80,160,255,0.8);
  box-shadow: 0 0 6px rgba(40,120,240,0.4), 0 0 12px rgba(40,120,240,0.15);
  animation: ring-spin-cw 4s linear infinite;
}
/* Inner ring — dashed, rotates counter-clockwise, smaller */
.unit-active-ring::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border-radius: 50%;
  border: 1.5px dashed rgba(120,180,255,0.6);
  box-shadow: 0 0 4px rgba(60,140,255,0.3), inset 0 0 8px rgba(40,120,240,0.08);
  animation: ring-spin-ccw 6s linear infinite;
}
@keyframes ring-spin-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ring-spin-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
/* Enemy rings — red */
.unit-active-ring[data-side="enemy"]::before {
  border-color: rgba(255,60,60,0.8);
  box-shadow: 0 0 6px rgba(240,30,30,0.4), 0 0 12px rgba(220,0,0,0.15);
}
.unit-active-ring[data-side="enemy"]::after {
  border-color: rgba(255,100,100,0.6);
  box-shadow: 0 0 4px rgba(255,50,50,0.3), inset 0 0 8px rgba(220,0,0,0.08);
}
/* Coop: ally rings — green (host stays default blue) */
.unit-active-ring[data-owner="ally"]::before {
  border-color: rgba(80,220,120,0.85);
  box-shadow: 0 0 6px rgba(50,200,90,0.4), 0 0 12px rgba(30,180,60,0.15);
}
.unit-active-ring[data-owner="ally"]::after {
  border-color: rgba(130,245,160,0.65);
  box-shadow: 0 0 4px rgba(80,220,110,0.3), inset 0 0 8px rgba(30,180,60,0.08);
}

/* ── Targeting crosshair on attacked unit ──────────────────── */
.target-crosshair {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
  animation: crosshair-pulse 1.2s ease-in-out infinite;
  transition: opacity 0.25s ease-out;
  border-radius: 50%;
}
/* Radial glow emanating from the cross */
.target-crosshair[data-color="blue"] {
  background: radial-gradient(circle, rgba(60,140,255,0.45) 0%, rgba(40,120,240,0.2) 35%, transparent 65%);
  box-shadow: 0 0 25px rgba(40,120,240,0.7), 0 0 50px rgba(60,150,255,0.4), 0 0 80px rgba(80,160,255,0.15);
}
.target-crosshair[data-color="red"] {
  background: radial-gradient(circle, rgba(255,50,50,0.45) 0%, rgba(240,30,30,0.2) 35%, transparent 65%);
  box-shadow: 0 0 25px rgba(240,30,30,0.7), 0 0 50px rgba(255,60,60,0.4), 0 0 80px rgba(255,80,80,0.15);
}
.target-crosshair.fading {
  opacity: 0 !important;
}
/* Cross lines via pseudo-elements */
.target-crosshair::before,
.target-crosshair::after {
  content: '';
  position: absolute;
  border-radius: 2px;
}
/* Diagonal line 1 (top-left to bottom-right) */
.target-crosshair::before {
  left: 50%;
  top: 0%;
  bottom: 0%;
  width: 4px;
  transform: translateX(-50%) rotate(45deg);
  transform-origin: center center;
}
/* Diagonal line 2 (top-right to bottom-left) */
.target-crosshair::after {
  left: 50%;
  top: 0%;
  bottom: 0%;
  width: 4px;
  transform: translateX(-50%) rotate(-45deg);
  transform-origin: center center;
}
/* Blue for player attacks */
.target-crosshair[data-color="blue"]::before,
.target-crosshair[data-color="blue"]::after {
  background: rgba(120,190,255,1);
  box-shadow: 0 0 12px rgba(40,120,240,1), 0 0 28px rgba(40,120,240,0.7), 0 0 50px rgba(60,140,255,0.35);
}
/* Red for enemy attacks */
.target-crosshair[data-color="red"]::before,
.target-crosshair[data-color="red"]::after {
  background: rgba(255,80,80,1);
  box-shadow: 0 0 12px rgba(240,30,30,1), 0 0 28px rgba(240,30,30,0.7), 0 0 50px rgba(255,50,50,0.35);
}
@keyframes crosshair-pulse {
  0%   { transform: rotate(0deg)   scale(1);    filter: brightness(1)   drop-shadow(0 0 8px rgba(255,255,255,0.4)); }
  50%  { transform: rotate(15deg)  scale(1.15); filter: brightness(1.7) drop-shadow(0 0 22px rgba(255,255,255,0.8)); }
  100% { transform: rotate(0deg)   scale(1);    filter: brightness(1)   drop-shadow(0 0 8px rgba(255,255,255,0.4)); }
}

/* ── Demo 9:16 viewport ────────────────────────────────────── */
body.demo-mode {
  background: #000 !important;
  overflow: hidden;
}
body.demo-mode #screen-combat {
  background: #000 !important;
}
.demo-viewport {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1080px;
  height: 1200px;
  overflow: hidden;
  z-index: 100;
  background: #000;
}
.demo-viewport .combat-main-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 1080px;
  height: 1200px;
}
.demo-promo-top {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  font-family: Cinzel, serif;
  font-size: 52px;
  font-weight: 900;
  color: #ffd700;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
    0 0 15px rgba(255,215,0,0.8),
    0 0 30px rgba(255,180,0,0.5),
    0 0 60px rgba(255,140,0,0.25),
    0 2px 4px rgba(0,0,0,0.9);
  animation: demo-promo-glow 2.5s ease-in-out infinite;
}
@keyframes demo-promo-glow {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 10px rgba(255,215,0,0.5));
    letter-spacing: 1px;
  }
  50% {
    filter: brightness(1.3) drop-shadow(0 0 25px rgba(255,215,0,0.9));
    letter-spacing: 3px;
  }
}

/* ── Demo overlays ─────────────────────────────────────────── */
.demo-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.demo-overlay.visible {
  opacity: 1;
  transform: scale(1);
}
.demo-overlay.fade-out {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}
.demo-overlay-fire {
  font-family: Cinzel, serif;
  font-size: 48px;
  font-weight: 900;
  color: #ff6600;
  text-shadow:
    0 0 20px rgba(255,100,0,0.9),
    0 0 40px rgba(255,60,0,0.6),
    0 0 80px rgba(255,30,0,0.3),
    0 2px 4px rgba(0,0,0,0.8);
  animation: demo-fire-pulse 1.5s ease-in-out infinite;
}
.demo-overlay-vs {
  font-family: Cinzel, serif;
  font-size: 36px;
  font-weight: 700;
  color: #e8c96d;
  text-shadow:
    0 0 15px rgba(232,201,109,0.6),
    0 2px 6px rgba(0,0,0,0.9);
  letter-spacing: 1px;
}
.demo-overlay-trophy {
  font-family: Cinzel, serif;
  font-size: 52px;
  font-weight: 900;
  color: #ffd700;
  text-shadow:
    0 0 25px rgba(255,215,0,0.9),
    0 0 50px rgba(255,180,0,0.6),
    0 0 100px rgba(255,150,0,0.3),
    0 2px 4px rgba(0,0,0,0.8);
  animation: demo-trophy-pulse 1s ease-in-out infinite;
}
@keyframes demo-fire-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50%      { filter: brightness(1.3); transform: scale(1.05); }
}
@keyframes demo-trophy-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50%      { filter: brightness(1.4); transform: scale(1.08); }
}
/* ── Wait/Defend badges on tokens ─────────────────────────── */
.token-badge {
  position: absolute; top: -4px; right: -4px; width: 18px; height: 18px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 10px; z-index: 20; pointer-events: none;
  border: 1px solid rgba(0,0,0,0.4);
}
.token-badge-defend { background: rgba(60,120,220,0.85); }
.token-badge-wait { background: rgba(180,160,60,0.85); }

/* ── Morale/luck proc effects ─────────────────────────────── */
.morale-burst, .luck-burst {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  font-size: 32px;
  transform: translateX(-50%);
  animation: burst-up 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.morale-burst {
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.9),
    0 0 25px rgba(255, 160, 0, 0.6),
    0 2px 4px rgba(0,0,0,0.8);
}
.luck-burst {
  text-shadow:
    0 0 10px rgba(80, 255, 120, 0.9),
    0 0 25px rgba(0, 200, 80, 0.6),
    0 2px 4px rgba(0,0,0,0.8);
}
@keyframes burst-up {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.5); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.4); }
  45%  { opacity: 1; transform: translateX(-50%) translateY(-28px) scale(1.1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-70px) scale(0.9); }
}

/* Golden animated glow on luck sprite canvas */
.luck-canvas-glow {
  filter:
    drop-shadow(0 0 3px rgba(0,0,0,0.9))
    drop-shadow(0 0 10px rgba(255,215,0,1))
    drop-shadow(0 0 22px rgba(255,180,0,0.9))
    drop-shadow(0 0 44px rgba(255,160,0,0.65));
  animation: luck-glow-pulse 0.3s ease-in-out infinite alternate;
}
@keyframes luck-glow-pulse {
  0%   { filter: drop-shadow(0 0 3px rgba(0,0,0,0.9)) drop-shadow(0 0 10px rgba(255,215,0,1)) drop-shadow(0 0 22px rgba(255,180,0,0.9)) drop-shadow(0 0 44px rgba(255,160,0,0.65)); }
  100% { filter: drop-shadow(0 0 3px rgba(0,0,0,0.9)) drop-shadow(0 0 18px rgba(255,230,60,1)) drop-shadow(0 0 36px rgba(255,210,30,1)) drop-shadow(0 0 60px rgba(255,180,0,0.8)); }
}

/* Big expanding radial golden glow behind unit on luck proc */
.luck-radial-glow {
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,215,0,0.7) 0%, rgba(255,180,0,0.4) 30%, rgba(255,160,0,0.15) 60%, transparent 100%);
  box-shadow:
    0 0 30px 10px rgba(255,215,0,0.5),
    0 0 60px 20px rgba(255,180,0,0.3),
    0 0 100px 40px rgba(255,160,0,0.15);
  animation: luck-radial-expand 0.7s ease-out forwards;
}
@keyframes luck-radial-expand {
  0%   { width: 0; height: 0; opacity: 0.9; }
  25%  { width: 160px; height: 160px; opacity: 1; }
  50%  { width: 240px; height: 240px; opacity: 0.85; }
  75%  { width: 280px; height: 280px; opacity: 0.5; }
  100% { width: 300px; height: 300px; opacity: 0; }
}

/* ── Formation roster ───────────────────────────────────────────
   In-setup version of the ATB bar. Shows the player's stacks as a
   click-to-select row with portrait + count + split button. The
   container is the same .atb-bar — we just switch its contents based
   on combat mode, so when battle starts the icons morph visually into
   the turn-order timeline (same position, same chrome). */
.atb-bar.formation-roster {
  gap: 6px;
  justify-content: center;
}
/* Formation roster slots inherit .atb-unit chrome (background, size,
   portrait layout). Only overrides here: selectable/hover affordances
   and the dot/button decorations unique to setup phase. Clicking the
   card should feel alive — the slot lifts + gains a gold glow so it
   reads as "I am selectable" before the player even hovers. */
.formation-roster-slot {
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.formation-roster-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(232,201,109,0.4), 0 3px 10px rgba(0,0,0,0.5);
  filter: brightness(1.08);
}
.formation-roster-slot.selected {
  box-shadow: 0 0 0 2px #f0dc8a, 0 0 18px rgba(240,220,138,0.75);
  transform: translateY(-3px);
}
.formation-roster-slot.unplaced {
  box-shadow: 0 0 0 2px rgba(220,64,64,0.75), 0 0 10px rgba(220,64,64,0.35);
}
.roster-split-btn {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,12,6,0.85);
  border: 1px solid rgba(232,201,109,0.55);
  border-radius: 3px;
  color: #e8c96d; font-size: 0.78rem; line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.roster-split-btn:hover {
  background: #c9a84c;
  color: #1a1000;
}
.roster-unplaced-dot {
  position: absolute; top: 4px; left: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #dc4040;
  box-shadow: 0 0 6px rgba(220,64,64,0.9);
}
.roster-empty {
  padding: 20px;
  font-family: 'Crimson Text', serif;
  color: #9a8a6a;
  font-style: italic;
}

/* ── Turn timer ─────────────────────────────────────────────────
   Lives above .combat-bottom. Always visible during battle. The
   horizontal fill bar drains as seconds tick down; the value turns
   red and pulses when <5s remain so you can't miss it. */
.turn-timer {
  display: flex; align-items: center; gap: 10px;
  /* Top-LEFT corner of the 1200×700 combat viewport — the right side
     is reserved for the audio button + Magic/Wait/Defend/Surrender
     action buttons, and the top-center has the "YOUR TURN" banner.
     Left side is clear, so the timer sits there without overlapping
     anything. */
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 30;
  padding: 8px 14px;
  min-width: 190px;
  background: linear-gradient(180deg, rgba(30,20,10,0.92), rgba(18,12,6,0.96));
  border: 2px solid rgba(201,168,76,0.6);
  border-radius: 5px;
  font-family: 'Cinzel', serif;
  color: #e8c96d;
  box-shadow: 0 3px 10px rgba(0,0,0,0.7), inset 0 1px 0 rgba(232,201,109,0.25);
  pointer-events: none;
}
.turn-timer .tt-label {
  font-size: 0.72rem; letter-spacing: 2px;
  color: #c9a84c;
}
.turn-timer .tt-value {
  font-size: 1.1rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 1.6em; text-align: right;
}
.turn-timer .tt-unit {
  font-size: 0.72rem; color: #9a8a6a;
}
.turn-timer.urgent .tt-value {
  color: #ff6b6b;
  animation: tt-pulse 0.6s ease-in-out infinite alternate;
}
.turn-timer.expired .tt-value { color: #ff3030; }
@keyframes tt-pulse {
  from { opacity: 1; }
  to   { opacity: 0.55; }
}

/* ── Hero-info popup polish ─────────────────────────────────────
   Portrait at the top-left of the header (circular gold frame) +
   pretty "Immune" badge for necromancer morale. Sits alongside the
   existing .uip-* popup styles. */
/* Hero popups need a bit more width than unit popups because the
   stats grid has longer labels ("SPELL POWER", "KNOWLEDGE") and a 3×3
   equip grid underneath. Target the .hero variant specifically so
   regular unit popups keep their smaller footprint. */
.unit-info-popup.hero {
  min-width: 300px !important;
  max-width: 320px !important;
  width: 300px;
}
.uip-header.uip-header-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 8px;
}
.uip-header-text { flex: 1; min-width: 0; }
.uip-hero-portrait-wrap {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(232,201,109,0.7);
  background: rgba(0,0,0,0.55);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(232,201,109,0.35);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.uip-hero-portrait {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.uip-hero-portrait-fallback {
  font-size: 22px;
  color: #c9a84c;
}

/* Morale "Immune" value for necromancers — same visual weight as the
   tiny "MORALE" label rather than the large numeric stat values, so
   the Morale row doesn't visually dominate the column. Label-sized
   (9px) caps + gold so it still reads as "active". */
.uip-immune-badge {
  /* Inherit display from .uip-stat-val so the flex-child
     `margin-left: auto` still applies — otherwise Immune sticks to
     the Morale label instead of right-aligning like other values. */
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Cinzel', serif !important;
  font-style: normal !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: #e8c860 !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 6px rgba(200,160,40,0.35) !important;
}

/* ── Compositor isolation ──────────────────────────────────────
   `contain: layout paint` tells the browser that a canvas's
   painting is self-contained — repainting one unit's sprite
   canvas can't invalidate other units or the battlefield. The
   compositor batches much tighter, shaving the 300-450 ms
   "Commit" phases we see under heavy animation load.
   Safe: pure optimization hint, no visual change. */
.unit-token .token-img.sprite-sheet,
.unit-shadow .shadow-canvas,
.decor-canvas {
  contain: layout paint;
}

/* ── LOW-PERF MODE (2026-04-23 perf fix) ──────────────────────
   Auto-activates on weak hardware (cores ≤ 2 or deviceMemory ≤ 4)
   or manually via localStorage.lowPerfMode='on'. Kills expensive
   GPU-compositing effects that crush FPS on integrated GPUs.
   See client/js/low-perf.js for detection logic.

   What stays UNTOUCHED (per user request 2026-04-23):
   - Unit sprite-sheet animations (canvas drawImage) — untouched
   - Unit-token scale / position transforms — untouched
   - Idle animation timing — untouched

   What gets killed:
   - Gold-glow box-shadows on UI panels (cheap cosmetic)
   - Multi-layered animated ATB glow (was 4 stacked shadows × RAF)
   - backdrop-filter blur (very expensive on weak GPUs)
   - Panel border glow animations
*/

/* Kill every gold-accent box-shadow glow. Panels still have their
   dark drop-shadow for depth, just no gold halo. */
body.low-perf .btn-primary,
body.low-perf .btn-primary:hover,
body.low-perf .btn-secondary:hover,
body.low-perf .btn-danger:hover,
body.low-perf .map-cell:hover,
body.low-perf .diff-btn.selected,
body.low-perf .auth-box .faction-card.selected,
body.low-perf .faction-card.selected,
body.low-perf .panel.active {
  box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
}

/* ATB bar icons — kill blue/red aura on every portrait (worst
   offender: 12 portraits × 3-layer shadow every frame). Keep
   the solid border so teams are still distinguishable. */
body.low-perf .atb-unit.player,
body.low-perf .atb-unit.enemy,
body.low-perf .atb-unit {
  box-shadow: none !important;
}
body.low-perf .atb-unit.active {
  /* Kill the animated 4-layer glow entirely. Active unit still
     reads as active via the +18% scale and thicker border. */
  animation: none !important;
  box-shadow: none !important;
}

/* Kill the ATB bar's own backdrop-gradient shadow (cheap but
   redundant with the solid background-color fallback). */
body.low-perf .atb-bar::before {
  box-shadow: none !important;
}

/* Kill backdrop-filter blur globally — this is the single most
   expensive effect on weak GPUs. Any translucent UI panel just
   becomes solid instead of blurring what's behind it. */
body.low-perf * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Kill text-shadow on combat log + damage popups — small per-frame
   savings that add up when log updates fire. */
body.low-perf .combat-log *,
body.low-perf #combat-log *,
body.low-perf .combat-log-entry,
body.low-perf .damage-popup,
body.low-perf .floating-text {
  text-shadow: none !important;
}