/*
Theme Name: PokerPro Theme
Theme URI: https://en.pokerpro.cc/
Description: PokerPro official theme - clean homepage layout with news, recommended sites, promotions and more.
Author: Aljoša Grega
Author URI: https://en.pokerpro.cc/
Template: mercury
Version: 1.0.0
*/

/* ─────────────────────────────────────────────────────────
   DESIGN TOKENS  (source of truth — mirrors GEMINI.md)
───────────────────────────────────────────────────────── */
:root {
    /* ── Surfaces ── */
    --pp-bg:              #FFFFFF;
    --pp-bg-alt:          #F5F7FA;
    --pp-bg-dark:         #0E1419;
    --pp-bg-card:         #1A2028;
    --pp-bg-card-2:       #232A33;
    --pp-border:          #E5E8EC;
    --pp-border-dark:     #2A323B;

    /* ── Type ── */
    --pp-text:            #0E1419;
    --pp-text-soft:       #2A323B;
    --pp-text-muted:      #6B7785;
    --pp-text-invert:     #FFFFFF;
    --pp-text-invert-muted: #8A9BB0;

    /* ── Accent — cyan only ── */
    --pp-cyan-500:        #19C8E0;
    --pp-cyan-600:        #14AAC0;
    --pp-cyan-400:        #4DD5E8;
    --pp-cyan-tint:       #E8FAFD;

    /* ── Semantic ── */
    --pp-red:             #E63946;
    --pp-green:           #06D6A0;
    --pp-gold:            #D4AF37;

    /* ── Typography ── */
    --pp-font-display:    "Oswald", system-ui, sans-serif;
    --pp-font-body:       "Poppins", system-ui, -apple-system, sans-serif;
    --pp-font-logo:       "Michroma", system-ui, sans-serif;
    /* Logo-only cyan, matched to the approved wordmark artwork; softer than
       --pp-cyan-500 on purpose. Don't use it for UI accents. */
    --pp-logo-accent:     #35B6D8;
    --pp-fs-section:      clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
    --pp-fs-h1:           clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    --pp-fs-h2:           clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);
    --pp-fs-h3:           1rem;
    --pp-fs-body:         1rem;
    --pp-fs-meta:         0.75rem;
    --pp-fs-tag:          0.7rem;

    /* ── Spacing ── */
    --pp-space-1:         0.25rem;
    --pp-space-2:         0.5rem;
    --pp-space-3:         0.75rem;
    --pp-space-4:         1rem;
    --pp-space-5:         1.5rem;
    --pp-space-6:         2rem;
    --pp-space-7:         3rem;
    --pp-space-8:         4rem;

    /* ── Radius ── */
    --pp-radius-sm:       4px;
    --pp-radius-md:       8px;
    --pp-radius-lg:       12px;
    --pp-radius-pill:     999px;

    /* ── Layout ── */
    --pp-container-max:   1240px;
    --pp-container-pad:   clamp(1rem, 4vw, 2rem);
    /* Space between any section heading (or its heading row) and its content —
       one value so no section's title sits further from its cards than another's. */
    --pp-heading-gap:     32px;

    /* ── Shadow ── */
    --pp-shadow-xs:       0 1px 2px rgba(0,0,0,.04);
    --pp-shadow-sm:       0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
    --pp-shadow-md:       0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    --pp-shadow-lg:       0 8px 40px rgba(0,0,0,.14);

    /* ── Compatibility aliases (old names → new tokens) ── */
    --pp-accent:          var(--pp-cyan-500);
    --pp-accent-dark:     var(--pp-cyan-600);
    --pp-accent-glow:     var(--pp-cyan-tint);
    --pp-green-dark:      #04b589;
    --pp-gray-btn:        #64748b;
    --pp-gray-btn-dark:   #475569;
    --pp-header-bg:       var(--pp-bg-dark);
    --pp-nav-bg:          var(--pp-bg-card);
    --pp-nav-border:      var(--pp-border-dark);
    --pp-page-bg:         var(--pp-bg);
    --pp-white:           var(--pp-bg);
    --pp-card-border:     var(--pp-border);
    --pp-dark-bg:         var(--pp-bg-dark);
    --pp-dark-card:       var(--pp-bg-card);
    --pp-dark-border:     var(--pp-border-dark);
    --pp-footer-bg:       var(--pp-bg-dark);
    --pp-footer-bottom:   #0A0F14;
    --pp-text-body:       var(--pp-text-soft);
    --pp-text-dim:        var(--pp-text-invert-muted);
    --pp-radius:          var(--pp-radius-md);
    --pp-container:       var(--pp-container-max);
    --pp-section-pad:     var(--pp-space-8);
    --pp-font:            var(--pp-font-body);
}

/* ─────────────────────────────────────────────────────────
   GLOBAL BASE
───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* iOS (Safari and Chrome on iPhone) enlarges some text blocks on its own
   ("text autosizing"), so equal labels rendered at different sizes, e.g.
   "Read article" ~10% larger than "Tournament details" on calendar cards.
   100% keeps every size as designed; pinch zoom still works. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--pp-font);
    background: var(--pp-page-bg);
    color: var(--pp-text);
    -webkit-font-smoothing: antialiased;
    /* Mercury sets overflow:hidden on body which creates a scroll container
       and breaks position:sticky on all descendants. Restore normal vertical
       scroll while still clipping any stray horizontal overflow. */
    overflow-x: clip;
    overflow-y: visible;
    /* Opacity-only (no transform) so the fixed header's containing block
       is never disturbed mid-animation. Entrance only — no exit fade,
       since hiding the outgoing page before the next one is ready just
       turns any slow navigation into a blank white gap instead of the
       old page staying visible like a normal browser navigation. */
    animation: pp-page-in .22s ease-out both;
}
@keyframes pp-page-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }
}

h1, h2, h3, h4,
h1 a, h2 a, h3 a, h4 a,
.pp-section-title,
.pp-section-title-standalone,
.pp-hero-heading,
.pp-hero-news-title,
.pp-hero-banner-name,
.pp-card-title,
.pp-news-feat-title,
.pp-news-sub-heading,
.pp-news-card-title,
.pp-article-card-title,
.pp-promo-card-title,
.pp-video-card-title {
    font-family: var(--pp-font-display);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.1;
}

h5, h6,
h5 a, h6 a {
    font-family: var(--pp-font-body);
    font-weight: 700;
}

h2, h2 a { font-size: 2em; line-height: 1.2; }
h2 a     { font-size: unset; }

a { color: var(--pp-accent); }

img { display: block; max-width: 100%; }

/* ─────────────────────────────────────────────────────────
   CONTAINER
───────────────────────────────────────────────────────── */
.pp-container,
.space-header-2-top-ins,
.space-page-wrapper,
.space-shortcode-wrap-ins,
.space-footer-ins {
    max-width: var(--pp-container-max);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--pp-container-pad);
}

/* Full-width section wrapper — use for header, footer, hero band, promotions */
.pp-bleed { width: 100%; }

/* Mercury boxed-layout override — allow full-width rendering */
.space-box.enabled {
    max-width: none;
    margin: 0;
    box-shadow: none;
}

/* ─────────────────────────────────────────────────────────
   HEADER — single unified row, full-width
───────────────────────────────────────────────────────── */

/* Mercury height spacer */
.space-header-2-height { position: relative; min-height: 80px; }

/* Always-fixed header */
.pp-hdr-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    background: var(--pp-bg-dark);
    border-bottom: 1px solid var(--pp-border-dark);
    transition:
        border-color     0.4s ease,
        box-shadow       0.4s ease,
        background       0.4s ease;
}

/* WP admin bar offset */
.admin-bar .pp-hdr-wrap { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .pp-hdr-wrap { top: 46px; }
}

/* Frosted-glass upgrade when scrolled — Mercury adds .fixed */
.pp-hdr-wrap.fixed {
    background: rgba(14, 20, 25, 0.94);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
    border-color: var(--pp-border-dark);
    box-shadow: 0 2px 20px rgba(0,0,0,.28);
}

/* Header row — logo left, actions right, nav absolutely centered */
/* Taller at rest, shrinks when scrolled */
.pp-hdr-row {
    position: relative;
    width: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    transition: height 0.4s ease;
}
.pp-hdr-wrap.fixed .pp-hdr-row {
    height: 64px;
}

/* ── Logo ── */
.pp-hdr-logo {
    flex-shrink: 0;
    margin-right: 36px;
    display: flex;
    align-items: center;
}
.pp-hdr-logo img,
.space-header-2-top-logo-ins img {
    max-height: 36px;
    width: auto;
    display: block;
}
/* Per-site language flag (set in wp-admin > PokerPro) — sits quietly right of the wordmark */
.pp-hdr-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 10px;
    width: 20px;
    height: 14px;
    border-radius: var(--pp-radius-sm);
    overflow: hidden;
    /* --pp-border-dark reads fine against a white/red flag (old GB) but is
       nearly invisible edge-on-edge with the EU flag's own dark blue field —
       a light hairline plus a touch of shadow separates any flag color from
       the dark header instead of relying on the flag's own contrast. */
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.pp-hdr-flag img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
/* Globe stand-in for the "eu" flag — a colored glyph on a dark field reads
   far more reliably at this tiny badge size than a colored field with a
   glyph cut out of it (every version of that kept vanishing against the
   header). --pp-bg-card-2 is lighter than the header itself so the chip
   still has a visible edge, and cyan is the one color guaranteed to pop
   against it. */
.pp-hdr-flag--globe {
    background: var(--pp-bg-card-2);
    border-color: var(--pp-cyan-500);
}
.pp-hdr-flag--globe i {
    font-size: 10px;
    line-height: 1;
    color: var(--pp-cyan-500);
}
/* Text logo — "poker" in white + ".pro" in cyan, Michroma (a free
   Microgramma/Eurostile Extended cousin, closest to the original artwork).
   Michroma ships one weight, so colour alone carries the split and
   font-synthesis is off so no browser fakes a (smeared) bold.
   Sizes are in em off the link so the mobile-menu/footer copies only
   need to change one font-size to scale the whole lockup. */
.pp-hdr-text-logo {
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    /* Michroma is ~15% wider than a normal sans, so a smaller size keeps
       the lockup at roughly the old header width. */
    font-size: 1.625rem;
    line-height: 1;
    font-family: var(--pp-font-logo);
    font-weight: 400;
    font-synthesis: none;
    /* Real weight Michroma doesn't have: a same-colour stroke thickens
       every stem by 0.045em (half each side), and the letter-spacing
       gives that back so the gaps between letters stay as designed. */
    letter-spacing: 0.025em;
    /* Michroma's tall ascent sits the glyphs low in a line-height:1 box;
       this lifts the x-height band onto the header's centre line. */
    padding-bottom: 0.18em;
}
.pp-hdr-text-logo-poker,
.pp-hdr-text-logo-pro {
    -webkit-text-stroke: 0.045em currentColor;
}
.pp-hdr-text-logo-poker {
    color: var(--pp-text-invert);
}
.pp-hdr-text-logo-pro {
    color: var(--pp-logo-accent);
}
/* The "r" arm overhangs to the right and visually crowds the full stop,
   so the gap before "pro" reads tighter than the one after "r". Open it
   up so the dot looks evenly spaced between the two words. */
.pp-hdr-text-logo-dot {
    margin-right: 0.07em;
}

/* ── Navigation — absolutely centered relative to the full header width ── */
.pp-hdr-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.pp-hdr-nav .pp-nav-list,
.pp-hdr-nav .pp-nav-list > li > a,
.pp-hdr-nav .pp-nav-list li ul.sub-menu {
    pointer-events: auto;
}
.pp-hdr-nav .pp-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}
.pp-hdr-nav .pp-nav-list > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.pp-hdr-nav .pp-nav-list > li > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 14px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--pp-font-display);
    font-size: .85rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    border-bottom: none;
    transition: color .25s ease;
}

/* Radial glow — blooms up from the bottom of the nav item */
.pp-hdr-nav .pp-nav-list > li:not(.live-reporting):not(.live) > a::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) scaleX(0.2);
    width: 100%;
    height: 56px;
    background: radial-gradient(ellipse at 50% 100%, rgba(25, 200, 224, 0.36) 0%, transparent 68%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}
.pp-hdr-nav .pp-nav-list > li:not(.live-reporting):not(.live) > a:hover::before {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

/* Underline — grows from centre outward with a glow */
.pp-hdr-nav .pp-nav-list > li:not(.live-reporting):not(.live) > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--pp-cyan-500), transparent);
    box-shadow: 0 0 8px rgba(25, 200, 224, 0.55);
    transition: width .32s ease;
}
.pp-hdr-nav .pp-nav-list > li:not(.live-reporting):not(.live) > a:hover::after {
    width: 70%;
}

.pp-hdr-nav .pp-nav-list > li > a:hover,
.pp-hdr-nav .pp-nav-list > li:hover > a {
    color: var(--pp-text-invert);
}

/* Active page state — regular nav items (including PLAY NOW) */
.pp-hdr-nav .pp-nav-list > li.current-menu-item:not(.live-reporting):not(.live) > a,
.pp-hdr-nav .pp-nav-list > li.current-menu-ancestor:not(.live-reporting):not(.live) > a,
.pp-hdr-nav .pp-nav-list > li.current_page_item:not(.live-reporting):not(.live) > a {
    color: var(--pp-text-invert);
}
.pp-hdr-nav .pp-nav-list > li.current-menu-item:not(.live-reporting):not(.live) > a::before,
.pp-hdr-nav .pp-nav-list > li.current-menu-ancestor:not(.live-reporting):not(.live) > a::before,
.pp-hdr-nav .pp-nav-list > li.current_page_item:not(.live-reporting):not(.live) > a::before {
    opacity: 0.65;
    transform: translateX(-50%) scaleX(1);
}
.pp-hdr-nav .pp-nav-list > li.current-menu-item:not(.live-reporting):not(.live) > a::after,
.pp-hdr-nav .pp-nav-list > li.current-menu-ancestor:not(.live-reporting):not(.live) > a::after,
.pp-hdr-nav .pp-nav-list > li.current_page_item:not(.live-reporting):not(.live) > a::after {
    width: 70%;
}

/* Active page state — LIVE REPORTING pill */
.pp-hdr-nav .pp-nav-list > li.live-reporting.current-menu-item > a,
.pp-hdr-nav .pp-nav-list > li.live.current-menu-item > a {
    background: rgba(230, 57, 70, 0.18);
    border-color: rgba(230, 57, 70, 0.85);
    box-shadow: 0 0 16px rgba(230, 57, 70, 0.5), 0 0 32px rgba(230, 57, 70, 0.18);
}

/* PLAY NOW — reset to plain nav link */
.pp-hdr-nav .pp-nav-list > li.highlight > a {
    background: none;
    color: rgba(255, 255, 255, 0.75);
    border-radius: 0;
    border: none;
    padding: 0 14px;
    height: 100%;
    margin: 0;
    font-weight: 400;
    box-shadow: none;
}
.pp-hdr-nav .pp-nav-list > li.highlight > a:hover {
    background: none;
    color: var(--pp-text-invert);
    border: none;
    box-shadow: none;
}

/* LIVE REPORTING — broadcast pill */
.pp-hdr-nav .pp-nav-list > li.live-reporting > a,
.pp-hdr-nav .pp-nav-list > li.live > a {
    color: var(--pp-red) !important;
    border-radius: var(--pp-radius-pill);
    padding: 0 13px;
    height: 36px;
    margin: 0 6px;
    border: 1px solid rgba(230, 57, 70, 0.45);
    border-bottom: 1px solid rgba(230, 57, 70, 0.45);
    background: rgba(230, 57, 70, 0.06);
    font-weight: 600;
    letter-spacing: .04em;
    box-shadow: 0 0 0 rgba(230, 57, 70, 0);
    transition: background .22s ease, border-color .22s ease, box-shadow .28s ease;
}
.pp-hdr-nav .pp-nav-list > li.live-reporting > a:hover,
.pp-hdr-nav .pp-nav-list > li.live > a:hover {
    background: rgba(230, 57, 70, 0.12);
    border-color: rgba(230, 57, 70, 0.7);
    box-shadow: 0 0 12px rgba(230, 57, 70, 0.25);
}
.pp-hdr-nav .pp-nav-list > li.live-reporting > a::before,
.pp-hdr-nav .pp-nav-list > li.live > a::before {
    content: '';
    display: inline-block;
    /* Even sizes on every live dot: at Windows' 125%/150% scaling an odd
       7px lands on fractional device pixels and renders as a lopsided blob. */
    width: 8px;
    height: 8px;
    background: var(--pp-red);
    border-radius: 50%;
    margin-right: 7px;
    flex-shrink: 0;
    box-shadow: 0 0 5px var(--pp-red);
    animation: pp-live-pulse 1.8s ease-in-out infinite;
}
@keyframes pp-live-pulse {
    0%, 100% { opacity: 1;  box-shadow: 0 0 5px var(--pp-red); }
    50%       { opacity: .4; box-shadow: 0 0 2px var(--pp-red); }
}

/* Sub-menu */
.pp-hdr-nav .pp-nav-list li ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border-dark);
    border-top: 2px solid var(--pp-accent);
    border-radius: 0 0 var(--pp-radius-sm) var(--pp-radius-sm);
    box-shadow: var(--pp-shadow-md);
    list-style: none;
    padding: 8px 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .15s, transform .15s;
    z-index: 100;
}
.pp-hdr-nav .pp-nav-list li:hover > ul.sub-menu,
.pp-hdr-nav .pp-nav-list li.toggled > ul.sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.pp-hdr-nav .pp-nav-list li ul.sub-menu li a {
    display: block;
    padding: 9px 18px;
    color: rgba(255, 255, 255, 0.7);
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: .3px;
    transition: color .12s, background .12s;
}
.pp-hdr-nav .pp-nav-list li ul.sub-menu li a:hover {
    color: var(--pp-text-invert);
    background: var(--pp-bg-card-2);
}

/* ── Mega menu (News, Play now, Promotions, Strategy) ─────
   Full-width panel injected into the li by Mega_Menu_Walker (inc/mega-menu.php).
   Anchored with position:absolute; top:100% against .pp-hdr-row — same
   pattern this theme already uses for its plain-submenu items
   (.pp-nav-list li ul.sub-menu, a few rules up), just spanning full width
   instead of a narrow dropdown. That requires .pp-hdr-row (position:relative,
   full viewport width, sits flush at the top of .pp-hdr-wrap) to be this
   panel's containing block rather than its own <li> — see the
   `li:has(.pp-mega-panel)` override below. This replaced an earlier
   position:fixed + JS-synced-custom-property approach: computing the
   header's rendered edge in JS and writing it to a CSS var broke silently
   whenever the script's execution was delayed past DOMContentLoaded (e.g.
   by a "delay JS until interaction" perf optimization), leaving the panel
   on its unadjusted fallback and reopening the exact gap this exists to
   prevent. Anchoring in pure CSS removes that entire failure mode — no
   script has to run, at any point, for this to be correctly positioned.
   The seam is a soft cyan gradient glow (::before) rather than a flat
   border — a hard 2px bar read as a second, competing line right under the
   header's own border-bottom. Background carries a faint cyan light-leak,
   the one gradient use this theme allows outside image overlays. */
.pp-hdr-nav .pp-nav-list > li:has(.pp-mega-panel) {
    position: static;
}
.pp-mega-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 5;
    background:
        radial-gradient(900px 220px at 12% 0%, rgba(25, 200, 224, .07), transparent 60%),
        var(--pp-bg-card);
    box-shadow: var(--pp-shadow-lg), 0 12px 40px rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    /* Opacity-only, no transform — panels differ in height per nav item
       (Play Now's room cards vs. Promotions' short strip vs. News/Strategy),
       and sliding a translateY offset in read as the whole panel "jumping"
       into place, worse the bigger that height gap was. Same fix as body's
       page-in animation above for the same reason. */
    transition: opacity .18s ease;
}
.pp-mega-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(25, 200, 224, .85) 25%, rgba(77, 213, 232, .95) 50%, rgba(25, 200, 224, .85) 75%, transparent);
    box-shadow: 0 0 14px rgba(25, 200, 224, .55);
}

/* On a room's own review page, tint the panel's top seam and corner
   light-leak with that room's own brand color instead of the site-wide
   cyan — same "this page belongs to this room" treatment already applied
   to the header search toggle/dropdown below via --pp-review-brand-rgb
   (set on <html> by the color-extraction script in single-casino/style-1.php,
   scoped to body.single-organization so it can't leak onto other pages).
   No separate lighter shade to fake the shine highlight here (unlike the
   cyan version above, which has one baked in) — full-opacity brand color at
   the gradient's center against lower-opacity brand color at the edges
   produces the same shine using only the one extracted hue. */
body.single-organization .pp-mega-panel {
    background:
        radial-gradient(900px 220px at 12% 0%, rgba(var(--pp-review-brand-rgb, 25,200,224), .07), transparent 60%),
        var(--pp-bg-card);
}
body.single-organization .pp-mega-panel::before {
    background: linear-gradient(90deg, transparent, rgba(var(--pp-review-brand-rgb, 25,200,224), .85) 25%, rgba(var(--pp-review-brand-rgb, 25,200,224), 1) 50%, rgba(var(--pp-review-brand-rgb, 25,200,224), .85) 75%, transparent);
    box-shadow: 0 0 14px rgba(var(--pp-review-brand-rgb, 25,200,224), .55);
}

/* Mega menu temporarily disabled for launch (2026-09-28) — client hasn't
   given final direction on its content/behavior yet, and the site needs to
   ship without it in the meantime. Everything else (markup, PHP content,
   panel styling/positioning below, JS toggle) is untouched — re-enable by
   uncommenting this rule once we have client sign-off. */
/*
.pp-hdr-nav .pp-nav-list li:hover > .pp-mega-panel,
.pp-hdr-nav .pp-nav-list li.toggled > .pp-mega-panel,
.pp-hdr-nav .pp-nav-list li:focus-within > .pp-mega-panel {
    opacity: 1;
    pointer-events: auto;
}
*/

.pp-mega-panel-inner {
    position: relative;
    max-width: var(--pp-container-max);
    margin: 0 auto;
    padding: var(--pp-space-6) var(--pp-container-pad);
    display: flex;
    flex-direction: column;
    gap: var(--pp-space-6);
}

.pp-mega-row {
    display: flex;
    gap: var(--pp-space-8);
}

.pp-mega-col { flex: 1; min-width: 0; }
.pp-mega-col--wide { flex: 2; }

.pp-mega-col-title {
    display: block;
    font-family: var(--pp-font-display);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-text-invert-muted);
    margin-bottom: var(--pp-space-4);
}

.pp-mega-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pp-mega-links--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px var(--pp-space-6);
}
.pp-mega-links li a {
    display: block;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: var(--pp-radius-sm);
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--pp-font-body);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s, background .15s;
}
.pp-mega-links li a:hover {
    color: var(--pp-text-invert);
    background: var(--pp-bg-card-2);
}

/* Latest-articles strip — shared by the News headlines row and the
   Promotions/Strategy panels (their only content, since both are flat
   categories with nothing to build columns from). */
.pp-mega-headlines {
    padding-top: var(--pp-space-5);
    border-top: 1px solid var(--pp-border-dark);
}
.pp-mega-headline-list {
    display: flex;
    gap: var(--pp-space-4);
}
.pp-mega-headline-list--wide { gap: var(--pp-space-5); }

.pp-mega-headline {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 8px;
    margin: -8px;
    border-radius: var(--pp-radius-md);
    text-decoration: none;
    transition: background .15s;
}
.pp-mega-headline:hover { background: var(--pp-bg-card-2); }

.pp-mega-headline-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--pp-radius-sm);
    overflow: hidden;
    background: var(--pp-bg-card-2);
}
.pp-mega-headline-list--wide .pp-mega-headline-thumb { width: 80px; height: 80px; }
.pp-mega-headline-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-mega-headline-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.pp-mega-headline-title {
    font-family: var(--pp-font-body);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pp-text-invert);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-mega-headline-date {
    font-size: .68rem;
    color: var(--pp-text-invert-muted);
}

/* Play now — compact recommended-room cards, same data as the homepage's
   "Recommended Poker Sites" block, restyled for the dark mega panel. Each
   card picks up that room's own brand color (--room-brand-rgb, same source
   as the homepage list) for its top accent and hover glow, so the row reads
   as distinct rooms rather than repeated generic tiles. */
.pp-mega-rooms {
    display: flex;
    gap: var(--pp-space-4);
}
.pp-mega-room {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--pp-space-3);
    padding: var(--pp-space-5) var(--pp-space-4) var(--pp-space-4);
    background: var(--pp-bg-card-2);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pp-mega-room::after {
    content: '';
    position: absolute;
    top: -40%;
    left: 50%;
    width: 220px;
    height: 160px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse closest-side, rgba(var(--room-brand-rgb, 25,200,224), .22), transparent 72%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: -1;
}
.pp-mega-room:hover {
    border-color: rgba(var(--room-brand-rgb, 25,200,224), .4);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}
.pp-mega-room:hover::after { opacity: 1; }

.pp-mega-room-num {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .06);
    color: var(--pp-text-invert-muted);
    font-family: var(--pp-font-display);
    font-size: .68rem;
    font-weight: 700;
}

.pp-mega-room-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    /* Card padding-top (24px) + this margin must clear the absolutely
       positioned num badge (top:12px, 20px tall → bottom edge at 32px from
       the card's own top edge, ignoring padding). At the old 4px margin the
       logo box started at 28px — inside the badge's own box — so on wide
       wordmark logos centered close to the left edge (e.g. PokerPlanets),
       the badge's chip painted over and clipped the logo's leading glyphs. */
    margin-top: 14px;
}
.pp-mega-room-logo img {
    /* height:100% + width:auto (not width:100%) so every logo is scaled off
       the SAME axis — height. Forcing width:100% too made object-fit:contain
       pick whichever axis bound first per image's own aspect ratio: wide
       wordmarks (PokerPlanets, party poker) got letterboxed short while
       squarer marks (GG Poker, BetKings) filled the full box — same nominal
       box, visibly different logo heights. Sizing off height alone keeps
       every logo's cap-height identical; max-width is just an overflow
       guard for unusually wide marks, not the primary constraint.
       (Same fix should apply to .pp-room-logo img below if that list shows
       the same unevenness.) */
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* Card is permanently dark (unlike .pp-room-row, which only goes dark on
       hover) — flatten every room's logo to a white mark unconditionally,
       same brightness(0)+invert(1) technique as .pp-room-row above. */
    filter: brightness(0) invert(1);
}
.pp-mega-room-logo-ph {
    font-size: .7rem;
    font-weight: 700;
    color: var(--pp-text-invert-muted);
    text-transform: uppercase;
}

.pp-mega-room-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.pp-mega-room-bonus {
    font-size: .82rem;
    font-weight: 700;
    color: var(--pp-text-invert);
    line-height: 1.25;
}
.pp-mega-room-rating { display: flex; gap: 1px; }
.pp-mega-room-rating .pp-star { font-size: .72rem; }
.pp-mega-room-rating .pp-star--empty { color: rgba(255, 255, 255, .25); }

.pp-mega-room-play {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: var(--pp-radius-pill);
    transition: background .15s;
}
.pp-mega-room-play:hover { background: var(--pp-cyan-600); }

.pp-mega-more {
    display: inline-flex;
    margin-top: var(--pp-space-5);
    padding: 10px 20px;
    background: var(--pp-bg-dark);
    color: var(--pp-text-invert);
    text-decoration: none;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: var(--pp-radius-pill);
    transition: background .15s;
}
.pp-mega-more:hover { background: #000; }

/* ── Right actions: search + hamburger ── */
.pp-hdr-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 16px;
}

/* ── Unified search widget ── */
.pp-search-widget {
    display: flex;
    align-items: center;
}

/* Shell: owns background + border-radius + overflow — contains both pill and toggle */
.pp-sw-shell {
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
    transition:
        background .32s ease,
        border-color .32s ease,
        box-shadow .32s ease,
        border-radius .15s ease;
}
.pp-sw-open .pp-sw-shell {
    background: var(--pp-bg-card);
    border-color: rgba(25, 200, 224, .4);
    box-shadow: 0 0 22px rgba(25, 200, 224, .18);
}
.pp-sw-open.pp-sdrop-active .pp-sw-shell {
    border-radius: 18px 18px 0 0;
}

/* Pill: slides open to reveal the input */
.pp-sw-pill {
    width: 0;
    height: 36px;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: width .42s cubic-bezier(.4,0,.2,1);
}
.pp-sw-open .pp-sw-pill {
    width: 264px;
}

/* Toggle — rightmost cap of the shell, always visible. Resting state is an
   outline cyan pill (same variant as the site's other pill CTAs) so search
   reads as a control instead of disappearing into the dark header. */
.pp-sw-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--pp-cyan-500);
    border-radius: var(--pp-radius-pill);
    background: transparent;
    cursor: pointer;
    color: var(--pp-cyan-500);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1;
    box-shadow: 0 0 14px rgba(25, 200, 224, .18);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, border-color .18s ease, color .15s ease, padding .18s ease, width .18s ease, box-shadow .18s ease;
}
.pp-sw-toggle:hover {
    background: rgba(25, 200, 224, .1);
    border-color: var(--pp-cyan-600);
    box-shadow: 0 0 20px rgba(25, 200, 224, .3);
}
.pp-sw-toggle:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 3px;
}

/* Icon — JS swaps fa-search ↔ fa-times with a scale transition */
.pp-sw-toggle i {
    font-size: .85rem;
    transition: transform .2s ease, opacity .15s ease;
}
.pp-sw-toggle-label { white-space: nowrap; }

/* Open state: the shell itself becomes the visible pill (see .pp-sw-open
   .pp-sw-shell below), so the toggle reverts to a plain icon-only close cap. */
.pp-sw-open .pp-sw-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
    border-color: transparent;
    background: transparent;
    color: var(--pp-cyan-500);
    box-shadow: none;
}
.pp-sw-open .pp-sw-toggle:hover { color: var(--pp-cyan-600); }
.pp-sw-open .pp-sw-toggle-label { display: none; }
/* The shell already shows its own border/glow while open — a second
   focus-visible ring on the close button just reads as a stray circle. */
.pp-sw-open .pp-sw-toggle:focus-visible { outline: none; }

/* Form inside the pill */
.pp-sw-form {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 12px 0 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    white-space: nowrap;
    background: transparent !important;
}
.pp-sw-open .pp-sw-form {
    opacity: 1;
    pointer-events: auto;
}

/* Input — force dark theme to override any Mercury / browser defaults.
   Mercury's global `input[type="text"]` reset (border-radius, 1px bottom
   border, 45px height) beats a bare `.pp-sw-input` class on specificity
   (attribute+type selector outranks a single class), so those three
   need !important here or they leak through. */
.pp-sw-input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    outline: none;
    box-shadow: none;
    color: var(--pp-text-invert) !important;
    font-size: .875rem;
    font-family: inherit;
    letter-spacing: .01em;
    -webkit-appearance: none;
    appearance: none;
}
.pp-sw-input::placeholder { color: #6B7785; }
/* Kill all browser-native search decorations */
.pp-sw-input::-webkit-search-cancel-button,
.pp-sw-input::-webkit-search-decoration,
.pp-sw-input::-webkit-search-results-button,
.pp-sw-input::-webkit-search-results-decoration { display: none; }
/* Kill autofill yellow on Chrome */
.pp-sw-input:-webkit-autofill,
.pp-sw-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--pp-bg-card) inset !important;
    -webkit-text-fill-color: var(--pp-text-invert) !important;
}

/* Hamburger (mobile) */
.pp-hdr-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--pp-text-invert);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Mercury's .space-mobile-menu-icon clips to overflow:hidden */
    overflow: visible;
}
/* Staggered lines instead of a stock three-bar burger; the short one
   stretches on interaction so the toggle reads as alive, not decorative. */
.pp-hdr-hamburger-lines {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    width: 22px;
}
.pp-hdr-hamburger-lines span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: right center;
    transition: transform .2s ease, background .15s;
}
.pp-hdr-hamburger-lines span { width: 22px; }
.pp-hdr-hamburger-lines span:nth-child(2) { transform: scaleX(.6); background: var(--pp-cyan-500); }
.pp-hdr-hamburger:focus { outline: none; }
.pp-hdr-hamburger:focus-visible { outline: 2px solid var(--pp-cyan-500); outline-offset: 2px; border-radius: var(--pp-radius-sm); }
.pp-hdr-hamburger:hover .pp-hdr-hamburger-lines span:nth-child(2),
.pp-hdr-hamburger:focus-visible .pp-hdr-hamburger-lines span:nth-child(2) { transform: none; }
@keyframes ppSwBarIn {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes ppSwBarOut {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -6px); }
}
@media (prefers-reduced-motion: reduce) {
    .pp-sw-open .pp-sw-shell,
    .pp-sw-closing .pp-sw-shell { animation: none; }
    .pp-hdr-hamburger-lines span,
    .pp-sw-open .pp-sw-pill,
    .pp-sw-open .pp-sw-form::before { transition: none; }
}

/* ── Casino review pages: recolor the existing cyan accents to the
   room's own brand color (same --pp-review-brand-rgb the hero/sidebar
   use) — same header, same effects, just the color swapped. The aces
   plugin rewrites the "single-casino" body class to
   "single-organization" (aces_change_casino_body_classes), so that's
   the class to key off, not WP's default. ── */
body.single-organization .pp-hdr-wrap .pp-hdr-text-logo-pro {
    color: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization .pp-hdr-wrap {
    border-bottom-color: rgba(var(--pp-review-brand-rgb, 25,200,224), 0.22);
}
body.single-organization .pp-hdr-wrap.fixed {
    border-color: rgba(var(--pp-review-brand-rgb, 25,200,224), 0.22);
}
body.single-organization .pp-hdr-nav .pp-nav-list > li:not(.live-reporting):not(.live) > a::before {
    background: radial-gradient(ellipse at 50% 100%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.36) 0%, transparent 68%);
}
body.single-organization .pp-hdr-nav .pp-nav-list > li:not(.live-reporting):not(.live) > a::after {
    background: linear-gradient(90deg, transparent, rgb(var(--pp-review-brand-rgb, 25,200,224)), transparent);
    box-shadow: 0 0 8px rgba(var(--pp-review-brand-rgb, 25,200,224), 0.55);
}
body.single-organization .pp-hdr-hamburger-lines span:nth-child(2) {
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
/* The nav's own always-visible bottom glow (.pp-hdr-wrap::after, used
   site-wide) is hardcoded cyan by design so it blends into whatever's
   below it. On review pages that "whatever's below" is the brand-
   colored hero, so this glow needs to follow the brand color too —
   this is likely the "navigation blue accent" that stayed cyan. */
body.single-organization .pp-hdr-wrap::after {
    background:
        radial-gradient(ellipse 45% 100% at 28% 100%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 25% 80%  at 72% 100%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.06) 0%, transparent 65%),
        radial-gradient(ellipse 28% 120% at 96% 50%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.09) 0%, transparent 65%);
}

/* ── Search widget: adapt to the room's brand color too (button, opened
   bar, results dropdown) — same body.single-organization scope as the
   rest of the header. Desktop-only for the toggle's own border/glow since
   mobile intentionally strips that chrome down to a bare icon. ── */
@media (min-width: 968px) {
    body.single-organization .pp-sw-toggle {
        border-color: rgb(var(--pp-review-brand-rgb, 25,200,224));
        box-shadow: 0 0 14px rgba(var(--pp-review-brand-rgb, 25,200,224), .18);
    }
    body.single-organization .pp-sw-toggle:hover {
        background: rgba(var(--pp-review-brand-rgb, 25,200,224), .1);
        border-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .82);
        box-shadow: 0 0 20px rgba(var(--pp-review-brand-rgb, 25,200,224), .3);
    }
}
body.single-organization .pp-sw-toggle { color: rgb(var(--pp-review-brand-rgb, 25,200,224)); }
body.single-organization .pp-sw-toggle:focus-visible { outline-color: rgb(var(--pp-review-brand-rgb, 25,200,224)); }
body.single-organization .pp-sw-open .pp-sw-shell {
    border-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .4);
    box-shadow: 0 0 22px rgba(var(--pp-review-brand-rgb, 25,200,224), .18);
}
body.single-organization .pp-sw-open .pp-sw-toggle {
    color: rgb(var(--pp-review-brand-rgb, 25,200,224));
    border-color: transparent;
    box-shadow: none;
}
body.single-organization .pp-sw-open .pp-sw-toggle:hover { color: rgba(var(--pp-review-brand-rgb, 25,200,224), .82); }
body.single-organization .pp-search-dropdown { border-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .4); }
body.single-organization .pp-sdrop-cat { color: rgb(var(--pp-review-brand-rgb, 25,200,224)); }
body.single-organization .pp-sdrop-see-all:hover,
body.single-organization .pp-sdrop-see-all.pp-sdrop--focused { color: rgb(var(--pp-review-brand-rgb, 25,200,224)); }

@media (max-width: 967px) {
    body.single-organization .pp-sw-toggle { color: var(--pp-text-invert); }
    body.single-organization .pp-sw-open .pp-sw-shell,
    body.single-organization .pp-sw-open.pp-sdrop-active .pp-sw-shell {
        box-shadow: none;
    }
    body.single-organization .pp-sw-open .pp-sw-pill:focus-within {
        border-color: rgb(var(--pp-review-brand-rgb, 25,200,224));
    }
    body.single-organization .pp-sw-open .pp-sw-toggle { color: var(--pp-text-invert-muted); }
}

/* Suppress mercury's two-row chrome (our header uses none of these elements) */
.space-header-2-top { display: none !important; }

/* ── Mobile menu — cyan glassmorphic off-canvas ──
   Template: theme-parts/mobile-menu.php (overrides mercury's version).
   Dims + blurs the page behind, panel is a frosted dark-glass surface
   with a soft cyan radial-gradient light-leak (the one gradient effect
   the style guide allows) instead of a flat solid fill. */
.space-mobile-menu {
    background: rgba(6, 10, 13, .78);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.space-mobile-menu .space-mobile-menu-block {
    width: 88vw;
    max-width: 380px;
    background: linear-gradient(180deg, rgba(26, 32, 40, .90) 0%, rgba(12, 16, 20, .96) 100%);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
    border-left: 1px solid rgba(25, 200, 224, .22);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .5), inset 1px 0 0 rgba(255, 255, 255, .04);
    overflow-x: hidden;
}
/* Glows are painted on a full-size layer with px radii. They used to be
   %-sized border-radius orbs; on a tall drawer the rounded box clipped the
   gradient before it faded out, leaving hard arcs. Here each glow reaches
   transparent well inside the layer, so there's no edge to see. */
.space-mobile-menu .space-mobile-menu-block::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(280px 240px at 100% 0%, rgba(25, 200, 224, .22), transparent 70%),
        radial-gradient(240px 200px at 0% 100%, rgba(25, 200, 224, .10), transparent 70%);
}
.space-mobile-menu .space-mobile-menu-block-ins {
    position: relative;
    z-index: 1;
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Header row — text logo + close button */
.space-mobile-menu .space-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    margin: 0 0 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Mercury's ".space-mobile-menu-header a { display: inline-block }" would
   drop the flex layout the wordmark's two spans sit on. */
.space-mobile-menu .space-mobile-menu-header a.pp-hdr-text-logo {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    font-family: var(--pp-font-logo);
}
/* Keep logo + flag as one group on the left; header is a 3-item flex
   row (logo, flag, close button) so space-between would otherwise
   spread the flag away from the logo it belongs next to. */
.space-mobile-menu .space-mobile-menu-header .pp-hdr-flag {
    margin-right: auto;
}
/* Mercury's ".space-mobile-menu-header span { display: block; font-family:
   'Roboto'; color: #7f8c8d; … }" targets every span in this header —
   including our logo spans — and its explicit declarations beat the
   logo font/color the spans would otherwise inherit from the parent
   link (including its 0.75em font-size, which would shrink the
   wordmark). Restate font, size and color so the panel
   matches the header. */
.space-mobile-menu .space-mobile-menu-header .pp-hdr-text-logo-poker,
.space-mobile-menu .space-mobile-menu-header .pp-hdr-text-logo-pro {
    display: inline-block;
    font-family: var(--pp-font-logo);
    font-weight: 400;
    line-height: 1;
}
.space-mobile-menu .space-mobile-menu-header .pp-hdr-text-logo-poker {
    font-size: 1em;
    color: var(--pp-text-invert);
}
.space-mobile-menu .space-mobile-menu-header .pp-hdr-text-logo-pro {
    font-size: 1em;
    color: var(--pp-logo-accent);
}
/* Same Mercury span rule would turn the nested dot into a grey Roboto block. */
.space-mobile-menu .space-mobile-menu-header .pp-hdr-text-logo-dot {
    display: inline;
    font: inherit;
    color: inherit;
}
.space-mobile-menu .space-mobile-menu-close-button {
    position: relative;
    top: auto;
    right: auto;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--pp-radius-pill);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: background .15s, border-color .15s;
}
.space-mobile-menu .space-mobile-menu-close-button:hover {
    background: rgba(25, 200, 224, .12);
    border-color: rgba(25, 200, 224, .4);
}
.space-mobile-menu .space-close-icon .to-right,
.space-mobile-menu .space-close-icon .to-left {
    top: 50%;
    left: 50%;
    width: 16px;
    height: 1.5px;
    margin: -1px 0 0 -8px;
    background: var(--pp-text-invert-muted);
    transition: background .15s;
}
.space-mobile-menu .space-mobile-menu-close-button:hover .to-right,
.space-mobile-menu .space-mobile-menu-close-button:hover .to-left { background: var(--pp-cyan-500); }

/* Nav list */
.space-mobile-menu .space-mobile-menu-list { flex: 1; }
.space-mobile-menu .space-mobile-menu-list ul li {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.space-mobile-menu .space-mobile-menu-list ul li:last-child { border-bottom: none; }
.space-mobile-menu .space-mobile-menu-list ul li a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 0;
    color: var(--pp-text-invert);
    font-family: var(--pp-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .15s, padding-left .15s;
}
.space-mobile-menu .space-mobile-menu-list ul li a:hover,
.space-mobile-menu .space-mobile-menu-list ul li a:focus-visible {
    color: var(--pp-cyan-500);
    padding-left: 6px;
}
.space-mobile-menu li.menu-item.highlight { background: none; margin: 0; }
/* Live Reporting — same red + pulsing dot as the desktop broadcast pill,
   minus the pill chrome so the row stays aligned with its neighbours. */
.space-mobile-menu .space-mobile-menu-list ul li.live-reporting > a,
.space-mobile-menu .space-mobile-menu-list ul li.live > a {
    gap: 10px;
    color: var(--pp-red);
}
.space-mobile-menu .space-mobile-menu-list ul li.live-reporting > a::before,
.space-mobile-menu .space-mobile-menu-list ul li.live > a::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-red);
    box-shadow: 0 0 6px var(--pp-red);
    animation: pp-live-pulse 1.8s ease-in-out infinite;
}
.space-mobile-menu .space-mobile-menu-list ul li.live-reporting > a:hover,
.space-mobile-menu .space-mobile-menu-list ul li.live-reporting > a:focus-visible,
.space-mobile-menu .space-mobile-menu-list ul li.live > a:hover,
.space-mobile-menu .space-mobile-menu-list ul li.live > a:focus-visible {
    color: var(--pp-red);
    opacity: .8;
}
@media (prefers-reduced-motion: reduce) {
    .space-mobile-menu .space-mobile-menu-list ul li.live-reporting > a::before,
    .space-mobile-menu .space-mobile-menu-list ul li.live > a::before { animation: none; }
}
.space-mobile-menu .space-mobile-menu-list ul li.menu-item-has-children:after,
.space-mobile-menu .space-mobile-menu-list ul li.menu-item-has-children.space-up:after {
    color: var(--pp-text-invert-muted);
}
.space-mobile-menu .space-mobile-menu-list ul li ul.sub-menu {
    padding: 0 0 8px 4px;
}
.space-mobile-menu .space-mobile-menu-list ul li ul.sub-menu li {
    border-bottom: none;
}
.space-mobile-menu .space-mobile-menu-list ul li ul.sub-menu li a {
    min-height: 40px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--pp-text-invert-muted);
}

/* Social + contact icons — same set as the footer, sized up to 44px
   touch targets since this is the thumb-driven surface. */
/* Equal columns, one row: fills the divider's width exactly at any count,
   instead of fixed squares that wrap a lone icon on narrow phones. */
.pp-mmenu-social {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.pp-mmenu-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-md);
    background: rgba(255, 255, 255, .03);
    color: var(--pp-text-invert-muted);
    font-size: 1rem;
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}
.pp-mmenu-social a:hover,
.pp-mmenu-social a:focus-visible {
    color: var(--pp-cyan-500);
    border-color: var(--pp-cyan-500);
    background: rgba(25, 200, 224, .08);
    outline: none;
}


/* Mercury sets Roboto on form fields; Roboto is no longer loaded, so pin
   them to the body face instead of letting them fall back to sans-serif. */
input[type="text"],
input[type="tel"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
    font-family: var(--pp-font-body);
}

.space-mobile-menu-icon div,
.pp-hdr-hamburger-lines span { height: 2px !important; }

@media (max-width: 380px) {
    .space-mobile-menu .space-mobile-menu-block { width: 100vw; max-width: none; }
}

/* Mercury overlay + close button — hidden; replaced by inline search */
.space-header-search-block,
.desktop-search-close-button { display: none !important; }

/* ── Search on tablet/mobile — same breakpoint the hamburger takes over
   nav. Inline expansion (desktop) has no room here once the hamburger
   sits next to it, so the pill breaks out into a full-width bar
   docked to the bottom of the header instead of squeezing sideways. ── */
@media (max-width: 967px) {
    /* No room for the label pill next to the hamburger — collapse back to a
       bare white icon at the 44px touch-target minimum (no border/glow; the
       circle chrome doesn't read well at this size, and cyan is too loud
       next to the plain white hamburger). */
    .pp-sw-toggle {
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border: none;
        background: transparent;
        box-shadow: none;
        color: var(--pp-text-invert);
    }
    .pp-sw-toggle:hover { background: transparent; border-color: transparent; box-shadow: none; }
    .pp-sw-toggle:focus,
    .pp-sw-toggle:active { outline: none; box-shadow: none; background: transparent; }
    .pp-sw-toggle-label { display: none; }
    .pp-sw-toggle i { font-size: 1.05rem; }


    /* The desktop bg/border fade would play inside the header as the bar
       un-docks on close — the bar animates itself instead (ppSwBar*). */
    .pp-sw-shell { transition: none; }
    .pp-sw-open .pp-sw-shell { animation: ppSwBarIn .2s ease; }
    .pp-sw-closing .pp-sw-shell { animation: ppSwBarOut .18s ease forwards; pointer-events: none; }

    .pp-sw-open .pp-sw-shell,
    .pp-sw-open.pp-sdrop-active .pp-sw-shell {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        gap: 8px;
        padding: 10px 8px 10px 16px;
        border: none;
        border-bottom: 1px solid var(--pp-border-dark);
        border-radius: 0;
        background: var(--pp-bg-dark);
        box-shadow: none;
    }
    /* Inset field + bare close, instead of one edge-to-edge glowing box:
       a ring spanning the whole viewport only showed as stray cyan lines
       top and bottom. Cyan now appears only while the field has focus. */
    .pp-sw-open .pp-sw-pill {
        width: auto;
        flex: 1 1 auto;
        height: 44px;
        background: var(--pp-bg-card);
        border: 1px solid var(--pp-border-dark);
        border-radius: var(--pp-radius-pill);
        transition: border-color .15s, background .15s;
    }
    .pp-sw-open .pp-sw-pill:focus-within {
        border-color: var(--pp-cyan-500);
        background: #1F2730;
    }
    .pp-sw-open .pp-sw-form { padding: 0 16px; gap: 10px; }
    /* SVG mask, not a FA glyph: the loaded FA build's font-family name
       varies by plugin version and a mismatch renders an empty box. */
    .pp-sw-open .pp-sw-form::before {
        content: "";
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        background: var(--pp-text-muted);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: background .15s;
    }
    .pp-sw-open .pp-sw-pill:focus-within .pp-sw-form::before { background: var(--pp-cyan-500); }
    .pp-sw-open .pp-sw-input { font-size: 1rem; }
    .pp-sw-open .pp-sw-toggle {
        width: 44px;
        height: 44px;
        color: var(--pp-text-invert-muted);
    }
    .pp-sw-open .pp-sw-toggle:hover { color: var(--pp-text-invert); }
}

/* ── Live search dropdown ── */
.pp-search-dropdown {
    position: fixed;
    z-index: 9999;
    background: var(--pp-bg-card);
    border: 1px solid rgba(25, 200, 224, .4);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    display: none;
}

.pp-search-dropdown.pp-sdrop--visible {
    display: block;
    animation: ppSdropIn .14s ease;
}

/* Full-width mobile search bar (see .pp-sw-open .pp-sw-shell) sits flush
   with the viewport edges — the results list should match, not float
   with rounded corners mid-screen. */
@media (max-width: 967px) {
    .pp-search-dropdown { border: none; border-bottom: 1px solid var(--pp-border-dark); border-radius: 0; }
}

@keyframes ppSdropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pp-sdrop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    text-decoration: none;
    border-bottom: 1px solid var(--pp-border-dark);
    transition: background .1s;
    color: inherit;
}

.pp-sdrop-item:last-of-type { border-bottom: none; }

.pp-sdrop-item:hover,
.pp-sdrop-item.pp-sdrop--focused { background: var(--pp-bg-dark); }

.pp-sdrop-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    display: block;
}

.pp-sdrop-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pp-bg-dark);
    color: var(--pp-text-invert-muted);
    font-size: .75rem;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    flex-shrink: 0;
}

.pp-sdrop-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pp-sdrop-title {
    font-size: .8rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0;
    color: var(--pp-text-invert);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.pp-sdrop-cat {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #19C8E0;
}

.pp-sdrop-see-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--pp-text-invert-muted);
    text-decoration: none;
    background: var(--pp-bg-dark);
    transition: color .15s;
}

.pp-sdrop-see-all:hover,
.pp-sdrop-see-all.pp-sdrop--focused { color: var(--pp-cyan-500); }

.pp-sdrop-see-all i { font-size: .65rem; }

.pp-sdrop-empty {
    padding: 14px;
    font-size: .8rem;
    color: var(--pp-text-invert-muted);
    text-align: center;
}

.pp-sdrop-empty strong { color: var(--pp-text-invert); font-weight: 600; }

/* ── Live search: searching state ── */
.pp-sdrop-skel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--pp-border-dark);
}

.pp-sdrop-skel:last-child { border-bottom: none; }

.pp-sdrop-skel-thumb,
.pp-sdrop-skel-line {
    border-radius: 4px;
    background: linear-gradient(
        100deg,
        var(--pp-bg-dark) 40%,
        #232b34 55%,
        var(--pp-bg-dark) 70%
    );
    background-size: 200% 100%;
    animation: ppSdropPulse 1.2s ease-in-out infinite;
}

.pp-sdrop-skel-thumb { width: 40px; height: 40px; flex-shrink: 0; }

.pp-sdrop-skel-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pp-sdrop-skel-line--title { height: 10px; width: 70%; }
.pp-sdrop-skel-line--cat   { height: 8px;  width: 35%; }

@keyframes ppSdropPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-sdrop-skel-thumb,
    .pp-sdrop-skel-line { animation: none; background: var(--pp-bg-dark); }
}

/* ─────────────────────────────────────────────────────────
   INNER-PAGE TITLE BOX
───────────────────────────────────────────────────────── */
.space-title-box {
    background: #fff;
    border-bottom: 1px solid var(--pp-card-border);
}
.space-archive-title-box {
    text-align: center;
    background: linear-gradient(to bottom, #f9fafb, #fff);
    border-bottom: 1px solid var(--pp-card-border);
}
.space-title-box h1,
.space-title-box-h1 h1 {
    color: var(--pp-text);
    font-weight: 800;
    font-size: 2.25em;
    line-height: 1.2;
}
.space-title-box h1 { text-align: center; }
.space-title-box-ins { padding: 48px 24px; }

/* Archive / exposed-news list title */
.space-archive-loop-item-title a { font-size: 2.1em !important; }

/* Inner-page content */
.space-page-content a { color: var(--pp-accent); text-decoration: underline; }
.space-page-content-excerpt { display: none; }
.space-content-section.no-sidebar { max-width: 1200px; margin: 0 auto; }

/* ─────────────────────────────────────────────────────────
   SINGLE ARTICLE
───────────────────────────────────────────────────────── */

/* Hero band — white background with animated gradient orbs */
.pp-single-hero {
    background-color: var(--pp-bg-dark);
    padding: 56px 0 48px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--pp-border-dark);
}
/* Same edge-anchored glow bands as .pp-review-hero, fixed to the
   default site cyan (articles have no per-brand color to key off). */
.pp-single-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 110px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 38% 100% at  8% 100%, rgba(25,200,224, .68), transparent),
        radial-gradient(ellipse 38% 100% at 92% 100%, rgba(25,200,224, .62), transparent),
        radial-gradient(ellipse 32% 100% at 50% 100%, rgba(25,200,224, .50), transparent);
}
.pp-single-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 80px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 45% 100% at 28% 0%, rgba(25,200,224, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 25% 80%  at 72% 0%, rgba(25,200,224, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 28% 120% at 96% 0%, rgba(25,200,224, 0.16) 0%, transparent 65%);
}
.pp-single-hero .pp-container { position: relative; z-index: 1; }
.pp-single-hero-cats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.pp-single-hero-cat {
    display: inline-block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--pp-radius-sm);
    text-decoration: none;
    transition: background .15s;
}
.pp-single-hero-cat:hover { background: var(--pp-cyan-600); }

/* Live update → its event page (inc/live-update-backlink.php).
   Cyan like the byline link; padded to a
   44px tap target (12 + 20 + 12), with the negative margin keeping the visual spacing. */
.pp-single-backlinks {
    display: flex;
    flex-direction: column;
    margin: -12px 0 8px;
}
.pp-single-backlink {
    align-self: flex-start;
    max-width: 100%;
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    padding-block: 12px;
    color: var(--pp-cyan-500);
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: none;
}
.pp-single-backlink > span { min-width: 0; }
.pp-single-backlink strong { font-weight: 600; }
/* Only the event name underlines: across the arrow and label the line breaks into pieces */
.pp-single-backlink:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.pp-single-backlink:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
    border-radius: var(--pp-radius-sm);
}
.pp-single-backlink-icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px; /* centres on the first line when a long title wraps */
}

.pp-single-title {
    color: var(--pp-text-invert);
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin: 0 0 20px;
    max-width: 820px;
}
.pp-single-excerpt {
    color: rgba(255,255,255,.65);
    font-size: 1.1rem;
    line-height: 1.65;
    max-width: 720px;
    margin: 0 0 24px;
}
.pp-single-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 20px;
}
.pp-single-byline {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Google "preferred source" pill, right of the byline on the dark hero */
.pp-google-source {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-pill);
    background: var(--pp-bg-card);
    color: var(--pp-text-invert);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.pp-google-source:hover { border-color: var(--pp-cyan-500); color: var(--pp-text-invert); }
.pp-google-source:focus-visible { outline: 2px solid var(--pp-cyan-500); outline-offset: 2px; }
@media (max-width: 768px) {
    .pp-google-source { min-height: 44px; }
}
.pp-google-source-icon { width: 16px; height: 16px; flex-shrink: 0; }
.pp-single-byline-avatars {
    display: flex;
    flex-shrink: 0;
}
.pp-single-byline img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
/* Co-author avatars overlap; the ring in the hero colour separates them */
.pp-single-byline-avatars img + img {
    margin-left: -10px;
    box-shadow: 0 0 0 2px var(--pp-bg-dark);
}
.pp-single-byline-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pp-single-byline-author {
    font-size: .875rem;
    font-weight: 600;
    color: var(--pp-text-invert);
}
.pp-single-byline-author a {
    color: var(--pp-cyan-500);
    text-decoration: none;
}
.pp-single-byline-author a:hover { text-decoration: underline; }
.pp-single-byline-translator {
    font-size: .8rem;
    color: rgba(255,255,255,.65);
}
.pp-single-byline-translator a {
    color: var(--pp-text-invert);
    text-decoration: none;
}
.pp-single-byline-translator a:hover { color: var(--pp-cyan-500); }
.pp-single-byline-date {
    font-size: .8rem;
    color: rgba(255,255,255,.45);
}

/* Featured image — inside the hero band */
.pp-single-feat-img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: var(--pp-radius-md);
    margin-top: 32px;
}

/* Article body section */
.pp-single-body-section {
    background-color: #ffffff;
}

/* Two-column layout */
.pp-single-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 56px;
    padding: 48px 0 72px;
    align-items: start;
}
.pp-single-body { min-width: 0; }

/* Prose */
.pp-single-content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--pp-text);
}
.pp-single-content > * + * { margin-top: 1.25em; }

/* Section headings — same accent-underline system as .pp-review-content,
   using the plain site cyan */
.pp-single-content h2 {
    position: relative;
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin-top: 2.2em;
    padding-bottom: .55em;
    color: var(--pp-text);
}
.pp-single-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: var(--pp-radius-pill);
    background: linear-gradient(90deg, var(--pp-cyan-500) 0%, rgba(25,200,224,.15) 100%);
}
.pp-single-content h3 {
    position: relative;
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    font-weight: 700;
    margin-top: 1.7em;
    padding-left: 14px;
    letter-spacing: -.01em;
    color: var(--pp-text);
}
.pp-single-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 3px;
    border-radius: var(--pp-radius-pill);
    background: var(--pp-cyan-500);
    opacity: .55;
}
.pp-single-content a {
    color: var(--pp-cyan-600);
    text-decoration: underline;
    text-decoration-color: rgba(25,200,224,.35);
    text-underline-offset: 2px;
    transition: text-decoration-color .15s;
}
.pp-single-content a:hover { text-decoration-color: rgba(25,200,224,.8); }
.pp-single-content img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    border-radius: var(--pp-radius-md);
}

/* Blockquotes — glass callout, matching review/play-now content */
.pp-single-content blockquote {
    position: relative;
    padding: 18px 22px 18px 26px;
    margin: 1.8em 0;
    background: linear-gradient(160deg, rgba(25,200,224,.08), rgba(25,200,224,.02));
    border: 1px solid rgba(25,200,224,.18);
    border-radius: var(--pp-radius-md);
    color: var(--pp-text-soft);
    font-style: italic;
}
.pp-single-content blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: var(--pp-radius-pill);
    background: var(--pp-cyan-500);
}
.pp-single-content blockquote p:last-child { margin-bottom: 0; }
/* Mercury styles every blockquote as 1.777em/900 Roboto, centred, and pads
   its quote-icon pseudo-element. Our accent bar inherited that padding and
   became a 50px cyan blob over the first letters; reset both, for article
   and review quotes alike. */
:is(.pp-single-content, .pp-review-content) blockquote {
    font-family: var(--pp-font-body);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.7 !important;
    text-align: left;
}
:is(.pp-single-content, .pp-review-content) blockquote p { line-height: inherit !important; }
:is(.pp-single-content, .pp-review-content) blockquote::before {
    right: auto;
    padding: 0;
    font-size: 0;
}

/* Lists — custom markers instead of default browser bullets/numbers */
.pp-single-content ul,
.pp-single-content ol {
    padding-left: .2em;
    list-style: none;
}
.pp-single-content ol { counter-reset: pp-sc-ol; }
.pp-single-content li {
    position: relative;
    padding-left: 1.5em;
}
.pp-single-content li + li { margin-top: .55em; }
.pp-single-content ul > li::before {
    content: "";
    position: absolute;
    left: .15em;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pp-cyan-500);
}
.pp-single-content ol > li { counter-increment: pp-sc-ol; }
.pp-single-content ol > li::before {
    content: counter(pp-sc-ol);
    position: absolute;
    left: 0;
    top: .05em;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    border-radius: 50%;
    background: rgba(25,200,224,.12);
    color: var(--pp-cyan-600);
}

/* Tables — same unified glass treatment as review/play-now content */
.pp-single-content table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: .9rem;
    margin: 1.8em 0;
    border-radius: var(--pp-radius-lg) !important;
    overflow: hidden;
    border: 1px solid rgba(25,200,224,.20) !important;
    background: rgba(255,255,255,.7) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
}
.pp-single-content table thead tr,
.pp-single-content table th,
.pp-single-content table td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}
.pp-single-content table thead tr,
.pp-single-content table thead th {
    background:
        linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.2) 100%),
        rgba(25,200,224,.16) !important;
    background-color: rgba(25,200,224,.16) !important;
    border-bottom: 1px solid rgba(25,200,224,.24) !important;
}
.pp-single-content table thead th {
    padding: 13px 18px;
    text-align: left;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pp-text) !important;
    white-space: nowrap;
}
.pp-single-content table tbody tr,
.pp-single-content table tbody td {
    background: transparent !important;
    background-color: transparent !important;
}
/* The row line goes on the cells: with border-collapse: separate a <tr>
   border never paints, and core's table block CSS (which can load after
   this file) gives every cell a currentColor border we must override. */
.pp-single-content table tbody tr { transition: background .15s; }
.pp-single-content table tbody td { border-bottom: 1px solid var(--pp-border) !important; }
.pp-single-content table tbody tr:last-child td { border-bottom: none !important; }
.pp-single-content table tbody tr:nth-child(even) { background: rgba(25,200,224,.05) !important; }
.pp-single-content table tbody tr:hover,
.pp-single-content table tbody tr:nth-child(even):hover { background: rgba(25,200,224,.10) !important; }
.pp-single-content table td {
    padding: 13px 18px;
    color: var(--pp-text) !important;
    vertical-align: top;
    line-height: 1.5;
}
.pp-single-content table td:first-child {
    font-weight: 700;
    color: var(--pp-text-soft);
    white-space: nowrap;
}
/* Client wants every table left-aligned. Editors' column alignment
   (has-text-align-*, data-align, inline text-align) left numbers floating
   centre/right under a left-aligned header, so it's overridden outright. */
:is(.pp-single-content, .pp-review-content) table :is(th, td) { text-align: left !important; }

/* Dividers hidden — same editorial choice as review/play-now content */
.pp-single-content hr { display: none; }

/* Tags */
.pp-single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* No rule here: tags belong to the article, and the related block below
       already draws the one divider. Two lines this close read as clutter. */
    margin-top: 40px;
}
.pp-single-tags a {
    display: inline-block;
    border: 1px solid var(--pp-border);
    color: var(--pp-text-muted);
    font-size: .8rem;
    padding: 5px 14px;
    border-radius: var(--pp-radius-pill);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.pp-single-tags a:hover {
    border-color: var(--pp-cyan-500);
    color: var(--pp-cyan-500);
}

/* Author box — under the article, one card per credited person */
.pp-author-box {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pp-author-box-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-text-muted);
    margin: 0 0 4px;
}
.pp-author-card {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: var(--pp-bg-alt);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
}
.pp-author-card-avatar { flex-shrink: 0; }
.pp-author-card-avatar img {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}
.pp-author-card-body {
    flex: 1;
    min-width: 0;
}
/* Cyan on this light card measures 2.6:1, so the role stays dark text and
   cyan survives as a decorative rule, which needs no contrast. */
.pp-author-card-role {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-text);
}
.pp-author-card-role::before {
    content: "";
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: var(--pp-cyan-500);
    flex-shrink: 0;
}
.pp-author-card-job {
    color: var(--pp-text-soft);
    font-weight: 500;
}
.pp-author-card-name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}
.pp-author-card-name a {
    color: var(--pp-text);
    text-decoration: none;
}
/* Hover underlines instead of recolouring: cyan text would drop to 2.6:1 */
.pp-author-card-name a:hover,
.pp-author-card-more:hover {
    text-decoration: underline;
    text-decoration-color: var(--pp-cyan-500);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.pp-author-card-bio {
    margin-top: 8px;
    max-width: 68ch;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--pp-text-soft);
}
.pp-author-card-bio p { margin: 0 0 8px; }
.pp-author-card-bio p:last-child { margin-bottom: 0; }
.pp-author-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}
.pp-author-card-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-author-card-social a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--pp-border);
    background: var(--pp-bg);
    color: var(--pp-text-soft);
    transition: border-color .15s, color .15s;
}
.pp-author-card-social a:hover {
    border-color: var(--pp-cyan-500);
    color: var(--pp-text);
}
/* 36px reads right next to the avatar; the invisible ring makes it a 44px tap target */
.pp-author-card-social a::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
}
.pp-author-card-social svg {
    width: 15px;
    height: 15px;
}
/* Always right-aligned, so it lands in the same spot whether or not the person has socials */
.pp-author-card-more {
    margin-left: auto;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pp-text);
    text-decoration: none;
    white-space: nowrap;
}
/* Cyan-500 rings are used on dark surfaces; on this light card that would be 1.9:1 */
.pp-author-card-name a:focus-visible,
.pp-author-card-more:focus-visible,
.pp-author-card-social a:focus-visible {
    outline: 2px solid var(--pp-text);
    outline-offset: 2px;
    border-radius: var(--pp-radius-sm);
}
.pp-author-card-social a:focus-visible { border-radius: 50%; }
.pp-author-box .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* Author page header — the article card, scaled up, full bio; sits in the main column beside the sidebar */
.pp-author-card--profile {
    gap: 28px;
    padding: 32px;
    margin: 0 0 32px;
}
.pp-author-card--profile .pp-author-card-avatar img {
    width: 120px;
    height: 120px;
}
.pp-author-card--profile .pp-author-card-name {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    letter-spacing: -.03em;
    line-height: 1.15;
}
.pp-author-card--profile .pp-author-card-bio {
    margin-top: 12px;
    font-size: 1rem;
}
.pp-author-card-count {
    margin-left: auto;
    font-size: .8rem;
    font-weight: 600;
    color: var(--pp-text-soft);
}
.pp-author-archive-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 20px;
}

@media (max-width: 600px) {
    .pp-author-card {
        flex-direction: column;
        gap: 14px;
        padding: 20px;
    }
    .pp-author-card-avatar img {
        width: 64px;
        height: 64px;
    }
    .pp-author-card-bio { font-size: 1rem; }
    .pp-author-card--profile {
        padding: 24px 20px;
    }
    .pp-author-card--profile .pp-author-card-avatar img {
        width: 88px;
        height: 88px;
    }
}

/* Page pagination */
.pp-single-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
}
.pp-single-pages span a,
.pp-single-pages span {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-pill);
    font-size: .85rem;
    text-decoration: none;
    color: var(--pp-text-muted);
}
.pp-single-pages span a:hover { border-color: var(--pp-cyan-500); color: var(--pp-cyan-500); }

/* Sidebar */
.pp-single-sidebar {
    position: sticky;
    top: 80px; /* 64px compact header + 16px clearance */
}

/* WP admin bar offset — keep clearance under the fixed header, which
   itself shifts down via .admin-bar .pp-hdr-wrap */
.admin-bar .pp-single-sidebar { top: 112px; }
@media (max-width: 782px) {
    .admin-bar .pp-single-sidebar { top: 126px; }
}
/* sidebar-poker-rooms.php brings its own sticky .pp-archive-sidebar wrapper.
   Nested inside this sticky aside it kept travelling after the outer one
   stopped at the row's end, sliding over the share widget below it. */
.pp-single-sidebar .pp-archive-sidebar { position: static; }

/* ── Sidebar: Share widget (single article page) ──
   Namespaced pp-share-widget* — independent from .pp-share-btn used on
   the dark casino-review hero (aces/single-casino/style-1.php); that
   one's tuned for a dark band, this one for a white sidebar card. */
.pp-share-widget {
    position: relative;
    margin-top: 16px;
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    background: #fff;
    background-image:
        radial-gradient(ellipse 240px 160px at 110% -5%, rgba(25,200,224,.08), transparent),
        radial-gradient(ellipse 140px 100px at -5% 105%, rgba(25,200,224,.05), transparent);
    border: 1px solid var(--pp-border);
    padding: 18px;
}

.pp-share-widget-title {
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pp-text);
    margin: 0 0 14px;
}

.pp-share-widget-list {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Black glassmorphic circle, cyan on hover/focus — background never
   matches the icon color so the glyph stays visible in every state. */
.pp-share-widget-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(14,20,25,.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(25,200,224,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    color: rgba(255,255,255,.7);
    cursor: pointer;
    transition: border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.pp-share-widget-btn svg { width: 18px; height: 18px; }
.pp-share-widget-btn:hover {
    border-color: var(--pp-cyan-500);
    color: var(--pp-cyan-500);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(25,200,224,.14);
    transform: translateY(-1px);
}
.pp-share-widget-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(25,200,224,.35);
}

.pp-share-widget-btn--copy { position: relative; }
.pp-share-widget-btn--copy .pp-share-widget-icon-check { display: none; }
.pp-share-widget-btn--copy.is-copied {
    border-color: #22c55e;
    color: #22c55e;
}
.pp-share-widget-btn--copy.is-copied .pp-share-widget-icon-copy  { display: none; }
.pp-share-widget-btn--copy.is-copied .pp-share-widget-icon-check { display: block; }

/* Collapsed to zero height at rest so it doesn't reserve bottom
   whitespace and unbalance the card's top/bottom padding. */
.pp-share-widget-toast {
    display: block;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    font-size: .72rem;
    font-weight: 600;
    color: var(--pp-cyan-600);
    opacity: 0;
    transition: opacity .2s, max-height .2s, margin-top .2s;
    pointer-events: none;
}
.pp-share-widget-toast.is-visible {
    max-height: 20px;
    margin-top: 10px;
    opacity: 1;
}

/* Related posts */
.pp-single-related {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--pp-border);
}
.pp-single-related-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 24px;
    color: var(--pp-text);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .pp-single-layout {
        /* minmax(0, …): a bare 1fr can't shrink below its widest item's
           min-content, so the stacked sidebar pushed the column ~8px past
           the screen on 360px phones */
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .pp-single-sidebar { position: static; min-width: 0; }
    .pp-share-widget--sidebar { display: none; }
    .pp-share-widget--inline { margin-top: 40px; }
}
/* Inline copy only exists for the stacked layout */
@media (min-width: 1025px) {
    .pp-share-widget--inline { display: none; }
}
@media (max-width: 768px) {
    .pp-single-hero { padding: 40px 0 32px; }
    /* The three side-by-side glow ellipses only blend at desktop width; on a
       phone each is ~140px wide, so they read as separate lumps with dark
       valleys between them. One wide, evenly fading glow instead. */
    .pp-single-hero::after {
        height: 96px;
        background: radial-gradient(140% 100% at 50% 100%,
            rgba(25,200,224, .40) 0%,
            rgba(25,200,224, .16) 45%,
            rgba(25,200,224, 0) 80%);
    }
    .pp-single-hero::before {
        height: 72px;
        background: radial-gradient(130% 100% at 30% 0%,
            rgba(25,200,224, .12) 0%,
            rgba(25,200,224, 0) 75%);
    }
}

/* ─────────────────────────────────────────────────────────
   SHARED SECTION UTILITIES
───────────────────────────────────────────────────────── */
.pp-section { padding: var(--pp-section-pad) 0; }

/* Per-section backgrounds — intentional, not nth-child */
.pp-hero        { background: #ffffff; }
.pp-news        { background: #f3f4f6; }
.pp-sites       { background: var(--pp-white); }
.pp-articles    { background: var(--pp-bg); }
.pp-promotions  { background: var(--pp-bg); overflow: hidden; }
.pp-videos      { background: var(--pp-bg); }
.pp-ewallets    { background: var(--pp-page-bg); }

/* Section header row (title + see all) */
.pp-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--pp-heading-gap);
}

/* Section titles — clean, no decorative bar */
.pp-section-title {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--pp-text);
    margin: 0 0 var(--pp-heading-gap);
    line-height: 1.1;
    position: relative;
    display: inline-block;
    isolation: isolate;
}
.pp-section-title {
    /* A thick translucent underline rather than a box behind the element:
       it follows each line's actual text, so a heading that wraps doesn't
       get a highlight bar stretched across the full column. */
    text-decoration: underline;
    text-decoration-color: rgba(25, 200, 224, 0.13);
    text-decoration-thickness: .38em;
    text-underline-offset: -.32em;
    text-decoration-skip-ink: none;
}
.pp-section-header .pp-section-title { margin: 0; }

/* "See all" link */
.pp-see-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--pp-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s;
}
.pp-see-all::after { content: '›'; font-size: 1rem; line-height: 1; }
.pp-see-all:hover { opacity: .75; text-decoration: none; }

/* Standalone section title (no row) */
.pp-section-title-standalone {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--pp-text);
    margin: 0 0 var(--pp-heading-gap);
    line-height: 1.1;
    position: relative;
    display: inline-block;
    isolation: isolate;
}
.pp-section-title-standalone {
    /* A thick translucent underline rather than a box behind the element:
       it follows each line's actual text, so a heading that wraps doesn't
       get a highlight bar stretched across the full column. */
    text-decoration: underline;
    text-decoration-color: rgba(25, 200, 224, 0.13);
    text-decoration-thickness: .38em;
    text-underline-offset: -.32em;
    text-decoration-skip-ink: none;
}

/* ─────────────────────────────────────────────────────────
   LIVE NOW STRIP — homepage, only while an event is live
───────────────────────────────────────────────────────── */
.pp-livenow {
    position: relative;
    /* Live coverage is the site's main product, so this band is the one
       place red goes beyond the dot: a broadcast-red glow from the label
       side, with cyan kept for the actions. */
    background:
        radial-gradient(640px 160px at 0% 50%, rgba(230, 57, 70, .16), transparent 70%),
        radial-gradient(420px 120px at 100% 50%, rgba(230, 57, 70, .08), transparent 70%),
        var(--pp-bg-dark);
    border-bottom: 1px solid rgba(230, 57, 70, .35);
    color: var(--pp-text-invert);
}
.pp-livenow-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 72px;
}

.pp-livenow-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-right: 20px;
    border-right: 1px solid var(--pp-border-dark);
    align-self: stretch;
}
.pp-livenow-badge {
    /* Same outlined broadcast pill as the header's LIVE REPORTING item, so
       the two read as one system; a solid red block was too loud. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 13px 0 11px;
    border-radius: var(--pp-radius-pill);
    border: 1px solid rgba(230, 57, 70, .6);
    background: rgba(14, 20, 25, .55);
    /* White, not red: red text on the red glow measured ~3:1 and was hard to
       read. The outline and dot carry the red. */
    color: var(--pp-text-invert);
}
.pp-livenow-label-text {
    font-family: var(--pp-font-display);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pp-livenow-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-red);
    box-shadow: 0 0 5px var(--pp-red);
    flex-shrink: 0;
}
/* Expanding ring rather than a blinking dot: reads as "broadcasting" and
   only animates transform/opacity. */
.pp-livenow-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--pp-red);
    animation: pp-livenow-ring 1.8s cubic-bezier(.2, .6, .4, 1) infinite;
}
@keyframes pp-livenow-ring {
    0%   { transform: scale(1);   opacity: .55; }
    100% { transform: scale(3.2); opacity: 0; }
}

.pp-livenow-track {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.pp-livenow-track::-webkit-scrollbar { display: none; }

.pp-livenow-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 0;
    min-width: 340px;
    padding: 10px 12px;
    border-radius: var(--pp-radius-md);
    color: inherit;
    text-decoration: none;
    scroll-snap-align: start;
    transition: background .2s ease;
}
.pp-livenow-item + .pp-livenow-item::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: var(--pp-border-dark);
}
.pp-livenow-item:hover,
.pp-livenow-item:focus-visible {
    background: rgba(255, 255, 255, .04);
    color: inherit;
    text-decoration: none;
}
.pp-livenow-item:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: -2px;
}

.pp-livenow-thumb {
    width: 64px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--pp-bg-card);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.pp-livenow-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-livenow-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.pp-livenow-name {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pp-text-invert);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-livenow-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: .75rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, .62);
}
.pp-livenow-day {
    font-family: var(--pp-font-display);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-cyan-500);
    white-space: nowrap;
}
.pp-livenow-venue {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-livenow-meta > * + *::before {
    content: '·';
    margin-right: 8px;
    color: rgba(255, 255, 255, .35);
}

.pp-livenow-cta.pp-btn-room-play {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 9px 16px;
}
/* Whole row is the link, so the row's hover drives the pill (as on room rows). */
.pp-livenow-item:hover .pp-livenow-cta,
.pp-livenow-item:focus-visible .pp-livenow-cta {
    background: var(--pp-cyan-500) !important;
    border-color: var(--pp-cyan-500) !important;
    color: var(--pp-bg-dark) !important;
}
.pp-livenow-cta-icon { transition: transform .2s ease; }
.pp-livenow-item:hover .pp-livenow-cta-icon { transform: translateX(2px); }

.pp-livenow-dots { display: none; }

/* Arrow-only pill: used wherever several events share the row, so the
   event names get the width instead of the button label. */
.pp-livenow-track--compact .pp-livenow-cta.pp-btn-room-play {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
}
.pp-livenow-track--compact .pp-livenow-cta-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.pp-livenow-track--compact .pp-livenow-item { min-width: 0; }

/* One event: the band has room to say more, so add the dates and give the
   name a little more presence instead of leaving the middle empty. */
.pp-livenow-dates { display: none; white-space: nowrap; }
.pp-livenow-track--single .pp-livenow-dates { display: inline; }
.pp-livenow-track--single .pp-livenow-name { font-size: 1rem; }

/* Below ~1180px three don't fit: show two and let the rest rotate in, with
   a fade on the right edge so the overflow reads as "more", not "cut off". */
@media (min-width: 768px) and (max-width: 1179px) {
    .pp-livenow-track--compact {
        gap: 8px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    }
    .pp-livenow-track--compact .pp-livenow-item { flex: 0 0 calc(50% - 28px); }
}

/* Two events on a tablet: same arrow-only pill. */
@media (min-width: 768px) and (max-width: 1100px) {
    .pp-livenow-track:not(.pp-livenow-track--single) .pp-livenow-item { min-width: 0; }
    .pp-livenow-track:not(.pp-livenow-track--single) .pp-livenow-cta.pp-btn-room-play {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
    }
    .pp-livenow-track:not(.pp-livenow-track--single) .pp-livenow-cta-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    /* Label + pips become a small top line so the event gets the full width. */
    .pp-livenow-inner {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 4px;
        column-gap: 12px;
        min-height: 0;
        padding-top: 10px;
        padding-bottom: 8px;
    }
    .pp-livenow-label {
        order: 0;
        flex: 1 0 auto;
        align-self: auto;
        gap: 8px;
        padding-right: 0;
        border-right: 0;
    }
    .pp-livenow-badge { gap: 6px; height: 26px; padding: 0 10px 0 9px; }
    .pp-livenow-label-text { font-size: .68rem; letter-spacing: .12em; }
    .pp-livenow-dot { width: 6px; height: 6px; }

    /* One event per view; swipe or auto-rotate (js/live-now.js). */
    .pp-livenow-track { order: 2; flex: 0 0 100%; gap: 0; }
    .pp-livenow-item {
        flex: 0 0 100%;
        min-width: 0;
        gap: 12px;
        padding: 6px 0;
    }
    .pp-livenow-item + .pp-livenow-item::before { display: none; }
    .pp-livenow-item:hover { background: none; }
    .pp-livenow-thumb { width: 56px; height: 42px; }
    .pp-livenow-name,
    .pp-livenow-track--single .pp-livenow-name { font-size: .875rem; }
    .pp-livenow-track--single .pp-livenow-dates { display: none; }

    /* Icon-only pill; the row itself stays the large tap target. The fixed
       flex basis beats the room-list rule that stretches every play pill. */
    .pp-livenow-cta.pp-btn-room-play {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
    }
    .pp-livenow-cta-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .pp-livenow-cta-icon { width: 14px; height: 14px; }

    .pp-livenow-dots {
        order: 1;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .pp-livenow-pip {
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .25);
        transition: width .25s ease, background .25s ease;
    }
    .pp-livenow-pip.is-active {
        width: 14px;
        background: var(--pp-cyan-500);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-livenow-dot::after { animation: none; }
    .pp-livenow-track { scroll-behavior: auto; }
}

/* ─────────────────────────────────────────────────────────
   TOP STORIES HERO
───────────────────────────────────────────────────────── */
.pp-hero { padding: 40px 0 52px; }

/* "Top Stories" heading */
.pp-hero-heading {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--pp-text);
    margin: 0;
    line-height: 1.1;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--pp-text);
}

/* Top bar: heading + see-all link */
.pp-hero-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--pp-heading-gap);
}
.pp-hero-top-bar .pp-hero-heading {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    position: relative;
    width: fit-content;
    isolation: isolate;
}
.pp-hero-top-bar .pp-hero-heading {
    /* A thick translucent underline rather than a box behind the element:
       it follows each line's actual text, so a heading that wraps doesn't
       get a highlight bar stretched across the full column. */
    text-decoration: underline;
    text-decoration-color: rgba(25, 200, 224, 0.13);
    text-decoration-thickness: .38em;
    text-underline-offset: -.32em;
    text-decoration-skip-ink: none;
}

/* Outer grid: main content + right sidebar */
.pp-hero-outer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 272px;
    gap: 40px;
    align-items: start;
}
/* See .pp-archive-layout: with the phone's text size turned up, the stacked
   sidebar's min-content (~410px) widened the column and pushed every card
   past the right edge of the screen. */
.pp-hero-outer-grid > * { min-width: 0; }

/* Banner above Top Stories: as wide as the main column below it (container
   minus sidebar + gap), so a 16:9 livestream doesn't fill the whole screen */
.pp-home-hero-banner { max-width: calc(100% - 272px - 40px); }

/* Every sidebar block switched off in PokerPro → Homepage: the stories take
   the full width, and so does the banner above them */
.pp-hero--full .pp-hero-outer-grid { grid-template-columns: minmax(0, 1fr); }
.pp-hero--full .pp-home-hero-banner { max-width: none; }
@media (max-width: 1100px) {
    .pp-home-hero-banner { max-width: calc(100% - 240px - 28px); }
}
@media (max-width: 967px) {
    .pp-home-hero-banner { max-width: none; }
}

/* 2×3 news grid below the featured article */
.pp-hero-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 28px;
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--pp-card-border);
}

/* ── Featured article (left) ── */
.pp-hero-news-card { display: block; }

.pp-hero-news-img {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--pp-radius);
    aspect-ratio: 16/9;
    background: #e2eaf2;
    margin-bottom: 18px;
}
.pp-hero-news-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.pp-hero-news-card:hover .pp-hero-news-img img { transform: scale(1.04); }
.pp-hero-news-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--pp-bg) 0%, transparent 20%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
    opacity: 1;
    transition: opacity .35s ease;
}
.pp-hero-news-card:hover .pp-hero-news-img::after { opacity: 0; }
.pp-hero-news-img-ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #dde3ea, #c8d0d9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8fa0b0;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .5px;
}

/* Category pill — below image, above title */
.pp-hero-news-cat {
    display: inline-block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--pp-radius-sm);
    line-height: 1;
    margin-bottom: 10px;
}

.pp-hero-news-body { padding: 0; }
.pp-hero-news-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 10px;
    color: var(--pp-text);
}
.pp-hero-news-title a { color: inherit; text-decoration: none; transition: color .15s; }
.pp-hero-news-title a:hover { color: var(--pp-accent); }
.pp-hero-news-deck {
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--pp-text-body);
    margin: 0 0 12px;
    line-height: 1.55;
}
.pp-hero-news-meta {
    font-size: .78rem;
    color: var(--pp-text-muted);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.pp-hero-news-meta strong { color: var(--pp-text-body); font-weight: 600; }

/* ── Right sidebar: poker site banner cards ── */
.pp-hero-banners {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Widgets size to their content here, so long event names at a large phone
   text size ran past the screen instead of ellipsing */
.pp-hero-banners > * { max-width: 100%; }

.pp-hero-banner-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--pp-white);
    border: 1px solid var(--pp-card-border);
    border-radius: var(--pp-radius-sm);
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.pp-hero-banner-card:hover {
    border-color: var(--pp-accent);
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    text-decoration: none;
    color: inherit;
}

.pp-hero-banner-img {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: var(--pp-radius-sm);
    overflow: hidden;
    background: #e8eaef;
}
.pp-hero-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}
.pp-hero-banner-img-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e2eaf2, #c8d4e0);
}
.pp-hero-banner-img-ph span {
    font-size: .65rem;
    font-weight: 700;
    color: var(--pp-text-muted);
    text-align: center;
    padding: 4px;
    line-height: 1.2;
}

.pp-hero-banner-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pp-hero-banner-name {
    font-size: .82rem;
    font-weight: 700;
    color: var(--pp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-hero-banner-bonus {
    font-size: .72rem;
    color: var(--pp-text-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-hero-banner-cta {
    display: inline-block;
    margin-top: 4px;
    background: var(--pp-accent);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--pp-radius-pill);
    align-self: flex-start;
    transition: background .15s;
}
.pp-hero-banner-card:hover .pp-hero-banner-cta { background: var(--pp-accent-dark, #0088bb); }

/* ── PP Approved widgets above casino cards ── */
.pp-hero-approved-widgets {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pp-border);
}
.pp-hero-approved-widgets .pp-hero-widget,
.pp-hero-approved-widgets figure {
    margin: 0;
}
.pp-hero-approved-widgets img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--pp-radius-md);
}
.pp-hero-approved-widgets figure a,
.pp-hero-approved-widgets a {
    display: block;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    transition: opacity .15s;
}
.pp-hero-approved-widgets figure a:hover,
.pp-hero-approved-widgets a:hover { opacity: .9; }

/* ── Category pill below grid news card images ── */
.pp-news-card-cat {
    display: inline-block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    line-height: 1;
    margin-bottom: 6px;
}

/* ─────────────────────────────────────────────────────────
   CONTENT CARDS  (shared base)
───────────────────────────────────────────────────────── */
.pp-card {
    background: var(--pp-white);
    border-radius: var(--pp-radius);
    border: 1px solid var(--pp-card-border);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease;
}
.pp-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
}

.pp-card-img {
    position: relative;
    overflow: hidden;
    background: #e8eaef;
}
.pp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.pp-card:hover .pp-card-img img { transform: scale(1.05); }

.pp-card-img-ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e6ea 0%, #cdd3da 100%);
}

/* Category badge on image */
.pp-card-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--pp-accent);
    color: #fff;
    font-family: var(--pp-font);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 3px;
    line-height: 1;
    z-index: 1;
}

.pp-card-body { padding: 14px 16px 18px; }

.pp-card-type {
    display: block;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--pp-accent);
    margin-bottom: 7px;
}

.pp-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--pp-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-card a .pp-card-title,
.pp-card-link .pp-card-title { color: var(--pp-text); }
.pp-card:hover .pp-card-title { color: var(--pp-accent); }

.pp-card-date {
    display: block;
    font-size: .72rem;
    color: var(--pp-text-muted);
}

.pp-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ─────────────────────────────────────────────────────────
   RECENT NEWS  — featured hero + sub-grid
───────────────────────────────────────────────────────── */

/* ── Featured (first) article ── */
.pp-news-featured {
    margin-bottom: 52px;
    border-bottom: 2px solid var(--pp-card-border);
    padding-bottom: 52px;
}
.pp-news-featured-img {
    display: block;
    border-radius: var(--pp-radius);
    overflow: hidden;
    margin-bottom: 24px;
    aspect-ratio: 16/7;
}
.pp-news-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.pp-news-featured:hover .pp-news-featured-img img { transform: scale(1.03); }
.pp-news-featured-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e6ea, #cdd3da);
}
.pp-news-featured-body { max-width: 720px; }
.pp-news-feat-cat {
    display: inline-block;
    background: var(--pp-accent);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    line-height: 1;
    margin-bottom: 16px;
}
.pp-news-feat-title {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 14px;
    color: var(--pp-text);
}
.pp-news-feat-title a {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.pp-news-feat-title a:hover { color: var(--pp-accent); }
.pp-news-feat-deck {
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--pp-text-body);
    margin: 0 0 16px;
    line-height: 1.55;
}
.pp-news-feat-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--pp-text-muted);
    margin-bottom: 22px;
}
.pp-news-feat-meta strong { color: var(--pp-text-body); font-weight: 600; }
.pp-news-meta-sep { opacity: .4; }
.pp-btn-read-more {
    display: inline-block;
    background: transparent;
    color: var(--pp-text) !important;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 10px 24px;
    border-radius: var(--pp-radius-pill);
    border: 1.5px solid var(--pp-border);
    text-decoration: none !important;
    transition: background .18s, border-color .18s, color .18s;
}
.pp-btn-read-more:hover {
    background: var(--pp-bg-alt);
    border-color: var(--pp-text-muted);
    color: var(--pp-text) !important;
    text-decoration: none;
}

/* ── Sub-grid heading ── */
.pp-news-sub-heading {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--pp-text);
    margin: 0 0 28px;
    line-height: 1;
}

/* ── Sub-grid (2 col) ── */
.pp-news-sub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 32px;
}

/* ── News card (sub-grid and fallback) ── */
.pp-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
}
.pp-news-card {
    background: transparent;
    border-radius: 0;
    border: none;
    overflow: visible;
    transition: none;
}
.pp-news-card:hover { transform: none; box-shadow: none; }
.pp-news-card-link { display: block; text-decoration: none; color: inherit; }
.pp-news-card-img  {
    position: relative;
    overflow: hidden;
    border-radius: var(--pp-radius);
    aspect-ratio: 3/2;
    background: #e8eaef;
    margin-bottom: 14px;
}
.pp-news-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.pp-news-card-link:hover .pp-news-card-img img { transform: scale(1.05); }
.pp-news-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e6ea, #cdd3da);
}
/* Inline category pill (below image, in card body) */
.pp-news-card-cat-inline {
    display: inline-block;
    background: var(--pp-accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 3px;
    line-height: 1;
    margin-bottom: 9px;
}
.pp-news-card-body { padding: 0; }
.pp-news-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 9px;
    color: var(--pp-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.pp-news-card-link:hover .pp-news-card-title { color: var(--pp-accent); }
.pp-news-card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    color: var(--pp-text-muted);
    flex-wrap: wrap;
}
.pp-news-card-meta strong { color: var(--pp-text-body); font-weight: 600; }
.pp-news-card-date {
    display: inline;
    font-size: .75rem;
    color: var(--pp-text-muted);
}

/* ─────────────────────────────────────────────────────────
   IN-CONTENT NEWS BLOCKS  (inc/news-shortcodes.php)
   "More News from …" grids and "In This Series" lists that
   editors add to articles and tournaments. Same cards as
   "More Articles"; resets undo .pp-single-content's link,
   heading, list and image styles, which are meant for prose.
───────────────────────────────────────────────────────── */
/* Sections are set apart by space and their heading, not rules: stacked
   hairlines (block, next section, list top) read as clutter */
.pp-news-block { margin: 3em 0 2.5em; }
.pp-single-content .pp-news-block-title,
.pp-news-block-title {
    margin: 0 0 22px;
    padding: 0;
    font-family: var(--pp-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: var(--pp-text);
}
.pp-single-content .pp-news-block-title::after { content: none; }

.pp-news-block-items { display: grid; gap: 36px 24px; }
.pp-news-block--cols-3 .pp-news-block-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-news-block--cols-2 .pp-news-block-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-news-block--cols-1 .pp-news-block-items { grid-template-columns: minmax(0, 1fr); }

/* Prose resets inside articles */
.pp-single-content .pp-news-block > * + *,
.pp-single-content .pp-news-block-items > * + * { margin-top: 0; }
.pp-single-content .pp-news-block a {
    color: inherit;
    text-decoration: none;
}
.pp-single-content .pp-news-block .pp-news-card-title {
    margin: 0 0 9px;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1.25;
}
.pp-single-content .pp-news-block .pp-news-card-title::before { content: none; }
.pp-single-content .pp-news-block .pp-news-card-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0;
}
.pp-news-card-excerpt {
    margin: 0 0 10px;
    color: var(--pp-text-soft);
    font-size: .9rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-single-content .pp-news-block .pp-news-card-meta { line-height: 1.4; }

/* "Show all N articles": native <details>, the summary is the READ REVIEW button */
.pp-news-block-more > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 24px;
    padding: 10px 22px;
    cursor: pointer;
    list-style: none;
}
.pp-news-block-more > summary::-webkit-details-marker { display: none; }
.pp-news-block-more > summary:focus-visible { outline: 2px solid var(--pp-cyan-500); outline-offset: 2px; }
/* Once open, the button has done its job; the list just continues */
.pp-news-block-more[open] > summary { display: none; }
.pp-news-block--grid .pp-news-block-more > .pp-news-block-items { margin-top: 36px; }
/* The folded rows continue the list, so the first one needs its separator */
.pp-news-block--list .pp-news-block-more .pp-news-card:first-child { border-top: 1px solid var(--pp-border); }

/* List layout ("In This Series"): image left, text right, hairline rows */
.pp-news-block--list .pp-news-block-items { gap: 0; }
.pp-news-block--list .pp-news-card + .pp-news-card { border-top: 1px solid var(--pp-border); }
.pp-news-block--list .pp-news-card-link {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 18px 0;
}
.pp-news-block--list .pp-news-card-img { margin: 0; }
.pp-single-content .pp-news-block--list .pp-news-card-title { font-size: 1.1rem; }

/* Phones: grids become the same compact rows as lists; six full-width
   cards pushed the next section several screens down */
@media (max-width: 768px) {
    .pp-news-block .pp-news-block-items { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pp-news-block--grid .pp-news-card + .pp-news-card { border-top: 1px solid var(--pp-border); }
    .pp-news-block--grid .pp-news-block-more .pp-news-card:first-child { border-top: 1px solid var(--pp-border); }
    .pp-news-block--grid .pp-news-block-more > .pp-news-block-items { margin-top: 0; }
    .pp-news-block .pp-news-card-link {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        padding: 14px 0;
    }
    .pp-news-block .pp-news-card-img { margin: 0; }
    .pp-single-content .pp-news-block .pp-news-card-title { font-size: 1rem; -webkit-line-clamp: 3; line-clamp: 3; }
    .pp-news-block .pp-news-card-cat { margin-bottom: 4px; }
    .pp-news-block .pp-news-card-excerpt { display: none; }
}
@media (min-width: 769px) and (max-width: 1100px) {
    .pp-news-block--cols-3 .pp-news-block-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─────────────────────────────────────────────────────────
   RECOMMENDED POKER SITES
   Shares markup/classes with the play-now room list (.pp-room-row etc.,
   defined further down) so both look and behave identically.
───────────────────────────────────────────────────────── */

/* Show more */
.pp-sites-more { text-align: center; margin-top: 28px; }
/* Videos: on phones the grid is one long column, so the header "See all"
   scrolls away — swap it for a bottom button like Recommended Sites */
.pp-videos-more { display: none; }
@media (max-width: 767px) {
    .pp-videos-more { display: block; }
    .pp-videos .pp-section-header .pp-see-all { display: none; }
}
.pp-btn-more {
    display: inline-block;
    padding: 13px 36px;
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-pill);
    background: transparent;
    color: var(--pp-text) !important;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    text-decoration: none;
    transition: background .18s, border-color .18s, color .18s;
}
.pp-btn-more:hover {
    background: var(--pp-bg-alt);
    border-color: var(--pp-text-muted);
    color: var(--pp-text) !important;
}

/* ─────────────────────────────────────────────────────────
   FEATURED ARTICLES  (3-col grid)
───────────────────────────────────────────────────────── */
.pp-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
}
.pp-article-card {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    transition: none;
}
.pp-article-card:hover { transform: none; box-shadow: none; }
.pp-article-card-link { display: block; text-decoration: none; color: inherit; }
.pp-article-card-img {
    position: relative;
    overflow: hidden;
    border-radius: var(--pp-radius-md);
    aspect-ratio: 16/9;
    background: #e8eaef;
    margin-bottom: 16px;
}
.pp-article-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.pp-article-card:hover .pp-article-card-img img { transform: scale(1.05); }
.pp-article-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--pp-bg) 0%, transparent 20%);
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: opacity .35s ease;
}
.pp-article-card:hover .pp-article-card-img::after { opacity: 0; }
.pp-article-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e6ea, #cdd3da);
}
.pp-article-card-body { padding: 0; }
.pp-article-card-type {
    display: inline-block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    line-height: 1;
    margin-bottom: 10px;
}
.pp-article-card-title {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    color: var(--pp-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.pp-article-card:hover .pp-article-card-title { color: var(--pp-accent); }

/* ─────────────────────────────────────────────────────────
   CURRENT PROMOTIONS  (full-width owl carousel)
───────────────────────────────────────────────────────── */

/* Full-width wrapper with left/right fade edges */
.pp-promo-carousel-wrap {
    position: relative;
    padding: 0 48px;
}
.pp-promo-carousel-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(to right, #fff 25%, rgba(255,255,255,.5) 60%, transparent 100%);
}
.pp-promo-carousel-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 260px;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(to left, #fff 25%, rgba(255,255,255,.5) 60%, transparent 100%);
}

/* 260px fades swallow most of a single-card viewport on phones */
@media (max-width: 767px) {
    /* 4px + the card's 12px side margin = the 16px mobile container gutter,
       so the card lines up with the heading and the sections below */
    .pp-promo-carousel-wrap { padding: 0 4px; }
    .pp-promo-carousel-wrap::before,
    .pp-promo-carousel-wrap::after { display: none; }
}

.pp-promo-carousel { margin: 0; }
.pp-promo-carousel .owl-stage { padding: 8px 0 0; }

/* Arrow nav hidden — dots are the primary navigation */
.pp-promo-carousel .owl-nav { display: none !important; }

/* Dots — centered pill-style pagination */
.pp-promo-carousel .owl-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding-top: 24px;
}
.pp-promo-carousel .owl-dots .owl-dot span {
    display: block;
    width: 24px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db !important;
    transition: background .2s ease, width .2s ease;
}
.pp-promo-carousel .owl-dots .owl-dot.active span {
    background: var(--pp-accent) !important;
    width: 36px;
}

/* Card — unified with pp-news-card */
.pp-promo-card {
    background: transparent;
    border-radius: 0;
    border: none;
    overflow: visible;
    margin: 0 12px;
    transition: none;
}
.pp-promo-card:hover { transform: none; box-shadow: none; }
.pp-promo-card > a { display: block; text-decoration: none; color: inherit; }
.pp-promo-card-img {
    position: relative;
    overflow: hidden;
    border-radius: var(--pp-radius);
    aspect-ratio: 3/2;
    background: #e8eaef;
    margin-bottom: 14px;
}
.pp-promo-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.pp-promo-card:hover .pp-promo-card-img img { transform: scale(1.05); }
.pp-promo-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--pp-bg) 0%, transparent 20%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
    opacity: 1;
    transition: opacity .35s ease;
}
.pp-promo-card:hover .pp-promo-card-img::after { opacity: 0; }
.pp-promo-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e6ea, #cdd3da);
}
/* Category label — below image, above title */
.pp-promo-card-brand {
    display: inline-block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    line-height: 1;
    margin-bottom: 6px;
}
.pp-promo-card-body { padding: 0; }
.pp-promo-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 9px;
    color: var(--pp-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.pp-promo-card:hover .pp-promo-card-title { color: var(--pp-accent); }
.pp-promo-card-date { font-size: .75rem; color: var(--pp-text-muted); }

/* ─────────────────────────────────────────────────────────
   POKER VIDEOS  (dark section, 4-col)
───────────────────────────────────────────────────────── */
.pp-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
}
.pp-video-card {
    background: var(--pp-bg);
    border-radius: var(--pp-radius-md);
    border: none;
    overflow: hidden;
    transition: transform .2s ease;
}
.pp-video-card:hover {
    transform: translateY(-4px);
}
.pp-video-card > a { display: block; text-decoration: none; color: inherit; }
.pp-video-card-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--pp-bg-alt);
}
.pp-video-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .85;
    filter: grayscale(100%);
    transition: opacity .3s ease, transform .35s ease, filter .3s ease;
}
.pp-video-card:hover .pp-video-card-img img { opacity: 1; transform: scale(1.05); filter: grayscale(0%); }
.pp-video-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f1117, #1d2028);
}
.pp-video-card-body { padding: 12px 14px 0; }
.pp-video-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--pp-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.pp-video-card:hover .pp-video-card-title { color: var(--pp-cyan-600); }

/* Play button — shared */
.pp-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--pp-cyan-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    padding-left: 5px;
    transition: transform .2s ease, box-shadow .2s ease;
    z-index: 2;
}
.pp-video-card:hover .pp-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 0 10px rgba(25,200,224,.2), 0 4px 24px rgba(25,200,224,.35);
}
.space-post-format {
    background: var(--pp-cyan-500) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────
   BEST E-WALLETS
───────────────────────────────────────────────────────── */
.pp-ewallets-head { margin-bottom: var(--pp-heading-gap); }
.pp-ewallets-head .pp-section-title { margin-bottom: 12px; }
.pp-ewallets-intro {
    max-width: 62ch;
    margin: 0;
    color: var(--pp-text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.pp-ewallets-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Dark card tinted with the wallet's own brand colour (set per card in
   PokerPro > E-Wallets) — a deliberate exception to the no-gradient rule,
   so each wallet is recognisable at a glance. Cyan stays the action colour. */
.pp-ewallet {
    display: flex;
    flex-direction: column;
    --pp-ew-c: var(--pp-ew-brand, var(--pp-bg-card));
    background-color: var(--pp-bg-card);
    /* One continuous wash instead of a separate header block, so the logo
       area melts into the body with no hard edge. The top layer adds a soft
       diagonal sheen over the logo only. */
    background-image:
        radial-gradient(120% 220px at 15% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%),
        linear-gradient(
            180deg,
            var(--pp-ew-c) 0,
            color-mix(in srgb, var(--pp-ew-c) 92%, var(--pp-bg-card)) 60px,
            color-mix(in srgb, var(--pp-ew-c) 80%, var(--pp-bg-card)) 120px,
            color-mix(in srgb, var(--pp-ew-c) 66%, var(--pp-bg-card)) 180px,
            color-mix(in srgb, var(--pp-ew-c) 52%, var(--pp-bg-card)) 250px,
            color-mix(in srgb, var(--pp-ew-c) 38%, var(--pp-bg-card)) 330px,
            color-mix(in srgb, var(--pp-ew-c) 26%, var(--pp-bg-card)) 420px,
            color-mix(in srgb, var(--pp-ew-c) 15%, var(--pp-bg-card)) 520px,
            color-mix(in srgb, var(--pp-ew-c) 6%, var(--pp-bg-card)) 640px,
            var(--pp-bg-card) 100%
        );
    background-repeat: no-repeat;
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    color: var(--pp-text-invert);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.pp-ewallet > * { position: relative; z-index: 1; }

/* Light sweep that crosses the card once on hover. */
.pp-ewallet::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .13) 50%, transparent 65%);
    transform: translateX(-110%);
    pointer-events: none;
}

/* Lift plus a soft glow in the wallet's own colour — the glow is the only
   shadow, and it's diffuse, so it reads as light rather than depth. */
.pp-ewallet:hover,
.pp-ewallet:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--pp-ew-c) 85%, transparent);
}
.pp-ewallet:hover::before,
.pp-ewallet:focus-within::before {
    transform: translateX(110%);
    transition: transform .9s ease;
}
.pp-ewallet:hover .pp-ewallet-logo img,
.pp-ewallet:focus-within .pp-ewallet-logo img { transform: scale(1.06); }
.pp-ewallet:hover .pp-btn-ewallet::after,
.pp-ewallet:focus-within .pp-btn-ewallet::after { transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
    .pp-ewallet,
    .pp-ewallet::before,
    .pp-ewallet-logo img,
    .pp-btn-ewallet::after { transition: none !important; }
    .pp-ewallet:hover,
    .pp-ewallet:focus-within,
    .pp-ewallet:hover .pp-ewallet-logo img,
    .pp-ewallet:hover .pp-btn-ewallet::after { transform: none; }
    .pp-ewallet::before { display: none; }
}

.pp-ewallet-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    padding: 28px 32px 0;
}
.pp-ewallet-logo img {
    display: block;
    width: auto;
    max-width: min(200px, 100%);
    max-height: 44px;
    object-fit: contain;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pp-ewallet-wordmark {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.pp-ewallet-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 24px;
    padding: 20px 28px 28px;
}

.pp-ewallet-perk {
    padding: 16px 18px;
    border-radius: var(--pp-radius-md);
    background: rgba(14, 20, 25, .28);
    backdrop-filter: blur(2px);
}
.pp-ewallet-perk-label {
    display: block;
    margin-bottom: 6px;
    color: var(--pp-cyan-500);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pp-ewallet-perk p {
    margin: 0;
    color: var(--pp-text-invert);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.55;
}

.pp-ewallet-benefits {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-ewallet-benefits li {
    position: relative;
    margin: 0;
    padding-left: 28px;
    color: rgba(255, 255, 255, .78);
    font-size: .9rem;
    line-height: 1.5;
}
/* Check mark drawn in CSS: no icon font or extra request needed. */
.pp-ewallet-benefits li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .2em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(25, 200, 224, .18);
}
.pp-ewallet-benefits li::after {
    content: '';
    position: absolute;
    left: 6px;
    top: calc(.2em + 4px);
    width: 5px;
    height: 9px;
    border: solid var(--pp-cyan-500);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pp-btn-ewallet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin-top: auto;
    padding: .625rem 1.25rem;
    border-radius: var(--pp-radius-pill);
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark) !important;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease;
}
.pp-btn-ewallet::after {
    content: '\2197';
    font-size: 1rem;
    line-height: 1;
    transition: transform .25s ease;
}
.pp-btn-ewallet:hover { background: var(--pp-cyan-600); }
.pp-btn-ewallet:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 3px;
}
.pp-ewallet .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Tablet: three narrow columns crush the copy, and 2+1 leaves an orphan —
   go full width with the logo panel beside the content instead. */
@media (max-width: 1024px) and (min-width: 768px) {
    .pp-ewallet { flex-direction: row; }
    .pp-ewallet-logo { flex: 0 0 220px; height: auto; }
}
@media (max-width: 767px) {
    .pp-ewallets-grid { grid-template-columns: 1fr; gap: 16px; }
    .pp-ewallet-logo { height: 84px; }
    .pp-ewallet-body { padding: 16px 22px 22px; gap: 20px; }
}

/* ─────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────── */
.pp-footer {
    background: var(--pp-bg-dark);
    padding: 60px 0 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--pp-border-dark);
    box-shadow: 0 -2px 20px rgba(0, 0, 0, .25);
}

/* Cyan radial glows — mirrors header treatment, emanating from the top edge */
.pp-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 45% 120% at 22% 0%, rgba(25, 200, 224, 0.14) 0%, transparent 70%),
        radial-gradient(ellipse 28% 90%  at 55% 0%, rgba(25, 200, 224, 0.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.pp-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 38% 110% at 80% 0%, rgba(25, 200, 224, 0.11) 0%, transparent 65%),
        radial-gradient(ellipse 22% 80%  at 98% 35%, rgba(25, 200, 224, 0.13) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}


.pp-footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.5fr;
    gap: 48px;
    padding-bottom: 52px;
    position: relative;
    z-index: 1;
}

/* Brand */
.pp-footer-logo { display: inline-flex; margin-bottom: 14px; }
.pp-footer-logo img { max-width: 160px; filter: none; opacity: 1; }
.pp-footer-logo-text {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--pp-text-invert);
    text-decoration: none;
    letter-spacing: -0.5px;
}
.pp-footer-tagline {
    font-size: .82rem;
    line-height: 1.65;
    color: var(--pp-text-muted);
    margin-bottom: 16px;
}

/* Nav column headings — with a short cyan gradient underline */
.pp-footer-nav-col h4,
.pp-footer-newsletter h4 {
    font-family: var(--pp-font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-text-invert);
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
}
.pp-footer-nav-col h4::after,
.pp-footer-newsletter h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--pp-cyan-500), transparent);
    box-shadow: 0 0 6px rgba(25, 200, 224, 0.45);
}

.pp-footer-nav-col ul { list-style: none; margin: 0; padding: 0; }
.pp-footer-nav-col ul li {
    margin-bottom: 11px;
    color: var(--pp-text-muted);
    font-size: .84rem;
}
.pp-footer-nav-col ul li a {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.pp-footer-nav-col ul li a:hover { color: var(--pp-cyan-500); }

/* Newsletter */
.pp-footer-newsletter p {
    font-size: .82rem;
    color: var(--pp-text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}
.pp-footer-newsletter-row { display: flex; }
.pp-footer-newsletter-form input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border-dark);
    border-right: none;
    color: var(--pp-text-invert);
    font-size: .82rem;
    font-family: var(--pp-font);
    border-radius: var(--pp-radius-sm) 0 0 var(--pp-radius-sm);
    outline: none;
    transition: border-color .15s;
}
.pp-footer-newsletter-form input[type="email"]:focus { border-color: var(--pp-cyan-500); }
.pp-footer-newsletter-form input[type="email"]::placeholder { color: var(--pp-text-muted); }
.pp-footer-newsletter-form button {
    padding: 11px 20px;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    border: none;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    font-family: var(--pp-font);
    cursor: pointer;
    border-radius: 0 var(--pp-radius-sm) var(--pp-radius-sm) 0;
    transition: background .15s;
}
.pp-footer-newsletter-form button:hover { background: var(--pp-cyan-600); }
.pp-footer-newsletter-form button:focus-visible { outline: 2px solid var(--pp-cyan-500); outline-offset: 2px; }
.pp-footer-newsletter-form button[disabled] { opacity: .6; cursor: progress; }
/* Consent (Mailster refuses signups without it) */
.pp-footer-newsletter-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    font-size: .75rem;
    line-height: 1.5;
    /* Not --pp-text-muted: that is 4.06:1 on the footer, under AA for text this small */
    color: var(--pp-text-invert-muted);
    cursor: pointer;
}
/* Custom box in the input's colours; checked = cyan with a dark tick, like the JOIN button */
.pp-footer-newsletter-consent input {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-sm);
    background: var(--pp-bg-card) no-repeat center / 10px 10px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.pp-footer-newsletter-consent:hover input { border-color: var(--pp-cyan-500); }
.pp-footer-newsletter-consent input:checked {
    border-color: var(--pp-cyan-500);
    background-color: var(--pp-cyan-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%230E1419' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pp-footer-newsletter-consent input:focus-visible { outline: 2px solid var(--pp-cyan-500); outline-offset: 2px; }
/* Same grey as the sentence; a faint underline is enough to show they're links */
.pp-footer-newsletter-consent a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(138, 155, 176, .35);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .15s, text-decoration-color .15s;
}
.pp-footer-newsletter-consent a:hover { color: var(--pp-text-invert); text-decoration-color: currentColor; }
.pp-footer-newsletter-form .screen-reader-text,
.pp-footer-newsletter-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.pp-footer-newsletter-msg { margin: 10px 0 0; font-size: .78rem; line-height: 1.5; color: var(--pp-text-invert); }
.pp-footer-newsletter-msg.is-error { color: #FF8A93; }
@media (max-width: 768px) {
    .pp-footer-newsletter-form input[type="email"],
    .pp-footer-newsletter-form button { min-height: 44px; }
    /* 16px stops iOS zooming into the field on focus */
    .pp-footer-newsletter-form input[type="email"] { font-size: 16px; }
}

/* Bottom bar */
.pp-footer-bottom {
    background: var(--pp-footer-bottom);
    padding: 16px 0;
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--pp-border-dark);
}
.pp-footer-bottom-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.pp-footer-copy-text { font-size: .75rem; color: var(--pp-text-muted); }
.pp-footer-social { display: flex; gap: 8px; }
.pp-footer-social a {
    width: 30px;
    height: 30px;
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-text-muted);
    font-size: .78rem;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.pp-footer-social a:hover {
    background: var(--pp-cyan-500);
    border-color: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
}

/* ── Casino review pages: recolor the footer's cyan accents (glows,
   logo, headings underline, links, newsletter, back-to-top) to the
   room's brand color — same body.single-organization scope as the
   header. Unlike the header, the footer logo IS included here. ── */
body.single-organization .pp-footer::before {
    background:
        radial-gradient(ellipse 45% 120% at 22% 0%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.14) 0%, transparent 70%),
        radial-gradient(ellipse 28% 90%  at 55% 0%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.07) 0%, transparent 65%);
}
body.single-organization .pp-footer::after {
    background:
        radial-gradient(ellipse 38% 110% at 80% 0%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.11) 0%, transparent 65%),
        radial-gradient(ellipse 22% 80%  at 98% 35%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.13) 0%, transparent 60%);
}
body.single-organization .pp-footer-logo .pp-hdr-text-logo-pro {
    color: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization .pp-footer-nav-col h4::after,
body.single-organization .pp-footer-newsletter h4::after {
    background: linear-gradient(90deg, rgb(var(--pp-review-brand-rgb, 25,200,224)), transparent);
    box-shadow: 0 0 6px rgba(var(--pp-review-brand-rgb, 25,200,224), 0.45);
}
body.single-organization .pp-footer-nav-col ul li a:hover {
    color: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization .pp-footer-newsletter-form input[type="email"]:focus {
    border-color: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization .pp-footer-newsletter-form button {
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization .pp-footer-newsletter-form button:hover {
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .82);
}
body.single-organization .pp-footer-newsletter-consent:hover input,
body.single-organization .pp-footer-newsletter-consent input:checked {
    border-color: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization .pp-footer-newsletter-consent input:checked {
    background-color: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
body.single-organization .pp-footer-social a:hover {
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
    border-color: rgb(var(--pp-review-brand-rgb, 25,200,224));
}

/* The %-sized ellipses above scale with the footer box; stacked to one
   column on phones it's ~4x taller than wide, so the glows stretch into
   vertical streaks. Fixed px glows hug the top edge instead. The brand
   var falls back to cyan, so this also covers review pages. */
@media (max-width: 767px) {
    .pp-footer { box-shadow: none; }
    .pp-footer::before,
    body.single-organization .pp-footer::before {
        background:
            radial-gradient(260px 200px at 15% 0%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.14), transparent 70%);
    }
    .pp-footer::after,
    body.single-organization .pp-footer::after {
        background:
            radial-gradient(220px 180px at 100% 0%, rgba(var(--pp-review-brand-rgb, 25,200,224), 0.09), transparent 70%);
    }
}
body.single-organization #scrolltop {
    color: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
@media (hover: hover) {
    body.single-organization #scrolltop:hover {
        background: rgb(var(--pp-review-brand-rgb, 25,200,224));
        border-color: rgb(var(--pp-review-brand-rgb, 25,200,224));
        color: var(--pp-bg-dark);
        box-shadow: 0 8px 20px -8px rgba(var(--pp-review-brand-rgb, 25,200,224), .45);
    }
}

/* Override mercury's footer styles */
.space-footer-top, .space-footer-copy { background-color: var(--pp-bg-dark); }

/* ─────────────────────────────────────────────────────────
   MERCURY / ACES PLUGIN OVERRIDES
───────────────────────────────────────────────────────── */
.space-organization-content-button a,
.space-unit-content-button a,
.space-organizations-3-archive-item-button-ins a,
.space-organizations-4-archive-item-button-two-ins a,
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins a,
.space-shortcode-wrap .space-organizations-4-archive-item-button-two-ins a {
    color: #fff !important;
    background-color: var(--pp-accent) !important;
}
.space-organizations-4-archive-item-ins {
    background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
    border: 1px solid var(--pp-card-border);
    border-radius: var(--pp-radius);
}
.space-organizations-4-archive-item-logo {
    flex: inherit;
    display: inline-block;
    line-height: 0;
    order: 1;
    width: 80px;
    margin-right: 20px;
}
.space-organizations-3-archive-item-logo-ins img { max-width: 180px; }
.space-organizations-3-archive-item-terms-ins strong { font-size: 24px; }

/* Buttons */
.wp-block-button .wp-block-button__link {
    border: 1.5px solid var(--pp-accent);
    color: var(--pp-accent) !important;
    background: transparent;
    text-decoration: none;
}
.wp-block-button .wp-block-button__link:hover {
    background: var(--pp-accent) !important;
    color: #fff !important;
}

/* ─────────────────────────────────────────────────────────
   PLAYER PROFILES
───────────────────────────────────────────────────────── */
.player-profile {
    border: 1px solid var(--pp-card-border);
    border-radius: var(--pp-radius);
    padding: 24px;
    margin-bottom: 12px;
    background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
}
.player-profile--updated { margin-bottom: 30px; }
.player-profile--header { display: flex; justify-content: space-between; gap: 25px; }
.player-profile h2 { margin-top: 0; }
.player-profile--left-wrap { display: flex; gap: 25px; }
.player-profile--custom-fields { text-align: right; display: flex; flex-direction: column; justify-content: space-between; }
.player-profile--custom-fields b { display: block; }
small { font-size: .7rem; color: var(--pp-text-muted); }
.player-profile--header .player-profile--image img { max-width: 200px; width: 100%; border-radius: 14px; }
.player-profile--social-links { display: flex; align-items: center; gap: 20px; }
.player-profile--social-links a { text-decoration: none; }
.player-profile--nationality { margin-top: 20px; }
.player-profile--nationality span { font-weight: 600; }
.player-profile--extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--pp-card-border);
    margin-top: 20px;
    padding-top: 20px;
}
.player-profile--extra-column p { margin: 0; font-weight: 700; font-size: 1.15rem; line-height: 1.5; }

/* ─────────────────────────────────────────────────────────
   MISC / UTILITY (ported from mercury-child)
───────────────────────────────────────────────────────── */
.dash-top-space              { padding-left: 20px; padding-right: 20px; }
.broken_link, a.broken_link  { text-decoration: underline; }
.contact-icon                { text-align: center; color: var(--pp-accent); font-size: 6rem; margin: 30px 0 20px; }
.fa-gradient {
    background: -webkit-gradient(linear, left top, left bottom, from(#6dd5ed), to(var(--pp-accent)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.iframe-container            { overflow: hidden; padding-top: 56.25%; position: relative; height: 1200px; }
.iframe-container iframe     { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.live-blog-page .status-update-post { background: var(--pp-accent); }
.twitter-tweet               { margin: 10px auto; }
.contact-us                  { padding: 12px 20px; background: rgba(0,143,212,.12); border-radius: 10px; }
.neteller-box, .skrill-box   { padding: 25px; border-radius: 10px; color: #eee; }
.neteller-box img, .skrill-box img { filter: brightness(0) invert(1); }
.neteller-box                { background: #86B64A; }
.skrill-box                  { background: #862165; }
.company-information table   { margin: .5em 0; }
.operator-screenshots .wp-block-columns { text-align: center; }
.wp-block-table td, .wp-block-table th  { border: none; padding: .5em; }
.wp-block-table thead        { border-bottom: none; }
.wp-block-column.has-background,
.wp-block-group.has-background          { padding: 15px; border-radius: 8px; }
.uagb-toc__wrap              { padding: 10px 0 50px !important; width: 100%; }
p.wp-block                   { margin-bottom: 30px !important; }
.no-dots ul                  { list-style: none; margin: 0; padding: 0; }
.no-dots ul li               { list-style: none; margin: 0; padding: 0; margin-bottom: -15px; }
.no-dots a                   { text-decoration: none; }
h2.with-ico .ico-wrap {
    background: linear-gradient(to right, #6dd5ed, var(--pp-accent));
    border-radius: 50%;
    width: 50px; height: 50px;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #fff;
    margin-right: 15px;
    font-size: 1.8rem;
}
.headline-symbol             { position: relative; padding-left: 50px; }
.headline-symbol::before     { position: absolute; content: ''; width: 40px; height: 100%; left: 0; }

/* Footer widget area */
.space-footer-ins h4         { color: #fff; margin-bottom: 1em; }
.space-footer-ins .wp-block-columns.is-layout-flex { gap: 4em; }
.space-widget ul.footer-partners li        { width: 100%; height: auto; padding: 0 0 10px 0; }
.space-widget ul.footer-partners li a      { text-decoration: none; color: #6b7280; }
.space-widget ul.footer-partners li a:hover { color: var(--pp-accent); }
.space-footer-area.space-widget            { margin-bottom: 0; color: #6b7280; }
.space-widget ul li                        { border: none; width: 50px; height: 50px; }
.space-widget ul.wp-block-social-links li  { border: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor,
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor svg { fill: currentColor; color: currentColor; display: flex; justify-content: center; }

/* ── Back to Top (redesign — dark FAB, cyan accent) ── */
#scrolltop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    right: 24px;
    bottom: 24px;
    border-radius: var(--pp-radius-pill);
    background: var(--pp-bg-dark);
    border: 1.5px solid var(--pp-border-dark);
    color: var(--pp-cyan-500);
    font-size: 18px;
    line-height: 1;
    transition: background-color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease, opacity .3s ease-in-out, visibility .3s ease-in-out;
}
#scrolltop.show { bottom: 24px; transform: translateY(0); }
#scrolltop:not(.show) { transform: translateY(8px); }
#scrolltop i { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
#scrolltop:active { transform: translateY(-1px) scale(.94); }
#scrolltop:focus-visible { outline: 2px solid var(--pp-cyan-500); outline-offset: 3px; }
@media (hover: hover) {
    #scrolltop:hover {
        background: var(--pp-cyan-500);
        border-color: var(--pp-cyan-500);
        color: var(--pp-bg-dark);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px -8px rgba(25, 200, 224, .45);
    }
    #scrolltop:hover i { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    #scrolltop { transition: background-color .25s ease, border-color .25s ease, opacity .3s ease-in-out, visibility .3s ease-in-out; }
    #scrolltop i { transition: none; }
    #scrolltop:hover, #scrolltop:active { transform: none; }
    #scrolltop:not(.show) { transform: none; }
}
#wp-admin-bar-customlocations-default { height: 500px; overflow-y: scroll; overflow-x: hidden; }

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────── */

/* Wide */
@media (max-width: 1280px) {
    .pp-footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 32px; }
}

/* Tablet landscape */
@media (max-width: 1100px) {
    .pp-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .pp-videos-grid { grid-template-columns: repeat(2, 1fr); }
    .pp-hero-outer-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; }
    .pp-hero-news-title { font-size: 1.5rem; }
    .pp-nav-list > li > a { padding: 0 10px; font-size: .72rem; }
}

/* Tablet */
@media (max-width: 967px) {
    :root { --pp-section-pad: 48px; }
    .pp-hdr-nav      { display: none !important; }
    .pp-hdr-hamburger { display: flex !important; }
    .pp-hero-outer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .pp-hero-news-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-hero-banners { flex-direction: row; flex-wrap: wrap; }
    .pp-hero-banner-card { flex: 1 1 calc(50% - 7px); }
    .pp-hero-news-title { font-size: 1.35rem; }
    .pp-news-feat-title { font-size: 1.9rem; }
    .pp-articles-grid { grid-template-columns: repeat(2, 1fr); }
    .space-header-2-top-logo-ins img { max-width: 200px !important; }
}

/* Mobile */
@media (max-width: 767px) {
    :root { --pp-section-pad: 36px; }
    .pp-container, .space-header-2-top-ins { padding-left: 16px; padding-right: 16px; }
    .pp-hdr-row { padding-left: 16px; padding-right: 16px; }
    /* With the phone's text size turned up the icons grow, and a fixed-width
       logo pushed the hamburger off the screen; the logo gives way instead */
    .pp-hdr-logo { flex-shrink: 1; min-width: 0; margin-right: 12px; }
    .pp-hdr-logo img { max-width: 100%; height: auto; }
    .pp-hero { padding: var(--pp-section-pad) 0; }
    .pp-hero-news-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .pp-hero-banners { flex-direction: column; }
    .pp-hero-banner-card { flex: none; }
    .pp-news-sub-grid { grid-template-columns: 1fr; }
    .pp-news-feat-title { font-size: 1.55rem; }
    .pp-news-featured { margin-bottom: 36px; padding-bottom: 36px; }
    .pp-articles-grid { grid-template-columns: 1fr; }
    .pp-videos-grid   { grid-template-columns: 1fr 1fr; }
    .pp-footer-grid   { grid-template-columns: 1fr; gap: 28px; }
    .pp-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
    /* "See all" centres on the title in every header type; its tap-target
       padding is symmetric so it can't nudge the link off centre. */
    .pp-section-header,
    .pp-hero-top-bar { align-items: center; gap: 16px; }
    .pp-section-header .pp-section-title { min-width: 0; }
    /* One heading size on phones: only titles with a "See all" beside them
       used to shrink, so E-Wallets or Top Stories looked bigger than
       Poker Videos on the same page. */
    .pp-section-title,
    .pp-section-title-standalone,
    .pp-hero-heading { font-size: 1.85rem; }
    /* 44px tap target without shifting the visual baseline */
    .pp-section-header .pp-see-all,
    .pp-hero-top-bar .pp-see-all { padding: 14px 0; margin: -14px 0; }
    .space-title-box-ins { padding: 28px 16px; }
    .space-title-box-h1 h1 { font-size: 2em; }
    .player-profile--header, .player-profile--extra { flex-direction: column; }
    .player-profile--custom-fields { text-align: left; }
    .player-profile--left-wrap { flex-direction: column; }
    .player-profile--extra-column { display: flex; align-items: center; gap: 10px; }
    .player-profile--extra { gap: 20px; align-items: flex-start; }
    h2.with-ico .ico-wrap { width: 40px; height: 40px; font-size: 1.3rem; margin-right: 12px; }
}

@media (max-width: 480px) {
    .pp-videos-grid { grid-template-columns: 1fr; }
    .space-header-2-top-logo-ins img { max-width: 180px; }
}

/* Desktop-only rules */
@media (min-width: 768px) {
    .space-header-2-height .space-header-2-top-ins { padding-left: 24px; padding-right: 24px; }
    .align-desktop--right { text-align: right; }
    .player-profile--extra-column { text-align: center; }
}
@media (min-width: 968px) {
    .hide-for-mobile { display: none; }

    .pp-section-title,
    .pp-section-title-standalone,
    .pp-hero-heading { font-size: 2.4rem; }

    .pp-news-sub-heading { font-size: 2rem; }
}

/* ─────────────────────────────────────────────────────────
   NEWS ARCHIVE (home.php)
───────────────────────────────────────────────────────── */
.pp-archive-news {
    padding: var(--pp-section-pad) 0;
}

/* Two-column layout: main content + sidebar */
.pp-archive-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 272px;
    gap: 40px;
    align-items: start;
}
/* A plain 1fr track never shrinks below its widest child's min-content, so
   one wide sidebar widget used to push the whole stacked column off-screen
   on small phones. */
.pp-archive-layout > * { min-width: 0; }

/* Exposed featured article above the grid (same card as homepage hero) */
.pp-archive-featured {
    margin-bottom: 40px;
}

/* Featured banner above the grid */
.pp-archive-banner {
    margin-bottom: 32px;
}
.pp-archive-banner a {
    display: block;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    line-height: 0;
}
.pp-archive-banner img {
    width: 100%;
    height: auto;
    border-radius: var(--pp-radius-md);
    transition: opacity .2s;
}
.pp-archive-banner a:hover img { opacity: .92; }
.pp-archive-banner a:focus-visible { outline: 2px solid var(--pp-cyan-500); outline-offset: 2px; }
/* Homepage banner between two sections (position set in PokerPro → Homepage):
   one section gap above and below. After a section its bottom padding is
   the gap above; after the hero or the Live Now strip the banner brings its
   own. The next section's top padding is the gap below. */
.pp-home-banner { padding-top: var(--pp-section-pad); }
.pp-section + .pp-home-banner { padding-top: 0; }
.pp-home-banner .ppsb-inline { margin: 0; }
.pp-home-banner .pp-home-hero-banner { max-width: none; }

/* 3-column news card grid */
.pp-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 28px;
}

/* Sidebar */
.pp-archive-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 80px; /* 64px compact header + 16px clearance */
}

/* WP admin bar offset — keep clearance under the fixed header, which
   itself shifts down via .admin-bar .pp-hdr-wrap */
.admin-bar .pp-archive-sidebar { top: 112px; }
@media (max-width: 782px) {
    .admin-bar .pp-archive-sidebar { top: 126px; }
}

.pp-sidebar-heading {
    font-family: var(--pp-font-display);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: var(--pp-text-muted);
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pp-border);
}

/* ── Poker rooms grouped widget (sidebar) ── */
.pp-sidebar-brands {
    position: relative;
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    background: #fff;
    background-image:
        radial-gradient(ellipse 240px 160px at 110% -5%, rgba(25,200,224,.08), transparent),
        radial-gradient(ellipse 140px 100px at -5% 105%, rgba(25,200,224,.05), transparent);
    border: 1px solid var(--pp-border);
}

.pp-sidebar-brands-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
}

.pp-sidebar-brands-title {
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pp-text);
    margin: 0;
}

.pp-sidebar-brands-seeall {
    font-size: .7rem;
    font-weight: 500;
    color: var(--pp-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.pp-sidebar-brands-seeall:hover { color: var(--pp-text); text-decoration: none; }

.pp-sidebar-brands-list {
    display: flex;
    flex-direction: column;
    padding: 0 10px 12px;
}

/* Individual room row */
.pp-sidebar-room {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 10px;
    border-radius: var(--pp-radius-md);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.pp-sidebar-room:hover { background: var(--pp-bg-alt); text-decoration: none; color: inherit; }

.pp-sidebar-room-logo {
    width: 54px;
    height: 54px;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--pp-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-sidebar-room-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 6px;
}
.pp-sidebar-room-logo-ph {
    font-size: .7rem;
    font-weight: 700;
    color: var(--pp-text-muted);
    text-transform: uppercase;
}

.pp-sidebar-room-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.pp-sidebar-room-name {
    display: block;
    font-family: var(--pp-font-body);
    font-size: .83rem;
    font-weight: 700;
    color: var(--pp-text);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Stars */
.pp-sidebar-room-stars {
    display: flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
}
.pp-star { font-size: .78rem; line-height: 1; }
.pp-star--full  { color: #f5a623; }
.pp-star--half  { color: #f5a623; opacity: .55; }
.pp-star--empty { color: #d1d5db; }
.pp-sidebar-room-rating-val {
    font-size: .68rem;
    font-weight: 600;
    color: var(--pp-text-muted);
    margin-left: 4px;
}

/* Bonus text */
.pp-sidebar-room-bonus {
    font-size: .7rem;
    color: var(--pp-text-muted);
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────
   SEARCH RESULTS
───────────────────────────────────────────────────────── */
.pp-search-empty {
    padding: 40px 0;
}
.pp-search-empty p {
    color: var(--pp-text-muted);
    font-size: .9rem;
    margin: 0 0 20px;
}

.pp-searchform {
    display: flex;
    align-items: center;
    max-width: 420px;
    background: var(--pp-bg-alt);
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-pill);
    padding: 4px 4px 4px 18px;
    transition: border-color .15s;
}
.pp-searchform:focus-within { border-color: var(--pp-cyan-500); }
.pp-searchform-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: .9rem;
    color: var(--pp-text);
    outline: none;
}
.pp-searchform-input::placeholder { color: var(--pp-text-muted); }
.pp-searchform-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    cursor: pointer;
    transition: background .15s;
}
.pp-searchform-submit:hover { background: var(--pp-cyan-600); }

/* Empty state */
.pp-archive-empty {
    color: var(--pp-text-muted);
    font-size: .9rem;
    padding: 40px 0;
}

/* ── Sidebar: Live Reporting widget ── */
.pp-sidebar-lr {
    position: relative;
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    background: #fff;
    background-image:
        radial-gradient(ellipse 260px 180px at 110% -10%, rgba(25,200,224,.07), transparent),
        radial-gradient(ellipse 160px 120px at -10% 110%, rgba(25,200,224,.04), transparent);
    border: 1px solid var(--pp-border);
}

.pp-sidebar-lr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
}

.pp-sidebar-lr-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pp-text);
    margin: 0;
}

.pp-sidebar-lr-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-red);
    flex-shrink: 0;
    box-shadow: 0 0 5px rgba(230, 57, 70, .55);
    animation: pp-lr-pulse 1.8s ease-in-out infinite;
}

.pp-sidebar-lr-seeall {
    font-size: .7rem;
    font-weight: 500;
    color: var(--pp-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.pp-sidebar-lr-seeall:hover { color: var(--pp-text); text-decoration: none; }

.pp-sidebar-lr-list {
    display: flex;
    flex-direction: column;
    padding: 0 10px 12px;
}

.pp-sidebar-lr-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 10px 10px;
    border-radius: var(--pp-radius-md);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.pp-sidebar-lr-card:hover {
    background: var(--pp-bg-alt);
    text-decoration: none;
    color: inherit;
}
.pp-sidebar-lr-card--live { background: rgba(25,200,224,.04); }
.pp-sidebar-lr-card--live:hover { background: rgba(25,200,224,.08); }

.pp-sidebar-lr-img {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--pp-bg-alt);
}
.pp-sidebar-lr-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pp-sidebar-lr-img--ph { background: var(--pp-bg-alt); }

.pp-sidebar-lr-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .08em;
    background: var(--pp-red);
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.4;
}

.pp-sidebar-lr-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.pp-sidebar-lr-name {
    font-size: .83rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    color: var(--pp-text);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Live dot inline before a live event's name. The name clips overflow for
   its line clamp, which cut off the dot's 5px pulse ring — padding gives the
   ring room inside the clip, the negative margin keeps the text in place. */
.pp-sidebar-lr-card--live .pp-sidebar-lr-name {
    padding-left: 6px;
    margin-left: -6px;
}
.pp-sidebar-lr-name .pp-sidebar-lr-dot {
    vertical-align: middle;
    margin: 0 6px 2px 0;
}
.pp-sidebar-lr-name .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pp-sidebar-lr-dates {
    font-size: .7rem;
    color: var(--pp-text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-sidebar-lr-venue {
    font-size: .68rem;
    color: var(--pp-text-muted);
    opacity: .65;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-sidebar-lr-empty {
    padding: 20px 18px;
    font-size: .82rem;
    color: var(--pp-text-muted);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────
   TOURNAMENTS CALENDAR sidebar widget
───────────────────────────────────────────────────────── */
.pp-sidebar-cal {
    position: relative;
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    background: #fff;
    background-image:
        radial-gradient(ellipse 260px 180px at 110% -10%, rgba(25, 200, 224, .07), transparent),
        radial-gradient(ellipse 160px 120px at -10% 110%, rgba(25, 200, 224, .04), transparent);
    border: 1px solid var(--pp-border);
}
.pp-sidebar-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
}
.pp-sidebar-cal-title {
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pp-text);
    margin: 0;
}
.pp-sidebar-cal-list {
    display: flex;
    flex-direction: column;
    padding: 0 10px 12px;
}
.pp-sidebar-cal-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 10px;
    border-radius: var(--pp-radius-md);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background .15s;
}
.pp-sidebar-cal-card:hover {
    background: var(--pp-bg-alt);
    text-decoration: none;
    color: inherit;
}
/* Date chip: cyan month band + big day number */
.pp-sidebar-cal-chip {
    width: 44px;
    flex-shrink: 0;
    border-radius: var(--pp-radius-sm);
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--pp-border);
}
.pp-sidebar-cal-chip-month {
    display: block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 2px;
    line-height: 1;
}
.pp-sidebar-cal-chip-day {
    display: block;
    background: #fff;
    color: var(--pp-text);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    padding: 6px 2px 7px;
    font-variant-numeric: tabular-nums;
}

/* Phones: once a sidebar stacks under the main column its widgets read as
   more page sections, so the boxed chrome goes and headings/titles take the
   same scale as the section titles and cards above them. Covers every
   sidebar widget except Share (stays a compact boxed card): homepage Live
   Reporting + Calendar, Top Poker Rooms, and the Play Now filters
   (prefixed to beat its later base rule). */
@media (max-width: 767px) {
    /* Every section-to-section gap on the page is two section pads (bottom
       of one + top of the next), so the stacked sidebar blocks use the
       same rhythm. */
    .pp-hero-outer-grid { gap: calc(var(--pp-section-pad) * 2); }
    .pp-archive-sidebar { gap: calc(var(--pp-section-pad) * 2); }
    .pp-sidebar-lr,
    .pp-sidebar-cal,
    .pp-sidebar-brands,
    .pp-archive-sidebar .pp-sidebar-filters {
        border: 0;
        border-radius: 0;
        background: none;
        overflow: visible;
        padding: 0;
    }
    .pp-sidebar-lr-header,
    .pp-sidebar-cal-header,
    .pp-sidebar-brands-header {
        align-items: center;
        gap: 16px;
        padding: 0;
        margin-bottom: var(--pp-heading-gap);
    }
    .pp-sidebar-lr-title,
    .pp-sidebar-cal-title,
    .pp-sidebar-brands-title,
    .pp-archive-sidebar .pp-sidebar-filters-title {
        min-width: 0;
        color: var(--pp-text);
        font-family: var(--pp-font-display);
        font-size: 1.85rem;
        font-weight: 700;
        letter-spacing: -0.05em;
        line-height: 1.1;
        text-transform: none;
        text-decoration: underline;
        text-decoration-color: rgba(25, 200, 224, 0.13);
        text-decoration-thickness: .38em;
        text-underline-offset: -.32em;
        text-decoration-skip-ink: none;
    }
    .pp-archive-sidebar .pp-sidebar-filters-title { margin: 0 0 var(--pp-heading-gap); }
    .pp-sidebar-lr-name .pp-sidebar-lr-dot { width: 10px; height: 10px; margin: 0 8px 3px 0; }
    /* Matches .pp-see-all on phones, incl. the 44px tap target */
    .pp-sidebar-lr-seeall,
    .pp-sidebar-brands-seeall {
        font-size: .78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: var(--pp-cyan-500);
        padding: 14px 0;
        margin: -14px 0;
    }
    .pp-sidebar-lr-list,
    .pp-sidebar-cal-list,
    .pp-sidebar-brands-list { padding: 0; }
    .pp-sidebar-lr-card,
    .pp-sidebar-cal-card,
    .pp-sidebar-room {
        gap: 16px;
        padding: 16px 0;
        border-radius: 0;
        border-top: 1px solid var(--pp-border);
    }
    .pp-sidebar-lr-card:first-child,
    .pp-sidebar-cal-card:first-child,
    .pp-sidebar-room:first-child { border-top: 0; padding-top: 0; }
    .pp-sidebar-lr-card:last-child,
    .pp-sidebar-cal-card:last-child,
    .pp-sidebar-room:last-child { padding-bottom: 0; }
    .pp-sidebar-lr-card:hover,
    .pp-sidebar-cal-card:hover,
    .pp-sidebar-room:hover,
    .pp-sidebar-lr-card--live,
    .pp-sidebar-lr-card--live:hover { background: none; }
    .pp-sidebar-lr-card:hover .pp-sidebar-lr-name,
    .pp-sidebar-cal-card:hover .pp-sidebar-lr-name,
    .pp-sidebar-room:hover .pp-sidebar-room-name { color: var(--pp-cyan-600); }
    .pp-sidebar-lr-img,
    .pp-sidebar-room-logo { width: 80px; height: 80px; }
    .pp-sidebar-lr-badge { font-size: .58rem; }
    .pp-sidebar-cal-chip { width: 56px; }
    .pp-sidebar-cal-chip-month { font-size: .6rem; padding: 4px 2px; }
    .pp-sidebar-cal-chip-day { font-size: 1.4rem; padding: 8px 2px 9px; }
    .pp-sidebar-lr-body,
    .pp-sidebar-room-body { gap: 5px; }
    .pp-sidebar-lr-name,
    .pp-sidebar-room-name {
        font-family: var(--pp-font-display);
        font-size: 1.2rem;
        letter-spacing: -0.03em;
        line-height: 1.2;
        transition: color .15s;
    }
    /* Dates step up to soft so the venue can drop to muted without the
       opacity fade — at .65 the venue fell to ~2.7:1 on white. */
    .pp-sidebar-lr-dates { font-size: .8rem; color: var(--pp-text-soft); }
    .pp-sidebar-lr-venue { font-size: .78rem; opacity: 1; }
    .pp-sidebar-lr-empty { padding: 0; font-size: .9rem; }
    .pp-sidebar-room-stars .pp-star { font-size: .95rem; }
    .pp-sidebar-room-rating-val { font-size: .8rem; }
    .pp-sidebar-room-bonus { font-size: .85rem; color: var(--pp-text-soft); }
}

.pp-sidebar-lr-card:focus-visible,
.pp-sidebar-cal-card:focus-visible,
.pp-sidebar-room:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pp-sidebar-lr-dot { animation: none; }
}

/* ─────────────────────────────────────────────────────────
   PAGINATION
───────────────────────────────────────────────────────── */
.pp-pagination {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--pp-border);
}

/* WordPress outputs .navigation.pagination > .nav-links */
.pp-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pp-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: var(--pp-radius-pill);
    border: 1.5px solid var(--pp-border);
    background: transparent;
    color: var(--pp-text);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
    line-height: 1;
}

.pp-pagination .page-numbers:hover {
    border-color: var(--pp-cyan-500);
    color: var(--pp-cyan-500);
}

.pp-pagination .page-numbers.current {
    background: var(--pp-cyan-500);
    border-color: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
}

.pp-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    cursor: default;
    color: var(--pp-text-muted);
    min-width: 24px;
    padding: 0;
}

.pp-pagination .page-numbers.prev,
.pp-pagination .page-numbers.next {
    font-size: 1.1rem;
    font-weight: 400;
}

/* ── Archive responsive ── */
@media (max-width: 1100px) {
    .pp-archive-layout { grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; }
    .pp-archive-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 967px) {
    .pp-archive-layout { grid-template-columns: minmax(0, 1fr); }
    .pp-sidebar-heading { width: 100%; }
    .pp-archive-sidebar { position: static; }
    /* Play-now: filters sit above the room list once stacked (grid-item order works the same as flex) */
    .pp-play-now-layout .pp-archive-sidebar { order: -1; }
}

@media (max-width: 767px) {
    .pp-archive-grid { grid-template-columns: minmax(0, 1fr); }
    .pp-archive-sidebar { flex-direction: column; }
}

/* ─────────────────────────────────────────────────────────
   PLAY NOW PAGE — full poker rooms list
───────────────────────────────────────────────────────── */
.pp-play-now-page {
    padding: var(--pp-section-pad) 0;
}

/* ── Hero banner — dark band, same shell as .pp-review-hero ── */
.pp-pn-hero { padding: 44px 0 36px; }
.pp-pn-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.pp-pn-hero-badge {
    display: inline-block;
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--pp-radius-sm);
    line-height: 1;
}
.pp-review-hero-title.pp-pn-hero-title { margin-bottom: 22px; max-width: 980px; }
.pp-pn-hero-desc-wrap { max-width: 980px; }
.pp-pn-hero-desc {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: .95rem;
    line-height: 1.6;
}

/* ── Visitor-country note ── */
.pp-pn-geo-note {
    margin: 0 0 16px;
    font-size: .85rem;
    color: var(--pp-text-muted);
}

/* ── Results count ── */
.pp-pn-results-count {
    margin: 0 0 16px;
    font-size: .85rem;
    color: var(--pp-text-muted);
}

/* ── Sidebar: Filters panel ── */
.pp-sidebar-filters {
    position: relative;
    border-radius: var(--pp-radius-lg);
    background: #fff;
    background-image:
        radial-gradient(ellipse 240px 160px at 110% -5%, rgba(25, 200, 224, .08), transparent),
        radial-gradient(ellipse 140px 100px at -5% 105%, rgba(25, 200, 224, .05), transparent);
    border: 1px solid var(--pp-border);
    padding: 18px;
}
.pp-sidebar-filters-title {
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pp-text);
    margin: 0 0 16px;
}
.pp-filter-group { margin-bottom: 18px; }
.pp-filter-group:last-of-type { margin-bottom: 0; }
.pp-filter-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    color: var(--pp-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}
.pp-filter-select-wrap { position: relative; }
.pp-filter-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    padding: 9px 32px 9px 12px;
    font-size: .85rem;
    color: var(--pp-text);
    background: var(--pp-bg-alt);
    cursor: pointer;
    transition: border-color .15s;
}
.pp-filter-select:focus { outline: none; border-color: var(--pp-cyan-500); }
.pp-filter-select-wrap::after {
    content: '';
    position: absolute;
    right: 13px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--pp-text-muted);
    border-bottom: 1.5px solid var(--pp-text-muted);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}
.pp-filter-checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    font-size: .85rem;
    color: var(--pp-text);
    cursor: pointer;
}
.pp-filter-checkbox-name { display: flex; align-items: center; gap: 9px; }

/* Custom checkbox/radio — native accent-color renders an inconsistent
   ring+dot two-tone in Chrome; this keeps it a single solid cyan fill. */
.pp-filter-checkbox input[type="checkbox"],
.pp-filter-checkbox input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid var(--pp-border);
    background: var(--pp-bg);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.pp-filter-checkbox input[type="checkbox"] { border-radius: 4px; }
.pp-filter-checkbox input[type="radio"] { border-radius: 50%; }
.pp-filter-checkbox input[type="checkbox"]:hover,
.pp-filter-checkbox input[type="radio"]:hover { border-color: var(--pp-cyan-500); }
.pp-filter-checkbox input[type="checkbox"]:checked,
.pp-filter-checkbox input[type="radio"]:checked { border-color: var(--pp-cyan-500); }
.pp-filter-checkbox input[type="checkbox"]:checked { background: var(--pp-cyan-500); }
.pp-filter-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: solid var(--pp-bg-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pp-filter-checkbox input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--pp-cyan-500);
}
.pp-filter-checkbox input[type="checkbox"]:focus-visible,
.pp-filter-checkbox input[type="radio"]:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
.pp-filter-checkbox-count { color: var(--pp-text-muted); font-size: .78rem; }
.pp-filter-clear {
    display: block;
    text-align: center;
    margin-top: 16px;
    padding: 9px;
    border-radius: var(--pp-radius-pill);
    border: 1.5px solid var(--pp-border);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pp-text-muted);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.pp-filter-clear:hover { border-color: var(--pp-cyan-500); color: var(--pp-cyan-500); text-decoration: none; }
.pp-filter-clear--hidden { display: none; }

/* Loading state while a filter change fetches via AJAX */
.pp-pn-filters-form--loading { opacity: .6; pointer-events: none; }
.pp-pn-rooms-list--loading { opacity: .45; transition: opacity .15s; pointer-events: none; }

/* ── Rooms list ── */
.pp-rooms-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 48px;
}
.pp-room-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 32px 120px 1fr 160px 220px;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    padding: 18px 24px;
    transition: border-color .14s cubic-bezier(.4, 0, .2, 1),
                box-shadow .14s cubic-bezier(.4, 0, .2, 1);
}
/* Frosted-glass layer faded in on hover — its own pseudo-element because
   browsers can't interpolate between two different background gradients;
   animating opacity + backdrop-filter blur radius (matching filter functions
   on both ends) is what actually animates smoothly. */
.pp-room-row::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    background:
        radial-gradient(140% 220% at 8% -30%, rgba(var(--room-brand-rgb, 25,200,224), .18), transparent 55%),
        rgba(6, 9, 12, .96);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
    transition: opacity .14s cubic-bezier(.4, 0, .2, 1),
                -webkit-backdrop-filter .14s cubic-bezier(.4, 0, .2, 1),
                backdrop-filter .14s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.pp-room-row:hover {
    border-color: rgba(var(--room-brand-rgb, 25,200,224), .35);
    box-shadow: 0 0 0 1px rgba(var(--room-brand-rgb, 25,200,224), .14), 0 4px 22px rgba(0, 0, 0, .32);
}
.pp-room-row:hover::before {
    opacity: 1;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

/* Brand-color glow — originates behind the logo and grows rightward into
   the row on hover, like a light source switching on. transform-origin is
   pinned to the left edge (where the logo sits) so scale() reads as
   spreading right, not growing symmetrically in place. Tinted per-room via
   --room-brand-rgb (extracted from that casino's own logo — see script in
   page-play-now.php), falling back to poker.pro cyan if extraction hasn't
   run yet. */
.pp-room-row::after {
    content: "";
    position: absolute;
    top: calc(50% - 150px);
    left: 60px;
    width: 620px;
    height: 300px;
    transform-origin: left center;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse closest-side, rgba(var(--room-brand-rgb, 25,200,224), .32), transparent 72%);
    filter: blur(22px);
    opacity: 0;
    transform: scale(.12);
    transition: opacity .45s cubic-bezier(.4, 0, .2, 1),
                transform .85s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* Number badge */
.pp-room-num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--pp-bg-dark);
    color: #fff;
    border-radius: 6px;
    font-family: var(--pp-font-display);
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background .14s cubic-bezier(.4, 0, .2, 1), color .14s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover .pp-room-num {
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
}

/* Logo */
.pp-room-logo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--pp-radius-sm);
}
.pp-room-logo img {
    max-width: 100%;
    max-height: 52px;
    width: auto;
    height: auto;
    /* Same fix as .pp-mega-room-logo img: flex items default to
       min-width:auto (intrinsic width as a floor), which beats
       max-width:100% inside this 120px flex box — wide wordmark logos
       (e.g. PokerPlanets) overflowed and got clipped by .pp-room-row's
       overflow:hidden. */
    min-width: 0;
    object-fit: contain;
    transition: filter .14s cubic-bezier(.4, 0, .2, 1);
}
/* Most partner logos are dark wordmarks on a transparent background — a
   white chip behind them on the dark glass looked like a boxed-in sticker.
   Flattening the logo itself to a white silhouette (brightness(0) keeps the
   alpha/shape, invert(1) flips black to white) reads as a clean mono mark
   instead, the way premium "as seen on" partner strips usually handle it. */
.pp-room-row:hover .pp-room-logo img {
    filter: brightness(0) invert(1);
}
.pp-room-logo-ph {
    font-size: .75rem;
    font-weight: 700;
    color: var(--pp-text-muted);
    text-transform: uppercase;
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover .pp-room-logo-ph {
    color: var(--pp-text-invert);
}

/* Info: bonus + notice */
.pp-room-info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 20px;
    border-left: 1px solid var(--pp-border);
    border-right: 1px solid var(--pp-border);
    transition: border-color .14s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover .pp-room-info {
    border-left-color: rgba(255, 255, 255, .14);
    border-right-color: rgba(255, 255, 255, .14);
}
.pp-room-bonus {
    font-family: var(--pp-font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--pp-text);
    line-height: 1.25;
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
/* Homepage-only bump — .pp-room-row/.pp-room-bonus is shared with the Play
   Now page's room list (theme-parts/play-now-rooms-list.php), so this is
   scoped to .pp-sites (front-page.php's "Recommended Poker Sites" section)
   rather than changing the shared base rule. */
.pp-sites .pp-room-bonus {
    font-size: 1.15rem;
}
.pp-room-row:hover .pp-room-bonus {
    color: var(--pp-text-invert);
}
.pp-room-notice {
    font-size: .68rem;
    color: var(--pp-text-muted);
    line-height: 1.3;
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover .pp-room-notice {
    color: rgba(255, 255, 255, .6);
}

/* Rating */
.pp-room-rating {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 20px;
    border-right: 1px solid var(--pp-border);
    transition: border-color .14s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover .pp-room-rating {
    border-right-color: rgba(255, 255, 255, .14);
}
.pp-room-stars { display: flex; gap: 2px; }
.pp-room-stars .pp-star { transition: color .14s cubic-bezier(.4, 0, .2, 1); font-size: .9rem; }
.pp-room-row:hover .pp-star--empty { color: rgba(255, 255, 255, .22); }
.pp-room-rating-val {
    font-size: .78rem;
    font-weight: 700;
    color: var(--pp-text-muted);
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
.pp-room-row:hover .pp-room-rating-val {
    color: rgba(255, 255, 255, .7);
}

/* CTA buttons */
.pp-room-actions {
    position: relative;
    z-index: 1;
    /* Pinned to the last track: rooms without a rating (e.g. LuxonPay) omit
       .pp-room-rating, and auto-placement would drop the CTAs into its
       narrower column, misaligning them against the other rows. */
    grid-column: -2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.pp-btn-room-play,
.pp-btn-room-review {
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: var(--pp-radius-pill);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 10px 16px;
    white-space: nowrap;
    transition: background .14s cubic-bezier(.4, 0, .2, 1),
                border-color .14s cubic-bezier(.4, 0, .2, 1),
                color .14s cubic-bezier(.4, 0, .2, 1),
                box-shadow .22s ease, transform .18s ease;
}
.pp-btn-room-play {
    background: var(--pp-bg-dark) !important;
    border: 1.5px solid rgba(25, 200, 224, 0.25) !important;
    color: var(--pp-cyan-500) !important;
    box-shadow: none !important;
    cursor: pointer;
}
.pp-btn-room-play:hover {
    transition: background .2s, border-color .2s, box-shadow .2s, color .2s, transform .2s !important;
    background: var(--pp-cyan-500) !important;
    border-color: var(--pp-cyan-500) !important;
    color: var(--pp-bg-dark) !important;
    box-shadow: 0 6px 20px rgba(25, 200, 224, 0.38) !important;
}
.pp-room-row:hover .pp-btn-room-play {
    background: var(--pp-cyan-500) !important;
    border-color: var(--pp-cyan-500) !important;
    color: var(--pp-bg-dark) !important;
}
.pp-btn-room-review {
    background: transparent;
    color: var(--pp-text);
    border: 2px solid var(--pp-border);
}
.pp-btn-room-review:hover {
    background: rgba(14, 20, 25, 0.04);
    border-color: var(--pp-text);
    color: var(--pp-text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}
.pp-room-row:hover .pp-btn-room-review {
    border-color: rgba(255, 255, 255, .28);
    color: var(--pp-text-invert);
}
.pp-room-row:hover .pp-btn-room-review:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--pp-text-invert);
    color: var(--pp-text-invert);
    box-shadow: none;
}

/* ── Rooms the visitor's country blocks (theme-parts/play-now-unavailable.php) ──
   Deliberately quieter than the ranked list above: light band, no number, no
   hover glow, review link only. */
.pp-pn-unavail {
    margin: 0 0 48px;
    padding: 24px;
    background: var(--pp-bg-alt);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
}
.pp-pn-unavail-title {
    margin: 0 0 6px;
    font-family: var(--pp-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--pp-text);
}
.pp-pn-unavail-desc {
    margin: 0 0 18px;
    max-width: 70ch;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--pp-text-muted);
}
.pp-pn-unavail-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-pn-unavail-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 12px 14px;
    background: var(--pp-bg);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
}
.pp-pn-unavail-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 36px;
}
.pp-pn-unavail-logo img {
    max-width: 100%;
    max-height: 34px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.pp-pn-unavail-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pp-text);
    /* One-word brands ("ChampionPoker") can't wrap at a space on phones */
    overflow-wrap: anywhere;
}
.pp-pn-unavail-rating {
    font-size: .75rem;
    font-weight: 500;
    color: var(--pp-text-muted);
}
.pp-pn-unavail-rating .pp-star { font-size: .75rem; }
.pp-pn-unavail-item .pp-btn-room-review {
    padding: 8px 14px;
    font-size: .6875rem;
}
@media (max-width: 767px) {
    .pp-pn-unavail { padding: 18px 16px; }
    .pp-pn-unavail-list { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
   INLINE "PLAY NOW" SHORTCODE  ([pokerpro-aces-casinos-4])
   Restyled to match .pp-room-row above. This markup comes from
   wp-content/plugins/pokerpro-geoblock/shortcodes/pokerpro-casinos-shortcode-4.php
   (the one used in article bodies), not our theme templates, so the DOM is
   fixed — every rule below overrides that plugin's own aces-style.css,
   hence the .space-shortcode-wrap prefix and !important on anything the
   plugin also declares (needed to win the cascade regardless of stylesheet
   load order). Note: pokerpro-aces-casinos-5 is a DIFFERENT markup family
   (space-organizations-4-archive-item*, a multi-column card grid, not a
   row list) and is untouched by this block. Stacked vertically (badge+logo,
   then bonus text, then rating, then buttons side by side) rather than
   trying to fit the play-now page's wide 5-column row into a narrow space
   — this shortcode runs inline in article bodies, often next to a sidebar,
   where a squeezed horizontal row just wraps awkwardly. No per-room
   --room-brand-rgb here (this markup isn't touched by room-brand-color.js),
   so the glow/border always read as poker.pro cyan — fine as a default,
   can be wired up to real extraction later if wanted.
───────────────────────────────────────────────────────── */
.space-shortcode-wrap.space-shortcode-4 {
    margin: 8px 0 28px !important;
}
/* .space-shortcode-wrap-ins picks up the generic .pp-container rule
   (max-width + padding-inline) meant for full-bleed sections like the
   header/footer. This shortcode instead sits inline inside the already-
   narrower article content column, so that padding-inline was adding a
   second, unwanted inset on top of the card's own padding — the card
   never reached the paragraph text's left/right edges. Scoped to
   .space-shortcode-4 only — .space-shortcode-wrap-ins is shared by many
   other shortcodes across the site that still need the container rule. */
.space-shortcode-wrap.space-shortcode-4 .space-shortcode-wrap-ins {
    max-width: none;
    padding-inline: 0;
}
.space-shortcode-wrap .space-organizations-3-archive-items {
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
}
.space-shortcode-wrap .space-organizations-3-archive-item {
    display: block;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins {
    margin: 0 !important;
    padding: 20px !important;
    background: #fff;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    box-shadow: none !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: border-color .14s cubic-bezier(.4, 0, .2, 1), box-shadow .14s cubic-bezier(.4, 0, .2, 1) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover {
    border-color: rgba(var(--room-brand-rgb, 25,200,224), .35);
    box-shadow: 0 0 0 1px rgba(var(--room-brand-rgb, 25,200,224), .14), 0 4px 22px rgba(0, 0, 0, .32) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    background:
        radial-gradient(140% 220% at 8% -30%, rgba(var(--room-brand-rgb, 25,200,224), .18), transparent 55%),
        rgba(6, 9, 12, .96);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
    transition: opacity .14s cubic-bezier(.4, 0, .2, 1),
                -webkit-backdrop-filter .14s cubic-bezier(.4, 0, .2, 1),
                backdrop-filter .14s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover::before {
    opacity: 1;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 160px;
    transform-origin: left center;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse closest-side, rgba(var(--room-brand-rgb, 25,200,224), .32), transparent 72%);
    filter: blur(18px);
    opacity: 0;
    transform: scale(.12);
    transition: opacity .45s cubic-bezier(.4, 0, .2, 1),
                transform .85s cubic-bezier(.4, 0, .2, 1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* Logo + number badge — its own top row */
.space-shortcode-wrap .space-organizations-3-archive-item-logo {
    order: 1;
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 56px;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    z-index: 1;
}
/* Fixed logo box the image can never exceed. The image used to be allowed
   wider (220px) than its box (160px), so wide wordmarks overflowed both ways
   and the left overflow sat on top of the rank badge. Left-aligned so every
   logo starts at the same x after the badge, whatever its aspect ratio. */
.space-shortcode-wrap .space-organizations-3-archive-item-logo-ins {
    padding: 0 !important;
    width: 180px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.space-shortcode-wrap .space-organizations-3-archive-item-logo-ins a {
    display: flex;
    align-items: center;
    max-width: 100%;
    height: 100%;
}
.space-shortcode-wrap .space-organizations-3-archive-item-logo-ins img {
    max-width: 100% !important;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0 !important;
    transition: filter .14s cubic-bezier(.4, 0, .2, 1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-3-archive-item-logo-ins img {
    filter: brightness(0) invert(1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-count {
    order: -1;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 26px !important;
    height: 26px !important;
    background: var(--pp-bg-dark) !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 18px;
    transition: background .14s cubic-bezier(.4, 0, .2, 1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-count::before { display: none !important; }
.space-shortcode-wrap .space-organizations-3-archive-item-count span {
    position: static !important;
    width: auto !important;
    padding: 0 !important;
    font-family: var(--pp-font-display);
    font-size: .72rem !important;
    font-weight: 700;
    color: #fff !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-3-archive-item-count {
    background: var(--pp-cyan-500) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-3-archive-item-count span {
    color: var(--pp-bg-dark) !important;
}

/* Bonus text — own full-width row, no column divider */
.space-shortcode-wrap .space-organizations-3-archive-item-terms {
    order: 3;
    flex: 1 1 100% !important;
    width: 100% !important;
    position: relative;
    z-index: 1;
}
.space-shortcode-wrap .space-organizations-3-archive-item-terms-ins {
    padding: 0 !important;
    border-left: none !important;
    text-align: left !important;
    font-size: 1.4rem !important;
    font-weight: 700;
    line-height: 1.3 !important;
    color: var(--pp-text) !important;
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-terms-ins strong,
.space-shortcode-wrap .space-organizations-3-archive-item-terms-ins span,
.space-shortcode-wrap .space-organizations-3-archive-item-terms-ins p {
    font-family: var(--pp-font-body) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: inherit !important;
    line-height: 1.3 !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-3-archive-item-terms-ins {
    color: var(--pp-text-invert) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-logo-ins::after,
.space-shortcode-wrap .space-organizations-3-archive-item-terms-ins::after,
.space-shortcode-wrap .space-organizations-3-archive-item-rating-ins::after {
    display: none !important;
}

/* Rating — shares the top line with the logo/badge (normal flex flow,
   pushed to the far right via margin-left:auto) instead of being pulled
   out with position:absolute, which was overlapping other content because
   its top/right offsets couldn't reliably track this card's actual
   (variable) content height. */
.space-shortcode-wrap .space-organizations-3-archive-item-rating {
    order: 2;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto;
    position: relative;
    z-index: 1;
}
.space-shortcode-wrap .space-organizations-3-archive-item-rating-ins {
    padding: 0 !important;
    text-align: right !important;
    display: flex !important;
    align-items: center;
}
.space-shortcode-wrap .space-organizations-3-archive-item-rating-box {
    height: auto !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    background: none !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
}
.space-shortcode-wrap .star-rating { display: flex; gap: 2px; }
.space-shortcode-wrap .star-rating .star {
    width: auto !important;
    height: auto !important;
    color: transparent;
}
.space-shortcode-wrap .star-rating .star::before {
    font-family: inherit !important;
    content: "★" !important;
    font-weight: 400 !important;
    font-size: .9rem;
}
.space-shortcode-wrap .star-rating .star-full::before,
.space-shortcode-wrap .star-rating .star-half::before {
    color: #f5a623 !important;
}
.space-shortcode-wrap .star-rating .star-empty::before {
    color: #d1d5db !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-rating-box > span {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    font-size: .78rem !important;
    font-weight: 700;
    color: var(--pp-text-muted);
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .star-rating .star-empty::before {
    color: rgba(255, 255, 255, .22) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-3-archive-item-rating-box > span {
    color: rgba(255, 255, 255, .7);
}

/* Buttons — own row, side by side now that they have the full width */
.space-shortcode-wrap .space-organizations-3-archive-item-button {
    order: 4;
    flex: 0 0 auto;
    width: 100% !important;
    margin-left: 0;
    position: relative;
    z-index: 1;
}
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins a {
    display: block !important;
    flex: 1;
    min-width: 0 !important;
    text-align: center;
    text-decoration: none !important;
    border-radius: var(--pp-radius-pill) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 11px 16px !important;
    margin: 0 !important;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background .14s cubic-bezier(.4, 0, .2, 1),
                border-color .14s cubic-bezier(.4, 0, .2, 1),
                color .14s cubic-bezier(.4, 0, .2, 1) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins a i { display: none !important; }
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins a:first-child {
    background: var(--pp-bg-dark) !important;
    background-color: var(--pp-bg-dark) !important;
    border: 1.5px solid rgba(var(--room-brand-rgb, 25,200,224), .3) !important;
    color: rgb(var(--room-brand-rgb, 25,200,224)) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins a:first-child:hover {
    background: rgb(var(--room-brand-rgb, 25,200,224)) !important;
    background-color: rgb(var(--room-brand-rgb, 25,200,224)) !important;
    border-color: rgb(var(--room-brand-rgb, 25,200,224)) !important;
    color: var(--pp-bg-dark) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-button-ins a:last-child {
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid var(--pp-border) !important;
    color: var(--pp-text) !important;
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-3-archive-item-button-ins a:last-child {
    border-color: rgba(255, 255, 255, .28) !important;
    color: var(--pp-text-invert) !important;
}

/* T&C / disclaimer footer text — the "New Customers Only | 18+ | T&C Apply"
   line is dynamic content from that casino's own casino_button_notice field
   (same source as .pp-room-notice on the play-now page), not something we
   added. Hidden for now per request; remove this rule to bring it back. */
.space-shortcode-wrap .space-organizations-archive-item-button-notice {
    display: none !important;
}
.space-shortcode-wrap .space-organizations-archive-item-detailed-tc,
.space-shortcode-wrap .space-organization-header-button-notice {
    width: 100% !important;
    margin-top: 6px !important;
    font-size: .68rem !important;
    color: var(--pp-text-muted) !important;
    position: relative;
    z-index: 1;
    transition: color .14s cubic-bezier(.4, 0, .2, 1);
}
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organizations-archive-item-detailed-tc,
.space-shortcode-wrap .space-organizations-3-archive-item-ins:hover .space-organization-header-button-notice {
    color: rgba(255, 255, 255, .5) !important;
}
/* .tc-desc is a hover-reveal T&C tooltip (opacity:0/visibility:hidden by
   default in the plugin's own CSS) — visibility:hidden still reserves
   layout space and its content was bleeding through, showing as stray
   text/glyphs below the buttons and adding a phantom gap. Removing it
   from flow entirely fixes both. */
.space-shortcode-wrap .tc-desc {
    display: none !important;
}

/* Inline PLAY NOW shortcode — responsive. No breakpoints existed for this
   block before, so at squeezed/tablet/mobile widths the fixed 160px logo
   made badge+logo+rating overflow their line unpredictably — rating would
   wrap onto its own line and edge spacing varied card to card. Shrinking
   the logo keeps that trio reliably on one row at any width; terms/button/
   notice already force their own full-width lines via flex-basis:100%,
   so they're unaffected. */
@media (max-width: 900px) {
    .space-shortcode-wrap .space-organizations-3-archive-item-ins {
        padding: 24px 18px 18px !important;
        gap: 12px;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-logo {
        flex: 1 1 auto !important;
        min-width: 0;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-logo-ins {
        width: 130px;
        height: 48px;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-logo-ins img {
        max-height: 36px;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-count {
        margin-right: 12px;
    }
}
@media (max-width: 480px) {
    .space-shortcode-wrap .space-organizations-3-archive-item-ins {
        padding: 20px 14px 14px !important;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-terms-ins,
    .space-shortcode-wrap .space-organizations-3-archive-item-terms-ins strong,
    .space-shortcode-wrap .space-organizations-3-archive-item-terms-ins span,
    .space-shortcode-wrap .space-organizations-3-archive-item-terms-ins p {
        font-size: 1.15rem !important;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-button-ins {
        gap: 8px;
    }
    .space-shortcode-wrap .space-organizations-3-archive-item-button-ins a {
        font-size: .66rem !important;
        padding: 10px 10px !important;
    }
}

/* ── Play-now responsive ── */
@media (max-width: 1100px) {
    .pp-room-row { grid-template-columns: 28px 100px 1fr 140px 200px; gap: 14px; padding: 16px 18px; }
}
@media (max-width: 900px) {
    .pp-room-row { grid-template-columns: 28px 80px 1fr 180px; gap: 12px; }
    .pp-room-rating { border-right: none; }
}
@media (max-width: 640px) {
    .pp-room-row {
        grid-template-columns: 28px 1fr;
        gap: 10px 12px;
        padding: 14px 16px;
    }
    .pp-room-logo  { grid-column: 2; width: auto; height: 34px; justify-content: flex-start; margin-bottom: 8px; }
    .pp-room-logo img { max-width: 100px; max-height: 34px; }
    .pp-room-info  { grid-column: 1 / -1; border: none; padding: 0; }
    .pp-room-rating { grid-column: 1 / -1; flex-direction: row; border: none; padding: 0; }
    .pp-room-actions { grid-column: 1 / -1; flex-direction: row; }
    .pp-btn-room-play, .pp-btn-room-review { flex: 1; }
}
@media (max-width: 480px) {
    .pp-pn-hero-meta { flex-wrap: wrap; row-gap: 4px; }
}

/* ─────────────────────────────────────────────────────────
   PLAY NOW – SPORTSBOOKS PAGE
   Same hero + room rows as Play Now; the guide below the list is
   structured (criteria cards, comparison table, RG panel) so every
   part keeps its treatment whatever editors type.
───────────────────────────────────────────────────────── */

/* Three body sizes only: article (17px) for the intro and editor prose,
   compact (15px) inside cards, table and the RG panel, fine (13px) for
   labels and small print. */
.pp-sb-page {
    --pp-sb-text-article: 1.0625rem;
    --pp-sb-text-compact: .9375rem;
    --pp-sb-text-fine:    .8125rem;
}

/* Offer conditions live once in the hero instead of under every row */
.pp-sb-compliance {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.pp-sb-compliance li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-sm);
    color: rgba(255, 255, 255, .72);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
}
.pp-sb-compliance li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pp-cyan-500);
}

/* ── Sections ── */
.pp-sb-section { scroll-margin-top: 96px; }
.pp-sb-section + .pp-sb-section { margin-top: var(--pp-space-8); }
.pp-sb-h2 {
    position: relative;
    margin: 0 0 24px;
    padding-bottom: .55em;
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--pp-text);
}
.pp-sb-h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: var(--pp-radius-pill);
    /* Same fading bar as article h2s (.pp-single-content), which sit on this page too */
    background: linear-gradient(90deg, var(--pp-cyan-500) 0%, rgba(25,200,224,.15) 100%);
}
.pp-sb-lead {
    max-width: 70ch;
    margin: 0;
    font-size: var(--pp-sb-text-article);
    line-height: 1.85; /* Matches Mercury's p, which the editor prose below gets */
    color: var(--pp-text);
}

/* ── How to choose: numbered criteria ── */
.pp-sb-criteria {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* An odd count would leave a hole bottom-right; let the last card span */
.pp-sb-criterion:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pp-sb-criterion {
    padding: 22px 24px 24px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    background: var(--pp-bg);
}
.pp-sb-criterion-num {
    display: block;
    font-family: var(--pp-font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--pp-cyan-600);
}
.pp-sb-criterion-title {
    margin: 14px 0 8px;
    font-family: var(--pp-font-body);
    font-size: var(--pp-sb-text-article);
    font-weight: 700;
    line-height: 1.35;
    color: var(--pp-text);
}
.pp-sb-criterion-text {
    margin: 0;
    font-size: var(--pp-sb-text-compact);
    line-height: 1.65;
    color: var(--pp-text-soft);
}

/* Pull quote — overrides Mercury's centred 900-weight blockquote + icon */
.pp-sb-takeaway {
    margin: 32px 0 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--pp-cyan-500);
    background: none;
    text-align: left;
    font-style: normal;
}
.pp-sb-takeaway::before,
.pp-sb-takeaway::after { content: none; display: none; }
.pp-sb-takeaway p {
    margin: 0;
    font-family: var(--pp-font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.005em;
    color: var(--pp-text);
}

/* ── Comparison table ── */
.pp-sb-compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    font-size: var(--pp-sb-text-compact);
}
.pp-sb-compare th,
.pp-sb-compare td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: middle;
    border: 0;
}
.pp-sb-compare thead th {
    background: var(--pp-bg-alt);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-text-muted);
}
.pp-sb-compare tbody tr > * { border-top: 1px solid var(--pp-border); }
.pp-sb-compare tbody td { color: var(--pp-text-soft); line-height: 1.45; }
.pp-sb-compare tbody th { font-weight: 700; white-space: nowrap; }
.pp-sb-compare tbody th a { color: var(--pp-text); text-decoration: none; transition: color .15s; }
.pp-sb-compare tbody th a:hover { color: var(--pp-cyan-600); }
.pp-sb-compare-empty { color: var(--pp-text-muted); }
.pp-sb-compare-cta { width: 1%; text-align: right; }
.pp-sb-compare-cta .pp-btn-room-play { display: inline-block; padding: 8px 14px; font-size: .7rem; }
.pp-sb-compare .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Editor prose ── */
.pp-sb-prose { max-width: 70ch; font-size: var(--pp-sb-text-article); }
.pp-sb-prose > :first-child { margin-top: 0; }

/* ── Responsible gambling ── */
.pp-sb-rg {
    padding: 28px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    background: var(--pp-bg-alt);
}
.pp-sb-rg-head { display: flex; gap: 18px; align-items: flex-start; }
.pp-sb-rg-age {
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--pp-text);
    border-radius: 50%;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--pp-text);
}
.pp-sb-rg-title {
    margin: 2px 0 6px;
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--pp-text);
}
.pp-sb-rg-intro { margin: 0; max-width: 70ch; font-size: var(--pp-sb-text-compact); line-height: 1.65; color: var(--pp-text-soft); }
.pp-sb-rg-tips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--pp-border);
    list-style: none;
}
.pp-sb-rg-tips li { position: relative; padding-left: 26px; }
/* Drawn check, so no icon font or emoji */
.pp-sb-rg-tips li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: .32em;
    width: 6px;
    height: 11px;
    border: solid var(--pp-cyan-600);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pp-sb-rg-tips strong { display: block; font-size: var(--pp-sb-text-compact); color: var(--pp-text); }
.pp-sb-rg-tips span { display: block; margin-top: 2px; font-size: var(--pp-sb-text-compact); line-height: 1.55; color: var(--pp-text-soft); }
.pp-sb-rg-help { margin-top: 26px; }
.pp-sb-rg-help-label {
    margin: 0 0 10px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-text-muted);
}
.pp-sb-rg-orgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pp-sb-rg-orgs a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    background: var(--pp-bg);
    text-decoration: none;
    transition: border-color .15s;
}
.pp-sb-rg-orgs a:hover,
.pp-sb-rg-orgs a:focus-visible { border-color: var(--pp-cyan-500); }
.pp-sb-rg-org-name { font-size: var(--pp-sb-text-compact); font-weight: 600; color: var(--pp-text); }
.pp-sb-rg-org-region { font-size: var(--pp-sb-text-fine); color: var(--pp-text-muted); }
.pp-sb-rg-fine {
    margin: 22px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--pp-border);
    font-size: var(--pp-sb-text-fine);
    line-height: 1.5;
    color: var(--pp-text-muted);
}

/* ── Sidebar: on this page ── */
.pp-sb-toc-list { margin: 0; padding: 0; list-style: none; }
.pp-sb-toc-list a {
    display: block;
    padding: 7px 0 7px 12px;
    border-left: 2px solid var(--pp-border);
    font-size: var(--pp-sb-text-compact);
    line-height: 1.4;
    color: var(--pp-text-soft);
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.pp-sb-toc-list a:hover,
.pp-sb-toc-list a[aria-current="true"] {
    border-left-color: var(--pp-cyan-500);
    color: var(--pp-text);
}
.pp-sb-toc-list a[aria-current="true"] { font-weight: 600; }

@media (max-width: 967px) {
    /* Once stacked the rail would land under the whole guide — useless */
    .pp-sb-sidebar { display: none; }
}
@media (max-width: 720px) {
    .pp-sb-criteria,
    .pp-sb-rg-tips { grid-template-columns: minmax(0, 1fr); }
    .pp-sb-rg { padding: 22px 18px; }

    /* Table → one card per sportsbook; no sideways scrolling on phones */
    .pp-sb-compare,
    .pp-sb-compare tbody,
    .pp-sb-compare tr,
    .pp-sb-compare th,
    .pp-sb-compare td { display: block; }
    .pp-sb-compare { border: 0; border-radius: 0; overflow: visible; }
    .pp-sb-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .pp-sb-compare tbody tr {
        padding: 16px;
        border: 1px solid var(--pp-border);
        border-radius: var(--pp-radius-lg);
    }
    .pp-sb-compare tbody tr + tr { margin-top: 12px; }
    .pp-sb-compare tbody tr > * { border-top: 0; padding: 0; }
    .pp-sb-compare tbody th { margin-bottom: 10px; font-size: 1rem; }
    .pp-sb-compare tbody td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 7px 0;
        border-top: 1px solid var(--pp-border);
        text-align: right;
    }
    .pp-sb-compare tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--pp-text-muted);
        text-align: left;
    }
    .pp-sb-compare td.pp-sb-compare-cta { width: auto; padding-top: 12px; }
    .pp-sb-compare td.pp-sb-compare-cta::before { content: none; }
    .pp-sb-compare-cta .pp-btn-room-play { display: block; width: 100%; padding: 10px 16px; }
}

/* Readable by screen readers and search engines, invisible on screen
   (the homepage H1). Not display:none, which hides it from both. */
.pp-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ─────────────────────────────────────────────────────────
   ABOUT US PAGE
   One type scale for the whole page: 17px reading text, 15px inside
   cards, 13px labels. Every grid is sized by its item count so rows
   always span the full container.
───────────────────────────────────────────────────────── */
.pp-about-hero { padding: 44px 0 56px; }
.pp-about-eyebrow {
    margin: 0 0 14px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-cyan-500);
}
.pp-review-hero-title.pp-about-title {
    margin: 0 0 20px;
    text-wrap: balance; /* "Built by players, / for players." rather than an orphaned word */
    font-size: clamp(2.5rem, 5.2vw, 4rem);
    line-height: 1.05;
}
.pp-about-intro {
    max-width: 68ch;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .72);
}

/* ── Numbers: part of the hero, spanning the container edge to edge:
   first under the headline, last ending at the container's right edge ── */
.pp-about-stats {
    display: flex;
    justify-content: space-between;
    gap: 24px 32px;
    margin: 36px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    list-style: none;
}
.pp-about-stat { display: flex; flex-direction: column; gap: 6px; }
.pp-about-stat strong {
    font-family: var(--pp-font-display);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 600;
    line-height: 1;
    color: var(--pp-text-invert);
}
.pp-about-stat-plus { color: var(--pp-cyan-500); }
.pp-about-stat-label { font-size: .8125rem; line-height: 1.45; color: rgba(255, 255, 255, .62); }

/* ── Bands: white / light / dark rhythm, like the rest of the site ── */
.pp-about-band { padding: 72px 0; }
.pp-about-band--alt {
    background: var(--pp-bg-alt);
    border-top: 1px solid var(--pp-border);
    border-bottom: 1px solid var(--pp-border);
}
.pp-about-band--dark {
    /* The site's cyan light-leak: faint glows in opposite corners */
    background:
        radial-gradient(ellipse 620px 320px at 100% 0%, rgba(25, 200, 224, .14), transparent),
        radial-gradient(ellipse 520px 280px at 0% 100%, rgba(25, 200, 224, .10), transparent),
        var(--pp-bg-dark);
}
.pp-about-band--dark .pp-about-h2 { color: var(--pp-text-invert); }
.pp-about-band--dark .pp-about-more { color: var(--pp-text-invert); }
.pp-about-band--dark .pp-about-more:hover { color: var(--pp-cyan-500); }
.pp-about-band--dark .pp-about-principles li { border-top-color: var(--pp-border-dark); }
.pp-about-band--dark .pp-about-principles h3 { color: var(--pp-text-invert); }
.pp-about-band--dark .pp-about-principles p { color: rgba(255, 255, 255, .68); }
.pp-about-band--dark .pp-about-principle-num { color: var(--pp-cyan-500); } /* Passes on dark, unlike on white */
.pp-about-section + .pp-about-section { margin-top: var(--pp-space-8); }
.pp-about-h2 {
    position: relative;
    margin: 0 0 28px;
    padding-bottom: .55em;
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--pp-text);
}
.pp-about-h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: var(--pp-radius-pill);
    background: linear-gradient(90deg, var(--pp-cyan-500) 0%, rgba(25,200,224,.15) 100%);
}
.pp-about-h2-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pp-about-more {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pp-text);
    text-decoration: none;
    white-space: nowrap;
}
.pp-about-more:hover { color: var(--pp-cyan-600); }
/* 44px tap target without moving the row's baseline */
.pp-about-more { display: inline-block; padding: 14px 0; margin: -14px 0; }
.pp-about-page a:focus-visible {
    /* !important: Mercury strips every :focus outline with !important */
    outline: 2px solid var(--pp-cyan-500) !important;
    outline-offset: 3px !important;
}
.pp-about-section-intro { margin: -12px 0 28px; font-size: 1.0625rem; color: var(--pp-text-soft); }

/* Card headings: Mercury's global h3 tracking squeezes Poppins bold */
.pp-about-page h3 {
    margin: 0;
    font-family: var(--pp-font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--pp-text);
}

/* ── Our story + at a glance ── */
.pp-about-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 80px;
    align-items: start;
}
.pp-about-story-body > :first-child { margin-top: 0; }
.pp-about-story-body p {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--pp-text);
}
/* Card chrome comes from .pp-sidebar-filters, the site's sidebar card */
.pp-about-facts { padding: 22px 24px; }
.pp-about-facts dl { margin: 0; }
.pp-about-facts dl > div { padding: 14px 0; border-top: 1px solid var(--pp-border); }
.pp-about-facts dl > div:first-child { border-top: 0; }
.pp-about-facts dt { font-size: .8125rem; color: var(--pp-text-muted); }
.pp-about-facts dd { margin: 4px 0 0; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--pp-text); }

/* ── What we cover ── */
.pp-about-cover {
    display: grid;
    grid-template-columns: repeat(var(--pp-about-cols, 4), minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-about-cover-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 24px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    background: var(--pp-bg);
    text-decoration: none;
    transition: border-color .15s;
}
.pp-about-cover-card:hover,
.pp-about-cover-card:focus-visible { border-color: var(--pp-cyan-500); }
.pp-about-cover-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--pp-text); }
/* Arrow is decorative (aria-hidden); cyan only as the hover cue */
.pp-about-cover-title span { color: var(--pp-text-muted); transition: color .15s; }
.pp-about-cover-card:hover .pp-about-cover-title span,
.pp-about-cover-card:focus-visible .pp-about-cover-title span { color: var(--pp-cyan-600); }
.pp-about-cover-text { font-size: .9375rem; line-height: 1.65; color: var(--pp-text-soft); }

/* ── How we work: editorial columns on the page's own light hairline ── */
.pp-about-principles {
    display: grid;
    grid-template-columns: repeat(var(--pp-about-cols, 4), minmax(0, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-about-principles li { padding-top: 24px; border-top: 1px solid var(--pp-border); }
.pp-about-principle-num {
    display: block;
    margin-bottom: 14px;
    font-family: var(--pp-font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--pp-text-muted); /* Cyan-600 is 2.8:1 on white */
}
.pp-about-principles p { margin: 8px 0 0; font-size: .9375rem; line-height: 1.65; color: var(--pp-text-soft); }

/* ── Team ── */
.pp-about-team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-about-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 24px 16px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    text-align: center;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.pp-about-member:hover,
.pp-about-member:focus-visible { border-color: var(--pp-cyan-500); background: var(--pp-bg-alt); }
.pp-about-member-avatar {
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--pp-bg-alt);
    box-shadow: 0 0 0 2px var(--pp-bg), 0 0 0 4px rgba(25, 200, 224, .45); /* Thin cyan ring, white gap */
}
.pp-about-member-name { font-size: .9375rem; font-weight: 700; color: var(--pp-text); }
.pp-about-member-role { font-size: .8125rem; color: var(--pp-text-muted); }

/* ── Partners ── */
.pp-about-partners {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-about-partners li {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    padding: 12px 16px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    background: var(--pp-partner-logo-bg, var(--pp-bg));
}
.pp-about-partners img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.pp-about-partners li { position: relative; transition: border-color .15s; }
/* The link covers the whole tile, not just the logo */
.pp-about-partners a { position: absolute; inset: 0; display: grid; place-items: center; padding: inherit; border-radius: inherit; }
.pp-about-partners li:has(a:hover),
.pp-about-partners li:has(a:focus-visible) { border-color: var(--pp-cyan-500); }

/* ── Get in touch: open section on the white page, no box; pitch +
   buttons left, the three reasons as a ruled list right ── */
.pp-about-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.pp-about-cta-main > p { margin: 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.7; color: var(--pp-text-soft); }
.pp-about-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pp-about-cta-actions a { min-width: 180px; }
.pp-about-cta-routes { margin: 0; padding: 0; list-style: none; }
.pp-about-cta-routes li { padding: 18px 0; border-top: 1px solid var(--pp-border); }
.pp-about-cta-routes li:first-child { padding-top: 0; border-top: 0; }
.pp-about-cta-routes li:last-child { padding-bottom: 0; }
.pp-about-cta-routes h3 { position: relative; padding-left: 14px; }
.pp-about-cta-routes h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    bottom: .2em;
    width: 3px;
    border-radius: var(--pp-radius-pill);
    background: var(--pp-cyan-500);
}
.pp-about-cta-routes p { margin: 6px 0 0; padding-left: 14px; font-size: .9375rem; line-height: 1.6; color: var(--pp-text-soft); }

@media (max-width: 1100px) {
    .pp-about-story { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
    .pp-about-partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pp-about-cover,
    .pp-about-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .pp-about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .pp-about-story { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .pp-about-cta { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 600px) {
    .pp-about-hero { padding: 32px 0 40px; }
    .pp-about-band { padding: 48px 0; }
    .pp-about-section + .pp-about-section { margin-top: 48px; }
    .pp-about-h2 { margin-bottom: 20px; }

    /* Coverage: one list with hairlines instead of five stacked boxes */
    .pp-about-cover { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pp-about-cover li + li .pp-about-cover-card { border-top: 1px solid var(--pp-border); }
    .pp-about-cover-card { gap: 4px; padding: 16px 0; border: 0; border-radius: 0; background: none; }

    .pp-about-principles { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .pp-about-principle-num { margin-bottom: 8px; font-size: 1.5rem; }

    /* Team: compact rows, so an odd headcount never leaves a lone card */
    .pp-about-section-intro { margin: -8px 0 16px; font-size: .9375rem; }
    .pp-about-team { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .pp-about-member {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        padding: 12px 14px;
        text-align: left;
    }
    .pp-about-member-avatar { grid-row: span 2; width: 48px; height: 48px; margin: 0; }

    /* Partners: 4 across, a full 4 x 4 for the current 16 */
    .pp-about-partners { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .pp-about-partners li { aspect-ratio: 4 / 3; padding: 6px; border-radius: var(--pp-radius-sm); }
    .pp-about-partners img { max-height: 32px; }

    .pp-about-cta-actions { width: 100%; }
    .pp-about-cta-actions a { flex: 1; min-width: 0; }
}

/* ─────────────────────────────────────────────────────────
   POLICY PAGES (Editorial policy, Affiliate disclosure,
   Responsible gambling). Hero shared with About; body is a
   reading column with the "On this page" rail.
───────────────────────────────────────────────────────── */
.pp-review-hero-title.pp-policy-title { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
.pp-policy-updated {
    margin: 24px 0 0;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .62);
}
.pp-policy-updated time { margin-left: 4px; font-weight: 600; color: var(--pp-text-invert); }

.pp-policy-page { padding: 56px 0 72px; }
.pp-policy-body { max-width: 72ch; }
.pp-policy-body > :first-child { margin-top: 0; }
.pp-policy-body p,
.pp-policy-body li { font-size: 1.0625rem; line-height: 1.8; color: var(--pp-text); }
.pp-policy-body h2 {
    scroll-margin-top: 96px;
    margin: 48px 0 16px;
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    line-height: 1.3;
}
.pp-policy-body li + li { margin-top: 8px; }
.pp-policy-page a:focus-visible {
    /* !important: Mercury strips every :focus outline with !important */
    outline: 2px solid var(--pp-cyan-500) !important;
    outline-offset: 3px !important;
}

/* ── Sidebar: on this page + the other trust pages ── */
.pp-policy-toc-list,
.pp-policy-links ul { margin: 0; padding: 0; list-style: none; }
.pp-policy-toc-list a,
.pp-policy-links a {
    display: block;
    padding: 7px 0 7px 12px;
    border-left: 2px solid var(--pp-border);
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--pp-text-soft);
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.pp-policy-toc-list a:hover,
.pp-policy-toc-list a[aria-current="true"],
.pp-policy-links a:hover,
.pp-policy-links a[aria-current="page"] {
    border-left-color: var(--pp-cyan-500);
    color: var(--pp-text);
}
.pp-policy-toc-list a[aria-current="true"],
.pp-policy-links a[aria-current="page"] { font-weight: 600; }

/* ── Responsible gambling: help organisations ── */
.pp-policy-help {
    scroll-margin-top: 96px;
    max-width: 72ch;
    margin-top: 48px;
    padding: 28px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    background: var(--pp-bg-alt);
}
.pp-policy-help-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 8px; }
.pp-policy-help-age {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--pp-text);
    border-radius: 50%;
    font-weight: 800;
    font-size: .9375rem;
    color: var(--pp-text);
}
.pp-policy-help h2 { margin: 0 0 6px; font-size: 1.35rem; line-height: 1.3; color: var(--pp-text); }
.pp-policy-help-head p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--pp-text-soft); }
.pp-policy-help-label {
    margin: 24px 0 10px;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-text-muted);
}
.pp-policy-help-orgs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-policy-help-orgs a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    background: var(--pp-bg);
    text-decoration: none;
    transition: border-color .15s;
}
.pp-policy-help-orgs a:hover,
.pp-policy-help-orgs a:focus-visible { border-color: var(--pp-cyan-500); }
.pp-policy-help-name { font-size: .9375rem; font-weight: 600; color: var(--pp-text); }
.pp-policy-help-region { font-size: .8125rem; color: var(--pp-text-muted); }

@media (max-width: 967px) {
    /* Stacked, the rail would land under the whole page; the sibling links stay */
    .pp-policy-toc { display: none; }
}
@media (max-width: 600px) {
    .pp-policy-page { padding: 36px 0 48px; }
    .pp-policy-body h2 { margin-top: 36px; }
    .pp-policy-help { padding: 22px 18px; }
    .pp-policy-help-orgs { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────────────────────────────────────────────────
   TOURNAMENT CALENDAR
───────────────────────────────────────────────────────── */
.pp-tc-filters {
    position: relative;
    z-index: 10;
    /* The site's cyan light-leak (as .pp-about-band--dark), sized to this box */
    background:
        radial-gradient(ellipse 480px 220px at 100% 0%, rgba(25, 200, 224, .14), transparent),
        radial-gradient(ellipse 400px 200px at 0% 100%, rgba(25, 200, 224, .08), transparent),
        var(--pp-bg-dark);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
    padding: 20px;
    margin-bottom: 32px;
}
.pp-tc-filters .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pp-tc-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* ── Custom dropdown ── */
.pp-tc-drop { position: relative; }

.pp-tc-drop-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0.6rem 0.875rem;
    border: 1.5px solid rgba(25,200,224,.18);
    border-radius: var(--pp-radius-md);
    background: rgba(255,255,255,.04);
    font-size: .82rem;
    color: rgba(255,255,255,.72);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    text-align: left;
    font-family: inherit;
}
.pp-tc-drop-btn:hover               { border-color: rgba(25,200,224,.45); background: rgba(255,255,255,.07); color: var(--pp-text-invert); }
.pp-tc-drop--open .pp-tc-drop-btn   { border-color: var(--pp-cyan-500); background: rgba(255,255,255,.07); color: var(--pp-text-invert); }
.pp-tc-drop--active .pp-tc-drop-btn { border-color: var(--pp-cyan-500); background: rgba(25,200,224,.10); color: var(--pp-text-invert); }

.pp-tc-drop-label {
    flex: 1;
    /* Without min-width:0 a nowrap label can't shrink, so each dropdown kept
       its full-text width and the 2-column grid ran out of the panel on phones. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-tc-drop--active .pp-tc-drop-label { font-weight: 600; color: var(--pp-text-invert); }

.pp-tc-drop-chevron {
    font-size: .65rem;
    color: rgba(255,255,255,.4);
    transition: transform .2s;
    flex-shrink: 0;
}
.pp-tc-drop--open .pp-tc-drop-chevron { transform: rotate(180deg); color: var(--pp-cyan-500); }

.pp-tc-drop-panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 100%;
    background: var(--pp-bg-card);
    border: 1.5px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-md);
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    z-index: 200;
    overflow: hidden;
    display: none;
}
.pp-tc-drop--open .pp-tc-drop-panel { display: block; }

.pp-tc-drop-list {
    list-style: none;
    margin: 0;
    padding: 5px 0;
    max-height: 230px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(25,200,224,.35) transparent;
}
.pp-tc-drop-list::-webkit-scrollbar { width: 6px; }
.pp-tc-drop-list::-webkit-scrollbar-track { background: transparent; }
.pp-tc-drop-list::-webkit-scrollbar-thumb {
    background: rgba(25,200,224,.35);
    border-radius: var(--pp-radius-pill);
}
.pp-tc-drop-list::-webkit-scrollbar-thumb:hover { background: rgba(25,200,224,.6); }
.pp-tc-drop-item {
    padding: 8px 14px;
    font-size: .82rem;
    color: rgba(255,255,255,.68);
    cursor: pointer;
    transition: background .1s, color .1s;
    white-space: nowrap;
}
.pp-tc-drop-item:hover        { background: rgba(255,255,255,.06); color: var(--pp-text-invert); }
.pp-tc-drop-item--placeholder { color: rgba(255,255,255,.4); }
.pp-tc-drop-item--active      { color: var(--pp-cyan-500); font-weight: 600; background: rgba(25,200,224,.10); }

/* ── Search field (top of the panel) ── */

.pp-tc-search-wrap {
    position: relative;
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.pp-tc-search-wrap .pp-tc-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    padding: 0.8rem 1rem 0.8rem 2.6rem;
    border: 1.5px solid rgba(25,200,224,.18);
    border-radius: var(--pp-radius-md);
    font-size: .95rem;
    background: rgba(255,255,255,.04);
    color: var(--pp-text-invert);
    height: auto;
    transition: border-color .15s, background .15s, color .15s;
    font-family: inherit;
}
.pp-tc-search-wrap .pp-tc-search-input:focus        { outline: none; border-color: var(--pp-cyan-500); background: rgba(255,255,255,.07); color: var(--pp-text-invert); }
.pp-tc-search-wrap .pp-tc-search-input::placeholder { color: rgba(255,255,255,.4); }
.pp-tc-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .95rem;
    color: rgba(255,255,255,.4);
    pointer-events: none;
}
.pp-tc-search-wrap:focus-within .pp-tc-search-icon { color: var(--pp-cyan-500); }
/* Chrome/Safari's blue clear "x" restyled as a small round chip, so it
   reads as a control instead of a loose glyph floating in the field */
.pp-tc-search-wrap .pp-tc-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255,255,255,.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 2.5l5 5M7.5 2.5l-5 5' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 10px;
    opacity: .7;
    transition: opacity .15s, background-color .15s;
}
.pp-tc-search-wrap .pp-tc-search-input::-webkit-search-cancel-button:hover { opacity: 1; background-color: rgba(25,200,224,.25); }
/* Beside the field, not inside it. Look comes from the primary button
   (.pp-btn-room-play), but with the fields' 8px corners: a pill next to
   them read as mismatched. The one deliberate non-pill button. */
.pp-tc-search-btn {
    flex-shrink: 0;
    border-radius: var(--pp-radius-md);
    padding: 0 1.75rem;
    font-family: inherit;
    line-height: 1;
}


/* Boxed like the dropdowns above so the row reads as one set of fields */
.pp-tc-live-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 0.875rem;
    min-width: 0;
    border: 1.5px solid rgba(25,200,224,.18);
    border-radius: var(--pp-radius-md);
    background: rgba(255,255,255,.04);
    font-size: .82rem;
    color: rgba(255,255,255,.72);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: border-color .15s, background .15s, color .15s;
}
.pp-tc-live-label:hover { border-color: rgba(25,200,224,.45); background: rgba(255,255,255,.07); color: var(--pp-text-invert); }
.pp-tc-live-label:has(input:checked) { border-color: var(--pp-cyan-500); background: rgba(25,200,224,.10); color: var(--pp-text-invert); font-weight: 600; }
/* Custom box: the browser's white default clashed with the dark panel */
.pp-tc-live-label input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0; /* browser default margin made this cell taller than the dropdowns */
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid rgba(255,255,255,.35);
    border-radius: var(--pp-radius-sm);
    background: transparent no-repeat center / 10px 10px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.pp-tc-live-label:hover input[type="checkbox"] { border-color: var(--pp-cyan-500); }
.pp-tc-live-label input[type="checkbox"]:checked {
    border-color: var(--pp-cyan-500);
    background-color: var(--pp-cyan-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230E1419' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pp-tc-live-label input[type="checkbox"]:focus-visible { outline: 2px solid var(--pp-cyan-500); outline-offset: 2px; }

.pp-tc-clear {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 12px 0 0 auto;
    font-size: .75rem;
    font-weight: 500;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: color .15s;
}
.pp-tc-clear:hover { color: var(--pp-cyan-500); }

/* ── Tournament card list ── */
/* Cards set their own display, which would beat the hidden attribute the search filter uses */
.pp-tc-card[hidden],
.pp-tc-no-match[hidden] { display: none; }
/* In-list banners (every 15 cards): hidden while a text search filters the
   list, or they'd bunch up between the few cards left */
.pp-tc-list:has(> .pp-tc-card[hidden]) > .pp-tc-list-banner { display: none; }
/* .pp-archive-banner's 32px bottom margin is for page-top banners; in the
   list the 16px gap spaces it like a card */
.pp-tc-list > .pp-tc-list-banner { margin: 0; }
.pp-tc-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp-tc-card {
    position: relative;
    background:
        linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.32) 55%, rgba(255,255,255,.5) 100%),
        linear-gradient(165deg, rgba(25,200,224,.07), rgba(120,130,140,.02));
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(120,130,140,.20);
    border-radius: var(--pp-radius-lg);
    box-shadow:
        0 6px 24px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(120,130,140,.08);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.pp-tc-card:hover {
    border-color: var(--pp-cyan-500);
    box-shadow:
        0 8px 28px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(120,130,140,.08);
}
.pp-tc-card--live {
    overflow: hidden;
    position: relative;
}
.pp-tc-card--live::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(230,57,70,.10) 0%, rgba(230,57,70,.04) 50%, transparent 72%);
    pointer-events: none;
}
.pp-tc-card--sticky {
    overflow: hidden;
    position: relative;
    /* Pinned (paid) cards: the cyan border and "Featured" badge say why
       they sit above earlier dates; the corner glow alone was too faint */
    border: 1.5px solid var(--pp-cyan-500);
}
.pp-tc-card--sticky::after {
    content: '';
    position: absolute;
    top: -80px;
    left: -80px;
    width: 420px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(107,119,133,.14) 0%, rgba(107,119,133,.05) 50%, transparent 72%);
    pointer-events: none;
}
.pp-tc-card-glow--partner {
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 420px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(6,214,160,.12) 0%, rgba(6,214,160,.05) 50%, transparent 72%);
    pointer-events: none;
}

.pp-tc-logo {
    width: 84px;
    height: 84px;
    min-width: 84px;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--pp-bg-alt);
}
.pp-tc-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pp-tc-body { flex: 1; min-width: 0; }

.pp-tc-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.pp-tc-title {
    font-family: var(--pp-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--pp-text);
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* The whole card opens the tournament page */
.pp-tc-title-link {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.pp-tc-title-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
/* Mouse only: on phones a tap left the title stuck in cyan */
@media (hover: hover) {
    .pp-tc-card:hover .pp-tc-title-link { color: var(--pp-cyan-500); }
}
.pp-tc-title-link:focus-visible { outline: none; }
.pp-tc-card:has(.pp-tc-title-link:focus-visible) {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
/* Bottom row: names both destinations so visitors know what each click does */
.pp-tc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 14px;
}
/* Sits above the card's stretched link. Plain text like "Tournament
   details" beside it: as a bordered pill the same-size label read larger. */
.pp-tc-article-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    color: var(--pp-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .15s;
}
.pp-tc-article-link i { color: var(--pp-cyan-600); font-size: 1.15em; }
.pp-tc-article-short { display: none; }
@media (hover: hover) {
    .pp-tc-article-link:hover { color: var(--pp-cyan-600); }
}
.pp-tc-article-link:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
.pp-tc-details-cue {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px; /* same as the article link, so the gap above is equal with or without it */
    color: var(--pp-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.pp-tc-details-cue svg {
    width: 16px;
    height: 16px;
    color: var(--pp-cyan-600);
    transition: transform .15s;
}
@media (hover: hover) {
    .pp-tc-card:hover .pp-tc-details-cue svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .pp-tc-card:hover .pp-tc-details-cue svg { transform: none; }
}
/* Phones: button left, "Tournament details" right, on one line in every
   card (the row spans the full card width, see the phone card layout). */
@media (max-width: 600px) {
    .pp-tc-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        /* The 44px tap height already adds ~14px above and below the text */
        margin-top: 0;
        margin-bottom: -8px;
    }
    .pp-tc-article-link { justify-self: start; min-height: 44px; white-space: nowrap; }
    .pp-tc-article-full { display: none; }
    .pp-tc-article-short { display: inline; }
    .pp-tc-details-cue { grid-column: 2; margin-left: 0; min-height: 44px; white-space: nowrap; }
}
/* Small phones (320–374px): a touch tighter and no icon so both still fit one line */
@media (max-width: 374px) {
    .pp-tc-article-link,
    .pp-tc-details-cue { letter-spacing: .02em; font-size: .68rem; }
    .pp-tc-article-link i { display: none; }
    .pp-tc-details-cue { gap: 4px; }
}

.pp-tc-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    /* Shrinkable and wrapping: a fixed one-line badge row starved the title
       and ran off the card once an event had three or more badges. */
    flex: 0 1 auto;
    max-width: 55%;
}

.pp-tc-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: var(--pp-radius-sm);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.pp-tc-badge--live    { background: #fef2f2; color: var(--pp-red); border: 1px solid rgba(25,200,224,.2); }
.pp-tc-badge--partner { background: rgba(6,214,160,.08); color: var(--pp-green); border: 1px solid rgba(6,214,160,.25); }
.pp-tc-badge--mixed   { background: rgba(25,200,224,.08); color: var(--pp-cyan-600); border: 1px solid rgba(25,200,224,.25); }
.pp-tc-badge--featured { background: var(--pp-cyan-500); color: var(--pp-bg-dark); border: 1px solid var(--pp-cyan-500); }
/* Mercury paints every .fa-star rating-yellow with !important (its "stars
   colour" setting); here the star is part of the label, so it takes the text colour */
.pp-tc-badge--featured .fa-star { color: inherit !important; }
.pp-tc-badge--ladies  { background: rgba(147,51,234,.06); color: #9333ea; border: 1px solid rgba(147,51,234,.2); }
.pp-tc-badge--seniors { background: var(--pp-bg-alt); color: var(--pp-text-soft); border: 1px solid var(--pp-border); }

.pp-tc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 16px;
    margin-bottom: 8px;
}
.pp-tc-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: var(--pp-text-muted);
    line-height: 1;
}
.pp-tc-meta-item img { height: 14px; border-radius: 1px; }
.pp-tc-meta-item i   { font-size: .72rem; }

/* Plain text: cyan made casino/organiser look like links, but only the
   card (tournament page) and the article pill are clickable */
.pp-tc-meta-link {
    color: var(--pp-text-soft);
    font-size: .78rem;
    text-decoration: none;
}

/* ─────────────────────────────────────────────────────────
   POKER ROOM REVIEW  (pp-review-*)
───────────────────────────────────────────────────────── */

/* ── Hero band ── */
.pp-review-hero {
    --hr-c1-rgb: 25, 200, 224;
    --hr-c2-rgb: 25, 200, 224;
    --hr-c3-rgb: 25, 200, 224;
    background: var(--pp-bg-dark); /* Exact nav color — top is always clean */
    padding: 56px 0 40px;
    border-bottom: 1px solid var(--pp-border-dark);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Bottom: vivid accents anchored to bottom edge */
.pp-review-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 110px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 38% 100% at  8% 100%, rgba(var(--hr-c1-rgb), .68), transparent),
        radial-gradient(ellipse 38% 100% at 92% 100%, rgba(var(--hr-c2-rgb), .62), transparent),
        radial-gradient(ellipse 32% 100% at 50% 100%, rgba(var(--hr-c3-rgb), .50), transparent);
}
/* Top: mirrors the nav's own cyan glows — same positions (28%, 72%, 96%), same cyan, flipped to y=0% */
.pp-review-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 80px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 45% 100% at 28% 0%, rgba(var(--hr-c1-rgb), 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 25% 80%  at 72% 0%, rgba(var(--hr-c1-rgb), 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 28% 120% at 96% 0%, rgba(var(--hr-c1-rgb), 0.16) 0%, transparent 65%);
}
.pp-review-orb { display: none; }
.pp-review-hero .pp-container { position: relative; z-index: 1; }
.pp-review-crumbs { padding-bottom: 16px; opacity: .65; font-size: .78rem; }

/* Title row: title-group left, share buttons pushed to far right */
.pp-review-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.pp-review-hero-title-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

/* Author byline under title — matches news article pp-single-byline style */
.pp-review-hero-byline {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pp-review-hero-byline img {
    border-radius: 50%;
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex-shrink: 0;
}
.pp-review-hero-byline-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pp-review-hero-byline-author {
    font-size: .95rem;
    color: rgba(255,255,255,.6);
}
.pp-review-hero-byline-author a {
    color: var(--pp-text-invert);
    font-weight: 700;
    text-decoration: none;
}
.pp-review-hero-byline-author a:hover { color: var(--pp-cyan-500); }
.pp-review-hero-byline-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .83rem;
    color: rgba(255,255,255,.45);
}

/* Title — identical to pp-single-title on news article pages */
.pp-review-hero-title {
    color: var(--pp-text-invert);
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin: 0;
}

/* Share buttons */
.pp-review-share {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 6px;
}
.pp-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--pp-border-dark);
    background: var(--pp-bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
    cursor: pointer;
    padding: 0;
}
.pp-share-btn:hover {
    border-color: var(--pp-cyan-500);
    color: var(--pp-cyan-500);
}
.pp-share-btn--copied {
    border-color: #22c55e;
    color: #22c55e;
}

/* Byline bar — below the hero band */
.pp-review-byline-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 0 24px;
    border-bottom: 1px solid var(--pp-border);
}
.pp-review-byline-logo {
    width: 52px;
    height: 52px;
    background: var(--pp-bg);
    border-radius: var(--pp-radius-sm);
    border: 1px solid var(--pp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    flex-shrink: 0;
}
.pp-review-logo-img {
    width: 100%;
    height: auto;
    max-height: 40px;
    object-fit: contain;
}

/* Data chips */
.pp-review-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.pp-review-hero-chip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(255,255,255,.7);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    padding: 6px 12px;
}
.pp-review-hero-chip-label {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pp-text-muted);
}
.pp-review-hero-chip-val {
    font-size: .82rem;
    font-weight: 700;
    color: var(--pp-text);
    line-height: 1.2;
}
.pp-review-hero-geo { display: flex; align-items: center; }

/* CTA column */
.pp-review-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Score ring */
.pp-review-score { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pp-review-score-ring {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: conic-gradient(var(--pp-cyan-500) calc(var(--score-pct) * 1%), var(--pp-border) 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.pp-review-score-ring::before {
    content: '';
    position: absolute;
    inset: 9px;
    background: var(--pp-bg);
    border-radius: 50%;
}
.pp-review-score-num {
    font-size: 1.65rem;
    font-weight: 900;
    color: var(--pp-text);
    position: relative;
    z-index: 1;
    line-height: 1;
}
.pp-review-score-max {
    font-size: .65rem;
    color: var(--pp-text-muted);
    position: relative;
    z-index: 1;
    line-height: 1;
}
.pp-review-score-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pp-text-muted);
}
.pp-review-hero-btn {
    width: 100%;
    text-align: center;
    font-size: .85rem;
    padding: .7rem 1.2rem;
}

/* T&C block */
.pp-review-tc {
    font-size: .72rem;
    color: var(--pp-text-muted);
    text-align: center;
    width: 100%;
    line-height: 1.5;
}
.pp-review-tc-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pp-text-muted);
    font-size: .72rem;
    padding: 0;
    border-bottom: 1px dashed currentColor;
}
.pp-review-tc-toggle svg { transition: transform .2s; }
.pp-review-tc-body { margin-top: 8px; }
.pp-review-tc-body[hidden] { display: none; }
.pp-review-btn-notice {
    font-size: .72rem;
    color: var(--pp-text-muted);
    text-align: center;
}

/* ── Rating strip ── */
.pp-review-rstrip {
    background: var(--pp-bg-alt);
    border-bottom: 1px solid var(--pp-border);
    padding: 22px 0;
}
.pp-review-rstrip-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.pp-review-rbar {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.pp-review-rbar-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pp-text-muted);
}
.pp-review-rbar-track {
    height: 5px;
    background: var(--pp-border);
    border-radius: 99px;
    overflow: hidden;
}
.pp-review-rbar-fill {
    height: 100%;
    background: var(--pp-cyan-500);
    border-radius: 99px;
    transition: width .4s ease;
}
.pp-review-rbar-val {
    font-size: .88rem;
    font-weight: 700;
    color: var(--pp-text);
}

/* ── Body layout ── */
.pp-review-body {
    background: var(--pp-bg);
    padding: 52px 0 80px;
}
.pp-review-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 52px;
    align-items: start;
}
/* Grid items default to min-width: auto, so an oversized child anywhere
   in the article body (a wide table, a classic-editor [caption] div with
   a fixed inline width, etc.) refuses to shrink and pushes this whole
   grid — sidebar included — past .pp-container's max-width. min-width: 0
   lets the column actually shrink to fit instead of forcing overflow. */
.pp-review-main {
    min-width: 0;
}
/* align-self: stretch makes this aside span the full row height (the
   row is as tall as the long article), so its sticky child has real
   room to travel instead of being boxed into the aside's own short
   natural height. */
.pp-review-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: stretch;
}
.pp-review-news {
    position: sticky;
    top: 80px; /* 64px compact header + 16px clearance */
}

/* WP admin bar offset — keep clearance under the fixed header, which
   itself shifts down via .admin-bar .pp-hdr-wrap */
.admin-bar .pp-review-news { top: 112px; }
@media (max-width: 782px) {
    .admin-bar .pp-review-news { top: 126px; }
}

/* ── Main column ── */
.pp-review-lead {
    font-size: 1.05rem;
    line-height: 1.72;
    color: var(--pp-text-soft);
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--pp-border);
}
.pp-review-author {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--pp-border);
}

/* Pros / Cons */
.pp-review-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 44px;
}
.pp-review-pro,
.pp-review-con {
    background: var(--pp-bg-card);
    border-radius: var(--pp-radius-md);
    padding: 24px;
    border: 1px solid var(--pp-border-dark);
}
.pp-review-pc--full { grid-column: 1 / -1; }
.pp-review-pc-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pp-text-invert);
    margin: 0 0 16px;
}
.pp-review-pc-body {
    color: var(--pp-text-invert-muted);
    font-size: .88rem;
    line-height: 1.65;
}
.pp-review-pc-body ul { padding-left: 0; list-style: none; margin: 0; }
.pp-review-pc-body li {
    padding: 7px 0;
    border-bottom: 1px solid var(--pp-border-dark);
}
.pp-review-pc-body li:last-child { border-bottom: none; }

/* Article body */
.pp-review-content {
    font-size: .95rem;
    line-height: 1.78;
    color: var(--pp-text);
    margin-bottom: 44px;
}
.pp-review-content img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    border-radius: var(--pp-radius-md);
}

/* Country flags pasted into articles (Mercury-era markup:
   <img class="flag-ico" style="height:18px">). The content-image rules above
   force height:auto, and the SVGs have no intrinsic size, so without this
   they blow up to the full cell width. Sized as an inline icon instead. */
.pp-single-content img.flag-ico,
.pp-review-content img.flag-ico,
.pp-single-content img[src*="/flags/svg/"],
.pp-review-content img[src*="/flags/svg/"] {
    display: inline-block;
    width: 20px !important;
    height: 15px !important;
    max-width: none !important;
    margin: 0 8px 0 0;
    border-radius: 2px;
    object-fit: cover;
    vertical-align: -2px;
    box-shadow: 0 0 0 1px rgba(14, 20, 25, .08);
}
.pp-review-content h2 {
    position: relative;
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    font-weight: 800;
    margin: 2.2em 0 .9em;
    padding-bottom: .55em;
    letter-spacing: -.02em;
}
.pp-review-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: var(--pp-radius-pill);
    background: linear-gradient(90deg,
        rgb(var(--pp-review-brand-rgb, 25,200,224)) 0%,
        rgba(var(--pp-review-brand-rgb, 25,200,224), .15) 100%);
}
.pp-review-content h3 {
    position: relative;
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    font-weight: 700;
    margin: 1.7em 0 .6em;
    padding-left: 14px;
    letter-spacing: -.01em;
}
.pp-review-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 3px;
    border-radius: var(--pp-radius-pill);
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
    opacity: .55;
}
.pp-review-content h4 { font-size: 1.05rem; font-weight: 700; margin: 1.4em 0 .5em; }
.pp-review-content p  { margin: 0 0 1.2em; }
.pp-review-content a  {
    color: rgb(var(--pp-review-brand-rgb, 20,170,192));
    text-decoration: underline;
    text-decoration-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .35);
    text-underline-offset: 2px;
    transition: text-decoration-color .15s;
}
.pp-review-content a:hover { text-decoration-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .8); }
.pp-review-content ul,
.pp-review-content ol { padding-left: .2em; margin-bottom: 1.2em; list-style: none; }
.pp-review-content ol { counter-reset: pp-content-ol; }
.pp-review-content li {
    position: relative;
    margin-bottom: .55em;
    padding-left: 1.5em;
}
.pp-review-content ul > li::before {
    content: "";
    position: absolute;
    left: .15em;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
/* Core Social Icons block is a <ul> too, so the content-list bullet and
   its indent leaked onto every pill (e.g. the "Contact Us" reusable block). */
.pp-review-content .wp-block-social-links > li,
.pp-single-content .wp-block-social-links > li { padding-left: 0; margin: 0; }
.pp-review-content .wp-block-social-links > li::before,
.pp-single-content .wp-block-social-links > li::before { content: none; }
.pp-review-content ol > li {
    counter-increment: pp-content-ol;
}
.pp-review-content ol > li::before {
    content: counter(pp-content-ol);
    position: absolute;
    left: 0;
    top: .05em;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    border-radius: 50%;
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .12);
    color: rgb(var(--pp-review-brand-rgb, 20,170,192));
}

/* ── Blockquotes — glass callout ── */
.pp-review-content blockquote {
    position: relative;
    margin: 1.8em 0;
    padding: 18px 22px 18px 26px;
    background: linear-gradient(160deg, rgba(var(--pp-review-brand-rgb, 25,200,224), .08), rgba(var(--pp-review-brand-rgb, 25,200,224), .02));
    border: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .18);
    border-radius: var(--pp-radius-md);
    color: var(--pp-text-soft);
    font-style: italic;
}
.pp-review-content blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: var(--pp-radius-pill);
    background: rgb(var(--pp-review-brand-rgb, 25,200,224));
}
.pp-review-content blockquote p:last-child { margin-bottom: 0; }

/* ── Section dividers ──
   No visible rule line at all — section breaks read from heading
   spacing and the h2 accent underline alone (editorial style, no
   decorative hr). !important clears any inline border/background an
   editor set on older posts so nothing leaks through. */
.pp-review-content hr,
.pp-review-content .wp-block-separator {
    display: none !important;
}

/* ── Tables inside review body ── */
/* Unified glassmorphic table — forced with !important so any inline
   row/cell colors an editor picked in the block editor on older posts
   can't fragment the look post-to-post. */
.pp-review-content table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: .9rem;
    margin: 1.8em 0;
    border-radius: var(--pp-radius-lg) !important;
    overflow: hidden;
    border: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .20) !important;
    background: rgba(255,255,255,.7) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
}
/* Core wraps table blocks in .wp-block-table with overflow-x: auto by
   default — the inner table above is overflow: hidden, so on genuinely
   wide tables this wrapper (not the table) is what scrolls. Give it the
   site's own scrollbar instead of the bare OS default; the table already
   owns the vertical margin/radius, so zero those out here to avoid
   doubling them. */
.pp-review-content .wp-block-table {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .45) transparent;
}
.pp-review-content .wp-block-table table { margin: 0 !important; }
.pp-review-content .wp-block-table::-webkit-scrollbar { height: 6px; }
.pp-review-content .wp-block-table::-webkit-scrollbar-track { background: transparent; }
.pp-review-content .wp-block-table::-webkit-scrollbar-thumb {
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .45);
    border-radius: var(--pp-radius-pill);
}
.pp-review-content .wp-block-table::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .7);
}
.pp-review-content table thead tr,
.pp-review-content table th,
.pp-review-content table td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}
.pp-review-content table thead th {
    background:
        linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.2) 100%),
        rgba(var(--pp-review-brand-rgb, 25,200,224), .16) !important;
    background-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .16) !important;
    border-bottom: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .24) !important;
}
.pp-review-content table thead th {
    padding: 13px 18px;
    text-align: left;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pp-text) !important;
}
.pp-review-content table tbody tr,
.pp-review-content table tbody td {
    background: transparent !important;
    background-color: transparent !important;
}
/* The row line goes on the cells: with border-collapse: separate a <tr>
   border never paints, and core's table block CSS (which can load after
   this file) gives every cell a currentColor border we must override. */
.pp-review-content table tbody tr { transition: background .15s; }
.pp-review-content table tbody td { border-bottom: 1px solid var(--pp-border) !important; }
.pp-review-content table tbody tr:last-child td { border-bottom: none !important; }
.pp-review-content table tbody tr:nth-child(even) {
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .05) !important;
}
.pp-review-content table tbody tr:hover,
.pp-review-content table tbody tr:nth-child(even):hover {
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .10) !important;
}
.pp-review-content table td {
    padding: 13px 18px;
    color: var(--pp-text) !important;
    vertical-align: top;
    line-height: 1.5;
}
.pp-review-content table td:first-child {
    font-weight: 700;
    color: var(--pp-text-soft) !important;
    white-space: nowrap;
}

/* ── "Contact us" callout box (custom block class, not has-background) ──
   Editors add this via the block editor's "Additional CSS class" field
   on a Group block — confirmed via the actual markup, which carries no
   has-background class at all, only .contact-us. That's why the
   has-background rule below never touched it. */
.pp-review-content .contact-us {
    position: relative;
    margin: 2.4em 0 !important;
    padding: 28px 32px !important;
    background: linear-gradient(160deg,
        rgba(var(--pp-review-brand-rgb, 25,200,224), .14) 0%,
        rgba(var(--pp-review-brand-rgb, 25,200,224), .03) 100%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .22) !important;
    border-radius: var(--pp-radius-lg) !important;
    box-shadow: 0 8px 28px rgba(var(--pp-review-brand-rgb, 25,200,224), .12) !important;
    overflow: hidden;
}
.pp-review-content .contact-us::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
.pp-review-content .contact-us > * { position: relative; }

/* ── Gutenberg group blocks with background (glass callout boxes) ──
   Selector specificity is boosted (.has-background repeated) and every
   visual property is !important because WordPress' own generated
   global-styles CSS ships editor-picked colors as !important too —
   without the boost, a picked preset/custom color wins the tie and the
   box reverts to whatever flat color an editor happened to choose. */
.pp-review-content .wp-block-group.has-background.has-background {
    position: relative;
    background: linear-gradient(
        160deg,
        rgba(var(--pp-review-brand-rgb, 25,200,224), .14) 0%,
        rgba(var(--pp-review-brand-rgb, 25,200,224), .03) 100%
    ) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .22) !important;
    border-radius: var(--pp-radius-lg) !important;
    box-shadow: 0 8px 28px rgba(var(--pp-review-brand-rgb, 25,200,224), .12) !important;
    padding: 20px 32px 32px !important;
    margin: 2em 0 !important;
    overflow: hidden;
}
.pp-review-content .wp-block-group.has-background.has-background > *:first-child {
    margin-top: 0 !important;
}
.pp-review-content .wp-block-group.has-background.has-background h2 {
    margin-top: .3em !important;
}
/* Glass specular sheen along the top edge */
.pp-review-content .wp-block-group.has-background.has-background::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
.pp-review-content .wp-block-group.has-background.has-background > * { position: relative; }
.pp-review-content .wp-block-group.has-background.has-background hr,
.pp-review-content .wp-block-group.has-background.has-background .wp-block-separator {
    border-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .22) !important;
    background-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .22) !important;
}

/* Inner nested group (e.g. the form sub-box) */
.pp-review-content .wp-block-group.has-background .wp-block-group {
    background: var(--pp-bg) !important;
    border: 1px solid var(--pp-border) !important;
    border-top: none !important;
    border-radius: var(--pp-radius-md) !important;
    padding: 20px !important;
    margin: 1.2em 0 0 !important;
}

/* ── Forms inside review content ── */
.pp-review-content form,
.pp-review-content .aces-form,
.pp-review-content .wpcf7 {
    position: relative;
    background: rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: var(--pp-radius-lg);
    box-shadow:
        0 8px 28px rgba(var(--pp-review-brand-rgb, 25,200,224), .10),
        inset 0 1px 0 rgba(255,255,255,.8);
    padding: 28px 24px;
    margin: 2em 0;
    overflow: hidden;
}
.pp-review-content form p { margin: 0; }

.pp-review-content input[type="text"],
.pp-review-content input[type="email"],
.pp-review-content input[type="number"],
.pp-review-content input[type="tel"],
.pp-review-content input[type="url"],
.pp-review-content input[type="password"],
.pp-review-content textarea,
.pp-review-content select {
    width: 100%;
    padding: 11px 14px;
    font-size: .9rem;
    color: var(--pp-text);
    background: rgba(255,255,255,.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,.8);
    border-radius: var(--pp-radius-md);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
    margin-bottom: 12px;
    display: block;
    font-family: inherit;
}
.pp-review-content input[type="text"]:focus,
.pp-review-content input[type="email"]:focus,
.pp-review-content input[type="number"]:focus,
.pp-review-content input[type="tel"]:focus,
.pp-review-content input[type="url"]:focus,
.pp-review-content input[type="password"]:focus,
.pp-review-content textarea:focus,
.pp-review-content select:focus {
    background: rgba(255,255,255,.92);
    border-color: var(--pp-review-brand, var(--pp-cyan-500));
    box-shadow: 0 0 0 3px rgba(var(--pp-review-brand-rgb, 25,200,224), .12);
}
.pp-review-content textarea { resize: vertical; min-height: 100px; }

.pp-review-content input[type="submit"],
.pp-review-content button[type="submit"],
.pp-review-content .submit input,
.pp-review-content .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1.5rem;
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: var(--pp-radius-pill);
    border: none;
    cursor: pointer;
    background: var(--pp-review-brand, var(--pp-cyan-500));
    color: #fff;
    transition: opacity .15s, transform .1s;
    font-family: inherit;
    margin-top: 4px;
}
.pp-review-content input[type="submit"]:hover,
.pp-review-content button[type="submit"]:hover,
.pp-review-content .wpcf7-submit:hover { opacity: .88; transform: translateY(-1px); }

.pp-review-pagination { margin-top: 24px; display: flex; gap: 8px; }

/* Details table */
.pp-review-details {
    position: relative;
    background: linear-gradient(165deg, rgba(var(--pp-review-brand-rgb, 25,200,224), .05), rgba(255,255,255,0) 55%);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    margin-bottom: 44px;
}
.pp-review-details-title {
    position: relative;
    font-size: 1rem;
    font-weight: 800;
    padding: 20px 22px 16px;
    margin: 0;
    letter-spacing: -.01em;
    color: var(--pp-text);
}
.pp-review-details-title::after {
    content: "";
    position: absolute;
    left: 22px;
    bottom: 0;
    width: 48px;
    height: 3px;
    border-radius: var(--pp-radius-pill);
    background: linear-gradient(90deg,
        rgb(var(--pp-review-brand-rgb, 25,200,224)) 0%,
        rgba(var(--pp-review-brand-rgb, 25,200,224), .15) 100%);
}
.pp-review-details-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .14);
    align-items: center;
    transition: background .15s;
}
.pp-review-details-row:hover { background: rgba(var(--pp-review-brand-rgb, 25,200,224), .04); }
.pp-review-details-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--pp-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pp-review-details-value {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.pp-review-term-logo { display: inline-flex; }
.pp-review-term-img  { height: 26px; width: auto; }
.pp-review-term-text {
    font-size: .8rem;
    font-weight: 500;
    color: var(--pp-text-soft);
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .07);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .22);
    border-radius: var(--pp-radius-pill);
    padding: 4px 12px;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.pp-review-term-text:hover {
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .16);
    border-color: rgba(var(--pp-review-brand-rgb, 25,200,224), .45);
    color: var(--pp-text);
}

/* ── Sidebar ── */
/* Shared glass card shell — mirrors .pp-sidebar-brands so all sidebar
   widgets read as one design language across the site. Grid placement
   and sticky positioning for these two live up in .pp-review-layout. */
.pp-review-sidecard,
.pp-review-news {
    background: var(--pp-bg);
    background-image:
        radial-gradient(ellipse 260px 180px at 108% -8%, rgba(var(--pp-review-brand-rgb, 25,200,224), .12), transparent),
        radial-gradient(ellipse 160px 120px at -8% 108%, rgba(var(--pp-review-brand-rgb, 25,200,224), .07), transparent);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
}

.pp-review-sidecard {
    position: relative;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Welcome bonus highlight — same frosted glass treatment as .pp-scscore */
.pp-review-sidecard-bonus {
    position: relative;
    width: 100%;
    background:
        linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.32) 55%, rgba(255,255,255,.5) 100%),
        linear-gradient(165deg, rgba(var(--pp-review-brand-rgb, 25,200,224), .20), rgba(var(--pp-review-brand-rgb, 25,200,224), .04));
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: var(--pp-radius-md);
    box-shadow:
        0 6px 24px rgba(var(--pp-review-brand-rgb, 25,200,224), .14),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(var(--pp-review-brand-rgb, 25,200,224), .10);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
    overflow: hidden;
}
.pp-review-sidecard-bonus-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgb(var(--pp-review-brand-rgb, 20,170,192));
}
.pp-review-sidecard-bonus-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pp-text);
    line-height: 1.35;
}

/* Sidecard logo at top */
.pp-review-sidecard-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 14px;
}
.pp-review-sidecard-logo .pp-review-logo-img {
    max-height: 56px;
    max-width: 140px;
    width: auto;
    object-fit: contain;
}

/* ── Expert score widget (frosted glass panel) ── */
.pp-scscore {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.32) 55%, rgba(255,255,255,.5) 100%),
        linear-gradient(165deg, rgba(var(--pp-review-brand-rgb, 25,200,224), .20), rgba(var(--pp-review-brand-rgb, 25,200,224), .04));
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: var(--pp-radius-md);
    box-shadow:
        0 6px 24px rgba(var(--pp-review-brand-rgb, 25,200,224), .14),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(var(--pp-review-brand-rgb, 25,200,224), .10);
    overflow: hidden;
}
.pp-scscore-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pp-scscore-label {
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--pp-text-muted);
    line-height: 1.4;
}
.pp-scscore-badge {
    display: flex;
    align-items: baseline;
    gap: 2px;
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .12);
    border: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .30);
    border-radius: var(--pp-radius-pill);
    padding: 3px 10px 3px 12px;
}
.pp-scscore-num {
    font-size: 1.3rem;
    font-weight: 900;
    color: rgb(var(--pp-review-brand-rgb, 20,170,192));
    line-height: 1.3;
    letter-spacing: -.03em;
}
.pp-scscore-denom {
    font-size: .68rem;
    font-weight: 600;
    color: var(--pp-text-muted);
    line-height: 1;
}
.pp-scscore-stars {
    display: flex;
    gap: 4px;
    line-height: 1;
}

/* SVG stars */
.pp-scs-star {
    position: relative;
    width: 17px;
    height: 17px;
    display: inline-flex;
    flex: 0 0 auto;
}
.pp-scs-star-svg { width: 100%; height: 100%; display: block; }
.pp-scs-star--full .pp-scs-star-svg {
    fill: rgb(var(--pp-review-brand-rgb, 25,200,224));
    filter: drop-shadow(0 0 3px rgba(var(--pp-review-brand-rgb, 25,200,224), .45));
}
.pp-scs-star--empty .pp-scs-star-svg { fill: rgba(var(--pp-review-brand-rgb, 25,200,224), .15); }
.pp-scs-star--half .pp-scs-star-svg--bg {
    position: absolute;
    inset: 0;
    fill: rgba(var(--pp-review-brand-rgb, 25,200,224), .15);
}
.pp-scs-star--half .pp-scs-star-svg--fg {
    position: absolute;
    inset: 0;
    fill: rgb(var(--pp-review-brand-rgb, 25,200,224));
    clip-path: inset(0 50% 0 0);
    filter: drop-shadow(0 0 3px rgba(var(--pp-review-brand-rgb, 25,200,224), .45));
}

/* Category breakdown bars inside score widget */
.pp-scscore-bars {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--pp-review-brand-rgb, 25,200,224), .16);
}
.pp-scscore-bars .pp-review-rbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 5px;
    column-gap: 8px;
}
.pp-scscore-bars .pp-review-rbar-label {
    order: 1;
    flex: 1 1 auto;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: none;
    color: var(--pp-text-soft);
    white-space: nowrap;
}
.pp-scscore-bars .pp-review-rbar-val {
    order: 2;
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    color: rgb(var(--pp-review-brand-rgb, 20,170,192));
    text-align: right;
}
.pp-scscore-bars .pp-review-rbar-track {
    order: 3;
    flex: 1 1 100%;
    height: 6px;
    background: rgba(var(--pp-review-brand-rgb, 25,200,224), .12);
}
.pp-scscore-bars .pp-review-rbar-fill {
    background: linear-gradient(90deg,
        rgb(var(--pp-review-brand-rgb, 20,170,192)),
        rgba(var(--pp-review-brand-rgb, 25,200,224), .75));
    box-shadow: 0 0 8px rgba(var(--pp-review-brand-rgb, 25,200,224), .45);
}
.pp-review-sidecard-btn {
    width: 100%;
    text-align: center;
    font-size: .9rem;
    padding: .75rem 1.25rem;
    display: block;
    box-shadow: 0 4px 16px rgba(25,200,224,.16) !important;
}
/* Visitor's country blocked: replaces the bonus and Play Now button */
.pp-review-blocked {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    background: var(--pp-bg-alt);
    text-align: center;
}
.pp-review-blocked-title {
    font-family: var(--pp-font-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--pp-text);
}
.pp-review-blocked-text {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--pp-text-muted);
}
.pp-review-blocked-btn { margin-top: 6px; }
/* Inside the review text, where the "How to open … account" box was */
.pp-review-blocked--content {
    margin: 32px 0;
    padding: 24px 28px;
    align-items: flex-start;
    text-align: left;
}
.pp-review-blocked--content .pp-review-blocked-title { font-size: 1.25rem; }
.pp-review-blocked--content .pp-review-blocked-text { font-size: .9375rem; }
.pp-review-blocked--content .pp-review-blocked-btn { align-self: flex-start; padding-inline: 24px; }

.pp-review-sidecard-tc,
.pp-review-sidecard-notice {
    font-size: .7rem;
    color: var(--pp-text-muted);
    text-align: center;
    line-height: 1.5;
    width: 100%;
}
.pp-review-sidecard-facts {
    width: 100%;
    border-top: 1px solid var(--pp-border);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.pp-review-sidecard-fact {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .8rem;
}
.pp-review-sidecard-fact-key { color: var(--pp-text-muted); }
.pp-review-sidecard-fact-val { color: var(--pp-text); font-weight: 600; text-align: right; }

/* ── Sidecard reveal animation ── */
.pp-review-sidecard > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s ease, transform .4s ease;
}
.pp-review-sidecard.pp-sc-revealed > * {
    opacity: 1;
    transform: none;
}
/* bar fill gets a slower ease so the number sweep feels deliberate */
.pp-scscore-bars .pp-review-rbar-fill {
    transition: width .7s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce) {
    .pp-review-sidecard > *,
    .pp-scscore-bars .pp-review-rbar-fill {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Latest news widget ── */
.pp-review-news-heading {
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--pp-font-body);
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--pp-text);
    padding: 16px 18px 12px;
    margin: 0;
}
.pp-review-news-list {
    list-style: none;
    margin: 0;
    padding: 0 10px 10px;
}
.pp-review-news-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    border-radius: var(--pp-radius-md);
    transition: background .15s;
}
.pp-review-news-item:hover { background: var(--pp-bg-alt); }
.pp-review-news-thumb {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    display: block;
    background: var(--pp-bg-alt);
}
.pp-review-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pp-review-news-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-top: 1px;
}
.pp-review-news-title {
    font-size: .81rem;
    font-weight: 700;
    color: var(--pp-text);
    text-decoration: none;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-review-news-title:hover { color: var(--pp-cyan-600); }
.pp-review-news-date {
    font-size: .7rem;
    color: var(--pp-text-muted);
}

/* ── Related sections ── */
.pp-review-related {
    padding: 52px 0;
    background: var(--pp-bg);
    border-top: 1px solid var(--pp-border);
}
.pp-review-related--alt { background: var(--pp-bg-alt); }
.pp-review-related-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0 0 28px;
}

/* ── Comments ── */
.pp-review-comments {
    padding: 52px 0;
    border-top: 1px solid var(--pp-border);
    background: var(--pp-bg);
}

/* ── Float bar ── */
.pp-review-floatbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--pp-bg-dark);
    border-top: 1px solid var(--pp-border-dark);
    padding: 14px 0;
    z-index: 999;
    transform: translateY(100%);
    transition: transform .25s ease;
}
.pp-review-floatbar--show { transform: translateY(0); }
.pp-review-floatbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.pp-review-floatbar-left { display: flex; align-items: center; gap: 14px; }
.pp-review-floatbar-logo { height: 40px; width: auto; }
.pp-review-floatbar-name {
    font-weight: 700;
    color: var(--pp-text-invert);
    font-size: .9rem;
}
.pp-review-floatbar-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--pp-text-invert-muted);
    font-size: .78rem;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .pp-review-layout { grid-template-columns: 1fr 300px; gap: 36px; }
}
@media (max-width: 860px) {
    .pp-review-rstrip-inner { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
    .pp-review-layout { grid-template-columns: 1fr; }
    /* Unwrap the aside so its cards become grid items: the play card stays
       above the article, Latest News drops below it */
    .pp-review-sidebar { display: contents; }
    .pp-review-sidecard { order: -1; }
    .pp-review-news { position: static; order: 1; }
}
@media (max-width: 600px) {
    .pp-review-hero { padding: 32px 0 28px; }
    /* Side by side, four share buttons squeeze the title to ~10 characters a
       line on small phones; under the byline they cost one short row. */
    .pp-review-hero-row { flex-direction: column; gap: 18px; }
    .pp-review-hero-title-group { flex: none; width: 100%; }
    .pp-review-share { padding-top: 0; }
    .pp-review-byline-bar { gap: 10px; }
    .pp-review-pros-cons { grid-template-columns: 1fr; }
    .pp-review-rstrip-inner { grid-template-columns: 1fr 1fr; }
    .pp-review-details-row { grid-template-columns: 1fr; gap: 6px; }
    .pp-review-layout { gap: 28px; }
    .pp-review-body { padding: 32px 0 56px; }
}

.pp-tc-desc {
    font-size: .8rem;
    color: var(--pp-text-muted);
    line-height: 1.55;
    margin: 0 0 8px;
}
.pp-tc-desc p {
    font: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0 0 .4em;
}
.pp-tc-desc p:last-child { margin-bottom: 0; }

.pp-tc-highlights {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: .78rem;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--pp-border);
}
.pp-tc-highlights-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pp-text);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}
.pp-tc-highlights-label i {
    font-size: .8em;
    position: relative;
    top: .5px;
}
.pp-tc-highlights-val {
    color: var(--pp-text-muted);
    line-height: 1.45;
}

@media (max-width: 600px) {
    .pp-tc-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-tc-filters     { padding: 16px 14px 14px; }
    /* 16px stops iOS zooming into the field on focus */
    .pp-tc-search-wrap .pp-tc-search-input { font-size: 1rem; }
    /* room lists' mobile rule makes every .pp-btn-room-play flex:1 */
    .pp-tc-search-btn  { flex: 0 0 auto; padding: 0 1.1rem; }
    /* 5 dropdowns + Live: the odd ones out get full rows instead of a ragged last row */
    .pp-tc-filter-grid > .pp-tc-drop:nth-child(5),
    .pp-tc-live-label  { grid-column: 1 / -1; }
    /* Phone card: small logo beside the title, everything else full width
       underneath. A 64px logo column squeezed every line of text into the
       ~230px beside it. .pp-tc-body becomes "contents" so its children sit
       directly in the card grid. */
    .pp-tc-card {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        /* The card's 16px flex gap would land between every row here */
        gap: 0 12px;
        align-items: start;
    }
    .pp-tc-body        { display: contents; }
    .pp-tc-logo        { grid-column: 1; grid-row: 1; width: 48px; height: 48px; min-width: 48px; align-self: center; }
    .pp-tc-title-row   { grid-column: 2; grid-row: 1; align-self: center; }
    .pp-tc-meta,
    .pp-tc-desc,
    .pp-tc-highlights,
    .pp-tc-actions     { grid-column: 1 / -1; }
    /* One fact per line, dates first */
    .pp-tc-meta        { flex-direction: column; gap: 7px; margin: 12px 0 10px; }
    .pp-tc-meta-item   { font-size: .95rem; line-height: 1.3; align-items: flex-start; color: var(--pp-text-soft); }
    .pp-tc-meta-item i,
    .pp-tc-meta-item img { flex-shrink: 0; margin-top: .15em; width: 16px; text-align: center; }
    .pp-tc-meta-item img { width: 18px; height: auto; }
    .pp-tc-meta-item:has(.fa-calendar) { order: -1; color: var(--pp-text); font-weight: 600; }
    .pp-tc-meta-link   { font-size: inherit; }
    .pp-tc-desc        { font-size: .95rem; }
    .pp-tc-highlights  { font-size: .9rem; }
    /* Badges become a wrapping row above the title so the title gets the
       full body width instead of one word per line. */
    .pp-tc-title-row   { flex-direction: column-reverse; align-items: stretch; gap: 8px; margin-bottom: 10px; }
    .pp-tc-badges      { justify-content: flex-start; max-width: none; }
    .pp-tc-title       { font-size: 1.35rem; line-height: 1.15; }
    /* Label on its own line, list under it: side by side the values were
       squeezed into a narrow column beside "HIGHLIGHTS:". */
    .pp-tc-highlights  { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ==========================================================================
   Live Reporting Page  (.pp-lr-*)
   ========================================================================== */

/* Intro description rendered from WP page content (inside main column) */
.pp-lr-intro {
    margin-bottom: 24px;
    font-size: 1rem;
    color: var(--pp-text);
    line-height: 1.65;
}
.pp-lr-intro p { margin: 0 0 .75em; }
.pp-lr-intro p:last-child { margin-bottom: 0; }

/* ── Tab filter pills ── */
.pp-lr-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.pp-lr-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border-radius: var(--pp-radius-pill);
    border: 1.5px solid var(--pp-cyan-500);
    color: var(--pp-cyan-500);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.pp-lr-tab:hover {
    background: rgba(25, 200, 224, .08);
    text-decoration: none;
    color: var(--pp-cyan-500);
}
.pp-lr-tab--active {
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
}
.pp-lr-tab--active:hover {
    background: var(--pp-cyan-600);
    color: var(--pp-bg-dark);
}

/* ── Event sections ── */
.pp-lr-section {
    margin-bottom: 40px;
}
.pp-lr-section--hidden { display: none; }

h2.pp-lr-section-heading,
.pp-lr-section-heading {
    position: relative;
    font-family: var(--pp-font-display);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--pp-text-muted);
    margin: 0 0 20px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}
h2.pp-lr-section-heading::after,
.pp-lr-section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: var(--pp-radius-pill);
    background: linear-gradient(90deg, var(--pp-red) 0%, rgba(230,57,70,.15) 100%);
}
h2.pp-lr-section-heading--live,
.pp-lr-section-heading--live { color: var(--pp-text); }

/* Animated red dot for live sections */
.pp-lr-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-red);
    flex-shrink: 0;
    animation: pp-lr-pulse 1.8s ease-in-out infinite;
}
@keyframes pp-lr-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, .5); }
    50%       { box-shadow: 0 0 0 5px rgba(230, 57, 70, 0); }
}

/* ── Event card list ── */
.pp-lr-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Event card ── */
/* Neutral gray glass for every card — red carries the "live" identity
   through the badge/border-left/link accents instead of the whole
   card background, so it doesn't compete with those accents.
   Compact list-row layout (matches .pp-sidebar-room sizing) — a fixed
   square thumbnail centered against the row instead of a full-height
   bleed image, so the card height tracks its text content. */
.pp-lr-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.32) 55%, rgba(255,255,255,.5) 100%),
        linear-gradient(165deg, rgba(120,130,140,.10), rgba(120,130,140,.02));
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(120,130,140,.20);
    border-radius: var(--pp-radius-lg);
    box-shadow:
        0 6px 24px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(120,130,140,.08);
    transition: border-color .15s, box-shadow .15s;
}
.pp-lr-card:hover {
    border-color: rgba(120,130,140,.45);
    box-shadow:
        0 8px 28px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(120,130,140,.08);
}
.pp-lr-card--live {
    border-left: 3px solid var(--pp-red);
}

.pp-lr-card-img {
    width: 84px;
    height: 84px;
    min-width: 84px;
    position: relative;
    background: var(--pp-bg-alt);
    border-radius: var(--pp-radius-md);
    overflow: hidden;
    flex-shrink: 0;
}
.pp-lr-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.pp-lr-card-img-ph {
    width: 100%;
    height: 100%;
    background: var(--pp-bg-alt);
}

.pp-lr-card-live-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: var(--pp-radius-sm);
    background: #fef2f2;
    color: var(--pp-red);
    border: 1px solid rgba(230, 57, 70, .2);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pp-lr-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.pp-lr-card-title {
    font-family: var(--pp-font-display);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: 0;
    color: var(--pp-text);
}
.pp-lr-card-title a {
    color: inherit;
    text-decoration: none;
}
.pp-lr-card-title a:hover { color: var(--pp-cyan-600); }

.pp-lr-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
}
.pp-lr-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    color: var(--pp-text-muted);
}
.pp-lr-card-meta-item i { font-size: .85em; }

.pp-lr-card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--pp-cyan-500);
    text-decoration: none;
    transition: color .15s, gap .15s;
    width: fit-content;
}
.pp-lr-card-link:hover {
    color: var(--pp-cyan-600);
    gap: 8px;
    text-decoration: none;
}
.pp-lr-card-link i { font-size: .85em; }

/* ── Responsive ── */
@media (max-width: 600px) {
    /* Top-aligned so the logo lines up with the title, not the middle of a tall
       wrapped title/meta block */
    .pp-lr-card-img { width: 64px; height: 64px; min-width: 64px; align-self: flex-start; }
    .pp-lr-card { padding: 8px; gap: 10px; }
    /* The full LIVE pill covered almost half of a 64px logo. The red card edge
       and "Live Events" heading already say it's live, so a corner dot is enough. */
    .pp-lr-card-live-badge {
        top: 4px;
        left: 4px;
        width: 10px;
        height: 10px;
        padding: 0;
        border: 2px solid var(--pp-bg);
        border-radius: 50%;
        background: var(--pp-red);
    }
    .pp-lr-card-live-badge i { display: none; }
    .pp-lr-card-live-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .pp-lr-tabs { gap: 8px; }
    .pp-lr-tab { padding: 0.5rem 1rem; font-size: .75rem; }
}

/* ==========================================================================
   Single Tournament  (.pp-tr-*, page-tournament.php)
   Article hero band + facts strip; the body reuses .pp-single-layout and
   .pp-single-content so schedule tables match article tables.
   ========================================================================== */

.pp-tr-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
.pp-tr-head--logo { grid-template-columns: minmax(0, 1fr) 120px; }

.pp-tr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.pp-tr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-sm);
    color: rgba(255,255,255,.8);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
}
.pp-tr-chip--upcoming,
.pp-tr-chip--running {
    background: var(--pp-cyan-500);
    border-color: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
}
/* Muted grey is 4.06:1 on the hero; white at 60% clears 7:1 */
.pp-tr-chip--finished { color: rgba(255,255,255,.6); }
.pp-tr-chip.pp-tc-badge--partner { background: rgba(6,214,160,.08); border-color: rgba(6,214,160,.35); }
.pp-tr-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pp-red);
}

.pp-tr-title { margin-bottom: 16px; }

.pp-tr-lede {
    color: rgba(255,255,255,.7);
    font-size: 1.1rem;
    line-height: 1.65;
    max-width: 720px;
}
.pp-tr-lede > * { margin: 0; }
.pp-tr-lede > * + * { margin-top: .75em; }
.pp-tr-lede a { color: var(--pp-cyan-500); }

.pp-tr-logo {
    width: 120px;
    height: 120px;
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pp-border-dark);
}
/* contain: editors upload wordmarks as well as square badges, and cover cut them off */
.pp-tr-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Facts strip: hairline-separated columns, no card */
.pp-tr-facts {
    display: grid;
    /* One row of equal columns for however many facts there are (1–4).
       auto-fit wrapped 4 facts to 3 + 1 on tablets, breaking the dividers */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 36px 0 0;
    border-top: 1px solid var(--pp-border-dark);
    border-bottom: 1px solid var(--pp-border-dark);
}
.pp-tr-fact {
    padding: 18px 24px 18px 0;
    min-width: 0;
}
.pp-tr-fact + .pp-tr-fact {
    padding-left: 24px;
    border-left: 1px solid var(--pp-border-dark);
}
.pp-tr-fact dt {
    color: rgba(255,255,255,.6);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.pp-tr-fact dd {
    margin: 0;
    color: var(--pp-text-invert);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}
.pp-tr-fact-sub {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.5);
    font-size: .8rem;
    font-weight: 500;
}
.pp-tr-fact-country {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pp-tr-fact-country img {
    width: 20px;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
}

.pp-tr-highlights {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 16px;
    margin-top: 24px;
}
.pp-tr-highlights-label {
    margin: 0;
    font-family: var(--pp-font-body);
    color: rgba(255,255,255,.6);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pp-tr-highlights-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-tr-highlights-list li {
    padding: 6px 12px;
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-md);
    color: var(--pp-text-invert);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
}

.pp-tr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.pp-tr-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
}
.pp-tr-actions a:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 3px;
}
/* Secondary button on the dark hero: same values it takes on a dark room row */
.pp-tr-actions .pp-btn-room-review {
    border-color: rgba(255,255,255,.28);
    color: var(--pp-text-invert);
}
.pp-tr-actions .pp-btn-room-review:hover {
    background: rgba(255,255,255,.1);
    border-color: var(--pp-text-invert);
    color: var(--pp-text-invert);
    box-shadow: none;
}

/* More upcoming tournaments */
.pp-tr-more { margin-top: 64px; }
.pp-tr-more:first-child { margin-top: 0; }
.pp-tr-more-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.pp-tr-more-head .pp-single-related-title { margin: 0; }
.pp-tr-more-head .pp-sidebar-brands-seeall {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.pp-tr-more-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-tr-more-list li + li { border-top: 1px solid var(--pp-border); }
.pp-tr-more-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 14px 8px;
    color: var(--pp-text);
    text-decoration: none;
    transition: background .15s;
}
.pp-tr-more-row:hover { background: var(--pp-bg-alt); }
.pp-tr-more-row:focus-visible { outline: 2px solid var(--pp-cyan-500); outline-offset: -2px; }
.pp-tr-more-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--pp-radius-md);
    background: var(--pp-bg-dark);
    color: var(--pp-text-invert);
    line-height: 1;
}
.pp-tr-more-day { font-size: 1.2rem; font-weight: 800; }
.pp-tr-more-month {
    margin-top: 3px;
    color: var(--pp-cyan-500);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pp-tr-more-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.pp-tr-more-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    transition: color .15s;
}
/* Same hover as news cards: the title turns cyan (mouse only, or it sticks after a tap) */
@media (hover: hover) {
    .pp-tr-more-row:hover .pp-tr-more-title { color: var(--pp-cyan-500); }
}
.pp-tr-more-dates,
.pp-tr-more-place {
    color: var(--pp-text-muted);
    font-size: .82rem;
    line-height: 1.45;
}
.pp-tr-more-dates { font-weight: 600; color: var(--pp-text-soft); }
/* Flag pinned to the first line when a long venue wraps */
.pp-tr-more-place {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}
.pp-tr-more-place img {
    width: 16px;
    height: auto;
    margin-top: .3em;
    border-radius: 2px;
    flex-shrink: 0;
    /* white-field flags (Cyprus, Japan) vanish on white without an edge */
    box-shadow: 0 0 0 1px var(--pp-border);
}
.pp-tr-more-arrow {
    align-self: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--pp-text-muted);
    transition: transform .15s, color .15s;
}
.pp-tr-more-row:hover .pp-tr-more-arrow { color: var(--pp-cyan-600); transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .pp-tr-more-row:hover .pp-tr-more-arrow { transform: none; }
}

@media (max-width: 768px) {
    .pp-tr-head--logo { grid-template-columns: minmax(0, 1fr) 72px; gap: 16px; }
    .pp-tr-logo { width: 72px; height: 72px; border-radius: var(--pp-radius-md); }
    .pp-tr-lede { font-size: 1rem; }
    /* Two columns of facts; the vertical rule only between the pair */
    .pp-tr-facts {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 28px;
    }
    .pp-tr-fact,
    .pp-tr-fact + .pp-tr-fact { padding: 14px 12px 14px 0; border-left: 0; }
    .pp-tr-fact:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--pp-border-dark); }
    .pp-tr-fact:nth-child(n+3) { border-top: 1px solid var(--pp-border-dark); }
    /* Organiser is hidden when it matches the venue, leaving an odd count;
       the last fact takes the whole row instead of leaving an empty cell */
    .pp-tr-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .pp-tr-highlights { flex-direction: column; align-items: stretch; gap: 10px; }
    .pp-tr-actions a { flex: 1 1 100%; }
    .pp-tr-more-row { gap: 14px; padding: 12px 4px; }
    .pp-tr-more-arrow { display: none; }
}

/* ─────────────────────────────────────────────────────────
   TOP-PAGE GLOW — soft cyan radial light from the top
   Applied on all light pages; suppressed where a dark
   hero section sits directly below the header.
───────────────────────────────────────────────────────── */

/* Ensure nav row stacks above the gradient overlay */
.pp-hdr-row { z-index: 1; }


/* Header — cyan radial glows on dark nav */
.pp-hdr-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 45% 100% at 28% 100%, rgba(25, 200, 224, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 25% 80%  at 72% 100%, rgba(25, 200, 224, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 28% 120% at 96% 50%, rgba(25, 200, 224, 0.16) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Casino pages: keep nav glows active so they blend into the hero top */

/* Live Reporting — keep default cyan nav gradient (no red override) */

/* All pages — smooth slate grey fade */
.home .pp-hero,
.pp-archive-news,
.pp-page-promotions,
.pp-page-strategy,
.pp-page-news,
.pp-page-calendar,
.pp-partners-page,
.pp-play-now-page {
    background: #ffffff;
}

/* Live Reporting — slate fade */
.pp-lr-page {
    background: #ffffff;
}

/* Heading highlight: red instead of cyan */
.pp-lr-page .pp-hero-top-bar .pp-hero-heading {
    text-decoration-color: rgba(230, 57, 70, 0.12);
}

/* Tab pills */
.pp-lr-page .pp-lr-tab {
    border-color: var(--pp-red);
    color: var(--pp-red);
}
.pp-lr-page .pp-lr-tab:hover {
    background: rgba(230, 57, 70, 0.08);
    color: var(--pp-red);
}
.pp-lr-page .pp-lr-tab--active {
    background: var(--pp-red);
    color: #fff;
}
.pp-lr-page .pp-lr-tab--active:hover {
    background: #c62f3b;
    color: #fff;
}

/* Card hover accent */
.pp-lr-page .pp-lr-card:hover { border-color: rgba(230, 57, 70, 0.4); }
.pp-lr-page .pp-lr-card-title a:hover { color: var(--pp-red); }

/* "Go to Live Reporting" link */
.pp-lr-page .pp-lr-card-link { color: var(--pp-red); }
.pp-lr-page .pp-lr-card-link:hover { color: #c62f3b; }
.pp-lr-page .pp-lr-card-link--tba,
.pp-lr-page .pp-lr-card-link--tba:hover { color: var(--pp-text-muted); cursor: default; }

/* All cards: very faint grey orb at bottom-right corner */
.pp-lr-page .pp-lr-card {
    background: radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.04) 0%, transparent 55%), #ffffff;
}

/* Live cards: normal border (no thick left override), same grey orb */
.pp-lr-page .pp-lr-card--live {
    border-left: 1px solid var(--pp-border);
    background: radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.04) 0%, transparent 55%), #ffffff;
}

/* ═══════════════════════════════════════════
   Partners Page  (.pp-partners-page)
═══════════════════════════════════════════ */

/* ── CTA hero banner ── */
.pp-partner-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    margin-bottom: 40px;
}

.pp-partner-hero-text {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.pp-partner-hero-label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--pp-cyan-500);
    margin: 0;
}

.pp-partner-hero-title {
    font-family: var(--pp-font-display);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--pp-text-invert);
    margin: 0;
    line-height: 1.1;
}

.pp-partner-hero-body {
    color: rgba(255, 255, 255, 0.65);
    font-size: .9rem;
    line-height: 1.65;
    margin: 0;
    max-width: 38ch;
}

.pp-btn-partner-cta {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    background: var(--pp-bg-dark);
    border: 1.5px solid rgba(25, 200, 224, 0.25);
    color: var(--pp-cyan-500);
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: var(--pp-radius-pill);
    text-decoration: none;
    margin-top: 4px;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.pp-btn-partner-cta:hover {
    background: var(--pp-cyan-500);
    border-color: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(25, 200, 224, 0.38);
}

.pp-partner-hero-img {
    width: 280px;
    flex-shrink: 0;
}
.pp-partner-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── "Who We Work With" section heading ── */
.pp-partner-section-title {
    font-family: var(--pp-font-display);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0 0 24px;
}

/* ── Partner card grid ── */
.pp-partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Card — works as <a> or <div>. Frosted glass, tinted per-brand: each
   card sets --pp-partner-accent (pulled from its logo, see the meta
   box / page template) as a full-width wash across the top of the
   body, right under the logo, fading out — kept faint so it reads as
   a hint of brand color, not a colored spotlight. Falls back to the
   site cyan when a partner has no accent set. */
.pp-partner-card {
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 4px 16px rgba(14, 20, 25, .05);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
a.pp-partner-card:hover {
    border-color: color-mix(in srgb, var(--pp-partner-accent, var(--pp-cyan-500)) 45%, var(--pp-border));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--pp-partner-accent, var(--pp-cyan-500)) 14%, transparent);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
@media (prefers-reduced-motion: reduce) {
    a.pp-partner-card:hover { transform: none; }
}

/* Logos are 2:1 files with their background baked in; cover cropped wide
   marks to the card edge. Inset with contain instead, and fill the gap with
   the logo's own edge colour (inc/partner-logo.php) so it reads as one panel. */
.pp-partner-card-logo {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12%;
    background: var(--pp-partner-logo-bg, var(--pp-bg-alt));
}
.pp-partner-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .3s;
}
a.pp-partner-card:hover .pp-partner-card-logo img { transform: scale(1.03); }

.pp-partner-card-body {
    padding: 16px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid rgba(14, 20, 25, .07);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pp-partner-accent, var(--pp-cyan-500)) 10%, transparent) 0%, transparent 60%);
}

.pp-partner-card-name {
    font-family: var(--pp-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pp-text);
    margin: 0;
    line-height: 1.2;
}

.pp-partner-card-desc {
    color: var(--pp-text-muted);
    font-size: .82rem;
    line-height: 1.65;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .pp-partner-hero { grid-template-columns: 1fr; }
    .pp-partner-hero-img { width: 100%; height: 220px; }
}

@media (max-width: 700px) {
    .pp-partner-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .pp-partner-hero-text { padding: 24px; }
    .pp-partner-hero-title { font-size: 1.5rem; }
    .pp-partner-hero-img { height: 180px; }
}

/* ─────────────────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────────────────── */

/* Hero band */
.pp-contact-hero {
    padding-block: var(--pp-space-7) var(--pp-space-6);
}
.pp-contact-hero .pp-hero-top-bar { margin-bottom: 10px; }
.pp-contact-hero-sub {
    color: var(--pp-text-muted);
    font-size: .95rem;
    margin: 0 0 var(--pp-space-4);
}

/* Main section */
.pp-contact-section { padding-block: var(--pp-space-8); }

/* Two-column layout */
.pp-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 44px;
    align-items: start;
}
/* See .pp-archive-layout: keeps one wide child from widening the stacked column. */
.pp-contact-layout > * { min-width: 0; }

/* Shared column heading */
.pp-contact-col-heading {
    font-family: var(--pp-font-display);
    font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pp-text);
    margin: 0 0 var(--pp-space-5);
}
.pp-contact-col-heading--dark { color: var(--pp-text-invert); }

/* Notice banners */
.pp-contact-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: var(--pp-radius-md);
    font-size: .88rem;
    font-weight: 500;
    margin-bottom: var(--pp-space-5);
    line-height: 1.45;
}
.pp-contact-notice--success {
    background: rgba(6, 214, 160, 0.08);
    border: 1px solid var(--pp-green);
    color: var(--pp-green);
}
.pp-contact-notice--error {
    background: rgba(230, 57, 70, 0.08);
    border: 1px solid var(--pp-red);
    color: var(--pp-red);
}

/* Form layout */
.pp-contact-form { display: flex; flex-direction: column; gap: 20px; }

.pp-contact-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.pp-contact-field { display: flex; flex-direction: column; gap: 6px; }

.pp-contact-field label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--pp-text-soft);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.pp-contact-req { color: var(--pp-cyan-500); margin-left: 2px; }

.pp-contact-field input[type="text"],
.pp-contact-field input[type="email"],
.pp-contact-field textarea {
    width: 100%;
    padding: 11px 15px;
    background: var(--pp-bg);
    border: 1.5px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    font-family: var(--pp-font-body);
    font-size: .95rem;
    color: var(--pp-text);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    box-sizing: border-box;
    appearance: none;
}
.pp-contact-field input:focus,
.pp-contact-field textarea:focus {
    border-color: var(--pp-cyan-500);
    box-shadow: 0 0 0 3px rgba(25, 200, 224, 0.12);
}
.pp-contact-field input::placeholder,
.pp-contact-field textarea::placeholder { color: var(--pp-text-muted); }
.pp-contact-field textarea { resize: vertical; min-height: 155px; }

/* Submit button */
.pp-contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.7rem 1.75rem;
    /* Same primary pill as Play Now: dark with cyan text, filling cyan on hover */
    background: var(--pp-bg-dark);
    color: var(--pp-cyan-500);
    border: 1.5px solid rgba(25, 200, 224, 0.25);
    border-radius: var(--pp-radius-pill);
    font-family: var(--pp-font-body);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .14s cubic-bezier(.4, 0, .2, 1),
                border-color .14s cubic-bezier(.4, 0, .2, 1),
                color .14s cubic-bezier(.4, 0, .2, 1),
                box-shadow .22s ease;
}
.pp-contact-submit:hover,
.pp-contact-submit:focus-visible {
    background: var(--pp-cyan-500);
    border-color: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    box-shadow: 0 6px 20px rgba(25, 200, 224, 0.38);
}
.pp-contact-submit:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .pp-contact-submit { transition: none; }
}

/* Info card */
.pp-contact-info-card {
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
    padding: 28px 28px 32px;
}
.pp-contact-info-body {
    color: var(--pp-text-invert-muted);
    font-size: .86rem;
    line-height: 1.7;
    margin: 0 0 var(--pp-space-5);
}

/* Info list (email / location) */
.pp-contact-info-list {
    list-style: none;
    margin: 0 0 var(--pp-space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pp-contact-info-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pp-contact-info-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: rgba(25, 200, 224, 0.1);
    border-radius: var(--pp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-cyan-500);
}
.pp-contact-info-link {
    color: var(--pp-cyan-500);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 500;
    transition: color .15s;
}
.pp-contact-info-link:hover { color: var(--pp-cyan-400); }
.pp-contact-info-label { color: var(--pp-text-invert-muted); font-size: .86rem; }

/* Divider */
.pp-contact-divider {
    border: none;
    border-top: 1px solid var(--pp-border-dark);
    margin: var(--pp-space-5) 0;
}

/* Sub-headings inside info card */
.pp-contact-subheading {
    font-family: var(--pp-font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pp-text-invert-muted);
    margin: 0 0 var(--pp-space-4);
}

/* Social buttons */
.pp-contact-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-contact-social-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pp-bg-dark);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-md);
    color: var(--pp-text-invert-muted);
    font-size: 1rem;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    cursor: pointer;
}
.pp-contact-social-btn:hover {
    background: var(--pp-cyan-500);
    border-color: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
}

/* Topic tags — on the form column (light bg) */
.pp-contact-topics { margin-top: var(--pp-space-6); }
.pp-contact-topics-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--pp-text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 var(--pp-space-3);
}
.pp-contact-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.pp-contact-tag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: var(--pp-radius-sm);
    font-size: .73rem;
    font-weight: 500;
    letter-spacing: .02em;
}
.pp-contact-tag--light {
    background: var(--pp-bg-alt);
    border: 1px solid var(--pp-border);
    color: var(--pp-text-muted);
}

/* Channel list (messaging apps in info card) */
.pp-contact-channel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pp-contact-channel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-md);
    text-decoration: none;
    transition: background .15s, border-color .15s;
    cursor: pointer;
}
.pp-contact-channel:hover {
    background: rgba(25, 200, 224, .07);
    border-color: rgba(25, 200, 224, .25);
}
.pp-contact-channel-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--pp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    color: #fff;
}
.pp-contact-channel-icon--whatsapp { background: #25D366; }
.pp-contact-channel-icon--telegram { background: #229ED9; }
.pp-contact-channel-icon--discord  { background: #5865F2; }

.pp-contact-channel-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.pp-contact-channel-info strong {
    font-size: .82rem;
    font-weight: 600;
    color: var(--pp-text-invert);
    line-height: 1.25;
}
.pp-contact-channel-info span {
    font-size: .71rem;
    color: var(--pp-text-invert-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-contact-channel-arrow { color: var(--pp-text-invert-muted); flex-shrink: 0; }

/* Email list in info card */
.pp-contact-email-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pp-contact-email-list li { display: flex; flex-direction: column; gap: 3px; }
.pp-contact-email-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pp-text-invert-muted);
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .pp-contact-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}
@media (max-width: 560px) {
    .pp-contact-row-2col { grid-template-columns: minmax(0, 1fr); }
    .pp-contact-section { padding-block: var(--pp-space-6); }
    /* Under 16px, iOS Safari zooms the page when a field is focused. */
    .pp-contact-field input[type="text"],
    .pp-contact-field input[type="email"],
    .pp-contact-field textarea { font-size: 1rem; }
    .pp-contact-hero { padding-block: var(--pp-space-6) var(--pp-space-5); }
}

/* ═══════════════════════════════════════════════════════════════
   Live reporting hub — event posts (e.g. /live-reporting/<event>/)
   These are ordinary posts whose content is a Spectra tabs block with
   a Query Loop of `livestream` updates per tab. Everything is scoped to
   those blocks so normal article prose is untouched. Spectra prints
   per-block CSS with 4-class selectors (.uagb-block-<id>…), so the
   tab rules below anchor on .pp-single-content + 4 classes to win
   without !important.
   ═══════════════════════════════════════════════════════════════ */

/* WP swaps emoji for <img class="emoji">; the prose rule forcing
   width/height:auto on content images blew them up to the SVG's
   native 72px. Keep them text-sized everywhere in articles and reviews
   (only visible on Windows — macOS renders emoji natively, so WP never
   swaps them there). */
.pp-single-content img.emoji,
.pp-review-content img.emoji {
    display: inline !important;
    width: 1em !important;
    height: 1em !important;
    max-width: none !important;
    margin: 0 .1em !important;
    vertical-align: -.1em !important;
    border-radius: 0;
    box-shadow: none !important;
    background: none !important;
}

/* ── Tabs: dark segmented bar, same voice as the header nav ── */
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap,
.pp-single-content .wp-block-tabs {
    display: block;
    margin-top: 2em;
}
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > ul.uagb-tabs__panel,
.pp-single-content .wp-block-tabs > .wp-block-tab-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    /* Outer radius (12) = tab radius (8) + this padding, so the active
       tab's corners run parallel to the bar's */
    padding: 4px;
    list-style: none;
    /* Cyan light-leak (sanctioned gradient) so the bar isn't a flat slab */
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(25,200,224,.20) 0%, transparent 55%),
        radial-gradient(90% 140% at 100% 100%, rgba(25,200,224,.10) 0%, transparent 60%),
        var(--pp-bg-dark);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
}
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab {
    /* Grow to fill each row: with many tabs the bar wraps, and a ragged
       half-empty second row looked unfinished */
    flex: 1 1 auto;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--pp-radius-md);
    background: transparent;
    text-align: left;
}
/* The prose list rules would add a cyan dot + indent to every tab */
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab::before { content: none; }
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab + .uagb-tab { margin-top: 0; }

.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab > .uagb-tabs-list,
.pp-single-content .wp-block-tabs > .wp-block-tab-list > button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    box-sizing: border-box;
    padding: .625rem 1.25rem;
    border-radius: var(--pp-radius-md);
    font-family: var(--pp-font-display);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255,255,255,.78);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab > .uagb-tabs-list:hover,
.pp-single-content .wp-block-tabs > .wp-block-tab-list > button:hover {
    color: var(--pp-text-invert);
    background: rgba(255,255,255,.08);
}
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab.uagb-tabs__active {
    background: transparent;
}
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab.uagb-tabs__active > .uagb-tabs-list,
.pp-single-content .wp-block-tabs > .wp-block-tab-list > button[aria-selected="true"] {
    background: var(--pp-cyan-500);
    color: var(--pp-bg-dark);
    font-weight: 600;
}
.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab > .uagb-tabs-list:focus-visible,
.pp-single-content .wp-block-tabs > .wp-block-tab-list > button:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
.pp-single-content .uagb-tabs__panel .uagb-tabs-list img.emoji { font-size: .95em; }

/* "Recent" is the live feed — same pulsing red dot as the header's
   Live Reporting pill (red is reserved for exactly this). Class added in
   inc/live-reporting-event.php. */
.pp-single-content .uagb-tabs-list.pp-tab-live::before,
.pp-single-content .wp-block-tab-list > button.pp-tab-live::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--pp-red);
    animation: pp-lr-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .pp-single-content :is(.uagb-tabs-list, .wp-block-tab-list > button).pp-tab-live::before { animation: none; }
}

.pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__body-wrap,
.pp-single-content .wp-block-tabs > .wp-block-tab-panels {
    margin-top: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
}
.pp-single-content :is(.uagb-tabs__body-container, .wp-block-tab-panel) > :first-child { margin-top: 0; }
/* Mercury's `.no-dots ul li { padding:0; margin:0 0 -15px }` hits every list
   inside a Spectra tab (the panels carry .no-dots): the bullet sat on the
   first letter and each line rode up into the one above. Restore the prose
   list spacing — the update feed and tab bar lists are styled separately. */
.pp-single-content .no-dots :is(ul, ol):not(.wp-block-post-template):not(.uagb-tabs__panel):not(.pp-evsw-list) > li {
    margin: 0;
    padding-left: 1.5em;
}
.pp-single-content .no-dots :is(ul, ol):not(.wp-block-post-template):not(.uagb-tabs__panel):not(.pp-evsw-list) > li + li { margin-top: .55em; }

/* The prose rhythm (.pp-single-content > * + *) only reaches direct children,
   so headings and tables inside a tab panel sat flush against each other */
.pp-single-content :is(.uagb-tabs__body-container, .wp-block-tab-panel) > * + * { margin-top: 1.25em; }

/* ── Update feed: vertical timeline ── */
.pp-single-content .liveblog > .wp-block-post-template {
    position: relative;
    margin: 0;
    /* Rail and node both position off these, so they can't drift apart */
    --lr-gutter: 36px;
    --lr-node: 16px;
    --lr-rail: 2px;
    --lr-meta-h: 24px;
    --lr-gap: 40px;
    padding: 0 0 0 var(--lr-gutter);
    list-style: none;
}
/* Rail */
.pp-single-content .liveblog > .wp-block-post-template::before {
    content: "";
    position: absolute;
    left: calc((var(--lr-node) - var(--lr-rail)) / 2);
    top: 8px;
    bottom: 0;
    width: var(--lr-rail);
    /* Rail fades in from the latest update */
    background: linear-gradient(180deg, var(--pp-cyan-500) 0%, var(--pp-border) 220px);
}
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 40px;
}
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post + li.wp-block-post {
    margin-top: 0;
    padding-top: var(--lr-gap);
    border-top: 1px solid var(--pp-border);
}
/* Timeline node — replaces the prose bullet that showed on every title */
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post::before {
    content: "";
    position: absolute;
    left: calc(var(--lr-gutter) * -1);
    top: calc((var(--lr-meta-h) - var(--lr-node)) / 2);
    width: var(--lr-node);
    height: var(--lr-node);
    box-shadow: 0 0 0 5px rgba(25,200,224,.14);
    border-radius: 50%;
    background: var(--pp-bg);
    border: 2px solid var(--pp-cyan-500);
    box-sizing: border-box;
}
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post + li.wp-block-post::before { top: calc(var(--lr-gap) + (var(--lr-meta-h) - var(--lr-node)) / 2); }
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post:first-child::before {
    background: var(--pp-cyan-500);
}
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post > * + * { margin-top: 0; }

/* Timestamp + author read before the headline, like a wire feed */
.pp-single-content .liveblog .wp-block-post > .wp-block-group {
    order: -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    margin: 0 0 10px;
    line-height: var(--lr-meta-h, 24px);
}
.pp-single-content .liveblog .wp-block-post-date {
    font-style: normal !important;   /* overrides block inline style */
    font-weight: 700 !important;
    font-size: .875rem !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    /* cyan-600 on white is 2.8:1 — too faint for 12px text; the timeline
       node already carries the accent */
    color: var(--pp-text-soft);
}
.pp-single-content .liveblog .wp-block-post-author-name {
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: .875rem !important;
    color: var(--pp-text-muted);
}
.pp-single-content .liveblog .wp-block-post-author-name::before {
    content: "·";
    margin-right: 10px;
    color: var(--pp-text-muted);
}
.pp-single-content .liveblog .wp-block-post-author-name a {
    color: inherit;
    text-decoration: none;
}
.pp-single-content .liveblog .wp-block-post-author-name a:hover { color: var(--pp-text); }

.pp-single-content .liveblog h2.wp-block-post-title {
    margin: 0;
    padding: 0;
    /* !important: the block carries .has-medium-font-size, which core
       sets with !important */
    font-size: clamp(1.45rem, 2.3vw, 1.9rem) !important;
    line-height: 1.2;
}
.pp-single-content .liveblog h2.wp-block-post-title::after { content: none; }
.pp-single-content .liveblog h2.wp-block-post-title a {
    color: var(--pp-text);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color .15s;
}
/* Underline rather than a cyan text swap, which would drop below AA */
.pp-single-content .liveblog h2.wp-block-post-title a:hover { text-decoration-color: var(--pp-cyan-500); }

/* Update body: same prose, but headings scaled down a step so they
   don't outrank the update's own headline */
.pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post > .wp-block-post-content { margin-top: 20px; }
.pp-single-content .liveblog .wp-block-post-content > :first-child { margin-top: 0; }
/* The prose rhythm only targets direct children of .pp-single-content */
.pp-single-content .liveblog .wp-block-post-content > * + * { margin-top: 1.1em; }
.pp-single-content .liveblog .wp-block-post-content h2 {
    font-size: 1.15rem;
    margin-top: 1.6em;
    padding-bottom: .45em;
}
.pp-single-content .liveblog .wp-block-post-content h2::after { width: 40px; height: 2px; }
.pp-single-content .liveblog .wp-block-post-content p:empty { display: none; }
.pp-single-content .liveblog figcaption,
.pp-single-content .wp-block-image figcaption {
    margin-top: 8px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--pp-text-muted);
}

/* ── Query Loop pagination — matches .pp-pagination ── */
.pp-single-content .wp-block-query-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 32px;
    border-top: 1px solid var(--pp-border);
}
.pp-single-content .wp-block-query-pagination-numbers {
    display: flex;
    gap: 6px;
    margin: 0;
}
.pp-single-content .wp-block-query-pagination .page-numbers,
.pp-single-content .wp-block-query-pagination-next,
.pp-single-content .wp-block-query-pagination-previous {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    border-radius: var(--pp-radius-pill);
    border: 1.5px solid var(--pp-border);
    color: var(--pp-text);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.pp-single-content .wp-block-query-pagination-next,
.pp-single-content .wp-block-query-pagination-previous {
    padding: 0 1.25rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-color: var(--pp-cyan-500);
}
.pp-single-content .wp-block-query-pagination a:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
.pp-single-content .wp-block-query-pagination a:hover {
    border-color: var(--pp-cyan-500);
    color: var(--pp-cyan-600);
}
.pp-single-content .wp-block-query-pagination .page-numbers.current {
    background: var(--pp-bg-dark);
    border-color: var(--pp-bg-dark);
    color: var(--pp-text-invert);
}

/* ── Spectra gallery (Images tab) ── */
.pp-single-content .spectra-image-gallery__layout--grid { gap: 8px; }
.pp-single-content .spectra-image-gallery__media {
    border-radius: var(--pp-radius-md);
    overflow: hidden;
}
.pp-single-content .spectra-image-gallery__media img { border-radius: 0; }

/* ── Spectra content without the plugin (inc/legacy-blocks.php) ──
   Old posts keep Spectra's saved markup for tabs; these are the base rules
   Spectra used to load, so our tab design above sits on the same footing.
   Harmless while Spectra is still active (identical rules). */
/* No side padding (Spectra had 15px): the feed lines up with the tab bar's
   edges, and phones get that width back for content */
.pp-single-content .uagb-tabs__wrap .uagb-tabs__body-container {
    display: none;
    padding: 10px 0;
}
.pp-single-content .uagb-tabs__wrap .uagb-tabs__body-container.uagb-tabs-body__active { display: block; }

/* Spectra's per-device visibility ("Hide on desktop / tablet / mobile").
   It adds these classes to ordinary blocks (e.g. a desktop banner and a
   mobile banner side by side), but the CSS behind them came with the plugin,
   so without it every block showed on every device. Spectra's own
   breakpoints: mobile ≤767, tablet 768–1024, desktop ≥1025. */
@media (min-width: 1025px) {
    .uag-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .uag-hide-tab { display: none !important; }
}
@media (max-width: 767px) {
    .uag-hide-mob { display: none !important; }
}

/* Sections linked from a table of contents land below the sticky header */
:is(.pp-single-content, .pp-review-content) :is(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: 96px; }

/* ── Gallery (older posts' galleries, rendered by the theme) ── */
.pp-gallery {
    --pp-gallery-gap: 8px;
    --pp-gallery-cols: var(--pp-gallery-cols-d, 3);
    display: grid;
    grid-template-columns: repeat(var(--pp-gallery-cols, 3), minmax(0, 1fr));
    gap: var(--pp-gallery-gap);
    align-items: start;
}
.pp-gallery__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--pp-radius-md);
    background: var(--pp-bg-alt);
}
.pp-gallery__link {
    display: block;
    cursor: zoom-in;
}
.pp-gallery .pp-gallery__item img {
    display: block;
    width: 100% !important;
    border-radius: 0;
    transition: filter .2s;
}
.pp-gallery__link:hover img { filter: brightness(.88); }
.pp-gallery__link:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: -2px;
}
.pp-gallery__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 12px;
    background: rgba(14,20,25,.78);
    color: var(--pp-text-invert);
    font-size: .8rem;
    line-height: 1.4;
    pointer-events: none;
    transition: opacity .2s;
}
.pp-gallery--captions-hover .pp-gallery__caption { opacity: 0; }
/* "Always on" captions sit under the photo as a bar instead of covering it */
.pp-gallery--captions-always .pp-gallery__caption {
    position: static;
    background: var(--pp-bg-dark);
    text-align: center;
}
.pp-gallery--captions-hover .pp-gallery__item:is(:hover, :focus-within) .pp-gallery__caption { opacity: 1; }
@media (hover: none) {
    /* No hover on touch screens, so captions would never show */
    .pp-gallery--captions-hover .pp-gallery__caption { opacity: 1; }
}
.pp-gallery--masonry {
    display: block;
    columns: var(--pp-gallery-cols, 3);
    column-gap: var(--pp-gallery-gap);
}
.pp-gallery--masonry .pp-gallery__item {
    break-inside: avoid;
    margin-bottom: var(--pp-gallery-gap);
}
.pp-gallery--carousel {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--pp-gallery-cols, 3) - 1) * var(--pp-gallery-gap)) / var(--pp-gallery-cols, 3));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(25,200,224,.45) transparent;
}
.pp-gallery--carousel .pp-gallery__item { scroll-snap-align: start; }
@media (max-width: 1023px) {
    .pp-gallery { --pp-gallery-cols: var(--pp-gallery-cols-t, 3); }
}
@media (max-width: 767px) {
    .pp-gallery { --pp-gallery-cols: var(--pp-gallery-cols-m, 2); }
}

/* Core Gallery (new galleries, and Spectra galleries converted in the editor):
   the same grid as .pp-gallery above. Core lays galleries out with flex and
   fixed widths, so the grid takes over. Per-device column counts arrive as
   pp-cols-t-N / pp-cols-m-N classes (set by js/spectra-convert.js, or by hand
   under Advanced → Additional CSS class). */
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images {
    --pp-gallery-gap: 8px;
    --pp-gallery-cols: var(--pp-gallery-cols-d, 3);
    display: grid !important;
    grid-template-columns: repeat(var(--pp-gallery-cols), minmax(0, 1fr));
    gap: var(--pp-gallery-gap);
    align-items: start;
}
.wp-block-gallery.has-nested-images.columns-1 { --pp-gallery-cols-d: 1; }
.wp-block-gallery.has-nested-images.columns-2 { --pp-gallery-cols-d: 2; }
.wp-block-gallery.has-nested-images.columns-3 { --pp-gallery-cols-d: 3; }
.wp-block-gallery.has-nested-images.columns-4 { --pp-gallery-cols-d: 4; }
.wp-block-gallery.has-nested-images.columns-5 { --pp-gallery-cols-d: 5; }
.wp-block-gallery.has-nested-images.columns-6 { --pp-gallery-cols-d: 6; }
.wp-block-gallery.has-nested-images.columns-7 { --pp-gallery-cols-d: 7; }
.wp-block-gallery.has-nested-images.columns-8 { --pp-gallery-cols-d: 8; }
.wp-block-gallery.has-nested-images.pp-cols-t-1 { --pp-gallery-cols-t: 1; }
.wp-block-gallery.has-nested-images.pp-cols-t-2 { --pp-gallery-cols-t: 2; }
.wp-block-gallery.has-nested-images.pp-cols-t-3 { --pp-gallery-cols-t: 3; }
.wp-block-gallery.has-nested-images.pp-cols-t-4 { --pp-gallery-cols-t: 4; }
.wp-block-gallery.has-nested-images.pp-cols-t-5 { --pp-gallery-cols-t: 5; }
.wp-block-gallery.has-nested-images.pp-cols-t-6 { --pp-gallery-cols-t: 6; }
.wp-block-gallery.has-nested-images.pp-cols-t-7 { --pp-gallery-cols-t: 7; }
.wp-block-gallery.has-nested-images.pp-cols-t-8 { --pp-gallery-cols-t: 8; }
.wp-block-gallery.has-nested-images.pp-cols-m-1 { --pp-gallery-cols-m: 1; }
.wp-block-gallery.has-nested-images.pp-cols-m-2 { --pp-gallery-cols-m: 2; }
.wp-block-gallery.has-nested-images.pp-cols-m-3 { --pp-gallery-cols-m: 3; }
.wp-block-gallery.has-nested-images.pp-cols-m-4 { --pp-gallery-cols-m: 4; }
.wp-block-gallery.has-nested-images.pp-cols-m-5 { --pp-gallery-cols-m: 5; }
.wp-block-gallery.has-nested-images.pp-cols-m-6 { --pp-gallery-cols-m: 6; }
.wp-block-gallery.has-nested-images.pp-cols-m-7 { --pp-gallery-cols-m: 7; }
.wp-block-gallery.has-nested-images.pp-cols-m-8 { --pp-gallery-cols-m: 8; }
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    display: block;
    width: auto !important;
    margin: 0 !important;
    position: relative;
    overflow: hidden;
    border-radius: var(--pp-radius-md);
    background: var(--pp-bg-alt);
}
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images figure.wp-block-image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    border-radius: 0;
    cursor: zoom-in;
    transition: filter .2s;
}
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images figure.wp-block-image:hover img { filter: brightness(.88); }
/* "Crop images to fit" in the gallery settings: even 3:2 tiles */
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    margin: 0;
    padding: 8px 12px;
    background: rgba(14,20,25,.78);
    color: var(--pp-text-invert);
    font-size: .8rem;
    line-height: 1.4;
    text-align: left;
    transition: opacity .2s;
}
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images.pp-gallery--captions-hover figure.wp-block-image figcaption { opacity: 0; }
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images.pp-gallery--captions-hover figure.wp-block-image:is(:hover, :focus-within) figcaption { opacity: 1; }
@media (hover: none) {
    :is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images.pp-gallery--captions-hover figure.wp-block-image figcaption { opacity: 1; }
}
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images.pp-gallery--captions-always figure.wp-block-image figcaption {
    position: static;
    background: var(--pp-bg-dark);
    text-align: center;
}
/* Caption for the whole gallery (below the photos): in the grid it took a
   single photo-sized cell; it spans the full row instead */
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images > figcaption.blocks-gallery-caption {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--pp-text-muted);
    text-align: center;
}
/* "Hide caption" style on one image, "Hide captions" on a whole gallery */
.wp-block-image.is-style-no-caption figcaption,
.wp-block-gallery.is-style-no-captions figure.wp-block-image figcaption { display: none; }
/* A caption covering the photo opens the viewer too (js/lightbox.js) */
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
.pp-gallery__caption { cursor: zoom-in; }

:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images.pp-gallery--masonry {
    display: block !important;
    columns: var(--pp-gallery-cols);
    column-gap: var(--pp-gallery-gap);
}
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images.pp-gallery--masonry figure.wp-block-image:not(#individual-image) {
    break-inside: avoid;
    margin: 0 0 var(--pp-gallery-gap) !important;
}
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images.pp-gallery--carousel {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--pp-gallery-cols) - 1) * var(--pp-gallery-gap)) / var(--pp-gallery-cols));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(25,200,224,.45) transparent;
}
:is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images.pp-gallery--carousel figure.wp-block-image { scroll-snap-align: start; }
@media (max-width: 1023px) {
    :is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images { --pp-gallery-cols: var(--pp-gallery-cols-t, var(--pp-gallery-cols-d, 3)); }
}
@media (max-width: 767px) {
    :is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images { --pp-gallery-cols: var(--pp-gallery-cols-m, 2); }
    /* Phone tiles are ~110px wide: a wrapped caption covered the whole
       photo. One clipped line here; the lightbox shows it in full. */
    :is(.pp-single-content, .pp-review-content) .wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
    .pp-gallery__caption {
        padding: 4px 8px;
        font-size: .6875rem;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ── Lightbox (js/lightbox.js) ── */
html.pp-lightbox-open { overflow: hidden; }
.pp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: rgba(14,20,25,.96);
}
.pp-lightbox[hidden] { display: none; }
.pp-lightbox__stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 80px 8px;
}
.pp-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--pp-radius-md);
}
.pp-lightbox__bar {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    min-height: 56px;
    padding: 12px 80px 20px;
    color: var(--pp-text-invert);
    text-align: center;
}
.pp-lightbox__caption {
    margin: 0;
    font-size: .9rem;
    line-height: 1.5;
}
.pp-lightbox__count {
    flex-shrink: 0;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,.6);
}
.pp-lightbox__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: var(--pp-text-invert);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.pp-lightbox__btn:hover {
    background: rgba(255,255,255,.14);
    border-color: var(--pp-cyan-500);
}
.pp-lightbox__btn:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
.pp-lightbox__btn[hidden] { display: none; }
.pp-lightbox__close { top: 16px; right: 16px; }
.pp-lightbox__prev,
.pp-lightbox__next { top: 50%; transform: translateY(-50%); }
.pp-lightbox__prev { left: 16px; }
.pp-lightbox__next { right: 16px; }
@media (max-width: 767px) {
    .pp-lightbox__stage { padding: 64px 12px 8px; }
    .pp-lightbox__bar { padding: 12px 16px 76px; }
    /* Thumbs reach the bottom of a phone, not its middle edges */
    .pp-lightbox__prev,
    .pp-lightbox__next { top: auto; bottom: 16px; transform: none; }
    .pp-lightbox__prev { left: calc(50% - 52px); }
    .pp-lightbox__next { right: calc(50% - 52px); }
}

/* ── Core Tabs (new content). The rules above give it the live reporting
   bar; these undo core's own button defaults underneath ── */
.pp-single-content .wp-block-tabs > .wp-block-tab-list > button {
    /* Core pins flex and width with !important; each tab must grow like the old <li> */
    flex-grow: 1 !important;
    flex-basis: auto !important;
    width: auto;
    margin: 0;
    border: 0;
    cursor: pointer;
}
.pp-single-content .wp-block-tabs > .wp-block-tab-list > button:not([aria-selected="true"]):not(:hover) { background: transparent; }
/* Core underlines the active tab with ::before; that slot is the LIVE dot here */
.pp-single-content .wp-block-tabs > .wp-block-tab-list > button:not(.pp-tab-live)::before { content: none; }
.pp-single-content .wp-block-tabs > .wp-block-tab-list > button.pp-tab-live::before {
    position: static;
    border: 0;
}
/* Same as the Spectra panels above: flush with the tab bar */
.pp-single-content .wp-block-tab-panel { padding: 10px 0; }

/* ── FAQ (older posts' FAQs, and new core Accordion blocks) ── */
.pp-faq,
:is(.pp-single-content, .pp-review-content) .wp-block-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pp-faq__item,
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-item {
    margin: 0;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    background: var(--pp-bg);
    transition: border-color .15s;
}
.pp-faq__item[open],
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-item.is-open { border-color: rgba(25,200,224,.45); }
.pp-faq__question {
    position: relative;
    display: block;
    padding: 16px 52px 16px 20px;
    list-style: none;
    font-weight: 600;
    line-height: 1.5;
    color: var(--pp-text);
    cursor: pointer;
    border-radius: var(--pp-radius-md);
}
.pp-faq__question::-webkit-details-marker { display: none; }
.pp-faq__question:hover { background: var(--pp-bg-alt); }
.pp-faq__question:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
/* Plus that turns into a minus */
.pp-faq__question::before,
.pp-faq__question::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: var(--pp-cyan-600);
    transition: transform .2s;
}
.pp-faq__question::after { transform: rotate(90deg); }
.pp-faq__item[open] > .pp-faq__question::after { transform: rotate(0deg); }
.pp-faq__answer {
    padding: 0 20px 16px;
    color: var(--pp-text-soft);
}
.pp-faq__answer > :first-child { margin-top: 0; }
.pp-faq__answer > :last-child { margin-bottom: 0; }

/* Core Accordion: same card as the FAQ above */
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-heading {
    margin: 0;
    padding: 0;
    /* It's an <h3>: drop the article heading voice so questions read like the FAQ */
    font-family: var(--pp-font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.5;
}
/* The article h3 accent bar doesn't belong inside a question row */
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-heading::before { content: none; }
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-heading__toggle {
    padding: 16px 20px;
    font-weight: 600;
    color: var(--pp-text);
    border-radius: var(--pp-radius-md);
}
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-heading__toggle:hover { background: var(--pp-bg-alt); }
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { text-decoration: none; }
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-heading__toggle:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
/* Core's "+" glyph is swapped for the FAQ's drawn plus/minus */
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-heading__toggle-icon {
    position: relative;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-left: 18px;
    align-self: center;
    font-size: 0;
    line-height: 0;
}
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-heading__toggle-icon::before,
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-heading__toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: var(--pp-cyan-600);
    transition: transform .2s;
}
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-heading__toggle-icon::after { transform: rotate(90deg); }
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::after { transform: rotate(0deg); }
/* Core turns the whole icon 45° when open; ours animates the bar instead */
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon { transform: none; }
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-panel {
    padding: 0 20px 16px;
    color: var(--pp-text-soft);
}
:is(.pp-single-content, .pp-review-content) .wp-block-accordion-panel > :first-child { margin-top: 0; }

/* ── Table of contents (pokerpro/table-of-contents + older Spectra TOCs) ── */
.pp-toc {
    padding: 20px 24px;
    background: var(--pp-bg-alt);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
}
.pp-toc .pp-toc__title {
    margin: 0 0 10px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-text-soft);
}
.pp-toc .pp-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.pp-toc .pp-toc__list > li {
    padding-left: 0;
    line-height: 1.5;
}
.pp-toc .pp-toc__list > li::before { content: none; }
.pp-toc .pp-toc__list > li + li { margin-top: .45em; }
.pp-toc .pp-toc__list .pp-toc__list {
    margin: .45em 0 0 2px;
    padding-left: 14px;
    border-left: 2px solid var(--pp-border);
    font-size: .95em;
}
.pp-toc a {
    color: var(--pp-text-soft);
    /* Same underline as article links, so entries read as clickable */
    text-decoration: underline;
    text-decoration-color: rgba(25,200,224,.35);
    text-underline-offset: 3px;
    transition: color .15s, text-decoration-color .15s;
}
.pp-toc a:hover {
    color: var(--pp-text);
    text-decoration-color: var(--pp-cyan-500);
}

/* ── Buttons in articles: the site's READ REVIEW button (.pp-btn-room-review,
   the outlined one under PLAY NOW in the poker room lists). Older Spectra
   buttons are rendered with that class; core Button blocks in content get
   the same look. Repeated here because the article's link rules (cyan,
   underlined) outrank the plain class, and the site-wide core button rule
   forces cyan text with !important. ── */
.pp-btn-row,
:is(.pp-single-content, .pp-review-content) .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
:is(.pp-single-content, .pp-review-content) :is(a.pp-btn-room-review, .wp-block-button .wp-block-button__link) {
    display: inline-block;
    padding: 10px 24px;
    border: 2px solid var(--pp-border);
    border-radius: var(--pp-radius-pill);
    background: transparent !important;
    color: var(--pp-text) !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .14s cubic-bezier(.4, 0, .2, 1), border-color .14s cubic-bezier(.4, 0, .2, 1), box-shadow .22s ease;
}
:is(.pp-single-content, .pp-review-content) :is(a.pp-btn-room-review, .wp-block-button .wp-block-button__link):hover {
    background: rgba(14, 20, 25, 0.04) !important;
    border-color: var(--pp-text);
    color: var(--pp-text) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}
:is(.pp-single-content, .pp-review-content) :is(a.pp-btn-room-review, .wp-block-button .wp-block-button__link):focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}

/* ── Quotes from Spectra's quote block (uses the prose blockquote above) ── */
.pp-quote { margin: 1.8em 0; }
.pp-quote > blockquote { margin: 0; }
.pp-quote__cite {
    margin-top: 10px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pp-text-muted);
}
.pp-quote__cite::before { content: "— "; }
.pp-quote__cite:has(img)::before { content: none; }
.pp-quote__cite {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pp-quote .pp-quote__cite img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    object-fit: cover;
}

/* Chip-count and schedule tables are wider than a phone. The inner table
   is overflow:hidden (for its radius), so the block wrapper has to be the
   thing that scrolls — same approach as .pp-review-content. */
.pp-single-content .wp-block-table {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(25,200,224,.45) transparent;
}
.pp-single-content .wp-block-table table { margin: 0 !important; }

/* ── Swipeable tables (js/table-scroll.js) ──
   Results and chip-count tables are wider than a phone. Cells used to be
   squeezed to fit, which broke words and prizes mid-way ("€1,2 / 50").
   Now words stay whole and the table scrolls sideways instead. The script
   wraps every table in .pp-table-scroll and, while columns are hidden,
   shows a "Swipe" hint and fades the cut-off edge. */
:is(.pp-single-content, .pp-review-content) .pp-table-scroll {
    position: relative;
    margin: 1.8em 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(25,200,224,.55) transparent;
    border-radius: var(--pp-radius-lg);
}
:is(.pp-single-content, .pp-review-content) .pp-table-scroll table { margin: 0 !important; }
.pp-table-scroll.is-scrollable { padding-bottom: 8px; }
.pp-table-scroll::-webkit-scrollbar { height: 4px; }
.pp-table-scroll::-webkit-scrollbar-track { background: var(--pp-border); border-radius: var(--pp-radius-pill); }
.pp-table-scroll::-webkit-scrollbar-thumb { background: var(--pp-cyan-500); border-radius: var(--pp-radius-pill); }
.pp-table-scroll:focus-visible { outline: 2px solid var(--pp-cyan-500); outline-offset: 2px; }
/* The fade is a mask, not a painted gradient: it only says "more this way" */
.pp-table-scroll.can-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.pp-table-scroll.can-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.pp-table-scroll.can-left.can-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }

.pp-table-hint { display: none; justify-content: flex-end; margin: 1.8em 0 8px; }
.pp-table-hint.is-on { display: flex; }
:is(.pp-single-content, .pp-review-content) .pp-table-hint.is-on + .pp-table-scroll { margin-top: 0; }
.pp-table-hint span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-pill);
    background: var(--pp-bg);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pp-text-muted);
}
.pp-table-hint svg { color: var(--pp-cyan-600); animation: pp-table-nudge 1.6s ease-in-out 3; }
@keyframes pp-table-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .pp-table-hint svg { animation: none; } }

/* Wide tables (6+ columns, e.g. festival schedules) ran 10px past the
   article column on desktop and turned on the swipe hint for nothing.
   Slimmer side padding, headers that may wrap ("Starting / chips") and
   short values kept whole let them fit; still-wider tables scroll. */
:is(.pp-single-content, .pp-review-content) table:has(tr > :nth-child(6)) :is(th, td) {
    padding-left: 12px;
    padding-right: 12px;
}
@media (min-width: 768px) {
    :is(.pp-single-content, .pp-review-content) table:has(tr > :nth-child(6)) thead th { white-space: normal; }
    :is(.pp-single-content, .pp-review-content) td.is-short { white-space: nowrap; }
}

@media (max-width: 767px) {
    /* Columns size to their content and never split a word or a number.
       Short cells (names, countries, prizes) keep one line and the table
       scrolls; only sentence-length cells (.is-long) wrap, at a readable
       width. */
    :is(.pp-single-content, .pp-review-content) .pp-table-scroll table {
        width: auto !important;
        min-width: 100%;
        table-layout: auto !important;
    }
    :is(.pp-single-content, .pp-review-content) .pp-table-scroll :is(th, td) {
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }
    :is(.pp-single-content, .pp-review-content) .pp-table-scroll td { white-space: nowrap; }
    :is(.pp-single-content, .pp-review-content) .pp-table-scroll td.is-long { white-space: normal; min-width: 14rem; }
}

/* ── Event switcher (Menu In Post dropdown on multi-event series) ──
   Editors write it as <p><span style="…">Select Event:</span> [shortcode]</p>,
   so the paragraph becomes the bar and the inline-styled span its label. */
.pp-single-content p:has(.mip-drop-nav) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 2em;
    padding: 14px 16px 14px 20px;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(25,200,224,.20) 0%, transparent 55%),
        var(--pp-bg-dark);
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
}
.pp-single-content p:has(.mip-drop-nav) > span {
    font-family: var(--pp-font-display);
    font-size: 1rem !important;      /* overrides inline 20px */
    font-weight: 500 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255,255,255,.78);
}
.pp-single-content select.mip-drop-nav {
    flex: 1 1 280px;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0 48px 0 16px;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--pp-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--pp-text);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%230E1419' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center,
        var(--pp-bg);
    border: 1.5px solid transparent;
    border-radius: var(--pp-radius-md);
    box-shadow: none;
    cursor: pointer;
    text-overflow: ellipsis;
    transition: border-color .15s;
}
.pp-single-content select.mip-drop-nav:hover { border-color: var(--pp-cyan-500); }
.pp-single-content select.mip-drop-nav:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}

/* Custom switcher built by js/event-switcher.js (the native select above
   is the no-JS fallback and is hidden once this exists) */
.pp-evsw {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
}
/* Something upstream gives these a display value, which beats the UA's
   [hidden] rule — without this the panel never closes */
.pp-evsw [hidden] { display: none !important; }
.pp-evsw-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 18px 0 16px;
    font-family: var(--pp-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: var(--pp-text);
    background: var(--pp-bg);
    border: 1.5px solid transparent;
    border-radius: var(--pp-radius-md);
    cursor: pointer;
    transition: border-color .15s;
}
.pp-evsw-btn:hover,
.pp-evsw.is-open .pp-evsw-btn { border-color: var(--pp-cyan-500); }
.pp-evsw-btn:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
.pp-evsw-btn-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.pp-evsw-btn .pp-evsw-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pp-evsw-name--placeholder { color: var(--pp-text-muted); font-weight: 500; }
.pp-evsw-chevron {
    flex-shrink: 0;
    transition: transform .2s;
}
.pp-evsw.is-open .pp-evsw-chevron { transform: rotate(180deg); }

/* Event number reads as a fixed-width column so names line up */
.pp-evsw-num {
    flex-shrink: 0;
    min-width: 2.6em;
    font-family: var(--pp-font-display);
    font-weight: 500;
    font-size: .95em;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
    color: var(--pp-text-muted);
}

.pp-evsw-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 6px;
    background: var(--pp-bg);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    /* Floats over article content, so it needs some lift — kept soft */
    box-shadow: 0 12px 32px rgba(14,20,25,.12);
    animation: pp-evsw-in .14s ease-out;
}
@keyframes pp-evsw-in {
    from { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .pp-evsw-panel { animation: none; }
    .pp-evsw-chevron { transition: none; }
}
.pp-evsw-filter {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 6px;
    padding: 10px 14px;
    font-family: var(--pp-font-body);
    font-size: .9375rem;
    color: var(--pp-text);
    background: var(--pp-bg-alt);
    border: 1.5px solid transparent;
    border-radius: var(--pp-radius-md);
    outline: none;
}
.pp-evsw-filter:focus { border-color: var(--pp-cyan-500); background: var(--pp-bg); }

.pp-single-content .pp-evsw-list {
    max-height: min(380px, 55vh);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-width: thin;
}
.pp-single-content .pp-evsw-list > li {
    margin: 0;
    padding: 0;
}
.pp-single-content .pp-evsw-list > li::before { content: none; }
.pp-single-content .pp-evsw-list > li + li { margin-top: 2px; }
.pp-single-content a.pp-evsw-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 11px 12px;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--pp-text);
    text-decoration: none;
    border-radius: var(--pp-radius-md);
    transition: background .12s;
}
.pp-single-content a.pp-evsw-item:hover,
.pp-single-content a.pp-evsw-item:focus-visible {
    background: var(--pp-bg-alt);
    outline: none;
}
.pp-single-content a.pp-evsw-item:focus-visible { box-shadow: inset 0 0 0 2px var(--pp-cyan-500); }
.pp-single-content a.pp-evsw-item[aria-current="page"] {
    font-weight: 700;
    background: rgba(25,200,224,.10);
}
.pp-evsw-item .pp-evsw-name { flex: 1; min-width: 0; }
.pp-evsw-check {
    flex-shrink: 0;
    align-self: center;
    color: var(--pp-cyan-600);
}
.pp-single-content .pp-evsw-empty {
    margin: 0;
    padding: 14px 12px;
    font-size: .875rem;
    color: var(--pp-text-muted);
}

/* ── Mobile: tabs wrap into full rows (client didn't want to swipe to find
   tabs); smaller type so most rows hold 2–3 tabs ── */
@media (max-width: 767px) {
    .pp-single-content .wp-block-uagb-tabs.uagb-tabs__wrap > .uagb-tabs__panel > .uagb-tab > .uagb-tabs-list,
    .pp-single-content .wp-block-tabs > .wp-block-tab-list > button {
        min-height: 44px;
        padding: .5rem .75rem;
        font-size: .8125rem;
        letter-spacing: .04em;
        white-space: normal;
        text-align: center;
    }
    /* 44px touch targets */
    .pp-single-content .wp-block-query-pagination .page-numbers,
    .pp-single-content .wp-block-query-pagination-next,
    .pp-single-content .wp-block-query-pagination-previous { min-width: 44px; height: 44px; }
    .pp-single-content table thead th,
    .pp-single-content table td { padding: 10px 12px; }
    /* Denser feed on phones: client found too little fitted on one screen.
       Body drops from 17px/1.85 to 15px/1.6, headlines and gaps tighten. */
    .pp-single-content .liveblog > .wp-block-post-template { --lr-gutter: 24px; --lr-node: 14px; --lr-gap: 28px; --lr-meta-h: 20px; }
    .pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post { padding-bottom: 28px; }
    .pp-single-content .liveblog .wp-block-post > .wp-block-group { margin-bottom: 6px; }
    .pp-single-content .liveblog .wp-block-post-date,
    .pp-single-content .liveblog .wp-block-post-author-name { font-size: .75rem !important; }
    .pp-single-content .liveblog h2.wp-block-post-title { font-size: 1.2rem !important; line-height: 1.25; }
    .pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post > .wp-block-post-content { margin-top: 12px; }
    .pp-single-content .liveblog .wp-block-post-content,
    .pp-single-content .liveblog .wp-block-post-content :is(p, li) { font-size: .9375rem; line-height: 1.6; }
    .pp-single-content .liveblog .wp-block-post-content > * + * { margin-top: .8em; }
    .pp-single-content .liveblog .wp-block-post-content h2 { font-size: 1rem; margin-top: 1.3em; }
    .pp-single-content .liveblog .wp-block-post-content table { font-size: .8125rem; margin: 1em 0; }
    .pp-single-content .liveblog .wp-block-post-content table thead th,
    .pp-single-content .liveblog .wp-block-post-content table td { padding: 8px 10px; }
    .pp-single-content .liveblog figcaption { font-size: .75rem; margin-top: 6px; }
    .pp-single-content .liveblog > .wp-block-post-template > li.wp-block-post::before { box-shadow: 0 0 0 4px rgba(25,200,224,.14); }
}

/* ═══════════════════════════════════════════════════════════════
   Newsletter form (Mailster block form, type "popup" + in-page "content")
   Mailster prints the popup inside the article body, so the prose
   rules leaked in: the heading's .alignfull got the theme's
   full-bleed negative margins (cutting off its first letter on
   phones) and the h2 accent underline. Everything here is scoped to
   the popup wrapper; !important is only used where Mailster sets the
   value inline or with its own !important.
   ═══════════════════════════════════════════════════════════════ */
.wp-block-mailster-form-outside-wrapper.mailster-block-form-type-popup {
    padding: 16px;
    box-sizing: border-box;
    background-color: rgba(14,20,25,.72);
}
.mailster-block-form-type-popup form.mailster-block-form.wp-block-mailster-form-wrapper {
    /* The editor's inline rule sets flex-basis:40%, which beats width */
    flex: 0 1 460px !important;
    width: min(460px, 100%) !important;
    max-width: none;
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    padding: 36px 32px 28px !important;
    color: var(--pp-text-invert);
    /* Cyan light-leak over the dark surface — replaces the editor's
       blue linear gradient + casino-table photo */
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(25,200,224,.22) 0%, transparent 60%),
        radial-gradient(90% 60% at 100% 100%, rgba(25,200,224,.10) 0%, transparent 65%),
        var(--pp-bg-dark) !important;
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
/* Same card placed in page content (e.g. the QR-flyer subscribe page):
   no overlay, sits in the article column, border instead of the popup's
   lift shadow. Everything inside the card is shared via :is() below. */
.mailster-block-form-type-content form.mailster-block-form.wp-block-mailster-form-wrapper {
    /* Sized by the card, not the viewport: the article column is narrow
       next to the sidebar even on big screens */
    container-type: inline-size;
    width: 100%;
    margin: 0 0 var(--pp-space-7);
    box-sizing: border-box;
    padding: 44px 40px 36px !important;
    color: var(--pp-text-invert);
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(25,200,224,.22) 0%, transparent 60%),
        radial-gradient(90% 60% at 100% 100%, rgba(25,200,224,.10) 0%, transparent 65%),
        var(--pp-bg-dark) !important;
    border: 1px solid var(--pp-border-dark);
    border-radius: var(--pp-radius-lg);
    box-shadow: none;
}
.mailster-block-form-type-content .mailster-block-form .mailster-block-form-close { display: none !important; }
/* form. outranks the shared h2 rule further down */
.mailster-block-form-type-content form.mailster-block-form h2 { font-size: clamp(1.625rem, 4vw, 2.125rem); }
/* Wide card: field and consent stay full width, the button sizes to its
   label. A full-width pill across ~1000px reads as a banner, not a button. */
@container (min-width: 560px) {
    .mailster-block-form-type-content .mailster-block-form .mailster-wrapper.wp-block-mailster-field-submit {
        flex: 0 0 auto;
        width: auto !important;   /* editor sets width:33% inline */
    }
    .mailster-block-form-type-content .mailster-block-form .mailster-wrapper input.submit-button {
        width: auto !important;   /* Mailster's input[type=submit] width:100% is more specific */
        min-width: 220px;
        padding: 0 2rem;
    }
}
@media (max-width: 480px) {
    .mailster-block-form-type-content form.mailster-block-form.wp-block-mailster-form-wrapper {
        padding: 32px 20px 22px !important;
    }
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .wp-block-mailster-form-wrapper::before { display: none !important; }

:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form-inner {
    overflow: visible !important;
    max-height: none !important;
}
/* Eyebrow above the heading */
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form-inner::before {
    content: "Newsletter";
    width: 100%;
    margin-bottom: 10px;
    font-family: var(--pp-font-body);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-cyan-500);
}
html[lang^="sv"] :is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form-inner::before { content: "Nyhetsbrev"; }
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form h2 {
    position: static;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-family: var(--pp-font-display);
    font-size: clamp(1.5rem, 5vw, 1.875rem);
    font-weight: 700 !important;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-align: left;
    color: var(--pp-text-invert) !important;
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form h2::after { content: none !important; }
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form p {
    margin: 0 0 22px !important;
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255,255,255,.72) !important;
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) img.emoji {
    display: inline !important;
    width: 1em !important;
    height: 1em !important;
    margin: 0 .1em !important;
    vertical-align: -.1em !important;
}

/* Fields */
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form .mailster-block-form-inner .mailster-wrapper {
    margin: 0 0 14px !important;
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form .mailster-wrapper input.input {
    height: 50px;
    padding: 0 16px;
    font-family: var(--pp-font-body);
    font-size: 1rem;              /* 16px stops iOS zooming on focus */
    color: var(--pp-text-invert);
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--pp-radius-md);
    outline: none;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form .mailster-wrapper input.input:focus {
    border-color: var(--pp-cyan-500);
    background: rgba(255,255,255,.10) !important;
    box-shadow: 0 0 0 3px rgba(25,200,224,.25);
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form .mailster-wrapper-inline label.mailster-label {
    font-size: .9375rem;
    color: rgba(255,255,255,.55) !important;
}
/* Asterisk was red; red is reserved for the LIVE dot */
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form .mailster-wrapper-required.mailster-wrapper-asterisk label.mailster-label::after {
    color: var(--pp-cyan-500);
}

/* Consent checkbox */
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .wp-block-mailster-gdpr .mailster-group { align-items: flex-start; }
/* Custom box: the native one is a bright white square on the dark card */
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .wp-block-mailster-gdpr input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    background: rgba(255,255,255,.06) center / 14px 14px no-repeat;
    border: 1.5px solid rgba(255,255,255,.32);
    border-radius: var(--pp-radius-sm);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .wp-block-mailster-gdpr input[type="checkbox"]:hover {
    border-color: var(--pp-cyan-500);
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .wp-block-mailster-gdpr input[type="checkbox"]:checked {
    background-color: var(--pp-cyan-500);
    /* Tick in --pp-bg-dark */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E1419' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    border-color: var(--pp-cyan-500);
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .wp-block-mailster-gdpr input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(25,200,224,.35);
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-wrapper.is-error input[type="checkbox"] {
    border-color: var(--pp-text-invert);
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .wp-block-mailster-gdpr label.mailster-label {
    padding: 0 0 0 10px;
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(255,255,255,.72) !important;
    /* The whole label toggles the 18px box, so make that obvious */
    cursor: pointer;
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .wp-block-mailster-gdpr a {
    color: var(--pp-cyan-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Submit — solid cyan pill, full width */
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .wp-block-mailster-field-submit {
    width: 100% !important;
    margin: 8px 0 0 !important;
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form .mailster-wrapper input.submit-button {
    height: 50px;
    padding: 0 1.25rem;
    /* !important: Mailster resets the button with font:inherit at higher specificity */
    font-family: var(--pp-font-body) !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pp-bg-dark) !important;
    background: var(--pp-cyan-500) !important;
    border: 0 !important;
    border-radius: var(--pp-radius-pill) !important;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s;
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form .mailster-wrapper input.submit-button:hover { background: var(--pp-cyan-600) !important; }
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form .mailster-wrapper input.submit-button:focus-visible {
    outline: 2px solid var(--pp-text-invert);
    outline-offset: 2px;
}
/* Our solid background wipes Mailster's striped "sending" animation, so
   without this the button gives no feedback and gets tapped twice */
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form.loading .mailster-wrapper input.submit-button {
    opacity: .6;
    cursor: progress;
    pointer-events: none;
}

/* Close — inside the card instead of hanging off its corner */
.mailster-block-form-type-popup .mailster-block-form .mailster-block-form-close {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(255,255,255,.08) !important;
    opacity: 1;
    transform: none !important;
    transition: background-color .15s;
}
.mailster-block-form-type-popup .mailster-block-form .mailster-block-form-close:hover { background: rgba(255,255,255,.16) !important; }
.mailster-block-form-type-popup .mailster-block-form .mailster-block-form-close:focus-visible {
    outline: 2px solid var(--pp-cyan-500);
    outline-offset: 2px;
}
.mailster-block-form-type-popup .mailster-block-form .mailster-block-form-close svg path {
    fill: var(--pp-text-invert) !important;
    stroke: none !important;
}

/* Success / error messages — on-brand instead of Mailster's green/red */
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form-info > div {
    padding: 10px 14px !important;
    font-size: .875rem;
    border-radius: var(--pp-radius-md);
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form-info-success {
    color: var(--pp-bg-dark) !important;
    background: var(--pp-cyan-500) !important;
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form-info-error {
    color: var(--pp-text-invert) !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.28);
}
:is(.mailster-block-form-type-popup, .mailster-block-form-type-content) .mailster-block-form .mailster-wrapper.is-error input {
    border-color: var(--pp-text-invert);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}

@media (max-width: 480px) {
    .mailster-block-form-type-popup form.mailster-block-form.wp-block-mailster-form-wrapper {
        padding: 32px 20px 22px !important;
    }
}

/* ─────────────────────────────────────────────────────────
   404 PAGE  (404.php)
───────────────────────────────────────────────────────── */
.pp-404-hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--pp-space-8) var(--pp-space-7);
    border-bottom: 1px solid var(--pp-border);
    /* The one gradient the style guide allows: a faint cyan light-leak */
    background:
        radial-gradient(60% 90% at 88% 30%, rgba(25, 200, 224, 0.10), transparent 70%),
        var(--pp-bg);
}
.pp-404-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--pp-space-7);
    align-items: center;
}
.pp-404-hero-text { min-width: 0; max-width: 640px; }
.pp-404-eyebrow {
    display: inline-block;
    margin: 0 0 var(--pp-space-4);
    padding: 4px 10px;
    border-radius: var(--pp-radius-sm);
    background: rgba(25, 200, 224, 0.12);
    color: var(--pp-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pp-404-hero .pp-hero-top-bar { margin-bottom: var(--pp-space-4); }
.pp-404-hero .pp-hero-heading { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); }
.pp-404-lead {
    margin: 0 0 var(--pp-space-5);
    max-width: 52ch;
    color: var(--pp-text-soft);
    font-size: 1.05rem;
    line-height: 1.6;
}
.pp-404-search .pp-searchform { max-width: 520px; }
.pp-404-search .pp-searchform-input { padding-block: 8px; font-size: 1rem; }
.pp-404-search .pp-searchform-submit { width: 40px; height: 40px; }

.pp-404-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--pp-space-5);
}
/* Outline cyan pill: the low-emphasis CTA for light surfaces */
.pp-404-section {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.625rem 1.25rem;
    border: 1.5px solid var(--pp-cyan-500);
    border-radius: var(--pp-radius-pill);
    color: var(--pp-text);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .18s, color .18s;
}
.pp-404-section:hover { background: var(--pp-cyan-500); color: var(--pp-bg-dark); }
.pp-404-section:focus-visible { outline: 2px solid var(--pp-cyan-600); outline-offset: 2px; }

.pp-404-numeral {
    font-family: var(--pp-font-display);
    font-size: clamp(8rem, 4rem + 10vw, 15rem);
    font-weight: 700;
    line-height: .85;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 2px var(--pp-cyan-500);
    opacity: .55;
    user-select: none;
}

.pp-404-latest .pp-hero-top-bar { margin-bottom: var(--pp-space-6); }

@media (max-width: 960px) {
    .pp-404-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .pp-404-numeral { display: none; }
}
@media (max-width: 600px) {
    .pp-404-hero { padding-block: var(--pp-space-7) var(--pp-space-6); }
}
@media (prefers-reduced-motion: reduce) {
    .pp-404-section { transition: none; }
}

/* Mercury styles input[type=search] with its own box and background, which
   showed as a grey block inside the search pill (search page and 404) */
.pp-searchform .pp-searchform-input,
.pp-searchform .pp-searchform-input:focus {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-left: 0;
}

/* Sponsored-player badge, [sp]room[/sp] (inc/sponsor-badge.php). Sits inline
   after a player name like the [cc] flag; the label shows on hover/focus. */
.pp-sponsor-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 2px;
    /* Centred on the name's x-height, so it lines up beside a [cc] flag at any font size */
    vertical-align: middle;
    top: -1px;
    border-radius: var(--pp-radius-sm);
    text-decoration: none;
    line-height: 1;
}
.pp-sponsor-badge::before { content: ''; position: absolute; inset: -8px; }
.pp-sponsor-badge img { display: block; width: 18px; height: 18px; border-radius: var(--pp-radius-sm); object-fit: contain; }
.pp-sponsor-badge-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--pp-radius-sm);
    background: var(--pp-bg-dark);
    color: var(--pp-text-invert);
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
}
/* Text badges ("pp") widen for up to three letters instead of shrinking them */
.pp-sponsor-badge--text { width: auto; min-width: 18px; }
.pp-sponsor-badge--text .pp-sponsor-badge-initial { padding: 0 3px; letter-spacing: .02em; }
.pp-sponsor-badge--text .pp-sponsor-badge-own { font-size: .75rem; padding-bottom: 2px; letter-spacing: 0; }
.pp-sponsor-badge-own span { color: var(--pp-cyan-500); }
.pp-sponsor-badge::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: var(--pp-radius-sm);
    background: var(--pp-bg-dark);
    color: var(--pp-text-invert);
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 20;
}
.pp-sponsor-badge:hover::after,
.pp-sponsor-badge:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .pp-sponsor-badge::after { transition: none; }
}
.pp-sponsor-badge:focus-visible { outline: 2px solid var(--pp-cyan-500); outline-offset: 2px; }

/* ── "Join our channels" box, [pp_social_box] (inc/social-box.php) ──
   Light card in the article; channels as outline pills (lower-emphasis CTA on a light surface). */
.pp-social-box {
    margin: 2rem 0;
    padding: 1.25rem 1.25rem 1.375rem;
    background: var(--pp-bg-alt);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    text-align: center;
}
.pp-social-box .pp-social-box-title { margin: 0 0 .875rem; font-weight: 700; line-height: 1.35; color: var(--pp-text); text-wrap: balance; }
/* Prefixed with .pp-single-content too: the article's list rules (bullets, indent,
   gaps between items) are more specific and would otherwise style the pills */
.pp-social-box-list,
.pp-single-content .pp-social-box-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pp-social-box-list li,
.pp-single-content .pp-social-box-list li { margin: 0; padding: 0; }
.pp-single-content .pp-social-box-list > li::before { content: none; }
.pp-social-box-link,
.pp-single-content a.pp-social-box-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--pp-cyan-500);
    border-radius: var(--pp-radius-pill);
    background: var(--pp-bg);
    color: var(--pp-text) !important;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
    transition: background-color .15s, border-color .15s;
}
.pp-social-box-link:hover,
.pp-single-content a.pp-social-box-link:hover { background: var(--pp-cyan-500); border-color: var(--pp-cyan-500); color: var(--pp-bg-dark) !important; }
.pp-social-box-link:focus-visible { outline: 2px solid var(--pp-cyan-600); outline-offset: 2px; }
.pp-social-box-link i { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .pp-social-box-link { transition: none; } }