/* ═══════════════════════════════════════════════════════════════════════════
   Forge of Fists — Global Stylesheet
   Dark Fantasy / Medieval Political Intrigue LCG
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700;900&family=IM+Fell+English:ital@0;1&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap');

/* ── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-deep:       #0d0d1a;
  --bg-dark:       #1a1a2e;
  --bg-mid:        #16213e;
  --bg-panel:      #1e2640;
  --bg-card:       #f5e6c8;
  --bg-card-alt:   #e8d5a3;
  --bg-overlay:    rgba(0,0,0,0.75);

  /* Accents */
  --accent-rust:   #8b4513;
  --accent-amber:  #cd7f32;
  --accent-gold:   #b8860b;
  --accent-bright: #d4a017;
  --accent-dull:   #7a6520;

  /* Text */
  --text-primary:  #e8d5a3;
  --text-secondary:#a89060;
  --text-dark:     #2c1f0e;
  --text-muted:    #6b5a3e;

  /* Faction Colors */
  --faction-conquest:  #ed2124;
  --faction-community: #c5711c;
  --faction-creed:     #f5eb12;
  --faction-trade:     #68bd45;
  --faction-diplomacy: #3a53a4;
  --faction-neutral:   #989899;

  /* Faction Light (for text on dark backgrounds) */
  --faction-conquest-light:  #f5696b;
  --faction-community-light: #e08c3a;
  --faction-creed-light:     #f5eb12;
  --faction-trade-light:     #8cd96b;
  --faction-diplomacy-light: #6b82c8;
  --faction-neutral-light:   #b8b8b9;

  /* State Colors */
  --color-valid:   #00c851;
  --color-invalid: #ff4444;
  --color-warn:    #ffbb33;
  --color-info:    #4cc9f0;

  /* Sizes */
  --card-w:        120px;
  --card-h:        168px;
  --card-w-hand:   110px;
  --card-h-hand:   154px;
  --card-w-board:    100px;
  --card-h-board:    140px;
  --card-w-compact:   66px;
  --card-h-compact:   92px;
  --card-radius:       8px;
  --border-ornate: 2px solid var(--accent-gold);

  /* Fonts */
  --font-heading:      'Cinzel', 'Georgia', serif;
  --font-heading-deco: 'Cinzel Decorative', 'Cinzel', serif;
  --font-body:         'Spectral', 'IM Fell English', 'Georgia', serif;
  --font-body-italic:  'IM Fell English', 'Georgia', serif;
  --font-mono:         'Courier New', monospace;

  /* Parchment Game Board Colors */
  --color-parchment:      #F5ECD7;
  --color-parchment-dark: #D4B896;
  --color-realm:          #E8D5B0;
  --color-wilderness:     #C9B48A;
  --color-open-sea:       #B8C5C9;
  --color-battleline:     #5C3D11;
  --color-gold-warm:      #B8963E;
  --color-ink:            #2C1810;
  --color-ink-light:      #6B4C2A;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;
}

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

html {
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

a { color: var(--accent-amber); text-decoration: none; }
a:hover { color: var(--accent-bright); text-decoration: underline; }

button {
  font-family: var(--font-heading);
  cursor: pointer;
  border: none;
  outline: none;
  transition: all var(--transition-fast);
}

input, select, textarea {
  font-family: var(--font-body);
  background: var(--bg-panel);
  color: var(--text-primary);
  border: 1px solid var(--accent-dull);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 0.95rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 2px rgba(205,127,50,0.3);
}

select option { background: var(--bg-panel); color: var(--text-primary); }

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

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-rust), var(--accent-amber));
  color: #fff;
  border-color: var(--accent-amber);
  box-shadow: 0 2px 8px rgba(139,69,19,0.5);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--accent-amber), var(--accent-bright));
  box-shadow: 0 4px 16px rgba(205,127,50,0.6);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--accent-amber);
  border-color: var(--accent-amber);
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(205,127,50,0.15);
  color: var(--accent-bright);
}

.btn-danger {
  background: rgba(139,0,0,0.5);
  color: #ff6b6b;
  border-color: #8b0000;
}
.btn-danger:hover:not(:disabled) {
  background: rgba(139,0,0,0.8);
  color: #fff;
}

.btn-ghost {
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  border-color: rgba(255,255,255,0.1);
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-large {
  padding: 0.9rem 2.5rem;
  font-size: 1.05rem;
  border-radius: 6px;
}

.btn-sm {
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
}

/* ── Action Buttons (in-game) ───────────────────────────────────────────── */
.action-btn {
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  border-radius: 4px;
  background: rgba(184,134,11,0.15);
  color: var(--accent-bright);
  border: 1px solid var(--accent-dull);
}
.action-btn:hover:not(:disabled) {
  background: rgba(184,134,11,0.35);
  border-color: var(--accent-amber);
  box-shadow: 0 0 8px rgba(212,160,23,0.4);
}
.action-btn.active {
  background: rgba(184,134,11,0.4);
  border-color: var(--accent-bright);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD COMPONENT
   ══════════════════════════════════════════════════════════════════════════ */

.card {
  position: relative;
  width: var(--card-w-board);
  min-height: var(--card-h-board);
  background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-card-alt) 100%);
  border-radius: var(--card-radius);
  border: 2px solid var(--accent-dull);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.2);
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

/* Faction border accent (top bar) */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.card[data-faction="Conquest"]::before  { background: var(--faction-conquest); }
.card[data-faction="Community"]::before { background: var(--faction-community); }
.card[data-faction="Creed"]::before     { background: var(--faction-creed); }
.card[data-faction="Trade"]::before     { background: var(--faction-trade); }
.card[data-faction="Diplomacy"]::before { background: var(--faction-diplomacy); }
.card[data-faction="Neutral"]::before   { background: var(--faction-neutral); }

/* Faction left border */
.card[data-faction="Conquest"]  { border-left: 3px solid var(--faction-conquest); }
.card[data-faction="Community"] { border-left: 3px solid var(--faction-community); }
.card[data-faction="Creed"]     { border-left: 3px solid var(--faction-creed); }
.card[data-faction="Trade"]     { border-left: 3px solid var(--faction-trade); }
.card[data-faction="Diplomacy"] { border-left: 3px solid var(--faction-diplomacy); }
.card[data-faction="Neutral"]   { border-left: 3px solid var(--faction-neutral); }

/* Card States */
.card:hover:not(.exhausted):not(.unaffordable) {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.8), 0 0 12px rgba(205,127,50,0.3);
}

.card.selectable {
  cursor: pointer;
  border-color: var(--accent-amber);
  box-shadow: 0 0 10px rgba(205,127,50,0.4);
}

.card.selected {
  transform: translateY(-8px);
  border-color: var(--accent-bright);
  box-shadow: 0 12px 32px rgba(0,0,0,0.8), 0 0 20px rgba(212,160,23,0.7);
  z-index: 10;
}

.card.valid-target {
  border-color: var(--color-valid);
  box-shadow: 0 0 12px rgba(0,200,81,0.6);
  animation: pulse-valid 1.2s ease-in-out infinite;
}

.card.invalid-target {
  opacity: 0.45;
  filter: grayscale(0.5);
  cursor: not-allowed;
}

.card.attacker-selected {
  border-color: var(--accent-amber);
  box-shadow: 0 0 16px rgba(205,127,50,0.8);
  animation: pulse-amber 1s ease-in-out infinite;
}

.card.unaffordable {
  filter: grayscale(1) brightness(0.72);
}
.card.unaffordable .card-cost {
  color: var(--color-invalid);
  font-weight: 700;
}

/* Exhausted card */
.card.exhausted {
  transform: rotate(90deg);
  transform-origin: center center;
  margin: 20px -8px;
  position: relative;
  z-index: 2;
}
.card.exhausted:hover { transform: rotate(90deg) translateY(-2px); }

/* Guardian overlay */
.card.guardian::after {
  content: '🛡';
  position: absolute;
  top: 4px; right: 4px;
  font-size: 0.9rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* Card Structure */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 6px 2px;
  margin-top: 4px; /* space for faction bar */
  gap: 4px;
}

.card-type-icon {
  font-size: 0.72rem;
  flex-shrink: 0;
  opacity: 0.85;
  line-height: 1;
}

.cs-type-icon {
  font-size: 0.58rem;
  margin-right: 2px;
  opacity: 0.85;
}

.card-name {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  flex: 1;
}

.card-cost {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 900;
  background: var(--accent-dull);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.card-art {
  height: 48px;
  background: linear-gradient(135deg, rgba(139,69,19,0.15), rgba(75,0,130,0.1));
  border-top: 1px solid rgba(139,69,19,0.2);
  border-bottom: 1px solid rgba(139,69,19,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: rgba(0,0,0,0.2);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.card-art-icon { font-size: 1.6rem; opacity: 0.7; }

.card-type-line {
  font-size: 0.55rem;
  color: var(--text-muted);
  padding: 1px 6px;
  font-style: italic;
  border-bottom: 1px dashed rgba(139,69,19,0.2);
}

/* ── Corner stat badges (inside .card-art, full cards) ─────────────────── */
.card-stat-liq {
  position: absolute;
  top: 0; left: 0;
  background: #b3d9f0;
  color: #0a2a3a;
  font-family: var(--font-heading);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 5px;
  border-bottom-right-radius: 4px;
  border: 1px solid rgba(0,0,0,0.2);
  border-top: none; border-left: none;
  line-height: 1.4;
  pointer-events: none;
  z-index: 2;
}
.card-stat-bounty {
  position: absolute;
  top: 0; right: 0;
  background: #ffd700;
  color: #1a1000;
  font-family: var(--font-heading);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 5px;
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(0,0,0,0.25);
  border-top: none; border-right: none;
  line-height: 1.4;
  pointer-events: none;
  z-index: 2;
}
.card-stat-wv {
  position: absolute;
  bottom: 0; right: 0;
  background: #fff;
  color: #000;
  font-family: var(--font-heading);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 5px;
  border-top-left-radius: 4px;
  border: 1px solid rgba(0,0,0,0.3);
  border-bottom: none; border-right: none;
  line-height: 1.4;
  pointer-events: none;
  z-index: 2;
}
.card-stat-wv .damaged { color: #c00; }
.card-stat-growth {
  position: absolute;
  bottom: 0; left: 0;
  background: rgba(50,110,50,0.85);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.5rem;
  font-weight: 700;
  padding: 1px 4px;
  border-top-right-radius: 3px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 2;
}

.card-text {
  font-size: 0.55rem;
  padding: 2px 6px;
  color: var(--text-dark);
  line-height: 1.3;
  flex: 1;
  overflow: hidden;
}

.card-abilities {
  font-size: 0.52rem;
  padding: 2px 5px;
  color: var(--text-dark);
  line-height: 1.35;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-ability-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
}

.card-ability-cost {
  display: inline-block;
  background: #5a3e00;
  color: #f5d78c;
  border-radius: 3px;
  padding: 0 3px;
  font-size: 0.48rem;
  font-weight: bold;
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.card-ability-label {
  display: inline-block;
  background: #3a3a5a;
  color: #c8c8f5;
  border-radius: 3px;
  padding: 0 3px;
  font-size: 0.48rem;
  font-weight: bold;
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Attached item tags */
.attached-items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px 4px 3px;
}
.item-tag {
  background: rgba(90, 0, 120, 0.45);
  border: 1px solid rgba(180, 100, 220, 0.55);
  border-radius: 3px;
  color: #d8aaee;
  font-size: 0.48rem;
  font-family: var(--font-heading);
  padding: 1px 4px;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.card-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px 4px 4px;
}

.keyword {
  font-family: var(--font-heading);
  font-size: 0.45rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.keyword.rush       { background: #006400; color: #fff; }
.keyword.rage       { background: #8b0000; color: #fff; }
.keyword.kinship    { background: #4b6d8c; color: #fff; }
.keyword.guardian   { background: #5c3d11; color: #f5e6c8; }
.keyword.loyal      { background: #4b0082; color: #fff; }
.keyword.imbue      { background: #1a5c4d; color: #fff; }
.keyword.salvo      { background: #7a3d00; color: #fff; }
.keyword.charge     { background: #1a3a5c; color: #fff; }
.keyword.vigil      { background: #3d3d00; color: #ffd700; }
.keyword.truce      { background: #2d3d2d; color: #b8ffc8; }
.keyword            { background: #3d3020; color: #e8d5a3; }

/* Vigor HP bar on card (for monarchs/capitols/units) */
.card-hp-bar {
  height: 4px;
  background: rgba(0,0,0,0.2);
  margin: 0 4px 3px;
  border-radius: 2px;
  overflow: hidden;
}
.card-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #2d5a27, #00c851);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.card-hp-fill.low    { background: linear-gradient(90deg, #8b4513, #ff8c00); }
.card-hp-fill.critical { background: linear-gradient(90deg, #8b0000, #ff4444); }

/* Larger card variant (in hand) */
.card.card-in-hand {
  width: var(--card-w-hand);
  height: var(--card-h-hand);
  overflow: visible;  /* allow cost float badge above card edge */
}
.card.card-in-hand .card-name { font-size: 0.52rem; }
.card.card-in-hand .card-art  { height: 56px; }
.card.card-in-hand .card-text { display: none; }

/* Floating AP cost badge — shown above hand cards, hidden on board/popup cards */
.card-cost-float {
  display: none;  /* hidden by default; shown for hand cards below */
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-battleline);
  border: 2px solid var(--color-gold-warm);
  color: var(--color-parchment);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55);
  pointer-events: none;
}
#player-hand .card-cost-float { display: flex; }
#player-hand .card-cost        { display: none; }

/* Full-size card (detail panel) */
.card.card-detail {
  width: 180px;
  min-height: 332px;
}
.card.card-detail .card-name    { font-size: 0.8rem; }
.card.card-detail .card-art     { height: 160px; font-size: 2.2rem; background-position: center 25% !important; }
.card.card-detail .card-type-line { font-size: 0.7rem; }
.card.card-detail .card-stat-bounty { font-size: 0.7rem; padding: 2px 7px; }
.card.card-detail .card-stat-wv     { font-size: 0.7rem; padding: 2px 7px; }
.card.card-detail .card-text    { font-size: 0.7rem; }
.card.card-detail .keyword      { font-size: 0.6rem; }
.card.card-detail .card-cost    { width: 24px; height: 24px; font-size: 0.9rem; }

/* ── Monarch / Capitol special display ──────────────────────────────────── */
.monarch-display, .capitol-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--accent-dull);
  border-radius: 6px;
  min-width: 90px;
  max-width: 110px;
  gap: 4px;
}
.monarch-display img, .capitol-display img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-amber);
}
.monarch-name, .capitol-name {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  text-align: center;
  color: var(--text-primary);
}
.monarch-hp, .capitol-hp {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
  overflow: hidden;
}
.hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #2d5a27, #00c851);
  border-radius: 3px;
  transition: width 0.5s ease;
}
.hp-fill.low      { background: linear-gradient(90deg, #8b4513, #ff8c00); }
.hp-fill.critical { background: linear-gradient(90deg, #8b0000, #ff4444); }
.hp-text {
  font-size: 0.6rem;
  color: var(--text-secondary);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   ZONES
   ══════════════════════════════════════════════════════════════════════════ */

.zone {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px;
  min-height: calc(var(--card-h-board) + 12px);
  align-items: center;
  overflow-x: auto;
  border-radius: 4px;
  transition: background var(--transition-normal), box-shadow var(--transition-normal);
}

.zone::before {
  content: attr(data-label);
  position: absolute;
  top: 4px; left: 8px;
  font-size: 0.6rem;
  font-family: var(--font-heading);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: none;
}

.zone.empty-zone::after {
  content: attr(data-empty);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
  pointer-events: none;
  white-space: nowrap;
}

.zone.valid-drop {
  background: rgba(0,200,81,0.08);
  box-shadow: inset 0 0 0 2px rgba(0,200,81,0.4);
}

.zone-wilderness {
  background: rgba(45,90,39,0.08);
}

.zone-open-sea {
  background: rgba(26,58,92,0.12);
  border-radius: 4px;
  min-width: 120px;
  flex-direction: column;
  min-height: auto;
  max-height: 300px;
  overflow-y: auto;
}

.zone-realm {
  background: rgba(139,105,20,0.08);
  border-radius: 4px;
  flex-wrap: wrap;
  min-height: auto;
  max-height: 320px;
  overflow-y: auto;
}

.zone-hand {
  background: rgba(26,26,46,0.9);
  border-top: 2px solid var(--accent-dull);
  padding: 12px 16px 8px;
  overflow-x: auto;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  min-height: calc(var(--card-h-hand) + 24px);
}

/* ══════════════════════════════════════════════════════════════════════════
   GAME BOARD LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */

#game-board {
  display: grid;
  grid-template-rows: auto 1fr auto auto 1fr auto auto auto;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Info bars */
.player-info-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: linear-gradient(90deg, var(--bg-deep), var(--bg-mid));
  border-bottom: 1px solid rgba(184,134,11,0.2);
  font-size: 0.8rem;
  flex-wrap: wrap;
}
.player-info-bar.opponent-bar {
  border-bottom: none;
  border-top: 1px solid rgba(184,134,11,0.2);
}

.info-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}
.info-faction-tag {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
}
.info-ap {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent-bright);
  font-size: 0.9rem;
}
.info-bounty {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
}
.bounty-value {
  font-weight: 700;
  color: var(--accent-amber);
}
.bounty-value.pulse-warn {
  animation: pulse-gold 0.8s ease-in-out infinite;
  color: var(--color-warn);
}

.info-deck {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
}
.deck-count {
  font-weight: 700;
  color: var(--text-secondary);
}
.deck-count.low    { color: var(--color-warn); }
.deck-count.critical { color: var(--color-invalid); animation: pulse-red 1s infinite; }

/* Main play area */
#main-play-area {
  display: grid;
  grid-template-columns: 110px 1fr 110px;
  overflow: hidden;
  position: relative;
}

.left-column {
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 6px;
  background: rgba(0,0,0,0.2);
  border-right: 1px solid rgba(184,134,11,0.15);
  overflow-y: auto;
  min-width: 0;
}

.center-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.right-column {
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: rgba(0,0,0,0.2);
  border-left: 1px solid rgba(184,134,11,0.15);
  overflow-y: auto;
}

/* Wilderness rows */
.wilderness-row {
  flex: 1;
  overflow-y: hidden;
  overflow-x: auto;
}

/* Center divider */
#center-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  background: linear-gradient(90deg, var(--bg-deep), var(--bg-mid), var(--bg-deep));
  border-top: 1px solid rgba(184,134,11,0.3);
  border-bottom: 1px solid rgba(184,134,11,0.3);
  gap: 8px;
  flex-wrap: wrap;
  min-height: 44px;
}

.divider-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.divider-center {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.divider-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}

/* Active player name pulse */
@keyframes active-turn-pulse {
  0%, 100% { text-shadow: 0 0 6px rgba(212,160,23,0.5); color: var(--accent-bright); }
  50%       { text-shadow: 0 0 14px rgba(212,160,23,0.9), 0 0 4px rgba(255,220,80,0.6); color: #ffe080; }
}
.info-name.active-turn {
  animation: active-turn-pulse 1.6s ease-in-out infinite;
}

.active-player-badge {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.active-player-badge.your-turn {
  background: rgba(212,160,23,0.25);
  color: var(--accent-bright);
  border: 1px solid var(--accent-bright);
  box-shadow: 0 0 8px rgba(212,160,23,0.3);
}
.active-player-badge.opponent-turn {
  background: rgba(100,100,100,0.2);
  color: var(--text-muted);
  border: 1px solid rgba(100,100,100,0.3);
}


/* Waiting overlay */
#waiting-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--text-secondary);
  pointer-events: none;
  z-index: 5;
  letter-spacing: 0.1em;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════════════════ */

#sidebar {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: 280px;
  background: var(--bg-deep);
  border-left: 2px solid rgba(184,134,11,0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  z-index: 100;
  overflow: hidden;
}
#sidebar.open { transform: translateX(0); }

#sidebar-toggle {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 60px;
  background: var(--bg-panel);
  border: 1px solid var(--accent-dull);
  border-right: none;
  border-radius: 4px 0 0 4px;
  color: var(--accent-amber);
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 101;
  writing-mode: vertical-lr;
  letter-spacing: 0.15em;
  font-family: var(--font-heading);
  transition: all var(--transition-fast);
}
#sidebar-toggle:hover { background: var(--bg-mid); }
#sidebar.open + #sidebar-toggle { right: 280px; }

.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid rgba(184,134,11,0.2);
}
.sidebar-tab {
  flex: 1;
  padding: 8px 4px;
  font-size: 0.65rem;
  font-family: var(--font-heading);
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.sidebar-tab.active {
  color: var(--accent-amber);
  border-bottom-color: var(--accent-amber);
  background: rgba(184,134,11,0.08);
}

.sidebar-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding: 8px;
}
.sidebar-panel.active { display: flex; }

/* Action log */
#action-log-list {
  flex: 1;
  overflow-y: auto;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}
.log-entry {
  padding: 2px 4px;
  border-radius: 2px;
  border-left: 2px solid transparent;
}
.log-entry.attack  { border-left-color: var(--faction-conquest); color: #ff9999; }
.log-entry.play    { border-left-color: var(--faction-community); color: #99ff99; }
.log-entry.destroy { border-left-color: #666; color: #bbb; }
.log-entry.bounty  { border-left-color: var(--accent-amber); color: var(--accent-bright); }
.log-entry.system  { border-left-color: var(--faction-diplomacy); color: #99ccff; }

/* ══════════════════════════════════════════════════════════════════════════
   MODAL / OVERLAY
   ══════════════════════════════════════════════════════════════════════════ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-backdrop.hidden { display: none; }

.modal {
  background: linear-gradient(160deg, var(--bg-mid), var(--bg-deep));
  border: 1px solid var(--accent-gold);
  border-radius: 10px;
  padding: 32px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(184,134,11,0.2);
  position: relative;
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--accent-amber), var(--accent-bright));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.modal-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  border: none;
  padding: 4px;
  line-height: 1;
}
.modal-close:hover { color: var(--text-primary); }

/* End game modal */
#endgame-modal .modal-title.victory {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2.5rem;
}
#endgame-modal .modal-title.defeat {
  background: linear-gradient(135deg, #8b0000, #cc0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.final-scores {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 16px 0;
}
.score-block {
  text-align: center;
  padding: 12px 20px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  border: 1px solid var(--accent-dull);
}
.score-label { font-size: 0.75rem; color: var(--text-muted); }
.score-value { font-family: var(--font-heading); font-size: 1.5rem; color: var(--accent-bright); }

/* ══════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════════════════════════════════════════ */

#toast-container {
  position: fixed;
  top: 60px; left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.toast {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  padding: 8px 20px;
  border-radius: 20px;
  border: 1px solid;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  animation: toast-in 0.3s ease, toast-out 0.3s ease 2.7s forwards;
  white-space: nowrap;
}
.toast.info    { background: rgba(26,58,92,0.95); border-color: #4cc9f0; color: #4cc9f0; }
.toast.success { background: rgba(45,90,39,0.95); border-color: var(--color-valid); color: var(--color-valid); }
.toast.warn    { background: rgba(139,69,19,0.95); border-color: var(--color-warn); color: var(--color-warn); }
.toast.error   { background: rgba(139,0,0,0.95); border-color: var(--color-invalid); color: var(--color-invalid); }
.toast.cycle   { background: rgba(75,0,130,0.95); border-color: #c77dff; color: #fff; font-size: 1rem; padding: 10px 28px; }

/* ══════════════════════════════════════════════════════════════════════════
   LANDING PAGE
   ══════════════════════════════════════════════════════════════════════════ */

#landing-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.landing-bg {
  position: absolute;
  inset: 0;
  background: #1A0F0A;
  pointer-events: none;
}


.landing-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 680px;
  padding: 40px 20px;
  text-align: center;
}

.landing-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  background: linear-gradient(
    160deg,
    #e8d5a3 0%,
    var(--accent-bright) 30%,
    var(--accent-amber) 60%,
    var(--accent-rust) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(184,134,11,0.4));
  animation: title-glow 3s ease-in-out infinite alternate;
}

.landing-logo {
  width: min(640px, 92vw);
  height: auto;
}

.landing-subtitle {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: rgba(184,150,62,0.75);
  text-transform: uppercase;
  margin-top: -16px;
}

.landing-divider {
  width: 240px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-amber), transparent);
}

.landing-rules {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(184,134,11,0.28);
  border-radius: 8px;
  padding: 20px 28px;
  text-align: left;
  max-width: 500px;
  width: 100%;
}
.landing-rules h3 {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--accent-amber);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.landing-rules ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.landing-rules li {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding-left: 16px;
  position: relative;
}
.landing-rules li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--accent-dull);
  font-size: 0.6rem;
  top: 3px;
}

.landing-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.landing-name-input {
  width: 100%;
  max-width: 320px;
  padding: 10px 16px;
  font-size: 1rem;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(184,134,11,0.5);
  border-radius: 6px;
  color: var(--text-primary);
}
.landing-name-input:focus {
  border-color: var(--accent-amber);
  box-shadow: 0 0 12px rgba(205,127,50,0.3);
}
.landing-name-input::placeholder { color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   DECK BUILDER
   ══════════════════════════════════════════════════════════════════════════ */

#deck-builder {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.db-header {
  background: linear-gradient(90deg, var(--bg-deep), var(--bg-mid));
  border-bottom: 2px solid rgba(184,134,11,0.3);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.db-header h1 {
  font-size: 1.2rem;
  font-family: var(--font-heading);
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, var(--accent-amber), var(--accent-bright));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.db-header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}
.db-header select {
  min-width: 180px;
  background: rgba(0,0,0,0.3);
}

.db-main {
  display: grid;
  grid-template-columns: 1fr 320px;
  overflow: hidden;
}

/* Card grid (left panel) */
.db-left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgba(184,134,11,0.2);
}

.db-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(184,134,11,0.15);
  flex-wrap: wrap;
}

.faction-filter-btn {
  padding: 4px 12px;
  font-size: 0.7rem;
  font-family: var(--font-heading);
  border-radius: 12px;
  border: 1px solid;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
}
.faction-filter-btn:hover,
.faction-filter-btn.active {
  background: rgba(255,255,255,0.12);
}

.faction-filter-btn[data-faction="All"]        { border-color: var(--text-muted); color: var(--text-secondary); }
.faction-filter-btn[data-faction="Conquest"]   { border-color: var(--faction-conquest); color: var(--faction-conquest-light); }
.faction-filter-btn[data-faction="Community"]  { border-color: var(--faction-community); color: var(--faction-community-light); }
.faction-filter-btn[data-faction="Creed"]      { border-color: var(--faction-creed); color: var(--faction-creed-light); }
.faction-filter-btn[data-faction="Trade"]      { border-color: var(--faction-trade); color: var(--faction-trade-light); }
.faction-filter-btn[data-faction="Diplomacy"]  { border-color: var(--faction-diplomacy); color: var(--faction-diplomacy-light); }
.faction-filter-btn[data-faction="Neutral"]    { border-color: var(--faction-neutral); color: var(--faction-neutral-light); }
.faction-filter-btn.active[data-faction="All"]        { background: rgba(150,150,150,0.2); }
.faction-filter-btn.active[data-faction="Conquest"]   { background: rgba(237,33,36,0.25); }
.faction-filter-btn.active[data-faction="Community"]  { background: rgba(197,113,28,0.25); }
.faction-filter-btn.active[data-faction="Creed"]      { background: rgba(245,235,18,0.25); }
.faction-filter-btn.active[data-faction="Trade"]      { background: rgba(104,189,69,0.25); }
.faction-filter-btn.active[data-faction="Diplomacy"]  { background: rgba(58,83,164,0.35); }
.faction-filter-btn.active[data-faction="Neutral"]    { background: rgba(152,152,153,0.35); }

.db-search {
  flex: 1;
  min-width: 140px;
  padding: 4px 10px;
  font-size: 0.8rem;
}

.card-grid {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
  align-content: start;
}

/* Card grid items */
.card-grid .card {
  width: 100%;
  min-height: var(--card-h-board);
  cursor: pointer;
}
.card-grid .card:hover { transform: translateY(-4px) scale(1.03); }

.card-grid-count {
  position: absolute;
  bottom: 4px; right: 4px;
  background: rgba(0,0,0,0.7);
  color: var(--accent-bright);
  font-size: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
}

.card.violates-rule {
  border-color: var(--color-invalid) !important;
  box-shadow: 0 0 8px rgba(255,68,68,0.4);
}

/* Deck list (right panel) */
.db-right {
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.15);
  overflow: hidden;
}

.db-deck-header {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(184,134,11,0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.db-deck-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--accent-amber);
}
.db-counters {
  display: flex;
  gap: 10px;
  font-size: 0.75rem;
}
.counter-label { color: var(--text-muted); }
.counter-value { font-weight: 700; color: var(--text-primary); }
.counter-value.warn { color: var(--color-warn); }
.counter-value.over { color: var(--color-invalid); }

.deck-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
}
.deck-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid rgba(184,134,11,0.08);
}
.deck-list-item:hover { background: rgba(255,255,255,0.05); }
.deck-list-item.violates {
  background: rgba(255,68,68,0.12) !important;
  border-left: 2px solid var(--color-invalid);
}
.deck-list-item.violates .deck-list-name { color: var(--color-invalid); }
.deck-list-violation-icon {
  color: var(--color-invalid);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.deck-list-count {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--accent-amber);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.deck-list-name {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-list-faction {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.deck-list-faction[data-faction="Conquest"]  { background: var(--faction-conquest); }
.deck-list-faction[data-faction="Community"] { background: var(--faction-community); }
.deck-list-faction[data-faction="Creed"]     { background: var(--faction-creed); }
.deck-list-faction[data-faction="Trade"]     { background: var(--faction-trade); }
.deck-list-faction[data-faction="Diplomacy"] { background: var(--faction-diplomacy); }
.deck-list-faction[data-faction="Neutral"]   { background: var(--faction-neutral); }
.deck-list-cost {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Monarch / Capitol selection panels */
.db-selections {
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(184,134,11,0.2);
  flex-shrink: 0;
}
.db-sel-label {
  font-size: 0.58rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 3px;
}
.db-sel-card {
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  overflow: hidden;
}
.db-sel-card.empty {
  border: 2px dashed rgba(184,134,11,0.3);
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-sel-card.filled {
  border: 1px solid rgba(184,134,11,0.35);
  background: rgba(0,0,0,0.2);
}
.db-sel-card:hover {
  border-color: rgba(184,134,11,0.65) !important;
  background: rgba(255,255,255,0.03) !important;
}
.db-sel-empty {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
}

/* Faction filter — illegal factions dimmed when monarch selected */
.faction-filter-btn.faction-illegal {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

/* Card picker modal */
.picker-selected {
  box-shadow: 0 0 0 3px var(--accent-amber) !important;
  border-color: var(--accent-amber) !important;
}

/* Validation bar */
.db-footer {
  padding: 10px 14px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(184,134,11,0.2);
}

.validation-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.validation-rule {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.validation-rule.pass { background: rgba(45,90,39,0.25); color: var(--color-valid); border: 1px solid rgba(45,90,39,0.4); }
.validation-rule.fail { background: rgba(139,0,0,0.25); color: var(--color-invalid); border: 1px solid rgba(139,0,0,0.4); }

.db-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   MATCHMAKING SCREEN
   ══════════════════════════════════════════════════════════════════════════ */

#matchmaking-screen {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(6px);
}
#matchmaking-screen.hidden { display: none; }

.matchmaking-card {
  background: linear-gradient(160deg, var(--bg-mid), var(--bg-deep));
  border: 1px solid var(--accent-gold);
  border-radius: 12px;
  padding: 48px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(184,134,11,0.15);
  border-top-color: var(--accent-amber);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.matchmaking-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--text-primary);
  letter-spacing: 0.1em;
}

.matchmaking-info {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes slide-in-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes slide-in-left {
  from { transform: translateX(-30px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes attack-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255,50,50,0); }
  25%  { box-shadow: 0 0 0 12px rgba(255,50,50,0.7), inset 0 0 20px rgba(255,50,50,0.3); }
  50%  { box-shadow: 0 0 0 4px rgba(255,50,50,0.4); }
  75%  { box-shadow: 0 0 0 8px rgba(255,50,50,0.6); }
  100% { box-shadow: 0 0 0 0 rgba(255,50,50,0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-6px) rotate(-2deg); }
  30% { transform: translateX(6px) rotate(2deg); }
  45% { transform: translateX(-4px) rotate(-1deg); }
  60% { transform: translateX(4px) rotate(1deg); }
  75% { transform: translateX(-2px); }
  90% { transform: translateX(2px); }
}

@keyframes destroy-fade {
  0%   { opacity: 1; transform: scale(1) rotate(0); }
  30%  { opacity: 0.8; transform: scale(1.05) rotate(-5deg); }
  100% { opacity: 0; transform: scale(0.6) rotate(15deg); }
}

@keyframes card-play {
  from { transform: translateY(20px) scale(0.9); opacity: 0.6; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}


@keyframes pulse-valid {
  0%, 100% { box-shadow: 0 0 8px rgba(0,200,81,0.5); }
  50%       { box-shadow: 0 0 16px rgba(0,200,81,0.9), 0 0 4px rgba(0,200,81,0.4); }
}

@keyframes pulse-amber {
  0%, 100% { box-shadow: 0 0 8px rgba(205,127,50,0.5); }
  50%       { box-shadow: 0 0 20px rgba(205,127,50,0.9), 0 0 8px rgba(205,127,50,0.4); }
}

@keyframes pulse-gold {
  0%, 100% { color: var(--color-warn); }
  50%       { color: #ff8c00; text-shadow: 0 0 8px rgba(255,140,0,0.6); }
}

@keyframes pulse-red {
  0%, 100% { color: var(--color-invalid); }
  50%       { color: #ff0000; text-shadow: 0 0 6px rgba(255,0,0,0.5); }
}

@keyframes event-play {
  0%   { transform: scale(1) rotate(0); box-shadow: none; }
  20%  { transform: scale(1.1) rotate(-3deg); box-shadow: 0 0 20px rgba(255,215,0,0.9), 0 0 40px rgba(255,215,0,0.4); }
  40%  { transform: scale(1.08) rotate(3deg); box-shadow: 0 0 24px rgba(255,215,0,0.8); }
  60%  { transform: scale(1.05) rotate(-2deg); box-shadow: 0 0 18px rgba(255,215,0,0.6); }
  80%  { transform: scale(1.02) rotate(1deg); box-shadow: 0 0 10px rgba(255,215,0,0.3); }
  100% { transform: scale(1) rotate(0); box-shadow: none; }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes toast-in {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-10px); opacity: 0; }
}

@keyframes title-glow {
  from { filter: drop-shadow(0 2px 8px rgba(184,134,11,0.3)); }
  to   { filter: drop-shadow(0 2px 20px rgba(212,160,23,0.7)); }
}

/* Animation classes */
.anim-slide-in     { animation: card-play 0.3s ease forwards; }
.anim-attack       { animation: attack-flash 0.4s ease; }
.anim-shake        { animation: shake 0.4s ease; }
.anim-destroy      { animation: destroy-fade 0.5s ease forwards; }
.anim-event-play   { animation: event-play 0.6s ease forwards; }


/* ══════════════════════════════════════════════════════════════════════════
   STATUS INDICATORS / MISC
   ══════════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.62rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-rush     { background: #006400; color: #98fb98; }
.badge-guardian { background: #5c3d11; color: #f5e6c8; }

.your-turn-indicator {
  animation: pulse-amber 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.faction-color-conquest  { color: var(--faction-conquest-light); }
.faction-color-community { color: var(--faction-community-light); }
.faction-color-creed     { color: var(--faction-creed-light); }
.faction-color-trade     { color: var(--faction-trade-light); }
.faction-color-diplomacy { color: var(--faction-diplomacy-light); }
.faction-color-neutral   { color: var(--faction-neutral-light); }

.hidden { display: none !important; }

/* Discard pile button */
.discard-pile-btn {
  width: 50px;
  height: 70px;
  background: rgba(0,0,0,0.4);
  border: 1px dashed var(--accent-dull);
  border-radius: var(--card-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-muted);
  font-size: 0.6rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.discard-pile-btn:hover { border-color: var(--accent-amber); color: var(--accent-amber); }
.discard-pile-count { font-weight: 700; font-size: 0.8rem; }

/* Card tooltip (hover detail) */
.card-tooltip {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  display: none;
}

/* Loading state */
.loading-dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
  0%, 20% { content: ''; }
  40%      { content: '.'; }
  60%      { content: '..'; }
  80%      { content: '...'; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PARCHMENT GAME BOARD  (game.html — overrides dark-theme layout)
   ══════════════════════════════════════════════════════════════════════════ */

/* Card popup overlay */
#card-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(3px);
  cursor: pointer;
}
#card-popup-overlay.hidden { display: none; }
#card-popup-inner {
  cursor: default;
  padding: 14px;      /* breathing room so border-radius is never cut off */
  transform-origin: center center;
}

/* ── Image-mode cards: full game-card photo, no HTML frame ───────────────── */
.card.card-image-mode {
  background: transparent;
  border: none;
  box-shadow: 0 3px 14px rgba(0,0,0,0.7);
}
.card.card-image-mode::before { display: none; }
.card.card-image-mode .card-hp-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  margin: 0;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
}
/* Replace border-based selection states with outline so they show over the image */
.card.card-image-mode.selectable {
  outline: 2px solid var(--accent-amber);
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(205,127,50,0.4);
}
.card.card-image-mode.selected {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.8), 0 0 20px rgba(212,160,23,0.7);
}
.card.card-image-mode.valid-target {
  outline: 2px solid var(--color-valid);
  outline-offset: 2px;
}
.card.card-image-mode.attacker-selected {
  outline: 2px solid var(--accent-amber);
  outline-offset: 2px;
}
/* Popup card — 5:7 ratio, sized to viewport so it's readable on all screens */
#card-popup-inner .card {
  width: min(250px, 72vw);
  min-height: calc(min(250px, 72vw) * 1.4);
  box-shadow: 0 16px 40px rgba(0,0,0,0.7);
  flex-shrink: 0;
}
#card-popup-inner .card-text,
#card-popup-inner .card-name,
#card-popup-inner .cs-name { user-select: none; -webkit-user-select: none; }

/* Game info bars (dark parchment bands at top & bottom) */
.game-info-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--color-battleline);
  color: var(--color-parchment);
  font-size: 0.78rem;
  overflow: hidden;
}
.game-info-bar .info-name    { color: var(--color-parchment); font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; }
.game-info-bar .info-ap      { color: #F5D78E; font-family: var(--font-heading); font-weight: 700; }
.game-info-bar .bounty-value { color: #F5D78E; font-weight: 700; }
.game-info-bar .deck-count   { color: #D4B896; }
.game-info-bar .discard-mini .discard-stack  { background: rgba(245,236,215,0.1); border-color: rgba(245,236,215,0.3); color: var(--color-parchment); }
.game-info-bar .discard-mini .discard-label  { color: rgba(245,236,215,0.7); }
.game-info-bar .discard-mini:hover .discard-stack { border-color: #F5D78E; color: #F5D78E; }

/* Realm rows */
.realm-row { background: var(--color-realm); overflow: hidden; }
.realm-zone-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  padding: 4px;
  gap: 4px;
  overflow: hidden;
}
.monarch-slot, .capitol-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--card-w-compact);
  min-height: var(--card-h-compact);
  position: relative;
  border: 1px dashed rgba(92,61,17,0.18);
  border-radius: var(--card-radius);
}
.monarch-slot::before {
  content: "♛";
  font-size: 1.1rem;
  color: var(--color-ink-light);
  opacity: 0.2;
  pointer-events: none;
}
.capitol-slot::before {
  content: "⛪";
  font-size: 1.1rem;
  color: var(--color-ink-light);
  opacity: 0.2;
  pointer-events: none;
}
/* Hide the ghost icon when the slot is occupied */
.monarch-slot:not(:empty)::before,
.capitol-slot:not(:empty)::before { display: none; }
.realm-cards {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 8px 4px;
  overflow-y: auto;
  align-content: flex-start;
  position: relative;
  background: var(--color-realm);
  min-height: var(--card-h-compact);
}
.realm-cards::before {
  content: attr(data-label);
  position: absolute; top: 4px; left: 8px;
  font-size: 0.52rem; font-family: var(--font-heading);
  color: var(--color-ink-light);
  text-transform: uppercase; letter-spacing: 0.1em;
  pointer-events: none;
}

/* Shared outland — single row containing both players' Wilderness and Sea */
#shared-outland-row {
  display: grid;
  grid-template-columns: 55fr 2px 45fr;
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* Each column is a flex-column: opponent half on top, player half on bottom */
#shared-wilderness-col,
#shared-sea-col {
  display: flex;
  flex-direction: column;
  overflow: visible;
  /* Exhausted (rotated) cards must be able to spill outside their zone box */
  isolation: auto;
}

/* The wilderness/sea zones each take equal vertical space within the column */
#shared-wilderness-col .wilderness-zone,
#shared-sea-col .sea-zone {
  flex: 1;
  min-height: 0;
}

/* Mid-field separator between opponent and player halves */
.mid-field-line {
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(92,61,17,0.18) 15%,
    rgba(92,61,17,0.25) 50%,
    rgba(92,61,17,0.18) 85%,
    transparent 100%
  );
  flex-shrink: 0;
}
.outland-divider {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(120,105,80,0.18) 20%,
    rgba(120,105,80,0.22) 50%,
    rgba(120,105,80,0.18) 80%,
    transparent 100%
  );
}

/* Wilderness zone */
.wilderness-zone {
  background:
    /* Dappled canopy light */
    radial-gradient(ellipse 45% 35% at 18% 35%, rgba(180,220,110,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 35% 45% at 78% 22%, rgba(160,210, 90,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 30% 35% at 52% 78%, rgba(180,220,110,0.12) 0%, transparent 70%),
    /* Subtle hatch — forest-floor texture */
    repeating-linear-gradient(
      128deg,
      transparent 0px, transparent 13px,
      rgba(40,65,20,0.07) 13px, rgba(40,65,20,0.07) 14px
    ),
    /* Base forest green gradient */
    linear-gradient(158deg, #3E6029 0%, #4B7032 55%, #385420 100%);
  display: flex;
  align-items: stretch;
  overflow: visible;
  padding: 4px 8px;
  gap: 6px;
  position: relative;
  min-height: 0;
}
.wilderness-zone::before {
  content: attr(data-label);
  position: absolute; top: 4px; left: 8px;
  font-size: 0.52rem; font-family: var(--font-heading);
  color: rgba(200,230,160,0.55);
  text-transform: uppercase; letter-spacing: 0.1em;
  pointer-events: none;
}
.wilderness-zone.opponent-wild { align-items: stretch; padding-top: 18px; }
.wilderness-zone.player-wild   { align-items: stretch; padding-top: 18px; padding-bottom: 4px; }

/* Open sea zone */
.sea-zone {
  background:
    /* Foam / highlight ripples */
    repeating-linear-gradient(
      162deg,
      transparent 0px, transparent 9px,
      rgba(180,230,255,0.05) 9px, rgba(180,230,255,0.05) 11px
    ),
    /* Cross-ripple for depth */
    repeating-linear-gradient(
      -18deg,
      transparent 0px, transparent 15px,
      rgba(0,30,70,0.06) 15px, rgba(0,30,70,0.06) 17px
    ),
    /* Deep water shimmer */
    radial-gradient(ellipse 65% 40% at 35% 55%, rgba(30,150,200,0.12) 0%, transparent 70%),
    /* Base deep sea gradient */
    linear-gradient(175deg, #1C4A6A 0%, #163A55 50%, #0F2840 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 4px 4px;
  overflow: visible;
  align-items: center;
  position: relative;
}
.sea-zone::before {
  content: attr(data-label);
  position: absolute; top: 4px; left: 0; right: 0;
  text-align: center;
  color: rgba(160,210,240,0.55);
  font-size: 0.5rem; font-family: var(--font-heading);
  text-transform: uppercase; letter-spacing: 0.1em;
  pointer-events: none;
}

/* Battle Line (thin gradient divider between outland rows) */
#battle-line {
  background: linear-gradient(to right, #BAA57B 55%, #A9B6BA 55%);
}

/* Log Controls (status badge + action buttons above action log) */
#log-controls {
  display: none;
}
#active-player-badge {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
#active-player-badge.your-turn {
  background: rgba(245,214,142,0.25);
  color: #F5D78E;
  border: 1px solid rgba(245,214,142,0.6);
}
#active-player-badge.opponent-turn {
  background: rgba(0,0,0,0.2);
  color: rgba(245,236,215,0.45);
  border: 1px solid rgba(245,236,215,0.15);
}
.battle-line-info {
  font-size: 0.62rem;
  color: rgba(245,236,215,0.75);
  font-family: var(--font-heading);
  white-space: nowrap;
}
.battle-line-info strong { color: #F5D78E; }

/* Action Log Panel (right column) */
#action-log-panel {
  background: #EDE0C4;
  border-left: 3px solid var(--color-battleline);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;  /* prevent grid item from growing past its track */
}
.log-panel-header {
  background: var(--color-battleline);
  color: var(--color-parchment);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 4px 10px;
  flex-shrink: 0;
}
#action-log-panel #action-log-list {
  flex: 1;
  min-height: 0;  /* prevent flex child from growing past the panel */
  overflow-y: auto;
  padding: 5px 6px;
  font-size: 0.68rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#action-log-panel .log-entry {
  padding: 2px 4px;
  border-radius: 2px;
  border-left: 2px solid transparent;
  color: var(--color-ink);
  line-height: 1.4;
}
#action-log-panel .log-entry.attack  { border-left-color: #8b0000; color: #5a0000; }
#action-log-panel .log-entry.play    { border-left-color: #2d5a27; color: #1a3a17; }
#action-log-panel .log-entry.destroy { border-left-color: #666;    color: #444; }
#action-log-panel .log-entry.bounty  { border-left-color: var(--color-gold-warm); color: #7a5010; }
#action-log-panel .log-entry.system  { border-left-color: #1a3a5c; color: #1a3a5c; }

/* ── Opponent Deck & Discard Display (fixed top-right) ──────────────── */
#opp-zone-display {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  padding: 6px;
  pointer-events: all;
  overflow: hidden;
}

#opp-deck-widget {
  width: 66px;
  height: 92px;
  background: var(--color-ink);
  border: 1px solid #4a3520;
  border-radius: var(--card-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0.85;
  container-type: size;
}

#opp-discard-widget {
  width: 66px;
  height: 92px;
  border-radius: var(--card-radius);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  opacity: 0.85;
}
#opp-discard-widget.empty {
  border: 1px dashed rgba(100,80,50,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
#opp-discard-widget:not(.empty) {
  border: none;
}
#opp-discard-widget:not(.empty) .card {
  pointer-events: none;
  filter: grayscale(0.85) brightness(0.72);
  min-height: unset !important;
}


/* ── Player Deck & Discard Display (fixed bottom-right) ─────────────── */
#player-zone-display {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
  pointer-events: all;
}

#player-deck-display {
  width: 110px;
  height: 154px;
  background: var(--color-ink);
  border: 2px solid #6a4e28;
  border-radius: var(--card-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  container-type: size;
}
#player-deck-display:hover {
  border-color: var(--color-gold-warm);
  box-shadow: 0 0 10px rgba(184,150,62,0.4);
}
.card-back-pattern {
  position: absolute;
  inset: 6px;
  border-radius: 3px;
  background-image: url('/images/cards/FoF-Core-Deck.jpg');
  background-size: cover;
  background-position: center;
}
.card-back-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  color: rgba(184,150,62,0.8);
  text-align: center;
}
/* Rotate card back portrait image 90° CCW when the deck widget is landscape */
@container (aspect-ratio > 1) {
  .card-back-pattern {
    inset: unset;
    width:  100cqh;
    height: 100cqw;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
}

#player-discard-display {
  width: 110px;
  height: 154px;
  border-radius: var(--card-radius);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
#player-discard-display.empty {
  border: 2px dashed rgba(100,80,50,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
#player-discard-display:not(.empty) {
  border: none;
}
#player-discard-display.drag-over {
  border: 2px solid var(--color-gold-warm) !important;
  filter: brightness(1.2);
}
#player-discard-display:not(.empty) .card {
  pointer-events: none;
  filter: grayscale(0.85) brightness(0.72);
  min-height: unset !important;
}
.discard-empty-label {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  color: rgba(100,80,50,0.5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

/* ── Fan Hand Overlay (fixed, outside grid) ─────────────────────────── */
#player-hand-row {
  /* geometry set inline in game.html */
}
#player-hand-zone {
  /* geometry set inline in game.html */
}
#player-hand-zone::before { content: none; }

/* Action Bar (fixed at bottom) */
#action-bar {
  background: var(--color-battleline);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  overflow: hidden;
  border-top: 1px solid rgba(245,214,142,0.2);
  height: 44px;
  min-height: 0;
}
#action-bar .action-btn,
#action-bar-buttons .action-btn {
  background: #1e3d5c;
  color: #cce0f0;
  border-color: #3a6a8a;
  font-size: 0.72rem;
  padding: 0.28rem 0.65rem;
}
#action-bar .action-btn:hover:not(:disabled),
#action-bar-buttons .action-btn:hover:not(:disabled) {
  background: #2a5070;
  border-color: #5599bb;
  color: #e8f4ff;
}
#action-bar .action-btn:disabled,
#action-bar-buttons .action-btn:disabled {
  background: #0f2030;
  color: #4a7090;
  border-color: #1e3a50;
  opacity: 1;
}
.action-bar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--color-parchment);
}
.action-bar-info .info-name   { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; }
.action-bar-info .info-ap     { color: #F5D78E; font-family: var(--font-heading); font-weight: 700; }
.action-bar-info .bounty-value{ color: #F5D78E; font-weight: 700; }
.action-bar-info .deck-count  { color: #D4B896; }

/* Waiting overlay */
#waiting-overlay {
  position: absolute;
  inset: 0;
  background: rgba(201,180,138,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--color-ink);
  pointer-events: none;
  z-index: 5;
  letter-spacing: 0.1em;
}

/* Opponent turn dim */
.wilderness-zone.opponent-turn-dim,
.sea-zone.opponent-turn-dim { opacity: 0.8; }

/* Zone drop targets */
.play-zone-target { cursor: pointer; transition: box-shadow var(--transition-fast); }
.play-zone-target.active-drop {
  box-shadow: inset 0 0 0 3px rgba(0,200,81,0.6) !important;
}

/* ── Compact Board Card ──────────────────────────────────────────────────── */

.card.card-compact {
  width: var(--card-w-compact);
  min-height: var(--card-h-compact);
  display: flex;
  flex-direction: column;
  padding-top: 4px; /* space for faction bar */
  gap: 0;
}

/* Exhausted compact card: horizontal margin so visual overflow doesn't overlap
   adjacent cards (after 90° rotation the visual width > layout width). */
.card.card-compact.exhausted {
  margin: 4px 5px;
}

/* Wilderness (flex-row, align-items:stretch): exhausted card should fill zone
   height just like ready cards so the rotated size matches the "upright" size. */
.wilderness-zone .card.card-compact.exhausted {
  align-self: stretch;
  height: auto;
}

/* Sea (flex-column, align-items:center): lock to compact height so rotation
   is predictable; no unwanted horizontal stretch in a column layout. */
.sea-zone .card.card-compact.exhausted {
  align-self: center;
  height: var(--card-h-compact);
}

/* Outland compact cards: fill zone height and use wider width */
.wilderness-zone .card.card-compact {
  width: 82px;
  min-height: 0;
  flex-shrink: 0;
}
.sea-zone .card.card-compact {
  width: 82px;
}

/* ── Minimal-chrome compact card ──────────────────────────────────────────── */

/* Allow tooltip to overflow above card */
.card.card-compact {
  overflow: visible;
  position: relative;
}

/* Large art icon fills card body */
.cs-art-large {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  opacity: 0.65;
  padding-top: 4px;  /* clear faction bar */
  min-height: 0;
}

/* ── Corner stat badges for compact (in-play) cards ────────────────────── */
.cs-stat-liq {
  position: absolute;
  top: 0; left: 0;
  background: #b3d9f0;
  color: #0a2a3a;
  font-family: var(--font-heading);
  font-size: 0.5rem;
  font-weight: 700;
  padding: 1px 4px;
  border-bottom-right-radius: 3px;
  border-top-left-radius: var(--card-radius);
  border: 1px solid rgba(0,0,0,0.2);
  border-top: none; border-left: none;
  line-height: 1.3;
  pointer-events: none;
  z-index: 3;
}
.cs-stat-bounty {
  position: absolute;
  top: 0; right: 0;
  background: #ffd700;
  color: #1a1000;
  font-family: var(--font-heading);
  font-size: 0.5rem;
  font-weight: 700;
  padding: 1px 4px;
  border-bottom-left-radius: 3px;
  border-top-right-radius: var(--card-radius);
  border: 1px solid rgba(0,0,0,0.25);
  border-top: none; border-right: none;
  line-height: 1.3;
  pointer-events: none;
  z-index: 3;
}
.cs-stat-wv {
  position: absolute;
  bottom: 0; right: 0;
  background: #fff;
  color: #000;
  font-family: var(--font-heading);
  font-size: 0.5rem;
  font-weight: 700;
  padding: 1px 4px;
  border-top-left-radius: 3px;
  border-bottom-right-radius: var(--card-radius);
  border: 1px solid rgba(0,0,0,0.3);
  border-bottom: none; border-right: none;
  line-height: 1.3;
  pointer-events: none;
  z-index: 3;
}
.cs-stat-wv .damaged { color: #c00; }
.cs-stat-growth {
  position: absolute;
  bottom: 0; left: 0;
  background: rgba(50,110,50,0.85);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.48rem;
  font-weight: 700;
  padding: 1px 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: var(--card-radius);
  line-height: 1.3;
  pointer-events: none;
  z-index: 3;
}
.cs-stat-items {
  position: absolute;
  top: 0; left: 0;
  background: rgba(50,50,80,0.8);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-heading);
  font-size: 0.48rem;
  font-weight: 700;
  padding: 1px 3px;
  border-bottom-right-radius: 3px;
  border-top-left-radius: var(--card-radius);
  line-height: 1.3;
  pointer-events: none;
  z-index: 3;
}

/* Body-level tooltip for compact board cards — rendered by _ttShow() in board_renderer.js.
   Lives in the root stacking context so z-index always wins and it never rotates with
   an exhausted card. getBoundingClientRect positions it correctly above the visual box. */
#card-tooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: var(--color-ink);
  color: var(--color-parchment);
  border: 1px solid var(--color-gold-warm);
  border-radius: 4px;
  font-size: 0.6rem;
  font-family: var(--font-heading);
  padding: 3px 9px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

/* Compact card name */
.cs-name {
  font-family: var(--font-heading);
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
  padding: 2px 3px 1px;
  line-height: 1.25;
  word-break: break-word;
  hyphens: auto;
}


/* Guardian shield stays via .card.guardian::after — position it for compact */
.card.card-compact.guardian::after {
  top: 2px;
  right: 2px;
  font-size: 0.65rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LANDSCAPE MOBILE SUPPORT — Additive only. Nothing above this line changes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Portrait lockout ─────────────────────────────────────────────────────────── */
#portrait-warning {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-ink, #1a0f0a);
  color: var(--color-parchment, #F5ECD7);
  font-family: var(--font-heading-deco);
  font-size: 18px;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
}

@media (orientation: portrait) and (hover: none) {
  #portrait-warning { display: flex; }
}

/* Touch press feedback + minimum touch targets + deck/discard scale ─────────── */
@media (hover: none) and (pointer: coarse) {
  .card:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }
  .action-btn:active {
    filter: brightness(0.85);
    transition: filter 0.1s ease;
  }
  /* 44px minimum touch target on all touch screens */
  .action-btn {
    min-height: 44px;
    min-width:  44px;
  }

  /* Deck and discard: fill their grid-area cells, maintain card ratio */
  #player-deck-display,
  #player-discard-display {
    width:  100%;
    height: 100%;
    min-height: unset;
  }

}

/* Small landscape screens — tighten board proportions ───────────────────────── */
@media (max-height: 500px) and (orientation: landscape) and (hover: none) {

  #game-board {
    grid-template-rows: 28px 14vh minmax(88px, 1.6fr) minmax(100px, 20vh) 44px;
    grid-template-columns: 75fr 25fr;
  }

  #opponent-info-bar  { grid-column: 1 / 3; }
  #opponent-realm-row { grid-column: 1; }
  #action-log-panel   { grid-column: 2; grid-row: 3 / 5; }
  #shared-outland-row { grid-column: 1; }
  #player-realm-row   { grid-column: 1; }
  #action-bar         { grid-column: 1 / 3; grid-row: 5; }

  #opponent-info-bar { font-size: 0.62rem; }
  #action-log-panel  { font-size: 0.58rem; }

  /* Opp zone: widgets fill the grid cell proportionally on mobile */
  #opp-zone-display { gap: 3px; padding: 4px; align-items: stretch; }
  #opp-deck-widget,
  #opp-discard-widget { flex: 1; height: 100%; min-height: unset; }
  /* Action log: pad bottom so entries don't slide behind action bar */
  #action-log-panel #action-log-list { padding-bottom: 100px; }

  /* Player deck/discard: correct 2.75:3.75 ratio at 50px width */
  #player-deck-display,
  #player-discard-display { height: 68px; }

  :root {
    --card-w:          58px;
    --card-h:          82px;
    --card-w-board:    52px;   /* wider than before — was 48, was too narrow */
    --card-h-board:    72px;
    --card-w-compact:  50px;   /* wider than before — was 40, was too narrow */
    --card-h-compact:  70px;
    --card-radius:      4px;
    --zone-label-size:  9px;
  }

  /* Hand cards: scale down to fit mobile layout */
  .card.card-in-hand { transform: scale(0.75); }
  #player-hand { position: relative; top: 45px; }

  /* Zone label size override */
  .zone::before { font-size: var(--zone-label-size); }

  /* Outland compact cards: use mobile compact size (overrides desktop 82px) */
  .wilderness-zone .card.card-compact,
  .sea-zone .card.card-compact {
    width: var(--card-w-compact);
  }

  /* Additional size tightening on small landscape */
  .action-btn {
    font-size: 0.6rem;
    padding:   4px 10px;
  }

  /* Card popup fits small landscape viewport — card already uses fixed 120×168 */
  #card-popup-inner {
    max-height:  90vh;
    overflow-y:  auto;
  }

  /* Allow realm/outland to scroll horizontally if many cards */
  .realm-cards,
  .wilderness-zone,
  .sea-zone {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
}

/* ── HOW TO PLAY OVERLAY ────────────────────────────────────────────────── */

.htp-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.htp-overlay.htp-hidden { display: none; }

.htp-scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 5, 0.72);
}

.htp-container {
  position: relative;
  z-index: 801;
  background: var(--color-parchment);
  border: 3px solid var(--color-battleline);
  box-shadow: 0 8px 40px rgba(20, 12, 5, 0.7);
  width: min(680px, 90vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
}

.htp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 12px;
  border-bottom: 2px solid var(--color-battleline);
  background: var(--color-battleline);
}

.htp-title {
  font-family: var(--font-display, var(--font-heading));
  font-size: 18px;
  color: var(--color-gold-warm);
  letter-spacing: 0.1em;
}

.htp-close {
  background: none;
  border: none;
  color: rgba(245, 236, 215, 0.85);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  font-family: var(--font-heading);
}
.htp-close:hover { color: var(--color-gold-warm); }

.htp-slide-counter {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-battleline);
  padding: 8px 0 4px;
  letter-spacing: 0.05em;
}

.htp-slides-wrapper {
  flex: 1;
  overflow: hidden;
  padding: 0 32px;
}

.htp-slide {
  display: none;
  padding: 16px 0 24px;
  animation: htpFadeIn 0.2s ease;
}
.htp-slide.active { display: block; }

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

.htp-slide-icon {
  font-size: 32px;
  text-align: center;
  margin-bottom: 8px;
}

.htp-slide-title {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-battleline);
  text-align: center;
  margin-bottom: 16px;
}

.htp-slide-content {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink);
  line-height: 1.7;
  max-height: 340px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.htp-slide-content strong { color: var(--color-battleline); font-weight: bold; }
.htp-slide-content em     { color: var(--color-battleline); font-style: italic; }

.htp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 16px;
  border-top: 1px solid rgba(92, 61, 17, 0.3);
}

.htp-btn {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: bold;
  padding: 8px 18px;
  background: var(--color-parchment);
  border: 2px solid var(--color-battleline);
  color: var(--color-battleline);
  cursor: pointer;
  letter-spacing: 0.05em;
}
.htp-btn:hover {
  background: var(--color-battleline);
  color: var(--color-gold-warm);
}
.htp-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.htp-dots { display: flex; gap: 8px; align-items: center; }

.htp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(92, 61, 17, 0.3);
  cursor: pointer;
  transition: background 0.15s ease;
}
.htp-dot.active { background: var(--color-battleline); }

.htp-trigger-btn {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: bold;
  padding: 6px 14px;
  background: var(--color-parchment);
  border: 2px solid var(--color-battleline);
  color: var(--color-battleline);
  cursor: pointer;
  letter-spacing: 0.05em;
}
.htp-trigger-btn:hover {
  background: var(--color-battleline);
  color: var(--color-gold-warm);
}

@media (max-height: 500px) and (orientation: landscape) {
  .htp-container {
    max-height: 95vh;
    width: min(580px, 90vw);
  }
  .htp-slide-content { font-size: 13px; max-height: 200px; }
  .htp-slide-title   { font-size: 16px; }
  .htp-slide-icon    { font-size: 22px; margin-bottom: 4px; }
}