/*
Theme Name: SlotCasino UK
Theme URI: https://slotcasino.co.uk
Author: slotcasino.co.uk
Description: Custom theme for slotcasino.co.uk — UK slots-focused operator comparison. Design DNA ported from the SuperDesign "Royal Reels" draft (look retained, structure rebuilt as a comparison site). Palette family navy-rose. See design-system.md.
Version: 0.1.0
Requires at least: 6.8
Tested up to: 6.9
Requires PHP: 8.1
License: Proprietary
Text Domain: slotcasino
*/

/* ==========================================================================
   Design tokens — LOCKED, see design-system.md §2
   Accent moved off gold (#d4af37) to rose-metal (#E2B1B1): the mockup's gold
   sat 4deg of hue from casinosschleswigholstein.de's #E5B546, a gambling site
   already in the fleet. #E2B1B1 is 42deg away and is Royal Reels' own
   --gold-rose token. All pairings verified WCAG AA.
   ========================================================================== */

@font-face {
  font-family: 'Boska';
  src: url('assets/fonts/Boska-Variable.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/Archivo-Variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ground — retained from the Royal Reels mockup */
  --ink-ground: #020617;
  --ink-rich:   #0F172A;

  /* accent — rose-metal, replaces gold */
  --metal:      #E2B1B1;   /* 10.63 on ground — AA */
  --metal-deep: #C08C8C;   /*  7.03 on ground — AA */

  /* text */
  --text:       #F4F6FB;   /* 18.45 on ground — AA */
  --text-muted: #A8B2C7;   /*  9.34 on ground — AA */

  /* structure */
  --hairline:   #24304A;   /* 1.52 — DECORATIVE ONLY, never text, never a sole state indicator */

  --font-display: 'Boska', Georgia, serif;
  --font-body:    'Archivo', system-ui, -apple-system, sans-serif;

  /* One prose measure for the whole site. The table-first archetype puts a
     1180px table next to the text, so a narrow 68ch column read as squeezed
     against it (Berta, 2026-07-30). Everything text-shaped now shares this
     token — change it here and the whole page moves together. */
  --measure: 86ch;
  --gutter: clamp(1rem, 4vw, 3rem);
  --radius: 2px;          /* sharp/small per footprint lock */
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink-ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

a { color: var(--metal); text-decoration: none; }

/* signature: link treatment — metal underline thickening from the baseline */
a:not(.sc-btn) {
  background-image: linear-gradient(var(--metal), var(--metal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 160ms cubic-bezier(.2,.8,.3,1);
}
a:not(.sc-btn):hover { background-size: 100% 2px; }

.sc-wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }

/* tabular figures are required for the comparison table to align */
.sc-num, .sc-table td, .sc-table th { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Layout — table-first comparison page
   ========================================================================== */

.sc-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* header */
.sc-head { border-bottom:1px solid var(--hairline); background:var(--ink-ground); }
.sc-head__inner { display:flex; align-items:center; gap:2rem; padding-block:1rem; }
.sc-logo { display:flex; align-items:center; gap:.6rem; background:none !important; flex:0 0 auto; }
.sc-logo__word { font-family:var(--font-display); font-size:1.25rem; font-weight:600; color:var(--text); letter-spacing:-.01em; }
.sc-logo__tld { color:var(--text-muted); font-weight:400; }
.sc-nav { display:flex; flex-wrap:wrap; gap:1.25rem; margin-left:auto; font-size:.875rem; }
.sc-nav a { color:var(--text-muted); }
.sc-nav a:hover { color:var(--metal); }
.sc-age { border:1px solid var(--metal-deep); color:var(--metal); border-radius:999px;
          padding:.15rem .55rem; font-size:.75rem; font-weight:600; flex:0 0 auto; }

/* lede */
.sc-home { padding-block:3rem 5rem; }
.sc-lede { max-width:var(--measure); }
.sc-stand { font-size:1.075rem; color:var(--text-muted); }
.sc-meta { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; font-size:.8125rem;
           color:var(--text-muted); border-top:1px solid var(--hairline);
           padding-top:.75rem; margin-top:1.5rem; }
.sc-meta span::before { content:""; }

/* filters */
.sc-filters { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:2.5rem 0 1rem; }
.sc-chip { font:inherit; font-size:.8125rem; color:var(--text-muted); cursor:pointer;
           background:transparent; border:1px solid var(--hairline);
           border-radius:var(--radius); padding:.4rem .85rem;
           transition:border-color 160ms, color 160ms; }
.sc-chip:hover { border-color:var(--metal-deep); color:var(--text); }
.sc-chip.is-on { border-color:var(--metal); color:var(--metal); }
.sc-count { margin-left:auto; font-size:.8125rem; color:var(--text-muted); }

/* prose sections
   `<section>` gets no margin from the UA stylesheet, so without this the only
   vertical space in the whole page body came from default <p> margins and the
   table butted straight into the headings either side of it. */
.sc-body { margin-top:3.5rem; }
.sc-body:first-of-type { margin-top:3rem; }
.sc-body h2 { margin-bottom:.6em; }
.sc-body p { max-width:var(--measure); font-size:1.0625rem; line-height:1.68;
             margin:0 0 1.15em; }
.sc-body p:last-child { margin-bottom:0; }

/* the table */
/* Tables scroll inside a container; the table itself stays display:table.
   The old mobile rule set display:block ON the table, which makes thead/tbody generate
   anonymous table boxes so header and body columns stop sharing one column model — that
   was the broken mobile layout (Berta 2026-08-04). */
.sc-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:2.75rem 0 .5rem; }
.sc-scroll .sc-table { margin:0; }

.sc-table { width:100%; border-collapse:collapse; font-size:.9375rem;
            margin:2.75rem 0 .5rem; }
.sc-table thead th { text-align:left; font-family:var(--font-body); font-size:.6875rem;
                     text-transform:uppercase; letter-spacing:.09em; font-weight:600;
                     color:var(--text-muted); padding:.75rem .75rem;
                     border-bottom:1px solid var(--hairline); }
.sc-table td, .sc-table tbody th { padding:.9rem .75rem; border-bottom:1px solid var(--hairline);
                                    text-align:left; font-weight:400; vertical-align:middle; }
.sc-table tbody tr:nth-child(even) { background:var(--ink-rich); }
.sc-rank { font-family:var(--font-display); font-size:1.5rem; color:var(--metal); width:3rem; }
.sc-op { white-space:nowrap; }
.sc-op__inner { display:flex; align-items:center; gap:.7rem; }
.sc-op__logo { height:32px; width:auto; object-fit:contain;
               background:#fff; border-radius:var(--radius); padding:3px; }
.sc-op__name { font-weight:600; color:var(--text); }
.sc-yes { color:var(--metal); font-weight:600; }
.sc-no  { color:var(--text-muted); }
.sc-tbc { color:var(--text-muted); font-style:italic; font-size:.85em; }
.is-pending { opacity:.62; }
.sc-cta { text-align:right; }

.sc-btn { display:inline-block; background:var(--metal); color:var(--ink-ground) !important;
          font-weight:600; font-size:.8125rem; padding:.5rem 1rem;
          border-radius:var(--radius); white-space:nowrap;
          transition:background 160ms cubic-bezier(.2,.8,.3,1); }
.sc-btn:hover { background:var(--metal-deep); }

/* scoring + guides */
.sc-score, .sc-guides, .sc-faq, .sc-related { margin-top:4rem; }
/* Scoring-section prose must sit in the same column as every other section: .sc-body p
   was capped at --measure but .sc-score p was not, so it ran the full 1180px wrap
   (Berta 2026-08-04). */
.sc-score p { max-width:var(--measure); }

.sc-crit { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; max-width:var(--measure); }
.sc-crit li { display:flex; gap:1rem; align-items:baseline;
              border-bottom:1px solid var(--hairline); padding-bottom:.5rem; }
.sc-crit .sc-num { font-family:var(--font-display); color:var(--metal);
                   font-size:1.15rem; min-width:3.5rem; }
.sc-guides ul { list-style:none; padding:0; display:grid;
                grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.6rem 2rem; }

/* FAQ accordion — Gate 19 */
.sc-acc { border-bottom:1px solid var(--hairline); }
.sc-acc summary { cursor:pointer; padding:1rem 0; list-style:none; }
.sc-acc summary::-webkit-details-marker { display:none; }
.sc-acc summary h3 { display:inline; font-size:1.0625rem; margin:0; color:var(--text); }
.sc-acc[open] summary h3 { color:var(--metal); }
.sc-acc p { margin:0 0 1.25rem; color:var(--text-muted); max-width:var(--measure); }

/* footer */
.sc-foot { border-top:1px solid var(--hairline); margin-top:5rem; padding-block:2.5rem;
           font-size:.8125rem; color:var(--text-muted); }
.sc-safer { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center; }
.sc-safer strong { color:var(--metal); }
.sc-safer p { flex-basis:100%; margin:.5rem 0 0; }
.sc-copy { margin-top:1.5rem; }

/* the comparison table must scroll inside its own container, never the body */
/* --- mobile menu (Berta 2026-08-04) -------------------------------------- */
.sc-nav__toggle { display:none; }          /* desktop: links are already visible */

@media (max-width:860px) {
  /* Scroll, do not crush: a min-width keeps columns legible and the wrapper scrolls.
     white-space is NOT set globally here — the welcome-offer text must wrap or the table
     becomes several screens wide. */
  .sc-table { font-size:.875rem; min-width:42rem; }
  .sc-table thead th { padding:.6rem .5rem; font-size:.625rem; }
  .sc-table td, .sc-table tbody th { padding:.7rem .5rem; }
  .sc-rank { font-size:1.15rem; width:2.25rem; }
  .sc-op__logo { height:24px; }
  .sc-num, .sc-score, .sc-cta, .sc-mid { white-space:nowrap; }
  .sc-btn { padding:.45rem .7rem; font-size:.75rem; }

  .sc-head__inner { flex-wrap:wrap; gap:1rem; row-gap:.75rem; }
  .sc-logo { flex:0 0 auto; }
  .sc-age  { margin-left:auto; order:2; }

  .sc-nav__toggle {
    display:inline-flex; align-items:center; gap:.5rem; order:3; margin-left:auto;
    background:var(--ink-rich); color:var(--text); font:inherit; font-size:.875rem;
    border:1px solid var(--hairline); border-radius:var(--radius);
    padding:.5rem .8rem; cursor:pointer;
    min-height:44px;                        /* touch target */
  }
  .sc-nav__toggle:focus-visible { outline:2px solid var(--metal); outline-offset:2px; }
  .sc-nav__toggle[aria-expanded="true"] { border-color:var(--metal-deep); }
  .sc-nav__bars, .sc-nav__bars::before, .sc-nav__bars::after {
    display:block; width:1.05rem; height:1px; background:currentColor; content:"";
  }
  .sc-nav__bars { position:relative; }
  .sc-nav__bars::before { position:absolute; top:-5px; }
  .sc-nav__bars::after  { position:absolute; top:5px; }

  /* Order 4 = full-width row under the logo. */
  .sc-nav { order:4; flex-basis:100%; margin-left:0; gap:0; }

  /* Without JS the links stay reachable as a scrolling row. */
  html:not(.sc-js) .sc-nav {
    flex-wrap:nowrap; overflow-x:auto; gap:1.25rem; padding-bottom:.35rem;
    -webkit-overflow-scrolling:touch;
  }
  html:not(.sc-js) .sc-nav a { white-space:nowrap; }

  /* With JS it is a real disclosure: collapsed until the button opens it. */
  html.sc-js .sc-nav { display:none; }
  html.sc-js .sc-nav[data-open] {
    display:flex; flex-direction:column; align-items:stretch;
    border-top:1px solid var(--hairline); margin-top:.25rem;
  }
  html.sc-js .sc-nav[data-open] a {
    padding:.85rem .25rem; border-bottom:1px solid var(--hairline);
    font-size:1rem; color:var(--text);
  }
  html.sc-js .sc-nav[data-open] a:last-child { border-bottom:0; }
}

/* ---------------------------------------------------------------------------
   PHONES (<=560px): the comparison table becomes STACKED CARDS.

   Why this replaces the scroller here: a 7-column table needs ~42rem, and relying on
   an overflow-x wrapper to contain it kept failing in the real browser — the page
   itself panned sideways (Berta, twice). A layout that is never wider than the
   viewport cannot overflow, so the failure mode is removed rather than clipped.

   The whole table is converted (table -> block, row -> card, cell -> label/value
   line). That is safe; what is NOT safe is setting display:block on the <table>
   alone, which leaves thead/tbody generating anonymous boxes — the bug from v0.9.15.
   Values keep their meaning via data-label on every cell.
   --------------------------------------------------------------------------- */
@media (max-width:560px) {
  .sc-scroll { overflow-x:visible; }
  .sc-table { min-width:0; width:100%; display:block; font-size:.9375rem; }
  .sc-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .sc-table tbody, .sc-table tr, .sc-table td, .sc-table tbody th { display:block; width:auto; }
  .sc-table tr, .sc-table tbody tr:nth-child(even) {
    background:var(--ink-rich); border:1px solid var(--hairline); border-radius:var(--radius);
    margin:0 0 .9rem; padding:.85rem 1rem;
  }
  .sc-table td, .sc-table tbody th {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.4rem 0; border-bottom:0; text-align:right;
  }
  .sc-table td[data-label]::before, .sc-table tbody th[data-label]::before {
    content:attr(data-label); flex:0 0 auto; text-align:left;
    font-size:.6875rem; text-transform:uppercase; letter-spacing:.09em;
    color:var(--text-muted); font-weight:600;
  }
  .sc-table td[data-label=""]::before { content:none; }
  /* the operator cell leads the card */
  .sc-table tbody th.sc-op { border-bottom:1px solid var(--hairline); padding-bottom:.7rem; margin-bottom:.35rem; white-space:normal; }
  .sc-op__inner { gap:.6rem; }
  .sc-rank { font-family:var(--font-display); color:var(--metal); }
  .sc-cta { padding-top:.7rem; }
  .sc-cta .sc-btn { width:100%; text-align:center; padding:.6rem 1rem; font-size:.8125rem; }
  .sc-note, .sc-games__note { margin-top:.25rem; }
}

@media (max-width:420px) {
  .sc-head__inner { padding-block:.75rem; }
  .sc-figure, .sc-ig { margin-block:2rem; }
}

/* ==========================================================================
   Interaction signature — "reel-settle"  (design-system.md §5)
   motion personality: weighted settle (damped, slight overshoot)
   Applied to the ranked table only. Never the LCP element. Budget-capped.
   ========================================================================== */

.sc-table tbody tr.is-settling .sc-num,
.sc-table tbody tr.is-settling .sc-op__name {
  animation: sc-settle 320ms cubic-bezier(.18,.89,.32,1.16) backwards;
  animation-delay: calc(var(--i, 0) * 26ms);
}

@keyframes sc-settle {
  from { transform: translateY(-38%); opacity: 0; }
  62%  { transform: translateY(3%);   opacity: 1; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* signature: hairline-wipe reveal on section headings */
.sc-score h2, .sc-guides h2, .sc-faq h2, .sc-related h2 { position: relative; padding-bottom: .6rem; }
.sc-score h2::after, .sc-guides h2::after, .sc-faq h2::after, .sc-related h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px;
  width: 100%; background: var(--hairline);
}
.sc-score h2::before, .sc-guides h2::before, .sc-faq h2::before, .sc-related h2::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px;
  width: 3.5rem; background: var(--metal); z-index: 1;
}

.sc-table tbody tr[hidden] { display: none; }

/* chips whose backing data is not yet sourced — visibly not ready, never silently wrong */
.sc-chip.is-off { opacity:.4; cursor:not-allowed; border-style:dashed; }
.sc-chip.is-off:hover { border-color:var(--hairline); color:var(--text-muted); }

/* computed score — the ranking's output, so it reads as the strongest figure in the row */
.sc-score { font-family:var(--font-display); font-size:1.15rem; color:var(--metal); }

/* author block — pseudonymous persona, EEAT on money pages */
.sc-author { display:flex; gap:1.1rem; align-items:flex-start; margin-top:4rem;
             padding-top:1.75rem; border-top:1px solid var(--hairline); }
.sc-author__pic { border-radius:999px; flex:0 0 auto; width:72px; height:72px;
                  object-fit:cover; filter:saturate(.92); }
.sc-author__name { font-family:var(--font-display); font-size:1.1rem; color:var(--text);
                   margin:0 0 .25rem; }
.sc-author__cred { margin:0; font-size:.875rem; color:var(--text-muted); max-width:74ch; }
.sc-author__link { margin:.5rem 0 0; font-size:.8125rem; }

/* body figures — between prose blocks, never directly after the ranked table.
   No figcaption: captions were removed 2026-07-30 (Berta). alt stays. */
/* ---------------------------------------------------------------------------
   No horizontal panning on mobile (Berta 2026-08-04: "when moving left, the mobile
   view moves too").

   `overflow-x: clip` rather than `hidden`: hidden makes the element a scroll
   container, which silently breaks position:sticky and can trap focus scrolling.
   clip just clips. hidden stays as the fallback for Safari < 16.

   This is a guard, not a diagnosis — the offending element could not be isolated
   because no browser runs on this box. The targeted hardening below covers the
   realistic causes so the guard is a backstop, not the whole fix.
   --------------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }

/* The table scroller must never itself exceed its parent — it is what keeps the
   42rem min-width table from pushing the page sideways. */
.sc-scroll { max-width: 100%; }

/* Replaced elements and long strings: the two things that routinely defeat a
   max-width on the container. */
svg, video, iframe, textarea, pre { max-width: 100%; }
.sc-body p, .sc-body li, .sc-acc p, .sc-note, .sc-games__note, .sc-byline,
.sc-stand, .sc-author__cred { overflow-wrap: break-word; }

/* Safety net: an image never out-runs its container, whatever markup it lands in. */
img { max-width:100%; height:auto; }

.sc-figure { margin:3rem 0; max-width:var(--measure); }   /* match the prose column */
.sc-figure img { width:100%; height:auto; display:block; border-radius:var(--radius); }

/* infographic + its embed box (the backlink mechanism) */
.sc-ig { margin:2.5rem 0 1rem; max-width:var(--measure); }  /* was 1000px — wider than the text */
.sc-embed { border:1px solid var(--hairline); border-radius:var(--radius);
            padding:.85rem 1rem; max-width:var(--measure); }
.sc-embed summary { cursor:pointer; font-size:.875rem; color:var(--metal);
                    font-weight:600; list-style:none; }
.sc-embed summary::-webkit-details-marker { display:none; }
.sc-embed p { font-size:.8125rem; color:var(--text-muted); margin:.75rem 0 .5rem; }
.sc-embed textarea { width:100%; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
                     font-size:.75rem; line-height:1.5; color:var(--text-muted);
                     background:var(--ink-ground); border:1px solid var(--hairline);
                     border-radius:var(--radius); padding:.6rem; resize:vertical; }

/* ---------------------------------------------------------------------------
   Popular-slots grid (SlotsLaunch) — /free-spins-slot-sites/.
   Cards are <div> while demos are disabled and <button> once the domain is
   whitelisted, so both are styled. No hover-scale on the thumbnail: motion stays
   in the signature layer rather than adding a stock card-lift.
   --------------------------------------------------------------------------- */
.sc-games {
  display:grid; gap:1rem; margin:1.75rem 0 0;
  grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr));
  max-width:var(--measure);
}
.sc-game {
  display:flex; flex-direction:column; gap:.35rem;
  background:var(--ink-rich); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:.5rem; text-align:left; color:inherit; font:inherit;
}
.sc-game__shot { position:relative; display:block; }
.sc-game img {
  display:block; width:100%; height:auto; aspect-ratio:1/1;
  object-fit:cover; border-radius:var(--radius);
}
/* Play badge on the facade.
   A thin outlined triangle over a scrim was almost invisible on busy slot artwork
   (Berta 2026-08-04), and the locked state dimmed it to 62% on top of that. It is now a
   SOLID rose disc with a dark triangle: 10.6:1 against the disc, and the disc itself
   reads against any thumbnail. Visibility never depends on the artwork behind it. */
.sc-game__play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.28); border-radius:var(--radius);
}
.sc-game__play svg {
  box-sizing:content-box;
  width:22px; height:22px;
  padding:14px 12px 14px 16px;        /* asymmetric: optically centres a triangle */
  color:var(--ink-ground);            /* dark glyph on the disc */
  background:var(--metal);            /* solid, not translucent */
  border-radius:999px;
  box-shadow:0 3px 14px rgba(2,6,23,.6);
}
button.sc-game:hover  .sc-game__play, button.sc-game:focus-visible .sc-game__play {
  background:rgba(2,6,23,.12);
}
button.sc-game:hover  .sc-game__play svg,
button.sc-game:focus-visible .sc-game__play svg { background:var(--text); }

/* Locked (unauthorised host): full-strength button, muted disc — never a faded one. */
button.sc-game[data-locked] { cursor:help; }
button.sc-game[data-locked] .sc-game__play svg { background:var(--metal-deep); }
button.sc-game[data-locked]:hover .sc-game__play svg { background:var(--metal); }

/* Per-operator subheads on /reviews/ — h3 inside a body section, so it needs its own
   scale rather than inheriting the FAQ h3 reset. */
.sc-op-note { font-family:var(--font-display); font-size:1.375rem; color:var(--text);
              margin:2.25rem 0 .5rem; }
.sc-op-note:first-of-type { margin-top:1.5rem; }

/* Provenance note under a table with mixed evidence standards. */
.sc-note { font-size:.82rem; color:var(--text-muted); max-width:var(--measure); margin:1rem 0 0; }
.sc-note a { color:var(--metal); text-decoration:underline; text-underline-offset:2px; }

/* Byline + verification date (E-E-A-T layer). */
.sc-byline { margin:.75rem 0 0; font-size:.85rem; color:var(--text-muted); }
.sc-byline a { color:var(--metal); text-decoration:underline; text-underline-offset:2px; }
.sc-byline a:hover { color:var(--text); }
.sc-byline__sep { margin:0 .5rem; color:var(--hairline); }

/* Author portrait on the author page. */
.sc-portrait { margin:2rem 0 0; }
.sc-portrait img { border-radius:999px; width:144px; height:144px; display:block; }

/* Footer nav for the trust pages. */
.sc-foot__nav { display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; margin:1.5rem 0 0; font-size:.85rem; }
.sc-foot__nav a { color:var(--text-muted); text-decoration:underline; text-underline-offset:2px; }
.sc-foot__nav a:hover { color:var(--metal); }

/* Safer-gambling citations must read as links, not decoration. */
.sc-safer a { color:var(--metal); text-decoration:underline; text-underline-offset:2px; }
.sc-safer a:hover { color:var(--text); }
.sc-safer p a { color:var(--metal); }

.sc-games__note { font-size:.82rem; color:var(--text-muted); max-width:var(--measure); margin:.9rem 0 0; }
.sc-games__note code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.95em; }
.sc-game__name { font-size:.82rem; font-weight:600; color:var(--text); line-height:1.25; }
.sc-game__prov { font-size:.72rem; color:var(--text-muted); }
button.sc-game { cursor:pointer; }
button.sc-game:hover { border-color:var(--metal-deep); }
button.sc-game:focus-visible { outline:2px solid var(--metal); outline-offset:2px; }
.sc-games iframe {
  width:100%; aspect-ratio:4/3; border:1px solid var(--hairline);
  border-radius:var(--radius); background:var(--ink-ground);
}

/* Related-guide nav — replaces the flat all-siblings list. */
.sc-related { margin-top:4rem; }
.sc-related ul {
  list-style:none; padding:0; display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); max-width:var(--measure);
}
.sc-related li a {
  display:block; padding:.7rem .9rem; background:var(--ink-rich);
  border:1px solid var(--hairline); border-radius:var(--radius);
  color:var(--text); text-decoration:none;
}
.sc-related li a:hover { border-color:var(--metal-deep); }
.sc-related li a:focus-visible { outline:2px solid var(--metal); outline-offset:2px; }