/* 仅抽卡层：镜头参照用户视频；大厅样式不变。 */
.stage {
  --media-accent: #ffd391;
  --media-black: #04151c;
  position: fixed;
  inset: 0;
  z-index: 60;
  isolation: isolate;
  overflow: hidden;
  background: var(--media-black);
  color: #f1f0e8;
  font-family: var(--font-text);
  -webkit-tap-highlight-color: transparent;
}
.stage--b { --media-accent: #8edfff; }
.stage[hidden] { display: none; }
.stage__media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.stage__grain { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .1; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .12) 3px 4px); }
.stage__skip { position: absolute; z-index: 10; top: max(25px, env(safe-area-inset-top)); right: max(30px, env(safe-area-inset-right)); display: grid; place-items: center; min-width: 68px; min-height: 42px; padding: 10px 17px; border: 1px solid #627680; border-radius: 3px; background: rgba(4, 16, 23, .8); color: #f1f0e8; font: 13px / 1.3 var(--font-text); cursor: pointer; }
.stage__skip:hover { border-color: var(--media-accent); color: var(--media-accent); }
.stage__skip:focus-visible { outline: 2px solid var(--media-accent); outline-offset: 4px; }

/* 无障碍文本与 3D 舞台共用抽取数据，不提前读出。WebGL 不可用时直接显示。 */
.stage.has-3d:not(.no-motion) .stage__result { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stage__result { position: absolute; inset: 0; display: grid; place-items: center; padding: 80px 24px; }
.stage__result-face { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; width: min(950px, 100%); padding: 38px 20px; color: #f1f0e8; }
.stage__name { --glyphs: 3; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: 0; font-size: clamp(24px, calc(740px / var(--glyphs)), 125px); font-weight: 900; line-height: 1.25; text-align: center; text-wrap: pretty; text-shadow: 4px 7px #152b37, 6px 9px #47718a; }
.glyph, .glyph__in { display: inline-block; }
.stage__name-title { max-width: 100%; padding: 11px 26px; border: 2px solid var(--media-accent); background: #071119; color: var(--media-accent); font-size: clamp(16px, 2.6vw, 26px); font-weight: 800; line-height: 1.5; letter-spacing: .12em; text-align: center; overflow-wrap: anywhere; }
.stage__name-title:empty { display: none; }
.stage.no-motion .stage__media, .stage.no-motion .stage__grain { display: none; }
@media (max-width: 600px) {
  .stage__skip { top: max(18px, env(safe-area-inset-top)); right: 18px; min-width: 60px; padding: 9px 13px; }
  .stage__result { padding: 80px 16px; }
  .stage__result-face { padding: 34px 6px; gap: 27px; }
  .stage__name { font-size: clamp(23px, calc((100vw - 72px) / var(--glyphs)), 86px); text-shadow: 3px 5px #152b37, 4px 6px #47718a; }
  .stage__name-title { padding: 9px 17px; font-size: 17px; }
}
@media (max-height: 480px) {
  .stage__result { padding: 30px 60px; }
  .stage__result-face { height: 100%; padding: 22px 12px; gap: 20px; }
  .stage__name { font-size: clamp(26px, 15vh, 75px); }
  .stage__name-title { padding: 6px 14px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage__media, .stage__grain { display: none; }
  .stage.has-3d:not(.no-motion) .stage__result { inset: 0; width: auto; height: auto; margin: 0; padding: 80px 24px; overflow: visible; clip-path: none; white-space: normal; }
}