/* =====================================================================
   DARK ABISHAI — REDESIGN LAYER  "PHOSPHOR // ретро-аркадный терминал"
   2026-06-03 · additive override layer, loaded LAST on every public page.
   Reversible: remove the <link> to restore the previous look.
   Strategy: re-define design tokens (most components use var() → instant
   reskin) + layer cartridge/CRT component refinements on top.
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS ---------------------------------------- */
:root {
    /* Deeper, richer field so phosphor accents bloom */
    --bg-dark: #06060c;
    --bg-surface: #0e0e18;
    --bg-card: #14141f;
    --bg-elev: #1b1b29;

    /* Dual-accent duotone: arcade violet + treasure amber, phosphor teal */
    --primary: #8a6de9;
    --primary-light: #b49bff;
    --primary-dark: #6c4fd6;
    --secondary: #34e3b0;        /* phosphor teal-green (was muted teal) */
    --secondary-light: #6bf2cd;
    --accent: #f2b84b;           /* treasure gold / arcade amber */
    --accent-deep: #e0972a;

    --text: #ecebf6;
    --text-muted: #8f8fa6;
    --text-dim: #5f5f74;

    --border: rgba(138,109,233,.16);
    --border-strong: rgba(138,109,233,.34);
    --border-focus: rgba(242,184,75,.55);
    --glow: rgba(138,109,233,.10);

    /* Phosphor glows used across components */
    --glow-violet: 0 0 0 1px rgba(138,109,233,.18), 0 18px 50px -24px rgba(138,109,233,.55);
    --glow-amber: 0 0 0 1px rgba(242,184,75,.30), 0 14px 40px -20px rgba(242,184,75,.45);
    --ring-focus: 0 0 0 2px var(--bg-dark), 0 0 0 4px var(--accent);

    --r-sm: 6px;  --r-md: 12px;  --r-lg: 18px;
    --notch: 14px;               /* cartridge corner cut */

    --ff-pixel: 'Press Start 2P', monospace;
    --ff-mono: 'PT Mono', ui-monospace, monospace;

    --ease-snap: cubic-bezier(.2,.9,.25,1);
}

/* ---------- 2. GLOBAL ATMOSPHERE (CRT) ------------------------------ */
body {
    background: var(--bg-dark);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

/* Brighter, slower-breathing aurora blooms */
.bg-glow--1 { background: radial-gradient(circle, rgba(138,109,233,.26), transparent 70%) !important; }
.bg-glow--2 { background: radial-gradient(circle, rgba(52,227,176,.20), transparent 70%) !important; }
.bg-glow--3 { background: radial-gradient(circle, rgba(242,184,75,.16), transparent 70%) !important; }

.bg-grid {
    background-image:
        linear-gradient(rgba(138,109,233,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(138,109,233,.05) 1px, transparent 1px) !important;
    background-size: 44px 44px !important;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 85%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 85%);
}

/* Scanlines + vignette + grain — one fixed overlay, never blocks clicks */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0,
            rgba(0,0,0,0) 2px,
            rgba(0,0,0,.045) 3px,
            rgba(0,0,0,0) 4px);
    mix-blend-mode: multiply;
    opacity: .6;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    background:
        radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%);
}

::selection { background: var(--accent); color: #1a1206; }

/* ---------- 3. BOOT-UP LOAD CHOREOGRAPHY ---------------------------- */
@keyframes da-boot {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes da-flicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: .72; }
    94% { opacity: 1; }
    97% { opacity: .85; }
    98% { opacity: 1; }
}
@keyframes da-sweep {
    from { transform: translateY(-120%); }
    to   { transform: translateY(320%); }
}

.page-header,
.section-header,
.filter-bar { animation: da-boot .6s var(--ease-snap) both; }
.section-header { animation-delay: .05s; }
.filter-bar { animation-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
    body::before { display: none; }
}

/* ---------- 4. HEADER ---------------------------------------------- */
.site-header {
    background: linear-gradient(180deg, rgba(8,8,16,.92), rgba(8,8,16,.72)) !important;
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--border) !important;
}
.site-header.scrolled {
    background: rgba(7,7,13,.96) !important;
    border-bottom-color: var(--border-strong) !important;
    box-shadow: 0 18px 50px -30px rgba(0,0,0,.9);
}
/* Phosphor scan line under the header */
.header-accent-line {
    background: linear-gradient(90deg, transparent, var(--primary) 20%, var(--accent) 50%, var(--secondary) 80%, transparent) !important;
    opacity: .85 !important;
    height: 1px !important;
}

.header-title {
    font-family: var(--ff-pixel) !important;
    font-size: .82rem !important;
    letter-spacing: .04em;
    color: var(--text) !important;
    text-shadow: 0 0 12px rgba(138,109,233,.45);
}
.header-subtitle {
    font-family: var(--ff-mono) !important;
    color: var(--text-muted) !important;
    letter-spacing: .02em;
}
.header-logo {
    border-radius: var(--r-sm) !important;
    box-shadow: 0 0 0 1px var(--border-strong), 0 0 18px -4px var(--primary);
}

.header-nav-meta-title { color: var(--accent) !important; font-family: var(--ff-mono); letter-spacing: .14em; }

.header-nav-link {
    border-radius: var(--r-sm) !important;
    letter-spacing: .02em;
    transition: color .2s, background .2s, box-shadow .2s;
}
.header-nav-link::before {
    content: "❯";
    color: var(--accent);
    opacity: 0;
    margin-right: .15rem;
    transform: translateX(-4px);
    transition: opacity .2s, transform .2s;
    font-size: .8em;
}
.header-nav-link:hover::before,
.header-nav-link.active::before { opacity: 1; transform: none; }
.header-nav-link:hover { background: rgba(138,109,233,.10) !important; color: var(--text) !important; }
.header-nav-link.active {
    background: linear-gradient(180deg, rgba(138,109,233,.22), rgba(138,109,233,.08)) !important;
    box-shadow: inset 0 -2px 0 var(--accent), 0 0 0 1px var(--border-strong);
}

.header-action-btn { border-radius: var(--r-sm) !important; }
.header-action-btn:hover { border-color: var(--border-focus) !important; }
.btn-yt:hover { color: #ff4b4b !important; }
.header-action-hint {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 .35em;
    font-family: var(--ff-mono);
    color: var(--text-dim);
}

/* ---------- 5. BUTTONS (cabinet) ----------------------------------- */
.btn-primary {
    background: linear-gradient(180deg, var(--primary-light), var(--primary)) !important;
    color: #0b0814 !important;
    font-family: var(--ff-mono) !important;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: none !important;
    border-radius: var(--r-sm) !important;
    box-shadow: 0 0 0 1px rgba(138,109,233,.5), 0 10px 28px -12px var(--primary), inset 0 1px 0 rgba(255,255,255,.4);
    transition: transform .15s var(--ease-snap), box-shadow .2s, filter .2s;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 0 0 1px var(--primary-light), 0 16px 36px -14px var(--primary); }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-sm) !important;
    color: var(--text) !important;
    font-family: var(--ff-mono) !important;
    letter-spacing: .03em;
    background: rgba(138,109,233,.04) !important;
    transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.btn-outline:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: rgba(242,184,75,.06) !important;
    box-shadow: var(--glow-amber);
}
.btn-outline.active { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ---------- 6. PAGE HEADER (console boot) -------------------------- */
.page-header {
    position: relative;
    background:
        linear-gradient(180deg, rgba(20,20,31,.7), rgba(10,10,18,.4)) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg) !important;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}
.page-header::before {
    content: "";
    position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(180deg, var(--primary), var(--accent));
}
.page-header::after {
    content: "■ READY";
    position: absolute; top: 14px; right: 22px;
    font-family: var(--ff-pixel); font-size: .42rem;
    color: var(--secondary); letter-spacing: .08em; opacity: .7;
}
.page-header-icon {
    background: linear-gradient(180deg, rgba(138,109,233,.2), rgba(242,184,75,.12)) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-md) !important;
    color: var(--accent) !important;
    box-shadow: var(--glow-violet);
}
.page-header-title {
    font-family: var(--ff-mono) !important;
    letter-spacing: .01em;
    color: var(--text) !important;
}
.page-header-title::before {
    content: "❯ ";
    color: var(--accent);
    font-weight: 700;
}
.page-header-desc { color: var(--text-muted) !important; font-family: var(--ff-mono); }
.page-header-back:hover { color: var(--accent) !important; border-color: var(--border-focus) !important; }

.section-title { font-family: var(--ff-mono) !important; letter-spacing: .01em; }
.section-title::after {
    content: "";
    display: inline-block; width: 7px; height: 1.05em;
    /* .section-title is flex with gap:12px — pull the caret back so it
       hugs the text like a terminal cursor instead of floating. */
    margin-left: -8px; vertical-align: -2px;
    background: var(--accent);
    animation: da-flicker 2.4s steps(1) infinite;
}
.section-title i { color: var(--accent) !important; }

/* ---------- 7. CARDS (cartridge) ----------------------------------- */
.content-card,
.video-card {
    background: linear-gradient(180deg, var(--bg-card), var(--bg-surface)) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    position: relative;
    overflow: hidden;
    transition: transform .22s var(--ease-snap), border-color .22s, box-shadow .22s !important;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.content-card::after,
.video-card::after {
    /* scanline sweep on hover */
    content: "";
    position: absolute; inset: 0; left: -40%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(242,184,75,.10), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.content-card:hover,
.video-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--border-focus) !important;
    box-shadow: 0 24px 50px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(242,184,75,.25) !important;
}
.content-card:hover::after,
.video-card:hover::after { opacity: 1; animation: da-sweep 1.1s var(--ease-snap); }

.content-card-title,
.video-card-title { font-family: var(--ff-mono) !important; color: var(--text) !important; }
.content-card-thumb-icon { color: var(--primary-light) !important; }
.content-card-meta i { color: var(--accent) !important; }

.content-card-badge {
    font-family: var(--ff-pixel) !important;
    font-size: .42rem !important;
    letter-spacing: .04em;
    border-radius: 4px !important;
    backdrop-filter: blur(4px);
}
.content-card-badge--live { box-shadow: 0 0 16px -2px rgba(244,67,54,.8); }

.card-link {
    font-family: var(--ff-mono) !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: .8rem;
}
.video-card.active {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent), 0 0 36px -8px rgba(242,184,75,.5) !important;
}
.play-btn {
    background: linear-gradient(180deg, var(--accent), var(--accent-deep)) !important;
    color: #1a1206 !important;
    box-shadow: 0 0 24px -4px var(--accent);
}

/* ---------- 8. FILTER BAR (terminal) ------------------------------- */
.filter-bar {
    background: linear-gradient(180deg, rgba(18,18,28,.66), rgba(10,10,18,.5)) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    position: relative;
}
.filter-bar::before {
    content: "> filter";
    position: absolute; top: -9px; left: 16px;
    padding: 0 8px;
    background: var(--bg-dark);
    font-family: var(--ff-mono); font-size: .68rem;
    color: var(--accent); letter-spacing: .12em;
}
.filter-label { color: var(--text-muted) !important; font-family: var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }
.filter-select {
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    background: var(--bg-dark) !important;
    color: var(--text) !important;
    font-family: var(--ff-mono) !important;
}
.filter-select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(242,184,75,.18) !important; outline: none; }
.filter-btn { border-radius: var(--r-sm) !important; }
.filter-count { font-family: var(--ff-mono); }
.filter-count strong { color: var(--accent) !important; }

/* ---------- 9. PAGINATION ------------------------------------------ */
.page-link {
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    font-family: var(--ff-mono) !important;
    background: rgba(255,255,255,.015) !important;
    transition: border-color .2s, color .2s, background .2s;
}
.page-link:hover { border-color: var(--border-focus) !important; color: var(--accent) !important; }
.page-link.active {
    background: linear-gradient(180deg, var(--primary-light), var(--primary)) !important;
    color: #0b0814 !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 18px -4px var(--primary);
}
.page-info { font-family: var(--ff-mono); color: var(--text-muted); }

/* ---------- 10. EMPTY STATE ---------------------------------------- */
.empty-state {
    border: 1px dashed var(--border-strong) !important;
    border-radius: var(--r-lg) !important;
    background: rgba(138,109,233,.03);
}
.empty-state-icon { color: var(--primary-light) !important; opacity: .8; }
.empty-state h3 { font-family: var(--ff-mono) !important; }
.empty-state h3::before { content: "// "; color: var(--accent); }

/* ---------- 11. HERO (home) ---------------------------------------- */
/* The home pixel title gets a stronger CRT bloom + flicker */
.hero-title, .home-hero h1, h1.pixel-title {
    text-shadow: 0 0 18px rgba(138,109,233,.55), 0 0 2px rgba(242,184,75,.4) !important;
    animation: da-flicker 6s steps(1) infinite;
}

/* ---------- 12. FOOTER --------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--border) !important;
    background: linear-gradient(180deg, transparent, rgba(8,8,16,.6)) !important;
    position: relative;
}
.site-footer::before {
    content: "";
    position: absolute; top: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary) 30%, var(--accent) 50%, var(--secondary) 70%, transparent);
    opacity: .6;
}
.footer-kicker { color: var(--accent) !important; font-family: var(--ff-mono); letter-spacing: .1em; }
.footer-brand span { font-family: var(--ff-pixel) !important; font-size: .72rem !important; }
.footer-heading { font-family: var(--ff-mono) !important; color: var(--text) !important; letter-spacing: .06em; }
.footer-heading::before { content: "› "; color: var(--accent); }
.footer-nav a:hover { color: var(--accent) !important; }
.footer-meta-pill i { color: var(--accent) !important; }
.footer-social-link:hover { border-color: var(--border-focus) !important; }

/* ---------- 13. SCROLL-TOP + MISC ---------------------------------- */
.scroll-top {
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--border-strong) !important;
    background: var(--bg-elev) !important;
    color: var(--accent) !important;
}
.scroll-top:hover { box-shadow: var(--glow-amber); }

a:focus-visible,
button:focus-visible,
.header-nav-link:focus-visible,
.page-link:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--r-sm); }

/* ---------- 14. RESPONSIVE GUARDS ---------------------------------- */
/* ---------- 15. HOME HERO  "ARCADE MARQUEE / BOOT SCREEN" ---------- */
.da-hero {
    position: relative;
    z-index: 1;
    padding: clamp(48px, 9vh, 120px) 24px clamp(56px, 8vh, 96px);
    overflow: hidden;
}
.da-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

/* LEFT · boot terminal */
.da-hero-boot { min-width: 0; }
.da-hero-boot > * { animation: da-boot .7s var(--ease-snap) both; }
.da-hero-boot > *:nth-child(1) { animation-delay: .02s; }
.da-hero-boot > *:nth-child(2) { animation-delay: .10s; }
.da-hero-boot > *:nth-child(3) { animation-delay: .18s; }
.da-hero-boot > *:nth-child(4) { animation-delay: .26s; }
.da-hero-boot > *:nth-child(5) { animation-delay: .34s; }

.da-hero-kicker {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--ff-mono);
    font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent);
    padding: .4rem .7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: rgba(242,184,75,.05);
}
.da-hero-kicker-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 10px 1px var(--secondary);
    animation: da-flicker 1.6s steps(1) infinite;
}

.da-hero-title {
    margin: 1.4rem 0 0;
    font-family: var(--ff-pixel);
    line-height: 1.04;
    letter-spacing: .01em;
    display: flex; flex-direction: column; gap: .35em;
}
.da-hero-title-line {
    font-size: clamp(2.1rem, 7.2vw, 4.6rem);
    color: var(--text);
    text-shadow: 0 0 22px rgba(138,109,233,.55), 0 4px 0 rgba(0,0,0,.4);
}
.da-hero-title-line--accent {
    color: var(--accent);
    text-shadow: 0 0 26px rgba(242,184,75,.5), 0 4px 0 rgba(0,0,0,.4);
    animation: da-flicker 7s steps(1) infinite;
}

.da-hero-desc {
    margin: 1.5rem 0 0;
    max-width: 42ch;
    font-family: var(--ff-mono);
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 1rem;
}
.da-hero-desc::before { content: "// "; color: var(--secondary); }

.da-hero-actions {
    margin-top: 2rem;
    display: flex; flex-wrap: wrap; gap: .9rem;
}
.da-hero-cta { padding: .85rem 1.4rem !important; font-size: .9rem !important; }

.da-hero-credits {
    margin: 2.6rem 0 0;
    display: flex; flex-wrap: wrap; gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(18,18,28,.5), rgba(10,10,18,.3));
    position: relative;
}
.da-hero-credits::before {
    content: "INSERT COIN";
    position: absolute; top: -.62rem; left: 14px; padding: 0 8px;
    background: var(--bg-dark);
    font-family: var(--ff-mono); font-size: .62rem; line-height: 1.05; letter-spacing: .16em;
    color: var(--accent);
    z-index: 2;
}
.da-hero-credit {
    flex: 1; min-width: 110px;
    padding: 1.1rem 1.2rem .9rem;
    border-right: 1px solid var(--border);
}
.da-hero-credit:last-child { border-right: none; }
.da-hero-credit-label {
    font-family: var(--ff-mono);
    font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted);
    display: flex; align-items: center; gap: .4rem;
}
.da-hero-credit-label i { color: var(--accent); font-size: .8em; }
.da-hero-credit-num {
    margin: .45rem 0 0;
    font-family: var(--ff-pixel);
    font-size: 1.15rem;
    color: var(--text);
    text-shadow: 0 0 14px rgba(138,109,233,.4);
}

/* RIGHT · cabinet / CRT screen */
.da-hero-cabinet {
    min-width: 0;
    animation: da-boot .8s var(--ease-snap) both .2s;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(20,20,31,.7), rgba(8,8,16,.55));
    padding: 14px;
    box-shadow: var(--glow-violet);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}
.da-hero-cabinet-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .35rem .5rem .8rem;
    font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .06em;
}
.da-hero-cabinet-eyebrow { color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; }
.da-hero-cabinet-meta { color: var(--text-dim); }

.da-hero-screen {
    position: relative;
    border-radius: var(--r-md);
    background:
        radial-gradient(ellipse 90% 70% at 50% 30%, rgba(138,109,233,.18), transparent 70%),
        #06060e;
    border: 1px solid var(--border);
    padding: clamp(28px, 4vw, 46px) 24px;
    text-align: center;
    overflow: hidden;
}
.da-hero-screen-scan {
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,0,0,.22) 3px, transparent 4px);
    opacity: .5;
}
.da-hero-screen-glow {
    position: absolute; inset: -40% auto auto 50%; transform: translateX(-50%);
    width: 70%; height: 70%;
    background: radial-gradient(circle, rgba(52,227,176,.18), transparent 70%);
    pointer-events: none;
}
.da-hero-avatar-frame {
    position: relative; z-index: 1; isolation: isolate;
    width: 132px; height: 132px; margin: 0 auto;
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 0 32px -4px var(--primary);
}
/* only the gradient ring spins — the avatar image stays still */
.da-hero-avatar-frame::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--primary), var(--accent), var(--secondary), var(--primary));
    animation: da-spin 14s linear infinite;
}
@keyframes da-spin { to { transform: rotate(360deg); } }
.da-hero-avatar {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #06060e;
}
.da-hero-screen-caption { position: relative; z-index: 1; margin-top: 1.3rem; }
.da-hero-screen-title {
    font-family: var(--ff-pixel); font-size: .8rem; color: var(--text);
    text-shadow: 0 0 14px rgba(138,109,233,.5);
}
.da-hero-screen-copy {
    margin: .9rem auto 0; max-width: 34ch;
    font-family: var(--ff-mono); font-size: .86rem; color: var(--text-muted); line-height: 1.6;
}
.da-hero-cabinet-badges { padding: .9rem .5rem .3rem; text-align: center; }
.da-hero-cabinet-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .04em;
    color: var(--accent);
    padding: .4rem .8rem;
    border: 1px solid var(--border-focus);
    border-radius: 999px;
    background: rgba(242,184,75,.06);
}

/* scroll cue */
.da-hero-scroll {
    margin: clamp(40px, 6vh, 72px) auto 0;
    max-width: 1200px;
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    text-decoration: none;
    animation: da-boot .8s var(--ease-snap) both .5s;
}
.da-hero-scroll-copy { text-align: center; }
.da-hero-scroll-kicker {
    display: block;
    font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .2em;
    color: var(--accent);
    animation: da-flicker 2.6s steps(1) infinite;
}
.da-hero-scroll-label {
    display: block; margin-top: .3rem;
    font-family: var(--ff-mono); font-size: .82rem; color: var(--text-muted);
}
.da-hero-scroll-indicator {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    color: var(--accent);
    animation: da-bob 1.8s ease-in-out infinite;
}
@keyframes da-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@media (max-width: 880px) {
    .da-hero-inner { grid-template-columns: 1fr; }
    .da-hero-cabinet { order: -1; max-width: 460px; margin: 0 auto; }
}

/* ---------- 16. SHARED RUBRIC COMPONENTS (da-*) -------------------- */
.da-rubric { position: relative; z-index: 1; }
.da-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* console page header */
.da-page-head {
    position: relative;
    max-width: 1200px;
    margin: clamp(24px, 5vh, 48px) auto 0;
    padding: clamp(22px, 3vw, 34px);
    background: linear-gradient(180deg, rgba(20,20,31,.72), rgba(10,10,18,.45));
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
    animation: da-boot .6s var(--ease-snap) both;
}
.da-page-head::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(180deg, var(--primary), var(--accent));
}
.da-page-head::after {
    content: "■ READY"; position: absolute; top: 16px; right: 22px;
    font-family: var(--ff-pixel); font-size: .42rem; color: var(--secondary);
    letter-spacing: .08em; opacity: .7;
}
.da-page-head > * { margin-left: 0; }

.da-crumbs {
    font-family: var(--ff-mono); font-size: .76rem; letter-spacing: .04em;
    color: var(--text-dim); margin-bottom: 1rem;
}
.da-crumbs a { color: var(--text-muted); text-decoration: none; }
.da-crumbs a:hover { color: var(--accent); }
.da-crumbs .sep { color: var(--accent); margin: 0 .4rem; }
.da-crumbs .current { color: var(--text); }

.da-page-kicker {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--accent);
}
.da-page-titlerow { display: flex; align-items: center; gap: 1rem; margin: .9rem 0 0; }
.da-page-icon {
    flex: none; width: 56px; height: 56px;
    display: grid; place-items: center;
    border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(138,109,233,.2), rgba(242,184,75,.1));
    color: var(--accent); font-size: 1.4rem;
    box-shadow: var(--glow-violet);
}
.da-page-title {
    font-family: var(--ff-mono); font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    color: var(--text); line-height: 1.1; margin: 0;
}
.da-page-title::before { content: "❯ "; color: var(--accent); }
.da-page-desc {
    margin: 1rem 0 0; max-width: 60ch;
    font-family: var(--ff-mono); color: var(--text-muted); line-height: 1.65;
}

.da-statchips { display: flex; flex-wrap: wrap; gap: 0; margin: 1.6rem 0 0;
    border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; width: fit-content; }
.da-statchip { padding: .8rem 1.4rem; border-right: 1px solid var(--border); }
.da-statchip:last-child { border-right: none; }
.da-statchip-num { font-family: var(--ff-pixel); font-size: 1.1rem; color: var(--text); display: block;
    text-shadow: 0 0 12px rgba(138,109,233,.4); }
.da-statchip-label { font-family: var(--ff-mono); font-size: .66rem; text-transform: uppercase;
    letter-spacing: .08em; color: var(--text-muted); margin-top: .35rem; display: block; }

/* terminal chip bar (filters) */
.da-chipbar { max-width: 1200px; margin: clamp(20px,3vh,32px) auto 0; padding: 0 24px;
    display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.da-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem;
    font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .02em;
    color: var(--text-muted); text-decoration: none;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: rgba(255,255,255,.015);
    transition: border-color .2s, color .2s, background .2s;
}
.da-chip:hover { border-color: var(--border-focus); color: var(--accent); }
.da-chip.active {
    color: var(--accent); border-color: var(--accent);
    background: rgba(242,184,75,.08);
    box-shadow: inset 0 -2px 0 var(--accent);
}
.da-chip.active::before { content: "❯ "; color: var(--accent); }

/* rubric section */
.da-rubric-section { max-width: 1200px; margin: 0 auto; padding: clamp(32px,5vh,56px) 24px; }
.da-section-title {
    font-family: var(--ff-mono); font-size: 1.2rem; color: var(--text);
    margin: 0 0 1.4rem; display: flex; align-items: center; gap: .5rem;
}
.da-section-title i { color: var(--accent); }
.da-section-title::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border-strong), transparent);
}

/* card grids */
.da-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); }
.da-vgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }

.da-card {
    position: relative; display: block; text-decoration: none; color: inherit;
    background: linear-gradient(180deg, var(--bg-card), var(--bg-surface));
    border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
    transition: transform .22s var(--ease-snap), border-color .22s, box-shadow .22s;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.da-card:hover { transform: translateY(-5px); border-color: var(--border-focus);
    box-shadow: 0 24px 50px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(242,184,75,.25); }
.da-card-thumb { position: relative; overflow: hidden; background: var(--bg-surface); }
.da-card-thumb--v { aspect-ratio: 9/16; }
.da-card-thumb--h { aspect-ratio: 16/9; }
.da-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.da-card:hover .da-card-thumb img { transform: scale(1.05); }
.da-card-ph { display: grid; place-items: center; width: 100%; height: 100%;
    font-size: 2.4rem; color: rgba(138,109,233,.3); }
.da-card-badge {
    position: absolute; top: 10px; left: 10px; padding: .25rem .6rem;
    font-family: var(--ff-pixel); font-size: .42rem; letter-spacing: .04em;
    color: #1a1206; background: var(--accent); border-radius: 4px; backdrop-filter: blur(4px);
}
.da-card-play {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(0deg, rgba(6,6,14,.7), transparent 55%);
    opacity: 0; transition: opacity .3s;
}
.da-card:hover .da-card-play { opacity: 1; }
.da-card-play i {
    width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
    background: linear-gradient(180deg, var(--accent), var(--accent-deep)); color: #1a1206;
    box-shadow: 0 0 22px -4px var(--accent);
}
.da-card-body { padding: 14px 16px 18px; }
.da-card-title { font-family: var(--ff-mono); font-size: .92rem; color: var(--text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.da-card-sub { margin-top: .5rem; font-family: var(--ff-mono); font-size: .8rem; color: var(--primary-light); }
.da-card-sub i { color: var(--accent); }

/* empty state */
.da-empty { max-width: 560px; margin: clamp(24px,4vh,40px) auto; padding: 3rem 2rem; text-align: center;
    border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: rgba(138,109,233,.03); }
.da-empty-icon { font-size: 2.6rem; color: var(--primary-light); opacity: .8; }
.da-empty h3 { font-family: var(--ff-mono); color: var(--text); margin: 1rem 0 .6rem; }
.da-empty h3::before { content: "// "; color: var(--accent); }
.da-empty p { font-family: var(--ff-mono); color: var(--text-muted); line-height: 1.6; margin: 0 auto 1.4rem; max-width: 40ch; }

/* pager */
.da-pager { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 2.4rem 0 0; flex-wrap: wrap; }
.da-page-link { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .7rem;
    font-family: var(--ff-mono); color: var(--text); text-decoration: none;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: rgba(255,255,255,.015);
    transition: border-color .2s, color .2s; }
.da-page-link:hover { border-color: var(--border-focus); color: var(--accent); }
.da-page-info { font-family: var(--ff-mono); color: var(--text-muted); padding: 0 .8rem; font-size: .85rem; }

/* card meta + cta (used by streams "recent") */
.da-card-meta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .7rem;
    font-family: var(--ff-mono); font-size: .76rem; color: var(--text-muted); }
.da-card-meta i { color: var(--accent); }
.da-card-cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem;
    font-family: var(--ff-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--accent); }

/* LIVE banner */
.da-live { max-width: 760px; margin: 0 auto; position: relative; overflow: hidden;
    padding: 1.8rem 2rem;
    border: 1px solid rgba(255,68,68,.4); border-radius: var(--r-lg);
    background: linear-gradient(135deg, rgba(255,68,68,.12), rgba(138,109,233,.1));
    box-shadow: 0 0 40px -16px rgba(255,68,68,.6); }
.da-live::before { content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 18% 40%, rgba(255,68,68,.12), transparent 60%); pointer-events: none; }
.da-live-flag { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--ff-mono);
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #ff6b6b; }
.da-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4444;
    box-shadow: 0 0 10px 1px #ff4444; animation: da-flicker 1s steps(1) infinite; }
.da-live-title { font-family: var(--ff-mono); font-size: 1.2rem; color: var(--text); margin: .7rem 0 .4rem; }
.da-live-game { font-family: var(--ff-mono); font-size: .86rem; color: var(--primary-light); margin-bottom: .4rem; }
.da-live-game i, .da-live-viewers i { color: var(--accent); }
.da-live-desc { font-family: var(--ff-mono); font-size: .85rem; color: var(--text-muted); line-height: 1.55; margin-bottom: .5rem; }
.da-live-viewers { font-family: var(--ff-mono); font-size: .82rem; color: var(--text-muted); margin-bottom: 1rem; }
.da-live-link { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.4rem;
    font-family: var(--ff-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: #fff; text-decoration: none; border-radius: var(--r-sm);
    background: linear-gradient(135deg, #ff4d4d, #cc3333); box-shadow: 0 0 0 1px rgba(255,68,68,.5);
    transition: transform .15s var(--ease-snap), box-shadow .2s; }
.da-live-link:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px #ff4444; }

/* scheduled grid */
.da-sched-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.da-sched { padding: 1.4rem; border: 1px solid var(--border); border-radius: var(--r-md);
    background: linear-gradient(180deg, var(--bg-card), var(--bg-surface));
    transition: border-color .2s, transform .2s; }
.da-sched:hover { border-color: var(--border-focus); transform: translateY(-3px); }
.da-sched-time { font-family: var(--ff-mono); font-size: .8rem; color: var(--secondary); margin-bottom: .6rem; }
.da-sched-time i { color: var(--secondary); }
.da-sched-title { font-family: var(--ff-mono); color: var(--text); font-size: 1rem; margin-bottom: .4rem; }
.da-sched-game { font-family: var(--ff-mono); font-size: .84rem; color: var(--primary-light); margin-bottom: .4rem; }
.da-sched-desc { font-family: var(--ff-mono); font-size: .82rem; color: var(--text-muted); line-height: 1.55; }

/* platform links */
.da-platforms { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.da-platform { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.3rem;
    font-family: var(--ff-mono); font-size: .85rem; color: var(--text-muted); text-decoration: none;
    border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: rgba(138,109,233,.04);
    transition: border-color .2s, color .2s, box-shadow .2s; }
.da-platform:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow-amber); }

@media (max-width: 880px) { .da-page-head { clip-path: none; } }

/* ---------- 16b. LEGACY wt-/gp- BRIDGE (gameplays + walkthroughs) -- */
/* Re-skin the existing JS-critical card/filter markup into the arcade
   system without changing its structure (keeps games.js / walkthroughs.js). */
.wt-section-title,
.gp-filters-title,
.gp-catalog-head-title,
.gp-continue-title { font-family: var(--ff-mono) !important; color: var(--text) !important; }
.wt-section-title i,
.gp-filters-title i,
.gp-catalog-head-title i { color: var(--accent) !important; }

.wt-card,
.wt-featured-card,
.gp-catalog-card,
.gp-season-card {
    background: linear-gradient(180deg, var(--bg-card), var(--bg-surface)) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    transition: transform .22s var(--ease-snap), border-color .22s, box-shadow .22s !important;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.wt-card:hover,
.wt-featured-card:hover,
.gp-catalog-card:hover,
.gp-season-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--border-focus) !important;
    box-shadow: 0 24px 50px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(242,184,75,.25) !important;
}
.wt-card-title,
.gp-catalog-title,
.gp-season-title { font-family: var(--ff-mono) !important; color: var(--text) !important; }
.wt-card-game,
.gp-catalog-game { color: var(--primary-light) !important; }
.wt-card-game i,
.gp-catalog-game i,
.wt-card-meta i,
.gp-catalog-meta i { color: var(--accent) !important; }
.wt-status,
.wt-ep-duration,
.gp-hero-media-badge {
    font-family: var(--ff-mono) !important;
    border-radius: 5px !important;
    letter-spacing: .03em;
}
.wt-thumb-play,
.gp-hero-play-btn {
    background: linear-gradient(180deg, var(--accent), var(--accent-deep)) !important;
    color: #1a1206 !important;
    box-shadow: 0 0 22px -4px var(--accent) !important;
}

/* featured hero banner */
.gp-hero {
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-lg) !important;
    background: linear-gradient(135deg, rgba(20,20,31,.7), rgba(10,10,18,.5)) !important;
    box-shadow: var(--glow-violet) !important;
}
.gp-hero-kicker { color: var(--accent) !important; font-family: var(--ff-mono) !important; letter-spacing: .1em; text-transform: uppercase; }
.gp-hero-title { font-family: var(--ff-mono) !important; color: var(--text) !important; }
.gp-hero-cta { color: var(--accent) !important; font-family: var(--ff-mono) !important; text-transform: uppercase; letter-spacing: .03em; }
.gp-hero-pill { font-family: var(--ff-mono) !important; border-color: var(--border-strong) !important; }

/* filter inputs/selects/chips */
.wt-filter-select,
.wt-search-input,
.wt-filters-form select,
.wt-filters-form input[type="text"] {
    font-family: var(--ff-mono) !important;
    background: var(--bg-dark) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    color: var(--text) !important;
}
.wt-filter-select:focus,
.wt-search-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(242,184,75,.18) !important;
    outline: none;
}
.gp-filter-label { font-family: var(--ff-mono) !important; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted) !important; font-size: .7rem !important; }
.wt-filter-chip {
    font-family: var(--ff-mono) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    color: var(--text-muted) !important;
    transition: border-color .2s, color .2s, background .2s;
}
.wt-filter-chip:hover { border-color: var(--border-focus) !important; color: var(--accent) !important; }
.wt-filter-chip.active {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    background: rgba(242,184,75,.08) !important;
    box-shadow: inset 0 -2px 0 var(--accent);
}
.wt-filter-btn {
    font-family: var(--ff-mono) !important; text-transform: uppercase; letter-spacing: .04em;
    background: linear-gradient(180deg, var(--primary-light), var(--primary)) !important;
    color: #0b0814 !important; border: none !important; border-radius: var(--r-sm) !important;
    box-shadow: 0 0 0 1px rgba(138,109,233,.5), 0 10px 28px -12px var(--primary) !important;
}
.wt-clear-btn { font-family: var(--ff-mono) !important; border-radius: var(--r-sm) !important; }
.wt-search-btn { border-radius: var(--r-sm) !important; }
.gp-highlight-pill, .gp-filters-meta-pill, .gp-catalog-head-chip { font-family: var(--ff-mono) !important; }

/* pagination → arcade */
.wt-pagination { gap: .5rem !important; }
.wt-page-link {
    font-family: var(--ff-mono) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    background: rgba(255,255,255,.015) !important;
    transition: border-color .2s, color .2s;
}
.wt-page-link:hover { border-color: var(--border-focus) !important; color: var(--accent) !important; }
.wt-page-info { font-family: var(--ff-mono) !important; color: var(--text-muted) !important; }

/* empty + season info */
.wt-empty {
    border: 1px dashed var(--border-strong) !important;
    border-radius: var(--r-lg) !important;
    background: rgba(138,109,233,.03);
}
.wt-empty h3 { font-family: var(--ff-mono) !important; }
.wt-empty h3::before { content: "// "; color: var(--accent); }
.wt-empty-icon { color: var(--primary-light) !important; }
.wt-season-info, .gp-seasons-panel, .gp-filters-shell, .gp-catalog-shell, .gp-continue-shell {
    border-radius: var(--r-md) !important;
}

/* wt- page header → console look (walkthroughs index, kept structurally) */
.wt-page-header { position: relative; }
.wt-breadcrumbs { font-family: var(--ff-mono) !important; }
.wt-breadcrumbs a:hover { color: var(--accent) !important; }
.wt-breadcrumbs .sep { color: var(--accent) !important; }
.wt-page-icon {
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-md) !important;
    background: linear-gradient(180deg, rgba(138,109,233,.2), rgba(242,184,75,.1)) !important;
    color: var(--accent) !important;
    box-shadow: var(--glow-violet) !important;
}
.wt-page-title { font-family: var(--ff-mono) !important; color: var(--text) !important; }
.wt-page-title::before { content: "❯ "; color: var(--accent); }
.wt-page-desc { font-family: var(--ff-mono) !important; color: var(--text-muted) !important; }
.wt-stat-num { font-family: var(--ff-pixel) !important; font-size: 1.05rem !important;
    color: var(--text) !important; text-shadow: 0 0 12px rgba(138,109,233,.4); }
.wt-stat-label { font-family: var(--ff-mono) !important; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted) !important; }
.wt-stat-icon { color: var(--accent) !important; }
.wt-quick-link {
    font-family: var(--ff-mono) !important;
    border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important;
    color: var(--text-muted) !important; transition: border-color .2s, color .2s;
}
.wt-quick-link:hover { border-color: var(--border-focus) !important; color: var(--accent) !important; }
.wt-hero-spotlight, .wt-rec-card, .wt-recommend-card {
    border-radius: var(--r-md) !important;
}
.wt-filters-kicker, .wt-filters-rail-title { font-family: var(--ff-mono) !important; }
.wt-filters-kicker { color: var(--accent) !important; }

/* mega man bridge */
.mm-roadmap-card, .mm-prep-card, .mm-prelaunch-panel, .mm-faq-item {
    border: 1px solid var(--border) !important; border-radius: var(--r-md) !important;
}
.mm-roadmap-card:hover, .mm-prep-card:hover { border-color: var(--border-focus) !important; }
.mm-games-title, .mm-hero-kicker, .mm-faq-item h3, .mm-prelaunch-copy h2 { font-family: var(--ff-mono) !important; }
.mm-hero-kicker { color: var(--accent) !important; }
.mm-quick-link, .mm-subnav-link {
    font-family: var(--ff-mono) !important; border-radius: var(--r-sm) !important;
}
.mm-quick-link--primary {
    background: linear-gradient(180deg, var(--primary-light), var(--primary)) !important;
    color: #0b0814 !important;
}
.mm-subnav-link.active, .mm-subnav-link[aria-selected="true"] {
    color: var(--accent) !important; box-shadow: inset 0 -2px 0 var(--accent);
}

/* walkthroughs spotlight → featured banner */
.da-wt-spotlight-wrap .wt-hero-spotlight-card {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 0;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-lg) !important;
    background: linear-gradient(135deg, rgba(20,20,31,.72), rgba(10,10,18,.5)) !important;
    box-shadow: var(--glow-violet) !important;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}
.wt-hero-spotlight-title { font-family: var(--ff-mono) !important; color: var(--text) !important; }
.wt-hero-spotlight-kicker { font-family: var(--ff-mono) !important; color: var(--accent) !important; text-transform: uppercase; letter-spacing: .08em; }
.wt-hero-spotlight-label { font-family: var(--ff-pixel) !important; font-size: .42rem !important; }
.wt-hero-spotlight-action--primary {
    background: linear-gradient(180deg, var(--primary-light), var(--primary)) !important;
    color: #0b0814 !important; font-family: var(--ff-mono) !important;
    text-transform: uppercase; letter-spacing: .03em; border: none !important;
    box-shadow: 0 0 0 1px rgba(138,109,233,.5), 0 10px 28px -12px var(--primary) !important;
}
.wt-hero-spotlight-action { font-family: var(--ff-mono) !important; border-radius: var(--r-sm) !important; }
.wt-hero-spotlight-bar span { background: linear-gradient(90deg, var(--primary), var(--accent)) !important; }
.wt-hero-spotlight-meta i, .wt-hero-spotlight-progress b { color: var(--accent) !important; }
@media (max-width: 760px) { .da-wt-spotlight-wrap .wt-hero-spotlight-card { grid-template-columns: 1fr; clip-path: none; } }

/* polish: statchips never overflow, blink cursor only on dark sections */
.da-statchips { max-width: 100%; }

/* ---------- 16c. ROUNDED CORNERS (notch removed, user preference) -- */
/* Drop the diagonal cartridge notch (clip-path) + the drop-shadow outline;
   use plain rounded corners with the real border + glow all around. */
.da-page-head,
.da-hero-cabinet,
.da-card,
.da-wt-spotlight-wrap .wt-hero-spotlight-card,
.gp-catalog-card,
.wt-card,
.wt-featured-card,
.gp-season-card,
.content-card,
.video-card,
.page-header {
    clip-path: none !important;
    filter: none !important;
}
.da-page-head,
.da-hero-cabinet,
.da-wt-spotlight-wrap .wt-hero-spotlight-card {
    border-radius: var(--r-lg) !important;
}
.da-card,
.gp-catalog-card,
.wt-card,
.wt-featured-card,
.gp-season-card,
.content-card,
.video-card {
    border-radius: var(--r-md) !important;
}

/* ---------- 18. PLAYER CHROME (gameplay/episode/home player) ------- */
/* CSS-only visual overhaul; markup + dap-player JS untouched. No overflow:hidden
   on the shell so the player's pop-out speed/quality/settings menus aren't clipped. */
.gpd-player-shell {
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-lg) !important;
    background: linear-gradient(160deg, rgba(20,20,33,.93), rgba(10,10,18,.97)) !important;
    box-shadow: 0 28px 60px -30px rgba(0,0,0,.9), var(--glow-violet) !important;
}
.gpd-player-shell::before {           /* top phosphor scan bar */
    content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary) 18%, var(--accent) 50%, var(--secondary) 82%, transparent) !important;
    opacity: .9; z-index: 2; border-radius: 2px;
}
.gpd-player-shell__kicker { font-family: var(--ff-mono) !important; color: var(--accent) !important; letter-spacing: .12em; }
.gpd-player-shell__kicker i { color: var(--secondary) !important; }
.gpd-player-shell__title { font-family: var(--ff-mono) !important; color: var(--text) !important; }
.gpd-player-shell__badge {
    font-family: var(--ff-mono) !important;
    border-radius: var(--r-sm) !important;
    border-color: var(--border-strong) !important;
    background: rgba(255,255,255,.02) !important;
}
.gpd-player-shell__badge i { color: var(--accent) !important; }
.gpd-player-shell__badge--yt { border-color: rgba(231,76,60,.45) !important; background: rgba(231,76,60,.12) !important; }
.gpd-player-shell__badge--yt i { color: #ff8d81 !important; }

.wt-player-embed { box-shadow: inset 0 0 0 1px rgba(138,109,233,.12); }

/* quality chips → arcade segmented */
.wt-quality-bar__eyebrow, .wt-quality-bar__title, .wt-quality-bar__note,
.wt-quality-bar__state, .wt-quality-label { font-family: var(--ff-mono) !important; }
.wt-quality-bar__eyebrow { color: var(--accent) !important; }
.wt-quality-btn {
    border-radius: var(--r-sm) !important;
    font-family: var(--ff-mono) !important;
    border-color: var(--border) !important;
    background: rgba(255,255,255,.015) !important;
    color: var(--text-muted) !important;
}
.wt-quality-btn:hover {
    border-color: var(--border-focus) !important;
    color: var(--accent) !important;
    background: rgba(242,184,75,.06) !important;
    box-shadow: var(--glow-amber) !important;
}
.wt-quality-btn.active {
    color: #0b0814 !important;
    border-color: var(--primary) !important;
    background: linear-gradient(135deg, var(--primary-light), var(--primary)) !important;
    box-shadow: 0 0 0 1px rgba(138,109,233,.5), 0 10px 26px -12px var(--primary) !important;
}
.wt-quality-btn.active::before { background: var(--accent) !important; box-shadow: 0 0 8px 1px var(--accent) !important; }

/* quickbar action buttons (Поделиться / Субтитры / … / Настройки) */
.da-player-quickbar__btn {
    font-family: var(--ff-mono) !important;
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--border) !important;
    background: rgba(255,255,255,.015) !important;
    color: var(--text) !important;
    transition: border-color .2s, color .2s, background .2s, transform .15s var(--ease-snap), box-shadow .2s;
}
.da-player-quickbar__btn:hover {
    transform: translateY(-2px);
    border-color: var(--border-focus) !important;
    color: var(--accent) !important;
    background: rgba(242,184,75,.06) !important;
    box-shadow: var(--glow-amber) !important;
}
.da-player-quickbar__btn.is-active,
.da-player-quickbar__btn[aria-pressed="true"] {
    border-color: var(--accent) !important; color: var(--accent) !important;
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* "Что сейчас в плеере" foot panel */
.da-player-foot-panel { border-radius: var(--r-md) !important; }
.da-player-current-chapter__eyebrow {
    font-family: var(--ff-mono) !important; color: var(--accent) !important;
    text-transform: uppercase; letter-spacing: .08em;
}
.da-player-current-chapter__label,
.da-player-status-summary__item { font-family: var(--ff-mono) !important; }

/* 18b. HIDE redundant external controls on the gameplay player.
   The quality bar + the bottom action panel just mirror controls the player
   already exposes in its own control bar, so they're hidden here.
   IMPORTANT: hidden, NOT removed from markup — dap-player.js reads
   `.wt-quality-btn` as the quality source-of-truth and persists the preference
   (dap-player.js applyPreferredQuality / quality menu), so the buttons must
   stay in the DOM. Quality-bar hide is scoped to `.gpd-player-shell` so the
   episode page's intentionally-labelled quality panel is untouched.
   Reversible: delete this block. */
.gpd-player-shell .wt-quality-bar { display: none !important; }
.da-player-foot-panel { display: none !important; }

/* ---------- 17. RESPONSIVE GUARDS ---------------------------------- */
@media (max-width: 640px) {
    .page-header::after, .da-page-head::after { display: none; }
    body::before { opacity: .4; }
    .content-card, .video-card, .page-header,
    .da-hero-cabinet, .da-card, .da-page-head { clip-path: none; }
    .da-hero-title-line { font-size: clamp(1.8rem, 11vw, 3rem); }
    .da-hero-credit { border-right: none; border-bottom: 1px solid var(--border); }
    .da-page-titlerow { flex-direction: row; }
}

/* ---------- 19. HOME "Что сейчас в плеере" meta-cards -------------- */
/* The home featured player's collapsible cards (meta / chapters / next)
   → PHOSPHOR: amber accents, mono labels, refined chips. Home-only. */
.home-latest-player__details.gpd-moments-card {
    border-color: var(--border-strong) !important;
    border-radius: var(--r-md) !important;
    background:
        radial-gradient(circle at 0 0, rgba(138,109,233,.12), transparent 40%),
        radial-gradient(circle at 100% 0, rgba(52,227,176,.08), transparent 36%),
        linear-gradient(180deg, rgba(20,20,33,.9), rgba(10,10,18,.96)) !important;
    position: relative;
}
.home-latest-player__details.gpd-moments-card::before {   /* phosphor hairline */
    content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary) 20%, var(--accent) 50%, var(--secondary) 80%, transparent);
    opacity: .7; pointer-events: none; z-index: 1;
}

/* summary title → arcade mono kicker */
.home-latest-player__details-copy {
    font-family: var(--ff-mono) !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .72rem !important;
    color: var(--text) !important;
}
/* leading icon → amber */
.home-latest-player__details-icon,
.home-latest-player__details-summary > span:first-child > i {
    border-color: rgba(242,184,75,.3) !important;
    background: rgba(242,184,75,.1) !important;
    color: var(--accent) !important;
}
/* chevron → amber on hover / open */
.home-latest-player__details-summary:hover .fa-chevron-down {
    color: var(--accent) !important; border-color: rgba(242,184,75,.3) !important;
}
.home-latest-player__details[open] .home-latest-player__details-summary .fa-chevron-down {
    color: var(--accent) !important;
    border-color: rgba(242,184,75,.32) !important;
    background: rgba(242,184,75,.08) !important;
}
.home-latest-player__details-summary:focus-visible { outline-color: var(--border-focus) !important; }

/* meta chips → refined mono pills with amber icon */
.home-latest-player__details .home-latest-player__meta-text { border-top-color: rgba(138,109,233,.14) !important; }
.home-latest-player__details .home-latest-player__meta-chip {
    border-radius: var(--r-sm) !important;
    border-color: var(--border) !important;
    background: rgba(255,255,255,.025) !important;
    font-family: var(--ff-mono) !important;
    font-size: .78rem !important;
    transition: border-color .2s, background .2s, transform .15s var(--ease-snap);
}
.home-latest-player__details .home-latest-player__meta-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(242,184,75,.34) !important;
    background: rgba(242,184,75,.05) !important;
}
.home-latest-player__details .home-latest-player__meta-chip i { color: var(--accent) !important; }

/* chapter/next cards: count badge + moment buttons → mono + amber accents */
.home-latest-player__details .gpd-moments-card__count {
    font-family: var(--ff-mono) !important; color: var(--accent) !important;
}
.home-latest-player__details .gpd-moment-btn:hover,
.home-latest-player__details .gpd-moment-btn:focus-visible {
    border-color: rgba(242,184,75,.34) !important;
}
.home-latest-player__details .gpd-moment-btn__time {
    color: var(--accent) !important; font-family: var(--ff-mono) !important;
}

/* ---------- 20. HOME "ОЧЕРЕДЬ" — featured-player queue rail -------- */
/* Only renders in the `--player` layout beside the home featured player. */
.home-latest-videos-layout--player .home-latest-videos-rail {
    border-color: var(--border-strong) !important;
    border-radius: var(--r-md) !important;
    background:
        radial-gradient(circle at 0 0, rgba(138,109,233,.12), transparent 42%),
        radial-gradient(circle at 100% 0, rgba(52,227,176,.07), transparent 34%),
        linear-gradient(180deg, rgba(20,20,33,.9), rgba(10,10,18,.96)) !important;
}
.home-latest-videos-layout--player .home-latest-videos-rail::before {
    background: linear-gradient(90deg, transparent, var(--primary) 20%, var(--accent) 50%, var(--secondary) 80%, transparent) !important;
    opacity: .75 !important;
}
.home-latest-videos-layout--player .home-latest-videos-rail-head {
    border-bottom-color: rgba(138,109,233,.16) !important;
}

/* kicker "ОЧЕРЕДЬ" → mono arcade pill, layer icon amber */
.home-latest-videos-layout--player .home-latest-videos-rail-kicker {
    font-family: var(--ff-mono) !important;
    text-transform: uppercase;
    letter-spacing: .09em !important;
    font-size: .66rem !important;
    border-color: var(--border-strong) !important;
    background: rgba(138,109,233,.14) !important;
    color: #e6dcff !important;
}
.home-latest-videos-layout--player .home-latest-videos-rail-kicker i { color: var(--accent) !important; }

/* count "N видео" → amber mono pill */
.home-latest-videos-layout--player .home-latest-videos-rail-count {
    font-family: var(--ff-mono) !important;
    border-color: rgba(242,184,75,.32) !important;
    background: rgba(242,184,75,.1) !important;
    color: var(--accent) !important;
}

/* index badges 01–04 → amber mono cartridge tags */
.home-latest-videos-layout--player .home-latest-videos-item-index {
    border: 1px solid rgba(242,184,75,.4) !important;
    background: rgba(8,7,4,.82) !important;
    color: var(--accent) !important;
    letter-spacing: .04em;
}

/* items: phosphor hover + amber ACTIVE ("В плеере") */
.home-latest-videos-layout--player .home-latest-videos-item { border-color: var(--border) !important; }
.home-latest-videos-layout--player .home-latest-videos-item:hover {
    border-color: rgba(242,184,75,.3) !important;
}
.home-latest-videos-layout--player .home-latest-videos-item--active {
    border-color: rgba(242,184,75,.5) !important;
    box-shadow: 0 0 0 1px rgba(242,184,75,.25), 0 10px 24px -10px rgba(242,184,75,.4) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(242,184,75,.08), transparent 40%),
        linear-gradient(160deg, rgba(28,26,20,.9), rgba(13,13,18,.96)) !important;
}
.home-latest-videos-layout--player .home-latest-videos-item-chip--active {
    border-color: rgba(242,184,75,.4) !important;
    background: rgba(242,184,75,.14) !important;
    color: #ffe6b8 !important;
}

/* "Ещё N в очереди" → solid refined button, amber on hover */
.home-latest-videos-layout--player .home-latest-videos-rail-more {
    border-style: solid !important;
    border-color: var(--border) !important;
    border-radius: var(--r-md) !important;
    font-family: var(--ff-mono) !important;
    font-size: .76rem !important;
}
.home-latest-videos-layout--player .home-latest-videos-rail-more:hover {
    border-color: rgba(242,184,75,.45) !important;
    background: rgba(242,184,75,.06) !important;
    color: var(--text) !important;
}
.home-latest-videos-layout--player .home-latest-videos-rail-more i { color: var(--accent) !important; }

/* 20b. Queue "Ещё N" inline expand/collapse (queue-expand.20260604.js) */
.home-latest-videos-layout--player .home-latest-videos-item--overflow { display: none !important; }
.home-latest-videos-layout--player .home-latest-videos-rail.is-queue-expanded .home-latest-videos-item--overflow {
    display: grid !important;
    animation: da-queue-reveal .3s var(--ease-snap) both;
}
@keyframes da-queue-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.home-latest-videos-rail-more__main { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.home-latest-videos-rail-more__arrow { transition: transform .25s var(--ease-snap); }
.home-latest-videos-rail.is-queue-expanded .home-latest-videos-rail-more__arrow { transform: rotate(-90deg); }
/* expanded button reads as "active" */
.home-latest-videos-layout--player .home-latest-videos-rail.is-queue-expanded .home-latest-videos-rail-more {
    border-color: rgba(242,184,75,.4) !important;
    background: rgba(242,184,75,.05) !important;
    color: var(--text) !important;
}

/* ---------- 21. HOME "Для вас / Продолжить просмотр" personal feed - */
/* PHOSPHOR pass over the two-column resume + recommendations block.
   Colour/typography only — layout untouched. Scoped to .home-personal. */

/* panel shells → violet border + phosphor top hairline */
.home-personal .home-resume-shell,
.home-personal .home-recommendations-shell {
    border-color: var(--border-strong) !important;
    border-radius: var(--r-lg) !important;
}
.home-personal .home-resume-shell::before,
.home-personal .home-recommendations-shell::before {
    background: linear-gradient(90deg, transparent, var(--primary) 20%, var(--accent) 50%, var(--secondary) 80%, transparent) !important;
    opacity: .8 !important;
}

/* kickers ("История аккаунта" / "Подобрано…") → mono caps, amber icon */
.home-personal .home-resume-kicker,
.home-personal .home-recommendations-kicker {
    font-family: var(--ff-mono) !important;
    letter-spacing: .08em !important;
    border-color: var(--border-strong) !important;
    background: rgba(138,109,233,.12) !important;
    color: #e6dcff !important;
}
.home-personal .home-resume-kicker i,
.home-personal .home-recommendations-kicker i { color: var(--accent) !important; }

/* count / stat pills ("4 элементов" / "5 в подборке") → amber mono */
.home-personal .home-resume-note,
.home-personal .home-recommendations-stat {
    font-family: var(--ff-mono) !important;
    border-color: rgba(242,184,75,.32) !important;
    background: rgba(242,184,75,.1) !important;
    color: var(--accent) !important;
}
.home-personal .home-resume-note i,
.home-personal .home-recommendations-stat i { color: var(--accent) !important; }

/* cards → unified violet border + amber hover lift */
.home-personal .home-resume-grid .video-card,
.home-personal .home-recommendations-grid .video-card { border-color: var(--border) !important; }
.home-personal .home-resume-grid .video-card:hover,
.home-personal .home-recommendations-grid .video-card:hover {
    border-color: rgba(242,184,75,.4) !important;
}

/* step number + rank badge → amber mono cartridge tags */
.home-personal .home-resume-card-step,
.home-personal .home-recommendation-card-step {
    border-color: rgba(242,184,75,.34) !important;
    background: rgba(8,7,4,.55) !important;
    color: var(--accent) !important;
}
.home-personal .home-recommendations-rank {
    border-color: rgba(242,184,75,.4) !important;
    background: rgba(8,7,4,.72) !important;
    color: var(--accent) !important;
    font-family: var(--ff-mono) !important;
}

/* footer arrows / CTA → amber on hover */
.home-personal .home-resume-card:hover .home-resume-card-arrow,
.home-personal .home-recommendation-card:hover .home-recommendation-card-cta {
    border-color: rgba(242,184,75,.45) !important;
    background: rgba(242,184,75,.14) !important;
    color: var(--accent) !important;
}

/* recommendation "why" reason badge → amber tint */
.home-personal .home-recommendations-why-badge {
    border-color: rgba(242,184,75,.3) !important;
    background: rgba(242,184,75,.08) !important;
    color: #ffe6b8 !important;
    font-family: var(--ff-mono) !important;
}

/* ---------- 22. HOME "Прохождения" walkthroughs showcase ---------- */
/* PHOSPHOR pass: amber accents, mono labels, phosphor progress bars.
   Colour/typography only — layout untouched. Scoped to .home-walkthroughs. */

.home-walkthroughs .walkthroughs-shell { border-color: var(--border-strong) !important; }

/* kickers → mono caps, amber icon */
.home-walkthroughs .walkthroughs-kicker,
.home-walkthroughs .walkthrough-route-list-kicker {
    font-family: var(--ff-mono) !important;
    letter-spacing: .08em !important;
}
.home-walkthroughs .walkthroughs-kicker i,
.home-walkthroughs .walkthrough-route-list-kicker i { color: var(--accent) !important; }

/* status total pill → amber counts, mono */
.home-walkthroughs .walkthroughs-total { font-family: var(--ff-mono) !important; }
.home-walkthroughs .walkthroughs-total strong { color: var(--accent) !important; }

/* "Выбор маршрута" eyebrow → amber */
.home-walkthroughs .walkthrough-focus-eyebrow {
    font-family: var(--ff-mono) !important;
    border-color: rgba(242,184,75,.28) !important;
    background: rgba(242,184,75,.08) !important;
}
.home-walkthroughs .walkthrough-focus-eyebrow i { color: var(--accent) !important; }

/* signal + progress values → amber mono */
.home-walkthroughs .walkthrough-focus-signal-value,
.home-walkthroughs .walkthrough-progress-value,
.home-walkthroughs .walkthrough-route-progress-head strong {
    color: var(--accent) !important;
    font-family: var(--ff-mono) !important;
}
.home-walkthroughs .walkthrough-progress-label,
.home-walkthroughs .walkthrough-focus-signal-label { font-family: var(--ff-mono) !important; }

/* big rank watermark "01" → amber ghost */
.home-walkthroughs .walkthrough-focus-rank {
    color: rgba(242,184,75,.2) !important;
    text-shadow: 0 0 32px rgba(242,184,75,.22) !important;
}

/* progress fills (focus + route) → phosphor teal→amber + amber glow */
.home-walkthroughs .walkthrough-progress-track span,
.home-walkthroughs .walkthrough-route-progress-track span {
    background: linear-gradient(90deg, var(--secondary) 0%, #6fd0e0 48%, var(--accent) 100%) !important;
    box-shadow: 0 0 18px rgba(242,184,75,.28) !important;
}

/* route markers (02/03/04) → amber cartridge tags */
.home-walkthroughs .walkthrough-route-marker {
    border-color: rgba(242,184,75,.42) !important;
    color: var(--accent) !important;
}

/* CTA "Открыть прохождение" → amber accent */
.home-walkthroughs .walkthrough-focus-cta { border-color: rgba(242,184,75,.4) !important; }
.home-walkthroughs .walkthrough-focus-cta i { color: var(--accent) !important; }
.home-walkthroughs .walkthrough-focus-card:hover .walkthrough-focus-cta {
    border-color: var(--accent) !important;
    background: rgba(242,184,75,.12) !important;
    color: #ffe6b8 !important;
}

/* card hover → amber border */
.home-walkthroughs .walkthrough-focus-card:hover,
.home-walkthroughs .walkthrough-route-card:hover { border-color: rgba(242,184,75,.36) !important; }

/* ---------- 23. HOME "Поигровки" gameplays showcase --------------- */
/* PHOSPHOR pass (mirror of §22 for the gameplays twin). Colour/typography
   only — layout untouched. Scoped to .home-gameplays. */

.home-gameplays .home-gameplays-shell { border-color: var(--border-strong) !important; }

/* kickers → mono caps, amber icon */
.home-gameplays .gameplays-kicker,
.home-gameplays .gameplay-route-list-kicker {
    font-family: var(--ff-mono) !important;
    letter-spacing: .08em !important;
}
.home-gameplays .gameplays-kicker i,
.home-gameplays .gameplay-route-list-kicker i { color: var(--accent) !important; }

/* status total pill → amber counts, mono */
.home-gameplays .gameplays-total { font-family: var(--ff-mono) !important; }
.home-gameplays .gameplays-total strong { color: var(--accent) !important; }

/* "Свежий выпуск" eyebrow → true amber + mono */
.home-gameplays .gameplay-focus-eyebrow {
    font-family: var(--ff-mono) !important;
    border-color: rgba(242,184,75,.3) !important;
    background: rgba(242,184,75,.08) !important;
    color: #ffe6b8 !important;
}
.home-gameplays .gameplay-focus-eyebrow i { color: var(--accent) !important; }

/* signal value + stat values → amber mono */
.home-gameplays .gameplay-focus-signal-value,
.home-gameplays .gameplay-focus-stat-value {
    color: var(--accent) !important;
    font-family: var(--ff-mono) !important;
}
.home-gameplays .gameplay-focus-signal-label,
.home-gameplays .gameplay-focus-stat-label { font-family: var(--ff-mono) !important; }

/* rank "01" badge + route markers (02/03) → amber cartridge tags */
.home-gameplays .gameplay-focus-rank,
.home-gameplays .gameplay-route-marker {
    border: 1px solid rgba(242,184,75,.42) !important;
    color: var(--accent) !important;
    font-family: var(--ff-mono) !important;
}

/* CTAs "Смотреть выпуск" / "Открыть выпуск" → amber */
.home-gameplays .gameplay-focus-cta,
.home-gameplays .gameplay-route-cta { border-color: rgba(242,184,75,.4) !important; }
.home-gameplays .gameplay-focus-cta i,
.home-gameplays .gameplay-route-cta i { color: var(--accent) !important; }
.home-gameplays .gameplay-focus-card:hover .gameplay-focus-cta,
.home-gameplays .gameplay-route-card:hover .gameplay-route-cta {
    border-color: var(--accent) !important;
    background: rgba(242,184,75,.12) !important;
    color: #ffe6b8 !important;
}

/* card hover + next-slot → amber */
.home-gameplays .gameplay-focus-card:hover,
.home-gameplays .gameplay-route-card:hover { border-color: rgba(242,184,75,.36) !important; }
.home-gameplays .gameplay-route-soon:hover {
    border-color: rgba(242,184,75,.36) !important;
}
.home-gameplays .gameplay-route-soon-icon i { color: var(--accent) !important; }

/* 23b. "Следом в очереди" route-card corrections (2026-06-04)
   green type chip → neutral violet; thumbnail fills the card height as a clean
   cover crop (the earlier square left an empty strip below it). */
.home-gameplays .gameplay-chip--type {
    border-color: var(--border) !important;
    background: rgba(138,109,233,.12) !important;
    color: #e0d8ff !important;
}
.home-gameplays .gameplay-route-media {
    align-self: stretch !important;
    aspect-ratio: auto !important;
}
.home-gameplays .gameplay-route-media img { object-position: center; }

/* 23c. "Следом в очереди" timeline axis fix (2026-06-04)
   Was a teal→gold line that bisected the amber markers and dangled at both ends.
   → amber axis that dissolves into transparency at the ends (no hard dangle),
   start dot amber, and OPAQUE marker discs so the line no longer shows through
   the number circles (reads as dots joined by a line, not a line through them). */
.home-gameplays .gameplay-route-list::before {
    background: linear-gradient(180deg, transparent, var(--accent) 16%, rgba(242,184,75,.4) 84%, transparent) !important;
    opacity: .55 !important;
}
.home-gameplays .gameplay-route-list-head::before {
    background: var(--accent) !important;
    box-shadow: 0 0 8px 1px rgba(242,184,75,.5) !important;
}
.home-gameplays .gameplay-route-marker {
    background: #0c0f16 !important;
}

/* 23d. Fix: route card created its own stacking context (position:relative
   + z-index:1), trapping the marker's z-index:4 BELOW the axis line (z-index:2),
   so the line painted OVER the number. Drop the card's z-index so the marker
   rises into the list's stacking context and its opaque disc masks the line. */
.home-gameplays .gameplay-route-card,
.home-gameplays .gameplay-route-card--solo { z-index: auto !important; }
.home-gameplays .gameplay-route-marker { z-index: 5 !important; }

/* 23e. Lighter hover for the route "Открыть выпуск" CTA (2026-06-04).
   The CTA is inline-flex but stretches full-width in the flex column, so the
   amber fill read as a heavy bar. → on card hover: amber text + arrow nudge,
   no background/border fill. (The featured "Смотреть выпуск" button keeps its
   fill — it is a real button, handled in §23.) */
.home-gameplays .gameplay-route-card:hover .gameplay-route-cta {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--accent) !important;
}
.home-gameplays .gameplay-route-cta i { transition: transform .2s var(--ease-snap); }
.home-gameplays .gameplay-route-card:hover .gameplay-route-cta i { transform: translateX(3px); }

/* 23f. Keep the marker above the axis on HOVER too. The hover lift uses
   transform: translateY, which re-creates a stacking context and re-traps the
   marker (z-index) BELOW the list axis line (z-index:2). Raising the hovered
   card above the line keeps the lift; the card bg is transparent at the marker
   rail (radial gradient sits top-right), so the line still shows and the opaque
   marker disc masks it at the number. */
.home-gameplays .gameplay-route-card:hover,
.home-gameplays .gameplay-route-card--solo:hover { z-index: 3 !important; }

/* =====================================================================
   23g. Queue rail REBUILD (2026-06-04)
   Root cause of every "line over the marker" bug: the marker lived INSIDE
   the card <a>, and the card's hover transform creates a stacking context
   that traps the marker under the list axis line. Fix by structure, not by
   patch: the marker is now a SIBLING of the card inside .gameplay-route-item.
   It lives in the item's own context, always above the axis — in rest AND on
   hover — because the card's transform no longer encloses it.
   ===================================================================== */
.home-gameplays .gameplay-route-item {
    position: relative;
    display: grid;
    grid-template-columns: var(--gameplay-queue-column, 38px) minmax(0, 1fr);
    align-items: stretch;
}
.home-gameplays .gameplay-route-item > .gameplay-route-marker {
    grid-column: 1;
    align-self: start;
    justify-self: center;
    margin-top: 16px;
    z-index: 3;            /* above the axis (z-index:2); never trapped now */
}
.home-gameplays .gameplay-route-item > .gameplay-route-card {
    grid-column: 2;
    grid-template-columns: 96px minmax(0, 1fr) !important;  /* media + body only */
}

/* 23g (cont.) media/body were pinned to grid-column 2/3 for the old 3-col card
   (marker was col 1). Marker is gone from the card now → re-place them. */
.home-gameplays .gameplay-route-item > .gameplay-route-card > .gameplay-route-media { grid-column: 1 !important; }
.home-gameplays .gameplay-route-item > .gameplay-route-card > .gameplay-route-body { grid-column: 2 !important; }

/* 23h. Queue route card polish (2026-06-04): amber play overlay on the thumb
   (signals "video", reveals on hover) + amber title on hover. */
.home-gameplays .gameplay-route-media { overflow: hidden; }
.home-gameplays .gameplay-route-play {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(.7);
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: #1a1206;
    font-size: .72rem;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 6px 18px -4px rgba(242,184,75,.65), 0 0 0 4px rgba(8,9,13,.35);
    transition: opacity .25s ease, transform .25s var(--ease-snap);
}
.home-gameplays .gameplay-route-play i { margin-left: 2px; }
.home-gameplays .gameplay-route-card:hover .gameplay-route-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.home-gameplays .gameplay-route-card:hover .gameplay-route-title {
    color: var(--accent) !important;
}
.home-gameplays .gameplay-route-title { transition: color .2s ease; }

/* 23i. Thumbnail was flush to the card's left edge (margin: 8px 0 → no left gap).
   Inset it on all sides so it floats as a tidy rounded thumb. */
.home-gameplays .gameplay-route-item > .gameplay-route-card > .gameplay-route-media {
    margin: 8px !important;
}

/* ---------- 24. HOME "О канале" (about) section ------------------- */
/* PHOSPHOR pass: mono kickers + amber icons, amber mono numbers, phosphor
   panel borders. Colour/typography only. Scoped to .home-about. */
.home-about .about-shell,
.home-about .about-signal,
.home-about .about-card { border-color: var(--border-strong) !important; }

/* kickers → mono caps + amber icon */
.home-about .about-kicker,
.home-about .about-signal-kicker,
.home-about .about-card-kicker,
.home-about .about-feature-label {
    font-family: var(--ff-mono) !important;
    letter-spacing: .08em !important;
}
.home-about .about-kicker i,
.home-about .about-signal-kicker i,
.home-about .about-card-kicker i { color: var(--accent) !important; }

/* big signal value "12" + all numeric readouts → amber mono */
.home-about .about-signal-value,
.home-about .about-signal-stat-value,
.home-about .about-shortcut-count,
.home-about .about-rhythm-metric-value {
    color: var(--accent) !important;
    font-family: var(--ff-mono) !important;
}
.home-about .about-signal-stat-label,
.home-about .about-rhythm-metric-label { font-family: var(--ff-mono) !important; }

/* stat / pill chips → mono + amber icons */
.home-about .about-stat,
.home-about .about-pill { font-family: var(--ff-mono) !important; }
.home-about .about-stat i,
.home-about .about-pill i,
.home-about .about-shortcut-icon i,
.home-about .about-rhythm > li > i,
.home-about .about-connect-link i,
.home-about .about-signal-link i { color: var(--accent) !important; }

/* feature cards: amber icon + amber hover border */
.home-about .about-feature-icon i { color: var(--accent) !important; }
.home-about .about-feature-card:hover { border-color: rgba(242,184,75,.36) !important; }

/* badges → amber mono ("Контент с атмосферой"); soft badge stays violet */
.home-about .about-card-badge {
    font-family: var(--ff-mono) !important;
    border-color: rgba(242,184,75,.3) !important;
    background: rgba(242,184,75,.08) !important;
    color: #ffe6b8 !important;
}
.home-about .about-card-badge i { color: var(--accent) !important; }
.home-about .about-card-badge--soft {
    border-color: var(--border-strong) !important;
    background: rgba(138,109,233,.12) !important;
    color: #e6dcff !important;
}
.home-about .about-card-badge--soft i { color: var(--secondary) !important; }

/* sub-panels → violet border + amber hover */
.home-about .about-signal-stat,
.home-about .about-rhythm-metric,
.home-about .about-shortcut { border-color: var(--border) !important; }
.home-about .about-shortcut:hover { border-color: rgba(242,184,75,.36) !important; }

/* links → mono */
.home-about .about-signal-link,
.home-about .about-connect-link { font-family: var(--ff-mono) !important; }

/* 24b. About hero title is display:block (no icon / no flex gap), so the global
   caret margin-left:-8px (which compensates the rubric titles' flex gap) instead
   pulled the caret INTO the last letter. Give it a normal trailing gap here. */
.home-about .section-title::after { margin-left: 6px !important; }