/* ============================================================
   AIGG Runtime — "Living Table" 重外壳主题(覆盖层 v2)
   ------------------------------------------------------------
   把现有【可玩】运行时(index.html 3D / index-2d.html 2D)的【交互外壳】
   整体重做成设计稿的 "Living Table" 语言:
     · 深色玻璃悬浮 chrome(顶栏化为悬浮玻璃药丸)
     · 满屏舞台为主角 + 大类签名色背景 + 暗角
     · AI 主持化为一个有生命的角色坞(头像会眨眼/说话时呼吸光环)
     · 实体动作以"屏幕上的牌桌"高亮语言呈现(live 点 + 脉冲)
     · 玩家头像条、药丸按钮、Sora 字体、mono kicker
   只换外壳:不改游戏渲染、不改 spec、不改音乐音效、不改后端、不改多人。
   每个游戏仍按自己的 spec 渲染棋盘/卡牌/场景,音乐音效经 asset-loader.js 照常。
   配套:aigg/shared/living-shell.js(注入头像/品牌点/视图切换/调节面板并绑定主持说话)。
   加载顺序:必须在 design-system.css + 各自内联 <style> 之后(用 !important 兜底硬编码色)。
   字体走仓库内 vendored(零外部 CDN,国内可用)。
   回退浅色:删三个 html(lobby/index/index-2d)末尾的 living-theme.css <link> 与 living-shell.js <script>。
   ============================================================ */
@import url('../vendor/fonts.css');   /* Sora / Noto Sans SC / JetBrains Mono(本地) */

/* ============================================================
   0) 设计令牌 —— 源自设计稿 ds.css(深冷炭灰让彩色舞台跳出来)
   ============================================================ */
:root, body, body.mode-showcase {
  /* —— design-system 令牌(2D 运行时 + 共享组件) —— */
  --bg:        #14141a;
  --bg-2:      #1d1d26;
  --surface:   rgba(255,255,255,0.045);
  --surface-2: rgba(255,255,255,0.078);
  --surface-3: rgba(255,255,255,0.11);
  --line:      rgba(255,255,255,0.10);
  --line-2:    rgba(255,255,255,0.18);
  --ink:       #f4f5f8;
  --ink-2:     #cdd2db;
  --ink-3:     #9aa0ac;
  --ink-4:     #6f7480;
  --sans:      'Sora','Noto Sans SC',system-ui,sans-serif;
  --display:   'Sora','Noto Sans SC',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.34);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.46);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.6);

  /* —— 3D 运行时本地令牌(--c-*) —— */
  --c-bg-warm:  #14141a;
  --c-paper:    rgba(255,255,255,0.05);
  --c-ink:      #f4f5f8;
  --c-ink-soft: #cdd2db;
  --c-line:     rgba(255,255,255,0.10);

  /* —— Living Table 品牌:暖琥珀 —— */
  --lt-amber:   #f0a868;
  --lt-amber-2: #d97a3a;
  --brand:      #f0a868;
  --brand-2:    #d97a3a;

  /* —— 14 大类签名色(C/L 相近、色相不同,源自 ds.css 的 --acc-*) —— */
  --lt-acc-go:#3fd6a0; --lt-acc-harbor:#e85bc0; --lt-acc-beat:#9b7bff; --lt-acc-wolf:#ff5a4d;
  --lt-acc-park:#5ab0ff; --lt-acc-escape:#e8b24a; --lt-acc-kitchen:#ff8a3d; --lt-acc-party:#cfe24a;
  --lt-acc-rpg:#7d9bff; --lt-acc-wellness:#5fd6e8; --lt-acc-couples:#ff7a9a; --lt-acc-create:#d07aff;
  --lt-acc-learn:#7a9bff; --lt-acc-ar:#3fe0d6;

  /* 当前强调色(被 body.lt-fam-<家族> 覆盖) */
  --accent:      var(--lt-amber);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 42%, transparent);
  --accent-ink:  #16161c;

  --motion: 1; /* 动效强度倍率,可在调节面板里改 */
}

/* 按大类把 --accent 切到签名色 + 同步派生柔光/辉光 */
body.lt-fam-go{--accent:var(--lt-acc-go)} body.lt-fam-harbor{--accent:var(--lt-acc-harbor)}
body.lt-fam-beat{--accent:var(--lt-acc-beat)} body.lt-fam-wolf{--accent:var(--lt-acc-wolf)}
body.lt-fam-park{--accent:var(--lt-acc-park)} body.lt-fam-escape{--accent:var(--lt-acc-escape)}
body.lt-fam-kitchen{--accent:var(--lt-acc-kitchen)} body.lt-fam-party{--accent:var(--lt-acc-party)}
body.lt-fam-rpg{--accent:var(--lt-acc-rpg)} body.lt-fam-wellness{--accent:var(--lt-acc-wellness)}
body.lt-fam-couples{--accent:var(--lt-acc-couples)} body.lt-fam-create{--accent:var(--lt-acc-create)}
body.lt-fam-learn{--accent:var(--lt-acc-learn)} body.lt-fam-ar{--accent:var(--lt-acc-ar)}
body[class*="lt-fam-"]{
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 42%, transparent);
}

/* ============================================================
   1) 页面底:Living Table 冷调近黑 + 顶部柔光 + 大类色微染
   ============================================================ */
body, body.mode-showcase,
body.aigg-physical-ui, body.aigg-2d-runtime-ui, body.aigg-lobby-ui {
  background:
    radial-gradient(125% 90% at 50% -12%,
      color-mix(in srgb, var(--accent) 13%, #20202b) 0%,
      #16161d 48%, #111118 100%) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
}
/* 浅色噪点贴图在深底上过重 → 压淡并改为 screen */
body::before { opacity: 0.05 !important; mix-blend-mode: screen !important; }

* { -webkit-tap-highlight-color: transparent; }
body ::-webkit-scrollbar { width: 7px; height: 7px; }
body ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16) !important; border-radius: 99px; }
body ::-webkit-scrollbar-track { background: transparent !important; }

/* 标题统一 Sora;mono kicker 工具类 */
h1,h2,h3,h4, .display, .r2-title, .scenario-title { font-family: var(--display) !important; letter-spacing: -0.01em; }

/* ============================================================
   2) 启动闪屏(2D #boot/.r2-boot · 3D #aigg-boot)→ 新设计 boot
   ============================================================ */
body #aigg-boot, body #boot, body .r2-boot {
  background: radial-gradient(125% 90% at 50% -12%,
    color-mix(in srgb, var(--accent) 16%, #20202b) 0%, #14141a 60%) !important;
}
body #boot *, body .r2-boot * { color: var(--ink) !important; }
/* boot 标记 → 品牌点(锥形琥珀渐变 + 内嵌深方块) */
body .r2-boot-mark, body .aigg-boot-logo {
  background: conic-gradient(from 210deg, var(--brand), var(--brand-2), var(--brand)) !important;
  color: transparent !important; position: relative;
  box-shadow: 0 0 26px color-mix(in srgb, var(--brand) 45%, transparent), inset 0 0 10px rgba(255,255,255,0.4) !important;
  border: none !important;
}
body .r2-boot-mark::after, body .aigg-boot-logo::after {
  content:''; position:absolute; inset:0; margin:auto; width:30%; height:30%;
  border-radius: 22%; background: #14141a;
}
body .r2-boot-fill, body .aigg-boot-bar-fill {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, white)) !important;
}
body .r2-boot-bar, body .aigg-boot-bar { background: rgba(255,255,255,0.08) !important; }
body .r2-boot-msg, body .aigg-boot-status { color: var(--ink-3) !important; }
body .r2-boot-tag, body .aigg-boot-tagline { color: var(--ink) !important; }

/* ============================================================
   3) 共享玻璃原语
   ============================================================ */
.lt-glass {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  color: var(--ink) !important;
}

/* ============================================================
   4) 2D 运行时(index-2d.html · .r2-*)
   ⚠ design-system.css 用 `body.aigg-physical-ui …` 前缀(高特异性),
      所以这里多数规则同样带 body / body.aigg-physical-ui 前缀或 !important。
   ------------------------------------------------------------
   外壳重做:顶栏化为悬浮玻璃药丸;舞台满屏 + 大类色背景 + 暗角;
   主持坞悬浮左下;行动条悬浮玻璃;侧栏化为右侧玻璃栏;玩家头像条。
   ============================================================ */

/* 设备框/网格 → 透明,露出深底。
   关键:基座 .r2 只定义了行(52px 1fr)没定义列,隐式 auto 列会被宽内容的 max-content 撑破(窄屏溢出)。
   显式 minmax(0,1fr) 把列锁到容器宽度(单列满宽,可收缩),各断点都正确(顶栏行 + 主区行)。 */
body.aigg-physical-ui .r2 { background: transparent !important; grid-template-columns: minmax(0, 1fr) !important; }
body.aigg-physical-ui .r2-main, body.aigg-physical-ui .r2-scroll { background: transparent !important; }

/* —— 顶栏:透明底,子元素各自成玻璃药丸(桌面端再悬浮于舞台之上,见底部 @media) —— */
body.aigg-physical-ui .r2-top {
  background: transparent !important; border-bottom: none !important;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px !important;
  gap: 10px !important;
}
body.aigg-physical-ui .r2-brand {
  padding: 7px 14px 7px 8px; border-radius: 999px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--shadow-sm) !important; color: var(--ink) !important;
}
/* 品牌方块 → 品牌点(锥形琥珀) */
body.aigg-physical-ui .r2-brand .mk {
  background: conic-gradient(from 210deg, var(--brand), var(--brand-2), var(--brand)) !important;
  color: transparent !important; position: relative; border-radius: 9px !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--brand) 42%, transparent), inset 0 0 7px rgba(255,255,255,0.4) !important;
}
body.aigg-physical-ui .r2-brand .mk::after {
  content:''; position:absolute; inset:0; margin:auto; width:32%; height:32%; border-radius: 3px; background:#14141a;
}
body.aigg-physical-ui .r2-brand .sub { color: var(--ink-3) !important; }
/* 游戏名:无边框、降权为标题文字 */
body.aigg-physical-ui .r2-game { border-left: none !important; padding-left: 6px !important; }
body.aigg-physical-ui .r2-game-title { color: var(--ink-2) !important; font-weight: 700 !important; }
body.aigg-physical-ui .r2-phase-chip {
  background: var(--surface) !important; border: 1px solid var(--line) !important; color: var(--ink-2) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body.aigg-physical-ui .r2-phase-chip .dot { background: var(--accent) !important; }
/* 行动区:各按钮成玻璃 */
body.aigg-physical-ui .r2-actions { gap: 7px !important; }
body.aigg-physical-ui .r2-iconbtn,
body.aigg-physical-ui .r2-volume,
body.aigg-physical-ui .r2-pillbtn {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important; color: var(--ink-2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: var(--shadow-sm) !important;
}
body.aigg-physical-ui .r2-iconbtn:hover, body.aigg-physical-ui .r2-pillbtn:hover {
  color: var(--ink) !important; border-color: var(--line-2) !important; transform: translateY(-1px);
}
body.aigg-physical-ui .r2-iconbtn.on {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 76%, black)) !important;
  color: var(--accent-ink) !important; border: none !important;
  box-shadow: 0 6px 18px var(--accent-glow) !important;
}
body.aigg-physical-ui .r2-volume input { accent-color: var(--accent) !important; }
body.aigg-physical-ui .r2-pillbtn.danger {
  color: #ff6b6b !important; border-color: rgba(255,90,77,0.3) !important;
  background: rgba(255,90,77,0.10) !important;
}
body.aigg-physical-ui .r2-pillbtn.danger:hover { background: rgba(255,90,77,0.85) !important; color:#fff !important; }

/* —— 直播条 —— */
body.aigg-physical-ui .r2-watchbar {
  position: fixed !important; top: 58px; left: 14px; right: 14px; z-index: 55;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,20,28,0.85), rgba(14,14,18,0.8)) !important;
  border: 1px solid var(--line) !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
body.aigg-physical-ui .r2-watchbar .ctl.on { background: var(--accent) !important; color: var(--accent-ink) !important; }

/* —— 主舞台:满屏 + 大类签名色背景 + 暗角,给悬浮 chrome 留白 —— */
body.aigg-physical-ui .r2-stage {
  position: relative;
  background:
    radial-gradient(120% 85% at 50% -8%,
      color-mix(in srgb, var(--accent) 18%, transparent) 0%,
      transparent 55%) !important;
  padding: 18px 18px 120px !important;
}
body.aigg-physical-ui .r2-stage::after {
  content:''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(0,0,0,0.5) 100%);
}
body.aigg-physical-ui .r2-stage > * { position: relative; z-index: 1; }

/* —— 主持气泡:舞台顶部、玻璃 + 活头像(头像由 living-shell.js 注入) ——
   2D 舞台底部被 sticky 行动条占用,主持气泡保持在舞台顶部内联流中,避免与行动条打架。 */
body.aigg-physical-ui .r2-narrator {
  position: relative !important;
  margin: 0 0 16px !important; padding: 14px 20px 14px 70px !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px 18px 18px 6px !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: var(--shadow-md) !important; color: var(--ink) !important;
  font-size: 15px !important; line-height: 1.55 !important; min-height: 0 !important;
  flex: 0 0 auto !important; overflow: visible !important;   /* 防 flex 列把气泡压扁裁字 */
}
body.aigg-physical-ui .r2-narrator * { color: var(--ink) !important; }
body.aigg-physical-ui .r2-narrator.idle { color: var(--ink-3) !important; }
/* 原 🎙️ 伪元素隐藏,改用 JS 注入的活头像 */
body.aigg-physical-ui .r2-narrator::before { display: none !important; }
body.aigg-physical-ui .r2-narrator .typer-cursor { background: var(--accent) !important; }

/* —— 舞台内卡片(角色/任务/手牌/棋盘/结算)→ 深玻璃 + 大类描边 —— */
body.aigg-physical-ui .r2-role-card, body.aigg-physical-ui .r2-task-card,
body.aigg-physical-ui .r2-card, body.aigg-physical-ui .r2-end-card,
body.aigg-physical-ui .r2-sheet, body.aigg-physical-ui .r2-modal,
body.aigg-physical-ui .r2-voice-card, body.aigg-physical-ui .r2-voice-prompt {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md) !important;
}
body.aigg-physical-ui .r2-role-card *, body.aigg-physical-ui .r2-task-card *,
body.aigg-physical-ui .r2-card *, body.aigg-physical-ui .r2-end-card *,
body.aigg-physical-ui .r2-voice-card *, body.aigg-physical-ui .r2-voice-prompt * { color: var(--ink); }
body.aigg-physical-ui .r2-card.active, body.aigg-physical-ui .r2-card:hover,
body.aigg-physical-ui .r2-role-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent-soft), 0 16px 44px rgba(0,0,0,0.5) !important;
  transform: translateY(-2px);
}

/* —— 实体动作面板:"屏幕上的牌桌"高亮(live 点 + 大类色脉冲) —— */
body.aigg-physical-ui .r2-board-kicker {
  font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: 0.12em !important;
  text-transform: uppercase; color: var(--accent) !important;
  display: inline-flex; align-items: center; gap: 6px;
}
body.aigg-physical-ui .r2-board-kicker::before {
  content:''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: lt-live calc(1.4s / var(--motion)) infinite;
}
@keyframes lt-live { 0%,100%{opacity:1} 50%{opacity:.25} }
body.aigg-physical-ui .r2-board-detail { color: var(--ink-3) !important; }

/* —— 行动条:悬浮玻璃、按钮换新语言 —— */
body.aigg-physical-ui .r2-actbar {
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, rgba(28,28,38,0.78), rgba(16,16,22,0.72)) !important;
  border: 1px solid var(--line) !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: var(--shadow-md) !important; border-radius: 16px !important;
}
body.aigg-physical-ui .r2-actbar-empty { color: var(--ink-3) !important; }
body.aigg-physical-ui .r2-act-btn {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line-2) !important; color: var(--ink) !important;
  border-radius: 999px !important; font-weight: 700 !important;
}
body.aigg-physical-ui .r2-act-btn:hover { border-color: var(--accent) !important; color: var(--ink) !important; }
body.aigg-physical-ui .r2-act-btn.primary {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 76%, black)) !important;
  color: var(--accent-ink) !important; border: none !important;
  box-shadow: 0 8px 26px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
body.aigg-physical-ui .r2-act-btn.recording {
  background: linear-gradient(180deg, #ff5a4d, #c8362b) !important; color:#fff !important; border:none !important;
}
body.aigg-physical-ui .r2-actor-switch { background: var(--surface) !important; }
body.aigg-physical-ui .r2-actor-switch button { color: var(--ink-3) !important; }
body.aigg-physical-ui .r2-actor-switch button.on {
  background: var(--accent) !important; color: var(--accent-ink) !important; box-shadow: none !important;
}

/* —— 右侧玻璃栏(玩家 + 事件)—— */
body.aigg-physical-ui .r2-side {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border-left: 1px solid var(--line) !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: var(--shadow-md) !important;
}
body.aigg-physical-ui .r2-side-section { border-bottom: 1px solid var(--line) !important; }
body.aigg-physical-ui .r2-side-title { color: var(--ink-3) !important; }
body.aigg-physical-ui .r2-side-title .bar { background: var(--accent) !important; }
body.aigg-physical-ui .r2-side-title .count { color: var(--ink-4) !important; }
/* 玩家行 → 玻璃头像条 */
body.aigg-physical-ui .r2-player {
  background: var(--surface) !important; border: 1px solid transparent !important; color: var(--ink) !important;
}
body.aigg-physical-ui .r2-player * { color: var(--ink) !important; }
body.aigg-physical-ui .r2-player.active {
  background: var(--accent-soft) !important; border-color: var(--accent) !important;
  box-shadow: 0 0 14px var(--accent-glow) !important;
}
body.aigg-physical-ui .r2-player.you { background: var(--surface-2) !important; border-color: var(--line-2) !important; }
body.aigg-physical-ui .r2-player-score { color: var(--accent) !important; }
body.aigg-physical-ui .r2-player-tag.you { background: var(--accent) !important; color: var(--accent-ink) !important; }
/* 事件日志 */
body.aigg-physical-ui .r2-log-item {
  background: var(--surface) !important; color: var(--ink-2) !important; border-left: 3px solid var(--line) !important;
}
body.aigg-physical-ui .r2-log-item .t { color: var(--ink-4) !important; }
body.aigg-physical-ui .r2-log-item.cue { border-left-color: var(--accent) !important; }

/* —— 结算遮罩 + toast —— */
body.aigg-physical-ui .r2-end { background: rgba(10,10,14,0.72) !important; }
body.aigg-physical-ui .r2-end-card .winner { color: var(--accent) !important; }
body.aigg-physical-ui .r2-toast {
  background: var(--surface-3) !important; color: var(--ink) !important;
  border: 1px solid var(--line-2) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
body.aigg-physical-ui .r2-toast.err { background: rgba(255,90,77,0.92) !important; color: #fff !important; }
body.aigg-physical-ui .r2-toast.ok { background: rgba(63,214,160,0.92) !important; color: var(--accent-ink) !important; }
body.aigg-physical-ui .r2-popup { color: var(--accent) !important; }

/* —— 桌面端(≥921px):顶栏悬浮于满屏舞台之上(设计稿招牌:满屏舞台 + 悬浮 chrome) —— */
@media (min-width: 921px) {
  body.aigg-physical-ui .r2 { grid-template-rows: 1fr !important; }
  /* .r2-main 单行未定义 → 给 1fr 让舞台/侧栏撑满高度(否则舞台塌成内容高、行动条上浮) */
  body.aigg-physical-ui .r2-main { grid-template-rows: minmax(0, 1fr) !important; }
  body.aigg-physical-ui .r2-top { position: fixed !important; top: 0; left: 0; right: 0; z-index: 60; }
  body.aigg-physical-ui .r2-stage { padding: 78px 26px 150px !important; }
  body.aigg-physical-ui .r2-side { padding-top: 72px !important; }   /* 清开悬浮顶栏 */
}
/* —— 窄屏:顶栏留在常规行内(基座响应式负责堆叠),压缩文字标签以容纳控件 —— */
@media (max-width: 920px) {
  /* minmax(0,1fr) 防止单列被宽内容的 min-content 撑破(基座 1fr 在缺 phone-screen 类时会溢出) */
  body.aigg-physical-ui .r2-main { grid-template-columns: minmax(0, 1fr) !important; }
  body.aigg-physical-ui .r2-stage, body.aigg-physical-ui .r2-side { min-width: 0 !important; max-width: 100% !important; }
  body.aigg-physical-ui .r2-pillbtn .label { display: none; }     /* 返回/结束 → 仅图标 */
  body.aigg-physical-ui .r2-brand .sub { display: none; }
  body.aigg-physical-ui .r2-volume { min-width: 0; }
  body.aigg-physical-ui .r2-volume > span:first-child { display: none; }  /* 隐"音量"字,留滑杆 */
  body.aigg-physical-ui .r2-volume input { width: 48px; }                 /* 滑杆收窄,腾出返回/结束 */
  body.aigg-physical-ui .lt-gear { display: none; }                       /* 调节面板为桌面附加项 */
}

/* ============================================================
   5) 3D 运行时(index.html)
   ============================================================ */
/* 场景框 + canvas 兜底色(WebGL 场景照常,只换边缘底色) */
body.aigg-runtime-ui .stage { background: radial-gradient(120% 90% at 50% -10%,
  color-mix(in srgb, var(--accent) 12%, rgba(30,30,40,0.6)) 0%, rgba(18,18,24,0.5) 60%) !important; }
body.aigg-runtime-ui .stage-canvas { background: #14141a !important; }

/* 顶部 scene chrome:品牌/场景名/状态/控制药丸/图标钮 → 悬浮玻璃 */
body.aigg-runtime-ui .scene-chrome, body.aigg-runtime-ui .scene-toolbar { background: transparent !important; border: none !important; }
body.aigg-runtime-ui .scene-name, body.aigg-runtime-ui .toy-status, body.aigg-runtime-ui .scene-pill-btn, body.aigg-runtime-ui .icon-btn,
body.aigg-runtime-ui .mode-bar, body.aigg-runtime-ui .mode-tab, body.aigg-runtime-ui .brand-mark, body.aigg-runtime-ui .scene-chip, body.aigg-runtime-ui .scene-controls > * {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: var(--shadow-sm) !important;
}
body.aigg-runtime-ui .scene-name *, body.aigg-runtime-ui .toy-status, body.aigg-runtime-ui .mode-tab,
body.aigg-runtime-ui .icon-btn svg, body.aigg-runtime-ui .scene-pill-btn svg, body.aigg-runtime-ui .scene-pill-btn { color: var(--ink) !important; }
body.aigg-runtime-ui .icon-btn svg, body.aigg-runtime-ui .scene-pill-btn svg { stroke: currentColor !important; }
body.aigg-runtime-ui .scene-name .ic, body.aigg-runtime-ui .scene-name svg { color: var(--accent) !important; }
/* 选中/高亮 → 大类签名色 */
body.aigg-runtime-ui .mode-tab.active, body.aigg-runtime-ui .scene-pill-btn.active, body.aigg-runtime-ui .icon-btn.active, body.aigg-runtime-ui .view-toggle.active {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 76%, black)) !important;
  color: var(--accent-ink) !important; border: none !important; box-shadow: 0 6px 18px var(--accent-glow) !important;
}
body.aigg-runtime-ui .scene-pill-btn.danger, body.aigg-runtime-ui .scene-pill-btn#btn-end-game {
  background: rgba(255,90,77,0.12) !important; color: #ff6b6b !important; border-color: rgba(255,90,77,0.3) !important;
}
body.aigg-runtime-ui .scene-pill-btn.danger:hover, body.aigg-runtime-ui .scene-pill-btn#btn-end-game:hover { background: rgba(255,90,77,0.85) !important; color:#fff !important; }
/* 状态点随状态 */
body.aigg-runtime-ui .toy-status.thinking, body.aigg-runtime-ui .toy-status.speaking { border-color: var(--accent) !important; color: var(--accent) !important; }

/* 玩偶名牌 → 深玻璃 + 大类描边 */
body.aigg-runtime-ui .toy-name, body.aigg-runtime-ui .dsp-name, body.aigg-runtime-ui .scene-toy-name, body.aigg-runtime-ui .name-tag, body.aigg-runtime-ui .toy-label {
  background: rgba(18,18,24,0.74) !important; color: var(--ink) !important;
  border: 1px solid var(--accent-soft) !important;
}

/* 世界气泡(3D 主持发言)→ 深玻璃 */
body.aigg-runtime-ui .world-bubble, body.aigg-runtime-ui .world-bubble.bubble-bot, body.aigg-runtime-ui .speech-bubble, body.aigg-runtime-ui .toy-speech {
  background: linear-gradient(180deg, rgba(28,28,38,0.92), rgba(18,18,24,0.9)) !important;
  border: 1px solid var(--line-2) !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body.aigg-runtime-ui .world-bubble *, body.aigg-runtime-ui .speech-bubble * { color: var(--ink) !important; }

/* 行动 HUD(#game-ui 里的 scenario-hud)→ 悬浮玻璃 */
body.aigg-runtime-ui .scenario-hud {
  background: linear-gradient(180deg, rgba(28,28,38,0.82), rgba(16,16,22,0.78)) !important;
  border: 1px solid var(--line) !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: var(--shadow-md) !important;
}
body.aigg-runtime-ui .scenario-hud, body.aigg-runtime-ui .scenario-hud * { color: var(--ink); }
body.aigg-runtime-ui .scenario-info, body.aigg-runtime-ui .scenario-choice-group {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
}
body.aigg-runtime-ui .scenario-progress { background: rgba(255,255,255,0.08) !important; }
body.aigg-runtime-ui .scenario-progress > * , body.aigg-runtime-ui .scenario-progress-fill { background: var(--accent) !important; }
/* 行动按钮 / 选择 → 新按钮语言 */
body.aigg-runtime-ui .scenario-action, body.aigg-runtime-ui .scenario-choice-action, body.aigg-runtime-ui .choice-btn {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line-2) !important; color: var(--ink) !important; border-radius: 999px !important;
}
body.aigg-runtime-ui .scenario-action:hover, body.aigg-runtime-ui .scenario-choice-action:hover, body.aigg-runtime-ui .choice-btn:hover { border-color: var(--accent) !important; }
body.aigg-runtime-ui .scenario-action.primary {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 76%, black)) !important;
  color: var(--accent-ink) !important; border: none !important;
  box-shadow: 0 8px 26px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
body.aigg-runtime-ui .scenario-action.disabled, body.aigg-runtime-ui .scenario-action:disabled { opacity: 0.45 !important; }

/* 语音任务卡 */
body.aigg-runtime-ui .voice-task-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important; color: var(--ink) !important;
}
body.aigg-runtime-ui .voice-play-btn, body.aigg-runtime-ui .voice-record-btn {
  background: var(--surface-2) !important; border: 1px solid var(--line-2) !important; color: var(--ink) !important;
}
body.aigg-runtime-ui .voice-record-btn.recording { background: linear-gradient(180deg,#ff5a4d,#c8362b) !important; color:#fff !important; border:none !important; }

/* —— 实体道具:请求 CTA + 道具条 → "屏幕上的牌桌"高亮 —— */
body.aigg-runtime-ui .prop-request-cta {
  background: linear-gradient(180deg, var(--accent-soft), rgba(255,255,255,0.03)) !important;
  border: 1px solid var(--accent) !important; color: var(--ink) !important;
  box-shadow: 0 0 0 1px var(--accent-soft), 0 10px 30px var(--accent-glow) !important;
}
body.aigg-runtime-ui .prop-request-cta * { color: var(--ink) !important; }
body.aigg-runtime-ui .prop-request-tag {
  font-family: var(--font-mono) !important; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent) !important; background: transparent !important;
}
body.aigg-runtime-ui .prop-bar { background: transparent !important; }
body.aigg-runtime-ui .prop-pill {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body.aigg-runtime-ui .prop-pill * { color: var(--ink) !important; }
body.aigg-runtime-ui .prop-pill-requested {
  border-color: var(--accent) !important; color: var(--ink) !important;
  box-shadow: 0 0 0 1px var(--accent-soft), 0 0 22px var(--accent-glow) !important;
  animation: lt-prop-pulse calc(1.6s / var(--motion)) ease-in-out infinite !important;
}
@keyframes lt-prop-pulse { 0%,100%{ box-shadow: 0 0 0 1px var(--accent-soft), 0 0 18px var(--accent-glow);} 50%{ box-shadow: 0 0 0 1px var(--accent), 0 0 30px var(--accent-glow);} }
body.aigg-runtime-ui .prop-pill-badge-held { background: var(--accent) !important; color: var(--accent-ink) !important; }

/* 左/右开发面板 → 玻璃(开发用,保留可见性) */
body.aigg-runtime-ui .panel-left, body.aigg-runtime-ui .panel-right {
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border-color: var(--line) !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--shadow-md) !important;
}
body.aigg-runtime-ui .player-row { background: var(--surface) !important; border: 1px solid var(--line) !important; }
body.aigg-runtime-ui .player-row.active { border-color: var(--accent) !important; box-shadow: 0 0 12px var(--accent-glow) !important; }

/* 3D toast */
body.aigg-runtime-ui .stage ~ .toast, body.aigg-runtime-ui .toast {
  background: var(--surface-3) !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}

/* ============================================================
   6) 共享组件:输入框 / chip / 分隔线 / 主 CTA
   ============================================================ */
body input, body textarea, body select {
  background: rgba(255,255,255,0.06) !important; border: 1px solid var(--line-2) !important; color: var(--ink) !important;
}
body input::placeholder, body textarea::placeholder { color: var(--ink-4) !important; }
body input:focus, body textarea:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-soft) !important; outline: none !important;
}
body .chip, body .tag, body .pill, body .badge {
  background: var(--surface) !important; border: 1px solid var(--line) !important; color: var(--ink-2) !important;
}
body hr, body .divider { border-color: var(--line) !important; }
body .ic svg { stroke: currentColor; }
/* 通用主 CTA 兜底 → 大类色 */
body .btn-primary, body button.primary, body .primary-btn, body .cta-primary {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 76%, black)) !important;
  color: var(--accent-ink) !important; border: none !important;
  box-shadow: 0 8px 24px var(--accent-glow) !important;
}

/* ============================================================
   7) 大厅 lobby.html(.mlb-*)—— 维持现有深色玻璃皮肤(范围内已验证)
   ============================================================ */
body.aigg-lobby-ui { background: radial-gradient(120% 90% at 50% -10%, #23232e 0%, #14141a 60%) !important; }
body.aigg-physical-ui .mlb-topbar {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035)) !important;
  border-bottom: 1px solid var(--line) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
}
body.aigg-physical-ui:not(.aigg-studio-ui) .mlb-side-card,
body.aigg-physical-ui:not(.aigg-studio-ui) .mlb-qcard,
body.aigg-physical-ui:not(.aigg-studio-ui) .mlb-sec,
body.aigg-physical-ui:not(.aigg-studio-ui) .mlb-loading,
body.aigg-physical-ui:not(.aigg-studio-ui) .mlb-empty,
body.aigg-physical-ui:not(.aigg-studio-ui) .mlb-stat-row,
body.aigg-physical-ui:not(.aigg-studio-ui) .mlb-recent-row {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.038)) !important;
  border: 1px solid var(--line) !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body.aigg-physical-ui:not(.aigg-studio-ui) .mlb-game {
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.04)) !important;
  border: 1px solid var(--line) !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.aigg-physical-ui .mlb-game:hover { transform: translateY(-3px); border-color: var(--accent) !important; box-shadow: 0 16px 40px rgba(0,0,0,.5) !important; }
body.aigg-physical-ui .mlb-chip { background: var(--surface) !important; border: 1px solid var(--line) !important; color: var(--ink-2) !important; }
body.aigg-physical-ui .mlb-chip.active, body.aigg-physical-ui .mlb-chip.on, body.aigg-physical-ui .mlb-chip[aria-selected="true"] {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 78%, black)) !important; color: var(--accent-ink) !important; border: none !important;
}

/* ============================================================
   8) living-shell.js 注入的新 chrome(头像坞 / 视图切换 / 调节面板)
   ============================================================ */
/* 活头像(主持坞 / 3D host dock 共用) */
.lt-host-av {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 60%, white) 0%, var(--accent) 46%, color-mix(in srgb, var(--accent) 55%, black) 100%);
  box-shadow: 0 0 0 3px #14141a, 0 0 20px var(--accent-glow), inset 0 -3px 8px rgba(0,0,0,0.25);
  animation: lt-host-float calc(4s / var(--motion)) ease-in-out infinite; z-index: 2;
}
@keyframes lt-host-float { 0%,100%{ transform: translateY(-50%) } 50%{ transform: translateY(calc(-50% - 4px)) } }
.lt-host-av .lt-eyes { display: flex; gap: 7px; }
.lt-host-av .lt-eyes i { width: 6px; height: 10px; border-radius: 4px; background: #14141a; display: block; animation: lt-blink calc(5s / var(--motion)) infinite; }
@keyframes lt-blink { 0%,92%,100%{ transform: scaleY(1) } 96%{ transform: scaleY(0.1) } }
.lt-host-av .lt-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent-glow); opacity: 0; }
.lt-host-av.lt-speaking .lt-ring { animation: lt-host-pulse calc(1.5s / var(--motion)) ease-out infinite; }
@keyframes lt-host-pulse { 0%{ opacity:.7; transform: scale(1) } 100%{ opacity:0; transform: scale(1.4) } }

/* 3D 主持坞(固定左下、紧凑:活头像 + 角色名;3D 底部中/右被 game-ui/prop-bar 占用,左下安全) */
.lt-host-dock {
  position: fixed; left: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 45;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 58px; min-height: 48px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: 999px;
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: var(--shadow-md); color: var(--ink); pointer-events: none;
}
.lt-host-dock .lt-host-av { left: 6px; width: 40px; height: 40px; }
.lt-host-dock .lt-host-name {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--accent); white-space: nowrap;
}
.lt-host-dock.lt-hidden { display: none; }
/* 窄屏:抬高到 game-ui 行动区之上,仅留头像,绝不挡底部操作 */
@media (max-width: 820px) {
  .lt-host-dock { bottom: auto; top: calc(58px + env(safe-area-inset-top)); padding: 6px; min-height: 0; }
  .lt-host-dock .lt-host-av { position: relative; left: 0; top: 0; transform: none; }
  .lt-host-dock .lt-host-name { display: none; }
}

/* 2D/3D 视图切换药丸 */
.lt-view { display: inline-flex; padding: 4px; gap: 3px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lt-view a { padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 12px;
  color: var(--ink-4); cursor: pointer; font-family: var(--font-mono); transition: all .18s; }
.lt-view a.active { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px var(--accent-glow); }

/* 调节面板(动效 + 强调色) */
.lt-tweaks {
  position: fixed; z-index: 90; top: 62px; right: 14px; width: 250px; padding: 16px;
  border-radius: 22px; background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: var(--shadow-lg); color: var(--ink);
}
.lt-tweaks .lt-tw-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-4); margin-bottom: 12px; display:flex; justify-content:space-between; align-items:center; }
.lt-tweaks .lt-tw-l { font-size: 12px; color: var(--ink-2); margin: 14px 0 8px; }
.lt-tweaks input[type=range] { width: 100%; accent-color: var(--accent) !important; }
.lt-tweaks .lt-tw-accents { display: flex; gap: 8px; flex-wrap: wrap; }
.lt-tweaks .lt-tw-accents button { width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--line-2); cursor: pointer; }
.lt-tweaks .lt-tw-x { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }

/* 设计稿淡入 */
@keyframes lt-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .lt-fade-up { animation: lt-fade-up calc(.5s / var(--motion)) cubic-bezier(.2,.7,.2,1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-host-av, .r2-board-kicker::before, .prop-pill-requested { animation: none !important; }
}