/* ============================================================================
   CASINO — MODERN PREMIUM REDESIGN  (loads AFTER casino.css, overrides its look)
   Brand-themeable via --cas-* tokens. Preserves casino.css grid/virtualization
   mechanics (card footprint unchanged) — restyles hero, jackpot, toolbar, chips,
   cards, modal into a modern, glassy, premium UI. Mobile-first + responsive.
   ========================================================================== */
:root{
  --cas-accent:#f5c518; --cas-accent-rgb:245,197,24; --cas-accent-2:#d9a91a;
  --cas-accent-lt:#ffe9a8; --cas-ink:#0a0e1a;
  --cas-s1:#0a0e1a; --cas-s2:#0d1322; --cas-s3:#16213c;
  --cas-card:rgba(255,255,255,.04); --cas-line:rgba(255,255,255,.09);
  --cas-text:#eef2fb; --cas-muted:#9aa6c2;
}

/* ---- app shell ---------------------------------------------------------- */
.casino-app{ max-width:1500px; margin:0 auto; padding:0 clamp(10px,2.4vw,22px) calc(88px + var(--safe-bot,0px)); }
/* Casino is a cohesive DARK premium lobby on EVERY brand — including the
   light-content brands (goalbet/goldbet1) — so the toolbar, search bar,
   provider dropdown and chips stay clearly legible instead of vanishing on white. */
html:has(.casino-app) body{ background:var(--cas-s1) !important; color:var(--cas-text); }
.casino-app{ color:var(--cas-text); }
/* extra safety (older browsers w/o :has): give the search + provider controls a
   solid dark fill + light text so they read on any background. */
.casino-search, .casino-dd-btn{ background:var(--cas-s3) !important; border:1px solid rgba(255,255,255,.16) !important; color:var(--cas-text) !important; }
.casino-search input{ color:var(--cas-text) !important; } .casino-search input::placeholder{ color:#9aa6c2 !important; }
.casino-search i, .casino-dd-btn > i:first-child{ color:var(--cas-accent) !important; }
.casino-sync-btn{ background:var(--cas-s3) !important; border:1px solid rgba(255,255,255,.16) !important; color:var(--cas-accent) !important; }
.casino-chip{ background:var(--cas-s3) !important; color:#c9d2e6 !important; }
.casino-chip.is-active{ background:linear-gradient(180deg,var(--cas-accent),var(--cas-accent-2)) !important; color:var(--cas-ink) !important; }

/* ============================ 1. HERO ==================================== */
.casino-hero{
  position:relative; overflow:hidden; border:0;
  margin:16px 0 18px; padding:clamp(22px,4.2vw,40px) clamp(20px,4vw,44px);
  border-radius:22px;
  background:
    radial-gradient(640px 320px at 6% -30%, rgba(var(--cas-accent-rgb),.22), transparent 62%),
    radial-gradient(520px 300px at 102% -10%, rgba(var(--cas-accent-rgb),.10), transparent 58%),
    linear-gradient(155deg, var(--cas-s3) 0%, var(--cas-s2) 55%, var(--cas-s1) 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06),
             inset 0 0 0 1px rgba(var(--cas-accent-rgb),.16);
}
.casino-hero::before{
  content:""; position:absolute; inset:-45%; pointer-events:none;
  background:radial-gradient(440px 300px at 14% 8%, rgba(var(--cas-accent-rgb),.16), transparent 60%);
  animation:cpHeroGlow 10s ease-in-out infinite alternate;
}
.casino-hero__inner{ position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.casino-hero__eyebrow{ margin:0 0 9px; font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:800; color:var(--cas-accent); animation:cpFadeDown .5s ease both; }
.casino-hero__title{
  margin:0; font-weight:900; line-height:1; letter-spacing:-.02em;
  font-size:clamp(2rem,5.6vw,3rem);
  background:linear-gradient(92deg,#fff 0%, var(--cas-accent) 46%, #fff 72%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:cpShimmer 6s linear infinite;
}
.casino-hero__sub{ margin:11px 0 0; font-size:13.5px; color:rgba(255,255,255,.62); max-width:60ch; animation:cpFadeDown .5s .08s ease both; }
.casino-hero__wallet{ text-align:right; padding:13px 20px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(var(--cas-accent-rgb),.32); backdrop-filter:blur(10px); box-shadow:0 10px 26px rgba(0,0,0,.3); }
.casino-hero__wallet-label{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.55); }
.casino-hero__wallet-val{ font-size:1.4rem; font-weight:900; color:var(--cas-accent); }
.casino-hero__cta{ display:inline-flex; align-items:center; gap:9px; padding:14px 30px; border-radius:999px; background:linear-gradient(180deg, var(--cas-accent), var(--cas-accent-2)); color:var(--cas-ink); font-weight:900; font-size:14px; text-decoration:none; box-shadow:0 12px 30px rgba(var(--cas-accent-rgb),.42); transition:transform .16s cubic-bezier(.34,1.56,.64,1), filter .15s; }
.casino-hero__cta:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.casino-hero__cta:active{ transform:scale(.97); }

@keyframes cpHeroGlow { 0% { transform:translate3d(-3%,-2%,0) scale(1);} 100%{ transform:translate3d(3%,2%,0) scale(1.08);} }
@keyframes cpShimmer  { 0% { background-position:120% 0;} 100%{ background-position:-40% 0;} }
@keyframes cpFadeDown { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:none;} }

/* ============================ 2. JACKPOT ================================= */
.cjp{
  position:relative; overflow:hidden; margin:0 0 20px; padding:clamp(16px,3vw,26px);
  border-radius:20px;
  background:
    radial-gradient(130% 160% at 50% -30%, rgba(var(--cas-accent-rgb),.22), transparent 60%),
    linear-gradient(160deg, var(--cas-s3) 0%, var(--cas-s2) 55%, var(--cas-s1) 100%);
  border:1px solid rgba(var(--cas-accent-rgb),.34);
  box-shadow:0 20px 54px rgba(0,0,0,.5), inset 0 0 70px rgba(var(--cas-accent-rgb),.06);
}
.cjp::before{ content:""; position:absolute; inset:-45%; z-index:0; background:conic-gradient(from 0deg, transparent 0 70%, rgba(var(--cas-accent-rgb),.14) 80%, transparent 92%); animation:cjpSpin 10s linear infinite; }
@keyframes cjpSpin { to { transform:rotate(360deg);} }
.cjp__shine{ position:absolute; top:0; left:-60%; width:45%; height:100%; z-index:1; pointer-events:none; background:linear-gradient(105deg, transparent, rgba(255,255,255,.16), transparent); transform:skewX(-18deg); animation:cjpShine 5.5s ease-in-out infinite; }
@keyframes cjpShine { 0%,55%{left:-60%;} 82%,100%{left:130%;} }
.cjp__coins{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.cjp__coins span{ position:absolute; bottom:-26px; opacity:0; font-size:18px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)); animation:cjpRise 6s ease-in infinite; }
.cjp__coins span:nth-child(1){left:8%;animation-delay:0s;} .cjp__coins span:nth-child(2){left:28%;animation-delay:1.4s;font-size:14px;} .cjp__coins span:nth-child(3){left:52%;animation-delay:2.8s;} .cjp__coins span:nth-child(4){left:73%;animation-delay:.8s;font-size:22px;} .cjp__coins span:nth-child(5){left:90%;animation-delay:3.6s;font-size:13px;}
@keyframes cjpRise { 0%{transform:translateY(0) rotate(0);opacity:0;} 12%{opacity:.85;} 100%{transform:translateY(-190px) rotate(220deg);opacity:0;} }

.cjp__inner{ position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 30px; }
.cjp__feat{ display:flex; flex-direction:column; gap:8px; }
.cjp__head{ display:flex; align-items:center; gap:10px; }
.cjp__crown{ color:var(--cas-accent); font-size:1.1rem; filter:drop-shadow(0 0 8px rgba(var(--cas-accent-rgb),.6)); animation:cjpCrown 2.2s ease-in-out infinite; transform-origin:50% 80%; }
@keyframes cjpCrown { 0%,100%{transform:translateY(0) rotate(-5deg);} 50%{transform:translateY(-2px) rotate(5deg);} }
.cjp__eyebrow{ font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; font-weight:800; color:var(--cas-accent-lt); }
.cjp__amount{ display:flex; align-items:baseline; gap:6px; }
.cjp__ccy{ font-size:clamp(1.1rem,2.4vw,1.7rem); font-weight:900; color:var(--cas-accent); }
.cjp__odo{ display:inline-flex; align-items:stretch; font-size:clamp(2.1rem,6.8vw,3.8rem); font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.cjp-digit{ position:relative; height:1em; line-height:1em; overflow:hidden; margin:0 1.5px; padding:.06em .14em; border-radius:.16em; background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.28)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -3px 7px rgba(0,0,0,.5); }
.cjp-digit__reel{ display:flex; flex-direction:column; transition:transform .7s cubic-bezier(.16,1,.3,1); }
/* SOLID bright digits so they are always legible (clip-text could render blank) */
.cjp-digit__reel span{ height:1em; line-height:1em; text-align:center; color:var(--cas-accent); -webkit-text-fill-color:var(--cas-accent); text-shadow:0 0 14px rgba(var(--cas-accent-rgb),.55); }
.cjp-sep{ align-self:flex-end; padding:0 .02em; color:var(--cas-accent); text-shadow:0 0 14px rgba(var(--cas-accent-rgb),.4); }

.cjp__tiers{ display:flex; gap:10px; flex-wrap:wrap; }
.cjp__tier{ display:flex; flex-direction:column; gap:4px; padding:10px 16px; min-width:128px; border-radius:14px; background:rgba(0,0,0,.34); border:1px solid rgba(var(--cas-accent-rgb),.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.cjp__tier-label{ font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--cas-muted); }
.cjp__tier-amount{ display:flex; align-items:baseline; gap:3px; }
.cjp__tier-ccy{ font-size:.82rem; font-weight:800; color:var(--cas-accent); }
.cjp__odo--sm{ font-size:clamp(1.05rem,3vw,1.5rem); font-weight:900; }
.cjp__odo--sm .cjp-digit{ background:none; box-shadow:none; padding:0; margin:0 .5px; }
@media (max-width:560px){ .cjp__inner{flex-direction:column;align-items:stretch;} .cjp__tiers{width:100%;} .cjp__tier{flex:1;min-width:0;} }

/* ============================ 3. TOOLBAR ================================= */
.casino-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px; margin-bottom:2px; background:transparent; border:0; position:sticky; top:56px; z-index:30; }
.casino-toolbar::before{ /* glass backdrop that spans the sticky bar */ content:""; position:absolute; inset:0; background:rgba(var(--cas-accent-rgb),.02); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:-1; }
.casino-search{ position:relative; flex:1 1 240px; display:flex; align-items:center; gap:9px; min-height:46px; padding:0 16px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid var(--cas-line); transition:border-color .2s, box-shadow .2s, background .2s; }
.casino-search i{ color:var(--cas-accent); font-size:14px; }
.casino-search input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--cas-text); font-size:14px; font-family:inherit; }
.casino-search input::placeholder{ color:var(--cas-muted); }
.casino-search:focus-within{ border-color:var(--cas-accent); box-shadow:0 0 0 3px rgba(var(--cas-accent-rgb),.16); background:rgba(255,255,255,.07); }
.casino-search__spin{ display:none; color:var(--cas-accent); }
.casino-search.is-searching .casino-search__icon{ display:none; } .casino-search.is-searching .casino-search__spin{ display:inline-block; }
.casino-search__clear{ border:0; cursor:pointer; flex:none; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:15px; display:flex; align-items:center; justify-content:center; transition:background .15s, transform .08s; }
.casino-search__clear:hover{ background:rgba(239,68,68,.6); } .casino-search__clear:active{ transform:scale(.9); }

.casino-dropdown{ position:relative; flex:0 0 auto; }
.casino-dd-btn{ display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:0 16px; max-width:230px; border-radius:14px; cursor:pointer; font-family:inherit; font-weight:700; font-size:.84rem; background:rgba(255,255,255,.05); border:1px solid var(--cas-line); color:var(--cas-text); transition:border-color .2s, box-shadow .2s; }
.casino-dd-btn:hover{ border-color:var(--cas-accent); } .casino-dd-btn > i:first-child{ color:var(--cas-accent); }
.casino-dd-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .casino-dd-caret{ margin-left:auto; font-size:.7em; transition:transform .2s; }
.casino-dropdown.is-open .casino-dd-btn{ border-color:var(--cas-accent); box-shadow:0 0 0 3px rgba(var(--cas-accent-rgb),.16); } .casino-dropdown.is-open .casino-dd-caret{ transform:rotate(180deg); }
.casino-dd-panel{ position:absolute; top:calc(100% + 8px); right:0; z-index:60; width:300px; max-width:82vw; background:var(--cas-s2); border:1px solid rgba(var(--cas-accent-rgb),.2); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.6); overflow:hidden; animation:cpDD .18s ease; }
@keyframes cpDD { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:none;} }
.casino-dd-search{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--cas-line); }
.casino-dd-search i{ color:var(--cas-muted); font-size:12px; } .casino-dd-search input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--cas-text); font-size:13px; }
.casino-dd-list{ max-height:320px; overflow-y:auto; padding:7px; } .casino-dd-list::-webkit-scrollbar{ width:6px; } .casino-dd-list::-webkit-scrollbar-thumb{ background:rgba(var(--cas-accent-rgb),.3); border-radius:3px; }
.casino-dd-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 13px; border:0; border-radius:10px; cursor:pointer; text-align:left; background:transparent; color:var(--cas-text); font-family:inherit; font-size:.85rem; font-weight:600; transition:background .12s, color .12s; }
.casino-dd-item:hover{ background:rgba(var(--cas-accent-rgb),.08); }
.casino-dd-item.is-active{ background:linear-gradient(180deg, rgba(var(--cas-accent-rgb),.18), rgba(var(--cas-accent-rgb),.05)); color:var(--cas-accent); }
.casino-dd-item__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.casino-dd-count{ flex:none; font-size:.68rem; font-weight:700; color:var(--cas-muted); background:rgba(255,255,255,.06); padding:2px 8px; border-radius:999px; }
.casino-dd-empty{ padding:18px; text-align:center; color:var(--cas-muted); font-size:.82rem; }
.casino-sync-btn{ width:46px; height:46px; border-radius:14px; border:1px solid var(--cas-line); background:rgba(255,255,255,.05); color:var(--cas-accent); cursor:pointer; flex-shrink:0; transition:transform .3s cubic-bezier(.34,1.56,.64,1), border-color .2s, color .2s; }
.casino-sync-btn:hover{ border-color:var(--cas-accent); } .casino-sync-btn:active i{ animation:cpSpin .6s ease; }
@keyframes cpSpin { to { transform:rotate(360deg);} }
@media (max-width:560px){ .casino-dropdown{ flex:1 1 100%; order:3; } .casino-dd-btn{ max-width:none; width:100%; justify-content:flex-start; } .casino-dd-panel{ width:100%; left:0; right:auto; } }

/* ============================ 4. CATEGORY CHIPS ========================= */
.casino-carousel-wrap{ background:transparent; border:0; padding:6px 12px 10px; }
.casino-chip{ min-height:42px; padding:9px 20px; border-radius:999px; border:1px solid var(--cas-line); background:rgba(255,255,255,.04); color:var(--cas-muted); font-size:12.5px; font-weight:700; letter-spacing:.01em; transition:background .2s, border-color .2s, color .2s, transform .12s, box-shadow .2s; }
.casino-chip:hover{ transform:translateY(-2px); border-color:rgba(var(--cas-accent-rgb),.45); color:var(--cas-text); }
.casino-chip.is-active{ background:linear-gradient(180deg, var(--cas-accent), var(--cas-accent-2)); border-color:var(--cas-accent); color:var(--cas-ink); box-shadow:0 6px 18px rgba(var(--cas-accent-rgb),.4); animation:cpChipPop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes cpChipPop { 0%{transform:scale(.9);} 60%{transform:scale(1.06);} 100%{transform:scale(1);} }

/* ============================ 5. GAME CARDS ============================= */
.casino-grid{ gap:12px; }
@media (min-width:640px){ .casino-grid{ gap:14px; } }
@media (min-width:1200px){ .casino-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
@media (min-width:1500px){ .casino-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); } }

.casino-card{ border-radius:16px; overflow:hidden; background:var(--cas-card); border:1px solid var(--cas-line); box-shadow:0 4px 16px rgba(0,0,0,.3); transition:transform .22s ease, box-shadow .28s ease, border-color .2s ease; }
.casino-card__thumb img{ transition:transform .45s cubic-bezier(.2,.6,.2,1); }
.casino-card__thumb::after{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(8,12,22,.05), rgba(8,12,22,.72)); opacity:0; transition:opacity .25s ease; pointer-events:none; }
.casino-card__body{ background:var(--cas-s2); border-top:1px solid var(--cas-line); }
.casino-card__name{ color:var(--cas-text); transition:color .2s ease; }
.casino-card__prov{ color:var(--cas-muted); }

/* Demo/Real reveal buttons */
.cc-overlay{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; opacity:0; transition:opacity .22s ease; pointer-events:none; }
.cc-play{ pointer-events:auto; cursor:pointer; font-family:inherit; min-width:112px; min-height:40px; padding:9px 20px; border-radius:999px; font-weight:900; font-size:.82rem; letter-spacing:.02em; border:0; transform:translateY(12px); transition:transform .25s cubic-bezier(.34,1.56,.64,1), filter .15s; touch-action:manipulation; }
.cc-play__ico{ font-size:.72em; margin-right:3px; }
.cc-play--real{ color:var(--cas-ink); background:linear-gradient(180deg, var(--cas-accent), var(--cas-accent-2)); box-shadow:0 10px 24px rgba(var(--cas-accent-rgb),.45); }
.cc-play--demo{ color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(4px); }
.cc-play:hover{ filter:brightness(1.09); } .cc-play:active{ transform:scale(.94); }

@media (hover:hover) and (pointer:fine){
  .casino-card:hover{ transform:translateY(-7px); border-color:var(--cas-accent); box-shadow:0 22px 46px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--cas-accent-rgb),.55), 0 0 30px rgba(var(--cas-accent-rgb),.2); }
  .casino-card:hover .casino-card__thumb img{ transform:scale(1.1); }
  .casino-card:hover .casino-card__thumb::after, .casino-card:hover .cc-overlay{ opacity:1; }
  .casino-card:hover .cc-play{ transform:translateY(0); } .casino-card:hover .cc-play--demo{ transition-delay:.04s; }
  .casino-card:hover .casino-card__name{ color:var(--cas-accent); }
}
@media (hover:none){
  .cc-overlay{ opacity:1; inset:auto 0 0 0; flex-direction:row; gap:6px; padding:7px; background:linear-gradient(0deg, rgba(8,12,22,.94), transparent); }
  .cc-play{ transform:none; min-width:0; flex:1; min-height:36px; padding:7px 4px; font-size:.74rem; }
}
.casino-card:active{ transform:scale(.97); }

/* badges */
.casino-card__badge--hot{ background:linear-gradient(180deg, var(--cas-accent), var(--cas-accent-2)); color:var(--cas-ink); animation:cpHot 1.8s ease-in-out infinite; }
@keyframes cpHot { 0%,100%{box-shadow:0 0 0 0 rgba(var(--cas-accent-rgb),.55);} 50%{box-shadow:0 0 0 5px rgba(var(--cas-accent-rgb),0);} }
.casino-card__badge--live::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:#fff; margin-right:4px; animation:cpLive 1.4s ease-in-out infinite; }
@keyframes cpLive { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ============================ 6. MODAL / STATES ========================= */
.casino-modal:not(.hidden){ animation:cpModalIn .28s ease; } @keyframes cpModalIn { from{opacity:0;} to{opacity:1;} }
.casino-modal__bar{ box-shadow:0 6px 20px rgba(0,0,0,.5); }
.casino-loading i{ animation:cpSpin 1s linear infinite; color:var(--cas-accent); }
.casino-empty i{ color:rgba(var(--cas-accent-rgb),.4); }

@media (prefers-reduced-motion: reduce){
  .casino-hero::before, .casino-hero__title, .casino-hero__eyebrow, .casino-hero__sub,
  .casino-card__badge--hot, .casino-card__badge--live::before, .casino-card, .casino-card__thumb img,
  .casino-modal:not(.hidden), .casino-loading i, .cc-overlay, .cc-play, .casino-dd-panel, .casino-dd-caret,
  .cjp::before, .cjp__shine, .cjp__coins span, .cjp__crown, .cjp-digit__reel, .casino-chip{
    animation:none !important; transition:none !important;
  }
}