/* Diamond King — game.css */

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

:root {
  /* Fluid board — fills whichever viewport dimension is tighter (width or height),
     clamped so squares never get unusably small or oversized. ~280px of vertical
     room is reserved for the header, controls, legend and the promo banner
     (#promo-banner reserves this whether or not one is actually showing --
     see its own comment -- so the board never resizes/reflows based on promo
     state). The 100dvh line is the one modern browsers use; the 100vh line
     above it is the fallback. */
  --cell:            max(28px, min((100vw - 32px) / 10, (100vh  - 280px) / 10));
  --cell:            max(28px, min((100vw - 32px) / 10, (100dvh - 280px) / 10));
  --piece:           calc(var(--cell) * 0.8);

  /* Board squares — same on SP and EP, only play mechanics differ */
  --sq-light:        #E8E3D4;   /* warm cream parchment */
  --sq-dark:         #6B2810;   /* cherry-mahogany — distinct, warm, not black */
  --sq-kingdom-p1:   #D0DCF0;   /* blue-tinted light square — P1 Kingdom row */
  --sq-kingdom-p2:   #F0D0D0;   /* red-tinted light square — P2 Kingdom row */
  --sq-kingdom-dk-p1:#4A2B1A;   /* dark square in P1 Kingdom row */
  --sq-kingdom-dk-p2:#5A2420;   /* dark square in P2 Kingdom row */

  --valid-move:      rgba(80,200,100,0.32);
  --selected-ring:   #D4A010;
  --last-from:       rgba(200,200,60,0.20);
  --last-to:         rgba(200,200,60,0.38);
  --invincible-clr:  #1E90FF;
  --invincible-pulse:rgba(30,144,255,0.62);

  --piece-p1-txt:    #1C1A15;
  --piece-p2-txt:    #C8A200;

  /* Kingdom-line flags -- decorative row-boundary markers, same red/black
     on every board style (see board-wood.css/board-kente.css's header
     comments for what IS style-dependent; these aren't). */
  --flag-red:        #db1f26;
  --flag-black:      #231f20;

  --radius:          6px;

  /* Chrome tokens (--ui-bg, --ui-text, --info-bg, etc.) are NOT defined here
     any more -- they come from css/theme-dark.css or css/theme-light.css,
     whichever the page's <head> loads based on the saved theme preference.
     The board's own art (everything above this line) is intentionally not
     part of that switch -- see theme-dark.css's header comment. */
}

/* Utility */
.hidden { display: none !important; }

/* ── Page layout ───────────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
#app { min-height:100vh; display:flex; flex-direction:column; align-items:center; }
.screen { display:none; width:100%; max-width:700px; padding:2rem 1rem; }
.screen.active { display:block; }

/* ── logo ──────────────────────────────────────────────────────────── */
#logo { 
	width: 50%;
	height: auto;
	max-width: 350px;
}

/* ── Setup screen ──────────────────────────────────────────────────────────── */
#screen-setup { text-align:center; }
#screen-setup h1 {
  font-size:2.4rem; letter-spacing:.12em;
  color:var(--invincible-clr); margin-bottom:.3rem;
}
#screen-setup .subtitle {
  color:var(--ui-muted); font-style:italic;
  margin-bottom:2rem; font-size:.95rem;
}
.setup-card {
  background:var(--ui-bg-raised); border:1px solid var(--ui-border);
  border-radius:var(--radius); padding:1.8rem 2rem;
  display:inline-block; text-align:left; min-width:300px;
}
.setup-row { margin-bottom:1.2rem; }
.setup-row label {
  display:block; color:var(--ui-muted);
  font-size:.82rem; margin-bottom:.4rem; letter-spacing:.05em;
}
.setup-row select {
  width:100%; background:var(--ui-bg-input); border:1px solid var(--ui-border);
  color:var(--ui-text); padding:.5rem .7rem;
  border-radius:4px; font-size:.95rem;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  background:var(--ui-bg-raised); border:1px solid var(--ui-border); color:var(--ui-text);
  padding:.55rem 1.3rem; border-radius:4px; cursor:pointer;
  font-family:inherit; font-size:.9rem; transition:background .15s, border-color .15s;
}
.btn:hover { background:var(--ui-bg-hover); border-color:#5A5540; }
.btn-primary {
  background:var(--btn-primary-bg); border-color:var(--invincible-clr);
  color:var(--invincible-clr); font-size:1rem;
  padding:.65rem 2rem; margin-top:.5rem; width:100%;
}
.btn-primary:hover { background:var(--btn-primary-bg-hover); }
.btn-danger { border-color:var(--btn-danger-border); color:var(--btn-danger-text); }
.btn-danger:hover { background:var(--btn-danger-bg-hover); }

/* ── Game screen ───────────────────────────────────────────────────────────── */
#screen-game { padding:10px; }

/* Shared info-box look — left panel (wide) and top bar (vertical) */
.info-box { background:var(--info-bg); border-radius:20px; padding:10px 12px; }

.info-back { color:var(--ui-muted); font-size:.85rem; text-decoration:none; white-space:nowrap; }
.info-back:hover { color:var(--ui-text); }

.fs-btn {
  background:none; border:none; color:var(--ui-muted); cursor:pointer;
  padding:4px; border-radius:6px; line-height:0; display:inline-flex; align-items:center;
}
.fs-btn:hover { color:var(--invincible-clr); background:rgba(255,255,255,.06); }

.clock-label {
  font-size:.62rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ui-muted);
}
.clock {
  font-weight:700; line-height:1; color:var(--ui-text);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.info-status { color:var(--ui-text); }
.info-move   { color:var(--ui-muted); font-size:.82rem; }
.info-opp    { color:var(--piece-p2-txt); font-size:.78rem; }

.ctrl-block { display:flex; gap:.5rem; }

.keys { display:flex; flex-wrap:wrap; gap:.45rem 1rem; font-size:.74rem; color:var(--ui-muted); }
.leg-item { display:flex; align-items:center; gap:.35rem; }
.leg-swatch { display:inline-block; width:13px; height:13px; border-radius:2px; flex-shrink:0; }

#board-container { display:flex; justify-content:center; }

/* ── Vertical / mobile layout (default, < 900px) ────────────────────────── */
#panel-wide { display:none; }
#bar-vert {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.4rem 1rem; justify-content:space-between; margin-bottom:10px;
}
#bar-vert .bv-group { display:flex; flex-direction:column; align-items:center; line-height:1.2; }
#bar-vert .clock { font-size:clamp(1.7rem, 7vw, 2.8rem); }
#bar-vert .info-status { font-size:.8rem; color:var(--ui-muted); }
#board-container { margin-bottom:10px; }
#bottom-vert { width:calc(var(--cell) * 10); max-width:100%; margin:0 auto; }
#bottom-vert .ctrl-block { margin-bottom:.5rem; }
#bottom-vert .ctrl-block .btn { flex:1; padding-left:.4rem; padding-right:.4rem; }
#bottom-vert .keys { justify-content:center; }

/* ── Board ─────────────────────────────────────────────────────────────────── */
#board {
  display:grid;
  grid-template-columns: repeat(10, var(--cell));
  grid-template-rows:    repeat(10, var(--cell));
  border:2px solid #3A2A18;
  box-shadow:0 4px 28px rgba(0,0,0,.75);
}

/* ── Promo banner (store placeholder) ────────────────────────────────────────
   A plain sibling placed BEFORE #panel-wide in the HTML, so normal block
   flow puts it first (above the header) in portrait, and the landscape
   grid above explicitly spans it across both columns in its own row.
   Hidden by default (inline style="display:none" in the HTML) until
   js/promo.js confirms php/promo.php has an active item -- an empty/
   not-yet-populated promo_slots table is a normal pre-launch state, so
   this quietly shows nothing rather than an empty placeholder box. The
   board's own size budget (the --cell formulas above and in the
   "orientation:landscape" block) reserves a small constant allowance for
   this banner's height whether or not one is actually showing, so the
   board never resizes/reflows based on promo state -- steadier than a
   fully dynamic reserve, at the cost of a few unused pixels on days with
   nothing to show. See sql/oba_migration_005.sql / php/promo.php. */
#promo-banner {
  width:100%; height:56px; margin-bottom:10px;
  align-items:center; justify-content:center;
  overflow:hidden; border:1px solid var(--ui-border); border-radius:var(--radius);
  background:var(--ui-bg-raised);
}
#promo-banner a {
  display:flex; width:100%; height:100%;
  align-items:center; justify-content:center;
}
#promo-banner img { max-width:100%; max-height:100%; object-fit:contain; display:block; }

/* ── Cells — base ──────────────────────────────────────────────────────────── */
.cell {
  width:var(--cell); height:var(--cell);
  position:relative; display:flex;
  align-items:center; justify-content:center;
}

/* Square colors/textures (.cell.active, .cell.inactive, .cell.active.dark-square)
   are NOT defined here -- they come from css/board-wood.css or css/board-kente.css,
   whichever sp.html/ep.html's <head> loads based on the saved Board Design
   preference (users.board_style). Same pattern as the theme-dark/theme-light
   split: a synchronous <head> loader picks the file from localStorage before
   this stylesheet even loads, so there's no flash of the wrong style. */

/* Kingdom row tints removed — board is uniform, matching the physical game */

/* Kingdom-line flags -- toggled by the Board Design "With/No Flags" setting
   (js/board-config.js's boardFlagsEnabled(), applied per-cell in
   game-sp.js/game-ep.js's buildCell()). One flag per column on every row
   boundary except the outer edges, colored in a diagonal red/black flow via
   the flag-a/flag-b class -- same geometry as tools/board-style-mockup.html,
   expressed as percentages so it scales with --cell instead of fixed px.
   A REAL child element (.flag-marker), not a ::after pseudo-element --
   ::before/::after on .cell are already spoken for by .valid-move,
   .capture-chain, .selected and .has-invincible (each cell gets only ONE
   ::before and ONE ::after in total, so a second rule targeting the same
   pseudo-element doesn't layer, it fights the first one for every
   property). Using a separate element sidesteps that entirely. Purely
   decorative: no pointer events, and z-index keeps it under pieces and
   shields so it never interferes with reading the board. */
.flag-marker {
  position:absolute; z-index:2; pointer-events:none;
  left:calc(50% - var(--cell) * 0.09375);
  top:calc(100% - var(--cell) * 0.1875);
  width:calc(var(--cell) * 0.1875);
  height:calc(var(--cell) * 0.375);
  clip-path:polygon(0% 0%, 100% 50%, 100% 100%, 0% 50%);
}
.flag-marker.flag-a { background:var(--flag-red); }
.flag-marker.flag-b { background:var(--flag-black); }

/* ── Cell state overlays ───────────────────────────────────────────────────── */

/* Last move */
.cell.last-from { outline:2px solid rgba(200,200,60,0.45); outline-offset:-2px; }
.cell.last-to   { outline:2px solid rgba(200,200,60,0.75); outline-offset:-2px; }

/* Valid destination — green tint + dot on empty squares */
.cell.valid-move::before {
  content:''; position:absolute; inset:0;
  background:var(--valid-move); pointer-events:none; z-index:3;
}
.cell.valid-move:not(:has(.piece))::after {
  content:''; position:absolute;
  width:calc(var(--cell) * 0.24); height:calc(var(--cell) * 0.24); border-radius:50%;
  background:rgba(80,200,100,0.60); pointer-events:none; z-index:4;
}

/* Power Capture — multi-jump destination (2+ captures): bright green + ⚡ glow */
.cell.capture-chain::before {
  content:''; position:absolute; inset:0;
  background:rgba(80,200,100,.32); pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 2px rgba(80,200,100,.80);
}
.cell.capture-chain::after {
  content:'\26A1'; position:absolute;
  font-size:calc(var(--cell)*.50); pointer-events:none; z-index:4;
  filter:drop-shadow(0 0 4px rgba(80,200,100,1)) drop-shadow(0 0 9px rgba(80,200,100,.65));
}

/* Selected — gold ring */
.cell.selected::after {
  content:''; position:absolute; inset:2px;
  border:2px solid var(--selected-ring);
  pointer-events:none; z-index:10;
}

/* Invincible — blue pulse */
.cell.has-invincible::before {
  content:''; position:absolute; inset:0;
  animation:inv-pulse 1.4s ease-in-out infinite;
  pointer-events:none; z-index:1;
}
@keyframes inv-pulse {
  0%,100% { background:rgba(30,144,255,0); }
  50%      { background:var(--invincible-pulse); }
}

/* ── Shield labels ─────────────────────────────────────────────────────────── */
/* Adinkra glyphs — the a/b/d/h/k files are single-colour shapes on transparent
   backgrounds, so we use each as an alpha mask and paint the colour via
   background-color: one source file, recoloured per context, no SVG edits. */
.piece-sym, .shield-sym, .shield-watermark {
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.sym-a1 { -webkit-mask-image:url('../img/a1.svg'); mask-image:url('../img/a1.svg'); }
.sym-a2 { -webkit-mask-image:url('../img/a2.svg'); mask-image:url('../img/a2.svg'); }
.sym-a3 { -webkit-mask-image:url('../img/a3.svg'); mask-image:url('../img/a3.svg'); }
.sym-a4 { -webkit-mask-image:url('../img/a4.svg'); mask-image:url('../img/a4.svg'); }
.sym-a5 { -webkit-mask-image:url('../img/a5.svg'); mask-image:url('../img/a5.svg'); }
.sym-ax { -webkit-mask-image:url('../img/ax.svg'); mask-image:url('../img/ax.svg'); }
.sym-b1 { -webkit-mask-image:url('../img/b1.svg'); mask-image:url('../img/b1.svg'); }
.sym-b2 { -webkit-mask-image:url('../img/b2.svg'); mask-image:url('../img/b2.svg'); }
.sym-b3 { -webkit-mask-image:url('../img/b3.svg'); mask-image:url('../img/b3.svg'); }
.sym-b4 { -webkit-mask-image:url('../img/b4.svg'); mask-image:url('../img/b4.svg'); }
.sym-b5 { -webkit-mask-image:url('../img/b5.svg'); mask-image:url('../img/b5.svg'); }
.sym-bx { -webkit-mask-image:url('../img/bx.svg'); mask-image:url('../img/bx.svg'); }
.sym-d1 { -webkit-mask-image:url('../img/d1.svg'); mask-image:url('../img/d1.svg'); }
.sym-d2 { -webkit-mask-image:url('../img/d2.svg'); mask-image:url('../img/d2.svg'); }
.sym-d3 { -webkit-mask-image:url('../img/d3.svg'); mask-image:url('../img/d3.svg'); }
.sym-d4 { -webkit-mask-image:url('../img/d4.svg'); mask-image:url('../img/d4.svg'); }
.sym-d5 { -webkit-mask-image:url('../img/d5.svg'); mask-image:url('../img/d5.svg'); }
.sym-dx { -webkit-mask-image:url('../img/dx.svg'); mask-image:url('../img/dx.svg'); }
.sym-h  { -webkit-mask-image:url('../img/h.svg');  mask-image:url('../img/h.svg');  }
.sym-k  { -webkit-mask-image:url('../img/k.svg');  mask-image:url('../img/k.svg');  }

/* Shield markings — small glyph + index in the upper-left corner, over a faint
   centred glyph watermark (watermark shows only on empty squares). */
.shield-corner {
  position:absolute;
  top:  max(2px, calc(var(--cell) * 0.07));
  left: max(2px, calc(var(--cell) * 0.07));
  z-index:8;          /* above pieces so corner marker stays visible at all cell sizes */
  pointer-events:none;
  display:flex; align-items:center; gap:1px;
}
.shield-sym {
  display:block; width:calc(var(--cell) * 0.22); height:calc(var(--cell) * 0.22);
  background-color:#1C0600; opacity:.90;
}
.shield-idx {
  font-family:'Courier New',monospace; font-weight:900; line-height:1;
  font-size:calc(var(--cell) * 0.17); color:#1C0600; opacity:.90;
}
.shield-watermark {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-color:#1C0600; opacity:.30;
  -webkit-mask-size:60%; mask-size:60%;
}

/* Piece glyph + index — glyph centred, index flowing just beneath it. */
.piece-sym {
  display:block; width:calc(var(--cell) * 0.50); height:calc(var(--cell) * 0.50);
  z-index:6; pointer-events:none;
}
.piece-idx {
  z-index:6; pointer-events:none; line-height:.85;
  margin-top:calc(var(--cell) * -0.02);
  font-family:'Courier New',monospace; font-weight:700;
  font-size:calc(var(--cell) * 0.18);
}
.piece.player-1 .piece-sym { background-color:var(--piece-p1-txt); }
.piece.player-2 .piece-sym { background-color:var(--piece-p2-txt); }
/* Prime: elevated glyph colour — gold on white token, silver on black token */
.piece.player-1.prime .piece-sym { background-color:var(--piece-p2-txt); }  /* dark→gold  */
.piece.player-2.prime .piece-sym { background-color:#CC1A1A; }              /* gold→red   */
.piece.player-1 .piece-idx { color:var(--piece-p1-txt); }
.piece.player-2 .piece-idx { color:var(--piece-p2-txt); }

/* ── Pieces ────────────────────────────────────────────────────────────────── */
.piece {
  position:relative; z-index:5;
  width:calc(var(--cell)*.8); height:calc(var(--cell)*.8);
  background-size:contain; background-repeat:no-repeat;
  background-position:center; display:flex;
  align-items:center; justify-content:center;
  transition:transform .1s; cursor:pointer;
}
.piece:hover { transform:scale(1.06); }
.piece.player-1 { background-image:url('../img/Diamond_King_Pieces_white.svg'); }
.piece.player-2 { background-image:url('../img/Diamond_King_Pieces_black.svg'); }

/* Prime — subtle gold glow */
.piece.prime::after {
  content:''; position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle,rgba(200,162,0,0.18) 0%,transparent 70%);
  pointer-events:none;
}

/* Promoted dot */
.piece.promoted::before {
  content:''; position:absolute; top:6px; right:6px;
  width:5px; height:5px; border-radius:50%;
  background:var(--invincible-clr); z-index:6;
}

.piece-label {
  font-family:'Courier New',monospace; font-size:calc(var(--cell) * 0.2);
  font-weight:700; letter-spacing:-.02em;
  pointer-events:none; line-height:1;
  position:relative; z-index:6;
}
.piece.player-1 .piece-label { color:var(--piece-p1-txt); }
.piece.player-2 .piece-label { color:var(--piece-p2-txt); }

/* ── Game controls ─────────────────────────────────────────────────────────── */
#game-controls { /* removed — controls now use .ctrl-block in the layout sections */ }

/* ── End screen ────────────────────────────────────────────────────────────── */
#screen-end { text-align:center; padding-top:4rem; }
#end-title   { font-size:2rem; color:var(--invincible-clr); margin-bottom:.8rem; }
#end-message { color:var(--ui-muted); margin-bottom:2rem; }

/* ── Report modal ──────────────────────────────────────────────────────────── */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  display:flex; align-items:center; justify-content:center; z-index:100;
}
.modal.hidden { display:none; }
.modal-content {
  background:var(--ui-bg-raised); border:1px solid var(--ui-border);
  border-radius:var(--radius); padding:1.5rem; width:90%; max-width:420px;
}
.modal-content h3 { margin-bottom:.8rem; font-size:1.1rem; }
.modal-content textarea {
  width:100%; background:var(--ui-bg-input); border:1px solid var(--ui-border);
  color:var(--ui-text); padding:.6rem; border-radius:4px;
  font-family:inherit; font-size:.9rem; resize:vertical;
  min-height:90px; margin-bottom:.8rem;
}
.modal-actions { display:flex; gap:.6rem; justify-content:flex-end; }

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:1.5rem; right:1.5rem;
  background:var(--toast-bg); border:1px solid var(--invincible-clr);
  color:var(--invincible-clr); padding:.6rem 1.1rem; border-radius:4px;
  font-size:.9rem; opacity:0; transform:translateY(8px);
  transition:opacity .3s, transform .3s; z-index:200;
}
.toast.visible { opacity:1; transform:translateY(0); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width:620px) {
  /* Board sizes fluidly via clamp() on --cell now — no fixed mobile overrides. */
  #screen-setup h1 { font-size:1.8rem; }
}

/* ── Wide viewport: stats + controls in a left column, board fills the rest ──── */
@media (orientation:landscape) {
  #screen-game.active {
    display:grid;
    /* Panel gets a minimum 180px regardless of cell size, so content never overflows
       on small landscape screens (phones). Board fills remaining width.
       216px = 180px panel min + 16px gap + 20px padding.
       Row 1 (auto) is the promo banner, spanning both columns; row 2 (1fr) is
       the existing panel+board row. #panel-wide/#board-container are pinned
       to grid-row:2 explicitly -- if they were left to auto-place, hiding the
       banner (display:none, so it stops participating in grid placement
       entirely) would let them slide up into row 1 instead, which would
       throw off "stretch" sizing on #board-container. 108px = 40px original
       chrome allowance + ~58px banner (incl. border) + 10px row-gap. */
    grid-template-columns: minmax(180px, calc(var(--cell) * 3)) calc(var(--cell) * 10);
    grid-template-rows: auto 1fr;
    row-gap:10px; column-gap:16px; justify-content:center; align-items:start;
    max-width:none; height:100dvh; padding:10px;
    --cell: min((100vh  - 108px) / 10, (100vw - 216px) / 10);
    --cell: min((100dvh - 108px) / 10, (100vw - 216px) / 10);
  }
  #promo-banner { grid-column:1 / -1; grid-row:1; margin-bottom:0; }
  #bar-vert, #bottom-vert { display:none; }
  #panel-wide {
    grid-row:2;
    display:flex; flex-direction:column; align-items:center; gap:.55rem;
    align-self:start; max-height:100dvh; overflow-y:auto; overflow-x:hidden; text-align:center;
  }
  #panel-wide .pw-top { display:flex; align-items:center; justify-content:space-between; width:100%; }
  /* Cap clock size so it doesn't dominate a narrow panel on small landscape screens */
  #panel-wide .clock { font-size:min(calc(var(--cell) * 0.85), 2.2rem); }
  #panel-wide .ctrl-block { flex-direction:column; align-items:stretch; width:100%; }
  #panel-wide .ctrl-block .btn { width:100%; }
  #panel-wide .keys { flex-direction:column; align-items:flex-start; gap:.5rem; }
  #board-container { grid-row:2; margin:0; align-self:stretch; align-items:center; }
}

/* ── Rules modal ───────────────────────────────────────────────────────────── */
.rules-modal-content {
  width:92%; max-width:640px; max-height:88vh;
  display:flex; flex-direction:column; padding:0; overflow:hidden;
}
.rules-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.4rem; border-bottom:1px solid var(--ui-border); flex-shrink:0;
}
.rules-header h3 {
  font-size:1rem; color:var(--invincible-clr);
  letter-spacing:.04em; margin:0;
}
.rules-close-btn {
  font-size:1.1rem; line-height:1; padding:.3rem .6rem;
  border-color:transparent; color:var(--ui-muted);
}
.rules-close-btn:hover { color:var(--ui-text); border-color:var(--ui-border); }
.rules-body {
  overflow-y:auto; padding:1rem 1.4rem; flex:1; scroll-behavior:smooth;
}
.rules-section {
  margin-bottom:1.2rem; border-bottom:1px solid var(--ui-border); padding-bottom:1rem;
}
.rules-section:last-child { border-bottom:none; margin-bottom:0; }

.rules-section-heading,
h3.rules-section-heading {
  font-size:.95rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--invincible-clr); margin:.8rem 0 .5rem 0;
  font-family:'Courier New',monospace; font-weight:700;
}
h4.rules-section-heading {
  font-size:.82rem; letter-spacing:.07em; text-transform:uppercase;
  color:#C8A060; margin:.6rem 0 .4rem 0;
  font-family:'Courier New',monospace; font-weight:700;
}
.rules-section-body p {
  font-size:.88rem; color:var(--ui-text-soft); line-height:1.65; margin:0 0 .6rem 0;
}
.rules-section-body p:last-child { margin-bottom:0; }
.rules-section-body strong { color:var(--ui-text); }
.rules-section-body em     { color:var(--ui-muted); font-style:italic; }
.rules-section-body ul,
.rules-section-body ol { margin:.4rem 0 .6rem 1.2rem; padding:0; }
.rules-section-body li {
  font-size:.88rem; color:var(--ui-text-soft); line-height:1.6; margin-bottom:.35rem;
}
.rules-footer {
  padding:.8rem 1.4rem; border-top:1px solid var(--ui-border);
  display:flex; justify-content:flex-end; flex-shrink:0;
}
.rules-body::-webkit-scrollbar { width:6px; }
.rules-body::-webkit-scrollbar-track { background:transparent; }
.rules-body::-webkit-scrollbar-thumb { background:var(--ui-border); border-radius:3px; }
.rules-body::-webkit-scrollbar-thumb:hover { background:#5A5540; }

@media (max-width:620px) {
  .rules-modal-content { max-height:94vh; width:98%; }
  .rules-header h3 { font-size:.85rem; }
}