@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================================
   NETCADE DESIGN SYSTEM — v0.1  ·  "Platinum"
   Milestone 1: foundation tokens + header / nav / search / buttons / chips,
   with full hover / focus / active states (the part scattered inline CSS missed).

   Loaded last by mu-plugins/netcade-design-system.php so it supersedes the
   theme's per-page inline blocks. Appearance only — no markup/PHP/logic changed.
   Remove the mu-plugin to revert 100%.  Selectors use `html body …` to outrank
   the theme's inline !important rules.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS  — one authoritative set everything can inherit
   --------------------------------------------------------------------------- */
html:root{
  /* neutralize the legacy green accents at the source */
  --nc-accent:        #eeeeee !important;   /* was green/gold */
  --nc-accent-border: #b4b4b4 !important;
  --nc-accent-ink:    #0c0e10 !important;
  --nc-green:         #d7d7d7 !important;   /* was #39ff14 / #56d17f */

  /* design-system palette (Platinum) */
  --nds-bg:#0b0c0e; --nds-bg-1:#131313; --nds-panel:#191919; --nds-panel-2:#202020; --nds-panel-3:#292929;
  --nds-line:#2a2a2a; --nds-line-2:#373737;
  --nds-text:#f1f1f1; --nds-muted:#a3a3a3; --nds-soft:#cccccc;
  --nds-silver:#eeeeee; --nds-silver-2:#cfcfcf; --nds-ink:#0c0e10;

  /* shape / depth / motion */
  --nds-r:12px; --nds-r-lg:16px; --nds-pill:999px;
  --nds-shadow:0 18px 40px rgba(0,0,0,.45); --nds-shadow-sm:0 6px 18px rgba(0,0,0,.35);
  --nds-ring:0 0 0 3px rgba(203, 203, 203,.38);
  --nds-ease:cubic-bezier(.2,.7,.2,1); --nds-fast:.14s; --nds-med:.22s;
}

/* ---------------------------------------------------------------------------
   2. GLOBAL — background that isn't flat (cool wash + faint film grain) + type
   --------------------------------------------------------------------------- */
html body{
  background-color:var(--nds-bg) !important;
  background-image:
    radial-gradient(1000px 680px at 10% 18%, rgba(168, 168, 168,.06), transparent 60%),
    radial-gradient(1200px 760px at 92% -6%, rgba(137, 137, 137,.05), transparent 55%) !important;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:2147483000; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html body h1, html body h2, html body h3,
html body .entry-title, html body .nc-section-title, html body .nc-row-title{
  font-family:'Fraunces','Cormorant Garamond',Georgia,serif !important;
  font-optical-sizing:auto; letter-spacing:.2px; font-weight:600;
}

/* ---------------------------------------------------------------------------
   3. HEADER + SIDEBAR
   --------------------------------------------------------------------------- */
html body .site-header, html body header.site-header{
  background:rgba(11,12,14,.72) !important;
  backdrop-filter:blur(14px) saturate(1.05);
  border-bottom:1px solid var(--nds-line) !important;
}
/* logo (nclogobig.png is raster green → desaturate to silver, CSS-only) */
html body img[src*="nclogobig"], html body .custom-logo, html body .nc-logo img{
  filter:grayscale(1) brightness(2) contrast(.78) !important;
}
/* sidebar rail icons → silver, with a calm hover/active */
/* content thumbnails must keep full color (icons handled separately) */
html body [class*="side"] img, html body aside img{ filter:none !important; }
html body .nc-sidebar svg, html body .nc-sidebar svg path, html body .nc-sidebar i{ color:var(--nds-soft) !important; fill:var(--nds-soft) !important; }
html body .nc-sidebar a, html body [class*="side-item"]{ transition:background var(--nds-fast) var(--nds-ease), color var(--nds-fast); }
html body [class*="side-item"]:hover{ background:var(--nds-panel-2) !important; }
html body [class*="side-item"].active, html body [class*="side-item"].is-active{
  background:var(--nds-panel-3) !important; color:var(--nds-text) !important;
}

/* ---------------------------------------------------------------------------
   4. SEARCH
   --------------------------------------------------------------------------- */
html body .header-search, html body .nc-search, html body form[role="search"]{
  background:var(--nds-panel) !important; border:1px solid var(--nds-line) !important;
  border-radius:var(--nds-pill) !important; transition:border-color var(--nds-fast), box-shadow var(--nds-med);
}
html body .header-search:focus-within, html body .nc-search:focus-within, html body form[role="search"]:focus-within{
  border-color:var(--nds-line-2) !important; box-shadow:var(--nds-ring) !important;
}
html body i.fas, html body .fa-search, html body .search-submit{ color:var(--nds-soft) !important; fill:var(--nds-soft) !important; }

/* ---------------------------------------------------------------------------
   5. BUTTONS  (.nc-btn + chrome / silver / active / pill)  — full states
   --------------------------------------------------------------------------- */
html body .nc-btn{
  transition:background var(--nds-fast) var(--nds-ease), border-color var(--nds-fast),
             transform var(--nds-fast), box-shadow var(--nds-med), filter var(--nds-fast);
}
/* neutral "chrome" button */
html body .nc-btn.chrome{ background:var(--nds-panel-2) !important; color:var(--nds-text) !important; border:1px solid var(--nds-line-2) !important; }
html body .nc-btn.chrome:hover{ background:var(--nds-panel-3) !important; border-color:#444444 !important; transform:translateY(-1px); box-shadow:var(--nds-shadow-sm); }
html body .nc-btn.chrome:active{ transform:translateY(0); box-shadow:none; }
/* primary "silver" button (was rendering green) */
html body .nc-btn.silver, html body .nc-btn--subscribe-silver, html body .signup{
  background:#f5f5f5 !important; color:var(--nds-ink) !important;
  border:1px solid rgba(0,0,0,.06) !important; box-shadow:var(--nds-shadow-sm) !important;
}
html body .nc-btn.silver *{ color:var(--nds-ink) !important; }
html body .nc-btn.silver:hover{ filter:brightness(1.04); transform:translateY(-1px); }
html body .nc-btn.silver:active{ transform:translateY(0); filter:brightness(.98); }
/* active / selected toggle buttons (e.g. loop/shuffle) */
html body .nc-btn.active{ background:var(--nds-silver) !important; color:var(--nds-ink) !important; border-color:#b4b4b4 !important; }
/* focus ring for keyboard users */
html body .nc-btn:focus-visible, html body .focus-silver:focus-visible{ outline:none !important; box-shadow:var(--nds-ring) !important; }
/* NOTE: .nc-btn.gold CTAs (buy-now / follow) intentionally left as-is for now. */
/* de-gloss pass: calmer, less-shouty weights on buttons + chips (gold left as-is) */
html body .nc-btn:not(.gold), html body .nc-chip{ font-weight:600 !important; }

/* ---------------------------------------------------------------------------
   6. CHIPS / TAG FILTERS  (.nc-chip)  — full states
   --------------------------------------------------------------------------- */
html body .nc-chip{ transition:background var(--nds-fast), border-color var(--nds-fast), color var(--nds-fast); }
html body .nc-chip:hover{ color:var(--nds-text) !important; border-color:#444444 !important; }
html body .nc-chip.selected, html body .nc-chip.is-selected{
  background:var(--nds-silver) !important; color:var(--nds-ink) !important; border-color:#b4b4b4 !important;
}

/* ---------------------------------------------------------------------------
   7. SECTION ICONS / BADGES / FLYOUTS  (kill green halos)
   --------------------------------------------------------------------------- */
html body .nc-row-icon{ background:var(--nds-panel-2) !important; border-color:var(--nds-line) !important; box-shadow:none !important; }
html body .nc-row-icon svg, html body .nc-row-icon i, html body .nc-row-icon path{ color:var(--nds-soft) !important; fill:var(--nds-soft) !important; }
html body .nc-badge, html body .nc-wish-count, html body .nc-cart-count, html body .nc-notif-count{
  background:#414141 !important; color:#f2f2f2 !important; box-shadow:none !important;
}
html body .nc-flyout, html body .nc-dd-menu, html body ul.dropdown-menu{
  border-color:var(--nds-line) !important; box-shadow:var(--nds-shadow) !important;
}

/* ---------------------------------------------------------------------------
   9. CONFIRMED GREEN KILLERS  (exact classes from netcade.local inspection)
   Specificity intentionally raised to beat the theme's inline !important rules.
   --------------------------------------------------------------------------- */
/* category + tag pills — GAMES/VIDEOS/MUSIC/ALL are all button.nc-chip.selected */
html body #content .nc-chip.nc-chip.selected,
html body #primary .nc-chip.nc-chip.selected,
html body #main .nc-chip.nc-chip.selected,
html body .nc-filter-bar .nc-chip.nc-chip.selected{
  background:var(--nds-silver) !important; color:var(--nds-ink) !important;
  border-color:#b4b4b4 !important; box-shadow:none !important;
}
html body #content .nc-chip.nc-chip.selected *{ color:var(--nds-ink) !important; }

/* SIGN UP CTA (a.nc-auth-cta.nc-btn.chrome renders green) -> silver primary */
html body #site-header a.nc-auth-cta.nc-btn,
html body #site-header .nc-auth-cta.nc-btn{
  background:#f5f5f5 !important;
  color:var(--nds-ink) !important; border-color:rgba(0,0,0,.06) !important;
}
html body #site-header a.nc-auth-cta.nc-btn *{ color:var(--nds-ink) !important; }

/* search icon + submit */
html body i.fas.fa-search.fa-search,
html body button.search-submit.search-submit,
html body button.search-submit.search-submit i{ color:var(--nds-soft) !important; fill:var(--nds-soft) !important; }

/* sidebar rail links + active state (Home was green) */
html body a.sidebar-link.sidebar-link{ color:var(--nds-soft) !important; }
html body a.sidebar-link.sidebar-link i,
html body a.sidebar-link.sidebar-link .fas,
html body a.sidebar-link.sidebar-link svg,
html body a.sidebar-link.sidebar-link path{ color:var(--nds-soft) !important; fill:var(--nds-soft) !important; }
html body li.active a.sidebar-link.sidebar-link,
html body a.sidebar-link.sidebar-link.active,
html body a.sidebar-link.sidebar-link.is-active{ background:var(--nds-panel-3) !important; color:var(--nds-text) !important; }
html body li.active a.sidebar-link.sidebar-link i,
html body a.sidebar-link.sidebar-link.active i,
html body a.sidebar-link.sidebar-link.active .fas{ color:var(--nds-text) !important; }

/* category dropdown menus border */
html body ul.dropdown-menu.dropdown-menu{ border-color:var(--nds-line) !important; }

/* search form icons (#netcade-search-form / #ncHeaderSearch) */
html body #netcade-search-form i, html body #netcade-search-form svg, html body #netcade-search-form path,
html body #netcade-search-form .search-submit,
html body #ncHeaderSearch i, html body #ncHeaderSearch svg, html body #ncHeaderSearch path{
  color:var(--nds-soft) !important; fill:var(--nds-soft) !important;
}

/* sidebar rail (#netcadeSidebarMini) — icons + active Home, was green */
html body #netcadeSidebarMini .sidebar-link{ background:transparent !important; border-color:transparent !important; color:var(--nds-soft) !important; transition:background var(--nds-fast) var(--nds-ease); }
html body #netcadeSidebarMini .sidebar-link:hover{ background:var(--nds-panel-2) !important; }
html body #netcadeSidebarMini .sidebar-link.active,
html body #netcadeSidebarMini .sidebar-link.is-active,
html body #netcadeSidebarMini .sidebar-link[aria-current],
html body #netcadeSidebarMini li.active .sidebar-link{ background:var(--nds-panel-3) !important; color:var(--nds-text) !important; }
html body #netcadeSidebarMini .sidebar-link i, html body #netcadeSidebarMini .sidebar-text,
html body #netcadeSidebarMini i.fas, html body #netcadeSidebarMini i.fab,
html body #shuffle-btn, html body #shuffle-btn i{ color:var(--nds-soft) !important; fill:var(--nds-soft) !important; }
html body #netcadeSidebarMini .sidebar-link.active i,
html body #netcadeSidebarMini .sidebar-link.active .sidebar-text{ color:var(--nds-text) !important; }

/* ---------------------------------------------------------------------------
   10. LOGGED-IN HEADER FIXES (only render when authenticated)
   --------------------------------------------------------------------------- */
/* restore real colors on sidebar / featured user avatars (logo stays desaturated) */
html body #netcadeSidebarMini img,
html body .nc-featured img, html body [class*="featured"] img,
html body [class*="online"] img, html body .nc-rail img{ filter:none !important; }

/* CREATE split-button (was a lime gradient) -> bright silver "primary" CTA */
html body #site-header .nc-btn.split,
html body #site-header .nc-btn.dark.ui.split,
html body .nc-btn.dark.split, html body .nc-btn.split{
  background:#f5f5f5 !important;
  color:#0c0e10 !important; border:1px solid rgba(0,0,0,.06) !important;
}
html body #site-header .nc-btn.split *{ color:#0c0e10 !important; fill:#0c0e10 !important; }

/* count badges (wish / cart / notif) were green gradients -> neutral silver pill */
html body #site-header .nc-badge,
html body .nc-badge.nc-wish-count,
html body .nc-badge.nc-cart-count,
html body .nc-badge.nc-notif-count{
  background:#eeeeee !important; color:#0c0e10 !important;
  box-shadow:none !important; border-color:transparent !important;
}

/* ---------------------------------------------------------------------------
   11. GLOBAL CONTENT POLISH — lifts every page out of "wordpressy" feel
   (type rhythm, readable prose, consistent card surfaces, refined inputs).
   Page-specific passes (video page, dashboard, chat) layer on top of this.
   --------------------------------------------------------------------------- */
/* heading rhythm */
html body h1{ line-height:1.08; letter-spacing:.2px; }
html body h2{ line-height:1.16; letter-spacing:.2px; }
html body h3{ line-height:1.2; }

/* readable prose / descriptions / comments */
html body .nc-desc-body, html body .nc-desc-wrap,
html body .comment-content, html body .nc-comment-body{
  line-height:1.7; color:var(--nds-soft); font-size:14.5px;
}

/* consistent panel + card surfaces with a calm hover lift */
html body .nc-card, html body .nc-panel{
  background:var(--nds-panel) !important;
  border:1px solid var(--nds-line) !important;
  border-radius:var(--nds-r-lg) !important;
}
html body .nc-card{ transition:transform var(--nds-fast) var(--nds-ease), border-color var(--nds-fast), box-shadow var(--nds-med); }
html body .nc-card:hover{ transform:translateY(-2px); border-color:var(--nds-line-2) !important; box-shadow:var(--nds-shadow) !important; }

/* refined inputs + comment composer (calm surfaces, clean focus ring) */
html body textarea,
html body input[type="text"]:not(.header-search input):not([class*="search"]),
html body input[type="email"], html body input[type="password"]{
  background:var(--nds-bg-1); border:1px solid var(--nds-line); border-radius:var(--nds-r);
  color:var(--nds-text); transition:border-color var(--nds-fast), box-shadow var(--nds-med);
}
html body textarea:focus, html body input[type="text"]:focus,
html body input[type="email"]:focus, html body input[type="password"]:focus{
  border-color:var(--nds-line-2); box-shadow:var(--nds-ring); outline:none;
}

/* video-page description block (confirmed classes) — tighter, more editorial */
html body .nc-desc-section{ border-top:1px solid var(--nds-line); padding-top:14px; }
html body .nc-desc-toggle{ color:var(--nds-soft) !important; font-weight:600; }
html body .nc-actions{ gap:8px; }

/* ---------------------------------------------------------------------------
   12. METALLIC DEPTH + MOTION  — chrome / steel / titanium, not flat white-black
   --------------------------------------------------------------------------- */
html:root{
  --nds-steel:#b0b0b0;     /* cool titanium accent (used sparingly) */
  --nds-steel-2:#878787;
  --nds-chrome-hi:#ffffff; --nds-chrome-mid:#e8e8e8; --nds-chrome-lo:#cacaca;
}

/* --- brushed-metal edge on panels/cards (subtle top highlight + faint sheen) --- */
html body .nc-card, html body .nc-panel, html body .site-header, html body #site-header{
  background-image:none !important;
}
html body .nc-card, html body .nc-panel{
  box-shadow:var(--nds-shadow-sm) !important;
}

/* --- chrome buttons: beveled gradient + shine-shift on hover + press --- */
html body .nc-btn.silver,
html body .signup,
html body #site-header .nc-create #ncCreateBtn,
html body #site-header .nc-btn.split{
  background-image:none !important; background:#f5f5f5 !important;
  color:var(--nds-ink) !important; border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.40) !important;
  transition:transform var(--nds-fast) var(--nds-ease), box-shadow var(--nds-med), filter var(--nds-fast) !important;
}
html body .nc-btn.silver:hover,
html body .signup:hover,
html body #site-header .nc-create #ncCreateBtn:hover,
html body #site-header .nc-btn.split:hover{
  transform:translateY(-1px); filter:brightness(1.01);
  box-shadow:0 6px 18px rgba(0,0,0,.42) !important;
}
html body .nc-btn.silver:active,
html body #site-header .nc-create #ncCreateBtn:active,
html body #site-header .nc-btn.split:active{ transform:translateY(0) scale(.97); }

/* --- dark "chrome" buttons get a subtle steel bevel too --- */
html body .nc-btn.chrome{
  background-image:none !important; background:var(--nds-panel-2) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.30) !important;
}
html body .nc-btn.chrome:hover{ background:var(--nds-panel-3) !important; border-color:#474747 !important; }

/* --- a whisper of titanium so it isn't pure monochrome (links + active rails) --- */
html body a:not(.nc-btn):not(.sidebar-link):not([class*="chip"]):hover{ color:var(--nds-steel); }
html body #netcadeSidebarMini .sidebar-link.active,
html body .nc-chip.selected{ box-shadow:inset 0 0 0 1px rgba(176, 176, 176,.35) !important; }

/* --- global motion: everything interactive eases, nothing snaps --- */
html body .nc-btn, html body .nc-chip, html body a.sidebar-link,
html body .nc-card, html body .nc-dd-item, html body .nc-badge,
html body [class*="tab"], html body .nc-row-icon{
  transition:background-color var(--nds-fast) var(--nds-ease), color var(--nds-fast),
             border-color var(--nds-fast), transform var(--nds-fast) var(--nds-ease),
             box-shadow var(--nds-med), filter var(--nds-fast);
}
@media (prefers-reduced-motion: reduce){
  html body *{ transition:none !important; animation:none !important; }
}

/* ============================================================================
   v0.2.0 — metallic + motion. Per-page passes (video, dashboard, chat) next.
   ============================================================================ */

/* ============================================================================
   v0.3.0 — CONTENT-PAGE polish (video / game / music): frame content + refine
   controls so bright thumbnails/ads read as intentional dark cards, not raw blocks.
   ============================================================================ */
/* Sidebar ad slot — frame the creative as a clean dark card (image content unchanged) */
html body .my-native-ad{ background:#141414 !important; border:1px solid rgba(255,255,255,.09) !important; border-radius:14px !important; overflow:hidden !important; box-shadow:0 4px 16px rgba(0,0,0,.42) !important; }
html body .my-native-ad img, html body .nc-sidebar-ad img{ display:block !important; width:100% !important; height:auto !important; border-radius:14px !important; }
/* Sidebar related / up-next / browse cards — frame bright thumbnails */
html body aside.sidebar a[href] img{ border-radius:12px !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow:0 3px 14px rgba(0,0,0,.4) !important; display:block !important; }
html body aside.sidebar a[href]{ text-decoration:none !important; display:block !important; transition:transform .18s cubic-bezier(.2,.7,.2,1) !important; }
html body aside.sidebar a[href]:hover{ transform:translateY(-2px) !important; }
html body aside.sidebar h2, html body aside.sidebar h3{ font-weight:700 !important; letter-spacing:.035em !important; color:#ececec !important; }
/* Content action buttons (library / playlist) — cohesive pills with real hover */
html body .nc-ultra-action{ background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.11) !important; border-radius:10px !important; font-weight:600 !important; transition:background .16s, transform .16s, border-color .16s !important; }
html body .nc-ultra-action:hover{ background:rgba(255,255,255,.10) !important; transform:translateY(-1px) !important; border-color:rgba(255,255,255,.20) !important; }
/* Comments composer — polished input */
html body .netcade-textarea{ background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.11) !important; border-radius:12px !important; color:#f1f1f1 !important; padding:12px 14px !important; }
html body .netcade-textarea:focus{ border-color:rgba(255,255,255,.24) !important; box-shadow:0 0 0 3px rgba(138, 138, 138,.16) !important; outline:none !important; }

/* ============================================================================
   v0.4.0 — PREMIUM MICRO-INTERACTIONS  (additive only; no component rewrites)
   Adds the modern touches the earlier layers don't cover: branded selection,
   a refined scrollbar, keyboard focus rings everywhere, crisper type, a subtle
   thumbnail Ken-Burns zoom, an animated prose-link underline, and a skeleton
   shimmer utility. Everything uses the existing --nds tokens and respects
   prefers-reduced-motion (the global kill at §12 already disables all
   transitions/animations under reduced motion; motion added here is also
   wrapped in explicit no-preference guards). Fully reversible: delete this block.
   ============================================================================ */

/* — crisper type + native-app feel (no layout change) — */
html body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;   /* no grey flash on mobile tap */
}

/* — branded text selection — */
html body ::selection{ background:rgba(176, 176, 176,.30); color:var(--nds-text); }
html body ::-moz-selection{ background:rgba(176, 176, 176,.30); color:var(--nds-text); }

/* — refined thin scrollbar (Firefox + WebKit) — */
html body{ scrollbar-width:thin; scrollbar-color:var(--nds-line-2) transparent; }
html body ::-webkit-scrollbar{ width:11px; height:11px; }
html body ::-webkit-scrollbar-track{ background:transparent; }
html body ::-webkit-scrollbar-thumb{
  background:var(--nds-line-2); border-radius:999px;
  border:3px solid transparent; background-clip:padding-box;
  transition:background var(--nds-fast);
}
html body ::-webkit-scrollbar-thumb:hover{ background:#474747; }

/* — accessible keyboard focus rings everywhere (only on :focus-visible, so mouse
     users never see them). Form controls + buttons keep the softer inset ring. — */
html body :focus-visible{ outline:2px solid var(--nds-steel) !important; outline-offset:2px !important; }
html body .nc-btn:focus-visible, html body button:focus-visible,
html body input:focus-visible, html body textarea:focus-visible, html body select:focus-visible,
html body [role="button"]:focus-visible{ outline:none !important; box-shadow:var(--nds-ring) !important; }

/* — smooth in-page anchor scrolling (motion-guarded) — */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

/* — thumbnail Ken-Burns: a slow, subtle zoom on the card image on hover. Scoped
     with :has(> img) so it only ever touches an anchor that directly wraps a
     thumbnail (never a title link); browsers without :has() simply skip it. — */
@media (prefers-reduced-motion: no-preference){
  html body .netcade-video-card a[href]:has(> img),
  html body .channel-card a[href]:has(> img),
  html body .nc-card a[href]:has(> img){ overflow:hidden; display:block; }
  html body .netcade-video-card a[href]:has(> img) > img,
  html body .channel-card a[href]:has(> img) > img,
  html body .nc-card a[href]:has(> img) > img{
    transition:transform .55s var(--nds-ease); will-change:transform;
  }
  html body .netcade-video-card:hover a[href]:has(> img) > img,
  html body .channel-card:hover a[href]:has(> img) > img,
  html body .nc-card:hover a[href]:has(> img) > img{ transform:scale(1.05); }
}

/* — refined underline on in-prose links: always visible (accessible — links stay
     discoverable without hover), muted by default, brightens to steel on hover — */
html body .nc-desc-body a:not(.nc-btn),
html body .nc-desc-wrap a:not(.nc-btn),
html body .nc-comment-body a:not(.nc-btn),
html body .comment-content a:not(.nc-btn){
  text-decoration:underline;
  text-decoration-color:rgba(176, 176, 176,.45);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:text-decoration-color var(--nds-med) var(--nds-ease);
}
html body .nc-desc-body a:not(.nc-btn):hover,
html body .nc-desc-wrap a:not(.nc-btn):hover,
html body .nc-comment-body a:not(.nc-btn):hover,
html body .comment-content a:not(.nc-btn):hover{ text-decoration-color:var(--nds-steel); }

/* — skeleton shimmer utility (opt-in: only affects elements given .nc-skeleton) — */
@keyframes nc-shimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }
html body .nc-skeleton{
  background:linear-gradient(100deg, var(--nds-panel) 30%, var(--nds-panel-2) 50%, var(--nds-panel) 70%);
  background-size:200% 100%; animation:nc-shimmer 1.4s ease-in-out infinite;
  border-radius:var(--nds-r); color:transparent !important;
}

/* ============================================================================
   v0.4.0 — end premium micro-interactions
   ============================================================================ */

/* ============================================================================
   v0.5.0 — CONTENT-PAGE COHESION  (video / music / game / front)
   Brings the single-content pages fully onto the header's charcoal / silver /
   chrome scheme: kills the last cool/blue casts (skeleton shimmer, poster
   fallback), tokenizes the "more from creator" sidebar so related cards match
   the header, and frames the media player as a clean dark card. Token-based and
   additive — nothing here restyles the action buttons (they're the reference).
   ============================================================================ */

/* — related-content sidebar (video/music/game): match the card system, not a blue drift — */
html body .sidebar,
html body .sidebar-more-games,
html body .sidebar-random-content{
  background:var(--nds-panel) !important;
  border:1px solid var(--nds-line) !important;
  border-radius:var(--nds-r-lg) !important;
}
html body .sidebar-game-item{
  background:var(--nds-panel-2) !important;
  border:1px solid var(--nds-line) !important;
  border-radius:var(--nds-r) !important;
}
html body .sidebar-game-item:hover{
  background:var(--nds-panel-3) !important;
  border-color:var(--nds-line-2) !important;
  transform:translateY(-1px);
}
html body .sidebar-game-info,
html body .sidebar h2, html body .sidebar h3,
html body aside.sidebar h2, html body aside.sidebar h3{ color:var(--nds-soft) !important; }

/* — frame the media player as a clean dark card so bright video/ads read as intentional — */
html body #main-media-container{
  border-radius:var(--nds-r-lg) !important;
  box-shadow:var(--nds-shadow) !important;
}

/* — loading skeleton: pure charcoal shimmer, no cool/blue tint — */
html body #nc-video-skeleton{
  background:
    radial-gradient(circle at top, rgba(255,255,255,.05), transparent 55%),
    var(--nds-bg) !important;
}
html body .nc-skel-block{
  background:linear-gradient(110deg,
    var(--nds-panel) 20%, var(--nds-panel-2) 30%, var(--nds-panel) 40%) !important;
}

/* — safety net: any missing-cover / poster placeholder stays neutral graphite (never purple/blue).
     The theme also sets this at source; this keeps it correct even on pages the theme edit misses. — */
html body .nc-poster-missing,
html body [class*="poster-missing"]{
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(160deg, var(--nds-panel-2) 0%, var(--nds-bg-1) 100%) !important;
}

/* — content-page body/description text on the silver-soft token (matches header ink) — */
html body #nc-video-page .nc-desc-body,
html body #nc-video-page .nc-meta,
html body .single-nc_video .entry-content,
html body .single-music .entry-content,
html body .single-nc_game .entry-content{ color:var(--nds-soft) !important; }

/* ============================================================================
   v0.5.0 — end content-page cohesion
   ============================================================================ */