/* ═══════════════════════════════════════════════════════════
   COMPONENTS.CSS — Universally shared rules
   Loaded by every platform page BEFORE shared.css/games.css.
   Contains components, utilities, reset, and base typography
   that consume tokens via var(); the contextual files
   (shared.css for hub, games.css for game pages) supply
   the token values and add page-specific layout.

   Rules that legitimately differ between hub and game contexts
   (.card, link colours, .bg-sub-tab active colour, page shells)
   stay in shared.css and games.css.
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════
   RESET & BASE
═══════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════ */
/* No !important — game pages (Conquest/Frostgrave) use .hidden as a modifier
   class on .section/.screen with transform+opacity transitions. !important
   would force display:none and break those animations. Selectors that need
   to "win" against this rule should rely on specificity. */
.hidden { display: none; }
.text-center { text-align: center; }
.text-dim { color: var(--text-dim); }
.text-faint { color: var(--text-faint); }
.text-accent { color: var(--accent); }
.text-red { color: var(--red-lt); }
.text-green { color: var(--green-lt); }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }

/* Section / overline labels — small caps headers */
.overline {
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.overline-sm {
  font-size: 0.7rem; font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Centered loading state for lists/panels */
.loading-state {
  text-align: center; color: var(--text-dim);
  padding: 20px 0;
}

/* ═══════════════════════════════════
   BUTTONS
═══════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius);
  cursor: pointer; font-family: inherit; font-weight: 600; font-size: 0.9rem;
  padding: 12px 20px; line-height: 1; text-decoration: none;
  transition: opacity 0.15s, transform 0.1s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent-dim); color: var(--text);
}
.btn-primary:hover:not(:disabled) { background: var(--accent); }

.btn-secondary {
  background: var(--bg3); color: var(--text-dim);
  border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg4); border-color: var(--border2); }

.btn-approve {
  background: var(--green); color: var(--text);
}
.btn-approve:hover:not(:disabled) { background: var(--green-lt); }

.btn-danger {
  background: var(--bg3); color: var(--red-lt);
  border: 1px solid var(--red);
}
.btn-danger:hover:not(:disabled) { background: var(--red); color: var(--text); }

.btn-success {
  background: #2ecc71; color: #fff;
  border: 1px solid #2ecc71;
}
.btn-success:hover:not(:disabled) { filter: brightness(1.1); }
.btn-success:disabled { opacity: 1; cursor: default; }

.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 0.78rem; }

/* ═══════════════════════════════════
   FORMS
═══════════════════════════════════ */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  color: var(--text); font-size: 0.9rem; font-family: inherit;
  transition: border-color 0.2s;
  outline: none;
}
.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text-faint); }

select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; }

.form-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.form-row .form-group { flex: 1; min-width: 120px; }
@media (max-width: 480px) {
  .form-row { flex-direction: column; gap: 0; }
}

.form-error {
  font-size: 0.72rem; color: var(--red-lt);
  margin-top: 4px; display: none;
}
.form-error.visible { display: block; }

/* Radio button row label — used in signup + complete-profile flows */
.radio-row {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  font-size: 0.85rem; color: var(--text-dim);
}

/* ═══════════════════════════════════
   MODALS
═══════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.7);
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal-inner {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 500px;
  max-height: 85vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 1rem; font-weight: 700; color: var(--accent-lt);
}

.modal-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 1.4rem; cursor: pointer; padding: 0; line-height: 1;
  font-family: inherit;
}
.modal-close:hover { color: var(--text); }

.modal-body { padding: 20px; }

.modal-footer {
  padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ═══════════════════════════════════
   PLATFORM HEADER (shared chrome)
═══════════════════════════════════ */
.platform-header {
  height: var(--header-h);
  min-height: var(--header-h);
  background: linear-gradient(135deg, #181c24 0%, #1e2430 100%);
  border-bottom: 1px solid var(--accent-dim);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 100;
}
.platform-logo {
  /* Brand text — colour is set per context: shared.css overrides to --accent-lt for hub;
     games.css / game wrappers leave the default plain text colour for game pages. */
  font-size: 1.1rem; font-weight: 800;
  color: var(--text); letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 8px;
  min-width: 0;        /* allow flex item to shrink below content size */
  overflow: hidden;    /* clip text that doesn't fit — prevents header bleed */
  white-space: nowrap; /* keep brand name on one line */
}
.platform-logo .logo-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.platform-header-spacer { flex: 1; }
.platform-user {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.78rem; color: var(--text-dim);
}
.platform-user-name { font-weight: 600; color: var(--text); }

/* ───── User name dropdown menu ───── */
.user-menu-wrap { position: relative; }
.user-menu-btn {
  background: none; border: none; padding: 4px 6px; cursor: pointer;
  font-weight: 600; font-size: 0.9rem; color: var(--text);
  display: flex; align-items: center; gap: 4px;
  border-radius: 6px; transition: background 0.15s;
}
.user-menu-btn:hover { background: rgba(255,255,255,0.07); }
.user-menu-caret { font-size: 0.55rem; color: var(--text-dim); }
.user-menu-dropdown {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 200;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  overflow: hidden;
}
.user-menu-dropdown.open { display: block; }
.user-menu-item {
  display: block; width: 100%;
  padding: 10px 16px; text-align: left;
  background: none; border: none; cursor: pointer;
  font-size: 0.85rem; color: var(--text);
  transition: background 0.12s;
}
.user-menu-item:hover { background: rgba(255,255,255,0.07); }
.user-menu-item-danger { color: var(--red-lt, #e05c5c); }
.user-menu-item-danger:hover { background: rgba(224,92,92,0.12); }
.user-menu-divider { border-top: 1px solid var(--border); margin: 4px 0; }

/* Narrow-screen header — two rows: row 1 = page name + username, row 2 = buttons */
@media (max-width: 480px) {
  .platform-header {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px;
    gap: 6px 8px;
  }
  .platform-logo { font-size: 0.9rem; gap: 6px; flex: 1; }
  .platform-logo .logo-icon { font-size: 1.1rem; }
  .platform-header-spacer { display: none; }
  .platform-user-name { flex-shrink: 0; }
  .platform-user {
    flex-basis: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
  }
  .platform-user #appVersion { margin-right: auto; }
}

/* ═══════════════════════════════════
   UNIT CARDS — Screen + Print
═══════════════════════════════════ */

/* Full-screen overlay (dark chrome) */
.uc-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 600;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.uc-overlay.open { opacity: 1; pointer-events: all; }

.uc-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  gap: 12px;
  flex-shrink: 0;
}
.uc-overlay-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.uc-overlay-actions { display: flex; align-items: center; gap: 8px; }

.uc-close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 4px;
}
.uc-close-btn:hover { background: var(--bg3); color: var(--text); }

.uc-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
}

.uc-attach-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(180,130,20,0.12);
  border: 1px solid rgba(180,130,20,0.35);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.75rem;
  color: #c9a84c;
  line-height: 1.5;
}
.uc-attach-banner-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

.uc-attach-row-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.uc-attach-label {
  font-size: 0.46rem;
  color: #7a6040;
  white-space: nowrap;
  flex-shrink: 0;
}
.uc-attach-inline {
  flex: 1;
  font-size: 0.48rem;
  padding: 1px 4px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.25);
  color: #222;
  font-family: inherit;
  min-width: 0;
}
.uc-attach-print-val { display: none; }

.uc-info-bar {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.uc-info-bar strong { color: var(--game-conquest); }

.uc-grid { display: flex; flex-direction: column; gap: 20px; }

.uc-pair { display: flex; flex-direction: column; gap: 5px; }
.uc-pair-label {
  font-size: 0.68rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Card pair — A5 landscape proportions (210:148 ≈ 1.42:1) */
.uc-cards-wrapper {
  display: flex;
  height: 264px;
  max-width: 748px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  cursor: pointer;
}
.uc-cards-wrapper:hover { box-shadow: 0 6px 28px rgba(0,0,0,0.7); }

/* ── FRONT CARD ─────────────────── */
.uc-front {
  display: flex;
  flex: 1 0 0;
  background: #ece2c0;
  color: #1a1208;
  min-width: 0;
}

.uc-spine {
  width: 26px;
  background: #2a1c06;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.uc-spine-text {
  color: #c9a84c;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.uc-front-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.uc-front-header {
  background: #2a1c06;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-shrink: 0;
}
.uc-faction-name {
  color: #c9a84c;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uc-role-chips { display: flex; gap: 4px; flex-shrink: 0; }
.uc-role-chip {
  font-size: 0.52rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: #3a2c10;
  color: #9a8050;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.uc-unit-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #120c02;
  padding: 7px 10px 2px;
  line-height: 1.15;
  font-family: 'Georgia', serif;
  flex-shrink: 0;
}

.uc-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px;
  flex-shrink: 0;
}
.uc-stands { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.uc-stand-pip {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5a3a10;
  opacity: 0.65;
}
.uc-stand-extra { font-size: 0.58rem; color: #5a3a10; font-weight: 700; }
.uc-stands-label { font-size: 0.58rem; color: #7a5a30; margin-left: 3px; }
.uc-pts { font-size: 0.72rem; font-weight: 700; color: #4a3820; margin-left: auto; }

.uc-badges { display: flex; gap: 4px; padding: 0 10px 3px; flex-wrap: wrap; flex-shrink: 0; }
.uc-badge-warlord {
  font-size: 0.52rem; padding: 1px 6px; border-radius: 3px;
  background: #c9a84c; color: #1a0e00; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.uc-badge-ally {
  font-size: 0.52rem; padding: 1px 6px; border-radius: 3px;
  background: #4a7cc9; color: #fff; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}

.uc-rule-divider { height: 1px; background: rgba(90,58,16,0.22); margin: 3px 10px; }
.uc-section-label {
  font-size: 0.52rem; font-weight: 700; color: #7a5a30;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0 10px 2px; flex-shrink: 0;
}

.uc-aug-list { padding: 0 10px 6px; overflow-y: auto; flex: 1; }
.uc-aug-row {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 0.62rem; line-height: 1.65; color: #1a1208;
}
.uc-aug-type { font-weight: 700; color: #7a5430; flex-shrink: 0; }
.uc-aug-name { color: #120c02; }
.uc-no-aug { font-size: 0.6rem; color: #9a8060; font-style: italic; padding: 4px 0; }

/* ── FOLD LINE ──────────────────── */
.uc-fold-line {
  width: 3px;
  flex-shrink: 0;
  background: repeating-linear-gradient(
    to bottom, #8a6a30 0, #8a6a30 5px, transparent 5px, transparent 10px
  );
}

/* ── BACK CARD ──────────────────── */
.uc-back {
  flex: 1 0 0;
  background: #ece2c0;
  display: flex;
  flex-direction: column;
  color: #1a1208;
  min-width: 0;
}
.uc-back-header {
  background: #2a1c06;
  color: #c9a84c;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 10px;
  font-family: 'Georgia', serif;
  flex-shrink: 0;
}
.uc-back-body {
  flex: 1;
  padding: 8px 12px 4px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.uc-rule-block { border-bottom: 1px solid rgba(90,58,16,0.18); padding-bottom: 5px; }
.uc-rule-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.uc-rule-name {
  font-size: 0.6rem; font-weight: 800; color: #120c02;
  font-family: 'Georgia', serif; letter-spacing: 0.04em;
}
.uc-rule-tag {
  font-size: 0.5rem; padding: 1px 5px; border-radius: 3px;
  background: rgba(90,58,16,0.15); color: #7a5430; font-weight: 700;
}
.uc-rule-tag-warlord { background: rgba(201,168,76,0.3); color: #7a5a10; }
.uc-rule-line {
  height: 14px;
  border-bottom: 1px dotted rgba(90,58,16,0.3);
}
.uc-no-rules {
  font-size: 0.62rem; color: #9a8060; font-style: italic;
  text-align: center; padding: 8px 0;
}
.uc-rule-effect {
  font-size: 0.6rem;
  color: #4a3010;
  line-height: 1.35;
  padding: 3px 0 4px;
}
/* ── SPELLS ─────────────────────────── */
.uc-spells-block { margin-top: 4px; }
.uc-spell-school {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #7a5a10;
  text-transform: uppercase;
  margin: 4px 0 2px;
  border-bottom: 1px solid rgba(90,58,16,0.2);
}
.uc-spell-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 6px;
  padding: 2px 0;
  border-bottom: 1px dotted rgba(90,58,16,0.15);
}
.uc-spell-name {
  font-size: 0.6rem;
  font-weight: 700;
  color: #2a1a04;
  grid-column: 1;
  grid-row: 1;
}
.uc-spell-meta {
  font-size: 0.55rem;
  color: #7a5a10;
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}
.uc-spell-effect {
  font-size: 0.58rem;
  color: #4a3010;
  line-height: 1.3;
  grid-column: 1 / -1;
  grid-row: 2;
}

/* ── NO STATS PLACEHOLDER ──────────── */
.uc-no-stats {
  font-size: 0.58rem;
  font-style: italic;
  color: #9a7a50;
  background: rgba(90,58,16,0.08);
  border: 1px dashed rgba(90,58,16,0.25);
  border-radius: 3px;
  padding: 5px 10px;
  margin: 5px 0 4px;
  text-align: center;
}

/* ── STAT GRID ──────────────────────── */
.uc-stats-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  margin: 5px 0 4px;
  background: rgba(90,58,16,0.12);
  border-radius: 3px;
  padding: 4px 3px;
}
.uc-stat {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
}
.uc-stat-label {
  font-size: 0.47rem; font-weight: 700; color: #7a5430; text-transform: uppercase;
  letter-spacing: 0.02em; line-height: 1;
}
.uc-stat-val {
  font-size: 0.72rem; font-weight: 800; color: #3a1e06;
  font-family: 'Georgia', serif; line-height: 1;
}
.uc-stat-modified .uc-stat-val { color: #2a6e10; }
.uc-stat-delta { font-size: 0.42rem; font-weight: 700; color: #2a6e10; line-height: 1; }

/* ── INNATE ABILITIES ──────────────── */
.uc-innate-block { background: rgba(90,58,16,0.05); border-radius: 3px; padding: 4px 6px; margin-top: 4px; }
.uc-draw-block { background: rgba(40,80,40,0.06); border-radius: 3px; padding: 4px 6px; margin-top: 3px; }
.uc-ability-tags {
  display: flex; flex-wrap: wrap; gap: 3px;
  margin-top: 4px;
}
.uc-ability-tag {
  font-size: 0.54rem; padding: 1px 5px; border-radius: 10px;
  background: rgba(90,58,16,0.12); color: #5a3210; border: 1px solid rgba(90,58,16,0.2);
  line-height: 1.4; white-space: nowrap;
}
.uc-ability-tag-offensive { background: rgba(200,64,64,0.12);  color: #c84040; border-color: rgba(200,64,64,0.25); }
.uc-ability-tag-defensive { background: rgba(42,106,154,0.12); color: #2a6a9a; border-color: rgba(42,106,154,0.25); }
.uc-ability-tag-combat    { background: rgba(144,144,192,0.12); color: #7070a0; border-color: rgba(144,144,192,0.25); }
.uc-ability-tag-draw {
  background: rgba(40,80,40,0.15); color: #1e4a1e; border-color: rgba(40,80,40,0.3);
}
.uc-ability-clickable { cursor: pointer; }
.uc-ability-clickable:hover { opacity: 0.75; }

.uc-rule-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0,0,0,0.65);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.uc-rule-popup.open { display: flex; }
.uc-rule-popup-inner {
  background: var(--bg2, #1e1710);
  border: 1px solid var(--border, #3d2e1e);
  border-radius: 10px;
  padding: 18px 20px;
  max-width: 460px;
  width: 100%;
  max-height: 60vh;
  overflow-y: auto;
}
.uc-rule-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.uc-rule-popup-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--accent-lt, #c9a84c);
}
.uc-rule-popup-close {
  background: none;
  border: none;
  color: var(--text-dim, #a0907a);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.uc-rule-popup-body {
  font-size: 0.78rem;
  color: var(--text-dim, #a0907a);
  line-height: 1.65;
}
.uc-rule-popup-ref {
  font-size: 0.68rem;
  color: var(--text-faint, #6a5a48);
  margin-top: 10px;
  font-style: italic;
}
@media print {
  .uc-rule-popup  { display: none !important; }
  .uc-zoom-modal  { display: none !important; }
}

.uc-back-footer {
  display: flex; justify-content: space-between;
  padding: 4px 10px; font-size: 0.55rem; color: #7a5430; font-weight: 600;
  background: rgba(90,58,16,0.08); border-top: 1px solid rgba(90,58,16,0.2);
  flex-shrink: 0;
}

/* ── ZOOM MODAL ─────────────────── */
.uc-zoom-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(0,0,0,0.82);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.uc-zoom-modal.open { display: flex; }
.uc-zoom-container {
  position: relative;
  overflow: visible;
}

/* ── PRINT OPTIONS BAR ─────────── */
.uc-print-opts {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 0.8rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.uc-print-opts-label { font-weight: 600; color: var(--text); white-space: nowrap; }
.uc-print-opt-item {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
}
.uc-print-opt-flip { display: flex; align-items: center; gap: 12px; }
.uc-print-opt-hidden { display: none !important; }

/* ── PRINT ──────────────────────── */
.uc-print-only { display: none; }

@media print {
  /* A4 landscape with 10mm margins: printable area 277mm × 190mm.
     2×2 grid = cells of 138.5mm × 95mm.
     A5-landscape card (210mm × 148mm) fits at scale 0.642 (height-constrained). */
  @page { size: A4 landscape; margin: 10mm; }

  html, body { height: auto !important; overflow: visible !important; }
  body > *:not(#unitCardsOverlay) { display: none !important; }

  #unitCardsOverlay {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    pointer-events: all !important;
    background: white !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }
  .uc-overlay-header { display: none !important; }
  .uc-overlay-body { padding: 0 !important; overflow: visible !important; height: auto !important; flex: none !important; }
  .uc-info-bar { display: none !important; }
  .uc-attach-banner { display: none !important; }
  .uc-print-opts { display: none !important; }
  .uc-attach-inline { display: none !important; }
  .uc-attach-print-val { display: inline; font-size: 0.46rem; color: #444; }

  /* Hide screen layout, show print layout */
  .uc-screen-only { display: none !important; }
  .uc-print-only { display: block !important; }

  /* Double-sided: 2×2 grid of individual cards */
  .uc-print-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    break-after: page;
    page-break-after: always;
  }
  .uc-print-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  /* Single-sided: 1-column × 2-row grid of side-by-side front+back pairs */
  .uc-print-pair-page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    break-after: page;
    page-break-after: always;
  }
  .uc-print-pair-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  .uc-print-pair-cell {
    width: 277mm;
    height: 95mm;
    overflow: hidden;
    position: relative;
    border: 1px dashed #aaa;
    box-sizing: border-box;
  }
  /* Pair inner: front + fold + back at natural A5-pair size, scaled same as 2×2 */
  .uc-print-pair-inner {
    display: flex;
    width: 423mm;
    height: 148mm;
    transform: scale(0.642);
    transform-origin: top left;
    flex-shrink: 0;
  }
  /* Restore fold line for single-sided pair layout */
  .uc-print-pair-inner .uc-fold-line { display: block !important; }

  /* Cell sized to half the printable area; card scaled to fit */
  .uc-print-cell {
    width: 138.5mm;
    height: 95mm;
    overflow: hidden;
    position: relative;
    border: 1px dashed #aaa;
    box-sizing: border-box;
  }
  .uc-print-cell > .uc-front,
  .uc-print-cell > .uc-back {
    width: 210mm;
    height: 148mm;
    transform: scale(0.642);
    transform-origin: top left;
    flex-shrink: 0;
  }

  /* Prevent inner scroll containers clipping at print time */
  .uc-aug-list, .uc-back-body { overflow: visible !important; }

  /* ── LARGER FONTS FOR PRINT READABILITY ── */
  .uc-unit-name     { font-size: 1.35rem !important; }
  .uc-faction-name  { font-size: 0.7rem  !important; }
  .uc-spine-text    { font-size: 0.7rem  !important; }
  .uc-section-label { font-size: 0.66rem !important; }
  .uc-stat-label    { font-size: 0.6rem  !important; }
  .uc-stat-val      { font-size: 0.92rem !important; }
  .uc-stat-delta    { font-size: 0.54rem !important; }
  .uc-ability-tag   { font-size: 0.68rem !important; }
  .uc-pts           { font-size: 0.9rem  !important; }
  .uc-stands-label  { font-size: 0.72rem !important; }
  .uc-aug-row       { font-size: 0.8rem  !important; }
  .uc-back-header   { font-size: 0.85rem !important; }
  .uc-rule-name     { font-size: 0.76rem !important; }
  .uc-rule-effect   { font-size: 0.76rem !important; }
  .uc-spell-name    { font-size: 0.76rem !important; }
  .uc-spell-meta    { font-size: 0.68rem !important; }
  .uc-spell-effect  { font-size: 0.74rem !important; }
  .uc-back-footer   { font-size: 0.68rem !important; }
  .uc-attach-label  { font-size: 0.58rem !important; }

  /* ── BLACK & WHITE BASE — keep ability tag colours ── */
  .uc-front, .uc-back { background: #fff !important; color: #000 !important; }

  .uc-spine, .uc-front-header, .uc-back-header {
    background: #000 !important; color: #fff !important;
  }
  .uc-spine-text, .uc-faction-name { color: #fff !important; }
  .uc-back-header { color: #fff !important; }

  .uc-role-chip { background: #333 !important; color: #fff !important; }

  .uc-unit-name { color: #000 !important; }
  .uc-pts, .uc-stands-label, .uc-stand-extra { color: #000 !important; }
  .uc-stand-pip { background: #000 !important; opacity: 1 !important; }
  .uc-section-label { color: #333 !important; }
  .uc-rule-divider { background: #000 !important; }

  .uc-aug-type, .uc-aug-name { color: #000 !important; }
  .uc-no-aug, .uc-no-rules { color: #555 !important; }

  .uc-stats-grid { background: #eee !important; }
  .uc-stat-label { color: #333 !important; }
  .uc-stat-val { color: #000 !important; }

  .uc-innate-block { background: #f5f5f5 !important; }
  .uc-draw-block   { background: #f0f5f0 !important; }
  /* Default (Other) ability tags → neutral grey on print */
  .uc-ability-tag { background: #e8e8e8 !important; color: #333 !important; border-color: #bbb !important; }
  /* Subcat tags keep their colours — reinstated after the above reset */
  .uc-ability-tag-offensive { background: rgba(200,64,64,0.15)  !important; color: #c84040 !important; border-color: rgba(200,64,64,0.4)  !important; }
  .uc-ability-tag-defensive { background: rgba(42,106,154,0.15) !important; color: #2a6a9a !important; border-color: rgba(42,106,154,0.4) !important; }
  .uc-ability-tag-combat    { background: rgba(112,112,160,0.15)!important; color: #5050a0 !important; border-color: rgba(112,112,160,0.4)!important; }
  .uc-ability-tag-draw      { background: rgba(40,120,40,0.15)  !important; color: #1a6a1a !important; border-color: rgba(40,120,40,0.4)  !important; }

  .uc-rule-block { border-color: #ccc !important; }
  .uc-rule-name { color: #000 !important; }
  .uc-rule-tag { background: #eee !important; color: #333 !important; border-color: #999 !important; }
  .uc-rule-tag-warlord { background: #ffe08a !important; color: #5a4000 !important; }
  .uc-rule-effect { color: #000 !important; }

  .uc-spell-school { color: #000 !important; border-color: #999 !important; }
  .uc-spell-name   { color: #000 !important; }
  .uc-spell-meta   { color: #555 !important; }
  .uc-spell-effect { color: #000 !important; }

  .uc-back-footer { background: #f0f0f0 !important; color: #000 !important; }
  .uc-fold-line { display: none !important; }
}