html, body { margin: 0; height: 100%; overflow: hidden; background: #1a0d07; color: #fff;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; touch-action: none; }

#unity-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block;
  background: transparent; outline: none; z-index: 1; }
#ar-video { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; object-fit: cover;
  z-index: 0; display: none; background: #000; }
body.ar #ar-video { display: block; }
body.ar { background: #000; }

/* 加载页 */
#loader { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #6b2d12 0%, #2a120a 60%, #120804 100%); transition: opacity .6s; }
#loader.done { opacity: 0; pointer-events: none; }
.loader-card { text-align: center; padding: 24px; max-width: 420px; }
.loader-sun { width: 96px; height: 96px; border-radius: 50%; filter: invert(78%) sepia(40%) saturate(600%) hue-rotate(5deg);
  animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-card h1 { margin: 18px 0 4px; font-size: 34px; letter-spacing: 8px; color: #ffd98a; }
.loader-card .sub { margin: 0 0 22px; color: #e8c9a0; font-size: 14px; letter-spacing: 2px; }
.progress { height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; }
#progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #c8892f, #ffd98a); transition: width .2s; }
#progress-text { margin: 10px 0 0; font-size: 14px; color: #f3e2c8; }
.tip { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.5); }

/* 工具栏 */
#toolbar { position: fixed; z-index: 5; right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; }
#toolbar button, #toolbar .btn { font: inherit; font-size: 15px; color: #fff; text-decoration: none; text-align: center;
  background: rgba(40, 20, 10, .72); border: 1px solid rgba(255, 217, 138, .45); border-radius: 22px;
  padding: 10px 16px; min-width: 44px; white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; }
#toolbar .primary { background: linear-gradient(135deg, #d9962f, #a65a17); border-color: #ffd98a; font-weight: bold; }
#toolbar button:disabled { opacity: .5; }
@media (orientation: portrait) {
  #toolbar { top: auto; transform: none; right: auto; left: 50%; translate: -50% 0;
    bottom: calc(96px + env(safe-area-inset-bottom)); flex-direction: row; }
}

/* AR 提示 */
#ar-hint { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center;
  justify-content: center; pointer-events: none; text-shadow: 0 1px 4px #000; }
#ar-hint[hidden] { display: none; }
#ar-hint .frame { width: 56vmin; height: 56vmin; border: 3px dashed rgba(255, 217, 138, .9); border-radius: 12px;
  animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); opacity: .6; } }
#ar-hint p { margin: 18px 0 8px; font-size: 18px; }
#ar-hint a { pointer-events: auto; color: #ffd98a; font-size: 14px; }

#toast { position: fixed; z-index: 20; left: 50%; top: calc(16px + env(safe-area-inset-top)); transform: translateX(-50%);
  max-width: 86vw; padding: 10px 16px; border-radius: 10px; background: rgba(120, 20, 10, .92); font-size: 14px; }
#toast[hidden] { display: none; }

/* 文字 HUD（网页版没有系统中文字体，文字由网页绘制） */
#hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
#hud[hidden] { display: none; }
#hud-title { position: absolute; left: calc(18px + env(safe-area-inset-left)); top: calc(14px + env(safe-area-inset-top)); }
#hud-title h2 { margin: 0; font-size: clamp(20px, 3.4vw, 34px); color: #ffdb8c; letter-spacing: 2px; }
#hud-title p { margin: 4px 0 0; font-size: clamp(12px, 1.5vw, 16px); color: #fbf3e6; }
#hud-info { position: absolute; right: 18px; top: 16px; width: min(420px, calc(100vw - 36px)); box-sizing: border-box;
  padding: 14px 18px; border-radius: 12px; background: rgba(30, 14, 6, .62); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); transition: opacity .5s; }
#hud-info.hide { opacity: 0; }
#hud-info h3 { margin: 0 0 6px; font-size: 18px; color: #ffe2a8; }
#hud-info p { margin: 0; font-size: 14px; line-height: 1.6; color: #fbf3e6; }
#hud-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: calc(100vw - 32px); box-sizing: border-box; padding: 8px 16px; border-radius: 18px;
  background: rgba(30, 14, 6, .55); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (orientation: portrait) {
  #hud-info { right: auto; left: 18px; top: calc(86px + env(safe-area-inset-top)); }
  #hud-hint { white-space: normal; text-align: center; width: calc(100vw - 32px); }
  #toolbar { bottom: calc(70px + env(safe-area-inset-bottom)); }
}