/* Rules screen. .rules-table machinery below is load-bearing (translation bodies embed these classes); heed the specificity notes. */

/* Takes the shell width like every other public page — see public-pages.css. `stretch` is
   stated twice because the guest shell's `.app-public .public-content > .screen` (0,3,0)
   frame in shell/public-shell.css would beat a single-class rule (0,1,0). */
.rules-screen,
.app-public .public-content > .screen.rules-screen { align-items: stretch; }

.rules-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* The MENU is the card here, not the body: the section text is the page's own content and
   reads better unboxed, while the nav needs an edge to sit against while it sticks. */
.rules-nav {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  padding: 10px;
}
.rules-nav-link {
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius-s);
  padding: 9px 12px;
  text-align: left;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.rules-nav-link:hover { background: var(--bg-2); color: var(--ink); }
.rules-nav-link.is-on {
  background: color-mix(in srgb, var(--bronze) 10%, transparent);
  border-left-color: var(--bronze);
  color: var(--bronze-2);
  font-weight: 600;
}
.rules-nav-select { display: none; }

.rules-body {
  min-width: 0;
}

.rules-rich p, .rules-rich li {
  font-size: 0.94rem; line-height: 1.65; margin: 0 0 10px;
  color: var(--ink-2);
}
.rules-rich strong { color: var(--ink); }
.rules-rich ol, .rules-rich ul { padding-left: 20px; margin: 0 0 10px; }
.rules-rich li { margin-bottom: 4px; }
.rules-rich table { margin-bottom: 8px; }

/* Bronze callout — used by translation bodies via class="rules-note". */
.rules-note {
  background: color-mix(in srgb, var(--bronze) 8%, transparent);
  border-left: 3px solid var(--bronze);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--ink-2);
  margin: 10px 0;
}

@media (max-width: 768px) {
  .rules-layout { grid-template-columns: 1fr; gap: 14px; }
  /* The nav is a bare <select> here, so its card would be a box drawn around a box. */
  .rules-nav {
    position: static;
    border: 0; border-radius: 0; box-shadow: none; padding: 0;
  }
  .rules-nav-link { display: none; }
  .rules-nav-select {
    display: block;
    width: 100%;
    padding: 11px 12px;
    border-radius: var(--radius-m);
    border: 1px solid var(--border-strong);
    background: var(--bg-2);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
  }
}

/* Tables aliased into .data-table chrome via layout.css. Responsive collapse-to-stacked-cards driven by data-label attributes. */
.rules-table {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-bottom: 16px;
  table-layout: auto;
}
/* Header inherits the shared .data-table --bg-2 fill. */
.rules-screen .rules-table tbody td { border-bottom: 1px solid var(--divider); }
.rules-screen .rules-table tbody tr:last-child td { border-bottom: 0; }
.rules-table tbody td strong          { color: var(--ink); }
.rules-table tbody td:first-child      { color: var(--ink); }
.rules-table tbody td:first-child     { white-space: nowrap; }
/* Filled from ACTION_ICONS / UNIT_DEFS / TERRAIN_INFO at render; empty in the raw body. */
.rules-sym-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.2em;
  width: 1.15em;
  height: 1.15em;
  color: var(--bronze-2);
}
.rules-sym-slot svg { width: 100%; height: 100%; }
.rules-sym-slot:empty { display: none; }
/* Terrain reads as a tile, so the swatch IS the tile: the hill glyph sits on it as on the
   board, and the four terrains the board reads from colour alone are legitimately empty —
   hence the display re-assert, which must stay below the :empty hide it ties with. */
.rules-sym-slot.rules-ter-sw {
  display: inline-flex;
  width: 1.5em;
  height: 1.5em;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-size: 0.62em;
  color: rgba(0, 0, 0, 0.45);
}

/* Narrow widths on first three cols so auto-layout gives Description (col 4) the rest. */

/* Same intent as -4col, shifted one column right for the leading symbol cell. */
.rules-table-5col thead th:nth-child(2),
.rules-table-5col tbody td:nth-child(2) { width: 130px; }
.rules-table-5col thead th:nth-child(3),
.rules-table-5col tbody td:nth-child(3) { width: 150px; }
.rules-table-5col thead th:nth-child(4),
.rules-table-5col tbody td:nth-child(4) { width: 120px; white-space: nowrap; }
.rules-table-5col thead th:nth-child(5),
.rules-table-5col tbody td:nth-child(5) { width: auto; }

.rules-table-3col thead th:nth-child(1),
.rules-table-3col tbody td:nth-child(1) { width: 150px; }

/* THE leading symbol column, for every table whose first cell is a glyph or swatch. Matches
   the (0,2,1) of the per-count widths above, so it must stay BELOW them to win the tie.
   The 1.05rem is the GLYPH size and belongs to the body cell alone — on the head it also
   enlarges the header word. nowrap keeps that word off a second line. */
.rules-table-sym thead th:first-child,
.rules-table-sym tbody td:first-child { width: 48px; text-align: center; }
.rules-table-sym tbody td:first-child { font-size: 1.05rem; }
.rules-table-sym thead th:first-child { white-space: nowrap; }

/* Footnote marker for a symbol column whose table carries a `* …` note. Drawn here rather
   than typed into nine bundles: it is punctuation, not copy, and as text it both inherits
   the header size and gives the word a place to wrap. */
.rules-table-fn thead th:first-child::after {
  content: '*';
  vertical-align: super;
  font-size: 0.85em;
  margin-left: 1px;
  color: var(--bronze-2);
}

/* SPECIFICITY: desktop fixed-width `.rules-table-5col tbody td:nth-child(N)` (0,2,1) beat `.rules-table td` (0,2,0); the mobile reset MUST match (0,2,1) or tables overflow horizontally. */
@media (max-width: 640px) {
  .rules-table thead { display: none; }
  .rules-table, .rules-table tbody, .rules-table tr, .rules-table td { display: block; width: 100%; }
  .rules-table tr {
    border-bottom: 1px solid var(--border-color);
    padding: 6px 0;
  }
  .rules-table tr:last-child { border-bottom: 0; }
  /* SPECIFICITY: desktop base `.rules-table tbody td` (0,2,0) lives LATER; .rules-rich ancestor pushes this to (0,3,0) to win. */
  .rules-rich .rules-table tbody td {
    padding: 4px 10px;
    border-bottom: 0;
    white-space: normal;
  }
  /* (0,2,1) specificity to override desktop fixed-width rules when stacked. */
  .rules-table-5col tbody td:nth-child(2),
  .rules-table-5col tbody td:nth-child(3),
  .rules-table-5col tbody td:nth-child(4),
  .rules-table-5col tbody td:nth-child(5),
  .rules-table-3col tbody td:nth-child(1),
  .rules-table-sym tbody td:first-child,
  .rules-table tbody td:first-child {
    width: 100%;
    white-space: normal;
    text-align: left;
  }
  .rules-table tbody td:before {
    content: attr(data-label) ": ";
    color: var(--ink-3);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 4px;
  }
  .rules-table-sym tbody td:first-child { font-size: 1rem; }
  /* thead is hidden here, so the footnote marker moves onto the stacked cell's own label or
     the `* …` note below the table would reference nothing. */
  .rules-table-fn tbody td:first-child:before { content: attr(data-label) "*: "; }
  .rules-table tbody td { word-wrap: break-word; overflow-wrap: anywhere; }
}

.rules-video { margin: 2px 0 32px; max-width: 560px; }
.rules-video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-0);
}
.rules-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.rules-video-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(120% 120% at 50% 30%, color-mix(in srgb, var(--bronze) 16%, transparent), transparent 70%), var(--bg-2);
}
.rules-video-play {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--on-bronze); background: var(--bronze-gradient);
  box-shadow: var(--shadow-2); padding-left: 4px;
}
.rules-video-ph-t { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.rules-video-ph-s { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.rules-video-cap { margin-bottom: 8px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bronze-2); }
.rules-video-admin { margin-top: 10px; margin-bottom: 14px; display: flex; justify-content: flex-end; }
@media (max-width: 640px) {
  .rules-video-edit { width: 100%; }
}

/* Justify the Description column only. The inherited justify from .rules-body cannot reach a
   cell — layout.css sets text-align directly on `.rules-table tbody td`, and a direct rule
   always beats an inherited value. Last column IS Description in every rules table (the
   width rules above give it the remainder). The other columns are 64-190px, where justify
   opens gaps wider than the words, and below 641px the table becomes stacked cards. */
@media (min-width: 641px) {
  .rules-table tbody td:last-child {
    text-align: justify;
    hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;
  }
}