/* Shared styles for every page.
   Tokens, cards, buttons and motion come from prototype/baini-wbainak.html; the
   brand layer (glow, gradient wordmark, night hero) is new for Samrah. */
:root{
  --bg:#E9EFEE; --surface:#FBFCFB; --ink:#15302E; --muted:#5B6F6C; --line:rgba(21,48,46,.12);
  --river:#1F5E5A; --river-soft:#D3E4E1; --crema:#A9662A; --crema-soft:#F1E1CF; --deep:#463A6B; --deep-soft:#E1DCEE;
  --danger:#A23B2C; --danger-soft:#F5DDD8;
  --on-accent:#FFFFFF; --shadow:0 1px 2px rgba(21,48,46,.06),0 12px 32px -12px rgba(21,48,46,.22);
  --glow-a:rgba(47,163,154,.20); --glow-b:rgba(140,120,230,.18); --header:rgba(233,239,238,.78);
  --brand-grad:linear-gradient(90deg,#1F7A72,#4F6FD0 60%,#7E62D6);
  --f-display:"Reem Kufi","IBM Plex Sans Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif;
  --f-read:"Noto Naskh Arabic","Geeza Pro","Arial",serif;
  --f-ui:"IBM Plex Sans Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D1918; --surface:#152422; --ink:#E6EEEC; --muted:#8FA3A0; --line:rgba(230,238,236,.12);
  --river:#62B2A9; --river-soft:#1B3633; --crema:#E2A466; --crema-soft:#33261A; --deep:#ADA0DA; --deep-soft:#262139;
  --danger:#E8897A; --danger-soft:#3A1F1A;
  --on-accent:#0D1918; --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 36px -14px rgba(0,0,0,.6); color-scheme:dark;
  --glow-a:rgba(47,163,154,.22); --glow-b:rgba(140,120,230,.22); --header:rgba(13,25,24,.78);
  --brand-grad:linear-gradient(90deg,#4FC2B6,#7B9BF0 60%,#B39CF5);}}
:root[data-theme="dark"]{
  --bg:#0D1918; --surface:#152422; --ink:#E6EEEC; --muted:#8FA3A0; --line:rgba(230,238,236,.12);
  --river:#62B2A9; --river-soft:#1B3633; --crema:#E2A466; --crema-soft:#33261A; --deep:#ADA0DA; --deep-soft:#262139;
  --danger:#E8897A; --danger-soft:#3A1F1A;
  --on-accent:#0D1918; --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 36px -14px rgba(0,0,0,.6); color-scheme:dark;
  --glow-a:rgba(47,163,154,.22); --glow-b:rgba(140,120,230,.22); --header:rgba(13,25,24,.78);
  --brand-grad:linear-gradient(90deg,#4FC2B6,#7B9BF0 60%,#B39CF5);}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.6;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main{flex:1;overflow-x:clip}
.site-footer,.site-header{overflow-x:clip}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:var(--river)}
img,svg{flex:none}
:focus-visible{outline:2px solid var(--crema);outline-offset:2px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:18px}
.wrap.narrow{max-width:600px}
.tone-river{--tone:var(--river);--tone-soft:var(--river-soft)}
.tone-crema{--tone:var(--crema);--tone-soft:var(--crema-soft)}
.tone-deep{--tone:var(--deep);--tone-soft:var(--deep-soft)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:15;background:transparent;border-bottom:1px solid transparent;transition:background-color .2s,border-color .2s}
.site-header.scrolled{background:var(--header);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:var(--line)}
.site-header .hbar{display:flex;align-items:center;gap:10px;min-height:62px;padding-top:env(safe-area-inset-top,0px)}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit;margin-inline-end:auto}
.logo svg{width:36px;height:36px}
.wordmark{font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:3px}
.pill{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 15px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ink)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--river)}
.cur-pill{padding:0 11px;gap:6px}
.cur-pill .code{font-size:14px}
.flag{flex:none;border-radius:3px;box-shadow:0 0 0 1px var(--line);object-fit:cover;display:block}
.cur-list{list-style:none;margin:0;padding:0}
.cur-list button{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:0 6px;border-bottom:1px solid var(--line);text-align:right}
.cur-list li:last-child button{border-bottom:0}
.cur-list .t{flex:1;min-width:0;line-height:1.35}
.cur-list b{display:block;font-weight:600;font-size:16.5px}
.cur-list small{color:var(--muted);font-size:13px}
.cur-list .sym{color:var(--muted);font-weight:600;font-size:15px}
.cur-list .ck{width:24px;color:var(--river);display:grid;place-items:center}
.cur-list button[aria-checked="true"] b{color:var(--river)}
.menu-cur{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:0 6px;border-bottom:1px solid var(--line);text-align:right;font-weight:600;font-size:17px;color:var(--ink)}
.menu-cur .t{flex:1;line-height:1.3}
.menu-cur small{display:block;color:var(--muted);font-size:13px;font-weight:500}
.price-note{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
@media (max-width:359px){.wordmark{display:none}}
.icon-btn{width:42px;height:42px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;flex:none;color:var(--ink);text-decoration:none}
.desk-nav{display:none;gap:4px}
.desk-nav a{padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:500;font-size:15px}
.desk-nav a[aria-current="page"],.desk-nav a:hover{color:var(--ink);background:var(--surface)}
@media (min-width:760px){.desk-nav{display:flex}.menu-btn{display:none}}

/* ---------- footer ---------- */
.site-footer{margin-top:40px;border-top:1px solid var(--line);padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:14px}
.site-footer .top{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.site-footer .tag{font-family:var(--f-read);font-size:16px}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-bottom:18px}
.foot-links a{color:var(--ink);text-decoration:none;min-height:36px;display:flex;align-items:center}
.pay-marks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pay-marks span{border:1px solid var(--line);border-radius:8px;padding:2px 9px;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface)}
.copy{font-size:12.5px}

/* ---------- sheets (menu, dialogs) ---------- */
/* One pop-up template: header (title, subtitle, close), a body that is the only part
   that scrolls, and a footer for the buttons. Bottom sheet on phones, centred window
   on wider screens. The outer box clips everything, so corners stay round. */
.scrim{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(6,14,13,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet:focus{outline:none}
.sheet{direction:rtl;text-align:right;position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow:hidden;background:var(--surface);border-radius:28px 28px 0 0;box-shadow:0 -12px 40px -12px rgba(0,0,0,.35);animation:sheetUp .3s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-head{flex:none;position:relative;display:flex;align-items:flex-start;gap:12px;padding:24px 22px 12px;transition:box-shadow .2s ease}
.sheet .grab{position:absolute;top:9px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:5px;background:var(--line)}
.sheet-head .titles{flex:1;min-width:0}
.sheet h2{font-family:var(--f-display);font-weight:500;font-size:26px;line-height:1.3;margin:0;color:var(--river)}
.sheet .sub{color:var(--muted);margin:4px 0 0}
.sheet-close{flex:none;width:40px;height:40px;margin-top:-2px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--ink)}
.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:6px 22px 18px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sheet-body:empty{display:none}
.sheet-body::-webkit-scrollbar{width:10px}
.sheet-body::-webkit-scrollbar-track{background:transparent}
.sheet-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;border:3px solid var(--surface)}
.sheet-foot{flex:none;padding:14px 22px calc(16px + env(safe-area-inset-bottom,0px));background:var(--surface)}
.sheet-foot .note{margin:10px 0 0}
/* Dividers only appear when the middle really scrolls. */
.sheet.scrolls .sheet-foot{border-top:1px solid var(--line)}
.sheet.scrolled .sheet-head{box-shadow:0 1px 0 var(--line)}
@media (min-width:600px){
  .scrim{align-items:center;padding:24px}
  .sheet{border-radius:28px;max-height:min(88vh,860px);box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
  .sheet .grab{display:none}
  .sheet-head{padding:26px 28px 12px}
  .sheet-body{padding:6px 28px 20px}
  .sheet-foot{padding:16px 28px 22px}
}
@media (hover:hover){.sheet-close:hover{background:var(--line)}}
.menu-list{list-style:none;margin:0 0 10px;padding:0}
.menu-list a{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 6px;text-decoration:none;color:var(--ink);font-weight:600;font-size:17px;border-bottom:1px solid var(--line)}
.menu-list a .ic{width:36px;height:36px;border-radius:11px;background:var(--river-soft);color:var(--river);display:grid;place-items:center}
.menu-list a[aria-current="page"]{color:var(--river)}
.menu-small{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;margin-top:12px}
.menu-small a{color:var(--muted);text-decoration:none;min-height:36px;display:inline-flex;align-items:center}

/* ---------- buttons ---------- */
.btn{flex:1;min-height:54px;border-radius:16px;font-weight:600;font-size:16.5px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;text-decoration:none;transition:transform .1s ease,box-shadow .2s ease;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--tone,var(--river));color:var(--on-accent)}
.btn.glow{box-shadow:0 10px 26px -10px var(--tone,var(--river))}
.btn.soft{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.btn.ghost{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.btn.danger{background:var(--danger);color:#fff}
.btn.block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:default;box-shadow:none}
.row{display:flex;gap:10px}
.linkbtn{color:var(--river);text-decoration:underline;text-underline-offset:4px;font-size:14.5px;min-height:44px;display:inline-flex;align-items:center}
.linkbtn[disabled]{color:var(--muted);text-decoration:none;cursor:default}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--muted);text-decoration:none;font-size:15px}

/* ---------- home hero ---------- */
.hero{position:relative;padding-block:30px 10px;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;inset:-40px -60px 0;background:radial-gradient(42% 52% at 78% 18%,var(--glow-a),transparent 70%),radial-gradient(40% 48% at 22% 48%,var(--glow-b),transparent 70%);pointer-events:none}
.eyebrow{font-size:14px;color:var(--crema);font-weight:600}
.hero .title{font-family:var(--f-display);font-weight:700;font-size:clamp(44px,12.5vw,72px);line-height:1.12;margin:8px 0 12px;text-wrap:balance}
.hero .title em{font-style:normal;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-family:var(--f-read);font-size:19px;color:var(--muted);margin:0;max-width:34ch}
.hero .cta{display:flex;gap:10px;margin-top:22px}
.hero .cta .btn{flex:1}
.trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px;font-size:13.5px;color:var(--muted)}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust svg{color:var(--river)}
.hero-orbit{position:absolute;z-index:-1;left:-30px;top:6px;width:170px;height:170px;opacity:.55;pointer-events:none}
.hero-orbit circle{fill:none;stroke-width:1.2}
.hero-orbit .spin{transform-origin:85px 85px;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:34px 0 14px}
.sec-head h2{font-family:var(--f-display);font-weight:700;font-size:26px;margin:0}
.sec-head a,.sec-head span{color:var(--muted);font-size:14px}

/* ---------- game cards ---------- */
.games{display:flex;flex-direction:column;gap:14px}
.game{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:22px 20px 18px}
.game .wm{position:absolute;width:200px;height:130px;left:-40px;bottom:-34px;pointer-events:none}
.game .wm circle{fill:none;stroke-width:6}
.game .kicker{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tone);font-weight:600;position:relative}
.game h3{font-family:var(--f-display);font-weight:700;font-size:38px;line-height:1.2;margin:4px 0 6px;color:var(--tone);position:relative}
.game h3 a{color:inherit;text-decoration:none}
.game p{font-family:var(--f-read);font-size:18px;color:var(--muted);margin:0 0 16px;position:relative}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--tone);color:var(--on-accent)}
.badge.soft{background:var(--tone-soft);color:var(--tone)}
.badge.mine{background:var(--river);color:var(--on-accent)}
.facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--muted);margin:-6px 0 14px;position:relative}
.facts span{display:inline-flex;align-items:center;gap:6px}
.facts span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tone)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;position:relative}
.chips span{background:var(--tone-soft);color:var(--tone);border-radius:999px;padding:3px 11px;font-size:13px;font-weight:600}
.chips span.free{background:var(--crema);color:var(--on-accent)}
.divider{height:1px;background:var(--line);margin:0 0 14px;position:relative}
.price{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;position:relative}
.price b{font-family:var(--f-display);font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.price span{font-size:13.5px;color:var(--muted)}
.price small{display:block;font-size:12.5px;color:var(--muted)}
.actions{display:flex;gap:10px;position:relative}
.actions .btn{flex:1;padding:0 10px}

.game.soon{padding:20px 20px 16px;box-shadow:none}
.game.soon h3{font-size:32px}
.game .teaser{font-family:var(--f-read);font-size:17px;color:var(--ink);background:var(--tone-soft);border-radius:16px;padding:12px 14px;margin:0 0 14px;position:relative}
.game .teaser small{display:block;font-family:var(--f-ui);font-size:12px;color:var(--tone);font-weight:600;margin-bottom:2px}
.live-teaser{display:none}
.live-info,.live-buy{position:relative}
.notify[aria-pressed="true"]{background:var(--tone-soft);border-color:transparent;color:var(--tone)}

/* ---------- how / why / faq teaser ---------- */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px}
.steps .sn{width:36px;height:36px;border-radius:12px;background:var(--crema-soft);color:var(--crema);display:grid;place-items:center;font-family:var(--f-display);font-size:19px;flex:none}
.steps b{display:block;font-weight:600}
.steps span{color:var(--muted);font-size:14.5px}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.why-grid div{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px}
.why-grid .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--tone-soft);color:var(--tone);margin-bottom:8px}
.why-grid b{display:block;font-weight:600;line-height:1.4;margin-bottom:2px}
.why-grid span{color:var(--muted);font-size:13.5px;line-height:1.5;display:block}

/* ---------- inner pages ---------- */
.page{padding-top:18px}
.page-head{position:relative;padding-block:14px 8px;isolation:isolate}
.page-head::before{content:"";position:absolute;z-index:-1;inset:-40px -40px -10px;background:radial-gradient(closest-side at 82% 45%,var(--glow-a),transparent);pointer-events:none}
.page-title{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,9vw,46px);line-height:1.2;margin:4px 0 8px;color:var(--river)}
.summary{background:var(--river-soft);border-radius:20px;padding:16px 18px;margin:18px 0}
.summary h2{font-family:var(--f-display);font-weight:500;font-size:19px;margin:0 0 6px;color:var(--river)}
.summary ul{margin:0;padding-inline-start:20px}
.summary li{margin:4px 0}
.prose{font-size:16.5px;line-height:1.9}
.prose h2{font-family:var(--f-display);font-weight:500;font-size:22px;margin:28px 0 6px;color:var(--ink)}
.prose h3{font-size:17px;margin:20px 0 4px}
.prose p{margin:0 0 12px}
.prose ul,.prose ol{margin:0 0 12px;padding-inline-start:22px}
.prose li{margin:4px 0}
.ph{background:var(--crema-soft);color:var(--crema);border-radius:6px;padding:0 5px;font-weight:600}
.faq{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:0 16px;transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--river);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > :not(summary){color:var(--muted);margin:0 0 14px}
.contact-grid{display:grid;gap:12px;margin:18px 0}
.contact-grid > *{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px}
.contact-grid h2,.contact-grid h3{font-family:var(--f-display);font-weight:500;font-size:21px;margin:0 0 4px}
.contact-grid p{color:var(--muted);margin:0 0 12px}
.contact-grid .btn{width:100%}

/* ---------- panels and forms ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px 18px;box-shadow:var(--shadow);margin-top:18px}
.panel h1{font-family:var(--f-display);font-weight:700;font-size:34px;color:var(--river);margin:0 0 4px;line-height:1.25}
.panel h2{font-family:var(--f-display);font-weight:500;font-size:22px;margin:0 0 4px}
.panel .sub{color:var(--muted);margin:0 0 18px}
.lbl{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.field-input{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:14px;min-height:54px;font-size:17px;padding:0 14px}
.field-input:focus{outline:none;border-color:var(--river)}
.phone-row{display:flex;gap:8px;direction:ltr}
.phone-row select,.phone-row input,.code-input{border:1px solid var(--line);background:var(--bg);border-radius:14px;min-height:54px;font-size:18px}
.phone-row select{flex:none;width:112px;padding:0 8px;direction:ltr;-webkit-appearance:none;appearance:none;text-align:center}
.phone-row input{flex:1;min-width:0;padding:0 14px;direction:ltr;text-align:left;letter-spacing:.5px}
.code-input{width:100%;padding:0 14px;direction:ltr;text-align:center;font-size:28px;letter-spacing:10px;font-variant-numeric:tabular-nums;font-family:var(--f-ui)}
.phone-row input:focus,.phone-row select:focus,.code-input:focus{outline:none;border-color:var(--river)}
.consent{font-size:13px;color:var(--muted);margin:12px 0 16px}
.msg{font-size:14.5px;border-radius:12px;padding:10px 12px;margin:12px 0 0}
.msg.err{background:var(--danger-soft);color:var(--danger)}
.msg.ok{background:var(--river-soft);color:var(--river)}
.dev{background:var(--crema-soft);color:var(--crema);border-radius:14px;padding:10px 14px;margin:0 0 14px;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.dev b{font-size:24px;letter-spacing:4px;font-variant-numeric:tabular-nums}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
.note{font-size:13.5px;color:var(--muted);text-align:center;margin:16px 8px 0}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted);font-size:14.5px}
.kv b{font-weight:600}
.list{list-style:none;margin:0;padding:0}
.empty{text-align:center;padding:30px 14px;color:var(--muted)}
.empty svg{color:var(--river);margin-bottom:8px}
.empty b{display:block;color:var(--ink);font-family:var(--f-display);font-weight:500;font-size:21px;margin-bottom:4px}

/* ---------- toast and skeleton ---------- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 18px;font-size:15px;max-width:calc(100% - 32px);box-shadow:var(--shadow);z-index:50;animation:toastUp .25s ease;text-align:center}
@keyframes toastUp{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.skeleton{border-radius:26px;background:linear-gradient(90deg,var(--surface),var(--line),var(--surface));background-size:200% 100%;animation:shimmer 1.4s ease infinite;opacity:.7}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- game page ---------- */
.gp-hero{position:relative;overflow:hidden;border-radius:28px;padding:26px 20px 22px;margin-top:16px;color:#EAF2F1;background:radial-gradient(90% 80% at 85% 0%,rgba(79,194,182,.35),transparent 60%),radial-gradient(80% 70% at 10% 100%,rgba(140,120,230,.35),transparent 60%),#0F1C2B;isolation:isolate}
.gp-hero.tone-crema{background:radial-gradient(90% 80% at 85% 0%,rgba(226,164,102,.38),transparent 60%),radial-gradient(80% 70% at 10% 100%,rgba(79,194,182,.25),transparent 60%),#1D1712}
.gp-hero.tone-deep{background:radial-gradient(90% 80% at 85% 0%,rgba(173,160,218,.4),transparent 60%),radial-gradient(80% 70% at 10% 100%,rgba(226,164,102,.25),transparent 60%),#16132A}
.gp-hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1px 1px at 18% 22%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 64% 68%,#fff7 50%,transparent 51%),radial-gradient(1.4px 1.4px at 86% 30%,#fffb 50%,transparent 51%),radial-gradient(1px 1px at 38% 84%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 8% 60%,#fff7 50%,transparent 51%)}
.gp-hero .kicker{color:#F6D3A1;font-weight:600;font-size:14px}
.gp-hero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(46px,13vw,68px);line-height:1.1;margin:6px 0 10px}
.gp-hero p{font-family:var(--f-read);font-size:19px;color:rgba(234,242,241,.8);margin:0 0 16px}
.gp-hero .facts{color:rgba(234,242,241,.75);margin:0}
.gp-hero .facts span::before{background:#F6D3A1}
.outline{display:flex;flex-direction:column;gap:10px}
.outline li{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 14px}
.outline .num{width:40px;height:40px;border-radius:12px;background:var(--tone-soft);color:var(--tone);display:grid;place-items:center;font-family:var(--f-display);font-size:21px;flex:none}
.outline .t{flex:1;min-width:0}
.outline b{display:block;font-family:var(--f-display);font-weight:500;font-size:19px;line-height:1.3}
.outline small{color:var(--muted);font-size:13px;display:block;line-height:1.5}
.outline .state{flex:none;color:var(--muted)}
.samples{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-inline:-18px;padding-inline:18px;scrollbar-width:none}
.samples::-webkit-scrollbar{display:none}
.sample{flex:0 0 82%;scroll-snap-align:center;position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.sample q{font-family:var(--f-read);font-weight:600;font-size:21px;line-height:1.7;quotes:"«" "»"}
.sample small{color:var(--tone);font-weight:600;font-size:13px}
.buybar{position:sticky;bottom:0;z-index:12;margin-top:24px;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 70%,transparent)}
.buybar .inner{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:10px;box-shadow:var(--shadow)}
.buybar .p{padding-inline:8px;line-height:1.2}
.buybar .p b{font-family:var(--f-display);font-size:22px;display:block}
.buybar .p small{color:var(--muted);font-size:12px}

/* ---------- my games / account ---------- */
.owned{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow);text-decoration:none;color:inherit;margin-bottom:12px}
.owned .cover{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:var(--tone-soft);flex:none}
.owned .t{flex:1;min-width:0}
.owned b{display:block;font-family:var(--f-display);font-weight:700;font-size:23px;color:var(--tone);line-height:1.25}
.owned small{display:block;color:var(--muted);font-size:13px}
.bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--tone);border-radius:6px;transition:width .4s ease}
.purchase{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.purchase:last-child{border-bottom:0}
.purchase small{display:block;color:var(--muted);font-size:13px}

/* ---------- checkout ---------- */
.gateway{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);margin-top:18px}
.gateway .gw-top{background:repeating-linear-gradient(-45deg,var(--crema-soft),var(--crema-soft) 12px,transparent 12px,transparent 24px),var(--surface);padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--crema);text-align:center}
.gateway .gw-body{padding:18px}
.methods{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0 18px}
.methods label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;border:1px solid var(--line);border-radius:14px;font-weight:600;font-size:14px;cursor:pointer;background:var(--bg)}
.methods input{position:absolute;opacity:0;pointer-events:none}
.methods input:checked + label{border-color:var(--river);box-shadow:inset 0 0 0 1px var(--river);color:var(--river)}
.celebrate{text-align:center;padding:26px 8px 8px}
.celebrate .big{font-family:var(--f-display);font-weight:700;font-size:36px;color:var(--river);margin:10px 0 4px;line-height:1.25}
.celebrate p{color:var(--muted);margin:0 0 18px}
.spinner{width:42px;height:42px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--river);animation:spin .9s linear infinite;margin:20px auto}


/* ---------- home: hero art, FAQ split, closing band ---------- */
.hero-text{position:relative}
.hero-art{display:none}
.art-mark svg{width:100%;height:100%}
.qcard{position:absolute;width:64%;background:#FBFCFB;color:#15302E;border-radius:20px;padding:14px 18px 16px;box-shadow:0 22px 44px -18px rgba(0,0,0,.6);font-family:var(--f-read);font-weight:600;font-size:clamp(15px,1.25vw,18px);line-height:1.75}
.qcard small{display:block;font-family:var(--f-ui);font-size:12.5px;font-weight:600;color:var(--tone);margin-bottom:2px}
.qcard.tone-river{--tone:#1F5E5A}
.qcard.tone-crema{--tone:#A9662A}
.qcard.tone-deep{--tone:#463A6B}
.qcard.c1{top:9%;right:7%;rotate:2.5deg;animation:float 7s ease-in-out infinite}
.qcard.c2{top:41%;left:6%;rotate:-3.5deg;animation:float 8s ease-in-out -2s infinite}
.qcard.c3{bottom:8%;right:13%;rotate:1.5deg;animation:float 9s ease-in-out -4s infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}

.faq-split .faq-intro h2{font-family:var(--f-display);font-weight:700;font-size:26px;margin:34px 0 4px}
.faq-split .faq-intro p{color:var(--muted);margin:0}
.faq-split .faq{margin-top:12px}

.cta-band{position:relative;overflow:hidden;isolation:isolate;margin:40px 0 0;border-radius:28px;padding:26px 22px;color:#EAF2F1;background:radial-gradient(90% 90% at 90% 0%,rgba(79,194,182,.35),transparent 60%),radial-gradient(80% 80% at 0% 100%,rgba(140,120,230,.38),transparent 60%),#0F1C2B;display:flex;flex-direction:column;gap:16px}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1px 1px at 12% 30%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 58% 72%,#fff7 50%,transparent 51%),radial-gradient(1.4px 1.4px at 84% 24%,#fffb 50%,transparent 51%),radial-gradient(1px 1px at 34% 86%,#fff6 50%,transparent 51%)}
.cta-band h2{font-family:var(--f-display);font-weight:700;font-size:30px;margin:0 0 4px;line-height:1.25}
.cta-band p{margin:0;color:rgba(234,242,241,.8);font-family:var(--f-read);font-size:17px}
.cta-band .btn{--tone:#62B2A9;color:#0D1918;flex:none}

/* ---------- footer columns ---------- */
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.foot-brand{grid-column:1/-1;display:flex;flex-direction:column;gap:10px}
.foot-brand .tag{font-family:var(--f-read);font-size:16px;margin:0}
.foot-brand .pay-marks{margin:4px 0 0}
.foot-col{display:flex;flex-direction:column}
.foot-col h2{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 4px}
.foot-col a{color:var(--ink);text-decoration:none;min-height:38px;display:flex;align-items:center}
.site-footer .copy{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}

/* ---------- game page: buy panel ---------- */
.gp-mark{display:none}
.gp-aside .buy-card{display:none}
.buy-card{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:22px;box-shadow:var(--shadow)}
.buy-card .kicker{display:flex;align-items:center;gap:6px;color:var(--tone);font-weight:600;font-size:14px}
.buy-card .big-price{font-family:var(--f-display);font-weight:700;font-size:44px;line-height:1.15;margin:6px 0 2px}
.buy-card > small{display:block;color:var(--muted);font-size:13.5px;margin-bottom:16px}
.buy-card .btn + .btn{margin-top:10px}
.ticks{list-style:none;margin:18px 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.ticks li{display:flex;align-items:flex-start;gap:8px}
.ticks svg{color:var(--river);margin-top:2px}
.gp-aside .panel{margin-top:16px}
.notify-panel{text-align:center}

/* ---------- login: split screen ---------- */
.auth-art{display:none}
.auth .auth-main{max-width:520px;margin:0 auto}
.cc-btn{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:54px;padding:0 10px 0 12px;border:1px solid var(--line);background:var(--bg);border-radius:14px;font-size:17px;direction:ltr;color:var(--ink)}
.cc-btn:focus-visible{border-color:var(--river)}

/* ---------- inner pages: grids ---------- */
.owned-grid{display:grid;gap:12px}
.owned-grid .owned{margin-bottom:0}
.owned-grid > .panel{margin-top:0}
.acct-grid{display:grid;gap:16px;margin-top:6px}
.acct-grid .panel{margin-top:0}
.toc{display:none}

/* ---------- customer reviews ---------- */
.stars{position:relative;display:inline-block;line-height:0;vertical-align:middle;color:var(--line)}
.stars .bg,.stars .fg{display:inline-flex;gap:2px;white-space:nowrap}
.stars .fg{position:absolute;top:0;inset-inline-start:0;overflow:hidden;color:#E0A100}
.rv-sum{display:flex;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.rv-avg{flex:none;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:104px}
.rv-avg b{font-family:var(--f-display);font-weight:700;font-size:46px;line-height:1}
.rv-avg small{color:var(--muted);font-size:13px}
.rv-dist{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.rv-dist li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.rv-dist .k{display:inline-flex;align-items:center;gap:2px;width:30px;flex:none}
.rv-dist .k svg{color:#E0A100}
.rv-dist .bar{flex:1;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.rv-dist .bar i{display:block;height:100%;border-radius:99px;background:#E0A100}
.rv-dist .n{width:22px;text-align:left;flex:none}
.rv-cta{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.rv-cta .btn{flex:none}
.rv-why,.rv-fine{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:13.5px;margin:0}
.rv-why svg,.rv-fine svg{flex:none;color:var(--river);margin-top:2px}
.rv-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rv{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px}
.rv.mine{border-color:var(--river)}
.rv-head{display:flex;align-items:center;gap:10px}
.rv-av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--river-soft);color:var(--river);font-family:var(--f-display);font-size:19px}
.rv-av.anon{background:var(--line);color:var(--muted)}
.rv-who{flex:1;min-width:0;line-height:1.35}
.rv-who b{display:block;font-weight:600;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-you{color:var(--muted);font-weight:500;font-size:13px}
.rv-ver{display:inline-flex;align-items:center;gap:3px;color:var(--river);font-size:12.5px;font-weight:600}
.rv-ver svg{width:14px;height:14px}
.rv-head time{flex:none;color:var(--muted);font-size:12.5px}
.rv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px}
.rv-word{font-size:13.5px;font-weight:600}
.rv-game{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--river);background:var(--river-soft);border-radius:99px;padding:3px 10px;text-decoration:none}
.rv-game svg{width:15px;height:15px}
.rv-body{font-family:var(--f-read);font-size:17px;line-height:1.8;margin:8px 0 0;white-space:pre-line;overflow-wrap:anywhere}
.rv-edited{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.rv-hide{display:inline-flex;align-items:center;gap:5px;min-height:40px;margin-top:6px;color:var(--danger);font-size:13px;font-weight:600}
.rv-hide svg{width:16px;height:16px}
.rv-empty{text-align:center;padding:26px 14px;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:20px}
.rv-empty svg{color:var(--river)}
.rv-empty b{display:block;color:var(--ink);font-family:var(--f-display);font-weight:500;font-size:19px;margin:6px 0 2px}
.rv-empty p{margin:0;font-size:14.5px}
.rv-all{width:100%;margin-top:14px}
.rv-hero{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:rgba(234,242,241,.85);text-decoration:none;font-size:14px}
.rv-hero svg{color:#F6D3A1;fill:#F6D3A1;width:18px;height:18px}
.rv-hero b{color:#fff;font-size:16px}
/* the form */
.rv-stars-in,.rv-game-in{border:0;margin:0 0 18px;padding:0;min-width:0}
.rv-stars-in legend,.rv-game-in legend{padding:0}
.opt{color:var(--muted);font-weight:400}
.rv-pick{display:flex;gap:4px;justify-content:center}
.rv-pick label{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;color:var(--line);cursor:pointer;transition:transform .12s ease,color .12s ease}
.rv-pick label.on{color:#E0A100}
.rv-pick label:active{transform:scale(.9)}
.rv-pick input:focus-visible + label{outline:2px solid var(--crema);outline-offset:1px}
.rv-word-out{text-align:center;margin:4px 0 0;font-weight:600;min-height:1.6em;color:var(--muted)}
.rv-chips{display:flex;flex-wrap:wrap;gap:8px}
.rv-chips label{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-weight:600;font-size:14.5px;cursor:pointer}
.rv-chips label svg{width:18px;height:18px}
.rv-chips input:checked + label{border-color:var(--river);background:var(--river-soft);color:var(--river)}
.rv-chips input:focus-visible + label{outline:2px solid var(--crema);outline-offset:2px}
.rv-text{min-height:110px;padding:12px 14px;line-height:1.7;resize:vertical;font-family:var(--f-read)}
.rv-count{text-align:left;font-size:12px;color:var(--muted);min-height:18px;margin:2px 0 10px}
.field-input:disabled{opacity:.5}
.rv-anon{display:flex;align-items:center;gap:10px;min-height:44px;margin:6px 0 4px;font-size:15px;cursor:pointer}
.rv-anon input{width:20px;height:20px;accent-color:var(--river)}
.rv-fine{margin-top:12px}
.rv-del{color:var(--danger);display:flex;margin:6px auto 0}
.sheet-foot .rv-del{justify-content:center}

/* ---------- hover (mouse and trackpad only) ---------- */
@media (hover:hover){
  .btn.primary:hover{filter:brightness(1.07)}
  .btn.soft:hover,.pill:hover,.icon-btn:hover{border-color:var(--river)}
  .game,.owned{transition:transform .2s ease,box-shadow .2s ease}
  .game:hover,.owned:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(21,48,46,.06),0 22px 44px -18px rgba(21,48,46,.3)}
  .foot-col a:hover,.desk-nav a:hover,.menu-small a:hover{color:var(--river)}
  .faq summary:hover{color:var(--river)}
}

/* =========================================================
   Tablet: 760px and up
   ========================================================= */
@media (min-width:760px){
  .wrap{padding-inline:32px}
  .rv-page .rv-list,#reviews-sec .rv-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-cta{flex-direction:row;align-items:center}
  .rv-cta .btn{min-width:220px}
  .rv-all{width:auto;min-width:220px}
  .site-header .hbar{min-height:70px;gap:14px}
  .logo{margin-inline-end:0}
  .desk-nav{margin-inline:auto}

  .hero{padding-block:44px 24px}
  .hero-text{max-width:640px}
  .hero::before{inset:-60px -30px -30px;background:radial-gradient(closest-side at 72% 38%,var(--glow-a),transparent),radial-gradient(closest-side at 34% 70%,var(--glow-b),transparent)}
  .hero .cta{max-width:460px}

  .sec-head{margin:56px 0 18px}
  .sec-head h2{font-size:30px}
  .games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .games .game.live{grid-column:1/-1}
  .game{display:flex;flex-direction:column}
  .game.soon .actions{margin-top:auto}

  .steps.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .steps.how li{flex-direction:column;gap:14px;padding:20px}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .sheet.wide{max-width:780px}

  .faq-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px;align-items:start;margin-top:56px}
  .faq-split .faq-intro{position:sticky;top:100px}
  .faq-split .faq-intro h2{font-size:30px;margin-top:0}
  .faq-split .faq{margin:0}

  .cta-band{flex-direction:row;align-items:center;justify-content:space-between;padding:36px 40px;margin-top:64px}
  .cta-band h2{font-size:36px}

  .site-footer{margin-top:64px;padding-block:40px}
  .foot-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:32px}
  .foot-brand{grid-column:auto}

  /* game page */
  .gp-hero{padding:40px 40px 34px}
  .gp-hero p{max-width:44ch}
  .samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin-inline:0;padding-inline:0}
  .sample{flex:none}
  .swipe-hint{display:none}
  .gp-layout.is-soon{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:start}
  .gp-layout.is-soon .gp-aside{margin-top:30px}
  .is-soon .sample{min-height:0;gap:10px}

  /* inner pages */
  .page{padding-top:28px}
  .page-head{padding-block:22px 12px}
  .owned-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .owned-grid > .panel,.owned-grid > .empty{grid-column:1/-1}
  .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  body[data-page="faq"] main.page,body[data-page="contact"] main.page{max-width:960px}
}

/* =========================================================
   Laptop: 1024px and up
   ========================================================= */
@media (min-width:1024px){
  #reviews-sec .rv-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  main{overflow-x:visible}
  .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center;padding-block:64px 32px;min-height:min(680px,calc(100vh - 70px))}
  .hero-text{max-width:none}
  .hero-art{display:block;position:relative;aspect-ratio:1/1.06;border-radius:34px;overflow:hidden;isolation:isolate;
    background:radial-gradient(70% 60% at 80% 12%,rgba(79,194,182,.38),transparent 65%),radial-gradient(70% 60% at 12% 92%,rgba(140,120,230,.42),transparent 65%),#0E1A2A;
    box-shadow:0 30px 60px -30px rgba(10,20,40,.55)}
  .hero-art::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1px 1px at 14% 18%,#fffa 50%,transparent 51%),radial-gradient(1px 1px at 72% 12%,#fff8 50%,transparent 51%),radial-gradient(1.4px 1.4px at 88% 52%,#fffc 50%,transparent 51%),radial-gradient(1px 1px at 30% 64%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 52% 88%,#fff8 50%,transparent 51%),radial-gradient(1.2px 1.2px at 8% 82%,#fff9 50%,transparent 51%)}
  .art-mark{position:absolute;width:58%;aspect-ratio:1;left:21%;top:21%;opacity:.9;filter:drop-shadow(0 0 36px rgba(120,150,240,.45))}
  .hero::before{inset:-70px -40px -40px;background:radial-gradient(closest-side at 72% 38%,var(--glow-a),transparent),radial-gradient(closest-side at 34% 70%,var(--glow-b),transparent)}
  .hero .title{font-size:clamp(64px,6.4vw,96px);margin:22px 0 16px}
  .hero .lede{font-size:21px}
  .hero-orbit{width:240px;height:240px;left:-60px;top:-30px}

  .games{gap:20px}
  .games .game.live{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:56px;padding:40px 44px 32px}
  .game.live h3{font-size:62px}
  .game.live p{font-size:20px;max-width:40ch}
  .game.live .chips{margin-bottom:0}
  .live-buy{display:flex;flex-direction:column;justify-content:flex-end}
  .live-teaser{display:block;font-size:19px;padding:16px 18px;margin-bottom:22px}
  .game.live .wm{width:300px;height:195px;left:-50px;bottom:-50px}

  .why-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .why-grid > div{padding:22px}

  /* game page: content and a buy panel that stays in view */
  .gp-hero{padding:56px 56px 48px;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end}
  .gp-hero h1{font-size:clamp(64px,6vw,88px)}
  .gp-mark{display:block;position:absolute;left:6%;top:50%;width:230px;height:230px;translate:0 -50%;opacity:.85;filter:drop-shadow(0 0 40px rgba(120,150,240,.4))}
  .gp-mark svg{width:100%;height:100%}
  .gp-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
  .gp-layout.is-soon{grid-template-columns:minmax(0,1fr) 380px;gap:40px}
  .gp-aside{position:sticky;top:96px;margin-top:30px}
  .gp-aside .buy-card{display:block}
  .gp-layout.is-live .buybar{display:none}

  /* login */
  .auth-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;min-height:min(640px,calc(100vh - 220px))}
  .auth .auth-main{margin:0;max-width:480px;width:100%;justify-self:start}
  .auth-art{display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;isolation:isolate;align-self:stretch;min-height:520px;border-radius:34px;padding:40px;color:#EAF2F1;
    background:radial-gradient(70% 60% at 80% 12%,rgba(79,194,182,.38),transparent 65%),radial-gradient(70% 60% at 12% 92%,rgba(140,120,230,.42),transparent 65%),#0E1A2A}
  .auth-art::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1px 1px at 14% 18%,#fffa 50%,transparent 51%),radial-gradient(1px 1px at 72% 12%,#fff8 50%,transparent 51%),radial-gradient(1.4px 1.4px at 88% 52%,#fffc 50%,transparent 51%),radial-gradient(1px 1px at 30% 64%,#fff7 50%,transparent 51%)}
  .auth-art .art-mark{position:absolute;width:46%;aspect-ratio:1;left:27%;top:12%;opacity:.9;filter:drop-shadow(0 0 36px rgba(120,150,240,.45))}
  .auth-art h2{font-family:var(--f-display);font-weight:700;font-size:40px;line-height:1.25;margin:0 0 10px}
  .auth-art .ticks{color:rgba(234,242,241,.85);font-size:16px;margin:0}
  .auth-art .ticks svg{color:#F6D3A1}

  /* inner pages */
  .page-title{font-size:clamp(46px,4.4vw,60px)}
  .owned-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .acct-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:20px}

  /* policy pages: text with a contents list beside it */
  main.page.doc{display:grid;grid-template-columns:minmax(0,760px) 250px;column-gap:72px;justify-content:center;align-items:start}
  main.page.doc > *{grid-column:1}
  main.page.doc > .toc{grid-column:2;grid-row:1 / span 30;position:sticky;top:100px;display:flex;flex-direction:column;gap:2px;margin-top:40px;padding-inline-start:16px;border-inline-start:2px solid var(--line)}
  .toc b{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:6px}
  .toc a{color:var(--ink);text-decoration:none;font-size:14.5px;padding:5px 0;line-height:1.5}
  .toc a:hover{color:var(--river)}
}

/* Wide screens: a little more air */
@media (min-width:1280px){
  .wrap{padding-inline:40px}
  .hero{gap:88px}
}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}