/* Motion layer: the stage, the entrances and the feedback. Loaded after the base styles. */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root {
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .55, 1);
  --ease-back: cubic-bezier(.2, 1.25, .35, 1);
  --enter-base: 0ms;
}
:root.vt-route { --enter-base: 140ms; }

/* ---------- Ambient stage ---------- */
.ambient-canvas, .aurora { position: fixed; inset: 0; pointer-events: none; }
.ambient-canvas { z-index: -1; width: 100vw; height: 100vh; }
.aurora { z-index: -2; overflow: hidden; }
.aurora i {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  opacity: .5;
  will-change: transform;
}
.aurora i:nth-child(1) { left: -18vmax; top: -24vmax; background: radial-gradient(circle, #7b3cf033, transparent 62%); animation: aurora-a 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { right: -22vmax; top: 18vh; background: radial-gradient(circle, #3e5cf02a, transparent 62%); animation: aurora-b 32s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { left: 28vw; bottom: -36vmax; background: radial-gradient(circle, #d24bd826, transparent 60%); animation: aurora-c 38s ease-in-out infinite alternate; }
:root[data-theme=light] .aurora i { opacity: .55; }
:root[data-theme=light] .aurora i:nth-child(1) { background: radial-gradient(circle, #b98cff3d, transparent 62%); }
:root[data-theme=light] .aurora i:nth-child(2) { background: radial-gradient(circle, #8fb2ff33, transparent 62%); }
:root[data-theme=light] .aurora i:nth-child(3) { background: radial-gradient(circle, #f0a8ef33, transparent 60%); }
@keyframes aurora-a { to { transform: translate(22vw, 16vh) scale(1.25); } }
@keyframes aurora-b { to { transform: translate(-26vw, 22vh) scale(.85); } }
@keyframes aurora-c { to { transform: translate(-18vw, -20vh) scale(1.2); } }

/* ---------- Intro ---------- */
.intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; cursor: pointer; }
.intro-panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: radial-gradient(ellipse 80% 120% at 50% 100%, #2a1557, #0c0916 70%);
  transition: transform 1.05s cubic-bezier(.76, 0, .24, 1);
}
.intro-panel.top { top: 0; }
.intro-panel.bottom { bottom: 0; background: radial-gradient(ellipse 80% 120% at 50% 0%, #2a1557, #0c0916 70%); }
:root[data-theme=light] .intro-panel.top { background: radial-gradient(ellipse 80% 120% at 50% 100%, #e7d8ff, #f6f4fc 70%); }
:root[data-theme=light] .intro-panel.bottom { background: radial-gradient(ellipse 80% 120% at 50% 0%, #e7d8ff, #f6f4fc 70%); }
.intro.leaving { pointer-events: none; }
.intro.leaving .intro-panel.top { transform: translateY(-101%); }
.intro.leaving .intro-panel.bottom { transform: translateY(101%); }
.intro-core {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  transition: transform .9s cubic-bezier(.7, 0, .3, 1), opacity .5s ease, filter .6s ease;
}
.intro.leaving .intro-core { transform: scale(1.35); opacity: 0; filter: blur(14px); }
.intro-rings { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.intro-rings i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  margin: -130px;
  border-radius: 50%;
  border: 1px solid #b07cff55;
  animation: intro-ring 2.2s var(--ease-out-expo) both;
}
.intro-rings i:nth-child(2) { animation-delay: .25s; border-color: #e09bff40; }
.intro-rings i:nth-child(3) { animation-delay: .5s; border-color: #6d8cff38; }
.intro-logo-wrap { position: relative; width: min(380px, 74vw); filter: drop-shadow(0 0 32px #9b5cff88); animation: intro-glow 2.2s ease-in-out both; }
.intro-logo { display: block; width: 100%; height: auto; clip-path: inset(0 100% 0 0); animation: intro-wipe 1s .2s var(--ease-out-expo) forwards; }
.intro-logo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, #ffffffe6 50%, transparent 62%) -150% 0 / 250% 100% no-repeat;
  mix-blend-mode: overlay;
  -webkit-mask: url('assets/gameplay-logo.png') center / 100% auto no-repeat;
  mask: url('assets/gameplay-logo.png') center / 100% auto no-repeat;
  animation: intro-sheen 1.1s 1.05s ease-in-out forwards;
}
.intro-tagline { margin: 0; display: flex; color: #d9c4ff; font: 500 15px/1.2 Outfit, sans-serif; letter-spacing: .5px; }
:root[data-theme=light] .intro-tagline { color: #5b3a9e; }
.intro-tagline span { display: inline-block; opacity: 0; transform: translateY(12px); filter: blur(6px); animation: intro-letter .6s calc(.75s + var(--i) * 22ms) var(--ease-out-expo) forwards; }
.intro-bar { width: 180px; height: 2px; border-radius: 2px; background: #ffffff14; overflow: hidden; }
.intro-bar span { display: block; height: 100%; background: linear-gradient(90deg, #6b5cff, #c07bff, #ff8fd8); box-shadow: 0 0 12px #b07cff; transform: scaleX(0); transform-origin: left; animation: intro-load 2s .1s cubic-bezier(.6, .1, .2, 1) forwards; }
@keyframes intro-ring { from { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@keyframes intro-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-sheen { to { background-position: 250% 0; } }
@keyframes intro-glow { 0% { filter: drop-shadow(0 0 0 #9b5cff00); } 60% { filter: drop-shadow(0 0 42px #9b5cffcc); } 100% { filter: drop-shadow(0 0 24px #9b5cff77); } }
@keyframes intro-letter { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes intro-load { to { transform: scaleX(1); } }

/* Chrome enters after the intro, and on every fresh session load. */
.booting .topbar { animation: chrome-drop .9s var(--ease-out-expo) backwards; }
.booting .sidebar .nav-label, .booting .sidebar .nav-link, .booting .sidebar .squad-card, .booting .sidebar .sidebar-footer {
  animation: chrome-slide .8s calc(.15s + var(--i, 0) * 55ms) var(--ease-out-expo) backwards;
}
.booting .sidebar .nav-glider { animation: chrome-slide .8s .2s var(--ease-out-expo) backwards; }
.booting .floating-chat { animation: fab-pop .9s .7s var(--ease-spring) backwards; }
.booting .header-right > * { animation: chrome-fade .7s calc(.25s + var(--i, 0) * 70ms) var(--ease-out-expo) backwards; }
.booting .global-search { animation: chrome-fade .8s .2s var(--ease-out-expo) backwards; }
@keyframes chrome-drop { from { transform: translateY(-100%); opacity: 0; } }
@keyframes chrome-slide { from { transform: translateX(-28px); opacity: 0; filter: blur(4px); } }
@keyframes chrome-fade { from { transform: translateY(-10px); opacity: 0; } }
@keyframes fab-pop { from { transform: scale(0) rotate(-40deg); opacity: 0; } }

/* ---------- Page and theme transitions ---------- */
/* Between app pages: chrome stays put, the page blurs away and the next one cascades in. */
.vt-route .topbar, .vt-auth-in .topbar, .vt-auth-out .topbar, .vt-auth-swap .topbar { view-transition-name: topbar; }
.vt-route .sidebar, .vt-auth-in .sidebar, .vt-auth-out .sidebar { view-transition-name: sidebar; }
.vt-route .workspace, .vt-auth-in .workspace, .vt-auth-out .workspace { view-transition-name: page; }
.vt-route .floating-chat, .vt-auth-in .floating-chat, .vt-auth-out .floating-chat { view-transition-name: fab; }
.vt-route .mobile-bottom, .vt-auth-in .mobile-bottom, .vt-auth-out .mobile-bottom { view-transition-name: dock; }
.vt-route::view-transition-old(topbar), .vt-route::view-transition-old(sidebar), .vt-route::view-transition-old(fab), .vt-route::view-transition-old(dock),
.vt-auth-swap::view-transition-old(topbar) { display: none; }
.vt-route::view-transition-new(topbar), .vt-route::view-transition-new(sidebar), .vt-route::view-transition-new(fab), .vt-route::view-transition-new(dock),
.vt-auth-swap::view-transition-new(topbar) { animation: none; }
::view-transition-group(sidebar), ::view-transition-group(fab), ::view-transition-group(dock), ::view-transition-group(page) { animation-duration: 0s; }
.vt-route::view-transition-group(topbar), .vt-auth-swap::view-transition-group(topbar) { animation-duration: 0s; }
.vt-route::view-transition-old(page) { animation: page-out .38s cubic-bezier(.5, 0, .75, 0) both; transform-origin: 50% 0; }
.vt-route::view-transition-new(page) { animation: page-in .5s .08s var(--ease-out-expo) both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-18px) scale(.975); filter: blur(10px); } }
@keyframes page-in { from { opacity: 0; } }

/* Into auth: the app recedes, the chrome slides away and the pressed control grows into the card. */
:root.vt-auth-in { --enter-base: 260ms; }
:root.vt-auth-out { --enter-base: 220ms; }
.vt-auth-in .auth-layout, .vt-auth-out .auth-layout { view-transition-name: auth-card; }
.vt-auth-in::view-transition-group(topbar), .vt-auth-out::view-transition-group(topbar) { animation-duration: .5s; }
.vt-auth-in::view-transition-old(page) { animation: page-recede .5s cubic-bezier(.3, 0, .2, 1) both; transform-origin: 50% 20%; }
.vt-auth-in::view-transition-old(sidebar) { animation: sidebar-out .45s cubic-bezier(.3, 0, .2, 1) both; }
.vt-auth-in::view-transition-old(fab), .vt-auth-in::view-transition-old(dock) { animation: chrome-out .3s ease-in both; }
::view-transition-group(auth-card) { animation-duration: .72s; animation-timing-function: cubic-bezier(.2, 0, 0, 1); overflow: clip; border-radius: 22px; }
::view-transition-old(auth-card), ::view-transition-new(auth-card) { height: 100%; }
/* The pressed control keeps its own size while it fades; the card is cropped to the growing shape. */
::view-transition-old(auth-card) { object-fit: none; object-position: 50% 50%; }
::view-transition-new(auth-card) { object-fit: cover; object-position: 50% 0; }
.vt-auth-in:not(.vt-card-pop)::view-transition-image-pair(auth-card) { animation: card-surface .7s cubic-bezier(.4, 0, .2, 1) both; }
.vt-auth-in::view-transition-old(auth-card) { animation: vt-fade-out .16s ease-out both; }
.vt-auth-in::view-transition-new(auth-card) { animation: vt-fade-in .5s .2s ease-out both; }
.vt-auth-in::view-transition-old(topbar), .vt-auth-out::view-transition-old(topbar) { animation: vt-fade-out .2s ease-out both; }
.vt-auth-in::view-transition-new(topbar), .vt-auth-out::view-transition-new(topbar) { animation: vt-fade-in .35s .18s ease-out both; }
.vt-card-pop::view-transition-new(auth-card) { animation: card-pop-in .9s .12s var(--ease-out-expo) both; }
/* Out of auth: the card sinks back and the app chrome returns. */
.vt-auth-out::view-transition-old(auth-card) { animation: card-sink .45s cubic-bezier(.5, 0, .75, 0) both; }
.vt-auth-out::view-transition-new(sidebar) { animation: sidebar-in .8s .18s var(--ease-out-expo) both; }
.vt-auth-out::view-transition-new(fab), .vt-auth-out::view-transition-new(dock) { animation: chrome-in .7s .45s var(--ease-back) both; }
.vt-auth-out::view-transition-new(page) { animation: page-in .5s .2s ease-out both; }
/* Between auth forms: artwork holds still, only the form swaps. */
.vt-auth-swap .auth-showcase { view-transition-name: auth-showcase; }
.vt-auth-swap .auth-form-inner { view-transition-name: auth-form; }
.vt-auth-swap::view-transition-old(auth-showcase) { display: none; }
.vt-auth-swap::view-transition-new(auth-showcase) { animation: none; }
::view-transition-group(auth-showcase) { animation-duration: 0s; }
::view-transition-group(auth-form) { animation-duration: .55s; animation-timing-function: var(--ease-out-expo); }
.vt-auth-swap::view-transition-old(auth-form) { animation: form-out .3s cubic-bezier(.5, 0, .75, 0) both; }
.vt-auth-swap::view-transition-new(auth-form) { animation: form-in .6s .14s var(--ease-out-expo) both; }
@keyframes page-recede { to { opacity: 0; transform: scale(.93); filter: blur(14px); } }
@keyframes sidebar-out { to { opacity: 0; transform: translateX(-100%); } }
@keyframes sidebar-in { from { opacity: 0; transform: translateX(-100%); } }
@keyframes chrome-out { to { opacity: 0; transform: scale(.6); } }
@keyframes chrome-in { from { opacity: 0; transform: scale(.6); } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes card-surface { 0%, 25% { background: linear-gradient(110deg, #7d4ef0, #9b5ff2); } 100% { background: var(--surface); } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes card-pop-in { from { opacity: 0; transform: translateY(36px) scale(.92); filter: blur(12px); } }
@keyframes card-sink { to { opacity: 0; transform: translateY(24px) scale(.94); filter: blur(12px); } }
@keyframes form-out { to { opacity: 0; transform: translateX(-36px); filter: blur(8px); } }
@keyframes form-in { from { opacity: 0; transform: translateX(36px); filter: blur(8px); } }
.vt-theme::view-transition-old(root), .vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.vt-theme::view-transition-old(root) { z-index: 1; }
.vt-theme::view-transition-new(root) { z-index: 2; }

/* ---------- Brand ---------- */
.topbar .logo { position: relative; }
.topbar .logo::after {
  content: '';
  position: absolute;
  inset: 0 3px;
  background: linear-gradient(105deg, transparent 38%, #ffffffd9 50%, transparent 62%) -150% 0 / 250% 100% no-repeat;
  mix-blend-mode: overlay;
  -webkit-mask: url('assets/gameplay-logo.png') center / 100% auto no-repeat;
  mask: url('assets/gameplay-logo.png') center / 100% auto no-repeat;
  animation: logo-sheen 7s 2.6s ease-in-out infinite;
  pointer-events: none;
}
.topbar .logo:hover .brand-logo { animation: logo-glitch .5s steps(1) both; }
@keyframes logo-sheen { 0%, 70% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@keyframes logo-glitch {
  0% { filter: drop-shadow(-3px 0 #ff2bd6) drop-shadow(3px 0 #2bf3ff); transform: translate(1px, -1px); clip-path: inset(10% 0 55% 0); }
  20% { filter: drop-shadow(3px 0 #ff2bd6) drop-shadow(-3px 0 #2bf3ff); transform: translate(-2px, 1px); clip-path: inset(60% 0 8% 0); }
  40% { filter: drop-shadow(-2px 0 #ff2bd6) drop-shadow(2px 0 #2bf3ff); transform: translate(2px, 0); clip-path: inset(30% 0 35% 0); }
  60% { filter: drop-shadow(1px 0 #ff2bd6) drop-shadow(-1px 0 #2bf3ff); transform: none; clip-path: none; }
  100% { filter: none; transform: none; clip-path: none; }
}

/* ---------- Sliding highlights ---------- */
.glider { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; will-change: transform, width, height; }
.has-glider > :not(.glider) { position: relative; z-index: 1; }
.nav-glider {
  border-radius: 12px;
  background: linear-gradient(110deg, #7040dc, #985aef 74%, #ac72f5);
  box-shadow: 0 7px 23px #7945e849, inset 0 1px #ffffff35;
}
.nav-glider::before {
  content: '';
  position: absolute;
  inset: 9px auto 9px 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #fff;
  box-shadow: 0 0 13px #fff;
}
.nav-glider::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, #ffffff33 50%, transparent 70%) -100% 0 / 220% 100% no-repeat;
  animation: glider-sheen 5s 1s ease-in-out infinite;
}
.sidebar.has-glider .nav-link.active { background: transparent; box-shadow: none; }
.sidebar.has-glider .nav-link.active::before { opacity: 0; }
.chip-glider, .tab-glider { border-radius: 11px; background: var(--accent-soft); border: 1px solid #8755f78c; box-shadow: 0 6px 18px #854de02e, inset 0 1px #ffffff1c; }
.tab-glider { border-radius: 9px; border-color: transparent; }
.categories.has-glider, .tabs.has-glider { position: relative; }
.categories.has-glider .category.active { background: transparent; border-color: transparent; box-shadow: none; }
.tabs.has-glider button.active { background: transparent; box-shadow: none; }
@keyframes glider-sheen { 0%, 65% { background-position: -100% 0; } 100% { background-position: 200% 0; } }

/* ---------- Page entrances ---------- */
.workspace.route-enter > :not(.site-footer):not(.dashboard-layout),
.workspace.route-enter .main-column > *,
.workspace.route-enter .right-rail > * {
  animation: rise-in .9s calc(var(--enter-base) + var(--i, 0) * 80ms) var(--ease-out-expo) backwards;
}
.workspace.route-enter .right-rail > * { animation-name: rail-in; animation-delay: calc(var(--enter-base) + 200ms + var(--i, 0) * 90ms); }
.workspace.route-enter > .dashboard-layout { animation: page-in .4s var(--enter-base) ease-out backwards; }
.workspace.route-enter .game-card:nth-child(n), .workspace.route-enter .popular-card, .workspace.route-enter .room-card,
.workspace.route-enter .tournament-card, .workspace.route-enter .mission-card, .workspace.route-enter .reward-item,
.workspace.route-enter .stat-card, .workspace.route-enter .achievement {
  animation: card-in .95s calc(var(--enter-base) + 180ms + var(--i, 0) * 65ms) var(--ease-out-expo) backwards;
}
.workspace.route-enter .categories .category,
.workspace.route-enter .hero-features > span {
  animation: chip-in .7s calc(var(--enter-base) + 300ms + var(--i, 0) * 40ms) var(--ease-back) backwards;
}
.workspace.route-enter .rank-table tbody tr { animation: row-in .7s calc(var(--enter-base) + 250ms + var(--i, 0) * 45ms) var(--ease-out-expo) backwards; }
.workspace.route-enter #community-posts > * { animation: rise-in .9s calc(var(--enter-base) + 200ms + var(--i, 0) * 90ms) var(--ease-out-expo) backwards; }
.workspace.route-enter .section-heading h2 > .icon { animation: icon-pop .9s calc(var(--enter-base) + 350ms) var(--ease-spring) backwards; }
.workspace.route-enter .progress-track > span { animation: progress-fill 1.2s calc(var(--enter-base) + 400ms) var(--ease-out-expo) backwards; }
@keyframes rise-in { from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(8px); } }
@keyframes rail-in { from { opacity: 0; transform: translateX(26px); filter: blur(6px); } }
@keyframes card-in { from { opacity: 0; transform: perspective(900px) translateY(40px) rotateX(14deg) scale(.94); filter: blur(6px); } }
@keyframes chip-in { from { opacity: 0; transform: translateY(14px) scale(.85); } }
@keyframes row-in { from { opacity: 0; transform: translateX(-18px); } }
@keyframes icon-pop { from { transform: scale(0) rotate(-90deg); opacity: 0; } }

/* Split headlines. */
h1.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .16em; margin: 0 -.04em -.16em; }
h1.split .wi { display: inline-block; }
.route-enter h1.split .wi { animation: word-up 1s calc(var(--enter-base) + 120ms + var(--i) * 65ms) var(--ease-out-expo) backwards; }
.route-enter .page-top h1.split [aria-hidden] .wi {
  transform-origin: 70% 80%;
  animation: word-up 1s calc(var(--enter-base) + 120ms + var(--i) * 65ms) var(--ease-out-expo) backwards,
             wave 1.6s calc(var(--enter-base) + 700ms + var(--i) * 65ms) ease-in-out 1;
}
.hero h1.split > span { text-shadow: none; }
.hero h1 .wi.accent, .hero h1:not(.split) > span {
  animation: shimmer-text 5s linear infinite;
  background: linear-gradient(100deg, #f1d4ff 0%, #c18bff 30%, #ff9fe0 50%, #c18bff 70%, #f1d4ff 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px #a25df08a);
}
.route-enter .hero h1 .wi.accent { animation: word-up 1s calc(var(--enter-base) + 120ms + var(--i) * 65ms) var(--ease-out-expo) backwards, shimmer-text 5s 1.4s linear infinite; }
@keyframes word-up { from { transform: translateY(115%) rotate(7deg); opacity: 0; } 40% { opacity: 1; } }
@keyframes wave { 0%, 100% { rotate: 0deg; } 15%, 45% { rotate: 16deg; } 30%, 60% { rotate: -10deg; } 75% { rotate: 6deg; } }
@keyframes shimmer-text { to { background-position: -220% 0; } }

/* ---------- Hero ---------- */
.hero { --px: 0; --py: 0; }
.hero-image {
  translate: calc(var(--px) * -16px) calc(var(--py) * -10px);
  animation: hero-drift 22s ease-in-out infinite alternate;
  transition: transform .9s var(--soft-ease), filter .7s ease, translate 1s var(--ease-out-expo);
}
.workspace.route-enter .hero-image {
  animation: hero-zoom 1.8s calc(var(--enter-base)) var(--ease-out-expo) backwards, hero-drift 22s ease-in-out infinite alternate;
}
.hero-copy { translate: calc(var(--px) * 7px) calc(var(--py) * 5px); transition: translate 1s var(--ease-out-expo); }
.route-enter .hero .eyebrow { animation: eyebrow-in .9s calc(var(--enter-base) + 150ms) var(--ease-back) backwards; }
.route-enter .hero-copy > p { animation: rise-in .9s calc(var(--enter-base) + 600ms) var(--ease-out-expo) backwards; }
.route-enter .hero-actions > * { animation: chip-in .8s calc(var(--enter-base) + 750ms + var(--i, 0) * 90ms) var(--ease-back) backwards; }
.route-enter .hero-label { animation: label-in 1s calc(var(--enter-base) + 900ms) var(--ease-out-expo) backwards; }
.route-enter .hero-pager { animation: chrome-fade .8s calc(var(--enter-base) + 1s) var(--ease-out-expo) backwards; }
@keyframes hero-zoom { from { transform: scale(1.28); filter: blur(10px) brightness(.45) saturate(1.4); } }
@keyframes hero-drift { from { scale: 1.02; } to { scale: 1.1; } }
@keyframes eyebrow-in { from { opacity: 0; transform: translateY(-12px) scale(.9); filter: blur(4px); } }
@keyframes label-in { from { opacity: 0; transform: translateX(30px); } }

/* Animated gradient outline on the hero and banner tags. */
.hero .eyebrow, .page-banner .eyebrow { position: relative; }
.hero .eyebrow::after, .page-banner .eyebrow::after {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--spin), transparent 0 55%, #e7c6ff 70%, #ff9fe0 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin-border 4s linear infinite;
  pointer-events: none;
}
.hero .eyebrow > .icon { animation: twinkle 2.6s ease-in-out infinite; }
@keyframes spin-border { to { --spin: 360deg; } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.3) rotate(25deg); opacity: .75; } }

/* Story-style pager that keeps time across the three dots. */
.hero-pager span { position: relative; overflow: hidden; transition: width .5s var(--ease-out-expo); }
.hero-pager span, .hero-pager span:first-child { width: 7px; background: #ffffff40; box-shadow: none; animation: pager-width 12s ease-in-out infinite; }
.hero-pager span:nth-child(2) { animation-delay: -8s; }
.hero-pager span:nth-child(3) { animation-delay: -4s; }
.hero-pager span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #e2c6ff;
  box-shadow: 0 0 10px #d1a9ff;
  transform: scaleX(0);
  transform-origin: left;
  animation: pager-fill 12s linear infinite;
  animation-delay: inherit;
}
@keyframes pager-width { 0%, 31% { width: 26px; } 36%, 95% { width: 7px; } 100% { width: 26px; } }
@keyframes pager-fill { 0% { transform: scaleX(0); } 33% { transform: scaleX(1); opacity: 1; } 34%, 100% { transform: scaleX(1); opacity: 0; } }

/* Sparks and a passing light beam inside illustrated scenes. */
.scene-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.page-banner .scene-fx, .profile-cover .scene-fx { z-index: 1; }
.scene-fx .spark {
  position: absolute;
  left: var(--x);
  bottom: -10px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: hsl(var(--h) 100% 82%);
  box-shadow: 0 0 8px 1px hsl(var(--h) 100% 70%), 0 0 18px 3px hsl(var(--h) 100% 60% / .5);
  animation: spark-rise var(--d) var(--delay) linear infinite;
}
.scene-fx .beam {
  position: absolute;
  top: -50%;
  left: 0;
  width: 26%;
  height: 200%;
  background: linear-gradient(90deg, transparent, #ffffff1f 45%, #ffffff33 50%, #ffffff1f 55%, transparent);
  transform: translateX(-160%) rotate(18deg);
  animation: beam-pass 9s 2s ease-in-out infinite;
  mix-blend-mode: overlay;
}
@keyframes spark-rise {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translate(var(--drift), -45vh) scale(1); }
  85% { opacity: .9; }
  100% { transform: translate(calc(var(--drift) * -.6), -95vh) scale(.3); opacity: 0; }
}
@keyframes beam-pass { 0%, 60% { transform: translateX(-160%) rotate(18deg); } 100% { transform: translateX(560%) rotate(18deg); } }

/* ---------- Banners and covers ---------- */
.page-banner { --px: 0; --py: 0; }
.page-banner::after {
  translate: calc(var(--px) * -14px) calc(var(--py) * -8px);
  animation: banner-drift 18s ease-in-out infinite alternate;
  transition: transform .8s var(--soft-ease), translate 1s var(--ease-out-expo);
}
.workspace.route-enter .page-banner::after { animation: banner-reveal 1.6s calc(var(--enter-base) + 100ms) var(--ease-out-expo) backwards, banner-drift 18s ease-in-out infinite alternate; }
.route-enter .page-banner .eyebrow { animation: eyebrow-in .9s calc(var(--enter-base) + 100ms) var(--ease-back) backwards; }
.route-enter .page-banner > p, .route-enter .page-banner > .button, .route-enter .page-banner > div:not(.eyebrow):not(.scene-fx) {
  animation: rise-in .9s calc(var(--enter-base) + 450ms) var(--ease-out-expo) backwards;
}
.route-enter .page-top > p, .route-enter .page-top > div > p, .route-enter .page-top .date-label { animation: rise-in .9s calc(var(--enter-base) + 380ms) var(--ease-out-expo) backwards; }
@keyframes banner-drift { from { scale: 1; } to { scale: 1.08; } }
@keyframes banner-reveal { from { opacity: 0; transform: translateX(60px) scale(1.15); filter: blur(8px); } }
.game-cover { --px: 0; --py: 0; }
.game-cover .game-art { translate: calc(var(--px) * -10px) calc(var(--py) * -8px); transition: transform .6s var(--soft-ease), translate 1s var(--ease-out-expo); }
.workspace.route-enter .game-cover { animation: cover-in 1.3s calc(var(--enter-base)) var(--ease-out-expo) backwards; }
@keyframes cover-in { from { clip-path: inset(12% 18% 12% 18% round 26px); opacity: 0; filter: blur(8px); } to { clip-path: inset(0 0 0 0 round 0); } }

/* ---------- Cards ---------- */
.tilt-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), #ffffff3a, transparent 55%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity .35s ease;
}
.is-tilting { will-change: transform; z-index: 2; }
.is-tilting > .tilt-glare { opacity: 1; }
.popular-card, .stat-card, .reward-item, .achievement, .mission-card { position: relative; }
.popular-card { transform-style: preserve-3d; }
#catalog-results .game-card { animation: card-in .7s calc(var(--n, 0) * 30ms) var(--ease-out-expo) backwards; }
#catalog-results .game-card:nth-child(2) { --n: 1; }
#catalog-results .game-card:nth-child(3) { --n: 2; }
#catalog-results .game-card:nth-child(4) { --n: 3; }
#catalog-results .game-card:nth-child(5) { --n: 4; }
#catalog-results .game-card:nth-child(6) { --n: 5; }
#catalog-results .game-card:nth-child(7) { --n: 6; }
#catalog-results .game-card:nth-child(n+8) { --n: 7; }
.favorite-button.active .icon { animation: heart-beat .7s var(--ease-spring); }
.card-badge.hot .icon { animation: flame 1.2s ease-in-out infinite; transform-origin: 50% 90%; }
.card-badge.playable { animation: badge-glow 2.4s ease-in-out infinite; }
@keyframes heart-beat { 0% { transform: scale(1); } 25% { transform: scale(1.45); } 45% { transform: scale(.88); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes flame { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.18, 1.25) rotate(4deg); } }
@keyframes badge-glow { 50% { box-shadow: 0 0 16px #7cffb666; } }

/* Podium: the winner arrives last. */
.workspace.route-enter .podium-card { animation: podium-rise 1.1s var(--ease-back) backwards; }
.workspace.route-enter .podium-card:nth-child(1) { animation-delay: calc(var(--enter-base) + 250ms); }
.workspace.route-enter .podium-card:nth-child(3) { animation-delay: calc(var(--enter-base) + 420ms); }
.workspace.route-enter .podium-card:nth-child(2) { animation-delay: calc(var(--enter-base) + 650ms); }
.podium-card .crown { animation: crown-float 3.2s ease-in-out infinite; }
.workspace.route-enter .podium-card .crown { animation: crown-drop 1s calc(var(--enter-base) + 1.2s) var(--ease-spring) backwards, crown-float 3.2s 2.2s ease-in-out infinite; }
.podium-card.winner { overflow: visible; }
.podium-card.winner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, #ffe6a03d 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: winner-shine 4.5s 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes podium-rise { from { opacity: 0; transform: translateY(80px) scaleY(.7); transform-origin: bottom; } }
@keyframes crown-drop { from { opacity: 0; transform: translateY(-40px) rotate(-30deg) scale(.4); } }
@keyframes crown-float { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -5px; rotate: 4deg; } }
@keyframes winner-shine { 0%, 55% { background-position: -150% 0; } 100% { background-position: 250% 0; } }

/* ---------- Living details ---------- */
.nav-link .pill { animation: pill-glow 2.6s ease-in-out infinite; }
.nav-link:hover .icon { animation: wiggle .55s ease; }
.category:hover .icon { animation: hop .5s var(--ease-spring); }
.tournament-mini .trophy-art { animation: float 5s ease-in-out infinite; }
.guest-card .guest-icon .icon { animation: twinkle 3s ease-in-out infinite; }
.trending-banner::before { animation: orb 9s ease-in-out infinite alternate; }
.floating-chat .icon { animation: bob 3.6s ease-in-out infinite; }
.floating-chat::after { animation: badge-ping 2.4s 1.5s ease-out infinite; }
.online-total { font-variant-numeric: tabular-nums; }
.player-score, .stat-card strong, .podium-card strong, .result-count, .reward-item strong { font-variant-numeric: tabular-nums; }
.live-badge { position: relative; overflow: hidden; }
.live-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, #ffffff40 50%, transparent 70%) -150% 0 / 250% 100% no-repeat;
  animation: winner-shine 3s ease-in-out infinite;
}
.progress-track > span { position: relative; overflow: hidden; }
.progress-track > span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, #ffffff66 50%, transparent 80%) -150% 0 / 200% 100% no-repeat;
  animation: winner-shine 2.4s ease-in-out infinite;
}
.topbar::after { box-shadow: 0 0 12px #9b61f3aa, 0 0 26px #b570ff66; }
@keyframes pill-glow { 50% { box-shadow: 0 0 12px #a874ff88, inset 0 1px #ffffff20; } }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -12deg; } 55% { rotate: 9deg; } 80% { rotate: -4deg; } }
@keyframes hop { 40% { translate: 0 -4px; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes orb { to { translate: 140px 60px; scale: 1.4; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes badge-ping { 0% { box-shadow: 0 0 0 0 #e9678caa; } 70%, 100% { box-shadow: 0 0 0 9px #e9678c00; } }

/* ---------- Press feedback ---------- */
.category, .tabs button, .chat-tabs button, .theme-choice, .mobile-bottom a { position: relative; }
.ripple-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #ffffff59 0%, #ffffff24 40%, transparent 70%);
  transform: scale(0);
  animation: ripple .7s var(--ease-out-expo) forwards;
}
.button.outline .ripple, .category .ripple, .tabs .ripple, .chat-tabs .ripple, .theme-choice .ripple, .nav-link .ripple, .mobile-bottom .ripple {
  background: radial-gradient(circle, #a874ff4d 0%, #a874ff1f 40%, transparent 70%);
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.button.is-magnet, .floating-chat.is-magnet, .button { transition: transform .22s var(--soft-ease), translate .35s var(--ease-out-expo), background-color .22s, border-color .22s, box-shadow .22s, color .22s; }
.floating-chat { transition: transform .25s var(--soft-ease), translate .35s var(--ease-out-expo), box-shadow .25s; }

.fx-layer { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; }
.fx-layer > span { position: absolute; display: block; }
.burst-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.burst-heart { width: 10px; height: 10px; background: var(--c); clip-path: path('M5 9.5 0.8 5.3A2.6 2.6 0 0 1 5 1.8a2.6 2.6 0 0 1 4.2 3.5Z'); }
.burst-ring { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #ff8fc0; box-shadow: 0 0 14px #ff8fc088; }
.confetti { box-shadow: 0 0 6px #ffffff33; }

/* ---------- Overlays ---------- */
dialog[open] { transform-origin: var(--ox, 50%) var(--oy, 50%); animation: modal-pop .6s var(--ease-back) both; }
dialog[open]::backdrop { animation: backdrop-in .45s ease-out both; }
dialog[open] .modal-header { animation: rise-in .6s .12s var(--ease-out-expo) backwards; }
dialog[open] .modal-body > * { animation: rise-in .6s .2s var(--ease-out-expo) backwards; }
dialog[open] .modal-body > :nth-child(2) { animation-delay: .26s; }
dialog[open] .modal-body > :nth-child(3) { animation-delay: .32s; }
dialog[open] .modal-body > :nth-child(n+4) { animation-delay: .38s; }
@keyframes modal-pop { from { opacity: 0; transform: scale(.55) translateY(24px); filter: blur(14px); } 55% { filter: blur(0); } }
@keyframes backdrop-in { from { opacity: 0; backdrop-filter: blur(0); } to { backdrop-filter: blur(6px); } }
.chat-drawer { transform-origin: 100% 100%; animation: drawer-pop .6s var(--ease-back) both; }
.chat-drawer .chat-messages > * { animation: rise-in .5s calc(.15s + var(--i, 0) * 50ms) var(--ease-out-expo) backwards; }
.chat-drawer .chat-messages > :last-child { animation-name: message-pop; }
@keyframes drawer-pop { from { opacity: 0; transform: translateY(30px) scale(.6); filter: blur(10px); } }
@keyframes message-pop { from { opacity: 0; transform: translateY(14px) scale(.85); } }
.toast { position: relative; overflow: hidden; animation: toast-spring .65s var(--ease-back) both; }
.toast > .icon { animation: icon-pop .7s .15s var(--ease-spring) backwards; }
.toast::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #6b5cff, #c07bff, #ff8fd8);
  transform-origin: left;
  animation: toast-timer 4.3s linear forwards;
}
.toast.leaving { animation: toast-leave .18s ease-in both; }
@keyframes toast-spring { from { opacity: 0; transform: translateY(26px) scale(.8); filter: blur(6px); } }
@keyframes toast-timer { to { transform: scaleX(0); } }
@keyframes toast-leave { to { opacity: 0; transform: translateY(10px) scale(.92); filter: blur(4px); } }
.sidebar-backdrop { animation: backdrop-in .35s ease-out both; }

/* ---------- Auth ---------- */
.auth-showcase { --px: 0; --py: 0; }
.auth-showcase > img { translate: calc(var(--px) * -14px) calc(var(--py) * -10px); animation: hero-drift 20s ease-in-out infinite alternate; transition: transform 1.1s var(--soft-ease), translate 1s var(--ease-out-expo); }
.auth-workspace:not(.auth-swap) .auth-showcase > img { animation: hero-zoom 1.8s var(--enter-base) var(--ease-out-expo) backwards, hero-drift 20s ease-in-out infinite alternate; }
.auth-workspace:not(.auth-swap) .auth-showcase-copy > * { animation: rise-in .9s calc(var(--enter-base) + 250ms + var(--n, 0) * 90ms) var(--ease-out-expo) backwards; }
.auth-showcase-copy > :nth-child(2) { --n: 1; }
.auth-showcase-copy > :nth-child(3) { --n: 2; }
.auth-showcase-copy > :nth-child(n+4) { --n: 3; }
.auth-workspace:not(.auth-swap) .auth-showcase-benefits > span { animation: chip-in .7s calc(var(--enter-base) + 700ms + var(--n, 0) * 70ms) var(--ease-back) backwards; }
.auth-showcase-benefits > :nth-child(2) { --n: 1; }
.auth-showcase-benefits > :nth-child(3) { --n: 2; }
.auth-form-inner > * { animation: rise-in .8s calc(var(--enter-base) + 120ms + var(--n, 0) * 60ms) var(--ease-out-expo) backwards; }
.auth-form-inner > :nth-child(2) { --n: 1; }
.auth-form-inner > :nth-child(3) { --n: 2; }
.auth-form-inner > :nth-child(4) { --n: 3; }
.auth-form-inner > :nth-child(5) { --n: 4; }
.auth-form-inner > :nth-child(n+6) { --n: 5; }
.auth-form .auth-field, .auth-form .auth-form-options, .auth-form [type=submit] { animation: rise-in .7s calc(var(--enter-base) + 220ms + var(--n, 0) * 55ms) var(--ease-out-expo) backwards; }
.auth-form > :nth-child(2) { --n: 1; }
.auth-form > :nth-child(3) { --n: 2; }
.auth-form > :nth-child(4) { --n: 3; }
.auth-form > :nth-child(n+5) { --n: 4; }
.auth-workspace .auth-bottom { animation: chrome-fade .8s calc(var(--enter-base) + 600ms) var(--ease-out-expo) backwards; }

@media (max-width: 680px) {
  .scene-fx .spark:nth-child(n+12) { display: none; }
}

/* Scroll reveal: content surfaces in small waves as it reaches the viewport. */
.scroll-reveal {
  transition: opacity .9s var(--ease-out-expo) var(--reveal-delay, 0s), transform 1s var(--ease-out-expo) var(--reveal-delay, 0s),
              filter .9s var(--ease-out-expo) var(--reveal-delay, 0s), border-color .25s, box-shadow .25s;
}
.scroll-reveal:not(.is-visible) { opacity: 0; transform: perspective(900px) translateY(44px) rotateX(10deg) scale(.96); filter: blur(10px); transform-origin: 50% 0; }

/* ---------- Screenshots ---------- */
.screenshot-strip button {
  position: relative;
  isolation: isolate;
  transition: transform .45s var(--soft-ease), opacity .4s ease, filter .4s ease, border-color .3s, box-shadow .45s var(--soft-ease);
}
.screenshot-strip img { transition: transform 1s var(--ease-out-expo), filter .6s ease; }
.screenshot-strip button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, #0b0718d9, #0b071833 45%, transparent 70%);
  opacity: 0;
  transition: opacity .45s ease;
}
.screenshot-strip button::after {
  content: '';
  position: absolute;
  inset: -40% auto -40% -60%;
  z-index: 2;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffffff40, transparent);
  transform: translateX(0) rotate(18deg);
  opacity: 0;
}
.screenshot-zoom {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  color: #fff;
  background: #ffffff1f;
  border: 1px solid #ffffff4d;
  box-shadow: 0 8px 26px #0007, inset 0 1px #ffffff40;
  backdrop-filter: blur(10px) saturate(1.4);
  opacity: 0;
  transform: scale(.4) rotate(-45deg);
  transition: opacity .3s ease, transform .55s var(--ease-spring);
  pointer-events: none;
}
.screenshot-zoom .icon { width: 19px; height: 19px; }
.screenshot-strip button:is(:hover, :focus-visible) {
  border-color: var(--accent);
  box-shadow: 0 22px 44px -18px #8550f3cc, 0 0 0 1px var(--accent), 0 0 28px -6px #b47bff88;
}
.screenshot-strip button:is(:hover, :focus-visible) img { transform: scale(1.1); filter: saturate(1.2) contrast(1.05); }
.screenshot-strip button:is(:hover, :focus-visible)::before { opacity: 1; }
.screenshot-strip button:is(:hover, :focus-visible)::after { opacity: 1; animation: shot-sheen .9s .05s var(--ease-out-expo) forwards; }
.screenshot-strip button:is(:hover, :focus-visible) .screenshot-zoom { opacity: 1; transform: none; }
.screenshot-strip button:active .screenshot-zoom { transform: scale(.88); transition-duration: .15s; }
.screenshot-strip:has(button:hover) button:not(:hover) { opacity: .55; filter: saturate(.55) brightness(.85); transform: scale(.97); }
.workspace.route-enter .screenshot-strip button { animation: card-in .8s calc(var(--enter-base) + 260ms + var(--i, 0) * 70ms) var(--ease-out-expo) backwards; }
@keyframes shot-sheen { to { transform: translateX(420%) rotate(18deg); } }

.screenshot-viewer { width: min(1180px, calc(100% - 32px)); }
.screenshot-stage {
  --progress: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: #07060d;
  perspective: 1400px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: inset 0 0 0 1px #ffffff12, 0 24px 60px -30px #8550f3aa;
}
.screenshot-stage .screenshot-viewer-image {
  position: relative;
  z-index: 2;
  max-height: calc(100dvh - 300px);
  min-height: 180px;
  border-radius: 0;
  background: transparent;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}
.screenshot-stage:has(.screenshot-edge) { cursor: grab; }
.screenshot-stage.is-dragging { cursor: grabbing; }
.screenshot-ambient {
  position: absolute;
  inset: -12%;
  z-index: 0;
  width: 124%;
  height: 124%;
  max-width: none;
  object-fit: cover;
  opacity: .5;
  filter: blur(46px) saturate(1.8);
  pointer-events: none;
  animation: ambient-breathe 9s ease-in-out infinite alternate;
}
@keyframes ambient-breathe { to { transform: scale(1.12) rotate(2deg); opacity: .62; } }
.screenshot-stage .screenshot-ghost {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  pointer-events: none;
}
.screenshot-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 18%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .35s ease;
}
.screenshot-edge.previous { left: 0; background: linear-gradient(90deg, #07060dcc, transparent); }
.screenshot-edge.next { right: 0; background: linear-gradient(-90deg, #07060dcc, transparent); }
.screenshot-edge::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  filter: drop-shadow(0 0 8px #b47bff);
  transition: transform .45s var(--ease-spring);
}
.screenshot-edge.previous::after { left: 26px; transform: translateX(10px) rotate(135deg); }
.screenshot-edge.next::after { right: 26px; transform: translateX(-10px) rotate(-45deg); }
.screenshot-edge:hover { opacity: 1; }
.screenshot-edge.previous:hover::after { transform: translateX(0) rotate(135deg); }
.screenshot-edge.next:hover::after { transform: translateX(0) rotate(-45deg); }
.screenshot-stage.is-dragging .screenshot-edge { opacity: 0; }
.screenshot-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 3px;
  background: linear-gradient(90deg, #6b5cff, #c07bff, #ff8fd8);
  box-shadow: 0 0 12px #c07bffaa;
  transform-origin: left;
  transform: scaleX(var(--progress));
  transition: transform .8s var(--ease-out-expo);
}
.screenshot-viewer-counter { font-variant-numeric: tabular-nums; display: inline-block; }
.screenshot-filmstrip {
  display: flex;
  gap: 10px;
  margin: 14px -4px 0;
  padding: 6px 4px 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.screenshot-thumb {
  position: relative;
  flex: 0 0 104px;
  aspect-ratio: var(--game-media-aspect, 16/9);
  padding: 0;
  overflow: hidden;
  border-radius: 9px;
  background: var(--surface-2);
  scroll-snap-align: center;
  opacity: .45;
  filter: saturate(.5);
  transform: scale(.9);
  transition: opacity .4s ease, filter .4s ease, transform .5s var(--ease-spring), box-shadow .4s ease;
}
.screenshot-thumb img { width: 100%; height: 100%; object-fit: cover; }
.screenshot-thumb::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4px;
  height: 3px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 10px #c07bff;
  transform: scaleX(0);
  transition: transform .5s var(--ease-out-expo);
}
.screenshot-thumb:hover { opacity: .85; filter: saturate(1); transform: scale(.96) translateY(-2px); }
.screenshot-thumb.is-active { opacity: 1; filter: none; transform: scale(1); box-shadow: 0 0 0 2px var(--accent), 0 10px 24px -8px #8550f3cc; }
.screenshot-thumb.is-active::after { transform: scaleX(1); }
dialog[open].screenshot-viewer .modal-body > .screenshot-stage { animation: shot-open 1s .1s var(--ease-out-expo) backwards; }
dialog[open] .screenshot-thumb { animation: chip-in .55s calc(.38s + var(--i, 0) * 45ms) var(--ease-back) backwards; }
@keyframes shot-open { from { opacity: 0; clip-path: inset(10% 14% round 28px); transform: scale(.94); filter: blur(10px) brightness(1.4); } to { clip-path: inset(0 round 14px); } }
@media (max-width: 600px) {
  .screenshot-stage .screenshot-viewer-image { max-height: calc(100dvh - 270px); }
  .screenshot-edge { display: none; }
  .screenshot-thumb { flex-basis: 76px; }
}
@media (hover: none) {
  .screenshot-strip button::after, .screenshot-zoom { display: none; }
}