/* ==========================================================================
   Dr.Spar's Casinos - shared stylesheet (money page + homepage + all utility pages)
   Palette derives from the villain emblem: navy-black figure, brass-gold loot.
   --cta is a RESERVED complementary colour used on action buttons ONLY.
   ========================================================================== */

:root{
  --ink:#14152A;          /* base navy-black (evolved from the legacy #191b30) */
  --ink-2:#1C1E38;        /* elevated dark surface */
  --ink-3:#262A47;        /* hairlines on dark */
  --gold:#C8A24A;         /* primary accent: the loot. chips, coins, ranks, rules */
  --gold-lo:#8E7231;
  --gold-hi:#E6CE8E;
  /* RESERVED CTA - action buttons ONLY. Nothing else, ever (rule 19).
     Changed 2026-07-28 from teal #00D3A7: our live sibling forgottenmanproductions.com
     already reserves teal #24e0c0, and a shared reserved-CTA hue across two same-niche
     properties is a template fingerprint. Violet is the true complement of --gold
     (opposite the yellow-ochre hue) and measures 5.4:1 with white text. */
  --cta:#6D4AF0;
  --cta-ink:#FFFFFF;      /* text on the CTA */
  --paper:#F7F5EF;        /* warm page bg */
  --paper-2:#EFEBE0;
  --card:#FFFFFF;
  --tx:#20222E;
  --tx-mid:#585C6E;
  --tx-lo:#7C8091;
  --line:#DED8C9;
  --ok:#2E7D5B;
  --no:#A03A3A;
  --r:14px;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--tx);
  font:400 17px/1.62 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:#1B4E8F;text-decoration:underline;text-underline-offset:2px}
a:hover{color:#12365f}

/* wrap: only ever sets width + inline padding, so it can never fight a
   component's own padding shorthand (see feedback_css_shorthand_clobbers_wrap) */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}

h1,h2,h3,h4{font-family:"Barlow Condensed",Inter,system-ui,sans-serif;font-weight:700;
  letter-spacing:.005em;line-height:1.1;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(29px,4.4vw,45px)}
h2{font-size:clamp(24px,3vw,33px);margin-top:2.1em}
h3{font-size:clamp(19px,2vw,23px);margin-top:1.5em}
p,li{margin:0 0 1em}
li{margin-bottom:.5em}

/* ==========================================================================
   THE MOTIF - casino chip. Notched edge built with a repeating conic gradient,
   reused at every scale: rank badges, section rules, list bullets, dividers.
   ========================================================================== */
.chip{
  --chip-size:46px; --chip-face:var(--ink); --chip-edge:var(--gold);
  position:relative;flex:0 0 auto;
  width:var(--chip-size);height:var(--chip-size);border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, var(--chip-edge) 0 11deg, transparent 11deg 30deg),
    radial-gradient(circle, var(--chip-face) 0 61%, var(--chip-edge) 61% 100%);
  display:grid;place-items:center;
}
.chip::after{ /* inner face so the notches read as an edge ring */
  content:"";position:absolute;inset:19%;border-radius:50%;
  background:var(--chip-face);border:1.5px solid color-mix(in srgb, var(--chip-edge) 55%, transparent);
}
.chip > span{position:relative;z-index:1;font-family:"Barlow Condensed",sans-serif;
  font-weight:700;font-size:calc(var(--chip-size)*.42);color:var(--gold-hi);line-height:1}

/* motif rule: a hairline interrupted by three chip notches */
.rule{border:0;height:12px;margin:2.4em 0;position:relative;background:none}
.rule::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}
.rule::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:8px;background:var(--paper);
  background-image:radial-gradient(circle at 12px 50%, var(--gold) 0 3px, transparent 3px),
                   radial-gradient(circle at 37px 50%, var(--gold) 0 3px, transparent 3px),
                   radial-gradient(circle at 62px 50%, var(--gold) 0 3px, transparent 3px);
  background-repeat:no-repeat;
}
/* loot-trail texture for dark bands: scattered low-opacity coin discs */
.lootbg{position:relative;isolation:isolate}
.lootbg::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:
    radial-gradient(circle at 8% 22%, rgba(200,162,74,.14) 0 9px, transparent 10px),
    radial-gradient(circle at 21% 74%, rgba(200,162,74,.10) 0 6px, transparent 7px),
    radial-gradient(circle at 44% 12%, rgba(200,162,74,.09) 0 11px, transparent 12px),
    radial-gradient(circle at 63% 62%, rgba(200,162,74,.12) 0 7px, transparent 8px),
    radial-gradient(circle at 81% 28%, rgba(200,162,74,.10) 0 13px, transparent 14px),
    radial-gradient(circle at 93% 80%, rgba(200,162,74,.13) 0 8px, transparent 9px);
}

/* ==========================================================================
   MASTHEAD - non-sticky. No claim CTA in the nav (feedback_no_jumplink_ctas).
   ========================================================================== */
.mast{background:var(--ink);border-bottom:2px solid var(--gold-lo)}
.mast__in{display:flex;align-items:center;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none}
/* the character IS the brand: the emblem must be large enough to actually read
   (fedora, coat, faceless void, hands raking chips). 46px made it a smudge. */
.brand img{width:104px;height:auto;flex:0 0 auto;
  filter:drop-shadow(0 1px 0 rgba(200,162,74,.4))}
.brand__tx{display:flex;flex-direction:column;line-height:1}
.brand__a{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:38px;
  letter-spacing:.02em;color:#fff;text-transform:uppercase}
.brand__b{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:19px;
  letter-spacing:.30em;color:var(--gold);text-transform:uppercase;margin-top:3px}
@media (min-width:1000px){
  .brand img{width:120px}
  .brand__a{font-size:43px}
  .brand__b{font-size:21px;letter-spacing:.32em}
}
.nav{margin-left:auto;display:flex;gap:24px;align-items:center}
.nav a{color:#D9DBE6;text-decoration:none;font-size:15px;font-weight:500}
.nav a:hover{color:var(--gold-hi)}
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--ink-3);
  border-radius:9px;width:44px;height:40px;cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:20px;height:2px;background:var(--gold);margin:3.5px auto;border-radius:2px}

/* ==========================================================================
   HERO - compact on BOTH views so the toplist clears the fold either way.
   Nothing sits above the H1. No drivedown CTA.
   ========================================================================== */
/* ONE INTEGRATED composition. The banner bleeds the full width and the text sits
   INSIDE it, over the deliberately-empty dark left third of the artwork. It is NOT a
   detached self-contained image parked in a right-hand column, and it is NOT the
   masthead emblem repeated: the banner is its own scene (figure at a table, right-weighted). */
.hero{position:relative;color:#fff;overflow:hidden;
  background:var(--ink) url("/assets-casino/brand/hero-banner.jpg") no-repeat right center;
  background-size:cover;
  padding-top:34px;padding-bottom:38px}
/* horizontal scrim: opaque where the copy sits, clearing to reveal the scene on the right */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(20,21,42,.97) 0%, rgba(20,21,42,.95) 34%,
    rgba(20,21,42,.72) 52%, rgba(20,21,42,.30) 72%, rgba(20,21,42,.10) 100%)}
.hero > .wrap{position:relative;z-index:1}
.hero h1{color:#fff;margin:0 0 10px;max-width:23ch;
  text-shadow:0 2px 18px rgba(10,10,22,.75)}
.hero h1 em{font-style:normal;color:var(--gold-hi)}
.hero__lede{margin:0;color:#D5D8E4;font-size:17.5px;max-width:56ch;
  text-shadow:0 1px 12px rgba(10,10,22,.8)}
/* the grid is now a single text column; the artwork lives in the section background */
.hero__grid{display:block}
.hero__emblem{display:none}

/* byline: structured rows, never a compressed dot-run (rule 17) */
.byline{display:flex;align-items:center;gap:13px;margin-top:16px;
  padding-top:15px;border-top:1px solid var(--ink-3)}
.byline img{width:46px;height:46px;border-radius:50%;border:2px solid var(--gold-lo);object-fit:cover}
.byline__who{font-size:15px;color:#fff;font-weight:600}
.byline__who a{color:#fff}
.byline__role{font-size:13px;color:var(--gold);margin-top:1px}
.byline__meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:5px;font-size:12.5px;color:#9BA0B4}
.byline__meta span{display:inline-flex;align-items:center;gap:5px}
.tick{width:12px;height:12px;flex:0 0 auto;color:var(--gold)}

/* ==========================================================================
   THE TOPLIST - each row is TWO side-by-side panels joined by a notched seam.
   Left = identity. Right = the offer (the eye-catcher). Operator directive.
   ========================================================================== */
.picks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:15px}
.pick{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(20,21,42,.05);overflow:hidden;position:relative;
  display:grid;grid-template-columns:1.12fr .88fr;
}
.pick--top{border-color:var(--gold);box-shadow:0 3px 14px rgba(200,162,74,.20)}

/* the seam: a chip-edge dashed divider between the two panels */
.pick__id{padding:17px 20px;display:flex;flex-direction:column;justify-content:center;
  gap:10px;position:relative}
.pick__idrow{display:flex;align-items:center;gap:15px}
.pick__id::after{
  content:"";position:absolute;top:12px;bottom:12px;right:0;width:2px;
  background-image:linear-gradient(var(--gold) 50%, transparent 0);
  background-size:2px 9px;background-repeat:repeat-y;opacity:.55;
}
.pick__offer{padding:15px 20px;display:flex;flex-direction:column;justify-content:center;
  gap:9px;background:linear-gradient(180deg,#FFFDF7 0%,#FBF6E9 100%)}

.pick__logo{width:112px;height:56px;flex:0 0 auto;background:#fff;border:1px solid var(--line);
  border-radius:9px;display:grid;place-items:center;padding:7px}
.pick__logo img{max-height:100%;max-width:100%;object-fit:contain}
.pick__name{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;
  color:var(--ink);line-height:1.12;margin:0}
.pick__rate{display:flex;align-items:center;gap:7px;margin-top:3px}
.stars{color:var(--gold);font-size:14px;letter-spacing:1.5px}
.pick__score{font-weight:700;font-size:14px;color:var(--tx-mid)}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tag{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gold-lo);background:#FBF6E9;border:1px solid #E8DCBC;border-radius:5px;padding:3px 7px}

.pick__blabel{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx-lo);margin:0}
.pick__bonus{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:clamp(26px,2.7vw,33px);line-height:1.02;color:var(--gold-lo);margin:0}
.pick__terms{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--tx-mid);margin:0}
.pick__terms b{color:var(--tx);font-weight:600}
.pick__restrict{font-size:11.5px;color:var(--no);margin:0}

/* THE CTA - reserved colour + chip-edge notches. Only place --cta appears.
   Shape is a notched PILL (round), matching the chip/disc motif this site is built on.
   The cut-corner clip-path it replaced was the angular language our sibling property uses.
   Notches are solid pseudo-element discs coloured to the surface behind the button
   (mask-composite is unreliable across browsers). --cta-surface is set per context. */
.cta{
  --cta-surface:#FBF6E9;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--cta);color:var(--cta-ink);text-decoration:none;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:12px 22px;border:0;cursor:pointer;border-radius:999px;
  transition:filter .14s ease,transform .14s ease;
}
.cta::before,.cta::after{
  content:"";position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--cta-surface);transform:translateY(-50%);pointer-events:none;
}
.cta::before{left:-5px}
.cta::after{right:-5px}
.cta:hover{filter:brightness(1.09);transform:translateY(-1px);color:var(--cta-ink)}
.cta svg{width:13px;height:13px}
.cta--full{width:100%}
/* the notch discs must match whatever surface sits behind the button */
.pick__offer .cta{--cta-surface:#FBF6E9}
.callout .cta{--cta-surface:var(--ink)}

/* ==========================================================================
   CONTENT
   ========================================================================== */
main{padding-bottom:10px}
.sec{padding:6px 0}
.lede-note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:15px 19px;margin:22px 0}
.lede-note p:last-child{margin-bottom:0}

.facts{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts li{background:#fff;padding:15px 17px;margin:0}
.facts dt{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-lo)}
.facts dd{margin:5px 0 0;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:23px;color:var(--ink);line-height:1.1}

table{width:100%;border-collapse:collapse;font-size:15px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.twrap{overflow-x:auto;margin:18px 0;-webkit-overflow-scrolling:touch}
thead th{background:var(--ink);color:#fff;font-family:"Barlow Condensed",sans-serif;
  font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;
  text-align:left;padding:11px 13px;white-space:nowrap}
tbody td{padding:11px 13px;border-top:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even) td{background:#FDFCF8}
td b{color:var(--ink)}

.pc{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:18px 0}
.pc > div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 19px}
.pc h4{margin:0 0 9px;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.pc ul{list-style:none;padding:0;margin:0}
.pc li{position:relative;padding-left:22px;font-size:15.5px}
.pc li::before{position:absolute;left:0;top:.1em;font-weight:700}
.pc--y h4{color:var(--ok)} .pc--y li::before{content:"+";color:var(--ok)}
.pc--n h4{color:var(--no)} .pc--n li::before{content:"\2212";color:var(--no)}

/* chip-bullet list: the motif at list scale */
.chiplist{list-style:none;padding:0}
.chiplist li{position:relative;padding-left:26px}
.chiplist li::before{
  content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--gold) 0 14deg,transparent 14deg 36deg),
             radial-gradient(circle,var(--ink) 0 55%,var(--gold) 55% 100%);
}
ol.steps{counter-reset:s;list-style:none;padding:0}
ol.steps > li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:15px}
ol.steps > li::before{
  content:counter(s);position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:var(--gold-hi);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:16px;
  box-shadow:0 0 0 2px var(--gold-lo);
}

.callout{background:var(--ink);color:#E7E9F2;border-radius:var(--r);padding:22px 24px;margin:24px 0}
.callout h3{color:#fff;margin-top:0}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout .chiplist li::before{background:repeating-conic-gradient(from 0deg,var(--gold) 0 14deg,transparent 14deg 36deg),radial-gradient(circle,var(--ink-2) 0 55%,var(--gold) 55% 100%)}
.callout a{color:var(--gold-hi)}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:2px 0}
.faq summary{cursor:pointer;list-style:none;padding:15px 34px 15px 0;position:relative;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:20px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .16s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__a{padding:0 0 15px}
.faq__a p:last-child{margin-bottom:0}

.authorbox{display:flex;gap:17px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:19px;margin:26px 0 0;align-items:flex-start}
.authorbox img{width:74px;height:74px;border-radius:50%;flex:0 0 auto;border:2px solid var(--gold-lo);object-fit:cover}
.authorbox h3{margin:0 0 4px;font-size:19px}
.authorbox p{font-size:15px;margin:0;color:var(--tx-mid)}

/* ==========================================================================
   FOOTER - owns the affiliate disclosure (never above a heading) + RG signpost
   ========================================================================== */
.foot{background:var(--ink);color:#9BA0B4;margin-top:44px;padding:34px 0 26px;font-size:14.5px}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}
.foot h4{color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 11px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:7px}
.foot a{color:#B9BDCC;text-decoration:none}
.foot a:hover{color:var(--gold-hi);text-decoration:underline}
.foot__brand{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.foot__brand img{width:38px}
.foot__disc{border-top:1px solid var(--ink-3);margin-top:26px;padding-top:18px;font-size:13px;line-height:1.6;color:#7E8397}
.foot__disc strong{color:#AEB3C4}
.rg{display:inline-flex;align-items:center;gap:7px;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:6px;padding:5px 10px;color:#C7CAD8;font-weight:600;font-size:13px;margin-top:9px}

/* ==========================================================================
   RESPONSIVE - same content both views, reflowed. Nothing hidden on mobile.
   ========================================================================== */
@media (max-width:900px){
  .hero__emblem{width:96px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:22px}
  .pick{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;left:0;right:0;top:100%;z-index:40;
    flex-direction:column;gap:0;align-items:stretch;background:var(--ink-2);
    border-bottom:2px solid var(--gold-lo);padding:6px 0}
  .nav.open a{padding:13px 20px;border-bottom:1px solid var(--ink-3);font-size:16px}
  .burger{display:grid}
  .mast__in{position:relative}
  .hero{padding:20px 0 24px}
  .hero__grid{grid-template-columns:1fr}
  .hero__emblem{display:none} /* decorative only - no content is hidden */
  .hero h1{font-size:26px;max-width:none}
  .hero__lede{font-size:16px}
  .byline{margin-top:13px;padding-top:12px}

  /* panels dissolve so children reorder into one centred stack:
     identity -> BONUS -> terms -> tags -> CTA (hausstl lesson) */
  .pick{text-align:center;gap:0}
  .pick__id,.pick__offer{display:contents}
  .pick__idrow{display:flex;align-items:center;justify-content:flex-start;gap:13px;
    padding:15px 16px 12px;order:1;text-align:left}
  .pick::before{content:"";order:2;height:1px;margin:0 16px;opacity:.55;
    background:repeating-linear-gradient(90deg,var(--gold) 0 7px,transparent 7px 15px)}
  .pick__blabel{order:3;padding:12px 16px 0}
  .pick__bonus{order:4;padding:0 16px;font-size:31px}
  .pick__terms{order:5;justify-content:center;padding:7px 16px 0}
  .pick__restrict{order:6;padding:5px 16px 0}
  .tags{order:7;justify-content:center;padding:10px 16px 0}
  /* on mobile the offer panel dissolves, so the CTA sits on the white card face */
  .pick__ctawrap{order:8;padding:14px 16px 17px;background:var(--card)}
  .pick__ctawrap .cta{--cta-surface:var(--card)}
  .pick__id::after{display:none}
  /* the offer panel keeps its tint on mobile so the bonus stays the eye-catcher */
  .pick__blabel,.pick__bonus,.pick__terms,.pick__restrict{background:linear-gradient(180deg,#FFFDF7,#FBF6E9)}
  .cta{width:100%;padding:14px 22px;font-size:17.5px}
  .pc{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:430px){
  .facts{grid-template-columns:1fr}
  .pick__logo{width:96px;height:48px}
  .pick__name{font-size:20px}
  /* brand sizing at <=430px is set in the masthead-scale block below, not here:
     the old 40px emblem made the character unreadable, which is the whole point of it */
  .foot__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* quick-facts answer panel: gold-ruled label rows, not a card grid (rule: no generic containers) */
.facts-panel{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:0 0 var(--r) var(--r);margin:18px 0;padding-inline:19px}
.facts-panel p{margin:0;padding-block:14px;border-bottom:1px solid var(--line)}
.facts-panel p:last-child{border-bottom:0}
/* closing decision aid */
.picklist{list-style:none;padding:0;margin:18px 0}
.picklist li{border-left:3px solid var(--gold);padding-left:16px;margin-bottom:17px}
.picklist li strong{color:var(--ink)}

/* ==========================================================================
   ABOVE-THE-FOLD BUDGET (hard rule: first toplist card visible without
   scrolling on mobile). Measured 2026-07-28: card1 sat at 888px on a 844px
   viewport. Trim the hero and the first H2's top margin, without cutting any
   content -- the lede carries the primary keyword in the first 100 words.
   ========================================================================== */
/* the first section heading must not inherit the 2.1em inter-section margin */
main .wrap > .sec:first-of-type > h2{margin-top:.35em}

@media (max-width:760px){
  .hero{padding:16px 0 18px}
  .hero h1{font-size:25px}
  .hero__lede{font-size:15.5px;line-height:1.5}
  /* byline: keep every element, just stop it stacking three tall rows */
  .byline{margin-top:11px;padding-top:10px;gap:11px}
  .byline img{width:40px;height:40px}
  .byline__who{font-size:14px}
  .byline__role{font-size:12px}
  .byline__meta{gap:3px 12px;margin-top:3px;font-size:11.5px}
  main .wrap > .sec:first-of-type > h2{margin-top:.15em;margin-bottom:9px}
  .sec{padding:4px 0}
}

/* ==========================================================================
   HERO BANNER — responsive integration (appended last so it wins).
   The banner stays part of ONE composition at every width; it never becomes a
   detached decorative strip and no content is ever hidden to make room for it.
   ========================================================================== */
.hero{min-height:300px;display:flex;align-items:center}
.hero > .wrap{width:100%}

@media (min-width:1000px){
  .hero{min-height:380px}
  .hero__lede{max-width:52ch}
}

/* Tablet: the artwork's figure sits ~55% across, so pull the framing right and
   deepen the scrim, keeping the copy on the dark side. */
@media (max-width:999px){
  .hero{background-position:72% center;min-height:280px}
  .hero::after{background:linear-gradient(90deg,
    rgba(20,21,42,.97) 0%, rgba(20,21,42,.93) 42%,
    rgba(20,21,42,.74) 64%, rgba(20,21,42,.34) 88%, rgba(20,21,42,.14) 100%)}
}

/* Mobile: full-bleed behind the copy. Diagonal scrim keeps the H1 and lede on
   solid ink while the figure still reads in the lower right. */
@media (max-width:760px){
  .hero{background-position:82% center;min-height:0;
        padding-top:18px;padding-bottom:20px}
  .hero::after{background:linear-gradient(168deg,
    rgba(20,21,42,.97) 0%, rgba(20,21,42,.94) 46%,
    rgba(20,21,42,.80) 70%, rgba(20,21,42,.58) 100%)}
  .hero h1{max-width:none}
  .hero__lede{max-width:none}
}
/* dead rules from the pre-banner hero (emblem was a detached right-column image) */
.hero__emblem{display:none!important}

/* ==========================================================================
   MASTHEAD SCALE — appended last so it beats the older max-width blocks.
   The emblem is the brand: the faceless figure must be legible at every width,
   so it scales DOWN gently instead of collapsing to a 40px smudge.
   The emblem stays a SEPARATE leading badge; every wordmark letter stays legible.
   ========================================================================== */
@media (max-width:760px){
  .mast__in{gap:12px;min-height:82px}
  .brand{gap:12px}
  .brand img{width:78px}
  .brand__a{font-size:30px}
  .brand__b{font-size:15px;letter-spacing:.26em}
}
@media (max-width:430px){
  .mast__in{gap:9px;min-height:76px}
  .brand{gap:10px}
  .brand img{width:66px}
  .brand__a{font-size:25px}
  .brand__b{font-size:12.5px;letter-spacing:.22em}
}
@media (max-width:360px){
  .brand img{width:58px}
  .brand__a{font-size:22px}
  .brand__b{font-size:11px;letter-spacing:.2em}
}

/* the emblem is 120px wide and ~127px tall, which exactly filled the 74px-min
   masthead and clipped the hat and the coin stacks against both edges */
.mast__in{padding-block:12px;min-height:0}
@media (max-width:760px){.mast__in{padding-block:9px}}

/* Hero band tuned to the installed banner (2.61:1, figure at ~72% across).
   Taller band so the figure reads head-to-hands instead of being cropped mid-torso. */
.hero{background-position:right center;min-height:0;
      padding-top:40px;padding-bottom:44px}
@media (min-width:1000px){.hero{padding-top:52px;padding-bottom:56px}}
@media (max-width:999px){.hero{background-position:78% center}}
@media (max-width:760px){
  .hero{background-position:74% center;padding-top:20px;padding-bottom:22px}
}

/* mobile framing: raise the window so the hat + faceless void read, not just the torso */
@media (max-width:760px){.hero{background-position:73% 18%}}
@media (max-width:430px){.hero{background-position:71% 15%}}

/* Mobile scrim was ~.94 opaque across the whole band, so the artwork contributed
   nothing. Ease it toward the lower right, which sits below the byline and carries
   little text, so the figure and coins read while the copy stays on solid ink. */
@media (max-width:760px){
  .hero::after{background:linear-gradient(158deg,
    rgba(20,21,42,.97) 0%, rgba(20,21,42,.94) 38%,
    rgba(20,21,42,.84) 60%, rgba(20,21,42,.58) 82%, rgba(20,21,42,.38) 100%)}
  .hero{background-position:68% center}
}

/* ==========================================================================
   TOPLIST FIXES (2026-07-28, operator-reported malformatting)
   ========================================================================== */

/* FIX 1 — brand-logo overflow. The lineup assets are not one shape: most are
   150x80 but BetOnline's is 512x512. `max-height:100%` failed to clamp it because
   the percentage resolved against an auto-sized grid area, so the square logo
   rendered 96x96 inside a 112x56 tile and spilled 48px over the tags below.
   Pin both axes to the tile and let object-fit letterbox, which is shape-agnostic. */
.pick__logo{overflow:hidden}
.pick__logo img{width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;object-position:center}

/* FIX 2 — breakpoint gap. The card collapses to a single column at <=900px, but
   the vertical dashed seam was only hidden at <=760px, so 761-900px (incl. 768
   tablets) rendered a stray vertical line beside a stacked panel with the offer
   block orphaned below. Reflow and seam now switch at the SAME width as the grid. */
@media (max-width:900px){
  .pick{text-align:center;gap:0}
  .pick__id,.pick__offer{display:contents}
  .pick__id::after{display:none}
  .pick__idrow{display:flex;align-items:center;justify-content:flex-start;gap:13px;
    padding:15px 16px 12px;order:1;text-align:left}
  .pick::before{content:"";order:2;height:1px;margin:0 16px;opacity:.55;
    background:repeating-linear-gradient(90deg,var(--gold) 0 7px,transparent 7px 15px)}
  .pick__blabel{order:3;padding:12px 16px 0}
  .pick__bonus{order:4;padding:0 16px;font-size:31px}
  .pick__terms{order:5;justify-content:center;padding:7px 16px 0}
  .pick__restrict{order:6;padding:5px 16px 0}
  .tags{order:7;justify-content:center;padding:10px 16px 0}
  .pick__ctawrap{order:8;padding:14px 16px 17px;background:var(--card)}
  .pick__ctawrap .cta{--cta-surface:var(--card)}
  .pick__blabel,.pick__bonus,.pick__terms,.pick__restrict{
    background:linear-gradient(180deg,#FFFDF7,#FBF6E9)}
  .cta{width:100%;padding:14px 22px;font-size:17.5px}
}

/* FIX 1b — the grid version above did not hold: `height:100%` on a centred GRID
   item silently resolved to 96px instead of the 40px content box, so the square
   BetOnline asset still rendered 96x96. Flex resolves max-height against the
   container's content box reliably, so use that instead of percentage sizing. */
.pick__logo{display:flex;align-items:center;justify-content:center;overflow:hidden}
.pick__logo img{width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center}

/* Tile a little taller: the lineup contains one legitimately badge-shaped lockup
   (All Star Slots, ratio 1.34) alongside fourteen 1.88 wordmarks. Every logo in
   this tile is height-limited, so +6px of tile height enlarges all fifteen. */
.pick__logo{height:62px}
@media (max-width:430px){.pick__logo{width:96px;height:54px}}

/* ==========================================================================
   SELF-HOSTED DISPLAY FONT (2026-07-28)
   ⛔ The stylesheet asked for "Barlow Condensed" with NO @font-face and no font
   link, so it only rendered on machines that happen to have it installed
   locally. Real visitors fell back to Inter/system-ui, i.e. a completely
   different, wider, non-condensed face: every heading, the wordmark, the bonus
   figures and the CTAs were wrong in production.
   Oswald is a condensed gothic already present in the repo (self-hosted from the
   legacy restore), grimmer than Barlow, and it is what the display type now uses.
   ========================================================================== */
@font-face{font-family:"Oswald";src:url("/assets-casino/fonts/oswald-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Oswald";src:url("/assets-casino/fonts/oswald-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Oswald";src:url("/assets-casino/fonts/oswald-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{--display:"Oswald","Barlow Condensed","Arial Narrow",system-ui,sans-serif}
h1,h2,h3,h4,.brand__a,.brand__b,.pick__name,.pick__bonus,.cta,thead th,
.facts dd,ol.steps > li::before,.chip > span,.faq summary{font-family:var(--display)}

/* ==========================================================================
   BONUS PANEL — flat block colour, identical on mobile and desktop.
   Was: FOUR separate elements each painting its own 180deg gradient, so the
   mobile stack rendered as four light-to-dark bands = horizontal striping.
   ========================================================================== */
.pick__offer{background:#FBF6E9}
@media (max-width:900px){
  .pick__blabel,.pick__bonus,.pick__terms,.pick__restrict,.pick__bonuslink{
    background:#FBF6E9}
}

/* ==========================================================================
   CLICKABLE BONUS — logo, bonus figure and CTA all reach the affiliate link.
   Underline appears on hover only, so the panel stays clean at rest.
   ========================================================================== */
a.pick__bonuslink{display:block;text-decoration:none;color:inherit}
a.pick__bonuslink .pick__bonus{margin:0;text-decoration:none;transition:color .13s ease}
a.pick__bonuslink:hover .pick__bonus,
a.pick__bonuslink:focus-visible .pick__bonus{text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:3px;color:var(--gold)}
a.pick__bonuslink:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:900px){a.pick__bonuslink{order:4;padding:0 16px}
  a.pick__bonuslink .pick__bonus{padding:0}}

/* ==========================================================================
   WORDMARK — "action comic", serious and grim rather than gimmicky.
   Condensed gothic caps, slight shear for motion, hard ink offset like comic
   line art. No starburst, no extrude, no outline glow, no colour tricks.
   ========================================================================== */
.brand__tx{transform:skewX(-7deg);transform-origin:left center}
.brand__a{font-weight:700;letter-spacing:.004em;
  text-shadow:2px 2px 0 #08090F, 3px 3px 0 rgba(0,0,0,.42)}
.brand__b{font-weight:600;color:var(--gold);
  text-shadow:1px 1px 0 #08090F}
/* the gold rule under the wordmark reads as the comic panel edge */
.brand__tx::after{content:"";display:block;height:2px;margin-top:4px;
  background:linear-gradient(90deg,var(--gold) 0 62%,rgba(200,162,74,0) 100%)}