/* ============================================================================
   Casino Sicuri - shared stylesheet, linked by EVERY page.
   ALL colour lives in the ONE :root block below. Never a hex anywhere else in
   this file or in any page, so partial theming is structurally impossible.
   ============================================================================ */

:root{
  /* --- palette ------------------------------------------------------------ */
  --ink:#181d29;          /* body copy */
  --ink-soft:#57607a;     /* meta, captions */
  --primary:#1f2b52;      /* masthead rule, footer, H1/H2 */
  --primary-d:#151d3a;    /* footer base */
  --accent:#0e7490;       /* deep cyan: rank badge, stars, rules, BONUS figure */
  --accent-soft:#e2f2f6;  /* cyan tint */

  /* ⛔ RESERVED. Rule 19: --cta appears on the .cta button class and NOWHERE
     else - not headings, ranks, bonuses, ribbons, links, borders or icons.
     Every other colour on this site is COOL (navy-indigo brand, cyan accent),
     so the one warm value on the page is the money action and it cannot
     dissolve into the palette. Orange sits ~198 degrees from the navy hue,
     which is the complement rule 19 asks for. Grep before you reuse it. */
  --cta:#e2701a;
  --cta-d:#bd5a11;

  --bg:#ffffff;
  --bg-soft:#f5f7fa;
  --bg-tint:#eef2f7;
  --line:#dde3ec;
  --line-strong:#b9c3d4;
  --ok:#0f6b4f;
  --no:#a2332a;

  /* On-dark text, tuned to --primary-d. Tokenised because a sibling domain that
     re-themes the :root would otherwise inherit greys mixed for THIS navy and
     the footer would drift out of the palette. */
  --on-dark:#ffffff;
  --on-dark-soft:#ccd5e6;
  --on-dark-dim:#a3aec6;
  --hairline-dark:rgba(255,255,255,.16);
  --shadow-tint:rgba(24,29,41,.07);
  --shadow-tint-2:rgba(24,29,41,.05);

  /* --- type -------------------------------------------------------------- */
  --f-head:"Archivo",'Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* --- shape ------------------------------------------------------------- */
  --r-sm:2px;
  --r-md:4px;
  --r-lg:6px;
  --r-pill:999px;
  --shadow:0 1px 2px rgba(24,29,41,.07),0 4px 14px rgba(24,29,41,.05);
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.68;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
}
img{max-width:100%;height:auto}

/* ⛔ .wrap owns the horizontal gutter. Never set `padding` (the shorthand) on
   .wrap or on anything that also needs the gutter - a shorthand clobbers the
   inline padding and the content squashes to the left edge on mobile. */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:20px;padding-right:20px}

a{color:var(--primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--primary-d)}

h1,h2,h3,h4{font-family:var(--f-head);color:var(--primary);line-height:1.24;margin:0}
h1{font-size:2.05rem;font-weight:700;letter-spacing:-.01em}
h2{font-size:1.55rem;font-weight:700;margin-top:2.6rem;margin-bottom:.85rem;padding-top:.9rem;border-top:2px solid var(--accent)}
h3{font-size:1.2rem;font-weight:600;margin-top:1.9rem;margin-bottom:.6rem}
h4{font-size:1.03rem;font-weight:600;margin-top:1.3rem;margin-bottom:.4rem}
p{margin:0 0 1.05rem}
ul,ol{margin:0 0 1.15rem;padding-left:1.35rem}
li{margin-bottom:.45rem}
strong{font-weight:600}

/* ---------------------------------------------------------------- masthead */
/* Non-sticky by design (rule 7). Light bar because the wordmark is dark. */
.masthead{background:var(--bg);border-bottom:3px solid var(--primary);position:static}
.masthead__in{display:flex;align-items:center;gap:18px;min-height:76px;padding-top:10px;padding-bottom:10px}
.masthead__logo{display:block;flex:0 0 auto;line-height:0}
.masthead__logo img{height:52px;width:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav a{font-size:.94rem;text-decoration:none;color:var(--primary);font-weight:500}
.nav a:hover{text-decoration:underline}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);border-radius:var(--r-sm);width:44px;height:40px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:var(--primary);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--primary)}
.burger span::before{top:-6px}
.burger span::after{top:6px}

/* ------------------------------------------------------------------- hero */
/* Compact for BOTH views so the toplist clears the fold (rule 1). Nothing
   sits above the H1 - no eyebrow, no chip, no disclosure (rule 5). */
.hero{padding-top:22px;padding-bottom:6px}
.hero__lede{font-size:1.06rem;color:var(--ink);margin-top:.7rem;margin-bottom:.9rem;max-width:62ch}

.byline{display:flex;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.byline__img{width:46px;height:46px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.byline__who{font-size:.93rem;line-height:1.42}
.byline__name{font-weight:600}
.byline__role{color:var(--ink-soft)}
.byline__meta{list-style:none;margin:.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--ink-soft)}
.byline__meta li{margin:0}

/* The toplist's own H2 sits tight under the byline on every width, so the
   ranking clears the fold (rule 1). Later H2s keep the full breathing room. */
.h2--first{margin-top:1.4rem;padding-top:.6rem;margin-bottom:.6rem}

/* ---------------------------------------------------------------- toplist */
/* NEW card geometry for this batch: a vertical brass rank gutter on the left,
   then chip, name, bonus, CTA. Retired when the batch closes. */
.toplist{list-style:none;margin:0 0 1.4rem;padding:0}
.card{
  display:grid;
  grid-template-columns:46px 168px minmax(0,1fr) 200px 170px;
  align-items:center;
  gap:16px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--bg);
  box-shadow:var(--shadow);
  margin-bottom:12px;
  overflow:hidden;
}
.card--top{border-color:var(--accent)}
.rank{
  align-self:stretch;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
  font-family:var(--f-head);font-weight:700;font-size:1.2rem;
  border-right:1px solid var(--line);
}
.chip{
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  height:64px;margin-top:12px;margin-bottom:12px;padding-left:10px;padding-right:10px;
}
.chip img{max-height:44px;width:auto;object-fit:contain}
.card__mid{min-width:0;padding-top:12px;padding-bottom:12px}
.card__name{font-family:var(--f-head);font-weight:700;font-size:1.08rem;color:var(--primary);margin:0}
.stars{color:var(--accent);font-size:.95rem;letter-spacing:1px}
.score{font-size:.86rem;color:var(--ink-soft);margin-left:6px}
.tag{display:inline-block;font-size:.76rem;color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:2px 10px;margin-top:6px}
.bonus{padding-top:12px;padding-bottom:12px;min-width:0}
.bonus__lab{display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.bonus__amt{display:block;font-family:var(--f-head);font-weight:700;font-size:1.24rem;line-height:1.2;color:var(--accent)}
.bonus__amt--none{color:var(--ink-soft);font-size:.95rem;font-family:var(--f-body);font-weight:500}
.bonus__date{display:block;font-size:.72rem;color:var(--ink-soft);margin-top:2px}
.card__act{padding-top:12px;padding-bottom:12px;padding-right:16px}

/* The one reserved colour. Nothing else in this file may use --cta. */
.cta{
  display:block;width:100%;text-align:center;
  background:var(--cta);color:var(--on-dark);text-decoration:none;
  font-weight:700;font-size:.95rem;letter-spacing:.02em;
  border-radius:var(--r-md);padding-top:13px;padding-bottom:13px;
  border:0;cursor:pointer;
}
.cta:hover{background:var(--cta-d);color:var(--on-dark)}
.cta--sm{font-size:.88rem;padding-top:10px;padding-bottom:10px}
.card__sub{grid-column:1/-1;border-top:1px solid var(--line);background:var(--bg-soft);font-size:.85rem;color:var(--ink-soft);padding:9px 16px}

/* ---------------------------------------------------------------- reviews */
.review{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:20px;background:var(--bg)}
.review__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.review__chip{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);width:130px;height:56px;padding-left:8px;padding-right:8px}
.review__chip img{max-height:38px;width:auto;object-fit:contain}
.review h3{margin-top:0}
.scores{list-style:none;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.scores li{margin:0;background:var(--bg-soft);border-radius:var(--r-md);padding:9px 10px;text-align:center}
.scores b{display:block;font-family:var(--f-head);font-size:1.05rem;color:var(--primary)}
.scores span{font-size:.74rem;color:var(--ink-soft);line-height:1.3;display:block}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:1rem}
.proscons h4{margin-top:0}
.proscons ul{list-style:none;margin:0;padding:0;font-size:.92rem}
.proscons li{padding-left:22px;position:relative}
.pros li::before{content:"+";position:absolute;left:2px;top:0;color:var(--ok);font-weight:700}
/* U+2212 MINUS SIGN, deliberately NOT U+2013 EN DASH. VOICE-SPEC bans en/em
   dashes on the rendered page, and a CSS escape like "\2013" is invisible to a
   grep for the literal character, so the ban has to be honoured here too. */
.cons li::before{content:"\2212";position:absolute;left:2px;top:0;color:var(--no);font-weight:700}
.review__act{max-width:280px}

/* ------------------------------------------------------------- runners-up */
.runners{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.runners li{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;background:var(--bg)}
.runners__chip{display:flex;align-items:center;height:44px;margin-bottom:10px}
.runners__chip img{max-height:34px;width:auto;object-fit:contain}
.runners h3{font-size:1.02rem;margin-top:0;margin-bottom:.4rem}
.runners p{font-size:.9rem;margin-bottom:.8rem}

/* ---------------------------------------------------------------- tables */
/* Every wide block scrolls inside its own container so the page body itself
   never scrolls horizontally, down to 320px. */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.3rem;border:1px solid var(--line);border-radius:var(--r-lg)}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:.92rem}
thead th{background:var(--primary);color:var(--on-dark);font-family:var(--f-head);font-weight:600;text-align:left;padding:11px 13px;white-space:nowrap}
tbody td{border-top:1px solid var(--line);padding:11px 13px;vertical-align:top}
tbody tr:nth-child(even){background:var(--bg-soft)}
td .cell-date{display:block;font-size:.74rem;color:var(--ink-soft)}
td .cell-none{color:var(--ink-soft)}
.tw--narrow table{min-width:520px}

/* ------------------------------------------------------------------ misc */
.note{background:var(--bg-tint);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:1.3rem;font-size:.94rem}
.note p:last-child{margin-bottom:0}
.steps{counter-reset:s;list-style:none;padding-left:0}
.steps li{counter-increment:s;padding-left:44px;position:relative;margin-bottom:.85rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:var(--f-head);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.faq{border-top:1px solid var(--line)}
.faq__q{border-bottom:1px solid var(--line);padding-top:16px;padding-bottom:16px}
.faq__q h3{margin-top:0;margin-bottom:.45rem;font-size:1.06rem}
.faq__q p:last-child{margin-bottom:0}
.tree{list-style:none;padding-left:0;margin-bottom:1.2rem}
.tree>li{border-left:3px solid var(--accent);padding-left:16px;margin-bottom:1.1rem}
.tree b{font-family:var(--f-head);color:var(--primary);display:block;margin-bottom:.2rem}
.authorbox{display:flex;gap:18px;align-items:flex-start;background:var(--bg-soft);border-radius:var(--r-lg);padding:20px;margin-top:2rem}
.authorbox img{width:96px;height:96px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.authorbox h2{margin-top:0;border-top:0;padding-top:0;font-size:1.2rem}
.authorbox p:last-child{margin-bottom:0}
.prose{padding-bottom:2.4rem}
/* max-width in px alone overflows a 320px viewport once .wrap's gutter is
   subtracted, and body{overflow-x:hidden} hides it. Cap on BOTH axes. */
.portrait{border-radius:var(--r-lg);width:320px;max-width:100%;height:auto;display:block;margin-bottom:.4rem}
.lastmod{font-size:.84rem;color:var(--ink-soft);margin-top:1.6rem}

/* ------------------------------------------------------------------ footer */
.footer{background:var(--primary-d);color:var(--on-dark-soft);margin-top:3rem;padding-top:34px;padding-bottom:30px;font-size:.9rem}
.footer a{color:var(--on-dark);text-decoration:underline}
.footer h2{color:var(--on-dark);font-size:1rem;border-top:0;padding-top:0;margin-top:0;margin-bottom:.6rem}
.footer__cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:28px}
.footer ul{list-style:none;padding-left:0;margin:0}
.footer li{margin-bottom:.4rem}
.rg{border-top:1px solid var(--hairline-dark);margin-top:26px;padding-top:20px}
.rg__age{display:inline-block;border:2px solid var(--accent);color:var(--accent);border-radius:50%;width:42px;height:42px;line-height:38px;text-align:center;font-family:var(--f-head);font-weight:700;font-size:.95rem;float:left;margin-right:14px}
.rg__num{font-family:var(--f-head);font-size:1.28rem;font-weight:700;color:var(--on-dark);display:block}
.rg p{margin-bottom:.7rem}
.disclosure{border-top:1px solid var(--hairline-dark);margin-top:22px;padding-top:18px;font-size:.82rem;color:var(--on-dark-dim)}

/* ============================ responsive ============================== */
@media (max-width:900px){
  .footer__cols{grid-template-columns:1fr 1fr}
  .card{grid-template-columns:44px 140px minmax(0,1fr) 170px;}
  .card__act{grid-column:2/-1;padding-right:16px;padding-top:0}
  .scores{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:760px){
  /* Same content, reflowed. No display:none on anything real (rule 2). */
  .nav{
    display:none;position:static;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line);
  }
  .nav.open{display:flex}
  .nav a{padding-top:13px;padding-bottom:13px;border-bottom:1px solid var(--line)}
  .burger{display:flex}
  .masthead__in{flex-wrap:wrap;min-height:64px}
  .masthead__logo img{height:42px}

  h1{font-size:1.52rem}
  h2{font-size:1.24rem;margin-top:2rem}
  h3{font-size:1.08rem}
  body{font-size:16px}
  /* Rule 1: the toplist has to clear the fold on mobile too, and the only
     sanctioned way is compacting the hero for BOTH views. Nothing is hidden. */
  .hero{padding-top:10px;padding-bottom:0}
  .hero__lede{font-size:1rem;margin-top:.4rem;margin-bottom:.5rem}
  .byline{margin-bottom:8px;padding-top:7px;padding-bottom:7px;gap:9px}
  .byline__img{width:38px;height:38px}
  .byline__who{font-size:.86rem;line-height:1.35}
  .byline__meta{font-size:.72rem;gap:2px 10px;margin-top:.15rem}
  .h2--first{margin-top:1rem;padding-top:.55rem;margin-bottom:.5rem}

  /* Cards centre and the CTA goes full-width and LAST; the "ideale per" tag
     sits below the bonus amount. */
  .card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding-bottom:14px}
  .rank{align-self:stretch;border-right:0;border-bottom:1px solid var(--line);padding-top:5px;padding-bottom:5px}
  .chip{width:100%;max-width:210px;margin-top:14px;margin-bottom:10px}
  .card__mid,.bonus,.card__act{width:100%;padding-top:0;padding-bottom:0;padding-left:16px;padding-right:16px}
  .card__mid{margin-bottom:8px}
  .bonus{margin-bottom:12px}
  .bonus__amt{font-size:1.3rem}
  .card__sub{width:100%;text-align:center;margin-top:12px}

  .proscons{grid-template-columns:1fr;gap:6px}
  .scores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review{padding:16px}
  .review__act{max-width:none}
  .authorbox{flex-direction:column;align-items:center;text-align:center}
  .runners{grid-template-columns:1fr}
}

@media (max-width:400px){
  .wrap{padding-left:14px;padding-right:14px}
  h1{font-size:1.34rem}
  h2{font-size:1.14rem}
  body{font-size:15.5px}
  .scores{grid-template-columns:1fr 1fr}
  .footer__cols{grid-template-columns:1fr}
  .steps li{padding-left:38px}
  .steps li::before{width:26px;height:26px;font-size:.85rem}
}

@media (max-width:340px){
  .wrap{padding-left:11px;padding-right:11px}
  h1{font-size:1.22rem}
  .chip{max-width:170px}
  .rg__age{float:none;margin-bottom:10px}
}