/* casino.css — casino-silo component layer on top of the comedy site's inline theme.
   Reuses the host theme: --primary #002d40 (navy), --accent #006ed2 (blue), Arial.
   Adds casino affordances: emerald CTA, amber bonus highlight. Loaded only on /article/ pages.
   <!-- CASINO-CSS-V1 --> */
:root{
  --c-navy:#002d40; --c-blue:#006ed2; --c-emerald:#1a8f5a; --c-emerald-2:#137a4c;
  --c-amber:#f5a623; --c-amber-2:#e08c00; --c-ink:#1d2733; --c-muted:#5b6b7a;
  --c-line:#e2e8ee; --c-bg:#f6f8fa; --c-card:#ffffff; --c-radius:10px;
}
.casino-wrap{max-width:1100px;margin:0 auto;padding:0 20px;color:var(--c-ink);font-size:16px;line-height:1.7;}
.casino-wrap h1,.casino-wrap h2,.casino-wrap h3,.c-hero h1{font-family:'Poppins',Arial,sans-serif;letter-spacing:-.2px;}
.casino-wrap h1,.casino-wrap h2,.casino-wrap h3{color:var(--c-navy);line-height:1.25;}
.casino-wrap h2{font-size:1.7rem;margin:2.2rem 0 .9rem;border-bottom:2px solid var(--c-line);padding-bottom:.4rem;}
.casino-wrap h3{font-size:1.25rem;margin:1.6rem 0 .6rem;}
.casino-wrap a{color:var(--c-blue);}
.casino-wrap p{margin:.7rem 0;}
.muted{color:var(--c-muted);font-size:.92rem;}

/* ---------- Hero (hero-design) ---------- */
.c-hero{background:linear-gradient(135deg,var(--c-navy) 0%,#013a52 100%);color:#fff;padding:48px 0 36px;}
.c-hero .casino-wrap{color:#fff;}
.c-hero h1{color:#fff;font-size:2.3rem;margin:0 0 .5rem;}
.c-hero .sub{font-size:1.05rem;max-width:680px;margin:0 0 1.1rem;color:#d7e6f2;}
.c-hero .hero-cta{display:inline-block;background:linear-gradient(180deg,var(--c-amber) 0%,var(--c-amber-2) 100%);
  color:#1d1300;font-weight:700;text-decoration:none;padding:13px 26px;border-radius:8px;font-size:1.05rem;
  box-shadow:0 4px 10px rgba(0,0,0,.25);}
.c-hero .hero-cta:hover{filter:brightness(1.06);}
.hero-author{display:flex;align-items:center;gap:12px;margin:16px 0 4px;}
.hero-author img{width:52px;height:52px;border-radius:50%;border:2px solid rgba(245,166,35,.7);object-fit:cover;}
.hero-author .ha-text{display:flex;flex-direction:column;line-height:1.3;}
.hero-author .ha-name{color:#fff;font-weight:700;text-decoration:none;font-size:.98rem;}
.hero-author .ha-name:hover{color:#f5a623;}
.hero-author .ha-meta{color:#bcd3e4;font-size:.8rem;}
.trust-strip{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;font-size:.86rem;color:#bcd3e4;}
.trust-strip span{display:flex;align-items:center;gap:6px;}
.disclosure{background:#eef3f7;border:1px solid var(--c-line);border-radius:8px;padding:10px 14px;
  font-size:.82rem;color:var(--c-muted);margin:18px 0;}
/* Featured Ignition #1-pick card in the hero */
.hero-pick{background:rgba(255,255,255,.06);border:1px solid rgba(245,166,35,.55);border-radius:12px;
  padding:14px 16px;margin:18px 0 2px;max-width:640px;}
.hp-badge{display:inline-block;background:linear-gradient(180deg,#f5a623,#e08c00);color:#231500;font-weight:800;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.7px;padding:4px 11px;border-radius:20px;margin-bottom:11px;
  font-family:'Poppins',Arial,sans-serif;}
.hp-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.hp-logo{background:#fff;border-radius:8px;padding:7px 11px;display:flex;align-items:center;flex:0 0 auto;}
.hp-logo img{max-height:34px;width:auto;display:block;}
.hp-logo .initials-avatar{width:64px;height:34px;font-size:.85rem;}
.hp-main{flex:1;min-width:170px;}
.hp-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.hp-head strong{color:#fff;font-size:1.08rem;font-family:'Poppins',Arial,sans-serif;}
.hp-bonus{color:#ffd98a;font-weight:700;font-size:.9rem;}
.hp-blurb{color:#d7e6f2;font-size:.9rem;line-height:1.5;margin:5px 0 0;}
.hero-pick .c-cta{flex:0 0 auto;animation:none;}
/* desktop: hero copy left, Ignition card right (only on heros that have the card) */
@media(min-width:769px){
  .c-hero .casino-wrap:has(.hero-pick){display:flex;align-items:center;gap:32px;}
  .c-hero .casino-wrap:has(.hero-pick) .hero-copy{flex:1 1 0;min-width:0;}
  .c-hero .casino-wrap:has(.hero-pick) .hero-pick{flex:0 0 360px;max-width:360px;margin:0;}
}
@media(max-width:768px){.hp-main{min-width:100%;order:2;}.hero-pick .c-cta{width:100%;text-align:center;order:3;}.hp-logo{order:1;}}

/* ---------- Toplist (toplist-horizontal-table) — one <table>, rows stacked rank 1 first ---------- */
.toplist{width:100%;border-collapse:separate;border-spacing:0 12px;margin:1rem 0 1.5rem;}
.toplist tr{background:var(--c-card);}
.toplist td{border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);padding:16px 14px;vertical-align:middle;}
.toplist td:first-child{border-left:1px solid var(--c-line);border-radius:var(--c-radius) 0 0 var(--c-radius);}
.toplist td:last-child{border-right:1px solid var(--c-line);border-radius:0 var(--c-radius) var(--c-radius) 0;}
.tl-rank{font-weight:800;color:var(--c-blue);font-size:1.2rem;width:42px;text-align:center;}
.tl-logo{width:120px;}
.tl-logo img{max-height:54px;width:auto;display:block;}
.tl-logo .initials-avatar{display:inline-flex;align-items:center;justify-content:center;width:88px;height:50px;
  background:var(--c-navy);color:#fff;font-weight:700;border-radius:6px;font-size:1rem;letter-spacing:.5px;}
.tl-brand{min-width:150px;}
.tl-brand .name{display:block;font-weight:700;font-size:1.06rem;color:var(--c-navy);}
.tl-brand .desc{display:block;margin-top:3px;font-size:.85rem;color:var(--c-muted);line-height:1.3;}
.tl-bonus{text-align:center;min-width:172px;}
.tl-bonus .b-amt{display:block;background:linear-gradient(180deg,#fff6e5 0%,#ffe9c2 100%);color:#7a4f00;
  font-weight:800;border:1px solid #f1d39a;border-radius:8px;padding:8px 10px;font-size:.9rem;line-height:1.25;white-space:normal;}
.tl-bonus .b-label{font-size:.74rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.4px;margin-top:3px;display:block;}
.tl-cta{text-align:center;width:160px;}
/* CTA — forced white text (beats .casino-wrap a blue), green gradient + glow + attention pulse */
.c-cta, a.c-cta, .casino-wrap a.c-cta{display:inline-block;box-sizing:border-box;
  background:linear-gradient(180deg,#22b974 0%,#15935a 100%);
  color:#ffffff !important;font-weight:800;text-decoration:none;padding:12px 22px;border-radius:9px;
  font-size:.97rem;letter-spacing:.2px;border:1px solid #0f7a48;text-shadow:0 1px 1px rgba(0,0,0,.25);
  box-shadow:0 6px 16px rgba(16,122,72,.45);white-space:nowrap;
  transition:transform .12s ease,box-shadow .2s ease,filter .2s ease;animation:ctaPulse 2.4s infinite;}
.c-cta:hover, a.c-cta:hover{transform:translateY(-2px);filter:brightness(1.08);animation:none;
  box-shadow:0 0 20px rgba(34,185,116,.85),0 10px 24px rgba(16,122,72,.5);color:#fff !important;}
.c-cta.sm{padding:9px 16px;font-size:.9rem;}
@keyframes ctaPulse{
  0%{box-shadow:0 0 0 0 rgba(34,185,116,.55),0 6px 16px rgba(16,122,72,.4);}
  70%{box-shadow:0 0 0 9px rgba(34,185,116,0),0 6px 16px rgba(16,122,72,.4);}
  100%{box-shadow:0 0 0 0 rgba(34,185,116,0),0 6px 16px rgba(16,122,72,.4);}}
@media(prefers-reduced-motion:reduce){.c-cta,a.c-cta{animation:none;}}
.tl-rating{font-size:.8rem;color:var(--c-muted);margin-top:4px;}
.tl-rating b{color:var(--c-amber-2);}

/* ---------- Mobile reflow (mobile-toplist-card) — same <table>, ≤768px ---------- */
@media(max-width:768px){
  .casino-wrap{padding:0 14px;}
  .c-hero h1{font-size:1.7rem;}
  .toplist,.toplist tbody,.toplist tr,.toplist td{display:block;width:auto;}
  .toplist tr{border:1px solid var(--c-line);border-radius:12px;margin-bottom:16px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
  .toplist td{border:0!important;padding:6px 0;text-align:center;}
  .tl-rank{position:absolute;background:var(--c-blue);color:#fff;border-radius:50%;width:30px;height:30px;
    line-height:30px;font-size:.95rem;margin:-4px 0 0 -4px;}
  .tl-logo{width:auto;}.tl-logo img{margin:0 auto;max-height:60px;}
  .tl-logo .initials-avatar{width:120px;height:60px;margin:0 auto;}
  .tl-bonus .b-amt{font-size:1.15rem;padding:12px;}
  .c-cta{display:block;width:100%;padding:14px;font-size:1.05rem;}
}

/* ---------- Review blocks / cards ---------- */
.review-block{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-radius);padding:20px;margin:18px 0;}
.review-block .rb-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.review-block .rb-head .rank{font-weight:800;color:var(--c-blue);font-size:1.3rem;}
.review-block .rb-head img{max-height:46px;}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0;}
.proscons ul{margin:.3rem 0;padding-left:1.2rem;}
.proscons .pros li{color:#176b43;}.proscons .cons li{color:#9a3b2f;}
.proscons h4{margin:.2rem 0;}
@media(max-width:600px){.proscons{grid-template-columns:1fr;}}

/* ---------- Payment-method / provider strips (image-parity visual badges) ---------- */
.pay-strip{background:var(--c-bg);border:1px solid var(--c-line);border-radius:10px;padding:14px 16px;margin:16px 0;}
.pay-strip h4{margin:0 0 12px;color:var(--c-navy);font-family:'Poppins',Arial,sans-serif;font-size:1rem;}
.pay-row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-start;}
.pay-chip{display:flex;flex-direction:column;align-items:center;gap:5px;width:64px;text-align:center;}
.pc-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  color:#fff;font-weight:800;font-size:1.1rem;font-family:'Poppins',Arial,sans-serif;box-shadow:0 2px 6px rgba(0,0,0,.18);}
.pay-chip .pc-label{font-size:.74rem;color:var(--c-muted);line-height:1.2;}
.prov-row{gap:10px;}
.prov-chip{display:inline-block;background:#fff;border:1px solid var(--c-line);border-radius:20px;padding:7px 14px;
  font-size:.84rem;font-weight:600;color:var(--c-navy);}
/* ---------- Comparison / data tables ---------- */
.c-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem;}
.c-table th,.c-table td{border:1px solid var(--c-line);padding:10px 12px;text-align:left;}
.c-table th{background:var(--c-navy);color:#fff;font-weight:700;}
.c-table tr:nth-child(even) td{background:var(--c-bg);}
/* mobile: multi-column comparison tables reflow to label:value cards (.stack) */
@media(max-width:768px){
  .c-table.stack{display:block;border:0;font-size:.95rem;}
  .c-table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .c-table.stack tbody{display:block;}
  .c-table.stack tr{display:block;margin:0 0 14px;border:1px solid var(--c-line);border-radius:10px;
    overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);}
  .c-table.stack tr:nth-child(even) td{background:transparent;}
  .c-table.stack td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;text-align:right;
    border:0;border-bottom:1px solid var(--c-line);padding:10px 13px;}
  .c-table.stack tr td:first-child{background:var(--c-navy);color:#fff;font-weight:700;justify-content:center;text-align:center;}
  .c-table.stack tr td:first-child::before{display:none;}
  .c-table.stack tr td:first-child a{color:#fff;}
  .c-table.stack td:last-child{border-bottom:0;}
  .c-table.stack td::before{content:attr(data-label);font-weight:700;color:var(--c-navy);text-align:left;
    font-family:'Poppins',Arial,sans-serif;font-size:.8rem;white-space:nowrap;}
}

/* ---------- FAQ (CSS-only details) ---------- */
.faq details{border:1px solid var(--c-line);border-radius:8px;margin:10px 0;background:var(--c-card);}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:700;color:var(--c-navy);list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";float:right;color:var(--c-blue);font-weight:800;}
.faq details[open] summary::after{content:"–";}
.faq details p{padding:0 16px 14px;margin:0;}

/* ---------- Casino sub-nav (sits under the comedy header) ---------- */
.casino-subnav{background:#013a52;border-top:1px solid rgba(255,255,255,.1);}
.casino-subnav .inner{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;}
.casino-subnav a{color:#cfe3f2;text-decoration:none;font-size:.86rem;font-weight:600;padding:11px 0;white-space:nowrap;}
.casino-subnav a:hover,.casino-subnav a.active{color:#fff;}
.crumbs{font-size:.82rem;color:var(--c-muted);margin:14px 0;}
.crumbs a{color:var(--c-blue);}

/* ---------- Author byline / updated ---------- */
.byline{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--c-muted);margin:10px 0 4px;}
.byline img{width:36px;height:36px;border-radius:50%;}
.toc-note{display:none;} /* no-table-of-contents skill: we ship no TOC block */