/* ═══════════════════════════════════════════════════════════════
   /spelregels/ (views/nieuw/pagina-spelregels.php), nieuwe opbouw
   Navy kop met drie kleine borden (de beginopstelling, elk een link
   naar de uitleg), daarna een kaart per regelpagina met directe vragen,
   en onderaan de borden uit de winkel. Klassen: nw-sr-*.
   Bouwt op css/nieuw/10-basis.css (tokens, knoppen, raster, kaarten).
   ═══════════════════════════════════════════════════════════════ */

/* ── Kop ─────────────────────────────────────────────────────── */
.nw-sr-kop { position: relative; overflow: hidden; color: #E7ECFA;
    background: radial-gradient(110% 90% at 88% 0%, #2A3B7C 0%, var(--nw-navy) 52%, var(--nw-navy-diep) 100%);
    padding-block: clamp(18px, 2.6vw, 28px) clamp(44px, 6vw, 76px); }
.nw-sr-kop .nw-binnen { display: grid; gap: clamp(26px, 3.6vw, 40px) clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 980px) {
    .nw-sr-kop .nw-binnen { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
    .nw-sr-kop .nw-kruimels { grid-column: 1 / -1; }
}
.nw-sr-kop .nw-kruimels ol { color: #AFBBE3; }
.nw-sr-kop .nw-kruimels a { color: #D5DDF5; }
.nw-sr-kop .nw-kruimels a:hover { color: #fff; }
.nw-sr-kop .nw-kruimels [aria-current] { color: #fff; }
.nw-sr-kop .nw-kruimels li + li::before { color: #6B7BB5; }
.nw-sr-kop :focus-visible { outline-color: var(--nw-geel); }

.nw-sr-kop h1 { color: #fff; font-family: var(--nw-kop-font); font-weight: 700; letter-spacing: -.015em;
    font-size: clamp(2.05rem, 1.35rem + 2.6vw, 3.25rem); line-height: 1.05; margin: 16px 0 16px; }
.nw-sr-kop h1 em { font-style: normal; color: var(--nw-geel); }
.nw-sr-intro { color: #C9D3F2; font-size: clamp(1rem, .96rem + .25vw, 1.12rem); line-height: 1.65; max-width: 52ch; margin: 0 0 26px; }

/* Zo begint een partij: drie tekeningen op een licht vlak, elk een link naar de uitleg. */
.nw-sr-cijfers { min-width: 0; }
.nw-sr-label { margin: 0 0 12px; font-family: var(--nw-kop-font); font-weight: 700; font-size: .8rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--nw-geel); }
.nw-sr-borden { list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.nw-sr-borden li { min-width: 0; }
.nw-sr-bord { display: block; height: 100%; padding: clamp(8px, 1vw, 12px); border-radius: var(--nw-r-m); color: inherit;
    text-decoration: none; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
    transition: background-color .2s, border-color .2s; }
.nw-sr-bord:hover { color: inherit; background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .3); }
.nw-sr-bord:focus-visible { border-radius: var(--nw-r-m); }
.nw-sr-bord-svg { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px;
    box-shadow: 0 0 0 3px #0B1331, 0 12px 26px rgba(4, 9, 30, .45); }
.nw-sr-borden li:nth-child(2) .nw-sr-bord-svg { transform: rotate(-1.5deg); }
.nw-sr-bord-tekst { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; line-height: 1.3; }
.nw-sr-bord-tekst strong { color: #fff; font-family: var(--nw-kop-font); font-weight: 700; font-size: clamp(.84rem, .78rem + .3vw, 1rem); }
.nw-sr-bord-tekst span { width: fit-content; color: #D5DDF5; font-size: clamp(.8rem, .76rem + .2vw, .9rem);
    text-decoration: underline; text-decoration-color: rgba(255, 192, 32, .7); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nw-sr-bord:hover .nw-sr-bord-tekst span { color: #fff; text-decoration-color: var(--nw-geel); }

/* Kleuren van de tekening: crème en blauw zoals een bord, stenen in wit en navy. */
.nw-sr-vak-licht  { fill: #F3F0E6; }
.nw-sr-vak-donker { fill: #7F93CF; }
.nw-sr-stuk-licht  { fill: #FFFFFF; stroke: #14204A; stroke-width: .7; }
.nw-sr-stuk-donker { fill: #14204A; stroke: #F5901E; stroke-width: .7; }

@media (max-width: 520px) {
    .nw-sr-bord-tekst span { font-size: .78rem; }
    .nw-sr-borden li:nth-child(2) .nw-sr-bord-svg { transform: none; }
}

/* ── Kaarten per regelpagina ─────────────────────────────────── */
.nw-sr-kaarten { display: grid; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 820px) { .nw-sr-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nw-sr-kaart { display: flex; flex-direction: column; gap: 12px; min-width: 0;
    padding: clamp(20px, 2.4vw, 30px); border-radius: var(--nw-r-l); background: var(--nw-wit);
    border: 1px solid var(--nw-rand); box-shadow: var(--nw-schaduw-s); }
.nw-sr-kaart-kop { display: flex; align-items: center; gap: 12px; }
.nw-sr-soort { font-family: var(--nw-kop-font); font-weight: 700; font-size: .8rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--nw-inkt-zacht); }
.nw-sr-kaart h3 { font-family: var(--nw-kop-font); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem);
    line-height: 1.15; margin: 4px 0 0; color: var(--nw-inkt); }
.nw-sr-kort { margin: 0; color: var(--nw-inkt-zacht); line-height: 1.55; }
.nw-sr-feit { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 0; padding: 12px 14px;
    border-radius: var(--nw-r-s); background: var(--nw-canvas-2); color: var(--nw-inkt); font-size: .95rem; line-height: 1.5; }
.nw-sr-feit .nw-icoon { color: var(--nw-oranje-inkt); margin-top: 1px; }
/* Feit als link naar het antwoord op de regelpagina (dammen): hele vlak klikbaar, minstens 44px hoog. */
.nw-sr-feit--link { min-height: 44px; text-decoration: none; }
.nw-sr-feit--link span { text-decoration: underline; text-decoration-color: var(--nw-geel); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.nw-sr-feit--link:hover { color: var(--nw-oranje-inkt); }

/* Directe vragen: elk een doel van minstens 44px, met een pijl die meeschuift. */
.nw-sr-vragen { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--nw-rand); }
.nw-sr-vragen li { border-bottom: 1px solid var(--nw-rand); }
.nw-sr-vragen a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
    padding: 9px 4px; color: var(--nw-inkt); font-weight: 500; line-height: 1.35; text-decoration: none; }
.nw-sr-vragen a .nw-icoon { color: var(--nw-inkt-zacht); transition: transform .2s var(--nw-vloei), color .2s; }
.nw-sr-vragen a:hover { color: var(--nw-oranje-inkt); }
.nw-sr-vragen a:hover .nw-icoon { color: var(--nw-oranje-inkt); transform: translateX(3px); }
/* margin-top auto: de knop staat onderaan, ook als de buurkaart langer is. */
.nw-sr-kaart-knop { align-self: flex-start; margin-top: auto; }
.nw-sr-vragen { margin-bottom: 6px; }

/* ── Speel het op ons bord ───────────────────────────────────── */
.nw-sr-spel { display: grid; gap: clamp(24px, 3.4vw, 40px) clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 980px) { .nw-sr-spel { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.nw-sr-spel h2 { font-family: var(--nw-kop-font); font-weight: 700; font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.3rem);
    line-height: 1.1; letter-spacing: -.01em; margin: 0 0 14px; }
.nw-sr-spel h2 em { font-style: normal; color: var(--nw-oranje-inkt); }
.nw-sr-spel-tekst > p { color: var(--nw-inkt-zacht); font-size: 1.04rem; line-height: 1.65; margin: 0 0 18px; max-width: 54ch; }
.nw-sr-punten { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nw-sr-punten li { display: flex; align-items: center; gap: 10px; color: var(--nw-inkt); font-weight: 500; }
.nw-sr-punten .nw-icoon { color: var(--nw-oranje-inkt); }
.nw-sr-bordraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (prefers-reduced-motion: reduce) {
    .nw-sr-vragen a .nw-icoon, .nw-sr-vragen a:hover .nw-icoon { transition: none; transform: none; }
    .nw-sr-bord { transition: none; }
}