/* =============================================================================
   PLEY – CS2 Major Hub
   Full-page, immersive experience. Responsive + mobile-first.
   ============================================================================= */

/* ─── Design tokens ──────────────────────────────────────────────────────── */
/* :root scope so the variables resolve EVERYWHERE — both inside the shortcode
   wrapper (.pley-major-hub) and in the ACF flex-content context (which has
   no `.pley-major-hub` wrapper, just per-section block classes). Previously
   scoped to `.pley-major-hub`, which meant every var(--ph-*) reference on
   the ACF page silently fell back to initial — breaking the entire card-
   chrome design system on that page. */
:root {
    --ph-bg:          #111111;
    --ph-surface:     #1E1E1E;
    --ph-surface-card:#272725;  /* gray-semidark — outer section card bg, lifts off page-bg */
    --ph-surface-2:   #1E1E1E;  /* zebra-row tint — needs visible contrast against #272725 card */
    --ph-surface-3:   #2F2F2D;
    --ph-border:      rgba(255,255,255,0.08);
    --ph-border-h:    rgba(255,255,255,0.14);
    --ph-accent:      #F18805;
    --ph-accent-dim:  rgba(241,136,5,0.12);
    --ph-accent-glow: rgba(241,136,5,0.35);
    --ph-text:        #DCD1D5;
    --ph-muted:       rgba(220,209,213,0.70);
    --ph-subtle:      rgba(220,209,213,0.45);
    --ph-green:       #3DD68C;
    --ph-green-dim:   rgba(61,214,140,0.10);
    --ph-red:         #FF4655;
    --ph-red-dim:     rgba(255,70,85,0.12);
    --ph-radius:      12px;
    --ph-radius-lg:   16px;
    --ph-radius-sm:   8px;
    --ph-radius-xs:   4px;
    --ph-shadow:      0 6px 18px rgba(0,0,0,0.45);
    --ph-shadow-lg:   0 18px 40px rgba(0,0,0,0.55);
    --ph-shadow-hover: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
    --ph-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ph-mono:        'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --ph-nav-h:       72px;
    --ph-transition:  .18s ease;

    font-family: var(--ph-font);
    color: var(--ph-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var(--ph-bg);
    /* Full-bleed: breaks out of any WP content container */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow-x: hidden;
}

/* 100vw (above) includes the vertical scrollbar width, which otherwise
   triggers horizontal page scroll. Clip it at the root on pages with the hub. */
html:has(.pley-major-hub),
body:has(.pley-major-hub) {
    overflow-x: clip;
}

/* ── Shared hub-section rules (apply to every block-major-hub-* block).
   Phone overrides match the canonical halving rhythm: container
   padding 24→12 px, header pb 14→8 px / mb 18→10 px. Desktop is the
   reference design above 640 px. ────────────────────────────────── */

/* Card-internal content clipped to the rounded outer corners. Without
   this, zebra-striped rows painted their rectangular backgrounds
   through the card's rounded-2xl corners — visible as a square bg
   bite on the first/last row of every list-style card. Card has no
   children that need to escape its bounds (badges + section header
   sit inside the padding-box), so the clip is safe globally. */
.pley-hub-glass--outer {
    overflow: hidden;
}

/* Heading min-height matches the See-more pill's outer height
   (`py-2 lg:py-2.5 border-[1.5px] text-[11px] lg:text-[13px]` with
   the inherited 1.5 line-height = 35.5 px <lg / 42.5 px ≥lg). Forces
   the same content-row height whether the header carries a pill or
   just a heading, so the gradient line at `bottom: 0` lands at the
   same y-offset across every section. Targeting the heading (not
   the header) sidesteps box-sizing border-box arithmetic that
   includes pb-[14px]. */
[class*="block-major-hub-"] header.relative > [role="heading"] {
    display: flex;
    align-items: center;
    min-height: 36px;
}
@media (min-width: 1024px) {
    [class*="block-major-hub-"] header.relative > [role="heading"] {
        min-height: 43px;
    }
}

/* Phone-only adjustments */
@media (max-width: 639px) {
    /* Halve the outer container padding so cards sit closer to the
       screen edge — matches the canonical px-[11px] inner-card rhythm. */
    [class*="block-major-hub-"].container {
        padding-left: 12px;
        padding-right: 12px;
    }
    /* Tighten the heading → content gap (pb 14→8, mb 18→10). List-card
       scroll bodies flex into the remaining card height so no `top`
       constant needs re-anchoring here. */
    [class*="block-major-hub-"] header.relative {
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
    }
}


/* ─── Inner containers ───────────────────────────────────────────────────── */
.pley-hub-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
/* Når sidebars er synlige: reducer indholdets max-width så alt passer på skærmen */
.pley-takeover-layout--has-sidebars .pley-hub-inner {
    max-width: 100%; /* fyld den plads panels giver — sidebars begrænser automatisk */
}

/* ─── Takeover Partnership ───────────────────────────────────────────────── */

/* Top banner — inde i pley-hub-inner så bredden matcher sektionerne præcist */
.pley-takeover-top-wrap {
    margin-top: -26px;   /* panels har padding-top:40px → 40-26 = 14px fra nav til banner */
    margin-bottom: 14px; /* 14px fra banner ned til første sektion */
}
.pley-takeover-top-link {
    display: block;
    line-height: 0;
    border-radius: var(--ph-radius-lg);
    overflow: hidden;
}
.pley-takeover-top-img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--ph-radius-lg); /* matches .pley-hub-section */
}

/* Outer layout wrapper — centers content and positions sidebars adjacent to panels */
.pley-takeover-layout {
    display: flex;
    align-items: flex-start;
    /* Center the whole layout so sidebars sit right next to the content */
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    /* Allow panels to fill remaining space */
    width: 100%;
}
/* The panels take all remaining space */
.pley-takeover-layout > .pley-hub-panels {
    flex: 1 1 0%;
    min-width: 0;
}

/* Sidebar banners — JS handles sticky + initial alignment with first section */
.pley-takeover-sidebar {
    flex: 0 0 200px;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start; /* required for JS translateY trick */
    will-change: transform;
    padding: 0 8px; /* lille indre luft fra indholdskanten */
}
.pley-takeover-sidebar a {
    display: block;
    line-height: 0;
    border-radius: var(--ph-radius-lg);
    overflow: hidden;
    width: 100%;
}
.pley-takeover-sidebar img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--ph-radius-lg);
}
.pley-takeover-sidebar--left  { order: -1; }
.pley-takeover-sidebar--right { order:  1; }

/* Responsiv sidebar-bredde — vises fra 1100px og op */
@media (max-width: 1099px) {
    .pley-takeover-sidebar { display: none; }
}
@media (min-width: 1100px) and (max-width: 1299px) {
    .pley-takeover-sidebar { flex-basis: 100px; width: 100px; padding: 0 4px; }
}
@media (min-width: 1300px) and (max-width: 1499px) {
    .pley-takeover-sidebar { flex-basis: 140px; width: 140px; padding: 0 6px; }
}
@media (min-width: 1500px) and (max-width: 1699px) {
    .pley-takeover-sidebar { flex-basis: 180px; width: 180px; }
}
@media (min-width: 1700px) {
    .pley-takeover-sidebar { flex-basis: 220px; width: 220px; }
    .pley-takeover-layout  { max-width: 1900px; }
}
@media (min-width: 2000px) {
    .pley-takeover-sidebar { flex-basis: 280px; width: 280px; }
}

/* ─── Shared section card ────────────────────────────────────────────────── */
.pley-hub-section {
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-lg);
    padding: 20px 22px;
    transition: border-color var(--ph-transition);
}

/* Section header */
.pley-section-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
}
.pley-section-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--ph-accent) 0%, rgba(241,136,5,0.35) 40%, var(--ph-border) 100%);
}
.pley-section-header > svg {
    display: none;
}
.pley-section-header h3 {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ph-accent);
    margin: 0;
}
.pley-section-header-sub {
    margin-left: auto;
    font-size: 11px;
    color: var(--ph-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
/* ─── Generel hub-knap (samme stil som hero-knappen) ─────────────────────── */
.pley-hub-btn {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px 9px 16px;
    background: linear-gradient(135deg, rgba(241,136,5,0.18) 0%, rgba(212,118,0,0.10) 100%);
    border: 1.5px solid rgba(241,136,5,0.5);
    border-radius: 999px;
    color: #fff;
    font-size: 11px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 16px rgba(241,136,5,0.12), 0 2px 12px rgba(0,0,0,.35);
    transition: background .22s, border-color .22s, box-shadow .22s, transform .22s;
    flex-shrink: 0;
}
.pley-hub-btn:hover {
    background: linear-gradient(135deg, rgba(241,136,5,0.30) 0%, rgba(212,118,0,0.20) 100%);
    border-color: rgba(241,136,5,0.9);
    box-shadow: 0 0 28px rgba(241,136,5,0.3), 0 4px 20px rgba(0,0,0,.4);
    transform: translateY(-1px);
    color: #fff;
}
.pley-hub-btn:focus-visible {
    outline: 2px solid var(--ph-accent);
    outline-offset: 3px;
}
.pley-hub-btn svg { width: 14px; height: 14px; color: var(--ph-accent); flex-shrink: 0; }

/* ─── Shared colour helpers ──────────────────────────────────────────────── */
.pley-live-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ph-red);
    animation: ph-blink 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes ph-blink { 0%,100%{opacity:1} 50%{opacity:.25} }

.pley-score-win  { color: var(--ph-green); font-weight: 700; }
.pley-score-lose { color: var(--ph-muted); font-weight: 400; }
.pley-score-sep  { color: var(--ph-subtle); margin: 0 1px; }
.pley-winner     { opacity: 1; }
.pley-loser      { opacity: .38; }
.pley-rating-elite { color: var(--ph-green); }
.pley-rating-good  { color: var(--ph-accent); }

/* ═════════════════════════════════════════════════════════════════════════
   HERO — full-viewport centred masterhead
═════════════════════════════════════════════════════════════════════════ */
.pley-hub-hero {
    /* Tune --ph-theme-header-h to match your site header's actual height */
    --ph-theme-header-h: 60px;
    position: relative;
    height: calc(100vh - var(--ph-theme-header-h));
    height: calc(100dvh - var(--ph-theme-header-h));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #080500;
}
/* WordPress admin bar: 32px on desktop, 46px on narrow widths */
.admin-bar .pley-hub-hero {
    height: calc(100vh - 32px - var(--ph-theme-header-h));
    height: calc(100dvh - 32px - var(--ph-theme-header-h));
}
@media screen and (max-width: 782px) {
    .admin-bar .pley-hub-hero {
        height: calc(100vh - 46px - var(--ph-theme-header-h));
        height: calc(100dvh - 46px - var(--ph-theme-header-h));
    }
}

/* Layered background */
.pley-hub-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.pley-hub-hero-glow-l {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 65% at 8%  60%, rgba(255,130,20,.38) 0%, transparent 60%),
        radial-gradient(ellipse 35% 40% at 22% 20%, rgba(255,158,42,.18) 0%, transparent 55%);
}
.pley-hub-hero-glow-r {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 60% at 94% 45%, rgba(255,120,10,.32) 0%, transparent 60%),
        radial-gradient(ellipse 30% 35% at 78% 80%, rgba(255,158,42,.15) 0%, transparent 55%);
}
/* Extra centre-bottom warmth */
.pley-hub-hero-glow-l::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 30% at 50% 100%, rgba(200,80,0,.22) 0%, transparent 60%);
}
.pley-hub-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 100%);
}
.pley-hub-hero-watermark {
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(260px, 35vw, 480px);
    opacity: .025;
    pointer-events: none;
}
.pley-hub-hero-watermark img {
    width: 100%; height: auto; display: block;
    filter: saturate(0) brightness(10);
}
.pley-hub-hero-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0,0,0,.7) 0%, transparent 60%),
        radial-gradient(ellipse 100% 40% at 50% 0%,   rgba(0,0,0,.5) 0%, transparent 50%);
}

/* Top accent bar */

/* Content — sits above clips and legacy cards */
.pley-hub-hero-body {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
    max-width: 860px;
    width: 100%;
    box-sizing: border-box;
}

/* Logo — no box, full width to breathe */
.pley-hub-hero-logo {
    width: clamp(160px, min(28vw, 28vh), 420px);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    filter: drop-shadow(0 4px 40px rgba(241,136,5,0.20));
}
.pley-hub-hero-logo img {
    width: 100%; height: auto;
    object-fit: contain; display: block;
}

/* Title */
.pley-hub-hero-title {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin: 0 0 28px;
    color: #fff;
    text-wrap: balance;
}

/* Stats strip */
.pley-hub-hero-strip {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: rgba(15,15,15,0.8);
    border: 1px solid var(--ph-border);
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 100%;
    padding: 2px;
    margin-bottom: 28px;
}
.pley-hub-hero-strip-item {
    padding: 12px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    position: relative;
    text-align: left;
}
.pley-hub-hero-strip-item + .pley-hub-hero-strip-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: rgba(255,255,255,0.08);
}

.pley-hub-strip-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.45);
    line-height: 1;
}
.pley-hub-strip-label svg {
    color: var(--ph-accent);
    flex-shrink: 0;
    display: block;
}
.pley-hub-strip-value {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Legacy memory cards ────────────────────────────────────────────────── */
.pley-hub-hero-legacy {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    /* Isolate layout/style recalculations to this subtree */
    contain: layout style;
}
.pley-hub-legacy-card {
    position: absolute;
    width: 150px;
    height: 150px;
    /* Solid opaque bg replaces backdrop-filter (23× blur was destroying compositor perf) */
    background: rgba(10,8,5,.92);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    overflow: hidden;
    opacity: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
    /* Promote each card to its own GPU layer */
    will-change: transform, opacity;
    transform: translateZ(0);
    /* All cards start at roughly same starting cluster — drift animation moves them */
    top: 40%; left: 40%;
}
/* Logo centered, fills 70% of card, faded */
.pley-hub-legacy-card-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    width: 90px;
    height: 90px;
    object-fit: contain;
    opacity: .28;
    filter: drop-shadow(0 0 16px rgba(255,158,42,.25));
}
/* Gradient overlay at bottom for text legibility */
.pley-hub-legacy-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 10px 12px 14px;
    background: linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.80) 55%, rgba(0,0,0,.0) 100%);
}

/*
 * Each card gets a unique drift path. The card's `top/left` is its origin —
 * keyframes use translate to send it on a journey across the hero, then back.
 * Opacity fades in and out so only ~8-10 cards are visible at any time.
 */

/* 7 drift paths — moderate travel (±8-12vw, ±6-10vh) so cards stay near origin */
@keyframes ph-drift-a {
    0%   { opacity:0;   transform: translate(0,0) rotate(-1deg); }
    8%   { opacity:.50; }
    30%  { transform: translate(9vw,-5vh)  rotate(1deg);  opacity:.46; }
    60%  { transform: translate(12vw, 8vh) rotate(-.5deg); opacity:.42; }
    88%  { opacity:.50; }
    100% { opacity:0;   transform: translate(0,0) rotate(-1deg); }
}
@keyframes ph-drift-b {
    0%   { opacity:0;   transform: translate(0,0) rotate(1deg); }
    8%   { opacity:.48; }
    35%  { transform: translate(-8vw,-7vh)  rotate(-1deg); opacity:.44; }
    65%  { transform: translate(-11vw, 6vh) rotate(.5deg);  opacity:.40; }
    88%  { opacity:.48; }
    100% { opacity:0;   transform: translate(0,0) rotate(1deg); }
}
@keyframes ph-drift-c {
    0%   { opacity:0;   transform: translate(0,0) rotate(.5deg); }
    10%  { opacity:.52; }
    33%  { transform: translate(-10vw,-8vh) rotate(-1.5deg); opacity:.46; }
    66%  { transform: translate(8vw,-10vh)  rotate(1deg);    opacity:.44; }
    90%  { opacity:.52; }
    100% { opacity:0;   transform: translate(0,0) rotate(.5deg); }
}
@keyframes ph-drift-d {
    0%   { opacity:0;   transform: translate(0,0) rotate(-.5deg); }
    10%  { opacity:.46; }
    40%  { transform: translate(6vw, 10vh)  rotate(1deg);  opacity:.42; }
    70%  { transform: translate(-7vw, 12vh) rotate(-1deg); opacity:.38; }
    90%  { opacity:.46; }
    100% { opacity:0;   transform: translate(0,0) rotate(-.5deg); }
}
@keyframes ph-drift-e {
    0%   { opacity:0;   transform: translate(0,0) rotate(1.5deg); }
    8%   { opacity:.50; }
    30%  { transform: translate(11vw,-6vh)  rotate(-1deg); opacity:.46; }
    60%  { transform: translate(8vw,-11vh)  rotate(.5deg); opacity:.42; }
    88%  { opacity:.50; }
    100% { opacity:0;   transform: translate(0,0) rotate(1.5deg); }
}
@keyframes ph-drift-f {
    0%   { opacity:0;   transform: translate(0,0) rotate(-1deg); }
    12%  { opacity:.44; }
    40%  { transform: translate(-9vw,-4vh) rotate(.5deg);  opacity:.40; }
    70%  { transform: translate(-12vw, 8vh) rotate(-1deg); opacity:.38; }
    88%  { opacity:.44; }
    100% { opacity:0;   transform: translate(0,0) rotate(-1deg); }
}
@keyframes ph-drift-g {
    0%   { opacity:0;   transform: translate(0,0) rotate(.5deg); }
    10%  { opacity:.48; }
    40%  { transform: translate(7vw, 9vh)   rotate(-1deg); opacity:.44; }
    70%  { transform: translate(10vw,-7vh)  rotate(1.5deg); opacity:.40; }
    90%  { opacity:.48; }
    100% { opacity:0;   transform: translate(0,0) rotate(.5deg); }
}

/*
 * All cards use left: to avoid right-side overflow.
 * 5 zones × ~5 cards each = full hero coverage.
 * Overflow on the legacy container clips any drift that exits the hero.
 */

/* Zone 1 — far left  (left: 1-3%) */
.pley-hub-legacy-card[data-idx="0"]  { top: 4%;  left: 1%; animation: ph-drift-a 46s linear  -4s infinite; }
.pley-hub-legacy-card[data-idx="1"]  { top:20%;  left: 2%; animation: ph-drift-b 52s linear -22s infinite; }
.pley-hub-legacy-card[data-idx="2"]  { top:38%;  left: 1%; animation: ph-drift-c 44s linear  -9s infinite; }
.pley-hub-legacy-card[data-idx="3"]  { top:58%;  left: 2%; animation: ph-drift-d 50s linear -33s infinite; }
.pley-hub-legacy-card[data-idx="4"]  { top:78%;  left: 1%; animation: ph-drift-e 48s linear -16s infinite; }

/* Zone 2 — center-left  (left: 19-24%) */
.pley-hub-legacy-card[data-idx="5"]  { top: 6%;  left:20%; animation: ph-drift-f 54s linear  -7s infinite; }
.pley-hub-legacy-card[data-idx="6"]  { top:24%;  left:22%; animation: ph-drift-g 42s linear -28s infinite; }
.pley-hub-legacy-card[data-idx="7"]  { top:44%;  left:19%; animation: ph-drift-a 56s linear -40s infinite; }
.pley-hub-legacy-card[data-idx="8"]  { top:64%;  left:21%; animation: ph-drift-b 46s linear -12s infinite; }
.pley-hub-legacy-card[data-idx="9"]  { top:83%;  left:23%; animation: ph-drift-c 60s linear -44s infinite; }

/* Zone 3 — centre  (left: 39-51%) */
.pley-hub-legacy-card[data-idx="10"] { top: 2%;  left:42%; animation: ph-drift-d 44s linear  -2s infinite; }
.pley-hub-legacy-card[data-idx="11"] { top:86%;  left:39%; animation: ph-drift-e 50s linear -18s infinite; }
.pley-hub-legacy-card[data-idx="22"] { top:86%;  left:51%; animation: ph-drift-f 48s linear -26s infinite; }

/* Zone 4 — center-right  (left: 62-68%) */
.pley-hub-legacy-card[data-idx="12"] { top: 6%;  left:64%; animation: ph-drift-g 58s linear -36s infinite; }
.pley-hub-legacy-card[data-idx="13"] { top:24%;  left:62%; animation: ph-drift-a 48s linear  -6s infinite; }
.pley-hub-legacy-card[data-idx="14"] { top:44%;  left:65%; animation: ph-drift-b 54s linear -48s infinite; }
.pley-hub-legacy-card[data-idx="15"] { top:64%;  left:63%; animation: ph-drift-c 42s linear -24s infinite; }
.pley-hub-legacy-card[data-idx="16"] { top:83%;  left:66%; animation: ph-drift-d 56s linear -10s infinite; }

/* Zone 5 — far right  (left: 80-84%) */
.pley-hub-legacy-card[data-idx="17"] { top: 4%;  left:82%; animation: ph-drift-e 44s linear -38s infinite; }
.pley-hub-legacy-card[data-idx="18"] { top:20%;  left:80%; animation: ph-drift-f 56s linear -20s infinite; }
.pley-hub-legacy-card[data-idx="19"] { top:38%;  left:83%; animation: ph-drift-g 46s linear  -3s infinite; }
.pley-hub-legacy-card[data-idx="20"] { top:58%;  left:81%; animation: ph-drift-a 60s linear -30s infinite; }
.pley-hub-legacy-card[data-idx="21"] { top:78%;  left:84%; animation: ph-drift-b 50s linear -42s infinite; }
.pley-hub-legacy-year {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--ph-accent);
    line-height: 1;
    text-transform: uppercase;
}
.pley-hub-legacy-winner {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.pley-hub-legacy-event {
    font-size: 9px;
    font-weight: 500;
    color: rgba(255,255,255,.60);
    line-height: 1.3;
}

/* ─── Hero video clips ───────────────────────────────────────────────────── */
.pley-hub-hero-clips {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
    contain: layout style;
}
.pley-hub-hero-clip {
    position: absolute;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0;
    box-shadow: 0 16px 56px rgba(0,0,0,.80);
    aspect-ratio: 16/9;
    width: clamp(180px, 16vw, 260px);
    /* GPU layer — prevents jank */
    will-change: transform, opacity;
    transform: translateZ(0);
}
.pley-hub-hero-clip[data-clip-idx="0"] { top: 8%;  left: 28%; animation: ph-clip-orbit-0 36s linear -3s  infinite; }
.pley-hub-hero-clip[data-clip-idx="1"] { top: 55%; left: 56%; animation: ph-clip-orbit-1 32s linear -16s infinite; }
.pley-hub-hero-clip[data-clip-idx="2"] { top: 65%; left: 25%; animation: ph-clip-orbit-2 40s linear -24s infinite; }
.pley-hub-hero-clip[data-clip-idx="3"] { top: 12%; left: 54%; animation: ph-clip-orbit-3 34s linear -9s  infinite; }
.pley-hub-hero-clip[data-clip-idx="4"] { top: 42%; left: 22%; animation: ph-clip-orbit-4 38s linear -30s infinite; }
.pley-hub-hero-clip[data-clip-idx="5"] { top: 30%; left: 58%; animation: ph-clip-orbit-5 30s linear -5s  infinite; }

.pley-hub-hero-clip video {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    /* Dim + desaturate so clips recede visually without becoming transparent */
    filter: brightness(.75) saturate(.65);
}
/* Dark overlay on top of video — clip stays fully opaque, just less loud */
.pley-hub-hero-clip::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 3, 0, .28);
    pointer-events: none;
    z-index: 1;
}

/*
 * Opacity goes 0 → 1 quickly, stays at 1 the whole way (fully opaque = no see-through),
 * then fades out at end. Transform uses linear so movement is perfectly smooth.
 * Many keyframe stops give a curved path without ease-in-out jank.
 */
@keyframes ph-clip-orbit-0 {
    0%   { opacity: 0;  transform: translate(  0vw,   0vh); }
    6%   { opacity: 1; }
    20%  {              transform: translate(  4vw,  3vh); }
    35%  {              transform: translate(  8vw, -1vh); }
    50%  {              transform: translate( 10vw,  5vh); }
    65%  {              transform: translate(  6vw,  9vh); }
    80%  {              transform: translate(  2vw,  4vh); }
    94%  { opacity: 1; }
    100% { opacity: 0;  transform: translate(  0vw,  0vh); }
}
@keyframes ph-clip-orbit-1 {
    0%   { opacity: 0;  transform: translate(  0vw,   0vh); }
    6%   { opacity: 1; }
    20%  {              transform: translate( -5vw,  2vh); }
    35%  {              transform: translate( -9vw, -3vh); }
    50%  {              transform: translate( -6vw, -7vh); }
    65%  {              transform: translate( -2vw, -4vh); }
    80%  {              transform: translate( -7vw,  1vh); }
    94%  { opacity: 1; }
    100% { opacity: 0;  transform: translate(  0vw,  0vh); }
}
@keyframes ph-clip-orbit-2 {
    0%   { opacity: 0;  transform: translate(  0vw,   0vh); }
    6%   { opacity: 1; }
    20%  {              transform: translate(  6vw, -3vh); }
    35%  {              transform: translate( 10vw,  2vh); }
    50%  {              transform: translate(  7vw,  7vh); }
    65%  {              transform: translate(  3vw,  3vh); }
    80%  {              transform: translate(  8vw, -1vh); }
    94%  { opacity: 1; }
    100% { opacity: 0;  transform: translate(  0vw,  0vh); }
}
@keyframes ph-clip-orbit-3 {
    0%   { opacity: 0;  transform: translate(  0vw,   0vh); }
    6%   { opacity: 1; }
    20%  {              transform: translate( -3vw,  4vh); }
    35%  {              transform: translate( -7vw,  8vh); }
    50%  {              transform: translate(-10vw,  3vh); }
    65%  {              transform: translate( -6vw, -2vh); }
    80%  {              transform: translate( -2vw,  6vh); }
    94%  { opacity: 1; }
    100% { opacity: 0;  transform: translate(  0vw,  0vh); }
}

@keyframes ph-clip-orbit-4 {
    0%   { opacity: 0;  transform: translate(  0vw,  0vh); }
    6%   { opacity: 1; }
    20%  {              transform: translate( -6vw, -5vh); }
    35%  {              transform: translate(-10vw,  2vh); }
    50%  {              transform: translate( -7vw,  8vh); }
    65%  {              transform: translate( -3vw,  4vh); }
    80%  {              transform: translate( -8vw, -2vh); }
    94%  { opacity: 1; }
    100% { opacity: 0;  transform: translate(  0vw,  0vh); }
}
@keyframes ph-clip-orbit-5 {
    0%   { opacity: 0;  transform: translate(  0vw,  0vh); }
    6%   { opacity: 1; }
    20%  {              transform: translate(  5vw, -6vh); }
    35%  {              transform: translate(  9vw,  1vh); }
    50%  {              transform: translate(  6vw,  7vh); }
    65%  {              transform: translate(  2vw,  3vh); }
    80%  {              transform: translate(  7vw, -3vh); }
    94%  { opacity: 1; }
    100% { opacity: 0;  transform: translate(  0vw,  0vh); }
}

/* Hide legacy cards on mobile — too cluttered */
@media (max-width: 900px) {
    .pley-hub-hero-legacy { display: none; }
}
@media (max-width: 600px) {
    .pley-hub-hero-clips { display: none; }
}

/* ─── PLEY x Skinspartner ────────────────────────────────────────────────── */
.pley-hub-hero-sponsor {
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.pley-hub-sponsor-lockup {
    display: flex;
    align-items: center;
    gap: 20px;
}
.pley-hub-sponsor-logo {
    height: 88px;
    width: auto;
    display: block;
    object-fit: contain;

}
.pley-hub-sponsor-x {
    font-size: 48px;
    font-weight: 300;
    color: rgba(255,255,255,.30);
    line-height: 1;
}
/* Scroll hint */
.pley-hub-scroll-hint {
    position: absolute;
    bottom: 36px;
    text-decoration: none;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(241,136,5,0.18) 0%, rgba(212,118,0,0.10) 100%);
    border: 1.5px solid rgba(241,136,5,0.5);
    border-radius: 999px;
    padding: 14px 32px 14px 26px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 0 24px rgba(241,136,5,0.18), 0 4px 24px rgba(0,0,0,.4);
    white-space: nowrap;
    transition: background .25s, border-color .25s, box-shadow .25s;
    animation: ph-float 3s ease-in-out infinite;
}
.pley-hub-scroll-hint:hover {
    background: linear-gradient(135deg, rgba(241,136,5,0.30) 0%, rgba(212,118,0,0.20) 100%);
    border-color: rgba(241,136,5,0.9);
    box-shadow: 0 0 40px rgba(241,136,5,0.35), 0 8px 32px rgba(0,0,0,.5);
}
.pley-hub-scroll-hint:focus { outline: none; }
.pley-hub-scroll-hint:focus-visible {
    outline: 2px solid var(--ph-accent);
    outline-offset: 3px;
}
.pley-hub-scroll-hint svg {
    width: 18px;
    height: 18px;
    color: var(--ph-accent);
    flex-shrink: 0;
}
@keyframes ph-float {
    0%,100% { transform: translateX(-50%) translateY(0px); }
    50%      { transform: translateX(-50%) translateY(-8px); }
}

/* ═════════════════════════════════════════════════════════════════════════
   STICKY NAV
═════════════════════════════════════════════════════════════════════════ */
.pley-hub-nav {
    scroll-margin-top: 0;
    position: relative; /* JS sets position:fixed when scrolled past hero */
    z-index: 200;
    background: transparent;
    padding: 12px 24px;
}
/* When JS makes nav fixed, give the outer wrapper a dark bg so content doesn't show through */
.pley-hub-nav--sticky {
    background: var(--ph-bg);
}

.pley-hub-nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 6px 22px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 48px;
}

/* Brand block (left side) */
.pley-hub-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.pley-hub-nav-logo {
    width: 32px; height: 32px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.pley-hub-nav-title {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--ph-text);
    text-transform: uppercase;
}
.pley-hub-nav-divider {
    width: 1px;
    height: 24px;
    background: var(--ph-border-h);
    margin: 0 4px;
}
.pley-hub-nav-subtitle {
    font-size: 13px;
    color: var(--ph-muted);
    font-weight: 500;
    white-space: nowrap;
}

/* Tabs container (right side) */
.pley-hub-nav-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

/* Tabs */
.pley-hub-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    background: none;
    border: none;
    border-radius: var(--ph-radius-sm);
    cursor: pointer;
    font-family: var(--ph-font);
    color: var(--ph-muted);
    transition: color var(--ph-transition), background var(--ph-transition);
    white-space: nowrap;
}
.pley-hub-tab-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    transition: color var(--ph-transition);
}
.pley-hub-tab-count {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    min-width: 22px;
    text-align: center;
    background: rgba(255,255,255,0.06);
    color: var(--ph-subtle);
    border-radius: 999px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    transition: color var(--ph-transition), background var(--ph-transition);
}
.pley-hub-tab-live-dot {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--ph-red);
    box-shadow: 0 0 0 3px rgba(255,70,85,0.18);
    animation: pley-live-pulse 1.4s infinite;
    flex-shrink: 0;
}
@keyframes pley-live-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,70,85,0.5); }
    50%      { opacity: .7; box-shadow: 0 0 0 5px rgba(255,70,85,0); }
}

.pley-hub-tab:hover {
    color: var(--ph-text);
    background: rgba(255,255,255,0.04);
}
.pley-hub-tab:hover .pley-hub-tab-count {
    color: var(--ph-text);
    background: rgba(255,255,255,0.1);
}

.pley-hub-tab-active,
.pley-hub-tab-active:hover {
    color: var(--ph-accent);
    background: transparent;
}
.pley-hub-tab-active .pley-hub-tab-label { color: var(--ph-accent); }
.pley-hub-tab-active .pley-hub-tab-count,
.pley-hub-tab-active:hover .pley-hub-tab-count {
    background: rgba(241,136,5,0.22);
    color: var(--ph-accent);
}

.pley-hub-tab:focus { outline: none; }
.pley-hub-tab:focus-visible { outline: 2px solid rgba(241,136,5,0.5); outline-offset: -2px; }

/* ═════════════════════════════════════════════════════════════════════════
   PANELS
═════════════════════════════════════════════════════════════════════════ */
.pley-hub-panels {
    padding-top: 40px;
    padding-bottom: 80px;
}

/* ─── Content area — full-width wrapper from nav to page bottom ────────── */
.pley-content-area {
    width: 100%;
    position: relative;
    overflow: hidden; /* klipper .pley-content-bg ved indholdets faktiske bund */
    background: var(--ph-bg); /* mørk fallback så tema-baggrund ikke lyser igennem */
}

/* Baggrundselement — absolut, høj nok til at cover altid ser ens ud.
   JS sætter height = den højeste tabs content-area-højde.
   overflow:hidden på parent klipper det ved aktiv tabs bund. */
.pley-content-bg {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.pley-content-area--has-bg .pley-content-bg {
    display: block;
    background-image:
        linear-gradient(180deg,
            rgba(11,11,11,.50) 0%,
            rgba(11,11,11,.20) 25%,
            rgba(11,11,11,.20) 75%,
            rgba(11,11,11,.65) 100%
        ),
        var(--takeover-bg);
    background-size: cover, cover;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
}
/* Indhold skal ligge over baggrundselementet */
.pley-content-area > *:not(.pley-content-bg) {
    position: relative;
    z-index: 1;
}
.pley-hub-panel  { display: none; }
.pley-hub-panel-active { display: block; }

/* ─── Overview grid ──────────────────────────────────────────────────── */
/* Uniform 14px gap between every Overview-tab block, independent of the
   block types involved (section → overview-grid → streams-row → section …). */
[data-hub-panel="overview"] > .pley-hub-inner > * + * {
    margin-top: 14px;
}

.pley-hub-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}
/* Overview streams + player-ratings row — 70/30 split.
   Streams drives the row height (align-self: start, natural size).
   Ratings stretches to match streams; min-height: 0 prevents its tall
   content from pushing the row taller; overflow-y: auto adds scroll. */
.pley-hub-streams-row {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 14px;
    align-items: stretch;
}
.pley-hub-streams-row > .pley-hub-section:has(.pley-hub-stream-layout) {
    align-self: start;
}
.pley-hub-streams-row > .pley-hub-section:has(.pley-hub-ratings-list) {
    align-self: stretch;
    min-height: 0;
}
@media (max-width: 860px) {
    .pley-hub-streams-row { grid-template-columns: 1fr; }
}
/* Streams + player ratings — streams sets the row height, ratings matches + scrolls */
.pley-hub-streams-row > .pley-hub-section {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    /* Clip scrollbar to the section's rounded corners */
    clip-path: inset(0 round var(--ph-radius-lg));
    scrollbar-width: thin;
    scrollbar-color: rgba(241,136,5,0.55) transparent;
}
.pley-hub-streams-row > .pley-hub-section::-webkit-scrollbar { width: 12px; }
.pley-hub-streams-row > .pley-hub-section::-webkit-scrollbar-track { background: transparent; }
.pley-hub-streams-row > .pley-hub-section::-webkit-scrollbar-button:start,
.pley-hub-streams-row > .pley-hub-section::-webkit-scrollbar-button:end {
    display: block;
    height: 14px;
    background: transparent;
}
.pley-hub-streams-row > .pley-hub-section::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(241,136,5,0.45) 0%, rgba(241,136,5,0.75) 100%);
    background-clip: padding-box;
    border: 4px solid transparent;
    border-radius: 7px;
    min-height: 40px;
}
.pley-hub-streams-row > .pley-hub-section::-webkit-scrollbar-thumb:hover {
    background: var(--ph-accent);
    background-clip: padding-box;
}
/* Cancel the adjacent-sibling margin-top when .pley-hub-section boxes are grid items */
.pley-hub-overview > .pley-hub-section + .pley-hub-section,
.pley-hub-streams-row > .pley-hub-section + .pley-hub-section { margin-top: 0; }

/* ═════════════════════════════════════════════════════════════════════════
   LIVE STREAMS
═════════════════════════════════════════════════════════════════════════ */

/* Layout: main stream left, sidebar right */
.pley-hub-stream-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 14px;
    align-items: start;
}

/* ── Main stream ── */
.pley-hub-stream-main {
    background: var(--ph-surface-2);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--ph-transition), transform var(--ph-transition), box-shadow var(--ph-transition);
}
.pley-hub-stream-main:hover,
.pley-hub-stream-main:focus-visible {
    border-color: rgba(255,255,255,.15);
    transform: translateY(-2px);
    box-shadow: var(--ph-shadow-hover);
    outline: none;
}
.pley-hub-stream-main:hover .pley-hub-stream-thumb--main img { transform: scale(1.03); }
.pley-hub-stream-main:hover .pley-hub-stream-play { opacity: 1; }

.pley-hub-stream-thumb--main {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 50%, #1a0f04 0%, #000 70%);
}
.pley-hub-stream-thumb--main img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .25s ease;
}

.pley-hub-stream-info--main {
    padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    border-top: 1px solid var(--ph-border);
}
.pley-hub-stream-info--main .pley-hub-stream-name {
    font-size: 13px; font-weight: 700;
}

/* ── Sidebar ── */
.pley-hub-stream-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pley-hub-stream-sidebar-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ph-subtle);
    margin: 0 0 10px;
}

/* ── Alt stream card ── */
.pley-hub-stream-alt-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ph-border);
    cursor: pointer;
    transition: background var(--ph-transition);
}
.pley-hub-stream-alt-card {
    border-bottom: none;
    transition: background var(--ph-transition);
    /* Extend alternating bg from main-stream edge (left, -14px layout gap) to section edge (right, -22px section padding) */
    margin-left: -14px;
    margin-right: -22px;
    padding-left: 26px;
    padding-right: 34px;
}
/* Ensure negative-margin rows don't bleed past the section's rounded corners */
.pley-hub-section:has(.pley-hub-stream-layout) { overflow-x: hidden; }

.pley-hub-stream-alt-card:nth-child(even) { background: var(--ph-surface-2); }
.pley-hub-stream-alt-card:nth-child(odd)  { background: transparent; }
.pley-hub-stream-alt-card:hover { background: var(--ph-surface-3); }
.pley-hub-stream-alt-card:focus-visible { outline: 1px solid rgba(255,255,255,.2); outline-offset: -2px; }

.pley-hub-stream-alt-card .pley-hub-stream-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}
.pley-hub-stream-alt-meta {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

/* ── Flag & platform logo ── */
.pley-hub-stream-flag {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}
.pley-platform-logo {
    width: 14px; height: 14px;
    flex-shrink: 0;
}
.pley-platform-logo--twitch  { color: #bf94ff; }
.pley-platform-logo--youtube { color: #ff5555; }

/* ── Shared badges ── */
.pley-hub-stream-live-badge {
    position: absolute; top: 8px; left: 8px;
    background: var(--ph-red); color: #fff;
    font-size: 9px; font-weight: 800;
    letter-spacing: .1em; padding: 3px 8px;
    border-radius: var(--ph-radius-xs);
    box-shadow: 0 0 14px rgba(255,70,85,0.55);
}
.pley-hub-stream-platform {
    font-size: 9px; font-weight: 800; letter-spacing: .07em;
    padding: 3px 7px; border-radius: var(--ph-radius-xs);
    background: rgba(0,0,0,.7); color: #ccc;
}
/* In main thumb: absolute positioned */
.pley-hub-stream-thumb--main .pley-hub-stream-platform {
    position: absolute; bottom: 8px; left: 8px;
}
.pley-hub-stream-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.4);
    opacity: 0; transition: opacity .15s;
}
.pley-hub-stream-play svg { width: 40px; height: 40px; color: #fff; filter: drop-shadow(0 2px 10px rgba(0,0,0,.7)); }

/* ── Info row (shared) ── */
.pley-hub-stream-info {
    padding: 10px 14px;
    display: flex; align-items: center; gap: 8px;
}
.pley-hub-stream-name {
    font-size: 12px; font-weight: 600; color: var(--ph-text);
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pley-hub-stream-viewers {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: var(--ph-muted);
    font-variant-numeric: tabular-nums; flex-shrink: 0;
    white-space: nowrap;
}
.pley-hub-stream-viewers svg { width: 11px; height: 11px; }

/* ═════════════════════════════════════════════════════════════════════════
   MATCHES TAB — table rows
═════════════════════════════════════════════════════════════════════════ */

/* Day group header */
.pley-matches-day-header {
    padding: 16px 20px 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ph-text);
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--ph-border);
}
.pley-matches-day-relative {
    margin-left: 8px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ph-muted);
}

/* Overview upcoming matches + latest results — shared edge-to-edge list */
.pley-hub-overview .pley-hub-section {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    /* Clip scrollbar to the section's rounded corners */
    clip-path: inset(0 round var(--ph-radius-lg));
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(241,136,5,0.55) transparent;
}
/* WebKit (Chrome, Safari) — reserve invisible buttons at top/bottom of track to keep thumb clear of rounded corners */
.pley-hub-overview .pley-hub-section::-webkit-scrollbar { width: 12px; }
.pley-hub-overview .pley-hub-section::-webkit-scrollbar-track { background: transparent; }
.pley-hub-overview .pley-hub-section::-webkit-scrollbar-button:start,
.pley-hub-overview .pley-hub-section::-webkit-scrollbar-button:end {
    display: block;
    height: 14px;
    background: transparent;
}
.pley-hub-overview .pley-hub-section::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(241,136,5,0.45) 0%, rgba(241,136,5,0.75) 100%);
    background-clip: padding-box;
    border: 4px solid transparent;
    border-radius: 7px;
    min-height: 40px;
}
.pley-hub-overview .pley-hub-section::-webkit-scrollbar-thumb:hover {
    background: var(--ph-accent);
    background-clip: padding-box;
}

.pley-matches-day-group + .pley-matches-day-group { margin-top: 4px; }

.pley-matches-day-header {
    margin: 0 -22px;
    padding: 14px 22px 10px;
    background: transparent;
    border-bottom: none;
}

.pley-hub-result-team span { display: none; }

.pley-hub-result-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0 -22px;
    padding: 10px 22px;
    border: none;
    border-radius: 0;
    transition: none;
}
.pley-hub-result-row:hover {
    transform: none;
    box-shadow: none;
}
.pley-hub-result-row:nth-child(even) { background: var(--ph-surface-2); }
.pley-hub-result-row:nth-child(odd)  { background: transparent; }

.pley-hub-result-row .pley-match-col--meta {
    grid-column: 1; justify-self: start;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-right: 0;
}
.pley-hub-result-teams {
    grid-column: 2;
    justify-self: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.pley-hub-result-teams .pley-hub-result-team { flex: 0 0 auto; justify-self: end; }
.pley-hub-result-teams .pley-hub-result-team--right { justify-self: start; }
.pley-hub-result-teams .pley-hub-result-score { justify-self: center; }
.pley-hub-result-stage {
    grid-column: 3;
    justify-self: end;
}
/* Rows with a Watch button use a 4-column grid so the button lands in a
   fixed rightmost column that stacks vertically across rows. Stage pill
   sits to the left of the button in column 3, right-aligned. */
.pley-hub-result-row:has(.pley-match-watch-btn) {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
}
.pley-hub-result-row:has(.pley-match-watch-btn) .pley-hub-result-stage {
    grid-column: 3;
    justify-self: end;
}
.pley-match-watch-btn {
    grid-column: 4;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: var(--ph-red);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ph-transition), transform var(--ph-transition);
}
.pley-match-watch-btn:hover {
    background: #ff6b7a;
    transform: translateY(-1px);
}
.pley-match-watch-btn svg { flex-shrink: 0; }
.pley-matches-day-group + .pley-matches-day-group {
    border-top: 1px solid var(--ph-border);
}

/* ── Columns ── */
.pley-match-col { display: flex; flex-direction: column; gap: 4px; }

/* Meta: time/live + format */
.pley-match-col--meta {
    align-items: flex-start;
    padding-right: 12px;
}
.pley-match-live-badge {
    font-size: 9px; font-weight: 800; letter-spacing: .06em;
    color: #fff; background: var(--ph-red);
    padding: 3px 7px; border-radius: 3px;
    width: fit-content;
}
.pley-match-time {
    font-size: 13px; font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.pley-match-format-pill {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ph-muted); background: rgba(255,255,255,.06);
    padding: 2px 6px; border-radius: 3px;
    width: fit-content;
}

/* Score colors (used inside .pley-hub-result-score) */
.pley-score-win { color: var(--ph-green); }
.pley-score-dim { color: var(--ph-muted); }
.pley-score-sep { color: var(--ph-subtle); font-size: 16px; font-weight: 700; }

/* ═════════════════════════════════════════════════════════════════════════
   RESULTS
═════════════════════════════════════════════════════════════════════════ */
.pley-hub-result-row .pley-hub-result-stage {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--ph-accent); background: var(--ph-accent-dim);
    padding: 5px 10px; border-radius: 4px;
    flex-shrink: 0; white-space: nowrap; width: fit-content;
    text-align: center;
}
.pley-hub-result-team {
    display: flex; align-items: center; gap: 7px;
    transition: opacity var(--ph-transition);
}
.pley-hub-result-team--right {
    flex-direction: row-reverse; text-align: right;
}
.pley-hub-result-team img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.pley-hub-result-team span { font-size: 13px; font-weight: 600; color: var(--ph-text); }

/* Universal team-logo tile — every team logo (match-row, pickems, bracket,
   ACF flex blades) renders inside a `.pley-team-logo-tile` wrapper so the
   visual language is identical across the design. PandaScore returns one
   logo per team (no light/dark variants); the tile gives the vast majority
   of logos enough contrast against gray-950 cards while reading as an
   intentional design element rather than a band-aid.

   Look: soft top-down gradient (brighter at top, fading to dim at bottom)
   for a polished-glass feel, 1px top-edge highlight = shimmer, 1px outline
   = container definition. Square with 5px radius. Padding insets the logo
   so it never crowds the tile edge. */
.pley-team-logo-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    padding: 3px;
    box-sizing: border-box;
    /* Warm-gray base built from PLEY's existing palette tokens
       (gray-100 #7E7D77 → gray-300 #52514C). Neutral enough not to
       clash with colored logos (FaZe orange, NaVi yellow, Vitality
       teal, etc.), light enough that dark/black logo silhouettes
       have strong contrast. Subtle white shimmer + inset highlight
       give it a polished metal-plate look that fits the warm-tinted
       dark palette of the rest of the hub. */
    background:
        /* Subtle top-fade shimmer — fades evenly so the bottom of the
           tile is just the flat base, no dark endpoint creating a
           ridge along the bottom edge. */
        linear-gradient(180deg,
            rgba(255,255,255,0.10) 0%,
            rgba(255,255,255,0)    60%),
        /* Flat warm-gray plate (between gray-200 #727169 and
           gray-300 #52514C). Previously a 160deg #7E7D77 → #52514C
           gradient — its dark bottom-right corner read as an extra
           thick line at the bottom of every tile. */
        #5C5B56;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 9px;
    flex-shrink: 0;
}
.pley-team-logo-tile img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}

/* Bracket cells — slightly smaller tile to fit the cell layout. */
.pley-hub-bracket-team-row .pley-team-logo-tile {
    width: 28px; height: 28px;
    padding: 2.5px;
    border-radius: 8px;
}

/* Pickems — smallest tile size in the design. */
.pley-hub-pickem-pick .pley-team-logo-tile {
    width: 20px; height: 20px;
    padding: 2px;
    border-radius: 6px;
}

.pley-hub-result-score {
    display: flex; align-items: center;
    font-family: var(--ph-mono); font-size: 16px; font-weight: 800;
    flex-shrink: 0; min-width: 44px; justify-content: center;
}

/* ═════════════════════════════════════════════════════════════════════════
   PICK'EMS
═════════════════════════════════════════════════════════════════════════ */
.pley-hub-pickem {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ph-border);
}
.pley-hub-pickem:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }

.pley-hub-pickem-header {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 6px;
}
.pley-hub-pickem-name {
    font-size: 12px; font-weight: 700; color: var(--ph-text);
    flex: 1;
}
.pley-hub-pickem-header-right {
    display: flex; align-items: center; gap: 6px;
}
.pley-hub-pickem-pts {
    font-family: var(--ph-mono); font-size: 11px; font-weight: 700;
    color: var(--ph-muted); background: rgba(255,255,255,.06);
    padding: 2px 6px; border-radius: 4px;
}
.pley-hub-pickem-pts--perfect {
    color: var(--ph-green); background: var(--ph-green-dim);
}
.pley-hub-pickem-badge {
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    padding: 3px 7px; border-radius: var(--ph-radius-xs);
}
.pley-hub-pickem-bar-wrap {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.pley-hub-pickem-bar {
    flex: 1; height: 3px;
    background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden;
}
.pley-hub-pickem-bar-fill {
    height: 100%; border-radius: 2px;
    background: linear-gradient(90deg, var(--ph-accent), rgba(241,136,5,0.5));
    transition: width .6s ease;
}
.pley-hub-pickem-pct {
    font-size: 10px; font-weight: 600; color: var(--ph-muted);
    font-family: var(--ph-mono); min-width: 30px; text-align: right;
}
.pley-hub-pickem-picks { display: flex; flex-wrap: wrap; gap: 6px; }

.pley-hub-pickem-pick {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--ph-surface-3); border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-sm); padding: 5px 8px;
    transition: border-color var(--ph-transition);
}
.pley-hub-pickem-pick img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.pley-hub-pickem-pick-name { font-size: 11px; font-weight: 700; color: var(--ph-text); }
.pley-hub-pickem-pick-role { font-size: 9px; color: var(--ph-muted); }

.pley-hub-pickem-icon { width: 12px; height: 12px; flex-shrink: 0; }
.pley-hub-pickem-icon--ok      { color: var(--ph-green); }
.pley-hub-pickem-icon--no      { color: var(--ph-red); }
.pley-hub-pickem-icon--pending { color: var(--ph-muted); }

/* ═════════════════════════════════════════════════════════════════════════
   LATEST NEWS
═════════════════════════════════════════════════════════════════════════ */
.pley-hub-news-list { display: flex; flex-direction: column; gap: 8px; }

.pley-hub-news-item {
    display: flex; gap: 12px; cursor: pointer;
    background: var(--ph-surface-2);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius);
    padding: 10px;
    transition: border-color var(--ph-transition), transform var(--ph-transition), box-shadow var(--ph-transition);
}
.pley-hub-news-item:hover,
.pley-hub-news-item:focus-visible {
    border-color: rgba(241,136,5,0.22);
    transform: translateY(-2px);
    box-shadow: var(--ph-shadow-hover);
    outline: none;
}

.pley-hub-news-thumb {
    position: relative; width: 84px; height: 56px; flex-shrink: 0;
    border-radius: var(--ph-radius-sm); overflow: hidden; background: var(--ph-surface-3);
}
.pley-hub-news-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .25s ease;
}
.pley-hub-news-item:hover .pley-hub-news-thumb img { transform: scale(1.05); }
.pley-hub-news-cat {
    position: absolute; bottom: 4px; left: 4px;
    font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    background: rgba(0,0,0,.8); color: var(--ph-accent);
    padding: 2px 6px; border-radius: var(--ph-radius-xs);
}

.pley-hub-news-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.pley-hub-news-meta {
    display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.pley-hub-news-source {
    font-size: 9px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: var(--ph-accent);
}
.pley-hub-news-date {
    font-size: 10px; color: var(--ph-subtle); font-family: var(--ph-mono);
    margin-left: auto;
}
.pley-hub-news-title {
    font-size: 12px; font-weight: 600; color: var(--ph-text);
    line-height: 1.4; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* ═════════════════════════════════════════════════════════════════════════
   PLAYER RATINGS
═════════════════════════════════════════════════════════════════════════ */
.pley-hub-ratings-list { display: flex; flex-direction: column; }

.pley-hub-rating-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 22px;
    margin: 0 -22px;
    border-bottom: none;
    border-radius: 0;
    transition: background var(--ph-transition);
}
.pley-hub-rating-row:nth-child(even),
.pley-hub-rating-row:nth-child(even):hover { background: var(--ph-surface-2); }
.pley-hub-rating-row:nth-child(odd),
.pley-hub-rating-row:nth-child(odd):hover  { background: transparent; }
.pley-hub-section:has(.pley-hub-ratings-list) { overflow-x: hidden; }

.pley-hub-rating-rank {
    font-family: var(--ph-mono); font-size: 11px; font-weight: 700;
    color: var(--ph-subtle); width: 16px; text-align: center; flex-shrink: 0;
}
.pley-hub-rating-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ph-surface-3); border: 1px solid var(--ph-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--ph-accent);
    flex-shrink: 0; font-family: var(--ph-mono);
}
.pley-hub-rating-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pley-hub-rating-name { font-size: 13px; font-weight: 600; color: var(--ph-text); }
.pley-hub-rating-team {
    font-size: 10px; color: var(--ph-muted);
    text-transform: uppercase; letter-spacing: .05em;
}
.pley-hub-rating-stat {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 1px; flex-shrink: 0; min-width: 42px;
}
.pley-hub-rating-val {
    font-family: var(--ph-mono); font-size: 13px; font-weight: 700; color: var(--ph-text);
}
.pley-hub-rating-lbl {
    font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--ph-subtle);
}

/* ═════════════════════════════════════════════════════════════════════════
   BRACKET — SHARED
   Columns, cells, team rows. Used by every format renderer via
   PLEY_Hub_Bracket_Cell + the column markup. Format-specific styling
   (groups, sides, Swiss rounds, …) lives in its own section below.
═════════════════════════════════════════════════════════════════════════ */
.pley-hub-bracket-section { padding-bottom: 8px; }

/* Columns flow left-to-right with fixed width so a single-round bracket
   (e.g. Lower Final) keeps its natural size instead of stretching to fill
   the row. Wraps to a new line at narrow widths. */
.pley-hub-bracket-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.pley-hub-bracket-column {
    flex: 0 1 220px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pley-hub-bracket-column-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ph-text);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* flex: 1 + justify-content: center lets a short round (e.g. single Upper
   final) vertically centre its match against a taller neighbour column. */
.pley-hub-bracket-column-matches {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

/* ── Cell ─────────────────────────────────────────────────────────────── */
.pley-hub-bracket-cell {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pley-hub-bracket-cell--scheduled { opacity: 0.94; }

.pley-hub-bracket-cell-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    color: var(--ph-muted);
    letter-spacing: 0.02em;
}
.pley-hub-bracket-cell-time {
    white-space: nowrap;
}
.pley-hub-bracket-cell-format {
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    color: var(--ph-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pley-hub-bracket-cell-teams {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Team row inside a cell ──────────────────────────────────────────── */
/* Explicit `display: flex` + non-display: none on `.pley-hub-bracket-team-name`
   protects us from the legacy `.pley-hub-result-team span { display:none }`
   blanket hide even if class names accidentally collide later. */
.pley-hub-bracket-team-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    min-width: 0;
}
.pley-hub-bracket-team-logo {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 2px;
}
.pley-hub-bracket-team-logo--placeholder {
    display: inline-block;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.08);
}
.pley-hub-bracket-team-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ph-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pley-hub-bracket-team-score {
    flex-shrink: 0;
    font-family: var(--ph-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--ph-muted);
    min-width: 14px;
    text-align: right;
}

.pley-hub-bracket-team-row--winner {
    background: var(--ph-green-dim);
    border-radius: 3px;
    padding-left: 4px;
    padding-right: 4px;
    margin: 0 -4px;
}
.pley-hub-bracket-team-row--winner .pley-hub-bracket-team-name,
.pley-hub-bracket-team-row--winner .pley-hub-bracket-team-score { color: var(--ph-green); }

.pley-hub-bracket-team-row--loser {
    background: var(--ph-red-dim);
    border-radius: 3px;
    padding-left: 4px;
    padding-right: 4px;
    margin: 0 -4px;
}
.pley-hub-bracket-team-row--loser .pley-hub-bracket-team-name,
.pley-hub-bracket-team-row--loser .pley-hub-bracket-team-score { color: var(--ph-red); }
.pley-hub-bracket-team-row--loser .pley-hub-bracket-team-logo  { opacity: 0.7; }

.pley-hub-bracket-team-row--tbd    .pley-hub-bracket-team-name  { color: var(--ph-subtle); font-style: italic; font-weight: 500; }

/* ═════════════════════════════════════════════════════════════════════════
   BRACKET — GSL GROUP FORMAT  (PLEY_Hub_Bracket_GSL_Group)
   Two groups side by side; each group has an Upper Bracket (rounds) and
   a Lower Bracket. Scoped under .pley-hub-bracket-section--gsl-group so
   future formats can reuse the shared column/cell styling without
   inheriting the 2-column group grid.
═════════════════════════════════════════════════════════════════════════ */
.pley-hub-bracket-section--gsl-group .pley-hub-bracket-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0 4px 4px;
}

.pley-hub-bracket-section--gsl-group .pley-hub-bracket-group {
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-lg);
    padding: 14px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pley-hub-bracket-section--gsl-group .pley-hub-bracket-group-head h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--ph-text);
    letter-spacing: 0.01em;
}

.pley-hub-bracket-section--gsl-group .pley-hub-bracket-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pley-hub-bracket-section--gsl-group .pley-hub-bracket-side-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ph-muted);
}

/* On narrow viewports stack the two groups. */
@media (max-width: 900px) {
    .pley-hub-bracket-section--gsl-group .pley-hub-bracket-groups {
        grid-template-columns: 1fr;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   HIGHLIGHTS GRID
═════════════════════════════════════════════════════════════════════════ */
/* Standard highlights grid (16:9) */
.pley-hub-highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: min-content;
    align-items: start;
    gap: 16px;
}

/* Shorts grid (9:16 vertikalt) */
.pley-hub-highlight-grid--shorts {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.pley-hub-highlight-card {
    background: var(--ph-surface-2);
    border-radius: var(--ph-radius-sm);
    overflow: hidden; cursor: pointer;
    transition: transform var(--ph-transition), background var(--ph-transition), box-shadow var(--ph-transition);
}
.pley-hub-highlight-card:hover,
.pley-hub-highlight-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--ph-shadow-hover);
    outline: none;
}

/* Standard 16:9 thumbnail */
.pley-hub-highlight-thumb {
    position: relative; aspect-ratio: 16/10;
    overflow: hidden; background: #000;
    /* Force new stacking context so the centre play badge paints above the
       YouTube iframe (iframes often escape plain z-index). */
    isolation: isolate;
}
/* Shorts: 9:16 thumbnail */
.pley-hub-highlight-grid--shorts .pley-hub-highlight-thumb {
    aspect-ratio: 9/16;
}

.pley-hub-highlight-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .3s ease, opacity .3s ease;
}

/* Preview container */
.pley-hub-highlight-preview {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.pley-hub-highlight-preview iframe {
    position: absolute;
    width: 100%; height: 175%;
    top: -37.5%; left: 0;
    border: none;
    pointer-events: none;
}
/* Hide the static thumbnail once the iframe is in the DOM. */
.pley-hub-highlight-card:has(.pley-hub-highlight-preview iframe) .pley-hub-highlight-thumb > img {
    opacity: 0;
}
/* Thumbnail zoom ved hover (inden preview loades) */
.pley-hub-highlight-card:hover .pley-hub-highlight-thumb > img {
    transform: scale(1.03);
}


/* Uniform dark tint over the whole card so the badge has consistent
   contrast and all four cards share the same apparent brightness. */
.pley-hub-highlight-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    pointer-events: none;
    z-index: 4;
}

/* Permanent centre "play" badge using the Pley favicon. Sits above the
   iframe and dim overlay (z-index 5) and physically covers YouTube's
   intermittent Shorts pause/hint overlay. */
.pley-hub-highlight-play {
    position: absolute;
    inset: auto;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    opacity: 1;
    z-index: 5;
    pointer-events: none;
    transition: background var(--ph-transition), transform var(--ph-transition), border-color var(--ph-transition);
}
.pley-hub-highlight-play img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.pley-hub-highlight-card:hover .pley-hub-highlight-play {
    background: var(--ph-accent);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.06);
}

.pley-hub-highlight-duration {
    position: absolute; bottom: 8px; right: 8px; z-index: 3;
    font-size: 11px; font-weight: 700;
    background: rgba(0,0,0,0.8); color: #fff;
    padding: 3px 7px; border-radius: var(--ph-radius-xs);
    font-variant-numeric: tabular-nums;
}
.pley-hub-highlight-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.pley-hub-highlight-title {
    font-size: 13px; font-weight: 600; color: var(--ph-text);
    line-height: 1.35; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
/* Shorts-kort: lidt mindre da kolonner er smalle */
.pley-hub-highlight-grid--shorts .pley-hub-highlight-title {
    font-size: 12px; -webkit-line-clamp: 3;
}
.pley-hub-highlight-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet  ≤ 1024px
═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .pley-hub-overview { grid-template-columns: 1fr 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE — small desktop / large tablet  ≤ 1280px
   Clips get smaller and pull back from centre
═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .pley-hub-hero-clip { width: clamp(140px, 12vw, 200px); }
    /* Tighter orbit so clips don't drift over hero text */
    .pley-hub-hero-clip[data-clip-idx="0"] { top: 6%;  left: 20%; }
    .pley-hub-hero-clip[data-clip-idx="1"] { top: 52%; left: 62%; }
    .pley-hub-hero-clip[data-clip-idx="2"] { top: 65%; left: 18%; }
    .pley-hub-hero-clip[data-clip-idx="3"] { top: 10%; left: 60%; }
    .pley-hub-hero-clip[data-clip-idx="4"] { top: 38%; left: 14%; }
    .pley-hub-hero-clip[data-clip-idx="5"] { top: 28%; left: 65%; }

    /* Tighter hero body so content fits on shorter viewports */
    .pley-hub-hero { padding-top: clamp(32px, 5vh, 72px); }
    .pley-hub-hero-body { padding: clamp(32px, 5vh, 64px) 32px clamp(48px, 7vh, 72px); gap: 12px; }
    .pley-hub-hero-strip-item { padding: 12px 10px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile landscape  ≤ 860px
═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    .pley-hub-inner { padding: 0 16px; }
    .pley-hub-overview {
        grid-template-columns: 1fr;
    }
    .pley-hub-highlight-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pley-hub-stream-layout { grid-template-columns: 1fr 220px; }

    /* Hero */
    .pley-hub-hero { padding-top: clamp(32px, 5vh, 56px); }
    .pley-hub-hero-body { padding: 40px 20px 72px; gap: 16px; }
    .pley-hub-hero-strip { max-width: 100%; }
    .pley-hub-hero-strip-item { flex: 1 0 auto; padding: 12px 14px; }
    .pley-hub-hero-logo { width: clamp(180px, 38vw, 300px); margin-bottom: 0; }
    .pley-hub-hero-sponsor { margin-top: 0; }
    .pley-hub-sponsor-logo { height: 68px; }
    .pley-hub-scroll-hint { bottom: 24px; padding: 11px 22px 11px 18px; font-size: 12px; }

    /* Clips: hide on tablet — not enough space */
    .pley-hub-hero-clips { display: none; }

    /* Shorts grid: 2 kolonner på tablet */
    .pley-hub-highlight-grid--shorts { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile portrait  ≤ 600px
═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .pley-hub-hero {
        min-height: 100svh;
        padding-top: clamp(20px, 3vh, 36px);
        justify-content: center;
    }
    .pley-hub-hero-body {
        padding: 20px 16px 80px; /* bottom room for scroll button */
        gap: 12px;
        align-items: center;
    }

    .pley-hub-hero-logo {
        width: clamp(140px, 48vw, 240px);
        margin-bottom: 0;
    }
    .pley-hub-hero-title { font-size: clamp(20px, 6.5vw, 32px); margin-bottom: 0; text-align: center; }

    /* Stats strip: horizontal scroll on mobile — one compact row */
    .pley-hub-hero-strip {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-radius: var(--ph-radius);
        width: 100%;
        margin-bottom: 0;
    }
    .pley-hub-hero-strip::-webkit-scrollbar { display: none; }
    .pley-hub-hero-strip-item {
        flex: 0 0 auto;
        padding: 10px 16px;
        border-right: 1px solid var(--ph-border);
        border-bottom: none;
        text-align: center;
        min-width: 100px;
    }
    .pley-hub-hero-strip-item:last-child { border-right: none; }
    .pley-hub-strip-label { justify-content: center; margin-bottom: 3px; }
    .pley-hub-strip-value { font-size: 11px; white-space: nowrap; }

    /* Sponsor */
    .pley-hub-hero-sponsor { margin-top: 0; }
    .pley-hub-sponsor-logo { height: 52px; }

    /* Scroll button */
    .pley-hub-scroll-hint {
        bottom: 20px;
        padding: 10px 20px 10px 16px;
        font-size: 11px;
    }

    /* Tab nav — scrollable on mobile */
    .pley-hub-nav { padding: 10px 12px; }
    .pley-hub-nav-inner {
        overflow-x: auto;
        overflow-y: hidden;
        gap: 2px;
        padding: 0 8px;
        height: 44px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .pley-hub-nav-inner::-webkit-scrollbar { display: none; }

    .pley-hub-tab {
        scroll-snap-align: start;
        flex-shrink: 0;
        padding: 0 12px;
        height: 34px;
        gap: 6px;
    }

    .pley-hub-panels { padding-top: 20px; padding-bottom: 40px; }

    .pley-hub-stream-layout { grid-template-columns: 1fr; }
    .pley-hub-highlight-grid { grid-template-columns: 1fr; gap: 10px; }
    /* Shorts: horizontal scroller on mobile — all 4 cards side by side with
       swipe-to-see-more rather than wrapping or hiding. */
    .pley-hub-highlight-grid--shorts {
        display: flex;
        grid-template-columns: none;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .pley-hub-highlight-grid--shorts::-webkit-scrollbar { display: none; }
    .pley-hub-highlight-grid--shorts > .pley-hub-highlight-card {
        flex: 0 0 52%;
        scroll-snap-align: start;
    }

    .pley-hub-section { padding: 16px; }

    .pley-hub-bracket-section--gsl-group .pley-hub-bracket-group { padding: 12px; gap: 12px; }
    .pley-hub-bracket-team-name { font-size: 11px; }

    /* Nav brand: drop the secondary subtitle + divider on mobile, shrink logo
       and tighten the gap so the brand block doesn't crowd the tabs. */
    .pley-hub-nav-inner { gap: 10px; min-height: 44px; padding: 4px 14px; }
    .pley-hub-nav-brand { gap: 8px; }
    .pley-hub-nav-logo  { width: 26px; height: 26px; }
    .pley-hub-nav-title { font-size: 14px; letter-spacing: 0.08em; }
    .pley-hub-nav-divider,
    .pley-hub-nav-subtitle { display: none; }

    /* Section headers: slightly larger title + tighter spacing. */
    .pley-section-header { padding: 14px; gap: 8px; }
    .pley-section-header h3 { font-size: 14px; }
    .pley-section-header .pley-hub-btn { padding: 6px 12px; font-size: 11px; }

    /* Overview/result rows: reduce gap and drop the right-side stage pill so
       the meta + teams fit comfortably; keep teams centred. */
    .pley-hub-result-row {
        grid-template-columns: auto 1fr;
        margin: 0 -16px;
        padding: 10px 16px;
        gap: 10px;
    }
    .pley-hub-result-row .pley-hub-result-stage { display: none; }
    .pley-hub-result-row .pley-hub-result-teams { grid-column: 2; justify-self: center; }
    /* Live rows on mobile: meta + teams span both rows on the left; stage
       goes top-right, Watch bottom-right, so they stack in a narrow column. */
    .pley-hub-result-row:has(.pley-match-watch-btn) {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        row-gap: 4px;
    }
    .pley-hub-result-row:has(.pley-match-watch-btn) .pley-match-col--meta,
    .pley-hub-result-row:has(.pley-match-watch-btn) .pley-hub-result-teams {
        grid-row: 1 / span 2;
    }
    .pley-hub-result-row:has(.pley-match-watch-btn) .pley-hub-result-stage {
        display: inline-flex;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
    .pley-match-watch-btn {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        padding: 5px 10px;
        font-size: 10px;
    }
    .pley-match-time { font-size: 12px; }
    .pley-match-format-pill { font-size: 8px; padding: 2px 5px; }

    /* Day-group headers: edge-to-edge match the new row padding. */
    .pley-matches-day-header { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }

    /* News tab sidebar thumbnails get smaller on mobile so the title column
       keeps enough width to breathe. */
    .pley-news-feature-sidebar-thumb { width: 110px; height: 70px; }
    .pley-news-feature-hero { min-height: 280px; }
    .pley-news-feature-hero-title { font-size: 22px; }

    /* Player ratings: compact avatar + stats so row fits on narrow viewports. */
    .pley-hub-rating-row { padding: 10px 14px; gap: 10px; }
    .pley-hub-rating-avatar { width: 28px; height: 28px; font-size: 10px; }
    .pley-hub-rating-name { font-size: 12px; }
    .pley-hub-rating-team { font-size: 10px; }
    .pley-hub-rating-val { font-size: 13px; }
    .pley-hub-rating-lbl { font-size: 8px; }

    /* Drop decorative hero video-clips — already hidden on tablet, reinforce
       here in case something overrode it. Legacy cards also hidden to reduce
       CPU cost on small devices. */
    .pley-hub-hero-clips,
    .pley-hub-hero-legacy { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   YOUTUBE SHORTS CARD
═════════════════════════════════════════════════════════════════════════ */
.pley-hub-highlight-card--yt { cursor: pointer; }

/* Shorts sektion — øverst, ingen top-margin */
.pley-hub-section--shorts { margin-top: 0; margin-bottom: 14px; }

/* Shorts header: større og mere fremtrædende end normale sektioner */
.pley-hub-section--shorts .pley-section-header {
    padding-bottom: 18px;
    flex-wrap: wrap;       /* wrap på små skærme så knap ikke overflower */
    row-gap: 10px;
}
/* På meget små skærme: knap på sin egen linje */
@media (max-width: 480px) {
    /* Hero: smaller title, drop sponsor pill (space-saver). */
    .pley-hub-hero-title { font-size: clamp(18px, 6vw, 24px); }
    .pley-hub-hero-sponsor { display: none; }

    /* Inner padding tighter. */
    .pley-hub-inner { padding: 0 12px; }
    .pley-hub-section { padding: 14px; border-radius: var(--ph-radius); }

    /* Tabs icons only, smaller labels, tighter spacing. */
    .pley-hub-tab { padding: 0 10px; height: 34px; font-size: 12px; gap: 4px; }
    .pley-hub-tab-label { font-size: 12px; }
    .pley-hub-tab-count { font-size: 9px; padding: 1px 4px; }

    /* News tab: hero min-height shorter so hero doesn't dominate. */
    .pley-news-feature-hero { min-height: 260px; }
    .pley-news-feature-hero-title { font-size: 20px; }
    .pley-news-feature-hero-content { left: 16px; right: 16px; bottom: 16px; }

    /* News tab sidebar items: stack thumbnail + text vertically. */
    .pley-news-feature-sidebar-item { gap: 10px; padding: 12px 0; }
    .pley-news-feature-sidebar-thumb { width: 96px; height: 60px; }
    .pley-news-feature-sidebar-item-title { font-size: 13px; }

    /* News cards: tighter padding. */
    .pley-news-card-body { padding: 14px 14px 16px; gap: 8px; }
    .pley-news-card-title { font-size: 15px; }

    /* Streams section: thumb + info tighter. */
    .pley-hub-stream-info { padding: 8px 12px; gap: 6px; }
    .pley-hub-stream-name { font-size: 11px; }
    .pley-hub-stream-viewers { font-size: 10px; }

    /* Shorts horizontal scroller inherited from 600px rule — shrink each
       card slightly so two cards peek at the same time. */
    .pley-hub-highlight-grid--shorts > .pley-hub-highlight-card { flex: 0 0 62%; }

    /* Player ratings: hide the Maps stat (last of 3) to keep Rating + ADR. */
    .pley-hub-rating-row .pley-hub-rating-stat:last-child { display: none; }

    /* Overview day-group headers: tighter. */
    .pley-matches-day-header { font-size: 10px; padding: 10px 12px 8px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; }

    /* Result row ultra-compact. */
    .pley-hub-result-row { margin: 0 -14px; padding: 8px 14px; gap: 8px; }
    .pley-hub-result-team img { width: 18px; height: 18px; }
    .pley-hub-result-team .pley-team-logo-tile {
        width: 22px; height: 22px;
        padding: 2px; border-radius: 7px;
    }
    .pley-hub-result-team span { font-size: 12px; }

    /* Scroll hint: shorter so it doesn't cover a lot of hero. */
    .pley-hub-scroll-hint { bottom: 16px; padding: 8px 16px 8px 12px; font-size: 10px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   YOUTUBE SHORTS MODAL
═════════════════════════════════════════════════════════════════════════ */
.pley-yt-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.pley-yt-modal[hidden] { display: none; }

.pley-yt-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pley-yt-modal-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: 12px;
    padding: 0;
    width: min(420px, 92vw); /* Shorts: 9:16 → ~420px wide */
}

/* Stream variant: wide 16:9 so Twitch/YouTube serve their desktop layout. */
.pley-yt-modal--stream .pley-yt-modal-content {
    width: min(1280px, 92vw);
}
.pley-yt-modal--stream .pley-yt-modal-frame-wrap {
    aspect-ratio: 16 / 9;
    max-height: 82vh;
}

.pley-yt-modal-close {
    align-self: flex-end;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #fff; padding: 0;
    transition: background .15s, border-color .15s;
}
.pley-yt-modal-close:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.3); }
.pley-yt-modal-close svg { width: 16px; height: 16px; }

.pley-yt-modal-frame-wrap {
    width: 100%;
    aspect-ratio: 9 / 16; /* Vertical Shorts format */
    border-radius: var(--ph-radius-lg);
    overflow: hidden;
    background: #000;
    box-shadow: 0 24px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
}
.pley-yt-modal-frame-wrap iframe {
    width: 100%; height: 100%;
    border: none; display: block;
}

/* ═════════════════════════════════════════════════════════════════════════
   NEWS — Shared components
═════════════════════════════════════════════════════════════════════════ */

/* Orange pill badge */
.pley-news-badge {
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    background: var(--ph-accent); color: #000;
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
    line-height: 1.4;
    white-space: nowrap;
    /* Prevent badge from stretching in flex-column parents */
    align-self: flex-start;
    width: fit-content;
}

/* Date + author meta line */
.pley-news-meta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--ph-muted);
    flex-wrap: nowrap;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pley-news-meta svg { flex-shrink: 0; color: var(--ph-subtle); }

/* Live/Upcoming/Results rows wrapper (stacks matches vertically) */
.pley-news-rows {
    display: flex; flex-direction: column; gap: 6px;
}

/* ═════════════════════════════════════════════════════════════════════════
   NEWS TAB — hero + featured sidebar + 3-col card grid
   ═════════════════════════════════════════════════════════════════════════ */

.pley-news-featured-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 14px;
    align-items: stretch;
}
.pley-news-featured-grid > * { min-width: 0; }

/* Hide category pills ("PGL Bucharest Major 2026" etc.) on news tab */
.pley-news-featured-section .pley-news-badge,
.pley-news-card .pley-news-badge { display: none; }

/* ── Hero (left) ─────────────────────────────────────────── */
.pley-news-feature-hero {
    position: relative;
    width: 100%;
    border-radius: var(--ph-radius-lg);
    overflow: hidden;
    background: var(--ph-surface-3);
    display: block;
    text-decoration: none;
    color: inherit;
    min-height: 360px;
}
.pley-news-feature-hero img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.pley-news-feature-hero:hover img { transform: scale(1.04); }
.pley-news-feature-hero-title { transition: color var(--ph-transition); }
.pley-news-feature-hero:hover .pley-news-feature-hero-title { color: var(--ph-accent); }
.pley-news-feature-hero-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}
.pley-news-feature-hero-badge {
    position: absolute;
    top: 18px; left: 18px;
    z-index: 2;
}
.pley-news-feature-hero-content {
    position: absolute;
    left: 24px; right: 24px; bottom: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}
.pley-news-feature-hero-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin: 0;
    max-width: 80%;
    text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.pley-news-feature-hero-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background var(--ph-transition), border-color var(--ph-transition);
}
.pley-news-feature-hero:hover .pley-news-feature-hero-btn {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.6);
}

/* ── Featured sidebar (right) — flat list with dividers, matches overview Latest News ── */
.pley-news-feature-sidebar {
    display: flex;
    flex-direction: column;
}
.pley-news-feature-sidebar-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    flex: 1;
}
.pley-news-feature-sidebar-item {
    display: flex;
    gap: 14px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 14px 0;
    border-bottom: 1px solid var(--ph-border);
}
.pley-news-feature-sidebar-item:first-child { padding-top: 0; }
.pley-news-feature-sidebar-item:last-child { padding-bottom: 0; border-bottom: none; }
.pley-news-feature-sidebar-item:hover .pley-news-feature-sidebar-item-title {
    color: var(--ph-accent);
}
.pley-news-feature-sidebar-thumb {
    width: 140px; height: 88px;
    border-radius: var(--ph-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--ph-surface-3);
}
.pley-news-feature-sidebar-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.pley-news-feature-sidebar-item:hover img { transform: scale(1.04); }
.pley-news-feature-sidebar-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    min-width: 0;
}
.pley-news-feature-sidebar-body .pley-news-meta { order: 1; }
.pley-news-feature-sidebar-item-title {
    order: 2;
    font-size: 14px;
    font-weight: 700;
    color: var(--ph-text);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--ph-transition);
}

/* ── 3-col card grid (below featured) ───────────────────── */
.pley-news-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 14px;
}
.pley-news-card {
    background: var(--ph-surface-2);
    border-radius: var(--ph-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.pley-news-card-title { transition: color var(--ph-transition); }
.pley-news-card:hover .pley-news-card-title { color: var(--ph-accent); }
.pley-news-card-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--ph-surface-3);
}
.pley-news-card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.pley-news-card:hover .pley-news-card-image img { transform: scale(1.04); }
.pley-news-card-badge {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
}
.pley-news-card-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    align-items: flex-start;
}
.pley-news-card-body .pley-news-meta {
    font-size: 12px;
    color: var(--ph-muted);
}
.pley-news-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ph-text);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    align-self: stretch;
}
.pley-news-card-excerpt {
    font-size: 13px;
    color: var(--ph-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    align-self: stretch;
}

@media (max-width: 900px) {
    .pley-news-featured-grid { grid-template-columns: 1fr; }
    .pley-news-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pley-news-card-grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .pley-hub-scroll-hint,
    .pley-live-dot,
    .pley-hub-highlight-card,
    .pley-hub-stream-thumb img,
    .pley-hub-highlight-thumb img { animation: none; transition: none; }
    /* Skjul preview-containere — JS loader heller ikke iframes (se JS-tjek) */
    .pley-hub-highlight-preview { display: none; }
}

/* ── Empty / unavailable state — used when PandaScore returns no data ── */
.pley-hub-section--empty .pley-hub-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: rgba(255,255,255,.5);
    text-align: center;
}
.pley-hub-section--empty .pley-hub-empty svg {
    width: 28px;
    height: 28px;
    opacity: .6;
}
.pley-hub-section--empty .pley-hub-empty p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    max-width: 360px;
}

/* Hero placeholder — no tournament configured. */
.pley-hub-hero--empty .pley-hub-hero-body {
    max-width: 560px;
    text-align: center;
}
.pley-hub-hero--empty .pley-hub-hero-title {
    opacity: .7;
}
.pley-hub-hero-empty-msg {
    color: rgba(255,255,255,.55);
    font-size: 14px;
    line-height: 1.6;
    margin: 14px 0 0;
}
.pley-hub-hero-empty-msg strong { color: rgba(255,255,255,.85); }

/* ── Team logo fallback ─────────────────────────────────────────────── */
/* Plain "TBD" text in place of a logo when PandaScore hasn't decided the
   team yet. Scoped under .pley-hub-result-team so it overrides the
   legacy `.pley-hub-result-team span { display: none }` blanket hide. */
.pley-hub-result-team .pley-team-logo-fallback {
    display: inline-flex;
    align-items: center;
    width: 22px;
    height: 22px;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ph-subtle, rgba(255,255,255,.55));
    flex-shrink: 0;
}
.pley-hub-result-team .pley-team-logo-fallback-text {
    display: inline-block;
}
.pley-hub-result-team .pley-team-logo-fallback--tbd {
    color: var(--ph-accent, rgba(255,158,42,.9));
}


/* ─────────────────────────────────────────────────────────────────
   TEMPERED-GLASS LAYER (shared across Major Hub blades)
   ─────────────────────────────────────────────────────────────────
   Three depth tiers with brand-orange whispers + inset highlights
   + outer drop shadows. Layered OVER bg-gray-dark / bg-gray-black
   utility classes (background-image paints over background-color so
   the token still acts as fallback). Apply via stable class hooks
   on any hub blade element so the visual language stays uniform
   across streams, ratings, matches, news, highlights, skins, bracket.
   ───────────────────────────────────────────────────────────────── */

/* LYS outer surface — section cards. Diagonal gradient with a
   brand whisper at the top-left corner. NO inset top highlight: the
   white sliver renders BELOW the existing border-2 and visually
   thickens the top edge. Outer drop-shadow only. */
.pley-hub-glass--outer {
    background-image: linear-gradient(160deg,
        rgba(241,136,5,0.08) 0%,
        rgba(255,255,255,0.04) 30%,
        rgba(0,0,0,0.22) 100%);
    box-shadow: 0 8px 32px -8px rgba(0,0,0,0.50);
}

/* MØRK well — middle layer. Vertical gradient that deepens toward
   the bottom with a brand whisper near the top rim. */
.pley-hub-glass--well {
    background-image: linear-gradient(180deg,
        rgba(241,136,5,0.06) 0%,
        rgba(255,255,255,0.04) 18%,
        rgba(0,0,0,0.28) 100%);
    box-shadow: 0 6px 20px -6px rgba(0,0,0,0.60);
}

/* LYS innermost cell — bracket match cells + skin item cards. */
.pley-hub-glass--cell {
    background-image: linear-gradient(165deg,
        rgba(241,136,5,0.07) 0%,
        rgba(255,255,255,0.05) 25%,
        rgba(0,0,0,0.18) 100%);
    box-shadow: 0 2px 10px -2px rgba(0,0,0,0.45);
}

/* ── Hub navigation tabs (header tabs, section sub-tabs, skins
   category filter tabs) ─────────────────────────────────────────
   Pill-style buttons get a brand whisper on hover and tempered-glass
   treatment when active. Skins category tabs already have bg-brand
   from Tailwind on aria-selected — we layer a white→dark highlight
   gradient + brand glow on top so the loud orange gets polished
   without losing its visual weight. */
.pley-mhh-tabs button[role="tab"],
.pley-flex-tabs button[role="tab"],
.pley-major-skins-tabs button[role="tab"] {
    transition: background-color 0.18s ease,
                color 0.18s ease,
                border-color 0.18s ease,
                box-shadow 0.22s ease;
}
.pley-mhh-tabs button[role="tab"]:hover:not([aria-selected="true"]),
.pley-flex-tabs button[role="tab"]:hover:not([aria-selected="true"]),
.pley-major-skins-tabs button[role="tab"]:hover:not([aria-selected="true"]) {
    background-image: linear-gradient(135deg,
        rgba(241,136,5,0.10) 0%,
        rgba(241,136,5,0.02) 100%);
    border-color: rgba(241,136,5,0.35);
}
/* Header + flex tabs (no solid bg from Tailwind on active) — use
   transparent brand gradient as the active fill. */
/* Generic brand-orange active treatment for the hub-nav tabs.
   Uses INSET shadows (not an outer glow) so the orange halo can't
   be clipped by the parent .pley-mhh-tabs scroll container — its
   `overflow-x: auto` silently rewrites overflow-y to auto in every
   modern browser, clipping outer box-shadows at the strip's
   rectangular edges. Inset shadow paints inside the pill, immune
   to that clip and follows the pill's border-radius cleanly.
   Scoped to NOT (.pley-mhh-tab--csmoney) so the cs.money pill keeps
   its own brand-pink gradient (cs.money active state mirrors this
   inset treatment but with its own colour palette — see
   major-hub-header.blade.php's <style>). */
.pley-mhh-tabs button[role="tab"][aria-selected="true"]:not(.pley-mhh-tab--csmoney),
.pley-flex-tabs button[role="tab"][aria-selected="true"]:not(.pley-mhh-tab--csmoney) {
    background-image: linear-gradient(135deg,
        rgba(241,136,5,0.32) 0%,
        rgba(212,118,0,0.18) 100%);
    color: #F18805;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 0 0 1px rgba(241,136,5,0.55),
        inset 0 0 10px rgba(241,136,5,0.35);
}
/* Skins category tabs — Tailwind's aria-selected:bg-brand renders a
   solid orange fill underneath; we add a subtle white→dark highlight
   overlay (gives the pill a "lit pill" look) plus a brand outer glow. */
.pley-major-skins-tabs button[role="tab"][aria-selected="true"] {
    background-image: linear-gradient(135deg,
        rgba(255,255,255,0.14) 0%,
        rgba(255,255,255,0.04) 45%,
        rgba(0,0,0,0.10) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 0 22px -4px rgba(241,136,5,0.50);
}


/* ─────────────────────────────────────────────────────────────────
   PILL CHIPS (format / stage badges in matches + bracket cells)
   ───────────────────────────────────────────────────────────────── */

/* Format pill — BO3 / BO5 / BO1. Neutral glass: white-tinted gradient
   + inset top highlight for the polished tempered-glass look. Reads
   as secondary metadata, not as a status badge. */
.pley-hub-pill--format {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88);
    padding: 3px 8px;
    border-radius: 5px;
    background-image: linear-gradient(135deg,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.025) 100%);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 1px 4px -1px rgba(0,0,0,0.30);
    white-space: nowrap;
    line-height: 1;
}

/* Stage pill — QUARTERFINAL / SEMIFINAL / FINAL / GROUP / PLAYOFFS
   etc. Brand-tinted glass: orange gradient + brand border + subtle
   brand glow. Reads as a status badge tying the row to the round. */
.pley-hub-pill--stage {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.95);
    padding: 3px 8px;
    border-radius: 5px;
    background-image: linear-gradient(135deg,
        rgba(241,136,5,0.22) 0%,
        rgba(212,118,0,0.08) 100%);
    border: 1px solid rgba(241,136,5,0.38);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 2px 8px -2px rgba(241,136,5,0.25);
    white-space: nowrap;
    line-height: 1;
}

/* ── Major Hub sidebar sponsor banners ─────────────────────────────
 *
 * Visibility is driven from the plugin's own stylesheet (not Tailwind
 * utilities) because the theme's compiled bundle loads after the
 * plugin and ships `.hidden { display: none }` which would win the
 * cascade against a plugin-only arbitrary class like
 * `[@media(min-width:1700px)]:block`. Scoping the rules to the
 * `.major-hub-sidebars` class gives us a stable hook that doesn't
 * compete with theme utilities.
 *
 * Breakpoint: 1700px — under that, content-container + 14rem sidebars
 * + 1rem gap overflow horizontally, so we hide rather than overlap.
 */
.major-hub-sidebars {
    display: none;
}
@media (min-width: 1700px) {
    .major-hub-sidebars {
        display: block;
    }
}