/* ============================================================
   Shooting Star Casino Guide — single stylesheet
   Tokens → primitives → components → responsive
   ============================================================ */

:root{
  /* palette: white / blue / red — red is semantic only */
  --ink:#0B1B3A;      --ink-2:#16294F;   --ink-3:#233B69;
  --blue:#1B5AA6;     --blue-d:#12417A;  --blue-l:#E8F0FA;
  --red:#C0203C;      --red-l:#FDEEF1;
  --paper:#FFFFFF;    --paper-2:#F3F6FB; --paper-3:#E4EAF3;
  --text:#16233D;     --text-2:#4A5876;  --text-3:#6E7C97;
  --line:#D5DEEC;     --line-2:#BCC9DE;

  /* type */
  --f-disp:"Outfit",system-ui,sans-serif;
  --f-body:"Source Sans 3",system-ui,sans-serif;
  --f-mono:"Inconsolata",ui-monospace,monospace;

  /* scale */
  --t-xs:.78rem; --t-sm:.9rem; --t-base:1.05rem; --t-lg:1.2rem;
  --t-xl:1.45rem; --t-2xl:1.8rem; --t-3xl:2.3rem; --t-4xl:3rem;

  /* space */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;

  --measure:68ch;
  --r:6px; --r-lg:12px;
  --shadow:0 1px 2px rgba(11,27,58,.06),0 4px 14px rgba(11,27,58,.07);
  --shadow-up:0 6px 22px rgba(11,27,58,.14);
  --head-h:58px; --sticky-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 12px)}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--f-body);font-size:var(--t-base);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;width:100%;height:auto;display:block}
h1,h2,h3,h4,p,li,td,th,summary,figcaption{overflow-wrap:break-word;word-break:normal}
h1,h2,h3,h4{font-family:var(--f-disp);color:var(--ink);line-height:1.15;letter-spacing:-.015em;margin:0 0 var(--s3)}
h1{font-size:clamp(1.9rem,5.2vw,var(--t-4xl));font-weight:800}
h2{font-size:clamp(1.35rem,3.4vw,var(--t-2xl));font-weight:700;margin-top:var(--s7)}
h3{font-size:var(--t-lg);font-weight:700;margin-top:var(--s5)}
p,ul,ol{margin:0 0 var(--s4)}
a{color:var(--blue-d);text-underline-offset:.15em}
a:hover{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:2px}

.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--s5)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:var(--s3) var(--s4);font-weight:600}
.skip:focus{left:var(--s4);top:var(--s2)}

/* ---------- header ---------- */
.c-head{position:sticky;top:0;z-index:120;background:var(--ink);border-bottom:2px solid var(--blue)}
.c-head__in{display:flex;align-items:center;gap:var(--s4);min-height:var(--head-h);min-width:0}
.c-head__b{font-family:var(--f-disp);font-weight:800;font-size:1.02rem;color:#fff;text-decoration:none;letter-spacing:-.02em;flex:0 0 auto}
.c-head__b span{color:#8FB6E4}
.c-burger__cb{position:absolute;opacity:0;width:0;height:0}
.c-burger{display:none;margin-left:auto;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:0 10px}
.c-burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .2s}
.c-burger:focus-visible{outline:3px solid #8FB6E4;outline-offset:2px}
.c-nav{margin-left:auto;min-width:0}
.c-nav ul{display:flex;flex-wrap:wrap;gap:var(--s1);list-style:none;margin:0;padding:0}
.c-nav a{display:block;padding:var(--s2) var(--s3);color:#C9D9EE;text-decoration:none;font-size:var(--t-sm);font-weight:600;border-radius:var(--r);white-space:nowrap}
.c-nav a:hover{background:var(--ink-3);color:#fff}
.c-nav a[aria-current="page"]{color:#fff;background:var(--blue-d);box-shadow:inset 0 -2px 0 #8FB6E4}

/* ---------- breadcrumbs ---------- */
.c-crumbs{background:var(--paper-2);border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.c-crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;margin:0;padding:var(--s3) 0}
.c-crumbs li+li::before{content:"/";margin-right:var(--s2);color:var(--text-3)}
.c-crumbs [aria-current]{color:var(--text-2)}

/* ---------- hero + CTA ---------- */
.c-hero{background:
   radial-gradient(120% 90% at 12% 0%,rgba(27,90,166,.5),transparent 62%),
   linear-gradient(180deg,var(--ink),var(--ink-2));
  color:#EAF1FA;padding:var(--s7) 0 var(--s8);border-bottom:4px solid var(--red)}
.c-hero h1{color:#fff;max-width:20ch}
.c-hero__kicker{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;color:#8FB6E4;margin-bottom:var(--s4)}
.c-hero__stand{font-size:var(--t-lg);color:#C7D7EC;max-width:56ch;margin-bottom:var(--s6)}
.c-hero__foot{font-size:var(--t-xs);color:#9DB4D2;margin:var(--s5) 0 0}
.c-hero__foot a{color:#C7D7EC}

.c-cta{display:block;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:var(--s5);text-decoration:none;color:var(--text);box-shadow:var(--shadow);
  transition:transform .18s,box-shadow .18s,border-color .18s;max-width:640px}
.c-cta:hover{transform:translateY(-3px);box-shadow:var(--shadow-up);border-color:var(--blue)}
.c-cta:focus-visible{outline:3px solid #8FB6E4;outline-offset:3px}
.c-cta__eyebrow{display:block;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--blue-d);margin-bottom:var(--s2)}
.c-cta__eyebrow::after{content:" ↓"}
.c-cta__h{display:block;font-family:var(--f-disp);font-weight:800;font-size:var(--t-xl);color:var(--ink);line-height:1.2;margin-bottom:var(--s2)}
.c-cta__s{display:block;color:var(--text-2);font-size:var(--t-sm);margin-bottom:var(--s4)}
.c-cta__btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;
  font-family:var(--f-disp);font-weight:800;font-size:1.1rem;text-transform:uppercase;letter-spacing:.03em;
  color:#fff;background:linear-gradient(180deg,var(--blue),var(--blue-d));border-radius:var(--r);
  box-shadow:0 4px 0 #0C3055,0 8px 16px rgba(11,27,58,.24);transition:transform .1s,box-shadow .1s}
.c-cta:active .c-cta__btn{transform:translateY(3px);box-shadow:0 1px 0 #0C3055}
.c-cta__facts{display:flex;flex-wrap:wrap;gap:var(--s4);list-style:none;margin:var(--s4) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--line)}
.c-cta__facts li{min-width:0;flex:1 1 auto}
.c-cta__facts b{display:block;font-family:var(--f-mono);font-weight:600;font-size:var(--t-lg);color:var(--ink)}
.c-cta__facts span{display:block;font-size:var(--t-xs);color:var(--text-3)}

.c-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--s4);margin-top:var(--s5)}
.c-tile{display:flex;flex-direction:column;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(143,182,228,.35);
  border-radius:var(--r-lg);padding:var(--s4);text-decoration:none;color:#EAF1FA;transition:transform .18s,border-color .18s,background .18s}
.c-tile:hover{transform:translateY(-2px);border-color:#8FB6E4;background:rgba(255,255,255,.11);color:#fff}
.c-tile:focus-visible{outline:3px solid #8FB6E4;outline-offset:3px}
.c-tile__k{font-family:var(--f-disp);font-weight:700;font-size:var(--t-lg);color:#fff;margin-bottom:var(--s2)}
.c-tile__d{flex:1;font-size:var(--t-sm);color:#B6CAE4;margin-bottom:var(--s4)}
.c-tile__btn{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:var(--r);
  font-family:var(--f-disp);font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--ink);background:#C7D7EC}
.c-tile:hover .c-tile__btn{background:#fff}

/* ---------- article ---------- */
.c-art{max-width:var(--measure);margin:var(--s7) auto var(--s8);min-width:0}
.c-art p,.c-art li{color:var(--text)}
.ssc-lead{font-size:var(--t-lg);color:var(--ink-3);line-height:1.55}
.ssc-note{font-size:var(--t-sm);color:var(--text-3);font-style:italic;border-left:2px solid var(--line-2);padding-left:var(--s3)}

/* figure */
.c-figure{margin:var(--s5) 0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2)}
.c-figure img{width:100%;height:auto}
.c-figure figcaption{font-size:var(--t-xs);color:var(--text-3);padding:var(--s3) var(--s4);border-top:1px solid var(--line)}

/* tables */
.tbl-scroll{overflow-x:auto;margin:var(--s5) 0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.tbl-scroll:focus-visible{outline:3px solid var(--blue);outline-offset:0}
.ssc-table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:0}
.ssc-table caption{text-align:left;font-family:var(--f-disp);font-weight:700;color:var(--ink);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.ssc-table th{background:var(--paper-2);text-align:left;font-weight:600;color:var(--ink);padding:var(--s3);border-bottom:2px solid var(--line-2);vertical-align:bottom}
.ssc-table td{padding:var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
.ssc-table tbody tr:last-child td{border-bottom:none}
.ssc-table tbody tr:nth-child(even){background:#FAFCFE}
.ssc-table th[scope="row"]{background:transparent;border-bottom:1px solid var(--line);font-weight:600}
.ssc-table .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* note insets — three types */
.ssc-box{border:1px solid var(--line);border-left:4px solid var(--blue);background:var(--blue-l);
  padding:var(--s4) var(--s5);border-radius:0 var(--r) var(--r) 0;margin:var(--s5) 0}
.ssc-box--verify{border-left-color:var(--red);background:var(--red-l)}
.ssc-box--care{border-left-color:#1E7A57;background:#EEF8F3}
.ssc-box--legal{border-left-color:var(--text-3);background:var(--paper-2)}
.ssc-box h3,.ssc-box h4{margin-top:0}
.ssc-box p:last-child,.ssc-box ul:last-child{margin-bottom:0}

/* checklists / pros-cons */
.ssc-check{list-style:none;padding:0;margin:var(--s4) 0}
.ssc-check li{position:relative;padding-left:1.9rem;margin-bottom:var(--s3)}
.ssc-check li::before{content:"";position:absolute;left:0;top:.45em;width:.7rem;height:.7rem;border:2px solid var(--blue);border-radius:2px}
.c-pros li::before{border-color:#1E7A57;background:#1E7A57}
.c-cons li::before{border-color:var(--red);background:var(--red)}

/* numbered steps / timeline */
.ssc-steps{counter-reset:st;list-style:none;padding:0;margin:var(--s5) 0;border-left:2px solid var(--line);padding-left:var(--s5)}
.ssc-steps>li{counter-increment:st;position:relative;margin-bottom:var(--s5)}
.ssc-steps>li:last-child{margin-bottom:0}
.ssc-steps>li::before{content:counter(st);position:absolute;left:calc(-1 * var(--s5) - 17px);top:0;
  width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-weight:600;font-size:.9rem}
.ssc-steps>li strong{display:block;font-family:var(--f-disp);color:var(--ink);margin-bottom:var(--s1)}

/* cards */
.ssc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--s4);margin:var(--s5) 0}
.ssc-card{min-width:0;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:var(--r);padding:var(--s4);background:var(--paper)}
.ssc-card h3{margin:0 0 var(--s2);font-size:var(--t-base)}
.ssc-card p{font-size:var(--t-sm);color:var(--text-2);margin-bottom:var(--s2)}
.ssc-card a{font-weight:600;font-size:var(--t-sm)}
.ssc-card__num{display:block;font-family:var(--f-mono);font-weight:600;font-size:var(--t-2xl);color:var(--blue-d);line-height:1.1}

/* code / value chips */
.c-chip,.ssc-table code{display:inline-block;font-family:var(--f-mono);font-size:.92em;background:var(--paper-2);
  border:1px solid var(--line);border-radius:4px;padding:0 .4em}

/* rating scale */
.c-rate{margin:var(--s5) 0;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.c-rate__row{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);min-width:0}
.c-rate__lbl{flex:0 0 min(45%,180px);font-size:var(--t-sm);min-width:0}
.c-rate__bar{flex:1;height:8px;background:var(--paper-3);border-radius:99px;overflow:hidden;min-width:0}
.c-rate__fill{height:100%;background:var(--blue);border-radius:99px}
.c-rate__v{font-family:var(--f-mono);font-weight:600;flex:0 0 auto}

/* events timeline */
.ssc-events{list-style:none;padding:0;margin:var(--s5) 0}
.ssc-events li{display:flex;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line);min-width:0}
.ssc-events li:last-child{border-bottom:none}
.ssc-events time{flex:0 0 6rem;font-family:var(--f-mono);color:var(--blue-d);font-weight:600}

/* FAQ accordion */
.c-faq{margin:var(--s7) 0 0}
.c-faq__item{border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--s3);background:var(--paper)}
.c-faq__item summary{cursor:pointer;list-style:none;padding:var(--s4);font-family:var(--f-disp);font-weight:700;color:var(--ink);position:relative;padding-right:var(--s7)}
.c-faq__item summary::-webkit-details-marker{display:none}
.c-faq__item summary::after{content:"+";position:absolute;right:var(--s4);top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:var(--t-xl);color:var(--blue);line-height:1}
.c-faq__item[open] summary::after{content:"–"}
.c-faq__item[open] summary{border-bottom:1px solid var(--line)}
.c-faq__item p{margin:0;padding:var(--s4);color:var(--text-2)}

/* read next */
.c-next{margin:var(--s7) 0;padding:var(--s5);background:var(--paper-2);border-radius:var(--r-lg);border:1px solid var(--line)}
.c-next h2{margin-top:0;font-size:var(--t-lg)}
.c-next ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.c-next li{min-width:0}
.c-next a{display:block;font-family:var(--f-disp);font-weight:700;margin-bottom:var(--s1)}
.c-next span{display:block;font-size:var(--t-xs);color:var(--text-3);line-height:1.5}

/* author */
.c-au{display:flex;gap:var(--s4);align-items:flex-start;min-width:0}
.c-au__img{flex:0 0 auto;border-radius:50%;object-fit:cover;border:2px solid var(--line-2)}
.c-au--sm{padding:var(--s4);background:var(--paper-2);border-radius:var(--r);margin-bottom:var(--s6)}
.c-au--sm .c-au__img{width:48px;height:48px}
.c-au--lg{margin-top:var(--s7);padding-top:var(--s5);border-top:3px solid var(--ink)}
.c-au--lg .c-au__img{width:104px;height:104px}
.c-au__n{font-family:var(--f-disp);font-weight:800;color:var(--ink);margin:0 0 var(--s1);font-size:var(--t-base)}
.c-au--lg .c-au__n{font-size:var(--t-lg)}
.c-au__r{font-size:var(--t-sm);color:var(--blue-d);font-weight:600;margin:0 0 var(--s1)}
.c-au__d{font-size:var(--t-xs);color:var(--text-3);margin:0}
.c-au--lg p{font-size:var(--t-sm);color:var(--text-2)}
.c-au--lg p:last-child{margin-bottom:0}

/* footer */
.c-foot{background:var(--ink);color:#C7D7EC;padding:var(--s7) 0 var(--s6);margin-top:var(--s8)}
.c-foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:var(--s5);padding-bottom:var(--s6);border-bottom:1px solid var(--ink-3)}
.c-foot__cols div{min-width:0}
.c-foot h2{color:#fff;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.08em;margin:0 0 var(--s3)}
.c-foot ul{list-style:none;padding:0;margin:0}
.c-foot li{margin-bottom:var(--s2)}
.c-foot a{color:#C7D7EC;text-decoration:none;font-size:var(--t-sm)}
.c-foot a:hover{color:#fff;text-decoration:underline}
.c-foot__legal{padding-top:var(--s5);font-size:var(--t-sm);max-width:var(--measure)}
.c-foot__legal p{color:#A9BDD8}
.c-plate{background:var(--red);color:#fff;font-weight:600;padding:var(--s3) var(--s4);border-radius:var(--r);display:block}
.c-foot__c{font-family:var(--f-mono);font-size:var(--t-xs);color:#7E93B4;margin-bottom:0}

/* sticky mobile bar */
.c-sticky{display:none}
.c-sticky a{display:flex;align-items:center;gap:var(--s3);text-decoration:none;padding:var(--s2) var(--s4);min-height:var(--sticky-h)}
.c-sticky__t{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;color:#fff;line-height:1.25}
.c-sticky__t b{font-size:var(--t-sm);font-family:var(--f-disp)}
.c-sticky__t span{font-size:var(--t-xs);color:#C7D7EC}
.c-sticky__b{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--s4);
  border-radius:var(--r);background:linear-gradient(180deg,var(--blue),var(--blue-d));color:#fff;
  font-family:var(--f-disp);font-weight:700;font-size:.95rem;text-transform:uppercase;box-shadow:0 3px 0 #0C3055}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .c-nav ul{gap:0}
  .c-nav a{font-size:var(--t-xs);padding:var(--s2)}
}
@media (max-width:760px){
  .c-burger{display:flex}
  .c-nav{position:fixed;inset:var(--head-h) 0 auto 0;background:var(--ink-2);border-bottom:2px solid var(--blue);
    max-height:0;overflow:hidden;transition:max-height .25s ease;z-index:119}
  .c-burger__cb:checked ~ .c-nav{max-height:70vh;overflow-y:auto}
  .c-nav ul{flex-direction:column;padding:var(--s3)}
  .c-nav a{font-size:var(--t-base);padding:var(--s3) var(--s4);border-radius:var(--r)}
}
@media (max-width:700px){
  body{padding-bottom:calc(var(--sticky-h) + 8px)}
  .c-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:110;
    background:var(--ink);border-top:3px solid var(--red);box-shadow:0 -4px 18px rgba(11,27,58,.28)}
  .c-hero{padding:var(--s6) 0 var(--s7)}
  .c-cta__facts{gap:var(--s3)}
  .c-cta__facts li{flex:1 1 44%}
  /* key-value tables → stacked */
  .ssc-table.stackable tbody tr{display:block;border-bottom:1px solid var(--line-2);padding:var(--s2) 0}
  .ssc-table.stackable td,.ssc-table.stackable th{display:block;border:none;padding:var(--s1) var(--s3)}
  .ssc-table.stackable td::before{content:attr(data-l);display:block;font-size:var(--t-xs);
    text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
}
@media (max-width:400px){
  :root{--t-base:1rem;--t-lg:1.1rem;--sticky-h:58px;--s5:1.1rem}
  .wrap{padding-inline:var(--s4)}
  .c-cta{padding:var(--s4)}
  .c-cta__btn{font-size:1rem;min-height:56px}
  .c-sticky a{gap:var(--s2);padding:var(--s2)}
  .c-sticky__t b{font-size:var(--t-xs)}
  .c-sticky__t span{font-size:.68rem}
  .c-sticky__b{padding:0 var(--s3);font-size:.8rem}
  .ssc-steps{padding-left:var(--s4)}
  .ssc-steps>li::before{left:calc(-1 * var(--s4) - 16px);width:28px;height:28px;font-size:.8rem}
  .ssc-events li{flex-direction:column;gap:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .c-cta:hover,.c-tile:hover{transform:none}
}
@media print{
  .c-head,.c-sticky,.c-hero__foot,.c-next{display:none}
  .c-hero{background:none;color:#000;border:none}
  .c-hero h1,.c-hero__stand{color:#000}
}