/* Spins House Casino — spin-house.ca
   Palette verified on official site (computed styles): bg #0A171A, CTA pink
   gradient #CC336A->#FF4D96, gold #F6C902->#E59202, periwinkle #9E9EFF.
   Font: Montserrat. Buttons: pill (28px). */

:root{
  --bg:#0A171A; --bg-2:#0E1C20; --panel:#122227; --panel-2:#16292F;
  --line:rgba(158,158,255,.16); --line-2:rgba(255,255,255,.08);
  --ink:#FFFFFF; --muted:#AEBCC2; --muted-2:#8597A0;
  --pink:#FF4D96; --pink-2:#CC336A; --gold:#F6C902; --gold-2:#E59202;
  --peri:#9E9EFF; --blue:#D5E8FC; --green:#34d399; --red:#ef5a6f;
  --grad-pink:linear-gradient(280deg,#CC336A 0%,#FF4D96 100%);
  --grad-gold:linear-gradient(269deg,#F6C902 2%,#E59202 99%);
  --grad-peri:linear-gradient(135deg,#9E9EFF 0%,#6f6fe0 100%);
  --radius:18px; --pill:999px; --shadow:0 18px 48px rgba(0,0,0,.45);
  --maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Montserrat',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.7; font-size:16.5px; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--peri); text-decoration:none}
.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--pink);
  color:#fff; padding:.7em 1.2em; border-radius:0 0 10px 0; font-weight:700}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--peri); outline-offset:2px; border-radius:4px}
.btn:focus-visible{outline-color:#fff}
.main a:not(.btn):hover{color:var(--pink); text-decoration:underline}
h1,h2,h3,h4{line-height:1.18; margin:0 0 .55em; font-weight:800; letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.3rem)}
h2{font-size:clamp(1.5rem,3vw,2.25rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1.05em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.section{padding:62px 0}
.section.tight{padding:42px 0}
.eyebrow{display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.6em}
.lead{font-size:1.12rem; color:var(--blue); max-width:760px}
.muted{color:var(--muted)}
.center{text-align:center}
.gold{color:var(--gold)}
.pink{color:var(--pink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  font-weight:800; font-size:.96rem; border:0; cursor:pointer; border-radius:var(--pill);
  padding:.82em 1.7em; color:#fff; background:var(--grad-pink); text-decoration:none;
  box-shadow:0 10px 26px rgba(255,77,150,.32); transition:transform .15s,box-shadow .15s,filter .15s;
  letter-spacing:.01em}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(255,77,150,.45); color:#fff; text-decoration:none}
.btn.gold{background:var(--grad-gold); color:#1a1205; box-shadow:0 10px 26px rgba(246,201,2,.3)}
.btn.gold:hover{box-shadow:0 16px 34px rgba(246,201,2,.45); color:#1a1205}
.btn.ghost{background:rgba(255,255,255,.06); border:1px solid var(--line); box-shadow:none}
.btn.ghost:hover{background:rgba(158,158,255,.14)}
.btn.sm{padding:.6em 1.15em; font-size:.85rem}
.btn.lg{padding:1em 2.1em; font-size:1.06rem}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(10,23,26,.88);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line-2)}
.nav{display:flex; align-items:center; gap:22px; height:70px}
.brand{display:flex; align-items:center; gap:10px; margin-right:6px}
.brand img{height:42px; width:auto}
.nav-links{display:flex; gap:4px; margin-left:auto}
.nav-links a{color:#dfe7ea; font-weight:600; font-size:.92rem; padding:.5em .8em;
  border-radius:var(--pill); transition:background .15s,color .15s}
.nav-links a:hover,.nav-links a.active{background:rgba(158,158,255,.14); color:#fff}
.nav-cta{display:flex; gap:10px; align-items:center}
.burger{display:none; background:rgba(255,255,255,.07); border:1px solid var(--line-2);
  width:44px; height:44px; border-radius:12px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:20px; height:2px; background:#fff; position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:#fff}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* ---------- hero ---------- */
.hero{position:relative; background:linear-gradient(180deg,rgba(10,23,26,.55),rgba(10,23,26,.9)),
  url('/images/hero-main.webp?v=2') right center/cover no-repeat; border-bottom:1px solid var(--line-2)}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 30% 0%,rgba(255,77,150,.16),transparent 70%)}
.hero-inner{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:48px 20px 46px}
.hero-inner>*{max-width:560px}
.hero h1{font-size:clamp(1.9rem,3.7vw,2.75rem)}
.hero h1 span{background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .pill-tag{display:inline-flex; gap:.5em; align-items:center; background:rgba(158,158,255,.16);
  border:1px solid var(--line); color:var(--blue); padding:.4em 1em; border-radius:var(--pill);
  font-weight:700; font-size:.82rem; margin-bottom:18px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px}
.hero-meta{display:flex; gap:26px; flex-wrap:wrap; margin-top:24px; color:var(--muted); font-size:.86rem}
.hero-meta b{color:#fff; display:block; font-size:1.45rem; font-weight:800}

/* ---------- generic cards / grids ---------- */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:26px}
.card h3{margin-top:0}
.card.glow{border-color:rgba(255,77,150,.3); box-shadow:0 0 0 1px rgba(255,77,150,.08),var(--shadow)}
.icon-badge{width:46px; height:46px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:1.3rem; background:rgba(158,158,255,.14); margin-bottom:14px}

/* ---------- deposit banners row (text baked in art; button bottom-left) ---------- */
.banner-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.bnr{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-2);
  box-shadow:var(--shadow); aspect-ratio:3/2; background:#0c0c12}
.bnr img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bnr .btn{position:absolute; left:18px; bottom:16px; z-index:2}
/* wide promo banners (capped so they don't dominate the page) */
.bnr.wide{aspect-ratio:auto; max-width:720px; margin-left:auto; margin-right:auto}
.bnr.wide img{position:static; width:100%; height:auto; object-fit:contain; display:block}
.bnr.wide .btn{position:absolute; left:24px; bottom:22px}
/* banner5 overlay text (left) */
.bnr-overlay{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  justify-content:center; padding:6% 0 6% 6%; max-width:46%}
.bnr-overlay .code{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:800}
.bnr-overlay h3{font-size:clamp(1.1rem,2.4vw,1.9rem); margin:.2em 0}
.bnr-overlay .big{font-size:clamp(1.6rem,4vw,2.8rem); font-weight:800; color:var(--gold); line-height:1}
.bnr-overlay .btn{position:static; margin-top:14px; align-self:flex-start}

/* ---------- slot tiles (rounded slot icons, not cards) ---------- */
.slots-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.slot{background:transparent; border:0; transition:transform .18s}
.slot:hover{transform:translateY(-6px)}
.slot .thumb{border-radius:13.5%; overflow:hidden; margin:0;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.5))}
.slot .thumb img{border-radius:13.5%; aspect-ratio:1/1; object-fit:cover; width:100%; display:block}
.slot .meta{padding:14px 4px 0; text-align:center}
.slot .meta b{display:block; font-size:1.02rem}
.slot .meta span{color:var(--muted); font-size:.84rem}
.slot .meta .btn{margin-top:12px; width:100%}

/* ---------- providers ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{background:rgba(255,255,255,.05); border:1px solid var(--line-2); border-radius:var(--pill);
  padding:.5em 1.05em; font-size:.85rem; color:#d6dee2; font-weight:600}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line-2)}
table{border-collapse:collapse; width:100%; min-width:520px; background:var(--bg-2); font-size:.92rem}
caption{caption-side:top; text-align:left; color:var(--muted); font-size:.85rem; padding:0 0 10px}
th,td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line-2)}
thead th{background:rgba(158,158,255,.1); color:#fff; font-weight:700; letter-spacing:.02em}
tbody tr:hover{background:rgba(255,255,255,.03)}
tbody tr:last-child td{border-bottom:0}
td .tick{color:var(--green); font-weight:800}
td .cross{color:var(--red); font-weight:800}

/* ---------- charts (pure CSS) ---------- */
.bars{display:flex; flex-direction:column; gap:14px; margin:6px 0}
.bar-row{display:grid; grid-template-columns:130px 1fr 52px; align-items:center; gap:12px; font-size:.88rem}
.bar-track{height:13px; background:rgba(255,255,255,.07); border-radius:var(--pill); overflow:hidden}
.bar-fill{height:100%; border-radius:var(--pill); background:var(--grad-pink)}
.bar-fill.gold{background:var(--grad-gold)}
.bar-fill.peri{background:var(--grad-peri)}
.donut-wrap{display:flex; gap:26px; align-items:center; flex-wrap:wrap}
.donut{width:170px; height:170px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; position:relative}
.donut::after{content:""; position:absolute; width:106px; height:106px; border-radius:50%; background:var(--bg-2)}
.donut b{position:relative; z-index:2; font-size:1.5rem}
.legend{display:flex; flex-direction:column; gap:9px; font-size:.9rem}
.legend i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:8px; vertical-align:middle}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stat{background:var(--panel); border:1px solid var(--line-2); border-radius:14px; padding:20px; text-align:center}
.stat b{display:block; font-size:1.9rem; background:var(--grad-gold); -webkit-background-clip:text;
  background-clip:text; color:transparent; line-height:1}
.stat span{color:var(--muted); font-size:.82rem}
/* timeline / steps */
.steps{counter-reset:step; display:grid; gap:16px}
.steps li{list-style:none; position:relative; padding:18px 18px 18px 64px; background:var(--panel);
  border:1px solid var(--line-2); border-radius:14px}
.steps li::before{counter-increment:step; content:counter(step); position:absolute; left:18px; top:18px;
  width:32px; height:32px; border-radius:50%; background:var(--grad-pink); display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:.95rem}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:12px; max-width:880px}
.faq details{background:var(--panel); border:1px solid var(--line-2); border-radius:14px; padding:4px 20px}
.faq summary{cursor:pointer; font-weight:700; padding:16px 0; list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--pink); font-size:1.4rem; font-weight:800; flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details[open]{border-color:rgba(255,77,150,.3)}
.faq p{padding-bottom:16px; margin:0; color:var(--muted)}

/* ---------- author block ---------- */
.author-box{display:flex; gap:22px; align-items:center; background:linear-gradient(120deg,var(--panel),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.author-box img{width:96px; height:96px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid var(--peri)}
.author-box .role{color:var(--gold); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em}
.author-box h3{margin:.15em 0 .3em}
.author-box a{font-weight:700}

/* ---------- sticky bonus banner (bottom-right; button center-bottom baked-in slot) ---------- */
.bonus-pop{position:fixed; right:20px; bottom:20px; z-index:80; width:280px;
  border-radius:18px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.6);
  border:1px solid rgba(255,77,150,.4); transform:translateY(20px); opacity:0;
  transition:transform .35s,opacity .35s}
.bonus-pop.show{transform:translateY(0); opacity:1}
.bonus-pop.hidden{display:none}
.bonus-pop img{width:100%; display:block}
.bonus-pop .grab{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); white-space:nowrap}
.bonus-pop .close{position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:0; cursor:pointer; font-size:1rem; line-height:1; z-index:3}
.bonus-reopen{position:fixed; right:20px; bottom:20px; z-index:79; display:none;
  background:var(--grad-gold); color:#1a1205; border:0; border-radius:var(--pill);
  padding:.7em 1.2em; font-weight:800; cursor:pointer; box-shadow:var(--shadow)}

/* ---------- cookie consent ---------- */
.cookie-bar{position:fixed; left:20px; bottom:20px; z-index:95; max-width:380px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; box-shadow:var(--shadow); display:none}
.cookie-bar.show{display:block}
.cookie-bar p{margin:0 0 12px; font-size:.86rem; color:var(--muted)}
.cookie-bar .cookie-actions{display:flex; gap:10px}
@media(max-width:560px){.cookie-bar{left:12px; right:12px; bottom:12px; max-width:none}}

/* ---------- footer ---------- */
.site-footer{background:#081316; border-top:1px solid var(--line-2); padding:54px 0 30px; margin-top:30px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px}
.foot-grid h4{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--peri)}
.foot-grid a{display:block; color:var(--muted); padding:.28em 0; font-size:.9rem}
.foot-grid a:hover{color:#fff}
.foot-brand img{width:248px; height:auto; margin-bottom:14px}
.foot-brand p{color:var(--muted-2); font-size:.85rem; max-width:320px}
.pay-strip{display:flex; align-items:center; gap:16px; margin-top:18px}
.pay-strip img{height:34px; width:auto}
.foot-bottom{border-top:1px solid var(--line-2); margin-top:34px; padding-top:22px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; color:var(--muted-2); font-size:.8rem}
.age{display:inline-flex; align-items:center; gap:8px}
.age b{background:var(--red); color:#fff; border-radius:8px; padding:.1em .5em; font-weight:800}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .g4,.stat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .nav-links{position:fixed; inset:70px 0 auto 0; flex-direction:column; background:#0b1a1e;
    padding:14px 20px 22px; border-bottom:1px solid var(--line-2); display:none; gap:2px}
  .nav-links.open{display:flex}
  .nav-links a{padding:.85em .6em; font-size:1rem}
  .burger{display:flex}
  .banner-row,.slots-grid,.g3{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .bnr-overlay{max-width:60%}
  .author-box{flex-direction:column; text-align:center}
}
@media(max-width:560px){
  .g4,.stat-grid{grid-template-columns:1fr 1fr}
  .hero-inner{padding:56px 0 50px}
  .bonus-pop{width:min(82vw,260px); right:12px; bottom:12px}
  .bar-row{grid-template-columns:96px 1fr 42px}
  .nav-cta .btn.signup-text{display:none}
}