/* ============================================================
   app.css — UI 外壳
   深色玻璃拟态, 全部按 iPhone 竖屏优先设计。
   安全区用 env(safe-area-inset-*), 保证刘海/Home 条不挡按钮。
   ============================================================ */

:root {
  --ink: #eef1f8;
  --ink-dim: rgba(238, 241, 248, 0.56);
  --ink-faint: rgba(238, 241, 248, 0.30);
  --stroke: rgba(255, 255, 255, 0.16);
  --stroke-strong: rgba(255, 255, 255, 0.30);
  --glass: rgba(255, 255, 255, 0.07);
  --glass-hi: rgba(255, 255, 255, 0.14);
  --accent: #7ec8ff;
  --danger: #ff8fa3;
  --tap: 44px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #05060c;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI", sans-serif;
  color: var(--ink);
  -webkit-user-select: none; user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}

#world { position: fixed; inset: 0; z-index: 1; }
#world canvas { display: block; width: 100%; height: 100%; }

/* 摄像头背景 —— AR 模式才显示 */
#camera {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
  background: #000;
}
body.ar #camera { display: block; }
body.ar { background: #000; }

/* ── 载入遮罩 ───────────────────────────────────── */
#boot {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(ellipse at 50% 45%, #10131f 0%, #05060c 70%);
  transition: opacity .7s ease, visibility .7s;
}
#boot.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-glass {
  width: 42px; height: 62px;
  border: 1.5px solid rgba(255,255,255,.28);
  border-top: none;
  border-radius: 0 0 16px 16px;
  position: relative; overflow: hidden;
}
.boot-glass::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 0%; background: linear-gradient(180deg, #7ec8ff, #b98cff);
  animation: fill 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes fill { 0% { height: 4%; } 55% { height: 78%; } 100% { height: 4%; } }
.boot-text { font-size: 12px; letter-spacing: 4px; color: var(--ink-faint); }

/* ── 顶栏 ───────────────────────────────────────── */
#topbar {
  position: fixed; z-index: 20;
  top: calc(env(safe-area-inset-top) + 12px); left: 0; right: 0;
  text-align: center; pointer-events: none;
  padding: 0 16px;
}
#title {
  font-size: 10px; letter-spacing: 6px; font-weight: 500;
  color: var(--ink-faint);
}
#recipe {
  margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  align-items: center; justify-content: center;
  min-height: 20px;
}
.rc {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; letter-spacing: .3px;
  color: rgba(238,241,248,.88);
  background: rgba(0,0,0,.28);
  border: 1px solid var(--stroke);
  padding: 4px 10px 4px 6px; border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.rc i { width: 9px; height: 9px; border-radius: 50%; display: block; box-shadow: 0 0 8px currentColor; }
.rc small { color: var(--ink-faint); font-size: 10px; font-weight: 400; }

/* ── 底部 dock ──────────────────────────────────── */
#dock {
  position: fixed; z-index: 20;
  left: 0; right: 0; bottom: 0;
  padding: 12px 12px calc(env(safe-area-inset-bottom) + 12px);
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, transparent, rgba(3,4,10,.62) 42%);
}
.row { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
.row.main { gap: 8px; margin-top: 2px; }

.btn, .chip {
  appearance: none; border: 1px solid var(--stroke);
  background: var(--glass); color: var(--ink);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  cursor: pointer; font-family: inherit;
  transition: transform .13s cubic-bezier(.3,1.4,.5,1), background .2s, border-color .2s, opacity .2s;
}
.btn {
  min-height: var(--tap); padding: 0 18px;
  border-radius: 14px;
  font-size: 15px; font-weight: 600; letter-spacing: 1px;
}
.btn.wide { flex: 1; max-width: 340px; }
.btn.primary {
  background: linear-gradient(140deg, rgba(126,200,255,.92), rgba(150,130,255,.88));
  color: #05060c; border-color: transparent;
  box-shadow: 0 6px 22px rgba(120,150,255,.30);
}
.btn.ghost { color: var(--ink-dim); }
.btn.primary-ar {
  background: linear-gradient(140deg, rgba(126,255,214,.90), rgba(110,190,255,.86));
  color: #05121a; border-color: transparent;
  box-shadow: 0 6px 22px rgba(110,220,255,.26);
}
.btn:active, .chip:active { transform: scale(.93); }
.btn:disabled, .chip:disabled { opacity: .35; pointer-events: none; }

.chip {
  min-height: 34px; padding: 0 13px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .4px;
  color: var(--ink-dim);
  display: inline-flex; align-items: center; gap: 5px;
}
.chip.on {
  color: var(--ink); background: var(--glass-hi);
  border-color: var(--stroke-strong);
}
.chip.danger { color: var(--danger); }

/* 杯型 chip 带一个小图标 */
.chip .gi { width: 13px; height: 15px; opacity: .8; }
.chip.on .gi { opacity: 1; }

/* ── AR ─────────────────────────────────────────── */
#ar-dock {
  position: fixed; z-index: 20;
  left: 0; right: 0; bottom: 0;
  padding: 14px 12px calc(env(safe-area-inset-bottom) + 14px);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 45%);
}
#ar-hint {
  position: fixed; z-index: 21;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 12px 20px; border-radius: 14px;
  background: rgba(0,0,0,.55); border: 1px solid var(--stroke);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 13.5px; letter-spacing: .5px; text-align: center; line-height: 1.65;
  pointer-events: none; max-width: 78vw;
  transition: opacity .35s;
}
body.ar #dock { display: none; }
body.ar #ar-dock { display: block; }
body.ar #topbar { top: calc(env(safe-area-inset-top) + 8px); }

#hand-debug {
  position: fixed; z-index: 19;
  right: 10px; top: calc(env(safe-area-inset-top) + 64px);
  width: 108px; height: 144px;
  border-radius: 10px; border: 1px solid var(--stroke);
  opacity: .82; pointer-events: none;
}

/* ── 诊断 ───────────────────────────────────────── */
#diag-toggle {
  position: fixed; z-index: 30;
  right: 10px; top: calc(env(safe-area-inset-top) + 10px);
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.34); border: 1px solid var(--stroke);
  color: var(--ink-faint); font-size: 12px; font-style: italic;
  cursor: pointer; backdrop-filter: blur(8px);
}
#diag {
  position: fixed; z-index: 29;
  right: 10px; top: calc(env(safe-area-inset-top) + 46px);
  width: min(280px, 74vw); max-height: 62vh; overflow: auto;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(0,0,0,.72); border: 1px solid var(--stroke);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; line-height: 1.75; color: var(--ink-dim);
  white-space: pre-wrap; word-break: break-word;
}
#diag b { color: var(--accent); font-weight: 600; }
#diag .ok { color: #7ee0a8; }
#diag .no { color: var(--danger); }

.hidden { display: none !important; }

/* ── 横屏 / 大屏 ────────────────────────────────── */
@media (min-width: 760px) {
  #dock { padding-bottom: 20px; }
  .btn { font-size: 15.5px; padding: 0 22px; }
  #recipe { gap: 8px 12px; }
}
@media (max-height: 620px) and (orientation: landscape) {
  #dock { gap: 5px; padding: 8px 12px calc(env(safe-area-inset-bottom) + 8px); }
  .btn { min-height: 38px; font-size: 13.5px; }
  .chip { min-height: 28px; font-size: 11.5px; }
  #topbar { top: calc(env(safe-area-inset-top) + 6px); }
  #recipe { margin-top: 6px; }
}

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .btn, .chip { transition: none; }
  .boot-glass::after { animation: none; height: 50%; }
}