:root{
  --ink:#0E1419;
  --surface:#161E25;
  --surface-raised:#1E2731;
  --border:#2A343D;
  --text:#ECF1F4;
  --muted:#8C99A4;
  --muted-2:#5F6B75;
  --win:#3FC48C;
  --stake:#E2536A;
  --accent:#E8843A;
  --font-display:'Bricolage Grotesque', 'Archivo', sans-serif;
  --font-body:'Archivo', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html,body{ height:100%; }
/* phones: the page can never be pinched out past its own width (minimum-scale=1 in the viewport meta), nothing may lay out
   sideways (overflow-x:clip clips without turning html/body into scroll containers, so the sticky header keeps working), and the
   canvas behind the page is the site's own ink — no pale edge can ever show around it (owner 2026-09-23) */
html{ background:var(--ink, #0d0f14); overflow-x:clip; overscroll-behavior-x:none; } body{ overflow-x:clip; }
body{
  margin:0; background:var(--ink); color:var(--text); font-family:var(--font-body); line-height:1.45;
  display:flex; flex-direction:column; min-height:100%;
}
h1,h2,h3,.brand{ font-family:var(--font-display); text-wrap:balance; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:12px clamp(16px,4vw,32px); background:rgba(14,20,25,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:9px; font-size:21px; font-weight:700; color:var(--text); min-height:36px; }
.brand img{ height:34px; max-width:170px; width:auto; object-fit:contain; display:block; }
.brand.has-logo .ring{ display:none; }
.brand.no-name .brand-name{ display:none; }
.brand-name{ white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:760px){ .brand img{ height:28px; max-width:140px; } .brand{ font-size:18px; } .brand-name{ max-width:150px; } }
.brand .ring{ width:24px; height:24px; border-radius:50%; border:3px solid var(--accent); border-top-color:transparent; transform:rotate(45deg); }
nav.primary{ display:flex; gap:2px; font-size:14px; font-weight:600; }
nav.primary button{ background:transparent; border:none; color:var(--muted); padding:9px 13px; border-radius:8px; font:inherit; font-weight:600; }
nav.primary button.active{ color:var(--text); background:var(--surface); }
nav.primary button:hover:not(.active){ color:var(--text); }
.header-right{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.wallet-chip{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); padding:7px 12px; border-radius:20px; font-size:13px; color:var(--muted); }
.btn{ border-radius:8px; padding:9px 16px; font-size:13.5px; font-weight:600; border:1px solid var(--border); background:transparent; color:var(--text); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#1a1206; }
.btn:hover{ border-color:var(--accent); }

/* ---------- social icons (header + footer) ---------- */
.social-row{ display:flex; gap:8px; }
.social-link{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--surface); border:1px solid var(--border); color:var(--muted); transition:.15s; }
.social-link:hover{ color:var(--text); border-color:var(--accent); }

/* ---------- language switcher ---------- */
.lang-switch{ position:relative; }
#lang-trigger{ display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:7px 10px; color:var(--text); font-size:12.5px; font-weight:600; }
#lang-trigger .chev{ opacity:.6; transform:rotate(-90deg); }
.lang-panel{
  list-style:none; margin:0; padding:6px; position:absolute; top:calc(100% + 8px); inset-inline-start:0; min-width:150px;
  background:var(--surface-raised); border:1px solid var(--border); border-radius:12px; box-shadow:0 14px 32px -10px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:60;
}
.lang-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.lang-panel li{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--text); }
.lang-panel li:hover{ background:var(--surface); }
.lang-panel li svg{ border-radius:2px; flex:none; }
.lang-panel li[aria-selected="true"]{ color:var(--accent); }

main{ flex:1; }
.view{ display:none; }
.view.active{ display:block; animation:enter .35s ease both; }
@keyframes enter{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }

.wrap{ max-width:1360px; margin:0 auto; padding:22px clamp(16px,4vw,32px) 60px; }

/* ---------- banner carousel ---------- */
.banner-carousel{ position:relative; border-radius:16px; overflow:hidden; margin-bottom:30px; aspect-ratio:21/6; border:1px solid var(--border); background:var(--surface); }
.banner-track{ display:flex; height:100%; transition:transform .5s cubic-bezier(.65,0,.35,1); touch-action:pan-y; cursor:grab; }
.banner-track.dragging{ transition:none; cursor:grabbing; } .banner-track.dragging .banner-slide{ pointer-events:none; }
.banner-slide img, .banner-slide svg, .banner-slide picture{ -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
.banner-slide{
  flex:0 0 100%; height:100%; position:relative; display:block; color:var(--text);
  background:radial-gradient(120% 160% at 88% 8%, color-mix(in srgb, var(--banner-from) 32%, transparent), transparent 55%),
             linear-gradient(135deg, var(--surface-raised), var(--surface));
}
.banner-slide .art{ position:absolute; inset:0; color:var(--banner-from); }
.banner-slide .caption{ position:absolute; inset-inline-start:0; bottom:0; padding:clamp(18px,4vw,40px); max-width:62%; display:flex; flex-direction:column; gap:6px; }
.banner-slide .eyebrow{ text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:700; color:var(--banner-from); }
.banner-slide .btitle{ font-family:var(--font-display); font-size:clamp(18px,3vw,28px); font-weight:700; }
.banner-slide .bbody{ font-size:13px; color:var(--muted); display:none; }
@media (min-width:640px){ .banner-slide .bbody{ display:block; } }
.banner-slide .bcta{ margin-top:6px; align-self:flex-start; }
.banner-arrow{
  position:absolute; top:50%; translate:0 -50%; width:34px; height:34px; border-radius:50%; z-index:5;
  background:rgba(10,14,18,.55); border:1px solid var(--border); color:#fff; display:flex; align-items:center; justify-content:center;
}
.banner-arrow.prev{ inset-inline-start:12px; }
.banner-arrow.next{ inset-inline-end:12px; transform:scaleX(-1); } /* the -50% lift is the shared `translate`; a second translateY here pushed this arrow higher than its twin */
[dir="rtl"] .banner-arrow.prev svg{ transform:scaleX(-1); }
[dir="rtl"] .banner-arrow.next svg{ transform:scaleX(1); }
.banner-dots{ position:absolute; bottom:14px; inset-inline-start:50%; translate:-50% 0; display:flex; gap:6px; z-index:5; }
.banner-dots button{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); border:none; padding:0; }
.banner-dots button.active{ background:#fff; width:18px; border-radius:4px; transition:width .2s; }
/* Phones (owner 2026-09-23, third choice: "whole picture, small text on it"): the card keeps the desktop proportions so the
 * WIDE picture is shown ENTIRE; a one-row caption (short title + small button) sits on its lower edge over a soft gradient;
 * small arrows on both sides. Id selectors on purpose: the templates' own phone rules (padding, alignment, colours) must not
 * win here — one layout for all four. */
@media (max-width:640px){
  .banner-carousel{ aspect-ratio:21/6; border-radius:14px; }
  #banner-carousel .banner-slide.custom img.main{ object-fit:cover; object-position:center; }
  #banner-carousel .banner-slide.custom:has(.caption) picture::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,0) 68%), linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
  /* the caption is a small column on the left (title with the offer, the detail line, a small button under both); the subject on the right stays clear */
  #banner-carousel .banner-slide .caption{ position:absolute; inset:0 auto 0 0; max-width:68%; top:0; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; padding:6px 10px 12px 42px; z-index:2; }
  #banner-carousel .banner-slide .eyebrow{ display:none; }
  #banner-carousel .banner-slide .btitle{ font-size:14px; line-height:1.15; font-weight:700; color:#fff; letter-spacing:0; text-shadow:0 1px 8px rgba(0,0,0,.8); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  #banner-carousel .banner-slide .bbody{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; font-size:11px; line-height:1.25; color:rgba(255,255,255,.88); text-shadow:0 1px 6px rgba(0,0,0,.8); max-width:100%; }
  #banner-carousel .banner-slide .bcta{ margin:3px 0 0; align-self:flex-start; padding:4px 10px; font-size:10.5px; line-height:1.2; border-radius:999px; white-space:nowrap; min-height:0; height:auto; }
  #banner-carousel .banner-arrow{ display:flex; width:28px; height:28px; top:50%; translate:0 -50%; /* the caption starts after the left arrow */ background:rgba(8,10,14,.5); border:1px solid rgba(255,255,255,.22); color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:6; }
  #banner-carousel .banner-arrow svg{ width:12px; height:12px; }
  #banner-carousel .banner-arrow.prev{ inset-inline-start:8px; inset-inline-end:auto; }
  #banner-carousel .banner-arrow.next{ inset-inline-end:8px; inset-inline-start:auto; }
  #banner-carousel .banner-dots{ bottom:5px; gap:4px; inset-inline-start:50%; translate:-50% 0; }
  #banner-carousel .banner-dots button{ width:5px; height:5px; }
  #banner-carousel .banner-dots button.active{ width:12px; height:5px; }
}

/* ---------- quick nav ---------- */
.quick-nav{ display:flex; gap:10px; overflow-x:auto; margin-bottom:32px; padding-bottom:2px; }
.quick-nav-item{ display:flex; flex-direction:column; align-items:center; gap:7px; flex:none; width:84px; padding:14px 8px; background:var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--muted); font-size:11.5px; font-weight:600; text-align:center; transition:border-color .15s,transform .15s,color .15s; }
.quick-nav-item:hover{ border-color:var(--accent); color:var(--text); transform:translateY(-2px); }
.qn-icon{ position:relative; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(232,132,58,.14); color:var(--accent); transition:background .15s,color .15s; }
.qn-icon svg{ width:22px; height:22px; }
.quick-nav-item:hover .qn-icon{ background:var(--accent); color:#1a1206; }
.live-dot{ position:absolute; top:4px; inset-inline-end:4px; width:7px; height:7px; border-radius:50%; background:var(--stake); box-shadow:0 0 0 2px var(--surface); animation:pulse 1.6s infinite; }
@keyframes pulse{ 50%{ opacity:.35; } }

.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.section-head h2{ font-size:18px; margin:0; }
.section-head .see-all{ font-size:12.5px; color:var(--muted); font-weight:600; }

/* ---------- filters ---------- */
.filter-bar{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.chip-row, .provider-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.chip{ flex:none; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:8px 16px; font-size:13px; font-weight:600; color:var(--muted); transition:background .15s,color .15s,border-color .15s; }
.chip.active{ background:var(--accent); border-color:var(--accent); color:#1a1206; }
.chip .n{ opacity:.65; font-size:11px; margin-inline-start:4px; }
.chip{ display:inline-flex; align-items:center; gap:6px; }
.chip svg{ width:14px; height:14px; flex:none; opacity:.85; }
.chip.chip-label svg{ color:var(--stake); }
.chip.chip-label[data-label="new"] svg{ color:var(--accent); }
.chip.active svg{ color:inherit; opacity:1; }
.prov-chip{ flex:none; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:7px 12px; font-size:12.5px; font-weight:600; color:var(--muted); transition:border-color .15s,background .15s; }
.prov-chip img{ height:16px; width:auto; max-width:54px; object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.75; transition:.15s; }
.prov-chip.active, .prov-chip:hover{ border-color:var(--accent); color:var(--text); }
.prov-chip.active img, .prov-chip:hover img{ filter:none; opacity:1; }
.search-box{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:9px 12px; max-width:320px; }
.search-box input{ background:transparent; border:none; outline:none; color:var(--text); font:inherit; width:100%; }
.search-box svg{ flex:none; opacity:.5; }

/* ---------- game grid ---------- */
/* ---------- The house clock: the visitor's own time to the second, date and time zone (js/clock.js).
   Desktop: a chip in the header. Phones: a slim bar under the header that scrolls away with the page. ---------- */
.site-clock, .clock-bar{ font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; color:var(--muted); }
.site-clock{ display:inline-flex; align-items:center; gap:9px; height:34px; padding:0 11px; border-radius:9px; border:1px solid var(--border); background:var(--surface); font-size:12px; font-weight:600; line-height:1; }
.ck-time{ display:inline-flex; align-items:baseline; font-family:var(--font-mono); font-size:13.5px; font-weight:600; color:var(--text); letter-spacing:.02em; min-width:8ch; }
.ck-ss{ color:var(--accent); }
.ck-date{ order:2; } .ck-tz{ order:3; font-family:var(--font-mono); font-size:10.5px; font-weight:500; opacity:.75; letter-spacing:.04em; }
.site-clock .ck-date{ padding-inline-start:9px; border-inline-start:1px solid var(--border); } .site-clock .ck-date-long{ display:none; }
.clock-bar{ display:none; }
/* js/clock.js measures the header: the chip drops its date (.ck-compact), then hands over to the bar (html.clock-bar-on) — it never wraps the header */
.site-clock.ck-compact .ck-date, .site-clock.ck-compact .ck-tz{ display:none; } .site-clock.ck-compact{ padding:0 9px; }
html.clock-bar-on .site-clock{ display:none; }
html.clock-bar-on .clock-bar{ display:flex; align-items:center; justify-content:center; gap:10px; padding:6px clamp(16px,4vw,32px); font-size:11.5px; font-weight:600; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--surface) 70%, transparent); }
html.clock-bar-on .clock-bar .ck-date{ order:0; } html.clock-bar-on .clock-bar .ck-date-short{ display:none; } html.clock-bar-on .clock-bar .ck-time{ order:2; }
html.clock-bar-on body:has(#view-game.active) .clock-bar, html.clock-bar-on body:has(#view-sport.active) .clock-bar, html.clock-bar-on body:has(#view-livesport.active) .clock-bar{ display:none; }
@media (max-width:760px){
  .site-clock{ display:none; }
  .clock-bar{ display:flex; align-items:center; gap:8px; padding:7px 16px; font-size:11.5px; font-weight:600; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--surface) 70%, transparent); }
  .clock-bar .ck-date{ order:0; margin-inline-end:auto; } .clock-bar .ck-date-short{ display:none; } .clock-bar .ck-time{ order:2; font-size:12.5px; } .clock-bar .ck-tz{ order:3; }
  body:has(#view-game.active) .clock-bar, body:has(#view-sport.active) .clock-bar, body:has(#view-livesport.active) .clock-bar{ display:none; }
}
@media (max-width:380px){ .clock-bar .ck-date-long{ display:none; } .clock-bar .ck-date-short{ display:inline; } }

/* ---------- Home rows: many rows of games, each scrolls sideways and has its "See all" ---------- */
.home-rails{ display:flex; flex-direction:column; gap:30px; margin-top:6px; min-width:0; }
.home-rail{ min-width:0; }
.rail-head{ align-items:center; gap:11px; justify-content:flex-start; }
.rail-head h2{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-ic{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--accent); background:color-mix(in srgb, var(--accent) 13%, transparent); }
.rail-ic-svg{ width:19px; height:19px; fill:currentColor; display:block; }
.rail-logo{ flex:none; width:64px; height:34px; border-radius:10px; display:grid; place-items:center; padding:5px 8px; background:var(--surface); border:1px solid var(--border); }
.rail-logo img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.rail-count{ flex:none; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); padding:3px 8px; border-radius:99px; border:1px solid var(--border); font-variant-numeric:tabular-nums; }
html body .section-head .see-all.rail-all{ color:var(--accent); }
.section-head .see-all.rail-all{ margin-inline-start:auto; flex:none; background:none; border:0; padding:6px 0 6px 10px; cursor:pointer; color:var(--accent); font-family:inherit; white-space:nowrap; }
.section-head .see-all.rail-all::after{ content:'›'; display:inline-block; margin-inline-start:6px; transition:transform .15s ease; } [dir="rtl"] .section-head .see-all.rail-all::after{ content:'‹'; }
.section-head .see-all.rail-all:hover::after{ transform:translateX(3px); } [dir="rtl"] .section-head .see-all.rail-all:hover::after{ transform:translateX(-3px); }
.rail-wrap{ position:relative; }
.rail-track{ display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding:6px 2px 10px; margin:-6px -2px -10px; scroll-snap-type:x proximity; scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.rail-track::-webkit-scrollbar{ display:none; }
.rail-track > .game-card, .rail-track > .rail-rank, .rail-track > .skel-card{ flex:0 0 clamp(150px, 15.5vw, 210px); min-width:0; scroll-snap-align:start; }
.home-rail.k-table .rail-track > .game-card{ flex-basis:clamp(210px, 21vw, 290px); }
.home-rail.k-table .game-card .art{ aspect-ratio:16/10; }
.home-rail.k-ranked .rail-track > .rail-rank{ flex-basis:clamp(190px, 19vw, 250px); position:relative; padding-inline-start:clamp(34px, 3.4vw, 46px); }
.rail-rank .game-card{ width:100%; }
.rail-n{ position:absolute; inset-inline-start:0; bottom:34px; z-index:2; font-family:var(--font-display); font-weight:800; font-size:clamp(64px, 6.4vw, 88px); line-height:.8; letter-spacing:-.06em; color:var(--ink); -webkit-text-stroke:2px var(--accent); paint-order:stroke fill; pointer-events:none; font-variant-numeric:lining-nums; }
.home-rail.k-feature{ padding:18px 18px 16px; border-radius:16px; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface)); border:1px solid var(--border); }
.rail-arrow{ position:absolute; top:calc(50% - 28px); z-index:3; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--border); background:var(--surface-raised); color:var(--text); box-shadow:0 8px 20px -8px rgba(0,0,0,.6); opacity:0; transition:opacity .15s ease, border-color .15s ease; }
.rail-arrow[hidden]{ display:none; } .rail-arrow.prev{ inset-inline-start:-14px; } .rail-arrow.next{ inset-inline-end:-14px; } .rail-arrow.next svg{ transform:scaleX(-1); }
[dir="rtl"] .rail-arrow.prev svg{ transform:scaleX(-1); } [dir="rtl"] .rail-arrow.next svg{ transform:none; }
.rail-wrap:hover .rail-arrow, .rail-arrow:focus-visible{ opacity:1; } .rail-arrow:hover{ border-color:var(--accent); }
@media (hover:none), (max-width:760px){ .rail-arrow{ display:none !important; } }
.rail-skel-title{ display:inline-block; width:180px; height:20px; border-radius:6px; }
@media (max-width:560px){ .home-rails{ gap:24px; } .rail-track{ gap:10px; margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; } .rail-track > .game-card, .rail-track > .rail-rank, .rail-track > .skel-card{ flex-basis:43vw; } .home-rail.k-table .rail-track > .game-card{ flex-basis:62vw; } .home-rail.k-ranked .rail-track > .rail-rank{ flex-basis:54vw; }
  .rail-ic{ width:30px; height:30px; border-radius:9px; } .rail-count{ display:none; } .home-rail.k-feature{ margin-inline:-16px; border-radius:0; border-inline:0; padding:16px 16px 14px; } }
/* the theme of the lobby, as a chip that comes off */
.theme-row{ display:flex; } .theme-row[hidden]{ display:none; } .theme-chip .rail-ic-svg{ width:15px; height:15px; } .theme-chip .theme-x{ font-size:16px; line-height:1; opacity:.7; margin-inline-start:2px; }

.game-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; transition:opacity .15s ease; }
.game-grid.grid-swapping{ opacity:0; }
@media (max-width:480px){ .game-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; } }
@media (min-width:1600px){ .game-grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); } }
.game-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.game-card:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 10px 24px -12px rgba(0,0,0,.5); }
/* artwork: one 4:3 box for every card; whole image shown over a blurred copy of itself */
.game-card .art{ aspect-ratio:4/3; position:relative; background:var(--surface-raised); overflow:hidden; isolation:isolate; }
.game-card .art img{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .35s ease; }
.game-card .art .art-bg{ object-fit:cover; transform:scale(1.3); filter:blur(18px) saturate(1.25); opacity:0; z-index:0; }
.game-card .art .art-img{ object-fit:contain; z-index:1; image-rendering:auto; }
.game-card .art .art-img.snap{ object-fit:cover; }
.game-card .art .art-img.loaded{ opacity:1; }
.game-card .art .art-bg.loaded{ opacity:.9; }
.game-card .art::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.14), transparent 28%, transparent 72%, rgba(0,0,0,.18)); }
@media (max-width:600px){ .game-card .art .art-bg{ filter:blur(12px) saturate(1.2); } }
.game-card .art.img-failed::before{
  content:attr(data-fallback); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:42px; font-weight:700; color:var(--muted-2);
  background:linear-gradient(160deg, var(--surface-raised), var(--surface));
}
/* card badges: hot / new / popular from platform-wide play, jackpot from the catalogue */
.game-card .tags{ position:absolute; top:7px; inset-inline:7px; display:flex; justify-content:space-between; align-items:flex-start; gap:4px; z-index:3; pointer-events:none; }
.tag{ display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:800; padding:3px 6px; border-radius:5px; text-transform:uppercase; letter-spacing:.04em; line-height:1; white-space:nowrap; }
.tag svg{ width:10px; height:10px; flex:none; }
.tag-hot{ background:var(--stake); color:#fff; }
.tag-new{ background:var(--accent); color:#1a1206; }
.tag-popular{ background:rgba(14,20,25,.72); color:var(--text); border:1px solid var(--border); backdrop-filter:blur(4px); }
.tag-jackpot{ background:var(--win); color:#08241a; margin-inline-start:auto; }
.game-card .play{ position:absolute; z-index:3; inset:auto 8px 8px 8px; background:var(--accent); color:#1a1206; text-align:center; padding:8px; border-radius:8px; font-weight:700; font-size:12px; opacity:0; transform:translateY(6px); transition:.15s; }
.game-card:hover .play{ opacity:1; transform:none; }
.game-info{ padding:9px 11px 11px; }
.game-info .name{ font-size:12.5px; font-weight:700; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-info .prov{ font-size:11px; color:var(--muted-2); }

.skeleton{ background:linear-gradient(100deg, var(--surface) 30%, var(--surface-raised) 50%, var(--surface) 70%); background-size:200% 100%; animation:shimmer 1.3s infinite; }
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.skel-card{ aspect-ratio:1/1; border-radius:12px; }
.scroll-sentinel{ height:1px; }
.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); grid-column:1/-1; }

/* ---------- sport view ----------
   Tried making this container much taller than the viewport so our page
   scroll could carry straight through into the widget and out to our
   footer (avoiding a second, separate scrollbar inside the iframe).
   Reverted: Betby's widget appears to size its real UI relative to the
   iframe's own internal viewport height (vh units inside an iframe are
   relative to the iframe element's own height, not the browser window) —
   inflating the iframe to 2400px made it render completely blank at every
   scroll position, confirmed by direct testing. A working widget with its
   own scrollbar is better than a broken one, so this stays viewport-boxed
   until/unless Betby exposes a real height-reporting API (they currently
   send nothing via postMessage — also confirmed by testing). */
/* Sport / Live Sport take the whole viewport below our (measured) header —
   the betslip lives at the bottom of the widget and must never need a scroll.
   --header-h is set from header.site's real height in router.js. */
.sport-frame-wrap{ position:relative; height:calc(100vh - var(--header-h, 63px)); height:calc(100dvh - var(--header-h, 63px)); }
body.sport-fullscreen footer{ display:none; }
body.sport-fullscreen main{ overflow:hidden; }
.sport-frame-wrap iframe{ width:100%; height:100%; border:0; display:block; }
.frame-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--muted); background:var(--ink); font-size:13px; }
.sport-preview-catcher{ position:absolute; inset:0; z-index:5; pointer-events:none; }
/* Sits exactly over BetBy's betslip action zone (PLACE BET / quick bet), which
   is fixed at the bottom-right of the widget on desktop and a bottom bar on
   mobile — everything else in the iframe stays fully interactive. */
.sport-betslip-guard{ position:absolute; right:16px; bottom:16px; width:324px; height:114px; pointer-events:auto; cursor:pointer; }
[dir="rtl"] .sport-betslip-guard{ right:auto; left:16px; }
/* Classic layout: the betslip is a permanent full-height right column. The
   16px insets keep the iframe's own scrollbar strips (right edge, bottom edge)
   out of the guard so scrolling never triggers the login prompt. */
.sport-preview-catcher.layout-classic .sport-betslip-guard{ top:0; bottom:16px; height:auto; width:304px; }
[dir="rtl"] .sport-preview-catcher.layout-classic .sport-betslip-guard{ right:auto; left:16px; }
/* Phones: every BetBy layout collapses the betslip into a bottom bar. */
@media (max-width:760px){
  /* BetBy mobile: a 48px collapsed BETSLIP bar pinned to the iframe bottom (no
     scrollbar on touch, so no inset needed). Tapping it = wanting to bet. */
  .sport-betslip-guard, .sport-preview-catcher.layout-classic .sport-betslip-guard{ top:auto; bottom:0; left:0; right:0; width:auto; height:48px; }
}
.spinner{ width:28px; height:28px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:spin .8s linear infinite; }

/* Footer stays in normal flow below the widget (not hidden): once its own
   internal scroll reaches bottom, the browser's native scroll-chaining
   carries the same wheel/trackpad gesture on to our page automatically —
   confirmed working — smoothly revealing the real footer, no extra JS or
   custom scroll logic needed. What made this look broken before wasn't
   the footer's presence, it was a duplicate-iframe bug (fixed separately)
   that doubled the page's real height. */
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:760px){
}

/* ---------- in-game bar (owner 2026-09-23): while a game is open the announcement strip gives way to the player's name and
   live balance — small, on the strip's own line on desktop; the top bar of the game screen on phones (back + fullscreen inside it). */
.game-bar{ display:none; align-items:center; justify-content:center; gap:10px; min-height:34px; padding:5px 12px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--surface) 70%, transparent); font-size:12.5px; color:var(--muted); }
body.game-open .game-bar{ display:flex; }
body.game-open .promo-strip{ display:none !important; }
.game-bar .gb-who{ display:inline-flex; align-items:baseline; gap:8px; min-width:0; }
.game-bar .gb-name{ font-weight:600; max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-bar .gb-sep{ opacity:.45; }
.game-bar .gb-balance{ font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; transition:color .25s; }
.game-bar .gb-balance.bump{ color:var(--accent); }
.game-bar .gb-btn{ display:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--border); background:color-mix(in srgb, var(--text) 8%, transparent); color:var(--text); align-items:center; justify-content:center; flex:none; }
[dir="rtl"] .game-bar .gb-back svg{ transform:scaleX(-1); } /* the chevron icon points back as drawn */

/* ---------- game view (replaces modal) ---------- */
.game-view-wrap{ padding-top:56px; }

/* Lives outside .view on purpose: any ancestor with an active CSS `animation`
   touching `transform` (our `.view.active{ animation:enter }`) becomes a
   containing block for position:fixed descendants, which would pin this
   button to the animated section instead of the real viewport. Keeping it
   as a body-level sibling avoids that trap entirely. */
.back-to-lobby{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  background:rgba(22,30,37,.9); backdrop-filter:blur(6px);
  border:1px solid var(--border); border-radius:50%; color:var(--text);
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 76px); inset-inline-start:clamp(16px,4vw,32px); z-index:45;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
}
.back-to-lobby[hidden]{ display:none; }
.back-to-lobby .chevron{ transition:transform .15s; }
[dir="rtl"] .back-to-lobby .chevron{ transform:scaleX(-1); }
.back-to-lobby span{ display:none; }
.game-title{ font-size:20px; margin:0 0 14px; }
.game-frame-wrap{
  position:relative; height:min(80vh,780px); height:min(80dvh,780px);
  border-radius:14px; overflow:hidden; border:1px solid var(--border); background:var(--surface); margin-bottom:34px;
}
.game-frame-wrap iframe{ width:100%; height:100%; border:0; touch-action:manipulation; }

/* Mobile game mode: whenever a game is open on a phone-sized screen, in
   either orientation, it takes the whole screen (edge to edge, up to the
   browser's own url bar — not the hidden-chrome Fullscreen API, just a
   full-height layout) with only the floating back button and expand
   button on top. Browsing (related games etc.) happens after backing out,
   the same way a native casino app's game screen works. Two separate media
   conditions because a landscape phone is *wide* (fails max-width) while a
   portrait phone is *narrow* (fails max-height) — no single query catches
   both, this pair reliably does. */
@media (max-width:760px), (orientation:landscape) and (max-height:520px){
  body:has(#view-game.active) header.site, body:has(#view-game.active) footer, body:has(#view-game.active) .clock-bar{ display:none; }
  .game-view-wrap{ padding:0; }
  .game-title, .game-view-wrap .section-head, .game-view-wrap #related-grid{ display:none; }
  /* the in-game bar is the top bar of the screen: 38 px + the notch; the frame takes the rest */
  body.game-open .game-bar{ min-height:38px; padding:calc(env(safe-area-inset-top,0px) + 4px) 8px 4px; justify-content:space-between; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); background:var(--bg); }
  body.game-open .game-bar .gb-btn{ display:flex; }
  .game-frame-wrap{
    height:calc(100vh - 38px - env(safe-area-inset-top,0px)); height:calc(100dvh - 38px - env(safe-area-inset-top,0px));
    margin:0; border-radius:0; border:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .back-to-lobby, .fullscreen-toggle{ display:none !important; } /* both live in the bar on phones (the desktop rules for these two come later in the file) */
}
/* Desktop-only games (no phone version at the provider, ~245 titles): on a phone the game is rendered at a fixed desktop size
   and scaled down to fit the screen, so the whole game — reels AND the bet panel — is on screen; portrait gets a hint to turn. */
.game-frame-wrap.desktop-only iframe{ position:absolute; top:50%; left:50%; width:1280px; height:720px; transform:translate(-50%,-50%) scale(var(--gs,1)); transform-origin:center center; }
.rotate-hint{ position:absolute; left:50%; top:calc(50% - 60px); translate:-50% 0; z-index:12; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(8,10,14,.82); color:#fff; font-size:12.5px; white-space:nowrap; border:1px solid rgba(255,255,255,.18); animation:rotateHint 4.5s ease forwards; pointer-events:none; }
.rotate-hint[hidden]{ display:none; }
@keyframes rotateHint{ 0%{ opacity:0; translate:-50% 8px; } 12%{ opacity:1; translate:-50% 0; } 82%{ opacity:1; } 100%{ opacity:0; } }
@media (orientation:landscape){ .rotate-hint{ display:none; } }

.fullscreen-toggle{
  position:absolute; top:10px; inset-inline-end:10px; z-index:10; width:34px; height:34px; border-radius:8px;
  background:rgba(10,14,18,.6); border:1px solid var(--border); color:#fff; display:flex; align-items:center; justify-content:center;
}

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--border); padding:26px clamp(16px,4vw,32px) 40px; }
.footer-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.pay-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pay-tag{ font-size:11.5px; border:1px solid var(--border); border-radius:6px; padding:5px 10px; color:var(--muted); }
.pay-logo{ object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.8; }
.pay-chip{ display:inline-flex; align-items:center; justify-content:center; min-width:72px; height:32px; padding:3px 6px; border-radius:7px; background:#fff; border:1px solid var(--border); }
.pay-chip.brand .pay-logo{ filter:none; opacity:1; display:block; }
.footer-legal{ display:flex; gap:16px; font-size:12px; color:var(--muted); }
.footer-legal a:hover{ color:var(--text); }
.footer-brand{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--border); }
.fb-brand{ display:inline-flex; align-items:center; }
.fb-logo{ display:block; max-height:28px; width:auto; max-width:160px; object-fit:contain; }
.fb-name{ font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--text); }
.fb-copy{ font-size:12px; color:var(--muted-2); }
/* "Made with ♥ by mriv" — the signature at the very bottom: our frog under a little rain of coins, a beating heart */
.mriv-sig{ width:100%; display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 0 8px; margin-top:10px; border-top:1px solid var(--border); }
.mriv-sig-frog{ width:78px; height:78px; overflow:visible; }
.mriv-sig-text{ font-size:12.5px; color:var(--muted); letter-spacing:.02em; display:inline-flex; align-items:center; gap:5px; }
.mriv-sig-text a{ color:var(--text); font-weight:700; text-decoration:none; } .mriv-sig-text a:hover{ text-decoration:underline; }
.mriv-sig-heart{ width:13px; height:13px; fill:#e0475b; animation:sigBeat 1.6s ease-in-out infinite; }
.sig-frog{ animation:sigBob 2.8s ease-in-out infinite alternate; } .sig-blink{ animation:sigBlink 5.2s ease-in-out infinite; } .sig-held{ transform-origin:60px 98px; animation:sigFlip 2.4s ease-in-out infinite; }
.sig-note{ transform:translate(var(--x), -14px); opacity:0; animation:sigRain 5.4s linear infinite; animation-delay:var(--d); } .sig-flutter{ transform:rotate(var(--r)); animation:sigFlutter 1.7s ease-in-out infinite alternate; animation-delay:var(--d); }
.sig-coin{ transform:translate(var(--x), -14px); opacity:0; animation:sigRainCoin 9s linear infinite; animation-delay:var(--d); } .sig-flip{ animation:sigFlip 1.1s ease-in-out infinite; animation-delay:var(--d); }
@keyframes sigRain{ 0%{ transform:translate(var(--x), -14px); opacity:0; } 8%{ opacity:1; } 90%{ opacity:.9; } 100%{ transform:translate(var(--x), 124px); opacity:0; } }
@keyframes sigRainCoin{ 0%{ transform:translate(var(--x), -14px); opacity:0; } 4%{ opacity:1; } 36%{ opacity:.9; } 40%, 100%{ transform:translate(var(--x), 124px); opacity:0; } } /* the odd coin: falls once, then rests most of the cycle */
@keyframes sigFlutter{ from{ transform:rotate(calc(var(--r) - 16deg)) scaleX(1); } to{ transform:rotate(calc(var(--r) + 16deg)) scaleX(.55); } }
@keyframes sigFlip{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(.22); } }
@keyframes sigBob{ from{ transform:translateY(-2px) rotate(-1deg); } to{ transform:translateY(2px) rotate(1deg); } }
@keyframes sigBlink{ 0%,90%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(.08); } }
@keyframes sigBeat{ 0%,100%{ transform:scale(1); } 30%{ transform:scale(1.22); } 45%{ transform:scale(1); } 60%{ transform:scale(1.14); } }

.toast{ position:fixed; bottom:20px; inset-inline-start:50%; transform:translateX(-50%) translateY(20px); background:var(--surface-raised); border:1px solid var(--border); padding:11px 18px; border-radius:10px; font-size:13px; opacity:0; pointer-events:none; transition:.25s; z-index:650; }
[dir="rtl"] .toast{ transform:translateX(50%) translateY(20px); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
[dir="rtl"] .toast.show{ transform:translateX(50%) translateY(0); }

::view-transition-old(root), ::view-transition-new(root){ animation-duration:.32s; }

@media (max-width:760px){
  header.site{ gap:10px; }
  nav.primary{ order:3; width:100%; overflow-x:auto; padding-bottom:2px; }
  nav.primary button{ flex:none; }
  #header-social{ display:none; }
  .header-right{ gap:8px; }
  .wallet-chip{ display:none; }
}

/* ---------- player auth modal ---------- */
.auth-overlay{ position:fixed; inset:0; background:rgba(6,9,12,.72); display:flex; align-items:center; justify-content:center; z-index:300; }
.auth-overlay[hidden]{ display:none; }
.auth-modal{ position:relative; width:340px; max-width:calc(100vw - 32px); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px 22px 22px; }
.auth-close{ position:absolute; top:12px; inset-inline-end:14px; background:none; border:none; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; }
.auth-close:hover{ color:var(--text); }
/* legal popup (Terms / Privacy) — reuses the auth modal shell, wider and scrollable */
body.modal-open{ overflow:hidden; }
.legal-modal{ width:760px; max-height:min(86vh, 900px); display:flex; flex-direction:column; padding:26px 4px 8px 26px; }
.legal-title{ margin:0 32px 12px 0; font-size:21px; }
.legal-body{ overflow-y:auto; padding:0 22px 18px 0; font-size:14px; line-height:1.65; color:var(--muted); overscroll-behavior:contain; }
.legal-body h1{ font-size:20px; margin:18px 0 8px; color:var(--text); } .legal-body h2{ font-size:16.5px; margin:20px 0 6px; color:var(--text); } .legal-body h3, .legal-body h4{ font-size:14.5px; margin:16px 0 4px; color:var(--text); }
.legal-body p, .legal-body li{ margin:0 0 10px; } .legal-body ul, .legal-body ol{ padding-inline-start:20px; } .legal-body a{ color:var(--accent); text-decoration:underline; }
.legal-body[dir="rtl"]{ text-align:right; }
.legal-loading{ height:120px; border-radius:10px; background:linear-gradient(100deg, var(--surface) 30%, var(--surface-raised) 50%, var(--surface) 70%); background-size:200% 100%; animation:shimmer 1.3s infinite; }
@media (max-width:600px){ .legal-modal{ max-height:92vh; padding:22px 2px 6px 18px; } .legal-title{ font-size:18px; } .legal-body{ padding-right:14px; } }
.auth-prompt{ background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); color:var(--text); font-size:13px; padding:9px 12px; border-radius:8px; margin-bottom:14px; }
.auth-prompt[hidden]{ display:none; }
.auth-tabs{ display:flex; gap:6px; margin-bottom:18px; }
/* "Continue with Telegram": the official mark on a quiet button, then "or" before the classic form */
.auth-tg{ margin:-6px 0 14px; }
.tg-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface-raised); color:var(--text); font:inherit; font-weight:700; cursor:pointer; transition:border-color .15s, transform .15s; }
.tg-btn:hover{ border-color:#2AABEE; transform:translateY(-1px); } .tg-btn[hidden]{ display:none; }
.tg-logo{ width:22px; height:22px; flex:none; }
.auth-tgok{ margin-top:10px; padding:9px 12px; border-radius:9px; background:rgba(42,171,238,.12); border:1px solid rgba(42,171,238,.35); font-size:13px; }
.auth-divider{ display:flex; align-items:center; gap:10px; margin-top:14px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--border); }
.auth-tab{ flex:1; background:none; border:1px solid var(--border); border-radius:8px; padding:9px; color:var(--muted); font-weight:600; font-size:13px; cursor:pointer; }
[hidden].auth-tab{ display:none; }
.auth-tab.active{ background:var(--accent); border-color:var(--accent); color:#1a1206; }
.auth-form{ display:flex; flex-direction:column; gap:12px; }
.auth-form[hidden]{ display:none; }
.auth-form label{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.auth-form input{ background:var(--ink); border:1px solid var(--border); border-radius:8px; padding:10px 11px; color:var(--text); font:inherit; font-size:14px; }
.auth-form input:focus{ outline:none; border-color:var(--accent); }
.auth-form button[type=submit]{ margin-top:4px; }
.auth-error{ color:var(--stake); font-size:12.5px; min-height:0; }
.cf-turnstile:empty{ display:none; }
.cf-turnstile{ min-height:65px; }
.auth-error:empty{ display:none; }

/* ---------- wallet chip (balance) ---------- */
.wallet-chip{ flex-direction:column; align-items:flex-end; gap:0; line-height:1.15; padding:5px 12px; }
.wallet-chip[hidden]{ display:none; }
.wallet-chip .wc-name{ font-size:11px; color:var(--muted); }
.wallet-chip .wc-balance{ font-size:13.5px; font-weight:700; color:var(--text); }
.wallet-chip:hover{ border-color:var(--accent); }
.wallet-deposit[hidden]{ display:none; }
.auth-hint{ text-transform:none; letter-spacing:0; font-size:11px; color:var(--muted-2); }
@media (max-width:760px){
  .wallet-chip{ display:flex; }
  .wallet-deposit{ padding:8px 11px; font-size:12.5px; }
}

/* ---------- uploaded banners ---------- */
.banner-slide.custom{ background:var(--surface); }
.banner-slide.custom picture, .banner-slide.custom img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.banner-slide.custom .caption{ text-shadow:0 2px 12px rgba(0,0,0,.7); }
.banner-slide.custom .btitle{ color:#fff; }
.banner-slide.custom .bbody{ color:rgba(255,255,255,.85); }

/* ---------- account pages ---------- */
.account-wrap{ max-width:860px; }
.account-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.account-head .eyebrow{ text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:700; color:var(--accent); }
.account-name{ font-size:26px; margin:4px 0 0; }
.account-sub{ font-size:12.5px; color:var(--muted); }
.account-balance{ display:flex; flex-direction:column; align-items:flex-end; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 18px; }
.account-balance .label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.account-balance .value{ font-size:26px; font-weight:700; }
.account-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.account-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-bottom:28px; }
.account-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.account-card[hidden]{ display:none; }
.account-card .card-title{ font-family:var(--font-display); font-weight:700; margin-bottom:8px; }
.bonus-line{ font-size:13.5px; }
.bonus-bar{ height:6px; border-radius:3px; background:var(--ink); margin:10px 0 8px; overflow:hidden; }
.bonus-fill{ height:100%; background:var(--win); border-radius:3px; transition:width .3s; }
.bonus-meta{ font-size:12px; color:var(--muted); }
.history{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.history:empty{ display:none; }
.hist-row{ display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:11px 16px; background:var(--surface); border-bottom:1px solid var(--border); }
.hist-row:last-child{ border-bottom:0; }
.hist-label{ font-weight:600; font-size:13.5px; }
.hist-sub{ font-size:11.5px; color:var(--muted); }
.hist-amount{ font-weight:700; font-size:13.5px; }
.hist-amount.pos{ color:var(--win); }
.hist-amount.neg{ color:var(--stake); }
.hist-after{ font-size:12px; color:var(--muted); min-width:90px; text-align:end; }
@media (max-width:560px){ .hist-after{ display:none; } }
.history-more{ margin-top:14px; }
.history-more[hidden]{ display:none; }
.back-link{ display:inline-block; color:var(--accent); font-weight:600; font-size:13px; margin-bottom:10px; }
.account-intro{ color:var(--muted); font-size:14px; max-width:60ch; }
.bonus-lock{ background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius:10px; padding:11px 14px; font-size:13.5px; margin-bottom:14px; }
.bonus-lock[hidden]{ display:none; }
.pm-list{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.pm-item{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.pm-item summary{ display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; font-weight:700; list-style:none; }
.pm-item summary::-webkit-details-marker{ display:none; }
.pm-item summary::after{ content:''; margin-inline-start:auto; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s; }
.pm-item[open] summary::after{ transform:rotate(-135deg); }
.pm-item summary img{ max-width:64px; max-height:24px; object-fit:contain; background:#fff; border-radius:4px; padding:2px 4px; }
.pm-details{ padding:0 18px 16px; color:var(--muted); font-size:14px; line-height:1.6; }
.pm-details p{ margin:0 0 10px; }
.pm-details strong{ color:var(--text); }
.pm-details code{ font-family:var(--font-mono); background:var(--ink); padding:1px 6px; border-radius:4px; color:var(--text); }
.pm-details a{ color:var(--accent); }

/* ---------- player requests ---------- */
.req-form{ margin-top:26px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; }
.req-form[hidden]{ display:none; }
.req-form h2{ font-size:17px; margin:0 0 4px; }
.req-form .account-intro{ margin:0 0 12px; font-size:13px; }
.req-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.req-grid label{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.req-grid label.wide{ grid-column:1/-1; }
.req-grid input, .req-grid select{ background:var(--ink); border:1px solid var(--border); border-radius:8px; padding:10px 11px; color:var(--text); font:inherit; font-size:14px; }
.req-grid input:focus, .req-grid select:focus{ outline:none; border-color:var(--accent); }
@media (max-width:560px){ .req-grid{ grid-template-columns:1fr; } }
.req-head{ margin-top:26px; }
.req-head[hidden]{ display:none; }
.req-row{ grid-template-columns:1fr auto auto; }
.req-status{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 8px; border-radius:6px; border:1px solid var(--border); color:var(--muted); }
.req-status.approved{ color:var(--win); border-color:color-mix(in srgb, var(--win) 40%, transparent); }
.req-status.rejected{ color:var(--stake); border-color:color-mix(in srgb, var(--stake) 40%, transparent); }
.req-status.pending{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.req-note{ color:var(--stake); }

/* ---------- offline payment options (deposit / withdraw) ---------- */
.wd-box{ display:flex; flex-direction:column; gap:6px; }
.wd-box[hidden]{ display:none; }
.wd-row{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; }
.wd-row.main{ font-size:16px; } .wd-row.main strong{ color:var(--win); }
.wd-hint{ font-size:12.5px; color:var(--muted); margin-top:4px; }
.pay-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; margin-top:18px; }
.pay-card{ display:flex; align-items:center; gap:14px; text-align:start; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px; color:var(--text); font:inherit; cursor:pointer; transition:border-color .15s, transform .15s, box-shadow .15s; position:relative; overflow:hidden; }
.pay-card::before{ content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--brand); opacity:.9; }
.pay-card:hover:not(:disabled){ border-color:var(--accent); transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.pay-card:disabled{ opacity:.5; cursor:not-allowed; }
.pay-card-logo{ flex:none; width:96px; height:36px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:8px; padding:4px 6px; }
.pay-logo-lg{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.pay-logo-md{ width:72px; height:27px; object-fit:contain; background:#fff; border-radius:6px; padding:2px 4px; flex:none; }
.pay-logo-sm{ width:40px; height:15px; object-fit:contain; background:#fff; border-radius:3px; padding:1px 2px; vertical-align:middle; margin-inline-end:6px; }
.pay-card-body{ min-width:0; flex:1; }
.pay-card-name{ font-weight:700; font-size:15px; }
.pay-card-type{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.pay-card-limits{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.pay-card-rate{ font-size:12.5px; color:var(--accent); margin-top:2px; }
.pay-card-go{ color:var(--muted); font-size:22px; line-height:1; }
[dir="rtl"] .pay-card-go{ transform:scaleX(-1); }
.pending-card{ background:var(--surface); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:14px; padding:16px 18px; margin-top:16px; }
.pending-head{ display:flex; align-items:center; gap:12px; }
.pending-head > div{ flex:1; min-width:0; }
.pending-title{ font-weight:700; font-size:15px; } .pending-sub{ font-size:12.5px; color:var(--muted); }
.pending-detail{ margin:12px 0 6px; font-size:14px; }
.req-timeline{ list-style:none; display:flex; gap:0; padding:0; margin:12px 0; counter-reset:step; }
.req-timeline li{ flex:1; position:relative; text-align:center; font-size:12px; color:var(--muted); padding-top:18px; }
.req-timeline li::before{ content:''; position:absolute; top:5px; inset-inline-start:calc(50% - 5px); width:10px; height:10px; border-radius:50%; background:var(--border); }
.req-timeline li::after{ content:''; position:absolute; top:9px; inset-inline-start:calc(50% + 6px); width:calc(100% - 12px); height:2px; background:var(--border); }
.req-timeline li:last-child::after{ display:none; }
.req-timeline li.done::before, .req-timeline li.done::after{ background:var(--win); } .req-timeline li.done{ color:var(--text); }
.req-timeline li.current::before{ background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); } .req-timeline li.current{ color:var(--text); font-weight:600; }
.pending-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:8px; }
.pending-hint{ font-size:12.5px; color:var(--muted); }
.pay-codes{ margin-top:8px; background:var(--ink); border-radius:10px; padding:10px 12px; }
.pay-codes-title{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:6px; }
.pay-code{ display:flex; align-items:center; gap:10px; padding:4px 0; }
.pay-code code{ font-family:var(--font-mono); font-size:15px; letter-spacing:.06em; color:var(--text); flex:1; unicode-bidi:isolate; }
.btn.tiny{ padding:4px 10px; font-size:11.5px; }
.link-btn{ background:none; border:0; color:var(--accent); font:inherit; font-size:12.5px; cursor:pointer; padding:0; }
.hist-row .req-note{ display:block; margin-top:4px; }
/* dialog */
.pay-modal{ width:460px; max-height:min(92vh, 860px); display:flex; flex-direction:column; }
.pay-modal-head{ display:flex; align-items:center; gap:12px; margin:0 32px 12px 0; }
[dir="rtl"] .pay-modal-head{ margin:0 0 12px 32px; }
.pay-modal-title{ font-size:17px; margin:0; }
.pay-steps{ display:flex; align-items:center; gap:0; margin-bottom:16px; }
.pay-steps span{ width:24px; height:24px; border-radius:50%; border:1px solid var(--border); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; color:var(--muted); flex:none; }
.pay-steps span.current{ background:var(--accent); border-color:var(--accent); color:#1a1206; }
.pay-steps span.done{ border-color:var(--win); color:var(--win); }
.pay-steps i{ flex:1; height:2px; background:var(--border); }
.pay-modal-body{ overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:12px; padding:2px; }
.pay-field{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.pay-field input{ background:var(--ink); border:1px solid var(--border); border-radius:8px; padding:11px 12px; color:var(--text); font:inherit; font-size:15px; width:100%; box-sizing:border-box; }
.pay-field input:focus{ outline:none; border-color:var(--accent); }
.pay-field small{ text-transform:none; letter-spacing:0; font-size:12px; }
.pay-amount{ position:relative; }
.pay-amount input{ padding-inline-end:56px; font-size:20px; font-weight:600; }
.pay-cur{ position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--muted); }
.pay-receive{ background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius:10px; padding:10px 12px; font-size:14px; }
.pay-help{ font-size:13px; color:var(--muted); margin:0; line-height:1.55; }
.card-rows{ display:flex; flex-direction:column; gap:12px; }
.card-row{ border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.card-row-head{ display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.pay-file{ display:flex; align-items:center; gap:10px; border:1px dashed var(--border); border-radius:10px; padding:10px 12px; cursor:pointer; font-size:13px; color:var(--muted); }
.pay-file input{ display:none; }
.pay-file img{ width:52px; height:40px; object-fit:cover; border-radius:6px; }
.pay-file.has-file{ border-style:solid; color:var(--text); }
.pay-file-icon{ font-size:20px; }
.pay-total{ font-size:13.5px; font-weight:600; padding:8px 12px; border-radius:8px; }
.pay-total.ok{ color:var(--win); background:color-mix(in srgb, var(--win) 12%, transparent); }
.pay-total.bad{ color:var(--stake); background:color-mix(in srgb, var(--stake) 12%, transparent); }
.pay-phone-box{ text-align:center; background:var(--ink); border-radius:12px; padding:16px; }
.pay-phone-label{ font-size:12.5px; color:var(--muted); }
.pay-phone{ font-family:var(--font-mono); font-size:28px; font-weight:700; letter-spacing:.06em; margin:6px 0; unicode-bidi:isolate; }
.pay-phone-sub{ font-size:12.5px; color:var(--muted); margin-bottom:8px; }
.pay-phone-amount{ margin-top:12px; font-size:14px; }
.pay-review{ border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.pay-review-row{ display:flex; justify-content:space-between; gap:12px; padding:10px 12px; font-size:14px; border-bottom:1px solid var(--border); }
.pay-review-row:last-child{ border-bottom:0; }
.pay-review-row span{ color:var(--muted); }
.pay-modal-foot{ display:flex; justify-content:space-between; gap:10px; margin-top:14px; }
.pay-modal-foot #pay-back[hidden]{ display:none; }
.pay-modal-foot #pay-next{ margin-inline-start:auto; }
@media (max-width:560px){ .pay-modal{ width:calc(100vw - 20px); max-height:94vh; padding:18px 16px 16px; } .pay-grid{ grid-template-columns:1fr; } }

/* ---------- account area (phase 32) ---------- */
.acc-id{ display:flex; align-items:center; gap:14px; }
.acc-avatar{ width:52px; height:52px; border-radius:50%; background:var(--accent); color:#1a1206; font-family:var(--font-display); font-weight:700; font-size:22px; display:flex; align-items:center; justify-content:center; flex:none; }
.acc-status{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-top:4px; }
.acc-status-dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); }
.acc-status-dot.ok{ background:var(--win); } .acc-status-dot.warn{ background:var(--stake); }
.account-nav{ margin:0 0 20px; }
.account-nav .chip{ text-decoration:none; }
.account-panel[hidden]{ display:none; }
.account-cards.two{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.acc-form{ display:flex; flex-direction:column; gap:12px; }
.acc-form .btn{ align-self:flex-start; }
.acc-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.acc-badge{ display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:6px; background:color-mix(in srgb, var(--win) 15%, transparent); color:var(--win); vertical-align:middle; }
.acc-muted{ color:var(--muted); font-weight:400; font-size:12px; }
.kv-list{ display:flex; flex-direction:column; }
.kv-list > div{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.kv-list > div:last-child{ border-bottom:0; }
.kv-list span{ color:var(--muted); }
.acc-links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:13px; }
.acc-links a{ color:var(--accent); text-decoration:underline; }
.summary-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:24px; }
.summary-grid.compact{ margin:14px 0 18px; }
.summary-title{ grid-column:1/-1; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.summary-tile{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.summary-tile span{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.summary-tile strong{ font-size:16px; }
.summary-tile .pos{ color:var(--win); } .summary-tile .neg{ color:var(--stake); }
.filter-row{ margin-bottom:10px; }
.filter-row .chip{ cursor:pointer; font:inherit; font-size:13px; font-weight:600; }
.recent-grid{ margin-bottom:24px; }
.complete-card{ margin-bottom:18px; }
.complete-card .btn{ margin-top:8px; }
.section-head .link-btn{ margin-inline-start:auto; }
.limit-rows{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.limit-row{ display:flex; flex-direction:column; gap:6px; }
.danger-card{ border-color:color-mix(in srgb, var(--stake) 45%, transparent); }
.btn.danger{ background:var(--stake); border-color:var(--stake); color:#fff; }
.auth-check{ display:flex !important; flex-direction:row !important; align-items:flex-start; gap:10px; text-transform:none !important; letter-spacing:0 !important; font-size:12.5px !important; color:var(--muted); }
.auth-check input{ width:auto !important; margin-top:2px; accent-color:var(--accent); }
.auth-check a{ color:var(--accent); text-decoration:underline; }
.acct-menu{ display:block; } .acct-menu[hidden]{ display:none; }
.acct-panel{ min-width:200px; }
.acct-panel li[data-go], .acct-panel li.acct-logout{ cursor:pointer; }
.acct-panel li.acct-logout{ color:var(--stake); border-top:1px solid var(--border); margin-top:4px; padding-top:11px; }
.confirm-modal{ width:420px; }
.mt{ margin-top:12px; }
.sess-row{ grid-template-columns:1fr auto; }
@media (max-width:760px){ .wallet-chip{ display:flex; } }
.hist-row.row-capped .hist-label{ color:var(--stake); }
.limit-meta{ display:flex; align-items:center; gap:10px; padding:0 0 8px; }
.limit-meta .bonus-bar{ flex:1; margin:0; }

/* ---- player notifications (bell, panel, overview block, request highlight) ---- */
.notif-menu{ display:block; } .notif-menu[hidden]{ display:none; }
.notif-btn{ position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:36px; background:var(--surface); border:1px solid var(--border); border-radius:9px; color:var(--text); cursor:pointer; }
.notif-btn:hover{ border-color:var(--accent); }
.notif-count{ position:absolute; top:-6px; inset-inline-end:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#e5484d; color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; }
.notif-count[hidden]{ display:none; }
.notif-panel{ inset-inline-start:auto; inset-inline-end:0; width:min(340px, calc(100vw - 24px)); max-height:min(70vh, 460px); overflow-y:auto; }
.notif-panel li.notif-head{ justify-content:space-between; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:6px 10px 8px; }
.notif-panel li.notif-head, .notif-panel li.notif-head:hover, .notif-panel li.notif-empty:hover{ background:none !important; }
.notif-readall{ background:none; border:0; padding:0; color:var(--accent); font-size:12px; font-weight:600; cursor:pointer; text-transform:none; letter-spacing:0; }
.notif-panel li.notif-empty{ color:var(--muted); font-weight:500; justify-content:center; padding:18px 10px; }
.notif-item, .acc-notif{ align-items:flex-start; cursor:pointer; }
.notif-dot{ flex:none; width:8px; height:8px; border-radius:50%; margin-top:6px; background:transparent; }
.notif-item.unread .notif-dot, .acc-notif .notif-dot{ background:#e5484d; }
.notif-item.unread.st-approved .notif-dot, .acc-notif.st-approved .notif-dot{ background:#2fb344; }
.notif-main{ min-width:0; flex:1; }
.notif-title{ font-size:13.5px; font-weight:600; color:var(--text); }
.notif-item:not(.unread) .notif-title{ font-weight:500; color:var(--muted); }
.notif-note{ font-size:12.5px; font-weight:500; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.notif-sub{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:500; color:var(--muted); margin-top:3px; }
.acc-notifs{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; }
.acc-notifs[hidden]{ display:none; }
.acc-notif{ display:flex; gap:10px; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--border); border-inline-start:3px solid #e5484d; }
.acc-notif.st-approved{ border-inline-start-color:#2fb344; }
.acc-notif:hover{ border-color:var(--accent); }
.acc-notif-go{ align-self:center; font-size:12.5px; font-weight:700; color:var(--accent); white-space:nowrap; }
.acc-nav-count{ display:inline-block; margin-inline-start:6px; min-width:17px; height:17px; padding:0 5px; border-radius:9px; background:#e5484d; color:#fff; font-size:10.5px; font-weight:700; line-height:17px; text-align:center; vertical-align:1px; }
.acc-nav-count[hidden]{ display:none; }
.toast.toast-action{ pointer-events:auto; cursor:pointer; border-color:var(--accent); }
@keyframes reqFlash{ 0%,60%{ box-shadow:0 0 0 2px var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); } 100%{ box-shadow:0 0 0 0 transparent; } }
.req-row.req-flash{ animation:reqFlash 2.4s ease-out 1; border-radius:10px; }
@media (max-width:760px){
  .notif-panel{ position:fixed; top:58px; inset-inline:12px; width:auto; }
  .notif-btn{ width:34px; height:34px; }
}

/* ---- bonuses: promotions page, bonuses tab, deposit bonus step, withdraw forfeit ---- */
.wc-bonus{ font-size:10.5px; color:#b78cff; font-weight:600; }
.wc-bonus[hidden]{ display:none; }
.promo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:14px; margin-bottom:18px; }
.promo-card{ position:relative; display:flex; flex-direction:column; gap:8px; padding:18px; border-radius:16px; background:var(--surface); border:1px solid var(--border); overflow:hidden; }
.promo-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent); }
.promo-card.kind-cashback::before{ background:#f59f00; } .promo-card.kind-play_reward::before{ background:#ae3ec9; } .promo-card.kind-deposit::before{ background:#4299e1; }
.promo-card.later{ opacity:.8; }
.promo-kind{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.promo-card h3{ margin:0; font-size:17px; }
.promo-head{ font-size:21px; font-weight:800; color:var(--accent); line-height:1.2; }
.promo-body{ margin:0; color:var(--muted); font-size:13.5px; }
.promo-terms{ font-size:12.5px; color:var(--muted); }
.promo-terms summary{ cursor:pointer; font-weight:600; color:var(--text); padding:4px 0; }
.promo-terms ul{ margin:6px 0 0; padding-inline-start:18px; display:grid; gap:4px; }
.promo-card .btn{ margin-top:auto; align-self:flex-start; }
.bonus-big{ font-size:24px; font-weight:800; margin:4px 0; }
.bonus-card .bonus-big{ color:#b78cff; }
.active-bonus{ margin:14px 0; }
.active-bonus-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.active-bonus-head h3{ margin:2px 0 0; font-size:18px; }
.bonus-countdown{ font-size:12.5px; font-weight:700; padding:5px 10px; border-radius:999px; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); white-space:nowrap; }
.active-bonus .bonus-meta{ display:flex; justify-content:space-between; gap:10px; }
.bonus-facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin:14px 0 10px; }
.bonus-facts div{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; background:color-mix(in srgb, var(--text) 5%, transparent); }
.bonus-facts span{ font-size:11.5px; color:var(--muted); } .bonus-facts strong{ font-size:14.5px; font-family:var(--font-mono, inherit); }
.weights{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.weight{ font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:color-mix(in srgb, #2fb344 16%, transparent); color:#2fb344; }
.weight.low{ background:color-mix(in srgb, #f59f00 16%, transparent); color:#f59f00; } .weight.zero{ background:color-mix(in srgb, var(--text) 8%, transparent); color:var(--muted); text-decoration:line-through; }
.bonus-code-row{ display:flex; gap:8px; margin:6px 0; max-width:420px; }
.bonus-code-row input{ flex:1; min-width:0; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:var(--font-mono, monospace); text-transform:uppercase; letter-spacing:.06em; }
.bonus-code-msg{ font-size:13px; min-height:18px; margin-bottom:8px; } .bonus-code-msg.ok{ color:#2fb344; } .bonus-code-msg.bad{ color:#e5484d; }
.bonus-how{ margin:0 0 18px; padding-inline-start:20px; display:grid; gap:6px; color:var(--muted); font-size:13.5px; }
.bonus-choices{ display:grid; gap:8px; margin:10px 0; }
.bonus-choice{ display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius:12px; border:1px solid var(--border); background:var(--surface); cursor:pointer; }
.bonus-choice input{ margin-top:3px; accent-color:var(--accent); }
.bonus-choice.selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.bonus-choice.disabled{ opacity:.55; cursor:not-allowed; }
.bonus-choice-title{ font-weight:700; font-size:14px; } .bonus-choice-sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.bonus-plus{ display:inline-block; margin-inline-start:6px; padding:1px 8px; border-radius:999px; background:color-mix(in srgb, #2fb344 18%, transparent); color:#2fb344; font-size:12.5px; font-family:var(--font-mono, inherit); }
.pay-help.small{ font-size:12px; }
.pay-warning{ padding:12px 14px; border-radius:12px; border:1px solid #f59f00; background:color-mix(in srgb, #f59f00 12%, transparent); margin-bottom:12px; }
.pay-warning p{ margin:6px 0 0; font-size:13.5px; }
.pay-check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:600; cursor:pointer; margin-bottom:8px; } .pay-check input{ margin-top:3px; accent-color:var(--accent); }
.wd-hint.warn{ color:#f59f00; }


/* ---- Promotions page: hero, showcase cards, empty state ---- */
.promo-wrap{ max-width:1080px; margin:0 auto; padding:24px 16px 48px; }
.promo-hero{ position:relative; overflow:hidden; display:grid; gap:16px; padding:28px; border-radius:22px; margin-bottom:22px; border:1px solid var(--border);
  background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 60%), radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, #ae3ec9 22%, transparent), transparent 55%), var(--surface); }
.promo-eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.promo-hero h1{ margin:4px 0 8px; font-size:clamp(28px, 5vw, 42px); line-height:1.05; }
.promo-hero p{ margin:0; max-width:640px; color:var(--muted); font-size:14.5px; }
.promo-pills{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.promo-pills li{ padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:600; background:color-mix(in srgb, var(--text) 7%, transparent); border:1px solid var(--border); }
.promo-pills li::before{ content:"✓"; margin-inline-end:7px; color:#2fb344; font-weight:800; }
.promo-showcase{ display:grid; gap:16px; }
.promo-show{ --tone:var(--accent); display:grid; grid-template-columns:190px 1fr; border-radius:20px; overflow:hidden; background:var(--surface); border:1px solid var(--border); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.promo-show:hover{ transform:translateY(-2px); border-color:var(--tone); box-shadow:0 18px 40px -22px var(--tone); }
.promo-show.kind-deposit{ --tone:#4299e1; } .promo-show.kind-cashback{ --tone:#f59f00; } .promo-show.kind-play_reward{ --tone:#ae3ec9; }
.promo-show-art{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:22px 14px; color:#fff; text-align:center;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 45%), linear-gradient(145deg, var(--tone), color-mix(in srgb, var(--tone) 45%, #000)); }
.promo-show-art svg{ width:56px; height:56px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.promo-show-kind{ font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.promo-show-body{ padding:20px 22px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.promo-show-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.promo-show-top h2{ margin:0; font-size:19px; }
.promo-live{ flex:none; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; color:#2fb344; background:color-mix(in srgb, #2fb344 14%, transparent); white-space:nowrap; }
.promo-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 0 currentColor; animation:promoPulse 1.8s infinite; }
.promo-live.off{ color:var(--muted); background:color-mix(in srgb, var(--text) 7%, transparent); } .promo-live.off::before{ animation:none; }
@keyframes promoPulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 100%{ box-shadow:0 0 0 8px transparent; } }
.promo-show-head{ font-size:clamp(22px, 3.4vw, 30px); font-weight:800; line-height:1.15; color:var(--tone); }
.promo-steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; }
.promo-step{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; background:color-mix(in srgb, var(--tone) 10%, transparent); border:1px solid color-mix(in srgb, var(--tone) 28%, transparent); }
.promo-step span{ font-size:12px; color:var(--muted); } .promo-step strong{ font-size:17px; color:var(--tone); }
.promo-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.promo-chips span{ font-size:12px; font-weight:600; padding:4px 10px; border-radius:8px; background:color-mix(in srgb, var(--text) 6%, transparent); color:var(--muted); }
.promo-show-foot{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 18px; margin-top:4px; }
.promo-show-foot .promo-terms{ flex:1; min-width:200px; padding-top:8px; }
.promo-show.later .promo-show-art{ filter:saturate(.55); }
.promo-empty{ text-align:center; padding:56px 20px; border-radius:22px; border:1px dashed var(--border); background:var(--surface); }
.promo-empty[hidden]{ display:none; }
.promo-empty svg{ color:var(--accent); opacity:.85; }
.promo-empty h2{ margin:14px 0 6px; font-size:22px; } .promo-empty p{ margin:0 auto 18px; max-width:420px; color:var(--muted); }
@media (max-width:640px){
  .promo-hero{ padding:20px; border-radius:18px; }
  .promo-show{ grid-template-columns:1fr; }
  .promo-show-art{ flex-direction:row; justify-content:flex-start; padding:14px 18px; } .promo-show-art svg{ width:34px; height:34px; }
  .promo-show-body{ padding:16px; } .promo-show-top{ flex-direction:column; }
  .promo-show-foot .btn{ width:100%; }
}

/* ---- announcement bar (all templates): rotating offers with manual switch ---- */
.promo-strip{ touch-action:pan-y; user-select:none; -webkit-user-select:none; display:flex; align-items:center; justify-content:center; gap:8px; min-height:34px; padding:5px 12px; font-size:12.5px; line-height:1.25; color:var(--text);
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, var(--bg, #0b0f14)), color-mix(in srgb, #ae3ec9 16%, var(--bg, #0b0f14))); border-bottom:1px solid var(--border); }
.promo-strip[hidden]{ display:none !important; }
.promo-strip .ps-main{ display:flex; align-items:baseline; justify-content:center; gap:8px; min-width:0; flex:0 1 auto; color:inherit; text-decoration:none; overflow:hidden; white-space:nowrap; }
.promo-strip .ps-main.ps-in{ animation:psIn .35s ease; }
@keyframes psIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.promo-strip .ps-k{ font-weight:700; color:var(--accent); flex:none; max-width:45%; overflow:hidden; text-overflow:ellipsis; }
.promo-strip .ps-sep{ opacity:.45; flex:none; }
.promo-strip .ps-v{ font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.promo-strip .ps-nav{ flex:none; width:24px; height:24px; border-radius:50%; border:0; background:color-mix(in srgb, var(--text) 10%, transparent); color:inherit; font-size:16px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0 0 2px; }
.promo-strip .ps-nav:hover{ background:color-mix(in srgb, var(--text) 20%, transparent); }
.promo-strip .ps-count{ flex:none; font-size:10.5px; opacity:.6; font-variant-numeric:tabular-nums; min-width:22px; }
.promo-strip.single .ps-nav, .promo-strip.single .ps-count{ display:none; }
[dir="rtl"] .promo-strip .ps-nav{ transform:scaleX(-1); }
@media (max-width:640px){
  .promo-strip{ min-height:30px; padding:4px 8px; gap:6px; font-size:11.5px; }
  .promo-strip .ps-main{ flex:1 1 0; justify-content:flex-start; gap:6px; }
  .promo-strip .ps-k{ max-width:40%; }
  .promo-strip .ps-nav{ width:22px; height:22px; font-size:15px; }
  .promo-strip .ps-count{ display:none; }
}
/* ---- template preview ribbon ---- */
.tpl-preview{ position:fixed; z-index:500; inset-inline:12px; bottom:12px; margin:0 auto; max-width:760px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 14px; border-radius:14px; background:#111827; color:#f9fafb; font:500 13px/1.3 system-ui, sans-serif; box-shadow:0 16px 40px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14); }
.tpl-preview[hidden]{ display:none; }
.tpl-preview .tp-note{ opacity:.7; flex:1 1 180px; font-size:12px; }
.tpl-preview .tp-list{ display:flex; gap:4px; flex-wrap:wrap; }
.tpl-preview a{ color:#f9fafb; text-decoration:none; padding:5px 10px; border-radius:8px; background:rgba(255,255,255,.08); font-size:12.5px; }
.tpl-preview a.on{ background:#f9fafb; color:#111827; font-weight:700; }
.tpl-preview a.tp-exit{ background:#ef4444; }

/* ---------------------------------------------------------------- lucky wheel */
.wheel-fab{ position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:36px; padding:0; background:var(--surface); border:1px solid var(--border); border-radius:9px; color:var(--text); cursor:pointer; flex:0 0 auto; }
.wheel-fab[hidden]{ display:none; }
.wheel-fab:hover{ border-color:var(--accent); }
.wheel-fab svg{ width:26px; height:26px; display:block; overflow:visible; }
.wheel-mini-rot{ transform-origin:16px 16px; animation:wheel-turn 14s linear infinite; }
.wheel-fab.ready .wheel-mini-rot{ animation-duration:5s; }
.wheel-fab.ready{ animation:wheel-wobble 3.2s ease-in-out infinite; box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
.wheel-fab-dot{ position:absolute; top:-5px; inset-inline-end:-5px; min-width:12px; height:12px; padding:0 3px; border-radius:999px; background:#e5484d; color:#fff; font:700 9px/12px var(--font-body); text-align:center; box-shadow:0 0 0 2px var(--ink); animation:wheel-pulse 1.8s ease-out infinite; }
.wheel-fab-dot:not(:empty){ min-width:16px; height:16px; line-height:16px; font-size:10px; top:-7px; inset-inline-end:-7px; }
.wheel-fab-dot[hidden]{ display:none; }
@keyframes wheel-turn{ to{ transform:rotate(360deg); } }
@keyframes wheel-wobble{ 0%,86%,100%{ transform:rotate(0); } 89%{ transform:rotate(-9deg); } 92%{ transform:rotate(8deg); } 95%{ transform:rotate(-5deg); } 98%{ transform:rotate(3deg); } }
@keyframes wheel-pulse{ 0%{ box-shadow:0 0 0 2px var(--ink), 0 0 0 2px rgba(229,72,77,.7); } 100%{ box-shadow:0 0 0 2px var(--ink), 0 0 0 11px rgba(229,72,77,0); } }

.wheel-overlay{ position:fixed; inset:0; z-index:420; display:none; align-items:center; justify-content:center; padding:16px; }
.wheel-overlay.open{ display:flex; }
.wheel-backdrop{ position:absolute; inset:0; background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 22%, rgba(5,7,10,.86)), rgba(5,7,10,.93)); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); animation:wheel-fade .25s ease-out; }
.wheel-confetti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.wheel-dialog{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:28px; align-items:center; width:min(920px,100%); max-height:100%; overflow:auto; padding:28px; border-radius:24px; background:linear-gradient(160deg, var(--surface-raised), var(--surface)); border:1px solid var(--border); box-shadow:0 30px 90px rgba(0,0,0,.55); animation:wheel-pop .35s cubic-bezier(.2,1.2,.4,1); }
@keyframes wheel-fade{ from{ opacity:0; } }
@keyframes wheel-pop{ from{ opacity:0; transform:scale(.92) translateY(14px); } }
.wheel-x, .wheel-mute{ position:absolute; top:12px; z-index:5; width:34px; height:34px; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--ink) 55%, transparent); color:var(--text); font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; }
.wheel-x{ inset-inline-end:12px; } .wheel-mute{ inset-inline-end:54px; font-size:15px; } .wheel-mute[hidden]{ display:none; }
.wheel-x:hover, .wheel-mute:hover{ border-color:var(--accent); }

.wheel-stage{ position:relative; width:100%; max-width:460px; aspect-ratio:1; margin:0 auto; container-type:inline-size; border-radius:50%; background:radial-gradient(circle, transparent 62%, rgba(0,0,0,.28) 63%), conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 85%, #fff), color-mix(in srgb, var(--accent) 55%, #000), color-mix(in srgb, var(--accent) 85%, #fff), color-mix(in srgb, var(--accent) 55%, #000), color-mix(in srgb, var(--accent) 85%, #fff)); box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 18px 50px rgba(0,0,0,.5), 0 0 60px color-mix(in srgb, var(--accent) 35%, transparent); direction:ltr; }
.wheel-canvas{ position:absolute; inset:5.5%; border-radius:50%; overflow:hidden; background:var(--ink); box-shadow:inset 0 0 0 2px rgba(0,0,0,.4); }
.wheel-canvas canvas{ display:block; width:100%; height:100%; }
.wheel-lights{ position:absolute; inset:0; pointer-events:none; }
.wheel-lights i{ position:absolute; top:50%; left:50%; width:2.2cqw; height:2.2cqw; min-width:5px; min-height:5px; margin:-1.1cqw 0 0 -1.1cqw; border-radius:50%; background:#fff6d6; box-shadow:0 0 6px 1px rgba(255,236,170,.9); transform:rotate(var(--a)) translateY(-47.3cqw); animation:wheel-blink .9s steps(1) infinite; animation-delay:var(--d); }
@keyframes wheel-blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:.28; } }
.wheel-pointer{ position:absolute; top:-2.5%; left:50%; z-index:2; width:9%; aspect-ratio:1/1.25; transform:translateX(-50%); background:linear-gradient(180deg,#ff6b6f,#c9252b); clip-path:polygon(50% 100%, 0 22%, 12% 0, 88% 0, 100% 22%); filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.wheel-hub{ position:absolute; top:50%; left:50%; width:17%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--accent) 80%, #fff) 35%, color-mix(in srgb, var(--accent) 60%, #000)); box-shadow:0 0 0 4px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.5); pointer-events:none; }

.wheel-panel{ min-width:0; display:flex; flex-direction:column; gap:12px; }
.wheel-panel h2{ margin:0; font-size:clamp(24px,3.4vw,34px); line-height:1.1; padding-inline-end:70px; }
.wheel-sub{ margin:0; color:var(--muted); font-size:14.5px; }
.wheel-lead{ margin:0; font-size:15px; }
.wheel-count{ display:inline-flex; align-self:flex-start; padding:7px 14px; border-radius:999px; font-weight:700; font-size:14px; background:color-mix(in srgb, var(--text) 7%, transparent); color:var(--muted); }
.wheel-count.has{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); }
.wheel-boost{ display:block; margin-top:10px; padding:10px 12px; border-radius:12px; font-size:13.5px; font-weight:600; background:color-mix(in srgb, var(--win) 14%, transparent); color:var(--text); border:1px dashed color-mix(in srgb, var(--win) 55%, transparent); }
.wheel-rules{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:210px; overflow:auto; }
.wheel-rules:empty{ display:none; }
.wheel-rules li{ padding:9px 12px; border-radius:12px; background:color-mix(in srgb, var(--text) 5%, transparent); border:1px solid transparent; }
.wheel-rules li.ready{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.wheel-rule-head{ font-size:13.5px; font-weight:600; }
.wheel-rule-sub{ font-size:12.5px; color:var(--muted); } .wheel-rule-sub:empty{ display:none; }
.wheel-rules li.ready .wheel-rule-sub{ color:var(--accent); font-weight:600; }
.wheel-rule-bar{ height:5px; margin-top:6px; border-radius:99px; background:color-mix(in srgb, var(--text) 10%, transparent); overflow:hidden; }
.wheel-rule-bar i{ display:block; height:100%; border-radius:99px; background:var(--accent); }
.wheel-small{ margin:10px 0 0; font-size:11.5px; color:var(--muted-2); }
.btn.wheel-spin{ width:100%; min-height:54px; font-size:18px; font-weight:800; letter-spacing:.06em; border-radius:14px; box-shadow:0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent); }
.btn.wheel-spin:not(:disabled){ animation:wheel-cta 2.2s ease-in-out infinite; }
.btn.wheel-spin:disabled{ opacity:.55; box-shadow:none; cursor:default; }
@keyframes wheel-cta{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.025); } }

.wheel-result{ position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; padding:20px; border-radius:inherit; background:rgba(5,7,10,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.wheel-result[hidden]{ display:none; }
.wheel-result-card{ width:min(420px,100%); text-align:center; padding:26px 22px; border-radius:20px; background:var(--surface-raised); border:1px solid var(--border); box-shadow:0 24px 60px rgba(0,0,0,.5); animation:wheel-pop .4s cubic-bezier(.2,1.3,.4,1); }
.wheel-result.win .wheel-result-card{ border-color:color-mix(in srgb, var(--accent) 70%, transparent); box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 50px color-mix(in srgb, var(--accent) 35%, transparent); }
.wheel-result-emoji{ font-size:52px; line-height:1; margin-bottom:8px; }
.wheel-result.win .wheel-result-emoji{ animation:wheel-bounce .9s ease-out; }
@keyframes wheel-bounce{ 0%{ transform:scale(.2) rotate(-25deg); } 55%{ transform:scale(1.25) rotate(8deg); } 100%{ transform:none; } }
.wheel-result-card h3{ margin:0 0 6px; font-size:24px; } .wheel-result-card p{ margin:0; color:var(--muted); font-size:14.5px; }
.wheel-result-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.wheel-result-actions .btn{ min-width:120px; }

.wheel-card{ position:relative; display:flex; align-items:center; gap:18px; padding:18px 20px; margin-bottom:18px; border-radius:18px; overflow:hidden; background:linear-gradient(120deg, color-mix(in srgb, var(--accent) 20%, var(--surface)), var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.wheel-card.ready{ box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 10px 34px color-mix(in srgb, var(--accent) 22%, transparent); }
.wheel-card-art{ flex:0 0 auto; width:92px; height:92px; color:var(--text); } .wheel-card-art svg{ width:100%; height:100%; overflow:visible; }
.wheel-card-body{ flex:1 1 auto; min-width:0; } .wheel-card-body h2{ margin:2px 0 4px; font-size:22px; } .wheel-card-body p{ margin:0 0 8px; color:var(--muted); font-size:14px; }
.wheel-card .btn{ flex:0 0 auto; min-width:120px; }
#wheel-bonus-card .wheel-card{ margin-bottom:16px; }

@media (max-width:760px){
  .wheel-overlay{ padding:0; align-items:stretch; }
  .wheel-dialog{ grid-template-columns:minmax(0,1fr); gap:14px; width:100%; min-height:100%; border-radius:0; border:0; padding:52px 16px 20px; align-content:start; }
  .wheel-stage{ max-width:min(340px, 86vw, 46vh); }
  .wheel-panel{ text-align:center; } .wheel-panel h2{ padding-inline-end:0; font-size:24px; } .wheel-count{ align-self:center; }
  .wheel-rules{ max-height:none; text-align:start; } .wheel-sub{ font-size:13.5px; }
  .btn.wheel-spin{ position:sticky; bottom:8px; }
  .wheel-card{ flex-wrap:wrap; gap:12px; padding:16px; } .wheel-card-art{ width:64px; height:64px; } .wheel-card-body{ flex:1 1 60%; } .wheel-card-body h2{ font-size:19px; } .wheel-card .btn{ flex:1 1 100%; }
  .wheel-fab{ width:34px; height:34px; } .wheel-fab svg{ width:23px; height:23px; }
}
@media (prefers-reduced-motion: reduce){
  .mriv-sig *{ animation:none !important; } .sig-coin, .sig-note{ opacity:.55; transform:translate(var(--x), 30px); }
  .wheel-mini-rot, .wheel-fab.ready, .wheel-fab-dot, .wheel-lights i, .btn.wheel-spin, .wheel-dialog, .wheel-result-card, .wheel-result-emoji, .wheel-backdrop{ animation:none !important; }
}

/* phones: the header's tool row (language, wheel, bell, wallet, deposit) always fits the screen */
@media (max-width:760px){
  .header-right{ min-width:0; max-width:100%; gap:6px; }
  .header-right > *{ flex:0 0 auto; }
  .header-right > .acct-menu{ flex:0 1 auto; min-width:0; }
  html .wallet-chip{ min-width:0; max-width:100%; padding-inline:10px; }
  .wallet-chip .wc-name, .wallet-chip .wc-balance, .wallet-chip .wc-bonus{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wallet-deposit{ white-space:nowrap; }
}
@media (max-width:420px){
  #lang-trigger{ padding-inline:8px; gap:4px; } #lang-trigger .chev{ display:none; }
}

/* lucky wheel — short panel: title, spins ready, SPIN, and the rest folded under "How to get spins" */
#wheel-side{ display:contents; }
.wheel-panel .wheel-spin{ order:1; } .wheel-more{ order:2; }
.wheel-more summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--muted); padding:4px 0; }
.wheel-more summary::-webkit-details-marker{ display:none; }
.wheel-more summary::after{ content:'▾'; font-size:11px; transition:transform .2s; } .wheel-more[open] summary::after{ transform:rotate(180deg); }
.wheel-more .wheel-rules{ margin-top:8px; gap:6px; }
.wheel-rules li{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; padding:8px 12px; }
.wheel-rule-head{ font-size:13px; } .wheel-rule-sub{ font-size:12px; } .wheel-rule-bar{ flex:1 0 100%; }
.wheel-small{ margin-top:8px; font-size:11px; }
.wheel-boost{ margin-top:0; text-align:center; }
@media (max-width:760px){ .wheel-more{ text-align:center; } .wheel-more .wheel-rules{ text-align:start; } .btn.wheel-spin{ position:static; } }

/* ---------------------------------------------------------------- public demo (demo.mriv.online/<template>) — same in every template on purpose */
.demo-bar{ position:relative; z-index:60; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:7px 14px; background:#0b1210; color:#e8f3ec; font:500 12.5px/1.3 system-ui, -apple-system, sans-serif; border-bottom:1px solid rgba(255,255,255,.12); }
.demo-bar a, .demo-bar button{ color:#e8f3ec; text-decoration:none; font:inherit; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:0; cursor:pointer; white-space:nowrap; }
.demo-bar a:hover, .demo-bar button:hover{ background:rgba(255,255,255,.18); }
.demo-bar .db-tag{ background:#7c3aed; color:#fff; font-weight:800; letter-spacing:.1em; font-size:11px; }
.demo-bar .db-note{ opacity:.72; flex:1 1 160px; min-width:0; }
.demo-bar .db-tpls, .demo-bar .db-actions{ display:flex; flex-wrap:wrap; gap:4px; }
.demo-bar .db-tpls a.on{ background:#e8f3ec; color:#0b1210; font-weight:700; }
.demo-bar #db-login{ background:#6ee7a0; color:#062012; font-weight:700; }
.demo-bar .db-cta{ background:transparent; border:1px solid rgba(110,231,160,.6); color:#6ee7a0; }
@media (max-width:760px){ .demo-bar{ padding:6px 10px; gap:5px 8px; font-size:12px; } .demo-bar .db-note{ display:none; } .demo-bar .db-tpls{ flex:1 1 100%; order:3; overflow-x:auto; flex-wrap:nowrap; } .demo-bar .db-actions{ flex:1 1 auto; justify-content:flex-end; } .demo-bar .db-cta{ display:none; } }
.demo-notice{ position:fixed; inset:0; z-index:700; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(5,7,10,.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.demo-notice.open{ display:flex; }
.demo-notice-card, .demo-game-card{ width:min(440px,100%); text-align:center; padding:26px 24px; border-radius:20px; background:var(--surface-raised); color:var(--text); border:1px solid var(--border); box-shadow:0 24px 70px rgba(0,0,0,.5); }
.demo-notice-badge{ display:inline-block; padding:4px 12px; border-radius:999px; background:#7c3aed; color:#fff; font:800 11px/1.4 system-ui, sans-serif; letter-spacing:.14em; margin-bottom:12px; }
.demo-notice-card h3, .demo-game-card h3{ margin:0 0 8px; font-size:22px; } .demo-notice-card p, .demo-game-card p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.5; }
.demo-notice-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }
.frame-loading.demo-game{ background-size:cover; background-position:center; padding:16px; }

/* ---------------------------------------------------------------- Telegram notifications (player) */
.tg-overlay{ position:fixed; inset:0; z-index:430; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(5,7,10,.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.tg-overlay.open{ display:flex; }
.tg-card{ position:relative; width:min(420px,100%); max-height:100%; overflow:auto; text-align:center; padding:28px 22px 22px; border-radius:20px; background:var(--surface-raised); color:var(--text); border:1px solid var(--border); box-shadow:0 24px 70px rgba(0,0,0,.5); }
.tg-card h3{ margin:0 0 8px; font-size:21px; } .tg-card p{ margin:0 0 14px; color:var(--muted); font-size:14.5px; line-height:1.5; }
.tg-x{ position:absolute; top:10px; inset-inline-end:10px; width:32px; height:32px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--text); font-size:19px; line-height:1; }
.tg-badge{ display:inline-block; padding:4px 12px; border-radius:999px; background:#229ed9; color:#fff; font:700 11px/1.4 system-ui, sans-serif; letter-spacing:.08em; margin-bottom:12px; }
.tg-qr{ width:190px; margin:0 auto 6px; padding:8px; background:#fff; border-radius:12px; } .tg-qr svg{ display:block; width:100%; height:auto; }
.tg-small{ font-size:12.5px; color:var(--muted); margin:0 0 12px; }
.tg-steps{ text-align:start; margin:0 0 14px; padding-inline-start:20px; color:var(--muted); font-size:14px; } .tg-steps li{ margin-bottom:4px; }
.tg-open{ display:block; width:100%; text-align:center; }
.tg-wait{ margin-top:12px; padding:10px; border-radius:10px; font-size:13px; color:var(--muted); background:color-mix(in srgb, var(--text) 6%, transparent); display:flex; align-items:center; justify-content:center; gap:8px; }
.tg-wait .spinner{ width:14px; height:14px; border-width:2px; } .tg-wait.ok{ color:var(--win); font-weight:700; background:color-mix(in srgb, var(--win) 14%, transparent); }
.tg-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .tg-actions .btn{ flex:1 1 140px; }
.tg-never{ margin-top:12px; background:none; border:0; color:var(--muted-2); font-size:12.5px; text-decoration:underline; }
.tg-reward{ margin:0 0 14px; padding:9px 12px; border-radius:12px; font-size:13.5px; font-weight:600; background:color-mix(in srgb, var(--accent) 14%, transparent); border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.tg-settings{ margin-top:16px; text-align:start; } .tg-settings .tg-actions{ justify-content:flex-start; margin-top:14px; } .tg-settings .tg-actions .btn{ flex:0 0 auto; }
.tg-on{ margin-inline-start:8px; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; background:color-mix(in srgb, var(--win) 18%, transparent); color:var(--win); }
.tg-rows{ display:flex; flex-direction:column; gap:2px; } .tg-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; cursor:pointer; }
.tg-row > span:first-of-type{ flex:1 1 auto; min-width:0; } .tg-row small{ display:block; color:var(--muted); font-size:12px; } .tg-row input[type=checkbox]{ width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto; }
.tg-param{ display:flex; align-items:center; gap:6px; flex:0 0 auto; } .tg-param input{ width:76px; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); text-align:end; } .tg-param em{ font-style:normal; color:var(--muted); font-size:12.5px; }

.tg-code{ margin-top:12px; padding:10px; border-radius:10px; border:1px dashed var(--border); } .tg-code small{ display:block; color:var(--muted); font-size:12.5px; margin-bottom:4px; } .tg-code b{ font-size:26px; letter-spacing:.16em; font-variant-numeric:tabular-nums; user-select:all; }

.tg-trouble{ margin-top:12px; text-align:center; } .tg-trouble summary{ cursor:pointer; color:var(--muted-2); font-size:12.5px; }

/* Telegram: account-menu entry + slim banner on My account (until connected) */
.acct-panel li.acct-tg{ cursor:pointer; display:flex; align-items:center; gap:8px; color:#2aabee; font-weight:600; } .acct-panel li.acct-tg.on{ color:inherit; font-weight:400; } .acct-panel li.acct-tg[hidden]{ display:none; }
.tg-banner{ width:100%; display:flex; align-items:center; gap:12px; text-align:start; margin:0 0 14px; padding:12px 14px; border-radius:14px; border:1px solid rgba(42,171,238,.45); background:linear-gradient(90deg, rgba(42,171,238,.16), rgba(42,171,238,.04)); color:inherit; cursor:pointer; font:inherit; }
.tg-banner-ic{ flex:0 0 36px; height:36px; border-radius:50%; background:#2aabee; color:#fff; display:grid; place-items:center; font-size:18px; } .tg-banner-tx{ flex:1 1 auto; min-width:0; } .tg-banner-tx b{ display:block; font-size:14px; } .tg-banner-tx small{ display:block; color:var(--muted); font-size:12px; }
.tg-banner-go{ flex:0 0 auto; background:#2aabee; color:#fff; border-radius:999px; padding:7px 12px; font-size:13px; font-weight:700; white-space:nowrap; } @media (max-width:420px){ .tg-banner-go{ padding:6px 10px; font-size:12px; } }

/* ---------- referral programme (shared by the 4 templates: colours and fonts come from each template's variables) ---------- */
.rf{ max-width:1080px; margin:0 auto; padding:clamp(14px,3vw,28px) clamp(14px,4vw,28px) 48px; display:grid; grid-template-columns:minmax(0,1fr); gap:18px; } /* one column that can SHRINK: an implicit (auto) column grows to its widest child and pushes the page wider than a phone */
.rf > *{ min-width:0; max-width:100%; }
.rf-ic{ width:1.15em; height:1.15em; flex:none; vertical-align:-.18em; } .rf-ic.big{ width:56px; height:56px; color:var(--accent); }
.rf-hero{ position:relative; overflow:hidden; padding:clamp(20px,4vw,34px); border-radius:22px; border:1px solid var(--border); background:radial-gradient(520px 260px at 100% 0, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--surface); }
.rf-eyebrow{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.rf-level-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:color-mix(in srgb, var(--accent) 16%, transparent); letter-spacing:.04em; }
.rf-hero h1{ margin:8px 0 8px; font-size:clamp(26px,4.6vw,40px); line-height:1.06; } .rf-hero p{ margin:0; max-width:640px; color:var(--muted); font-size:14.5px; }
.rf-invited, .rf-gift{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; margin-bottom:12px; font-size:13px; font-weight:600; background:color-mix(in srgb, var(--win) 16%, transparent); color:var(--win); } .rf-invited.warn{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.rf-gift{ margin:14px 0 0; border-radius:14px; font-weight:500; color:var(--text); background:var(--surface-raised); border:1px solid var(--border); } .rf-gift .rf-ic{ color:var(--accent); width:1.5em; height:1.5em; }
.rf-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.rf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 16px; border-radius:12px; border:1px solid var(--border); background:var(--surface-raised); color:var(--text); font-weight:600; font-size:14px; transition:transform .15s, border-color .15s, opacity .15s; }
.rf-btn:hover:not(:disabled){ transform:translateY(-1px); border-color:var(--accent); } .rf-btn:disabled{ opacity:.45; cursor:not-allowed; } .rf-btn.primary{ background:var(--accent); border-color:transparent; color:var(--on-accent, #14100a); }
.rf-icon-btn{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--muted); } .rf-icon-btn:hover{ color:var(--text); border-color:var(--accent); }
.rf-linkbox{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:20px; }
.rf-link, .rf-code{ display:flex; align-items:center; gap:8px; padding:8px 8px 8px 14px; border-radius:14px; border:1px solid var(--border); background:var(--ink); min-width:0; } .rf-link-l{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.rf-link input{ flex:1; min-width:0; border:0; background:transparent; color:var(--text); font-size:14px; outline:none; text-overflow:ellipsis; } .rf-code b{ font-size:16px; letter-spacing:.06em; }
.rf-share{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .rf-share-b{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--text); font-size:13px; font-weight:500; } .rf-share-b:hover{ border-color:var(--accent); }
.rf-share-b.wa .rf-ic{ color:#25d366; } .rf-share-b.tg .rf-ic{ color:#2aabee; } .rf-share-b.fb .rf-ic{ color:#1877f2; }
.rf-qr{ margin-top:14px; width:180px; padding:10px; border-radius:14px; background:#fff; } .rf-qr svg{ display:block; width:100%; height:auto; } .rf-mini{ margin-top:12px; font-size:12.5px; color:var(--muted); }
.rf-wallet{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:12px; } .rf-w{ padding:16px; border-radius:18px; border:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; gap:4px; min-width:0; }
.rf-w>span{ display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .rf-w b{ font-size:22px; } .rf-w small{ color:var(--muted-2); font-size:12px; } .rf-w.main{ background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); } .rf-w.main b{ font-size:30px; color:var(--accent); }
.rf-w-actions{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.rf-card{ padding:clamp(16px,3vw,24px); border-radius:20px; border:1px solid var(--border); background:var(--surface); } .rf-card h2{ display:flex; align-items:center; gap:10px; margin:0 0 6px; font-size:20px; } .rf-card h2 .rf-ic{ width:1.3em; height:1.3em; color:var(--accent); } .rf-card h3{ margin:18px 0 8px; font-size:15px; }
.rf-sub{ margin:0 0 12px; color:var(--muted); font-size:13.5px; }
.rf-chain{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0 16px; } .rf-node{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; border:1px solid var(--border); background:var(--surface-raised); font-size:13px; font-weight:600; } .rf-node.me{ background:var(--accent); border-color:transparent; color:var(--on-accent, #14100a); } .rf-arrow{ color:var(--muted); display:inline-flex; }
[dir="rtl"] .rf-arrow .rf-ic{ transform:scaleX(-1); }
.rf-table-wrap{ overflow-x:auto; } .rf-table{ width:100%; border-collapse:collapse; font-size:14px; } .rf-table th, .rf-table td{ padding:10px 12px; text-align:start; border-bottom:1px solid var(--border); } .rf-table thead th{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.rf-table tbody th{ font-weight:600; } .rf-rule-h{ display:block; font-weight:400; font-size:12px; color:var(--muted); } .rf-table td{ font-family:var(--font-mono); font-weight:600; color:var(--accent); white-space:nowrap; } .rf-table td s{ margin-inline-start:6px; color:var(--muted-2); font-weight:400; font-size:12px; }
.rf-note{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; font-size:13px; color:var(--muted); } .rf-note .rf-ic{ color:var(--win); margin-top:2px; }
.rf-tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; } .rf-tier{ padding:12px; border-radius:14px; border:1px solid var(--border); background:var(--surface-raised); display:grid; gap:2px; } .rf-tier.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.rf-tier-n{ font-weight:700; } .rf-tier-f{ font-size:12px; color:var(--muted); } .rf-tier-m{ font-family:var(--font-mono); color:var(--accent); font-weight:600; }
.rf-progress{ margin-top:14px; display:grid; gap:6px; font-size:12.5px; color:var(--muted); } .rf-bar{ height:8px; border-radius:999px; background:var(--surface-raised); overflow:hidden; } .rf-bar i{ display:block; height:100%; border-radius:999px; background:var(--accent); }
.rf-layers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:10px 0 14px; } .rf-layer{ padding:12px 14px; border-radius:14px; background:var(--surface-raised); border:1px solid var(--border); display:grid; gap:2px; } .rf-layer-n{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .rf-layer b{ font-size:24px; } .rf-layer-q{ font-size:12px; color:var(--muted); } .rf-layer-e{ color:var(--accent); font-weight:600; }
.rf-list{ display:grid; } .rf-row{ display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--border); font-size:14px; } .rf-row:last-child{ border-bottom:0; } .rf-row-n{ flex:1; min-width:0; display:grid; } .rf-row-n small{ color:var(--muted); font-size:12px; } .rf-row b.neg, .rf-row small.neg{ color:var(--stake); }
.rf-av{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--surface-raised); border:1px solid var(--border); font-weight:700; font-size:13px; color:var(--accent); }
.rf-tag{ font-size:11px; padding:3px 8px; border-radius:999px; background:var(--surface-raised); color:var(--muted); white-space:nowrap; } .rf-tag.qualified, .rf-tag.available, .rf-tag.approved{ background:color-mix(in srgb, var(--win) 16%, transparent); color:var(--win); } .rf-tag.rejected{ background:color-mix(in srgb, var(--stake) 16%, transparent); color:var(--stake); }
.rf-text{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:var(--surface-raised); border:1px solid var(--border); margin-bottom:8px; } .rf-text p{ flex:1; margin:0; font-size:14px; } .rf-text p span{ color:var(--accent); font-size:12.5px; word-break:break-all; }
.rf-banners{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-top:12px; } .rf-banners figure{ margin:0; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:var(--surface-raised); } .rf-banners img{ display:block; width:100%; height:170px; object-fit:contain; background:var(--ink); } .rf-banners figcaption{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; font-size:12px; color:var(--muted); } .rf-banners .rf-btn{ padding:6px 10px; font-size:12.5px; }
.rf-empty{ display:grid; place-items:center; gap:12px; padding:70px 20px; text-align:center; color:var(--muted); } .rf-spin{ width:28px; height:28px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:rf-spin .8s linear infinite; } @keyframes rf-spin{ to{ transform:rotate(360deg); } }
.rf-dialog{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); } .rf-dialog-box{ width:min(420px,100%); padding:22px; border-radius:20px; border:1px solid var(--border); background:var(--surface); display:grid; gap:12px; } .rf-dialog-box h3{ margin:0; font-size:20px; }
.rf-dialog-box label{ display:grid; gap:6px; font-size:12.5px; color:var(--muted); } .rf-dialog-box input, .rf-dialog-box select{ padding:11px 12px; border-radius:12px; border:1px solid var(--border); background:var(--ink); color:var(--text); font:inherit; font-size:15px; } .rf-dialog-box input:focus, .rf-dialog-box select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.rf-dialog-err{ color:var(--stake); font-size:13px; min-height:1em; } .rf-dialog-actions{ display:flex; justify-content:flex-end; gap:8px; }
@media (max-width: 760px){ .rf-wallet{ grid-template-columns:1fr 1fr; } .rf-w.main{ grid-column:1 / -1; } .rf-linkbox{ grid-template-columns:1fr; } .rf-link .rf-btn span{ display:none; } .rf-table th, .rf-table td{ padding:9px 8px; } .rf-text{ flex-direction:column; align-items:stretch; } }
/* phones: the rates are not a wide table any more — one block per rule, its layers side by side with their names, nothing to scroll sideways */
@media (max-width: 560px){ .rf-table-wrap{ overflow-x:visible; } .rf-table, .rf-table tbody{ display:block; width:100%; } .rf-table thead{ display:none; }
  .rf-table tbody tr{ display:grid; grid-template-columns:repeat(auto-fit, minmax(72px, 1fr)); gap:10px 12px; padding:14px 0; border-bottom:1px solid var(--border); } .rf-table tbody tr:last-child{ border-bottom:0; }
  .rf-table tbody th, .rf-table tbody td{ display:block; padding:0; border:0; min-width:0; } .rf-table tbody th{ grid-column:1 / -1; }
  .rf-table td{ white-space:normal; font-size:15px; } .rf-table td::before{ content:attr(data-l); display:block; margin-bottom:3px; font-family:var(--font-body, inherit); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .rf-table td s{ display:block; margin:2px 0 0; } }
@media (max-width: 380px){ .rf-table td::before{ display:flex; align-items:flex-end; min-height:2.9em; } /* layer names wrap on two lines here: keep the figures on one line */ .rf-wallet{ grid-template-columns:1fr; } .rf-share-b span{ display:none; } .rf-share-b{ padding:10px 12px; } }

/* ---- account under review (js/review.js): a calm notice, the same in every template and in the Telegram app ---- */
.review-notice{ display:flex; gap:12px; align-items:flex-start; margin:0 0 16px; padding:12px 14px; border-radius:14px; border:1px solid rgba(245,159,0,.45); background:rgba(245,159,0,.1); color:inherit; max-width:100%; min-width:0; }
.review-notice b{ display:block; font-size:14px; line-height:1.3; } .review-notice p{ margin:3px 0 0; font-size:13px; line-height:1.45; opacity:.85; overflow-wrap:anywhere; }
.review-notice-ico{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#f59f00; background:rgba(245,159,0,.16); } .review-notice-ico.lg{ width:52px; height:52px; border-radius:16px; margin:0 auto 12px; } .review-notice-ico.lg svg{ width:28px; height:28px; }
.review-pop{ position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); animation:reviewIn .16s ease-out; }
.review-pop-card{ width:min(400px,100%); padding:24px 22px 20px; border-radius:20px; text-align:center; background:#15181f; color:#f3f4f6; border:1px solid rgba(255,255,255,.08); box-shadow:0 24px 60px rgba(0,0,0,.5); }
.review-pop-card h3{ margin:0 0 8px; font-size:18px; } .review-pop-card p{ margin:0 0 18px; font-size:14px; line-height:1.5; opacity:.85; overflow-wrap:anywhere; } .review-pop-card .btn{ min-width:140px; }
@keyframes reviewIn{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- contact means: the round button at the bottom corner, the "Contact us" footer link and the sheet (js/contact.js) ---------- */
/* the portal is a fixed, clipped layer over the page: nothing inside it (the sheet parked below the screen, the backdrop) can ever widen or lengthen the page on any phone browser */
#contact-portal{ position:fixed; inset:0; z-index:290; overflow:hidden; pointer-events:none; contain:strict; }
#contact-portal > *{ pointer-events:auto; }
/* the headphones in the header: a round button like the bell; every ~7 s the headphones nod and a soft ring breathes out (support is here) */
.contact-hdr{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:36px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--accent); cursor:pointer; flex:none; -webkit-tap-highlight-color:transparent; }
.contact-hdr:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.contact-hdr .ch-ic{ width:20px; height:20px; transform-origin:50% 60%; animation:chNod 7s ease-in-out infinite; }
.contact-hdr .ch-ring{ position:absolute; inset:-1px; border-radius:inherit; border:1.5px solid var(--accent); opacity:0; pointer-events:none; animation:chRing 7s ease-out infinite; }
.contact-hdr .ch-dot{ position:absolute; top:6px; inset-inline-end:6px; width:7px; height:7px; border-radius:50%; background:var(--win); box-shadow:0 0 0 2px var(--surface); animation:chDot 2.4s ease-in-out infinite; }
@keyframes chNod{ 0%, 80%, 100%{ transform:rotate(0) } 84%{ transform:rotate(-14deg) } 88%{ transform:rotate(12deg) } 92%{ transform:rotate(-8deg) } 96%{ transform:rotate(4deg) } }
@keyframes chRing{ 0%, 78%{ transform:scale(1); opacity:0 } 82%{ opacity:.85 } 100%{ transform:scale(1.9); opacity:0 } }
@keyframes chDot{ 0%, 100%{ opacity:1 } 50%{ opacity:.35 } }
.footer-contact{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--muted); font:600 12px/1 var(--font-body); cursor:pointer; transition:color .15s, border-color .15s; }
.footer-contact:hover{ color:var(--text); border-color:var(--text); }
.contact-back{ position:absolute; inset:0; z-index:3; background:rgba(4,6,10,.58); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .25s, visibility 0s .25s; }
#contact-portal.open .contact-back{ opacity:1; visibility:visible; transition:opacity .25s; }
.contact-sheet{ position:absolute; z-index:4; left:50%; top:50%; visibility:hidden; width:min(400px, calc(100% - 32px)); padding:22px 22px 20px; border-radius:22px; border:1px solid var(--border); background:var(--surface-raised); color:var(--text); box-shadow:0 30px 80px rgba(0,0,0,.55); transform:translate(-50%,-50%) scale(.96); opacity:0; pointer-events:none; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s; }
#contact-portal.open .contact-sheet{ transform:translate(-50%,-50%); opacity:1; visibility:visible; pointer-events:auto; }
.cs-grab{ display:none; }
.cs-x{ position:absolute; top:12px; inset-inline-end:12px; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; } .cs-x:hover{ background:rgba(255,255,255,.08); color:var(--text); }
.cs-kicker{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.cs-head h3{ margin:0 40px 6px 0; font-family:var(--font-display); font-size:21px; line-height:1.15; overflow-wrap:anywhere; } [dir="rtl"] .cs-head h3{ margin:0 0 6px 40px; }
.cs-head p{ margin:0 0 16px; font-size:13px; color:var(--muted); }
.cs-opts{ display:grid; gap:10px; }
.cs-opt{ display:flex; align-items:center; gap:14px; padding:11px 12px; border-radius:16px; border:1px solid var(--border); background:var(--surface); color:var(--text); text-decoration:none; transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, background .18s; animation:contactRow .35s cubic-bezier(.2,.8,.2,1) both; }
.cs-opt:nth-child(2){ animation-delay:.06s; }
@keyframes contactRow{ from{ opacity:0; transform:translateY(8px); } }
.cs-opt:hover{ border-color:var(--brand); background:color-mix(in srgb, var(--brand) 12%, var(--surface)); transform:translateY(-1px); }
.cs-logo{ width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:13px; background:#fff; color:var(--brand); box-shadow:0 4px 14px rgba(0,0,0,.25); } .cs-logo svg{ width:28px; height:28px; fill:currentColor; }
.cs-txt{ flex:1; min-width:0; display:grid; gap:2px; } .cs-txt b{ font-size:15px; } .cs-txt small{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted); direction:ltr; text-align:start; }
.cs-arrow{ color:var(--muted); flex:none; } [dir="rtl"] .cs-arrow{ transform:scaleX(-1); }
@media (max-width:760px){
  .contact-hdr{ width:34px; height:34px; }
  .contact-sheet{ left:0; right:0; top:auto; bottom:0; width:auto; border-radius:22px 22px 0 0; border-bottom:0; padding:8px 18px calc(18px + env(safe-area-inset-bottom)); transform:translateY(100%); }
  #contact-portal.open .contact-sheet{ transform:none; }
  .cs-grab{ display:grid; place-items:center; padding:4px 0 10px; } .cs-grab i{ width:40px; height:4px; border-radius:2px; background:var(--muted); opacity:.45; }
  .cs-x{ top:10px; }
}
@media (prefers-reduced-motion: reduce){ .contact-hdr, .contact-hdr .ch-ic, .contact-hdr .ch-ring, .ch-dot, .cs-opt{ animation:none; } .contact-sheet, .contact-back, .cs-opt{ transition:none; } }