/* ============================================================
   DYUTAM INTEL — Reusable content components

   Every card here is used in at least two places (homepage plus an
   archive, sidebar or single template), which is why they live
   outside home.css.
   ============================================================ */

/* ============================================================
   COVER — image-led card with a gradient scrim
   ============================================================ */
.cover{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--border);
  display:flex;align-items:flex-end;cursor:pointer;isolation:isolate;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.cover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.cover .cimg{position:absolute;inset:0;z-index:0;
  background:repeating-linear-gradient(45deg,#2c3340,#2c3340 12px,#262c38 12px,#262c38 24px)}
.cover .cimg img{width:100%;height:100%;object-fit:cover;display:block}
.cover::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(7,10,14,.9) 4%,rgba(7,10,14,.38) 52%,rgba(7,10,14,.2) 100%)}
.cover .ctag{position:absolute;top:13px;left:13px;z-index:2;font-family:var(--font-mono);font-size:var(--type-label-floor);
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.32);backdrop-filter:blur(3px);padding:3px 8px;border-radius:5px}
.cover .cv{position:relative;z-index:2;padding:24px 26px;color:#fff}
.cover .cat{display:inline-block;color:rgba(255,255,255,.78);margin-bottom:10px}
.cover h3{font-family:var(--headline);font-weight:500;color:#fff;line-height:1.12;letter-spacing:-.015em;text-wrap:pretty}
.cover .cmeta{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:11.5px;color:rgba(255,255,255,.7)}
.cover .cmeta .dot-sep{background:rgba(255,255,255,.5)}
.cover.lead{min-height:clamp(350px,38vw,440px)}
.cover.lead h3{font-size:clamp(24px,2.6vw,34px);max-width:18ch}
.cover.sm{min-height:clamp(165px,17vw,196px)}
.cover.sm h3{font-size:19px}
.cover.md{min-height:clamp(240px,24vw,300px)}
.cover.md h3{font-size:22px}

/* ============================================================
   HEADLINE LIST — timeline of recent stories
   Sidebar + archive rails only; the homepage hero card uses the
   .hlp-* pulse-line styles in home.css.
   ============================================================ */
.hl-list{position:relative;margin-top:4px}
.hl-list::before{content:"";position:absolute;left:4px;top:18px;bottom:24px;width:1.5px;background:var(--border)}
.hl{display:grid;grid-template-columns:14px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);align-items:start}
.hl:last-child{border-bottom:none}
.hl-dot{width:9px;height:9px;border-radius:50%;background:var(--border-strong);margin-top:5px;
  box-shadow:0 0 0 3px var(--surface);position:relative;z-index:1;transition:background .18s}
.hl:hover .hl-dot{background:var(--accent-bright)}
.hl-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hl-time{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);font-weight:600}
.hl h4{font-family:var(--headline);font-weight:500;font-size:14.5px;line-height:1.3;margin-top:7px;color:var(--text);transition:color .18s}
.hl:hover h4{color:var(--accent-text)}

/* ============================================================
   GUIDE INDEX ROW — numbered editorial list
   ============================================================ */
.glist{display:flex;flex-direction:column}
.glist-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2vw,26px);align-items:center;
  padding:22px 0;border-top:1px solid var(--border);cursor:pointer;position:relative}
.glist-row:last-child{border-bottom:1px solid var(--border)}
.glist-row::before{content:"";position:absolute;left:-16px;top:16px;bottom:16px;width:2px;border-radius:2px;
  background:var(--accent-bright);transform:scaleY(0);transition:transform .24s}
.glist-row:hover::before{transform:scaleY(1)}
.glist-row .gn{font-family:var(--headline);font-weight:500;font-size:clamp(26px,2.4vw,34px);
  color:var(--text-dim);font-variant-numeric:tabular-nums;line-height:1;transition:color .2s;min-width:1.4em}
.glist-row .gc h4{font-family:var(--headline);font-weight:500;font-size:clamp(18px,1.7vw,22px);line-height:1.22;
  letter-spacing:-.012em;transition:color .2s;text-wrap:pretty}
.glist-row .gc .gm{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap;
  font-size:11.5px;color:var(--text-dim)}
.glist-row .ga{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;
  color:var(--text-dim);flex-shrink:0;transition:.22s}
.glist-row:hover .gn,.glist-row:hover .gc h4{color:var(--accent-text)}
.glist-row:hover .ga{background:var(--accent-bright);border-color:var(--accent-bright);color:var(--accent-ink);transform:translateX(2px)}

/* ============================================================
   TEXT CARD — sports guides, generic editorial tiles
   ============================================================ */
.sg{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);cursor:pointer;min-height:172px;position:relative;overflow:hidden;
  transition:border-color .22s,box-shadow .22s}
.sg::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent-bright);transition:width .3s}
.sg:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.sg:hover::after{width:100%}
.sg .k{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--label)}
.sg h4{font-family:var(--headline);font-weight:500;font-size:20px;line-height:1.22;letter-spacing:-.012em;transition:color .2s;text-wrap:pretty}
.sg:hover h4{color:var(--accent-text)}
.sg .dek{font-size:13.5px;color:var(--text-muted);line-height:1.55}
.sg .m{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--text-dim)}
.sg .m .ar{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:var(--text-dim);transition:.2s}
.sg:hover .m .ar{background:var(--accent-bright);border-color:var(--accent-bright);color:var(--accent-ink);transform:translateX(2px)}

/* ============================================================
   SLOT REVIEW — magazine spread + scored rail
   ============================================================ */
.srev-feature{display:grid;grid-template-columns:1.05fr 1fr;border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface);box-shadow:var(--shadow);margin-bottom:26px}
.srev-feature .art{position:relative;min-height:380px}
.srev-feature .art .ph{height:100%;border:none;border-radius:0}
.srev-feature .art .badges{position:absolute;top:16px;left:16px;display:flex;gap:8px;flex-wrap:wrap;z-index:2}
.srev-feature .art .sc-badge{right:18px;bottom:18px;z-index:2}
.srev-feature .body{padding:clamp(26px,3vw,40px);display:flex;flex-direction:column}
.srev-feature .rname{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
/* The headline is the game's name alone (dyi_slot_name()), so it sets on one or
   two lines and can be led tight rather than running three lines of SEO title. */
.srev-feature .rname h3{font-family:var(--headline);font-weight:500;font-size:clamp(24px,2.6vw,34px);
  letter-spacing:-.015em;line-height:1.04;text-wrap:balance}
.srev-feature .rname h3 a{transition:color .2s}
.srev-feature .rname h3 a:hover{color:var(--accent-text)}
.srev-feature .rname .prov{font-size:11.5px;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
/* Byline row: date and the volatility meter, which used to be a second badge
   sitting on the artwork beside the studio. */
.sr-metarow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.sr-byline{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
/* Clamped, so a long excerpt in the verdict slot can never push the button out
   of the card. */
.srev-feature .verdict{font-family:var(--headline);font-style:italic;font-size:clamp(17px,1.6vw,20px);line-height:1.5;
  color:var(--text);margin:22px 0 26px;padding-left:20px;border-left:2px solid var(--accent-line);text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.srev-feature .btn{margin-top:26px;align-self:flex-start}
/* Four-up numerals — the single review's hero spec sheet (.srev-facts). The
   homepage feature uses .sr-strip below, which adds the rules and the RTP
   footnote line it needs for one wide first column. */
.srev-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:auto;padding-top:22px;border-top:1px solid var(--border)}
.srev-stats .s .v{font-family:var(--font-mono);font-weight:600;font-size:16px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.srev-stats .s .k{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.09em;margin-top:3px;font-weight:600;white-space:nowrap}
.srev-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.srev-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);
  cursor:pointer;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s;display:flex;flex-direction:column}
/* The card is an <article>: the title carries its one announced, focusable
   link, and .srev-link (aria-hidden, tabindex -1) stretches the click target
   over the card — the nr-feat-link idiom. An ::after on the title anchor
   can't do this job: the clamped h4 clips it. z-index 3 clears the badges. */
.srev-card .srev-link{position:absolute;inset:0;z-index:3}
.srev-card:hover,.srev-card:focus-within{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.srev-card .art{position:relative;aspect-ratio:16/10;overflow:hidden}
.srev-card .art .ph{height:100%;border:none;border-radius:0}
.srev-card .art .ph img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.srev-card:hover .art .ph img,.srev-card:focus-within .art .ph img{transform:scale(1.045)}
.srev-card .art .sc-badge{right:10px;bottom:10px;z-index:2}
.srev-card .art .prov{position:absolute;top:10px;left:10px;z-index:2}
.srev-card .ci{padding:16px 17px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
/* Both clamps hold the rail to one rhythm: every card breaks at the same two
   heights, so the stat rows across the row sit on a single baseline. */
.srev-card .ci h4{font-family:var(--headline);font-weight:500;font-size:18px;line-height:1.2;
  letter-spacing:-.015em;transition:color .2s;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.srev-card:hover .ci h4,.srev-card:focus-within .ci h4{color:var(--accent-text)}
.srev-card .ci .verdict-sm{font-size:13.5px;color:var(--text-muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr-cfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}
.sr-cfoot .rtp{display:flex;align-items:baseline;gap:6px}
.sr-cfoot .rtp span{font-size:var(--type-label-floor);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.sr-cfoot .rtp b{font-family:var(--font-mono);font-weight:600;font-size:14px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--text)}

/* ---- Scored numerals ----------------------------------------------------
   Both plates say what the scale is: a bare "9.5" over artwork never did. --- */
.sr-plate{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 14px 9px;border-radius:13px;color:#fff;
  background:color-mix(in srgb,#04070b 72%,transparent);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 26px rgba(0,0,0,.34);
  backdrop-filter:blur(8px) saturate(1.3);-webkit-backdrop-filter:blur(8px) saturate(1.3)}
.sr-plate .n{font-family:var(--font-mono);font-weight:600;font-size:27px;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sr-plate .n small{font-size:12px;font-weight:500;opacity:.8;margin-left:2px;letter-spacing:0}
.sr-plate .c{font-size:var(--type-label-floor);font-weight:700;letter-spacing:.17em;text-transform:uppercase;opacity:.9}
.srev-feature .art .sr-plate{right:18px;bottom:18px}
.sr-pill{position:absolute;z-index:2;right:10px;bottom:10px;
  display:inline-flex;align-items:baseline;padding:5px 9px;border-radius:9px;color:#fff;
  font-family:var(--font-mono);font-weight:600;font-size:14px;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,#04070b 70%,transparent);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sr-pill small{font-size:var(--type-label-floor);font-weight:500;opacity:.75;margin-left:1px}

/* ---- Volatility meter ---------------------------------------------------
   Five steps, normalised by dyi_volatility() from six authored formats, so a
   rail of reviews can be compared down the row. Ink rather than accent: the
   value is neutral information, not a rating. ---------------------------- */
.sr-meter{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sr-meter .bars{display:inline-flex;gap:3px;align-items:center}
.sr-meter .bars i{display:block;width:4px;height:11px;border-radius:1.5px;background:var(--border-strong)}
.sr-meter .bars i.on{background:color-mix(in srgb,var(--text) 78%,transparent)}
.sr-meter .t{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--label)}

/* ---- Feature numeric strip ----------------------------------------------
   Studio and volatility live on the artwork, so the four slots here carry four
   numbers that appear nowhere else on the card. The first column is wider: it
   holds the default RTP plus the operator alternates on a footnote line. ---- */
.sr-strip{display:grid;grid-template-columns:1.42fr 1fr 1fr 1.02fr;
  margin-top:auto;padding-top:22px;border-top:1px solid var(--border)}
.sr-strip.n1{grid-template-columns:1fr}
.sr-strip.n2{grid-template-columns:1fr 1fr}
.sr-strip.n3{grid-template-columns:1.3fr 1fr 1fr}
.sr-strip .s{padding-inline:18px;border-left:1px solid var(--border);min-width:0}
.sr-strip .s:first-child{padding-left:0;border-left:none}
.sr-strip .v{font-family:var(--font-mono);font-weight:600;font-size:18.5px;line-height:1.1;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.sr-strip .k{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-dim);margin-top:7px}
.sr-strip .alt{font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:-.01em;
  color:var(--text-dim);margin-top:6px}
.sr-strip .alt b{font-family:var(--font-sans);font-weight:700;font-size:var(--type-label-floor);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);margin-right:5px}
@media(max-width:1100px){
  .sr-strip,.sr-strip.n3{grid-template-columns:1fr 1fr;row-gap:20px}
  .sr-strip .s:nth-child(3){padding-left:0;border-left:none}
}
@media(max-width:880px){.srev-feature{grid-template-columns:1fr}.srev-feature .art{min-height:240px}.srev-rail{grid-template-columns:1fr 1fr}.srev-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
  .srev-rail{grid-template-columns:1fr}
  .sr-strip .s{padding-inline:14px}
  .srev-feature .btn{width:100%;justify-content:center}
}

/* ============================================================
   CASINO REVIEW — score ring, tag chips, ranked list

   The homepage feature panel these once served is now the dealt hand
   in home.css. What is left here is shared by the single templates,
   the archive and the sidebar.
   ============================================================ */
.score-ring{margin-left:auto;width:64px;height:64px;flex-shrink:0;position:relative;display:grid;place-items:center}
.score-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.score-ring .ring-bg{stroke:var(--border)}
.score-ring .ring-fg{stroke:var(--accent-bright)}
.score-ring .sv{font-family:var(--font-mono);font-weight:600;font-size:18px;font-variant-numeric:tabular-nums}
.rev-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

.rev-list{display:flex;flex-direction:column}
.rev-row{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:16px;padding:16px 4px;
  border-bottom:1px solid var(--border);position:relative;transition:background .2s}
.rev-row::before{content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:2px;border-radius:2px;
  background:var(--accent-bright);transform:scaleY(0);transition:transform .22s}
.rev-row:hover::before{transform:scaleY(1)}
.rev-row:hover .nm{color:var(--accent-text)}
.rev-row .rk{font-family:var(--font-mono);font-size:12.5px;color:var(--text-dim);width:22px;font-variant-numeric:tabular-nums}
.rev-row .rl{width:40px;height:40px;border-radius:var(--r-sm)}
.rev-row .ri{min-width:0}
.rev-row .ri .nm{font-weight:600;font-size:15px;transition:color .2s}
.rev-row .ri .st{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-dim);margin-top:2px}
.rev-row .rscore{font-family:var(--font-mono);font-weight:600;font-size:16px;text-align:right;font-variant-numeric:tabular-nums}
.rev-row .rscore small{display:block;font-weight:500;font-size:var(--type-label-floor);color:var(--text-dim)}

/* ============================================================
   TOOL / VERIFIER CARDS
   ============================================================ */
.tool{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:22px;display:flex;flex-direction:column;gap:16px;min-height:188px;position:relative;overflow:hidden;
  transition:border-color .22s,box-shadow .22s;cursor:pointer;
}
.tool::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent-bright);transition:width .3s}
.tool:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.tool:hover::after{width:100%}
.tool-ico{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--surface-3);color:var(--text-muted);border:1px solid var(--border)}
.tool-ico svg{width:20px;height:20px}
.tool h4{font-size:17px;font-weight:600;letter-spacing:-.01em}
.tool p{font-size:13.5px;color:var(--text-muted);line-height:1.55;flex:1}
.tool-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tool-tag{font-size:11px;letter-spacing:.09em;color:var(--text-dim);text-transform:uppercase;font-weight:600;white-space:nowrap}
.tool .go{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface-3);color:var(--text);transition:.2s}
.tool:hover .go{background:var(--accent-bright);color:var(--accent-ink);transform:translateX(2px)}
.tool.feat{background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.tool.feat .term{font-family:var(--font-mono);font-size:11.5px;background:#04070b;color:#cfe;border-radius:var(--r-sm);
  padding:14px;line-height:1.75;border:1px solid var(--border-strong);flex:1;overflow:hidden}
.tool.feat .term .pr{color:var(--accent-text)}
.tool.feat .term .dim{color:#6b8}
.tool.feat .term .ok{color:#3fe8a8}

.vrf{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px;
  display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;cursor:pointer;
  transition:border-color .22s,box-shadow .22s}
.vrf::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent-bright);transition:width .3s}
.vrf:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.vrf:hover::after{width:100%}
.vrf-h{display:flex;align-items:center;gap:13px}
.vrf-logo{width:44px;height:44px;border-radius:var(--r-sm);flex-shrink:0;display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--border);font-weight:700;font-size:17px;color:var(--text-muted)}
.vrf-h .nm{font-weight:600;font-size:16px;letter-spacing:-.01em}
.vrf-h .ct{font-size:11.5px;color:var(--text-dim);font-weight:600;margin-top:2px;display:flex;align-items:center;gap:7px}
.vrf-h .ct .ok{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 6px color-mix(in srgb,var(--up) 60%,transparent)}
.vrf-sub{font-size:13.5px;color:var(--text-muted);line-height:1.55;margin-top:-6px}
.vrf-games{display:flex;flex-wrap:wrap;gap:6px}
.vgame{font-size:11.5px;letter-spacing:.01em;padding:5px 10px;border-radius:6px;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);transition:.16s}
.vrf:hover .vgame{border-color:var(--border-strong)}
.vgame.more{color:var(--text);border-color:var(--border-strong);background:var(--surface-3);font-weight:600}
.vrf-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border)}
.vrf-foot .open{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:7px;white-space:nowrap}
.vrf-foot .go{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface-3);color:var(--text);transition:.2s}
.vrf:hover .vrf-foot .go{background:var(--accent-bright);color:var(--accent-ink);transform:translateX(2px)}

/* ============================================================
   PROVIDER LOCKUP — the publisher wall
   Each studio sits on a filled tile carrying its real mark, with the
   review count on a live dot underneath. Scoped to .providers so the
   short .pv class can't reach the studio line on slot reviews.
   ============================================================ */
.providers .pv{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
/* Plates sit on the band's --surface-3 fill, so they lift to --surface
   (white on paper, panel on slate) the same way the reviews-hand cards do. */
.pv-tile{width:100%;aspect-ratio:2.45/1;border-radius:var(--r);background:var(--surface);
  display:grid;place-items:center;padding:14px 20px;cursor:pointer;position:relative;overflow:hidden;
  outline:1px solid var(--border);outline-offset:-1px;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),outline-color .22s,box-shadow .22s}
.pv:hover .pv-tile{transform:translateY(-3px);outline-color:var(--border-strong);box-shadow:var(--shadow)}

/* The mark is painted as a mask over currentColor, so one file reads as dark
   ink on paper and light ink on slate — no second set of assets for dark mode.
   --lgh is a per-studio optical height: fitting a 5:1 wordmark and a stacked
   lockup to the same box makes them read at wildly different sizes. */
/* The tile takes its height from its column via aspect-ratio, so on a narrow
   column the box can end up shorter than a tall mark's --lgh. min() lets the
   mark shrink with the tile rather than spill past the padding and get cut. */
.pv-lg{width:100%;height:min(var(--lgh,40px),100%);background:currentColor;color:var(--text-muted);
  -webkit-mask:var(--lg) center/contain no-repeat;mask:var(--lg) center/contain no-repeat;
  transition:color .22s}
.pv:hover .pv-lg{color:var(--text)}
/* Marks built from filled shapes rather than letterforms (a logo sitting in a
   coloured pill) mask down to a solid blob, so they render as an <img> —
   grey-treated with a filter so one full-colour mark cannot hijack an
   otherwise uniform grey wall. invert() under the dark theme keeps the
   mark's internal contrast while flipping it to read on slate, the same
   dark-on-light -> light-on-dark trade the masked marks get for free. */
.pv-im{display:block;width:100%;height:min(var(--lgh,40px),100%);object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:opacity .22s}
.pv:hover .pv-im{opacity:1}
[data-theme="dark"] .pv-im{filter:grayscale(1) invert(1)}

/* Fallback lockup for a studio we hold no logo file for. */
.pv-wm{font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);
  font-size:17px;text-align:center;line-height:1.05;transition:color .2s}
.pv:hover .pv-wm{color:var(--text)}
.pv-wm small{display:block;font-weight:600;font-size:10px;letter-spacing:.2em;color:var(--text-dim);margin-top:5px}
/* Studios with long legal names ("Alchemy Gaming (Games Global)") step down
   a size so the lockup still fits the tile without clipping. */
.pv-wm.long{font-size:13px;letter-spacing:.01em}
.pv-wm.long small{font-size:9px;letter-spacing:.09em;margin-top:4px}

.pv-note{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-dim);padding-left:2px}
.pv-note b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.pv-dot{width:7px;height:7px;border-radius:50%;background:var(--up);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 18%,transparent)}

/* Per-studio artwork + optical height. Paths resolve from this stylesheet,
   i.e. assets/css/ -> assets/logos/. */
.pv-l-hacksaw-gaming{--lg:url(../logos/hacksaw-gaming.svg);--lgh:28px}
.pv-l-pragmatic-play{--lg:url(../logos/pragmatic-play.svg);--lgh:56px}
.pv-l-nolimit-city{--lg:url(../logos/nolimit-city.svg);--lgh:34px}
.pv-l-shady-lady{--lg:url(../logos/shady-lady.svg);--lgh:46px}
.pv-l-netent{--lg:url(../logos/netent.svg);--lgh:23px}
.pv-l-playn-go{--lgh:36px}
.pv-l-push-gaming{--lg:url(../logos/push-gaming.png);--lgh:36px}
.pv-l-red-tiger{--lg:url(../logos/red-tiger.svg);--lgh:36px}
.pv-l-twist-gaming{--lg:url(../logos/twist-gaming.svg);--lgh:34px}
.pv-l-alchemy-gaming-games-global{--lg:url(../logos/alchemy-gaming-games-global.png);--lgh:60px}