/* Theme skin: applies a theme's computed palette (see theme.js) to every page. Only active while a non-default theme is set. */
html[data-vg-skin] .legal-page {
  background: transparent !important;
}
html[data-vg-skin] body {
  background: var(--bg) !important; background-attachment: fixed !important; background-size: cover !important; background-repeat: no-repeat !important; animation: none !important; color: var(--sk-ink) !important;
}
html[data-vg-skin] .feature-card,
html[data-vg-skin] .recent-card,
html[data-vg-skin] .home-search,
html[data-vg-skin] .apps-search,
html[data-vg-skin] .app,
html[data-vg-skin] .sc-icon,
html[data-vg-skin] .gcard,
html[data-vg-skin] .games-stats span,
html[data-vg-skin] .extra-card,
html[data-vg-skin] .contact-card,
html[data-vg-skin] .box,
html[data-vg-skin] .update-card,
html[data-vg-skin] .legal-hero,
html[data-vg-skin] .credit-card,
html[data-vg-skin] .image-item,
html[data-vg-skin] .legal-card,
html[data-vg-skin] .auth-card,
html[data-vg-skin] .panel,
html[data-vg-skin] .hero,
html[data-vg-skin] .modal,
html[data-vg-skin] .sidebar,
html[data-vg-skin] .composer,
html[data-vg-skin] .msg-row:not(.me) .bubble,
html[data-vg-skin] .summary,
html[data-vg-skin] .privacy-note,
html[data-vg-skin] .error-card,
html[data-vg-skin] .cloud-panel,
html[data-vg-skin] .skeleton,
html[data-vg-skin] .side,
html[data-vg-skin] .stage-bar,
html[data-vg-skin] .loader-box {
  background: var(--sk-surface) !important; border-color: var(--sk-line) !important; color: var(--sk-ink) !important; box-shadow: var(--sk-shadow) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-vg-skin] .games-search #searchInput,
html[data-vg-skin] .games-sort,
html[data-vg-skin] #searchInput,
html[data-vg-skin] #sortSelect,
html[data-vg-skin] .home-search input,
html[data-vg-skin] .apps-search input,
html[data-vg-skin] select,
html[data-vg-skin] .setting-field input,
html[data-vg-skin] .setting-field select,
html[data-vg-skin] .cloud-form input,
html[data-vg-skin] .field input,
html[data-vg-skin] .composer input,
html[data-vg-skin] .modal input,
html[data-vg-skin] .search input,
html[data-vg-skin] .side-search input,
html[data-vg-skin] .omni,
html[data-vg-skin] .omni input {
  background: var(--sk-input) !important; border-color: var(--sk-line) !important; color: var(--sk-ink) !important;
}
html[data-vg-skin] input::placeholder,
html[data-vg-skin] textarea::placeholder {
  color: var(--sk-ink-dim) !important; opacity: 1;
}
html[data-vg-skin] select option {
  background: var(--sk-solid) !important; color: var(--sk-ink) !important;
}
html[data-vg-skin] .button,
html[data-vg-skin] .sb-icons button,
html[data-vg-skin] .sb-icons a,
html[data-vg-skin] .sb-foot button,
html[data-vg-skin] .back-btn,
html[data-vg-skin] .pill,
html[data-vg-skin] .pill-switch button,
html[data-vg-skin] .legal-links a,
html[data-vg-skin] .gchip,
html[data-vg-skin] .chip,
html[data-vg-skin] .letter-rail button,
html[data-vg-skin] .side-tabs button,
html[data-vg-skin] .tag,
html[data-vg-skin] .secondary-action,
html[data-vg-skin] .contact-actions a,
html[data-vg-skin] .contact-actions button,
html[data-vg-skin] button.sigma,
html[data-vg-skin] a.sigma,
html[data-vg-skin] .player-button,
html[data-vg-skin] .icon-btn {
  background: var(--sk-surface-2) !important; border-color: var(--sk-line) !important; color: var(--sk-ink) !important;
}
html[data-vg-skin] .button:hover,
html[data-vg-skin] .sb-icons button:hover,
html[data-vg-skin] .sb-icons a:hover,
html[data-vg-skin] .sb-foot button:hover,
html[data-vg-skin] .back-btn:hover,
html[data-vg-skin] .pill:hover,
html[data-vg-skin] .pill-switch button:hover,
html[data-vg-skin] .legal-links a:hover,
html[data-vg-skin] .gchip:hover,
html[data-vg-skin] .chip:hover,
html[data-vg-skin] .letter-rail button:hover,
html[data-vg-skin] .side-tabs button:hover,
html[data-vg-skin] .tag:hover,
html[data-vg-skin] .secondary-action:hover,
html[data-vg-skin] .contact-actions a:hover,
html[data-vg-skin] .contact-actions button:hover,
html[data-vg-skin] button.sigma:hover,
html[data-vg-skin] a.sigma:hover,
html[data-vg-skin] .player-button:hover,
html[data-vg-skin] .icon-btn:hover {
  background: var(--sk-accent-soft) !important; border-color: var(--sk-accent) !important;
}
html[data-vg-skin] .games-head h1,
html[data-vg-skin] .extras-head h1,
html[data-vg-skin] .page-heading h1,
html[data-vg-skin] .page-heading,
html[data-vg-skin] .main-title,
html[data-vg-skin] .hero-section h1,
html[data-vg-skin] .update-card h2,
html[data-vg-skin] .contact-card h2,
html[data-vg-skin] .box h2,
html[data-vg-skin] .settings-intro,
html[data-vg-skin] h1,
html[data-vg-skin] .gcard .name,
html[data-vg-skin] .app-name,
html[data-vg-skin] .section-heading,
html[data-vg-skin] .group-heading,
html[data-vg-skin] .group-title,
html[data-vg-skin] .sc,
html[data-vg-skin] .recent-card,
html[data-vg-skin] .extra-card,
html[data-vg-skin] .feature-card h3,
html[data-vg-skin] .now-text strong,
html[data-vg-skin] .games-stats b,
html[data-vg-skin] .legal-page h1,
html[data-vg-skin] .legal-page h2,
html[data-vg-skin] .legal-page h3,
html[data-vg-skin] .legal-page strong,
html[data-vg-skin] .conv-item,
html[data-vg-skin] .conv-info strong,
html[data-vg-skin] .row span:first-child,
html[data-vg-skin] .action-text strong,
html[data-vg-skin] .stat span,
html[data-vg-skin] .thread-head,
html[data-vg-skin] .panel h2,
html[data-vg-skin] .hero-meta h1,
html[data-vg-skin] .sb-foot-id span,
html[data-vg-skin] .conv-empty strong,
html[data-vg-skin] .legal-page a,
html[data-vg-skin] .legal-page,
html[data-vg-skin] .updated,
html[data-vg-skin] .box label,
html[data-vg-skin] .box strong,
html[data-vg-skin] .box a,
html[data-vg-skin] .setting-field label,
html[data-vg-skin] .toggle-copy strong,
html[data-vg-skin] .update-card li,
html[data-vg-skin] .update-card strong,
html[data-vg-skin] label,
html[data-vg-skin] .newtab h1,
html[data-vg-skin] .tile,
html[data-vg-skin] .side-back,
html[data-vg-skin] .error-card h2,
html[data-vg-skin] .legal-hero h1,
html[data-vg-skin] .credit-card h2,
html[data-vg-skin] .cloud-head h2,
html[data-vg-skin] .side-item .name,
html[data-vg-skin] .now-text,
html[data-vg-skin] .tab,
html[data-vg-skin] .tb-btn,
html[data-vg-skin] .menu button,
html[data-vg-skin] .menu a {
  color: var(--sk-ink) !important;
}
html[data-vg-skin] .subtitle,
html[data-vg-skin] .games-head p,
html[data-vg-skin] .extras-intro,
html[data-vg-skin] .feature-card p,
html[data-vg-skin] .extra-card .desc,
html[data-vg-skin] .box-copy,
html[data-vg-skin] .update-intro,
html[data-vg-skin] .update-card p,
html[data-vg-skin] .update-card ul,
html[data-vg-skin] .settings-intro,
html[data-vg-skin] .legal-hero p,
html[data-vg-skin] .credit-card p,
html[data-vg-skin] .hero-kicker,
html[data-vg-skin] .home-search-note,
html[data-vg-skin] .apps-sub,
html[data-vg-skin] .apps-count,
html[data-vg-skin] .games-count,
html[data-vg-skin] #gameCount,
html[data-vg-skin] .catalog-status,
html[data-vg-skin] .games-empty,
html[data-vg-skin] .apps-empty,
html[data-vg-skin] .no-results,
html[data-vg-skin] .games-stats small,
html[data-vg-skin] .group-heading small,
html[data-vg-skin] .toggle-copy span,
html[data-vg-skin] .cloud-head p,
html[data-vg-skin] .cloud-note,
html[data-vg-skin] .side-empty,
html[data-vg-skin] .newtab p,
html[data-vg-skin] .now-text span,
html[data-vg-skin] .summary span,
html[data-vg-skin] .contact-card p,
html[data-vg-skin] .legal-page p,
html[data-vg-skin] .sub,
html[data-vg-skin] .panel .desc,
html[data-vg-skin] .row span,
html[data-vg-skin] .hero-desc,
html[data-vg-skin] .auth-footnote,
html[data-vg-skin] .conv-info span,
html[data-vg-skin] .main-empty p,
html[data-vg-skin] .modal p,
html[data-vg-skin] .action-text span,
html[data-vg-skin] .auth-brand .sub,
html[data-vg-skin] .legal-page li,
html[data-vg-skin] .summary p,
html[data-vg-skin] .privacy-note,
html[data-vg-skin] .legal-card p,
html[data-vg-skin] .legal-card li,
html[data-vg-skin] .chip small,
html[data-vg-skin] .gchip small,
html[data-vg-skin] .side-tabs button small,
html[data-vg-skin] .error-card p,
html[data-vg-skin] footer,
html[data-vg-skin] .footer,
html[data-vg-skin] .all-apps,
html[data-vg-skin] .page-heading p {
  color: var(--sk-ink-dim) !important;
}
html[data-vg-skin] .button.primary,
html[data-vg-skin] .pill-switch button.active,
html[data-vg-skin] .msg-row.me .bubble,
html[data-vg-skin] .composer button,
html[data-vg-skin] .submit,
html[data-vg-skin] .conv-item.active,
html[data-vg-skin] .primary-action,
html[data-vg-skin] .home-search button,
html[data-vg-skin] #saveButton,
html[data-vg-skin] .gchip[aria-pressed="true"],
html[data-vg-skin] .chip[aria-pressed="true"],
html[data-vg-skin] .contact-actions a.primary,
html[data-vg-skin] .release-label,
html[data-vg-skin] .player-button.primary,
html[data-vg-skin] .side-tabs button[aria-selected="true"] {
  background: var(--sk-accent) !important; border-color: var(--sk-accent) !important; color: var(--sk-accent-ink) !important;
}
html[data-vg-skin] .primary-action:hover,
html[data-vg-skin] .home-search button:hover,
html[data-vg-skin] #saveButton:hover {
  background: var(--sk-accent-2) !important;
}
html[data-vg-skin] .gcard:hover,
html[data-vg-skin] .app:hover,
html[data-vg-skin] .extra-card:hover,
html[data-vg-skin] .feature-card:hover,
html[data-vg-skin] .recent-card:hover,
html[data-vg-skin] .sc:hover,
html[data-vg-skin] .image-item:hover {
  border-color: var(--sk-accent) !important; box-shadow: 0 16px 34px rgba(0,0,0,.22), 0 0 0 1px var(--sk-accent) !important;
}
html[data-vg-skin] .home-search:focus-within,
html[data-vg-skin] .apps-search:focus-within,
html[data-vg-skin] .games-search #searchInput:focus-within {
  border-color: var(--sk-accent) !important; box-shadow: 0 0 0 4px var(--sk-accent-soft) !important;
}
html[data-vg-skin] .gcard .dl,
html[data-vg-skin] .gcard .label,
html[data-vg-skin] .image-item .label,
html[data-vg-skin] .app-name {
  color: #fff !important;
}
html[data-vg-skin] .feature-icon,
html[data-vg-skin] .extra-card .icon {
  background: var(--sk-accent-soft) !important; border-color: transparent !important; color: var(--sk-accent) !important;
}
html[data-vg-skin] .main-title .accent,
html[data-vg-skin] .all-apps,
html[data-vg-skin] .group-title,
html[data-vg-skin] .handle,
html[data-vg-skin] .eyebrow {
  color: var(--sk-ink) !important;
}
html[data-vg-skin] .group-heading::after,
html[data-vg-skin] .group-title::after,
html[data-vg-skin] .section-heading::after {
  background: var(--sk-line) !important;
}
html[data-vg-skin] .switch span {
  background: var(--sk-surface-2) !important;
}
html[data-vg-skin] .switch input:checked + span {
  background: var(--sk-accent) !important;
}
html[data-vg-skin] .update-card.latest {
  border-left-color: var(--sk-accent) !important;
}
html[data-vg-skin] .fav-star,
html[data-vg-skin] .gcard .gstar {
  background: rgba(0,0,0,.45) !important; color: #fff !important;
}
html[data-vg-skin] .fav-star.active,
html[data-vg-skin] .gcard .gstar.active {
  color: #ffd23f !important;
}
html[data-vg-skin] .tabbar,
html[data-vg-skin] .tabbar ~ .toolbar {
  background: var(--sk-bar) !important; border-color: var(--sk-bar-line) !important; color: var(--sk-bar-ink) !important;
}
html[data-vg-skin] .tab,
html[data-vg-skin] .new-tab-btn,
html[data-vg-skin] .tb-btn,
html[data-vg-skin] .tab-close,
html[data-vg-skin] .tab-icon {
  color: var(--sk-bar-ink) !important;
}
html[data-vg-skin] .tab:hover,
html[data-vg-skin] .new-tab-btn:hover,
html[data-vg-skin] .tb-btn:hover,
html[data-vg-skin] .tab-close:hover {
  background: var(--sk-bar-hover) !important;
}
html[data-vg-skin] .tab.active {
  background: var(--sk-bar-hover) !important; border-color: var(--sk-bar-line) !important; box-shadow: inset 0 -2px 0 var(--sk-accent);
}
html[data-vg-skin] .omni {
  background: var(--sk-bar-field) !important; border-color: var(--sk-bar-line) !important;
}
html[data-vg-skin] .omni:focus-within {
  border-color: var(--sk-accent) !important; box-shadow: 0 0 0 3px var(--sk-accent-soft) !important;
}
html[data-vg-skin] .omni i,
html[data-vg-skin] .omni input {
  color: var(--sk-bar-ink) !important;
}
html[data-vg-skin] .omni input::placeholder {
  color: var(--sk-bar-ink) !important; opacity: .65;
}
html[data-vg-skin] .viewport {
  background: transparent !important;
}
html[data-vg-skin] .menu,
html[data-vg-skin] .toast {
  background: var(--sk-solid) !important; border-color: var(--sk-line) !important; color: var(--sk-ink) !important;
}
html[data-vg-skin] .menu button:hover,
html[data-vg-skin] .menu a:hover {
  background: var(--sk-accent-soft) !important;
}
html[data-vg-skin] .menu i {
  color: var(--sk-ink-dim) !important;
}
html[data-vg-skin] .side-item:hover {
  background: var(--sk-surface-2) !important;
}
html[data-vg-skin] .side-item.active {
  background: var(--sk-accent-soft) !important; border-color: var(--sk-accent) !important; color: var(--sk-ink) !important;
}
html[data-vg-skin] #myIframe {
  border-color: var(--sk-line) !important; box-shadow: var(--sk-shadow) !important;
}
html[data-vg-skin] .side-search i,
html[data-vg-skin] .side-empty {
  color: var(--sk-ink-dim) !important;
}
html[data-vg-skin] .side-back {
  background: transparent !important;
}
html[data-vg-skin] .side-back:hover,
html[data-vg-skin] .icon-btn:hover,
html[data-vg-skin] .player-button:hover {
  background: var(--sk-accent-soft) !important; border-color: var(--sk-accent) !important;
}
html[data-vg-skin] .player-button.primary:hover {
  background: var(--sk-accent-2) !important; color: var(--sk-accent-ink) !important;
}
html[data-vg-skin] .toast button {
  background: var(--sk-accent) !important; color: var(--sk-accent-ink) !important;
}
html[data-vg-skin] .spinner {
  border-top-color: var(--sk-accent) !important;
}
html[data-vg-skin] .error-panel {
  background: rgba(0,0,0,.45) !important;
}
html[data-vg-skin] .gchip[aria-pressed="true"] small,
html[data-vg-skin] .chip[aria-pressed="true"] small {
  opacity: .95 !important; color: var(--sk-accent-ink) !important;
}
html[data-vg-skin] h1,
html[data-vg-skin] h2,
html[data-vg-skin] h3 {
  box-shadow: none !important; text-shadow: none !important;
}

/* Theme-aware page scrollbars and focus ring */
html[data-vg-skin] { color-scheme: var(--sk-mode, dark); --accent: var(--sk-accent); --muted: var(--sk-ink-dim); --line: var(--sk-line); --bar: var(--sk-bar); }
html[data-vg-skin] :focus-visible { outline-color: var(--sk-accent) !important; }
html[data-vg-skin] .vg-footer a, html[data-vg-skin] footer a { color: var(--sk-accent) !important; }

/* Glitch theme: green terminal look. Scanlines, a slow scan sweep, and an occasional RGB-split flicker on headings. Motion is off for reduced-motion users. */
html[data-vg-skin="glitch"]::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0, rgba(0,255,102,.07) 50%, transparent 100%) 0 -30% / 100% 28% no-repeat,
    repeating-linear-gradient(0deg, rgba(0,255,102,.05) 0, rgba(0,255,102,.05) 1px, transparent 1px, transparent 3px);
  animation: vg-sweep 7s linear infinite;
}
@keyframes vg-sweep { to { background-position: 0 130%, 0 0; } }
html[data-vg-skin="glitch"] h1,
html[data-vg-skin="glitch"] .logo,
html[data-vg-skin="glitch"] .brand {
  animation: vg-glitch 5s steps(1, end) infinite;
}
@keyframes vg-glitch {
  0%, 90%, 100% { transform: none; filter: none; }
  91% { transform: translate(-2px, 0); filter: drop-shadow(3px 0 #00ff66) drop-shadow(-3px 0 #00e5ff); }
  93% { transform: translate(3px, 1px) skewX(6deg); filter: drop-shadow(-3px 0 #00ff66) drop-shadow(3px 0 #ff2a55); }
  95% { transform: translate(0, -1px); filter: drop-shadow(2px 0 #00ff66) drop-shadow(-2px 0 #00e5ff); }
  97% { transform: translate(-1px, 0) skewX(-4deg); filter: drop-shadow(-2px 0 #00ff66); }
}
html[data-vg-skin="glitch"] a:hover,
html[data-vg-skin="glitch"] button:hover { text-shadow: 1px 0 #00ff66, -1px 0 #00e5ff; }
@media (prefers-reduced-motion: reduce) {
  html[data-vg-skin="glitch"]::after { animation: none; }
  html[data-vg-skin="glitch"] h1, html[data-vg-skin="glitch"] .logo, html[data-vg-skin="glitch"] .brand { animation: none; }
}

/* Readability pass (every theme except the pinks): the small counts on filter buttons were only 60% visible. */
html[data-vg-skin]:not([data-vg-skin$="pink"]) .gchip small,
html[data-vg-skin]:not([data-vg-skin$="pink"]) .chip small { opacity: .92; }

/* Theme animation: a slow drifting glow behind the page, tinted by the theme. The switch lives in Settings (data-vg-anim). */
html[data-vg-skin][data-vg-anim="on"] {
  background: var(--bg) !important; background-attachment: fixed !important; background-size: cover !important; background-repeat: no-repeat !important;
}
html[data-vg-skin][data-vg-anim="on"] body { background: transparent !important; }
html[data-vg-skin][data-vg-anim="on"]::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(38% 34% at 22% 28%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(38% 34% at 22% 28%, color-mix(in srgb, var(--sk-accent) 34%, transparent), transparent 70%),
    radial-gradient(34% 38% at 78% 72%, color-mix(in srgb, var(--sk-ink) 14%, transparent), transparent 70%),
    radial-gradient(30% 30% at 70% 22%, color-mix(in srgb, var(--sk-accent-2) 24%, transparent), transparent 70%);
  animation: vg-drift 26s ease-in-out infinite alternate;
}
@keyframes vg-drift {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1); }
  50%  { transform: translate3d(5%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 6%, 0) scale(1.02); }
}
/* Default theme: its own moving gradient follows the same switch. Glitch: its flicker and sweep follow it too. */
html[data-vg-anim="off"] body { animation: none !important; }
html[data-vg-skin="glitch"]:not([data-vg-anim="on"])::after,
html[data-vg-skin="glitch"]:not([data-vg-anim="on"]) h1,
html[data-vg-skin="glitch"]:not([data-vg-anim="on"]) .logo,
html[data-vg-skin="glitch"]:not([data-vg-anim="on"]) .brand { animation: none; }

/* Default theme glow: same drifting layer, in the default red-orange tones. */
html:not([data-vg-skin])[data-vg-anim="on"]::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(38% 34% at 22% 28%, rgba(228,87,46,.22), transparent 70%),
    radial-gradient(34% 38% at 78% 72%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(30% 30% at 70% 22%, rgba(150,30,30,.28), transparent 70%);
  animation: vg-drift 26s ease-in-out infinite alternate;
}