/* 沉浸体验壳层：仅供 data-app-mode=fullscreen 的相机、游戏和训练舞台使用。 */
[data-app-mode="fullscreen"] {
  --yz-experience-glass-fill: rgb(12 13 16 / .34);
  --yz-experience-glass-strong: rgb(8 9 12 / .58);
  --yz-experience-glass-line: rgb(255 255 255 / .22);
  --yz-experience-safe-top: max(.7rem, env(safe-area-inset-top));
  --yz-experience-safe-right: max(.7rem, env(safe-area-inset-right));
  --yz-experience-safe-bottom: max(.7rem, env(safe-area-inset-bottom));
  --yz-experience-safe-left: max(.7rem, env(safe-area-inset-left));
  font-family: var(--font-ui);
}

/* 全屏应用继承统一的思源风字体；具体信息层级仍由功能样式引用 display / data token。 */
[data-app-mode="fullscreen"] :is(button, input, select, textarea) { font-family: inherit; }

[data-app-mode="fullscreen"] .yz-experience-control,
[data-app-mode="fullscreen"] .yz-experience-panel {
  border: 1px solid var(--yz-experience-glass-line);
  background: var(--yz-experience-glass-fill);
  box-shadow: 0 .6rem 1.8rem rgb(0 0 0 / .14);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

[data-app-mode="fullscreen"] .yz-experience-back { min-width: 2.75rem; min-height: 2.75rem; }

/* Fullscreen HUDs reserve balanced side lanes so a central timer or title never competes with controls. */
[data-app-mode="fullscreen"] .yz-experience-hud {
  --yz-experience-hud-side: clamp(7rem, 25vw, 13.5rem);
  display: grid;
  grid-template: auto 1fr auto / var(--yz-experience-hud-side) minmax(0, 1fr) var(--yz-experience-hud-side);
}
[data-app-mode="fullscreen"] .yz-experience-hud__center { grid-column: 2; min-width: 0; justify-self: center; }
[data-app-mode="fullscreen"] .yz-experience-hud__status,
[data-app-mode="fullscreen"] .yz-experience-hud__bottom { grid-column: 1 / -1; }
[data-app-mode="fullscreen"] .yz-experience-control-cluster { display: flex; max-width: var(--yz-experience-hud-side); align-items: center; justify-content: flex-end; }

@media (max-height: 30rem) and (orientation: landscape) {
  [data-app-mode="fullscreen"] .yz-experience-hud { --yz-experience-hud-side: 2.8rem; }
  [data-app-mode="fullscreen"] .yz-experience-control-cluster { flex-direction: column; align-items: flex-end; }
}

/* Experience-only loaders and capability gates intentionally stay out of the paper site. */
.yz-loader { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); color: #17181b; background: rgb(247 245 239 / .94); }
.yz-loader[hidden] { display: none !important; }
.yz-loader__card { display: grid; justify-items: center; gap: .82rem; width: min(100%, 20rem); padding: 1.25rem; border: 1px solid rgb(255 255 255 / .86); border-radius: 1.4rem; background: rgb(255 255 255 / .62); box-shadow: 0 1.1rem 3rem rgb(29 29 31 / .14); text-align: center; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.yz-loader__mark { width: 3.5rem; height: 3.5rem; padding: .28rem; border: 1px solid rgb(20 21 24 / .12); border-radius: 50%; background: #fff; box-shadow: 0 .45rem 1.4rem rgb(17 18 21 / .13); animation: yz-loader-spin .9s linear infinite reverse; }
.yz-loader__spinner { width: 1.15rem; height: 1.15rem; border: 2px solid rgb(20 21 24 / .14); border-top-color: rgb(var(--brand-red)); border-radius: 50%; animation: yz-loader-spin .7s linear infinite reverse; }
.yz-loader__copy { display: grid; gap: .25rem; }
.yz-loader__copy p { margin: 0; color: rgb(20 21 24 / .56); font-size: .66rem; font-weight: 780; letter-spacing: .14em; text-transform: uppercase; }
.yz-loader__copy strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.yz-loader__copy span { color: rgb(20 21 24 / .64); font-size: .76rem; line-height: 1.45; }
.yz-fullscreen-prompt { position: fixed; z-index: 101; inset: 0; display: grid; align-content: center; justify-items: center; gap: .45rem; padding: 1.5rem; color: #fff; background: rgb(7 8 10 / .74); text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.yz-fullscreen-prompt p { margin: 0; color: rgb(255 255 255 / .66); font-size: .72rem; font-weight: 740; letter-spacing: .12em; text-transform: uppercase; }
.yz-fullscreen-prompt strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.yz-fullscreen-prompt button { min-width: 9rem; min-height: 2.8rem; margin-top: .28rem; border: 1px solid rgb(255 255 255 / .66); border-radius: 999px; color: #151619; background: #fff; font: 760 .82rem/1 var(--font-ui); }
.yz-landscape-gate { position: fixed; z-index: 102; inset: 0; display: grid; align-content: center; justify-items: center; gap: .45rem; padding: 1.5rem; color: #fff; background: rgb(7 8 10 / .88); text-align: center; }
.yz-landscape-gate span { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border: 1px solid rgb(255 255 255 / .38); border-radius: 1rem; font-size: 2rem; }
.yz-landscape-gate strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.yz-landscape-gate p { margin: 0; color: rgb(255 255 255 / .68); font-size: .78rem; }