/* =====================================================================
   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;
}
/* chevron removed 2026-06-05 — the gamepad icon already leads the title row,
   "❯ + иконка" подряд читались как двойной лидер */
.da-page-desc {
    margin: 1.05rem 0 0; max-width: 62ch;
    font-family: var(--ff-mono); font-size: .92rem;
    color: rgba(236,235,246,.82); line-height: 1.72;
}

.da-statchips { display: flex; flex-wrap: wrap; gap: 0; margin: 1.8rem 0 0;
    border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; width: fit-content;
    background: rgba(255,255,255,.015); }
.da-statchip { padding: .95rem 1.6rem; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; justify-content: center; }
.da-statchip:last-child { border-right: none; }
.da-statchip-num { font-family: var(--ff-pixel); font-size: 1.2rem; line-height: 1.15; 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: .64rem; text-transform: uppercase;
    letter-spacing: .1em; color: var(--text-muted); margin-top: .45rem; 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: the global `.section-title::after` caret (margin-left:-8px,
   tuned for the flex rubric titles) overlapped the last letter on this block-level
   title, and a plain &nbsp; break orphaned the caret onto its own line. Fix: disable
   the global caret here and attach the caret to a nowrap end-span (`и подробно`) so
   the caret always sticks to the last word and wraps together with it — never alone,
   never overlapping. */
.home-about .section-title::after { display: none !important; }
.home-about .about-title-end { white-space: nowrap; }
.home-about .about-title-end::after {
    content: "";
    display: inline-block; width: 7px; height: 1.05em;
    margin-left: 6px; vertical-align: -2px;
    background: var(--accent);
    animation: da-flicker 2.4s steps(1) infinite;
}

/* 24c. "Сигнал канала" panel — elevate within PHOSPHOR. */
.home-about .about-signal {
    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,.08), transparent 36%),
        linear-gradient(180deg, rgba(20,20,33,.92), rgba(10,10,18,.96)) !important;
    box-shadow: 0 18px 44px -24px rgba(0,0,0,.85), var(--glow-amber) !important;
}
.home-about .about-signal::before {
    background: linear-gradient(90deg, transparent, var(--primary) 20%, var(--accent) 50%, var(--secondary) 80%, transparent) !important;
    opacity: .8 !important;
}
/* big "12" → amber with phosphor glow */
.home-about .about-signal-value {
    text-shadow: 0 0 22px rgba(242,184,75,.45), 0 0 2px rgba(242,184,75,.55) !important;
}
/* live signal pulse on the satellite-dish kicker icon */
.home-about .about-signal-kicker i { animation: da-signal-pulse 2.6s ease-in-out infinite; }
@keyframes da-signal-pulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
/* stat readouts → individual framed cells with an amber top hairline */
.home-about .about-signal-stat {
    position: relative;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    background: rgba(255,255,255,.02) !important;
    overflow: hidden;
}
.home-about .about-signal-stat::before {
    content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242,184,75,.5), transparent);
    pointer-events: none;
}
/* refined "К свежим видео" link → phosphor button, amber on hover */
.home-about .about-signal-link {
    border-color: var(--border-strong) !important;
    background: rgba(138,109,233,.1) !important;
    color: var(--text) !important;
    font-family: var(--ff-mono) !important;
    transition: border-color .2s, background .2s, transform .15s var(--ease-snap);
}
.home-about .about-signal-link:hover {
    border-color: rgba(242,184,75,.45) !important;
    background: rgba(242,184,75,.08) !important;
    transform: translateY(-1px);
}
.home-about .about-signal-link i { color: var(--accent) !important; }

/* 24d. "Что вы найдёте" feature cards — phosphor framing + amber icon chips. */
.home-about .about-feature-card {
    position: relative;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    background: linear-gradient(165deg, rgba(255,255,255,.032), rgba(255,255,255,.012)) !important;
    overflow: hidden;
    transition: transform .2s var(--ease-snap), border-color .2s, box-shadow .2s;
}
.home-about .about-feature-card::before {
    content: ""; position: absolute; top: 0; left: 10px; right: 10px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242,184,75,.5), transparent);
    pointer-events: none;
}
.home-about .about-feature-card:hover {
    border-color: rgba(242,184,75,.4) !important;
    box-shadow: 0 14px 26px -12px rgba(0,0,0,.5), var(--glow-amber) !important;
}
/* icon chip → amber */
.home-about .about-feature-icon {
    border-color: rgba(242,184,75,.32) !important;
    background: rgba(242,184,75,.1) !important;
    box-shadow: 0 0 0 1px rgba(242,184,75,.06);
}
.home-about .about-feature-icon i { color: var(--accent) !important; }
/* title amber on hover */
.home-about .about-feature-card strong { transition: color .2s ease; }
.home-about .about-feature-card:hover strong { color: var(--accent) !important; }

/* 24e. "Обновления и подписка" — frame rhythm readouts + phosphor connect chips. */
.home-about .about-rhythm-metric {
    position: relative;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    background: rgba(255,255,255,.02) !important;
    overflow: hidden;
}
.home-about .about-rhythm-metric::before {
    content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242,184,75,.5), transparent);
    pointer-events: none;
}
.home-about .about-connect-link {
    border-color: var(--border) !important;
    background: rgba(255,255,255,.02) !important;
    font-family: var(--ff-mono) !important;
    transition: border-color .2s, background .2s, transform .15s var(--ease-snap);
}
.home-about .about-connect-link:hover {
    border-color: rgba(242,184,75,.4) !important;
    background: rgba(242,184,75,.06) !important;
    transform: translateY(-1px);
}
/* subscribe button keeps its violet primary look — just a subtle hover lift */
.home-about .about-card--connect .about-cta-btn { transition: transform .15s var(--ease-snap), box-shadow .2s ease; }
.home-about .about-card--connect .about-cta-btn:hover { transform: translateY(-2px); }

/* =====================================================================
   POLISH PASS · 2026-06-05 — прохождения: нумерованная пагинация,
   доступность с клавиатуры, мобильная полировка. Additive, loaded last.
   ===================================================================== */

/* ---- Numbered pagination (was bare arrows + "Страница X из Y") ---- */
.wt-index-page .wt-pagination {
    flex-wrap: wrap;
    gap: .4rem !important;
}
.wt-index-page .wt-page-numbers {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    justify-content: center;
}
.wt-index-page .wt-page-link {
    min-width: 42px;
    height: 42px;
    border-radius: var(--r-sm) !important;
}
/* Current page — locked to the arcade-amber accent, wins over :hover */
.wt-index-page .wt-page-link.is-current {
    background: linear-gradient(180deg, rgba(242,184,75,.18), rgba(242,184,75,.06)) !important;
    border-color: var(--border-focus) !important;
    color: var(--accent) !important;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(242,184,75,.25);
    cursor: default;
    transform: none;
}
.wt-index-page .wt-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 42px;
    color: var(--text-dim);
    font-family: var(--ff-mono);
    user-select: none;
}
.wt-index-page .wt-page-link.is-disabled {
    opacity: .35;
    pointer-events: none;
    cursor: default;
    transform: none;
}
/* aria-live caption — announced for screen readers, hidden visually on desktop */
.wt-index-page .wt-page-status {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Keyboard accessibility: visible focus rings on interactive cards/chips ---- */
.wt-index-page .wt-card-title-link:focus-visible,
.wt-index-page .wt-card-link:focus-visible,
.wt-index-page .wt-featured-card:focus-visible,
.wt-index-page .wt-page-link:focus-visible,
.wt-index-page .wt-quick-filter-btn:focus-visible,
.wt-index-page .wt-facet-chip:focus-visible,
.wt-index-page .da-chip:focus-visible,
.wt-index-page .wt-view-btn:focus-visible,
.wt-index-page .wt-hero-spotlight-action:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus) !important;
    border-radius: var(--r-sm);
}

/* ---- Mobile polish (≤640px): tighter rhythm, full-width primary actions ---- */
@media (max-width: 640px) {
    .wt-index-page .wt-pagination { margin-top: 28px !important; }
    .wt-index-page .wt-page-link--edge { min-width: 38px; height: 38px; }
    .wt-index-page .wt-page-link { min-width: 38px; height: 38px; font-size: .82rem; }

    /* Stat chips: let them breathe and wrap evenly instead of overflowing */
    .wt-index-page .da-statchips { gap: .5rem; }
    .wt-index-page .da-statchip { flex: 1 1 28%; min-width: 0; }

    /* Spotlight primary CTA spans the row so it's an easy thumb target */
    .wt-index-page .wt-hero-spotlight-actions { flex-wrap: wrap; }
    .wt-index-page .wt-hero-spotlight-action--primary { flex: 1 1 100%; justify-content: center; }

    /* Results toolbar wraps cleanly; view toggle stays grouped */
    .wt-index-page .wt-results-toolbar { gap: .5rem; }
}

/* ---- Respect reduced-motion: kill the card zoom + lift transitions ---- */
@media (prefers-reduced-motion: reduce) {
    .wt-index-page .wt-card-thumb img,
    .wt-index-page .wt-featured-card .wt-card-thumb img { transition: none !important; }
    .wt-index-page .wt-card:hover .wt-card-thumb img,
    .wt-index-page .wt-featured-card:hover .wt-card-thumb img { transform: none !important; }
    .wt-index-page .wt-page-link:hover { transform: none !important; }
}

/* ---- Fix 2026-06-05: fixed .site-header overlapped the page header.
   .da-page-head carried only ~24-48px top margin — no clearance for the
   ~80px position:fixed site header. Push the page <main> down like the
   home hero (~100px), and drop the now-redundant top margin so they
   don't stack. ---- */
.wt-index-main { padding-top: clamp(92px, 8vh, 116px); }
.wt-index-page .da-page-head { margin-top: 0; }

/* =====================================================================
   SPOTLIGHT POLISH · 2026-06-05 — "стартовая серия" featured banner.
   Adds hover life, vertical balance, terminal-mono meta + progress.
   ===================================================================== */
/* Card gains presence on hover (was fully inert) */
.wt-index-page .da-wt-spotlight-wrap .wt-hero-spotlight-card {
    transition: box-shadow .3s ease, border-color .3s ease;
}
.wt-index-page .da-wt-spotlight-wrap .wt-hero-spotlight-card:hover {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 1px rgba(242,184,75,.16), 0 28px 64px -30px rgba(138,109,233,.75) !important;
}
/* Slow cover zoom — subtle motion that draws the eye to the start series */
.wt-index-page .da-wt-spotlight-wrap .wt-hero-spotlight-media img {
    transition: transform .6s var(--ease-snap);
    will-change: transform;
}
.wt-index-page .da-wt-spotlight-wrap .wt-hero-spotlight-card:hover .wt-hero-spotlight-media img {
    transform: scale(1.045);
}
/* Center the copy vertically against the tall cover for balance */
.wt-index-page .da-wt-spotlight-wrap .wt-hero-spotlight-body { align-content: center; }

/* Meta chips → terminal mono, consistent corner radius, calmer surface */
.wt-index-page .wt-hero-spotlight-meta span {
    font-family: var(--ff-mono) !important;
    border-radius: var(--r-sm) !important;
    border-color: var(--border) !important;
    background: rgba(8,10,16,.6) !important;
    letter-spacing: .01em;
}

/* Progress: mono caption + soft phosphor glow on the fill */
.wt-index-page .wt-hero-spotlight-progress { font-family: var(--ff-mono) !important; }
.wt-index-page .wt-hero-spotlight-bar {
    background: rgba(255,255,255,.06) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.wt-index-page .wt-hero-spotlight-bar span { box-shadow: 0 0 12px rgba(242,184,75,.4); }

/* Secondary action: amber affordance, clearly distinct from the violet primary */
.wt-index-page .wt-hero-spotlight-action:not(.wt-hero-spotlight-action--primary):hover {
    border-color: var(--border-focus) !important;
    color: var(--accent) !important;
    background: rgba(242,184,75,.06) !important;
}

/* Reduced-motion: kill the spotlight cover zoom */
@media (prefers-reduced-motion: reduce) {
    .wt-index-page .da-wt-spotlight-wrap .wt-hero-spotlight-media img { transition: none !important; }
    .wt-index-page .da-wt-spotlight-wrap .wt-hero-spotlight-card:hover .wt-hero-spotlight-media img { transform: none !important; }
}

/* =====================================================================
   CONTINUE-WATCHING POLISH · 2026-06-05 — "продолжить прохождение".
   The JS-rendered cards were left out of the PHOSPHOR card treatment
   (.wt-card-title etc.) so they read as off-theme. Align them + add
   recency colour-coding and a terminal hover bar.
   ===================================================================== */
/* Titles + meta in line with the catalog cards (mono title, tinted meta) */
.wt-index-page .wt-continue-card-title {
    font-family: var(--ff-mono) !important;
    color: var(--text) !important;
}
.wt-index-page .wt-continue-card-meta { font-family: var(--ff-mono) !important; }

/* Chip / time / action → terminal mono, consistent radius */
.wt-index-page .wt-continue-chip,
.wt-index-page .wt-continue-time { font-family: var(--ff-mono) !important; }
.wt-index-page .wt-continue-card-action {
    font-family: var(--ff-mono) !important;
    border-radius: var(--r-sm) !important;
}

/* Recency colour-coding: freshest step (Последний) = amber accent */
.wt-index-page .wt-continue-grid .wt-continue-card:first-child .wt-continue-chip {
    border-color: rgba(242,184,75,.4) !important;
    background: rgba(242,184,75,.12) !important;
    color: var(--accent) !important;
}

/* Terminal hover: left accent bar slides in + amber border glow */
.wt-index-page .wt-continue-card-link { position: relative; overflow: hidden; }
.wt-index-page .wt-continue-card-link::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(180deg, var(--primary), var(--accent));
    opacity: 0; transition: opacity .24s ease;
    pointer-events: none;
}
.wt-index-page .wt-continue-card-link:hover:not(.is-disabled) {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 1px rgba(242,184,75,.14), 0 18px 38px -22px rgba(138,109,233,.7) !important;
}
.wt-index-page .wt-continue-card-link:hover:not(.is-disabled)::before { opacity: 1; }
/* Action button echoes amber when its card is hovered */
.wt-index-page .wt-continue-card-link:hover:not(.is-disabled) .wt-continue-card-action {
    border-color: var(--border-focus);
    background: rgba(242,184,75,.1);
    color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .wt-index-page .wt-continue-card-link::before { transition: none !important; }
}

/* =====================================================================
   REC-RAIL POLISH · 2026-06-05 — "рекомендуемые прохождения" showcase.
   Unifies accents with the spotlight/continue blocks (amber-violet),
   gives #1 a gold-podium rank, richer progress bars.
   ===================================================================== */
/* Card hover → amber glow (consistent with spotlight + continue) */
.wt-index-page .wt-rec-mini-card { transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.wt-index-page .wt-rec-mini-card:hover {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 1px rgba(242,184,75,.14), 0 20px 40px -24px rgba(138,109,233,.7) !important;
}

/* Progress: full phosphor spectrum + soft glow, mono caption, amber percentage */
.wt-index-page .wt-rec-progress { font-family: var(--ff-mono) !important; }
.wt-index-page .wt-rec-progress b { color: var(--accent) !important; }
.wt-index-page .wt-rec-progress-fill {
    background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent)) !important;
    box-shadow: 0 0 10px rgba(242,184,75,.32);
}

/* #1 pick → gold-podium rank badge; the rest stay neutral */
.wt-index-page .wt-rec-rail .wt-rec-mini-card:first-child .wt-rec-rank {
    color: #211707 !important;
    background: linear-gradient(180deg, var(--accent), var(--accent-deep)) !important;
    border-color: rgba(255,232,178,.6) !important;
    font-weight: 800;
    box-shadow: 0 6px 16px -6px rgba(242,184,75,.7);
}

/* "Весь каталог" → mono + amber hover */
.wt-index-page .wt-rec-all-link { font-family: var(--ff-mono) !important; }
.wt-index-page .wt-rec-all-link:hover {
    border-color: var(--border-focus) !important;
    color: var(--accent) !important;
    background: rgba(242,184,75,.06) !important;
}

/* =====================================================================
   FILTERS POLISH · 2026-06-05 — "быстрый фильтр".
   Inputs/buttons/active-chips were already terminal-styled (mono, --r-sm,
   amber). The quick-filter pills + genre/platform facet chips were the
   odd ones out (round violet pills, proportional font, violet active).
   Unify them: mono, --r-sm, amber hover/active.
   ===================================================================== */
/* Quick-filter buttons → terminal chips */
.wt-index-page .wt-quick-filter-btn {
    font-family: var(--ff-mono) !important;
    border-radius: var(--r-sm) !important;
    border-color: var(--border) !important;
    background: rgba(8,10,16,.5) !important;
    color: var(--text-muted) !important;
    font-weight: 600;
}
.wt-index-page .wt-quick-filter-btn i { color: var(--secondary-light) !important; }
.wt-index-page .wt-quick-filter-btn:hover {
    border-color: var(--border-focus) !important;
    color: var(--accent) !important;
    background: rgba(242,184,75,.06) !important;
    box-shadow: none !important;
}
.wt-index-page .wt-quick-filter-btn.is-active {
    border-color: var(--accent) !important;
    background: rgba(242,184,75,.1) !important;
    color: var(--accent) !important;
    box-shadow: inset 0 -2px 0 var(--accent) !important;
}
.wt-index-page .wt-quick-filter-btn.is-active i { color: var(--accent) !important; }

/* Genre / platform facet chips → same terminal treatment */
.wt-index-page .wt-facet-chip {
    font-family: var(--ff-mono) !important;
    border-radius: var(--r-sm) !important;
    border-color: var(--border) !important;
    background: rgba(8,10,16,.46) !important;
    color: var(--text-muted) !important;
    font-weight: 600;
}
.wt-index-page .wt-facet-chip:hover {
    border-color: var(--border-focus) !important;
    color: var(--accent) !important;
    background: rgba(242,184,75,.06) !important;
}
.wt-index-page .wt-facet-chip.is-active {
    border-color: var(--accent) !important;
    background: rgba(242,184,75,.1) !important;
    color: var(--accent) !important;
    box-shadow: inset 0 -2px 0 var(--accent) !important;
}
/* Count badge: dim by default, amber when its chip is hovered/active */
.wt-index-page .wt-facet-chip span {
    font-family: var(--ff-mono) !important;
    color: var(--text-dim) !important;
}
.wt-index-page .wt-facet-chip:hover span,
.wt-index-page .wt-facet-chip.is-active span { color: var(--accent) !important; }

/* "Расширенные" toggle → mono + amber hover */
.wt-index-page .wt-filters-toggle { font-family: var(--ff-mono) !important; }
.wt-index-page .wt-filters-toggle:hover {
    border-color: var(--border-focus) !important;
    color: var(--accent) !important;
}

/* =====================================================================
   CATALOG-GRID POLISH · 2026-06-05 — "актуальные прохождения".
   Cards already share the theme (mono titles, amber hover, violet game,
   amber meta icons). Remaining drift: progress bars (teal→purple) and the
   view-toggle active state. Unify with the rec-rail/spotlight language.
   ===================================================================== */
/* Progress: full phosphor spectrum + glow, mono caption, amber percentage */
.wt-index-page .wt-card-progress-row { font-family: var(--ff-mono) !important; }
.wt-index-page .wt-card-progress-row b { color: var(--accent) !important; }
.wt-index-page .wt-card-progress-bar span {
    background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent)) !important;
    box-shadow: 0 0 10px rgba(242,184,75,.3);
}

/* Difficulty + "Новых" badges → mono (semantic colours kept) */
.wt-index-page .wt-difficulty,
.wt-index-page .wt-card-action-link--new { font-family: var(--ff-mono) !important; }

/* View toggle → mono; active = amber "selected" (matches filter chips) */
.wt-index-page .wt-view-btn { font-family: var(--ff-mono) !important; }
.wt-index-page .wt-view-btn.is-active {
    color: var(--accent) !important;
    background: rgba(242,184,75,.12) !important;
    border-color: var(--accent) !important;
}

/* "Сортировка" / results pills → mono, amber value emphasis */
.wt-index-page .wt-results-pill { font-family: var(--ff-mono) !important; }
.wt-index-page .wt-results-pill b { color: var(--accent) !important; }