@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Roboto:wght@100..900&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");

/* Import fonts */

:root {
  font-family: "Titillium Web", sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-family: "Titillium Web", sans-serif;
}

body {
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

#root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}

button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}
/* The Ludeo mark in dots on black, in the player's Game Over type (Rajdhani) */
.not-found-page {
  width: 100%;
  min-height: 100vh;
  background: #000;
  color: #f0f0f3;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
  box-sizing: border-box;
  /* a hold (the dots' easter egg) shouldn't select the copy or open a touch callout */
  user-select: none;
  -webkit-touch-callout: none;
}

/* the vortex: the copy blurs away (filter, so it doesn't fight the rise animation's opacity) */
.not-found-page__title,
.not-found-page__message,
.not-found-page__footer {
  transition: filter 0.6s ease;
}

.not-found-page--vortex .not-found-page__title,
.not-found-page--vortex .not-found-page__message,
.not-found-page--vortex .not-found-page__footer {
  filter: blur(6px) opacity(0);
}

/* the dots' canvas covers the screen, behind the copy; the mark's slot only places it */
.dot-mark-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.not-found-page__title,
.not-found-page__message,
.not-found-page__footer {
  position: relative;
}

.not-found-page__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6vmin;
  padding: 48px 16px 0;
  text-align: center;
}

.not-found-page__mark {
  display: block;
  width: min(52vmin, 460px);
  height: min(52vmin, 460px);
  margin-bottom: 1vmin;
}

.not-found-page__title {
  margin: 0;
  font-size: clamp(30px, 5vmin, 56px);
  font-weight: 600;
  line-height: 1.1;
  color: #f0f0f3;
}

.not-found-page__message {
  margin: 0;
  max-width: 460px;
  font-size: clamp(15px, 1.9vmin, 18px);
  font-weight: 500;
  line-height: 1.4;
  color: #9a9aa4;
}

.not-found-page__footer {
  display: flex;
  justify-content: center;
  padding: 24px 16px 36px;
}

.not-found-page__home {
  display: block;
  border-radius: 8px;
}

.not-found-page__home:focus-visible {
  outline: 2px solid #f0f0f3;
  outline-offset: 6px;
}

.not-found-page__logo {
  display: block;
  width: 133px;
  height: 36px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.not-found-page__home:hover .not-found-page__logo {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .not-found-page__title,
  .not-found-page__message {
    animation: not-found-rise 0.7s ease-out both;
  }

  .not-found-page__title {
    animation-delay: 0.5s;
  }

  .not-found-page__message {
    animation-delay: 0.65s;
  }
}

@keyframes not-found-rise {
  from {
    opacity: 0;
    transform: translateY(2.5vmin);
  }
}
.mobile-not-supported-page {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-not-supported-page__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 0;
  padding: 24px 16px;
  padding-top: max(24px, env(safe-area-inset-top));
  box-sizing: border-box;
  width: 100%;
}

.mobile-not-supported-page__modal {
  background: rgba(15, 15, 15, 0.5);
  backdrop-filter: blur(30px);
  border-radius: 8px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 500px;
  width: 100%;
  box-sizing: border-box;
}

.mobile-not-supported-page__title {
  color: var(--Text---icons-Body-1, #FFF);
  text-align: center;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 36px; /* 128.571% */
  margin: 0;
}

.mobile-not-supported-page__subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4em;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
  opacity: 0.9;
}

.mobile-not-supported-page__copy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 16px;
  border: none;
  border-radius: 999999px;
  background: var(--buttons-solid-transparent-static, rgba(255, 255, 255, 0.2));
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
  margin-top: 8px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-not-supported-page__copy-button:hover {
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.3);
}

.mobile-not-supported-page__copy-button:active {
  opacity: 0.85;
  transform: scale(0.95);
}

.mobile-not-supported-page__copy-button--copied {
  background: rgba(76, 175, 80, 0.3);
  min-width: 100px;
}

.mobile-not-supported-page__copy-text {
  color: #FFF;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.mobile-not-supported-page__copy-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.mobile-not-supported-page__footer {
  position: relative;
  min-height: 100px;
  z-index: 1;
  width: 100%;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.mobile-not-supported-page__logo {
  width: 88.48px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Hidden textarea for clipboard fallback */
.mobile-not-supported-page__clipboard-fallback {
  position: fixed;
  top: 0;
  left: 0;
  width: 2em;
  height: 2em;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

/* Mobile-first responsive adjustments */
@media (min-width: 481px) {
  .mobile-not-supported-page__modal {
    padding: 36px 32px;
  }

  .mobile-not-supported-page__subtitle {
    font-size: 18px;
  }
}

@media (min-width: 769px) {
  .mobile-not-supported-page__modal {
    padding: 40px;
    max-width: 600px;
  }

  .mobile-not-supported-page__title {
    font-size: 32px;
  }

  .mobile-not-supported-page__subtitle {
    font-size: 20px;
  }

}

.mobile-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transition: opacity 0.3s ease-in-out;
}

.mobile-background--loading {
  opacity: 0.7;
}

#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#ludeo-unit-root {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.ludeo-player{--lp-paper: #0c0c10;--lp-ink: #f0f0f3;--lp-mid: #7d7d87;--lp-accent: #f0a500;--lp-panel: rgba(10, 12, 17, .52);--lp-panel-mid: #9a9aa4;--lp-panel-line: rgba(255, 255, 255, .1);--lp-card: #131316;--lp-good: oklch(.78 .16 145);--lp-bad: oklch(.7 .19 25);--lp-bad-text: oklch(.8 .14 25);--lp-danger: oklch(.72 .19 30);--lp-zoom: 1;--lp-font: "Rajdhani", system-ui, sans-serif;--lp-ease-fill: cubic-bezier(.22, 1, .36, 1);--lp-ease-drawer: cubic-bezier(.32, .72, 0, 1);--lp-blur-outro: blur(72px) brightness(.42) saturate(1.2);--lp-z: 2147482000;position:relative;width:100%;font-family:var(--lp-font);line-height:1.5;color:var(--lp-ink)}.ludeo-player *,.ludeo-player *:before,.ludeo-player *:after{box-sizing:border-box}.ludeo-player :is(h2,p,ul,ol,dl,dd,figure){margin:0;padding:0}.ludeo-player :where(button,input,select,textarea){font:inherit;letter-spacing:inherit;color:inherit}.ludeo-player :where(button){padding:0}.ludeo-player :where(img,svg,video,canvas,audio){vertical-align:middle}.ludeo-player :focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:2px}.ludeo-player .lp-stage-slot{position:relative;width:100%;aspect-ratio:16 / 9;max-height:var(--lp-stage-max-height, none);container-type:inline-size}.ludeo-player .lp-stage{position:absolute;inset:0;overflow:hidden;border-radius:16px;background:#000}.ludeo-player .lp-stage-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,transparent 35%,rgba(255,255,255,.06) 50%,transparent 65%) 100% 0 / 300% 100% no-repeat,#111114}@media(prefers-reduced-motion:no-preference){.ludeo-player .lp-stage-shimmer{animation:lp-shimmer 1.6s linear infinite}}.ludeo-player .lp-stage:has(>.lp-in)>.lp-stage-shimmer{animation:none}.ludeo-player .lp-stage>:is(video,img){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:filter .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}.ludeo-player .lp-stage>video:not(.lp-in){opacity:0}@media(prefers-reduced-motion:no-preference){.ludeo-player .lp-stage>.lp-in{animation:lp-stage-in .5s ease-out}}@keyframes lp-stage-in{0%{opacity:0}}.ludeo-player .lp-stage-actions{position:absolute;top:max(10px,16 * var(--lp-u));right:max(10px,16 * var(--lp-u));z-index:4;display:flex;gap:max(6px,8 * var(--lp-u));animation:lp-fade-in .45s ease both}.ludeo-player .lp-stage-action{position:relative;width:max(28px,40 * var(--lp-u));height:max(28px,40 * var(--lp-u));display:grid;place-items:center;border:0;border-radius:50%;background:#0e0f1480;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;cursor:pointer;transition:background-color .18s ease,transform .12s ease}.ludeo-player .lp-stage-action[aria-disabled=true]{cursor:not-allowed;opacity:.6}.ludeo-player .lp-stage-action:hover{background:#0e0f14bf}.ludeo-player .lp-stage-action:active{transform:scale(.92)}.ludeo-player .lp-stage-action svg{width:max(16px,20 * var(--lp-u));height:max(16px,20 * var(--lp-u));fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.ludeo-player .lp-stage-action:after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;padding:6px 10px;border-radius:8px;background:#14151af2;box-shadow:inset 0 0 0 1px #ffffff1f,0 6px 20px #0006;font-size:14px;font-weight:500;line-height:1.2;width:max-content;max-width:240px;opacity:0;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}.ludeo-player .lp-stage-action:is(:hover,:focus-visible):after{opacity:1;transform:none;transition-delay:.25s}.ludeo-player .lp-pill-wrap{position:absolute;left:50%;bottom:76px;z-index:3;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:12px}.ludeo-player .lp-pill{position:relative;height:40px;min-width:0;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;border:none;border-radius:999px;background:#fff;color:#0c0c10;font-weight:700;cursor:pointer;transition:transform .15s var(--lp-ease-fill)}.ludeo-player .lp-pill:hover{transform:scale(1.015)}.ludeo-player .lp-pill-label{font-size:14px;font-weight:700;letter-spacing:.04em;white-space:nowrap;animation:lp-hint-pulse 2s ease-in-out infinite}.ludeo-player .lp-pill:hover .lp-pill-label,.ludeo-player .lp-pill--turn .lp-pill-label{animation:none;opacity:1}.ludeo-player .lp-pill--turn{min-width:190px;padding:0 20px}.ludeo-player .lp-pill--loading{width:210px;padding:0 16px}.ludeo-player .lp-pill--loading .lp-pill-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.ludeo-player .lp-status{animation:lp-status 4s ease-in-out both}.ludeo-player .lp-urgent{color:var(--lp-danger)}.ludeo-player .lp-pill--loading .lp-pill-label{font-size:12px;font-weight:600;letter-spacing:.02em}.ludeo-player .lp-mark{flex:none;width:14px;height:14px}.ludeo-player .lp-pill--loading .lp-mark{width:12px;height:12px}.ludeo-player .lp-mark--spin,.ludeo-player .lp-next-item:is(:hover,:focus-visible) .lp-mark{animation:lp-spin 2s linear infinite}.ludeo-player .lp-coin{position:relative;color:#0f0f0f}.ludeo-player .lp-coin>svg{position:absolute;left:0;top:0;width:400%;height:400%;transform-origin:0 0;transform:scale(.25)}.ludeo-player .lp-coin:not([data-flipping])>svg:not(:last-child){display:none}.ludeo-player .lp-coin>svg:last-child{overflow:visible;stroke:currentColor;stroke-width:var(--lp-coin-weight, 2.6);stroke-linejoin:round}.ludeo-player .lp-coin[data-flipping]{transform-style:preserve-3d}.ludeo-player .lp-coin[data-flipping]>svg{transform:translateZ(var(--lp-coin-z)) scale(.25)}.ludeo-player .lp-pill--loading{background:#26262ceb;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#ffffffeb;pointer-events:none}.ludeo-player .lp-pill--turn{overflow:visible;border:1px solid #fff;animation:lp-turn-glow 1.6s ease-in-out infinite,lp-breathe 1.6s ease-in-out infinite}.ludeo-player .lp-pill--turn:after{content:"";position:absolute;inset:-1px;border:2px solid #fff;border-radius:inherit;pointer-events:none;animation:lp-turn-ring 1.4s ease-out infinite}.ludeo-player .lp-pill-sub{font-size:13px;font-weight:500;letter-spacing:.02em;color:#ffffffd1;text-shadow:0 1px 10px rgba(0,0,0,.6);text-align:center}.ludeo-player .lp-pulse-text{animation:lp-hint-pulse 2.4s ease-in-out infinite}.ludeo-player .lp-stage-slot{--lp-u: calc(100cqw / 848);--lp-line-bottom: calc(18 * var(--lp-u));--lp-pill-h: max(32px, 48 * var(--lp-u));--lp-turn-pill-h: max(36px, 56 * var(--lp-u))}.ludeo-player .lp-pill-wrap{bottom:calc(var(--lp-line-bottom) + (var(--lp-turn-pill-h) - var(--lp-pill-h)) / 2)}.ludeo-player .lp-pill-wrap>.lp-pill-sub{position:absolute;bottom:calc(100% + max(8px,12 * var(--lp-u)));left:50%;transform:translate(-50%);white-space:nowrap;font-size:max(12px,14 * var(--lp-u))}.ludeo-player :is(.lp-pill-wrap,.lp-line-middle)>.lp-pill{height:var(--lp-pill-h);min-width:0;padding:0 max(16px,28 * var(--lp-u));gap:max(6px,10 * var(--lp-u));isolation:isolate;transition:transform .4s cubic-bezier(.2,.8,.2,1)}.ludeo-player .lp-pill-wrap>.lp-pill{animation:lp-pill-in .42s cubic-bezier(.2,.8,.2,1)}.ludeo-player :is(.lp-pill-wrap,.lp-line-middle)>.lp-pill:hover{transform:scale(1.03);transition:transform .12s ease-out}.ludeo-player :is(.lp-pill-wrap,.lp-line-middle)>.lp-pill .lp-pill-label{font-size:max(13px,16 * var(--lp-u));letter-spacing:0;animation:none;opacity:1}.ludeo-player :is(.lp-pill-wrap,.lp-line-middle)>.lp-pill .lp-mark{width:max(14px,18 * var(--lp-u));height:max(14px,18 * var(--lp-u))}.ludeo-player .lp-line-middle>.lp-pill--turn{height:var(--lp-turn-pill-h);padding:0 max(20px,34 * var(--lp-u));overflow:hidden;border:0;animation:lp-turn-pop .52s cubic-bezier(.2,.8,.2,1),lp-turn-glow-ring 2.4s ease-in-out infinite}.ludeo-player .lp-line-middle>.lp-pill--turn:after{content:none}.ludeo-player .lp-line-middle>.lp-pill--turn .lp-pill-label{font-size:max(14px,18 * var(--lp-u))}.ludeo-player .lp-line-middle>.lp-pill--turn .lp-pill-shine{width:50%;background:linear-gradient(100deg,transparent 0%,rgba(15,15,16,.14) 50%,transparent 100%);animation-name:lp-turn-shine;animation-duration:2.4s;animation-delay:.5s}.ludeo-player .lp-pill-shine{position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(15,15,16,.12) 50%,transparent 100%);transform:translate(-120%) skew(-20deg)}@media(prefers-reduced-motion:no-preference){.ludeo-player .lp-pill-shine{animation:lp-pill-shine 2.8s cubic-bezier(.4,0,.2,1) .6s infinite}}.ludeo-player .lp-line-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,#000000b3,#0000 45%);animation:lp-fade-in .5s ease both}.ludeo-player .lp-line-shade:after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(120 * var(--lp-u));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:linear-gradient(to top,#0a0b0e73,#0a0b0e00);mask-image:linear-gradient(to top,#000 55%,transparent);-webkit-mask-image:linear-gradient(to top,#000 55%,transparent)}.ludeo-player .lp-stage--turn>:is(video,img){filter:blur(8px) brightness(.75);transform:scale(1.06);transition:filter .6s ease,transform .6s ease}.ludeo-player .lp-line{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 calc(22 * var(--lp-u)) var(--lp-line-bottom);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;font-size:max(11px,14 * var(--lp-u));font-weight:500;color:#fff;white-space:nowrap}.ludeo-player .lp-line-side{display:flex;align-items:center;gap:calc(14 * var(--lp-u));min-width:0}.ludeo-player .lp-line-text{flex:none;display:flex;align-items:center;gap:calc(8 * var(--lp-u));font-variant-numeric:tabular-nums}.ludeo-player .lp-line-text svg{flex:none;width:max(14px,20 * var(--lp-u));height:max(14px,20 * var(--lp-u));fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.ludeo-player .lp-line-short{display:none}.ludeo-player .lp-line-rail{position:relative;flex:1;min-width:24px;height:1px;margin:0 calc(14 * var(--lp-u));background:#ffffff47}.ludeo-player .lp-line-fill{position:absolute;top:0;height:1px;overflow:hidden;background:#ffffffe6;transition:width .25s linear}.ludeo-player .lp-line-rail--left .lp-line-fill{left:0}.ludeo-player .lp-line-rail--right .lp-line-fill{right:0}.ludeo-player .lp-line-flow{position:absolute;top:0;width:calc(120 * var(--lp-u));height:1px;background:linear-gradient(90deg,transparent,#fff 50%,transparent);box-shadow:0 0 4px #ffffff73}@media(prefers-reduced-motion:no-preference){.ludeo-player .lp-line-rail--left .lp-line-flow{animation:lp-line-flow 1.4s linear infinite}.ludeo-player .lp-line-rail--right .lp-line-flow{animation:lp-line-flow 1.4s linear infinite reverse}}.ludeo-player .lp-line-middle{position:relative;height:var(--lp-turn-pill-h);display:flex;align-items:center;justify-content:center}.ludeo-player .lp-line-pill{position:relative;height:var(--lp-pill-h);padding:0 calc(20 * var(--lp-u));display:flex;align-items:center;justify-content:center;border-radius:999px;box-shadow:inset 0 0 0 1px #ffffff59;color:#fff}.ludeo-player .lp-line-pill-clip{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;overflow:hidden}.ludeo-player .lp-line-pill-label{flex:none;white-space:nowrap;animation:lp-status-in .32s ease .12s both}.ludeo-player .lp-line-pill-label--out{position:absolute;left:50%;top:50%;translate:-50% -50%;animation:lp-status-out .2s ease both}@keyframes lp-status-in{0%{opacity:0;transform:translateY(4px);filter:blur(2px)}}@keyframes lp-status-out{to{opacity:0;transform:translateY(-4px);filter:blur(2px)}}@media(prefers-reduced-motion:reduce){.ludeo-player .lp-line-pill-label{animation-name:lp-fade-in}.ludeo-player .lp-line-pill-label--out{animation-name:lp-fade-out}}@media(prefers-reduced-motion:no-preference){.ludeo-player .lp-line-pill{transition:width .5s cubic-bezier(.2,.8,.2,1)}}.ludeo-player .lp-line-trace{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 4px rgba(255,255,255,.6))}.ludeo-player .lp-line-trace path{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:0 1 0}.ludeo-player .lp-line--turn .lp-urgent{color:#ff6a5a}.ludeo-player .lp-turn-title{position:absolute;left:0;right:0;bottom:calc(116 * var(--lp-u));z-index:2;display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--lp-u));pointer-events:none;text-align:center}.ludeo-player .lp-turn-ludeo{font-size:max(12px,16 * var(--lp-u));font-weight:600;letter-spacing:.02em;color:#ffffffbf;text-shadow:0 1px 12px rgba(0,0,0,.5)}.ludeo-player .lp-turn-call{padding:0 24px;font-size:max(18px,28 * var(--lp-u));font-weight:600;line-height:1.15;letter-spacing:-.02em;text-wrap:balance;filter:drop-shadow(0 2px 18px rgba(0,0,0,.45));animation:lp-turn-call-in .6s cubic-bezier(.2,.8,.2,1) .15s both}.ludeo-player .lp-turn-call>span{background-image:linear-gradient(90deg,#fff9 0% 35%,#fff 50%,#fff9 65% 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}@media(prefers-reduced-motion:no-preference){.ludeo-player .lp-turn-call>span{animation:lp-text-shimmer 1.8s linear infinite}}@container (max-width: 560px){.ludeo-player .lp-line-rail,.ludeo-player .lp-line-long,.ludeo-player .lp-turn-ludeo{display:none}.ludeo-player .lp-line-short{display:inline}.ludeo-player .lp-line-side--right{justify-content:flex-end}}@keyframes lp-pill-shine{0%{transform:translate(-120%) skew(-20deg)}22%,to{transform:translate(260%) skew(-20deg)}}@keyframes lp-turn-shine{0%{transform:translate(-120%) skew(-20deg)}26%,to{transform:translate(320%) skew(-20deg)}}@keyframes lp-pill-in{0%{opacity:0;transform:translateY(8px) scale(.96)}}@keyframes lp-turn-pop{0%{transform:scale(.86)}60%{transform:scale(1.04)}}@keyframes lp-turn-glow-ring{0%,to{box-shadow:0 0 0 1px #ffffffe6,0 0 12px #ffffff73,0 0 28px #ffffff38}50%{box-shadow:0 0 0 1px #fff,0 0 20px #ffffffb3,0 0 44px #fff6}}@keyframes lp-line-flow{0%{left:calc(-120 * var(--lp-u))}to{left:100%}}@keyframes lp-turn-call-in{0%{opacity:0;transform:translateY(12px);filter:blur(6px)}}@keyframes lp-text-shimmer{0%{background-position:100% 0}to{background-position:0% 0}}.ludeo-player .lp-mini{display:flex;flex-direction:column;gap:12px;width:100%;padding:14px 16px 16px;border-radius:16px;background:#1a1a1c;box-shadow:0 16px 48px #0009;color:#fff;font-size:14px;line-height:1.3;animation:lp-mini-in .42s cubic-bezier(.2,.8,.2,1)}.ludeo-player .lp-mini-head{position:relative;z-index:1;display:flex;align-items:center;gap:8px;min-width:0}.ludeo-player .lp-mini-back{flex:1;min-width:0;display:flex;align-items:center;gap:12px;border:0;background:none;color:inherit;text-align:left}.ludeo-player button.lp-mini-back{cursor:pointer}.ludeo-player .lp-mini-poster{flex:none;width:30px;height:40px;border-radius:6px;object-fit:cover;background:#2a2a2d}.ludeo-player .lp-mini-text{min-width:0;display:flex;flex-direction:column;gap:2px}.ludeo-player .lp-mini-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ludeo-player .lp-mini-sub{color:#fffc;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ludeo-player .lp-mini-sub.lp-urgent{color:#ff6a5a}.ludeo-player .lp-mini-close{flex:none;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:none;color:#ffffffb3;cursor:pointer;transition:background-color .18s ease,color .18s ease}.ludeo-player .lp-mini-close:hover{background:#ffffff14;color:#fff}.ludeo-player .lp-mini-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.ludeo-player .lp-mini-bar{position:relative;height:4px;border-radius:4px;background:#ffffff1f;overflow:hidden}.ludeo-player .lp-mini-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#fff;transition:width .25s linear}.ludeo-player :is(.lp-mini-play,.lp-mini-again){height:40px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:#fff;color:#0f0f10;font-size:14px;font-weight:700;cursor:pointer;transition:transform .12s ease}.ludeo-player :is(.lp-mini-play,.lp-mini-again):active{transform:scale(.97)}.ludeo-player .lp-mini-play{animation:lp-mini-glow 2.4s ease-in-out infinite}.ludeo-player .lp-mini-play .lp-mark{width:16px;height:16px}@keyframes lp-mini-in{0%{opacity:0;transform:translateY(8px) scale(.96)}}@keyframes lp-mini-glow{0%,to{box-shadow:0 0 6px 2px #ffffff2e,0 0 20px 4px #ffffff38;transform:scale(1)}50%{box-shadow:0 0 10px 3px #ffffff29,0 0 36px 8px #ffffff52;transform:scale(1.05)}}@media(prefers-reduced-motion:reduce){.ludeo-player .lp-mini,.ludeo-player .lp-mini-play{animation:none}.ludeo-player .lp-mini-play{box-shadow:0 0 6px 2px #ffffff2e,0 0 20px 4px #ffffff38}}.ludeo-player .lp-stage-slot:has(.lp-error) .lp-stage>:is(video,img){filter:blur(8px) brightness(.45);transform:scale(1.04)}.ludeo-player .lp-error{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;animation:lp-rise .5s ease-out .1s both}.ludeo-player .lp-error-title{font-size:clamp(22px,3vw / var(--lp-zoom),30px);font-weight:700;line-height:1}.ludeo-player .lp-error-body{max-width:520px;font-size:17px;line-height:22px;color:#ffffffd1;white-space:pre-line}.ludeo-player .lp-error .lp-pill{margin-top:8px}.ludeo-player.lp-layer{position:static;width:0;height:0}.ludeo-player .lp-backdrop{position:fixed;inset:0;z-index:var(--lp-z);overflow:hidden;background:var(--lp-paper);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}.ludeo-player .lp-backdrop.lp-on{opacity:1;visibility:visible;transition:none}.ludeo-player .lp-backdrop>:is(video,img){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1);filter:var(--lp-blur-outro)}.ludeo-player .lp-stream-host{position:fixed;inset:0;z-index:calc(var(--lp-z) + 1);background:#000;visibility:hidden;pointer-events:none}.ludeo-player.lp-is-immersive .lp-stream-host{visibility:visible;pointer-events:auto}.ludeo-player .lp-carry{--lp-carry-head: calc(38px + 2*clamp(12px, 1.8vh / var(--lp-zoom), 18px)) ;--lp-carry-pad: clamp(24px, 4vh / var(--lp-zoom), 48px);--lp-carry-w: min( calc(100vw / var(--lp-zoom) - 80px), calc( ( 100vh / var(--lp-zoom) - var(--lp-carry-head) - var(--lp-carry-pad) - 164px ) * 16 / 9 ) );position:fixed;inset:0;z-index:calc(var(--lp-z) + 2);animation:lp-fade-in .4s ease both}.ludeo-player .lp-carry-top{position:absolute;top:0;left:0;right:0;width:var(--lp-carry-w);height:var(--lp-carry-head);margin-inline:auto;display:flex;align-items:center;justify-content:space-between}.ludeo-player :is(.lp-carry-top,.lp-go-top) .lp-brand{display:block;width:auto;height:clamp(20px,2.7vmin / var(--lp-zoom),27px);color:#fff;opacity:.9}.ludeo-player .lp-carry-top>:is(.lp-carry-logo,.lp-carry-game),.ludeo-player .lp-go-top>:is(.lp-go-logo,.lp-go-game){position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.ludeo-player .lp-carry-logo{max-height:36px;width:auto}.ludeo-player .lp-carry-game{font-size:18px;font-weight:700}.ludeo-player .lp-carry-top .lp-btn{height:38px;padding:0 22px}.ludeo-player .lp-carry .lp-stage-slot{position:absolute;top:var(--lp-carry-head);left:0;right:0;width:var(--lp-carry-w);height:auto;margin-inline:auto;aspect-ratio:16 / 9;max-height:none}.ludeo-player .lp-carry .lp-cards{top:calc(var(--lp-carry-head) + var(--lp-carry-w) * 9 / 16 + 18px);bottom:auto;width:var(--lp-carry-w)}.ludeo-player .lp-stream-video{transition:filter .35s ease,transform .6s cubic-bezier(.2,.7,.2,1)}.ludeo-player.lp-is-paused .lp-stream-video{filter:saturate(.75) brightness(.62);transform:scale(1.02)}.ludeo-player.lp-is-ending .lp-stream-video{filter:var(--lp-blur-outro);transform:scale(1.1);transition:filter 1.2s ease,transform 1.2s ease}.ludeo-player .lp-immersive{position:fixed;inset:0;z-index:calc(var(--lp-z) + 2);pointer-events:none}.ludeo-player .lp-immersive>*{pointer-events:auto}html:has(.ludeo-player :is(.lp-immersive,.lp-gameover,.lp-carry)){overflow:hidden}@media(min-width:2560px)and (min-height:1440px){.ludeo-player :is(.lp-immersive,.lp-gameover,.lp-carry,.lp-toast){--lp-zoom: 1.3333}}@media(min-width:3840px)and (min-height:2160px){.ludeo-player :is(.lp-immersive,.lp-gameover,.lp-carry,.lp-toast){--lp-zoom: 2}}.ludeo-player :is(.lp-immersive,.lp-gameover,.lp-carry,.lp-toast){zoom:var(--lp-zoom)}.ludeo-player .lp-countdown{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border:none;background:#00000080;cursor:pointer}.ludeo-player .lp-countdown-number{font-size:clamp(72px,12vmin / var(--lp-zoom),120px);font-weight:700;line-height:1;letter-spacing:.06em;text-shadow:0 2px 22px rgba(0,0,0,.7);animation:lp-count 1s ease both}.ludeo-player .lp-countdown-hint{font-size:clamp(18px,2.6vmin / var(--lp-zoom),26px);font-weight:600;letter-spacing:.42em;text-indent:.42em;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.7);animation:lp-fade-in .4s ease .3s both}.ludeo-player .lp-hud{position:fixed;left:16px;top:14px;min-width:232px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#08080bad;cursor:move;touch-action:none;user-select:none;transition:opacity .3s ease,transform .36s cubic-bezier(.2,.7,.2,1),left .35s cubic-bezier(.2,.7,.2,1),top .35s cubic-bezier(.2,.7,.2,1)}.ludeo-player .lp-hud.lp-dragging{cursor:grabbing;transition:opacity .3s ease}.ludeo-player .lp-immersive[data-prompt=fullscreen] .lp-hud{opacity:0;transform:translateY(-10px);pointer-events:none}.ludeo-player .lp-immersive[data-phase=paused] .lp-hud{z-index:1}.ludeo-player .lp-hud-title{margin-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffffff8c}.ludeo-player .lp-obj-list{display:flex;flex-direction:column;gap:6px;width:100%;list-style:none}.ludeo-player .lp-obj{display:flex;flex-direction:column;gap:5px}.ludeo-player .lp-obj-row{display:flex;align-items:center;gap:9px}.ludeo-player .lp-obj-row{transform-origin:0 50%}.ludeo-player .lp-obj-check{flex:none;width:15px;height:15px;display:grid;place-items:center}.ludeo-player .lp-obj-check svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.ludeo-player .lp-obj-check .lp-icon-done{stroke:var(--lp-good)}.ludeo-player .lp-obj-check .lp-icon-failed{stroke:var(--lp-bad)}.ludeo-player .lp-obj-name{flex:1;font-size:14px;font-weight:500;letter-spacing:.02em;color:#ffffffeb;white-space:nowrap;transition:color .35s ease}.ludeo-player .lp-obj-name.lp-done{text-decoration:line-through;color:var(--lp-panel-mid)}.ludeo-player .lp-obj--failed .lp-obj-name{color:var(--lp-bad-text)}.ludeo-player .lp-obj-goal{flex:none;margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:#fff}.ludeo-player .lp-obj-goal.lp-danger{color:var(--lp-danger)}.ludeo-player .lp-obj-bar{position:relative;display:block;height:3px;margin-left:24px;border-radius:2px;background:#ffffff24;overflow:hidden}.ludeo-player .lp-obj-bar>i{position:absolute;inset:0 auto 0 0;border-radius:2px;background:#fff;transition:width .6s var(--lp-ease-fill)}.ludeo-player .lp-obj--done .lp-obj-bar>i{background:var(--lp-good)}.ludeo-player .lp-pulse{animation:lp-pulse .6s var(--lp-ease-fill)}.ludeo-player .lp-esc{position:fixed;left:50%;bottom:30px;transform:translate(-50%);color:#ffffffc7;pointer-events:none;animation:lp-fade-out .45s ease 3.5s forwards}.ludeo-player .lp-key{min-width:34px;height:22px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:6px;background:#ffffff24;box-shadow:inset 0 -1px #00000059;font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff}.ludeo-player .lp-net-warning,.ludeo-player .lp-toast{position:fixed;left:50%;top:60px;transform:translate(-50%);padding:8px 16px;border-radius:999px;background:#0e0f14db;font-size:14px;font-weight:600;white-space:nowrap;pointer-events:none;animation:lp-fade-in .48s ease both}.ludeo-player .lp-net-warning--fair{color:#ffb257}.ludeo-player .lp-net-warning--poor{color:var(--lp-bad-text)}.ludeo-player .lp-toast{z-index:calc(var(--lp-z) + 10);top:auto;bottom:40px;color:#fff;animation:lp-toast 3s ease forwards}.ludeo-player .lp-result{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none}.ludeo-player .lp-result-line,.ludeo-player .lp-kicker{font-weight:600;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase}.ludeo-player .lp-result-line{font-size:clamp(27px,3.9vmin / var(--lp-zoom),39px);color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.7);animation:lp-end-fade 1.2s ease both}.ludeo-player .lp-kicker{font-size:clamp(12px,1.6vmin / var(--lp-zoom),16px);color:var(--lp-panel-mid)}.ludeo-player .lp-btn{height:48px;padding:0 30px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;background:#fff;color:#0c0c10;font-size:14px;font-weight:700;cursor:pointer;transition:transform .15s var(--lp-ease-fill),background .2s ease,border-color .2s ease}.ludeo-player .lp-btn:hover{transform:scale(1.015)}.ludeo-player .lp-btn--ghost{border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.ludeo-player .lp-btn--ghost:hover{border-color:#fff;background:#ffffff1a}.ludeo-player .lp-modal-veil{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:radial-gradient(130% 95% at 50% 42%,#0606096b,#060609db)}.ludeo-player .lp-modal{width:min(520px,100%);padding:28px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--lp-panel-line);border-radius:16px;background:var(--lp-card)}.ludeo-player .lp-modal-head{display:flex;align-items:center;gap:18px}.ludeo-player .lp-modal-icon{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%}.ludeo-player .lp-modal-icon--danger{color:var(--lp-danger);background:color-mix(in oklch,var(--lp-danger) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--lp-danger) 35%,transparent)}.ludeo-player .lp-modal-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.ludeo-player .lp-modal-title{font-size:26px;font-weight:700}.ludeo-player .lp-modal-body{font-size:16px;line-height:1.4;color:#ffffffd1}.ludeo-player .lp-modal-tips summary{cursor:pointer;font-weight:600}.ludeo-player .lp-modal-tips ul{margin-top:8px;padding-left:18px;display:grid;gap:6px;color:var(--lp-panel-mid)}.ludeo-player .lp-modal-actions{display:flex;justify-content:center;gap:12px}.ludeo-player .lp-pause{position:fixed;inset:0}.ludeo-player .lp-pause-veil{position:fixed;inset:0;background:radial-gradient(130% 95% at 50% 42%,#0606096b,#060609db);animation:lp-fade-in .32s ease both}.ludeo-player .lp-pause-bar{position:fixed;left:50%;top:46px;width:calc(100vw / var(--lp-zoom) - 80px);transform:translate(-50%);display:flex;align-items:center;justify-content:space-between;gap:24px;animation:lp-drop-in .42s cubic-bezier(.2,.7,.2,1) both}.ludeo-player .lp-pause-title{font-size:40px;font-weight:500;line-height:1;letter-spacing:-.4px;text-shadow:0 2px 18px rgba(0,0,0,.45)}.ludeo-player .lp-pause-actions{flex:none;display:flex;gap:14px}.ludeo-player .lp-cards{position:fixed;left:0;right:0;bottom:16px;z-index:6;width:min(1180px,calc(100vw / var(--lp-zoom) - 80px));margin-inline:auto;display:flex;align-items:stretch;gap:clamp(14px,1.6vw / var(--lp-zoom),26px)}.ludeo-player .lp-scrim{position:fixed;inset:0;z-index:-1;background:#06070a57;opacity:0;pointer-events:none;transition:opacity .34s ease}.ludeo-player .lp-scrim.lp-on{opacity:1}.ludeo-player .lp-card{position:relative;flex:1 1 0;min-width:0;min-height:146px;animation:lp-rise .5s cubic-bezier(.2,.7,.2,1) both}.ludeo-player .lp-card:nth-child(2){animation-delay:.04s}.ludeo-player .lp-card:nth-child(3){animation-delay:.1s}.ludeo-player .lp-card:nth-child(4){animation-delay:.16s}.ludeo-player .lp-card:nth-child(5){animation-delay:.22s}.ludeo-player .lp-drawer{position:absolute;left:0;right:0;bottom:0;height:100%;max-height:100%;padding:14px 20px;display:flex;flex-direction:column;gap:8px;overflow:hidden;border-radius:16px;background:var(--lp-card);transition:height .46s var(--lp-ease-drawer),max-height .46s var(--lp-ease-drawer),left .46s var(--lp-ease-drawer),right .46s var(--lp-ease-drawer),transform .34s cubic-bezier(.22,.61,.36,1),background-color .28s ease,box-shadow .34s ease}.ludeo-player .lp-card:not(.lp-open) .lp-drawer{cursor:pointer}.ludeo-player .lp-card:not(.lp-open) .lp-drawer:hover{transform:translateY(-6px);background:#1b1b20;box-shadow:0 14px 30px #0006}.ludeo-player .lp-card.lp-open{z-index:2}.ludeo-player .lp-card.lp-open .lp-drawer{box-shadow:0 0 0 1px #ffffff0f,0 -12px 40px #00000073,0 24px 60px #0000008c}.ludeo-player .lp-card.lp-open .lp-drawer{--lp-spread: min( 0px, calc(100% - min(420px, calc(100vw / var(--lp-zoom) - 32px))) );left:calc(var(--lp-spread) / 2);right:calc(var(--lp-spread) / 2);height:min(470px,calc(100vh / var(--lp-zoom) - 250px));max-height:min(470px,calc(100vh / var(--lp-zoom) - 250px));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}.ludeo-player .lp-card:nth-child(2).lp-open .lp-drawer{left:0;right:var(--lp-spread)}.ludeo-player .lp-card:last-child.lp-open .lp-drawer{left:var(--lp-spread);right:0}.ludeo-player .lp-drawer-head{display:flex;align-items:center;gap:7px;padding:0;border:none;background:none;text-align:left;cursor:pointer}.ludeo-player .lp-drawer-body{min-height:0}.ludeo-player .lp-card:not(.lp-open) .lp-drawer-body{mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent)}.ludeo-player .lp-card-title{font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--lp-panel-mid)}.ludeo-player .lp-card-text,.ludeo-player .lp-card-value{font-size:16px;font-weight:500;line-height:1.4;color:var(--lp-ink)}.ludeo-player a.lp-card-value{text-decoration:none}.ludeo-player a.lp-card-value:hover{text-decoration:underline}.ludeo-player .lp-card:not(.lp-open) .lp-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.ludeo-player .lp-cards .lp-obj-name{font-size:13px;color:var(--lp-panel-mid)}.ludeo-player .lp-cards .lp-obj-list{gap:3px}.ludeo-player .lp-about-title{font-size:18px;font-weight:600;line-height:1.2}.ludeo-player .lp-creator{display:flex;align-items:center;gap:10px;margin:8px 0 10px}.ludeo-player .lp-creator-avatar{width:26px;height:26px;flex:none;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-size:10px;font-weight:700}.ludeo-player .lp-tips{margin-top:15px}.ludeo-player .lp-tips ul{margin-top:9px;display:flex;flex-direction:column;gap:7px;list-style:none}.ludeo-player .lp-tips li{position:relative;padding-left:14px;font-size:13px;font-weight:500;line-height:1.45;color:var(--lp-panel-mid)}.ludeo-player .lp-tips li:before{content:"-";position:absolute;left:0}.ludeo-player .lp-ctrl-list{display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:6px;align-items:center}.ludeo-player .lp-ctrl-segment,.ludeo-player .lp-ctrl-group{display:contents}.ludeo-player .lp-ctrl-section{grid-column:1 / -1;margin:7px 0 1px;font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#ffffff6b}.ludeo-player .lp-ctrl-label{font-size:12px;font-weight:500;line-height:1.2;color:#fff}.ludeo-player .lp-ctrl-keys{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.ludeo-player .lp-card:not(.lp-open) .lp-ctrl-keys{gap:4px}.ludeo-player .lp-card:not(.lp-open) .lp-cap{min-width:26px;height:26px;padding:0 6px;border-radius:7px;font-size:10px}.ludeo-player .lp-card:not(.lp-open) .lp-cap svg{width:13px;height:13px}.ludeo-player .lp-ctrl-key{display:inline-flex;align-items:center;gap:4px}.ludeo-player .lp-ctrl-plus,.ludeo-player .lp-ctrl-sep{font-size:11px;color:#ffffff80}.ludeo-player .lp-ctrl-sep{padding:0 1px;font-weight:600;letter-spacing:.06em}.ludeo-player .lp-cap{min-width:32px;height:32px;padding:0 8px;display:grid;place-items:center;border-radius:8px;background:#ffffff0f;font-size:11px;font-weight:600;letter-spacing:.06em;color:#fff}.ludeo-player .lp-cap svg{width:15px;height:15px;fill:currentColor}.ludeo-player .lp-ctrl-keys .lp-cap.lp-cap-face{padding:0;aspect-ratio:1;border:1.5px solid color-mix(in srgb,var(--face) 55%,transparent);border-radius:50%;background:radial-gradient(circle at 50% 35%,#ffffff14,#00000040);box-shadow:inset 0 -2px #00000059,0 2px 8px color-mix(in srgb,var(--face) 22%,transparent);font-size:13px;font-weight:700;letter-spacing:0;color:var(--face)}.ludeo-player .lp-ctrl-keys .lp-cap.lp-cap-face svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.ludeo-player .lp-cap-labeled{display:inline-flex;align-items:center;gap:4px}.ludeo-player .lp-cap-label{font-size:9px;letter-spacing:.14em}.ludeo-player .lp-ctrl-slider-title{grid-column:1 / -1}.ludeo-player .lp-ctrl-slider{grid-column:1 / -1;display:flex;flex-direction:column;margin-bottom:10px}.ludeo-player .lp-card:not(.lp-open) :is(.lp-ctrl-slider,.lp-ctrl-slider-title,.lp-ctrl-mode){display:none}.ludeo-player .lp-range{width:100%;height:22px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}.ludeo-player .lp-range::-webkit-slider-runnable-track{height:2px;border-radius:999px;background:linear-gradient(to right,rgba(255,255,255,.85) var(--p, 50%),rgba(255,255,255,.18) var(--p, 50%))}.ludeo-player .lp-range::-moz-range-track{height:2px;border-radius:999px;background:linear-gradient(to right,rgba(255,255,255,.85) var(--p, 50%),rgba(255,255,255,.18) var(--p, 50%))}.ludeo-player .lp-range::-webkit-slider-thumb{width:10px;height:18px;margin-top:-8px;appearance:none;-webkit-appearance:none;border:none;border-radius:4px;background:#fff;box-shadow:0 1px 4px #00000080}.ludeo-player .lp-range::-moz-range-thumb{width:10px;height:18px;border:none;border-radius:4px;background:#fff;box-shadow:0 1px 4px #00000080}.ludeo-player .lp-ctrl-scale{position:relative;height:26px;margin-top:5px}.ludeo-player .lp-ctrl-tick{position:absolute;top:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;border:none;background:none;cursor:pointer}.ludeo-player .lp-ctrl-tick:nth-child(1){left:0;align-items:flex-start}.ludeo-player .lp-ctrl-tick:nth-child(2){left:28.6%;transform:translate(-50%)}.ludeo-player .lp-ctrl-tick:nth-child(3){right:0;align-items:flex-end}.ludeo-player .lp-ctrl-tick i{display:block;width:3px;height:3px;border-radius:50%;background:#ffffff52}.ludeo-player .lp-ctrl-tick span{font-size:11px;color:#ffffff8c;white-space:nowrap}.ludeo-player .lp-ctrl-tick.lp-sel i{background:#fff}.ludeo-player .lp-ctrl-tick.lp-sel span{color:#fff}.ludeo-player .lp-ctrl-mode{position:relative;margin-bottom:14px;padding:2px;display:flex;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:#ffffff14}.ludeo-player .lp-ctrl-mode:before{content:"";position:absolute;top:2px;left:2px;width:calc((100% - 4px) / 3);height:calc(100% - 4px);border-radius:7px;background:#fff;transition:transform .42s cubic-bezier(.34,1.32,.5,1)}.ludeo-player .lp-ctrl-mode[data-mode=xbox]:before{transform:translate(100%)}.ludeo-player .lp-ctrl-mode[data-mode=playstation]:before{transform:translate(200%)}.ludeo-player .lp-cm-opt{position:relative;z-index:1;flex:1;height:24px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;background:none;font-size:11px;font-weight:600;letter-spacing:.04em;color:#ffffff8c;cursor:pointer;transition:color .3s ease}.ludeo-player .lp-cm-opt svg{width:15px;height:15px}.ludeo-player .lp-cm-opt.lp-on{color:#16161a}.ludeo-player .lp-card--store{padding:14px 20px;display:flex;flex-direction:column;gap:2px;border-radius:16px;background:var(--lp-card)}.ludeo-player .lp-buy-title{overflow:hidden;font-size:16px;font-weight:600;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}.ludeo-player .lp-buy-sub{font-size:13px;font-weight:500;color:var(--lp-panel-mid)}.ludeo-player .lp-buy-stores{margin-top:10px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}.ludeo-player .lp-buy-store{min-width:0;height:44px;padding:0 8px;border:0;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;background:#ffffff12;color:var(--lp-ink);font-size:14px;font-weight:600;text-decoration:none;transition:background .18s ease}.ludeo-player .lp-buy-store:hover{background:#ffffff1f}.ludeo-player .lp-buy-store img{flex:none;width:22px;height:22px;object-fit:contain;filter:brightness(0) invert(1)}.ludeo-player .lp-buy-store span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ludeo-player .lp-lb-head{display:flex;align-items:center;gap:6px}.ludeo-player .lp-lb-trophy{width:12px;height:12px;flex:none;fill:currentColor;opacity:.85}.ludeo-player .lp-podium{margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;list-style:none}.ludeo-player .lp-bar{display:flex;align-items:center;gap:6px}.ludeo-player .lp-bar-meta{flex:none;width:74px;min-width:0;display:flex;align-items:baseline;gap:6px}.ludeo-player .lp-card.lp-open .lp-bar-meta{width:140px}.ludeo-player .lp-bar-name{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.ludeo-player .lp-bar-score{font-size:11px;font-weight:700;color:#ffffffd9}.ludeo-player .lp-bar-pill{height:28px;padding:2px;display:flex;align-items:center;justify-content:flex-end;border-radius:999px}.ludeo-player .lp-bar-avatar{width:24px;height:24px;flex:none;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-size:9px;font-weight:700}.ludeo-player .lp-bar-rank{flex:none;min-width:14px;font-size:13px;font-weight:600;color:#ffffff8c}.ludeo-player .lp-bar-1 .lp-bar-pill{flex:1 1 auto;background:linear-gradient(to right,#0000,#e8c235 210px)}.ludeo-player .lp-bar-2 .lp-bar-pill{flex:.72 1 auto;background:linear-gradient(to right,#0000,#c9c9ce 210px)}.ludeo-player .lp-bar-3 .lp-bar-pill{flex:.5 1 auto;background:linear-gradient(to right,#0000,#cf9d6e 210px)}.ludeo-player .lp-bar-4 .lp-bar-pill{flex:.4 1 auto;background:linear-gradient(to right,#fff0,#ffffff42)}.ludeo-player .lp-bar.lp-me .lp-bar-pill{background:linear-gradient(to right,#0000,#ffba00 210px)}.ludeo-player .lp-score-tip{position:fixed;z-index:calc(var(--lp-z) + 10);transform:translate(-50%,-100%);display:flex;flex-direction:column;gap:4px;min-width:170px;padding:8px 12px;border:1px solid #2e2e33;border-radius:8px;background:#1c1c20;box-shadow:0 6px 18px #00000080;text-align:left;pointer-events:none}.ludeo-player .lp-score-tip-row{display:flex;justify-content:space-between;gap:16px;font-size:14px;font-weight:600}.ludeo-player .lp-score-tip-metric{color:var(--lp-panel-mid);white-space:nowrap}.ludeo-player .lp-score-tip-detail{margin-left:8px;color:#6f6f72;font-weight:500;font-variant-numeric:tabular-nums}.ludeo-player .lp-score-tip-points{color:#fff;font-variant-numeric:tabular-nums}.ludeo-player .lp-bar.lp-me :is(.lp-bar-name,.lp-bar-score,.lp-bar-rank){color:#ffba00}.ludeo-player .lp-bar-claim{margin-top:10px;align-self:flex-start}.ludeo-player .lp-card:not(.lp-open) .lp-bar-claim{visibility:hidden}.ludeo-player .lp-bar-1 .lp-bar-rank{color:#f0b429}.ludeo-player .lp-bar-2 .lp-bar-rank{color:#c9c9ce}.ludeo-player .lp-bar-3 .lp-bar-rank{color:#cf9d6e}.ludeo-player .lp-lb-list{position:relative;min-height:0;margin:0;padding:10px 0;scrollbar-gutter:stable both-edges;display:flex;flex-direction:column;gap:calc(.4vmin / var(--lp-zoom));list-style:none;overflow-y:auto;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}.ludeo-player .lp-lb-row{display:grid;grid-template-columns:2.4ch 30px 1fr;align-items:center;gap:calc(1.6vmin / var(--lp-zoom));padding:calc(.5vmin / var(--lp-zoom)) calc(.9vmin / var(--lp-zoom));border-radius:8px;font-size:16px;font-weight:500;color:var(--lp-ink);animation:lp-rise .5s ease-out var(--delay, 0s) both;transition:background-color .2s ease}.ludeo-player .lp-lb-row:hover{background:#f0f0f30f}.ludeo-player .lp-lb-row.lp-me{background:#f0f0f312}.ludeo-player .lp-lb-rank{text-align:center;color:var(--lp-panel-mid);font-variant-numeric:tabular-nums}.ludeo-player .lp-lb-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#f0f0f31f;font-size:11px;font-weight:700;letter-spacing:.05em;color:#fff;pointer-events:none}.ludeo-player .lp-me span.lp-lb-avatar{background:var(--lp-ink);color:#0c0c10}.ludeo-player .lp-lb-body{min-width:0;display:flex;flex-direction:column;gap:5px}.ludeo-player .lp-lb-line{display:flex;align-items:baseline;justify-content:space-between;gap:calc(1.2vmin / var(--lp-zoom))}.ludeo-player .lp-lb-name{min-width:0;display:inline-flex;align-items:center;gap:calc(.9vmin / var(--lp-zoom))}.ludeo-player .lp-lb-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ludeo-player .lp-lb-score{flex:none;font-weight:700;font-variant-numeric:tabular-nums}.ludeo-player .lp-me .lp-lb-rank,.ludeo-player .lp-me .lp-lb-name{color:var(--lp-ink);font-weight:700}.ludeo-player .lp-me .lp-lb-score{font-size:1.25em;line-height:1;text-shadow:0 0 14px rgba(255,255,255,.6)}.ludeo-player .lp-you{flex:none;padding:2px 7px;border-radius:999px;background:var(--lp-ink);color:#0c0c10;font-size:10px;font-weight:700;letter-spacing:.1em}.ludeo-player .lp-lb-bar{position:relative;display:block;height:12px;background:radial-gradient(circle,rgba(255,255,255,.24) .8px,transparent 1.1px) 0 50% / calc(100% / 52) 100% repeat-x}.ludeo-player .lp-lb-bar>i{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.85) .8px,transparent 1.1px) 0 50% / calc(100% / 52) 100% repeat-x;animation:lp-lb-fill .9s var(--lp-ease-fill) calc(var(--delay, 0s) + .3s) both}@keyframes lp-lb-fill{0%{clip-path:inset(0 100% 0 0)}}.ludeo-player .lp-claim{position:relative;height:26px;padding:0 12px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:#131313;color:#fff;font-size:11px;font-weight:700;cursor:pointer;animation:lp-claim-glow 1.5s ease-in-out infinite}.ludeo-player .lp-gameover{position:fixed;inset:0;z-index:calc(var(--lp-z) + 3);overflow:hidden;user-select:none;animation:lp-fade-in .7s ease both}.ludeo-player .lp-go-grain{position:absolute;inset:0;z-index:30;opacity:.55;mix-blend-mode:screen;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.ludeo-player :is(.lp-go-ring,.lp-go-cloud){position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.ludeo-player .lp-go-ring{z-index:2}.ludeo-player .lp-go-cloud{z-index:3;transition:opacity .6s ease}.ludeo-player .lp-go-cloud.lp-hidden{opacity:0}.ludeo-player .lp-go-top{position:absolute;top:max(3.4vh / var(--lp-zoom),18px);left:max(3.5vw / var(--lp-zoom),20px);right:max(3.5vw / var(--lp-zoom),20px);z-index:5;display:flex;align-items:center;justify-content:space-between}.ludeo-player .lp-go-logo{max-height:52px;width:auto}.ludeo-player .lp-go-game{font-size:22px;font-weight:700}.ludeo-player .lp-go-close{width:34px;height:34px;padding:0;display:grid;place-items:center;border:none;border-radius:50%;background:#f0f0f31a;color:#fff;font-size:16px;cursor:pointer}.ludeo-player .lp-go-close:hover{background:#f0f0f338}.ludeo-player .lp-go-stage{position:absolute;inset:0;z-index:4;padding-bottom:calc(20vh / var(--lp-zoom));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2.4vmin / var(--lp-zoom));text-align:center;pointer-events:none}.ludeo-player .lp-beat--final .lp-go-stage{justify-content:flex-start;padding-top:clamp(68px,12vh / var(--lp-zoom),130px);padding-bottom:calc(var(--lp-go-cards, 146px) + 108px)}.ludeo-player .lp-beat--leaderboard .lp-go-stage{padding:max(90px,12vh / var(--lp-zoom)) 0}.ludeo-player .lp-beat--leaderboard .lp-go-tap{bottom:calc(4vh / var(--lp-zoom))}.ludeo-player .lp-go-kicker{position:relative;font-size:clamp(14px,2vmin / var(--lp-zoom),20px);text-transform:none}.ludeo-player .lp-go-kicker:before{content:attr(data-text);position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,#f4f4f7 50%,transparent 60%) 100% 0 / 400% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}@media(prefers-reduced-motion:no-preference){.ludeo-player .lp-go-kicker:before{animation:lp-shimmer 2.6s linear infinite}}@keyframes lp-shimmer{to{background-position:0% 0}}.ludeo-player .lp-go-score{font-size:clamp(40px,9vmin / var(--lp-zoom),110px);font-weight:700;line-height:1;color:transparent;-webkit-text-fill-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.05 0 0 0 0 0.06 1 0 0 0 -0.55'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"),linear-gradient(180deg,#fff,#cfcfd6);background-size:140px 140px,100% 100%;-webkit-background-clip:text;background-clip:text}.ludeo-player .lp-go-sub{margin-top:calc(-1vmin / var(--lp-zoom));font-size:15px;color:#ffffffb8}.ludeo-player .lp-go-words{font-size:clamp(40px,6.4vmin / var(--lp-zoom),68px);font-weight:800;padding-block:6px}.ludeo-player .lp-go-short{color:#ffba00;font-weight:700}.ludeo-player .lp-go-icon{width:clamp(120px,26vmin / var(--lp-zoom),260px);height:clamp(120px,26vmin / var(--lp-zoom),260px)}.ludeo-player .lp-go-head{display:flex;flex-direction:column;align-items:center;gap:calc(2.4vmin / var(--lp-zoom))}.ludeo-player .lp-beat--score .lp-go-stage{display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;padding-bottom:0}.ludeo-player .lp-beat--score .lp-go-head{align-self:end;padding-bottom:calc(2.4vmin / var(--lp-zoom))}.ludeo-player .lp-go-icon{position:relative}.ludeo-player .lp-go-icon--flip{padding:0;border:none;border-radius:50%;background:none;color:inherit;font:inherit;cursor:pointer;pointer-events:auto}.ludeo-player .lp-go-icon--flip:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:6px}.ludeo-player .lp-go-flipview{position:absolute;top:0;left:50%;transform:translate(-50%)}.ludeo-player :is(.lp-beat--score,.lp-beat--final) .lp-go-icon{--lp-go-icon: clamp( 180px, min( 39vmin / var(--lp-zoom), 100vh / var(--lp-zoom) - 520px, 68vh / var(--lp-zoom) - 295px ), 390px );width:var(--lp-go-icon);height:var(--lp-go-icon)}.ludeo-player .lp-go-objectives{width:min(72vw / var(--lp-zoom),460px);display:flex;flex-direction:column;gap:calc(3.4vmin / var(--lp-zoom));text-align:left}.ludeo-player .lp-go-title{font-size:clamp(14px,2vmin / var(--lp-zoom),20px);font-weight:600;letter-spacing:.42em;text-indent:.42em;color:var(--lp-ink)}.ludeo-player .lp-go-item{display:flex;flex-direction:column;gap:calc(1.4vmin / var(--lp-zoom))}.ludeo-player .lp-go-row{display:flex;align-items:baseline;justify-content:space-between;gap:calc(1.4vmin / var(--lp-zoom));font-size:clamp(14px,2vmin / var(--lp-zoom),20px);font-weight:600;color:var(--lp-ink)}.ludeo-player .lp-go-row>span:first-child{letter-spacing:.12em}.ludeo-player .lp-go-val{flex:none;line-height:1;font-variant-numeric:tabular-nums}.ludeo-player .lp-go-objectives.lp-compact{gap:calc(1.2vmin / var(--lp-zoom))}.ludeo-player .lp-go-objectives.lp-compact .lp-go-item{gap:0}.ludeo-player .lp-go-objectives.lp-compact .lp-go-row{font-size:15px}.ludeo-player .lp-go-objectives.lp-compact .lp-go-bar{height:14px}.ludeo-player .lp-go-objectives.lp-compact .lp-go-total{padding-top:8px}.ludeo-player .lp-go-flipview .lp-go-objectives.lp-many{width:min(90vw / var(--lp-zoom),820px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--lp-rows),auto);grid-auto-flow:column;column-gap:48px}.ludeo-player .lp-go-row>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ludeo-player .lp-go-flipview .lp-go-objectives{gap:calc(.5vmin / var(--lp-zoom))}.ludeo-player .lp-go-flipview .lp-go-objectives .lp-go-bar{height:10px}.ludeo-player .lp-go-pts{display:inline-block;min-width:6ch;margin-left:12px;text-align:right;color:#ffba00}.ludeo-player .lp-go-detail{font-weight:500;color:var(--lp-panel-mid)}.ludeo-player .lp-go-total{align-items:center;margin-top:2px;padding-top:14px;border-top:1px solid var(--lp-panel-line)}.ludeo-player .lp-go-sum{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}.ludeo-player .lp-go-row.lp-failed .lp-go-val{color:var(--lp-bad-text)}.ludeo-player .lp-go-bar{position:relative;display:block;height:30px}.ludeo-player .lp-go-bar>i{position:absolute;top:50%;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:opacity .6s ease,box-shadow .6s ease}.ludeo-player .lp-go-bar>i.lp-on{box-shadow:0 0 5px #ffffff73}.ludeo-player .lp-go-bar.lp-failed>i.lp-on{background:var(--lp-bad);box-shadow:none}@media(prefers-reduced-motion:reduce){.ludeo-player .lp-go-bar>i{transition:none}}.ludeo-player .lp-go-panel{width:min(86vw / var(--lp-zoom),560px);max-height:100%;display:flex;flex-direction:column;text-align:left;pointer-events:auto}.ludeo-player .lp-go-panel .lp-kicker{margin-bottom:calc(.6vmin / var(--lp-zoom));text-align:center}.ludeo-player .lp-go-tap{position:absolute;left:50%;bottom:calc(24vh / var(--lp-zoom));z-index:6;transform:translate(-50%);padding:8px 14px;border:none;background:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff6;cursor:pointer}.ludeo-player .lp-go-tap:hover{color:#ffffffbf}.ludeo-player .lp-go-tap:is(:focus,:focus-visible){outline:none}.ludeo-player .lp-go-cta{position:absolute;left:50%;bottom:26px;z-index:6;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}.ludeo-player .lp-beat--final .lp-go-cta{bottom:calc(16px + var(--lp-go-cards, 146px) + 28px)}.ludeo-player .lp-go-cta .lp-pill:not(.lp-pill--loading){box-shadow:0 0 34px #ffffff59}.ludeo-player .lp-go-share{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:0;border-radius:999px;background:none;color:#ffffffd1;font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 10px rgba(0,0,0,.6);cursor:pointer;transition:color .2s,background .2s}.ludeo-player .lp-go-share-face{display:inline-flex;align-items:center;gap:6px;animation:lp-fade-in .3s ease-out both}.ludeo-player .lp-go-share-face--out{animation:lp-fade-out .3s ease-in both}.ludeo-player .lp-go-share-spin{transform-origin:center;animation:lp-spin .8s linear infinite}.ludeo-player .lp-go-share:hover,.ludeo-player .lp-go-share:focus-visible{color:#fff;background:#ffffff1f}.ludeo-player .lp-pill--again .lp-mark{width:28px;height:28px}.ludeo-player .lp-rise{animation:lp-rise .7s ease-out both}.ludeo-player .lp-next{position:absolute;top:96px;bottom:200px;right:max(3.5vw / var(--lp-zoom),20px);z-index:6;width:min(390px,34vw / var(--lp-zoom));display:flex;flex-direction:column;justify-content:center;pointer-events:none}.ludeo-player .lp-fb{position:absolute;left:var(--lp-go-cards-left, 20px);bottom:calc(16px + var(--lp-go-cards, 146px) + 28px);z-index:7;width:300px;padding:18px 20px 20px;border-radius:20px;background:#0e0f148c;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 24px 60px #00000073;text-align:center;color:var(--lp-ink);animation:lp-rise .5s ease-out .6s both}.ludeo-player .lp-fb--out{animation:lp-fb-out .5s ease-in both}.ludeo-player .lp-fb--thanks{animation:lp-fb-out .6s ease-in 1.8s both}.ludeo-player .lp-fb-thanks{padding:4px 0;animation:lp-rise .4s ease-out both}@keyframes lp-fb-out{to{opacity:0;transform:translateY(14px)}}.ludeo-player .lp-fb-label{margin:0;font-size:15px;font-weight:600;letter-spacing:.06em}.ludeo-player .lp-fb-ring{position:absolute;top:12px;left:12px;width:18px;height:18px;fill:none;stroke-width:2.5;transform:rotate(-90deg)}.ludeo-player .lp-fb-ring circle:first-child{stroke:#ffffff2e}.ludeo-player .lp-fb-ring circle:last-child{stroke:var(--lp-ink);stroke-linecap:round;stroke-dasharray:1;animation:lp-fb-count 9s linear both}.ludeo-player .lp-fb:is(:hover,:focus-within) .lp-fb-ring circle:last-child{animation-play-state:paused}@keyframes lp-fb-count{0%{stroke-dashoffset:0}to{stroke-dashoffset:1}}.ludeo-player .lp-fb-close{position:absolute;top:8px;right:10px;width:26px;height:26px;border:0;border-radius:50%;background:none;color:var(--lp-panel-mid);font-size:13px;cursor:pointer}.ludeo-player .lp-fb-close:hover{color:var(--lp-ink);background:#ffffff14}.ludeo-player .lp-fb-stars{margin-top:12px;display:flex;justify-content:center;gap:6px}.ludeo-player .lp-fb-star{padding:2px;border:0;background:none;color:#ffffff8c;cursor:pointer;transition:color .15s ease,transform .15s ease,filter .2s ease}.ludeo-player .lp-fb-star svg{display:block;width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}.ludeo-player .lp-fb-star.lp-on{color:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.55))}.ludeo-player .lp-fb-star.lp-on svg{fill:currentColor}.ludeo-player .lp-fb-star:hover{transform:scale(1.1)}.ludeo-player .lp-fb-reasons{margin-top:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.ludeo-player .lp-fb-reason{height:30px;padding:0 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:#ffffff0a;color:var(--lp-ink);font:600 12px var(--lp-font);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.ludeo-player .lp-fb-reason:hover{border-color:#ffffff80;background:#ffffff1f}@media(max-width:899px){.ludeo-player .lp-fb{top:96px;bottom:auto}}@media(max-height:559px){.ludeo-player .lp-fb{top:auto;bottom:20px}}@media(prefers-reduced-motion:reduce){.ludeo-player .lp-fb-ring circle:last-child{animation-duration:9s!important}}.ludeo-player .lp-next-panel{padding:18px;border-radius:20px;background:#0e0f148c;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 24px 60px #00000073;text-align:left;pointer-events:auto}.ludeo-player .lp-next-heading{margin:0 0 13px 8px;font-size:14px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#ffffff9e}.ludeo-player .lp-next ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}.ludeo-player .lp-next-item{width:100%;margin:0;padding:8px;display:flex;align-items:center;gap:16px;border:none;border-radius:16px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .2s ease}.ludeo-player .lp-next-item:hover{background:#ffffff14}.ludeo-player .lp-next-item:focus-visible{outline:2px solid #fff;outline-offset:2px}.ludeo-player .lp-next-thumb{position:relative;flex:none;width:146px;aspect-ratio:16 / 9;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:#ffffff0f}.ludeo-player .lp-next-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .2s ease}.ludeo-player .lp-next-thumb .lp-mark{position:relative;width:26px;height:26px;color:#fff;opacity:0;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));transition:opacity .2s ease}.ludeo-player .lp-next-item:is(:hover,:focus-visible) .lp-next-thumb img{filter:brightness(.6)}.ludeo-player .lp-next-item:is(:hover,:focus-visible) .lp-next-thumb .lp-mark{opacity:1}.ludeo-player .lp-next-text{min-width:0;display:flex;flex-direction:column;gap:4px}.ludeo-player .lp-next-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:18px;font-weight:600;line-height:1.25;color:#fff}.ludeo-player .lp-next-by{overflow:hidden;font-size:16px;color:#fff9;white-space:nowrap;text-overflow:ellipsis}@media(max-width:899px){.ludeo-player .lp-next{display:none}}@media(max-height:559px){.ludeo-player .lp-gameover .lp-cards{display:none}.ludeo-player .lp-beat--final .lp-go-cta{top:62%;bottom:auto}.ludeo-player .lp-beat--final .lp-go-stage{justify-content:center;padding-top:0;padding-bottom:calc(12vh / var(--lp-zoom))}}.ludeo-player .lp-dev{--m-line: rgba(255, 255, 255, .08);--m-fill: rgba(255, 255, 255, .045);--m-mid: #a3a3ad;--m-tone: #a3a3ad;position:fixed;right:16px;bottom:16px;z-index:calc(var(--lp-z) + 20);display:flex;flex-direction:column;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:hidden;border:1px solid var(--m-line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 140px),#0e0e13;box-shadow:inset 0 1px #ffffff0f,0 0 0 1px #00000080,0 28px 64px -16px #000000bf;color:var(--lp-ink);font:500 13px/1.3 var(--lp-font);user-select:none}.ludeo-player .lp-dev:is([data-phase=connecting],[data-phase=queued]){--m-tone: oklch(.76 .13 245)}.ludeo-player .lp-dev[data-phase=ready]{--m-tone: var(--lp-accent)}.ludeo-player .lp-dev:is([data-phase=countdown],[data-phase=starting],[data-phase=playing]){--m-tone: var(--lp-good)}.ludeo-player .lp-dev[data-phase=paused]{--m-tone: oklch(.85 .14 90)}.ludeo-player .lp-dev:is([data-phase=ending],[data-phase=ended]){--m-tone: oklch(.76 .13 300)}.ludeo-player .lp-dev[data-phase=error]{--m-tone: var(--lp-bad)}.ludeo-player .lp-dev--collapsed{width:auto;border-radius:999px}.ludeo-player .lp-dev--docked{position:relative;top:auto;right:auto;bottom:auto;z-index:auto;width:100%;max-height:100%}.ludeo-player .lp-dev--docked.lp-dev--collapsed{border-radius:18px}.ludeo-player.lp-dev-dock{display:flex;flex-direction:column;min-height:0;max-height:100%}.ludeo-player .lp-dev--window{height:100vh;max-height:none;border:0;border-radius:0;box-shadow:none}.ludeo-player.lp-dev-window{min-height:100vh;background:#0d0d12}.ludeo-player .lp-dev-head{display:flex;align-items:center;gap:8px;padding:10px 8px 10px 10px;cursor:grab;touch-action:none}.ludeo-player .lp-dev-head:active{cursor:grabbing}.ludeo-player .lp-dev--docked .lp-dev-head{cursor:default}.ludeo-player .lp-dev svg{width:14px;height:14px;fill:currentColor;flex:none}.ludeo-player .lp-dev-grip{display:grid;color:#ffffff4d}.ludeo-player .lp-dev-mark{padding:3px 7px 2px;border-radius:6px;background:var(--lp-accent);color:#141414;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.ludeo-player .lp-dev-phase{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;white-space:nowrap}.ludeo-player .lp-dev-phase i{width:8px;height:8px;border-radius:50%;background:var(--m-tone);box-shadow:0 0 0 3px color-mix(in oklab,var(--m-tone) 22%,transparent),0 0 12px var(--m-tone)}.ludeo-player .lp-dev:is([data-phase=connecting],[data-phase=queued],[data-phase=ready],[data-phase=playing]) .lp-dev-phase i{animation:lp-dev-beat 1.6s ease-in-out infinite}@keyframes lp-dev-beat{50%{box-shadow:0 0 0 6px color-mix(in oklab,var(--m-tone) 0%,transparent),0 0 16px var(--m-tone)}}.ludeo-player .lp-dev-tools{display:flex;gap:2px;margin-left:auto}.ludeo-player .lp-dev-icon{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:9px;background:transparent;color:var(--m-mid);cursor:pointer;transition:background .15s,color .15s}.ludeo-player .lp-dev-icon:hover{background:#ffffff17;color:#fff}.ludeo-player .lp-dev-icon.lp-on{color:var(--lp-accent)}.ludeo-player .lp-dev-fold svg{transition:transform .25s var(--lp-ease-fill)}.ludeo-player .lp-dev--collapsed .lp-dev-fold svg{transform:rotate(180deg)}.ludeo-player .lp-dev-body{display:flex;flex-direction:column;gap:8px;min-height:0;padding:0 10px 10px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.ludeo-player .lp-dev-status{padding:12px 12px 14px;border:1px solid var(--m-line);border-radius:13px;background:radial-gradient(120% 160% at 0% 0%,color-mix(in oklab,var(--m-tone) 24%,transparent),transparent 62%),var(--m-fill);transition:background .4s}.ludeo-player .lp-dev-rail{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;list-style:none}.ludeo-player .lp-dev-rail li{position:relative;padding-top:9px;color:#8c8c96;font-size:9px;font-weight:700;letter-spacing:.06em;text-align:center;text-transform:uppercase;white-space:nowrap}.ludeo-player .lp-dev-rail li:before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:2px;background:#ffffff1a;transition:background .3s,box-shadow .3s}.ludeo-player .lp-dev-rail li.lp-done{color:#c4c4cc}.ludeo-player .lp-dev-rail li.lp-done:before{background:#ffffff6b}.ludeo-player .lp-dev-rail li.lp-now{color:#fff}.ludeo-player .lp-dev-rail li.lp-now:before{background:var(--m-tone);box-shadow:0 0 10px var(--m-tone)}.ludeo-player .lp-dev-rail button{width:100%;margin:-9px 0 0;padding:9px 0 0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}.ludeo-player .lp-dev-rail button:disabled{cursor:default}.ludeo-player .lp-dev-rail li:has(button:not(:disabled):hover){color:#fff}.ludeo-player .lp-dev-rail li:has(button:not(:disabled):hover):before{background:#fff9}.ludeo-player .lp-dev-rail li:has(button:focus-visible){color:#fff}.ludeo-player .lp-dev-detail{margin-top:12px;font-size:22px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.ludeo-player .lp-dev-section{padding:10px;border:1px solid rgba(255,255,255,.04);border-radius:13px;background:var(--m-fill)}.ludeo-player .lp-dev-section>header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:18px;margin-bottom:8px}.ludeo-player .lp-dev-section.lp-folded>header{margin-bottom:0}.ludeo-player .lp-dev-section-fold{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--m-mid);cursor:pointer}.ludeo-player .lp-dev-section-fold svg{width:12px;height:12px;transition:transform .25s var(--lp-ease-fill)}.ludeo-player .lp-dev-section:not(.lp-folded) .lp-dev-section-fold svg{transform:rotate(180deg)}.ludeo-player .lp-dev-section-fold:is(:hover,:focus-visible) h3{color:#fff}.ludeo-player :is(.lp-dev-section-fold,.lp-dev-rail button,.lp-dev-stop):is(:focus,:focus-visible){outline:none}.ludeo-player .lp-dev-section h3{margin:0;color:var(--m-mid);font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}.ludeo-player .lp-dev-section>header>span{color:var(--m-mid);font-size:12px;font-weight:600}.ludeo-player .lp-dev-section>.lp-dev-btn{width:100%}.ludeo-player .lp-dev-toggles{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:10px}.ludeo-player .lp-dev-actions{display:flex;flex-direction:column;gap:6px}.ludeo-player .lp-dev-section{animation:lp-dev-in .34s var(--lp-ease-fill) backwards}.ludeo-player :is(.lp-dev-section>:not(header),.lp-dev-actions>*){animation:lp-dev-fade .28s ease-out backwards}@keyframes lp-dev-in{0%{max-height:0;margin-top:-8px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}to{max-height:480px;margin-top:0;overflow:hidden;opacity:1}}@keyframes lp-dev-fade{0%{opacity:0;transform:translateY(-3px)}}.ludeo-player .lp-dev-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#ffffff0f;color:#f0f0f3;font:700 13px/1 var(--lp-font);letter-spacing:.02em;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}.ludeo-player .lp-dev-btn:hover:not(:disabled){border-color:#fff3;background:#ffffff1c}.ludeo-player .lp-dev-btn:active:not(:disabled){transform:translateY(1px)}.ludeo-player .lp-dev-btn:disabled{opacity:.38;cursor:not-allowed}.ludeo-player .lp-dev-btn--primary{border-color:transparent;background:var(--lp-accent);box-shadow:0 10px 24px -10px var(--lp-accent);color:#141414}.ludeo-player .lp-dev-btn--primary:hover:not(:disabled){border-color:transparent;background:color-mix(in oklab,var(--lp-accent) 85%,white)}.ludeo-player .lp-dev-btn--good{border-color:color-mix(in oklab,var(--lp-good) 38%,transparent);background:color-mix(in oklab,var(--lp-good) 13%,transparent);color:var(--lp-good)}.ludeo-player .lp-dev-btn--bad{border-color:color-mix(in oklab,var(--lp-bad) 38%,transparent);background:color-mix(in oklab,var(--lp-bad) 13%,transparent);color:var(--lp-bad-text)}.ludeo-player .lp-dev-btn--small{min-height:24px;padding:0 8px;border-radius:7px;font-size:12px}.ludeo-player .lp-dev-btn--ghost{border-color:transparent;background:transparent;color:var(--m-mid)}.ludeo-player .lp-dev-trio{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:6px}.ludeo-player .lp-dev-fields{display:flex;align-items:flex-end;gap:6px}.ludeo-player .lp-dev-fields label{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0;color:var(--m-mid);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.ludeo-player .lp-dev-fields input{width:100%;height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.1);border-radius:9px;outline:none;background:#00000059;color:#fff;font:700 14px var(--lp-font);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;user-select:text}.ludeo-player .lp-dev-fields input:focus{border-color:var(--lp-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--lp-accent) 25%,transparent)}.ludeo-player .lp-dev-fields>.lp-dev-btn{flex:none}.ludeo-player .lp-dev-fields--inline label{flex-direction:row;align-items:center;gap:0;height:28px;padding-left:9px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#00000059;white-space:nowrap}.ludeo-player .lp-dev-fields--inline label:focus-within{border-color:var(--lp-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--lp-accent) 25%,transparent)}.ludeo-player .lp-dev-fields--inline input{min-width:0;height:26px;padding:0 8px 0 4px;border:0;background:transparent;font-size:13px;text-align:right}.ludeo-player .lp-dev-fields--inline input:focus{box-shadow:none}.ludeo-player .lp-dev-slider .lp-range{display:block}.ludeo-player .lp-dev-stops{position:relative;height:16px}.ludeo-player .lp-dev-stop{position:absolute;top:0;left:calc(5px + (100% - 10px) * var(--i));transform:translate(-50%);padding:0 4px;border:0;background:none;color:var(--m-mid);font:700 11px var(--lp-font);cursor:pointer}.ludeo-player .lp-dev-stop:first-child{transform:translate(-5px);padding-left:0}.ludeo-player .lp-dev-stop:last-child{transform:translate(calc(-100% + 5px));padding-right:0}.ludeo-player .lp-dev-stop:is(:hover,:focus-visible,.lp-on){color:#fff}.ludeo-player .lp-dev-switch{position:relative;display:inline-flex;align-items:center;gap:7px;color:var(--m-mid);font-size:12px;font-weight:700;cursor:pointer}.ludeo-player .lp-dev-switch input{position:absolute;width:1px;height:1px;opacity:0}.ludeo-player .lp-dev-switch span{position:relative;width:26px;height:15px;border-radius:999px;background:#ffffff29;transition:background .2s}.ludeo-player .lp-dev-switch span:after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:transform .25s var(--lp-ease-fill)}.ludeo-player .lp-dev-switch:has(input:disabled){opacity:.4;cursor:not-allowed}.ludeo-player .lp-dev-switch input:checked+span{background:var(--lp-accent)}.ludeo-player .lp-dev-switch input:checked+span:after{transform:translate(11px)}.ludeo-player .lp-dev-switch input:focus-visible+span{outline:2px solid rgba(255,255,255,.55);outline-offset:2px}.ludeo-player .lp-dev-objs{display:flex;flex-direction:column;gap:10px;list-style:none}.ludeo-player .lp-dev-objs li{display:grid;grid-template-areas:"head actions" "bar actions";grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center}.ludeo-player .lp-dev-obj-head{display:flex;grid-area:head;justify-content:space-between;gap:8px;font-size:13px;font-weight:700}.ludeo-player .lp-dev-obj-head span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ludeo-player .lp-dev-obj-head b{color:var(--m-mid);font-variant-numeric:tabular-nums}.ludeo-player .lp-dev-objs [data-status=met] b{color:var(--lp-good)}.ludeo-player .lp-dev-objs [data-status=violated] b{color:var(--lp-bad-text)}.ludeo-player .lp-dev-obj-bar{grid-area:bar;height:4px;overflow:hidden;border-radius:2px;background:#ffffff14}.ludeo-player .lp-dev-obj-bar i{display:block;height:100%;border-radius:inherit;background:var(--lp-accent);transition:width .35s var(--lp-ease-fill)}.ludeo-player .lp-dev-objs [data-kind=constraint] .lp-dev-obj-bar i{background:var(--lp-bad)}.ludeo-player .lp-dev-objs [data-status=met] .lp-dev-obj-bar i{background:var(--lp-good)}.ludeo-player .lp-dev-obj-actions{display:flex;grid-area:actions;gap:4px}.ludeo-player .lp-dev-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-bottom:6px;padding:3px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:#00000059}.ludeo-player .lp-dev-seg button{--q: var(--lp-good);height:26px;border:0;border-radius:7px;background:transparent;color:var(--m-mid);font:700 12px var(--lp-font);text-transform:capitalize;cursor:pointer;transition:background .15s,color .15s}.ludeo-player .lp-dev-seg button[data-quality=good]{--q: oklch(.85 .14 130)}.ludeo-player .lp-dev-seg button[data-quality=fair]{--q: var(--lp-accent)}.ludeo-player .lp-dev-seg button[data-quality=poor]{--q: var(--lp-bad)}.ludeo-player .lp-dev-seg button:hover{color:#fff}.ludeo-player .lp-dev-seg button[aria-checked=true]{background:#ffffff1f;box-shadow:inset 0 -2px 0 var(--q);color:#fff}.ludeo-player .lp-dev-chips{display:flex;flex-wrap:wrap;gap:5px}.ludeo-player .lp-dev-chip{height:26px;padding:0 10px;border:1px solid color-mix(in oklab,var(--lp-bad) 32%,transparent);border-radius:999px;background:color-mix(in oklab,var(--lp-bad) 10%,transparent);color:var(--lp-bad-text);font:700 12px var(--lp-font);cursor:pointer;transition:background .15s,opacity .15s}.ludeo-player .lp-dev-chip:hover:not(:disabled){background:color-mix(in oklab,var(--lp-bad) 24%,transparent)}.ludeo-player .lp-dev-chip:disabled{opacity:.32;filter:grayscale(1);cursor:not-allowed}.ludeo-player .lp-dev-chip.lp-on{background:var(--lp-bad);color:#1c0b0b}.ludeo-player .lp-dev-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.ludeo-player .lp-dev-keys{display:flex;gap:4px}.ludeo-player .lp-dev-keys kbd{display:inline-block;padding:3px 6px 2px;border:1px solid rgba(255,255,255,.09);border-bottom-width:2px;border-radius:6px;background:#ffffff0d;color:var(--m-mid);font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace}.ludeo-player .lp-dev--stream:not(.lp-dev--docked){top:16px;bottom:auto}.ludeo-player:has(.lp-dev--mock:not(.lp-dev--docked)) .lp-dev--stream:not(.lp-dev--docked){right:372px}.ludeo-player .lp-dev.lp-dev--stream:is([data-quality=excellent],[data-quality=good]){--m-tone: var(--lp-good)}.ludeo-player .lp-dev.lp-dev--stream[data-quality=fair]{--m-tone: var(--lp-accent)}.ludeo-player .lp-dev.lp-dev--stream[data-quality=poor]{--m-tone: var(--lp-bad)}.ludeo-player .lp-dev.lp-dev--stream[data-quality=unknown]{--m-tone: var(--m-mid)}.ludeo-player .lp-dev-mark--stream,.ludeo-player .lp-dev--stream .lp-dev-mark{background:#63b9fe}.ludeo-player .lp-dev-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.ludeo-player .lp-dev-tile{display:flex;flex-direction:column;gap:2px;min-width:0;padding:9px 10px 6px;border:1px solid rgba(255,255,255,.05);border-radius:11px;background:var(--m-fill)}.ludeo-player .lp-dev-tile>span{overflow:hidden;color:var(--m-mid);font-size:9px;font-weight:700;letter-spacing:.14em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.ludeo-player .lp-dev-tile b{font-size:19px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}.ludeo-player .lp-dev-tile b small{margin-left:3px;color:var(--m-mid);font-size:10px;font-weight:600}.ludeo-player svg.lp-dev-spark{display:block;width:100%;height:30px;margin-top:4px}.ludeo-player .lp-dev-spark polyline{fill:none;stroke:var(--m-tone);stroke-linejoin:round;stroke-width:1.5;vector-effect:non-scaling-stroke}.ludeo-player .lp-dev-info{display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden;border-radius:11px;background:var(--m-line)}.ludeo-player .lp-dev-info>div{min-width:0;padding:7px 10px;background:#101016f0}.ludeo-player .lp-dev-info>div:last-child{grid-column:1 / -1}.ludeo-player .lp-dev-info dt{color:var(--m-mid);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.ludeo-player .lp-dev-info dd{overflow:hidden;font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;text-overflow:ellipsis;white-space:nowrap;user-select:text}.ludeo-player .lp-dev-btn.lp-on{border-color:color-mix(in oklab,var(--lp-accent) 60%,transparent);background:color-mix(in oklab,var(--lp-accent) 16%,transparent);color:#fff}@keyframes lp-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.09)}}@keyframes lp-status{0%{opacity:0;transform:translateY(4px)}12%,88%{opacity:1;transform:none}to{opacity:0;transform:translateY(-4px)}}@keyframes lp-turn-ring{0%{opacity:.85;transform:scale(1)}to{opacity:0;transform:scale(1.18,1.45)}}@keyframes lp-spin{to{transform:rotate(360deg)}}@keyframes lp-hint-pulse{0%,to{opacity:.72}50%{opacity:1}}@keyframes lp-turn-glow{0%,to{box-shadow:0 0 0 1px #ffffffe6,0 0 14px #ffffff80,0 0 32px #ffffff40}50%{box-shadow:0 0 0 2px #fff,0 0 28px #ffffffe6,0 0 64px #ffffff8c}}@keyframes lp-claim-glow{0%,to{box-shadow:0 0 #fff0}50%{box-shadow:0 0 10px #ffffff8c}}@keyframes lp-pulse{0%{transform:scale(1);text-shadow:none}35%{transform:scale(1.12);color:var(--lp-accent);text-shadow:0 0 14px rgba(240,165,0,.85)}to{transform:scale(1);text-shadow:none}}@keyframes lp-count{0%{opacity:0;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}@keyframes lp-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes lp-drop-in{0%{opacity:0;transform:translate(-50%) translateY(-14px)}to{opacity:1;transform:translate(-50%)}}@keyframes lp-fade-in{0%{opacity:0}to{opacity:1}}@keyframes lp-fade-out{to{opacity:0}}@keyframes lp-end-fade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes lp-toast{0%{opacity:0}10%,80%{opacity:1}to{opacity:0}}@media(max-width:880px){.ludeo-player .lp-hud{left:10px;top:10px}.ludeo-player .lp-pause-bar{top:24px;width:calc(100vw / var(--lp-zoom) - 32px);flex-direction:column;gap:14px}.ludeo-player .lp-cards{width:calc(100vw / var(--lp-zoom) - 32px)}.ludeo-player .lp-queue-net{display:none}}@media(prefers-reduced-motion:reduce){.ludeo-player *,.ludeo-player *:before,.ludeo-player *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.ludeo-player .lp-status{animation:none!important}.ludeo-player .lp-toast{animation-duration:3s!important}.ludeo-player .lp-esc{animation-duration:.45s!important}.ludeo-player .lp-pulse{animation:lp-highlight .6s linear!important}@keyframes lp-highlight{0%,60%{color:var(--lp-accent)}}}
  .player-page {
    --paper: #0c0c10;
    --ink: #f0f0f3;
    --mid: #7d7d87;
    --amber: #f0a500;

    /* header inset — also the gap between the header and the video */
    --header-pad: clamp(12px, 1.8vh, 18px);

    --text-s: clamp(12px, 1.6vmin, 16px);

    /* dark glass — legible when overlaid on the video (theater mode) */
    --panel:      rgba(10, 12, 17, 0.52);
    --panel-ink:  #f0f0f3;
    --panel-mid:  #9a9aa4;
    --panel-line: rgba(255, 255, 255, 0.10);

    --fill-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* soft, decelerating curve for the drawers */
    --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);

    /* shared layout metrics — keep the columns and the mini stage in sync */
    --edge:   max(2vw, 11px);
    --side-w: clamp(200px, 19vw, 252px);
    --panel-w: clamp(236px, 23vw, 300px);
    --col-gap: clamp(9px, 1.25vw, 17px);

    /* the cards under the stage, about; the stage gets the height left over (below) */
    --ub-h: 146px;
    /* the page is the size container its columns measure: header, stage and cards share one width */
    container-type: size;
  }

  /* one width for the header row, the stage and the cards: the stage fills the height the cards leave (16:9;
     cqh is the page's content box, already below the header's padding), never narrower than the 1180px it
     always had, never wider than the page. So a tall screen gets a bigger stage instead of a gap above the cards */
  .site-header, .wrap {
    --stage-w: min(
      100cqw - 2 * var(--edge),
      max(1180px, (100cqh - var(--ub-h) - clamp(12px, 2vh, 24px) - clamp(24px, 4vh, 48px)) * 16 / 9)
    );
  }

  /* 2K and 4K: the page as at 1080p, bigger, the same steps the player zooms its fullscreen layers by
     (it portals them out of the page, so they don't zoom twice) */
  @media (min-width: 2560px) and (min-height: 1440px) { .player-page { zoom: 1.3333; } }
  @media (min-width: 3840px) and (min-height: 2160px) { .player-page { zoom: 2; } }

  .player-page, .player-page * { margin: 0; padding: 0; box-sizing: border-box; }
  .player-page { position: fixed; inset: 0; display: flex; flex-direction: column; }
  .player-page {
    font-family: 'Rajdhani', system-ui, sans-serif;
    background: radial-gradient(130% 100% at 65% 20%, #16161c 0%, #0d0d12 45%, #050507 100%);
    background-attachment: fixed;
    color: var(--ink);
    overflow: hidden;
    /* clears the fixed header (38px control + its vertical padding) */
    padding-top: calc(38px + 2 * var(--header-pad));
  }

  /* subtle paper grain */
  .player-page::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    opacity: 0.28;
    mix-blend-mode: screen;
    background-image: none;
  }

  /* the ludeo's webm, blurred as the player's backdrop is (Game Over, the carry), behind everything on the
     page; the gradient above shows until it loads. Isolated so the backdrop's z-index stays in the page */
  .player-page { isolation: isolate; }
  .page-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .page-backdrop > :is(video, img) {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    filter: blur(72px) brightness(0.42) saturate(1.2);
  }

  /* page header — Ludeo logo left, game logo centre, Connect action right;
     sticks to the top while the page scrolls */
  .site-header {
    position: fixed;                    /* pinned — never scrolls with the page */
    top: 0; left: 0; right: 0;
    z-index: 45;
    padding: var(--header-pad) var(--edge);
    /* fully transparent — the page background shows through untouched */
    background: transparent;
  }
  /* constrained to the same max-width as the player, so it never spills past its edges */
  .site-header-inner {
    position: relative;                 /* anchors the centred game logo */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--stage-w);
    margin: 0 auto;
  }
  .site-header-game {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .site-header-logo { display: flex; align-items: center; opacity: 0.9; }
  .site-header-logo svg { display: block; width: auto; height: clamp(20px, 2.7vmin, 27px); }
  /* right side of the header: discord community link + user login/avatar */
  .hdr-actions { flex: none; display: flex; align-items: center; gap: 18px; }
  /* explicit width (not auto+aspect-ratio) — some browsers size flex items
     for a replaced element by its full intrinsic width during the intrinsic-size
     pass, inflating the column far past the visible logo */
  .site-header-game img { display: block; max-height: 36px; width: auto; opacity: 0.98; object-fit: contain; }
  /* Theater mode — the video fills the screen, every part overlays on top */
  .wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--edge) clamp(24px, 4vh, 48px);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Hero: fills the space between header and the pinned underbar */
  .hero {
    display: flex;
    justify-content: center;            /* the enlarged player stays centered on the page */
    padding: 0;
    flex: 1;
    min-height: 0;
  }
  .player {
    position: relative;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: var(--stage-w);          /* enlarged, still centered */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 4vh, 48px);
  }
  /* creator with a small circular video avatar */
  .creator-av {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #111;
  }
  /* Stage — full-screen video */
  .stage-slot {
    position: relative;
    width: 100%;
    perspective: 1600px;
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: 2 / 1;
  }

  /* ---- Buy banner — bottom-right over the video, collapses to a pill ---- */
  .buy {
    position: absolute;
    right: 17px; top: 17px;
    z-index: 18;
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(14, 15, 20, 0.55);
    backdrop-filter: blur(20px) saturate(1.05);
    -webkit-backdrop-filter: blur(20px) saturate(1.05);
    border: none;
    color: #fff;
    text-align: left;
    transition: width 0.42s var(--drawer-ease), padding 0.42s var(--drawer-ease),
                border-radius 0.42s var(--drawer-ease), background 0.3s ease;
  }
  .buy-head { display: flex; align-items: center; gap: 10px; }
  .buy-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .buy-kicker {
    font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55); white-space: nowrap;
  }
  .buy-title { font-size: 15px; font-weight: 500; white-space: nowrap; }
  .buy-stores {
    display: grid; gap: 6px;
    max-height: 0; overflow: hidden;
    opacity: 0;
    transition: max-height 0.42s var(--drawer-ease), opacity 0.28s ease;
  }
  .buy .buy-stores { max-height: 200px; opacity: 1; }
  .buy-store {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    border: none; border-radius: 999px;
    background: #fff;
    color: #0c0c10; font-family: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer; text-align: left;
    transition: background 0.18s ease;
  }
  .buy-store:hover { background: rgba(255, 255, 255, 0.85); }
  .buy-store-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .buy-store-ico { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: #0c0c10; }
  .buy-store-ico svg { width: 20px; height: 20px; }
  /* hidden entirely — reopened from the buy icon in the control row */
  .buy {
    opacity: 1; transform: none;
    transform-origin: top right;
    transition: opacity 0.3s ease, transform 0.46s var(--drawer-ease);
  }

  /* ============================================================
     Inputs — really delicate, one cap per scene, outside on the right
     ============================================================ */
  .cap {
    height: 32px;
    padding: 0 12px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);   /* delicate, no border */
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #fff;
    transition: background 0.25s ease, color 0.25s ease, transform 0.08s ease;
  }
  .cap svg { width: 15px; height: 15px; fill: currentColor; }
  .cap.on { background: rgba(255, 255, 255, 0.17); color: var(--panel-ink); }

  /* ---- Expandable underbar blocks (Mission brief · Objective · Controls) ----
     each collapses to the row height and lifts upward when opened, so the row
     never changes height */
  .ub-block.ub-controls { flex: 0 0 240px; min-width: 0; padding-left: 20px; padding-right: 20px; }
  .ub-block.ub-objective { padding-left: 20px; padding-right: 20px; flex: 0 1 196px; min-width: 0; box-sizing: border-box; }
  .ub-objective .exp-slot { width: 100%; max-width: 300px; }
  .ub-block.ub-leaderboard { padding-left: 20px; padding-right: 20px; min-width: 0; box-sizing: border-box; }
  /* tall enough that the Objective's three rows are all visible while collapsed */
  .exp-slot { position: relative; flex: 1; min-height: 118px; }
  .exp-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    /* closed: the slot plus the padding the negative margin cancels, so it sits where the block does;
       open: the height the drawer measures (Underbar.tsx), as tall as what it holds */
    height: calc(100% + 28px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px;
    margin: -14px -20px;
    border: none;
    border-radius: 16px;
    background: #131316;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* the player package's drawer: one height, the same ease, the lift on hover */
    transition: height 0.46s var(--drawer-ease), left 0.46s var(--drawer-ease), right 0.46s var(--drawer-ease),
      transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.28s ease, box-shadow 0.34s ease;
  }
  /* a card whose content already fits doesn't open: no pointer, no lift */
  .exp-panel.static, .exp-panel.static .exp-head { cursor: default; }
  .exp-panel:not(.open):not(.static):hover {
    transform: translateY(-6px);
    background: #1b1b20;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  }
  .ub-leaderboard .exp-panel.open.closing { left: 0; }
  .ub-creator .exp-panel.open.closing { right: 0; }
  /* open, Controls widens both ways (the Hub's card is wider), so the Keyboard / Xbox / PlayStation
     switch keeps its icons; closed, it's as wide as its neighbours */
  .ub-controls .exp-panel.open { left: -38px; right: -38px; }
  .ub-controls .exp-panel.open.closing { left: 0; right: 0; }
  /* the content that only exists while open leaves first, so the drawer isn't
     dragging a full panel down with it */
  .exp-panel.closing .exp-tips,
  .exp-panel.closing .lb-list,
  .exp-panel.closing .ctrl-group:nth-child(n+4) {
    opacity: 0;
    transition: opacity 0.13s ease;
  }
  .exp-panel.closing .lb-list li { animation: none; }
  /* open: over the stage, scrolling only past the cap */
  .exp-panel.open {
    z-index: 20;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  }
  /* over the cards beside it and the stage: a hairline edge and a shadow all round (as the player's
     own cards), fading as it closes */
  .exp-panel.open:not(.closing) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 -12px 40px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.55);
  }
  .exp-panel.open::-webkit-scrollbar { width: 6px; }
  .exp-panel.open::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 999px; }

  /* rows fade up in sequence once the drawer opens */
  .exp-panel.open .lb-list li { animation: lbIn 0.42s var(--drawer-ease) both; }
  .exp-panel.open .lb-list li:nth-child(1) { animation-delay: 0.10s; }
  .exp-panel.open .lb-list li:nth-child(2) { animation-delay: 0.14s; }
  .exp-panel.open .lb-list li:nth-child(3) { animation-delay: 0.18s; }
  .exp-panel.open .lb-list li:nth-child(4) { animation-delay: 0.22s; }
  .exp-panel.open .lb-list li:nth-child(5) { animation-delay: 0.26s; }
  .exp-panel.open .lb-list li:nth-child(6) { animation-delay: 0.30s; }
  .exp-panel.open .lb-list li:nth-child(7) { animation-delay: 0.34s; }
  .exp-panel.open .lb-list li:nth-child(8) { animation-delay: 0.38s; }
  .exp-panel.open .lb-list li:nth-child(9) { animation-delay: 0.42s; }
  .exp-panel.open .lb-list li:nth-child(10) { animation-delay: 0.46s; }
  @keyframes lbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  /* title row: the card's button, with the chevron flush right (it flips once open) */
  .exp-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 0; border: none; border-radius: 4px; background: none;
    color: inherit; font: inherit; text-align: left; cursor: pointer;
  }
  .exp-head:focus { outline: none; }
  .exp-head:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 2px; }
  .exp-chevron {
    flex: none; width: 12px; height: 12px;
    fill: none; stroke: var(--panel-mid); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.46s var(--drawer-ease);
  }
  .exp-panel.open:not(.closing):not(.measuring) .exp-chevron { transform: rotate(180deg); }
  .exp-head .ub-title { text-indent: 0; }
  .exp-body { min-height: 0; }
  /* tips — only meaningful once the block is opened */
  .exp-tips {
    margin-top: 15px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.32s ease 0.10s, transform 0.46s var(--drawer-ease) 0.10s;
  }
  .exp-panel.open .exp-tips { opacity: 1; transform: none; }
  /* collapsed peek: top players stacked beside the creator */
  .lb-head { display: flex; align-items: center; gap: 6px; }
  .lb-trophy { width: 12px; height: 12px; flex: none; fill: currentColor; opacity: 0.85; }
  .lb-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
  .lb-list li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--panel-mid); }
  .tip-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
  .tip-list li {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--panel-mid);
  }
  .tip-list li::before { content: '-'; position: absolute; left: 0; }
  .ctrl-list { display: flex; flex-direction: column; gap: 6px; }
  /* collapsed: show exactly three whole key rows, never a sliver of a fourth */
  .ctrl-list { max-height: 96px; overflow: hidden; transition: max-height 0.46s var(--drawer-ease); }
  /* the input tabs are only meaningful once the card is open */
  .exp-panel:not(.open) .ctrl-mode { display: none; }
  /* collapsed: clamp the brief to whole lines rather than cutting one in half */
  .exp-panel:not(.open) .ub-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ctrl-group { display: flex; align-items: center; gap: 8px; animation: ctrlIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
  @keyframes ctrlIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  /* section subtitles inside the controls card */
  .ctrl-section {
    margin: 7px 0 1px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
  }
  /* input-device tabs — full-width, first row inside the open Controls card */
  .ctrl-mode {
    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 14px;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  /* the bright pill slides between the tabs (--n of them, --i picked) — slight overshoot so it settles */
  .ctrl-mode::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: calc((100% - 4px) / var(--n, 2)); height: calc(100% - 4px);
    border-radius: 7px;
    background: #e6e6ea;
    transform: translateX(calc(var(--i, 0) * 100%));
    transition: transform 0.42s cubic-bezier(0.34, 1.32, 0.5, 1);
  }
  .cm-opt {
    position: relative;
    z-index: 1;
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--panel-mid);
    transition: color 0.3s ease;
  }
  .cm-opt svg { width: 15px; height: 15px; transition: transform 0.42s cubic-bezier(0.34, 1.32, 0.5, 1); }
  .cm-opt[aria-pressed="true"] svg { transform: scale(1.08); }
  .cm-opt[aria-pressed="false"]:hover { color: #fff; }
  .cm-opt[aria-pressed="true"] { color: #16161a; }
  .cm-opt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .ctrl-group-title {
    flex: none;
    width: 56px;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    text-align: right;
    color: #fff;
  }
  .ctrl-group-row { display: flex; justify-content: flex-start; gap: 5px; flex: 1; min-width: 0; }
  /* sized to the glyph — a lone icon shouldn't stretch the full row */
  .ctrl-group-row .cap { flex: none; min-width: 28px; height: 28px; padding: 0 5px; font-size: 10px; }
  .cap-label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }

  /* mouse-speed slider row */
  .ctrl-slider { display: flex; align-items: center; gap: 8px; padding-top: 10px; margin-top: 6px; }
  .ctrl-range-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
  .ctrl-range-wrap .ctrl-range { flex: none; width: 100%; margin-left: 0; }
  /* tick marks sit under the track; labels sit under the ticks — nothing crosses the text */
  .ctrl-scale { position: relative; height: 22px; margin-top: 5px; }
  .ctrl-tick { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .ctrl-tick:first-child { transform: none; align-items: flex-start; }
  .ctrl-tick:last-child { transform: translateX(-100%); align-items: flex-end; }
  .ctrl-tick i { display: block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.32); }
  .ctrl-tick.sel span { color: #fff; }
  .ctrl-tick.sel i { background: #fff; }
  .ctrl-tick span {
    font-size: 11px; line-height: 1.2; letter-spacing: 0; text-transform: none;
    color: rgba(255,255,255,0.55); white-space: nowrap;
  }
  .ub-title.ctrl-slider-title { width: auto; text-align: center; }
  /* rounded track with a filled portion and a pill thumb */
  .ctrl-range {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    height: 22px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
  }
  .ctrl-range::-webkit-slider-runnable-track {
    height: 2px; border-radius: 999px;
    background: linear-gradient(to right, rgba(255,255,255,0.85) 0, rgba(255,255,255,0.85) var(--p, 50%), rgba(255,255,255,0.18) var(--p, 50%), rgba(255,255,255,0.18) 100%);
  }
  .ctrl-range::-moz-range-track {
    height: 2px; border-radius: 999px;
    background: linear-gradient(to right, rgba(255,255,255,0.85) 0, rgba(255,255,255,0.85) var(--p, 50%), rgba(255,255,255,0.18) var(--p, 50%), rgba(255,255,255,0.18) 100%);
  }
  .ctrl-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px; height: 18px;
    margin-top: -8px;
    border: none; border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  }
  .ctrl-range::-moz-range-thumb {
    width: 10px; height: 18px;
    border: none; border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  }

  /* Underbar — creator · mission brief · objective · play, side by side below the video */
  .underbar {
    width: 100%;
    max-width: var(--stage-w);          /* never wider than the player above it */
    margin: clamp(12px, 2vh, 24px) auto 0;   /* half the bottom gap */
    display: flex;
    align-items: stretch;
    gap: clamp(4px, 0.5vw, 8px);         /* same spacing between every block */
    width: 100%;
  }
  .ub-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);   /* dark card behind each block */
    color: var(--panel-ink);
    transform-origin: 50% 100%;
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.28s ease, box-shadow 0.34s ease;
  }
  /* focus scrim — everything but the open card quiets down */
  .focus-scrim {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(6, 7, 10, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.34s ease;
  }
  .player-page:has(.exp-panel.open:not(.measuring)) .focus-scrim { opacity: 1; }
  .player-page:has(.exp-panel.closing) .focus-scrim { opacity: 0; }
  .ub-block:has(.exp-panel.open:not(.measuring)) { position: relative; z-index: 40; background: transparent; box-shadow: none; }

  /* hover — the card lifts slightly instead of showing an arrow */
  .ub-block { cursor: pointer; }
  .ub-block:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  }
  .ub-block:has(.exp-panel.open) {
    transform: none;
    box-shadow: none;
  }
  /* thin hairline between the underbar columns — a straight line, unaffected by the block's rounded corners */
  .ub-block + .ub-block { position: relative; }
  .underbar > .ub-block { flex: 1 1 20%; width: auto; min-width: 0; }
  .underbar > .ub-block.ub-creator,
  .underbar > .ub-block.ub-objective,
  .underbar > .ub-block.ub-leaderboard,
  .underbar > .ub-block.ub-controls { flex: 0 0 244px; width: auto; min-width: 0; }
  .underbar > .ub-block.ub-creator { flex: 1 1 27%; }
  .underbar > .ub-block.ub-leaderboard { flex: 1 1 17%; min-width: 215px; }
  /* leaderboard column (last): collapsed shows first place only */
  .ub-leaderboard .lb-list { margin-top: 7px; }
  /* open: the board scrolls, with a fade at the bottom hinting at more players */
  .ub-leaderboard .exp-panel.open .lb-list {
    max-height: none;
    padding-right: 4px;
  }
  /* podium — top three, visible collapsed and open */
  .lb-podium { display: flex; justify-content: space-evenly; align-items: flex-end; gap: 16px; margin-top: 6px; }
  /* style: bars — horizontal gradient pills with the avatar at the tip */
  .lb-podium[data-style="bars"] { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; }
  .bar { display: flex; align-items: center; gap: 6px; }
  .bar-meta { flex: none; width: 74px; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .bar-name { font-size: 11px; color: var(--panel-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar-sc { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.85); }
  .bar-pill { position: relative; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: flex-end; padding: 2px 2px 2px 2px; transition: height 0.4s var(--drawer-ease); }
  .bar-av { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; transition: width 0.4s var(--drawer-ease), height 0.4s var(--drawer-ease); }
  .bar-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .bar-rank { flex: none; width: 14px; font-size: 13px; font-weight: 600; }
  .bar-1 .bar-pill { flex: 1 1 auto; background: linear-gradient(to right, rgba(0,0,0,0), #e8c235 210px); }
  .bar-2 .bar-pill { flex: 0.72 1 auto; background: linear-gradient(to right, rgba(0,0,0,0), #c9c9ce 210px); }
  .bar-3 .bar-pill { flex: 0.5 1 auto; background: linear-gradient(to right, rgba(0,0,0,0), #cf9d6e 210px); }
  .bar-1 .bar-rank { color: #f0b429; }
  .bar-2 .bar-rank { color: #c9c9ce; }
  .bar-3 .bar-rank { color: #cf9d6e; }
  /* collapsed: podium only */
  .ub-leaderboard .exp-panel:not(.open) .lb-list { display: none; }
  /* podium fills the card width in every style */
  .lb-podium { width: 100%; }
  .ub-leaderboard .exp-panel.open .lb-podium { margin-bottom: 16px; }
  /* style: bubbles — overlapping score circles, #1 huge in the middle */
  .lb-podium[data-style="bubbles"] { align-items: center; justify-content: center; gap: 0; }
  /* style: columns — classic podium steps, rank on the face */
  .lb-podium[data-style="columns"] { justify-content: space-evenly; align-items: flex-end; gap: 10px; }
  /* style: medals — ringed avatars with a rank badge */
  .lb-podium[data-style="medals"] { justify-content: space-evenly; align-items: flex-end; }
  /* the leaderboard drawer widens leftward on open so the claim CTA has room */
  .ub-leaderboard .exp-panel.open { left: -110px; }
  /* keep name + score inside the column while collapsed */
  .ub-leaderboard .lb-list li { gap: 7px; font-size: 11px; }
  .ub-leaderboard .lb-list { gap: 6px; }
  /* bars style carries through the full list — smaller neutral bars */
  .lb-podium[data-style="bars"] + .lb-list li { gap: 6px; padding-right: 14px; }
  /* in bars view, ranks 1-3 are regular table rows with medal colors; the podium
     hides while open and the top rows are hidden in every other style */
  .ub-leaderboard .exp-panel.open .lb-podium[data-style="bars"] { display: none; }
  .ub-title {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    text-transform: uppercase;
    color: var(--panel-mid);
  }
  /* every text below a title: same size, weight and color */
  .ub-text,
  .ub-value,
  .underbar .obj-name { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--panel-ink); }
  .ub-value { font-variant-numeric: tabular-nums; }
  /* the drawer's contents are absolutely positioned, so this column has no
     intrinsic width to hug — it needs an explicit one */
  .ub-creator { flex: 0.3 1 auto; width: auto; min-width: 215px; }
  .ub-creator-row { display: flex; align-items: center; gap: 10px; }
  .ub-creator .creator-av { width: 22px; height: 22px; }
  /* name + play count stacked beside the avatar — sized to stay within its height */
  .ub-creator-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .ub-title.ctrl-group-title { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; text-indent: 0; color: #fff; }

  /* the column is capped so the right-aligned goals stay near the names */
  .obj-list { list-style: none; display: flex; flex-direction: column; }
  .obj {
    width: 100%;
    max-width: 220px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 1.5px 0;
    transition: opacity 0.35s ease;
  }
  /* no rules between objectives */
  .obj + .obj { border-top: none; }
  /* goals share one right-aligned column — distinguished by weight, not colour */
  .obj-goal { flex: none; margin-left: auto; color: var(--panel-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
  .obj-check { flex: none; width: 15px; height: 15px; display: grid; place-items: center; }
  .obj-check svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: #fff; }
  .obj-name {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--panel-mid);
    transition: color 0.35s ease;
  }

  /* narrow screens — hero stacks, tabs become a horizontal strip, single-col bands */
  @media (max-width: 880px) {
    /* too little room to fit everything — let it scroll rather than clip */
    .player-page { overflow-y: auto; display: block; }
    .wrap { display: block; }
    .stage-slot { flex: none; }
    .player { max-width: 100%; }
    .hero {
      position: static;
      grid-template-columns: 1fr;
      gap: clamp(14px, 3vh, 22px);
      padding: 10px 0 clamp(16px, 3vh, 24px);
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: none;
    }
  }

/* ==== campaign additions (not in the design export) ==== */
.site-header-logo img { display: block; height: clamp(20px, 2.7vmin, 27px); width: auto; }
/* fifth card: the store CTA, not expandable */
.ub-block.ub-store { cursor: default; }
.ub-block.ub-store:hover { transform: none; box-shadow: none; background: rgba(255, 255, 255, 0.05); }
.creator-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
/* store card reuses the buy-banner pieces, laid out in flow */
.ub-store .buy { position: static; width: auto; opacity: 1; transform: none; display: flex; flex-direction: column; gap: 10px; padding: 0; background: none; box-shadow: none; }
.ub-store .buy-stores { max-height: none; opacity: 1; }
.ub-store .buy-store-ico img { width: 20px; height: 20px; object-fit: contain; }
/* store icons are white SVG assets — paint them in the button's ink via mask */
.ub-store .buy-store-ico i { display: block; width: 22px; height: 22px; background-color: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
.ub-store .buy-kicker, .ub-store .buy-title { white-space: normal; }
.ub-store .buy-store { min-width: 0; }
/* embedded (?embed=true): one label-only CTA instead of the store links, so it reads as a button */
.ub-store .buy-store--embed { justify-content: center; text-align: center; font-weight: 600; }
/* open, the whole control map shows; the drawer scrolls past its cap */
.exp-panel.open .ctrl-list { max-height: none; }
.ctrl-key { display: inline-flex; align-items: center; gap: 4px; }
.ctrl-plus { font-size: 11px; color: rgba(255,255,255,0.5); }

/* ==== rows span the card: name flush left, value / keys flush right ==== */
.obj { max-width: none; }
.obj-list { width: 100%; }
/* label column = widest label, right-aligned; caps start on one shared rail */
.ctrl-list { display: grid; grid-template-columns: max-content 1fr; column-gap: 10px; row-gap: 6px; align-items: center; }
.ctrl-segment { display: contents; }
.ctrl-group { display: contents; }
.ctrl-section { grid-column: 1 / -1; }
.ctrl-group-title { width: auto; white-space: nowrap; }
.ctrl-group-row { flex-wrap: wrap; }
.ctrl-group-row .cap { min-width: 32px; height: 32px; padding: 0 8px; font-size: 11px; letter-spacing: 0.06em; }
.ctrl-group-row .cap svg { width: 15px; height: 15px; fill: currentColor; }
.cap-labeled-inner { display: inline-flex; align-items: center; gap: 4px; }
.cap-labeled-inner .cap-label { font-size: 9px; }
.ctrl-key { display: inline-flex; align-items: center; gap: 4px; }
.ctrl-plus { font-size: 11px; color: rgba(255,255,255,0.5); }
/* collapsed: three rows, no slider, no toggle */
.exp-panel:not(.open) .ctrl-list { max-height: 118px; }
/* The slider is for the open card only, where it sits first. It folds its height open and shut
   with the drawer instead of appearing and vanishing, so the keys under it never jump; folded,
   it takes back the list's row gap and is out of the tab order. */
.ctrl-sens {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  margin-bottom: -6px;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.46s var(--drawer-ease), margin-bottom 0.46s var(--drawer-ease),
    opacity 0.26s ease, visibility 0s linear 0.46s;
}
.ctrl-sens-inner { min-height: 0; overflow: hidden; }
.exp-panel.open:not(.closing):not(.measuring) .ctrl-sens {
  grid-template-rows: 1fr;
  margin-bottom: 0;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.46s var(--drawer-ease), margin-bottom 0.46s var(--drawer-ease),
    opacity 0.32s ease 0.1s, visibility 0s;
}
/* slider spans both columns; the ticks are buttons in the design's clothes */
/* at the top of the open card, then a gap before the first key row (the player's spacing) */
.ctrl-slider-title { grid-column: 1 / -1; margin-top: 0; }
.ctrl-slider { display: flex !important; grid-column: 1 / -1; margin: 0 0 10px; padding-top: 6px; }
.ctrl-tick { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.ctrl-tick:focus-visible { outline: 1px solid rgba(255,255,255,0.4); border-radius: 4px; }
/* collapsed: design-size caps on one line per row; open: nothing clipped (tick labels sit below the scale box) */
.exp-panel:not(.open) .ctrl-group-row { flex-wrap: nowrap; }
/* closed caps are smaller; they ease between the sizes with the drawer, starting as it closes, so
   the rows don't step when the open styles drop */
.exp-panel:is(:not(.open), .closing) .ctrl-group-row .cap { min-width: 28px; height: 28px; padding: 0 6px; font-size: 10px; }
.ctrl-group-row .cap {
  transition: background 0.25s ease, color 0.25s ease, transform 0.08s ease, height 0.46s var(--drawer-ease),
    min-width 0.46s var(--drawer-ease), padding 0.46s var(--drawer-ease), font-size 0.46s var(--drawer-ease);
}
.exp-panel.open .ctrl-list { overflow: visible; }
.ctrl-scale { height: 26px; }
/* rows spread to the card edges: label left, caps right (Omer's pick over the design's shared rail) */
.ctrl-list { grid-template-columns: 1fr auto; }
.ctrl-group-title { text-align: left; white-space: normal; line-height: 1.2; }
.ctrl-group-row { justify-content: flex-end; }
.ctrl-slider-title { text-align: left; }
/* the collapsed cards look the same everywhere too */
.ub-block { background: transparent; }
.ub-block:hover { transform: none; box-shadow: none; background: transparent; }
.ub-block.ub-store { background: #131316; border-radius: 16px; }

/* ==== the player package on the page ==== */
/* its stage takes the column the design gives the stage; the page never scrolls */
.player-page .player > .ludeo-player { width: 100%; height: 100%; --lp-stage-max-height: 100%; }

/* ==== the player's type and store buttons on the page's cards (as its pause and Game Over cards) ==== */
.underbar .obj-name { font-size: 13px; letter-spacing: 0.02em; line-height: 1.5; color: var(--panel-mid); }
.underbar .obj-goal { color: #fff; }
.ub-store .buy-kicker { color: var(--panel-mid); }
.ub-store .buy-title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--panel-ink); }
/* icons only, one row: the stores share it evenly however many there are */
.ub-store .buy-stores { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.ub-store .buy-store { height: 44px; padding: 0 8px; justify-content: center; gap: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: var(--panel-ink); font-size: 14px; font-weight: 600; }
.ub-store .buy-store:hover { background: rgba(255, 255, 255, 0.12); }
.ub-store .buy-store-ico { width: 22px; height: 22px; color: inherit; }
.ub-store .buy-store-name { line-height: 1.5; }
/* a binding's runs: an "or" ends one, so a long row wraps between alternatives, never inside one */
.ctrl-run { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; }
.exp-panel:not(.open) .ctrl-run { flex-wrap: nowrap; }
/* a separator ("/", "or") is text between the caps, not a cap */
.ctrl-sep { padding: 0 2px; font-size: 12px; font-weight: 600; color: var(--panel-mid); }
/* a face button in the pad's own colour: round, Xbox's letter or PlayStation's shape (as on the Hub) */
.exp-panel .ctrl-group-row .cap.cap-face {
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--face) 55%, transparent);
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.25));
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 2px 8px color-mix(in srgb, var(--face) 22%, transparent);
  color: var(--face);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.ctrl-group-row .cap.cap-face svg { width: 12px; height: 12px; fill: none; }
.game-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* ---- Skeleton shimmer (shown while logo URL is loading) ---- */

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

.game-logo--skeleton {
  width: 120px;
  height: 40px;
  border-radius: 4px;
  background: linear-gradient(90deg, #2a2a2a 25%, #3d3d3d 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  animation: game-logo-shimmer 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

.game-logo__image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Default sizing for MissionBrief header */
/* ==========================================================================
   Leaderboard tab — standings list with live / upcoming / ended states
   Design: LudeoSummary.dc.html (claude.ai design 23116f1b)
   ========================================================================== */

.leaderboard-tab {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---- Centered states (upcoming countdown, empty board) ---- */

.leaderboard-tab--centered {
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  box-sizing: border-box;
}

.leaderboard-tab__upcoming-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.leaderboard-tab__upcoming-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.leaderboard-tab__upcoming-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #9a9a9c;
}

.leaderboard-tab__countdown {
  display: flex;
  gap: 10px;
}

.leaderboard-tab__countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #2e2e33;
  box-sizing: border-box;
}

.leaderboard-tab__countdown-value {
  font-family: 'Rajdhani', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #ffba00;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.leaderboard-tab__countdown-label {
  font-family: 'Titillium Web', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #757578;
}

.leaderboard-tab__upcoming-hint {
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #d5d5d5;
}

/* ---- Ended header ---- */

.leaderboard-tab__ended-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 22px 10px;
  border-bottom: 1px solid #2e2e33;
}

.leaderboard-tab__ended-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.leaderboard-tab__ended-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #9a9a9c;
}

/* ---- Rows ---- */

.leaderboard-tab__list-wrapper {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Reserve space above the floating me row so it never covers the last row */
.leaderboard-tab__list-wrapper--with-overlay {
  padding-bottom: 51px;
}

/* Floating copy of my row, pinned at the bottom — only shown when my rank is
   beyond the fetched page and there is no in-list row. pointer-events off so
   the list scrolls normally beneath it. */
.leaderboard-tab__me-overlay {
  position: absolute;
  bottom: 7px;
  left: 14px;
  right: 14px;
  z-index: 2;
  pointer-events: none;
}

.leaderboard-tab__me-overlay .leaderboard-tab__row--me {
  background: #131313;
  border-radius: 44px;
}

.leaderboard-tab__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 7px 14px 12px;
}

.leaderboard-tab__list::-webkit-scrollbar { width: 6px; }
.leaderboard-tab__list::-webkit-scrollbar-track { background: rgba(117, 117, 117, 0.22); border-radius: 20px; }
.leaderboard-tab__list::-webkit-scrollbar-thumb { background: #5e5e5e; border-radius: 20px; }

/* Row = rank number + pill (design: Publish_with_leaderboard.html) */
.leaderboard-tab__row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
}

/* Rows with a score breakdown reveal a tooltip on hover anywhere along the line,
   and pop slightly so the hovered row is easy to track as the mouse moves. */
.leaderboard-tab__row--hoverable {
  cursor: default;
  transition: transform 0.12s ease;
}

.leaderboard-tab__row--hoverable:hover {
  transform: scale(1.02);
  position: relative;
  z-index: 2;
}

/* The in-list me row is position:sticky; a transform would break stickiness, so
   it keeps its gold highlight instead of scaling. */
.leaderboard-tab__list .leaderboard-tab__row--me:hover {
  transform: none;
}

/* In-list me row: rides pinned at the bottom edge while my rank is below the
   fold, docks to the top edge once scrolled past — always in flow, so no
   layout jump. Solid underlay so rows sliding beneath don't show through. */
/* The underlay is a rounded capsule (not a full-width band) with a soft
   drop shadow, so riding over other pills reads as a floating element
   instead of a black stripe with hard edges */
.leaderboard-tab__list .leaderboard-tab__row--me {
  position: sticky;
  /* Sticky insets resolve against the list's padding box, so each offset
     compensates for the list padding (7px top / 12px bottom) plus the row's
     own 3px transparent padding — the capsule docks flush against the visible
     edge with no slit where neighboring rows peek through */
  top: -10px;
  bottom: -15px;
  z-index: 1;
  background: #131313;
  border-radius: 44px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
}

/* Light pill: score at the left edge, name + avatar at the right; width scales
   with score relative to the leader, animated in with a per-row stagger */
.leaderboard-tab__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 3px;
  background: #f0f0f2;
  border-radius: 44px;
  overflow: hidden;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
}

.leaderboard-tab__pill--me {
  background: #ffba00;
  box-shadow: 0 0 16px rgba(255, 186, 0, 0.35);
}

/* Not-authenticated me-row: claim CTA on the left (next to score), big YOU
   pushed to the right where the name/avatar used to be. */
.leaderboard-tab__pill--claim {
  justify-content: flex-start;
  gap: 10px;
}

.leaderboard-tab__pill--claim .leaderboard-tab__you-badge--lg {
  margin-left: auto;
  margin-right: 1px; /* inset from the right, matching where the avatars sit */
}

.leaderboard-tab__rank {
  width: 30px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #9a9a9c;
  text-align: center;
}

.leaderboard-tab__rank--gold {
  color: #ffba00;
}

.leaderboard-tab__avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Titillium Web', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.leaderboard-tab__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leaderboard-tab__player-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.leaderboard-tab__name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1f;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-tab__you-badge {
  flex-shrink: 0;
  font-family: 'Titillium Web', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 44px;
  background: #1a1a1f;
  color: #ffba00;
}

/* Not-authenticated me-row: match the "Claim your spot" button's size & feel
   (same height, text size, padding, radius) so the two pills read as a pair. */
.leaderboard-tab__you-badge--lg {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 14px;
  box-sizing: border-box;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #ffffff;
}

/* Portaled to <body> so it escapes the pill/list overflow clipping */
.leaderboard-tab__claim-tip {
  position: fixed;
  transform: translate(-50%, -100%);
  z-index: 1000010;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #1c1c20;
  border: 1px solid #2e2e33;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  font-family: 'Titillium Web', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}

/* SVG uses currentColor → renders black as an <img>; force it white for the dark tip */
.leaderboard-tab__claim-tip-icon {
  filter: brightness(0) invert(1);
}

/* "Claim my spot" CTA — sits on the "you" bar in place of the YOU badge, with
   the Play-now look/feel: an animated orbit border traveling around a dark
   rounded shape. Compact so it fits the row height. */
.leaderboard-tab__claim {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  height: 26px;
  padding: 0 14px;
  border: none;
  background: transparent;
  border-radius: 44px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.1s;
}

.leaderboard-tab__claim:active {
  transform: scale(0.96);
}

.leaderboard-tab__claim:focus,
.leaderboard-tab__claim:focus-visible {
  outline: none;
}

.leaderboard-tab__claim-backdrop {
  position: absolute;
  inset: 0;
  border-radius: 44px;
  background: #131313; /* dark disc reads clearly on the gold "you" pill */
}

.leaderboard-tab__claim-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.leaderboard-tab__claim-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2;
}

/* The moving border: an arc that travels the perimeter (dasharray sums to the
   210×64 viewBox perimeter ≈ 520; preserveAspectRatio="none" stretches it to
   the button). Same technique as the Play-now orbit. */
.leaderboard-tab__claim-orbit {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 96 424;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.85));
  animation: leaderboard-claim-orbit 1.5s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

@keyframes leaderboard-claim-orbit {
  to {
    stroke-dashoffset: -520;
  }
}

.leaderboard-tab__claim-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: #ffffff;
}

/* Steam mark tinted to the label color (gold) via mask — a plain <img> can't
   recolor an SVG to an arbitrary color. */
.leaderboard-tab__claim-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .leaderboard-tab__claim-orbit {
    animation: none;
  }
}

.leaderboard-tab__score {
  flex-shrink: 0;
  margin-left: 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1f;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Score breakdown tooltip ---- */

/* Portaled to document.body at fixed viewport coords (set inline), so it sits
   above every overlay — incl. the esc menu at z-index 1000002 */
.leaderboard-tab__score-tooltip {
  position: fixed;
  transform: translate(-50%, -100%);
  z-index: 1000010;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 170px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #2e2e33;
  background: #1c1c20;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  text-align: left;
  pointer-events: none;
}

.leaderboard-tab__score-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  font-weight: 600;
}

.leaderboard-tab__score-tooltip-metric {
  color: #9a9a9c;
  white-space: nowrap;
}

/* Actual time taken, shown next to a time-based metric label */
.leaderboard-tab__score-tooltip-time {
  margin-left: 8px;
  color: #6f6f72;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.leaderboard-tab__score-tooltip-points {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ---- Live footer ---- */

.leaderboard-tab__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid #2e2e33;
  background: rgba(255, 255, 255, 0.025);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #9a9a9c;
}

.leaderboard-tab__footer-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.leaderboard-tab__run-score {
  margin-left: auto;
  font-size: 16px;
  color: #e6e6e8;
}

.leaderboard-tab__footer-value {
  color: #e6e6e8;
  font-weight: 700;
}

.leaderboard-tab__run-score .leaderboard-tab__footer-value {
  color: #ffba00;
  font-size: 18px;
}

.leaderboard-tab__high-score-badge {
  font-family: 'Titillium Web', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: #ffba00;
  color: #1a1304;
}
.notification {
  display: flex;
  pointer-events: none;
  border-radius: var(--Sizing-Corners-m, 8px);
  border: 1px solid var(--context-colors-warning, #EE7B00);
  background: var(--Background-Background-overlay-100, rgba(15, 15, 15, 0.50));
  backdrop-filter: blur(5px);
  padding: var(--Sizing-Sizing-s, 12px) var(--Sizing-Sizing-l, 20px) var(--Sizing-Sizing-s, 12px) var(--Sizing-Sizing-s, 12px);
  align-items: center;
  gap: 8px;
  color: var(--Text---icons-Secondary, #D5D5D5);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
  white-space: nowrap;
}

.notification.connection-error-fair {
  border: 1px solid var(--context-colors-warning, #EE7B00);
}

.notification.connection-error-poor {
  border: 1px solid var(--context-colors-danger, #e40008);
}
@keyframes toastFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes toastFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.toast-container {
  position: fixed;
  right: 0;
  top: 3.5rem;
  z-index: 999999;
  padding-top: 0.5rem;
  padding-right: 0.5rem;
}

.toast-container.fade-in {
  opacity: 0;
  animation: toastFadeIn 300ms ease-in-out forwards;
}

.toast-container.fade-out {
  opacity: 1;
  animation: toastFadeOut 800ms ease-in-out forwards;
}

/* Success style */
.notification.toast-success {
  border: 1px solid var(--context-colors-success, #00c853);
}

/* Info style */
.notification.toast-info {
  border: 1px solid var(--context-colors-info, #2196f3);
}

/* Responsive padding */
@media (min-width: 768px) {
  .toast-container {
    top: 3.75rem;
    padding-top: 0.875rem;
    padding-right: 0.875rem;
  }
}

@media (min-width: 1024px) {
  .toast-container {
    top: 4.5rem;
    padding-top: 1.75rem;
    padding-right: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .toast-container {
    top: 6rem;
    padding-top: 3.5rem;
    padding-right: 3.5rem;
  }
}
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* base: 40px tall, ghost, translucent hover (sits over the amber wash) */
.top-bar-actions__item {
  position: relative;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: #9a9aa0;
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 150ms ease,
    color 150ms ease,
    transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.top-bar-actions__item:hover {
  color: #e6e6e8;
  background: rgba(255, 255, 255, 0.06);
}

.top-bar-actions__item:active {
  transform: scale(0.96);
}

.top-bar-actions__item:focus,
.top-bar-actions__item:focus-visible {
  outline: none;
}

.top-bar-actions__item--round {
  width: 40px;
  border-radius: 50%;
}

/* both leading glyphs are 18px so the two ghost controls share one optical row */
.top-bar-actions__item > svg,
.top-bar-actions__ico,
.top-bar-actions__ico > svg {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
}

/* community: ghost circle, same species as copy-link */
.top-bar-actions__link {
  text-decoration: none;
}

.top-bar-actions__link > svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.top-bar-actions__share + .top-bar-actions__link {
  margin-left: -2px;
}

/* account: the ONE filled control — photo/fallback already is the circle */
.top-bar-actions .top-bar-profile__trigger {
  overflow: hidden;
  background: #1c1c1f;
  color: #8a8a90;
}

.top-bar-actions .top-bar-profile__trigger:hover {
  color: #bfbfc4;
}

.top-bar-actions .top-bar-profile__trigger[aria-expanded='true'] {
  color: #e6e6e8;
  box-shadow: 0 0 0 2px #f5c518;
}

.top-bar-actions .top-bar-profile__trigger > img {
  width: 100%;
  height: 100%;
}

/* divider: stretched + inset — always centered regardless of sibling borders */
.top-bar-actions__sep {
  width: 1px;
  align-self: stretch;
  margin: 10px 8px;
  background: rgba(255, 255, 255, 0.1);
  flex: none;
}

/* tooltip below, 350ms delay, no layout change */
.top-bar-actions__tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, -4px);
  background: #1c1c1f;
  border: 1px solid #2e2e33;
  color: #e6e6e8;
  border-radius: 7px;
  padding: 5px 9px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.top-bar-actions__tip::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  background: #1c1c1f;
  border-left: 1px solid #2e2e33;
  border-top: 1px solid #2e2e33;
  transform: translateX(-50%) rotate(45deg);
}

.top-bar-actions__item:hover .top-bar-actions__tip,
.top-bar-actions__item:focus-visible .top-bar-actions__tip {
  opacity: 1;
  transform: translate(-50%, 0);
  transition:
    opacity 160ms ease 350ms,
    transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1) 350ms;
}

.top-bar-actions__item[aria-expanded='true'] .top-bar-actions__tip {
  opacity: 0;
}

/* Share: one simple crossfade — nodes → spinner → check → nodes. */
.top-bar-actions__ico {
  position: relative;
}

.top-bar-actions__ico > svg {
  position: absolute;
  inset: 0;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.top-bar-actions__ico > svg.out {
  opacity: 0;
  transform: scale(0.7);
}

/* Share stack matches Discord's 24px box. Tray sits 1px high (optical). */
.top-bar-actions__share .top-bar-actions__ico,
.top-bar-actions__share .top-bar-actions__ico > svg {
  width: 24px;
  height: 24px;
}

.top-bar-actions__share .top-bar-actions__ico > svg[data-s='idle'] {
  transform: translateY(-1px);
}

.top-bar-actions__share .top-bar-actions__ico > svg[data-s='idle'].out {
  transform: translateY(-1px) scale(0.7);
}

.top-bar-actions__ico > svg[data-s='copied'] {
  width: 22px;
  height: 22px;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.top-bar-actions__ico > svg[data-s='copied'].out {
  transform: translate(-50%, -50%) scale(0.7);
}

.top-bar-actions__spin {
  animation: top-bar-actions-share-spin 800ms linear infinite;
}

@keyframes top-bar-actions-share-spin {
  to {
    transform: rotate(360deg);
  }
}

.top-bar-actions__share--loading {
  cursor: progress;
}

.top-bar-actions__share--loading .top-bar-actions__tip,
.top-bar-actions__share--copied .top-bar-actions__tip {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .top-bar-actions__item,
  .top-bar-actions__tip,
  .top-bar-actions__ico > svg {
    transition: none;
  }

  .top-bar-actions__spin {
    animation-duration: 1.6s;
  }
}
/* ==========================================================================
   TopBarProfile — avatar trigger + dropdown menu.
   Visual match to influencers-hub SidebarProfile, built with plain React + CSS.
   ========================================================================== */

.top-bar-profile {
  position: relative;
  flex-shrink: 0;
}

.top-bar-profile__avatar {
  border-radius: 50%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

/* panel: rounded-[10px] border-white/[0.07] bg-[#232328] p-1.5 shadow */
.top-bar-profile__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 250px;
  padding: 8px;
  background: #232328;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 1000010;
  text-align: left; /* the TopBar right column is right-aligned; reset inside the panel */
}

/* header: nickname + email */
.top-bar-profile__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 13px 4px;
}

.top-bar-profile__header-name {
  font-family: 'Titillium Web', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: white;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-bar-profile__header-email {
  font-family: 'Titillium Web', sans-serif;
  font-size: 13px;
  line-height: 1.2;
  color: #6b7280; /* gray-500 */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* menu item (a real <button>, so keyboard focus/activation come for free) */
.top-bar-profile__menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  width: 100%;
  padding: 12px 13px;
  background: transparent;
  border: none;
  border-radius: 8px;
  text-align: left;
  font-family: 'Titillium Web', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #d1d5db; /* gray-300 */
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.top-bar-profile__menu-item:hover,
.top-bar-profile__menu-item:focus-visible {
  background: #1e1e22; /* nav-hover */
  color: white;
  outline: none;
}

.top-bar-profile__menu-item:disabled,
.top-bar-profile__menu-item:disabled:hover {
  background: transparent;
  color: #4b5563; /* gray-600 */
  cursor: default;
}

.top-bar-profile__menu-icon {
  display: flex;
  flex-shrink: 0;
}

/* separator: mx-1.5 my-[5px] h-px bg-white/5 */
.top-bar-profile__separator {
  height: 1px;
  margin: 5px 6px;
  background: rgba(255, 255, 255, 0.05);
}
/* ==========================================================================
   EditProfileModal — fixed overlay (portaled to <body>), visual match to
   influencers-hub. Plain div, not <dialog>, so it renders reliably above the
   campaign's screen overlays regardless of stacking context.
   ========================================================================== */

.edit-profile-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000020; /* above MidRunObjectivesNew (1000001) and EscapeMenu (1000002) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.edit-profile-modal {
  width: 90vw;
  max-width: 528px;
  max-height: 100vh;
  border-radius: 24px;
  background: #171717;
  color: white;
  overflow: hidden;
}

.edit-profile-modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 30px 32px;
  box-sizing: border-box;
  font-family: 'Titillium Web', sans-serif;
}

.edit-profile-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: background-color 0.15s;
}

.edit-profile-modal__close:focus-visible {
  outline: 2px solid #ffba00;
  outline-offset: 2px;
}

.edit-profile-modal__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: white;
}

.edit-profile-modal__avatar-wrap {
  position: relative;
  width: 130px;
  height: 130px;
}

.edit-profile-modal__avatar {
  display: block;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  /* brand-gradient ring: gradient fills the transparent border area */
  border: 3px solid transparent;
  background: linear-gradient(90deg, #ffba00, #e0004e) border-box;
  transition: opacity 0.15s;
  -webkit-user-drag: none;
  user-select: none;
}

.edit-profile-modal__avatar--uploading {
  opacity: 0.5;
}

/* dark disc + white pen, per reference design */
.edit-profile-modal__pen-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0; /* override global button padding, else the icon is pushed out of view */
  border-radius: 50%;
  border: 3px solid #171717; /* modal bg — separation from avatar */
  background: #e5e5e5;
  color: #171717;
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}

.edit-profile-modal__pen-btn:focus-visible {
  outline: 2px solid #ffba00;
  outline-offset: 2px;
}

.edit-profile-modal__pen-btn:hover {
  background: #ffffff;
}

.edit-profile-modal__pen-btn:active {
  transform: scale(0.9);
}

.edit-profile-modal__pen-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.edit-profile-modal__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.edit-profile-modal__label {
  font-size: 15px;
  font-weight: 500;
  color: #a3a3a3;
}

.edit-profile-modal__row {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.edit-profile-modal__input {
  flex: 1;
  min-width: 0;
  height: 60px;
  padding: 0 20px;
  background: transparent;
  border: none;
  border-radius: 10px;
  outline: none;
  box-shadow: inset 0 0 0 1px #404040;
  font-family: inherit;
  font-size: 20px;
  color: white;
  box-sizing: border-box;
  transition: box-shadow 0.15s;
}

.edit-profile-modal__input::placeholder {
  color: #525252;
}

.edit-profile-modal__input:focus {
  box-shadow: inset 0 0 0 1px #ffba00;
}

.edit-profile-modal__save-btn {
  flex-shrink: 0;
  height: 60px;
  padding: 0 30px;
  background: linear-gradient(90deg, #ffba00, #e0004e);
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  color: white;
  transition: filter 0.15s, transform 0.15s;
}

.edit-profile-modal__save-btn:enabled {
  cursor: pointer;
}

.edit-profile-modal__save-btn:enabled:hover {
  filter: brightness(1.1);
}

.edit-profile-modal__save-btn:enabled:active {
  transform: scale(0.98);
}

.edit-profile-modal__save-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.edit-profile-modal__error {
  font-size: 14px;
  color: #ff5656;
}

/* Native file input is never shown — the pen button is the only trigger. */
.edit-profile-modal__file-input {
  display: none;
}
.game-inactive-page {
  width: 100%;
  height: 100vh;
  background-color: #0f0f0f;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.game-inactive-page__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 24px;
}

.game-inactive-page__icon {
  width: 440px;
  height: 440px;
  max-width: 100%;
  object-fit: contain;
}

.game-inactive-page__title {
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.2;
  max-width: 880px;
}

.game-inactive-page__message {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  font-size: 18px;
  line-height: 1.4;
  max-width: 720px;
}

.game-inactive-page__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  background: linear-gradient(180deg, #fbbd00 0.287%, #ff9a3d 100%);
  color: #1e1e1e;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 3px;
}

.game-inactive-page__cta-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentcolor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.game-inactive-page__cta:hover {
  filter: brightness(0.95);
}

.game-inactive-page__footer {
  width: 100%;
  min-height: 100px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  padding: 16px 16px 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.game-inactive-page__logo {
  width: 133px;
  height: 36px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .game-inactive-page__icon {
    width: 300px;
    height: 300px;
  }

  .game-inactive-page__title {
    font-size: 36px;
  }

  .game-inactive-page__message {
    font-size: 16px;
  }

  .game-inactive-page__cta {
    min-height: 44px;
    font-size: 15px;
  }
}
/* ==========================================================================
   EmailGate — full-screen blocking overlay forcing email entry after Steam
   registration. Visual match to influencers-hub EmailModal.
   ========================================================================== */

@keyframes email-gate-shake {
  20% { transform: translateX(-2px); }
  45% { transform: translateX(2px); }
  70% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

.email-gate {
  position: fixed;
  inset: 0;
  z-index: 1000030;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'Titillium Web', sans-serif;
}

/* centered popup card — campaign shows through the blurred backdrop behind it */
.email-gate__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 460px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px 40px 32px;
  box-sizing: border-box;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(224, 0, 78, 0.14) 0%, rgba(23, 23, 23, 0) 55%),
    #171717;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.email-gate__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-gate__logo-img {
  height: 32px;
  width: auto;
}

.email-gate__avatar-wrap {
  position: relative;
  width: 104px;
  height: 104px;
}

.email-gate__avatar {
  display: block;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  /* brand-gradient ring: gradient fills the transparent border area */
  border: 3px solid transparent;
  background: linear-gradient(90deg, #ffba00, #e0004e) border-box;
  -webkit-user-drag: none;
  user-select: none;
  transition: opacity 0.15s;
}

.email-gate__avatar--uploading {
  opacity: 0.5;
}

/* pen edit button — 1:1 with EditProfileModal: white disc, dark pen */
.email-gate__pen-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0; /* override global button padding */
  border-radius: 50%;
  border: 3px solid #171717; /* popup bg — separation from avatar */
  background: #e5e5e5;
  color: #171717;
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}

.email-gate__pen-btn:hover {
  background: #ffffff;
}

.email-gate__pen-btn:active {
  transform: scale(0.9);
}

.email-gate__pen-btn:focus,
.email-gate__pen-btn:focus-visible {
  outline: none;
}

.email-gate__pen-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.email-gate__file-input {
  display: none;
}

.email-gate__intro {
  text-align: center;
}

.email-gate__title {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: white;
}

.email-gate__connected {
  display: inline-block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a3a3a3;
}

.email-gate__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.email-gate__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.email-gate__label {
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.email-gate__input {
  height: 48px;
  width: 100%;
  padding: 0 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  outline: none;
  box-shadow: inset 0 0 0 1px #404040;
  font-family: inherit;
  font-size: 16px;
  color: white;
  box-sizing: border-box;
  transition: box-shadow 0.15s;
}

.email-gate__input::placeholder {
  color: #525252;
}

.email-gate__input:focus {
  box-shadow: inset 0 0 0 1px #ffba00;
}

.email-gate__input--error,
.email-gate__input--error:focus {
  box-shadow: inset 0 0 0 1px #ff5656;
}

.email-gate__error {
  font-size: 13px;
  color: #ff5656;
}

/* Reassurance note between the email field and Continue */
.email-gate__note {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  /* brand-gradient border, same technique as the avatar ring: card-bg inner
     fill on padding-box (no tint), gradient on border-box */
  border: 1px solid transparent;
  border-radius: 10px;
  background:
    linear-gradient(#171717, #171717) padding-box,
    linear-gradient(90deg, #ffba00, #e0004e) border-box;
}

.email-gate__note-icon {
  font-size: 16px;
  line-height: 1.4;
}

.email-gate__note-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #d5d5d5;
}

.email-gate__note-text strong {
  color: white;
  font-weight: 600;
}

.email-gate__note-dim {
  color: #a3a3a3;
}

.email-gate__submit {
  height: 48px;
  width: 100%;
  margin-top: 2px;
  padding: 0;
  background: linear-gradient(90deg, #ffba00, #e0004e);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}

.email-gate__submit:hover {
  filter: brightness(1.1);
}

.email-gate__submit:active {
  transform: scale(0.98);
}

.email-gate__submit:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.email-gate__terms {
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #a3a3a3;
}

.email-gate__terms a {
  color: inherit;
  text-decoration: underline;
}

.email-gate__terms a:hover {
  color: white;
}