/* CasinosBuddy premium layer: dark art hero panels, homepage art, tiles, subtle polish.
   Loaded after the Tailwind build; uses its CSS variables. */
:root{--cb-gold:#e9b949;--cb-gold-soft:rgba(233,185,73,.28);--cb-hero-bg:#141c2c}

/* ---------- inner page hero panel (dark in both themes) ---------- */
.cb-hero{position:relative;overflow:hidden;isolation:isolate;min-height:230px;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(120% 140% at 0% 0%,rgba(70,95,255,.22) 0%,transparent 55%),var(--hero-bg,var(--cb-hero-bg));
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:0 0 0 1px rgba(233,185,73,.10) inset,0 24px 48px -28px rgba(22,25,80,.75)}
.cb-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,transparent 0%,transparent 60%,rgba(233,185,73,.08) 100%)}
.cb-hero>h1,.cb-hero>p{position:relative;z-index:2}
.cb-hero h1{color:#fff!important;letter-spacing:-.01em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.cb-hero h1::after{content:"";display:block;width:56px;height:3px;margin-top:14px;border-radius:3px;
  background:linear-gradient(90deg,var(--cb-gold),rgba(233,185,73,0))}
.cb-hero p{color:var(--color-gray-300)!important;max-width:36rem!important}
/* art keeps its 16:9 shape at the panel's height (subject never cropped) and melts into the panel via an alpha mask,
   so there is no painted seam whatever the panel colour or width */
.cb-art{position:absolute;top:0;right:0;height:100%;width:auto;aspect-ratio:16/9;max-width:80%;z-index:0}
.cb-art img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 40%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 40%)}
/* the shade fades out at the left like the image, or its edge shows as a step in the panel */
.cb-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(12,17,29,.35),transparent 35%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 40%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 40%)}
@media (min-width:1280px){.cb-hero{min-height:320px}}
@media (min-width:1600px){.cb-hero{min-height:360px}}
@media (max-width:1279px){
  .cb-hero{min-height:0}
  .cb-hero:has(.cb-art){padding-top:0!important}
  .cb-art{position:relative;width:auto;height:190px;margin:0 -24px 18px;top:auto;right:auto;bottom:auto;aspect-ratio:auto;max-width:none}
  /* the stacked art is a wide strip: keep the upper part, where the faces are */
  .cb-art img{object-position:72% 15%;-webkit-mask-image:none;mask-image:none}
  .cb-art::after{background:linear-gradient(0deg,var(--hero-bg,var(--cb-hero-bg)) 0%,rgba(20,28,44,0) 55%);-webkit-mask-image:none;mask-image:none}
}
@media (min-width:640px) and (max-width:1279px){.cb-art{margin:0 -32px 20px;height:clamp(240px,34vw,320px)}}
/* no art yet: keep a calm decorative glow */
.cb-hero:not(:has(.cb-art))::after{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(233,185,73,.18),rgba(70,95,255,.12) 45%,transparent 70%);z-index:-1}

/* ---------- homepage hero ---------- */
.cb-home-hero{isolation:isolate;box-shadow:0 0 0 1px rgba(233,185,73,.12) inset,0 30px 60px -30px rgba(22,25,80,.8)}
.cb-home-hero>.cb-art{max-width:72%}
.cb-home-hero>.cb-art::after{background:linear-gradient(0deg,rgba(22,25,80,.45),transparent 35%)}
.cb-home-hero>.absolute{z-index:1}
.cb-home-grid{z-index:2;grid-template-columns:minmax(0,600px)}
.cb-home-grid h1{text-shadow:0 2px 30px rgba(0,0,0,.4)}
@media (min-width:1024px){.cb-home-hero{min-height:560px;display:flex;align-items:center}}
/* 1024-1279: the inner-page rules above stack .cb-art; the homepage keeps its desktop art */
@media (min-width:1024px) and (max-width:1279px){
  .cb-home-hero>.cb-art{position:absolute;top:0;right:0;bottom:auto;height:100%;width:auto;margin:0;aspect-ratio:16/9;max-width:72%}
  .cb-home-hero>.cb-art img{object-position:right center}
  .cb-home-hero>.cb-art img,.cb-home-hero>.cb-art::after{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 40%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 40%)}
}
@media (max-width:1023px){
  .cb-home-hero>.cb-art{position:relative;width:auto;height:260px;margin:-24px -24px 8px;aspect-ratio:auto;max-width:none}
  .cb-home-hero>.cb-art img{object-position:78% 30%;-webkit-mask-image:none;mask-image:none}
  .cb-home-hero>.cb-art::after{background:linear-gradient(0deg,var(--color-brand-950) 0%,rgba(22,25,80,.2) 55%,rgba(22,25,80,0) 100%)}
}
@media (min-width:640px) and (max-width:1023px){.cb-home-hero>.cb-art{margin:-40px -40px 8px;height:340px}}

/* casino of the month: gold accent */
.cb-cotm{border-color:var(--cb-gold-soft)!important;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03))!important;
  box-shadow:0 0 0 1px rgba(233,185,73,.10),0 20px 50px -24px rgba(233,185,73,.35)}
.cb-cotm>p:first-child{color:var(--cb-gold)!important;font-weight:600}

/* ---------- homepage category tiles ---------- */
a.cb-tile{flex-direction:column;gap:0!important;padding:0!important;overflow:hidden}
a.cb-tile>span:last-child{display:block;padding:16px 20px 20px}
.cb-tile-img{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#141c2c;position:relative}
.cb-tile-img img{width:100%;height:100%;object-fit:cover;object-position:60% center;display:block;transition:transform .5s ease}
.cb-tile-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,17,29,.45),transparent 50%)}
a.cb-tile:hover .cb-tile-img img{transform:scale(1.05)}

/* ---------- light polish ---------- */
a.card,.card.cb-hero{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
a.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(70,95,255,.45)}
tbody tr{transition:background-color .2s ease}
.btn-primary{box-shadow:0 8px 20px -10px rgba(70,95,255,.8);transition:transform .2s ease,box-shadow .2s ease,background-color .2s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(70,95,255,.9)}
@media (prefers-reduced-motion:reduce){a.card,a.card:hover,.btn-primary,.btn-primary:hover,.cb-tile-img img{transition:none;transform:none}}

/* sidebar "NEW" badge (Wheel of Fortune) */
.cbw-new{margin-left:auto;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#1b1402;background:linear-gradient(180deg,#fff1c1,#e9b949)}

/* homepage stat cards: icon + label on one row, value underneath */
.cb-stats>.card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px}
.cb-stats>.card>span{grid-row:1;background:linear-gradient(135deg,rgba(70,95,255,.18),rgba(233,185,73,.16))!important;color:var(--cb-gold)!important}
.cb-stats>.card>p:nth-of-type(1){grid-row:1;margin-top:0!important;line-height:1.3}
.cb-stats>.card>p:nth-of-type(2){grid-column:1/-1;margin-top:14px!important;font-size:1.75rem}

/* review screenshots: each one sits under the h2 of the section it shows; a click enlarges it */
.cb-shot{margin:4px 0 24px}
.cb-shot a{display:block;overflow:hidden;border-radius:12px;border:1px solid var(--color-gray-200);background:var(--color-gray-900);cursor:zoom-in}
.dark .cb-shot a{border-color:var(--color-gray-800)}
.cb-shot img{display:block;width:100%;height:auto}
.cb-shot figcaption{margin-top:8px;font-size:13px;line-height:1.4;color:var(--color-gray-500)}
.cb-shot--mobile{max-width:240px}
.cb-shot-row{display:flex;gap:12px;align-items:flex-start;margin:4px 0 24px}
.cb-shot-row .cb-shot{margin:0;flex:3 1 0;min-width:0}
.cb-shot-row .cb-shot--mobile{flex:0 0 22%;max-width:none}
/* phones: the desktop and mobile shots stay side by side; a row of three puts the first on top */
@media (max-width:640px){
  .cb-shot-row{gap:8px}
  .cb-shot-row .cb-shot--mobile{flex:0 0 28%}
  .cb-shot-row figcaption{font-size:12px}
  .cb-shot-row:has(>.cb-shot:nth-child(3)){flex-wrap:wrap}
  .cb-shot-row:has(>.cb-shot:nth-child(3))>.cb-shot:first-child{flex:1 1 100%}
  .cb-shot-row:has(>.cb-shot:nth-child(3))>.cb-shot:not(:first-child){flex:1 1 0}
}
/* YouTube review at the end of a brand review: a thumbnail until clicked, then the player */
.cb-yt{position:relative;aspect-ratio:16/9;margin:4px 0 12px;overflow:hidden;border-radius:12px;background:#000}
.cb-yt button{display:block;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:none}
.cb-yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .2s}
.cb-yt button:hover img{opacity:1}
.cb-yt-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:14px;background:#f00}
.cb-yt-play::after{content:"";position:absolute;left:27px;top:14px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.cb-yt iframe{width:100%;height:100%;border:0;display:block}
.cb-yt-cap{font-size:13px;line-height:1.5;color:var(--color-gray-500)}

/* casino ranking tables become one card per casino on phones */
@media (max-width:640px){
  .cb-rank{min-width:0!important}
  .cb-rank thead{display:none}
  .cb-rank,.cb-rank tbody{display:block}
  .cb-rank tr{display:grid;grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"n c r" "b b b" "d d p" "a a a";column-gap:12px;row-gap:12px;padding:18px 20px}
  .cb-rank td{padding:0!important;text-align:left!important}
  .cb-rank td:nth-child(1){grid-area:n;align-self:center}
  .cb-rank td:nth-child(2){grid-area:c;align-self:center;min-width:0}
  .cb-rank td:nth-child(3){grid-area:b;padding:10px 12px!important;border-radius:10px;background:rgba(18,183,106,.08);font-size:15px}
  .cb-rank td:nth-child(4){grid-area:d}
  .cb-rank td:nth-child(5){grid-area:p}
  .cb-rank td:nth-child(6){grid-area:r;align-self:center}
  .cb-rank td:nth-child(7){grid-area:a;display:flex;gap:8px;white-space:normal!important}
  .cb-rank td:nth-child(7) a{flex:1 1 0;justify-content:center;margin:0!important}
  .cb-rank td:nth-child(3)::before,.cb-rank td:nth-child(4)::before,.cb-rank td:nth-child(5)::before{display:block;margin-bottom:2px;font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--color-gray-500)}
  .cb-rank td:nth-child(3)::before{content:"Welcome bonus"}
  .cb-rank td:nth-child(4)::before{content:"Min. deposit"}
  .cb-rank td:nth-child(5)::before{content:"Payout"}
}
#cb-lightbox{position:fixed;inset:0;margin:auto;max-width:min(1200px,95vw);max-height:92vh;padding:0;border:0;border-radius:12px;background:transparent}
#cb-lightbox::backdrop{background:rgba(0,0,0,.8)}
#cb-lightbox img{display:block;max-width:100%;max-height:92vh;margin:auto;border-radius:12px}