/* rolletto-cl3m — "Odds triptych". One token block governs the whole surface.
   Palette values are the captured dark-theme custom properties of the official
   homepage (capture 2026-09-08); see THEMING.md for the replacement procedure. */

:root {
  /* --- palette --- */
  --page:        #001C2D;   /* --pageBgColor / --mainBgColor */
  --surface:     #002338;   /* --mainComponentsBgColor */
  --raised:      #00263D;   /* --mainHeaderBottomRowBgColor */
  --accent:      #1EE7A6;   /* --brandColor / --btnBgColor */
  --on-accent:   #001C2D;   /* --textColorOnBrandColor */
  --text:        #FFFFFF;   /* --textColor */
  --muted:       #899CC3;   /* --notificationsTextColor */
  --alert:       #FD4A46;   /* --smallElementsBgColor */
  --warn:        #F2BE10;   /* --transactionPendingColor */
  --info:        #43AEFC;   /* --mainColdGamesRtpTextColor */
  --line:        #5C7F9B;   /* control + card boundaries, AA-safe (>=3:1) */
  --line-soft:   rgba(92,127,155,.34);

  /* --- typography --- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-body: 1rem;
  --fs-small: .8125rem;
  --fs-h1: clamp(1.9rem, 6.4vw, 3.4rem);
  --fs-h2: clamp(1.35rem, 3.4vw, 2.1rem);
  --fs-h3: clamp(1.05rem, 2.2vw, 1.3rem);
  --lh: 1.6;

  /* --- geometry --- */
  --gutter: 1rem;
  --maxw: 84rem;
  --gap: .75rem;
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
  --header-h: 3.25rem;      /* sticky offset */
  --tap: 2.75rem;           /* 44px at default root size */
}

@media (min-width: 48rem) { :root { --gutter: 1.5rem; } }
@media (min-width: 64rem) { :root { --gutter: 2rem; --gap: .875rem; } }

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh);
  -webkit-text-size-adjust: 100%;
}

p, li, dd, dt, figcaption, summary, address { overflow-wrap: anywhere; }

img { max-width: 100%; display: block; }

a { color: var(--accent); }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--accent); color: var(--on-accent);
  min-width: var(--tap); min-height: var(--tap);
  padding: .7rem 1rem; font-weight: 700; text-decoration: none; border-radius: 0 0 var(--r-s) 0;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--page);
  border-bottom: 1px solid var(--line-soft);
}
.masthead .wrap {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  min-height: var(--header-h); padding-block: .25rem;
}
.logo { display: block; max-width: 44vw; width: 7.5rem; height: auto; }
@media (max-width: 22.5rem) { .logo { width: 6rem; } .masthead .btn { padding: .5rem .7rem; } .nav-d > summary { padding: .5rem .6rem; } }
.mh-spacer { flex: 1 1 auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--tap); min-width: var(--tap); padding: .5rem 1rem;
  border-radius: var(--r-s); font-weight: 700; font-size: .9375rem;
  text-decoration: none; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent);
}
.btn.ghost { background: transparent; color: var(--accent); }
.btn.quiet { background: transparent; color: var(--text); border-color: var(--line); }

/* full-page index, native details, bounded to the viewport */
/* the panel is positioned against the sticky masthead itself, so it always
   opens BELOW the header even when the header wraps to two rows at 320px or
   at root font-size 200%; 8rem covers the tallest header the tokens allow. */
.nav-d { position: static; }
.nav-d > summary {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  min-height: var(--tap); min-width: var(--tap); padding: .5rem .85rem;
  border: 1px solid var(--line); border-radius: var(--r-s);
  font-weight: 700; font-size: .9375rem; list-style: none;
}
.nav-d > summary::-webkit-details-marker { display: none; }
.nav-d > summary::after { content: "▾"; }
.nav-d[open] > summary::after { content: "▴"; }
.nav-d > nav {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: max(6rem, min(55dvh, calc(100dvh - 12rem)));
  overflow-y: auto;
  background: var(--raised);
  border-block: 1px solid var(--line-soft);
  padding: .5rem var(--gutter) 1rem;
  display: grid; gap: .125rem;
}
.nav-d > nav a {
  display: flex; align-items: center; min-height: var(--tap); min-width: var(--tap);
  padding: .5rem .25rem; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--line-soft); font-size: .9375rem;
}
.nav-d > nav a:hover { color: var(--accent); }

/* product rail — the official's second header row */
.prodrail { background: var(--raised); border-bottom: 1px solid var(--line-soft); }
.prodrail .wrap { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: thin; }
.prodrail a {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap); padding: .35rem .6rem;
  color: var(--text); text-decoration: none; font-size: .8125rem; font-weight: 700;
  white-space: nowrap; border-bottom: 3px solid transparent;
}
.prodrail a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.hdr-signup { display: none; }
@media (min-width: 64rem) { .nav-d { display: none; } .hdr-signup { display: inline-flex; } }

/* ---------- hero ---------- */

.hero { padding-block: .25rem 0; }
.hero-card { padding-bottom: .6rem; }
.hero-card {
  background: linear-gradient(160deg, var(--raised) 0%, var(--surface) 62%, var(--page) 100%);
  border: 1px solid var(--line-soft); border-radius: var(--r-l);
  padding: .75rem;
}
@media (min-width: 40rem) { .hero-card { padding: 1.25rem; } }
@media (min-width: 64rem) { .hero-card { padding: 1.75rem 2rem; } }
.eyebrow {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0; line-height: 1.4;
}
h1 { font-size: var(--fs-h1); line-height: 1.08; margin: 0 0 .5rem; letter-spacing: -.01em; }
.hero-lead { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.45; color: var(--text); max-width: 46rem; }
.hero-qual { margin: .5rem 0 0; line-height: 1.4; font-size: var(--fs-small); color: var(--muted); max-width: 52rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* triptych — the official's 1 / X / 2 chip row, reused for genuine trios.
   Its box is a query container, so the chips stack whenever the available
   inline size drops below 16rem — which is what happens at 320px, at root
   font-size 200% and under the 195x422@2 zoom simulation. */
.hero-card, .tripbox { container-type: inline-size; }
.trip .k, .trip .v, .trip .u { overflow-wrap: anywhere; }
.trip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; margin: 0; }
@container (max-width: 16rem) {
  .trip { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
.trip > div {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-s);
  padding: .5rem .4rem; text-align: center;
}
.trip .k { display: block; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.trip .v { display: block; font-family: var(--mono); font-size: 1.125rem; font-weight: 700; color: var(--accent); line-height: 1.25; }
.trip .u { display: block; font-size: .6875rem; color: var(--muted); }
.trip-cap { margin: .5rem 0 0; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
@media (min-width: 48rem) { .trip .v { font-size: 1.4rem; } .trip > div { padding: .7rem .6rem; } }

/* ---------- lobby ---------- */

.shelf { padding-block: 0; }
.shelf-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: 0 0 .1rem; }
.shelf-title { font-size: 1.0625rem; font-weight: 700; margin: 0; }
.shelf-title::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem; border-radius: 2px; background: var(--accent); }
.shelf-note { margin: 0 0 .3rem; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }

.tile-grid, .hero-shelf {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0;
}
@media (min-width: 30rem) { .tile-grid, .hero-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .tile-grid, .hero-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .tile-grid, .hero-shelf { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.tile { margin: 0; }
.tile img {
  width: 100%; height: auto; aspect-ratio: 200 / 165; object-fit: cover;
  border-radius: var(--r-m); border: 1px solid var(--line-soft); background: var(--surface);
}
.tile figcaption { padding: .2rem .1rem 0; }
.tile .t { display: block; font-size: .8125rem; font-weight: 700; line-height: 1.3; }
.tile .p { display: block; font-size: .6875rem; color: var(--muted); line-height: 1.3; }

/* ---------- entity board ---------- */

.entity {
  margin: 1rem 0 0; padding: .7rem .85rem; font-size: .9375rem; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-m);
}
.entity .lbl { display: block; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: .3rem; }
.entity p { margin: 0; }

/* ---------- main flow ---------- */

main { display: block; }
section { padding-block: 1.75rem .25rem; scroll-margin-top: calc(var(--header-h) + .5rem); }
h2 { font-size: var(--fs-h2); line-height: 1.18; margin: 0 0 .4rem; letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; margin: 1.25rem 0 .35rem; }
.lead { margin: 0 0 .85rem; font-size: 1.0625rem; color: var(--text); border-left: 3px solid var(--accent); padding-left: .7rem; max-width: 52rem; }
p { margin: 0 0 .75rem; max-width: 58rem; }
.small { font-size: var(--fs-small); color: var(--muted); }
ul, ol { margin: 0 0 .85rem; padding-left: 1.15rem; max-width: 58rem; }
li { margin-bottom: .35rem; }
.num { font-family: var(--mono); }

/* rule cards */
.cards { display: grid; gap: var(--gap); margin: 0 0 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-m);
  padding: .85rem 1rem;
}
.card h3, .card h4 { margin: 0 0 .3rem; font-size: 1rem; line-height: 1.3; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* paired-conflict card */
.pair { border-color: var(--warn); }
.pair .lbl { display: block; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); font-weight: 700; margin-bottom: .35rem; }
.pair-cols { display: grid; gap: .6rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 40rem) { .pair-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pair-cols > div { background: var(--page); border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: .6rem .7rem; }
.pair-cols .src { display: block; font-size: .6875rem; color: var(--muted); margin-top: .3rem; }

/* promo cards with the brand's own Read-More expander */
.promos { display: grid; gap: var(--gap); grid-template-columns: repeat(1, minmax(0, 1fr)); margin-bottom: 1rem; }
@media (min-width: 48rem) { .promos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .promos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.promo { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: .85rem 1rem; }
.promo h3 { margin: 0 0 .25rem; font-size: 1rem; color: var(--accent); }
.promo > p { margin: 0 0 .6rem; font-size: .9375rem; }
.promo details { border-top: 1px solid var(--line-soft); padding-top: .4rem; }
.promo summary,
.faq summary {
  cursor: pointer; font-weight: 700; color: var(--accent);
  display: flex; align-items: center; min-height: var(--tap); min-width: var(--tap);
  list-style: none; padding: .3rem 0; font-size: .9375rem;
}
.promo summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.promo summary::before, .faq summary::before { content: "▸"; margin-right: .45rem; }
.promo details[open] > summary::before, .faq details[open] > summary::before { content: "▾"; }
.promo details p { margin: .3rem 0 .5rem; font-size: .875rem; }
.promo details p:last-child { margin-bottom: .2rem; }

/* tables */
.tscroll { overflow-x: auto; margin: 0 0 1rem; border: 1px solid var(--line-soft); border-radius: var(--r-m); }
table { border-collapse: collapse; width: 100%; min-width: 44rem; font-size: .875rem; }
caption { text-align: left; padding: .6rem .75rem; font-size: var(--fs-small); color: var(--muted); border-bottom: 1px solid var(--line-soft); }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
/* cells break by words, never letter-by-letter: `overflow-wrap: anywhere`
   also collapses a column's min-content to one character, which starved the
   row-header column; `break-word` still rescues a long unbreakable string */
th, td { overflow-wrap: break-word; }
.tscroll table tr > :first-child { min-width: 9rem; }
thead th { background: var(--raised); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
tbody th[scope="row"] { color: var(--accent); font-weight: 700; white-space: normal; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* brand walls */
.wall { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 .6rem; }
@media (min-width: 30rem) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .wall { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.wall.providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 30rem) { .wall.providers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .wall.providers { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.wall figure { margin: 0; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: .6rem .4rem; display: grid; gap: .25rem; align-content: center; }
.wall img { height: 1.75rem; width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }
.wall.providers img { height: 2.5rem; }
.wall figcaption { text-align: center; font-size: .625rem; color: var(--muted); }

/* definition rows */
.def-rows { margin: 0 0 1rem; display: grid; gap: 0; }
.def-rows > div { display: grid; gap: .1rem .9rem; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
@media (min-width: 48rem) { .def-rows > div { grid-template-columns: 14rem minmax(0, 1fr); } }
.def-rows dt { font-weight: 700; color: var(--accent); margin: 0; }
.def-rows dd { margin: 0; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq h3 { margin: 0; font-size: 1rem; }
.faq .a { margin: 0 0 .75rem; }

/* inline prose links reach 44px in both dimensions */
.tap { display: inline-block; min-width: var(--tap); min-height: var(--tap); padding-block: .6rem; }

/* ---------- footer ---------- */

.site-footer { margin-top: 2rem; background: var(--surface); border-top: 1px solid var(--line-soft); padding-block: 1.5rem; }
.foot-grid { display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot-grid .foot-h { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem; }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links a { display: flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--text); text-decoration: none; font-size: .9375rem; }
.foot-links a:hover { color: var(--accent); }
.socials { display: flex; gap: .5rem; flex-wrap: wrap; }
.socials span { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap); padding: .4rem .75rem; border: 1px solid var(--line-soft); border-radius: var(--r-s); font-size: .8125rem; color: var(--muted); }
.socials img { height: 1.1rem; width: auto; }
.age-line { display: flex; align-items: center; gap: .6rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); color: var(--muted); }
.age-line img { width: 2rem; height: auto; flex: 0 0 auto; }
.copy { margin: .75rem 0 0; font-size: var(--fs-small); color: var(--muted); }