/* =====================================================================
   roulettegames.io — design system
   Neon: near-black indigo, cyan primary, magenta ambient.
   Single stylesheet, no build step.
   ===================================================================== */

:root{
  --bg:#07070f;
  --bg-2:#0b0b17;
  --panel:#111126;
  --panel-2:#171735;
  --panel-3:#1e1e44;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --txt:#ecefff;
  --txt-2:#c5c9ea;
  --muted:#8b90bb;
  --gold:#00e5ff;
  --gold-2:#8ff5ff;
  --gold-dim:rgba(0,229,255,.12);
  --red:#e01b3c;
  --red-2:#ff4d6a;
  --pocket-black:#171717;
  --pocket-green:#00b862;
  --ok:#00e676;
  --warn:#ffb300;
  --bad:#ff5c7a;
  --r-sm:8px;
  --r:14px;
  --r-lg:20px;
  --wrap:1200px;
  --shadow:0 18px 48px -18px rgba(0,0,0,.75);
  --shadow-sm:0 8px 24px -12px rgba(0,0,0,.6);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  color:var(--txt);
  background:
    radial-gradient(1100px 620px at 50% -240px,rgba(0,229,255,.10),transparent 65%),
    radial-gradient(900px 520px at 100% 0,rgba(255,45,149,.14),transparent 60%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

img,svg,canvas{max-width:100%;height:auto;display:block}

a{color:var(--gold-2);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:750;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,4.4vw,3rem)}
h2{font-size:clamp(1.4rem,2.7vw,2rem);margin-top:0}
h3{font-size:clamp(1.12rem,1.9vw,1.35rem)}
h4{font-size:1.02rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.4em}
strong{color:#fff;font-weight:700}
small{font-size:.855rem;color:var(--muted)}
code{font-family:var(--mono);font-size:.9em;background:rgba(0,229,255,.13);color:var(--gold-2);padding:.12em .42em;border-radius:5px;border:1px solid rgba(0,229,255,.22)}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
::selection{background:var(--gold);color:#001418}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.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}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#001418;padding:.6rem 1rem;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
.hide-sm{display:none}
@media(min-width:760px){.hide-sm{display:inline-flex}}

/* ---------- header ------------------------------------------------ */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(7,7,15,.86);
  backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
.site-head__in{display:flex;align-items:center;gap:14px;min-height:64px;flex-wrap:wrap}

.logo{display:inline-flex;align-items:center;gap:10px;color:var(--txt);font-size:1.16rem;letter-spacing:-.03em;text-decoration:none;flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo__text strong{color:var(--gold);font-weight:800}
.logo__wheel{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--pocket-green) 0 8%,var(--red) 8% 20%,var(--pocket-black) 20% 32%,var(--red) 32% 44%,var(--pocket-black) 44% 56%,var(--red) 56% 68%,var(--pocket-black) 68% 80%,var(--red) 80% 92%,var(--pocket-black) 92% 100%);
  border:2px solid var(--gold);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.5);
}

.nav{display:flex;gap:2px;flex-wrap:wrap;order:3;width:100%;padding-bottom:8px}
.nav a{
  color:var(--txt-2);font-size:.925rem;font-weight:600;
  padding:.42rem .68rem;border-radius:999px;text-decoration:none;white-space:nowrap;
}
.nav a:hover{background:var(--panel-2);color:#fff;text-decoration:none}
.nav[hidden]{display:none}
@media(min-width:1000px){
  .nav{order:0;width:auto;padding-bottom:0;margin-left:8px}
}

/* dropdown menu */
.nav__item{position:relative}
.nav__item>a{display:inline-flex;align-items:center;gap:.3rem}
.caret{font-size:.68rem;opacity:.6;transition:transform .18s ease}
.drop{
  /* The visual gap is a transparent border, not a margin — the pointer
     never leaves the element on its way down, so the menu cannot vanish
     mid-hover. background-clip keeps the panel colour out of the gap. */
  display:none;position:absolute;top:100%;left:0;z-index:120;min-width:250px;
  background:var(--panel);background-clip:padding-box;
  border:1px solid var(--line-2);border-top:8px solid transparent;
  border-radius:var(--r);
  box-shadow:var(--shadow);padding:.45rem;margin-top:0;
}
.drop a{
  display:block;border-radius:8px;padding:.5rem .7rem;font-size:.89rem;color:var(--txt-2);white-space:nowrap;
}
.drop a:hover{background:var(--panel-2);color:#fff}
.drop a code{font-size:.78rem}
.drop__all{border-top:1px solid var(--line);margin-top:.3rem;padding-top:.6rem!important;color:var(--gold-2)!important;font-weight:700}
@media(min-width:1000px){
  .nav__item.has-drop:hover .drop,
  .nav__item.has-drop:focus-within .drop,
  .nav__item.has-drop.open-hover .drop{display:block;animation:dropin .16s ease}
  .nav__item.has-drop:hover .caret,
  .nav__item.has-drop.open-hover .caret{transform:rotate(180deg)}
}
@keyframes dropin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:999px){
  .nav__item{width:100%}
  .nav__item>a{width:100%;justify-content:space-between;display:flex}
  .drop{position:static;display:none;box-shadow:none;border:0;background:transparent;padding:.1rem 0 .3rem .9rem;min-width:0}
  .nav__item.open .drop{display:block}
  .nav__item.open .caret{transform:rotate(180deg)}
}
.nav__bonus{
  background:linear-gradient(100deg,rgba(0,229,255,.22),rgba(0,229,255,.08));
  border:1px solid rgba(0,229,255,.4);color:var(--gold-2)!important;font-weight:800!important;
}
.nav__bonus:hover{background:var(--gold)!important;color:#001418!important}

/* search */
.search-btn{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:999px;color:var(--txt-2);cursor:pointer;
}
.search-btn:hover{color:var(--gold-2);border-color:rgba(0,229,255,.4)}
.search-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(4,4,12,.82);backdrop-filter:blur(6px);
  display:flex;justify-content:center;align-items:flex-start;padding:9vh 16px 16px;
}
.search-overlay[hidden]{display:none}
.search-box{width:min(640px,100%);background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;animation:dropin .2s ease}
.search-box__row{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line);color:var(--muted)}
.search-box__row input{flex:1;background:transparent;border:0;font:inherit;font-size:1.05rem;color:var(--txt);outline:none;font-family:var(--sans)}
.search-close{background:transparent;border:0;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:.3rem .5rem;border-radius:8px}
.search-close:hover{background:var(--panel-2);color:#fff}
.search-results{max-height:56vh;overflow-y:auto;padding:.5rem}
.search-hint{color:var(--muted);font-size:.88rem;padding:.6rem .7rem;margin:0}
.search-results a{
  display:flex;gap:.8rem;align-items:baseline;padding:.65rem .8rem;border-radius:10px;color:var(--txt);
}
.search-results a:hover,.search-results a.sel{background:var(--panel-2);text-decoration:none}
.search-results .g{flex:0 0 auto;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--gold);width:74px}
.search-results .t{font-weight:700;font-size:.95rem}
.search-results .d{display:block;font-size:.8rem;color:var(--muted)}

.nav-toggle{
  margin-left:auto;order:1;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:38px;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;
  cursor:pointer;color:var(--txt);padding:0;
}
.nav-toggle svg{display:block;flex:0 0 auto}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-burger{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}
.nav-toggle[aria-expanded="true"]{border-color:rgba(0,229,255,.5);color:var(--gold-2)}
@media(min-width:1000px){.nav-toggle{display:none}}

.head-right{display:flex;align-items:center;gap:10px;order:2;margin-left:auto}
@media(min-width:1000px){.head-right{margin-left:auto}}
/* header children must never be crushed out of existence on tight rows */
.logo,.search-btn,.balance,.head-right{flex-shrink:0}

.balance{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line-2);border-radius:999px;padding:.3rem .34rem .3rem .68rem}
.balance__chip{color:var(--gold);font-size:.8rem}
.balance__val{font-family:var(--mono);font-size:.92rem;font-weight:700;color:var(--gold-2);min-width:5.6ch;text-align:right}
.balance__reset{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:.22rem .4rem;border-radius:999px}
.balance__reset:hover{background:var(--panel-3);color:#fff}
.balance.flash .balance__val{animation:flash .5s ease}
@keyframes flash{0%,100%{color:var(--gold-2)}45%{color:#fff;transform:scale(1.06)}}

/* ---------- buttons ----------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  font:inherit;font-weight:700;font-size:.955rem;line-height:1.15;
  padding:.78rem 1.24rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;text-align:center;
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
.btn--primary{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#001418;box-shadow:0 10px 26px -12px rgba(0,229,255,.7)}
.btn--primary:hover{background:linear-gradient(180deg,#ccf9ff,var(--gold-2))}
.btn--ghost{background:var(--panel);color:var(--txt);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--panel-2)}
.btn--green{background:linear-gradient(180deg,#00e676,#00b862);color:#00160c;box-shadow:0 10px 26px -14px rgba(0,230,118,.7)}
.btn--red{background:linear-gradient(180deg,var(--red-2),var(--red));color:#fff}
.btn--sm{padding:.5rem .86rem;font-size:.875rem}
.btn--lg{padding:.95rem 1.7rem;font-size:1.05rem}
.btn--wide{width:100%}

.copy-btn{
  font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;
  background:var(--panel-3);color:var(--gold-2);border:1px solid rgba(0,229,255,.3);
  border-radius:6px;padding:.2rem .5rem;line-height:1.3;
}
.copy-btn:hover{background:var(--gold);color:#001418}
.copy-btn.copied{background:var(--ok);color:#00160c;border-color:transparent}
.copy-btn--mini{padding:.1rem .34rem;font-size:.9rem}

.link-sm{font-size:.85rem;font-weight:600;color:var(--gold-2)}

/* ---------- layout blocks ----------------------------------------- */
.section{padding:2.6rem 0 0}
.section--tight{padding-top:1.6rem}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.section__head h2{margin-bottom:.2em}
.section__head p{margin:0;color:var(--muted);max-width:62ch}
.page{padding:1.4rem 0 3.5rem}
.prose{max-width:74ch}
.prose--wide{max-width:92ch}
.lead{font-size:1.09rem;color:var(--txt-2)}

.crumbs{font-size:.83rem;color:var(--muted);margin:0 0 1.1rem;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold-2)}
.crumbs .sep{opacity:.4}
.crumbs [aria-current]{color:var(--txt-2)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.35rem;box-shadow:var(--shadow-sm)}
.panel--flush{padding:0;overflow:hidden}
.panel h3:first-child,.panel h2:first-child{margin-top:0}

.grid{display:grid;gap:14px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:repeat(2,1fr)}
@media(min-width:680px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1000px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

.split{display:grid;gap:24px;align-items:start}
@media(min-width:960px){.split{grid-template-columns:minmax(0,1fr) 340px}}
.split__side{position:sticky;top:84px}

/* ---------- hero --------------------------------------------------- */
.hero{padding:2.4rem 0 .6rem;position:relative;overflow:hidden}
.hero__grid{display:grid;gap:26px;align-items:center}
@media(min-width:940px){.hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
.hero h1{margin-bottom:.45em}
.hero h1 em{font-style:normal;color:var(--gold);}
.hero__sub{font-size:1.1rem;color:var(--txt-2);max-width:60ch}
.hero__btns{display:flex;flex-wrap:wrap;gap:10px;margin:1.4rem 0 1.1rem}
.hero__badge{
  display:inline-flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  background:var(--gold-dim);border:1px solid rgba(0,229,255,.28);
  border-radius:999px;padding:.44rem .95rem;font-size:.9rem;color:var(--gold-2);
}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:1.5rem}
@media(min-width:620px){.stat-row{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:.85rem;min-width:0;overflow:hidden}
.stat b{display:block;font-size:clamp(.95rem,1.9vw,1.3rem);color:var(--gold);letter-spacing:-.01em;line-height:1.25;white-space:normal;word-break:break-word}
.stat span{display:block;font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;line-height:1.35;white-space:normal}

/* decorative wheel in the hero */
.hero-wheel{width:min(360px,80vw);margin:0 auto;aspect-ratio:1;position:relative;filter:drop-shadow(0 24px 50px rgba(0,0,0,.6))}
.hero-wheel svg{width:100%;height:100%}
.hero-wheel .spin{transform-origin:50% 50%;animation:slowspin 44s linear infinite}
@keyframes slowspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero-wheel .spin{animation:none}}

/* ---------- cards -------------------------------------------------- */
.card{
  display:flex;flex-direction:column;gap:.6rem;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:1.05rem;color:var(--txt);text-decoration:none;
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
}
.card:hover{border-color:rgba(0,229,255,.42);transform:translateY(-2px);background:var(--panel-2);text-decoration:none}
.card__icon{font-size:1.6rem;line-height:1}
.card__title{display:block;font-weight:750;font-size:1.04rem;letter-spacing:-.02em}
.card__blurb{display:block;font-size:.885rem;color:var(--muted);margin-top:.2rem}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto;padding-top:.4rem}
.card__body{display:block}

.tag{display:inline-block;font-size:.735rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--gold-dim);color:var(--gold-2);border:1px solid rgba(0,229,255,.25);border-radius:999px;padding:.16rem .55rem}
.tag--ghost{background:transparent;color:var(--muted);border-color:var(--line-2)}
.pill{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;border-radius:999px;padding:.1rem .5rem;vertical-align:middle}
.pill--gold{background:var(--gold);color:#001418}
.pill--green{background:rgba(0,230,118,.18);color:#34eea0;border:1px solid rgba(0,230,118,.35)}
.pill--red{background:rgba(255,92,122,.16);color:#ff8fa8;border:1px solid rgba(255,92,122,.35)}

.tile-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.tile{
  display:flex;flex-direction:column;justify-content:space-between;gap:.35rem;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.75rem .8rem;
  color:var(--txt);text-decoration:none;min-height:88px;
}
.tile:hover{border-color:rgba(0,229,255,.45);text-decoration:none;background:linear-gradient(160deg,var(--panel-3),var(--panel-2))}
.tile b{font-size:.94rem;font-weight:700;letter-spacing:-.02em}
.tile span{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}

/* ---------- tables -------------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow-sm)}
.table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px}
.table th,.table td{padding:.72rem .85rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.table thead th{
  background:var(--panel-2);font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:750;white-space:nowrap;position:sticky;top:0;
}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:rgba(255,255,255,.025)}
.table td.num,.table th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.table .good{color:#34eea0}
.table .bad{color:#ff8fa8}
.table caption{caption-side:top;text-align:left;padding:.85rem;color:var(--muted);font-size:.86rem;border-bottom:1px solid var(--line)}
.table-note{font-size:.82rem;color:var(--muted);margin:.75rem 0 0;max-width:92ch}
.table--brands{min-width:820px}
.cell-rank{font-family:var(--mono);color:var(--gold);font-weight:700;width:2.6rem}
.cell-brand .brand-name{font-weight:800;font-size:1.02rem;color:#fff}
.cell-brand__sub{display:block;font-size:.78rem;color:var(--muted)}
.cell-score strong{display:block;font-size:1.2rem;color:var(--gold);line-height:1.1}
.cell-code code{white-space:nowrap}
.cell-cta{white-space:nowrap}
.cell-cta .link-sm{display:block;margin-top:.3rem}
.stars{display:block;font-size:.74rem;letter-spacing:.06em;color:rgba(255,255,255,.18)}
.stars .on{color:var(--gold)}

.kv{width:100%;border-collapse:collapse;font-size:.93rem}
.kv th{text-align:left;font-weight:600;color:var(--muted);padding:.5rem .8rem .5rem 0;border-bottom:1px solid var(--line);width:42%;vertical-align:top}
.kv td{padding:.5rem 0;border-bottom:1px solid var(--line)}
.kv tr:last-child th,.kv tr:last-child td{border-bottom:0}

/* ---------- offer box / CTA ---------------------------------------- */
.offer-box{
  background:linear-gradient(165deg,rgba(0,229,255,.13),var(--panel) 55%);
  border:1px solid rgba(0,229,255,.32);border-radius:var(--r-lg);
  padding:1.4rem;box-shadow:var(--shadow);
}
.offer-box__tag{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);font-weight:800;margin-bottom:.5rem}
.offer-box__head{font-size:1.32rem;margin-bottom:.35em}
.offer-box__sub{font-size:.92rem;color:var(--txt-2)}
.offer-box__code{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:rgba(0,0,0,.3);border:1px dashed rgba(0,229,255,.4);border-radius:var(--r-sm);padding:.6rem .8rem;margin:.9rem 0}
.offer-box__code .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.offer-box__code code{font-size:1.02rem;font-weight:700;letter-spacing:.04em}
.offer-box__terms{font-size:.76rem;color:var(--muted);margin:.85rem 0 0;line-height:1.55}

.cta-strip{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:linear-gradient(100deg,rgba(0,229,255,.14),rgba(255,45,149,.12));
  border:1px solid rgba(0,229,255,.26);border-radius:var(--r);
  padding:1.05rem 1.2rem;margin:2rem 0;
}
.cta-strip__text{display:flex;flex-direction:column;gap:.18rem;min-width:min(100%,320px)}
.cta-strip__text strong{font-size:1.06rem}
.cta-strip__text span{font-size:.87rem;color:var(--txt-2)}

.footer-strip{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(0,229,255,.09),transparent)}
.footer-strip__in{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;padding:2.4rem 20px}
.footer-strip__kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);font-weight:800;margin:0 0 .35rem}
.footer-strip__head{font-size:clamp(1.3rem,3vw,1.9rem);margin:0 0 .4rem}
.footer-strip__sub{margin:0;font-size:.9rem;color:var(--txt-2)}

.rg-note{font-size:.83rem;color:var(--muted);border-left:3px solid var(--gold);padding:.1rem 0 .1rem 1rem;margin:2rem 0 0;max-width:90ch}

.callout{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1rem 1.1rem;margin:1.6rem 0}
.callout p:last-child{margin-bottom:0}
.callout--warn{border-left-color:var(--warn)}
.callout--bad{border-left-color:var(--bad)}

.link-list{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.link-list li{margin:0;font-size:.94rem;color:var(--txt-2);padding-left:1.1rem;position:relative}
.link-list li::before{content:"→";position:absolute;left:0;color:var(--gold);font-size:.85rem}

.pros-cons{display:grid;gap:14px}
@media(min-width:760px){.pros-cons{grid-template-columns:1fr 1fr}}
.pros-cons ul{list-style:none;padding:0;margin:0}
.pros-cons li{padding-left:1.5rem;position:relative;font-size:.93rem;margin-bottom:.65rem}
.pros li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.cons li::before{content:"✕";position:absolute;left:0;color:var(--bad);font-weight:800}

/* ---------- FAQ ----------------------------------------------------- */
.faq{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:last-child{border-bottom:0}
.faq__item summary{
  cursor:pointer;padding:.95rem 1.1rem;font-weight:650;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";color:var(--gold);font-weight:800;font-size:1.15rem;line-height:1.2;flex:0 0 auto}
.faq__item[open] summary::after{content:"–"}
.faq__item summary:hover{background:var(--panel-2)}
.faq__a{padding:0 1.1rem 1rem;color:var(--txt-2);font-size:.94rem}
.faq__a p{margin:0}

/* =====================================================================
   GAME UI
   ===================================================================== */
.game-shell{display:grid;gap:16px}
@media(min-width:1040px){.game-shell{grid-template-columns:300px minmax(0,1fr)}}

.game-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;box-shadow:var(--shadow-sm)}
.game-panel h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:.8rem}

.field{margin-bottom:.95rem}
.field label{display:block;font-size:.79rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:.35rem}
.field .hint{font-size:.78rem;color:var(--muted);margin-top:.3rem}
input[type=number],input[type=text],select{
  width:100%;font:inherit;font-size:.96rem;font-family:var(--mono);
  background:var(--bg-2);color:var(--txt);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:.6rem .7rem;
}
input:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
input[type=range]{width:100%;accent-color:var(--gold);height:26px}

.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.btn-row .btn{flex:1 1 auto}
.chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.6rem}
.chip{
  --chip:#c8202a;
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;cursor:pointer;
  border:3px dashed rgba(255,255,255,.75);
  background:var(--chip);color:#fff;font:inherit;font-size:.8rem;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.8);transition:transform .1s ease,box-shadow .1s ease;
}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed=true]{box-shadow:0 0 0 3px var(--gold),0 4px 10px -4px rgba(0,0,0,.8);transform:translateY(-2px)}
.chip--1{--chip:#e8e8e8;color:#222}
.chip--5{--chip:#c8202a}
.chip--25{--chip:#00b862}
.chip--100{--chip:#1a1a1a}
.chip--500{--chip:#7b3fbf}

/* --- roulette table layout --- */
.roulette-stage{display:grid;gap:16px}
.wheel-box{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  background:radial-gradient(circle at 50% 30%,rgba(0,229,255,.09),transparent 60%),var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;
}
.wheel{width:min(320px,74vw);aspect-ratio:1;position:relative}
.wheel svg{width:100%;height:100%;overflow:visible}
/* The rotor and ball are rotated via the SVG transform attribute in JS
   (rAF animation) — CSS transforms on SVG groups pivot inconsistently
   across browsers and made the wheel drift sideways. No CSS transform
   or transition here on purpose. */
.wheel__pointer{position:absolute;top:-2px;left:50%;transform:translateX(-50%);color:var(--gold);font-size:1.1rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.8))}

.result-strip{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center;min-height:56px}
.result-num{
  width:52px;height:52px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:1.3rem;font-weight:800;color:#fff;border:2px solid rgba(255,255,255,.18);
}
.result-num--red{background:var(--red)}
.result-num--black{background:var(--pocket-black)}
.result-num--green{background:var(--pocket-green)}
.result-num.pop{animation:pop .45s ease}
@keyframes pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.result-msg{font-size:1rem;font-weight:700}
.result-msg.win{color:#34eea0}
.result-msg.lose{color:var(--muted)}

.history{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;min-height:26px}
.history i{
  font-style:normal;width:26px;height:26px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.74rem;font-weight:700;color:#fff;
}
.history .red{background:var(--red)}
.history .black{background:var(--pocket-black);border:1px solid rgba(255,255,255,.14)}
.history .green{background:var(--pocket-green)}

.felt{
  background:
    linear-gradient(0deg,rgba(0,0,0,.22),rgba(0,0,0,.22)),
    repeating-linear-gradient(45deg,#12123a 0 6px,#101034 6px 12px);
  border:2px solid rgba(0,229,255,.4);border-radius:var(--r);
  padding:10px;overflow-x:auto;box-shadow:var(--shadow-sm);
}
.layout{display:grid;gap:4px;min-width:520px}
.layout--eu{grid-template-columns:44px repeat(12,1fr) 52px}
.layout--us{grid-template-columns:44px repeat(12,1fr) 52px}
.layout--mini{grid-template-columns:44px repeat(4,1fr)}

.bet{
  position:relative;border:1px solid rgba(255,255,255,.28);border-radius:5px;
  background:rgba(0,0,0,.14);color:#fff;font:inherit;font-weight:700;font-size:.9rem;
  cursor:pointer;padding:.42rem .1rem;min-height:38px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);letter-spacing:-.02em;transition:background .1s ease,box-shadow .1s ease;
}
.bet:hover{background:rgba(0,229,255,.28);box-shadow:inset 0 0 0 1px var(--gold)}
.bet--red{background:var(--red)}
.bet--black{background:var(--pocket-black)}
.bet--green{background:var(--pocket-green)}
.bet--outside{background:rgba(0,0,0,.3);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;font-family:var(--sans)}
.bet--zero{grid-row:span 3;writing-mode:vertical-rl;transform:rotate(180deg)}
.bet--col{font-size:.72rem;text-transform:uppercase;font-family:var(--sans)}
.bet.hot{box-shadow:inset 0 0 0 2px var(--gold-2)}
.bet.won{animation:betwin .8s ease}
@keyframes betwin{0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}30%,70%{box-shadow:inset 0 0 0 3px #34eea0}}
.bet__chip{
  position:absolute;top:-7px;right:-7px;min-width:22px;height:22px;border-radius:999px;
  background:var(--gold);color:#001418;font-size:.68rem;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;padding:0 .3rem;
  box-shadow:0 2px 5px rgba(0,0,0,.6);font-family:var(--mono);
}
/* number cell wrapper + edge betting spots (splits, corners, streets) */
.cell{position:relative;display:flex}
.cell>.bet{flex:1 1 auto;width:100%}
.hot{
  position:absolute;width:18px;height:18px;padding:0;cursor:pointer;z-index:3;
  border:1px solid rgba(255,255,255,.35);border-radius:50%;
  background:rgba(255,255,255,.10);
  opacity:0;transition:opacity .12s ease,background .12s ease;
}
.cell:hover .hot,.hot:focus-visible{opacity:1}
.hot:hover{background:var(--gold);border-color:#fff;opacity:1}
.hot--right{right:-9px;top:50%;transform:translateY(-50%)}
.hot--bottom{bottom:-9px;left:50%;transform:translateX(-50%)}
.hot--corner{right:-9px;bottom:-9px}
.hot.hot-on,.hot:has(.bet__chip){opacity:1;background:var(--gold)}
.hot .bet__chip{top:-9px;right:-9px;min-width:19px;height:19px;font-size:.6rem}
@media(hover:none){
  .hot{opacity:.85;width:20px;height:20px;background:rgba(0,0,0,.45)}
}
.layout-row{display:grid;gap:4px;min-width:520px;margin-top:4px}
.row-dozens{grid-template-columns:44px repeat(3,1fr) 52px}
.row-evens{grid-template-columns:44px repeat(6,1fr) 52px}
.spacer{visibility:hidden}

.bet-summary{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;font-size:.88rem;color:var(--muted);margin-top:.75rem}
.bet-summary b{color:var(--gold-2);font-family:var(--mono)}

.racetrack{display:flex;flex-wrap:wrap;gap:6px;margin-top:.7rem}
.racetrack button{
  font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;
  background:var(--panel-2);color:var(--txt);border:1px solid var(--line-2);border-radius:999px;padding:.36rem .75rem;
}
.racetrack button:hover{background:var(--panel-3);border-color:rgba(0,229,255,.4)}

.stat-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:.8rem}
/* never four columns inside the narrow game panel — the media query sees the
   viewport, not the 300px panel, and squeezed labels out of their tiles */
.stat-strip div{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:.5rem .6rem;min-width:0;overflow:hidden}
.stat-strip b{display:block;font-family:var(--mono);font-size:.92rem;line-height:1.25;color:var(--gold-2);white-space:normal;word-break:break-word}
.stat-strip span{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.02em;line-height:1.35;color:var(--muted);white-space:normal}

/* --- other games --- */
.stage{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;display:flex;flex-direction:column;align-items:center;gap:1rem;min-height:280px;justify-content:center}
.big-num{font-family:var(--mono);font-size:clamp(2.4rem,9vw,4.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--gold-2)}
.big-num.win{color:#34eea0}
.big-num.lose{color:#ff8fa8}
.slider-readout{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.84rem;color:var(--muted)}
#plinko-canvas,#crash-canvas,#wheel-canvas{width:100%;max-width:520px;background:rgba(0,0,0,.25);border-radius:var(--r-sm);border:1px solid var(--line)}
.multi-row{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;margin-top:.6rem}
.multi-row i{font-style:normal;font-family:var(--mono);font-size:.7rem;font-weight:700;padding:.2rem .38rem;border-radius:4px;background:var(--panel-2);color:var(--txt-2);border:1px solid var(--line)}
.multi-row i.hit{background:var(--gold);color:#001418;border-color:transparent}

/* =====================================================================
   CALCULATORS
   ===================================================================== */
.calc{display:grid;gap:16px}
@media(min-width:940px){.calc{grid-template-columns:minmax(0,340px) minmax(0,1fr)}}
.calc__inputs{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem}
.calc__out{display:grid;gap:12px;align-content:start}
.out-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:760px){.out-grid{grid-template-columns:repeat(3,1fr)}}
.out{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:.85rem}
.out span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.03em;line-height:1.35;color:var(--muted);margin-bottom:.2rem;white-space:normal}
.out b{font-family:var(--mono);font-size:clamp(.95rem,1.6vw,1.18rem);font-weight:800;color:var(--gold-2);letter-spacing:-.01em;line-height:1.25;display:block;white-space:normal;word-break:break-word}
.out--hero{background:linear-gradient(160deg,rgba(0,229,255,.14),var(--panel));border-color:rgba(0,229,255,.3)}
.out--hero b{font-size:1.7rem}
.out b.good{color:#34eea0}
.out b.bad{color:#ff8fa8}
.verdict{border-radius:var(--r);padding:1rem 1.1rem;font-size:.95rem;border:1px solid var(--line);background:var(--panel)}
.verdict--good{border-color:rgba(0,230,118,.4);background:rgba(0,230,118,.09)}
.verdict--bad{border-color:rgba(255,92,122,.4);background:rgba(255,92,122,.09)}
.verdict strong{display:block;font-size:1.04rem;margin-bottom:.25rem}

.bar-chart{display:grid;gap:6px;font-size:.85rem}
.bar-chart .row{display:grid;grid-template-columns:minmax(84px,26%) 1fr auto;gap:.6rem;align-items:center}
.bar-chart .lab{color:var(--txt-2)}
.bar-chart .track{background:rgba(0,0,0,.3);border-radius:999px;height:16px;overflow:hidden;border:1px solid var(--line)}
.bar-chart .fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:999px}
.bar-chart .fill.bad{background:linear-gradient(90deg,#a8353b,#e05252)}
.bar-chart .val{font-family:var(--mono);color:var(--gold-2);font-size:.82rem}

/* ---------- footer -------------------------------------------------- */
.site-foot{border-top:1px solid var(--line);background:rgba(0,0,0,.28);margin-top:0;padding-top:2.4rem}
.site-foot__in{display:grid;gap:24px}
@media(min-width:700px){.site-foot__in{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.site-foot__in{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}}
.site-foot__brand p{font-size:.87rem;color:var(--muted);max-width:40ch}
.site-foot__col h3{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gold);margin:0 0 .6rem}
.site-foot__col h3:not(:first-child){margin-top:1.3rem}
.site-foot__col ul{list-style:none;padding:0;margin:0}
.site-foot__col li{margin-bottom:.4rem}
.site-foot__col a{color:var(--txt-2);font-size:.87rem}
.site-foot__col a:hover{color:var(--gold-2)}
.site-foot__legal{display:flex;gap:1rem;align-items:flex-start;border-top:1px solid var(--line);margin-top:2.2rem;padding-top:1.3rem;padding-bottom:2.2rem}
.site-foot__legal p{font-size:.79rem;color:var(--muted);margin:0;line-height:1.6}
.age-badge{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:2px solid var(--bad);color:var(--bad);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;
}

/* ---------- misc ---------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);
  background:var(--panel-3);border:1px solid var(--line-2);color:var(--txt);
  padding:.7rem 1.1rem;border-radius:999px;font-size:.9rem;font-weight:600;
  box-shadow:var(--shadow);z-index:300;transition:transform .28s ease;pointer-events:none;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.anchor-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 1.6rem}
.anchor-nav a{font-size:.84rem;font-weight:600;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.34rem .8rem;color:var(--txt-2)}
.anchor-nav a:hover{border-color:rgba(0,229,255,.4);color:var(--gold-2);text-decoration:none}

/* =====================================================================
   v2 — brand table, counters, live tiles, CTA effects, wheel, art
   ===================================================================== */

/* brand monogram logo */
.brand-logo{
  --bl-size:40px;--bl-accent:#00e5ff;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:var(--bl-size);height:var(--bl-size);border-radius:12px;
  background:linear-gradient(160deg,var(--bl-accent),color-mix(in srgb,var(--bl-accent) 55%,#000));
  color:#fff;font-weight:900;font-size:calc(var(--bl-size)*.5);
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--bl-accent) 60%,transparent);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.brand-logo--img{
  background:#0d0d1f;border:1px solid var(--line-2);overflow:hidden;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.6);
}
.brand-logo--img img{width:82%;height:82%;object-fit:contain;display:block}
.brand-wordmark{display:inline-block;width:auto;vertical-align:middle;filter:drop-shadow(0 0 10px rgba(0,229,255,.25))}
.cta-strip__brand{flex:0 0 auto;display:flex;align-items:center}
.footer-strip__kicker{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* clickable brand rows */
.brand-row{cursor:pointer}
.brand-row:hover{background:rgba(0,229,255,.06)!important}
.brand-row--top{background:linear-gradient(90deg,rgba(0,229,255,.12),rgba(0,229,255,.03))!important;box-shadow:inset 3px 0 0 var(--gold)}
.brand-row--top:hover{background:linear-gradient(90deg,rgba(0,229,255,.18),rgba(0,229,255,.06))!important}
.rank-badge{font-weight:800;color:var(--gold);white-space:nowrap}
.cell-brand__in{display:flex;align-items:center;gap:.7rem}
.verified{font-size:.74rem;font-weight:700;color:#34eea0;white-space:nowrap}
.code-inline{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.cell-offer small{display:block;color:var(--muted);font-size:.76rem;margin-top:.15rem}
.cell-used b{display:block;font-family:var(--mono);color:var(--gold-2);font-size:1rem}
.cell-used small{color:var(--muted);font-size:.72rem;white-space:nowrap}

/* offer box brand strip */
.offer-box__brand{display:flex;align-items:center;gap:.75rem;margin-bottom:.9rem}
.offer-box__name{font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.offer-box__limited{font-size:.8rem;color:var(--warn)}
.countdown{font-family:var(--mono);font-weight:800;color:var(--warn)}

/* animated number counters (JS sets final text; this is just polish) */
.counter{font-variant-numeric:tabular-nums}

/* CTA effects — fill left-to-right + occasional shake */
.btn--fill{position:relative;overflow:hidden;z-index:0}
.btn--fill span{position:relative;z-index:2}
.btn--fill::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#ccf9ff,var(--gold-2));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.btn--fill:hover::before{transform:scaleX(1)}
.btn--pulse{animation:ctapulse 4.5s ease-in-out infinite}
@keyframes ctapulse{
  0%,86%,100%{transform:translateX(0)}
  88%{transform:translateX(-2px) rotate(-.6deg)}
  90%{transform:translateX(2px) rotate(.6deg)}
  92%{transform:translateX(-2px)}
  94%{transform:translateX(1px)}
  96%{transform:translateX(0)}
}

/* FAQ open/close animation */
.faq__a{overflow:hidden}
.faq__item[open] .faq__a{animation:faqopen .28s ease}
@keyframes faqopen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* live demo tiles (non-stop animated previews) */
.live-tile{
  display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);padding:.9rem;
  color:var(--txt);text-decoration:none;min-height:150px;
  transition:border-color .15s ease,transform .15s ease;
}
.live-tile:hover{border-color:rgba(0,229,255,.5);transform:translateY(-2px);text-decoration:none}
.live-tile__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.live-tile__title{font-weight:750;font-size:.98rem;letter-spacing:-.02em}
.live-tile__demo{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:64px;
  background:rgba(0,0,0,.25);border-radius:var(--r-sm);border:1px solid var(--line);
  font-family:var(--mono);overflow:hidden;position:relative;
}
.live-tile__foot{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:var(--muted)}
.mini-wheel{width:56px;height:56px;border-radius:50%;
  background:conic-gradient(var(--pocket-green) 0 9.7deg,
    #c8202a 9.7deg 19.4deg,#171717 19.4deg 29.1deg,#c8202a 29.1deg 38.8deg,#171717 38.8deg 48.5deg,
    #c8202a 48.5deg 58.2deg,#171717 58.2deg 67.9deg,#c8202a 67.9deg 77.6deg,#171717 77.6deg 87.3deg,
    #c8202a 87.3deg 97deg,#171717 97deg 106.7deg,#c8202a 106.7deg 116.4deg,#171717 116.4deg 126.1deg,
    #c8202a 126.1deg 135.8deg,#171717 135.8deg 145.5deg,#c8202a 145.5deg 155.2deg,#171717 155.2deg 164.9deg,
    #c8202a 164.9deg 174.6deg,#171717 174.6deg 184.3deg,#c8202a 184.3deg 194deg,#171717 194deg 203.7deg,
    #c8202a 203.7deg 213.4deg,#171717 213.4deg 223.1deg,#c8202a 223.1deg 232.8deg,#171717 232.8deg 242.5deg,
    #c8202a 242.5deg 252.2deg,#171717 252.2deg 261.9deg,#c8202a 261.9deg 271.6deg,#171717 271.6deg 281.3deg,
    #c8202a 281.3deg 291deg,#171717 291deg 300.7deg,#c8202a 300.7deg 310.4deg,#171717 310.4deg 320.1deg,
    #c8202a 320.1deg 329.8deg,#171717 329.8deg 339.5deg,#c8202a 339.5deg 349.2deg,#171717 349.2deg 360deg);
  border:3px solid var(--gold);box-shadow:inset 0 0 0 4px rgba(0,0,0,.55);
  animation:slowspin 7s linear infinite;
}
.live-num{font-size:1.15rem;font-weight:800;color:var(--gold-2);letter-spacing:-.02em}
.live-num.tick{animation:pop .3s ease}
.live-bar{position:absolute;left:0;bottom:0;height:3px;background:var(--gold);opacity:.7;transition:width .4s linear}
.live-crash{font-size:1.2rem;font-weight:800;color:#34eea0}
.live-crash.dead{color:#ff8fa8}
.plinko-dots{position:relative;width:100%;height:100%}
.plinko-dots i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;transition:top .5s linear,left .5s linear}

/* value blocks / art */
.art-strip{display:grid;gap:14px;margin:1.4rem 0}
@media(min-width:760px){.art-strip{grid-template-columns:repeat(2,1fr)}}
.art-card{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);min-height:180px;display:flex;align-items:flex-end}
.art-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-card__cap{position:relative;z-index:2;width:100%;padding:.9rem 1rem;background:linear-gradient(0deg,rgba(5,12,9,.92),rgba(5,12,9,0));font-size:.9rem;font-weight:600}
.figure{margin:1.6rem 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.figure img{width:100%;display:block}
.figure figcaption{padding:.6rem .9rem;font-size:.8rem;color:var(--muted);background:var(--panel)}

/* realistic wheel */
.realwheel{position:relative;width:min(420px,88vw);margin:0 auto}
.realwheel canvas{width:100%;height:auto;display:block;filter:drop-shadow(0 22px 46px rgba(0,0,0,.6))}
.realwheel__result{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;pointer-events:none;
}
.realwheel__num{
  font-family:var(--mono);font-weight:800;font-size:1.9rem;line-height:1;color:#fff;
  background:rgba(0,0,0,.55);border:2px solid var(--gold);border-radius:14px;padding:.35rem .7rem;
  opacity:0;transform:scale(.6);transition:opacity .3s ease,transform .3s ease;
}
.realwheel__num.show{opacity:1;transform:scale(1)}
.realwheel__num.red{background:rgba(200,32,42,.85)}
.realwheel__num.black{background:rgba(23,23,23,.85)}
.realwheel__num.green{background:rgba(255,45,149,.85)}
.sim-shell{display:grid;gap:18px;align-items:start}
@media(min-width:960px){.sim-shell{grid-template-columns:minmax(0,1fr) 320px}}

/* stat tiles: stop text overflow */
.stat b{overflow-wrap:anywhere}
.stat span{overflow-wrap:anywhere}

/* section intro heading helper */
.h-benefit{margin-top:3rem}
.h-benefit p{color:var(--muted);max-width:70ch}


/* ---------- neon glow layer ---------------------------------------- */
.logo__text strong,
h1 em{
  text-shadow:0 0 12px rgba(0,229,255,.65),0 0 34px rgba(0,229,255,.3);
}
h2{text-shadow:0 0 22px rgba(0,229,255,.12)}
.btn--primary{
  box-shadow:0 0 14px rgba(0,229,255,.45),0 0 38px rgba(0,229,255,.18),0 10px 26px -12px rgba(0,229,255,.5);
}
.btn--primary:hover{box-shadow:0 0 20px rgba(0,229,255,.65),0 0 54px rgba(0,229,255,.28)}
.btn--green{box-shadow:0 0 14px rgba(0,230,118,.4),0 10px 26px -14px rgba(0,230,118,.55)}
.btn--red{box-shadow:0 0 14px rgba(255,77,106,.4)}
.offer-box{box-shadow:var(--shadow),0 0 34px -6px rgba(0,229,255,.22)}
.offer-box__code{border-color:rgba(0,229,255,.5);box-shadow:inset 0 0 16px rgba(0,229,255,.08)}
.card:hover,.live-tile:hover,.tile:hover{
  border-color:rgba(0,229,255,.55);
  box-shadow:0 0 22px -4px rgba(0,229,255,.28);
}
.brand-row--top{box-shadow:inset 3px 0 0 var(--gold),inset 0 0 34px -14px rgba(0,229,255,.35)}
.balance{box-shadow:inset 0 0 12px rgba(0,229,255,.06)}
.balance__val{text-shadow:0 0 10px rgba(0,229,255,.5)}
.nav__bonus{box-shadow:0 0 14px -2px rgba(0,229,255,.35)}
.result-num{box-shadow:0 0 16px -2px rgba(255,255,255,.25)}
.result-num--red{box-shadow:0 0 18px -2px rgba(255,45,85,.6)}
.result-num--green{box-shadow:0 0 18px -2px rgba(0,230,118,.6)}
.big-num{text-shadow:0 0 18px rgba(0,229,255,.4)}
.big-num.win{text-shadow:0 0 18px rgba(0,230,118,.55)}
.big-num.lose{text-shadow:0 0 18px rgba(255,92,122,.5)}
.stat b,.out b{text-shadow:0 0 12px rgba(0,229,255,.3)}
.mini-wheel{border-color:var(--gold);box-shadow:inset 0 0 0 4px rgba(0,0,0,.55),0 0 16px -2px rgba(0,229,255,.5)}
.felt{box-shadow:var(--shadow-sm),inset 0 0 40px rgba(0,229,255,.05)}
.site-head{box-shadow:0 1px 0 rgba(0,229,255,.14),0 8px 30px -18px rgba(0,229,255,.25)}
.footer-strip{background:linear-gradient(180deg,rgba(0,229,255,.08),transparent)}
.search-box{box-shadow:var(--shadow),0 0 44px -8px rgba(0,229,255,.35)}
.countdown{text-shadow:0 0 10px rgba(255,179,0,.6)}
.verified{text-shadow:0 0 10px rgba(0,230,118,.5)}
.age-badge{box-shadow:0 0 12px -2px rgba(255,92,122,.5)}
.hero__badge{box-shadow:0 0 18px -4px rgba(0,229,255,.3)}
.e404-code{
  font-family:var(--mono);font-weight:800;font-size:clamp(4rem,14vw,8rem);line-height:1;
  color:var(--gold);letter-spacing:-.04em;
  text-shadow:0 0 18px rgba(0,229,255,.7),0 0 60px rgba(0,229,255,.35),0 0 120px rgba(255,45,149,.25);
  animation:neonflicker 4s linear infinite;
}
.e404-hero{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin:1rem 0 1.5rem}
.e404-hero .realwheel{width:min(190px,40vw);margin:0}
@keyframes neonflicker{
  0%,100%{opacity:1}
  92%{opacity:1}
  93%{opacity:.55}
  94%{opacity:1}
  96%{opacity:.75}
  97%{opacity:1}
}

/* ---------- overflow-proofing (desktop + mobile) --------------------
   Grid/flex children default to min-width:auto, which lets long mono
   values push out of their tiles instead of wrapping. Kill that class
   of bug everywhere at once. */
.grid>*,.out-grid>*,.stat,.stat-strip>div,.out,.card,.live-tile,.tile,
.card__body,.live-tile__demo,.cell-offer,.split>*{min-width:0}
.stat b,.stat-strip b,.out b,.card__title,.card__blurb,.live-tile__title{overflow-wrap:anywhere}

.stat span,.stat-strip span,.out span{white-space:normal}
code{overflow-wrap:anywhere}

/* ---------- clickable widgets (offer box / CTA strip) ---------------- */
.offer-box--go,.cta-strip--go{cursor:pointer}
.offer-box--go:hover{border-color:rgba(0,229,255,.55);box-shadow:var(--shadow),0 0 44px -6px rgba(0,229,255,.35)}
.cta-strip--go:hover{border-color:rgba(0,229,255,.5);box-shadow:0 0 26px -6px rgba(0,229,255,.3)}
.offer-box .btn{margin:.35rem 0 .8rem}

/* the wheel widget must never overflow a sidebar column */
.realwheel{width:min(420px,88vw,100%)}

/* =====================================================================
   MOBILE PASS — everything below only tightens small screens
   ===================================================================== */

/* --- mobile menu: a proper panel, not a pile of links ---------------- */
@media(max-width:999px){
  .nav{
    background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
    padding:.5rem;margin:.25rem 0 .6rem;box-shadow:var(--shadow);
    display:block;max-height:min(70vh,560px);overflow-y:auto;
  }
  .nav__item{border-bottom:1px solid var(--line)}
  .nav__item:last-child{border-bottom:0}
  .nav__item>a{padding:.8rem .7rem;font-size:1rem;border-radius:10px}
  .nav__bonus{margin:.3rem 0}
  .drop{border:0;border-left:2px solid rgba(0,229,255,.25);border-radius:0;
    background:transparent;box-shadow:none;padding:.1rem 0 .5rem .8rem;margin:0 0 .3rem .5rem}
  .drop a{padding:.62rem .6rem;font-size:.95rem;white-space:normal}
}

@media(max-width:759px){
  body{font-size:15.5px}
  .wrap{padding:0 14px}
  .section{padding-top:2rem}
  .page{padding-bottom:2.4rem}
  .hero{padding-top:1.4rem}
  .hero__btns .btn{width:100%}
  .hero__badge{font-size:.82rem;padding:.5rem .8rem}
  h1{letter-spacing:-.01em}

  /* header: keep one tidy row */
  .site-head__in{gap:8px;min-height:56px}
  .logo{font-size:1.04rem}
  .logo__wheel{width:22px;height:22px}
  .balance{padding:.22rem .28rem .22rem .55rem;gap:5px}
  .balance__val{font-size:.84rem;min-width:4.8ch}
  .search-btn{width:34px;height:34px}

  /* generic tables: tighter, still swipeable, with momentum */
  .table-wrap{-webkit-overflow-scrolling:touch}
  .table{font-size:.84rem;min-width:480px}
  .table th,.table td{padding:.55rem .6rem}
  .kv th{width:38%;padding-right:.5rem}
  .table-note{font-size:.78rem}

  /* buttons and CTA blocks */
  .btn--lg{padding:.85rem 1.2rem;font-size:.98rem}
  .cta-strip{padding:.9rem 1rem;gap:.7rem}
  .cta-strip .btn{width:100%}
  .cta-strip__brand{order:-1}
  .footer-strip__in{padding:1.8rem 14px}
  .footer-strip .btn{width:100%}
  .offer-box{padding:1.1rem}
  .offer-box__code{gap:.4rem;padding:.5rem .6rem}
  .offer-box__code code{font-size:.9rem}

  /* cards & tiles */
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .live-tile{min-height:132px;padding:.75rem}
  .live-tile__demo{min-height:56px}
  .mini-wheel{width:46px;height:46px}
  .tile-row{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .anchor-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.3rem}
  .anchor-nav a{flex:0 0 auto}

  /* stats */
  .stat{padding:.65rem}
  .stat b{font-size:clamp(.92rem,4vw,1.2rem)}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .out b{font-size:1.05rem}
  .out--hero b{font-size:1.3rem}

  /* search overlay */
  .search-overlay{padding-top:4vh}
  .search-results .g{width:60px;font-size:.6rem}

  /* FAQ, panels */
  .panel{padding:1rem}
  .faq__item summary{padding:.8rem .85rem;font-size:.93rem}
  .faq__a{font-size:.88rem}
}

@media(max-width:479px){
  .grid--4{grid-template-columns:1fr}
  .art-strip{grid-template-columns:1fr}
  .e404-hero{justify-content:center;text-align:center}
}

/* --- brand comparison table → stacked cards on phones ---------------- */
@media(max-width:719px){
  .table--brands{min-width:0;display:block}
  .table--brands thead{display:none}
  .table--brands tbody{display:block}
  .table--brands tr.brand-row{
    display:grid;grid-template-columns:1fr 1fr;gap:.35rem .8rem;
    padding:.9rem .85rem;border-bottom:1px solid var(--line);
  }
  .table--brands tr.brand-row td{display:block;border:0;padding:0}
  .table--brands .cell-rank{display:none}
  .table--brands .cell-brand{grid-column:1 / -1}
  .table--brands .cell-score{text-align:left}
  .table--brands .cell-score strong{font-size:1.05rem;display:inline-block;margin-right:.3rem}
  .table--brands .stars{display:inline}
  .table--brands .cell-offer{grid-column:1 / -1;font-size:.9rem}
  .table--brands .cell-code{align-self:center}
  .table--brands .cell-used b{display:inline;margin-right:.35rem;font-size:.92rem}
  .table--brands .cell-used small{display:block}
  .table--brands .cell-cta{grid-column:1 / -1;display:flex;align-items:center;gap:.8rem;white-space:normal;margin-top:.25rem}
  .table--brands .cell-cta .btn{flex:1}
  .table--brands .cell-cta .link-sm{margin:0;flex:0 0 auto}
  .table--brands tr.brand-row--top{border-left:3px solid var(--gold)}
}

/* --- game pages on mobile: demo first, controls after ----------------- */
@media(max-width:1039px){
  .game-shell>.game-panel{order:2}
  .game-shell>.roulette-stage,.game-shell>.stage{order:1}
  .game-shell{display:grid}
}
@media(max-width:759px){
  .game-panel{padding:.9rem}
  .wheel-box{padding:.8rem}
  .wheel{width:min(272px,82vw)}
  .result-num{width:44px;height:44px;font-size:1.1rem;border-radius:10px}
  .result-msg{font-size:.9rem;text-align:center}
  .history i{width:23px;height:23px;font-size:.68rem}
  .chip{width:40px;height:40px;font-size:.74rem}
  .btn-row .btn{padding:.7rem .8rem}
  .stage{padding:.85rem;min-height:220px}
  .big-num{font-size:clamp(2rem,11vw,3.2rem)}

  /* the felt: slightly smaller cells, clearly swipeable */
  .felt{padding:8px;position:relative}
  .layout,.layout-row{min-width:472px;gap:3px}
  .bet{font-size:.8rem;min-height:34px;padding:.34rem .08rem}
  .bet--outside{font-size:.66rem}
  .bet__chip{min-width:19px;height:19px;font-size:.62rem;top:-6px;right:-6px}
  .hot{width:16px;height:16px}
  .felt::after{
    content:"⟷ swipe the table";position:sticky;left:0;display:block;width:max-content;
    margin-top:6px;font-size:.68rem;color:var(--muted);
    background:rgba(0,0,0,.4);border-radius:999px;padding:.15rem .6rem;
  }
  .racetrack button{font-size:.72rem;padding:.3rem .6rem}
  .bet-summary{font-size:.8rem;gap:.4rem .9rem}
}

/* --- guides / bonus / brand-roulette templates on mobile -------------- */
@media(max-width:759px){
  /* the two-column split becomes one column; the sidebar must not stick */
  .split{gap:16px}
  .split__side{position:static}

  /* key-value tables: stack label over value instead of squeezing 42/58 */
  .kv,.kv tbody{display:block;width:100%}
  .kv tr{display:block;padding:.55rem 0;border-bottom:1px solid var(--line)}
  .kv tr:last-child{border-bottom:0}
  .kv th,.kv td{display:block;width:100%;border:0;padding:0}
  .kv th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.15rem}
  .kv td{font-size:.92rem}

  /* long headings with codes inside (bonus / brand-roulette pages) */
  h1{font-size:clamp(1.45rem,6.4vw,1.9rem)}
  h1 code{font-size:.75em;white-space:normal}
  .lead{font-size:.98rem}

  /* offer boxes and code rows never overflow */
  .offer-box__head{font-size:1.12rem}
  .offer-box__name{flex-wrap:wrap}
  .code-inline{flex-wrap:wrap;white-space:normal}
  .cell-code{white-space:normal}

  /* guide extras */
  .callout{padding:.85rem .95rem;margin:1.2rem 0}
  .prose,.prose--wide{max-width:100%}
  .pros-cons{grid-template-columns:1fr}
  .link-list li{font-size:.9rem}
  .figure figcaption{font-size:.74rem}

  /* the sidebar wheel on brand pages: centred, sane size */
  .split__side .wheel-box{padding:.7rem}
  .split__side .realwheel{width:min(300px,86vw)}

  /* wheel-simulator page shell */
  .sim-shell{gap:14px}
}

/* --- calculators on mobile ------------------------------------------- */
@media(max-width:759px){
  .calc__inputs{padding:.95rem}
  .out-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .out{padding:.65rem}
  .verdict{font-size:.9rem;padding:.85rem .9rem}
  input[type=number],input[type=text],select{font-size:16px} /* stops iOS zoom */
  .search-box__row input{font-size:16px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}