/* ================================================================
   desk.css —— 主界面版式：顶栏 / 书桌场景 / 旁白面板
   ----------------------------------------------------------------
   第 2 步的改动：
     1. ★ 底部对话框改成固定高度（--narration-h），
        不管里面文字长短、有几个选项，高度都不变，
        所以上方画面不会再跟着跳。
     2. 顶栏重做成多邻国式：圆角 Logo 方块 + 数据胶囊 + 今日进度条
     3. 场景加了厚边框和"实心下边"，看起来像一张卡片
   想改什么：
     · 对话框多高 → 改 theme.css 里的 --narration-h
     · 顶栏多高   → 改 theme.css 里的 --hud-h
   ================================================================ */

/* ---------- 最外层：纵向三段式（顶栏 / 场景 / 旁白） ---------- */
.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ================= 一、顶栏 HUD ================= */
.hud {
  flex: 0 0 var(--hud-h);
  height: var(--hud-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: var(--card);
  border-bottom: 2px solid var(--line);
  z-index: 5;
}

.hud-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* 圆角方形 Logo（多邻国那种彩色小方块）—— 图形是 config.js 里的白色台灯 */
.logo-tile {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #F2A64B, var(--brand));
  box-shadow: 0 3px 0 var(--brand-edge);
}
.logo-tile svg { display: block; }

.brand-text { min-width: 0; }
.brand-name { font-size: var(--fs-m); font-weight: 800; line-height: 1.2; color: var(--ink); }
.brand-sub  { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); line-height: 1.3; }

.hud-stats { display: flex; align-items: center; gap: 10px; }

/* 数据胶囊：一个小色点 + 粗体数值 + 说明 */
.pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  white-space: nowrap;
}
.pill-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; flex: 0 0 auto; }
.pill-v   { font-size: var(--fs-m); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pill-k   { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); }

/* 今日进度：右上角一小块 */
.hud-today { width: 148px; }
.hud-today-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-xs); font-weight: 800; color: var(--ink-2);
  margin-bottom: 4px;
}
.hud-today .bar { height: 12px; }

/* ================= 二、书桌场景 ================= */
.stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  min-height: 0;               /* 让 flex 子项能正确收缩 */
  background: var(--bg);
}

.scene {
  width: 100%;
  height: 100%;
  max-width: 1240px;
  border-radius: var(--r-l);
  border: 3px solid var(--card);
  box-shadow: 0 6px 0 var(--line), var(--shadow-pop);
  background: #EFE7D9;          /* 场景自身的底色（墙），不是页面底色 */
  display: block;
}

/* 场景左下角的小提示 */
.hint {
  position: absolute;
  left: 34px;
  bottom: 26px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-deep);
  background: rgba(255, 255, 255, .86);
  border: 2px solid var(--brand-soft);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  pointer-events: none;
}

/* ---- 可点击物品：鼠标移上去会轻微抬起 + 出现名字标签 ---- */
.spot { cursor: pointer; }

.spot .art { transition: transform .18s cubic-bezier(.34, 1.4, .64, 1); transform-box: fill-box; transform-origin: 50% 100%; }
.spot:focus { outline: none; } /* 屏蔽浏览器给 SVG 焦点元素画的默认蓝框 */
.spot:hover .art,
.spot:focus-visible .art { transform: translateY(-7px) scale(1.04); }

/* 物品名字标签（由 js/desk.js 动态生成） */
.spot-label { opacity: 0; transition: opacity .16s ease; pointer-events: none; }
.spot:hover .spot-label,
.spot:focus-visible .spot-label { opacity: 1; }

/* 未上线的物品，鼠标变成普通箭头，并且抬不起来 */
.spot.is-locked { cursor: default; }
.spot.is-locked:hover .art { transform: none; }

/* ================= 三、旁白面板（橙光式对话框） =================
   ★ 固定高度：高度写死成 var(--narration-h)，
     里面的文字区用 flex:1 + 内部滚动来吸收超长文本，
     所以无论内容多长、选项几个，这个框永远不会变高变矮。
   ============================================================== */
.narration {
  flex: 0 0 calc(var(--narration-h) + 34px);
  padding: 14px 20px 20px;
}

.narration-inner {
  position: relative;
  max-width: 1240px;
  height: var(--narration-h);
  margin: 0 auto;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: 0 6px 0 var(--line);
  padding: 14px 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

/* 说话人标签 */
.speaker {
  align-self: flex-start;
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--brand-deep);
  background: var(--brand-soft);
  padding: 3px 12px;
  border-radius: var(--r-pill);
}

/* 文字区：占满中间剩余空间，文字过长时自己在内部滚动 */
.narration-text {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.62;
  color: var(--ink);
  white-space: pre-wrap;       /* 保留文字里的换行 */
  padding-right: 6px;
}

/* 打字机的光标 */
.caret {
  display: inline-block;
  width: 9px;
  height: 1.05em;
  vertical-align: -3px;
  border-radius: 3px;
  background: var(--brand);
  animation: blink .8s steps(1) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* 选项按钮区：固定在一行内，不撑高面板 */
.choices {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-height: 86px;      /* 最多两行，再多就在内部滚动 */
  overflow-y: auto;
}

.choice {
  padding: 9px 18px;
  border-radius: var(--r-m);
  border: 2px solid var(--line);
  background: var(--card);
  font-size: var(--fs-s);
  font-weight: 800;
  color: var(--ink-2);
  box-shadow: 0 4px 0 var(--line);
  transition: transform .06s linear, box-shadow .06s linear,
              border-color .12s ease, background .12s ease, color .12s ease;
}
.choice:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.choice:active { transform: translateY(4px); box-shadow: 0 0 0 var(--line); }

/* ================= 四、悬浮提示 ================= */
.toast {
  position: fixed;
  top: 82px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-s);
  font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transition: all .22s cubic-bezier(.34, 1.3, .64, 1);
  z-index: 100;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ================= 五、窄屏（手机） ================= */
@media (max-width: 900px) {
  :root { --hud-h: 58px; --narration-h: 188px; }

  .hud { padding: 0 10px; gap: 6px; }
  .brand-sub { display: none; }

  /* 太窄时只留 Logo 方块，别让名字折行溢出 */
  .brand-name { display: none; }
  .logo-tile { width: 36px; height: 36px; border-radius: 12px; }

  .hud-today { width: 84px; }
  .pill { padding: 5px 9px; }
  .pill-k { display: none; }
  .btn-sm { padding: 7px 10px; font-size: var(--fs-xs); }

  /* 场景按 1200:700 的原始比例显示，不再上下留大片空白 */
  .stage { padding: 8px; }
  .scene { height: auto; aspect-ratio: 1200 / 700; max-height: 100%; }
  .hint { display: none; }

  .narration { padding: 8px 8px 10px; flex: 0 0 calc(var(--narration-h) + 18px); }
  .narration-inner { padding: 12px 14px; gap: 6px; }
  .narration-text { font-size: var(--fs-m); }

  /* 选项改成横向滑动，不换行，避免挤掉旁白文字 */
  .choices { flex-wrap: nowrap; overflow-x: auto; max-height: none; padding-bottom: 2px; }
  .choice { flex: 0 0 auto; }
}