/* ===========================================================================
   DUCKY VEGAS — HOME PAGE (LOBBY) THEME
   ---------------------------------------------------------------------------
   Loaded by index.html ONLY, after ducky.css. Everything else on the site
   (wallet, admin, spin, game pages, legal) keeps the tropical palette from
   ducky.css; the home page wears this instead.

   Layout is the one the client pointed at: a fixed sidebar on desktop, a top
   bar with lobby chips, a live cashout stream, three offer cards, a search
   row, the game grid, the rules rows, then reviews. On a phone the sidebar
   hides, the chips go away, the stream and offers become swipe rows, and the
   existing bottom bar takes over navigation.

   The colours live in the block below and nowhere else. If the brand moves,
   this block moves with it.
   =========================================================================== */

/* ---- Font ----------------------------------------------------------------
   Inter is self-hosted for the same three reasons Outfit is: one request
   instead of a cross-origin pair, nobody else's server can slow the page
   down, and no visitor data leaves for a third party to render text. */
@font-face{
  font-family:'Inter';
  src:url('/fonts/inter-latin.woff2') format('woff2-variations'),
      url('/fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---- Palette ------------------------------------------------------------ */
:root{
  --bg-primary:#05070f;
  --bg-secondary:#0a0e1c;
  --bg-elevated:#111628;
  --card-bg:rgba(13,17,33,.82);
  --card-border:rgba(255,215,0,.22);

  --gold-primary:#ffc800;
  --gold-secondary:#e6a100;
  --gold-glow:rgba(255,200,0,.30);
  --gold-grad:linear-gradient(135deg,#ffe06a 0%,#ffc800 48%,#e6a100 100%);
  --gold-line:rgba(255,215,0,.26);

  --cyan-primary:#00f0ff;
  --cyan-lo:#0088ff;
  --cyan-grad:linear-gradient(135deg,#70f6ff 0%,#00f0ff 50%,#0088ff 100%);
  --blue-play:linear-gradient(135deg,#5ad8ff 0%,#29b6f6 55%,#0f86d8 100%);

  --emerald-primary:#00e676;
  --emerald-grad:linear-gradient(135deg,#69f0ae 0%,#00e676 50%,#00a152 100%);

  --red-primary:#ff0055;

  --txt:#f8fafc;
  --txt-mute:#94a3b8;
  --line:#1f2a44;
  --line-soft:rgba(255,255,255,.08);

  --font-head:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter','Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --side-w:246px;

  /* The base stylesheet reads the tropical palette in a hundred places.
     Repointing those variables here turns every shared widget (gate, chat
     sheet, bottom bar, footer chips) dark-and-gold on this page without
     touching its rules. */
  --ocean-900:var(--bg-primary);
  --ocean-800:var(--bg-secondary);
  --ocean-700:var(--bg-elevated);
  --ocean-600:var(--line);
  --teal:var(--cyan-primary);
  --teal-dim:var(--cyan-lo);
  --coral:var(--gold-primary);
  --sunset:var(--gold-secondary);
  --gold:var(--gold-primary);
  --palm:var(--emerald-primary);
  --ink:var(--txt);
  --ink-soft:#cbd5e1;
  --ink-mute:var(--txt-mute);
  --sun-grad:var(--gold-grad);
  --sea-grad:var(--cyan-grad);
  --radius:16px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

body.home{
  background:
    radial-gradient(1100px 480px at 88% -10%, rgba(255,200,0,.06), transparent 60%),
    radial-gradient(900px 460px at 4% 8%, rgba(0,240,255,.045), transparent 60%),
    var(--bg-primary);
  color:var(--txt);
  font-family:var(--font-body);
}

body.home h1,
body.home h2,
body.home h3,
body.home h4,
body.home .brand,
body.home .btn{
  font-family:var(--font-head);
}

/* ---- Frame ---------------------------------------------------------------
   One grid: the sidebar is fixed, the main column scrolls past it. Below
   1080px the sidebar is gone and the main column is the whole page. */
.app{display:block}
.main{min-width:0;min-height:100vh;display:flex;flex-direction:column}
.lobby{flex:1;padding:84px 16px 40px;max-width:1280px;width:100%;margin:0 auto}

/* ---- Sidebar (desktop) --------------------------------------------------- */
.side{display:none}

@media (min-width:1080px){
  .side{
    display:flex;flex-direction:column;gap:14px;
    position:fixed;inset:0 auto 0 0;width:var(--side-w);
    padding:16px 14px 18px;
    background:linear-gradient(180deg,#070a16,#04060e);
    border-right:1px solid var(--gold-line);
    overflow-y:auto;z-index:60;
  }
  .main{margin-left:var(--side-w)}
  .lobby{padding:88px 26px 48px}
}

.side-brand{
  display:flex;align-items:center;gap:11px;
  padding:6px 6px 14px;border-bottom:1px solid var(--line-soft);
}
.side-brand img{border-radius:12px;box-shadow:0 0 0 1px var(--gold-line),0 8px 22px rgba(0,0,0,.55)}
.side-brand span{
  font:900 17px/1.1 var(--font-head);color:var(--txt);
  display:flex;flex-direction:column;
}
.side-brand em{font-style:normal;color:var(--gold-primary);text-shadow:0 0 14px var(--gold-glow)}
.side-brand small{
  font:600 9.5px/1.4 var(--font-body);letter-spacing:1.6px;
  color:var(--txt-mute);text-transform:uppercase;margin-top:3px;
}

.side-claim{
  position:relative;display:block;padding:14px 34px 14px 15px;
  border:1px solid var(--gold-line);border-radius:14px;
  background:linear-gradient(135deg,rgba(255,200,0,.12),rgba(255,200,0,.03));
  box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 0 1px rgba(255,200,0,.04) inset;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.side-claim:hover{border-color:var(--gold-primary);box-shadow:0 14px 32px rgba(0,0,0,.5),0 0 18px rgba(255,200,0,.16);transform:translateY(-1px)}
.side-claim b{display:block;font:900 13px/1.2 var(--font-head);color:var(--gold-primary);letter-spacing:.4px}
.side-claim span{display:block;font-size:11.5px;color:var(--txt-mute);margin-top:3px}
.side-claim i{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--gold-primary);font-style:normal}

.side-nav{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.side-nav a{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:12px;
  font:700 13.5px/1 var(--font-head);color:var(--ink-soft);
  border:1px solid transparent;
  transition:background .16s,color .16s,border-color .16s;
}
.side-nav a:hover{background:rgba(255,255,255,.04);color:var(--txt)}
.side-nav a.on{
  background:linear-gradient(135deg,rgba(255,200,0,.16),rgba(255,200,0,.05));
  border-color:var(--gold-line);color:var(--gold-primary);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.sn-ic{font-size:15px;width:20px;text-align:center;flex:none}
.snb{
  margin-left:auto;font-style:normal;
  font:800 8.5px/1 var(--font-head);letter-spacing:.8px;
  padding:4px 7px;border-radius:7px;
  color:var(--emerald-primary);background:rgba(0,230,118,.12);
  border:1px solid rgba(0,230,118,.4);
}
.side-nav a.on .snb{color:var(--gold-primary);background:rgba(255,200,0,.12);border-color:var(--gold-line)}

.side-inst{
  margin-top:auto;padding:13px;border-radius:14px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03);
}
.side-inst b{display:block;font:800 12.5px/1.2 var(--font-head);color:var(--txt)}
.side-inst span{display:block;font-size:11px;color:var(--txt-mute);margin:3px 0 10px}
.side-inst button{
  width:100%;padding:10px 8px;border-radius:11px;border:0;cursor:pointer;
  font:900 11px/1 var(--font-head);letter-spacing:.4px;color:#14120b;
  background:var(--gold-grad);box-shadow:0 8px 20px rgba(255,200,0,.24);
}
.side-inst button:hover{box-shadow:0 10px 26px rgba(255,200,0,.36)}

/* ---- Top bar ------------------------------------------------------------- */
body.home .hdr{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:rgba(5,7,15,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--gold-line);
}
body.home .hdr-in{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:68px;max-width:1280px;margin:0 auto;padding:0 16px;
}
/* The top bar belongs to the content column only — the sidebar owns the
   strip beside it, which is where the brand lives. Run the bar across the
   whole width and it covers the logo. */
@media (min-width:1080px){ body.home .hdr{left:var(--side-w)} }
body.home .brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:17px;letter-spacing:-.01em}
body.home .brand img{border-radius:11px;box-shadow:0 0 0 1px var(--gold-line)}
body.home .brand span{color:var(--txt)}
body.home .brand em{font-style:normal;color:var(--gold-primary);text-shadow:0 0 14px var(--gold-glow)}

.topchips{display:none}

@media (min-width:1080px){
  .topchips{display:flex;align-items:center;gap:6px;flex:1;justify-content:flex-start;margin-left:10px}
  .tchip{
    display:inline-flex;align-items:center;gap:7px;
    padding:9px 14px;border-radius:99px;
    font:700 12.5px/1 var(--font-head);color:var(--txt-mute);
    border:1px solid transparent;white-space:nowrap;
    transition:color .16s,border-color .16s,background .16s;
  }
  .tchip span{font-size:13px}
  .tchip:hover{color:var(--txt);border-color:var(--line-soft);background:rgba(255,255,255,.03)}
  .tchip.on{
    color:var(--gold-primary);border-color:var(--gold-line);
    background:linear-gradient(135deg,rgba(255,200,0,.14),rgba(255,200,0,.04));
  }
  body.home .hdr-in{justify-content:flex-start}
  body.home .brand{display:none}         /* the sidebar carries the brand */
  .hdr-r{margin-left:auto}
}

body.home .burger{
  width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;
  gap:5px;flex-direction:column;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--gold-line);
}
body.home .burger i{display:block;width:18px;height:2px;background:var(--gold-primary);border-radius:2px;transition:.25s}
body.home .burger.on i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.home .burger.on i:nth-child(2){opacity:0}
body.home .burger.on i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:1080px){ body.home .burger{display:none} }

/* The auth control appuser.js parks next to the burger. On this page it is
   a proper chip on desktop too, the way the reference shows LOG IN. */
body.home .hauth{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:99px;
  font:800 12.5px/1 var(--font-head);color:var(--txt);
  background:rgba(255,255,255,.05);border:1px solid var(--line-soft);
}
body.home .hauth svg{width:15px;height:15px}
body.home .hauth:hover{border-color:var(--gold-line);color:var(--gold-primary)}
body.home .hauth-me{padding:6px 12px 6px 7px}
body.home .hauth-av{
  width:30px;height:30px;border-radius:50%;overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-grad);color:#14120b;font:900 13px/1 var(--font-head);
}
body.home .hauth-av img{width:100%;height:100%;object-fit:cover}

body.home .mnav{
  position:fixed;top:68px;left:0;right:0;z-index:79;
  background:linear-gradient(180deg,rgba(10,13,26,.99),rgba(5,7,15,.99));
  border-bottom:1px solid var(--gold-line);
  padding:10px 16px 18px;
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:transform .22s,opacity .22s,visibility .22s;
}
body.home .mnav.on{transform:none;opacity:1;visibility:visible}
body.home .mnav a{display:block;padding:13px 4px;border-bottom:1px solid var(--line-soft);font-weight:700;color:var(--txt)}
body.home .mnav a:hover{color:var(--gold-primary)}
body.home .mnav .btn{width:100%;margin-top:14px;border-bottom:0}

/* ---- Buttons ------------------------------------------------------------- */
body.home .btn{border-radius:12px;font-weight:800;letter-spacing:.01em}
body.home .btn-sun{background:var(--gold-grad);color:#14120b;box-shadow:0 10px 26px rgba(255,200,0,.24)}
body.home .btn-sun:hover{box-shadow:0 13px 32px rgba(255,200,0,.36)}
body.home .btn-sea{background:var(--blue-play);color:#04222e;box-shadow:0 8px 22px rgba(41,182,246,.28)}
body.home .btn-ghost{border:1.5px solid rgba(255,255,255,.16);color:var(--txt)}
body.home .btn-ghost:hover{border-color:var(--gold-primary);color:var(--gold-primary)}

/* ---- Age gate ------------------------------------------------------------ */
body.home .gate{background:rgba(5,7,15,.92);backdrop-filter:blur(8px)}
body.home .gate-card{
  background:linear-gradient(160deg,rgba(17,22,40,.98),rgba(8,10,20,.98));
  border:1px solid var(--gold-line);
  box-shadow:0 30px 70px rgba(0,0,0,.75);
}
body.home .gate-card img{border-radius:20px;box-shadow:0 0 0 1px var(--gold-line),0 10px 30px rgba(0,0,0,.5)}
body.home .gate-card h2{font-family:var(--font-head);color:var(--txt)}
body.home .gate-card p,
body.home .gate-card small{color:var(--txt-mute)}

/* ---- Cashout stream ------------------------------------------------------
   Heading row, then the cards. Desktop shows them in a fixed row; a phone
   swipes them sideways, which is the shape the reference uses at both
   widths. promos.js fills the row and refreshes it, so it reads as live. */
.cashwrap{margin-bottom:16px}
.cashhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cash-title{
  display:flex;align-items:center;gap:9px;margin:0;
  font:900 clamp(14px,2.4vw,17px)/1.15 var(--font-head);letter-spacing:.2px;
  color:var(--gold-primary);text-shadow:0 0 18px rgba(255,200,0,.18);
}
.cash-title i{
  width:9px;height:9px;border-radius:50%;background:var(--emerald-primary);flex:none;
  box-shadow:0 0 10px rgba(0,230,118,.8);
  animation:cbBlink 1.6s ease-in-out infinite;
}
@keyframes cbBlink{0%,100%{opacity:1}50%{opacity:.25}}
.cash-verified{
  display:inline-flex;align-items:center;gap:6px;
  font:700 11.5px/1 var(--font-head);color:var(--cyan-primary);
  text-shadow:0 0 14px rgba(0,240,255,.2);
}

.cashrow{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.cc{
  display:flex;align-items:center;gap:9px;
  padding:11px 12px;border-radius:14px;
  background:var(--card-bg);border:1px solid var(--line-soft);
  backdrop-filter:blur(10px);
  min-width:0;
  animation:ccIn .45s ease both;
}
@keyframes ccIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cc-ic{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;color:#0b2a12;
  background:var(--emerald-grad);
  box-shadow:0 0 12px rgba(0,230,118,.35);
}
.cc-mid{min-width:0;flex:1 1 auto}
.cc-mid b{display:block;font:800 12.5px/1.2 var(--font-head);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-mid span{display:block;font-size:10.5px;color:var(--gold-primary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-right{flex:none;text-align:right}
.cc-right em{display:block;font:900 12.5px/1.2 var(--font-head);font-style:normal;color:var(--emerald-primary)}
.cc-right span{display:block;font-size:10px;color:var(--txt-mute);margin-top:2px}

@media (max-width:1079px){
  .cashrow{
    display:flex;gap:10px;overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:4px;margin:0 -16px;padding-inline:16px;
    -webkit-overflow-scrolling:touch;
  }
  .cashrow::-webkit-scrollbar{display:none}
  .cc{flex:0 0 62%;scroll-snap-align:start;min-width:200px}
}

/* ---- Offer cards --------------------------------------------------------- */
#promos.bonusrow{display:grid;gap:10px;margin-bottom:16px}
@media (min-width:900px){#promos.bonusrow{grid-template-columns:repeat(3,1fr)}}
@media (max-width:899px){
  #promos.bonusrow{
    display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -16px 16px;padding:0 16px 4px;
    -webkit-overflow-scrolling:touch;
  }
  #promos.bonusrow::-webkit-scrollbar{display:none}
}
.bcard{
  display:flex;align-items:center;gap:11px;
  padding:13px 14px;border-radius:16px;
  background:var(--card-bg);border:1px solid var(--line-soft);
  backdrop-filter:blur(10px);
  transition:border-color .18s,transform .18s,box-shadow .18s;
  min-width:0;
}
.bcard:hover{border-color:var(--gold-line);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.45)}
@media (max-width:899px){.bcard{flex:0 0 78%;scroll-snap-align:start}}
.bcn{
  flex:none;width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:19px;
  background:rgba(255,200,0,.10);border:1px solid var(--gold-line);
}
.bc-mid{min-width:0;flex:1 1 auto}
.btag{
  display:inline-block;font:900 9px/1 var(--font-head);letter-spacing:1.2px;
  padding:4px 8px;border-radius:7px;margin-bottom:5px;text-transform:uppercase;
}
.btag.gold{color:var(--gold-primary);background:rgba(255,200,0,.14);border:1px solid rgba(255,200,0,.45)}
.btag.emerald{color:var(--emerald-primary);background:rgba(0,230,118,.12);border:1px solid rgba(0,230,118,.45)}
.btag.cyan{color:var(--cyan-primary);background:rgba(0,240,255,.10);border:1px solid rgba(0,240,255,.45)}
.bc-mid b{display:block;font:800 13px/1.25 var(--font-head);color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-mid small{display:block;font-size:11px;color:var(--txt-mute);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bchev{flex:none;font-size:22px;color:var(--txt-mute);line-height:1}

/* ---- Search + chips ------------------------------------------------------ */
.lobby-bar{display:flex;gap:10px;margin-bottom:12px}
body.home .g-search{
  display:flex;align-items:center;gap:9px;flex:1;
  padding:13px 15px;border-radius:14px;
  background:rgba(6,8,18,.9);border:1px solid var(--line);
}
body.home .g-search:focus-within{border-color:var(--gold-primary);box-shadow:0 0 0 3px rgba(255,200,0,.12)}
body.home .g-search span{font-size:14px;opacity:.8}
body.home .g-search input{
  flex:1;background:none;border:0;outline:none;
  font:600 14px/1 var(--font-body);color:var(--txt);
}
body.home .g-search input::placeholder{color:var(--txt-mute)}

.lobby-chips{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.chip{
  padding:9px 18px;border-radius:99px;cursor:pointer;
  font:900 12px/1 var(--font-head);letter-spacing:.8px;
  color:var(--txt-mute);background:rgba(255,255,255,.04);
  border:1px solid var(--line-soft);transition:.16s;
}
.chip:hover{color:var(--txt);border-color:var(--gold-line)}
.chip.on{color:#14120b;background:var(--gold-grad);border-color:transparent;box-shadow:0 8px 20px rgba(255,200,0,.24)}

/* ---- Game grid -----------------------------------------------------------
   Cards follow the reference: artwork with the HOT badge, the title, the
   "Slots & Fish" line, and the buttons under it. On this site the primary
   button is Get ID (the agent model) and the second is Deposit; both keep
   doing exactly what they did before. */
body.home .games{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:700px){body.home .games{grid-template-columns:repeat(3,1fr);gap:14px}}
@media (min-width:1080px){body.home .games{grid-template-columns:repeat(4,1fr);gap:14px}}

body.home .gcard{
  background:var(--card-bg);
  border:1px solid var(--line-soft);
  border-radius:18px;overflow:hidden;
  backdrop-filter:blur(12px);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
body.home .gcard:hover{
  transform:translateY(-3px);
  border-color:var(--gold-line);
  box-shadow:0 16px 36px rgba(0,0,0,.55),0 0 0 1px rgba(255,200,0,.06);
}
body.home .gcard-img{position:relative;aspect-ratio:16/10;background:#080a14;display:block}
body.home .gcard-img img{width:100%;height:100%;object-fit:contain;padding:6px}
body.home .hot{
  position:absolute;top:9px;left:9px;z-index:2;
  font:900 9.5px/1 var(--font-head);letter-spacing:.8px;text-transform:uppercase;
  color:#14120b;background:var(--gold-grad);
  padding:5px 9px;border-radius:8px;
  box-shadow:0 6px 16px rgba(255,200,0,.35);
}
body.home .gcard-body{padding:11px 12px 13px}
body.home .gcard h3{
  margin:0;font:800 14px/1.2 var(--font-head);color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.home .gsub{display:block;font-size:11px;color:var(--txt-mute);margin-top:3px}
body.home .gplay{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--txt-mute);margin-top:4px}
body.home .gplay i{width:6px;height:6px;border-radius:50%;background:var(--emerald-primary);box-shadow:0 0 8px rgba(0,230,118,.6)}
body.home .gcard-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
body.home .gcard-btns .btn{
  width:100%;padding:11px 6px;border-radius:11px;font-size:12.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
body.home .gcard-btns .btn-sea::before{content:'\25B6';font-size:9px}
body.home .g-more{display:flex;justify-content:center;margin-top:22px}
body.home .g-more .btn-ghost{border-color:var(--gold-line);color:var(--gold-primary)}
body.home .g-more .btn-ghost:hover{border-color:var(--gold-primary)}
body.home .g-empty{text-align:center;color:var(--txt-mute);padding:38px 0;display:none}

/* ---- Rules rows ---------------------------------------------------------- */
.rules-band{margin-top:34px}
.band-title{
  display:flex;align-items:center;gap:10px;margin:0;
  font:900 clamp(14px,2.4vw,17px)/1.2 var(--font-head);
  color:var(--gold-primary);text-shadow:0 0 18px rgba(255,200,0,.14);
}
.band-title .bi{
  width:28px;height:28px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  background:rgba(255,200,0,.10);border:1px solid var(--gold-line);
}
.band-sub{color:var(--txt-mute);font-size:12.5px;margin:8px 0 16px}

.rules{display:grid;gap:10px}
.rule{
  background:var(--card-bg);
  border:1px solid var(--line-soft);
  border-radius:14px;
  backdrop-filter:blur(10px);
  transition:border-color .2s,box-shadow .2s;
  overflow:hidden;
}
.rule[open]{border-color:var(--gold-line);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.rule summary{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;cursor:pointer;list-style:none;
}
.rule summary::-webkit-details-marker{display:none}
.rule-ic{
  flex:none;width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:rgba(255,200,0,.08);border:1px solid var(--gold-line);
}
.rule-tx{min-width:0;flex:1 1 auto}
.rule-tx b{display:block;font:800 12.5px/1.3 var(--font-head);color:var(--txt);letter-spacing:.3px}
.rule-tx small{display:block;font-size:11.5px;color:var(--txt-mute);margin-top:3px}
.rule summary > i{
  flex:none;width:24px;height:24px;position:relative;border-radius:50%;
  border:1.5px solid var(--gold-line);transition:transform .2s,border-color .2s;
}
.rule summary > i::before,
.rule summary > i::after{
  content:'';position:absolute;top:50%;left:50%;
  background:var(--gold-primary);transform:translate(-50%,-50%);
}
.rule summary > i::before{width:9px;height:1.5px}
.rule summary > i::after{width:1.5px;height:9px}
.rule[open] summary > i{transform:rotate(45deg);border-color:var(--gold-primary)}
.rule p{margin:0;padding:0 16px 15px;color:var(--txt-mute);font-size:13.5px;line-height:1.65}

/* ---- Reviews band -------------------------------------------------------- */
.rev-band{margin-top:34px}
body.home .rvticker{
  background:rgba(10,13,26,.75);
  border:1px solid var(--line-soft);border-radius:14px;
  margin-bottom:14px;backdrop-filter:blur(10px);
}
body.home .rvt-label{color:var(--gold-primary);letter-spacing:1.6px}
body.home .rvt-item{color:var(--txt-mute)}
body.home .rvt-item b{color:var(--txt)}

body.home .rvlist{display:grid;gap:12px;margin-top:4px}
@media (min-width:900px){body.home .rvlist{grid-template-columns:repeat(2,1fr)}}
body.home .rvcard{
  background:var(--card-bg);border:1px solid var(--line-soft);border-radius:16px;
  padding:15px;backdrop-filter:blur(10px);
}
body.home .rvcard:hover{border-color:var(--gold-line)}
body.home .rv-stars{color:var(--gold-primary);letter-spacing:.06em}
body.home .rv-stars .off{color:rgba(255,255,255,.18)}
body.home .rvcard p{color:var(--txt-mute);font-size:13.5px;line-height:1.6;margin:0}
body.home .rvcard .rv-h small{color:var(--txt-mute)}
body.home .rvcard .rv-h b{color:var(--txt)}
body.home .rv-av{background:rgba(255,200,0,.10);border:1px solid var(--gold-line);color:var(--gold-primary)}
body.home .rv-none{color:var(--txt-mute);font-size:13.5px}

body.home .rvform{
  margin-top:16px;padding:18px;border-radius:18px;
  background:linear-gradient(180deg,rgba(12,16,36,.9),rgba(6,8,18,.9));
  border:1px solid var(--line-soft);
}
body.home .rvform h3{margin:0 0 6px;font:900 16px/1.2 var(--font-head);color:var(--txt)}
body.home .rv-note{color:var(--txt-mute);font-size:12px;margin:0 0 14px}
body.home .rv-row{margin-bottom:12px}
body.home .rv-lab{display:block;font:700 11.5px/1 var(--font-body);color:var(--txt-mute);margin-bottom:6px}
body.home .rv-pick{
  display:inline-flex;gap:4px;padding:7px 10px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-soft);
}
body.home .rv-star{
  background:none;border:0;cursor:pointer;font-size:20px;line-height:1;
  color:rgba(255,200,0,.22);transition:color .15s,text-shadow .15s;
}
body.home .rv-star.on{color:var(--gold-primary);text-shadow:0 0 12px var(--gold-glow)}
body.home .ain{
  width:100%;padding:12px 14px;border-radius:12px;
  background:rgba(6,8,18,.9);border:1px solid var(--line);color:var(--txt);
  font:500 14px/1.5 var(--font-body);
}
body.home .ain:focus{border-color:var(--gold-primary);box-shadow:0 0 0 3px rgba(255,200,0,.12);outline:none}
body.home .ain::placeholder{color:var(--txt-mute)}
body.home .rv-err{color:var(--red-primary);font-size:12.5px;margin:0 0 10px;min-height:1px}

/* ---- Footer -------------------------------------------------------------- */
body.home .ftr{
  background:#04060d;
  border-top:1px solid var(--gold-line);
  padding:26px 0 96px;
}
@media (min-width:900px){body.home .ftr{padding-bottom:30px}}
body.home .ftr .shell{max-width:1280px}
body.home .money-promise{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:16px;
  background:linear-gradient(135deg,rgba(255,200,0,.08),rgba(0,240,255,.04));
  border:1px solid var(--gold-line);
  margin-bottom:18px;
}
body.home .money-promise .mp-ico{font-size:20px;line-height:1}
body.home .money-promise b{display:block;font:800 13px/1.3 var(--font-head);color:var(--txt)}
body.home .money-promise p{margin:4px 0 0;font-size:12px;color:var(--txt-mute)}
body.home .ftr-btm{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
}
body.home .ftr-btm small{color:var(--txt-mute);font-size:12px}
.ftr-links{display:flex;flex-wrap:wrap;gap:16px}
.ftr-links a{font-size:12.5px;color:var(--txt-mute)}
.ftr-links a:hover{color:var(--gold-primary)}
body.home .socials{display:flex;gap:8px}
body.home .socials a{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid var(--line-soft);
  transition:border-color .16s,transform .16s;
}
body.home .socials a:hover{border-color:var(--gold-primary);transform:translateY(-2px)}

/* ---- Floating corners ---------------------------------------------------- */
body.home .spin-float{
  background:linear-gradient(160deg,rgba(17,22,40,.97),rgba(8,10,20,.97));
  border:1px solid var(--gold-line);
  box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 20px rgba(255,200,0,.16);
  color:var(--gold-primary);
}
body.home .spin-float .sf-txt{color:var(--gold-primary);font-family:var(--font-head);letter-spacing:1.2px}
body.home .chat-fab{background:var(--cyan-grad);color:#052026;box-shadow:0 12px 30px rgba(0,240,255,.3)}

/* ---- Chat sheet (base widget, repainted) --------------------------------- */
body.home .chatp{
  background:linear-gradient(180deg,rgba(12,16,36,.99),rgba(5,7,14,.99));
  border:1px solid var(--gold-line);
}
body.home .chatp-head{background:rgba(255,200,0,.06);border-bottom:1px solid var(--gold-line)}
body.home .chatp-head b{color:var(--txt);font-family:var(--font-head)}
body.home .cmsg-them{background:rgba(255,255,255,.06);color:var(--txt);border-color:var(--line-soft)}
body.home .cmsg-me{background:var(--gold-grad);color:#14120b}

/* ---- Bottom bar (phones) ------------------------------------------------- */
body.home #tabbar{background:rgba(6,8,16,.95);border-top:1px solid var(--gold-line)}
body.home #tabbar .tb{color:var(--txt-mute)}
body.home #tabbar .tb.on{color:var(--gold-primary)}
body.home .tb-chat{
  color:#14120b !important;
  background:var(--gold-grad);
  box-shadow:0 5px 0 #8a6100, 0 12px 26px rgba(255,200,0,.4), inset 0 2px 0 rgba(255,255,255,.55);
  animation:tbPulseGold 3.4s ease-in-out infinite;
}
@keyframes tbPulseGold{
  0%,100%{ box-shadow:0 5px 0 #8a6100, 0 12px 26px rgba(255,200,0,.4), inset 0 2px 0 rgba(255,255,255,.55), 0 0 0 0 rgba(255,200,0,.45) }
  55%    { box-shadow:0 5px 0 #8a6100, 0 12px 26px rgba(255,200,0,.4), inset 0 2px 0 rgba(255,255,255,.55), 0 0 0 12px rgba(255,200,0,0) }
}
body.home .tb-chat:active{ transform:translateY(4px) scale(.96); }

/* ---- Motion is decoration; respect the switch ---------------------------- */
@media (prefers-reduced-motion: reduce){
  .cash-title i,
  .cc,
  body.home .tb-chat{animation:none}
  body.home .gcard,
  body.home .bcard,
  body.home .socials a{transition:none}
}

/* ═══ WH parity round — header pair, favourites, play key, bar ═══════ */
body.home .hdr-r{display:flex;align-items:center;gap:8px}
body.home .happ{
  display:none;align-items:center;gap:6px;
  height:38px;padding:0 14px;border-radius:999px;
  background:rgba(0,230,118,.12);border:1px solid rgba(0,230,118,.5);
  color:#00e676;font:800 11px/1 var(--font-head);letter-spacing:1px;cursor:pointer;
}
body.home .hauth-up{background:var(--gold-grad);color:#14120b;font-weight:800;border-color:transparent}
body.home .lobby-bar{display:flex;gap:10px;align-items:center}
body.home .lobby-bar .g-search{flex:1}
body.home .favpill{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  height:50px;padding:0 16px;border-radius:12px;
  background:#0d1222;border:1px solid rgba(255,255,255,.14);
  color:#cbd5e1;font:800 11.5px/1 var(--font-head);letter-spacing:1px;cursor:pointer;
}
body.home .favpill.on{border-color:var(--gold);color:var(--gold)}
body.home .gcard{position:relative}
body.home .favstar{
  position:absolute;top:9px;right:9px;z-index:2;
  width:30px;height:30px;border-radius:50%;
  background:rgba(4,7,15,.6);border:1px solid rgba(255,255,255,.28);
  color:#e2e8f0;font-size:15px;line-height:1;cursor:pointer;
}
body.home .favstar.on{color:var(--gold);border-color:var(--gold);background:rgba(255,200,0,.14)}
body.home .gplaybtn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-top:11px;padding:10px 0;border-radius:10px;
  background:linear-gradient(90deg,#00d9ff,#009dff);
  color:#04283a;font:900 12.5px/1 var(--font-head);letter-spacing:1.2px;text-transform:uppercase;
}
body.home .gplaybtn i{font-size:10px}
body.home .gplaybtn:hover{filter:brightness(1.12)}
body.home .cashrow .cc{flex:0 0 198px}
@media (min-width:1080px){
  body.home .cc{padding:9px 10px;gap:7px;min-width:0}
  body.home .cc-mid b{font-size:12px}
  body.home .cc-mid span{font-size:10.5px}
  body.home .cc-right em{font-size:12px}
  body.home .cc-right span{font-size:10px}
}
@media (min-width:1080px){
  body.home .happ{display:inline-flex}
}
@media (max-width:1079px){
  body.home .hdr-r{display:contents}
  body.home .hdr-in>#burger{order:1}
  body.home .brand{order:2}
  body.home #hdr-login{order:3}
  body.home #hdr-signup{order:4}
  body.home #hdr-auth{order:3}
  body.home .cashrow .cc{flex:0 0 58%;min-width:190px}
}
@media (max-width:1079px){
  body.home .hdr-in{padding:0 10px;gap:7px}
  body.home .brand{font-size:15.5px;gap:7px}
  body.home .brand img{width:30px;height:30px}
  body.home #burger{width:38px;height:38px}
  body.home .hauth{height:34px;padding:0 10px;font-size:11.5px;gap:5px}
  body.home .hauth svg{width:14px;height:14px}
}
@media (max-width:1079px){
  body.home .lobby-bar{flex-wrap:wrap}
  body.home .favpill{height:40px}
}

/* ═══ WH parity round 4 — rules accents, chat pill, floaters off ═════ */
body.home .rules-band{position:relative}
body.home .tap-pill{
  position:absolute;top:2px;right:0;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:999px;
  background:var(--gold-grad);color:#14120b;
  font:800 10.5px/1 var(--font-head);letter-spacing:.6px;
}
body.home .rule:nth-of-type(1) .rule-ic{background:var(--gold-grad);color:#14120b}
body.home .rule:nth-of-type(2) .rule-ic{background:linear-gradient(135deg,#00e676,#00b060);color:#03240f}
body.home .rule:nth-of-type(3) .rule-ic{background:linear-gradient(135deg,#00f0ff,#009dff);color:#04283a}
body.home .rule:nth-of-type(4) .rule-ic{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#1b0f38}
body.home #chat-fab{
  width:auto;height:42px;padding:0 18px;border-radius:999px;
  background:var(--gold-grad);color:#14120b;font-size:0;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 8px 24px rgba(255,200,0,.35);
}
body.home #chat-fab::after{
  content:'24/7 LIVE CHAT';
  font:900 11px/1 var(--font-head);letter-spacing:1px;
}
body.home .spin-float{display:none}
body.home .instbar{display:none}
@media (max-width:1079px){
  body.home #chat-fab{bottom:calc(88px + env(safe-area-inset-bottom));right:14px}
}

/* ═══ 3D tile depth — full-bleed blurred art behind the sharp logo ═══ */
body.home .gcard-img{overflow:hidden}
body.home .gart-bg{
  position:absolute;inset:-12px;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(16px) saturate(1.35) brightness(.72);
  transform:scale(1.12);
}
body.home .gcard-img img{
  position:relative;
  padding:12px;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.65));
}
body.home .gcard-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,7,15,0) 55%,rgba(5,7,15,.55));
  pointer-events:none;
}
body.home .hot,body.home .favstar{z-index:3}
/* ═══ WH-style motion — hover lift, tile zoom, live-dot pulse ═══════ */
body.home .gcard{transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
body.home .gcard:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 20px 45px rgba(0,0,0,.9),0 0 30px rgba(255,200,0,.3);
}
body.home .gcard-img img,body.home .gart-bg{transition:transform .35s cubic-bezier(.16,1,.3,1)}
body.home .gcard:hover .gcard-img img{transform:scale(1.08)}
body.home .gcard:hover .gart-bg{transform:scale(1.2)}
@keyframes dvPulseRing{
  0%{box-shadow:0 0 0 0 rgba(0,230,118,.65)}
  70%{box-shadow:0 0 0 9px rgba(0,230,118,0)}
  100%{box-shadow:0 0 0 0 rgba(0,230,118,0)}
}
body.home .cashhead i{animation:dvPulseRing 1.5s infinite}
@keyframes dvShimmer{to{background-position:200% 0}}
body.home .cash-title{
  background:linear-gradient(90deg,#ffc800 0%,#fff7d1 25%,#ffc800 50%,#e6a100 75%,#ffc800 100%) 0 0/200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:dvShimmer 3s linear infinite;
}
/* ═══ Full-bleed tiles — art edge to edge, no side gaps (client mark) ═══ */
body.home .gcard-img img{padding:0;object-fit:cover;filter:none}
body.home .gart-bg{display:none}
body.home .gcard-img::after{display:none}

/* ═══ Live flowing cashout stream (reference behaviour) ═════════════ */
body.home .cashrow{display:block;overflow:hidden;padding:2px 0}
body.home .cashtrack{
  display:flex;width:max-content;
  animation:dvCashScroll 46s linear infinite;
}
body.home .cashrow:hover .cashtrack{animation-play-state:paused}
@keyframes dvCashScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
body.home .cashrow .cc{flex:0 0 198px;margin-right:9px}
@media (max-width:1079px){
  body.home .cashrow .cc{flex:0 0 236px;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  body.home .cashtrack{animation:none}
}