/* Components. From mockup B2 unless marked "new" (designed in its language on the same tokens). */

/* highlighter pill — lime fill behind dark text only (signature #2) */
.hl { white-space: nowrap; background: var(--color-brand); color: var(--color-ink); border-radius: .3em; padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.age { display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 .5rem; border-radius: var(--r-pill); background: var(--color-brand); color: var(--color-ink); font: 700 .72rem/1 var(--font-body); letter-spacing: .02em; flex: none; }
.age--lg { min-width: 52px; height: 34px; font-size: .95rem; }

/* live chip with pulsing dot (signature #3) */
.live { display: inline-flex; align-items: center; gap: .55rem; min-height: 32px; padding: .3rem .85rem .3rem .7rem; border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--line); box-shadow: var(--shadow-1); font: 600 .82rem/1.2 var(--font-body); color: var(--text-1); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-2); position: relative; flex: none; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-accent-2); animation: ping 2s var(--ease) infinite; }
.dot--calm, .dot--calm::after { background: var(--color-ok); }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.8); opacity: 0; } }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: 0 1.35rem; border-radius: var(--r-pill); font: 600 .98rem/1 var(--font-body); text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer; background: transparent; transition: transform var(--dur) var(--spring), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn--primary { background: var(--color-brand); color: var(--color-ink); box-shadow: 0 10px 26px -14px oklch(85% .17 120 / .55); }
.btn--primary:hover { background-color: var(--color-brand-hover); }
.btn--primary .icon { color: var(--color-ink); --icon-duo: var(--color-ink); --icon-duo-o: .22; }
.btn--ghost { background: var(--surface-1); color: var(--text-1); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--text-1); }
.btn--sm { min-height: 40px; padding: 0 1rem; font-size: .9rem; }
.btn .icon:last-child { transition: transform var(--dur) var(--ease); }
.btn:hover .icon:last-child { transform: translateX(3px); }
.btn:hover .icon:first-child:not(:last-child) { transform: none; }

.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-1); color: var(--text-1); cursor: pointer; transition: transform var(--dur) var(--spring), border-color var(--dur); }
.iconbtn:hover { transform: translateY(-1px); border-color: var(--text-1); }
.iconbtn[disabled] { opacity: .4; pointer-events: none; }

/* text link with lime underline band */
.link { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; font-weight: 600; text-decoration: none; color: var(--text-1); }
.link span { background: linear-gradient(var(--color-brand-soft), var(--color-brand-soft)) 0 92%/0 .38em no-repeat; transition: background-size .3s var(--ease); }
.link:hover span, .link:focus-visible span { background-size: 100% .38em; }
.link .icon { color: var(--color-brand); transition: transform var(--dur) var(--ease); }
.link:hover .icon { transform: translateX(3px); }

/* search field */
.search-field { position: relative; display: flex; align-items: center; width: 100%; }
.search-field > .icon { position: absolute; left: 14px; color: var(--text-muted); pointer-events: none; }
.search-field input { width: 100%; height: 44px; padding: 0 3.2rem 0 2.75rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-1); font: 500 .93rem var(--font-body); color: var(--text-1); transition: border-color var(--dur), box-shadow var(--dur); -webkit-appearance: none; appearance: none; }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-field input::placeholder { color: var(--text-muted); }
.search-field input:focus { outline: 2px solid var(--color-brand); outline-offset: 2px; border-color: var(--color-brand); box-shadow: 0 0 0 4px var(--color-brand-soft); }
.search-field kbd { position: absolute; right: 10px; font: 600 .72rem/1 var(--font-body); color: var(--text-muted); border: 1px solid var(--line-strong); border-radius: 6px; padding: .3rem .4rem; background: var(--surface-2); }
.search-field--lg input { height: 54px; font-size: 1rem; }
.search-field--lg button { position: absolute; right: 6px; }
.search-field--lg:has(button) input { padding-right: 8.5rem; }

/* chip (hero source) */
.chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; min-height: 32px; padding: .3rem .8rem .3rem .4rem; border-radius: var(--r-pill); background: var(--surface-2); font: 600 .8rem/1.3 var(--font-body); color: var(--text-2); }
.chip .tag { display: inline-flex; align-items: center; gap: .35rem; height: 24px; padding: 0 .6rem; border-radius: var(--r-pill); background: var(--color-brand); color: var(--color-ink); }
.chip .tag .icon { width: 15px; height: 15px; color: var(--color-ink); --icon-duo: var(--color-ink); --icon-duo-o: .22; }
.chip a { color: var(--text-1); text-underline-offset: 2px; }

/* segmented control (home shelf) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); max-width: 100%; }
.seg button { min-height: 40px; padding: 0 1rem; border: 0; border-radius: var(--r-pill); background: transparent; font: 600 .9rem var(--font-body); color: var(--text-2); display: inline-flex; align-items: center; gap: .45rem; transition: background-color var(--dur), color var(--dur), box-shadow var(--dur); }
.seg button:hover { color: var(--text-1); }
.seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--text-1); box-shadow: var(--shadow-2); }
.count { min-width: 22px; height: 20px; padding: 0 .35rem; border-radius: var(--r-pill); background: var(--surface-3); font-size: .72rem; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; color: var(--text-1); }
.seg button[aria-pressed="true"] .count { background: var(--color-brand); color: var(--color-ink); }

/* new: filter chips (radio inputs = works without JS) */
.filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.1rem; border-radius: var(--r-lg); background: var(--surface-1); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.filters__label { font: 600 .74rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); min-width: 7.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.chips legend { padding: 0; }
.chips label { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: 0 .95rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: 600 .88rem var(--font-body); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--dur), color var(--dur), box-shadow var(--dur); }
.chips label:hover { color: var(--text-1); box-shadow: inset 0 0 0 1px var(--line-strong); }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chips input:checked + span { color: var(--color-ink); }
.chips label:has(input:checked) { background: var(--color-brand); color: var(--color-ink); box-shadow: none; }
.chips label:has(input:focus) { box-shadow: var(--focus-ring); }
.is-pointer .chips label:has(input:focus:not(:focus-visible)) { box-shadow: none; }
.chips label:has(input:focus):has(input:checked) { box-shadow: var(--focus-ring); }
.chips .count { background: oklch(96% .01 115 / .1); }
.chips label:has(input:checked) .count { background: oklch(20% .04 195 / .15); color: var(--color-ink); }
.filters__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.status { font-size: .9rem; color: var(--text-muted); }
.js .filters__apply { display: none; }

/* new: empty state */
.empty { display: grid; justify-items: center; gap: .8rem; text-align: center; padding: clamp(32px, 6vw, 64px) 1.25rem; border-radius: var(--r-lg); background: var(--surface-1); box-shadow: 0 0 0 1px var(--line); }
.empty__digits { font: 600 3.2rem/1 var(--font-display); letter-spacing: -.06em; color: var(--field-num); }
.empty h3 { font: 600 1.15rem/1.25 var(--font-display); letter-spacing: -.03em; }
.empty p { color: var(--text-2); max-width: 46ch; }

/* shelf (signature rhythm: horizontal snap) */
.shelf-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.shelf-nav { display: flex; gap: .5rem; }
.shelf { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 6px var(--gutter) 24px; margin: 0 calc(-1 * var(--gutter)); list-style: none; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; overscroll-behavior-x: contain; }
.shelf > li { flex: 0 0 clamp(250px, 24vw, 290px); scroll-snap-align: start; }

/* card grid (catalog) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; list-style: none; }

/* game card */
.card { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--surface-1); border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; transition: transform .3s var(--spring), box-shadow .3s var(--ease), border-color .3s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.card__art { position: relative; height: 172px; margin: 8px 8px 0; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); flex: none; }
.card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card h3 { font: 600 var(--fs-h3)/1.2 var(--font-display); letter-spacing: -.03em; }
.card p { font-size: .92rem; color: var(--text-2); }
.card__link { margin-top: auto; padding-top: .35rem; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* whole card clickable */
.card:has(.card__link:focus-visible) { box-shadow: var(--focus-ring); }
.cat { display: inline-flex; align-items: center; gap: .4rem; height: 26px; padding: 0 .65rem; border-radius: var(--r-pill); background: var(--surface-2); font: 600 .74rem/1 var(--font-body); color: var(--text-2); white-space: nowrap; }
.cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--color-brand)); }
.cat--loteries { --c: var(--color-brand); }
.cat--instantanes { --c: var(--color-cat-instant); }
.cat--casino { --c: var(--color-cat-casino); }
.cat--sports { --c: var(--color-cat-sports); }
.cat--poker { --c: var(--color-cat-poker); }
.cat--bingo { --c: var(--color-cat-bingo); }

/* generated photo art, when present */
.card__art--photo { background: var(--surface-2); }
.card__art--photo picture, .card__art--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__art--photo > * { zoom: 1 !important; }
.card:hover .card__art--photo img { transform: scale(1.04); }
.card__art--photo img { transition: transform .6s var(--ease); }

/* card cover: tilted icon tile on a category-tinted field (TZ §14 "cards without image") */
.card__art.cv, .hv-tile.cv { background:
    radial-gradient(90% 110% at 88% 100%, color-mix(in oklch, var(--c) 26%, transparent), transparent 62%),
    radial-gradient(circle at 1px 1px, oklch(97% .01 120 / .08) 1px, transparent 1.5px) 0 0 / 16px 16px,
    linear-gradient(150deg, var(--surface-3), var(--surface-deep-2)); }
.cv-ghost { position: absolute; right: -30px; bottom: -40px; width: 180px; height: 180px; color: var(--c); opacity: .12; rotate: -14deg; --icon-duo: var(--c); --icon-duo-o: .6; transition: rotate .6s var(--spring); }
.card__art.cv::before, .game-art.cv::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; translate: -50% -50%; border-radius: 50%; border: 1px dashed color-mix(in oklch, var(--c) 40%, transparent); }
.cv-tile { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; translate: -50% -50%; rotate: -6deg; display: grid; place-items: center; border-radius: 24px;
  background: linear-gradient(145deg, color-mix(in oklch, var(--c) 32%, var(--surface-3)), var(--surface-2));
  border: 1px solid color-mix(in oklch, var(--c) 50%, transparent);
  box-shadow: 0 18px 40px -14px color-mix(in oklch, var(--c) 55%, transparent), inset 0 1px 0 oklch(100% 0 0 / .12);
  transition: rotate .4s var(--spring), scale .4s var(--spring); }
.cv-tile .icon { width: 52px; height: 52px; color: var(--text-1); --icon-duo: var(--c); --icon-duo-o: .9; }
.card:hover .cv-tile { rotate: 0deg; scale: 1.06; }
.card:hover .cv-ghost { rotate: -4deg; }

.cv-mx { position: absolute; left: 12px; top: 12px; z-index: 1; padding: .3rem .6rem .32rem; border-radius: 10px; rotate: -4deg; background: var(--color-brand); color: var(--color-ink); font: 700 1.05rem/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; box-shadow: 0 8px 18px -8px color-mix(in oklch, var(--color-brand) 70%, transparent); }
.cv-days { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: .35rem; height: 26px; padding: 0 .6rem; border-radius: var(--r-pill); background: oklch(16% .02 200 / .7); backdrop-filter: blur(6px); font: 600 .74rem/1 var(--font-body); color: var(--text-1); }
.cv-days .icon { width: 14px; height: 14px; }
.cv-op { position: absolute; right: 12px; top: 12px; z-index: 1; height: 24px; display: inline-flex; align-items: center; padding: 0 .55rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: oklch(16% .02 200 / .6); font: 700 .68rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.game-art .cv-mx { left: 20px; top: 20px; font-size: 1.6rem; padding: .4rem .8rem; }
.game-art .cv-days, .game-art .cv-op { display: none; }

.cv-badges { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* game page: the same cover, scaled */
.game-art { height: clamp(220px, 26vw, 300px); margin: 0 0 2rem; border-radius: var(--r-lg); }
.game-art .cv-tile { width: 132px; height: 132px; border-radius: 34px; }
.game-art .cv-tile .icon { width: 76px; height: 76px; }
.game-art.cv::before { width: 230px; height: 230px; }
.game-art .cv-ghost { width: 320px; height: 320px; right: -40px; bottom: -80px; }

/* new: featured lottery card (home 5.2) — large, horizontal art */
.feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; }
.feat .card__art { height: 220px; }
.feat .card h3 { font-size: 1.35rem; }
.feat__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.feat__facts span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 .65rem; border-radius: var(--r-pill); background: var(--surface-2); font-size: .8rem; font-weight: 600; color: var(--text-2); }

/* draw balls / numbers */
.balls, .nums { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nums { flex-wrap: nowrap; }
.n-bonus { display: inline-flex; align-items: center; gap: 6px; flex: none; }   /* label + bonus ball move together */
.rc .nums { flex-wrap: wrap; row-gap: 6px; }
.n-sep { display: inline-grid; place-items: center; height: 36px; }   /* same box height as the balls */   /* the bonus number never hangs alone on a line */
.filters__row { min-width: 0; }
.ball, .n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); color: var(--text-1); font: 600 .9rem/1 var(--font-body); font-variant-numeric: tabular-nums; flex: none; }
.ball--on { background: var(--color-brand); color: var(--color-ink); }
.ball--co { background: var(--color-coral-soft); box-shadow: inset 0 0 0 1.5px var(--color-accent-2); }
.n--co { background: var(--color-brand); color: var(--color-ink); }
.n-sep { font-size: .75rem; color: var(--text-2); margin: 0 2px 0 6px; }

/* results table + mobile cards */
.tbl { width: 100%; background: var(--surface-deep-2); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.tbl th { text-align: left; font: 600 .78rem/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); padding: 1.05rem 1.1rem; border-bottom: 1px solid var(--line); }
.tbl td { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background-color var(--dur); }
.tbl tbody tr:hover { background: oklch(97% .01 120 / .04); }
.tbl .game { font: 600 1.02rem/1.2 var(--font-display); letter-spacing: -.03em; }
.tbl .game a { text-decoration: none; }
.tbl .game a:hover { text-decoration: underline; text-decoration-color: var(--color-brand); text-underline-offset: 4px; }
.tbl .date { color: var(--text-2); white-space: nowrap; }
.src-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; font-weight: 600; font-size: .9rem; color: var(--text-1); text-decoration: underline; text-decoration-color: oklch(97% .01 120 / .35); text-underline-offset: 4px; white-space: nowrap; }
.src-link:hover { text-decoration-color: var(--color-brand); }
.src-link .icon { width: 1em; height: 1em; }
.res-note { margin-top: 1rem; font-size: .82rem; color: var(--text-2); }
.res-note a { color: var(--text-1); }
.rcards { display: none; grid-template-columns: minmax(0, 1fr); list-style: none; gap: 12px; }
/* table or cards is decided by the width of the block, not of the screen */
.res-wrap { container-type: inline-size; }
@container (max-width: 640px) { .tbl { display: none; } .rcards { display: grid; } }
@container (max-width: 780px) { .res-wrap--g > .tbl { display: none; } .res-wrap--g > .rcards { display: grid; } }
.rc { background: var(--surface-deep-2); border-radius: var(--r-lg); padding: 1.1rem; box-shadow: 0 0 0 1px var(--line); display: grid; gap: .7rem; }
.rc__top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.rc__game { font: 600 1.05rem/1.2 var(--font-display); letter-spacing: -.03em; }
.rc__top .date { font-size: .85rem; color: var(--text-2); }

/* boxes (aside cards) */
.box { background: var(--surface-1); color: var(--text-1); border-radius: var(--r-lg); padding: 1.3rem; box-shadow: var(--shadow-2), 0 0 0 1px var(--line); }
.box h3 { font: 600 1.05rem/1.25 var(--font-display); letter-spacing: -.03em; margin-top: .8rem; }
.box h3:first-child { margin-top: 0; }
.box p { margin-top: .45rem; font-size: .92rem; color: var(--text-2); }
.box .btn { margin-top: 1rem; width: 100%; }
.box .live { box-shadow: none; background: var(--surface-2); }
.box--rg { background: var(--surface-deep-2); }
.box--rg > .icon { width: 28px; height: 28px; color: var(--text-1); }
.box--rg a:not(.btn) { color: var(--text-1); font-weight: 600; }
.sched { list-style: none; margin-top: .9rem; display: grid; gap: 6px; font-size: .9rem; }
.sched li { display: flex; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; border-radius: var(--r-sm); background: var(--surface-2); }
.sched b { font-weight: 600; }

/* new: facts list (game page) */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0; }
.facts > div { padding: .9rem 1rem; border-radius: var(--r-md); background: var(--surface-1); box-shadow: 0 0 0 1px var(--line); }
.facts dt { font: 600 .74rem/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.facts dd { margin: .5rem 0 0; font: 600 1.02rem/1.35 var(--font-body); color: var(--text-1); }

/* new: info tiles (home 5.5) + steps (5.6) */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tile { position: relative; display: grid; gap: .8rem; align-content: start; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); background: var(--surface-1); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; }
.tile__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.tile__icon .icon { width: 30px; height: 30px; }
.tile h3 { font: 600 1.35rem/1.2 var(--font-display); letter-spacing: -.035em; }
.tile p { color: var(--text-2); max-width: 52ch; }
.tile .link { margin-top: .4rem; justify-self: start; }
.tile__digits { position: absolute; right: -.5rem; bottom: -1.2rem; z-index: -1; font: 600 7rem/.8 var(--font-display); letter-spacing: -.07em; color: var(--field-num); pointer-events: none; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; counter-reset: step; }
.step { position: relative; display: grid; gap: .6rem; padding: 1.4rem 1.3rem 1.5rem; border-radius: var(--r-lg); background: var(--surface-1); box-shadow: 0 0 0 1px var(--line); }
.step__n { display: inline-grid; place-items: center; width: 48px; height: 40px; border-radius: 12px; background: var(--color-brand); color: var(--color-ink); font: 700 1.05rem/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; transform: rotate(-6deg); }
.step h3 { margin-top: .4rem; font: 600 1.1rem/1.25 var(--font-display); letter-spacing: -.03em; }
.step p { color: var(--text-2); font-size: .95rem; }

/* new: news cards */
.news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; }
.post { position: relative; display: flex; flex-direction: column; gap: .7rem; height: 100%; padding: 1.4rem 1.3rem; border-radius: var(--r-lg); background: var(--surface-1); box-shadow: 0 0 0 1px var(--line); transition: transform .3s var(--spring), box-shadow .3s; }
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow-2), 0 0 0 1px var(--line-strong); }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; color: var(--text-muted); }
.post h3 { font: 600 1.12rem/1.3 var(--font-display); letter-spacing: -.03em; }
.post p { color: var(--text-2); font-size: .95rem; }
.post .link { margin-top: auto; }
.post .link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post:has(.link:focus-visible) { box-shadow: var(--focus-ring); }

/* new: responsible-gaming band (home 5.8) */
.rg-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem 2rem; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); background: linear-gradient(120deg, color-mix(in oklch, var(--color-brand) 10%, var(--surface-1)), var(--surface-1) 55%); box-shadow: var(--shadow-2), 0 0 0 1px var(--line-strong); }
.rg-band h2 { margin: 0; font: 600 clamp(1.3rem, 2.2vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -.035em; }
.rg-band p { margin-top: .5rem; color: var(--text-2); max-width: 70ch; }
.rg-band__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* new: prose (legal, about, articles) */
.prose { max-width: 72ch; color: var(--text-2); font-size: 1.04rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.6rem; color: var(--text-1); font: 600 clamp(1.3rem, 2vw, 1.6rem)/1.2 var(--font-display); letter-spacing: -.035em; scroll-margin-top: calc(var(--tier2) + 24px); }
.prose h3 { margin-top: 1.8rem; color: var(--text-1); font: 600 1.1rem/1.3 var(--font-display); letter-spacing: -.025em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: .45rem; }
.prose li::marker { color: var(--color-brand); }
.prose a { color: var(--text-1); text-decoration-color: var(--color-brand); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:hover { color: var(--color-brand); }
.prose strong { color: var(--text-1); }
.prose blockquote { margin: 1.4rem 0; padding: 1rem 1.2rem; border-radius: var(--r-md); background: var(--surface-1); border-left: 3px solid var(--color-brand); }
.prose table { width: 100%; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }

/* new: table of contents */
.toc { padding: 1.2rem; border-radius: var(--r-lg); background: var(--surface-1); box-shadow: 0 0 0 1px var(--line); }
.toc h2 { font: 600 .74rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .7rem; }
.toc ol { list-style: none; display: grid; gap: .1rem; counter-reset: toc; }
.toc a { display: flex; gap: .6rem; padding: .4rem .5rem; border-radius: var(--r-sm); text-decoration: none; font-size: .92rem; color: var(--text-2); transition: background-color var(--dur), color var(--dur); counter-increment: toc; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }
.toc a:hover, .toc a.is-active { background: var(--surface-2); color: var(--text-1); }

/* new: FAQ accordion (details/summary — works without JS) */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { border-radius: var(--r-md); background: var(--surface-1); box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--dur); }
.faq details[open] { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-1); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: .9rem 1.2rem; cursor: pointer; font: 600 1.02rem/1.35 var(--font-display); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); color: var(--color-brand); }
.faq summary:focus-visible { outline-offset: -2px; border-radius: var(--r-md); }
.faq .faq__a { padding: 0 1.2rem 1.2rem; max-width: 72ch; }
.faq details:not([open]) .faq__a { display: none; }

/* new: load more */
.more { display: flex; justify-content: center; margin-top: 1.6rem; }

/* new: notice */
.notice { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--surface-1); box-shadow: inset 3px 0 0 var(--color-brand), 0 0 0 1px var(--line); font-size: .94rem; color: var(--text-2); }
.notice .icon { color: var(--text-1); width: 22px; height: 22px; margin-top: .1rem; }
.notice a { color: var(--text-1); }

/* responsive components */
@media (max-width: 1040px) {
  .feat, .news { grid-template-columns: 1fr 1fr; }
  .feat > li:last-child, .news > li:last-child { grid-column: 1 / -1; }
  .rg-band { grid-template-columns: auto minmax(0, 1fr); }
  .rg-band__actions { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .seg { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: var(--r-md); }
  .seg button { flex: none; }
  .shelf-nav { display: none; }
  .shelf > li { flex-basis: 78vw; }
  .rc .nums { gap: 5px; }
  .rc .n { width: 31px; height: 31px; font-size: .84rem; }
  .rc .n-sep { height: 31px; }
  .rc .n-sep { margin: 0 0 0 4px; }
  .feat, .news, .tiles, .steps { grid-template-columns: 1fr; }
  .feat > li:last-child, .news > li:last-child { grid-column: auto; }
  .filters__label { min-width: 0; width: 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1.1rem; padding: 2px 1.1rem; width: calc(100% + 2.2rem); }
  .chips label { flex: none; }
  .rg-band { grid-template-columns: 1fr; }
}
@media (max-width: 389px) {
  .rc { padding: .85rem; }
  .rc .n { width: 25px; height: 25px; font-size: .74rem; }
  .rc .nums { gap: 3px; }
  .rc .n-sep { height: 25px; }
  .rc .n-sep { font-size: .68rem; }
}

/* casino page: gallery of well-known titles */
.gg__tabs { margin-bottom: 22px; }
.gg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 18px 16px; list-style: none; }
.gg__tile { position: relative; display: grid; gap: .2rem; text-decoration: none; color: var(--text-1); border-radius: var(--r-md); }
.gg__pic { position: relative; display: block; aspect-ratio: 1; margin-bottom: .45rem; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-1); outline: 1px solid var(--line); outline-offset: -1px; transition: transform .35s var(--spring), box-shadow .35s var(--ease); }
.gg__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gg__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, oklch(16% .02 200 / .75)); }
.gg__type { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: .3rem .55rem; border-radius: var(--r-pill); background: oklch(16% .02 200 / .72); backdrop-filter: blur(6px); font: 600 .7rem/1 var(--font-body); color: var(--text-1); }
.gg__name { font: 600 .95rem/1.25 var(--font-display); letter-spacing: -.02em; }
.gg__prov { font-size: .8rem; color: var(--text-muted); }
.gg__tile:hover .gg__pic { transform: translateY(-4px); box-shadow: var(--shadow-2), 0 0 0 2px var(--color-brand); }
.gg__tile:hover .gg__pic img { transform: scale(1.06); }
.gg__note { display: flex; gap: .5rem; align-items: flex-start; margin-top: 28px; font-size: .84rem; color: var(--text-muted); max-width: 70ch; }
.gg__note .icon { flex: none; width: 18px; height: 18px; margin-top: .1rem; }
@media (max-width: 960px) { .gg__tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-radius: var(--r-md); } .gg__tabs button { flex: none; } }
@media (max-width: 560px) { .gg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }

/* game page: odds on a log scale */
.odds { margin: 0 0 2.4rem; padding: clamp(18px, 3vw, 28px); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--surface-2), var(--surface-1)); border: 1px solid var(--line); }
.odds .odds__title { display: flex; align-items: center; gap: .55rem; font: 600 1.15rem/1.2 var(--font-display); letter-spacing: -.03em; margin: 0 0 1.1rem; }
.odds__title .icon { width: 22px; height: 22px; }
.odds__list { list-style: none; display: grid; gap: 1rem; }
.odds__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: baseline; }
.odds__label { font-size: .9rem; color: var(--text-2); }
.odds__val { font: 600 .95rem/1.2 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: right; }
.odds__bar { grid-column: 1 / -1; position: relative; height: 10px; border-radius: var(--r-pill); background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line-strong) calc(25% - 1px) 25%), var(--surface-3); overflow: hidden; }
.odds__bar i { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, var(--color-brand), var(--color-accent-2)); transform-origin: left; animation: odds-grow 1s var(--ease) both; }
@keyframes odds-grow { from { transform: scaleX(0); } }
.odds__scale { display: flex; justify-content: space-between; margin-top: .45rem; font: 600 .7rem/1 var(--font-body); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.odds__note { margin-top: .9rem; font-size: .8rem; color: var(--text-muted); }
.odds__cmp { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--r-md); background: var(--color-brand-soft); color: var(--text-1); font-size: .92rem; }
.odds__cmp .icon { flex: none; width: 20px; height: 20px; margin-top: .1rem; }

/* category page head: decorative visual on the right */
.hv { position: absolute; z-index: 0; top: 50%; right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); width: 380px; height: 260px; translate: 0 -50%; pointer-events: none; }
.page-head:has(.hv) .wrap > * { position: relative; z-index: 1; }
@media (min-width: 1081px) { .page-head:has(.hv) .wrap > * { max-width: calc(100% - 440px); } }
.hv-cover { position: absolute; width: 150px; aspect-ratio: 1; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px -18px oklch(0% 0 0 / .7); outline: 1px solid oklch(100% 0 0 / .12); outline-offset: -1px; animation: hv-in .8s var(--spring) both; }
.hv-cover img { width: 100%; height: 100%; object-fit: cover; }
.hv-cover:nth-child(1) { left: 0; top: 70px; rotate: -12deg; animation-delay: .05s; }
.hv-cover:nth-child(2) { left: 95px; top: 10px; rotate: -3deg; z-index: 2; animation-delay: .15s; }
.hv-cover:nth-child(3) { left: 200px; top: 60px; rotate: 7deg; z-index: 1; animation-delay: .25s; }
.hv-cover:nth-child(4) { left: 120px; top: 135px; rotate: 4deg; width: 120px; z-index: 3; animation-delay: .35s; }
.hv--balls { display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-end; gap: 10px; }
.hv-ball { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: var(--color-brand); color: var(--color-ink); font: 700 1.9rem/1 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; box-shadow: 0 16px 34px -14px color-mix(in oklch, var(--color-brand) 70%, transparent); animation: hv-in .7s var(--spring) both; }
.hv-ball:nth-child(odd) { rotate: -6deg; }
.hv-ball:nth-child(even) { rotate: 4deg; translate: 0 8px; }
.hv-ball:nth-child(2) { animation-delay: .06s; } .hv-ball:nth-child(3) { animation-delay: .12s; } .hv-ball:nth-child(4) { animation-delay: .18s; }
.hv-ball:nth-child(5) { animation-delay: .24s; } .hv-ball:nth-child(6) { animation-delay: .3s; } .hv-ball:nth-child(7) { animation-delay: .36s; } .hv-ball:nth-child(8) { animation-delay: .42s; }
.hv-ball--co { background: var(--color-accent-2); box-shadow: 0 16px 34px -14px color-mix(in oklch, var(--color-accent-2) 70%, transparent); }
.hv-cap { width: 100%; margin-top: 8px; text-align: right; font: 600 .78rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.hv--tiles .hv-tile { position: absolute; width: 150px; height: 150px; border-radius: 30px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 50px -18px oklch(0% 0 0 / .7); animation: hv-in .8s var(--spring) both; }
.hv--tiles .hv-tile:nth-child(1) { left: 10px; top: 80px; rotate: -10deg; }
.hv--tiles .hv-tile:nth-child(2) { left: 120px; top: 10px; rotate: 3deg; z-index: 1; animation-delay: .12s; }
.hv--tiles .hv-tile:nth-child(3) { left: 225px; top: 95px; rotate: 9deg; animation-delay: .24s; }
@keyframes hv-in { from { opacity: 0; transform: translateY(18px) scale(.92); } }
@media (max-width: 1080px) { .hv { display: none; } .page-head:has(.hv) .lead { max-width: 62ch; } }

/* home: richer info tiles and connected steps */
.tile--photo { min-height: 300px; }
.tile--photo .tile__bg img { opacity: .62; }
.tile--photo:hover .tile__bg img { opacity: .72; }
.tile--photo::after { background: linear-gradient(100deg, var(--surface-1) 38%, color-mix(in oklch, var(--surface-1) 55%, transparent) 70%, color-mix(in oklch, var(--surface-1) 10%, transparent)); }
.tile .tile__icon { width: 68px; height: 68px; border-radius: 20px; rotate: -6deg; background: linear-gradient(145deg, color-mix(in oklch, var(--color-brand) 30%, var(--surface-3)), var(--surface-2)); box-shadow: 0 16px 34px -14px color-mix(in oklch, var(--color-brand) 55%, transparent), inset 0 0 0 1px color-mix(in oklch, var(--color-brand) 45%, transparent); }
.tile .tile__icon .icon { width: 38px; height: 38px; color: var(--text-1); --icon-duo-o: .9; }
.step { overflow: visible; isolation: isolate; padding-top: 1.6rem; }
.step__ghost { position: absolute; right: 14px; top: 14px; z-index: -1; width: 74px; height: 74px; color: var(--color-brand); opacity: .14; --icon-duo-o: .6; }
@media (min-width: 900px) {
  .step:not(:last-child)::after { content: ""; position: absolute; z-index: 2; top: 2.85rem; right: -18px; width: 18px; height: 2px; background: repeating-linear-gradient(90deg, var(--color-brand) 0 4px, transparent 4px 8px); }
}
.step:hover .step__n { transform: rotate(0deg) scale(1.06); }
.step__n { transition: transform .35s var(--spring); }
.post__read { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-muted); }
.post__read .icon { width: 15px; height: 15px; --icon-duo-o: .2; }
.post__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, oklch(16% .02 200 / .55)); pointer-events: none; }
.provs { margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line); }
.sec .provs__title { margin: 0 0 1.1rem; font: 600 .78rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.provs__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.provs__list li { display: grid; place-items: center; height: 64px; padding: 0 14px; border-radius: var(--r-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.provs__list img { max-width: 100%; max-height: 26px; width: auto; height: auto; opacity: .7; filter: brightness(1.25); transition: opacity .3s var(--ease), filter .3s var(--ease); }
.provs__list li:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.provs__list li:hover img { opacity: 1; filter: brightness(1.9); }

/* casino grid: closing tile that leads to the games gallery */
.card--extra { text-decoration: none; color: var(--text-1); background: linear-gradient(160deg, color-mix(in oklch, var(--color-brand) 14%, var(--surface-1)), var(--surface-1)); }
.extra__mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 8px 8px 0; height: 172px; border-radius: var(--r-md); overflow: hidden; }
.extra__mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card--extra:hover .extra__mosaic img { transform: scale(1.06); }
.extra__body { display: flex; flex-direction: column; gap: .55rem; flex: 1; padding: 1rem 1.1rem 1.15rem; }
.extra__body b { font: 600 var(--fs-h3)/1.2 var(--font-display); letter-spacing: -.03em; }
.extra__body > span:not(.link) { font-size: .92rem; color: var(--text-2); }
.extra__body .link { margin-top: auto; }
.card--extra:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* final pass: odds rows stack on phones so the label keeps its width */
@media (max-width: 560px) {
  .odds__list li { grid-template-columns: minmax(0, 1fr); }
  .odds__val { text-align: left; }
}
.strip h2 .hl { white-space: normal; }