/* A quiet, tactile entrance. The opening renderer continues as the LÜ Core. */
.lu-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  --intro-backdrop: url('../assets/backgrounds/lu-intro-d-one-piece-wide.png');
  --lu-theme-edge: #6bc5d1;
  --lu-theme-glow: #b8e7da;
  --lu-intro-ink: #f4fbf7;
  --lu-intro-muted: #e0f0eb;
  --lu-intro-control-surface: rgba(5, 27, 39, .88);
  --lu-intro-control-line: rgba(225, 240, 239, .22);
  --lu-intro-title-scrim: rgba(3, 22, 33, .74);
  --lu-intro-art-scrim: rgba(3, 22, 33, .62);
  --lu-intro-clear: rgba(3, 22, 33, 0);
  color: var(--lu-intro-ink);
  background: #082838;
  perspective: 1400px;
}
.lu-intro-overlay[data-theme="dragon-ball"] {
  --lu-theme-edge: #7fd8ae;
  --lu-theme-glow: #e5c66c;
  --lu-intro-ink: #f4fae9;
  --lu-intro-muted: #e7f3e5;
  --intro-backdrop: url('../assets/backgrounds/lu-intro-d-dragon-ball-wide.png');
  background: #071d35;
}
.lu-intro-overlay[data-theme="naruto"] {
  --lu-theme-edge: #8c85d7;
  --lu-theme-glow: #8ec7e7;
  --lu-intro-ink: #302633;
  --lu-intro-muted: #4a3e4b;
  --lu-intro-control-surface: rgba(255, 245, 226, .94);
  --lu-intro-control-line: rgba(48, 38, 51, .22);
  --lu-intro-title-scrim: rgba(255, 242, 219, .86);
  --lu-intro-art-scrim: rgba(255, 242, 219, .5);
  --lu-intro-clear: rgba(255, 242, 219, 0);
  --intro-backdrop: url('../assets/backgrounds/lu-intro-d-naruto-wide.png');
  background: #ead5b7;
}
.lu-intro-overlay[hidden] { display: none !important; }
.lu-intro-overlay.is-revealing { background: transparent; }
.lu-intro-curtain {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: flex;
  pointer-events: none;
}
.lu-intro-curtain i {
  position: relative;
  display: block;
  width: 50%;
  height: 100%;
  overflow: hidden;
  background: inherit;
  transition: transform 1180ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.lu-intro-curtain i::before {
  content: '';
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 48% 11% at 50% 12%, var(--lu-intro-title-scrim), var(--lu-intro-clear) 100%),
    radial-gradient(ellipse 40% 18% at 50% 72%, var(--lu-intro-art-scrim), var(--lu-intro-clear) 100%),
    var(--intro-backdrop);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.lu-intro-curtain i:first-child::before { left: 0; }
.lu-intro-curtain i:last-child::before { right: 0; }
.lu-intro-curtain i:first-child { transform-origin: right center; }
.lu-intro-curtain i:last-child { transform-origin: left center; }
.lu-intro-wordmark {
  position: absolute;
  z-index: 1;
  top: 5.5%;
  left: 50%;
  width: 100%;
  padding: 0 4%;
  color: var(--lu-intro-ink);
  font: 900 clamp(64px, 8vw, 132px)/.85 Impact, 'Arial Black', sans-serif;
  letter-spacing: -.065em;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(4, 25, 36, .8);
  text-shadow: 0 2px 3px rgba(4, 25, 36, .9), 0 8px 24px rgba(0, 18, 29, .6);
  transform: translateX(-50%) scaleX(.84);
  pointer-events: none;
  transition: opacity 260ms ease;
}
.lu-intro-overlay[data-theme="naruto"] .lu-intro-wordmark {
  -webkit-text-stroke-color: rgba(255, 244, 222, .92);
  text-shadow: 0 1px 3px #fff4de, 0 0 18px rgba(255, 244, 222, .8);
}
.lu-intro-curtain i:first-child::after,
.lu-intro-curtain i:last-child::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent 15%, rgba(255, 191, 94, .72), transparent 85%);
  box-shadow: 0 0 24px 5px rgba(255, 157, 48, .2);
  opacity: 0;
  transition: opacity 300ms ease;
}
.lu-intro-curtain i:first-child::after { right: 0; }
.lu-intro-curtain i:last-child::after { left: 0; }
.lu-intro-overlay.is-revealing .lu-intro-curtain i:first-child { transform: translateX(-104%) rotateY(-8deg); }
.lu-intro-overlay.is-revealing .lu-intro-curtain i:last-child { transform: translateX(104%) rotateY(8deg); }
.lu-intro-overlay.is-revealing .lu-intro-curtain i:first-child::after,
.lu-intro-overlay.is-revealing .lu-intro-curtain i:last-child::after { opacity: 1; }
body.lu-intro-active .stageWrap {
  transform: scale(1.07);
  transform-origin: center;
  transition: transform 1180ms cubic-bezier(.16, 1, .3, 1);
}
body.lu-intro-revealing .stageWrap { transform: scale(1); }
.lu-intro-tools {
  position: absolute;
  z-index: 3;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
}
.lu-intro-tools button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--lu-intro-ink);
  background: var(--lu-intro-control-surface);
  box-shadow: inset 0 0 0 1px var(--lu-intro-control-line);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.lu-intro-tools button:hover { box-shadow: inset 0 0 0 1px var(--lu-theme-edge); }
.lu-intro-tools button:active,
.lu-intro-skip:active,
.lue-create-intro-actions button:active { transform: scale(.94); }
.lu-intro-tools svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}
.lu-intro-tools button[aria-pressed="true"] .lu-sound-off,
.lu-intro-tools button[aria-pressed="false"] .lu-sound-on { display: none; }
.lu-intro-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;
  padding: 64px 20px 76px;
  box-sizing: border-box;
  text-align: center;
}
.lu-intro-activate {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(430px, max(260px, 86vw));
  height: min(430px, max(260px, 86vw));
  padding: 0;
  border: 0;
  background: transparent;
  color: #e9dccb;
  cursor: pointer;
  transform-origin: center;
  transition: transform 1180ms cubic-bezier(.16, 1, .3, 1), opacity 470ms ease 610ms;
}
.lu-intro-activate:disabled { cursor: wait; }
.lu-intro-activate .lu-cube-canvas { display: block; max-width: 100%; }
.lu-intro-activate:has(.lu-cube-canvas) .lu-intro-fallback { display: none; }
.lu-intro-fallback {
  display: grid;
  place-items: center;
  width: 154px;
  height: 154px;
}
.lu-intro-fallback img { display: block; width: 100%; height: 100%; }
.lu-intro-hint {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  padding: 3px 12px;
  border-radius: 12px;
  color: var(--lu-intro-ink);
  background: var(--lu-intro-control-surface);
  font: 500 12px/1.5 'PingFang SC', 'Noto Sans CJK SC', sans-serif;
  letter-spacing: .2em;
  transition: opacity 200ms ease, transform 200ms ease;
}
#avatarGroupTabs .pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.lu-theme-art {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 8px 7px rgba(8, 16, 23, .55));
  transform: perspective(420px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(4px);
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1), filter 240ms ease;
}
.lu-theme-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateZ(6px);
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}
.lu-theme-art--compact { flex-basis: 30px; width: 30px; height: 30px; }
.lu-intro-theme-select {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 38px);
  margin-top: 20px;
  transition: opacity 230ms ease, transform 230ms ease;
}
.lu-intro-theme {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 88px;
  min-height: 98px;
  padding: 0;
  border: 0;
  color: var(--lu-intro-muted);
  background: transparent;
  cursor: pointer;
  font: 600 12px/1.4 'PingFang SC', 'Noto Sans CJK SC', sans-serif;
  transition: transform 200ms ease, color 200ms ease;
}
.lu-intro-theme:hover { transform: translateY(-3px); color: var(--lu-intro-ink); }
.lu-intro-theme:hover .lu-theme-art { transform: perspective(420px) rotateX(var(--tilt-x, -4deg)) rotateY(var(--tilt-y, 6deg)) translateY(-3px) translateZ(8px) scale(1.06); }
.lu-intro-theme:active { transform: scale(.96); }
.lu-intro-theme.active {
  color: var(--lu-intro-ink);
}
.lu-intro-theme > span:last-child {
  min-width: 56px;
  padding: 3px 8px;
  border: 1px solid var(--lu-intro-control-line);
  border-radius: 12px;
  background: var(--lu-intro-control-surface);
}
.lu-intro-theme.active > span:last-child { border-color: var(--lu-theme-edge); }
.lu-intro-theme.active .lu-theme-art { filter: drop-shadow(0 8px 8px rgba(15, 16, 21, .5)) drop-shadow(0 0 8px var(--lu-theme-edge)); }
.lu-intro-theme[data-theme="one-piece"] { --lu-theme-edge: #6bc5d1; }
.lu-intro-theme[data-theme="dragon-ball"] { --lu-theme-edge: #7fd8ae; }
.lu-intro-theme[data-theme="naruto"] { --lu-theme-edge: #8c85d7; }
.lu-intro-skip {
  position: absolute;
  z-index: 3;
  right: max(27px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--lu-intro-control-line);
  border-radius: 22px;
  color: var(--lu-intro-ink);
  background: var(--lu-intro-control-surface);
  font: 500 12px/1 'PingFang SC', 'Noto Sans CJK SC', sans-serif;
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease;
}
.lu-intro-skip:hover { border-color: var(--lu-theme-edge); }
.lu-intro-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.lu-intro-tools button:focus-visible,
.lu-intro-skip:focus-visible,
.lu-intro-activate:focus-visible,
.lu-intro-theme:focus-visible { outline: 2px solid var(--lu-theme-edge); outline-offset: 4px; }
.lu-intro-overlay.is-revealing .lu-intro-activate { transform: scale(1.78); opacity: 0; }
.lu-intro-overlay.is-revealing :is(.lu-intro-hint, .lu-intro-tools, .lu-intro-skip, .lu-intro-theme-select, .lu-intro-wordmark) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.brand-glyph-box { box-sizing: border-box; overflow: visible; padding: 0; background: transparent; border: 0; box-shadow: none; }
.brand-glyph-box img { display: block; width: 100%; height: 100%; object-fit: contain; }
.performance-capsule .performance-capsule-mark {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  background: transparent;
}
.lu-core-mark-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.lu-core-mark-fallback img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 6px rgba(255, 160, 42, .28));
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}
.performance-capsule-mark[data-facet="choreo"] img { transform: rotate(-8deg); }
.performance-capsule-mark[data-facet="create"] img { transform: rotate(8deg); }
.performance-capsule-mark[data-facet="record"] img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .lu-core-mark-fallback img { transition: none; }
}
.lue-create-intro-actions { display: flex; gap: 8px; margin-top: 10px; }
.lue-create-intro-actions .btn { flex: 1 1 50%; min-width: 0; }
@media (max-width: 760px) {
  .lu-intro-overlay { --intro-backdrop: url('../assets/backgrounds/lu-intro-d-one-piece-portrait.png'); }
  .lu-intro-overlay[data-theme="dragon-ball"] { --intro-backdrop: url('../assets/backgrounds/lu-intro-d-dragon-ball-portrait.png'); }
  .lu-intro-overlay[data-theme="naruto"] { --intro-backdrop: url('../assets/backgrounds/lu-intro-d-naruto-portrait.png'); }
  .lu-intro-stage { padding-top: 76px; }
  .lu-intro-wordmark { top: 11%; font-size: clamp(45px, 12vw, 64px); }
  .lu-intro-hint { margin-top: 8px; }
  .lu-intro-theme-select { gap: 8px; margin-top: 14px; }
  .lu-intro-theme { width: 82px; min-height: 92px; }
  .lu-intro-theme .lu-theme-art { flex-basis: 74px; width: 74px; height: 74px; }
  .performance-capsule .performance-capsule-mark { flex-basis: 38px; width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .lu-theme-art, .lu-theme-art img { transition: none !important; transform: none !important; }
  html:not(.lu-full-motion) .lu-intro-curtain i,
  html:not(.lu-full-motion) .lu-intro-activate,
  html:not(.lu-full-motion) body.lu-intro-active .stageWrap,
  html:not(.lu-full-motion) .lu-intro-hint,
  html:not(.lu-full-motion) .lu-intro-theme-select { transition: none !important; }
}