/* ==========================================================================
   AURUM777 — mobile-first UI
   Palette: deep felt green + black + gold, lime accent
   ========================================================================== */

:root{
  --bg:#040B08;
  --bg-2:#071310;
  --felt:#062A1D;
  --felt-deep:#03150E;
  --panel:#0A1512;
  --panel-2:#0E1B16;
  --cream:#F5EEDC;
  --muted:#9DAAA3;
  --muted-2:#6F7C76;
  --gold:#EFCB74;
  --gold-hi:#FFF6D6;
  --gold-mid:#D9A63C;
  --gold-deep:#8A5B0B;
  --lime:#C9F26B;
  --line:rgba(239,203,116,.16);
  --line-2:rgba(239,203,116,.3);
  --ok:#78D68C;
  --err:#FF7A63;
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.85);
  --font-ui:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Cinzel","Bodoni MT","Didot",Georgia,"Times New Roman",serif;
  --max:520px;
  --pad:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(120% 60% at 50% 0%, #0a241a 0%, #050f0b 45%, #020604 100%);
  color:var(--cream);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

.page-landing,.page-auth{
  position:relative;
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  min-height:100svh;
  overflow-x:clip;
  background:
    radial-gradient(100% 40% at 50% -8%, rgba(18,72,52,.55), transparent 70%),
    linear-gradient(180deg,#03100b 0%, #040b08 32%, #030805 100%);
  box-shadow:0 0 0 1px rgba(239,203,116,.06), 0 40px 120px rgba(0,0,0,.75);
}
@media (min-width:560px){
  body{padding-block:0;background:radial-gradient(70% 55% at 50% 0%,rgba(16,70,50,.35),transparent 72%),#020604}
  .page-landing,.page-auth{box-shadow:0 0 0 1px rgba(239,203,116,.08), 0 60px 140px rgba(0,0,0,.85)}
}

.skip{position:absolute;inset-inline-start:-999px;top:8px;z-index:999;background:var(--gold);color:#231700;padding:8px 14px;border-radius:8px;font-weight:700}
.skip:focus{inset-inline-start:8px}

/* ---------------------------------------------------------------- buttons */
.btn{
  --btn-h:46px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--btn-h);padding:0 18px;border-radius:999px;
  font-weight:800;font-size:14px;letter-spacing:.01em;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-gold{
  color:#2B1C00;
  background:linear-gradient(180deg,#FFE9AE 0%,#F3CB75 38%,#D8A23A 72%,#B5801F 100%);
  border:1px solid #FFEBB5;
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset, 0 -8px 18px rgba(120,70,0,.22) inset, 0 10px 26px -10px rgba(239,203,116,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.btn-ghost{
  color:var(--cream);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.btn-ghost:active{background:rgba(239,203,116,.08)}
.btn-block{display:flex;width:100%}
.btn-lg{--btn-h:54px;font-size:15px}
.btn-xs{--btn-h:34px;padding:0 14px;font-size:12.5px}
.btn-sm{--btn-h:40px;font-size:13px}

/* ----------------------------------------------------------------- topbar */
.topbar{
  position:fixed;inset-inline:0;top:0;z-index:60;
  width:100%;max-width:var(--max);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:62px;padding-inline:var(--pad);
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(180deg, rgba(3,12,8,.92), rgba(3,12,8,.35) 70%, transparent);
  transition:background .25s ease, box-shadow .25s ease;
}
.topbar.is-scrolled{
  background:rgba(4,11,8,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(239,203,116,.12), 0 18px 30px -24px #000;
}
.brand{display:flex;align-items:center;gap:9px;min-height:44px}
.brand-mark{
  width:30px;height:30px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:16px;color:#2B1C00;
  background:linear-gradient(160deg,#FFF0BE,#E7BE63 55%,#A9761B);
  border-radius:9px;transform:rotate(-6deg);
  box-shadow:0 1px 0 #FFE9B4 inset, 0 6px 14px -6px rgba(239,203,116,.7);
}
.brand-mark.sm{width:24px;height:24px;font-size:13px;border-radius:7px}
.brand-word{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.16em;color:var(--cream)}
.brand-word b{color:var(--gold);letter-spacing:.06em}
.topbar-actions{display:flex;align-items:center;gap:7px}
.chip-btn{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);
  color:var(--gold);font-size:11.5px;font-weight:700;letter-spacing:.08em;
}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.03)}
.burger{display:block;width:16px}
.burger i{display:block;height:1.5px;background:var(--gold);border-radius:2px}
.burger i+i{margin-top:4px;width:11px}

/* ------------------------------------------------------------------- hero */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:88px var(--pad) 26px;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:
    radial-gradient(80% 46% at 50% 8%, rgba(41,120,84,.5), transparent 68%),
    radial-gradient(110% 70% at 50% 108%, rgba(213,166,60,.16), transparent 60%),
    linear-gradient(178deg,#06251A 0%,#04150f 48%,#03100b 82%,#04100c 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    repeating-conic-gradient(from 190deg at 50% -12%, rgba(201,242,107,.045) 0deg 3deg, transparent 3deg 14deg);
  mask-image:radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 78%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.hero-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-art::before{
  content:"777";position:absolute;top:9%;inset-inline-start:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-weight:900;font-size:clamp(150px,46vw,230px);line-height:1;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(239,203,116,.13);
  opacity:.75;
}
.spark{position:absolute;width:10px;height:10px;background:radial-gradient(circle,#FFF7D4 0%,#F5D27A 35%,transparent 70%);border-radius:50%;filter:drop-shadow(0 0 8px rgba(245,210,122,.9));animation:twinkle 4s ease-in-out infinite}
.spark.s1{top:14%;left:12%}
.spark.s2{top:9%;right:22%;width:7px;height:7px;animation-delay:.9s}
.spark.s3{top:26%;right:9%;width:5px;height:5px;animation-delay:1.8s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

.art-chip{
  position:absolute;width:76px;height:76px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #FFF6CE 0%, #F4CE7C 38%, #D2A03F 62%, #9A6A14 84%, #674408 100%);
  box-shadow:
    0 20px 34px -16px rgba(0,0,0,.9),
    inset 0 0 0 5px rgba(255,240,200,.16),
    inset 0 0 0 7px rgba(80,48,4,.32),
    0 0 26px -6px rgba(239,195,99,.35);
  opacity:.92;
}
.art-chip span{
  position:absolute;inset:12px;border-radius:50%;
  border:1px dashed rgba(78,46,4,.42);
  display:grid;place-items:center;
}
.art-chip span::after{
  content:"7";font-family:var(--font-display);font-weight:900;font-size:23px;
  color:rgba(72,44,4,.5);text-shadow:0 1px 0 rgba(255,240,200,.35);
}
.art-chip.c2 span::after{font-size:19px}
.art-chip.c1{top:26%;inset-inline-start:-14px;transform:rotate(-14deg);animation:float1 9s ease-in-out infinite}
.art-chip.c2{top:47%;inset-inline-end:-20px;width:60px;height:60px;transform:rotate(18deg);animation:float2 11s ease-in-out infinite}
.art-die{position:absolute;top:17%;inset-inline-end:14%;width:52px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.7));transform:rotate(14deg);animation:float1 10s ease-in-out infinite}
.art-card{
  position:absolute;width:46px;height:64px;border-radius:7px;
  background:linear-gradient(160deg,#FFFDF6,#E8E2D2);
  box-shadow:0 16px 26px -14px #000;
  display:grid;place-items:center;color:#161311;
  font-family:var(--font-display);font-weight:800;font-size:17px;
  padding:6px;border:1px solid rgba(0,0,0,.08);
}
.art-card i{position:absolute;font-style:normal;font-size:12px;opacity:.85}
.art-card.ac1{top:35%;inset-inline-start:9%;transform:rotate(-16deg);animation:float2 12s ease-in-out infinite}
.art-card.ac1 i{bottom:4px;right:6px}
.art-card.ac2{top:39%;inset-inline-end:5%;transform:rotate(13deg);animation:float3 13s ease-in-out infinite}
.art-card.ac2 b{color:#B0222B}
.art-card.ac2 i{bottom:4px;left:6px;color:#B0222B}
@keyframes float1{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes float2{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:3deg}}
@keyframes float3{0%,100%{translate:0 0;rotate:0deg}50%{translate:6px -8px;rotate:-3deg}}

.hero-inner{position:relative;width:100%;text-align:center}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  height:30px;padding:0 6px 0 10px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(3,16,11,.55);
  color:var(--gold);font-size:9.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.pill em{font-style:normal;font-size:8.5px;color:#0b1a0d;background:linear-gradient(180deg,#DDF8A4,#A8DC4C);padding:4px 7px;border-radius:999px;letter-spacing:.08em}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(201,242,107,.6);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(201,242,107,.55)}70%{box-shadow:0 0 0 8px rgba(201,242,107,0)}100%{box-shadow:0 0 0 0 rgba(201,242,107,0)}}

.hero-title{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:18px}
.hero-title .t1{
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.34em;
  color:#D8C9A7;text-transform:uppercase;padding-inline-start:.34em;
}
.hero-title .amount{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(92px,29vw,150px);line-height:.92;letter-spacing:-.02em;
  background:linear-gradient(178deg,#FFFBEA 0%,#FFE9A8 26%,#EFC163 50%,#B77C1C 72%,#F7DC96 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:
    drop-shadow(0 1px 0 rgba(90,52,0,.95))
    drop-shadow(0 2px 0 rgba(84,48,0,.9))
    drop-shadow(0 3px 0 rgba(78,44,0,.85))
    drop-shadow(0 4px 0 rgba(72,40,0,.8))
    drop-shadow(0 18px 26px rgba(0,0,0,.65))
    drop-shadow(0 0 44px rgba(239,195,99,.28));
  animation:goldPulse 5s ease-in-out infinite;
}
.hero-title .amount small{font-size:.46em;letter-spacing:.02em;margin-inline-start:.02em}
@keyframes goldPulse{0%,100%{filter:drop-shadow(0 1px 0 rgba(90,52,0,.95)) drop-shadow(0 2px 0 rgba(84,48,0,.9)) drop-shadow(0 3px 0 rgba(78,44,0,.85)) drop-shadow(0 4px 0 rgba(72,40,0,.8)) drop-shadow(0 18px 26px rgba(0,0,0,.65)) drop-shadow(0 0 36px rgba(239,195,99,.22))}50%{filter:drop-shadow(0 1px 0 rgba(90,52,0,.95)) drop-shadow(0 2px 0 rgba(84,48,0,.9)) drop-shadow(0 3px 0 rgba(78,44,0,.85)) drop-shadow(0 4px 0 rgba(72,40,0,.8)) drop-shadow(0 18px 26px rgba(0,0,0,.65)) drop-shadow(0 0 58px rgba(239,195,99,.42))}}
.hero-title .t2{
  font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.3em;
  color:var(--gold);text-transform:uppercase;
}
.hero-sub{margin:16px auto 0;max-width:33ch;color:#C6D0C9;font-size:13.5px;line-height:1.62}
.hero-cta{display:grid;gap:9px;margin-top:20px}
.legal{margin-top:12px;font-size:10px;line-height:1.5;color:rgba(157,170,163,.72)}

/* ------------------------------------------------------------------ stats */
.stats{
  display:grid;grid-template-columns:1fr 1fr;
  background:linear-gradient(180deg,rgba(8,26,19,.9),rgba(4,13,9,.9));
  border-block:1px solid rgba(239,203,116,.12);
}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:13px 8px;text-align:center}
.stat:nth-child(odd){border-inline-end:1px solid rgba(239,203,116,.1)}
.stat:nth-child(-n+2){border-bottom:1px solid rgba(239,203,116,.1)}
.stat b{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--gold);letter-spacing:.02em}
.stat span{font-size:10.5px;color:var(--muted);letter-spacing:.02em}

/* ----------------------------------------------------------------- ticker */
.ticker{
  display:flex;align-items:center;gap:10px;overflow:hidden;
  padding-block:9px;background:#020805;border-bottom:1px solid rgba(239,203,116,.1);
}
.ticker-label{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding-inline:12px;font-size:9px;font-weight:800;letter-spacing:.16em;color:var(--gold);
  text-transform:uppercase;border-inline-end:1px solid rgba(239,203,116,.18);
}
.ticker-track{display:flex;gap:0;overflow:hidden;padding-inline-start:10px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-row{display:flex;gap:26px;padding-inline-end:26px;flex:0 0 auto;animation:marquee 36s linear infinite}
.ticker-row span{font-size:10.5px;color:var(--muted-2);white-space:nowrap}
.ticker-row b{color:var(--lime);font-weight:700;margin-inline-start:3px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* --------------------------------------------------------------- sections */
.sec{padding:42px var(--pad) 0}
.sec-tight{padding-top:40px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:9.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.eyebrow::before,.eyebrow::after{content:"";width:16px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));opacity:.7}
.eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
.sec-head{text-align:center;margin-bottom:24px}
.sec-head h2{
  font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1.18;
  color:#FBF6E7;margin-top:9px;letter-spacing:.005em;
}
.sec-head p{margin:10px auto 0;max-width:36ch;color:var(--muted);font-size:13px}

/* ------------------------------------------------------------------ steps */
.steps{display:grid;gap:0;position:relative}
.step{position:relative;display:flex;gap:14px;padding-block:14px}
.step:not(:last-child)::after{
  content:"";position:absolute;inset-inline-start:16px;top:52px;bottom:-2px;width:1px;
  background:linear-gradient(180deg,rgba(239,203,116,.5),rgba(239,203,116,.05));
}
.step-num{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:14px;color:#231700;
  background:linear-gradient(160deg,#FFEDB8,#E6BD62 60%,#B07B1C);
  box-shadow:0 0 0 1px rgba(255,235,180,.5) inset, 0 8px 18px -8px rgba(239,203,116,.7);
}
.step h3{font-size:14.5px;font-weight:800;letter-spacing:.01em}
.step p{margin-top:3px;font-size:12.8px;color:var(--muted);line-height:1.55}

/* ---------------------------------------------------------------- jackpot */
.jackpot{
  position:relative;overflow:hidden;text-align:center;
  padding:26px 18px 20px;border-radius:var(--r-lg);
  background:
    linear-gradient(180deg,rgba(12,26,20,.96),rgba(5,14,10,.98)) padding-box,
    linear-gradient(120deg,#6E4A0C,#F6DE9C 30%,#7A5310 55%,#F2D48C 82%,#5E3F09) border-box;
  border:1px solid transparent;
  box-shadow:0 30px 60px -30px #000, 0 0 60px -22px rgba(239,203,116,.35) inset;
}
.jp-glow{position:absolute;inset:-40% 10% auto;height:70%;background:radial-gradient(50% 50% at 50% 50%,rgba(201,242,107,.18),transparent 70%);filter:blur(18px)}
.jackpot .eyebrow{margin-bottom:6px}
.jp-digits{
  position:relative;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(26px,8.2vw,38px);letter-spacing:.02em;line-height:1.1;
  background:linear-gradient(180deg,#FFF8DC,#F0C96F 55%,#C08C28);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(80,46,0,.7)) drop-shadow(0 10px 20px rgba(0,0,0,.6));
  font-variant-numeric:tabular-nums;
}
.jp-sub{position:relative;margin-top:6px;font-size:11.5px;color:var(--muted)}
.jp-cta{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}

/* ------------------------------------------------------------------ games */
.filters{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.filters::-webkit-scrollbar{display:none}
.fchip{
  flex:0 0 auto;height:36px;padding:0 15px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);
  color:var(--muted);font-size:12.5px;font-weight:700;scroll-snap-align:start;
  transition:all .18s ease;
}
.fchip.is-active{color:#2B1C00;background:linear-gradient(180deg,#FFE7A6,#E4B95F);border-color:#FFE9B0;box-shadow:0 6px 16px -8px rgba(239,203,116,.8)}
.filters{margin-bottom:14px}

.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.game{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid rgba(239,203,116,.12);
  background:var(--g1,#122018);
  aspect-ratio:1/1.16;display:flex;flex-direction:column;justify-content:flex-end;
  color:inherit;text-decoration:none;cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.game:active{transform:scale(.985)}
.game-art{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.18),transparent 55%),
    radial-gradient(90% 90% at 80% 10%,var(--g2,#2a6b4a),transparent 60%),
    linear-gradient(165deg,var(--g1,#132a1e),#07120d 78%);
}
.game-art::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
}
.game-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:saturate(1.06) contrast(1.04) brightness(.92);
  transform:scale(1.015);
  transition:transform .45s cubic-bezier(.22,.9,.3,1), filter .3s ease;
}
.game:hover .game-img,.game:active .game-img{transform:scale(1.06);filter:saturate(1.12) contrast(1.06) brightness(1)}
.game-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,18,12,.66) 0%, rgba(4,18,12,.12) 24%, rgba(4,14,9,.14) 44%, rgba(4,14,9,.84) 76%, rgba(3,10,7,.97) 100%),
    radial-gradient(120% 80% at 50% 118%, rgba(3,10,7,.92), transparent 62%);
}
.game-shade::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(239,203,116,.16), inset 0 24px 44px -30px rgba(0,0,0,.95);
}
.game-glyph{
  position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,244,214,.9);
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));
  transition:transform .3s ease;
}
.game-glyph svg{width:52%;height:auto;max-height:56%}
.game:hover .game-glyph{transform:scale(1.04)}
.game-top{position:absolute;top:8px;inset-inline:8px;display:flex;justify-content:space-between;align-items:center;z-index:2}
.game-prov{font-size:7.5px;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.72);background:rgba(0,0,0,.45);padding:3px 6px;border-radius:5px;backdrop-filter:blur(4px)}
.game-star{width:20px;height:20px;display:grid;place-items:center;color:rgba(255,246,214,.9)}
.game-name{
  position:relative;z-index:2;padding:8px 10px 9px;padding-inline-end:42px;
  font-size:11.5px;font-weight:700;line-height:1.25;letter-spacing:.01em;color:#FBF6E7;
  background:linear-gradient(180deg,transparent,rgba(4,12,8,.88) 55%);
}
.game-play{
  position:absolute;z-index:3;inset-inline-end:9px;bottom:9px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:0;color:#241800;
  background:linear-gradient(180deg,#FFE9AE,#DCAB48);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform .18s ease;
}
.game-play::before{
  content:"";width:0;height:0;
  border-left:7px solid #241800;
  border-block:4.5px solid transparent;
  margin-left:2px;
}
.game:active .game-play{transform:scale(.92)}

/* -------------------------------------------------------------- features */
.feats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.feat{
  padding:15px 13px;border-radius:var(--r);
  border:1px solid rgba(239,203,116,.13);
  background:linear-gradient(170deg,rgba(14,30,23,.92),rgba(6,16,12,.92));
}
.feat-ico{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--gold);
  background:radial-gradient(circle at 30% 20%,rgba(239,203,116,.22),rgba(239,203,116,.06));
  border:1px solid rgba(239,203,116,.22);margin-bottom:10px;
}
.feat h3{font-size:13.2px;font-weight:800;letter-spacing:.005em}
.feat p{margin-top:4px;font-size:11.8px;line-height:1.5;color:var(--muted)}

/* -------------------------------------------------------------------- vip */
.vip-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
.vip-track::-webkit-scrollbar{display:none}
.vip-card{
  position:relative;flex:0 0 76%;scroll-snap-align:center;border-radius:20px;padding:18px 16px 16px;
  border:1px solid rgba(239,203,116,.18);
  background:linear-gradient(160deg,rgba(18,34,27,.95),rgba(6,15,11,.98));
  overflow:hidden;
}
.vip-card::before{content:"";position:absolute;inset-inline-end:-30%;top:-40%;width:80%;height:90%;border-radius:50%;filter:blur(28px);opacity:.5}
.v-silver::before{background:radial-gradient(circle,#C9D6DC,transparent 65%)}
.v-gold::before{background:radial-gradient(circle,#EFC163,transparent 65%)}
.v-black::before{background:radial-gradient(circle,#7A4BD6,transparent 68%)}
.v-gold{border-color:rgba(239,193,99,.55);box-shadow:0 24px 50px -26px rgba(239,193,99,.45), 0 0 0 1px rgba(239,193,99,.12) inset}
.vip-badge{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:linear-gradient(160deg,#FFF0C0,#D9A63C 60%,#8A5B0B);color:#231700;
  font-size:8px;font-weight:900;letter-spacing:.02em;transform:rotate(-6deg);
  box-shadow:0 6px 14px -6px rgba(239,203,116,.7);
}
.vip-card h3{position:relative;margin-top:12px;font-family:var(--font-display);font-size:21px;font-weight:800;color:#FBF6E7}
.vip-card ul{position:relative;margin-top:10px;display:grid;gap:7px}
.vip-card li{position:relative;padding-inline-start:15px;font-size:12.2px;color:var(--muted)}
.vip-card li::before{content:"";position:absolute;inset-inline-start:0;top:6px;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.75}
.vip-pop{position:absolute;top:14px;inset-inline-end:12px;font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#2B1C00;background:linear-gradient(180deg,#FFE9AE,#E0B052);padding:4px 7px;border-radius:999px}

/* --------------------------------------------------------------- partners */
.partners{display:grid;gap:9px}
.partner{
  display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r);
  border:1px solid rgba(239,203,116,.12);
  background:linear-gradient(170deg,rgba(12,26,20,.9),rgba(5,14,10,.9));
}
.p-ico{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--gold);border:1px solid rgba(239,203,116,.22);background:rgba(239,203,116,.06)}
.partner h3{font-size:13.5px;font-weight:800}
.partner p{margin-top:2px;font-size:11.8px;color:var(--muted);line-height:1.5}

/* -------------------------------------------------------------------- faq */
.faq{display:grid;border-top:1px solid rgba(239,203,116,.12)}
.faq details{border-bottom:1px solid rgba(239,203,116,.12)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;padding:14px 2px;cursor:pointer;list-style:none;
  font-size:13.2px;font-weight:700;color:#FBF6E7;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;flex:0 0 auto;width:18px;height:18px;border:1px solid var(--line-2);border-radius:50%;transition:transform .2s,background .2s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;inset-inline:4px;top:8px;height:1.5px;background:var(--gold);border-radius:2px}
.faq summary i::after{transform:rotate(90deg);transition:opacity .2s}
.faq details[open] summary i{background:rgba(239,203,116,.12)}
.faq details[open] summary i::after{opacity:0}
.faq p{padding:0 2px 16px;font-size:12.4px;line-height:1.6;color:var(--muted)}

/* ---------------------------------------------------------------- final cta */
.final-cta{
  position:relative;overflow:hidden;text-align:center;
  padding:30px 20px 22px;border-radius:var(--r-lg);
  border:1px solid rgba(239,203,116,.28);
  background:
    radial-gradient(90% 80% at 50% 0%,rgba(239,193,99,.18),transparent 65%),
    linear-gradient(170deg,#0E2118,#050F0B 70%);
}
.fc-art{
  position:absolute;inset-inline-end:-8%;top:-14%;
  font-family:var(--font-display);font-weight:900;font-size:140px;line-height:1;
  color:rgba(239,203,116,.07);letter-spacing:-.04em;pointer-events:none;
}
.final-cta h2{position:relative;font-family:var(--font-display);font-size:24px;font-weight:800;line-height:1.2}
.final-cta p{position:relative;margin:8px 0 18px;font-size:12.5px;color:var(--muted)}

/* ----------------------------------------------------------------- footer */
.footer{margin-top:44px;padding:28px var(--pad) calc(104px + env(safe-area-inset-bottom));border-top:1px solid rgba(239,203,116,.12);background:linear-gradient(180deg,rgba(4,12,8,.4),rgba(2,7,5,.9))}
.f-brand{display:flex;align-items:center;gap:9px}
.f-about{margin-top:10px;font-size:11.5px;line-height:1.6;color:var(--muted-2)}
.f-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px;margin-top:22px}
.f-cols h4{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.f-cols a{display:block;padding-block:4px;font-size:12px;color:var(--muted)}
.f-pay{margin-top:22px;padding-top:16px;border-top:1px solid rgba(239,203,116,.1)}
.f-pay>span{font-size:9px;letter-spacing:.2em;color:var(--muted-2);font-weight:700}
.f-pay ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.f-pay li{font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--muted);border:1px solid rgba(239,203,116,.18);border-radius:6px;padding:4px 7px}
.f-legal{display:flex;gap:10px;align-items:flex-start;margin-top:18px}
.age{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,122,99,.5);color:#FF9E8C;font-size:9.5px;font-weight:800}
.f-legal p{font-size:10.5px;line-height:1.5;color:var(--muted-2)}
.f-copy{margin-top:14px;font-size:10px;color:rgba(111,124,118,.8)}

/* ------------------------------------------------------------- sticky cta */
.sticky-cta{
  position:fixed;bottom:0;inset-inline:0;z-index:55;
  width:100%;max-width:var(--max);margin-inline:auto;
  display:flex;align-items:center;gap:12px;
  padding:14px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:#030b07;
  box-shadow:0 -1px 0 rgba(239,203,116,.14), 0 -26px 34px -10px rgba(3,11,7,.95);
  transform:translateY(110%);transition:transform .3s cubic-bezier(.22,.9,.3,1);
}
.sticky-cta.is-visible{transform:none}
.sc-copy{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.sc-copy b{font-family:var(--font-display);font-size:20px;font-weight:900;color:var(--gold);letter-spacing:.01em}
.sc-copy b small{font-size:.6em}
.sc-copy span{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:3px}
.sticky-cta .btn{flex:0 0 auto;--btn-h:46px;padding-inline:20px}

/* ----------------------------------------------------------------- sheets */
.sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
.sheet-body{
  position:relative;width:100%;max-width:var(--max);max-height:82svh;overflow:auto;
  background:linear-gradient(180deg,#0B1A14,#06110C);
  border-top:1px solid rgba(239,203,116,.3);
  border-radius:24px 24px 0 0;
  padding:10px var(--pad) calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.9,.3,1);
  box-shadow:0 -30px 60px rgba(0,0,0,.6);
}
.sheet.is-open .sheet-backdrop{opacity:1}
.sheet.is-open .sheet-body{transform:none}
.sheet-grip{width:38px;height:4px;border-radius:999px;background:rgba(239,203,116,.35);margin:2px auto 12px}
.sheet-body h3{font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:.04em;text-align:center;margin-bottom:10px}
.lang-list{display:grid;gap:4px}
.lang-list button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:50px;padding:0 14px;border-radius:12px;border:1px solid transparent;
  font-size:14px;color:#E7E2D3;text-align:start;
}
.lang-list button i{font-style:normal;font-size:9.5px;letter-spacing:.12em;color:var(--muted-2);font-weight:800}
.lang-list button.is-active{background:rgba(239,203,116,.1);border-color:rgba(239,203,116,.3);color:var(--gold)}
.lang-list button.is-active i{color:var(--gold)}
.lang-list button:active{background:rgba(239,203,116,.08)}

.menu-links{display:grid;margin:6px 0 16px}
.menu-links a{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid rgba(239,203,116,.1);font-size:15px;font-weight:700}
.menu-links a i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted-2);border:1px solid rgba(239,203,116,.2);padding:3px 7px;border-radius:6px}
.menu-auth{display:grid;gap:8px}

/* --------------------------------------------------- account chip + sheet */
/* once registered, the account chip replaces the top-bar register button */
.topbar.is-member .btn-xs{display:none}

.acct-btn{
  display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 9px 0 4px;
  border:1px solid rgba(239,203,116,.4);border-radius:999px;
  background:linear-gradient(180deg,rgba(239,203,116,.14),rgba(239,203,116,.04));
}
.acct-avatar{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:11px;font-weight:900;color:#2B1C00;
  background:linear-gradient(160deg,#FFF0BE,#E7BE63 60%,#A9761B);
}
.acct-bonus{font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--gold)}

.acct-top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.acct-ring{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:var(--gold);border:1px solid rgba(239,203,116,.3);
  background:radial-gradient(circle at 34% 26%,rgba(239,203,116,.24),rgba(239,203,116,.05));
}
.acct-who{min-width:0;display:flex;flex-direction:column;gap:2px}
.acct-who b{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-who span{font-size:10px;letter-spacing:.08em;color:var(--muted-2)}

.acct-rows{display:grid;gap:0;margin-bottom:16px;border-top:1px solid rgba(239,203,116,.12)}
.acct-rows>div{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 2px;border-bottom:1px solid rgba(239,203,116,.1);
}
.acct-rows dt{font-size:11.5px;color:var(--muted)}
.acct-rows dd{
  margin:0;font-size:12.5px;font-weight:700;color:#F5EEDC;text-align:end;
  max-width:62%;overflow-wrap:anywhere;
}
.acct-bonus-val{
  font-family:var(--font-display);font-size:17px;color:var(--gold);
  filter:drop-shadow(0 2px 0 rgba(80,46,0,.6));
}
.acct-bonus-val small{font-size:.66em}
.sheet-x{
  position:absolute;top:10px;inset-inline-end:12px;z-index:3;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);background:rgba(255,255,255,.05);
  border:1px solid rgba(239,203,116,.14);
}
.lock-head{
  display:flex;align-items:center;gap:12px;
  padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid rgba(239,203,116,.12);
}
.lock-img{
  flex:0 0 auto;width:62px;height:78px;object-fit:cover;border-radius:10px;
  border:1px solid rgba(239,203,116,.28);
  box-shadow:0 12px 26px -16px #000;
}
.lock-info{min-width:0}
.lock-prov{
  display:inline-block;font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);background:rgba(239,203,116,.1);
  border:1px solid rgba(239,203,116,.22);padding:3px 6px;border-radius:5px;
}
.sheet-body .lock-name{
  font-family:var(--font-display);font-size:18px;font-weight:800;line-height:1.2;
  text-align:start;margin:7px 0 0;color:#FBF6E7;
}
.sheet-body .lock-title{font-size:19px;line-height:1.3;margin:0 0 6px;letter-spacing:0}
.lock-sub{
  text-align:center;font-size:12.5px;line-height:1.6;color:var(--muted);
  max-width:34ch;margin:0 auto 16px;
}
#lockCta{margin-bottom:8px}
.lock-note{margin-top:12px;text-align:center;font-size:9.5px;color:var(--muted-2)}

.toast{
  position:fixed;z-index:90;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  max-width:min(86vw,420px);padding:11px 16px;border-radius:12px;
  background:rgba(9,22,17,.96);border:1px solid rgba(239,203,116,.35);
  color:#F6F0DF;font-size:12.5px;text-align:center;
  box-shadow:0 18px 40px -18px #000;
  transition:opacity .25s,transform .25s;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------------------------------------------------------------- helpers */
[hidden]{display:none !important}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:359px){
  .brand-word{font-size:13px;letter-spacing:.08em;gap:0}
  .topbar-actions{gap:5px}
  .chip-btn{padding:0 8px;gap:4px}
  .acct-btn{padding:0 8px 0 3px}
}

@media (max-width:350px){
  .hero-title .amount{font-size:clamp(76px,27vw,110px)}
  .f-cols{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr}
  .jp-cta{grid-template-columns:1fr}
}

/* RTL */
[dir="rtl"] .eyebrow{letter-spacing:.14em}
[dir="rtl"] .hero-title .t1,[dir="rtl"] .hero-title .t2{letter-spacing:.18em}
[dir="rtl"] .ticker-row{animation-direction:reverse}
[dir="rtl"] .brand-word{letter-spacing:.1em}
[dir="rtl"] .hero-cta .btn svg,[dir="rtl"] .sticky-cta .btn svg{transform:scaleX(-1)}
[dir="rtl"] .auth-top .icon-btn svg{transform:scaleX(-1)}

/* short phones */
@media (max-height:700px){
  .hero{min-height:auto;padding-top:90px}
  .hero-title .amount{font-size:clamp(74px,25vw,112px)}
  .art-card,.art-die{display:none}
  .art-chip{width:56px;height:56px;opacity:.8}
  .art-chip.c1{top:8%}
  .art-chip.c2{top:16%;width:44px;height:44px}
  .hero-art::before{top:2%;font-size:120px;opacity:.5}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}