/* frontend/rules-sheet.css — the ONE rules window (window.RulesSheet, rules-sheet.js).
 *
 * Old-games overhaul phase 0a (owner, 2026-10-01). Look = the July overlay mock's rules panel
 * (docs/design/Other Games/Overlays/Overlays.dc.html, _panelStyle / _buildRulesTabs /
 * _buildRulesText): near-black blue-grey panel, 20px radius, a 10% white hairline, small
 * uppercase letter-spaced labels, a TEAL accent, warm off-white text, fades in the panel's own
 * colour. ⭐ FIXED DARK ON PURPOSE (owner D4): it does not follow the board scheme, which also
 * keeps the ~66 fixed greys inside the cards (`color:#888` …) readable — they were written for
 * the old fixed `#1a1a1a` card and this panel is darker still.
 *
 * ⭐ SIZED BY CONTAINER QUERIES, NOT MEDIA QUERIES. The overlay is the size container, so the
 * card answers to the space it is actually shown in. In the app that is the viewport (identical
 * to a media query); on rules-preview.html it is a phone- or PC-sized frame, which a media query
 * could never see. Loaded AFTER style.css so equal-specificity rules here win.
 */

.rs-overlay {
  --rs-bg: rgb(12 14 20 / .98);
  --rs-raise: rgb(255 255 255 / .06);
  --rs-line: rgb(255 255 255 / .10);
  --rs-hair: rgb(255 255 255 / .07);
  --rs-txt: #ecebe7;
  --rs-body: rgb(222 220 215 / .86);
  --rs-dim: rgb(150 153 162 / .9);
  --rs-acc: oklch(.74 .14 175);
  --rs-accTxt: #06201b;
  container: rs-overlay / size;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgb(3 5 9 / .68);
}

.rs-overlay .rs-card {
  display: flex; flex-direction: column;
  width: 100%; max-width: 640px; max-height: min(100%, 860px);
  padding: 0; overflow: hidden; text-align: left;
  background: var(--rs-bg); color: var(--rs-body);
  border: 1px solid var(--rs-line); border-radius: 20px;
  box-shadow: 0 18px 60px rgb(0 0 0 / .55);
}

/* ── header: eyebrow + title + ✕ (never scrolls) ─────────────────────────── */
.rs-overlay .rs-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 16px 14px 13px 20px; border-bottom: 1px solid var(--rs-hair);
}
.rs-overlay .rs-titles { flex: 1 1 auto; min-width: 0; }
.rs-overlay .rs-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--rs-acc); margin-bottom: 3px;
}
.rs-overlay .rs-title {
  margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
  color: var(--rs-txt); text-align: left; overflow-wrap: anywhere;
}
.rs-overlay .rs-x {
  flex: none; width: 40px; height: 40px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  font: inherit; font-size: 17px; line-height: 1; color: var(--rs-txt); cursor: pointer;
  background: var(--rs-raise); border: 1px solid var(--rs-line);
  transition: background .15s, transform .1s;
}
.rs-overlay .rs-x:active { transform: scale(.94); }
@media (hover: hover) { .rs-overlay .rs-x:hover { background: rgb(255 255 255 / .13); } }
.rs-overlay .rs-x:focus-visible, .rs-overlay .rs-ok:focus-visible, .rs-overlay .rs-more:focus-visible {
  outline: 2px solid var(--rs-acc); outline-offset: 2px;
}

/* ── body: the only scroller, with its fades and the ▾ ───────────────────── */
.rs-overlay .rs-bodywrap {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.rs-overlay .rs-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 20px 20px; outline: none;
  font-size: 15px; line-height: 1.55; color: var(--rs-body);
  scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .22) transparent;
}
.rs-overlay .rs-fade {
  position: absolute; left: 0; right: 10px; pointer-events: none;
  opacity: 0; transition: opacity .18s;
}
.rs-overlay .rs-fade-top { top: 0; height: 26px; background: linear-gradient(var(--rs-bg), transparent); }
.rs-overlay .rs-fade-bot { bottom: 0; height: 64px; background: linear-gradient(transparent, var(--rs-bg) 85%); }
.rs-overlay .rs-bodywrap[data-top="1"] .rs-fade-top,
.rs-overlay .rs-bodywrap[data-more="1"] .rs-fade-bot { opacity: 1; }
.rs-overlay .rs-more {
  position: absolute; right: 18px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  font: inherit; font-size: 18px; line-height: 1; color: var(--rs-txt); cursor: pointer;
  background: rgb(34 38 48 / .96); border: 1px solid var(--rs-line); box-shadow: 0 2px 10px rgb(0 0 0 / .5);
  opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s linear .18s;
}
.rs-overlay .rs-bodywrap[data-more="1"] .rs-more {
  opacity: 1; visibility: visible; transition: opacity .18s; animation: rs-bob 1.6s ease-in-out infinite;
}
@keyframes rs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ── footer: the game's own "Got it", pinned ─────────────────────────────── */
.rs-overlay .rs-foot { flex: none; padding: 12px 20px 16px; border-top: 1px solid var(--rs-hair); }
/* The newer games' main-button shape (.sf-start / .rc-start / .sw-start …): 48px, 12px radius, 800. */
.rs-overlay .rs-ok {
  display: block; width: 100%; height: 48px; margin: 0; padding: 0 16px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--rs-acc); color: var(--rs-accTxt);
  font: inherit; font-size: 16px; font-weight: 800; letter-spacing: .04em;
  transition: filter .15s, transform .1s;
}
.rs-overlay .rs-ok:active { transform: translateY(2px); filter: brightness(.92); }
@media (hover: hover) { .rs-overlay .rs-ok:hover { filter: brightness(1.08); } }

/* ── the rules themselves ─────────────────────────────────────────────────── */
.rs-overlay .rs-body b, .rs-overlay .rs-body strong { color: var(--rs-txt); font-weight: 700; }
.rs-overlay .rs-body p { margin: 0 0 10px; }
.rs-overlay .rs-body h3 {
  margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rs-dim);
}
.rs-overlay .rs-body ul, .rs-overlay .rs-body ol { margin: 0 0 10px; padding-left: 20px; }
.rs-overlay .rs-body li + li { margin-top: 5px; }

/* The two-column rules table every card uses (`.farkle-scoring-table`: label | text). Beats
   style.css's `[id$="-rules-overlay"] .farkle-scoring-table td…` (0,3,1) on specificity. */
.rs-overlay .rs-card .rs-body .farkle-scoring-table { width: 100%; border-collapse: collapse; font-size: inherit; }
.rs-overlay .rs-card .rs-body .farkle-scoring-table td {
  padding: 10px 0; border-bottom: 1px solid var(--rs-hair); vertical-align: top;
}
.rs-overlay .rs-card .rs-body .farkle-scoring-table tr:last-child td { border-bottom: 0; }
.rs-overlay .rs-card:not(.rs-scoring) .rs-body .farkle-scoring-table td:first-child {
  width: 24%; padding-right: 14px; padding-top: 12px; white-space: normal;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  line-height: 1.35; color: var(--rs-acc);
}
.rs-overlay .rs-card:not(.rs-scoring) .rs-body .farkle-scoring-table td:last-child {
  text-align: left; white-space: normal; font-weight: 400; color: var(--rs-body);
}
/* Scoring cards (Farkle, Yahtzee): a real points table — the points column stays right-aligned. */
.rs-overlay .rs-card.rs-scoring .rs-body .farkle-scoring-table td:first-child { color: var(--rs-body); padding-right: 12px; }
.rs-overlay .rs-card.rs-scoring .rs-body .farkle-scoring-table td:last-child {
  text-align: right; white-space: nowrap; font-weight: 700; color: var(--rs-acc);
}

/* ── phone: label above its text, so the text gets the whole width ────────── */
@container rs-overlay (max-width: 520px) {
  .rs-overlay .rs-card { border-radius: 18px; }
  .rs-overlay .rs-head { padding: 14px 10px 11px 16px; }
  .rs-overlay .rs-title { font-size: 18px; }
  .rs-overlay .rs-body { padding: 10px 16px 18px; }
  .rs-overlay .rs-foot { padding: 10px 16px 14px; }
  .rs-overlay .rs-card:not(.rs-scoring) .rs-body .farkle-scoring-table,
  .rs-overlay .rs-card:not(.rs-scoring) .rs-body .farkle-scoring-table tbody,
  .rs-overlay .rs-card:not(.rs-scoring) .rs-body .farkle-scoring-table tr { display: block; }
  .rs-overlay .rs-card:not(.rs-scoring) .rs-body .farkle-scoring-table tr {
    padding: 10px 0; border-bottom: 1px solid var(--rs-hair);
  }
  .rs-overlay .rs-card:not(.rs-scoring) .rs-body .farkle-scoring-table tr:last-child { border-bottom: 0; }
  .rs-overlay .rs-card:not(.rs-scoring) .rs-body .farkle-scoring-table td {
    display: block; width: auto; padding: 0; border: 0;
  }
  .rs-overlay .rs-card:not(.rs-scoring) .rs-body .farkle-scoring-table td:first-child {
    width: auto; padding: 0 0 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs-overlay .rs-bodywrap[data-more="1"] .rs-more { animation: none; }
  .rs-overlay .rs-fade, .rs-overlay .rs-more { transition: none; }
}