/* Product pages: lotteries, results, catalogues, widgets, sports, event, bet slip. */

.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hero-stats .stat { padding: 16px 18px; border-radius: var(--r-2); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-stats .stat span { color: rgba(255,255,255,.8); }
.phero:not(.phero--img) .hero-stats .stat { background: var(--surface-1); border-color: var(--line); }
.phero:not(.phero--img) .hero-stats .stat span { color: var(--ink-2); }
.tlink-btn { border: 0; background: none; cursor: pointer; padding: 0; font: inherit; font-weight: 600; }

/* ---------- lotteries ---------- */
.lot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lot-big { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(var(--header-h) + 20px); transition: box-shadow .3s; }
.lot-big.is-full { box-shadow: 0 0 0 3px var(--brand-50), var(--sh-3); }
.lot-big-h { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.lot-big-h .shape { width: 22px; height: 22px; }
.lot-big-h h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.03em; }
.lot-big-h p { font-size: 14px; color: var(--ink-2); }
.lot-desc { color: var(--ink-2); }
.lot-facts { display: grid; gap: 0; margin: 0; }
.lot-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.lot-facts dt { color: var(--ink-2); }
.lot-facts dd { margin: 0; font-weight: 600; text-align: right; }
.picker { background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--r-2); padding: 16px; }
.picker-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 15px; }
.picker-count { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.picker-grid, .kn-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.pk { position: relative; aspect-ratio: 1; min-width: 0; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface-1); font: 700 14px/1 var(--font-h); font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; transition: transform .2s var(--spring), background .15s, color .15s, border-color .15s; padding: 0; }
.pk::after { content: ""; position: absolute; inset: -3px; }
.pk:hover:not(:disabled) { transform: scale(1.1); border-color: var(--ink); }
.pk[aria-pressed="true"] { background: var(--color-brand); border-color: var(--color-brand); color: #fff; animation: pop .35s var(--spring); }
.pk:disabled { opacity: .35; cursor: not-allowed; }
.picker-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.picker-actions [data-buy] { margin-left: auto; }

/* ---------- results ---------- */
.res-jump { margin-bottom: 28px; }
.res-block { margin-bottom: 56px; scroll-margin-top: calc(var(--header-h) + 20px); }
.res-block-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.res-block-h h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.035em; }
.res-block-h .tag svg.icon { width: 14px; height: 14px; }
.res-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.res-main h3 { font-size: 19px; }
.res-hist { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: 22px; box-shadow: var(--sh-1); }
.res-hist h3 { font-size: 17px; margin-bottom: 8px; }
.res-hist ol { list-style: none; }
.res-hist li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.rh-date { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.res-hist .balls { margin: 0; gap: 5px; }
.res-note { display: flex; gap: 10px; align-items: center; color: var(--ink-2); font-size: 14px; }

/* ---------- featured shelf ---------- */
.shelf--feat { grid-auto-columns: minmax(340px, 420px); }
.feat-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border-radius: var(--r-3); background: var(--surface-1); border: 1px solid var(--line); box-shadow: var(--sh-2); transition: transform .3s var(--spring), box-shadow .3s; }
.feat-card:hover { transform: translateY(-4px) rotate(-.3deg); box-shadow: var(--sh-3); }
.feat-art { border-radius: var(--r-2); overflow: hidden; aspect-ratio: 1; }
.feat-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.feat-card:hover .feat-art img { transform: scale(1.06); }
.feat-b { display: grid; gap: 6px; justify-items: start; }
.feat-b h3 { font-size: 19px; letter-spacing: -.02em; }
.feat-b p { font-size: 14px; color: var(--ink-2); }

/* ---------- catalogue ---------- */
.cat-tools { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 20px; }
.cat-tools .tabs { margin: 0; }
.cat-sort button { padding: 0 14px; }
.game.is-hidden { display: none; }

/* ---------- keno / bingo widgets ---------- */
.widget { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.kn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kn-bar > span { font-weight: 600; margin-right: auto; font-variant-numeric: tabular-nums; }
.kn-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.kn-out { min-height: 24px; margin-top: 14px; font-weight: 600; color: var(--color-trust); }
.kn-grid { padding: 18px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-2); }
.kn-grid .pk.drawn { background: var(--ink); border-color: var(--ink); color: #fff; animation: pop .35s var(--spring); }
.kn-grid .pk.drawn.hit { background: var(--color-gold); border-color: var(--color-gold); color: var(--ink); box-shadow: 0 0 0 4px var(--gold-50); }
.bg-card { padding: 18px; background: var(--surface-1); border-radius: var(--r-3); box-shadow: var(--sh-2); border: 1px solid var(--line); transition: box-shadow .3s; }
.is-bingo .bg-card { box-shadow: 0 0 0 4px var(--gold-50), var(--sh-3); }
.bg-head, .bg-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bg-head span { display: grid; place-items: center; height: 46px; border-radius: var(--r-1); font: 800 22px/1 var(--font-h); color: #fff; }
.bg-head span:nth-child(1) { background: var(--color-brand); } .bg-head span:nth-child(2) { background: var(--color-trust); } .bg-head span:nth-child(3) { background: var(--color-gold); color: var(--ink); } .bg-head span:nth-child(4) { background: var(--ink); } .bg-head span:nth-child(5) { background: var(--up); }
.bg-cells { display: grid; gap: 8px; margin-top: 8px; }
.bg-cell { aspect-ratio: 1; border-radius: var(--r-1); border: 1.5px solid var(--line); background: var(--surface-0); font: 800 20px/1 var(--font-h); font-variant-numeric: tabular-nums; cursor: pointer; color: var(--ink); animation: pop .4s var(--spring) both; animation-delay: var(--d); transition: background .15s, color .15s, transform .2s var(--spring); }
.bg-cell:hover:not(:disabled) { transform: scale(1.05); }
.bg-cell.is-on { background: var(--color-brand); border-color: var(--color-brand); color: #fff; border-radius: 50%; }
.bg-cell.free { background: var(--color-gold); border-color: var(--color-gold); color: var(--ink); cursor: default; }

/* ---------- copy block ---------- */
.copy-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.copy-secs { display: grid; gap: 36px; }
.copy-sec h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.03em; margin-bottom: 12px; }
.copy-faq { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 12px; }
.copy-faq .acc-q { font-size: 17px; }

/* ---------- sports ---------- */
.sport-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.sport-card { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px; border-radius: var(--r-2); background: var(--surface-1); border: 1px solid var(--line); box-shadow: var(--sh-1); text-decoration: none; transition: transform .25s var(--spring), box-shadow .25s, border-color .2s; }
.sport-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
.sport-ic { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-50); color: var(--gold-ink); transition: transform .3s var(--spring); }
.sport-card:hover .sport-ic { transform: rotate(-10deg) scale(1.08); }
.sport-name { font: 700 16px/1.2 var(--font-h); }
.sport-meta { font-size: 13px; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.sport-meta .live { height: 20px; font-size: 10px; }
.sport-arr { position: absolute; right: 12px; top: 12px; width: 16px; height: 16px; color: var(--ink-2); opacity: 0; transition: opacity .2s, transform .2s var(--spring); }
.sport-card:hover .sport-arr { opacity: 1; transform: translate(2px, -2px); }
.book { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.book-main { min-width: 0; }
.book-h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.03em; margin: 40px 0 16px; }
.book .matches + .tlink, .matches .tlink { margin-top: 6px; }
.sport-switch { margin-bottom: 18px; }
.toggle--inline { border: 0; padding: 0; grid-template-columns: 44px auto; align-items: center; }

/* ---------- bet slip ---------- */
.slip { position: sticky; top: calc(var(--header-h) + 16px); padding: 18px; display: grid; gap: 14px; }
.slip-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.slip-h h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; }
.slip-n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px; background: var(--ink); color: #fff; font: 700 13px/1 var(--font-b); }
.slip-empty { color: var(--ink-2); font-size: 14px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-2); text-align: center; }
.slip-list { list-style: none; display: grid; gap: 8px; max-height: 300px; overflow-y: auto; }
.slip-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 8px; align-items: center; padding: 10px 10px 10px 12px; border-radius: var(--r-1); background: var(--surface-2); animation: rowIn .35s var(--spring); }
.slip-item small { display: block; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slip-item b { display: block; font-size: 14px; line-height: 1.3; }
.slip-odd { font: 800 16px/1 var(--font-h); }
.slip-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--surface-1); cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink-2); }
.slip-x:hover { color: var(--color-cta); }
.slip-foot { display: grid; gap: 10px; }
.slip-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.choice-sm { min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-1); font: 600 13px/1 var(--font-b); cursor: pointer; }
.choice-sm:hover { border-color: var(--ink); }
.slip-ret { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.slip-ret b { font: 800 20px/1 var(--font-h); font-variant-numeric: tabular-nums; }
.slip-note, .slip-rg { font-size: 12px; color: var(--ink-2); }
.slip-rg { display: flex; align-items: center; gap: 8px; }
.slip-rg .badge18 { color: var(--color-cta); }
.slip-fab { display: none; }

/* ---------- event page ---------- */
.ev-hero { position: relative; isolation: isolate; color: #fff; padding: 28px 0 calc(var(--cut) * .6 + 40px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) * .6), 0 100%); overflow: hidden; }
.ev-bg { position: absolute; inset: 0; z-index: -2; }
.ev-bg picture { position: absolute; inset: 0; }
.ev-bg img { width: 100%; height: 100%; object-fit: cover; }
.ev-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,33,47,.86), rgba(23,33,47,.78)); }
.ev-hero .crumbs, .ev-hero .crumbs a { color: rgba(255,255,255,.75); }
.ev-hero .crumbs [aria-current] { color: #fff; }
.ev-top { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 18px; }
.ev-top .tag svg.icon { width: 14px; height: 14px; }
.ev-title { font-size: var(--fs-h1); letter-spacing: -.04em; }
.ev-sub { margin-top: 10px; color: rgba(255,255,255,.8); }
.board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 4vw, 56px); align-items: center; padding: 8px 0 4px; }
.board-team { display: grid; justify-items: center; gap: 12px; text-align: center; }
.board-team b { font: 800 clamp(20px, 2.6vw, 34px)/1.1 var(--font-h); letter-spacing: -.03em; text-wrap: balance; }
.crest { display: grid; place-items: center; width: clamp(56px, 6vw, 84px); height: clamp(56px, 6vw, 84px); border-radius: 50%; background: var(--color-brand); color: #fff; font: 800 clamp(22px, 2.6vw, 34px)/1 var(--font-h); box-shadow: 0 0 0 6px rgba(255,255,255,.08); }
.crest--b { background: var(--color-trust); border-radius: 18px; }
.board-mid { display: grid; justify-items: center; gap: 8px; }
.board-score { display: flex; gap: 14px; align-items: center; font: 800 clamp(48px, 6vw, 80px)/1 var(--font-h); }
.board-score span { min-width: 1.1ch; text-align: center; background: rgba(255,255,255,.1); border-radius: var(--r-2); padding: 6px 14px; }
.board-score i { font-style: normal; opacity: .5; }
.board-clock { padding: 6px 14px; border-radius: 99px; background: var(--color-brand); font-weight: 700; font-size: 14px; }
.board-time { font: 800 clamp(36px, 4.4vw, 56px)/1 var(--font-h); letter-spacing: -.03em; }
.board-date { color: rgba(255,255,255,.8); text-transform: capitalize; }
.cd--sm { margin-top: 6px; grid-template-columns: repeat(4, 56px); }
.cd--sm div { background: rgba(255,255,255,.1); }
.cd--sm b { font-size: 20px; color: #fff; }
.cd--sm span { color: rgba(255,255,255,.7); }
.ev-main-odds { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 26px; max-width: 760px; margin-inline: auto; }
.ev-main-odds .odd { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); min-height: 56px; }
.ev-main-odds .odd small, .ev-main-odds .odd b { color: #fff; }
.ev-main-odds .odd:hover { background: rgba(255,255,255,.18); }
.ev-main-odds .odd.is-picked { background: #fff; }
.ev-main-odds .odd.is-picked small, .ev-main-odds .odd.is-picked b { color: var(--ink); }
.ev-body { padding-top: 24px; }
.mk-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mk-tools .tabs { margin: 0; flex: 1 1 auto; min-width: 0; }
.mk-tools-r { display: flex; gap: 10px; align-items: center; }
.mk-search .input { min-height: 46px; }
.mk-live { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
.markets { border-top: 0; display: grid; gap: 10px; }
.mkt { border: 1px solid var(--line) !important; border-radius: var(--r-2); background: var(--surface-1); box-shadow: var(--sh-1); padding: 0 16px; }
.mk-h { font-size: inherit; }
.mkt .acc-q { padding: 14px 0; font-size: 17px; }
.mk-n { font-style: normal; font: 600 12px/1 var(--font-b); color: var(--ink-2); background: var(--surface-2); padding: 3px 8px; border-radius: 99px; margin-left: 6px; vertical-align: 2px; }
.mk-grid { display: grid; grid-template-columns: repeat(var(--c, 2), minmax(0, 1fr)); gap: 8px; padding-bottom: 16px; }
.mk-grid .odd { min-height: 52px; }
.ev-info { margin-top: 32px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .book { grid-template-columns: minmax(0, 1fr); }
  .slip { position: relative; top: 0; }
  .slip-fab { display: inline-flex; position: fixed; right: 16px; bottom: 90px; z-index: 65; align-items: center; gap: 6px; height: 52px; padding: 0 18px; border-radius: 99px; border: 0; background: var(--ink); color: #fff; font: 700 16px/1 var(--font-b); box-shadow: var(--sh-3); cursor: pointer; animation: pop .4s var(--spring); }
  .slip-fab[hidden] { display: none; }
  .cat-tools { grid-template-columns: minmax(0, 1fr); }
  .copy-grid { grid-template-columns: minmax(0, 1fr); }
  .copy-faq { position: relative; top: 0; }
}
@media (max-width: 900px) {
  .lot-grid, .res-layout, .widget { grid-template-columns: minmax(0, 1fr); }
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1100px) { .slip-fab { bottom: 24px; } }
@media (max-width: 760px) {
  .picker-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .kn-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 12px; }
  .picker-actions [data-buy] { margin-left: 0; width: 100%; }
  .shelf--feat { grid-auto-columns: 88%; }
  .feat-card { grid-template-columns: 110px minmax(0, 1fr); }
  .board { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; }
  .board-team b { font-size: 16px; }
  .board-score { font-size: 40px; gap: 6px; }
  .board-score span { padding: 4px 8px; }
  .cd--sm { grid-template-columns: repeat(4, 46px); gap: 4px; }
  .mk-grid { grid-template-columns: repeat(min(var(--c, 2), 2), minmax(0, 1fr)); }
  .mk-tools-r { width: 100%; }
  .mk-search { flex: 1; }
  .hero-stats .stat { padding: 12px; }
  .res-hist li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
/* catalogue tools: search + sort on the first row, filter chips on their own row */
.cat-tools { grid-template-columns: minmax(220px, 380px) 1fr auto; }
.cat-tools > .tabs { grid-column: 1 / -1; grid-row: 2; }
.cat-tools > .cat-sort { grid-column: 3; grid-row: 1; }
@media (max-width: 1100px) { .cat-tools { grid-template-columns: minmax(0, 1fr) auto; } .cat-tools > .cat-sort { grid-column: 2; } }
@media (max-width: 520px) { .cat-tools { grid-template-columns: minmax(0, 1fr); } .cat-tools > .cat-sort { grid-column: 1; grid-row: 3; } }
@media (max-width: 389px) {
  .hero-stats { gap: 8px; }
  .hero-stats .stat { padding: 10px; }
  .hero-stats .stat span { font-size: 12px; overflow-wrap: anywhere; }
  .board-team b { font-size: 14px; overflow-wrap: anywhere; }
  .board { gap: 6px; }
}
.board-team { min-width: 0; }
.board-team b { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 480px) {
  .board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }
  .board-mid { grid-column: 1 / -1; grid-row: 2; }
  .board-team b { font-size: 16px; }
}
.res-block-h .tag { white-space: normal; height: auto; min-height: 26px; padding: 5px 10px; line-height: 1.3; }