/* ═══════════════════════════════════
   LUCID GAMING PLATFORM — DESIGN TOKENS
   Extends the Conquest QRG design system
═══════════════════════════════════ */
:root {
  /* Background layers (dark grey → mid grey) */
  --bg:         #1a1d23;       /* darkest — page background */
  --bg2:        #22262e;       /* slightly lighter — tab bar, inputs */
  --bg3:        #2c313a;       /* mid — cards, panels */
  --bg4:        #363c47;       /* lightest — hover states */

  /* Borders (cool grey) */
  --border:     #3a4050;
  --border2:    #4a5060;

  /* Primary accent — navy blue */
  --accent:     #4a7cc9;
  --accent-dim: #3a5f99;
  --accent-lt:  #6a9ce9;
  --accent-pale:#a0c4f0;

  /* Status colours */
  --red:        #8b2a2a;
  --red-lt:     #d04040;
  --green:      #2a7a3a;
  --green-lt:   #4aaa5a;

  /* Legacy aliases (used by some components) */
  --gold:       var(--accent);
  --gold-dim:   var(--accent-dim);
  --gold-pale:  var(--accent-pale);
  --blue:       #1a4a6a;
  --blue-lt:    #2a6a9a;

  /* Text scale (light on dark) */
  --text:       #e8eaf0;
  --text-dim:   #8a90a0;
  --text-faint: #5a6070;

  /* Component tokens */
  --tag-bg:     #282d38;
  --radius:     10px;
  --radius-sm:  6px;
  --radius-lg:  16px;
  --shadow:     0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.6);

  /* Layout */
  --header-h:   56px;
  --sidebar-w:  260px;
  --content-max: 960px;

  /* Per-game accent colours */
  --game-boardgames:  #7c6cc9;   /* blue-purple */
  --game-conquest:    #c9a84c;   /* gold — matches the Conquest app */
  --game-kow:         #4a9c5a;   /* green */
  --game-wh40k:       #c04040;   /* red */
  --game-frostgrave:  #5aaaca;   /* ice blue */
  --game-bolt-action: #c08a40;   /* olive/amber */
}

/* Reset, html/body base, utility classes, .overline, .loading-state
   moved to styles/components.css (loaded before this file). */

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lt); }

/* Hub-only colour utility */
.text-gold { color: var(--game-conquest); }

/* .btn family moved to styles/components.css */

/* ─── Wizard sheet modal list rows ─── */
.ws-list-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 0.8rem;
}
.ws-list-row:last-child { border-bottom: none; }
.ws-list-icon { min-width: 16px; text-align: center; }
.ws-list-name { flex: 1; color: var(--text); }
.ws-list-meta { color: var(--text-dim); font-size: 0.72rem; white-space: nowrap; }
.ws-list-del  {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-faint); cursor: pointer; padding: 1px 6px; font-size: 0.72rem;
  transition: all 0.12s;
}
.ws-list-del:hover { border-color: var(--red); color: var(--red-lt); }
.ws-list-empty { font-size: 0.75rem; color: var(--text-faint); padding: 4px 0; }

/* ─── Wizard sheet — stat labels ─── */
.ws-stat-label {
  font-size: 0.6rem; color: var(--text-dim); margin-bottom: 3px; text-align: center;
  text-transform: uppercase; letter-spacing: 0.03em;
}

/* ─── Wizard sheet — member block (apprentice / captain expanded) ─── */
.ws-member-block {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
}

/* ─── Wizard sheet — apprentice derived stats display ─── */
.ws-derived-stats {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 4px;
}
.ws-derived-stat {
  text-align: center; background: var(--bg1);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 2px;
}
.ws-derived-label { font-size: 0.58rem; color: var(--text-dim); margin-bottom: 2px; }
.ws-derived-val   { font-size: 0.88rem; font-weight: 600; color: var(--text-dim); }

/* ─── Wizard sheet — toggle / badly injured labels ─── */
.ws-toggle-label {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 0.82rem; color: var(--text);
}
.ws-badly-label {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 0.78rem; color: var(--text-dim);
}

/* ─── Wizard sheet — equipment grid ─── */
.ws-equip-grid { gap: 6px; margin-top: 4px; }
.ws-equip-5 { display: grid; grid-template-columns: repeat(5, 1fr); }
.ws-equip-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.ws-equip-slot { font-size: 0.72rem !important; padding: 5px 4px !important; }

/* ─── Wizard sheet — specialist / soldier badges ─── */
.ws-specialist-badge,
.ws-soldier-badge {
  font-size: 0.6rem; padding: 1px 6px; border-radius: 3px;
  font-weight: 600; text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
}
.ws-specialist-badge { background: var(--bg1); color: var(--gold, #d4a017); border: 1px solid rgba(212,160,23,0.35); }
.ws-soldier-badge    { background: var(--bg1); color: var(--text-dim); border: 1px solid var(--border); }

/* ─── Wizard sheet — soldier rows (two-line layout) ─── */
.ws-soldier-row { border-bottom: 1px solid var(--border); padding: 5px 0; }
.ws-soldier-row:last-child { border-bottom: none; }
.ws-soldier-main  { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 0.8rem; }
.ws-soldier-extras { display: flex; align-items: center; gap: 8px; padding-left: 4px; }
.ws-badly-inline {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.7rem; color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.ws-soldier-extras .ws-equip-slot { flex: 1; min-width: 0; }

/* ─── Wizard level-up modal ─── */
.lvl-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.lvl-row-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--border);
  font-size: 0.68rem; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-weight: 600;
}
.lvl-learn-sub {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px;
  margin-left: 30px;
}

/* .btn-sm, .form-* (group/label/input/error/row), .radio-row,
   textarea.form-input default — moved to styles/components.css */

/* ═══════════════════════════════════
   CARDS
═══════════════════════════════════ */
.card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow);
}
.card-title {
  font-size: 0.72rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.card-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--accent-dim), transparent);
}

/* .platform-header / .platform-logo / .platform-header-spacer /
   .platform-user / .platform-user-name moved to styles/components.css.
   Hub override: brand text uses --accent-lt (bright). Game pages keep
   the components.css default (--text, plain). */
.platform-logo { color: var(--accent-lt); }

/* ═══════════════════════════════════
   AUTH PAGES (Login / Signup)
═══════════════════════════════════ */
.auth-page.hidden,
.pending-screen.hidden { display: none; }

.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(74,124,201,0.1) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(44,49,58,0.5) 0%, transparent 60%),
    var(--bg);
}
.auth-container {
  width: 100%; max-width: 400px;
}
.auth-hero {
  text-align: center; margin-bottom: 32px;
}
.auth-hero-icon { font-size: 3rem; margin-bottom: 12px; }
.auth-hero h1 {
  font-size: 1.8rem; font-weight: 800;
  color: var(--accent-lt); letter-spacing: 0.03em;
  line-height: 1.2;
}
.auth-hero p {
  font-size: 0.8rem; color: var(--text-dim);
  margin-top: 6px; letter-spacing: 0.04em;
}
.auth-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-lg);
}
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
  font-size: 0.72rem; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.auth-footer {
  text-align: center; margin-top: 20px;
  font-size: 0.8rem; color: var(--text-dim);
}
.auth-footer a {
  color: var(--accent); font-weight: 600;
}
.auth-message {
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 0.8rem;
  margin-bottom: 16px;
  display: none;
}
.auth-message.visible { display: block; }
.auth-message.error {
  background: #1a0000; border: 1px solid var(--red);
  color: #ff7070;
}
.auth-message.success {
  background: #001a00; border: 1px solid var(--green);
  color: #70d070;
}
.auth-message.info {
  background: #1a2030; border: 1px solid var(--accent-dim);
  color: var(--accent-pale);
}
.auth-message.warning {
  background: #1a1200; border: 1px solid #a07800;
  color: #e0b840;
}

/* ═══════════════════════════════════
   DASHBOARD LAYOUT
═══════════════════════════════════ */
.dashboard-wrap {
  display: flex; flex-direction: column;
  min-height: 100vh;
  background: var(--bg3);    /* mid-tone grey workspace */
}

/* Tab navigation */
.dash-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);     /* darker than workspace */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab {
  padding: 12px 18px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-dim);
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: inherit;
}
.dash-tab:hover { color: var(--text); }
.dash-tab.active {
  color: var(--accent-lt);
  border-bottom-color: var(--accent);
}

/* Tab panels */
.dash-content {
  flex: 1; padding: 20px;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}
.dash-panel {
  display: none;
}
.dash-panel.active { display: block; }

/* ─── BOTTOM NAV (mobile only) ─── */
.bottom-nav { display: none; }

@media (max-width: 680px) {
  .dash-tabs { display: none; }
  .dash-content { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg);
    border-top: 1px solid var(--accent-dim);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 200;
    align-items: stretch;
    height: 56px;
    overflow: visible;
  }
  /* Wall battlement — lives on each button, same pattern as the tower.
     Each button owns its ::before (border) and ::after (fill) above itself. */
  .bottom-nav-item:not(.bottom-nav-play) { position: relative; }

  /* 3 tiles per button, each tile = [0.5crenel | merlon | 0.5crenel].
     Half-crenels at tile edges pair up at every tile boundary and at button dividers,
     forming full crenels at those positions. Merlons sit centred in each tile. */
  .bottom-nav-item:not(.bottom-nav-play)::before {
    content: '';
    position: absolute;
    top: -5px; left: 0; right: 0;
    height: 5px;
    background: var(--accent-dim);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 11%, black 11%, black 89%, transparent 89%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 11%, black 11%, black 89%, transparent 89%, transparent 100%);
    -webkit-mask-size: 33.33% 5px;
    mask-size: 33.33% 5px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    pointer-events: none;
  }
  .bottom-nav-item:not(.bottom-nav-play)::after {
    content: '';
    position: absolute;
    top: -4px; left: 0; right: 0;
    height: 4px;
    background: var(--bg);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 15%, black 15%, black 85%, transparent 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 15%, black 15%, black 85%, transparent 85%, transparent 100%);
    -webkit-mask-size: 33.33% 4px;
    mask-size: 33.33% 4px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    pointer-events: none;
  }

  .bottom-nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
    padding: 6px 0;
  }
  .bottom-nav-item:not(.bottom-nav-play):not(:last-child):not(:has(+ .bottom-nav-play)) {
    border-right: 1px solid var(--accent-dim);
  }
  .bottom-nav-item.active { color: var(--accent-lt); }
  .bottom-nav-item.active:not(.bottom-nav-play) { background: rgba(74, 124, 201, 0.1); }
  .bottom-nav-item.active:not(.bottom-nav-play)::after { background: #1f2734; }
  .bottom-nav-play.active::before { background: #1f2734; }

  .bottom-nav-icon { font-size: 1.25rem; line-height: 1; }
  .bottom-nav-label {
    font-size: 0.58rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
  }

  /* Play button — battlement tower protruding above the nav bar */
  .bottom-nav-play {
    position: relative;
    margin-top: -28px;
    height: 84px;
    min-width: 72px; max-width: 72px;
    flex-shrink: 0;
    padding-top: 10px;
    z-index: 1;
    background: none;
    border: none;
  }
  /* Border layer — clip-path merlon silhouette */
  .bottom-nav-play::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--accent-dim);
    clip-path: polygon(
      0px 0px, 18px 0px, 18px 6px, 27px 6px, 27px 0px,
      45px 0px, 45px 6px, 54px 6px, 54px 0px,
      72px 0px, 72px 84px, 0px 84px
    );
    z-index: -2;
  }
  /* Background fill — 1px inset */
  .bottom-nav-play::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--bg);
    clip-path: polygon(
      1px 1px, 17px 1px, 17px 7px, 28px 7px, 28px 1px,
      44px 1px, 44px 7px, 55px 7px, 55px 1px,
      71px 1px, 71px 84px, 1px 84px
    );
    z-index: -1;
  }
  .bottom-nav-play .bottom-nav-icon { font-size: 1.6rem; }
  .bottom-nav-play .bottom-nav-label,
  .bottom-nav-play.active .bottom-nav-label { color: var(--accent-lt); font-size: 0.62rem; }

  #feedbackFloatBtn { bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Panel title */
.panel-title {
  font-size: 1.2rem; font-weight: 800;
  color: var(--accent-lt); margin-bottom: 4px;
}
.panel-subtitle {
  font-size: 0.78rem; color: var(--text-dim);
  margin-bottom: 20px;
}

/* ═══════════════════════════════════
   GAME SELECTOR GRID
═══════════════════════════════════ */
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.game-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  cursor: pointer; text-align: center;
  transition: border-color 0.2s, transform 0.1s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
  border-top: 3px solid var(--border);
}
.game-card:hover { border-color: var(--border2); background: var(--bg4); transform: scale(0.98); }
.game-card.disabled {
  opacity: 0.4; cursor: not-allowed;
}
.game-card.disabled:hover { border-color: var(--border); background: var(--bg2); transform: none; }
.game-card-icon { font-size: 2.4rem; margin-bottom: 10px; }
.game-card-name {
  font-size: 0.9rem; font-weight: 700; color: var(--text);
  margin-bottom: 4px;
}
.game-card-status {
  font-size: 0.65rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: 4px;
  display: inline-block;
}
.game-card-status.ready {
  background: #0a1a0a; color: var(--green-lt); border: 1px solid var(--green);
}
.game-card-status.coming-soon {
  background: #1a1e2a; color: var(--text-dim); border: 1px solid var(--border2);
}

/* Per-game accent borders */
.game-card[data-game="boardgames"]    { border-top-color: var(--game-boardgames); }
.game-card[data-game="conquest"]      { border-top-color: var(--game-conquest); }
.game-card[data-game="kings-of-war"]  { border-top-color: var(--game-kow); }
.game-card[data-game="wh40k"]         { border-top-color: var(--game-wh40k); }
.game-card[data-game="frostgrave"]    { border-top-color: var(--game-frostgrave); }
.game-card[data-game="bolt-action"]   { border-top-color: var(--game-bolt-action); }

.game-card[data-game="boardgames"]:hover    { border-color: var(--game-boardgames); }
.game-card[data-game="conquest"]:hover      { border-color: var(--game-conquest); }
.game-card[data-game="kings-of-war"]:hover  { border-color: var(--game-kow); }
.game-card[data-game="wh40k"]:hover         { border-color: var(--game-wh40k); }
.game-card[data-game="frostgrave"]:hover    { border-color: var(--game-frostgrave); }
.game-card[data-game="bolt-action"]:hover   { border-color: var(--game-bolt-action); }

.game-card[data-game="boardgames"] .game-card-name    { color: var(--game-boardgames); }
.game-card[data-game="conquest"] .game-card-name      { color: var(--game-conquest); }
.game-card[data-game="kings-of-war"] .game-card-name  { color: var(--game-kow); }
.game-card[data-game="wh40k"] .game-card-name         { color: var(--game-wh40k); }
.game-card[data-game="frostgrave"] .game-card-name    { color: var(--game-frostgrave); }
.game-card[data-game="bolt-action"] .game-card-name   { color: var(--game-bolt-action); }

/* ═══════════════════════════════════
   MEMBERS LIST
═══════════════════════════════════ */
.member-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.member-row:last-child { border-bottom: none; }
.member-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg4); display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700; color: var(--accent);
  flex-shrink: 0;
}
.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.member-role {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint);
}
.member-role.admin { color: var(--accent); }
.member-role.owner { color: var(--game-conquest); }
.member-role.pending { color: var(--red-lt); }
.member-actions { display: flex; gap: 6px; }

/* ═══════════════════════════════════
   STATS DISPLAY
═══════════════════════════════════ */
.stat-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.stat-value {
  font-size: 1.8rem; font-weight: 800; color: var(--accent-lt);
  line-height: 1;
}
.stat-label {
  font-size: 0.72rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

/* ═══════════════════════════════════
   HISTORY LIST
═══════════════════════════════════ */
.history-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.history-item:last-child { border-bottom: none; }
.history-result {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; flex-shrink: 0;
}
.history-result.win { background: #0a1a0a; color: var(--green-lt); border: 1px solid var(--green); }
.history-result.loss { background: #1a0000; color: var(--red-lt); border: 1px solid var(--red); }
.history-result.draw { background: var(--bg4); color: var(--text-dim); border: 1px solid var(--border2); }
.history-detail { flex: 1; min-width: 0; }
.history-game { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.history-meta { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }
.history-score { font-weight: 700; color: var(--accent-lt); font-size: 0.9rem; flex-shrink: 0; }

/* ═══════════════════════════════════
   CALENDAR
═══════════════════════════════════ */
.event-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  margin-bottom: 10px;
}
.event-date {
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-dim); margin-bottom: 6px;
}
.event-title { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.event-meta { font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; }
.event-rsvp {
  display: flex; gap: 6px; margin-top: 10px;
}

/* ═══════════════════════════════════
   GAME FILTER DROPDOWN
═══════════════════════════════════ */
.game-filter {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 32px 8px 12px;
  color: var(--text); font-size: 0.78rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a90a0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 140px;
}
.game-filter:focus { outline: none; border-color: var(--accent); }

/* .form-row moved to styles/components.css */

/* ═══════════════════════════════════
   CALENDAR
═══════════════════════════════════ */

/* Upcoming sidebar stacks below calendar on narrow screens */
@media (max-width: 680px) {
  #panel-calendar > div > div:last-child { width: 100% !important; }
  #panel-calendar > div { flex-wrap: wrap; }
}

.cal-wrap { padding: 16px; }
.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cal-month-label {
  font-size: 1rem; font-weight: 700; color: var(--accent-lt);
  letter-spacing: 0.02em;
}
.cal-nav {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-dim);
  width: 32px; height: 32px; font-size: 0.7rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.cal-nav:hover { border-color: var(--accent-dim); color: var(--text); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-left: 1px solid var(--accent-dim);
  border-top: 1px solid var(--accent-dim);
  background: #3a4050;
}
.cal-day-name {
  text-align: center; font-size: 0.62rem; font-weight: 700;
  color: var(--accent-lt); text-transform: uppercase;
  letter-spacing: 0.06em; padding: 6px 0;
  background: var(--bg2);
  border-right: 1px solid var(--accent-dim);
  border-bottom: 1px solid var(--accent-dim);
}
.cal-day {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  font-size: 0.78rem; font-weight: 600;
  color: #2c313a; cursor: pointer;
  transition: background 0.15s, color 0.15s;
  position: relative;
  min-height: 72px;
  padding: 4px;
  background: #d8dce5;
  border-right: 1px solid var(--accent-dim);
  border-bottom: 1px solid var(--accent-dim);
  overflow: hidden;
}
.cal-day:hover { background: #c0c6d0; color: #1a1d23; }
.cal-day.other-month { color: #9aa0b0; opacity: 0.5; }
.cal-day .cal-day-num {
  font-size: 0.72rem; font-weight: 700; line-height: 1;
  margin-bottom: 3px;
}
.cal-day.today .cal-day-num {
  color: var(--accent-lt);
  background: var(--accent-dim);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.cal-day.selected {
  background: rgba(74, 124, 201, 0.2);
}
.cal-day.selected .cal-day-num {
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
/* Event chips inside day cells */
.cal-event-chip {
  width: 100%; font-size: 0.55rem; font-weight: 600;
  padding: 1px 4px; border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.4; margin-top: 1px;
  background: var(--accent-dim); color: var(--accent-pale);
  cursor: pointer; transition: opacity 0.15s;
}
.cal-event-chip:hover { opacity: 0.8; }
.cal-event-chip.lfg {
  background: rgba(74, 156, 90, 0.35); color: var(--green-lt);
}
.cal-event-chip.tournament {
  background: rgba(192, 64, 64, 0.3); color: var(--red-lt);
}

/* Event type badges */
.event-type-badge {
  font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 4px;
  display: inline-block;
}
.event-type-badge.open-gaming   { background: #1a2a1a; color: var(--green-lt); border: 1px solid var(--green); }
.event-type-badge.matched-play  { background: #1a1e2e; color: var(--accent-lt); border: 1px solid var(--accent-dim); }
.event-type-badge.tournament    { background: #2a1a1a; color: var(--red-lt); border: 1px solid var(--red); }

/* LFG badge */
.lfg-badge {
  font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 4px;
  background: #1a2a1a; color: var(--green-lt); border: 1px solid var(--green);
  animation: lfg-pulse 2s ease-in-out infinite;
}
@keyframes lfg-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Cheerleader badge */
.cheerleader-badge {
  font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 4px;
  background: #2a2a1a; color: #c0a040; border: 1px solid #806020;
}

/* .modal-* family moved to styles/components.css */

/* ═══════════════════════════════════
   APPROVAL PENDING SCREEN
═══════════════════════════════════ */
.pending-screen {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; text-align: center;
}
.pending-card {
  max-width: 420px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 40px 28px;
  box-shadow: var(--shadow-lg);
}
.pending-icon { font-size: 3rem; margin-bottom: 16px; }
.pending-card h2 {
  font-size: 1.2rem; font-weight: 800;
  color: var(--accent-lt); margin-bottom: 8px;
}
.pending-card p {
  font-size: 0.82rem; color: var(--text-dim);
  line-height: 1.6;
}

/* ═══════════════════════════════════
   GAME VIEW (iframe embed)
═══════════════════════════════════ */
.game-view {
  display: none;
  flex-direction: column;
  height: calc(100vh - 60px);
  overflow: hidden;
}
.game-view-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.game-view-title {
  font-size: 0.85rem; font-weight: 700;
  color: var(--text);
}
.game-view-frame {
  flex: 1;
  width: 100%;
  border: none;
}

/* ═══════════════════════════════════
   POST-GAME APPLY MODAL (Step 9)
═══════════════════════════════════ */
.pga-section {
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.pga-section:last-of-type { border-bottom: none; }
.pga-section-title {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 8px;
}
.pga-hint { font-size: 0.7rem; color: var(--text-faint); margin-bottom: 6px; }
.pga-empty { text-align: center; padding: 16px; color: var(--text-dim); font-size: 0.82rem; }
.pga-error { color: var(--red-light); }

/* XP / Gold before → after */
.pga-xp-row { display: flex; gap: 16px; flex-wrap: wrap; }
.pga-xp-block {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem;
}
.pga-xp-label { font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; min-width: 32px; }
.pga-xp-before { color: var(--text-dim); }
.pga-xp-arrow { color: var(--frost); font-weight: 700; }
.pga-xp-after { color: var(--frost); font-weight: 700; font-size: 0.92rem; }

/* Hero rows */
.pga-hero-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}
.pga-hero-row:last-child { border-bottom: none; }
.pga-hero-name { font-weight: 600; min-width: 80px; }
.pga-badly-check { display: flex; align-items: center; gap: 5px; cursor: pointer; }

/* Soldier rows */
.pga-soldier-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}
.pga-soldier-row:last-child { border-bottom: none; }
.pga-soldier-name { font-weight: 600; flex: 1; }
.pga-soldier-type { color: var(--text-dim); font-size: 0.7rem; }

/* Outcome badges */
.pga-outcome { font-size: 0.7rem; font-weight: 600; padding: 1px 7px; border-radius: 3px; }
.pga-outcome-ok   { color: #4caf50; background: rgba(76,175,80,0.1); }
.pga-outcome-badly { color: var(--gold); background: rgba(201,168,76,0.12); }
.pga-outcome-dead  { color: var(--red-light); background: rgba(184,34,34,0.12); }

/* Row highlight tints */
.pga-dead  { opacity: 0.7; }
.pga-badly { background: rgba(201,168,76,0.04); border-radius: 4px; }

/* Permanent injury rows */
.pga-perm-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}
.pga-perm-row:last-child { border-bottom: none; }
.pga-perm-member { font-weight: 600; min-width: 76px; }
.pga-perm-select { flex: 1; font-size: 0.75rem; min-width: 0; }
.pga-sev-btns { display: flex; gap: 4px; flex-shrink: 0; }
.pga-sev-btn {
  font-size: 0.68rem; padding: 2px 8px; border-radius: 3px;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer;
}
.pga-sev-btn.active {
  background: var(--frost); color: #000; border-color: var(--frost);
}

/* ═══════════════════════════════════
   WARBAND CREATION FLOW (.wc-*)
═══════════════════════════════════ */

/* ══════════════════════════════════════════════════
   WIZARD SHEET EDIT MODAL  (.wse-*)
══════════════════════════════════════════════════ */
.wse-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--bg-card2, rgba(255,255,255,0.03));
}
.wse-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--frost-dim, #7ec8e3);
  margin-bottom: 8px;
}
.wse-sub-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.wse-readonly-row {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px;
}
.wse-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.wse-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--bg-input, rgba(255,255,255,0.06));
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.68rem; padding: 2px 6px;
}
.wse-chip-k { color: var(--text-dim); font-weight: 600; }
.wse-chip-v { color: var(--text); font-weight: 700; }
.wse-tag {
  display: inline-block;
  background: var(--bg-input, rgba(255,255,255,0.06));
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.72rem; padding: 2px 7px;
  color: var(--text);
}
.wse-tag-cn { color: var(--text-dim); font-size: 0.65rem; margin-left: 3px; }
.wse-tag-unequip {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
  width: 14px; height: 14px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--red-lt, #ff8080);
  font-size: 0.62rem; line-height: 1;
  cursor: pointer;
}
.wse-tag-unequip:hover { background: var(--red-lt, #ff8080); color: #1a1a1a; }
.wse-tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.wse-equip-row { display: flex; flex-wrap: wrap; gap: 4px; }
.wse-note { font-size: 0.68rem; color: var(--text-dim); }
.wse-none { font-size: 0.72rem; color: var(--text-faint); font-style: italic; }
.wse-gold-total {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold, #ffd700);
  letter-spacing: 0.01em;
}
.wse-stash-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.78rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.wse-stash-row:last-child { border-bottom: none; }
.wse-stash-name { font-weight: 600; color: var(--text); }
.wse-equip-select {
  font-size: 0.7rem;
  padding: 2px 4px;
  margin-left: auto;
  max-width: 160px;
  height: auto;
}

/* Step indicator */
.wc-steps-row {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding-bottom: 10px;
}
.wc-step-pill {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: var(--text-dim);
  padding: 3px 8px; border-radius: 12px;
  border: 1px solid var(--border);
}
.wc-step-pill.active {
  background: rgba(100,210,255,0.1); border-color: var(--frost);
  color: var(--frost); font-weight: 700;
}
.wc-step-pill.done {
  background: rgba(76,175,80,0.1); border-color: #4caf50; color: #4caf50;
}
.wc-pill-num {
  font-weight: 700; font-size: 0.78rem;
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
}
.wc-pill-lbl { font-size: 0.72rem; }
.wc-step-arrow { color: var(--text-faint); font-size: 0.85rem; padding: 0 2px; }

/* Gold bar */
.wc-gold-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 0.74rem; color: var(--text-dim); padding-top: 6px;
}
.wc-dot { color: var(--text-faint); }
.wc-gold-left { font-weight: 600; color: var(--frost); }
.wc-gold-left.warn { color: var(--gold); }
.wc-gold-left.negative { color: var(--red-lt); }

/* Form rows */
.wc-row { margin-bottom: 12px; }
.wc-req { color: var(--red-lt); margin-left: 2px; }
.wc-note { font-size: 0.7rem; color: var(--text-faint); font-weight: 400; }
.wc-inline-note { font-size: 0.68rem; color: var(--text-faint); align-self: center; }
.wc-section-hdr {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--frost-dim);
  padding: 12px 0 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.wc-placeholder {
  font-size: 0.78rem; color: var(--text-faint); padding: 12px 0; font-style: italic;
}

/* Stat chips */
.wc-stat-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0 10px;
}
.wc-stat-lbl {
  font-size: 0.7rem; color: var(--text-dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0;
}
.wc-chip {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--border); border-radius: 4px;
  overflow: hidden; font-size: 0.72rem;
}
.wc-chip.sm { font-size: 0.66rem; }
.wc-chip-k { background: var(--bg-raised); color: var(--text-dim); padding: 1px 4px; font-weight: 700; }
.wc-chip-v { padding: 1px 5px; color: var(--text); font-weight: 600; }

/* Tag-style option pills (equipment, tricks, stat bonus) */
.wc-tag-row { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
.wc-tag {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 8px; font-size: 0.74rem; color: var(--text-dim);
  user-select: none; transition: border-color .15s, background .15s, color .15s;
}
.wc-tag:hover { border-color: var(--frost-dim); color: var(--text); }
.wc-tag.on {
  border-color: var(--frost); background: rgba(100,210,255,0.12);
  color: var(--frost); font-weight: 600;
}
.wc-tag.dim { opacity: 0.35; pointer-events: none; }
.wc-tag-mod { font-size: 0.65rem; color: var(--text-faint); }
.wc-tag.on .wc-tag-mod { color: var(--frost-dim); }

/* Spell groups */
.wc-spell-group {
  border: 1px solid var(--border); border-radius: 5px;
  margin-bottom: 10px; overflow: hidden;
}
.wc-sg-hdr {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; background: var(--bg-raised);
  font-size: 0.74rem; color: var(--text-dim);
}
.wc-badge {
  font-size: 0.64rem; font-weight: 700; padding: 1px 6px;
  border-radius: 10px; background: rgba(100,210,255,0.08);
  border: 1px solid var(--frost-dim); color: var(--frost-dim);
  flex-shrink: 0; margin-left: auto;
}
.wc-badge.done { background: rgba(76,175,80,0.12); border-color: #4caf50; color: #4caf50; }
.wc-badge.req  { background: rgba(255,180,50,0.1); border-color: var(--gold); color: var(--gold); }
.wc-spell-cards { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
.wc-sc {
  display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 8px; width: 130px; flex-shrink: 0;
  user-select: none; transition: border-color .15s, background .15s;
}
.wc-sc:hover { border-color: var(--frost-dim); }
.wc-sc.on { border-color: var(--frost); background: rgba(100,210,255,0.1); }
.wc-sc.dim { opacity: 0.3; pointer-events: none; }
.wc-sc-name { font-size: 0.74rem; font-weight: 600; color: var(--text); }
.wc-sc.on .wc-sc-name { color: var(--frost); }
.wc-sc-meta { font-size: 0.64rem; color: var(--text-faint); }

/* Neutral school sub-grouping */
.wc-neutral-school { border-top: 1px solid var(--border); padding: 6px 8px 8px; }
.wc-neutral-lbl {
  font-size: 0.68rem; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 5px;
}

/* Yes/No toggle blocks */
.wc-yn {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 14px 16px; margin-bottom: 14px; background: var(--bg-raised);
}
.wc-yn-title { font-weight: 700; font-size: 0.88rem; margin-bottom: 3px; }
.wc-yn-sub { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 10px; }
.wc-yn-btns { display: flex; gap: 8px; }

/* Soldiers step */
.wc-soldiers-hdr {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.wc-sol-counts { display: flex; gap: 12px; font-size: 0.75rem; color: var(--text-dim); }
.wc-cap { color: var(--red-lt); font-weight: 700; }
.wc-sol-row { border: 1px solid var(--border); border-radius: 5px; margin-bottom: 8px; overflow: hidden; }
.wc-sol-main { display: flex; align-items: center; gap: 8px; padding: 7px 8px; flex-wrap: wrap; }
.wc-sol-cost { font-size: 0.74rem; color: var(--gold); font-weight: 600; min-width: 36px; }
.wc-sol-detail {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  padding: 5px 8px 7px; border-top: 1px solid var(--border);
  background: var(--bg-raised); font-size: 0.68rem;
}
.wc-sol-equip { color: var(--text-dim); }
.wc-sol-note { color: var(--text-faint); font-style: italic; }

/* Gold summary block */
.wc-summary { margin-top: 14px; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.wc-sum-title {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-faint);
  padding: 6px 10px; background: var(--bg-raised); border-bottom: 1px solid var(--border);
}
.wc-sum-line {
  display: flex; justify-content: space-between;
  padding: 5px 10px; font-size: 0.74rem; border-bottom: 1px solid var(--border);
}
.wc-sum-line:last-child { border-bottom: none; }
.wc-sum-total {
  display: flex; justify-content: space-between;
  padding: 7px 10px; font-size: 0.78rem; font-weight: 700;
  background: rgba(100,210,255,0.06); border-top: 1px solid var(--border);
  color: var(--frost);
}
.wc-sum-total.over { color: var(--red-lt); }

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media (max-width: 480px) {
  .auth-card { padding: 20px; }
  .auth-hero h1 { font-size: 1.5rem; }
  .game-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .game-card { padding: 14px; }
  .game-card-icon { font-size: 2rem; }
  .dash-content { padding: 14px; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  /* Narrow-screen .platform-header / .platform-logo / #appVersion rules
     moved to styles/components.css */
}

@media (max-width: 375px) {
  .auth-hero h1 { font-size: 1.3rem; }
  .game-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .game-card { padding: 12px; }
  .stats-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════
   TRAVELLING MERCHANT MODAL  (.m-*)
══════════════════════════════════════════════════ */

.m-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.m-tab {
  flex: 1;
  padding: 9px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.m-tab.active {
  color: var(--frost);
  border-bottom-color: var(--frost);
}
.m-tab:hover:not(.active) { color: var(--text); }

.m-msg {
  min-height: 1.4em;
  font-size: 0.75rem;
  padding: 4px 16px;
  flex-shrink: 0;
}
.m-msg.error { color: var(--red-lt); }
.m-msg.ok    { color: #4caf50; }

/* Filter pills */
.m-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.m-pill {
  padding: 3px 10px;
  font-size: 0.72rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.m-pill.active,
.m-pill:hover {
  background: var(--frost-dim);
  color: var(--bg);
  border-color: var(--frost-dim);
}

/* Category group label */
.m-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--frost-dim);
  margin: 14px 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}
.m-group-label:first-child { margin-top: 0; }

/* Item rows */
.m-item-list { display: flex; flex-direction: column; gap: 6px; }

.m-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 5px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.m-item-row.unaffordable { opacity: 0.5; }

.m-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.m-item-effect {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.3;
}

.m-item-price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.m-price {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}

/* Tags on sell rows */
.m-linked-spell {
  font-size: 0.7rem;
  background: var(--frost-dim);
  color: var(--bg);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 5px;
  font-weight: 600;
}
.m-equipped-tag {
  font-size: 0.7rem;
  color: var(--gold);
  margin-left: 5px;
}

.m-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
  padding: 24px 0;
}

/* ═══════════════════════════════════
   BOARDGAMES (.bg-*)
═══════════════════════════════════ */

.bg-sub-tab {
  padding: 8px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 0.15s;
}
.bg-sub-tab:hover { color: var(--text); }
.bg-sub-tab-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Shared card action button groups — vertical on mobile */
.card-actions,
.army-list-actions,
.member-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.army-list-actions { justify-content: flex-end; }
@media (max-width: 480px) {
  .card-actions,
  .army-list-actions,
  .member-card-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 8px;
  }
  .card-actions .btn,
  .army-list-actions .btn,
  .member-card-actions .btn { text-align: center; }
}

/* Member card stats row */
.member-stats-row {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  margin-top: 6px;
  color: var(--text-dim);
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .member-stats-row { gap: 8px; font-size: 0.72rem; }
}