/* ===========================================================
   Lucky Days Casino — stylesheet
   Palette: deep forest ink, gold, clover green, cream
   =========================================================== */
:root{
  --ink:#0b1612;
  --ink-2:#0f1e18;
  --panel:#12261e;
  --panel-2:#173027;
  --line:#21402f;
  --gold:#d6b256;
  --gold-2:#f0d488;
  --gold-dk:#a88430;
  --clover:#2ea060;
  --clover-2:#3fce7e;
  --cream:#f0ecde;
  --muted:#9bb0a3;
  --up:#46c97f;
  --down:#e2685f;
  --flat:#cdb36a;
  --radius:14px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --display:"Fraunces",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--cream);
  background:
    radial-gradient(900px 500px at 80% -5%, rgba(214,178,86,.10), transparent 60%),
    radial-gradient(700px 400px at -5% 10%, rgba(46,160,96,.10), transparent 55%),
    var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(1140px,92vw);margin-inline:auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-2);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--body);font-weight:600;font-size:.95rem;cursor:pointer;
  border:0;border-radius:999px;padding:.7em 1.3em;color:var(--ink);
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--clover-2);outline-offset:2px}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 6px 16px rgba(214,178,86,.3)}
.btn-gold:hover{background:linear-gradient(180deg,#f7e09a,var(--gold-2))}
.btn-outline{background:transparent;color:var(--cream);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-2)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--cream)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-link{background:none;color:var(--gold-2);padding:.4em .2em;text-decoration:underline}
.btn-sm{font-size:.85rem;padding:.55em 1.05em}
.btn-lg{font-size:1.05rem;padding:.85em 1.7em}

/* ---------- Mobile tab bar ---------- */
.tabbar{display:none}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(11,22,18,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.head-inner{display:flex;align-items:center;gap:1.4rem;padding:.7rem 0}
.brand img{height:46px;width:auto}
.main-nav{display:flex;gap:1.3rem;margin-left:auto;font-weight:500}
.main-nav a{color:var(--cream);font-size:.95rem}
.main-nav a:hover{color:var(--gold-2);text-decoration:none}
.head-cta{display:flex;gap:.6rem}

/* ---------- Hero ---------- */
.hero{padding:2.6rem 0 1.2rem;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:2rem;align-items:center}
.eyebrow{
  display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clover-2);border:1px solid var(--line);padding:.3em .8em;border-radius:999px;margin-bottom:1rem;
}
.hero-kicker{font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.08;margin:.1em 0}
.hero-kicker b{color:var(--gold-2)}
.hero-sub{color:var(--muted);max-width:34ch;margin:.6rem 0 1.4rem}
.hero-btns{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-art img{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}

/* ---------- Rails / chips ---------- */
.rails{padding:2.2rem 0 1rem}
.chips{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.4rem}
.chip{
  background:var(--panel);color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:.5em 1em;font-size:.85rem;cursor:pointer;font-weight:600;
}
.chip.is-on,.chip:hover{color:var(--ink);background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:transparent}
.rail-title{
  font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--cream);
  margin:1.6rem 0 .9rem;display:flex;align-items:center;gap:.6rem;
}
.rail-title::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--clover);box-shadow:0 0 0 4px rgba(46,160,96,.18)}
.grid-games{display:grid;grid-template-columns:repeat(8,1fr);gap:.7rem}
.tile{position:relative;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);cursor:pointer}
.tile img{aspect-ratio:1/1;object-fit:cover;transition:transform .25s ease}
.tile:hover img{transform:scale(1.06)}
.tile-play{
  position:absolute;inset:auto 0 0 0;padding:.45em;font-size:.8rem;font-weight:700;color:var(--ink);
  background:linear-gradient(180deg,transparent,rgba(214,178,86,.95));opacity:0;transition:opacity .2s;
}
.tile:hover .tile-play{opacity:1}

/* ---------- Promos ---------- */
.promos{padding:1.6rem 0}
.promo-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.promo-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.promo-card img{width:100%;aspect-ratio:360/220;object-fit:cover}
.promo-body{padding:1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.promo-tag{font-weight:700;color:var(--cream)}
.promo-num{font-family:var(--display);font-weight:900;font-size:2.2rem;color:var(--gold-2);line-height:1}
.promo-body p{color:var(--muted);font-size:.82rem;margin:.2rem 0 .6rem;flex:1}
.promo-body .btn{align-self:flex-start}
.winners{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem}
.winner{padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);cursor:pointer}
.winner img{aspect-ratio:1/1;object-fit:cover}

/* ---------- Providers ---------- */
.providers{padding:1.6rem 0 2.4rem}
.prov-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
.prov{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.prov img{max-height:48px;width:auto;opacity:.85}
.prov:hover img{opacity:1}

/* ---------- Article ---------- */
.article{padding:1rem 0 3rem;max-width:880px}
.article h1{
  font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.12;
  margin:.4em 0 .5em;color:var(--cream);letter-spacing:-.01em;
}
.article h2{
  font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.6vw,1.85rem);
  margin:2.2em 0 .5em;padding-top:.4em;border-top:1px solid var(--line);color:var(--cream);
}
.article h3{font-family:var(--display);font-weight:700;font-size:1.18rem;margin:1.6em 0 .4em;color:var(--gold-2)}
.article p{margin:.7em 0;color:#d8e0d8}
.rating-line{background:rgba(46,160,96,.1);border-left:3px solid var(--clover);padding:.8em 1em;border-radius:0 10px 10px 0}

/* TOC */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.4rem;margin:0 0 1.6rem}
.toc-h{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:0 0 .6rem}
.toc ol{margin:0;padding-left:1.3rem;columns:2;column-gap:2rem}
.toc li{margin:.25em 0;color:var(--muted);font-size:.9rem}
.toc a{color:var(--cream)}

/* Figures */
.figure{margin:1.4rem 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.figure img{width:100%}
.figure.wide{max-width:100%}
.figure figcaption{padding:.6em 1em;font-size:.82rem;color:var(--muted);background:var(--panel-2)}

/* ---------- Tables ---------- */
table{
  width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
caption{
  caption-side:top;text-align:left;font-family:var(--display);font-weight:700;font-size:1.02rem;
  color:var(--gold-2);padding:.2em 0 .6em;
}
th,td{padding:.7em .9em;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--panel-2);color:var(--cream);font-weight:700;font-size:.86rem;letter-spacing:.02em}
tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
tbody tr:hover{background:rgba(214,178,86,.06)}
tfoot td{background:var(--panel-2);font-weight:600}
td[scope],.t-facts th[scope="row"]{color:var(--muted);font-weight:600;white-space:nowrap}
.t-facts th[scope="row"]{width:42%}
tr:last-child td{border-bottom:0}

/* result colours */
.up{color:var(--up);font-weight:700}
.down{color:var(--down);font-weight:700}
.flat{color:var(--flat);font-weight:700}
.ok{color:var(--clover-2);font-weight:700}

/* two-up tables */
.pc-split{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.t-pros caption{color:var(--up)}
.t-cons caption{color:var(--down)}

/* Lists */
ul.check,ul.cross{list-style:none;padding-left:0;margin:.6em 0}
ul.check li,ul.cross li{padding-left:1.8em;position:relative;margin:.4em 0;color:#d8e0d8}
ul.check li::before{content:"✓";position:absolute;left:0;color:var(--clover-2);font-weight:800}
ul.cross li::before{content:"✕";position:absolute;left:0;color:var(--down);font-weight:800}
ol.steps{counter-reset:s;list-style:none;padding-left:0;margin:1em 0}
ol.steps li{counter-increment:s;position:relative;padding:.5em 0 .5em 2.6em;border-bottom:1px dashed var(--line)}
ol.steps li:last-child{border-bottom:0}
ol.steps li::before{
  content:counter(s);position:absolute;left:0;top:.45em;width:1.8em;height:1.8em;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--ink);font-weight:800;
  display:grid;place-items:center;font-size:.85rem;
}
ol.steps.tight li{padding-top:.3em;padding-bottom:.3em}

/* who plays */
.who{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:1.4rem 0}
.who-h{font-family:var(--display);font-weight:700;font-size:1.1rem;margin:.2em 0 .3em}

/* responsible gaming box */
.rg-box{background:rgba(46,160,96,.08);border:1px solid var(--clover);border-radius:var(--radius);padding:1.4rem 1.6rem;margin:2rem 0}
.rg-h{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--clover-2);margin:0 0 .4em}
.rg-box p{color:#d8e0d8}

/* ---------- Final CTA ---------- */
.final-cta{
  background:
    radial-gradient(600px 300px at 50% -20%, rgba(214,178,86,.18), transparent 60%),
    var(--ink-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:3rem 0;text-align:center;
}
.final-kicker{font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0}
.final-sub{color:var(--muted);margin:.4em 0 1.4em}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink-2);border-top:1px solid var(--line);padding:2.4rem 0 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:1.6rem}
.foot-brand img{height:44px;width:auto}
.foot-tag{color:var(--muted);font-style:italic;margin-top:.6rem}
.foot-h{font-family:var(--display);font-weight:700;color:var(--cream);margin:0 0 .7rem}
.foot-col{display:flex;flex-direction:column;gap:.1rem}
.foot-link{background:none;border:0;color:var(--muted);text-align:left;padding:.32em 0;cursor:pointer;font-size:.9rem;font-family:var(--body)}
.foot-link:hover{color:var(--gold-2)}
.badges{display:flex;gap:.5rem;margin-bottom:.7rem}
.badge{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;font-weight:800;font-size:.75rem;color:var(--gold-2);background:var(--panel);
}
.foot-help{color:var(--muted);font-size:.82rem}
.foot-bottom{border-top:1px solid var(--line);margin-top:2rem;padding:1rem 0}
.foot-bottom-inner{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.82rem;flex-wrap:wrap}
.foot-19{color:var(--gold-dk)}

/* ---------- Cookie bar ---------- */
.cookie{
  position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:60;
  width:min(960px,94vw);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:.9rem 1.2rem;display:flex;align-items:center;gap:1rem;justify-content:space-between;flex-wrap:wrap;
  font-size:.88rem;color:var(--cream);
}
.cookie-btns{display:flex;gap:.5rem}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:980px){
  .grid-games{grid-template-columns:repeat(4,1fr)}
  .promo-cards{grid-template-columns:repeat(2,1fr)}
  .winners{grid-template-columns:repeat(3,1fr)}
  .prov-grid{grid-template-columns:repeat(4,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .hero-art{order:-1}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .main-nav,.head-cta{display:none}
  .head-inner{justify-content:center}
  .tabbar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;
    background:rgba(11,22,18,.97);border-top:1px solid var(--line);
  }
  .tab{flex:1;background:none;border:0;color:var(--muted);font-family:var(--body);font-size:.72rem;
    display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.55rem 0;cursor:pointer}
  .tab-ic{font-size:1.15rem}
  body{padding-bottom:4rem}
  .grid-games{grid-template-columns:repeat(3,1fr)}
  .promo-cards{grid-template-columns:1fr}
  .winners{grid-template-columns:repeat(3,1fr)}
  .prov-grid{grid-template-columns:repeat(3,1fr)}
  .pc-split,.who{grid-template-columns:1fr}
  .toc ol{columns:1}
  .foot-grid{grid-template-columns:1fr}
  /* let wide tables scroll instead of breaking layout */
  .t-diary,.t-banking,.t-games,.t-wager,.t-bonus,.t-score{display:block;overflow-x:auto;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;transition:none!important}
}