/* ============================================================
   Heroes of Combat & Magic — Design Handoff Tokens & Primitives
   Ported from design_handoff_heroes_phase2/phase1-styles.css
   These are the foundation tokens. Components live in menu-redesign.css.
   ============================================================ */

:root {
  --bg-1: #0d0805;
  --bg-2: #1a1209;
  --bg-3: #221810;
  --wood: #5c3d1e;
  --wood-light: #9a6b3a;
  --gold: #c9a84c;
  --gold-light: #e8c96d;
  --gold-dark: #8a6f2e;
  --gold-faint: rgba(201, 168, 76, 0.18);
  --gold-line: rgba(201, 168, 76, 0.35);
  --gold-glow: rgba(232, 201, 109, 0.55);
  --text: #e8e0c8;
  --text-dim: #8a7a60;
  --text-bright: #f5ecd5;
  --text-mute: rgba(232, 224, 200, 0.55);
  --danger: #cc4444;
  --team-a: #c9a84c;
  --team-b: #cc4444;
  --team-c: #44aa66;
  --team-d: #4488cc;

  --glass-bg: linear-gradient(180deg, rgba(26,18,9,0.62), rgba(13,8,5,0.78));
  --glass-bg-strong: linear-gradient(180deg, rgba(26,18,9,0.82), rgba(13,8,5,0.92));
  --gold-grad: linear-gradient(180deg, #e8c96d 0%, #c9a84c 50%, #8a6f2e 100%);
  --gold-grad-soft: linear-gradient(180deg, rgba(232,201,109,0.22), rgba(138,111,46,0.10));

  --ring-soft: 0 0 0 1px var(--gold-line);
  --ring-strong: 0 0 0 1px rgba(232,201,109,0.55);
  --shadow-card: 0 24px 48px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 60px rgba(201,168,76,0.18);

  --font-display: "Cinzel", "Trajan Pro", "Cormorant Garamond", serif;
  --font-body: "Crimson Text", "Cormorant Garamond", "Spectral", Georgia, serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Scene backdrops — atmospheric placeholder gradients per map.
   These are still used as the colored wash BEHIND the actual
   battle webm so the page doesn't look black during webm load.
   ============================================================ */
.scene { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.scene::before, .scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

.scene-city4 {
  background:
    radial-gradient(ellipse at 30% 80%, rgba(201,168,76,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 35%, rgba(110,68,180,0.22) 0%, transparent 55%),
    radial-gradient(circle at 50% 110%, rgba(255,170,90,0.20) 0%, transparent 40%),
    linear-gradient(180deg, #0a0710 0%, #1a0e1f 35%, #2a1a18 70%, #100808 100%);
}
.scene-city4::before {
  background:
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%),
    repeating-linear-gradient(90deg, transparent 0 80px, rgba(0,0,0,0.18) 80px 82px) bottom/100% 40% no-repeat;
}
.scene-city4::after {
  background: radial-gradient(ellipse at 50% 60%, transparent 30%, rgba(0,0,0,0.45) 90%);
}

.scene-city1 {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(232,201,109,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 90%, rgba(204,68,68,0.18) 0%, transparent 45%),
    linear-gradient(180deg, #100805 0%, #1f140a 50%, #2c1810 100%);
}
.scene-city1::before { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6) 100%); }

.scene-desert {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255,180,90,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(180,100,40,0.22) 0%, transparent 50%),
    linear-gradient(180deg, #1a0e08 0%, #3a2410 45%, #5a3a18 75%, #1a0e05 100%);
}
.scene-desert::before { background: radial-gradient(ellipse at 50% 80%, rgba(0,0,0,0.5) 0%, transparent 60%); }

.scene-river {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(120,170,200,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 90%, rgba(60,90,140,0.30) 0%, transparent 55%),
    linear-gradient(180deg, #07101a 0%, #102234 45%, #0a1820 80%, #050a10 100%);
}
.scene-river::before { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%); }

/* Faction preview tiles (used inside FactionPicker active card) */
.faction-tile { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.faction-tile::before, .faction-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

.faction-tile-necro {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(160,96,208,0.45) 0%, transparent 55%),
    linear-gradient(180deg, #170820 0%, #2a1240 50%, #0a0510 100%);
}
.faction-tile-necro::before {
  background:
    radial-gradient(circle at 50% 45%, rgba(200,160,255,0.6) 0%, transparent 18%),
    radial-gradient(circle at 30% 30%, rgba(160,96,208,0.18) 0%, transparent 30%),
    radial-gradient(circle at 75% 25%, rgba(160,96,208,0.14) 0%, transparent 28%);
}
.faction-tile-beast {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(168,192,80,0.42) 0%, transparent 55%),
    linear-gradient(180deg, #0e1a08 0%, #1f3010 50%, #050a02 100%);
}
.faction-tile-beast::before {
  background:
    radial-gradient(circle at 50% 45%, rgba(200,232,120,0.55) 0%, transparent 18%),
    radial-gradient(circle at 28% 70%, rgba(168,192,80,0.18) 0%, transparent 30%),
    radial-gradient(circle at 75% 35%, rgba(168,192,80,0.14) 0%, transparent 28%);
}
.faction-tile-machinas {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(144,112,255,0.42) 0%, transparent 55%),
    linear-gradient(180deg, #0a0820 0%, #181638 50%, #050414 100%);
}
.faction-tile-machinas::before {
  background:
    radial-gradient(circle at 50% 45%, rgba(180,160,255,0.55) 0%, transparent 18%),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(144,112,255,0.07) 12px 13px) center/100% 70% no-repeat;
}
.faction-tile-knight {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(232,201,109,0.4) 0%, transparent 55%),
    linear-gradient(180deg, #1a1208 0%, #3a2c14 50%, #0a0805 100%);
}
.faction-tile-knight::before {
  background: radial-gradient(circle at 50% 45%, rgba(255,235,170,0.5) 0%, transparent 20%);
}
.faction-tile-locked::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.7));
}

/* Atmosphere layers (grain + vignette) */
.grain {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: overlay; opacity: 0.35;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 3px 3px;
}
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0,0,0,0.65) 100%);
}

/* Chat bubble pulse keyframe (used in S4) */
@keyframes chatPulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,0.55), 0 8px 22px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,230,150,0.25); }
  70%  { box-shadow: 0 0 0 14px rgba(201,168,76,0),    0 8px 22px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,230,150,0.25); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0),       0 8px 22px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,230,150,0.25); }
}

/* Online status pulse */
@keyframes onlinePulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* Card panel enter animation */
@keyframes cardEnter {
  0% { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ============================================================
   Glass card primitive
   ============================================================ */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: var(--r-lg);
  border: 1px solid var(--gold-line);
  box-shadow: var(--shadow-card);
  color: var(--text);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 30%);
}
.glass-strong { background: var(--glass-bg-strong); }

/* ============================================================
   Type
   ============================================================ */
.t-sect {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold-light);
}
.t-label {
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.62rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-dim);
}
.t-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.6rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-bright);
}
.t-body { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.45; color: var(--text); }
.t-stat { font-family: var(--font-display); font-weight: 700; color: var(--gold-light); font-size: 13px; letter-spacing: 0.5px; }
.t-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; }

/* ============================================================
   Buttons & pills
   ============================================================ */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 22px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase;
  color: #1a0f04;
  background: var(--gold-grad);
  border: 1px solid #f0d27a;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(201,168,76,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,230,150,0.4);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201,168,76,0.55), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-gold:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 18px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(232,201,109,0.05);
  border: 1px dashed var(--gold-line);
  border-radius: 10px;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.btn-ghost:hover { background: rgba(232,201,109,0.1); border-color: var(--gold-light); }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 18px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #ffe1e1;
  background: linear-gradient(180deg, #d35a5a 0%, #a83838 100%);
  border: 1px solid rgba(255,140,140,0.4);
  border-radius: 10px;
  cursor: pointer;
}

.pill-row {
  display: inline-flex; padding: 4px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
}
.pill {
  padding: 7px 16px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.pill:hover:not(.active):not(.disabled) { color: var(--gold-light); }
.pill.active {
  background: var(--gold-grad);
  color: #1a0f04;
  text-shadow: 0 1px 0 rgba(255,230,150,0.4);
  box-shadow: 0 2px 10px rgba(201,168,76,0.4);
}
.pill.disabled {
  opacity: 0.35; cursor: not-allowed;
  text-decoration: line-through;
}

/* Segmented (sliding indicator) */
.seg {
  position: relative; display: inline-flex; padding: 5px;
  background: linear-gradient(180deg, rgba(0,0,0,0.78), rgba(0,0,0,0.55));
  border: 1.5px solid var(--gold-line);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
}
.seg-item {
  position: relative; z-index: 1;
  padding: 9px 26px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-dim);
  background: transparent; border: 0;
  cursor: pointer;
  transition: color .25s var(--ease);
}
.seg-item.active { color: #1a0f04; text-shadow: 0 1px 0 rgba(255,230,150,0.4); }
.seg-item:not(.active):hover { color: var(--gold-light); }
.seg-thumb {
  position: absolute; top: 4px; bottom: 4px;
  border-radius: 999px;
  background: var(--gold-grad);
  box-shadow: 0 2px 8px rgba(201,168,76,0.4);
  transition: left .32s var(--ease), width .32s var(--ease);
  z-index: 0;
  pointer-events: none;
}

/* Online dot */
.online-pulse {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: #7be88a;
  box-shadow: 0 0 8px rgba(123,232,138,0.8);
}
.online-pulse::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid rgba(123,232,138,0.6);
  animation: onlinePulse 1.8s var(--ease) infinite;
}

/* Corner gold ornament — used on lobby slots and active map/faction tiles */
.corner-orn {
  position: absolute; width: 14px; height: 14px;
  border: 1.5px solid var(--gold); opacity: 0.65;
  pointer-events: none;
}
.corner-orn.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.corner-orn.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.corner-orn.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.corner-orn.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

/* Divider with gold tick */
.div-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent);
  position: relative;
}
.div-gold::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Avatar dot for chrome rows */
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4a3a20, #1a1006);
  border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  color: var(--gold-light);
}

/* Chip */
.chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 4px;
  font-family: var(--font-display); font-size: 9px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

/* No scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }