:root {
  --bg: #0b0d12;
  --panel: #141821;
  --ink: #e6e8ee;
  --muted: #8a93a6;
  --line: #232938;
  --accent: #6ea8ff;
  --p1: #f59e0b;
  --p2: #6ea8ff;
  --danger: #f87171;
  --good: #4ade80;
  --shield: #38bdf8;
  --energy: #facc15;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  user-select: none;
}

body {
  display: flex;
  flex-direction: column;
}

/* Each board (P2 top, P1 bottom) gets equal share of vertical space */
.board {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: .35rem .5rem;
  gap: .3rem;
}
.board.p2 { background: linear-gradient(180deg, rgba(110,168,255,.05), transparent); }
.board.p1 { background: linear-gradient(0deg, rgba(245,158,11,.05), transparent); }

.player-header {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: .15rem .65rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .75rem;
}
.player-name { font-weight: 600; }
.board.p1 .player-name { color: var(--p1); }
.board.p2 .player-name { color: var(--p2); }
.deck-count, .hand-count { color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: .75rem; }
.deck-count strong, .hand-count strong { color: var(--ink); }

/* board row: slots on the left (3 cards in a row) + hand on the right (scrollable) */
.board-row {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: .75rem;
  align-items: stretch;
}

.slots {
  min-width: 0;
  overflow: hidden;
  display: grid;
  /* Fixed-px columns instead of `minmax(0, 1fr)`. With 1fr, the columns'
     resolved width depends on intrinsic content sizing within an outer
     `max-content` column — and with different in-play states between p1
     and p2 (e.g. one has 3 gods, the other has 1 god + 2 empties), the
     intrinsic computation could come out different per side, making one
     player's cards skinny and the other's wide even when their card
     max-widths matched. Hard-coding 165 px tracks (100 on mobile) makes
     both players' slot grids structurally identical regardless of state. */
  grid-template-columns: repeat(3, 165px);
  gap: .4rem;
  align-items: stretch;
  justify-items: center;
}

.hand {
  min-width: 0;
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .15rem;
  align-items: stretch;
}
.hand .card { flex: 0 0 auto; }

/* status bar — compact center strip */
.status {
  flex: 0 0 auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .35rem .75rem;
  margin: 0 .5rem;
  position: relative; /* anchor for the absolutely-positioned rules link */
}
.status .status-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.status .turn-info { font-weight: 600; font-size: .9rem; }
.status .actions-left { color: var(--muted); font-size: .8rem; }
.status .end-turn {
  background: var(--accent); color: var(--bg);
  border: 0; border-radius: 5px;
  padding: .35rem .85rem;
  font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer;
}
.status .end-turn:hover { filter: brightness(1.1); }
.status .end-turn:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.5); }
.status .end-turn:disabled:hover { filter: grayscale(.5); }
/* Auto-end-turn countdown: tinted while counting, urgent red flash inside the
   last 5 s. transform/opacity-only animation → Pi-safe. */
.status .end-turn.auto-ending {
  background: var(--energy);
  color: var(--bg);
}
.status .end-turn.auto-ending-urgent {
  background: var(--danger);
  color: white;
  animation: endTurnUrgentPulse 1s ease-in-out infinite;
}
@keyframes endTurnUrgentPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.05); opacity: .85; }
}
.status .help-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  font: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer;
  margin-left: auto;
}
.status .help-btn:hover { background: var(--bg); color: var(--ink); border-color: var(--accent); }
.status .hint {
  margin-top: .2rem;
  font-size: .75rem;
  color: var(--muted);
  font-style: italic;
  min-height: 1em;
}
.status .hint.action { color: var(--accent); font-style: normal; }

/* === card === */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .35rem;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  display: flex; flex-direction: column;
  position: relative;
}
.card:hover { transform: translateY(-1px); border-color: var(--accent); }

.card.hand-card {
  width: 88px;
  height: 100%;
  max-height: 100%;
  font-size: .7rem;
}
.card.hand-card .card-art {
  flex: 0 0 56px;
  height: 56px;
  margin-bottom: .2rem;
}
.card.hand-card .card-name { font-size: .72rem; }
.card.hand-card .card-title { font-size: .6rem; }
.card.hand-card .card-attack { font-size: .6rem; margin-top: .1rem; }
.card.hand-card .card-property { font-size: .58rem; }

.card.god-card {
  width: 100%;
  max-width: 165px;
  height: 100%;
  font-size: .78rem;
  padding: .3rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Art is the *shrinkable* part of the card. Text content takes its natural
   height; the art fills whatever's left. Min-height keeps the placeholder
   Greek letter readable on really tight viewports. */
.card.god-card .card-art {
  width: 100%;
  /* THE PROBLEM with a fixed aspect-ratio (any of 11/15, 11/14, 11/12):
     it competes with the text stack for the card's finite height. On
     viewport sizes where slot height is small (13" MacBook Air with both
     boards stacked → ~305-340 per board), there's no aspect that gives
     enough space to BOTH the image AND the full text stack consistently.
     Either the image got cropped (cover) or the text got cut off (any
     contain + tall aspect).

     Solution: drop aspect-ratio entirely and use `flex: 1 1 60px` so the
     art container SHRINKS when space is tight. Text takes its natural
     height first (~105 px); art gets whatever leftover the card has, capped
     at 220 px on tall viewports. The background-size: contain image always
     fills the smaller container dimension — never cropped, scaling down
     gracefully on tight cards. Image's natural height-fit at 165-wide is
     ~224 px, so capping art at 220 keeps it just below that — image
     reliably fills container height (no vertical gap), gaps only ~2-23 px
     horizontally depending on container size, blending into the dark page
     bg. */
  flex: 1 1 60px;
  min-height: 60px;
  max-height: 220px;
  margin-bottom: .15rem;
}
/* Placeholder Greek letter scales down a bit on in-play cards so it stays
   proportional when the art container is squeezed. */
.card.god-card .card-art .placeholder .ph-greek { font-size: 2rem; }

.card.energy-card {
  background: linear-gradient(180deg, #3d2c0c, #1f1606);
  border-color: var(--energy);
}
.card.energy-card .card-name { color: var(--energy); text-align: center; font-size: .8rem; margin-top: .25rem; }
.card.energy-card .card-symbol { font-size: 1.6rem; text-align: center; margin: .1rem 0; }

.card .card-art {
  background-size: contain;
  background-position: top center;  /* top-aligned per Benjamin's preference; was center */
  background-repeat: no-repeat;
  background-color: var(--bg);  /* dark blends with the card frame when the image leaves bands */
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
/* Per-god themed placeholder when no portrait image is present.
   All gods share the same structure → uniform look across the deck. */
.card .card-art .placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: 'Times New Roman', Georgia, serif;
  text-align: center;
  border-radius: 4px;
  background: radial-gradient(circle at 50% 35%, #3a2c1a 0%, #14101c 75%);
  box-shadow: inset 0 0 0 1px rgba(184,134,11,.35), inset 0 0 18px rgba(0,0,0,.6);
}
.card .card-art .placeholder .ph-flourish {
  font-size: .7rem;
  color: rgba(184,134,11,.6);
  margin-bottom: .25rem;
}
.card .card-art .placeholder .ph-greek {
  font-size: 2.5rem;
  font-weight: 700;
  color: #d4af37;
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 12px rgba(212,175,55,.25);
  line-height: 1;
}
.card .card-art .placeholder .ph-name {
  font-size: .65rem;
  font-weight: 600;
  color: rgba(232,232,232,.85);
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-top: .35rem;
}
/* Hand cards are smaller — scale the placeholder elements down */
.card.hand-card .card-art .placeholder .ph-greek { font-size: 1.4rem; }
.card.hand-card .card-art .placeholder .ph-name { font-size: .5rem; letter-spacing: .1em; margin-top: .15rem; }
.card.hand-card .card-art .placeholder .ph-flourish { font-size: .5rem; margin-bottom: .1rem; }

/* Per-god accent color (the focal radial highlight + Greek letter glow).
   Mythology-themed tints, all kept low-saturation enough to coexist on screen. */
.placeholder.god-zeus       { background: radial-gradient(circle at 50% 35%, #5a431a 0%, #14101c 75%); }
.placeholder.god-zeus       .ph-greek { color: #fbbf24; text-shadow: 0 0 16px rgba(251,191,36,.45), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-hera       { background: radial-gradient(circle at 50% 35%, #4a2a5a 0%, #14101c 75%); }
.placeholder.god-hera       .ph-greek { color: #c084fc; text-shadow: 0 0 14px rgba(192,132,252,.4), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-poseidon   { background: radial-gradient(circle at 50% 35%, #1e3a5f 0%, #0b1320 75%); }
.placeholder.god-poseidon   .ph-greek { color: #38bdf8; text-shadow: 0 0 14px rgba(56,189,248,.4), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-demeter    { background: radial-gradient(circle at 50% 35%, #3a4a1a 0%, #14101c 75%); }
.placeholder.god-demeter    .ph-greek { color: #a3e635; text-shadow: 0 0 14px rgba(163,230,53,.4), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-hades      { background: radial-gradient(circle at 50% 35%, #2a1a3a 0%, #08060a 80%); }
.placeholder.god-hades      .ph-greek { color: #a78bfa; text-shadow: 0 0 16px rgba(167,139,250,.45), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-hestia     { background: radial-gradient(circle at 50% 35%, #5a2a1a 0%, #14101c 75%); }
.placeholder.god-hestia     .ph-greek { color: #fb923c; text-shadow: 0 0 16px rgba(251,146,60,.5), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-apollo     { background: radial-gradient(circle at 50% 35%, #5a431a 0%, #14101c 75%); }
.placeholder.god-apollo     .ph-greek { color: #fde047; text-shadow: 0 0 18px rgba(253,224,71,.55), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-artemis    { background: radial-gradient(circle at 50% 35%, #2a3a4a 0%, #14101c 75%); }
.placeholder.god-artemis    .ph-greek { color: #cbd5e1; text-shadow: 0 0 14px rgba(203,213,225,.5), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-hermes     { background: radial-gradient(circle at 50% 35%, #3a3a3a 0%, #14101c 75%); }
.placeholder.god-hermes     .ph-greek { color: #e5e7eb; text-shadow: 0 0 14px rgba(229,231,235,.45), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-dionysus   { background: radial-gradient(circle at 50% 35%, #3a1a4a 0%, #14101c 75%); }
.placeholder.god-dionysus   .ph-greek { color: #d946ef; text-shadow: 0 0 14px rgba(217,70,239,.4), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-ares       { background: radial-gradient(circle at 50% 35%, #5a1a1a 0%, #14101c 75%); }
.placeholder.god-ares       .ph-greek { color: #f87171; text-shadow: 0 0 14px rgba(248,113,113,.5), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-hephaestus { background: radial-gradient(circle at 50% 35%, #5a2a0a 0%, #14101c 75%); }
.placeholder.god-hephaestus .ph-greek { color: #f97316; text-shadow: 0 0 16px rgba(249,115,22,.5), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-athena     { background: radial-gradient(circle at 50% 35%, #4a431a 0%, #14101c 75%); }
.placeholder.god-athena     .ph-greek { color: #facc15; text-shadow: 0 0 14px rgba(250,204,21,.4), 0 1px 2px rgba(0,0,0,.7); }
.placeholder.god-aphrodite  { background: radial-gradient(circle at 50% 35%, #5a2a3a 0%, #14101c 75%); }
.placeholder.god-aphrodite  .ph-greek { color: #f472b6; text-shadow: 0 0 14px rgba(244,114,182,.45), 0 1px 2px rgba(0,0,0,.7); }
.card .card-name { font-weight: 600; line-height: 1.1; }
.card .card-title { color: var(--muted); line-height: 1.05; margin-bottom: .1rem; font-size: .8em; }
.card .card-attack { color: var(--accent); margin-top: .15rem; line-height: 1.1; font-size: .82em; }
.card .card-property { color: var(--good); margin-top: .05rem; line-height: 1.05; font-size: .75em; }
.card .card-stats { display: flex; justify-content: space-between; margin-top: .15rem; font-size: .75em; color: var(--muted); }
.card .card-effect { color: var(--ink); font-size: .8em; margin-top: .1rem; line-height: 1.15; opacity: .85; }
.card.hand-card .card-effect { font-size: .6rem; line-height: 1.15; margin-top: .1rem; opacity: .9; }
.card.god-card .hp-bar { margin-top: .1rem; }
.card.god-card .energy-pips { margin-top: .15rem; }
.card .hp-bar {
  height: 3px; background: #2a1717; border-radius: 2px; margin-top: .15rem;
  overflow: hidden;
}
.card .hp-bar-fill { height: 100%; background: var(--good); transition: width .3s; }
.card .hp-bar-fill.low { background: var(--danger); }
.card .energy-pips {
  display: flex; gap: 3px; margin-top: .2rem;
  align-items: center;
}
/* Energy pips: empty pip is now a clearly-visible dim-yellow RING (was a
   tiny dark dot that blended into the panel background). Filled pip is the
   solid yellow with glow. The contrast empty-vs-filled is now obvious at a
   glance. Plus we render a "N/M" text label after the pips so it's also
   readable as plain text. */
.card .pip {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  border: 1.5px solid rgba(250, 204, 21, .55);  /* dim energy ring */
  box-sizing: border-box;
  flex: 0 0 9px;
}
.card .pip.filled {
  background: var(--energy);
  border-color: var(--energy);
  box-shadow: 0 0 4px var(--energy);
}
.card .pip-count {
  margin-left: .35rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--energy);
  font-family: ui-monospace, Menlo, monospace;
  line-height: 1;
}
.card .pip-count.full { color: var(--good); }     /* fully energized */

.card.shielded { border-color: var(--shield); box-shadow: 0 0 0 1px var(--shield); }
.card.shielded::after {
  content: '🛡';
  position: absolute; top: 2px; right: 4px;
  font-size: .8rem;
  color: var(--shield);
  text-shadow: 0 0 4px var(--shield);
}

/* === Effect badges + visual feedback ===
   Show temporary status effects (atk buff/debuff, charmed) at the card's
   top-left so they're visible at a glance. The shield ::after above already
   handles 'shielded'.

   Animations all use transform + opacity only (GPU compositor) — no paint
   thrash, safe for the Pi. Each effect is on at most one element at a time. */
.card.god-card .fx-badges {
  position: absolute;
  top: 2px; left: 4px;
  display: flex; gap: 2px;
  pointer-events: none;
  z-index: 2;
}
.fx-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 15px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: .55rem;
  font-weight: 700;
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: .03em;
  background: rgba(0, 0, 0, .75);
  border: 1px solid var(--line);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}
.fx-badge.atk-up   { color: var(--good); border-color: var(--good); }
.fx-badge.atk-down { color: var(--danger); border-color: var(--danger); }
.fx-badge.charmed  { color: #f0a4d4; border-color: #f0a4d4; background: rgba(180, 60, 130, .35); }

/* Damage shake: bigger amplitude, longer duration so it actually registers.
   Pi-safe (transform only). */
.card.fx-damage { animation: fxDamageShake .55s ease-out; }
@keyframes fxDamageShake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-7px); }
  25% { transform: translateX(7px);  }
  40% { transform: translateX(-5px); }
  55% { transform: translateX(5px);  }
  70% { transform: translateX(-3px); }
  85% { transform: translateX(2px);  }
}

/* Floating damage number, Diablo-style: bold serif, fiery red with a soft
   crimson glow (no harsh outline). Bursts in with a small rotation, drifts
   up + lingers + fades. Sized to fit within the card width on phone screens
   (typical 4-5 digit numbers fit comfortably at 1.6 rem desktop / 1.35 rem
   mobile). Pi-safe (transform/opacity only). */
.fx-damage-number {
  position: absolute;
  top: 30%; left: 50%;
  font-family: 'Cinzel', 'Times New Roman', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: #ff4d4d;
  /* Soft red halo + subtle dark shadow for depth — no black outline. */
  text-shadow:
    0 0 6px rgba(180, 0, 0, .95),
    0 0 14px rgba(248, 50, 50, .55),
    0 2px 4px rgba(0, 0, 0, .6);
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
  letter-spacing: -.02em;
  animation: fxFloatUp 2.5s cubic-bezier(.18, .85, .35, 1) forwards;
  will-change: transform, opacity;
}
@keyframes fxFloatUp {
  0%   { transform: translate(-50%, 8px)   scale(.45) rotate(-8deg); opacity: 0; }
  10%  { transform: translate(-50%, -4px)  scale(1.3) rotate(3deg);  opacity: 1; }
  20%  { transform: translate(-50%, -18px) scale(1.05) rotate(-1deg); opacity: 1; }
  75%  { transform: translate(-50%, -68px) scale(1)   rotate(0);      opacity: 1; }
  100% { transform: translate(-50%, -92px) scale(.95) rotate(0);      opacity: 0; }
}

/* God-summon pop: scale-in when a god is played from hand into a slot. */
.card.fx-summon { animation: fxSummonPop .4s ease-out; }
@keyframes fxSummonPop {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.card.targetable { border-color: var(--good); box-shadow: 0 0 0 2px var(--good); cursor: crosshair; }
.card.face-down {
  background: #0b0d12;
  border-color: transparent;
  padding: 0;
  cursor: default;
  overflow: hidden;
}
.card.face-down .card-art {
  background-image: url('images/card-back.png');
  background-color: #0b0d12;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex: 1 1 auto;
  height: 100%;
  width: 100%;
  margin: 0;
  border-radius: 8px;
}
.card.face-down .card-name,
.card.face-down .card-attack,
.card.face-down .card-stats,
.card.face-down .card-property,
.card.face-down .card-title,
.card.face-down .energy-pips,
.card.face-down .hp-bar { display: none; }
.card.dead { opacity: .35; cursor: default; filter: grayscale(.8); }

/* empty god slot */
.slot-empty {
  width: 100%;
  /* Must match .card.god-card max-width or the grid layout becomes
     asymmetric: .slots is `repeat(3, minmax(0, 1fr))` inside a parent
     column sized to `max-content`. If one player has god cards
     (max-content = 165) and the other has empty slots (max-content =
     130), the parent's slots column comes out narrower for the player
     with the empties — and since 1fr divides equally, that player's
     cards render skinnier even when they DO play one. Setting these
     equal keeps both boards visually identical regardless of state. */
  max-width: 165px;
  border: 2px dashed var(--line);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-size: .75rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.slot-empty.targetable { border-color: var(--good); background: rgba(74,222,128,.05); }
.slot-empty:hover.targetable { background: rgba(74,222,128,.1); }

/* === overlays (pass / setup / help / gameover) === */

.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1.25rem;
  padding: 1rem;
}
.pass-overlay    { background: var(--bg);                    z-index: 100; }
.help-overlay    { background: rgba(11,13,18,.92);           z-index: 150; }
.gameover-overlay { background: rgba(11,13,18,.95);          z-index: 200; }
/* Setup overlay: top-aligned. v1.66 added overflow-y: auto here, but iOS
   Safari refuses to scroll a position:fixed element when body has
   overflow: hidden — the touch event gets eaten by the body. The reliable
   iOS pattern is to put the scroll on the INNER content box (see
   .setup-content's max-height + overflow-y below). The overlay itself
   stays as a non-scrolling fixed background. */
.setup-overlay {
  background: var(--bg);
  z-index: 250;
  justify-content: flex-start;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.overlay h2 { font-size: 1.5rem; margin: 0; text-align: center; }
.overlay h1 { font-size: 2.5rem; margin: 0; text-align: center; }
.overlay button {
  background: var(--accent); color: var(--bg);
  border: 0; border-radius: 6px;
  padding: .65rem 1.5rem;
  font: inherit; font-weight: 600;
  cursor: pointer;
}
.overlay button.secondary {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
}

.player-color.p1 { color: var(--p1); }
.player-color.p2 { color: var(--p2); }
.winner.p1 { color: var(--p1); }
.winner.p2 { color: var(--p2); }

/* setup screen */
.setup-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  max-width: 460px;
  width: 100%;
  /* Cap height to viewport so the BOX scrolls internally when content is
     too tall (rather than overflowing the overlay). This is the reliable
     iOS Safari pattern — scrollable inner div within a fixed parent works
     where overflow-y on the fixed parent itself does not. The 4 rem
     subtraction matches the overlay's padding-top + padding-bottom + a bit
     of breathing room. */
  max-height: calc(100vh - 4rem);
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.setup-content h2 { margin: 0 0 .25rem; }
.setup-content .tag { color: var(--muted); margin: 0 0 1.25rem; font-size: .9rem; text-align: center; }
.setup-content label { display: block; margin: .65rem 0; }
.setup-content label > span { color: var(--muted); font-size: .8rem; display: block; margin-bottom: .25rem; }
.setup-content label.p1 > span { color: var(--p1); }
.setup-content label.p2 > span { color: var(--p2); }
.setup-content input[type=text] {
  width: 100%;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: .55rem .65rem; font: inherit; font-size: 1rem;
}
.setup-content input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.setup-content .actions { margin-top: 1.25rem; display: flex; justify-content: center; }

/* setup mode tabs */
.mode-tabs {
  display: flex; gap: .5rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .5rem;
}
.mode-tab {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .45rem .75rem;
  font: inherit; font-size: .9rem; font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mode-tab:hover { color: var(--ink); }
.mode-tab.active { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; }

.online-actions {
  display: flex; flex-direction: column; gap: .55rem;
  margin-top: 1rem;
}
.online-actions > button {
  width: 100%;
  background: var(--accent); color: var(--bg);
  border: 0; border-radius: 6px;
  padding: .65rem 1rem;
  font: inherit; font-weight: 600; font-size: .95rem;
  cursor: pointer;
}
.online-actions > button.secondary {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.online-actions > button:hover { filter: brightness(1.1); }
.online-actions .join-row {
  display: grid; grid-template-columns: 5rem 1fr; gap: .5rem;
}
.online-actions .join-row input {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: .55rem .65rem; font: inherit; font-size: 1rem;
  letter-spacing: .15em; text-align: center;
}
.online-status {
  margin-top: .75rem;
  font-size: .85rem;
  color: var(--muted);
  min-height: 1.2em;
  font-style: italic;
}
.online-status.err { color: var(--danger); font-style: normal; }

.setup-version-line {
  margin-top: 1rem;
  text-align: center;
  font-size: .7rem;
  color: var(--muted);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.setup-version-line span { cursor: help; }
.setup-version-line span:hover { color: var(--ink); }
.setup-version-line a { color: var(--ink); text-decoration: none; opacity: .85; }
.setup-version-line a:hover { color: var(--accent); text-decoration: underline; opacity: 1; }
.setup-version-line a:visited { color: var(--ink); }

.match-history {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
}
.match-history h3 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: .85rem 0 .5rem;
}
.match-history h3:first-child { margin-top: 0; }
.match-history ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .8rem;
}
.match-history #head-to-head-list li {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: .5rem;
  padding: .25rem 0;
}
.match-history #head-to-head-list .h2h-left  { text-align: right; color: var(--ink); }
.match-history #head-to-head-list .h2h-right { text-align: left;  color: var(--ink); }
.match-history #head-to-head-list .h2h-score {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--accent);
  font-weight: 600;
  padding: 0 .35rem;
}
.match-history #recent-matches-list {
  max-height: 220px;
  overflow-y: auto;
}
.match-history #recent-matches-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding: .2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.match-history #recent-matches-list li:last-child { border-bottom: 0; }
.match-history #recent-matches-list .when {
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
  font-size: .7rem;
  flex: 0 0 auto;
}
.match-history #recent-matches-list .who { color: var(--ink); flex: 1 1 auto; }
.match-history #recent-matches-list .winner { color: var(--good); font-weight: 600; }
.match-history #recent-matches-list .loser  { color: var(--muted); }
.match-history #recent-matches-list .forfeit-tag {
  font-size: .65rem;
  color: var(--danger);
  margin-left: .35rem;
  font-style: italic;
}

.scoreboard {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: .75rem;
}
.scoreboard h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .5rem; }
.scoreboard ul { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.scoreboard li { display: flex; justify-content: space-between; padding: .2rem 0; }
.scoreboard li .name { color: var(--ink); }
.scoreboard li .tally { font-family: ui-monospace, Menlo, monospace; color: var(--muted); }
.scoreboard-clear {
  margin-top: .5rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .25rem .55rem;
  font: inherit; font-size: .7rem;
  cursor: pointer;
}
.scoreboard-clear:hover { color: var(--danger); border-color: var(--danger); }

.gameover-tally {
  display: flex; gap: 2rem; align-items: center; justify-content: center;
  font-family: ui-monospace, Menlo, monospace; font-size: 1rem;
  color: var(--muted);
}
.gameover-tally .player-tally { display: flex; flex-direction: column; align-items: center; }
.gameover-tally .player-tally .name { font-size: .85rem; }
.gameover-tally .player-tally .score { font-size: 1.6rem; color: var(--ink); margin-top: .15rem; }

.gameover-actions { display: flex; gap: .75rem; }
.pass-actions { display: flex; gap: .75rem; }

/* help overlay */
.help-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem 1.75rem;
  max-width: 500px;
  font-size: .9rem;
  line-height: 1.5;
}
.help-content h2 { margin: 0 0 .75rem; font-size: 1.15rem; }
.help-content ol { margin: 0 0 .75rem; padding-left: 1.25rem; }
.help-content ol li { margin-bottom: .35rem; }
.help-content strong { color: var(--accent); }
.help-content .muted { color: var(--muted); font-size: .8rem; margin: 0 0 .75rem; }

/* version badge — lives inside the status bar, no longer floating */
.status .version {
  font-size: .7rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--muted);
  cursor: help;
  margin-left: auto;
  padding: 0 .35rem;
}
.status .version:hover { color: var(--ink); }
.status .help-btn { margin-left: auto; }
.status .leave-btn {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .25rem .55rem;
  font: inherit; font-size: .75rem;
  cursor: pointer;
}
.status .leave-btn:hover { background: var(--danger); color: var(--bg); border-color: var(--danger); }
/* Rules link tucked into the bottom-right corner, away from the end-turn button. */
.status .rules-link {
  position: absolute;
  bottom: .2rem;
  right: .55rem;
  font-size: .68rem;
  color: var(--ink);
  text-decoration: none;
  padding: .1rem .35rem;
}
/* Override the browser-default <a> color (dark blue/visited-purple) — nearly
   unreadable on the dark in-game background. Default to var(--ink) (light)
   for legibility, brighten on hover with the accent color + underline. */
.status .rules-link a {
  color: var(--ink);
  text-decoration: none;
  opacity: .85;
}
.status .rules-link a:hover { color: var(--accent); text-decoration: underline; opacity: 1; }
.status .rules-link a:visited { color: var(--ink); }

/* log — embedded inside the status bar (between hands, never overlaps cards) */
.status .log {
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px solid var(--line);
  max-height: 56px;
  overflow-y: auto;
  font-size: .7rem;
  font-family: ui-monospace, Menlo, monospace;
  color: var(--muted);
}
.status .log .entry { padding: .05rem 0; }
.status .log .entry:last-child { color: var(--ink); }

/* responsive: shrink everything more on narrow screens */
@media (max-width: 700px) {
  .card.hand-card { width: 65px; }
  .card.god-card { max-width: 100px; }
  /* Mirror the .card.god-card cap so empty/filled slots size identically. */
  .slot-empty   { max-width: 100px; }
  /* Match the slots grid track width to the smaller mobile cap. */
  .slots { grid-template-columns: repeat(3, 100px); }
  .log { width: 180px; max-height: 100px; font-size: .65rem; }
  .status { padding: .25rem .5rem; }
  /* Damage number — scale down so 4-5 digit numbers fit within the
     narrower mobile card (max-width: 100 px). */
  .fx-damage-number { font-size: 1.25rem; }
}