/* Boomerang Casino NL — emerald palette, static site */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Hanken+Grotesk:wght@400;600;700;800&display=swap');
:root{
  --ink-900:#042116; --ink-800:#06291C; --felt-900:#0A3323; --surface-1:#0E3A28; --surface-2:#124630;
  --em-400:#2BBE7B; --em-300:#5CEDA9; --em-500:#189A5E; --amber:#E4C45C; --red:#D7263D;
  --fg-1:#F6F1E4; --fg-2:#C9D8CD; --fg-3:#88A395;
  --line:rgba(43,190,123,.20); --line-strong:rgba(43,190,123,.48); --line-soft:rgba(246,241,228,.08);
  --fill:linear-gradient(160deg,#5CEDA9 0%,#2BBE7B 46%,#189A5E 100%);
  --glow:0 0 0 1px rgba(43,190,123,.40),0 10px 34px rgba(43,190,123,.22);
  --shadow-2:0 10px 28px rgba(0,0,0,.45); --shadow-3:0 28px 64px rgba(0,0,0,.55);
  --ui:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Bodoni Moda',Didot,Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink-800);color:var(--fg-1);font-family:var(--ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--em-400);text-decoration:none}
a:hover{color:var(--em-300)}
::selection{background:rgba(43,190,123,.28)}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:99;background:var(--em-400);color:#052C1E;padding:10px 16px;border-radius:8px}
:focus-visible{outline:2px solid var(--em-300);outline-offset:3px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(4,33,22,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:11px;color:var(--fg-1);flex:0 0 auto}
.brand svg{flex:0 0 auto}
.brand b{font-weight:800;font-size:19px;letter-spacing:-.03em;text-transform:uppercase}
.brand i{font-family:var(--display);font-style:italic;font-size:15px;color:var(--em-400)}
.nav{display:flex;gap:20px;font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--fg-2);white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{color:var(--em-300)}
.hactions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
.navtoggle{display:none;background:none;border:1px solid var(--line-strong);color:var(--fg-1);border-radius:8px;padding:9px 12px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}

/* buttons */
.btn{display:inline-block;font-size:13.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:15px 26px;border-radius:10px;transition:transform .2s cubic-bezier(.2,.7,.2,1),filter .2s}
.btn-primary{background:var(--fill);color:var(--fg-1);box-shadow:var(--glow)}
.btn-primary:hover{color:var(--fg-1);filter:brightness(1.06);transform:translateY(-2px)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--em-300)}
.btn-ghost:hover{background:rgba(43,190,123,.08)}
.btn-sm{padding:11px 18px;font-size:12.5px}
.btn-lg{padding:18px 34px;font-size:14px}

/* type */
h1,h2,h3{font-family:var(--ui);letter-spacing:-.035em;text-transform:uppercase;line-height:1.02;margin:0}
h1{font-size:clamp(34px,4.6vw,62px);font-weight:800}
h2{font-size:clamp(24px,3vw,40px);font-weight:800}
h3{font-size:20px;font-weight:800;letter-spacing:-.02em}
h4{font-family:var(--ui);font-size:16px;font-weight:800;letter-spacing:.02em;margin:0}
p{margin:0 0 18px;text-wrap:pretty}
.lead{font-size:19px;line-height:1.55;color:var(--fg-2)}
.muted{color:var(--fg-2)}
.small{font-size:13px;color:var(--fg-3)}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}
.num{font-variant-numeric:tabular-nums}
.serif{font-family:var(--display);text-transform:none;letter-spacing:-.01em;font-style:italic;font-weight:500;color:var(--em-400)}

/* sections */
main{display:block}
.sec{padding:80px 0;border-bottom:1px solid var(--line)}
.sec.alt{background:var(--felt-900)}
.sec-head{display:flex;align-items:baseline;gap:20px;border-top:1px solid var(--line-strong);padding-top:18px;margin-bottom:36px;flex-wrap:wrap}
.sec-head .n{font-family:var(--display);font-style:italic;font-size:15px;color:var(--em-400)}
.sec-head .meta{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.crumbs{font-size:12.5px;color:var(--fg-3);padding:20px 0 0}
.crumbs a{color:var(--fg-3)}
.crumbs a:hover{color:var(--em-300)}

/* hero */
.hero{background:radial-gradient(120% 90% at 18% 0%,#0E4230 0%,#06291C 64%);border-bottom:1px solid var(--line)}
.hero-in{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:start;padding:72px 32px 64px;max-width:1280px;margin:0 auto}
.hero h1{margin:22px 0 22px}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:999px;background:var(--red);box-shadow:0 0 12px var(--red);animation:pulse 2.4s ease-in-out infinite;margin-right:10px;vertical-align:middle}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 18px}

/* ticket */
.ticket{border:1px solid var(--line-strong);border-radius:16px;background:linear-gradient(180deg,#0F3E2A 0%,#082E1F 100%);box-shadow:var(--shadow-3);overflow:hidden}
.ticket .top{padding:28px 28px 24px}
.ticket .big{font-family:var(--display);font-size:clamp(52px,6vw,74px);line-height:.9;color:var(--em-300);font-variant-numeric:tabular-nums}
.ticket .perf{position:relative;height:1px;background:repeating-linear-gradient(90deg,rgba(43,190,123,.42) 0 6px,transparent 6px 12px)}
.ticket .perf span{position:absolute;top:-9px;width:18px;height:18px;border-radius:999px;background:var(--ink-800)}
.ticket .perf span:first-child{left:-9px}
.ticket .perf span:last-child{right:-9px}
.ticket .rows{padding:22px 28px 28px;display:grid;gap:12px}
.trow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.trow span:first-child{font-size:14px;color:var(--fg-2)}
.trow span:last-child{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.hr{height:1px;background:var(--line-soft)}

/* stat ledger */
.ledger{border-top:1px solid var(--line);background:rgba(4,33,22,.5)}
.ledger-in{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));max-width:1280px;margin:0 auto;padding:0 32px}
.ledger-in>div{padding:24px 18px;border-right:1px solid var(--line-soft)}
.ledger-in>div:last-child{border-right:0}
.ledger .v{font-family:var(--display);font-size:30px;line-height:1;color:var(--em-300);font-variant-numeric:tabular-nums}
.ledger .k{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}

/* grids */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
.g2>*{min-width:0}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}

/* cards */
.card{border:1px solid var(--line);border-radius:14px;background:var(--surface-1);padding:24px;box-shadow:var(--shadow-2)}
.card h3{margin-bottom:10px}
.card.k{padding:20px}
.card .v{font-family:var(--display);font-size:30px;color:var(--em-300);font-variant-numeric:tabular-nums}
.card .kk{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.plain{border:1px solid var(--line);border-radius:10px;background:var(--surface-1);padding:16px 18px;font-size:14.5px}
.rowcard{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface-1);padding:16px 18px}
.note{border-left:2px solid var(--em-400);padding:4px 0 4px 20px}

/* tables */
.table-wrap{border:1px solid var(--line);border-radius:14px;background:var(--felt-900);overflow-x:auto;box-shadow:var(--shadow-2)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
thead tr{background:rgba(43,190,123,.07)}
th{text-align:left;padding:13px 18px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);border-bottom:1px solid var(--line-strong);white-space:nowrap}
td{padding:13px 18px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
td:first-child{font-weight:700}
.r{text-align:right}
.ok{color:var(--em-400)}

/* game tiles */
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.tab{font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;border-radius:999px;cursor:pointer;border:1px solid var(--line-soft);background:transparent;color:var(--fg-2)}
.tab[aria-selected=true]{background:rgba(43,190,123,.16);border-color:var(--line-strong);color:var(--em-300)}
.tab span{opacity:.6}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tile{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-1);transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s}
.tile:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.tile .ph{position:relative;aspect-ratio:1/1;background:var(--ink-900)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile .badge{position:absolute;top:9px;left:9px;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:rgba(4,33,22,.82);border:1px solid var(--line-strong);color:var(--em-300)}
.tile .cap{padding:11px 13px 13px}
.tile .nm{font-size:13.5px;font-weight:700;color:var(--fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .sub{margin-top:4px;display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--fg-3)}
.tile .sub b{color:var(--em-400);font-weight:700;font-variant-numeric:tabular-nums}
.hidden{display:none}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.steps>div{padding:28px 24px;border-right:1px solid var(--line-soft)}
.steps>div:last-child{border-right:0}
.steps .n{font-family:var(--display);font-size:38px;line-height:1;color:rgba(43,190,123,.42)}
.steps h3{margin:14px 0 8px;font-size:18px}
.steps p{margin:0;font-size:14.5px;color:var(--fg-2)}
.ol{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.ol li{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;color:var(--fg-2)}
.ol b{flex:0 0 auto;width:26px;height:26px;border-radius:999px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--em-300)}
.suits{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.suits li{display:flex;gap:12px;align-items:baseline;font-size:15px}
.suits i{font-style:normal;color:var(--em-400)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border-radius:999px;border:1px solid var(--line);color:var(--fg-2)}

/* faq */
.faq{display:grid;gap:10px}
details{border:1px solid var(--line);border-radius:10px;background:var(--felt-900);overflow:hidden}
summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;font-size:15px;font-weight:700;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary i{font-style:normal;color:var(--em-400);font-size:18px;transition:transform .2s}
details[open] summary i{transform:rotate(45deg)}
details .body{padding:0 18px 18px;font-size:14.5px;color:var(--fg-2)}

/* cta band */
.band{border:1px solid var(--line-strong);border-radius:16px;background:linear-gradient(160deg,#0F3E2A 0%,#082E1F 100%);padding:36px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;box-shadow:var(--shadow-2)}
.band h2{max-width:22ch}

/* footer */
footer{border-top:1px solid var(--line-strong);background:var(--ink-900)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:56px 32px 28px;max-width:1280px;margin:0 auto}
.fgrid .t{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.fgrid .links{display:grid;gap:9px;font-size:14px}
.fgrid .links a{color:var(--fg-2)}
.fgrid .links a:hover{color:var(--em-300)}
.fbot{max-width:1280px;margin:0 auto;padding:22px 32px 44px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.age{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;border:1px solid var(--red);color:var(--red);font-size:12px;font-weight:800}

@media (max-width:1100px){
  .navtoggle{display:inline-block}
  /* top:100% rather than a hardcoded 74px, so the drawer still sits directly
     under the header once .hrow wraps to two rows on narrow screens. */
  .nav{position:absolute;left:0;right:0;top:100%;background:rgba(4,33,22,.98);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 24px 18px;overflow:visible}
  .nav[hidden]{display:none}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .site-header{position:relative}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ledger-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  table{min-width:600px}
}
@media (max-width:860px){
  .hero-in,.g2{grid-template-columns:minmax(0,1fr);gap:32px}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec{padding:60px 0}
  .wrap,.hero-in,.ledger-in,.fgrid,.fbot{padding-left:22px;padding-right:22px}
}
@media (max-width:600px){
  /* brand (207px) + Menu toggle + the register CTA no longer fit on one row at
     this width, so the row overflowed. Wrap the CTA onto its own line. */
  .hrow{flex-wrap:wrap;height:auto;gap:12px;padding-top:12px;padding-bottom:12px}
  .hactions{flex:1 1 100%;order:4;margin-left:0}
  .hactions .btn{flex:1 1 auto;justify-content:center;text-align:center}
  .tiles,.g6,.ledger-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g4,.steps{grid-template-columns:minmax(0,1fr)}
  .steps>div{border-right:0;border-bottom:1px solid var(--line-soft)}
  .band{padding:24px}
  .btn-lg{padding:16px 24px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===========================================================================
   Layout & component classes replacing former inline style="" attributes.
   Each rule reproduces exactly the declarations it replaced, so the rendered
   design is unchanged; the custom theme now emits no inline CSS.
   =========================================================================== */

/* --- Section / wrapper variants ------------------------------------------ */
.sec--flush{padding-top:30px}
.sec--flush-lg{padding-top:48px}
.wrap--narrow{max-width:900px}

/* --- Hero & intro text ---------------------------------------------------- */
.eyebrow-row{margin:0 0 14px}
.hero-lead{margin:22px 0 26px;max-width:70ch}
.hero-lead--compact{margin:20px 0 26px;max-width:60ch}
.hero-lead--prose{margin:20px 0 0;max-width:70ch}
.hero-meta{margin-top:16px}
.cta-row--flush{margin:0}

/* --- Measure (line-length) limits ---------------------------------------- */
.measure-40{max-width:40ch}
.measure-52{max-width:52ch}
.measure-78{max-width:78ch}

/* --- Prose (legal / service) pages ---------------------------------------- */
.prose-h2{font-size:22px;margin:34px 0 12px}
.prose-h2--first{margin:0 0 12px}
.prose-updated{margin-top:14px}

/* --- CTA band ------------------------------------------------------------- */
.band-copy{margin:14px 0 0;max-width:52ch}

/* --- Ticket / bonus figure cards ------------------------------------------ */
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.card-head--wide{margin-bottom:18px}
.card-head .idx{font-size:26px;opacity:.45}
.card-head .badge-txt{letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.figure-xl{font-family:var(--display);font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.figure-sub{margin-top:8px;font-size:17px;font-weight:700;color:var(--em-300)}
.figure-sub--lg{margin-top:10px;font-size:20px;font-weight:700;color:inherit}
.figure-terms{margin-top:18px;display:grid;gap:8px;font-size:13.5px}

/* --- Row cards / grids ---------------------------------------------------- */
.rowstack{display:grid;gap:10px}
.rowstack--start{align-content:start}
.rowcard .badge-strong{font-weight:700}
.grid-gap-12{gap:12px}
.grid-gap-16-start{gap:16px;align-content:start}

/* --- Score bars (reviews) ------------------------------------------------- */
.score{margin-bottom:14px}
.score-head{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:6px}
.score-track{height:6px;border-radius:999px;background:rgba(246,241,228,.08);overflow:hidden}
.score-fill{display:block;height:100%;background:var(--fill);width:0}
/* Score bar widths. The percent is ACF-editable, so the full 0-100 range is
   enumerated here as static rules and selected via [data-score]; this keeps the
   bar dynamic without the theme ever emitting a style="" attribute. */
.score-fill[data-score="0"]{width:0%}
.score-fill[data-score="1"]{width:1%}
.score-fill[data-score="2"]{width:2%}
.score-fill[data-score="3"]{width:3%}
.score-fill[data-score="4"]{width:4%}
.score-fill[data-score="5"]{width:5%}
.score-fill[data-score="6"]{width:6%}
.score-fill[data-score="7"]{width:7%}
.score-fill[data-score="8"]{width:8%}
.score-fill[data-score="9"]{width:9%}
.score-fill[data-score="10"]{width:10%}
.score-fill[data-score="11"]{width:11%}
.score-fill[data-score="12"]{width:12%}
.score-fill[data-score="13"]{width:13%}
.score-fill[data-score="14"]{width:14%}
.score-fill[data-score="15"]{width:15%}
.score-fill[data-score="16"]{width:16%}
.score-fill[data-score="17"]{width:17%}
.score-fill[data-score="18"]{width:18%}
.score-fill[data-score="19"]{width:19%}
.score-fill[data-score="20"]{width:20%}
.score-fill[data-score="21"]{width:21%}
.score-fill[data-score="22"]{width:22%}
.score-fill[data-score="23"]{width:23%}
.score-fill[data-score="24"]{width:24%}
.score-fill[data-score="25"]{width:25%}
.score-fill[data-score="26"]{width:26%}
.score-fill[data-score="27"]{width:27%}
.score-fill[data-score="28"]{width:28%}
.score-fill[data-score="29"]{width:29%}
.score-fill[data-score="30"]{width:30%}
.score-fill[data-score="31"]{width:31%}
.score-fill[data-score="32"]{width:32%}
.score-fill[data-score="33"]{width:33%}
.score-fill[data-score="34"]{width:34%}
.score-fill[data-score="35"]{width:35%}
.score-fill[data-score="36"]{width:36%}
.score-fill[data-score="37"]{width:37%}
.score-fill[data-score="38"]{width:38%}
.score-fill[data-score="39"]{width:39%}
.score-fill[data-score="40"]{width:40%}
.score-fill[data-score="41"]{width:41%}
.score-fill[data-score="42"]{width:42%}
.score-fill[data-score="43"]{width:43%}
.score-fill[data-score="44"]{width:44%}
.score-fill[data-score="45"]{width:45%}
.score-fill[data-score="46"]{width:46%}
.score-fill[data-score="47"]{width:47%}
.score-fill[data-score="48"]{width:48%}
.score-fill[data-score="49"]{width:49%}
.score-fill[data-score="50"]{width:50%}
.score-fill[data-score="51"]{width:51%}
.score-fill[data-score="52"]{width:52%}
.score-fill[data-score="53"]{width:53%}
.score-fill[data-score="54"]{width:54%}
.score-fill[data-score="55"]{width:55%}
.score-fill[data-score="56"]{width:56%}
.score-fill[data-score="57"]{width:57%}
.score-fill[data-score="58"]{width:58%}
.score-fill[data-score="59"]{width:59%}
.score-fill[data-score="60"]{width:60%}
.score-fill[data-score="61"]{width:61%}
.score-fill[data-score="62"]{width:62%}
.score-fill[data-score="63"]{width:63%}
.score-fill[data-score="64"]{width:64%}
.score-fill[data-score="65"]{width:65%}
.score-fill[data-score="66"]{width:66%}
.score-fill[data-score="67"]{width:67%}
.score-fill[data-score="68"]{width:68%}
.score-fill[data-score="69"]{width:69%}
.score-fill[data-score="70"]{width:70%}
.score-fill[data-score="71"]{width:71%}
.score-fill[data-score="72"]{width:72%}
.score-fill[data-score="73"]{width:73%}
.score-fill[data-score="74"]{width:74%}
.score-fill[data-score="75"]{width:75%}
.score-fill[data-score="76"]{width:76%}
.score-fill[data-score="77"]{width:77%}
.score-fill[data-score="78"]{width:78%}
.score-fill[data-score="79"]{width:79%}
.score-fill[data-score="80"]{width:80%}
.score-fill[data-score="81"]{width:81%}
.score-fill[data-score="82"]{width:82%}
.score-fill[data-score="83"]{width:83%}
.score-fill[data-score="84"]{width:84%}
.score-fill[data-score="85"]{width:85%}
.score-fill[data-score="86"]{width:86%}
.score-fill[data-score="87"]{width:87%}
.score-fill[data-score="88"]{width:88%}
.score-fill[data-score="89"]{width:89%}
.score-fill[data-score="90"]{width:90%}
.score-fill[data-score="91"]{width:91%}
.score-fill[data-score="92"]{width:92%}
.score-fill[data-score="93"]{width:93%}
.score-fill[data-score="94"]{width:94%}
.score-fill[data-score="95"]{width:95%}
.score-fill[data-score="96"]{width:96%}
.score-fill[data-score="97"]{width:97%}
.score-fill[data-score="98"]{width:98%}
.score-fill[data-score="99"]{width:99%}
.score-fill[data-score="100"]{width:100%}

/* --- Image grid ----------------------------------------------------------- */
.img-grid{margin-top:32px}
.img-grid img{aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:1px solid var(--line)}

/* --- Footer --------------------------------------------------------------- */
.footer-brand{margin-bottom:16px}
.footer-legal{display:flex;align-items:center;gap:14px}

/* --- Spacing rhythm utilities --------------------------------------------
   The design uses a fixed set of vertical steps between blocks. These replace
   one-off margin declarations and carry no other styling.
   ------------------------------------------------------------------------- */
.m0{margin:0}
.mt10{margin-top:10px}
.mt14{margin-top:14px}
.mt18{margin-top:18px}
.mt20{margin-top:20px}
.mt22{margin-top:22px}
.mt24{margin-top:24px}
.mt26{margin-top:26px}
.mt32{margin-top:32px}
.mt36{margin-top:36px}
.mb14{margin-bottom:14px}
.note-body{margin:10px 0 0}
.h3-gap{margin:26px 0 14px}
.h3-gap--sm{margin:22px 0 12px}

/* Contextual internal-link paragraph rendered by bcasino_related(). */
.related{margin:26px 0 0;max-width:78ch}