/* ============================================================
   DYUTAM INTEL — Single article, page, slot review, casino review
   Includes the long-form content styles used by both the front end
   and the block editor (editor.css imports the same rules).
   ============================================================ */

/* ============================================================
   ARTICLE HEADER — CryptoSlate-style hero
   The featured image bleeds in from the right and fades into the
   page background; category / title / dek / meta sit in the clear
   left zone and read as if laid over the image. The byline never
   appears here — the author lives in .author-box below the body.
   ============================================================ */
.art-head{border-bottom:1px solid var(--border);background:var(--surface-2);position:relative;z-index:1}
.art-head .inner{max-width:72ch}
.art-head .cat-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.art-head .crumbs{margin-bottom:12px}
.art-head h1{font-family:var(--headline);font-weight:var(--headline-weight,500);letter-spacing:-.022em;
  line-height:1.08;font-size:clamp(30px,4.6vw,54px);margin-top:14px;text-wrap:pretty;max-width:20ch}
.art-head .dek{color:var(--text-muted);font-size:clamp(16px,1.55vw,20px);line-height:1.55;
  margin-top:16px;max-width:48ch;text-wrap:pretty}
.art-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;
  font-size:12px;color:var(--text-dim);letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.art-meta time{font-variant-numeric:tabular-nums}
/* Keep .who rules only so any residual markup doesn't explode layout;
   header intentionally omits the byline (author-box is post-body). */
.art-meta .who{display:none}

/* Default hero (e.g. static pages): large card inside the wrap */
.art-hero{position:relative;margin-top:clamp(18px,2.4vw,28px);margin-bottom:clamp(8px,1.2vw,16px)}
.art-hero .ph{aspect-ratio:16/9;border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden}
.art-hero .ph img,.art-hero .ph .wp-post-image{width:100%;height:100%;object-fit:cover;display:block}
.art-hero figcaption{font-size:11.5px;color:var(--text-dim);margin-top:10px;letter-spacing:.02em}

/* ---------- No thumbnail: simple masthead, no image layer ---------- */
.art-head.no-hero .inner{max-width:72ch;padding:clamp(28px,4.2vw,52px) 0 clamp(26px,3.6vw,42px)}

/* ---------- With thumbnail: featured image as the hero background ----------
   The image is contained to the body+sidebar measure (the header .wrap holds
   the same grid the article body uses, so the box lines up edge-to-edge with
   the content below) and sits *behind* the whole title/dek block. It always
   covers the full box; a horizontal alpha ramp fades the image from highly
   transparent (under the type, on the left) to fully opaque (on the right),
   so it reads as one continuous image — not a text panel beside a picture. */
.art-head.has-hero{background:none;border-bottom:none;padding-block:clamp(18px,2.4vw,30px)}
.art-head.has-hero .art-hero-box{position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow);
  background:var(--surface-2);min-height:clamp(300px,30vw,460px);
  display:flex;flex-direction:column;justify-content:center}
.art-head.has-hero .dek{max-width:34ch}

/* image layer — fills the whole box, faded left → opaque right */
.art-head.has-hero .art-hero{position:absolute;inset:0;margin:0;z-index:0;pointer-events:none;background:none}
.art-head.has-hero .art-hero .ph,.art-head.has-hero .art-hero .art-hero-ph{
  position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;border:none;border-radius:0;box-shadow:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.28) 40%,rgba(0,0,0,.66) 62%,#000 82%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.28) 40%,rgba(0,0,0,.66) 62%,#000 82%)}
.art-head.has-hero .art-hero .ph img,.art-head.has-hero .art-hero .art-hero-ph img,
.art-head.has-hero .art-hero .ph .wp-post-image,.art-head.has-hero .art-hero .art-hero-ph .wp-post-image{
  width:100%;height:100%;object-fit:cover;display:block}
.art-head.has-hero .art-hero .ph-fb{width:100%;height:100%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--surface-3),var(--surface));font-size:clamp(48px,8vw,96px);
  color:var(--text-dim);font-family:var(--headline);font-weight:500}

/* soft scrim over the text side only — lifts contrast for the type without
   hiding the photo; fades out well before the image's vivid zone. */
.art-head.has-hero .art-hero-box::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--surface-2) 0%,color-mix(in srgb,var(--surface-2) 52%,transparent) 34%,transparent 56%)}

/* text overlay — left reading column, kept over the faded side */
.art-head.has-hero .inner{position:relative;z-index:2;max-width:min(560px,56%);
  padding:clamp(26px,3.4vw,44px) clamp(24px,3vw,40px)}

/* image credit — small chip tucked into the image's opaque corner */
.art-head.has-hero .art-hero-credit{position:absolute;right:clamp(12px,2vw,20px);bottom:clamp(10px,1.6vw,15px);
  z-index:2;font-size:11px;letter-spacing:.02em;color:#fff;background:rgba(10,14,20,.42);
  padding:4px 9px;border-radius:5px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* ---------- Narrow screens: text sits at the top over the faded top of the
   image; the picture ramps to full opacity toward the bottom of the box.
   The scrim is tied to the text block (.inner background) rather than the box,
   so it always covers the type no matter how many lines the title runs. ---------- */
@media(max-width:860px){
  .art-head.has-hero .art-hero-box{min-height:clamp(430px,108vw,600px);justify-content:flex-start}
  .art-head.has-hero .dek{max-width:52ch}
  .art-head.has-hero .art-hero .ph,.art-head.has-hero .art-hero .art-hero-ph{
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.34) 44%,rgba(0,0,0,.8) 74%,#000 92%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.34) 44%,rgba(0,0,0,.8) 74%,#000 92%)}
  .art-head.has-hero .art-hero-box::before{display:none}
  .art-head.has-hero .inner{max-width:none;
    padding:clamp(22px,5vw,30px) clamp(20px,5vw,28px) clamp(40px,11vw,64px);
    background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 90%,transparent) 0%,color-mix(in srgb,var(--surface-2) 88%,transparent) 78%,transparent 100%)}
}

/* ============================================================
   BODY LAYOUT
   Named .art-body, not .art — the review heroes below use .art for
   their media block, and a bare .art rule would pad those too.
   ============================================================ */
.art-body{padding-block:clamp(32px,4.4vw,58px)}
/* Article + TOC sidebar are a CENTRED CLUSTER. The reading column is a track
   sized to its own measure (45rem ≈ the old 68ch), NOT a 1fr track that
   stretches across the wide shell — otherwise the capped prose strands a big
   gap between the text and the sidebar. justify-content:center then centres the
   [content · gutter · sidebar] group in the full-width shell, so the leftover
   space becomes symmetric side margins instead of one lopsided middle gap. */
.art-layout{display:grid;grid-template-columns:minmax(0,45rem) 336px;gap:clamp(32px,3vw,48px);
  align-items:start;justify-content:center}
/* Page/no-sidebar: one column, held to the same reading measure and centred. */
body.no-sidebar .art-layout{grid-template-columns:minmax(0,45rem);justify-content:center}
body.no-sidebar .art-layout>div:first-child{max-width:45rem;margin-inline:auto}
@media(max-width:1040px){
  .art-layout,body.no-sidebar .art-layout{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   LONG-FORM CONTENT
   ============================================================ */
/* Reading body — editorial serif, generous size, comfortable rhythm.
   Size floats 18px (phone) → 20px (≈600px+ viewport); large-screen overrides
   at the file's end push it further. The reading MEASURE (≈66–70ch, Medium-ish)
   is now owned by the .art-layout content track (45rem, see BODY LAYOUT), which
   fixes the stranded gap between the text and the sidebar — so prose just fills
   its column; no separate width cap here. */
.prose{font-family:var(--reading);font-size:clamp(18px,0.5vw + 17px,20px);
  line-height:1.75;color:var(--text);max-width:none;letter-spacing:-.003em;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased}
.prose>*+*{margin-top:1.5em}
.prose p{text-wrap:pretty}
.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{
  font-family:var(--headline);font-weight:var(--headline-weight,500);letter-spacing:-.018em;
  line-height:1.2;color:var(--text);text-wrap:balance;scroll-margin-top:96px}
.prose h2{font-size:clamp(24px,2.6vw,32px);margin-top:1.6em}
.prose h3{font-size:clamp(20px,2vw,24px);margin-top:1.45em}
.prose h4{font-size:18px;margin-top:1.3em}
.prose h5,.prose h6{font-size:15px;letter-spacing:.02em;text-transform:uppercase;
  font-family:var(--font-sans);font-weight:700;color:var(--text-muted);margin-top:1.4em}
/* A heading should sit close to the text it introduces — the space belongs
   above the heading, not between it and its first paragraph. */
.prose :is(h2,h3,h4,h5,h6)+*{margin-top:.55em}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--accent-bright)}
.prose strong,.prose b{font-weight:600}
.prose em{font-style:italic}
.prose ul,.prose ol{padding-left:1.35em}
.prose li+li{margin-top:.4em}
.prose ul li::marker{color:var(--accent-bright)}
.prose ol li::marker{color:var(--text-dim);font-family:var(--font-mono);font-size:.86em}
.prose img,.prose video,.prose iframe{border-radius:var(--r);max-width:100%}
.prose figure{margin-block:1.8em}
.prose figcaption{font-size:12px;color:var(--text-dim);margin-top:10px;letter-spacing:.02em;text-align:center}
.prose hr{border:none;height:1px;background:var(--border);margin-block:2.4em}

.prose blockquote{
  font-family:var(--headline);font-style:italic;font-size:clamp(18px,1.8vw,22px);line-height:1.45;
  padding-left:20px;border-left:2px solid var(--accent-line);color:var(--text);margin-block:1.8em}
.prose blockquote p+p{margin-top:.6em}
.prose blockquote cite{display:block;font-family:var(--font-sans);font-style:normal;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);margin-top:14px;font-weight:600}

.prose code{font-family:var(--font-mono);font-size:.86em;background:var(--surface-3);
  border:1px solid var(--border);border-radius:5px;padding:2px 6px}
.prose pre{background:#04070b;color:#cfe;border:1px solid var(--border-strong);border-radius:var(--r);
  padding:18px 20px;overflow-x:auto;font-family:var(--font-mono);font-size:13px;line-height:1.7}
.prose pre code{background:none;border:none;padding:0;font-size:inherit;color:inherit}

.prose table{width:100%;border-collapse:collapse;font-family:var(--font-sans);font-size:14.5px;display:block;overflow-x:auto}
.prose table thead{background:var(--surface-3)}
.prose table th{text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--text-muted);padding:12px 14px;white-space:nowrap}
.prose table td{padding:12px 14px;border-top:1px solid var(--border)}
.prose table tbody tr:hover{background:var(--surface-2)}

.prose .wp-block-table{overflow-x:auto}
.prose .wp-block-image{margin-block:1.8em}
.prose .wp-block-button__link{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;
  padding:12px 20px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
  text-decoration:none}
.prose .wp-block-separator{border:none;height:1px;background:var(--border)}
.prose .wp-block-pullquote{border-block:1px solid var(--border);padding-block:1.6em;text-align:center}
.prose .wp-block-embed__wrapper{position:relative}
.prose .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto}

/* alignment support */
.prose .alignwide{width:min(112%,calc(100vw - var(--gut) * 2));margin-inline:auto;max-width:none}
.prose .alignfull{width:calc(100vw - (100vw - 100%));margin-inline:calc(50% - 50vw);max-width:100vw;border-radius:0}
.prose .alignleft{float:left;margin:.4em 1.6em 1.2em 0;max-width:min(44%,340px)}
.prose .alignright{float:right;margin:.4em 0 1.2em 1.6em;max-width:min(44%,340px)}
.prose .aligncenter{margin-inline:auto;text-align:center}
@media(max-width:760px){
  .prose .alignleft,.prose .alignright{float:none;margin-inline:0;max-width:100%}
  .prose .alignwide{width:100%}
}

/* first paragraph reads as a standfirst — a touch larger, softer ink */
.prose>p:first-child{font-size:1.14em;line-height:1.6;color:var(--text-muted)}

/* ============================================================
   ARTICLE FURNITURE — tags, share, author, related
   ============================================================ */
.art-tags{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:clamp(30px,4vw,46px);
  padding-top:24px;border-top:1px solid var(--border)}
.art-tags .lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--label)}

.art-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.art-share .lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--label);margin-right:2px}
.art-share a,.art-share button{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);
  display:grid;place-items:center;color:var(--text-muted);background:var(--surface);transition:.18s}
.art-share a:hover,.art-share button:hover{border-color:var(--accent-bright);color:var(--accent);transform:translateY(-2px)}
.art-share svg{width:16px;height:16px}

.author-box{display:flex;gap:18px;align-items:flex-start;margin-top:clamp(30px,4vw,44px);
  padding:24px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}
.author-box img{width:56px;height:56px;border-radius:50%;border:1px solid var(--border);flex-shrink:0}
.author-box .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
.author-box h4{font-family:var(--headline);font-weight:500;font-size:20px;letter-spacing:-.012em;margin-top:5px}
.author-box p{font-size:14px;color:var(--text-muted);line-height:1.65;margin-top:8px;max-width:64ch}
@media(max-width:560px){.author-box{flex-direction:column}}

.related{margin-top:clamp(40px,5vw,66px);padding-top:clamp(30px,4vw,44px);border-top:1px solid var(--border)}

/* ============================================================
   TABLE OF CONTENTS (sidebar)
   ============================================================ */
/* Selectors carry .widget too: the generic `.widget li a` rule in
   archive.css is more specific than a bare `.toc a` and would flatten
   the two-column numbering back to a block. */
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;border-bottom:1px solid var(--border)}
.toc li:last-child{border-bottom:none}
.widget.toc a,.toc a{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;padding:11px 0;
  font-family:var(--font-sans);font-weight:450;font-size:14.5px;line-height:1.5;color:var(--text);
  transition:color .18s,padding-left .18s}
.widget.toc a::before,.toc a::before{content:counter(toc,decimal-leading-zero);
  font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-dim)}
.widget.toc a:hover,.widget.toc a.active,.toc a:hover,.toc a.active{color:var(--accent);padding-left:0}
.widget.toc a:hover::before,.toc a:hover::before,.widget.toc a.active::before,.toc a.active::before{color:var(--accent)}
.widget.toc li.h3 a,.toc li.h3 a{padding-left:16px;font-size:13.5px}

/* reading progress bar under the sticky header */
.read-bar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:210;pointer-events:none;background:transparent}
.read-bar i{display:block;height:100%;width:0;background:var(--accent-bright);
  box-shadow:0 0 8px color-mix(in srgb,var(--accent-bright) 60%,transparent);transition:width .1s linear}

/* ============================================================
   SLOT REVIEW — hero spread + spec sheet
   ============================================================ */
.srev-hero{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:clamp(26px,3.4vw,40px)}
.srev-hero .art{position:relative;min-height:400px}
.srev-hero .art .ph{height:100%;border:none;border-radius:0}
.srev-hero .art .badges{position:absolute;top:16px;left:16px;display:flex;gap:8px;flex-wrap:wrap;z-index:2}
.srev-hero .art .sc-badge{right:18px;bottom:18px;z-index:2}
.srev-hero .body{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column}
.srev-hero h1{font-family:var(--headline);font-weight:var(--headline-weight,500);
  font-size:clamp(28px,3.4vw,44px);letter-spacing:-.02em;line-height:1.06;margin-top:12px}
.srev-hero .prov{font-size:11.5px;color:var(--text-dim);letter-spacing:.07em;text-transform:uppercase;font-weight:600}
.srev-hero .verdict{font-family:var(--headline);font-style:italic;font-size:clamp(17px,1.7vw,21px);line-height:1.45;
  color:var(--text);margin:20px 0;padding-left:18px;border-left:2px solid var(--border-strong);text-wrap:pretty}
.srev-hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
@media(max-width:880px){.srev-hero{grid-template-columns:1fr}.srev-hero .art{min-height:250px}}

/* ---------- Score + verdict lockup ----------
   Top rule only: the facts block below carries its own, and when the body
   column is exactly as tall as the art, `margin-top:auto` resolves to 0 and
   the two rules land 4px apart — which reads as a rendering fault. */
.srev-take{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;
  margin:22px 0 0;padding:18px 0 20px;border-top:1px solid var(--border)}
/* .score-ring is `place-items:center`, which aligns each item inside its own
   track but leaves align-content at normal — i.e. stretch. That is invisible
   with a single child; the score + label pair here makes the two auto rows
   split the full 96px, throwing the number up and the label down onto the
   stroke. align-content:center sizes the rows to content and centres the pair. */
.srev-take .score-ring{margin-left:0;width:96px;height:96px;align-content:center;gap:3px}
.srev-take .score-ring .sv{font-size:26px;line-height:1}
.srev-take .score-ring .sl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dim);line-height:1}
.srev-take .verdict{margin:0;padding:0;border:0;font-size:clamp(16.5px,1.6vw,20px)}
@media(max-width:520px){.srev-take{grid-template-columns:1fr;justify-items:start;gap:14px}}

/* ---------- The whole spec sheet, in the hero beside the art ----------
   Four headline numbers plus every remaining field, so nobody has to scroll
   to find out what the game is — and so no value is printed twice. */
.srev-facts{margin-top:auto;padding-top:22px;border-top:1px solid var(--border)}
.srev-facts .srev-stats{margin-top:0;padding-top:0;border-top:0}
.srev-spec{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;margin-top:20px}
.srev-spec .s{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 0;border-top:1px solid var(--border)}
.srev-spec .k{font-size:11.5px;font-weight:600;color:var(--text-dim);letter-spacing:.02em;white-space:nowrap}
.srev-spec .v{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--text-muted);
  font-variant-numeric:tabular-nums;text-align:right;word-break:break-word}
/* An odd field count leaves the last rule running half the width; the
   template emits one empty cell to carry it across. */
@media(max-width:520px){.srev-spec{grid-template-columns:1fr}.srev-spec .s:empty{display:none}}

/* ---------- Hero art doubles as the demo player ----------
   The review has exactly one demo and this is it: the art is the poster and
   the play button mounts the game in its place. The provider frame is never
   requested until someone asks for it. */
.srev-hero .art{scroll-margin-top:96px}
.srev-hero .art .srev-play{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  align-content:center;gap:0;width:100%;font:inherit;cursor:pointer;
  background:linear-gradient(180deg,rgba(4,7,11,0) 40%,rgba(4,7,11,.4));border:0;color:#fff;
  opacity:0;transition:opacity .25s}
.srev-hero .art:hover .srev-play,.srev-hero .art .srev-play:focus-visible{opacity:1}
/* Touch has no hover, so the only demo on the page would be invisible. 880px
   is where the hero stacks — below it the art is a banner and the play button
   is the label that says what it does. */
@media (hover:none),(max-width:880px){.srev-hero .art .srev-play{opacity:1}}
.srev-hero .art .srev-play i{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:19px;padding-left:4px;
  background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .25s}
.srev-hero .art .srev-play:hover i{transform:scale(1.08)}
.srev-hero .art .srev-play em{margin-top:14px;font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.7)}
/* The age/terms line the demo block used to carry — consent belongs on the
   control that gives consent. */
.srev-hero .art .srev-play small{position:absolute;left:0;right:0;bottom:14px;padding:0 22px;
  font-size:10.5px;line-height:1.5;color:rgba(255,255,255,.72);text-shadow:0 1px 6px rgba(0,0,0,.8)}

.srev-hero.playing .srev-play,.srev-hero.playing .art .badges{opacity:0;pointer-events:none}
.srev-stage{position:absolute;inset:0;z-index:4;background:#04070b;
  animation:srev-stage-in .3s cubic-bezier(.2,.7,.2,1)}
.srev-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.srev-stage-x{position:absolute;top:12px;right:12px;z-index:5;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;line-height:1;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s}
.srev-stage-x:hover{background:rgba(255,255,255,.26)}
@keyframes srev-stage-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.srev-stage{animation:none}}
/* Stacked, the art is a 250px banner — unplayable. Slot demos render tall, so
   give the running game the viewport the way the old in-content player did. */
@media(max-width:880px){.srev-hero.playing .art{min-height:min(calc(100vw * 1.4),80vh)}}

/* ---------- Sticky review bar — rides under the 64px .hdr ---------- */
.srev-bar{position:sticky;top:64px;z-index:150;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  transform:translateY(-101%);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s}
.srev-bar.on{transform:none;opacity:1;pointer-events:auto}
.srev-bar .wrap{display:flex;align-items:center;gap:14px;height:58px}
.srev-bar .th{width:38px;height:38px;border-radius:var(--r-sm);flex:none;overflow:hidden}
.srev-bar .nmw{min-width:0}
.srev-bar .nm{font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srev-bar .pv{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim)}
.srev-bar .sp{flex:1}
.srev-bar .sc-inline{font-family:var(--font-mono);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;
  padding:6px 11px;border-radius:var(--r-sm);background:var(--surface-3);border:1px solid var(--border);flex:none}
.srev-bar .sc-inline small{font-size:10px;color:var(--text-dim)}
.srev-bar .btn{flex:none}
/* Below 760px the fixed bottom action bar takes over. Never both at once. */
@media(max-width:760px){.srev-bar{display:none}}

/* ---------- Mobile action bar — slides up only once the hero is behind you,
   so it never sits under a play button that is already on screen. ---------- */
.srev-mcta{position:fixed;left:0;right:0;bottom:0;z-index:190;display:none;gap:10px;padding:10px 16px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);border-top:1px solid var(--border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform:translateY(101%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.srev-mcta.on{transform:none}
.srev-mcta .btn{flex:1;justify-content:center}
/* The bar is only in the DOM when the review has a demo, so the page only
   reserves room for it when it is actually there. */
@media(max-width:760px){
  .srev-mcta{display:flex}
  body:has(.srev-mcta){padding-bottom:70px}
}

/* ---------- Scored breakdown ---------- */
.srev-scored{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow);overflow:hidden;margin-block:clamp(24px,3vw,36px);scroll-margin-top:96px}
.srev-scored .hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.srev-scored .hd h3{font-family:var(--font-sans);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.srev-scored .hd .note{font-size:11.5px;color:var(--text-dim)}
.srev-scored .ratings{margin:0;padding:18px 20px 22px;gap:15px}
.srev-scored .ratings .rr .bar i.lo{background:var(--down)}
.srev-scored .ratings .rr .bar i.mid{background:var(--accent-bright)}
.srev-scored .ratings .rr .bar i.hi{background:var(--up)}

/* ---------- Author-written furniture inside post content ----------
   These class hooks are typed into post bodies, so they only render as
   intended if the active theme styles them. The previous theme did; without
   these rules a "Pro Tip" callout reads as an ordinary paragraph with an
   emoji in front of it, and a highlighted table row reads as a normal row.
   Audited: these are the only content classes the old theme styled and this
   one did not. ---------- */
.prose .pro-tip{background:var(--accent-soft);border-left:3px solid var(--accent-line);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:13px 17px;margin-block:1.3em;
  font-size:.95em;line-height:1.62;color:var(--text-muted)}
.prose .pro-tip strong{color:var(--text)}
.bonus-widgets .a .pro-tip{margin-block:1.2em}
/* tbody in the selector so it outranks the row-hover rule above. */
.prose table tbody tr.indo-highlight-row{background:var(--accent-soft)}
.prose table tbody tr.indo-highlight-row td{font-weight:600;color:var(--text)}
.prose .indo-positive{color:var(--up);font-weight:600}
.prose .indo-negative{color:var(--down);font-weight:600}

/* ---------- Accordions: the FAQ block and the bonus-feature panels ----------
   Both are <details> inside the prose and read as the same control, so they
   share one shell. `faq-list` is added to the Yoast FAQ wrapper at render
   time (the questions keep their schema-faq hooks); `bonus-widgets` comes
   from the [bonus_widgets] shortcode in inc/shortcodes.php. */
.faq-list details,.bonus-widgets details{border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);margin-bottom:8px}
.faq-list details[open],.bonus-widgets details[open]{border-color:var(--border-strong);box-shadow:var(--shadow)}
.faq-list summary,.bonus-widgets summary{list-style:none;cursor:pointer;padding:15px 18px;
  font-family:var(--font-sans);font-weight:600;font-size:15.5px;line-height:1.4;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq-list summary::-webkit-details-marker,.bonus-widgets summary::-webkit-details-marker{display:none}
.faq-list summary::after,.bonus-widgets summary::after{content:"+";font-family:var(--font-mono);
  font-size:18px;color:var(--accent);transition:transform .25s;flex:none}
.faq-list details[open] summary::after,.bonus-widgets details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover,.bonus-widgets summary:hover{color:var(--accent)}

/* A FAQ answer is a sentence or two — set it as UI text. */
.faq-list .a{padding:0 18px 17px;font-family:var(--font-sans);font-size:14.5px;line-height:1.62;color:var(--text-muted)}
.faq-list .a>*{margin:0}
.faq-list .a>*+*{margin-top:.8em}

/* A bonus panel is article content — headings, lists, the odd table — so it
   keeps the reading face and only steps down a little in size. */
.bonus-widgets{margin-block:clamp(24px,3vw,34px)}
.bonus-widgets .a{padding:2px 18px 18px;font-size:.92em;color:var(--text-muted)}
.bonus-widgets .a>*{margin-top:0}
.bonus-widgets .a>*+*{margin-top:1.05em}
.bonus-widgets .a :is(h3,h4,h5){font-size:1em;letter-spacing:-.008em;color:var(--text);margin-top:1.5em}
.bonus-widgets .a :is(h3,h4,h5)+*{margin-top:.5em}
.bonus-widgets .a ul,.bonus-widgets .a ol{padding-left:1.3em}
.bonus-widgets .a li+li{margin-top:.35em}
.bonus-widgets .a strong{color:var(--text)}
.bonus-widgets .a table{font-size:13.5px}

/* rating bars for sub-scores */
.ratings{display:flex;flex-direction:column;gap:14px;margin-block:clamp(22px,3vw,32px)}
.ratings .rr{display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:center}
.ratings .rr .k{font-size:12.5px;color:var(--text-muted);font-weight:600}
.ratings .rr .bar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.ratings .rr .bar i{display:block;height:100%;border-radius:3px;background:var(--accent-bright);
  width:0;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.ratings .rr .v{font-family:var(--font-mono);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
@media(max-width:600px){.ratings .rr{grid-template-columns:100px 1fr auto}}

/* pros & cons */
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-block:clamp(24px,3vw,36px)}
.pc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px}
.pc h4{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:14px}
.pc h4 span{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  background:var(--surface-3);color:var(--text-muted)}
.pc.up h4 span{color:var(--up)}
.pc.down h4 span{color:var(--down)}
.pc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pc li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14px;color:var(--text-muted);line-height:1.5}
.pc li::before{content:"";width:6px;height:6px;border-radius:2px;margin-top:8px;background:var(--text-dim)}
.pc.up li::before{background:var(--up)}
.pc.down li::before{background:var(--down)}
@media(max-width:700px){.pc-grid{grid-template-columns:1fr}}

/* ============================================================
   CASINO REVIEW — scored header
   ============================================================ */
.crev-hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px);box-shadow:var(--shadow);margin-bottom:clamp(26px,3.4vw,40px)}
.crev-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.crev-logo{width:76px;height:76px;border-radius:var(--r);flex-shrink:0;overflow:hidden;
  border:1px solid var(--border);background:var(--surface-3)}
.crev-logo img{width:100%;height:100%;object-fit:cover}
.crev-top h1{font-family:var(--headline);font-weight:var(--headline-weight,500);
  font-size:clamp(28px,3.2vw,42px);letter-spacing:-.02em;line-height:1.05;margin-top:4px}
.crev-hero .score-ring{width:82px;height:82px}
.crev-hero .score-ring .sv{font-size:22px}
/* Last-updated / verified stamp in the slot & casino review heroes — a
   trust signal that the numbers were checked recently. */
.rev-updated{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:11.5px;color:var(--text-dim);letter-spacing:.02em}
.rev-updated svg{width:13px;height:13px;flex-shrink:0}
.crev-hero .dek{color:var(--text-muted);font-size:15.5px;line-height:1.65;margin-top:20px;max-width:70ch}
.crev-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;
  margin-top:24px;padding-top:22px;border-top:1px solid var(--border)}
.crev-facts .m{display:flex;flex-direction:column;gap:3px}
.crev-facts .m .v{font-family:var(--font-mono);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}
.crev-facts .m .k{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.crev-hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ============================================================
   PAGE TEMPLATE
   ============================================================ */
.page-body{padding-block:clamp(34px,4.4vw,60px)}

/* ---------- Large screens: scale the article headline + reading column ----------
   Only >=1600px. The article shell now runs the full site measure (--maxw), the
   same as the homepage — no separate cap — so the body no longer visibly shrinks
   when moving from the homepage to a post. A larger font keeps the wider reading
   column comfortable. */
@media (min-width:1600px){
  /* The no-hero masthead runs the full measure, so it can carry a larger
     headline. The has-hero title lives in a ~640px column beside the image,
     so it keeps its clamped size and simply gains a little more room. */
  .art-head.no-hero h1{font-size:62px}
  .art-head.no-hero .dek{font-size:20px}
  .art-head.has-hero .art-hero-box{min-height:clamp(360px,30vw,520px)}
  .art-head.has-hero .inner{max-width:min(640px,52%)}
  .prose{font-size:21px}
}
@media (min-width:1920px){
  .art-head.no-hero h1{font-size:68px}
  .art-head.no-hero .dek{font-size:21px}
  .art-head.has-hero .inner{max-width:min(700px,50%)}
  .prose{font-size:22px}
}
@media (min-width:2560px){
  .art-head.no-hero h1{font-size:78px}
  .prose{font-size:23px}
}