/* Inner pages — built from the mockup's components (cards, slip, list, tools) on the same tokens. */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* next draw panel in the page head */
.next-card { display: grid; gap: .6rem; }
.next-card h2 { margin: .2rem 0 0; }
.next-card__pot { margin: 0; font: 800 2.4rem/1 var(--font-display); font-stretch: 115%; letter-spacing: -.03em; color: var(--color-brand); }
.next-card__pot small { font: 400 .8rem/1 var(--font-body); color: var(--color-muted); letter-spacing: 0; }
.next-card__label { margin: .4rem 0 0; font-size: .85rem; color: var(--color-muted); }
.next-card .btn { margin-top: .6rem; }

/* lottery cards */
.lot-card { min-height: 280px; }
.lot-card .pot b { font-size: 1.7rem; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: .4rem 0 0; }
.facts div { padding: .65rem .8rem; border-radius: var(--radius-sm); background: var(--color-surface-2); }
.facts dt { font-size: .72rem; color: var(--color-muted); }
.facts dd { margin: .2rem 0 0; font-weight: 600; font-size: .9rem; color: var(--color-text); }
.card__foot .icon { width: 1em; height: 1em; vertical-align: -.15em; }

/* week calendar */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.week__day { padding: 16px 14px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); min-height: 160px; }
.week__day.is-today { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-soft); }
.week__name { margin: 0 0 .8rem; font-weight: 600; font-size: .92rem; }
.week__name .num { display: block; color: var(--color-muted); font-weight: 400; font-size: .8rem; }
.week__name .tag { margin-top: .3rem; background: var(--color-brand-soft); color: var(--color-brand); }
.week ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.week a { display: block; padding: .45rem .55rem; border-radius: var(--radius-xs); background: var(--color-surface-2); text-decoration: none; font-size: .82rem; line-height: 1.3; transition: background var(--dur-base); position: relative; }
.week a:hover { background: var(--color-brand-soft); color: var(--color-brand); }
.week a .num { display: block; font: 600 .72rem/1.2 var(--font-mono); color: var(--color-muted); }

/* game page */
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(24px, 4vw, 64px); align-items: start; }
.game-layout .slip { position: sticky; top: calc(var(--header-h) + 28px); }
.stack { display: grid; gap: clamp(40px, 5vw, 64px); }
.block h2 { font: 800 1.9rem/1.05 var(--font-display); font-stretch: 112%; letter-spacing: -.03em; margin: .6rem 0 1rem; }
.block > p { color: var(--color-text-2); max-width: 60ch; }
.keyfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.keyfacts div { padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-1); }
.keyfacts b { display: block; font: 800 1.25rem/1.1 var(--font-display); font-stretch: 112%; letter-spacing: -.02em; }
.keyfacts span { font-size: .78rem; color: var(--color-muted); }
.table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 18px 10px 6px; overflow-x: auto; }

/* catalogues (casino, instants) */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.toolbar p { margin: 0; color: var(--color-muted); font-size: .9rem; }
.game-card { padding: 10px; gap: 0; }
.game-card__art { position: relative; aspect-ratio: 16 / 10; border-radius: calc(var(--radius-lg) - 8px); display: grid; place-items: center; overflow: hidden; }
.game-card__art .mark { position: relative; z-index: 1; font: 800 clamp(2.6rem, 4vw, 3.6rem)/1 var(--font-display); font-stretch: 125%; letter-spacing: -.05em; color: #fff; }
.art-square { background: radial-gradient(30rem 16rem at 80% 0%, oklch(62% .2 268), transparent 70%), linear-gradient(135deg, oklch(50% .21 268), oklch(36% .16 272)); }
.art-square::before { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 22px; border: 1.5px solid oklch(100% 0 0 / .3); transform: rotate(12deg); }
.art-square--machines { background: linear-gradient(135deg, oklch(30% .05 265), oklch(19% .03 265)); }
.art-square--bingo { background: linear-gradient(135deg, oklch(86% .16 88), oklch(78% .16 80)); }
.art-square--bingo .mark { color: var(--color-text); }
.art-tri { background: linear-gradient(135deg, oklch(70% .17 45), oklch(55% .18 35)); }
.art-tri::before { content: ""; position: absolute; width: 46%; aspect-ratio: 1; background: oklch(100% 0 0 / .14); clip-path: polygon(50% 4%, 96% 92%, 4% 92%); }
.art-tri .mark { font-size: clamp(2rem, 3vw, 2.6rem); }
.game-card__body { padding: 16px 12px 8px; display: grid; gap: .4rem; flex: 1; }
.game-card__body h3 { font-size: 1.2rem; }
.game-card .card__foot { margin: 0 12px; padding-bottom: 6px; }
.game-card__btn { all: unset; position: absolute; inset: 0; border-radius: inherit; cursor: pointer; z-index: 2; }
.game-card__btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }
.fav-mark { position: absolute; top: 18px; right: 18px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: oklch(100% 0 0 / .9); color: var(--color-error); }
.fav-mark .icon { width: 16px; height: 16px; fill: currentColor; }
.btn[aria-pressed="true"] .icon { fill: currentColor; color: var(--color-error); }

/* responsible gaming */
.rg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.rg-card { padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-1); display: grid; gap: .8rem; align-content: start; scroll-margin-top: 100px; }
.rg-card h2, .rg-card h3 { margin: 0; font: 800 1.5rem/1.05 var(--font-display); font-stretch: 112%; letter-spacing: -.03em; }
.rg-card p { margin: 0; color: var(--color-text-2); }
.rg-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.rg-card li { display: flex; gap: .55rem; align-items: start; font-size: .95rem; color: var(--color-text-2); }
.rg-card li .icon { width: 1.1em; height: 1.1em; color: var(--color-calm); margin-top: .2em; }
.rg-card--wide { grid-column: 1 / -1; }
.rg-card--calm { background: linear-gradient(160deg, color-mix(in oklch, var(--color-calm) 8%, var(--color-surface)), var(--color-surface)); }
.selftest { counter-reset: q; }
.selftest li { counter-increment: q; }
.selftest li::before { content: counter(q); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-2); font: 600 .75rem/1 var(--font-mono); }

/* account */
.acct-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.acct-grid .rg-card--wide { grid-column: 1 / -1; }
.balance { display: grid; gap: .4rem; }
.balance__num { font: 800 2.6rem/1 var(--font-display); font-stretch: 115%; letter-spacing: -.04em; }
.balance__num small { font: 500 1rem/1 var(--font-body); color: var(--color-muted); letter-spacing: 0; }
.balance .meter { height: 10px; }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; min-height: 28px; padding: 0 .7rem; border-radius: var(--radius-pill); font-size: .8rem; font-weight: 600; background: var(--color-calm-soft); color: var(--color-calm); }
.status-pill--warn { background: var(--color-error-soft); color: var(--color-error); }
.tickets { display: grid; gap: 8px; }
.ticket { display: grid; grid-template-columns: minmax(140px, 180px) 1fr auto; gap: 1rem; align-items: center; padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-surface-2); }
.ticket small { display: block; color: var(--color-muted); font-size: .78rem; }
.ticket__res { text-align: right; font-size: .85rem; font-weight: 600; }
.empty { padding: 26px; border-radius: var(--radius-md); border: 1.5px dashed var(--color-border-strong); text-align: center; color: var(--color-muted); display: grid; gap: .8rem; justify-items: center; }
.empty .shape { width: 40px; height: 40px; }

/* auth pages */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(24px, 5vw, 80px); align-items: start; }
.auth__aside { display: grid; gap: 1rem; }
.auth__aside h2 { font: 800 1.6rem/1.05 var(--font-display); font-stretch: 112%; letter-spacing: -.03em; margin: 0; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.checklist li { display: grid; grid-template-columns: 28px 1fr; gap: .7rem; align-items: start; color: var(--color-text-2); }
.checklist li .icon { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--color-calm-soft); color: var(--color-calm); }
.form-sep { height: 1px; background: var(--color-border); margin: 4px 0; }
.form-foot { font-size: .9rem; color: var(--color-text-2); margin: 0; }
.form-foot a { color: var(--color-brand); font-weight: 600; }

/* legal / prose layout */
.doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.doc__meta { font-size: .85rem; color: var(--color-muted); margin: 0 0 1.5rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(24px, 5vw, 80px); align-items: start; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

@media (max-width: 1100px) {
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .game-layout, .auth, .contact-grid { grid-template-columns: 1fr; }
  .game-layout .slip { position: static; order: -1; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .keyfacts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .grid-2, .rg-grid, .acct-grid { grid-template-columns: 1fr; }
  .doc { grid-template-columns: 1fr; }
  .doc .toc { position: static; }
}
@media (max-width: 560px) {
  .grid-3 { grid-template-columns: 1fr; }
  .week { grid-template-columns: 1fr 1fr; }
  .week__day { min-height: 0; }
  .facts { grid-template-columns: 1fr; }
  .ticket { grid-template-columns: 1fr; }
  .ticket__res { text-align: left; }
}
.section__head--sm { margin-bottom: 1rem; align-items: center; }
.section__head--sm h2 { margin: 0; }
.rules-list { margin: 0 0 1rem; }
.rules-list li { margin-bottom: .5rem; }
.catalog-rg, .results-note { margin-top: clamp(32px, 4vw, 56px); }
.rg-card .rg-sub { font: 600 1.05rem/1.3 var(--font-body); letter-spacing: 0; margin-top: .6rem; }
.rg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.rg-list li { display: flex; gap: .6rem; align-items: start; color: var(--color-text-2); }
.auth-tabs { margin-bottom: 1.4rem; }
.step-label { margin: 0; display: flex; align-items: center; gap: .6rem; font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.step-label .num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--color-surface-2); color: var(--color-text); }
.step-label--key { color: var(--color-brand); }
.step-label--key .num { background: var(--color-brand); color: #fff; border-radius: 50%; }
.acct-sub { margin: 1.5rem 0 0; }
.facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts--2 dd { overflow-wrap: anywhere; }
.fav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fav-list li { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--color-surface-2); }
.fav-list a { text-decoration: none; font-weight: 600; position: relative; }
.fav-list a:hover { color: var(--color-brand); }
.acct-head { margin-top: .4rem; }
.about-lang { margin-top: clamp(24px, 3vw, 40px); }
.about-grid .shape { margin-bottom: .2rem; }
.grid-2 > *, .grid-3 > *, .game-layout > *, .stack > * { min-width: 0; }
/* results next to the slip: the column is narrow, balls take their own line */
.game-layout .row { grid-template-columns: 1fr auto; }
.game-layout .row .balls { grid-column: 1 / -1; order: 3; }
.credits { margin-top: clamp(40px, 5vw, 72px); font-size: .85rem; color: var(--color-muted); }
.credits__h { font: 600 1rem/1.3 var(--font-body); color: var(--color-text); margin: 0 0 .4rem; }
.credits ul { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .35rem; }
.credits a { color: var(--color-text-2); position: relative; }
.credits a:hover { color: var(--color-brand); }

/* generated card illustrations (image-prompts.md) replace the geometric plate when present */
.game-card__art.has-img::before { display: none; }
.game-card__photo { position: absolute; inset: 0; }
.game-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.game-card:hover .game-card__photo img { transform: scale(1.05); }
.dlg-photo { display: block; margin: -8px -8px 1rem; border-radius: calc(var(--radius-lg) - 10px); overflow: hidden; aspect-ratio: 16 / 10; }
.dlg-photo img { width: 100%; height: 100%; object-fit: cover; }