/* ── Typography (bundled, offline) ──
   Cinzel = engraved Roman caps for the FFXIV "Triple Triad" headline look;
   EB Garamond = its readable classical companion for body/UI text. */
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ── FFXIV Triple Triad palette ──
   Regal violet/plum backdrop, the 3x3 grid on an ivory playing field with a gold
   ornate frame, gold filigree card backs, and blue (you) vs red (opponent). */
:root {
  /* deep-purple "glass" panels with gold edges */
  --panel-top: rgba(78, 48, 100, 0.62);
  --panel-bot: rgba(40, 22, 56, 0.88);
  --gold: #d8b65a;          /* primary gold (frames / accents) */
  --gold-bright: #f3e0a0;
  --gold-deep: #6a4a18;
  --hi-gold: #ffe08a;       /* cursor / target / selection */
  /* Ornate card frame band (painted as a border-box background layer). */
  --card-frame: linear-gradient(180deg, #f6e2a4 0%, #e2bd5a 44%, #a87f2c 100%) border-box;
  --card-frame-bright: linear-gradient(180deg, #fff0c4 0%, #f0d27a 45%, #c79a3e 100%) border-box;

  --ivory: #efe7d2;         /* board cells */

  --text: #ece4f2;          /* light lavender body text */
  --text-dim: #bcaad6;
  --text-faint: #8f7da8;
  --hair: rgba(216, 182, 90, 0.20); /* faint gold divider lines */

  --player: #6ea8fe;        /* your cards (blue) */
  --ai: #ff7a7a;            /* opponent cards (red) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  /* violet glow at centre fading to deep plum/maroon at the edges */
  background:
    radial-gradient(920px 720px at 50% 38%, #5d3c76 0%, #472a5e 46%, #341c46 78%, #2b1532 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'EB Garamond', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center; /* centre when it fits; never clip the top when it doesn't */
  padding: 12px;
  min-height: 100vh;
}

/* Decorative layered gold frame around the whole window:
   gold band + bright gold line + a fine inner gold line. */
#app-frame {
  position: fixed;
  inset: 10px;
  z-index: 50;
  pointer-events: none;
  border: 3px solid var(--gold);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(0, 0, 0, 0.45),
    inset 0 0 26px rgba(0, 0, 0, 0.35);
}
/* bright gold line just inside the band */
#app-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid var(--gold-bright);
  border-radius: 9px;
}
/* fine inner gold line */
#app-frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(216, 182, 90, 0.6);
  border-radius: 6px;
}

/* Engraved Cinzel for the signature display text across the UI. */
h1, summary, button, #scoreboard, #turn-indicator, #banner,
.card-name, .val, .rule-card-title, .pool-subhead {
  font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif;
}

h1 {
  font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 4px;
  margin-bottom: 10px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f8ecc0 0%, #e0c070 50%, #b88a32 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}

/* ── LAYOUT ── */
#main-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between; /* spread the 3 columns evenly when maximized */
  gap: 24px;
  width: 100%;
  max-width: 1600px;
}

#game-column {
  order: 2; /* board sits in the middle column */
  align-self: center; /* centre the board vertically against the taller side panels */
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
/* The play area is scaled to fit the window by fitGameColumn() in game.js (JS
   measures the real content height — board + hands + banner + button — and zooms
   #game-column to fill a large window yet never overflow the gold frame on a
   short one). Kept in JS, not @media tiers, so it adapts to the actual content. */

/* ── SCOREBOARD ── */
#scoreboard {
  display: flex;
  gap: 40px;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.score-player { color: var(--player); text-shadow: 0 0 8px rgba(110, 168, 254, 0.5); }
.score-ai     { color: var(--ai); text-shadow: 0 0 8px rgba(255, 122, 122, 0.5); }

/* Online match clock (90 s bank + 5 s free per turn), beside each score. */
.clock {
  display: inline-block; margin-left: 10px; padding: 0 7px; min-width: 3.2em;
  font-size: 0.85rem; font-variant-numeric: tabular-nums; text-align: center;
  color: var(--text-dim); text-shadow: none;
  border: 1px solid rgba(216, 182, 90, 0.35); border-radius: 6px; background: rgba(0, 0, 0, 0.3);
}
.clock.hidden { display: none; }
.clock.active { color: var(--gold-bright); border-color: var(--gold); box-shadow: 0 0 6px rgba(216, 182, 90, 0.45); }
.clock .grace { color: #9fe0a0; margin-left: 4px; font-size: 0.75rem; }
.clock.low { color: #ff7a7a; border-color: #ff7a7a; animation: clock-pulse 1s ease-in-out infinite; }
@keyframes clock-pulse { 50% { box-shadow: 0 0 10px rgba(255, 122, 122, 0.8); } }

/* FFXIV-style time gauge beside each hand: the fill is the bank, the thin
   green strip under it is the free grace time draining first. Online only;
   it keeps its space (visibility) so the board doesn't jump between turns. */
.time-bar {
  display: none; position: relative; width: 460px; max-width: 90%; height: 10px;
  border: 1px solid rgba(216, 182, 90, 0.55); border-radius: 5px;
  background: rgba(0, 0, 0, 0.55); overflow: hidden; visibility: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}
body.online .time-bar { display: block; }
.time-bar.show { visibility: visible; }
#tbar-a { margin-top: -10px; }
#tbar-p { margin-bottom: -10px; }
.time-bar .tb-fill {
  position: absolute; inset: 0 auto 0 0; width: 100%;
  transition: width 0.2s linear, background 0.3s;
  opacity: 0.6; filter: saturate(0.6);
}
#tbar-p .tb-fill { background: linear-gradient(180deg, #a9cbff, var(--player) 55%, #3d6fc4); }
#tbar-a .tb-fill { background: linear-gradient(180deg, #ffb3b3, var(--ai) 55%, #c44848); }
.time-bar.active { border-color: var(--gold); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 8px rgba(216, 182, 90, 0.5); }
.time-bar.active .tb-fill { opacity: 1; filter: none; }
.time-bar.low .tb-fill { background: linear-gradient(180deg, #ffd0a0, #ff6a3d 55%, #c4321c); }
.time-bar.low { border-color: #ff7a7a; animation: clock-pulse 1s ease-in-out infinite; }
.time-bar .tb-grace {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: #9fe0a0; box-shadow: 0 0 5px #9fe0a0;
  transition: width 0.2s linear;
}

#turn-indicator {
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 8px;
  min-height: 1.2em;
}

/* Active ruleset — prominent black box under the score so players can always
   see which rules are in play (incl. whatever Roulette rolled). */
#active-ruleset {
  max-width: 460px;
  margin: 0 auto 10px;
  padding: 6px 16px;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid var(--gold);
  border-radius: 8px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4);
  color: var(--gold-bright);
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  text-align: center;
  min-height: 1.2em;
}

#game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ── CARD ── */
.card {
  width: 90px;
  height: 110px;
  border: 4px solid transparent;            /* gold frame band, painted via the border-box bg layer */
  border-radius: 8px;
  background: linear-gradient(160deg, #3a2f48, #241a30) padding-box, var(--card-frame);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  user-select: none;
  box-shadow: 0 0 0 1px var(--gold-deep), 0 3px 9px rgba(0, 0, 0, 0.5);
}
/* Ornate inner edge: a bright-gold hairline, a thin dark gap, then a recessed face. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(247, 226, 164, 0.65),
    inset 0 0 0 2px rgba(20, 12, 6, 0.45),
    inset 0 0 12px rgba(0, 0, 0, 0.38);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--gold-deep), 0 7px 18px rgba(0, 0, 0, 0.6); }

.card.player-card  { background: linear-gradient(160deg, #4a78c4, #284e8c) padding-box, var(--card-frame); }
.card.ai-card      { background: linear-gradient(160deg, #c25a60, #8a323c) padding-box, var(--card-frame); }
.card.face-down    {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 236, 180, 0.32), transparent 55%) padding-box,
    linear-gradient(160deg, #b89a52, #7a5e2a) padding-box,
    var(--card-frame-bright);
  cursor: default;
}
.card.selected     { box-shadow: 0 0 0 1px var(--hi-gold), 0 0 16px rgba(255, 224, 138, 0.85), 0 4px 14px rgba(0, 0, 0, 0.5); }
.card.selected::before { box-shadow: inset 0 0 0 1px var(--hi-gold), inset 0 0 0 2px rgba(20, 12, 6, 0.4), inset 0 0 14px rgba(255, 210, 100, 0.35); }
.card.disabled     { opacity: 0.4; cursor: not-allowed; } /* Order/Chaos: not the forced card */
.card.board-player { background: linear-gradient(160deg, #4471ba, #234781) padding-box, var(--card-frame); }
.card.board-ai     { background: linear-gradient(160deg, #b8525a, #80303a) padding-box, var(--card-frame); }

.card-name {
  font-size: 0.48rem;
  color: #f4ecd6;
  text-align: center;
  padding: 1px 4px;
  position: absolute;
  bottom: 2px;
  left: 0; right: 0;
  line-height: 1.0;
  /* Wrap to up to two lines so full names show instead of being cut off. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}
/* Reserve equal space on both sides so the name stays centered on the card while
   still clearing the bottom-left star rating. */
.card.has-stars .card-name { left: 18px; right: 18px; padding: 1px 2px; }

/* Hand cards show their name as a caption BELOW the card (full width, wraps, and
   auto-shrinks via JS) so long names are never cut off. */
.hand-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.card-caption {
  width: 92px;
  font-size: 0.55rem;
  line-height: 1.06;
  color: #f4ecd6;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.7em;
}

/* ── DRAFT MODAL ── */
#draft-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 10, 28, 0.8);
  padding: 16px;
  overflow: auto;
}
#draft-modal.hidden { display: none; }
.draft-panel {
  background: linear-gradient(160deg, var(--panel-top), var(--panel-bot));
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 10px 36px rgba(0, 0, 0, 0.6);
  padding: 18px 22px;
  width: min(820px, 96vw);
  max-height: 94vh;
  overflow: auto;
}
.draft-panel h2 {
  font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  color: var(--gold-bright);
  text-align: center;
  margin-bottom: 4px;
  font-size: 1.25rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.draft-note { text-align: center; color: var(--text-dim); font-size: 0.8rem; margin-bottom: 10px; }
#draft-ruleset {
  margin: 0 auto 14px;
  max-width: max-content;
  padding: 6px 16px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold-bright);
  font-size: 0.84rem;
  letter-spacing: 0.3px;
  text-align: center;
}
.draft-row { margin-bottom: 14px; }
.draft-row-label { color: var(--gold); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.5px; margin-bottom: 6px; }
.draft-options { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.draft-option {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  border: 2px solid rgba(216, 182, 90, 0.25);
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.draft-option:hover { background: rgba(0, 0, 0, 0.34); border-color: rgba(216, 182, 90, 0.5); }
.draft-option.selected {
  border-color: var(--hi-gold);
  box-shadow: 0 0 12px rgba(255, 224, 138, 0.55);
  background: rgba(255, 224, 138, 0.1);
}
.draft-actions { display: flex; justify-content: center; gap: 16px; margin-top: 10px; }
.draft-actions button {
  font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  font-size: 0.95rem;
  padding: 9px 22px;
  border-radius: 8px;
  font-weight: 700;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #e8c862, #b8902f);
  color: #2a1c06;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.draft-actions button:hover { filter: brightness(1.08); }
.draft-actions button:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
#draft-cancel { background: rgba(0, 0, 0, 0.35); color: var(--text); border-color: rgba(216, 182, 90, 0.5); }

.val { position: absolute; font-size: 0.85rem; font-weight: bold; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6); }
.val-top    { top: 4px;    left: 50%; transform: translateX(-50%); }
.val-bottom { bottom: 18px; left: 50%; transform: translateX(-50%); }
.val-left   { left: 5px;   top: 50%; transform: translateY(-50%); }
.val-right  { right: 5px;  top: 50%; transform: translateY(-50%); }
/* Net modifier badge in the card's top-left corner. */
.card-mod {
  position: absolute;
  top: 3px;
  left: 4px;
  z-index: 4;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.3;
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.card-mod.buffed { color: #7CFC78; }
.card-mod.nerfed { color: #ff8a5a; }

/* FFXIV star rating ("★N") in the card's bottom-left corner. */
.card-stars {
  position: absolute;
  bottom: 4px;
  left: 4px;
  z-index: 5;
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-bright);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  font-family: 'Segoe UI Symbol', 'Segoe UI', sans-serif;
  pointer-events: none;
}

/* Card Pool: Tier (FF8) and Stars (FFXIV) side by side, aligned left. */
.tier-row { display: flex; gap: 10px; align-items: flex-start; margin-left: -2px; }
.tier-col { display: flex; flex-direction: column; gap: 2px; }
.star-col .rule-name {
  font-family: 'Segoe UI Symbol', 'Segoe UI', sans-serif;
  color: var(--gold-bright);
  font-size: 0.6rem;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

/* Card type label (FFXIV) — small pill centered between the top and middle numbers */
.card-type {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 7px;
  color: #1c1208;
  background: #d8b65a;
  border: 1px solid rgba(0,0,0,0.35);
  white-space: nowrap;
  pointer-events: none;
}
.card-type.type-1 { background: #e89a4a; } /* Primal */
.card-type.type-2 { background: #7db4ec; } /* Scion */
.card-type.type-3 { background: #8fcf6a; } /* Beastman */
.card-type.type-4 { background: #b9c0cc; } /* Garlean */
/* FF8 element badge (reuses .card-type pill) */
.card-type.elem-fire    { background: #e2723e; }
.card-type.elem-ice     { background: #79c8e2; }
.card-type.elem-thunder { background: #e6c64c; }
.card-type.elem-earth   { background: #c0944e; }
.card-type.elem-poison  { background: #b56cd4; }
.card-type.elem-wind    { background: #84c46e; }
.card-type.elem-water   { background: #5a9be4; }
.card-type.elem-holy    { background: #efe3a8; }

/* Elemental rule: element marker on a board cell (stays above a placed card). */
.cell-element {
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 6;
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}
/* Element icons are inline SVG (not OS emoji), so they render identically in the
   packaged app — no more "tofu" boxes. */
.cell-element svg { width: 17px; height: 17px; display: block; }
.elem-ico { display: inline-flex; vertical-align: middle; }
.elem-ico svg { width: 11px; height: 11px; }

/* ── HAND ── */
.hand {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── BOARD (ivory playing field in a gold frame) ── */
#board-wrap {
  position: relative;
}
/* Fine inner gold frame line around the playing field. */
#board-wrap::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(243, 224, 160, 0.45);
  border-radius: 5px;
  pointer-events: none;
  z-index: 3;
}
/* Ornamental gold corner brackets. */
.board-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid var(--gold-bright);
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.board-corner.tl { top: -5px; left: -5px;  border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.board-corner.tr { top: -5px; right: -5px; border-left: none;  border-bottom: none; border-top-right-radius: 6px; }
.board-corner.bl { bottom: -5px; left: -5px;  border-right: none; border-top: none; border-bottom-left-radius: 6px; }
.board-corner.br { bottom: -5px; right: -5px; border-left: none;  border-top: none; border-bottom-right-radius: 6px; }

#board {
  display: grid;
  grid-template-columns: repeat(3, 90px);
  grid-template-rows: repeat(3, 110px);
  gap: 3px;                                   /* thin grid lines show the board base */
  padding: 8px;
  background: linear-gradient(160deg, #c2b083, #a8946b);
  border: 3px solid var(--gold);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(106, 74, 24, 0.5), inset 0 0 18px rgba(80, 50, 10, 0.25), 0 6px 18px rgba(0,0,0,0.5);
  perspective: 700px; /* gives the capture flip a 3D feel */
}

.board-cell {
  width: 90px;
  height: 110px;
  border-radius: 2px;
  background: linear-gradient(160deg, #efe7d2, #e3d6b8);
  cursor: pointer;
  transition: box-shadow 0.15s, background 0.15s;
  position: relative;
}
/* faint diamond motif in each empty cell */
.board-cell::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(120, 95, 50, 0.30);
  pointer-events: none;
}
.board-cell.target {
  background: linear-gradient(160deg, #fff5d6, #f3e6bc);
  box-shadow: inset 0 0 0 2px var(--hi-gold), inset 0 0 12px rgba(255, 210, 100, 0.45);
}

/* ── ANIMATIONS ── */
/* Newly placed card pops into the cell. */
@keyframes place-pop {
  0%   { transform: scale(0.55); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.board-cell .card.placed {
  animation: place-pop 0.28s ease-out;
}

/* Captured card flips on its vertical axis as it changes color. */
@keyframes capture-flip {
  0%   { transform: rotateY(0deg)   scale(1);   box-shadow: none; }
  50%  { transform: rotateY(90deg)  scale(1.1); box-shadow: 0 0 20px rgba(255, 224, 138, 0.9); }
  100% { transform: rotateY(0deg)   scale(1);   box-shadow: none; }
}
.board-cell .card.flipping {
  animation: capture-flip 0.5s ease-in-out;
  backface-visibility: hidden;
}

/* Center-board banner for Same / Plus / Combo — gold with a dark outline so it
   reads over the ivory field. */
#board-fx {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #f6da78;
  text-shadow:
    2px 0 0 #3a1c4e, -2px 0 0 #3a1c4e, 0 2px 0 #3a1c4e, 0 -2px 0 #3a1c4e,
    0 0 12px rgba(58, 28, 78, 0.9), 0 3px 6px rgba(0,0,0,0.55);
}
#board-fx.show {
  animation: fx-pop 1s ease-out;
}
@keyframes fx-pop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-6deg); }
  20%  { opacity: 1; transform: scale(1.2) rotate(2deg); }
  60%  { opacity: 1; transform: scale(1)   rotate(0deg); }
  100% { opacity: 0; transform: scale(1)   rotate(0deg); }
}

/* ── BANNER ── */
#banner {
  margin-top: 16px;
  padding: 14px 32px;
  border-radius: 6px;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  background: linear-gradient(180deg, rgba(70, 44, 92, 0.92), rgba(40, 22, 56, 0.92));
  box-shadow: 0 3px 12px rgba(0,0,0,0.5);
}
#banner.win  { color: #9ff0b0; border: 2px solid #9ff0b0; }
#banner.lose { color: #ff8a8a; border: 2px solid #ff8a8a; }
#banner.draw { color: var(--gold-bright); border: 2px solid var(--gold); }
.hidden { display: none !important; }

/* ── NEW GAME / REMATCH / CHANGE DECK ── */
#game-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
#game-actions button {
  padding: 10px 28px;
  background: linear-gradient(180deg, #e6c463, #b8902f);
  color: #2a1638;
  border: 2px solid var(--gold-deep);
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.55), 0 2px 8px rgba(0,0,0,0.5);
  transition: background 0.15s, box-shadow 0.15s;
}
#game-actions button:hover {
  background: linear-gradient(180deg, #f3d479, #caa040);
  box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.7), 0 0 14px rgba(255, 210, 100, 0.55);
}

/* ── SIDE PANEL ── */
/* Side panels share one width so the board (between them) stays centred on the
   page — aligned with the title — even with space-between. */
#side-panel {
  order: 1; /* Rules + Card Pool on the left */
  flex: 0 1 360px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* scroll internally if the toggles outgrow the window */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
}
#side-panel::-webkit-scrollbar { width: 8px; }
#side-panel::-webkit-scrollbar-thumb { background: #7a5e2a; border-radius: 4px; }
#side-panel::-webkit-scrollbar-track { background: transparent; }

/* Modifiers list — single column, matching the Rules section so the toggles
   line up and never wrap. */
.rule-grid {
  display: flex;
  flex-direction: column;
}
.rule-toggle.compact {
  padding: 6px 0;
  border-bottom: 1px solid var(--hair);
}
.rule-toggle.compact:last-child { border-bottom: none; }
.rule-toggle.compact .rule-name { font-size: 0.85rem; }

/* ── REFERENCE COLUMN (collapsible dropdowns) ── */
#howto-panel {
  order: 3; /* reference on the right */
  flex: 0 1 360px; /* same width as #side-panel so the board stays centred */
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* cap to the viewport; the column scrolls if both dropdowns are open and tall */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 6px;
}
#howto-panel::-webkit-scrollbar { width: 8px; }
#howto-panel::-webkit-scrollbar-thumb { background: #7a5e2a; border-radius: 4px; }
#howto-panel::-webkit-scrollbar-track { background: transparent; }

/* Collapsible dropdown (How to Play / Modifiers). */
.dropdown { padding: 12px 16px; }
.dropdown > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  user-select: none;
}
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary::before {
  content: "▸";
  font-size: 0.8em;
  transition: transform 0.15s;
}
.dropdown[open] > summary::before { transform: rotate(90deg); }
.dropdown-body {
  margin-top: 12px;
  border-top: 1px solid var(--hair);
  padding-top: 12px;
}

/* Deep-purple panels with a gold frame. */
.panel-section {
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  border: 1px solid var(--gold);
  border-radius: 5px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 232, 175, 0.18), 0 3px 10px rgba(0,0,0,0.45);
  color: var(--text);
}

/* ── RULE TOGGLES ── */
.panel-note {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 10px;
  line-height: 1.4;
}

/* Sub-heading inside the Card Pool section (Source / Tier). */
.pool-subhead {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold);
  margin: 6px 0 2px;
  font-weight: 700;
}

.rule-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--hair);
  user-select: none;
}
.rule-toggle:last-of-type { border-bottom: none; }
.rule-toggle input[type="checkbox"] { display: none; }
/* Locked-out toggle (e.g. FF8 source while Ascension is on). */
.rule-toggle:has(input:disabled) { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.toggle-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid #9a7ec0;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: transparent;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.rule-toggle input:checked + .toggle-box,
.toggle-box.checked {
  background: var(--gold);
  color: #2a1638;
  border-color: var(--gold-deep);
  box-shadow: 0 0 8px rgba(255, 210, 100, 0.6);
}
.toggle-box.checked { background: #b89640; color: #2a1638; cursor: default; box-shadow: none; }

.rule-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.rule-always-on .rule-name { color: var(--text-faint); }

/* ── HOW TO PLAY ── */
.rule-card {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.rule-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.rule-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rule-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(216, 182, 90, 0.16);
  color: var(--gold-bright);
  border: 1px solid #b08a3e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.rule-badge.always { background: rgba(70, 100, 50, 0.3); color: #b8e07a; border-color: #6a9a3a; }

.rule-card p {
  font-size: 0.78rem;
  color: #d9cfe8;
  line-height: 1.5;
  margin-bottom: 5px;
}
.rule-card p.example {
  font-size: 0.74rem;
  color: #b29ed0;
  font-style: italic;
  margin-bottom: 0;
}

/* Aligned definition list for the Modifiers card: every name in a left column,
   every description starting at the same x. */
.modifier-defs {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 6px;
  margin: 0 0 8px;
}
.modifier-defs dt {
  font-weight: 700;
  color: var(--gold);
  font-size: 0.78rem;
  white-space: nowrap;
}
.modifier-defs dd {
  margin: 0;
  font-size: 0.78rem;
  color: #d9cfe8;
  line-height: 1.4;
}

/* ── OPPONENT PICKER ── */
#opponent-select {
  width: 100%;
  font-family: 'EB Garamond', 'Palatino Linotype', Georgia, serif;
  font-size: 0.85rem;
  padding: 7px 8px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--gold);
  border-radius: 6px;
  cursor: pointer;
}
#opponent-select:focus { outline: none; box-shadow: 0 0 8px rgba(255, 210, 100, 0.4); }
#opponent-search {
  width: 100%;
  margin-bottom: 8px;
  font-family: 'EB Garamond', 'Palatino Linotype', Georgia, serif;
  font-size: 0.85rem;
  padding: 7px 10px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--gold);
  border-radius: 6px;
}
#opponent-search:focus { outline: none; box-shadow: 0 0 8px rgba(255, 210, 100, 0.4); }
#opponent-select optgroup { color: var(--gold-bright); background: #2b1532; font-style: normal; font-weight: 700; }
#opponent-select option { color: var(--text); background: #2b1532; font-weight: 400; }

#opponent-info { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
#opponent-info:empty { display: none; }
.opp-info-line { display: flex; gap: 8px; font-size: 0.76rem; line-height: 1.3; }
.opp-info-key { color: var(--gold); font-weight: 700; min-width: 64px; flex-shrink: 0; }
.opp-info-val { color: var(--text-dim); }

/* In-match opponent banner above the AI hand. */
#opponent-name {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  border: 1px solid var(--ai);
  border-radius: 999px;
  background: rgba(60, 20, 28, 0.5);
  box-shadow: 0 0 10px rgba(255, 122, 122, 0.25);
}
#opponent-name .opp-vs {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--ai); font-weight: 700;
}
#opponent-name .opp-name {
  font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  font-size: 0.95rem; font-weight: 700; color: #ffd9d9; letter-spacing: 0.5px;
}
#opponent-name .opp-rules { font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.3px; }

/* ── DECK-BUILDER MODAL ── */
#deckbuilder-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 10, 28, 0.8); padding: 16px; overflow: auto;
}
#deckbuilder-modal.hidden { display: none; }
#notice-modal {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 10, 28, 0.7); padding: 16px;
}
#notice-modal.hidden { display: none; }
.notice-panel { width: min(440px, 92vw); text-align: center; }
#notice-alt.hidden { display: none; }
.deckbuilder-panel { width: min(900px, 96vw); }
#deckbuilder-ruleset {
  margin: 0 auto 12px; max-width: max-content; padding: 6px 16px;
  background: rgba(0, 0, 0, 0.55); border: 1px solid var(--gold); border-radius: 8px;
  color: var(--gold-bright); font-size: 0.84rem; text-align: center;
}
#deckbuilder-deck-head { color: var(--gold); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.5px; margin-bottom: 6px; }
#deckbuilder-count { color: var(--gold-bright); }
#deckbuilder-deck {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  min-height: 150px; padding: 10px; margin-bottom: 12px;
  border: 1px dashed rgba(216, 182, 90, 0.4); border-radius: 8px; background: rgba(0, 0, 0, 0.22);
}
.db-deck-slot.empty {
  width: 90px; height: 110px; border-radius: 6px;
  border: 2px dashed rgba(216, 182, 90, 0.3); background: rgba(0, 0, 0, 0.18);
}
.deckbuilder-controls { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
#deckbuilder-search {
  flex: 1 1 220px; min-width: 160px;
  font-family: 'EB Garamond', 'Palatino Linotype', Georgia, serif; font-size: 0.85rem; padding: 7px 10px;
  color: var(--text); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--gold); border-radius: 6px;
}
#deckbuilder-search:focus { outline: none; box-shadow: 0 0 8px rgba(255, 210, 100, 0.4); }
#deckbuilder-starfilter { display: flex; gap: 6px; }
.db-star, .db-game {
  font-family: 'Segoe UI Symbol', 'Cinzel', serif; font-size: 0.72rem; font-weight: 700;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
  color: var(--text-dim); background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(216, 182, 90, 0.4);
}
.db-star.active, .db-game.active { color: #2a1c06; background: linear-gradient(180deg, #e8c862, #b8902f); border-color: var(--gold); }
#deckbuilder-gamefilter { display: flex; gap: 6px; }
.db-game { font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif; letter-spacing: 0.5px; }
#deckbuilder-grid {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-height: 46vh; overflow-y: auto; padding: 10px;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
#deckbuilder-grid::-webkit-scrollbar { width: 8px; }
#deckbuilder-grid::-webkit-scrollbar-thumb { background: #7a5e2a; border-radius: 4px; }
#deckbuilder-grid::-webkit-scrollbar-track { background: transparent; }
.db-card { cursor: pointer; }
.db-card .card.db-disabled { opacity: 0.3; }

/* ── MY DECKS (side panel) ── */
.panel-btn {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #2a1c06;
  background: linear-gradient(180deg, #e8c862, #b8902f);
  border: 1px solid var(--gold);
  border-radius: 6px;
  cursor: pointer;
}
.panel-btn:hover { filter: brightness(1.08); }

/* Shows 3 decks; more scroll inside the list (max-height = 3 rows + 2 gaps). */
#saved-decks-list { display: flex; flex-direction: column; gap: 6px; max-height: 126px; overflow-y: auto; }
#saved-decks-list::-webkit-scrollbar { width: 8px; }
#saved-decks-list::-webkit-scrollbar-thumb { background: #7a5e2a; border-radius: 4px; }
#saved-decks-list::-webkit-scrollbar-track { background: transparent; }
.saved-deck-row { flex-shrink: 0; }
.saved-empty { font-size: 0.74rem; color: var(--text-faint); font-style: italic; }
.saved-deck-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
}
.saved-deck-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-deck-actions { display: flex; gap: 2px; flex-shrink: 0; }
.sd-btn {
  width: 24px; height: 24px;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--gold-bright);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(216, 182, 90, 0.4);
  border-radius: 5px;
  cursor: pointer;
}
.sd-btn:hover:not(:disabled) { background: rgba(216, 182, 90, 0.25); }
.sd-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Source badge (FFVIII / FFXIV / Both) */
.deck-badge {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  color: #1c1208;
}
.badge-ffviii { background: #7db4ec; }   /* FF8 = player blue family */
.badge-ffxiv  { background: #c9a24a; }   /* FFXIV = gold */
.badge-both   { background: #8fcf6a; }   /* mixed = green */

/* ── DECK-BUILDER: save row + saved-deck load strip ── */
#deckbuilder-saverow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
#deckbuilder-name {
  flex: 1 1 200px; min-width: 140px;
  font-family: 'EB Garamond', 'Palatino Linotype', Georgia, serif; font-size: 0.85rem;
  padding: 7px 10px; color: var(--text);
  background: rgba(0, 0, 0, 0.4); border: 1px solid var(--gold); border-radius: 6px;
}
#deckbuilder-name:focus { outline: none; box-shadow: 0 0 8px rgba(255, 210, 100, 0.4); }
#deckbuilder-save {
  font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif; font-size: 0.85rem; font-weight: 700;
  padding: 7px 16px; color: #2a1c06;
  background: linear-gradient(180deg, #e8c862, #b8902f);
  border: 1px solid var(--gold); border-radius: 6px; cursor: pointer;
}
#deckbuilder-save:hover { filter: brightness(1.08); }
#deckbuilder-save-msg { font-size: 0.76rem; color: var(--gold-bright); }

#deckbuilder-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.db-saved-label { font-size: 0.78rem; color: var(--gold); font-weight: 700; }
.db-saved-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 0.8rem;
  color: var(--text); background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(216, 182, 90, 0.4); border-radius: 6px; cursor: pointer;
}
.db-saved-chip:hover:not(:disabled) { background: rgba(216, 182, 90, 0.2); }
.db-saved-chip:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── ONLINE (side panel) ── */
#online-name, #online-link {
  width: 100%; margin-bottom: 8px;
  font-family: 'EB Garamond', 'Palatino Linotype', Georgia, serif; font-size: 0.85rem; padding: 7px 10px;
  color: var(--text); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--gold); border-radius: 6px;
}
#online-name-label {
  display: block; margin-bottom: 4px;
  font-family: 'Cinzel', Georgia, serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 1px;
  color: var(--gold);
}
#online-name:focus, #online-link:focus { outline: none; box-shadow: 0 0 8px rgba(255, 210, 100, 0.4); }
#online-name:disabled { opacity: 0.6; }
#online-status { font-size: 0.78rem; line-height: 1.4; color: var(--text-dim); }
#online-status:empty { display: none; }
#online-status .ok { color: #9fe0a0; }
#online-status .warn { color: var(--gold-bright); }
#online-status code { font-size: 0.72rem; color: var(--gold-bright); word-break: break-all; }
#online-link-row { display: flex; gap: 6px; margin-top: 8px; }
#online-link-row.hidden { display: none; }
#online-link { margin-bottom: 0; flex: 1; min-width: 0; font-size: 0.74rem; }
#online-copy {
  padding: 0 10px; font-family: 'Cinzel', serif; font-size: 0.74rem; font-weight: 700; cursor: pointer;
  color: #2a1c06; background: linear-gradient(180deg, #e8c862, #b8902f); border: 1px solid var(--gold); border-radius: 6px;
}
/* While online, the single-player setup (NPC opponent, Draft) doesn't apply;
   a guest also can't touch the rules — the host sets them. */
body.online .offline-only { display: none !important; }
body.online-guest .host-only { display: none !important; }