/* The Rules page.
   Capicúa's own surfaces: the deep blue of the homepage, the cream of a domino tile, Cinzel for
   headings and the same card vocabulary the rest of the app uses. No new visual language — a
   player arriving here from La Esquina should recognise where they are. */

.rules-page {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 50% -160px, rgba(140, 175, 255, .10), transparent 70%),
    linear-gradient(180deg, #071a3f 0%, #061330 45%, #050f27 100%);
  background-color: #061330;
  color: #eaf1ff;
  font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── the page's own nav row; the cluster on the right is the shared global header ── */
.rules-nav {
  position: relative; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px clamp(14px, 4vw, 34px);
  background: linear-gradient(90deg, #06286a 0%, #0a3d91 50%, #06286a 100%);
  border-bottom: 2px solid var(--cuba-red, #cb1515);
}
/* Same rule as La Esquina's header, for the same reason: signed in, the identity cluster is
   wide enough that a single row no longer fits a phone. Without this .rules-nav-left is the
   item that gives way — it carries min-width:0 — and the logo, which cannot shrink below its
   own width, slides out under the language pill. Wrapping moves the cluster down as a group
   instead, and a desktop row still fits on one line. */
.rules-nav { flex-wrap: wrap; row-gap: 6px; }
.rules-ident { margin-left: auto; }
.rules-nav-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rules-nav-logo img { height: 38px; width: auto; display: block; }
.rules-nav-links { display: flex; align-items: center; gap: 4px; }
.rules-nav-link {
  padding: 7px 11px; border-radius: 9px; white-space: nowrap;
  font-size: 13.5px; font-weight: 800; color: #cddcff; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.rules-nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.rules-nav-link.active { background: rgba(255, 255, 255, .16); color: #fff; }
.rules-ident { display: flex; align-items: center; gap: 10px; }
/* Narrow screens: the section links fold away and the hamburger carries them. */
@media (max-width: 720px) {
  .rules-nav-links { display: none; }
}

/* ── header ── */
.rules-main { max-width: 860px; margin: 0 auto; padding: clamp(26px, 5vw, 46px) clamp(16px, 5vw, 28px) 60px; }
.rules-header { text-align: center; margin-bottom: clamp(22px, 4vw, 34px); }
.rules-heading {
  margin: 0 0 10px; font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(30px, 6vw, 44px); font-weight: 800; letter-spacing: .02em; color: #ffd98a;
}
.rules-intro { margin: 0 auto; max-width: 52ch; font-size: clamp(14.5px, 2.4vw, 16px); line-height: 1.6; color: #a9bde6; }

/* ── contents strip ── */
.rules-index {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
  margin: 0 0 clamp(24px, 4vw, 36px); padding: 14px;
  background: rgba(10, 22, 52, .55); border: 1px solid rgba(140, 175, 255, .16); border-radius: 14px;
}
.rule-jump {
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: #cddcff; text-decoration: none;
  background: rgba(140, 175, 255, .08); border: 1px solid rgba(140, 175, 255, .18);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rule-jump:hover { background: rgba(140, 175, 255, .2); border-color: rgba(140, 175, 255, .45); color: #fff; }
.rule-jump:focus-visible { outline: 2px solid #ffd98a; outline-offset: 2px; }

/* ── one rule card ── */
.rules-list { display: flex; flex-direction: column; gap: 16px; }
.rule-card {
  scroll-margin-top: 84px;               /* the jump links clear the sticky-ish nav */
  padding: clamp(18px, 3.4vw, 26px);
  background: rgba(10, 22, 52, .62);
  border: 1px solid rgba(140, 175, 255, .16);
  border-left: 3px solid rgba(232, 179, 74, .55);
  border-radius: 16px;
}
.rule-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.rule-icon { flex: none; font-size: 21px; line-height: 1; }
.rule-title {
  margin: 0; font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(18px, 3vw, 21px); font-weight: 700; color: #ffd98a;
}
.rule-p { margin: 0 0 11px; font-size: clamp(14.5px, 2.3vw, 15.5px); line-height: 1.65; color: #d4e0f7; }
.rule-p:last-child { margin-bottom: 0; }
.rule-list { margin: 0 0 11px; padding-left: 20px; }
.rule-list li { font-size: 15px; line-height: 1.6; color: #d4e0f7; margin-bottom: 4px; }

/* An aside: an edge case, or something easy to get wrong. */
.rule-note {
  display: flex; gap: 9px; margin: 12px 0 0; padding: 11px 13px;
  background: rgba(232, 179, 74, .09); border: 1px solid rgba(232, 179, 74, .26); border-radius: 11px;
}
.rule-note-dot { flex: none; color: #ffd98a; font-weight: 800; line-height: 1.55; }
.rule-note-text { font-size: 13.8px; line-height: 1.55; color: #e3d3b4; }

/* A worked example — the cream of a domino tile, so it reads as "here is the table". */
.rule-example {
  margin: 12px 0 0; padding: 13px 15px;
  background: rgba(246, 243, 232, .07); border: 1px dashed rgba(246, 243, 232, .26); border-radius: 11px;
}
.rule-example-lead { margin: 0 0 7px; font-size: 14px; font-weight: 700; color: #f2ead6; }
.rule-example-lines { margin: 0; padding-left: 18px; }
.rule-example-lines li { font-size: 14px; line-height: 1.6; color: #cfd9ee; margin-bottom: 3px; }

/* The table-options list. */
.rule-options {
  display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px;
  margin: 12px 0 0; align-items: baseline;
}
.rule-option-name { font-size: 14px; font-weight: 800; color: #ffd98a; }
.rule-option-value { margin: 0; font-size: 14px; line-height: 1.5; color: #d4e0f7; }
@media (max-width: 520px) {
  .rule-options { grid-template-columns: 1fr; gap: 2px 0; }
  .rule-option-value { margin-bottom: 9px; }
}

/* ── foot ── */
.rules-foot { margin: 30px 0 0; text-align: center; }
.rules-foot a { font-size: 13.5px; font-weight: 700; color: #a9bde6; text-decoration: none; }
.rules-foot a:hover { color: #eaf1ff; }