/* Hilal Games — mobile-first stylesheet.
   Night emerald base; gold is reserved for money (balance, wins, the main play button); mint marks what is live
   or selected; coral marks losses and running-out time. */

:root{
  --bg:#0F2E27; --bg-deep:#0A231D; --surface:#153A30; --surface-2:#1C4739; --surface-3:#245544;
  --line:#2C5B4B; --line-soft:#234D3F;
  --danger:#FF5252; --ink:#F3F0E2; --muted:#A6C0B3; --faint:#7FA192;
  --gold:#F4C54A; --gold-deep:#D9A21F; --gold-ink:#2E2200;
  --mint:#86E3B8; --coral:#FF7A5C; --ivory:#FFF8E6;
  --radius-lg:22px; --radius:16px; --radius-sm:11px;
  --display:'Bricolage Grotesque',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans Ethiopic','Nyala',Arial,sans-serif;
  --top-h:58px; --nav-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 12px)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 60% at 85% -10%,#1E5A47 0,transparent 60%),radial-gradient(80% 40% at -10% 30%,#123F33 0,transparent 70%);
  background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default;opacity:.55}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(26px,6.5vw,40px)}
h2{font-size:clamp(20px,4.8vw,26px)}
h3{font-size:17px}
p{margin:0 0 12px}
hr{border:0;border-top:1px solid var(--line-soft);margin:18px 0}
.muted{color:var(--muted)}
.small{font-size:13px;line-height:1.6}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--mint);margin:0 0 6px}
b,strong{font-weight:700}

/* ---------- buttons ---------- */
.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border:0;border-radius:14px;
  background:linear-gradient(180deg,#FFD866,var(--gold) 55%,var(--gold-deep));color:var(--gold-ink);font-weight:800;font-size:16px;
  box-shadow:0 1px 0 #FFF2B8 inset,0 6px 0 #9C7410,0 10px 22px #0006;transition:transform .08s,box-shadow .08s}
.primary:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #FFF2B8 inset,0 2px 0 #9C7410,0 4px 10px #0005}
.primary span{margin-left:4px}
.secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface-2);color:var(--ink);font-weight:600;font-size:14px}
.secondary:hover{background:var(--surface-3)}
.secondary:active:not(:disabled){transform:scale(.97)}
.page .panel>p>.primary,.page .panel>p>.secondary{margin:0 6px 8px 0;text-align:center}
@media (max-width:699px){.page .panel>p>.primary,.page .panel>p>.secondary{display:flex;width:100%;margin:0 0 10px}}
.pill-link{padding:8px 16px;border-radius:999px;background:var(--gold);color:var(--gold-ink)!important;font-weight:800}
.icon-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:0;background:transparent;color:var(--ink)}
.icon-btn svg{width:24px;height:24px;fill:currentColor}
.icon-btn:active{background:var(--surface-2)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;height:var(--top-h);padding:0 12px 0 14px;
  padding-top:env(safe-area-inset-top,0px);height:calc(var(--top-h) + env(safe-area-inset-top,0px));
  background:rgba(10,35,29,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.03em}
.brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE28A,var(--gold) 50%,var(--gold-deep));
  color:var(--bg-deep);font-size:22px;line-height:1;box-shadow:0 0 0 3px #F4C54A22,0 0 18px #F4C54A44}
.brand-word{font-family:var(--display);font-weight:800;letter-spacing:-.03em}
.topnav{display:none;gap:4px;margin-left:12px}
.topnav a{padding:8px 12px;border-radius:10px;color:var(--muted);font-weight:600;font-size:14px}
.topnav a:hover{color:var(--ink);background:var(--surface)}
.topnav a[aria-current=page]{color:var(--ink);background:var(--surface-2)}
.topnav.guest{display:flex;margin-left:auto;align-items:center}
.topbar-right{display:flex;align-items:center;gap:2px;margin-left:auto}
.wallet-chip{display:flex;align-items:center;gap:7px;height:38px;padding:0 13px 0 6px;margin-right:4px;border-radius:999px;background:var(--bg-deep);
  border:1px solid #F4C54A55;font-family:var(--display);font-weight:800;font-size:16px;color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}
.wallet-chip .unit{display:none;font-family:var(--body);font-weight:500;font-size:12px;color:var(--muted)}
.coin{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A3,var(--gold) 45%,var(--gold-deep));box-shadow:inset 0 0 0 2px #B98612;position:relative}
.coin:after{content:'☾';position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#7A5600}
.bell{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--coral);color:#fff;font-size:11px;
  line-height:18px;text-align:center;font-weight:800;box-shadow:0 0 0 2px var(--bg-deep)}

/* ---------- slide-out menu ---------- */
.menu-backdrop{position:fixed;inset:0;z-index:60;background:#0008;opacity:0;transition:opacity .2s}
.side-menu{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(86vw,340px);overflow-y:auto;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(20px + var(--safe-b));
  background:var(--bg-deep);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .22s ease-out}
.menu-open .menu-backdrop{opacity:1}
.menu-open .side-menu{transform:none}
.side-menu-head{display:flex;justify-content:space-between;align-items:center;padding:4px 0 14px;border-bottom:1px solid var(--line-soft);margin-bottom:8px}
.side-menu-head strong{display:block;font-family:var(--display);font-size:19px}
.side-menu-head .muted{font-size:13px}
.side-links{display:flex;flex-direction:column}
.side-links a{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 10px;border-radius:12px;font-weight:600}
.side-links a:active,.side-links a:hover{background:var(--surface)}
.side-links span{width:26px;text-align:center;font-size:19px}
.side-group{margin:18px 10px 4px;font-size:12px;font-weight:700;color:var(--faint)}
.side-signout{margin:20px 0 0}
.side-signout .secondary{width:100%}

/* ---------- bottom navigation (phones) ---------- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);
  height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);background:rgba(10,35,29,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line-soft)}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--faint)}
.bottom-nav svg{width:24px;height:24px;fill:currentColor}
.bottom-nav a[aria-current=page]{color:var(--gold)}
.bottom-nav a[aria-current=page] svg{filter:drop-shadow(0 0 8px #F4C54A88)}
body:has(.bottom-nav){padding-bottom:calc(var(--nav-h) + var(--safe-b))}

/* ---------- page shell ---------- */
main{max-width:1180px;margin:0 auto;padding:14px 12px 0}
.intro{padding:6px 4px 12px}
.intro h1{font-size:clamp(24px,6vw,34px);margin:0 0 2px}
.intro h1 span{color:var(--gold)}
.intro p{display:none;margin:0;color:var(--muted);font-size:14px}
.site-footer{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;padding:26px 16px 30px;color:var(--faint);font-size:12px}
.site-footer .brand-word{font-size:18px;color:var(--muted)}
.bottom-note{display:none}

/* ---------- game strip ---------- */
.game-strip{margin:0 -12px 10px;padding:4px 0 6px}
.game-tabs{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 12px 4px;overscroll-behavior-x:contain}
.game-tabs::-webkit-scrollbar{display:none}
.game-tabs button{--hue:#5fa86b;position:relative;flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:8px 2px 7px;
  border:0;border-radius:16px;background:transparent;color:var(--muted);font-size:11.5px;font-weight:600;line-height:1.2;text-align:center}
.tab-icon{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;font-size:29px;line-height:1;
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--hue) 70%,#fff 10%),color-mix(in srgb,var(--hue) 55%,#0A231D));
  box-shadow:inset 0 -5px 0 #0003,inset 0 2px 0 #fff3,0 4px 10px #0005;transition:transform .15s}
.tab-text{display:block;max-width:76px}
.game-tabs small{display:none}
.game-tabs button.selected{color:var(--ink)}
.game-tabs button.selected .tab-icon{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--gold),0 6px 18px #F4C54A44;transform:translateY(-2px)}
.game-tabs button:active .tab-icon{transform:scale(.94)}
.new-pill{position:absolute;top:4px;right:2px;display:block;padding:1px 6px;border-radius:999px;background:var(--coral);color:#fff;font-style:normal;
  font-size:9.5px;font-weight:800;line-height:15px;box-shadow:0 0 0 2px var(--bg)}
.tab-group{flex:0 0 auto;align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);font-weight:800;font-size:13px;
  color:var(--faint);padding:6px 2px;border-right:2px solid var(--line);margin-right:2px}
.tab-group small{display:none}
.tab-group+button{margin-left:0}
.game-tabs button+.tab-group{margin-left:10px}

/* ---------- winners ticker ---------- */
.wins-ticker{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:9px 14px;border-radius:999px;background:linear-gradient(90deg,#3B2E07,#2A3A1C);
  border:1px solid #F4C54A44;color:#FFE7A0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- save bar / notes ---------- */
.save-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 0;padding:10px 14px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line-soft);font-size:12.5px;color:var(--muted)}
.save-bar[data-error=true]{background:#C62828;border-color:#FF6B6B;color:#fff}
.save-bar button{min-height:36px;font-size:12px}
.wallet-note{position:sticky;top:calc(var(--top-h) + 10px);z-index:35;max-width:560px;margin:0 auto 12px;padding:12px 16px;border-radius:14px;
  background:#1F5C47;border:1px solid #2E7A5F;color:#E9FFF4;text-align:center;font-weight:600;box-shadow:0 8px 24px #0006}
.wallet-note[data-bad=true]{background:#C62828;border-color:#FF6B6B;color:#fff}
.page .wallet-note{position:static}

/* ---------- game layout ---------- */
.game-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.game-main{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line-soft);box-shadow:0 14px 34px #0005}
.game-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:12px 14px;font-size:12px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line-soft)}
.game-toolbar>span:first-child{margin-right:auto;font-family:var(--display);font-weight:800;font-size:16px;color:var(--ink);text-transform:capitalize;letter-spacing:-.01em}
.game-toolbar>span[id]:not(.fee-chip):not(.time-chip):not(.win-chip):not(.mines-pays){display:inline-block;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:12px;font-variant-numeric:tabular-nums}
/* older copy is written in capitals; show it in sentence case */
.eyebrow,.game-toolbar>span[id]:not(.fee-chip):not(.time-chip):not(.win-chip):not(.mines-pays){text-transform:lowercase}
.eyebrow::first-letter,.game-toolbar>span[id]:not(.fee-chip):not(.time-chip):not(.win-chip):not(.mines-pays)::first-letter{text-transform:uppercase}
.live-dot{display:inline-block;width:8px;height:8px;margin:0 6px 1px 0;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px #86E3B833;vertical-align:middle}
.fee-chip,.time-chip,.win-chip,.mines-pays{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:999px;background:var(--bg-deep);font-size:12px;font-weight:700;
  color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.time-chip{color:var(--ink)}
.time-chip.low{background:var(--coral);color:#fff;animation:timepulse .7s infinite alternate}
.win-chip{color:var(--gold)}
.win-chip.bump{animation:chipbump .6s}
.mines-pays{color:var(--gold)}
@keyframes timepulse{to{opacity:.6}}
@keyframes chipbump{40%{transform:scale(1.3)}}
.extra-main{min-height:0}
.extra-status{margin:0;padding:12px 16px;min-height:48px;background:var(--bg-deep);color:var(--mint);font-size:14px;font-weight:600;line-height:1.4}
.extra-controls{display:flex;flex-wrap:wrap;gap:10px;padding:14px}
.extra-controls .primary{flex:1 1 220px}
.extra-controls .secondary{flex:0 0 auto}
.extra-controls .steer{flex:0 0 auto}
.action-area{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:14px}
.action-area strong,.action-area small{display:block}
.action-area strong{font-family:var(--display);font-size:17px}
.action-area small{color:var(--muted);font-size:12px;margin-top:4px}
.action-area .eyebrow{display:none}

/* side panels */
aside{display:grid;gap:12px;align-content:start}
.panel{border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-soft);padding:16px}
.panel h2{font-size:21px}
.panel>.eyebrow{color:var(--faint)}
.tip{display:none}
.big-score{display:flex;align-items:baseline;gap:8px}
.big-score>span{font-family:var(--display);font-weight:800;font-size:46px;line-height:1.1;letter-spacing:-.03em;color:var(--gold);font-variant-numeric:tabular-nums}
.memory-metrics{display:flex;gap:28px;margin-top:12px}
.memory-metrics strong{display:block;font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.memory-metrics span{color:var(--muted);font-size:12px}
.metric{display:flex;justify-content:space-between;font-size:13px}
.metric>span{color:var(--muted)}
.metric strong{color:var(--gold)}
.timer{font-family:var(--display);font-weight:800;font-size:42px;line-height:1.2;font-variant-numeric:tabular-nums}
.settings label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}
.settings .secondary{width:100%}
select{width:100%;min-height:46px;padding:0 12px;margin-bottom:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-deep);font-size:16px}
.odds-list{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.odds-list span{padding:5px 10px;border-radius:999px;background:var(--bg-deep);font-size:12.5px;font-weight:600;color:var(--ink)}
.wheel-history{display:flex;flex-wrap:wrap;gap:6px}
.spin-chip{padding:5px 10px;border-radius:9px;background:var(--bg-deep);font-size:13px;font-weight:700}
.spin-chip:first-child{background:var(--gold);color:var(--gold-ink)}

/* ---------- bet controls ---------- */
.bet-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 10px;margin:0;padding:12px 14px;border-top:1px solid var(--line-soft)}
.bet-row label{grid-column:1/-1;font-size:12.5px;font-weight:700;color:var(--muted)}
.bet-row input{width:104px;height:48px;padding:0 12px;border-radius:12px;border:1px solid #F4C54A66;background:var(--bg-deep);color:var(--gold);
  font:800 20px/1 var(--display);font-variant-numeric:tabular-nums;text-align:center}
.bet-row input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px #F4C54A33}
.bet-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bet-chips button{min-height:48px;padding:0;border-radius:12px;font-family:var(--display);font-weight:800;font-size:15px}
.action-area .bet-row{padding:0;border:0}
.pick-block{padding:12px 14px 0}
.pick-label{display:block;margin-bottom:8px;font-size:12.5px;font-weight:700;color:var(--muted)}
.chip-picks{display:flex;gap:6px}
.chip-picks button{flex:1 1 0;min-width:0;min-height:46px;padding:0 4px;border-radius:12px;border:2px solid var(--line);background:var(--surface-2);
  font-family:var(--display);font-weight:800;font-size:16px}
.chip-picks button[aria-checked=true]{border-color:var(--mint);background:#86E3B822;color:var(--mint)}

/* ---------- Road Racer ---------- */
.race-track{position:relative;height:min(62vh,460px);min-height:340px;overflow:hidden;background:repeating-linear-gradient(0deg,#2F6A45 0 80px,#357650 80px 160px);touch-action:pan-y}
.road{position:absolute;inset:0 12%;background:#2E3836;border-left:6px solid #E9E3C0;border-right:6px solid #E9E3C0;overflow:hidden;box-shadow:inset 0 0 30px #0007}
.lane-line{position:absolute;top:0;bottom:0;width:4px;background:repeating-linear-gradient(0deg,#EDE7C9 0 35px,transparent 35px 80px);opacity:.55}
.lane-line.first{left:33.33%}
.lane-line.second{left:66.66%}
#traffic{position:absolute;inset:0}
.race-car{position:absolute;width:17%;height:11.67%;border-radius:11px;background:#F08A6C;transform:translateX(-50%);box-shadow:3px 5px 0 #0006;border:3px solid #26302E;z-index:2}
.race-car:before,.race-car:after{content:'';position:absolute;left:-6px;right:-6px;height:18%;background:#151B1A;border-radius:3px;z-index:-1}
.race-car:before{top:15%}
.race-car:after{bottom:15%}
.race-car span{position:absolute;inset:22% 12%;background:#1E2928;border-radius:5px;border-top:5px solid #A9D8E3;border-bottom:4px solid #7FA9B4}
.race-car.player{top:81.67%;height:12.5%;background:var(--gold);z-index:3}
.road-star{position:absolute;transform:translateX(-50%);height:5%;font-size:28px;line-height:1;color:#FFD966;text-shadow:0 0 12px #FFD96699}
.race-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;
  background:radial-gradient(circle at 50% 40%,#123F33ee,#0A231Df2)}
.race-overlay .eyebrow{color:var(--mint)}
.race-overlay h2{font-size:28px;margin:6px 0 10px}
.race-overlay p{color:var(--muted);font-size:15px;line-height:1.6}
.race-overlay .primary{margin-top:8px;min-width:220px}
.race-controls{flex-direction:row;align-items:center;justify-content:space-between}
.race-controls>div{display:flex;gap:8px}
.race-controls .small{display:none}
.steer{min-width:72px;min-height:56px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);font-size:26px;font-weight:800;color:var(--ink)}
.steer:active:not(:disabled){background:var(--surface-3);transform:scale(.96)}

/* ---------- Memory ---------- */
.memory-board{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px;background:var(--bg-deep)}
.memory-board.large{grid-template-columns:repeat(6,1fr);gap:6px}
.memory-card{aspect-ratio:.82;border:0;border-radius:12px;display:grid;place-items:center;font-size:28px;color:#F4C54A88;
  background:repeating-linear-gradient(45deg,#1F5442 0 6px,#245C49 6px 12px);box-shadow:inset 0 0 0 2px #F4C54A33,0 3px 0 #06180F;transition:transform .15s}
.memory-card:active:not(:disabled){transform:scale(.95)}
.memory-card.face{background:var(--ivory);color:#1B2B25;font-size:32px;box-shadow:0 3px 0 #C8BFA4}
.memory-card.matched{background:#BFF0D6;box-shadow:0 3px 0 #74B894;opacity:1}
.memory-card:disabled{opacity:1}
.memory-board.large .memory-card{font-size:22px}
.memory-board.large .memory-card.face{font-size:24px}
.memory-board.paused:after{content:'Paused. Resume when you are ready.';position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:20px;text-align:center;
  background:#0A231Df0;font-size:17px;font-weight:600}
.memory-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;font-size:14px;color:var(--muted)}

/* ---------- Lucky Wheel ---------- */
.wheel-stage{position:relative;overflow:hidden;padding:30px 16px 20px;background:radial-gradient(ellipse at 50% 35%,#2C6B57 0,#163E33 60%,#0D2A22)}
.wheel-wrap{position:relative;width:min(300px,82vw);aspect-ratio:1;margin:8px auto 22px}
.lucky-wheel{position:absolute;inset:0;border-radius:50%;will-change:transform;border:9px solid #F7E4AE;
  background:conic-gradient(#F4C54A 0 45deg,#3FA37E 45deg 90deg,#E86E57 90deg 135deg,#C9E58E 135deg 180deg,#5CA9C9 180deg 225deg,#A884D6 225deg 270deg,#8FCB75 270deg 315deg,#F29B5C 315deg 360deg);
  box-shadow:0 0 0 6px #0A231D,0 0 0 9px #F4C54A55,0 16px 40px #000a}
.lucky-wheel:after{content:'';position:absolute;inset:-20px;border:4px dotted #F7E4AE88;border-radius:50%;pointer-events:none}
#wheel-labels{position:absolute;inset:0}
#wheel-labels span{position:absolute;font-family:var(--display);font-weight:800;font-size:22px;color:#122A22}
.wheel-hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  background:var(--bg-deep);border:5px solid #F7E4AE;color:var(--gold);font-family:var(--display);font-size:28px;font-weight:800;box-shadow:0 4px 14px #0008}
.wheel-hub span{display:none}
.wheel-pointer{position:absolute;left:50%;top:-18px;z-index:5;transform:translateX(-50%);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;
  border-top:32px solid var(--gold);filter:drop-shadow(0 3px 3px #0009)}
.wheel-result{text-align:center}
.wheel-result .eyebrow,.wheel-result>p:last-child{display:none}
.wheel-result h2{min-height:28px;margin:0;font-size:20px}
.wheel-spark{position:absolute;color:#F7E4AE;opacity:.35}
.spark-one{top:12%;left:8%;font-size:24px}
.spark-two{top:42%;right:6%;font-size:34px}
.wheel-rules h3{font-size:16px}
.wheel-rules p:last-child{margin:0}
#wheel-total{font-size:clamp(30px,8vw,46px);overflow-wrap:anywhere}

/* ---------- Candy / Puzzle / Bricks / Mole / Fruit Slash ---------- */
.candy-board{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:12px;background:#2A1E3A;max-width:560px;margin:0 auto}
.candy-cell{aspect-ratio:1;border:0;border-radius:12px;display:grid;place-items:center;font-size:clamp(24px,7.5vw,36px);background:#3B2C52;box-shadow:inset 0 -4px 0 #0003}
.candy-1,.candy-4{background:#47345F}
.candy-2,.candy-5{background:#34304F}
.candy-cell.picked{outline:3px solid var(--gold);outline-offset:-3px;background:#5B4520;transform:scale(.93)}
.puzzle-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(92%,380px);margin:20px auto;padding:10px;border-radius:20px;background:var(--bg-deep)}
.puzzle-tile,.puzzle-gap{aspect-ratio:1;border:0;border-radius:14px;font-family:var(--display);font-size:38px;font-weight:800}
.puzzle-tile{background:linear-gradient(180deg,#FFD866,var(--gold));color:var(--gold-ink);box-shadow:0 5px 0 #9C7410}
.puzzle-tile:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #9C7410}
.puzzle-gap{background:#0F2E27;box-shadow:inset 0 3px 8px #0008}
.canvas-wrap{display:flex;justify-content:center;padding:12px;background:var(--bg-deep)}
canvas{display:block;width:100%;max-width:400px;height:auto;border-radius:14px;touch-action:none}
#bricks-canvas{max-width:380px}
.slice-wrap canvas{max-width:440px;aspect-ratio:360/520;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:crosshair;border-radius:18px}
.mole-board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:440px;margin:0 auto;padding:20px;background:radial-gradient(circle at 50% 30%,#3E7A3F,#26532E)}
.mole-hole{aspect-ratio:1.15;border:6px solid #6D5434;border-radius:50%;background:#2B1E12;color:#5A4630;font-size:40px;box-shadow:inset 0 8px 0 #160E07;opacity:1!important}
.mole-hole.popped{background:#8A6A3E;border-color:#B58B4E;box-shadow:inset 0 6px 0 #5E4527,0 0 18px #F4C54A55}

/* ---------- Slots ---------- */
.slot-reels{display:flex;justify-content:center;gap:clamp(8px,3vw,18px);margin:16px;padding:clamp(26px,8vw,50px) 12px;border-radius:22px;background:#3A0F1E;
  border:5px solid var(--gold);box-shadow:inset 0 0 30px #0009,0 0 0 4px #3A0F1E,0 10px 28px #0007}
.slot-reels span{display:grid;place-items:center;width:clamp(76px,25vw,120px);height:clamp(100px,30vw,140px);border-radius:14px;background:var(--ivory);
  font-size:clamp(46px,14vw,78px);box-shadow:inset 0 10px 18px #0003,inset 0 -10px 18px #0003}

/* ---------- Fruit Wheel ---------- */
.fruit-ring{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;max-width:400px;margin:16px auto;padding:12px;border-radius:24px;
  background:linear-gradient(160deg,#3A1458,#0F5E54);box-shadow:0 12px 30px #0007}
.fruit-tile{display:grid;place-items:center;aspect-ratio:1;padding:4px;border:3px solid #ffffff2a;border-radius:18px;background:#ffffff12;color:#fff;font-size:clamp(30px,10vw,46px);line-height:1;
  transition:transform .12s,background .12s,box-shadow .12s}
.fruit-tile small{font-family:var(--display);font-size:.32em;font-weight:800}
.fruit-tile[aria-checked=true]{border-color:var(--gold);background:#F4C54A33}
.fruit-tile.run{background:#fff;color:#222;transform:scale(1.07);box-shadow:0 0 22px #FFE08A}
.fruit-tile.win{background:var(--mint);color:#0E3326;transform:scale(1.1);box-shadow:0 0 28px var(--mint)}
.fruit-center{grid-area:2/2;display:grid;place-items:center;aspect-ratio:1;padding:6px;border-radius:50%;background:#000a;color:var(--gold);font-family:var(--display);font-weight:800;
  font-size:clamp(13px,3.6vw,17px);text-align:center}
.fruit-center b{display:block;font-size:clamp(28px,8vw,42px)}

/* ---------- Color Prediction ---------- */
.color-stage{display:grid;place-items:center;padding:20px 0 6px}
.color-ball{display:grid;place-items:center;width:clamp(110px,34vw,148px);aspect-ratio:1;border-radius:50%;font-family:var(--display);font-size:clamp(50px,15vw,72px);font-weight:800;color:#fff;
  background:radial-gradient(circle at 30% 30%,#6B5A90,#3A2C5C);box-shadow:inset 0 -10px 20px #0005,0 12px 30px #0006;transition:background .2s}
.color-ball.red{background:radial-gradient(circle at 30% 30%,#FF8A8A,#D62828)}
.color-ball.green{background:radial-gradient(circle at 30% 30%,#8AFFB0,#1F9D55)}
.color-ball.red.violet{background:linear-gradient(135deg,#D62828 50%,#8E44EC 50%)}
.color-ball.green.violet{background:linear-gradient(135deg,#1F9D55 50%,#8E44EC 50%)}
.color-picks,.dice-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:480px;margin:10px auto;padding:0 14px}
.color-picks button,.dice-picks button{display:grid;gap:2px;min-height:64px;padding:10px 4px;border-radius:16px;border:3px solid transparent;color:#fff;
  font-family:var(--display);font-weight:800;font-size:17px}
.color-picks small,.dice-picks small{font-family:var(--body);font-size:12px;font-weight:600;opacity:.9}
.pick-red{background:#C92A2A}
.pick-green{background:#1F8F4E}
.pick-violet{background:#7440D8}
.number-picks{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:480px;margin:6px auto 12px;padding:0 14px}
.number-picks button{min-height:48px;border-radius:12px;border:3px solid transparent;background:var(--surface-2);font-family:var(--display);font-weight:800;font-size:19px}
.color-picks button[aria-checked=true],.number-picks button[aria-checked=true],.dice-picks button[aria-checked=true]{border-color:var(--gold);box-shadow:0 0 0 3px #F4C54A55;transform:translateY(-2px)}

/* ---------- Lucky Dice ---------- */
.dice-stage{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(12px,5vw,28px);padding:20px 0 4px}
.die{font-size:clamp(78px,24vw,112px);line-height:1;color:var(--ivory);filter:drop-shadow(0 8px 10px #0007)}
.die.rolling{animation:dieshake .18s infinite alternate}
@keyframes dieshake{from{transform:rotate(-12deg) translateY(-3px)}to{transform:rotate(12deg) translateY(3px)}}
.dice-total{flex-basis:100%;text-align:center;font-family:var(--display);font-weight:800;font-size:22px}
.dice-picks button{background:var(--surface-2)}

/* ---------- Rocket Crash ---------- */
.crash-stage{position:relative;height:min(48vh,320px);min-height:240px;overflow:hidden;background:linear-gradient(180deg,#0B1530,#16294F 55%,#1F3D5E);transition:background .3s}
.crash-sky i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.6}
.crash-sky i:nth-child(1){left:12%;top:18%}.crash-sky i:nth-child(2){left:34%;top:9%}.crash-sky i:nth-child(3){left:58%;top:24%}
.crash-sky i:nth-child(4){left:76%;top:12%}.crash-sky i:nth-child(5){left:88%;top:38%}.crash-sky i:nth-child(6){left:22%;top:44%}
.crash-rocket{position:absolute;left:6%;bottom:8%;font-size:44px;line-height:1;filter:drop-shadow(0 0 12px #FFB34788);will-change:left,bottom}
.crash-mult{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:clamp(52px,16vw,84px);color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 4px 24px #0009;pointer-events:none}
.crash-target-line{position:absolute;top:12px;right:12px}
.crash-target-line span{display:inline-block;padding:5px 11px;border-radius:999px;background:#0008;color:var(--mint);font-size:13px;font-weight:700}
.crash-stage.cashed .crash-mult{color:var(--mint)}
.crash-stage.cashed .crash-target-line span{background:var(--mint);color:#0E3326}
.crash-stage.crashed:not(.cashed){background:linear-gradient(180deg,#2A0E14,#4A1A1E 55%,#5E2A22)}
.crash-stage.crashed:not(.cashed) .crash-mult{color:var(--coral)}

/* ---------- Diamond Mines ---------- */
.mines-board{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;max-width:420px;margin:0 auto;padding:14px;background:var(--bg-deep)}
.mine-tile{aspect-ratio:1;border:0;border-radius:12px;background:linear-gradient(180deg,#2C6A55,#22594A);box-shadow:inset 0 2px 0 #ffffff1c,0 4px 0 #0B2A20;
  font-size:clamp(22px,7vw,32px);line-height:1;transition:transform .12s,background .12s}
.mine-tile:active{transform:scale(.94)}
.mine-tile[aria-pressed=true]{background:linear-gradient(180deg,#FFD866,var(--gold));box-shadow:0 4px 0 #9C7410}
.mine-tile.open{box-shadow:none}
.mine-tile.gem{background:#BFF0D6;animation:flipin .25s}
.mine-tile.boom{background:var(--coral);animation:flipin .25s}
.mine-tile.rest{opacity:.45;background:#173F32}
.mine-tile.rest.bomb{background:#4B2420}
@keyframes flipin{from{transform:rotateY(90deg)}to{transform:none}}

/* ---------- Plinko ---------- */
.plinko-board{position:relative;aspect-ratio:1/0.95;max-width:440px;margin:0 auto;background:radial-gradient(ellipse at 50% 0,#3B2266,#1A1135 70%)}
.plinko-pegs i{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#E9DDFF;box-shadow:0 0 8px #B89BFF}
.plinko-ball{position:absolute;left:50%;top:-4%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF1B8,var(--gold) 55%,var(--gold-deep));
  box-shadow:0 0 14px #F4C54Aaa;z-index:2}
.plinko-buckets{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;max-width:440px;margin:0 auto;padding:6px 6px 2px;background:#1A1135}
.plinko-buckets span{display:grid;place-items:center;min-height:34px;border-radius:8px;font-family:var(--display);font-weight:800;font-size:clamp(9.5px,2.6vw,13px);color:#1A1135;transition:transform .2s}
.plinko-buckets .cold{background:#8D7BC4}
.plinko-buckets .warm{background:#F2A65A}
.plinko-buckets .hot{background:var(--coral);color:#fff}
.plinko-buckets .land{transform:translateY(4px) scale(1.08);box-shadow:0 0 0 2px #fff,0 0 18px #fff8}

/* ---------- Grand Jackpot ---------- */
.jackpot-stage{padding:16px 14px 14px;background:radial-gradient(ellipse at 50% 15%,#4A1C66,#1E0A30 65%,#12061D);text-align:center}
.jackpot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:440px;margin:0 auto;padding:10px;border-radius:18px;background:#140521;border:4px solid var(--gold);
  box-shadow:0 0 0 4px #140521,0 10px 30px #0008}
.jp-cell{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:var(--ivory);font-size:clamp(22px,7vw,32px);box-shadow:inset 0 4px 10px #0003}
.jp-cell.crown{background:var(--gold);box-shadow:0 0 16px var(--gold)}
.jackpot-win-display{margin-top:12px;font-family:var(--display);font-size:20px;font-weight:800;color:var(--gold)}

/* ---------- win pop-up and toast ---------- */
.win-pop{position:fixed;inset:0;z-index:70;display:grid;place-items:center;pointer-events:none}
.win-pop-inner{padding:24px 40px;border-radius:28px;text-align:center;color:var(--gold-ink);background:radial-gradient(circle at 50% 0,#FFF0B3,var(--gold) 55%,var(--gold-deep));
  box-shadow:0 0 0 6px #F4C54A44,0 24px 70px #000b;animation:winpop .55s cubic-bezier(.2,1.7,.4,1) both}
.win-emoji{font-size:30px;letter-spacing:6px}
.win-amount{font-family:var(--display);font-size:clamp(52px,17vw,84px);font-weight:800;line-height:1;letter-spacing:-.03em}
.win-label{font-weight:800}
@keyframes winpop{from{transform:scale(.3) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
.notify-toast{position:fixed;top:calc(var(--top-h) + 10px + env(safe-area-inset-top,0px));left:12px;right:12px;z-index:80;max-width:420px;margin:0 auto;padding:14px 18px;border-radius:16px;
  background:var(--surface-3);border:1px solid var(--line);color:var(--ink);box-shadow:0 14px 40px #000a;animation:winpop .4s both}

/* ---------- account pages ---------- */
.page{max-width:820px;padding-top:20px}
.page>h1{margin-bottom:6px}
.page>p.muted{max-width:62ch}
.page .panel{margin:16px 0}
.page .panel h2{margin-top:6px}
.page .panel h2:not(:first-child){margin-top:24px}
.page .primary,.page .secondary{text-decoration:none}
.account-form{max-width:460px;margin:18px auto 40px;padding:24px 20px}
.account-form h1{font-size:30px}
.account-form label{display:block;margin:14px 0 6px;font-size:14px;font-weight:600}
.account-form .primary{width:100%;margin:18px 0 12px}
.account-form a,.page .small a{color:var(--mint);font-weight:600}
input[type=text],input[type=password],input[type=number],input[type=email],input[type=tel],input:not([type]),textarea,.deposit-form select{
  width:100%;min-height:50px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-deep);color:var(--ink);font-size:16px}
textarea{padding:12px 14px;min-height:110px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px #86E3B833}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--gold);vertical-align:-5px;margin-right:6px}
input[type=file]{width:100%;padding:12px;border:1px dashed var(--line);border-radius:12px;background:var(--bg-deep);font-size:14px}
.deposit-form p{margin:0 0 14px}
.deposit-form label{font-size:14px;font-weight:600}
.deposit-form br{display:none}
.deposit-form label+input,.deposit-form label+select{margin-top:6px}
.deposit-form .primary{width:100%}
.helptext,.account-form ul:not(.errorlist){font-size:12.5px;color:var(--muted)}
.errorlist{margin:6px 0;padding:0;list-style:none;color:var(--danger);font-size:13px;font-weight:700}
.history-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.history-filter select{flex:1 1 180px;width:auto;margin:0}
.history-table{overflow-x:auto;margin:0 -16px;padding:0 16px;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap;font-size:14px}
td,th{padding:12px 12px;border-bottom:1px solid var(--line-soft)}
th{font-size:12px;font-weight:700;color:var(--faint)}
tbody tr:last-child td{border-bottom:0}
.history-pages{display:flex;justify-content:center;gap:20px;margin:16px 0 4px;font-size:14px}
.history-pages a{color:var(--mint);font-weight:700}
.notice{padding:14px 4px;border-bottom:1px solid var(--line-soft)}
.notice.unread{background:#F4C54A14;border-radius:10px;padding:14px 10px}
.lottery-facts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.lottery-facts span{padding:7px 12px;border-radius:999px;background:var(--bg-deep);font-size:13.5px}
.lottery-facts b{color:var(--gold)}
.number-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin:10px 0}
.number-grid form{margin:0}
.lotto-number{width:100%;min-height:52px;border-radius:14px;border:2px dashed #F4C54A88;background:#F4C54A14;color:var(--gold);font:800 18px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em}
.lotto-number:active{background:#F4C54A33}
.lotto-number-text{font-family:ui-monospace,Menlo,monospace;letter-spacing:.12em;color:var(--gold)}
.account-nav{display:none}

/* ---------- larger screens ---------- */
@media (min-width:700px){
  main{padding:20px 20px 0}
  .wallet-chip .unit{display:inline}
  .intro{padding:10px 0 16px}
  .intro p{display:block}
  .game-strip{margin:0 -20px 16px}
  .game-tabs{padding:2px 20px 4px}
  .game-tabs button{width:86px}
  .game-layout{grid-template-columns:minmax(0,1fr) 300px;gap:18px}
  .bet-row{grid-template-columns:auto auto 1fr;padding:14px 18px}
  .bet-row label{grid-column:auto}
  .bet-chips{max-width:300px}
  .extra-controls{padding:16px 18px}
  .extra-controls .primary{flex:0 1 auto;min-width:240px}
  .action-area{flex-direction:row;flex-wrap:wrap;align-items:center;padding:18px}
  .action-area>div:first-child{flex:1 1 240px}
  .action-area .primary{flex:0 0 auto}
  .race-controls .small{display:block;color:var(--muted)}
  .tip{display:flex;gap:10px;padding:2px 4px;color:var(--muted);font-size:13px;line-height:1.6}
  .tip>span{font-size:20px;color:var(--mint)}
  .tip b{color:var(--ink)}
  .page{padding-top:30px}
  .panel{padding:20px}
  .history-table{margin:0 -20px;padding:0 20px}
}
@media (min-width:1000px){
  .topnav{display:flex}
  .bottom-nav{display:none}
  body:has(.bottom-nav){padding-bottom:0}
  .topbar{padding:0 24px}
  .game-strip{margin:0 0 18px;padding:0}
  .game-tabs{flex-wrap:wrap;overflow:visible;gap:8px;padding:0}
  .game-tabs button{flex-direction:row;width:auto;flex:1 1 200px;max-width:240px;gap:12px;padding:10px 12px;border-radius:16px;background:var(--surface);
    border:1px solid var(--line-soft);text-align:left;font-size:14px}
  .game-tabs button.selected{background:var(--surface-2);border-color:var(--gold)}
  .game-tabs button.selected .tab-icon{box-shadow:inset 0 -5px 0 #0003,inset 0 2px 0 #fff3;transform:none}
  .tab-icon{width:46px;height:46px;font-size:24px;flex:0 0 auto}
  .tab-text{max-width:none}
  .game-tabs small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--faint)}
  .new-pill{position:static;display:inline-block;margin:0 0 0 6px;vertical-align:2px;box-shadow:none}
  .tab-group{flex:1 0 100%;writing-mode:horizontal-tb;transform:none;border:0;padding:6px 2px 0;margin:0;font-size:16px;color:var(--ink)}
  .tab-group small{display:inline;margin-left:8px;font-family:var(--body);font-weight:500;font-size:13px;color:var(--faint)}
  .game-tabs button+.tab-group{margin:10px 0 0}
}
@media (hover:hover){
  .game-tabs button:hover .tab-icon{transform:translateY(-2px)}
  .primary:hover:not(:disabled){filter:brightness(1.05)}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{transition:none!important;animation:none!important}
}

/* =====================================================================================================
   Video slots (Jungle Tumble, Shining Crown, Dragon Pearls)
   ===================================================================================================== */
.vslot{--frame:#F4C54A;--glow:#F4C54A88;--cell:#00000040;--cell-line:#ffffff22}
.vs-stage{position:relative;padding:12px 10px 10px;overflow:hidden}
.theme-jungle .vs-stage{background:radial-gradient(120% 70% at 50% 0,#FFB35A 0,#E0563B 22%,#5B2A6E 52%,#163B2C 100%)}
.theme-jungle{--frame:#B57BFF;--glow:#A35CFFcc;--cell:#12281Fcc}
.theme-crown .vs-stage{background:radial-gradient(110% 70% at 50% 0,#FF5A8A 0,#B3123B 35%,#4A0618 75%,#24020B 100%)}
.theme-crown{--frame:#F4C54A;--glow:#FFD45Ccc;--cell:#3A0614cc}
.theme-dragon .vs-stage{background:radial-gradient(110% 70% at 50% 0,#FFD36B 0,#E07A1C 30%,#8E1F12 65%,#3A0A06 100%)}
.theme-dragon{--frame:#FFCF4A;--glow:#FF9E2Ccc;--cell:#5A140Bcc}

.vs-marquee{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 4px 10px}
.vs-title{font-family:var(--display);font-weight:800;font-size:22px;line-height:.9;letter-spacing:-.02em;color:#FFF3C2;text-shadow:0 3px 0 #7A2A00,0 0 18px #FFB34788}
.vs-title b{display:block;color:#C6FF6B;font-size:26px;text-shadow:0 3px 0 #1F5A12,0 0 18px #9CFF5A88}
.vs-totem{display:grid;place-items:center;min-width:76px;height:52px;padding:0 12px;border-radius:14px;background:linear-gradient(180deg,#FFF0B0,#F4C54A 45%,#B97F10);
  color:#5A2C00;font-family:var(--display);font-weight:800;font-size:26px;box-shadow:0 0 0 3px #00000044,0 6px 16px #0007}
.vs-totem.on{animation:totem 1s ease-in-out infinite alternate;box-shadow:0 0 0 3px #fff,0 0 30px #FFE07A}
@keyframes totem{to{transform:scale(1.08) rotate(-3deg)}}

.vs-frame{position:relative;padding:6px;border-radius:18px;background:linear-gradient(135deg,var(--frame),#fff8 30%,var(--frame) 60%,#0006);box-shadow:0 0 22px var(--glow),inset 0 0 0 1px #fff6}
.theme-jungle .vs-frame{animation:electric 2.4s linear infinite}
@keyframes electric{0%,100%{box-shadow:0 0 18px #A35CFFcc,0 0 2px #fff}50%{box-shadow:0 0 34px #C99BFF,0 0 6px #fff}}
.vs-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:4px;padding:6px;border-radius:13px;background:#000a;position:relative}
.vs-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:radial-gradient(circle at 50% 35%,#ffffff1c,var(--cell));
  box-shadow:inset 0 0 0 1px var(--cell-line);font-size:calc(min(9.5vw,52px) * 5 / var(--cols));line-height:1;transition:opacity .2s,transform .2s;overflow:hidden}
.vs-cell span{filter:drop-shadow(0 3px 3px #0008)}
.vs-cell small{position:absolute;bottom:2px;left:0;right:0;text-align:center;font:800 9px/1 var(--body);letter-spacing:.06em;color:#FFE27A;text-shadow:0 1px 2px #000}
.vs-cell.letter span{font-family:var(--display);font-weight:800;background:linear-gradient(180deg,#FFF6C8,#F4C54A 50%,#B5720C);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #5A2600)}
.vs-cell.s-seven span{background:linear-gradient(180deg,#FFB0B0,#E01A2E 55%,#7A0010);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-cell.s-crown,.vs-cell.s-dragon{background:radial-gradient(circle at 50% 35%,#FFE89A,#F4A21C 60%,#8A4A00);box-shadow:inset 0 0 0 2px #FFF2B0}
.vs-cell.s-pearl{background:radial-gradient(circle at 50% 50%,#3A0A06,#140303)}
.vs-cell.s-pearl:before{content:'';width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#FFD7F0 30%,#E06AC0 70%,#7A1A6A);box-shadow:0 0 16px #FF9EE6}
.vs-cell.totem{background:radial-gradient(circle at 50% 35%,#E7C2FF,#8A3BE0 60%,#3B0F70);box-shadow:inset 0 0 0 2px #F2DCFF,0 0 14px #B57BFF}
.vs-cell.totem em,.vs-cell.vcoin em{font-style:normal;font-family:var(--display);font-weight:800;font-size:calc(min(4.6vw,24px) * 5 / var(--cols));color:#FFF3C2;text-shadow:0 2px 0 #5A1800,0 0 8px #000}
.vs-cell.vcoin{background:transparent;box-shadow:none}
.vs-cell.vcoin:before{content:'';position:absolute;inset:6%;clip-path:polygon(25% 3%,75% 3%,98% 50%,75% 97%,25% 97%,2% 50%);background:linear-gradient(160deg,#FF7A8C,#D0102E 45%,#6A0012);box-shadow:inset 0 0 0 3px #F4C54A}
.vs-cell.vcoin:after{content:'';position:absolute;inset:6%;clip-path:polygon(25% 3%,75% 3%,98% 50%,75% 97%,25% 97%,2% 50%);border:0;background:linear-gradient(160deg,#ffffff66,transparent 40%)}
.vs-cell.vcoin em{position:relative;z-index:1}
.vs-cell.jp-mini:before{background:linear-gradient(160deg,#9CFFB0,#16A34A 50%,#064E1F)}
.vs-cell.jp-minor:before{background:linear-gradient(160deg,#9CD5FF,#1D6FD8 50%,#0A2B66)}
.vs-cell.jp-major:before{background:linear-gradient(160deg,#E7B0FF,#8B2BD9 50%,#3A0866)}
.vs-cell.empty{background:#00000055;box-shadow:inset 0 0 0 1px #ffffff14}
.vs-cell.spinning span,.vs-cell.spinning em{animation:reelblur .14s linear infinite}
@keyframes reelblur{0%{transform:translateY(-35%);filter:blur(2px);opacity:.6}100%{transform:translateY(35%);filter:blur(2px);opacity:.6}}
.vs-cell.land{animation:land .28s cubic-bezier(.3,1.8,.5,1)}
@keyframes land{0%{transform:translateY(-18%)}100%{transform:none}}
.vs-grid.has-hit .vs-cell:not(.hit){opacity:.32}
.vs-cell.hit{z-index:1;animation:hit .7s ease-in-out infinite alternate;box-shadow:inset 0 0 0 2px #FFF2B0,0 0 18px #FFE07A}
@keyframes hit{to{transform:scale(1.08)}}
.vs-cell.pop{animation:pop .26s ease-in forwards}
@keyframes pop{50%{transform:scale(1.25);filter:brightness(2)}100%{transform:scale(0);opacity:0}}
.vs-cell.drop{animation:drop .42s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d,0ms)}
@keyframes drop{from{transform:translateY(-260%);opacity:0}to{transform:none;opacity:1}}
.vs-cell.flicker{animation:flicker .2s steps(2) infinite}
@keyframes flicker{50%{background:#ffffff22}}
.holding .vs-grid{background:#1A0008}

.vs-banner{position:absolute;inset:6px;z-index:5;display:grid;place-items:center;align-content:center;text-align:center;border-radius:13px;background:radial-gradient(circle,#000a,#0006 60%,transparent);
  font-family:var(--display);font-weight:800;font-size:22px;line-height:1.25;color:#fff;text-shadow:0 2px 6px #000;pointer-events:none}
.vs-banner b{color:#FFE27A}
.vs-banner .mega{font-style:normal;font-size:clamp(30px,10vw,46px);background:linear-gradient(180deg,#FFF6C8,#F4C54A 55%,#E0701C);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #5A1E00)}
.vs-banner.in{animation:bannerin .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes bannerin{from{transform:scale(.6);opacity:0}}
.vs-banner.small{inset:auto 6px 6px;padding:8px 10px;background:#000c;font-size:15px}
.vs-respins{position:absolute;top:-2px;left:50%;z-index:6;transform:translate(-50%,-50%);padding:5px 14px;border-radius:999px;background:linear-gradient(180deg,#FFF0B0,#F4C54A);
  color:#4A2200;font-weight:800;font-size:13px;box-shadow:0 4px 12px #0008;white-space:nowrap}
.vs-respins b{font-family:var(--display);font-size:17px;margin-left:4px}
.vs-respins.reset{animation:chipbump .5s}

.vs-winbar{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-top:10px;padding:8px 14px;border-radius:14px;background:#0009;box-shadow:inset 0 0 0 1px #ffffff22}
.vs-winbar span{font-family:var(--display);font-weight:800;font-size:15px;color:#FFE27A;text-transform:uppercase;letter-spacing:.08em}
.vs-winbar b{font-family:var(--display);font-weight:800;font-size:28px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 14px #FFE07A88}

.vs-jackpots{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 10px}
.jp{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 10px;border-radius:10px;border:2px solid #F4C54A;background:#3A0614;box-shadow:inset 0 0 12px #0008}
.jp span{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.04em}
.jp b{font-family:var(--display);font-weight:800;font-size:17px;color:#fff;font-variant-numeric:tabular-nums}
.jp.grand{background:linear-gradient(180deg,#7A0A1E,#3A0614)}.jp.grand span{color:#FFC44A}
.jp.major{background:linear-gradient(180deg,#4A0E7A,#22063A)}.jp.major span{color:#E5A8FF}
.jp.minor{background:linear-gradient(180deg,#0E3E8A,#061B40)}.jp.minor span{color:#8FC8FF}
.jp.mini{background:linear-gradient(180deg,#0E6A2E,#063318)}.jp.mini span{color:#8FFFA8}

.vs-pearls{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 10px}
.pearl{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;text-align:center;color:#fff;transition:transform .15s;
  box-shadow:inset 0 -8px 14px #0006,inset 0 6px 10px #ffffff66,0 4px 10px #0007}
.pearl b{font-family:var(--display);font-weight:800;font-size:clamp(20px,7vw,30px);line-height:.9;text-shadow:0 2px 0 #0006}
.pearl span{font-size:8.5px;font-weight:800;text-transform:uppercase;line-height:1;margin-top:-6px}
.pearl i{position:absolute;bottom:-4px;right:-2px;padding:1px 6px;border-radius:999px;background:#F4C54A;color:#4A2200;font:800 11px/1.4 var(--body)}
.pearl.p1{background:radial-gradient(circle at 35% 30%,#B6FF9C,#2FA33A 60%,#0B4A12)}
.pearl.p2{background:radial-gradient(circle at 35% 30%,#A8D8FF,#2A6FE0 60%,#0B2A66)}
.pearl.p3{background:radial-gradient(circle at 35% 30%,#E9B8FF,#8A35D8 60%,#3A0A66)}
.pearl.p4{background:radial-gradient(circle at 35% 30%,#FFC0A8,#E0281C 60%,#6A0A06)}
.pearl.lit{transform:scale(1.12);box-shadow:0 0 0 3px #fff,0 0 26px #FFE07A}
.pearl.won{transform:scale(1.16);box-shadow:0 0 0 4px #FFE07A,0 0 34px #FFE07A;animation:totem .6s ease-in-out infinite alternate}
.freegames .vs-grid{box-shadow:0 0 0 2px #FFCF4A,0 0 24px #FF9E2C}

.vs-controls{display:flex;align-items:center;justify-content:center;gap:18px;padding:14px 14px 16px}
.vs-spin{position:relative;width:88px;height:88px;border:0;border-radius:50%;background:radial-gradient(circle at 50% 30%,#FFF1A8,#F4C54A 45%,#C98A0C 80%,#8A5A00);
  box-shadow:0 0 0 5px #0A231D,0 0 0 8px #F4C54A88,0 8px 0 #6A4400,0 14px 26px #000a;color:#4A2A00;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.04em}
.vs-spin:before{content:'';position:absolute;inset:9px;border-radius:50%;border:3px dashed #8A5A0066}
.vs-spin:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 5px #0A231D,0 0 0 8px #F4C54A88,0 3px 0 #6A4400,0 6px 14px #000a}
.running .vs-spin:before{animation:spinring .8s linear infinite;border-color:#4A2A00aa}
@keyframes spinring{to{transform:rotate(360deg)}}
.vs-turbo{min-width:72px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-weight:700;font-size:13px}
.vs-turbo[data-turbo][aria-pressed=true]{background:#F4C54A;color:#4A2A00;border-color:#F4C54A}

.paytable{display:grid;gap:4px;margin:10px 0}
.paytable>div{display:grid;grid-template-columns:44px repeat(3,1fr);align-items:center;gap:6px;padding:3px 8px;border-radius:10px;background:var(--bg-deep);font-variant-numeric:tabular-nums}
.paytable>div>span{font-size:22px;text-align:center}
.paytable b{font-family:var(--display);font-size:14px;text-align:right;color:var(--gold)}
.paytable .pt-head{background:none;font-size:12px;color:var(--faint);font-weight:700}
.paytable .pt-head span{font-size:12px;text-align:right}
.paytable .pt-head span:first-child{text-align:center}
.pt-letter{font-family:var(--display);font-weight:800;color:var(--gold);font-size:19px!important}
.pt-pearl:before{content:'';display:inline-block;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#E06AC0 60%,#7A1A6A)}

/* ---------- Big / Mega / Super win ---------- */
.bigwin{position:fixed;inset:0;z-index:90;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,#2A1A00ee,#000e 70%);cursor:pointer;animation:bwin .3s ease-out}
.bigwin.out{animation:bwout .25s ease-in forwards}
@keyframes bwin{from{opacity:0}}
@keyframes bwout{to{opacity:0}}
.bw-rays{position:absolute;width:170vmax;height:170vmax;background:repeating-conic-gradient(from 0deg,#FFD45C33 0 10deg,transparent 10deg 20deg);animation:rays 9s linear infinite;mask:radial-gradient(circle,#000 10%,transparent 60%);-webkit-mask:radial-gradient(circle,#000 10%,transparent 60%)}
@keyframes rays{to{transform:rotate(360deg)}}
.bw-coins i{position:absolute;top:-10%;font-style:normal;animation:coinfall linear infinite;filter:drop-shadow(0 4px 4px #0008)}
@keyframes coinfall{to{transform:translateY(120vh) rotate(540deg)}}
.bw-card{position:relative;text-align:center;padding:0 16px;animation:winpop .6s cubic-bezier(.2,1.7,.4,1) both}
.bw-emoji{font-size:clamp(80px,26vw,130px);line-height:1;filter:drop-shadow(0 10px 20px #000a);animation:totem 1.2s ease-in-out infinite alternate}
.bw-label{font-family:var(--display);font-weight:800;font-style:italic;font-size:clamp(52px,17vw,96px);line-height:.95;letter-spacing:-.02em;
  background:linear-gradient(180deg,#F7FFB8,#9BE33A 45%,#2E8A12);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 #1A4A08) drop-shadow(0 0 22px #9BE33A88);transform:rotate(-4deg)}
.bw-mega .bw-label{background-image:linear-gradient(180deg,#FFE0F5,#FF4DC4 45%,#8A0A6A);filter:drop-shadow(0 4px 0 #4A0038) drop-shadow(0 0 22px #FF4DC488)}
.bw-super .bw-label{background-image:linear-gradient(180deg,#FFF6C8,#F4C54A 40%,#E0281C);filter:drop-shadow(0 4px 0 #5A0A00) drop-shadow(0 0 28px #FF9E2Caa)}
.bw-amount{margin-top:8px;font-family:var(--display);font-weight:800;font-size:clamp(54px,18vw,100px);line-height:1;color:#FFE9A8;font-variant-numeric:tabular-nums;
  text-shadow:0 4px 0 #8A4A00,0 0 30px #FFB347}
.bw-sub{margin-top:4px;font-weight:700;color:#FFE9A8cc}
.bw-tap{margin-top:22px;font-size:13px;color:#fff9;opacity:0;transition:opacity .3s}
.bigwin.done .bw-tap{opacity:1}

/* =====================================================================================================
   Lottery advert
   ===================================================================================================== */
.lotto-ad{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px 12px 12px;overflow:hidden;border-radius:18px;
  background:linear-gradient(115deg,#6A0A2E 0,#B3123B 45%,#E0571C 100%);color:#FFF5DA;box-shadow:0 10px 26px #0006,inset 0 0 0 2px #F4C54A88;text-decoration:none}
.lotto-ad:before,.lotto-ad:after{content:'';position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--bg)}
.lotto-ad:before{left:-9px}.lotto-ad:after{right:-9px}
.la-shine{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff40 45%,transparent 60%);transform:translateX(-100%);animation:shine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,55%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
.la-ticket{flex:0 0 auto;font-size:38px;transform:rotate(-12deg);filter:drop-shadow(0 4px 6px #0006)}
.la-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.la-kicker{font-size:12px;font-weight:700;color:#FFD9A0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.la-prize{font-family:var(--display);font-weight:800;font-size:clamp(22px,6.6vw,30px);line-height:1.05;color:#FFE27A;text-shadow:0 2px 0 #5A0A1E}
.la-prize small{font-family:var(--body);font-size:12px;font-weight:600;color:#FFF5DA}
.la-meta{font-size:12px;color:#FFE6C8;margin-top:2px}
.la-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.la-clock{text-align:right;line-height:1.1}
.la-clock small{display:block;font-size:10.5px;color:#FFD9A0}
.la-clock b{font-family:var(--display);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.la-cta{padding:9px 14px;border-radius:999px;background:linear-gradient(180deg,#FFF0B0,#F4C54A);color:#4A1A00;font-weight:800;font-size:13px;white-space:nowrap;box-shadow:0 3px 0 #9C7410}
.lotto-ad.on-lottery{margin:12px 0}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
@media (max-width:420px){.la-ticket{display:none}.la-side{gap:6px}.la-cta{padding:8px 11px}}

/* ---------- public promo page ---------- */
.promo-hero{position:relative;overflow:hidden;margin:4px 0 16px;padding:30px 20px 26px;border-radius:26px;text-align:center;
  background:radial-gradient(120% 80% at 50% 0,#E0571C 0,#B3123B 40%,#4A0618 85%);box-shadow:0 18px 40px #0007,inset 0 0 0 2px #F4C54A88}
.ph-glow{position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg,#FFD45C1f 0 8deg,transparent 8deg 16deg);animation:rays 30s linear infinite;pointer-events:none}
.ph-moon{position:relative;font-size:64px;line-height:1;color:#FFE27A;text-shadow:0 0 30px #FFB347}
.ph-kicker{position:relative;margin:6px 0 0;font-weight:700;color:#FFD9A0}
.ph-head{position:relative;margin:4px 0 12px;font-size:clamp(32px,9vw,52px);line-height:1;color:#FFF5DA}
.ph-prize{position:relative;margin:0 0 16px}
.ph-prize b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(46px,15vw,84px);line-height:1;color:#FFE27A;text-shadow:0 4px 0 #5A0A1E,0 0 30px #FFB34788}
.ph-prize span{color:#FFF5DA;font-weight:600}
.ph-clock{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:360px;margin:0 auto 10px}
.ph-clock div{padding:10px 4px 8px;border-radius:14px;background:#0006;box-shadow:inset 0 0 0 1px #ffffff2a}
.ph-clock b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(24px,8vw,34px);color:#fff;font-variant-numeric:tabular-nums}
.ph-clock span{font-size:11px;color:#FFD9A0}
.ph-when{position:relative;font-size:13px;color:#FFE6C8}
.ph-cta{position:relative;margin:4px 0 10px;min-width:min(100%,300px);font-size:17px}
.promo-hero .small a{color:#FFE27A}
.prize-list{list-style:none;margin:0 0 12px;padding:0}
.prize-list li{display:flex;justify-content:space-between;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line-soft)}
.prize-list li:last-child{border:0}
.prize-list b{color:var(--gold);font-family:var(--display)}
.steps{margin:0;padding:0 0 0 22px}
.steps li{margin:0 0 14px;padding-left:4px}
.steps li::marker{font-family:var(--display);font-weight:800;color:var(--gold)}
.steps b,.steps span{display:block}
.steps span{color:var(--muted);font-size:14px}
.share-panel{margin:16px 0;text-align:center}
.share-panel p{font-weight:700;margin-bottom:10px}
.share-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.share-buttons a,.share-buttons button{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:14px;border:0;font-weight:800;color:#fff;text-decoration:none}
.sh-tg{background:#229ED9}.sh-fb{background:#1877F2}.sh-wa{background:#25D366;color:#0B3B1C!important}.sh-copy{background:var(--surface-3)}
.promo-note{text-align:center}
@media (min-width:700px){.share-buttons{grid-template-columns:repeat(4,1fr)}}
@media (prefers-reduced-motion:reduce){.la-shine,.ph-glow,.bw-rays{animation:none}}

.vslot .vs-controls{padding:12px 14px 10px;border-bottom:1px solid #ffffff12}
.vslot .bet-row{border-top:0}
@media (max-width:699px){.vs-stage{padding:10px 8px 8px}.vs-jackpots{margin-bottom:8px}.vs-pearls{margin-bottom:8px}.vs-winbar{margin-top:8px;padding:6px 12px}.vs-winbar b{font-size:24px}.vs-spin{width:80px;height:80px}}

/* ---------- daily / weekly / monthly lottery ---------- */
.lotto-ads{display:flex;gap:10px;margin:0 -12px 14px;padding:0 12px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.lotto-ads::-webkit-scrollbar{display:none}
.lotto-ads .lotto-ad{flex:0 0 100%;margin:0;scroll-snap-align:center}
.lotto-ads.many .lotto-ad{flex-basis:88%}
.lotto-ad.t-daily{background:linear-gradient(115deg,#7A2A00 0,#D9541C 50%,#F2992E 100%)}
.lotto-ad.t-weekly{background:linear-gradient(115deg,#2E0A5E 0,#7B2AC9 50%,#C04DD8 100%)}
.lotto-ad.t-monthly{background:linear-gradient(115deg,#5A0616 0,#B3123B 45%,#E0571C 100%)}
.la-type{display:inline-block;margin-right:4px;padding:1px 8px;border-radius:999px;background:#FFE27A;color:#4A1A00;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.la-prize small{display:inline}
.lotto-ad .la-prize small:first-child{font-size:12px;font-weight:700;color:#FFE6C8}
@media (min-width:1000px){.lotto-ads{margin:0 0 16px;padding:0}.lotto-ads.many .lotto-ad{flex:1 1 0}}

.draw-tabs{display:flex;gap:8px;margin:6px -16px 12px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none}
.draw-tabs::-webkit-scrollbar{display:none}
.draw-tab{flex:0 0 auto;min-width:132px;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:16px;background:var(--surface);border:2px solid var(--line-soft);text-decoration:none;color:var(--ink)}
.draw-tab .dt-type{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.draw-tab b{font-family:var(--display);font-size:15px;color:var(--gold);white-space:nowrap}
.draw-tab small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.draw-tab[aria-current]{border-color:var(--gold);background:var(--surface-2)}
.draw-tab.t-daily .dt-type{color:#FFB070}.draw-tab.t-weekly .dt-type{color:#E0A8FF}.draw-tab.t-monthly .dt-type{color:#FF9AAE}
.lotto-headline{display:flex;flex-direction:column;gap:2px;margin:0 0 10px;padding:14px 16px;border-radius:18px;background:linear-gradient(115deg,#5A0616,#B3123B 50%,#E0571C);color:#FFF5DA}
.lotto-headline.t-daily{background:linear-gradient(115deg,#7A2A00,#D9541C 55%,#F2992E)}
.lotto-headline.t-weekly{background:linear-gradient(115deg,#2E0A5E,#7B2AC9 55%,#C04DD8)}
.lh-type{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#FFE27A}
.lotto-headline strong{font-family:var(--display);font-size:clamp(24px,7vw,34px);line-height:1.1;color:#FFE27A;text-shadow:0 2px 0 #4A0A10}
.lotto-headline span:last-child{font-size:13px}
.promo-hero.t-daily{background:radial-gradient(120% 80% at 50% 0,#F2B13A 0,#D9541C 40%,#5A1C04 85%)}
.promo-hero.t-weekly{background:radial-gradient(120% 80% at 50% 0,#E07AE8 0,#7B2AC9 40%,#22063F 85%)}
.ph-upto{display:block!important;font-family:var(--display);font-weight:800;font-size:20px;color:#FFF5DA!important}
.ph-type{display:inline-block;margin-right:6px;padding:2px 10px;border-radius:999px;background:#FFE27A;color:#4A1A00;font-size:12px;text-transform:uppercase}

/* staff: create draw */
.type-pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:800;background:var(--surface-3)}
.type-pill.t-daily{background:#D9541C}.type-pill.t-weekly{background:#7B2AC9}.type-pill.t-monthly{background:#B3123B}
.draw-types{margin-bottom:8px}
.type-choice{flex:1 1 0;position:relative}
.type-choice input{position:absolute;opacity:0;pointer-events:none}
.type-choice span{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;border:2px solid var(--line);background:var(--surface-2);font-weight:800}
.type-choice input:checked+span{border-color:var(--gold);color:var(--gold);background:#F4C54A1a}
.type-choice input:focus-visible+span{outline:3px solid var(--mint);outline-offset:2px}
.prize-rows{display:grid;gap:6px;margin:8px 0 14px}
.prize-row{display:grid;grid-template-columns:42px 1fr 1fr;gap:6px;align-items:center}
.prize-row span{font-weight:700;color:var(--muted)}
.prize-row select,.prize-row input{margin:0!important;min-height:46px}
.more-options{margin:6px 0 14px}
.more-options summary{cursor:pointer;font-weight:700;color:var(--mint);padding:8px 0}
.check{display:flex;gap:8px;align-items:flex-start;font-weight:600}
.row-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:180px}
.row-actions button{min-height:38px;font-size:12px;padding:0 10px}

.la-num{display:block;white-space:nowrap}
.la-num small{font-size:.55em!important;font-family:var(--display)!important;color:#FFE27A!important}
.lotto-ad .la-prize>small{display:block;font-size:12px}
.ph-prize b{font-size:clamp(34px,11.5vw,76px)!important;white-space:nowrap}
.lotto-headline strong{white-space:nowrap;font-size:clamp(20px,6.4vw,34px)}
input[type=datetime-local],input[type=date]{width:100%;min-height:50px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-deep);color:var(--ink);font-size:16px;color-scheme:dark}

/* =====================================================================================================
   Skill: Memory Test and Picture Puzzle
   ===================================================================================================== */
.skill-game .sk-stage{position:relative;padding:14px 12px 12px}
.theme-recall .sk-stage{background:radial-gradient(120% 80% at 50% 0,#3D6BD8 0,#1C2F78 50%,#0D1640 100%)}
.theme-scramble .sk-stage{background:radial-gradient(120% 80% at 50% 0,#F2B13A 0,#C2611C 45%,#4A1F08 100%)}
.sk-hud{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:12px;color:#fff}
.sk-hud>div:not(.sk-phase){display:flex;flex-direction:column;align-items:center;min-width:64px;padding:6px 10px;border-radius:14px;background:#0006}
.sk-hud small{font-size:11px;font-weight:700;color:#C8D6FF}
.sk-hud b{font-family:var(--display);font-size:24px;line-height:1.1}
.sk-phase{text-align:center;font-family:var(--display);font-weight:800;font-size:20px;color:#FFE27A;text-shadow:0 2px 0 #0008}
.recall-board{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px;max-width:420px;margin:0 auto;padding:10px;border-radius:20px;background:#0008;box-shadow:inset 0 0 0 2px #ffffff22}
.rc-tile{aspect-ratio:1;border:0;border-radius:14px;background:linear-gradient(180deg,#2D4596,#1F3170);box-shadow:inset 0 2px 0 #ffffff22,0 4px 0 #0B1438;transition:transform .12s,background .15s}
.recall-board[data-phase=input] .rc-tile:not(.ok):active{transform:scale(.93)}
.rc-tile.lit{background:radial-gradient(circle at 50% 40%,#FFFFFF,#9FD0FF 45%,#3F8CFF);box-shadow:0 0 22px #9FD0FF,0 4px 0 #0B1438;animation:litpop .3s cubic-bezier(.3,1.7,.5,1) both;animation-delay:var(--d,0ms)}
@keyframes litpop{from{transform:scale(.7);filter:brightness(2)}}
.rc-tile.ok{background:radial-gradient(circle at 50% 40%,#E9FFF3,var(--mint) 55%,#2E9C6A);box-shadow:0 0 16px #86E3B8,0 4px 0 #0B3B26;animation:litpop .25s}
.rc-tile.bad{background:var(--coral);animation:shake .35s}
.rc-tile.miss{background:#FFE27A55;box-shadow:inset 0 0 0 3px #FFE27A}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.recall-board.cleared{box-shadow:0 0 0 3px var(--mint),0 0 30px #86E3B8}
.sk-banner{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 26px;
  border-radius:20px;background:#000c;color:#fff;text-align:center;pointer-events:none;white-space:nowrap}
.sk-banner b{font-family:var(--display);font-size:30px;color:#FFE27A}
.sk-banner.in{animation:bannerin .35s cubic-bezier(.2,1.6,.4,1)}

.scramble-wrap{position:relative;max-width:440px;margin:0 auto}
.scramble-board{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;padding:6px;border-radius:18px;background:#2A1205;box-shadow:0 0 0 3px #FFD36B,0 12px 30px #0008}
.sc-tile{position:relative;aspect-ratio:1;border:0;border-radius:6px;background-color:#3A1A08;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #0004;transition:transform .15s,box-shadow .15s,border-radius .3s}
.sc-tile span{position:absolute;top:3px;left:4px;display:none;min-width:20px;padding:0 4px;border-radius:6px;background:#000a;color:#fff;font:800 12px/18px var(--body)}
.show-nums .sc-tile span{display:block}
.sc-tile.num{background:linear-gradient(160deg,hsl(var(--h) 75% 62%),hsl(var(--h) 70% 38%))}
.sc-tile.num span{display:grid;place-items:center;position:absolute;inset:0;background:none;font-family:var(--display);font-size:calc(min(9vw,48px) * 3 / var(--n));text-shadow:0 2px 0 #0006}
.sc-tile.sel{transform:scale(.9);box-shadow:0 0 0 3px #fff,0 0 18px #FFE27A;z-index:2}
.sc-tile.ok{box-shadow:inset 0 0 0 2px #86E3B8aa}
.sc-tile.swap{animation:swap .28s ease-out}
@keyframes swap{40%{transform:scale(1.08);filter:brightness(1.3)}}
.scramble-board.mixing .sc-tile{animation:mix .45s ease-out}
@keyframes mix{0%{transform:rotateY(90deg)}100%{transform:none}}
.scramble-board.solved{gap:0}
.scramble-board.solved .sc-tile{border-radius:0;box-shadow:none}
.scramble-board.solved .sc-tile span{display:none}
.scramble-board.solved:after{content:'';position:absolute;inset:0;border-radius:18px;box-shadow:0 0 0 4px var(--mint),0 0 40px #86E3B8;pointer-events:none;animation:totem .8s ease-in-out 3 alternate}
.scramble-board.timeup{filter:grayscale(.6)}
.scramble-board.peek:before{content:'';position:absolute;inset:6px;z-index:3;border-radius:12px;background:var(--pic) center/cover,#3A1A08;box-shadow:0 0 0 2px #fff}
.scramble-tools{display:flex;justify-content:center;gap:8px;margin-top:12px}
.scramble-tools .secondary[aria-pressed=true]{background:#FFE27A;color:#4A2A00;border-color:#FFE27A}
.pic-picks{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.pic-picks button{aspect-ratio:1;border:3px solid transparent;border-radius:12px;background-size:cover;background-position:center;background-color:var(--surface-2);padding:0}
.pic-picks button[aria-checked=true]{border-color:var(--gold);box-shadow:0 0 0 2px #F4C54A55}
.pic-picks .pic-numbers{font:800 11px/1.3 var(--display);color:var(--ink)}
.pic-picks button:disabled,.chip-picks button:disabled{opacity:.5}
@media (max-width:420px){.pic-picks{grid-template-columns:repeat(4,1fr)}}

/* ---------- game lobby (picture cards, scroll up and down on a phone) ---------- */
.lobby{margin:22px 0 0}
.lobby-title{margin:0 0 4px;font-size:24px}
.lobby-group{margin:16px 0 10px;font-size:16px;color:var(--muted)}
.lobby-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.lobby-card{position:relative;display:block;padding:0;border:0;border-radius:18px;overflow:hidden;background:var(--surface-2);aspect-ratio:3/4;
  box-shadow:0 10px 24px #0006,inset 0 0 0 1px #ffffff1a;transition:transform .15s}
.lobby-card img{display:block;width:100%;height:100%;object-fit:cover}
.lobby-card:active{transform:scale(.97)}
.lc-pill{position:absolute;top:8px;left:8px;padding:2px 9px;border-radius:999px;background:var(--coral);color:#fff;font-style:normal;font-size:11px;font-weight:800;box-shadow:0 2px 6px #0006}
.lc-play{position:absolute;right:8px;top:8px;padding:5px 11px;border-radius:999px;background:linear-gradient(180deg,#FFF0B0,var(--gold));color:var(--gold-ink);font-size:12px;font-weight:800;box-shadow:0 3px 0 #9C7410}
.lc-playing{display:none;position:absolute;left:0;right:0;top:0;padding:6px;background:var(--mint);color:#0E3326;font-size:12px;font-weight:800;text-align:center}
.lobby-card.current{box-shadow:0 0 0 3px var(--mint),0 10px 24px #0006}
.lobby-card.current .lc-playing{display:block}
.lobby-card.current .lc-pill,.lobby-card.current .lc-play{display:none}
@media (min-width:700px){.lobby-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1000px){.lobby-grid{grid-template-columns:repeat(6,1fr)}}
@media (hover:hover){.lobby-card:hover{transform:translateY(-3px)}}

/* ---------- staff balance sheet ---------- */
.bs-period{display:flex;flex-direction:column;gap:10px;margin:10px 0 16px}
.bs-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.bs-chip{flex:0 0 auto;padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:14px;color:var(--ink)}
.bs-chip[aria-current]{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.bs-custom{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.bs-custom label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--muted);flex:1 1 130px}
.bs-custom input{min-height:44px}
.bs-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.bs-card{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--line-soft);border-top:4px solid var(--line)}
.bs-card.in{border-top-color:var(--mint)}.bs-card.out{border-top-color:#8FC8FF}.bs-card.win{border-top-color:var(--gold)}
.bs-card.good{border-top-color:var(--mint)}.bs-card.bad{border-top-color:var(--coral)}
.bs-k{font-size:12px;font-weight:700;color:var(--muted)}
.bs-card b{font-family:var(--display);font-size:clamp(20px,6vw,28px);line-height:1.1;font-variant-numeric:tabular-nums}
.bs-card.good b{color:var(--mint)}.bs-card.bad b{color:var(--coral)}
.bs-card b small{font-family:var(--body);font-size:12px;color:var(--muted);font-weight:600}
.bs-d{font-size:12px;color:var(--ink);line-height:1.4}
.bs-all{margin-top:auto;padding-top:6px;border-top:1px dashed var(--line-soft);font-size:11.5px;color:var(--faint)}
.bs-now-grid{display:grid;grid-template-columns:1fr;gap:10px}
.bs-now-grid>div{display:flex;flex-direction:column;padding:10px 12px;border-radius:12px;background:var(--bg-deep)}
.bs-now-grid b{font-family:var(--display);font-size:20px}
.bs-now-grid span{font-size:13px;color:var(--muted)}
.bs-now-grid a{color:var(--mint);font-weight:700}
.bs-table td,.bs-table th{padding:9px 10px;font-variant-numeric:tabular-nums}
.bs-table tr.quiet td{color:var(--faint)}
.bs-table tfoot th{color:var(--ink);border-top:2px solid var(--line)}
td.pos,th.pos{color:var(--mint)}td.neg,th.neg{color:var(--coral)}
.bs-bars{min-width:110px}
.bs-bars span{display:block;height:6px;border-radius:3px;margin:2px 0}
.bs-bars .st,.lg.st{background:#8FC8FF}.bs-bars .wn,.lg.wn{background:var(--gold)}
.lg{display:inline-block;width:12px;height:8px;border-radius:2px;margin:0 4px 0 8px;vertical-align:middle}
@media (min-width:700px){.bs-cards{grid-template-columns:repeat(4,1fr)}.bs-now-grid{grid-template-columns:repeat(2,1fr)}.bs-period{flex-direction:row;justify-content:space-between;align-items:flex-end}}

.bs-table tr.quiet{display:none}
.bs-table.show-quiet tr.quiet{display:table-row}
.bs-table .bs-empty{display:none}
.bs-table tbody:not(:has(tr:not(.quiet):not(.bs-empty))) .bs-empty{display:table-row}
.bs-table.show-quiet .bs-empty{display:none!important}
.bs-toggle{min-height:34px;font-size:12px;margin-left:8px}

/* ---------- installable app ---------- */
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-links a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.install-banner{position:fixed;left:10px;right:10px;bottom:calc(var(--nav-h) + var(--safe-b) + 10px);z-index:60;
  display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.45);
  animation:install-in .28s ease-out}
.guest .install-banner{bottom:calc(var(--safe-b) + 10px)}
.install-banner img{border-radius:10px;flex:none}
.install-banner div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.install-banner div span{font-size:12px;color:var(--muted)}
.install-banner .primary{flex:none;padding:9px 16px;min-height:0}
.install-x{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:22px;line-height:1}
@keyframes install-in{from{transform:translateY(20px);opacity:0}}
@media (min-width:1000px){.install-banner{left:auto;right:20px;bottom:20px;max-width:400px}}
.install-sheet{position:fixed;inset:0;z-index:90;background:rgba(5,15,12,.7);display:flex;align-items:flex-end;justify-content:center;padding:12px}
.install-sheet-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 20px calc(18px + var(--safe-b));text-align:center}
.install-sheet-card img{border-radius:14px;margin-bottom:8px}
.install-sheet-card ol{text-align:left;margin:6px 0 18px;padding-left:22px;display:grid;gap:8px}
.install-sheet-card svg{width:18px;height:18px;vertical-align:-3px;color:#4DA3FF}
.install-sheet-card .primary{width:100%}
@media (prefers-reduced-motion:reduce){.install-banner{animation:none}}
.offline-card{max-width:440px;margin:8vh auto 0;text-align:center}
.offline-icon{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--gold)}
.offline-icon svg{width:38px;height:38px}
.offline-card .primary{margin:8px 0 10px}
.rg{max-width:720px}
.rg ul{padding-left:20px;display:grid;gap:6px}
.rg-contact{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.rg-contact a{color:var(--gold);font-weight:700}

/* ---------- welcome pop-up (new players) ---------- */
.welcome-open,.welcome-open body{overflow:hidden}
.welcome{position:fixed;inset:0;z-index:95;display:grid;place-items:center;overflow:hidden;padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(circle at 50% 30%,#1F5A3Fee,#04110Dee 72%);animation:bwin .3s ease-out}
.welcome.out{animation:bwout .25s ease-in forwards}
.welcome .bw-rays{opacity:.7;top:-60vmax;left:50%;margin-left:-85vmax}
.welcome-coins{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.welcome-coins i{position:absolute;top:-10%;font-style:normal;animation:coinfall linear infinite;filter:drop-shadow(0 4px 4px #0008)}
.welcome.settled .welcome-coins i{animation-iteration-count:1}
.welcome-card{position:relative;width:100%;max-width:400px;max-height:100%;display:flex;flex-direction:column;text-align:center;padding:16px 18px 14px;border-radius:26px;
  background:linear-gradient(180deg,#1C4739,#123329);border:1px solid #F4C54A66;
  box-shadow:0 0 0 6px #F4C54A14,0 30px 80px #000c;animation:winpop .6s cubic-bezier(.2,1.6,.4,1) both}
.welcome-gift{font-size:46px;line-height:1;margin:0 auto 4px;flex:none;filter:drop-shadow(0 10px 16px #000a);animation:totem 1.2s ease-in-out infinite alternate}
.welcome-hi{flex:none;margin:0;color:var(--mint);font-weight:700;font-size:14px}
.welcome-amount{flex:none;margin:4px 0 2px;display:flex;flex-direction:column;align-items:center;line-height:1}
.welcome-amount span{font-family:var(--display);font-weight:800;font-size:clamp(56px,19vw,78px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#FFF6C8,#F4C54A 55%,#D98A12);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #5A3A00) drop-shadow(0 0 18px #F4C54A66)}
.welcome-amount small{font-family:var(--display);font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ivory);margin-top:4px}
.welcome-lead{margin:6px 0 12px;color:var(--muted);flex:none}
.welcome-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -4px 12px;padding:0 4px}
.welcome-games{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:7px;text-align:left}
.welcome-games li,.welcome-lotto{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:14px;background:#0F2E2799;border:1px solid var(--line-soft)}
.welcome-games li>span,.welcome-lotto>span{font-size:26px;line-height:1;flex:none;width:32px;text-align:center}
.welcome-games div,.welcome-lotto div{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.welcome-games small,.welcome-lotto small{color:var(--muted);font-size:12.5px}
.welcome-lotto{text-align:left;background:linear-gradient(90deg,#F4C54A26,#0F2E2799);border-color:#F4C54A55}
.welcome-lotto small{color:var(--gold)}
.welcome-go{width:100%;font-size:18px;padding:14px;flex:none}
.welcome-fine{flex:none;margin:10px 0 0;font-size:11.5px;line-height:1.45;color:var(--faint)}
.welcome-fine a{color:var(--muted);text-decoration:underline}
@media (max-height:700px){.welcome-gift{display:none}.welcome-amount span{font-size:52px}.welcome-games small{display:none}.welcome-lead{margin-bottom:8px}}
@media (prefers-reduced-motion:reduce){.welcome,.welcome-card,.welcome-gift{animation:none}}

/* ---------- staff: SMS reader setup ---------- */
.reader-grid{display:grid;gap:16px;align-items:start}
@media (min-width:760px){.reader-grid{grid-template-columns:1fr 230px}}
.reader-steps{margin:0;padding-left:22px;display:grid;gap:12px}
.reader-steps .primary{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;margin-bottom:6px}
.reader-steps a:not(.primary){color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.reader-qr{margin:0;justify-self:center;text-align:center;max-width:230px}
.reader-qr svg{width:100%;height:auto;border-radius:14px;background:#fff;display:block}
.reader-status{margin:14px 0 8px;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.reader-status .ok{color:var(--mint)}.reader-status .warn{color:var(--gold)}
.points-worth{margin:-4px 0 10px;font-family:var(--display);font-weight:700;font-size:20px;color:var(--gold)}
.points-worth span{font-family:var(--body);font-weight:400;font-size:14px;color:var(--muted)}

/* ---------- staff: lottery coupons ---------- */
.cp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0 16px}
@media (max-width:640px){.cp-cards{grid-template-columns:1fr 1fr;gap:8px}.cp-card{padding:10px 12px}.cp-card b{font-size:22px}.cp-card .cp-open{display:none}}
.cp-card{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--line)}
.cp-card[aria-current]{box-shadow:0 0 0 2px var(--gold)}
.cp-card b{font-family:var(--display);font-size:26px;line-height:1.1}.cp-card b small{font-size:14px;color:var(--muted);font-weight:600}
.cp-card span{font-size:13px;color:var(--muted)}.cp-k{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px!important}
.cp-card .cp-wait{color:var(--gold)}.cp-card .cp-open{font-size:12px}
.cp-daily{border-top-color:#F4C54A}.cp-weekly{border-top-color:#86E3B8}.cp-monthly{border-top-color:#FF7A5C}.cp-none{border-top-color:#9AB0FF}
.cp-filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end}
.cp-filters label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.cp-filters select,.cp-filters input{min-width:160px}
.cp-tabs{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px}
.cp-tabs a{padding:7px 14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-weight:600;font-size:14px}
.cp-tabs a[aria-current]{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.cp-num{font-family:var(--display);font-size:17px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.cp-win{font-size:12px;color:var(--gold);white-space:nowrap}
.cp-badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;color:#0A231D;background:#9AB0FF}
.cp-badge.cp-daily{background:#F4C54A}.cp-badge.cp-weekly{background:#86E3B8}.cp-badge.cp-monthly{background:#FF7A5C}
.cp-st{font-weight:700;font-size:13px}.cp-st-confirmed{color:var(--mint)}.cp-st-pending{color:var(--gold)}.cp-st-rejected,.cp-st-expired{color:var(--coral)}.cp-st-reserved{color:var(--muted)}
.cp-act{display:flex;flex-direction:column;gap:6px;min-width:96px}.cp-act button{padding:6px 12px;min-height:0;font-size:13px}
.use-pts{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;color:#0A231D;background:var(--mint)}
.pay-purpose{margin:10px 0 14px;padding:10px 14px;border-radius:12px;background:#F4C54A1F;border:1px solid #F4C54A55;font-size:14px}
.pay-purpose a{color:var(--gold);text-decoration:underline}
.page.wide{max-width:1240px}
.cp-table td{vertical-align:top}
.cp-table td small{display:inline-block;max-width:220px}

/* =================== Goat Crossing =================== */
.gc-stage{position:relative;padding:10px;border-radius:18px;background:linear-gradient(180deg,#26324A,#141B2B);overflow:hidden}
.gc-hud{display:flex;gap:8px;margin-bottom:8px}
.gc-hud div{flex:1;display:flex;flex-direction:column;padding:6px 12px;border-radius:12px;background:#0007;box-shadow:inset 0 0 0 1px #ffffff14}
.gc-hud span{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#A9B6D3}
.gc-hud b{font-family:var(--display);font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.gc-now b{color:var(--mint)}.gc-next b{color:var(--gold)}
.gc-road{position:relative;height:clamp(230px,58vw,300px);overflow:hidden;border-radius:14px;background:#343A47;box-shadow:inset 0 0 0 2px #0006}
.gc-track{display:flex;height:100%;will-change:transform}
.gc-side{flex:0 0 78px;display:grid;place-items:end center;padding-bottom:12px;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.08em;color:#3A3F48;
  background:repeating-linear-gradient(180deg,#A7ADB6 0 34px,#959BA4 34px 36px);box-shadow:inset -7px 0 0 #D5D9DE}
.gc-side.end{flex-basis:90px;place-items:center;font-size:34px;background:radial-gradient(circle at 50% 40%,#46B06A,#1F6B38);box-shadow:inset 7px 0 0 #D5D9DE}
.gc-lane{position:relative;flex:0 0 92px;background:#2E333F}
.gc-lane:after{content:'';position:absolute;top:0;bottom:0;right:-2px;width:4px;z-index:1;background:repeating-linear-gradient(180deg,#F3F0E2cc 0 20px,transparent 20px 38px)}
.gc-lane:last-of-type:after{display:none}
.gc-x{position:absolute;left:50%;top:34%;z-index:2;transform:translate(-50%,-50%);display:grid;place-items:center;width:66px;aspect-ratio:1;border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:15px;color:#fff;font-variant-numeric:tabular-nums;
  background:radial-gradient(circle at 50% 35%,#6F82AA,#38476A 70%);border:3px solid #8EA3CC;box-shadow:0 6px 0 #0005,inset 0 -6px 10px #0004}
.gc-hole{position:absolute;left:50%;bottom:6px;width:46px;height:16px;transform:translateX(-50%);border-radius:50%;background:repeating-linear-gradient(90deg,#1E222B 0 4px,#2A2F3A 4px 8px);box-shadow:inset 0 0 0 2px #444B59}
.gc-lane.next .gc-x{color:#2E2200;border-color:#FFF2B0;background:radial-gradient(circle at 50% 35%,#FFE586,#E0A51C 70%);animation:gcpulse 1s ease-in-out infinite}
@keyframes gcpulse{50%{box-shadow:0 6px 0 #0005,0 0 0 8px #F4C54A33,0 0 24px #F4C54A}}
.gc-lane.safe{background:#30383F}
.gc-lane.safe .gc-x{border-color:#C9FFD9;background:radial-gradient(circle at 50% 35%,#86E3B8,#1F9A52 70%)}
.gc-lane.safe:before{content:'🚧';position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:26px;z-index:2;filter:drop-shadow(0 3px 2px #0008)}
.gc-lane.crash{background:#5A1F24}.gc-lane.crash .gc-x{background:radial-gradient(circle at 50% 35%,#FF9C88,#C2341C 70%);border-color:#FFD2C8}
.gc-lane.was-car .gc-x{box-shadow:0 0 0 4px var(--coral),0 6px 0 #0005}
.gc-lane.was-car:before{content:'🚗';position:absolute;top:8px;left:50%;transform:translateX(-50%) rotate(-90deg);font-size:28px;z-index:2}
.gc-car{position:absolute;left:50%;top:-70px;z-index:4;font-size:46px;line-height:1;transform:translateX(-50%) rotate(-90deg);filter:drop-shadow(0 6px 4px #0009);pointer-events:none}
.gc-car.pass{animation:gcdrive 1.4s linear forwards;opacity:.9}
.gc-car.hit{animation:gchit .34s cubic-bezier(.5,0,1,.6) forwards}
@keyframes gcdrive{to{top:110%}}
@keyframes gchit{to{top:calc(73% - 46px)}}
.gc-goat{position:absolute;left:0;top:73%;z-index:3;width:0;height:0;pointer-events:none}
.gc-goat span{position:absolute;left:-27px;top:-34px;font-size:50px;line-height:1;transform:scaleX(-1);filter:drop-shadow(0 8px 5px #000a);transition:transform .2s}
.gc-goat.cheer span{animation:gchop .45s ease-in-out 3}
@keyframes gchop{50%{transform:scaleX(-1) translateY(-26px) rotate(-8deg)}}
.gc-goat.splat span{transform:scaleX(-1) scaleY(.4) translateY(42%);filter:grayscale(.5) drop-shadow(0 4px 2px #000a)}
.gc-goat.splat:after{content:'💥';position:absolute;left:-30px;top:-46px;font-size:56px;animation:winpop .3s}
.gc-controls{display:flex;flex-wrap:nowrap;gap:10px}
.gc-controls .primary,.gc-controls .secondary{flex:1 1 0;min-width:0}
.gc-controls button{min-height:56px}
.gc-go{flex-grow:1.4!important;font-size:20px!important}
.gc-controls small{margin-left:6px;font-size:13px;font-weight:700;opacity:.85}
.gc-cash:not(:disabled){background:linear-gradient(180deg,#86E3B8,#3FB57A);color:#062614;border-color:#86E3B8}
.gc-levels{display:grid;gap:4px;margin:10px 0;font-size:13px}
.gc-row{display:grid;grid-template-columns:1.2fr .8fr 1.2fr 1fr 1fr;gap:6px;padding:5px 8px;border-radius:8px;background:var(--surface-2)}
.gc-row span:nth-child(n+4){font-variant-numeric:tabular-nums;font-weight:700;color:var(--gold)}
.gc-head{background:none;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.gc-head span{color:var(--muted)!important}
.gc-stage .vs-banner{top:50%}
@media (prefers-reduced-motion:reduce){.gc-lane.next .gc-x,.gc-goat.cheer span{animation:none}}

/* =================== Golden Pots =================== */
.theme-pots{--frame:#F4C54A;--glow:#FFB02Ecc;--cell:#4A0A0Acc}
.theme-pots .vs-stage{background:radial-gradient(120% 70% at 50% 0,#FFD36B 0,#D9631A 26%,#8E1A12 58%,#2A0505 100%)}
.gp-wrap{display:grid;grid-template-columns:1fr 62px;gap:8px;align-items:stretch}
.gp-cell{background:radial-gradient(circle at 50% 30%,#7A1A12,#2A0505 75%)!important}
.gp-pot{position:absolute;left:17%;right:17%;top:20%;bottom:9%;border-radius:38% 38% 46% 46%/30% 30% 62% 62%;
  background:linear-gradient(160deg,#FFF0B0 0,#E8B53A 30%,#B57B12 65%,#5A3A04);box-shadow:inset 0 -5px 8px #0006,inset 3px 3px 5px #fff6,0 2px 0 #0007;filter:brightness(.66) saturate(.75)}
.gp-pot:before{content:'';position:absolute;left:18%;right:18%;top:-16%;height:22%;border-radius:40%;background:linear-gradient(180deg,#FFE48A,#9A6408);box-shadow:0 2px 0 #0006}
.gp-pot:after{content:'';position:absolute;left:44%;right:44%;top:-28%;height:14%;border-radius:50%;background:#E8B53A}
.gp-cell.lit .gp-pot{filter:none;box-shadow:inset 0 -5px 8px #0005,inset 3px 3px 5px #fff8,0 0 16px #FFD45C}
.gp-cell em{position:relative;z-index:2;align-self:end;margin-bottom:12%;padding:1px 6px;border-radius:7px;font-style:normal;font-family:var(--display);font-weight:800;
  font-size:clamp(12px,3.6vw,17px);color:#FFF3C2;background:#7A0A1Edd;box-shadow:0 0 0 1px #F4C54A;font-variant-numeric:tabular-nums}
.gp-cell.jp-mini em{background:#0E6A2E}.gp-cell.jp-minor em{background:#0E3E8A}.gp-cell.jp-major em{background:#5A1290}
.gp-bolt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border-radius:14px;background:linear-gradient(180deg,#3A0A3A,#170317);border:2px solid #F4C54A;box-shadow:inset 0 0 14px #000a}
.gp-bolt-head{font-size:22px;filter:drop-shadow(0 0 6px #FFD45C)}
.gp-bolt-win{min-height:30px;font-family:var(--display);font-weight:800;font-size:19px;color:#fff;font-variant-numeric:tabular-nums}
.gp-bolt-list{display:flex;flex-direction:column;gap:2px;width:100%}
.gp-bolt-list i{display:block;padding:3px 0;border-radius:8px;text-align:center;font-style:normal;font-family:var(--display);font-weight:800;font-size:13px;color:#D9B6FF88}
.gp-bolt-list i.on{color:#fff;background:linear-gradient(180deg,#FF4DC4,#8B12A8);box-shadow:0 0 12px #FF4DC4}
.gp-bolt.hit{box-shadow:0 0 22px #FF4DC4,inset 0 0 14px #000a;animation:gpflash .35s 3}
.gp-bolt.miss .gp-bolt-win{color:#ffffff55}
@keyframes gpflash{50%{border-color:#fff;filter:brightness(1.6)}}

/* =================== Erta Ale Coins =================== */
.theme-volcano{--frame:#FF8A2A;--glow:#FF5A1Acc;--cell:#1C1010cc}
.theme-volcano .vs-stage{background:radial-gradient(130% 80% at 50% 105%,#FF8A1A 0,#C2300C 22%,#4A0F06 52%,#150504 100%)}
.ea-title{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:0 0 8px;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1}
.ea-title span{font-size:clamp(20px,6vw,28px);background:linear-gradient(180deg,#FFF3B0,#FFB020 45%,#E2531F);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #4A0F06)}
.ea-title b{font-size:clamp(14px,4vw,18px);letter-spacing:.2em;color:#FFD9A8}
.theme-volcano .vs-frame{max-width:420px;margin:0 auto}
.ea-cell{background:radial-gradient(circle at 50% 40%,#3A2A28,#120808 75%)!important}
.ea-rock{position:absolute;inset:10%;border-radius:42% 48% 38% 50%/46% 40% 52% 44%;background:
  radial-gradient(circle at 28% 66%,#FF7A1A 0 3%,#FF6A1A55 6%,transparent 11%),
  radial-gradient(circle at 70% 36%,#FFB020 0 2%,#FF6A1A44 5%,transparent 10%),
  radial-gradient(circle at 58% 74%,#FF6A1A66 0 2%,transparent 7%),
  radial-gradient(circle at 36% 30%,#5E4E4A,#2A1E1C 62%,#160E0D);box-shadow:inset 0 -7px 12px #000a,inset 3px 3px 6px #fff2,0 0 14px #FF5A1A22}
.ea-coin{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 35% 28%,#FFF3B0 0,#FFB020 22%,#E2531F 58%,#7A1A06 100%);
  box-shadow:inset 0 0 0 5px #FFD45C,inset 0 0 0 9px #B5420C,0 0 22px #FF7A1A,0 4px 0 #0007}
.ea-cell em{position:relative;z-index:2;font-style:normal;font-family:var(--display);font-weight:800;font-size:clamp(18px,6vw,30px);color:#fff;text-shadow:0 2px 0 #5A1800,0 0 10px #000;font-variant-numeric:tabular-nums}
.ea-cell.jp-mini .ea-coin{background:radial-gradient(circle at 35% 28%,#D8FFE0 0,#4ADE80 25%,#15803D 62%,#064E1F)}
.ea-cell.jp-minor .ea-coin{background:radial-gradient(circle at 35% 28%,#DBEEFF 0,#60A5FA 25%,#1D4ED8 62%,#0A2B66)}
.ea-cell.jp-major .ea-coin{background:radial-gradient(circle at 35% 28%,#F5DBFF 0,#C084FC 25%,#7E22CE 62%,#3A0866)}
.ea-cell.jp-mini em,.ea-cell.jp-minor em,.ea-cell.jp-major em{font-size:clamp(14px,4.4vw,22px)}
.ea-cell.mystery .ea-coin{background:radial-gradient(circle at 35% 28%,#F0E0FF 0,#A855F7 30%,#5B21B6 70%,#2E0A66);box-shadow:inset 0 0 0 5px #E9D5FF,inset 0 0 0 9px #6D28D9,0 0 22px #A855F7,0 4px 0 #0007;animation:totem 1s ease-in-out infinite alternate}
.ea-cell.mystery em{font-size:clamp(26px,8vw,40px)}
.ea-cell.flip{animation:flipin .3s}
.erupt .vs-stage{animation:quake .45s 3}
@keyframes quake{25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,-1px)}}
.erupt .vs-frame{box-shadow:0 0 36px #FF5A1A,0 0 4px #fff}
@media (prefers-reduced-motion:reduce){.erupt .vs-stage,.ea-cell.mystery .ea-coin{animation:none}}
.erupt .ea-title{visibility:hidden}

/* language switcher: globe button in the top bar, small menu; the side menu has the same choices as big buttons */
.lang-menu{position:relative}
.lang-menu>summary{list-style:none;cursor:pointer;user-select:none}
.lang-menu>summary::-webkit-details-marker{display:none}
.lang-link{display:inline-flex;align-items:center;gap:2px;padding:8px 6px;font-size:13.5px;font-weight:700;color:var(--muted,var(--ink));white-space:nowrap;border-radius:8px}
.lang-link:hover,.lang-menu[open]>.lang-link{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lang-caret{font-size:10px;margin-left:2px;opacity:.7}.lang-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:200px;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line-soft);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.lang-pop-title{margin:4px 10px 6px;font-size:12px;font-weight:700;color:var(--faint)}
.lang-pop button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:0;border-radius:10px;background:none;color:var(--ink);font:600 15px/1.2 var(--body);text-align:left;cursor:pointer}
.lang-pop button:hover,.lang-pop button:focus-visible{background:var(--surface-2)}
.lang-pop button[aria-current]{color:var(--mint)}
.lang-tick{font-weight:800}
.topnav.guest .lang-menu{margin-right:6px}
.side-lang{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 10px 10px}
.side-lang button{padding:10px 8px;border-radius:12px;border:1px solid var(--line-soft);background:none;color:var(--ink);font:600 14px/1.2 var(--body);cursor:pointer}
.side-lang button[aria-current]{background:var(--mint);border-color:var(--mint);color:#0F2E27}
@media(max-width:480px){.lang-link{font-size:12.5px;padding:8px 4px}.topbar-right .wallet-chip .unit{display:none}}
@media(max-width:400px){.topbar .brand-word,.lang-caret{display:none}}
@media(max-width:600px){.lang-pop{position:fixed;left:12px;right:12px;top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 6px);min-width:0}.lang-pop button{padding:13px 14px;font-size:16px}}

/* errors shown inside a game: red until the status line changes */
.is-error{color:var(--danger)!important;font-weight:700}