artifacts/app/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-card-border: hsl(var(--card-border));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-popover-border: hsl(var(--popover-border));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-primary-border: var(--primary-border);

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-secondary-border: var(--secondary-border);

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-muted-border: var(--muted-border);

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-accent-border: var(--accent-border);

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-destructive-border: var(--destructive-border);

  --font-sans: var(--app-font-sans);
  --font-serif: var(--app-font-serif);
  --font-mono: var(--app-font-mono);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --button-outline: rgba(255,255,255, .10);
  --badge-outline: rgba(255,255,255, .05);
  --opaque-button-border-intensity: 9;
  --elevate-1: rgba(255,255,255, .04);
  --elevate-2: rgba(255,255,255, .09);

  --background: 0 0% 5%;
  --foreground: 0 0% 92%;
  --border: 0 0% 14%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 90%;
  --card-border: 0 0% 14%;
  --sidebar: 0 0% 6%;
  --sidebar-foreground: 0 0% 88%;
  --sidebar-border: 0 0% 13%;
  --sidebar-primary: 0 0% 90%;
  --sidebar-primary-foreground: 0 0% 5%;
  --sidebar-accent: 0 0% 12%;
  --sidebar-accent-foreground: 0 0% 88%;
  --sidebar-ring: 0 0% 40%;
  --popover: 0 0% 8%;
  --popover-foreground: 0 0% 90%;
  --popover-border: 0 0% 14%;
  --primary: 0 0% 90%;
  --primary-foreground: 0 0% 5%;
  --secondary: 0 0% 12%;
  --secondary-foreground: 0 0% 88%;
  --muted: 0 0% 11%;
  --muted-foreground: 0 0% 52%;
  --accent: 0 0% 14%;
  --accent-foreground: 0 0% 88%;
  --destructive: 0 62% 45%;
  --destructive-foreground: 0 0% 95%;
  --input: 0 0% 18%;
  --ring: 0 0% 40%;

  --app-font-sans: 'Space Grotesk', sans-serif;
  --app-font-serif: Georgia, serif;
  --app-font-mono: 'Space Mono', monospace;
  --radius: 0.25rem;

  --primary-border: hsl(var(--primary));
  --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --secondary-border: hsl(var(--secondary));
  --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --muted-border: hsl(var(--muted));
  --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --accent-border: hsl(var(--accent));
  --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --destructive-border: hsl(var(--destructive));
  --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

/* ─── Unstable motion layers (toggled via html.unstable-anim-*) ─────────────── */

@keyframes unstable-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-12px) scale(1.02);
    opacity: 0.55;
  }
}

@keyframes unstable-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes unstable-glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.04);
  }
  50% {
    box-shadow: 0 0 28px 2px rgba(255, 255, 255, 0.07);
  }
}

@keyframes unstable-border-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes unstable-tab-glow {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.06);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.14);
  }
}

@keyframes unstable-drift {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(2%, -1%);
  }
  66% {
    transform: translate(-1%, 1.5%);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes unstable-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes unstable-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes unstable-slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes unstable-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes unstable-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes unstable-opacity-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

@keyframes unstable-soft-blink {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.85;
  }
}

@keyframes unstable-rotate-glow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes unstable-iframe-ring {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      0 0 0 0 rgba(120, 160, 255, 0);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.09),
      0 0 24px -6px rgba(140, 180, 255, 0.12);
  }
}

@keyframes unstable-link-glow {
  0%,
  100% {
    text-shadow: 0 0 0 transparent;
  }
  50% {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.12);
  }
}

@keyframes unstable-tab-inactive-pulse {
  0%,
  100% {
    opacity: 0.38;
  }
  50% {
    opacity: 0.55;
  }
}

@keyframes unstable-reload-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes unstable-games-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes unstable-games-skeleton-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.95;
  }
}

html.unstable-anim-full .unstable-ambient-blobs,
html.unstable-anim-subtle .unstable-ambient-blobs {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 38% at 22% 28%, rgba(120, 140, 255, 0.09), transparent 55%),
    radial-gradient(ellipse 50% 40% at 78% 72%, rgba(255, 120, 180, 0.06), transparent 50%),
    radial-gradient(ellipse 35% 30% at 55% 18%, rgba(80, 220, 200, 0.05), transparent 45%);
  animation: unstable-drift 22s ease-in-out infinite;
  z-index: 0;
}

html.unstable-anim-subtle .unstable-ambient-blobs {
  animation-duration: 48s;
  opacity: 0.65;
}

html.unstable-anim-full .unstable-ambient-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, black 10%, transparent 72%);
  pointer-events: none;
  animation: unstable-drift 38s ease-in-out infinite reverse;
  z-index: 0;
}

html.unstable-anim-subtle .unstable-ambient-grid {
  opacity: 0.55;
  animation-duration: 55s;
}

html.unstable-chrome-fx .unstable-url-bar-wrap {
  position: relative;
  border-radius: 12px;
  background: linear-gradient(90deg, #141414, #1a1a1a, #141414);
  background-size: 200% 100%;
  animation: unstable-border-flow 10s linear infinite;
  padding: 1px;
}

html.unstable-chrome-fx .unstable-url-bar-wrap > form {
  border-radius: 11px;
  overflow: hidden;
}

html.unstable-chrome-fx .unstable-toolbar-row {
  animation: unstable-glow-pulse 5s ease-in-out infinite;
}

html.unstable-anim-full .unstable-tab-active {
  animation: unstable-tab-glow 4s ease-in-out infinite;
}

html.unstable-anim-full .unstable-shortcut-btn {
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease;
}

html.unstable-anim-full .unstable-shortcut-btn:hover {
  transform: translateY(-3px) scale(1.03);
}

html.unstable-anim-subtle .unstable-shortcut-btn {
  transition: background 0.2s ease;
}

html.unstable-anim-full .unstable-settings-section {
  animation: unstable-fade-up 0.55s ease both;
}

html.unstable-anim-full .unstable-settings-section:nth-child(1) {
  animation-delay: 0.05s;
}
html.unstable-anim-full .unstable-settings-section:nth-child(2) {
  animation-delay: 0.1s;
}
html.unstable-anim-full .unstable-settings-section:nth-child(3) {
  animation-delay: 0.15s;
}
html.unstable-anim-full .unstable-settings-section:nth-child(4) {
  animation-delay: 0.2s;
}
html.unstable-anim-full .unstable-settings-section:nth-child(5) {
  animation-delay: 0.25s;
}
html.unstable-anim-full .unstable-settings-section:nth-child(6) {
  animation-delay: 0.3s;
}
html.unstable-anim-full .unstable-settings-section:nth-child(7) {
  animation-delay: 0.35s;
}
html.unstable-anim-full .unstable-settings-section:nth-child(8) {
  animation-delay: 0.4s;
}

html.unstable-anim-full .unstable-game-card {
  animation: unstable-scale-in 0.45s ease both;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

html.unstable-anim-full .unstable-game-card:hover {
  transform: translateY(-4px);
}

html.unstable-anim-subtle .unstable-game-card {
  transition: border-color 0.2s ease;
}

html.unstable-anim-minimal .unstable-ambient-blobs,
html.unstable-anim-minimal .unstable-ambient-grid {
  display: none;
}

html.unstable-anim-minimal .unstable-shortcut-btn:hover {
  transform: none;
}

html.unstable-anim-minimal .unstable-game-card:hover {
  transform: none;
}

html.unstable-anim-full .unstable-login-badge {
  animation: unstable-float 5s ease-in-out infinite;
}

/* Login stack */
html.unstable-anim-full .unstable-login-page .unstable-login-card {
  animation: unstable-scale-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.unstable-anim-full .unstable-login-form > * {
  animation: unstable-fade-up 0.5s ease both;
}
html.unstable-anim-full .unstable-login-form > *:nth-child(1) {
  animation-delay: 0.08s;
}
html.unstable-anim-full .unstable-login-form > *:nth-child(2) {
  animation-delay: 0.16s;
}
html.unstable-anim-full .unstable-login-form > *:nth-child(3) {
  animation-delay: 0.24s;
}
html.unstable-anim-full .unstable-login-submit:not(:disabled) {
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.15s ease,
    box-shadow 0.3s ease;
}
html.unstable-anim-full .unstable-login-submit:not(:disabled):hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

html.unstable-anim-subtle .unstable-login-page .unstable-login-card {
  animation: unstable-fade-in 0.45s ease both;
}

/* Tab strip */
html.unstable-anim-full .unstable-tab-strip {
  animation: unstable-slide-down 0.45s ease both;
}
html.unstable-anim-full .unstable-tab-scroll > .unstable-tab-pill {
  animation: unstable-fade-up 0.35s ease both;
}
html.unstable-anim-full .unstable-tab-scroll > .unstable-tab-pill:nth-child(1) {
  animation-delay: 0.02s;
}
html.unstable-anim-full .unstable-tab-scroll > .unstable-tab-pill:nth-child(2) {
  animation-delay: 0.05s;
}
html.unstable-anim-full .unstable-tab-scroll > .unstable-tab-pill:nth-child(3) {
  animation-delay: 0.08s;
}
html.unstable-anim-full .unstable-tab-scroll > .unstable-tab-pill:nth-child(4) {
  animation-delay: 0.11s;
}
html.unstable-anim-full .unstable-tab-scroll > .unstable-tab-pill:nth-child(5) {
  animation-delay: 0.14s;
}
html.unstable-anim-full .unstable-tab-scroll > .unstable-tab-pill:nth-child(6) {
  animation-delay: 0.17s;
}
html.unstable-anim-full .unstable-tab-scroll > .unstable-tab-scroll-btn {
  animation: unstable-fade-in 0.4s ease 0.12s both;
}

html.unstable-anim-full .unstable-tab-pill:not(.unstable-tab-active) .unstable-tab-label {
  animation: unstable-tab-inactive-pulse 5s ease-in-out infinite;
}

/* Toolbar icon buttons */
html.unstable-anim-full .unstable-toolbar-row > button:not(:disabled) {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.unstable-anim-full .unstable-toolbar-row > button:not(:disabled):active {
  transform: scale(0.92);
}
html.unstable-anim-full .unstable-toolbar-row > button:not(:disabled):hover {
  transform: scale(1.12);
}

/* Reload: spin glyph while hovered (inner span avoids fighting button scale) */
.unstable-toolbar-reload-icon {
  display: inline-block;
  line-height: 1;
  transform-origin: 50% 55%;
}

html:not(.unstable-anim-minimal) .unstable-toolbar-reload:hover:not(:disabled) .unstable-toolbar-reload-icon {
  animation: unstable-reload-spin 0.72s linear infinite;
}

html.unstable-anim-minimal .unstable-toolbar-reload:hover:not(:disabled) .unstable-toolbar-reload-icon {
  animation: unstable-reload-spin 1.1s linear infinite;
}

/* New tab */
html.unstable-anim-full .unstable-newtab-badge {
  animation: unstable-fade-up 0.55s ease both;
}
html.unstable-anim-full .unstable-newtab-search {
  animation: unstable-fade-up 0.55s ease 0.08s both;
}
html.unstable-anim-full .unstable-newtab-go {
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.2s ease;
}
html.unstable-anim-full .unstable-newtab-go:hover {
  transform: scale(1.04);
  filter: brightness(1.05);
}
html.unstable-anim-full .unstable-shortcut-row {
  animation: unstable-fade-up 0.55s ease 0.14s both;
}
html.unstable-anim-full .unstable-shortcut-row .sc-wrap {
  animation: unstable-scale-in 0.4s ease both;
}
html.unstable-anim-full .unstable-shortcut-row .sc-wrap:nth-child(1) {
  animation-delay: 0.18s;
}
html.unstable-anim-full .unstable-shortcut-row .sc-wrap:nth-child(2) {
  animation-delay: 0.2s;
}
html.unstable-anim-full .unstable-shortcut-row .sc-wrap:nth-child(3) {
  animation-delay: 0.22s;
}
html.unstable-anim-full .unstable-shortcut-row .sc-wrap:nth-child(4) {
  animation-delay: 0.24s;
}
html.unstable-anim-full .unstable-shortcut-row .sc-wrap:nth-child(5) {
  animation-delay: 0.26s;
}
html.unstable-anim-full .unstable-shortcut-row .sc-wrap:nth-child(6) {
  animation-delay: 0.28s;
}
html.unstable-anim-full .unstable-shortcut-row .sc-wrap:nth-child(7) {
  animation-delay: 0.3s;
}
html.unstable-anim-full .unstable-shortcut-row .sc-wrap:nth-child(8) {
  animation-delay: 0.32s;
}
html.unstable-anim-full .unstable-shortcut-row .sc-wrap:nth-child(9) {
  animation-delay: 0.34s;
}
html.unstable-anim-full .unstable-shortcut-row .sc-wrap:nth-child(10) {
  animation-delay: 0.36s;
}
html.unstable-anim-full .unstable-newtab-footer {
  animation: unstable-fade-up 0.55s ease 0.22s both;
}
html.unstable-anim-full .unstable-footer-link {
  transition:
    color 0.15s ease,
    transform 0.2s ease;
}
html.unstable-anim-full .unstable-footer-link:hover {
  transform: translateY(-2px);
  animation: unstable-link-glow 2.2s ease-in-out infinite;
}

html.unstable-anim-subtle .unstable-newtab-badge,
html.unstable-anim-subtle .unstable-newtab-search,
html.unstable-anim-subtle .unstable-shortcut-row,
html.unstable-anim-subtle .unstable-newtab-footer {
  animation: unstable-fade-in 0.5s ease both;
}

/* Credits / legal */
html.unstable-anim-full .unstable-credits-page > p:first-child {
  animation: unstable-fade-up 0.5s ease both;
}
html.unstable-anim-full .unstable-credit-row {
  animation: unstable-fade-up 0.45s ease both;
}
html.unstable-anim-full .unstable-credit-row:nth-child(1) {
  animation-delay: 0.06s;
}
html.unstable-anim-full .unstable-credit-row:nth-child(2) {
  animation-delay: 0.1s;
}
html.unstable-anim-full .unstable-credit-row:nth-child(3) {
  animation-delay: 0.14s;
}
html.unstable-anim-full .unstable-credit-row:nth-child(4) {
  animation-delay: 0.18s;
}
html.unstable-anim-full .unstable-credit-row:nth-child(5) {
  animation-delay: 0.22s;
}
html.unstable-anim-full .unstable-credit-row:nth-child(6) {
  animation-delay: 0.26s;
}
html.unstable-anim-full .unstable-credit-row:nth-child(7) {
  animation-delay: 0.3s;
}
html.unstable-anim-full .unstable-credit-row:nth-child(8) {
  animation-delay: 0.34s;
}
html.unstable-anim-full .unstable-credit-row:nth-child(9) {
  animation-delay: 0.38s;
}
html.unstable-anim-full .unstable-credit-row:nth-child(10) {
  animation-delay: 0.42s;
}
html.unstable-anim-full .unstable-credit-row:nth-child(11) {
  animation-delay: 0.46s;
}
html.unstable-anim-full .unstable-credit-row:nth-child(12) {
  animation-delay: 0.5s;
}

html.unstable-anim-full .unstable-legal-page > p:first-child {
  animation: unstable-slide-down 0.5s ease both;
}
html.unstable-anim-full .unstable-legal-block {
  animation: unstable-fade-up 0.48s ease both;
}
html.unstable-anim-full .unstable-legal-block:nth-of-type(1) {
  animation-delay: 0.05s;
}
html.unstable-anim-full .unstable-legal-block:nth-of-type(2) {
  animation-delay: 0.1s;
}
html.unstable-anim-full .unstable-legal-block:nth-of-type(3) {
  animation-delay: 0.15s;
}
html.unstable-anim-full .unstable-legal-block:nth-of-type(4) {
  animation-delay: 0.2s;
}
html.unstable-anim-full .unstable-legal-block:nth-of-type(5) {
  animation-delay: 0.25s;
}
html.unstable-anim-full .unstable-legal-block:nth-of-type(6) {
  animation-delay: 0.3s;
}
html.unstable-anim-full .unstable-legal-block:nth-of-type(7) {
  animation-delay: 0.35s;
}

/* Games */
html.unstable-anim-full .unstable-games-header {
  animation: unstable-slide-down 0.45s ease both;
}
html.unstable-anim-full .unstable-games-search {
  animation: unstable-fade-up 0.45s ease 0.06s both;
}
html.unstable-anim-full .unstable-games-grid .unstable-game-card:nth-child(1) {
  animation-delay: 0.04s;
}
html.unstable-anim-full .unstable-games-grid .unstable-game-card:nth-child(2) {
  animation-delay: 0.07s;
}
html.unstable-anim-full .unstable-games-grid .unstable-game-card:nth-child(3) {
  animation-delay: 0.1s;
}
html.unstable-anim-full .unstable-games-grid .unstable-game-card:nth-child(4) {
  animation-delay: 0.13s;
}
html.unstable-anim-full .unstable-games-grid .unstable-game-card:nth-child(5) {
  animation-delay: 0.16s;
}
html.unstable-anim-full .unstable-games-grid .unstable-game-card:nth-child(6) {
  animation-delay: 0.19s;
}
html.unstable-anim-full .unstable-games-grid .unstable-game-card:nth-child(7) {
  animation-delay: 0.22s;
}
html.unstable-anim-full .unstable-games-grid .unstable-game-card:nth-child(8) {
  animation-delay: 0.25s;
}
html.unstable-anim-full .unstable-games-grid .unstable-game-card:nth-child(9) {
  animation-delay: 0.28s;
}
html.unstable-anim-full .unstable-games-grid .unstable-game-card:nth-child(10) {
  animation-delay: 0.31s;
}
html.unstable-anim-full .unstable-games-grid .unstable-game-card:nth-child(11) {
  animation-delay: 0.34s;
}
html.unstable-anim-full .unstable-games-grid .unstable-game-card:nth-child(12) {
  animation-delay: 0.37s;
}

/* Games list loading skeleton */
.unstable-games-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem;
}

.unstable-games-skeleton-card {
  background: #111;
  border: 1px solid #1c1c1c;
  border-radius: 8px;
  padding: 0.55rem;
  animation: unstable-games-skeleton-pulse 1.35s ease-in-out infinite;
}

.unstable-games-skeleton-card:nth-child(odd) {
  animation-delay: 0.12s;
}

.unstable-games-skeleton-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  margin-bottom: 0.55rem;
  background: linear-gradient(
    105deg,
    #141414 0%,
    #1e1e1e 22%,
    #2a2a2a 40%,
    #1e1e1e 58%,
    #141414 100%
  );
  background-size: 220% 100%;
  animation: unstable-games-skeleton-shimmer 1.4s ease-in-out infinite;
}

.unstable-games-skeleton-line {
  height: 0.55rem;
  border-radius: 4px;
  background: linear-gradient(
    105deg,
    #161616 0%,
    #222 35%,
    #2c2c2c 50%,
    #222 65%,
    #161616 100%
  );
  background-size: 220% 100%;
  animation: unstable-games-skeleton-shimmer 1.4s ease-in-out infinite;
}

.unstable-games-skeleton-line--title {
  width: 88%;
  margin-bottom: 0.35rem;
}

.unstable-games-skeleton-line--meta {
  width: 52%;
  animation-delay: 0.15s;
}

html.unstable-anim-subtle .unstable-games-skeleton-card {
  animation-duration: 1.8s;
}

html.unstable-anim-subtle .unstable-games-skeleton-cover,
html.unstable-anim-subtle .unstable-games-skeleton-line {
  animation-duration: 1.9s;
}

html.unstable-anim-minimal .unstable-games-skeleton-card {
  animation: none;
  opacity: 0.75;
}

html.unstable-anim-minimal .unstable-games-skeleton-cover,
html.unstable-anim-minimal .unstable-games-skeleton-line {
  animation: none;
  background: #181818;
}

/* Settings page chrome */
html.unstable-anim-full .unstable-settings-page > p:first-child {
  animation: unstable-slide-down 0.5s ease both;
}

/* Proxy iframe shell while loading */
html.unstable-anim-full .unstable-iframe-shell.unstable-iframe-loading {
  animation: unstable-iframe-ring 1.8s ease-in-out infinite;
}
html.unstable-anim-full .unstable-iframe-shell.unstable-iframe-loading::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 2px;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255, 255, 255, 0.06) 40%, transparent 65%);
  animation: unstable-rotate-glow 4s linear infinite;
  pointer-events: none;
  z-index: 2;
  opacity: 0.5;
}
html.unstable-anim-subtle .unstable-iframe-shell.unstable-iframe-loading {
  animation: unstable-iframe-ring 2.8s ease-in-out infinite;
}

/* Status bar */
html.unstable-anim-full .unstable-status-bar {
  animation: unstable-slide-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.unstable-anim-full .unstable-status-label {
  animation: unstable-opacity-breathe 3.5s ease-in-out infinite;
}
html.unstable-anim-full .unstable-status-bar button {
  transition: transform 0.18s ease;
}
html.unstable-anim-full .unstable-status-bar button:hover {
  transform: scale(1.15);
}

/* Fullscreen exit */
html.unstable-anim-full .unstable-fs-exit {
  animation: unstable-fade-in 0.4s ease 0.15s both;
  transition:
    transform 0.2s ease,
    box-shadow 0.25s ease,
    border-color 0.2s ease;
}
html.unstable-anim-full .unstable-fs-exit:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
}

/* Tab loading dot */
html:not(.unstable-anim-minimal) .unstable-tab-loading-dot {
  animation: unstable-soft-blink 1.05s ease-in-out infinite;
}
html.unstable-anim-minimal .unstable-tab-loading-dot {
  animation: unstable-soft-blink 1.35s ease-in-out infinite;
}

/* Cloak / search preset buttons in settings — micro lift */
html.unstable-anim-full .unstable-settings-section button {
  transition:
    transform 0.18s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
html.unstable-anim-full .unstable-settings-section button:hover {
  transform: translateY(-1px);
}

html.unstable-anim-minimal .unstable-toolbar-row > button:not(:disabled):hover,
html.unstable-anim-minimal .unstable-login-submit:not(:disabled):hover,
html.unstable-anim-minimal .unstable-footer-link:hover,
html.unstable-anim-minimal .unstable-status-bar button:hover,
html.unstable-anim-minimal .unstable-fs-exit:hover {
  transform: none;
}

html.unstable-anim-minimal .unstable-tab-strip,
html.unstable-anim-minimal .unstable-tab-scroll > .unstable-tab-pill,
html.unstable-anim-minimal .unstable-tab-scroll > .unstable-tab-scroll-btn,
html.unstable-anim-minimal .unstable-tab-pill:not(.unstable-tab-active) .unstable-tab-label,
html.unstable-anim-minimal .unstable-newtab-badge,
html.unstable-anim-minimal .unstable-newtab-search,
html.unstable-anim-minimal .unstable-shortcut-row,
html.unstable-anim-minimal .unstable-shortcut-row .sc-wrap,
html.unstable-anim-minimal .unstable-newtab-footer,
html.unstable-anim-minimal .unstable-login-page .unstable-login-card,
html.unstable-anim-minimal .unstable-login-form > *,
html.unstable-anim-minimal .unstable-credit-row,
html.unstable-anim-minimal .unstable-legal-block,
html.unstable-anim-minimal .unstable-games-header,
html.unstable-anim-minimal .unstable-games-search,
html.unstable-anim-minimal .unstable-settings-page > p:first-child,
html.unstable-anim-minimal .unstable-iframe-shell.unstable-iframe-loading,
html.unstable-anim-minimal .unstable-iframe-shell.unstable-iframe-loading::after,
html.unstable-anim-minimal .unstable-status-bar,
html.unstable-anim-minimal .unstable-status-label {
  animation: none !important;
}

html.unstable-anim-minimal .unstable-footer-link:hover {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.unstable-anim-full .unstable-ambient-blobs,
  html.unstable-anim-full .unstable-ambient-grid,
  html.unstable-anim-subtle .unstable-ambient-blobs,
  html.unstable-anim-subtle .unstable-ambient-grid,
  html.unstable-chrome-fx .unstable-url-bar-wrap,
  html.unstable-chrome-fx .unstable-toolbar-row,
  html.unstable-anim-full .unstable-tab-active,
  html.unstable-anim-full .unstable-login-badge,
  html.unstable-anim-full .unstable-settings-section,
  html.unstable-anim-full .unstable-game-card,
  html.unstable-anim-full .unstable-login-page .unstable-login-card,
  html.unstable-anim-full .unstable-login-form > *,
  html.unstable-anim-full .unstable-tab-strip,
  html.unstable-anim-full .unstable-tab-scroll > .unstable-tab-pill,
  html.unstable-anim-full .unstable-tab-scroll > .unstable-tab-scroll-btn,
  html.unstable-anim-full .unstable-tab-pill:not(.unstable-tab-active) .unstable-tab-label,
  html.unstable-anim-full .unstable-newtab-badge,
  html.unstable-anim-full .unstable-newtab-search,
  html.unstable-anim-full .unstable-shortcut-row,
  html.unstable-anim-full .unstable-shortcut-row .sc-wrap,
  html.unstable-anim-full .unstable-newtab-footer,
  html.unstable-anim-full .unstable-footer-link,
  html.unstable-anim-full .unstable-credits-page > p:first-child,
  html.unstable-anim-full .unstable-credit-row,
  html.unstable-anim-full .unstable-legal-page > p:first-child,
  html.unstable-anim-full .unstable-legal-block,
  html.unstable-anim-full .unstable-games-header,
  html.unstable-anim-full .unstable-games-search,
  html.unstable-anim-full .unstable-settings-page > p:first-child,
  html.unstable-anim-full .unstable-iframe-shell.unstable-iframe-loading,
  html.unstable-anim-full .unstable-iframe-shell.unstable-iframe-loading::after,
  html.unstable-anim-full .unstable-status-bar,
  html.unstable-anim-full .unstable-status-label,
  html.unstable-anim-full .unstable-fs-exit,
  html.unstable-anim-full .unstable-tab-loading-dot,
  html:not(.unstable-anim-minimal) .unstable-toolbar-reload:hover:not(:disabled) .unstable-toolbar-reload-icon,
  html.unstable-anim-minimal .unstable-toolbar-reload:hover:not(:disabled) .unstable-toolbar-reload-icon,
  .unstable-games-skeleton-card,
  .unstable-games-skeleton-cover,
  .unstable-games-skeleton-line,
  html.unstable-anim-subtle .unstable-tab-loading-dot,
  html.unstable-anim-minimal .unstable-tab-loading-dot,
  html.unstable-anim-subtle .unstable-newtab-badge,
  html.unstable-anim-subtle .unstable-newtab-search,
  html.unstable-anim-subtle .unstable-shortcut-row,
  html.unstable-anim-subtle .unstable-newtab-footer {
    animation: none !important;
  }

  html.unstable-anim-full .unstable-shortcut-btn:hover,
  html.unstable-anim-full .unstable-game-card:hover,
  html.unstable-anim-full .unstable-footer-link:hover {
    transform: none !important;
  }
}