/* ============================================================
   团契圆桌 —— 第一人称版样式
   整体：傍晚的温暖餐厅。页面是深木色，场景是暖黄灯光下的一桌。
   ============================================================ */
:root {
  --bg: #2a1d14;
  --bg-2: #3a281b;
  --cream: #f7ecd9;
  --cream-dim: #cdb89c;
  --ink: #3b2a1e;
  --ink-soft: #7a6352;
  --wood: #9a6438;
  --wood-dark: #5e3b20;
  --wood-light: #c8925a;
  --terracotta: #c8553d;
  --gold: #e9b949;
  --line: #06c755;
  --safe-b: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  color: var(--cream);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(120% 70% at 50% 0%, var(--bg-2), var(--bg) 70%) fixed, var(--bg);
  overscroll-behavior-y: none;
}
body.has-bg-img { background: var(--bg-img) center / cover fixed, var(--bg); }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.serif { font-family: "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", serif; }

.app {
  max-width: 480px; margin: 0 auto;
  min-height: 100dvh; display: flex; flex-direction: column;
  padding: 10px 14px calc(16px + var(--safe-b));
}

/* ---------- 顶部 ---------- */
.topbar { display: flex; align-items: center; gap: 8px; }
.brand { flex: 1; min-width: 0; }
.brand h1 {
  margin: 0; font-size: 20px; letter-spacing: 1px; font-weight: 800;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", serif;
}
.brand__sub { margin: 0; font-size: 11.5px; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .08); font-size: 17px;
}
.icon-btn__count {
  position: absolute; right: -3px; top: -3px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--terracotta); color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
}
.icon-btn__count:empty { display: none; }

/* ---------- 模式切换 ---------- */
.mode-switch {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  margin: 10px auto 10px; width: 220px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08);
}
.mode-switch button {
  position: relative; z-index: 1; border: 0; background: transparent; padding: 7px 0;
  border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--cream-dim); transition: color .25s;
}
.mode-switch button.is-active { color: var(--ink); }
.mode-switch__thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: var(--cream); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.mode-switch[data-mode="suspense"] .mode-switch__thumb { transform: translateX(100%); }

/* ============================================================
   第一人称场景
   ============================================================ */
.scene {
  position: relative; width: 100%; height: min(54dvh, 118vw); min-height: 300px;
  border-radius: 26px; overflow: hidden; isolation: isolate;
  container-type: size;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
  user-select: none;
}
.scene > * { position: absolute; }

/* 墙面：竖条壁纸 + 下方护墙板。background-position-x 由 JS 随镜头滚动 */
.fp-wall {
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 22px, rgba(154, 100, 56, .08) 22px 24px, transparent 24px 46px),
    linear-gradient(180deg, #f3dfba 0%, #ecd2a6 50%, #dcb684 62%, #8f6239 100%);
  background-size: auto, 100% 100%;
}
.fp-glow {
  left: 15%; right: 15%; top: 4%; height: 62%; z-index: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 236, 170, .75), rgba(255, 236, 170, 0));
  transition: opacity .4s;
}
.scene.is-spinning .fp-glow { opacity: .35; }
.fp-decor, .fp-people, .fp-cards { inset: 0; pointer-events: none; }
.fp-decor { z-index: 1; }
.fp-decor__item { position: absolute; left: 0; top: 0; opacity: .9; }
.fp-decor__item svg { width: 100%; height: auto; display: block; }
.fp-people { z-index: 2; }
.fp-cards { z-index: 4; }

/* 远端桌面 */
.fp-table {
  z-index: 3; left: -45%; width: 190%; top: 60%; height: 90%; border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(60, 30, 10, .10) 0 3px, transparent 3px 17px, rgba(255, 230, 190, .06) 17px 19px, transparent 19px 41px),
    linear-gradient(180deg, #b77a45 0%, #8f5a30 22%, #6e4222 60%);
  box-shadow: inset 0 3px 0 rgba(255, 220, 170, .55), 0 -2px 0 #5a361b, 0 -10px 22px rgba(60, 30, 10, .35);
}
.scene.is-spinning .fp-table { filter: blur(.6px); }

/* 镜头正前方的小指示 */
.fp-marker {
  z-index: 6; left: 50%; top: 6px; transform: translateX(-50%);
  color: var(--gold); font-size: 16px; text-shadow: 0 0 10px rgba(233, 185, 73, .9);
}
.fp-marker img { width: 26px; display: block; }

/* 近处转盘（摄像机就架在它上面，所以永远在眼前） */
.fp-susan { z-index: 5; left: 50%; bottom: -24%; width: 104%; height: 58%; transform: translateX(-50%); }
.fp-susan__disc, .fp-susan__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fp-susan__disc {
  border-radius: 50%;
  background:
    radial-gradient(closest-side, transparent 0 74%, rgba(94, 59, 32, .25) 75% 76%, transparent 77% 88%, rgba(94, 59, 32, .3) 89% 90%, transparent 91%),
    radial-gradient(closest-side at 50% 40%, #f3d9b1, #dcae74 70%, #c08850);
  box-shadow: 0 -4px 0 #a8713f, 0 -10px 24px rgba(40, 20, 5, .4);
}
.fp-plate {
  --glow: #ffd27f;
  position: absolute; left: 50%; top: 4%; width: 54%; height: 46%; transform: translateX(-50%);
}
.fp-plate__dish, .fp-plate__img { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; width: 100%; }
.fp-plate__dish {
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0 55%, #efe6d6 57% 66%, #fff 68% 86%, #e3d6c1 88%);
  box-shadow: 0 6px 10px rgba(40, 20, 5, .35), 0 0 34px 10px color-mix(in srgb, var(--glow) 55%, transparent);
  transition: box-shadow .4s;
}
.fp-food { position: absolute; inset: 0; }
.fp-food__main {
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
  font-size: 15cqw; line-height: 1; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .3));
}
.fp-food img { position: absolute; left: 50%; bottom: 14%; width: 62%; transform: translateX(-50%); }
.fp-food__side { position: absolute; font-size: 6cqw; line-height: 1; bottom: 10%; }
.fp-food__side--0 { left: 4%; }
.fp-food__side--1 { right: 4%; }
.fp-food__side--2 { right: 18%; bottom: 46%; font-size: 4.5cqw; }
.scene.is-spinning .fp-food__main { animation: wobble .16s infinite alternate; }
@keyframes wobble { from { transform: translateX(-50%) rotate(-7deg); } to { transform: translateX(-50%) rotate(7deg); } }
.fp-plate.pop .fp-food__main { animation: pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 0% { transform: translateX(-50%) scale(.6); } 60% { transform: translateX(-50%) scale(1.18); } 100% { transform: translateX(-50%) scale(1); } }
.fp-bible { position: absolute; right: 4%; top: 22%; width: 26%; transform: rotate(-8deg); filter: drop-shadow(0 6px 4px rgba(40, 20, 5, .4)); }
.fp-bible svg, .fp-bible img { width: 100%; display: block; }

.fp-vignette {
  inset: 0; z-index: 7; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(30, 15, 5, .45));
}

/* 人 */
.fp-person { position: absolute; left: 0; top: 0; transform-origin: 50% 0; will-change: transform; }
.fp-person .avatar { width: 100%; display: flex; flex-direction: column; align-items: center; }
.avatar__head {
  order: -1; position: relative; z-index: 2;
  width: calc(var(--seat-w) * .62); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: #fff; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(60, 35, 15, .3);
  transition: box-shadow .2s;
}
.avatar__head img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar__body { width: var(--seat-w); height: calc(var(--seat-w) * .92); margin-top: calc(var(--seat-w) * -.07); }
.avatar__body svg, .avatar__body img { width: 100%; height: 100%; display: block; overflow: visible; }
.fp-person__badge {
  position: absolute; top: 0; left: 50%; margin-left: calc(var(--seat-w) * .2); z-index: 3;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; display: none; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--terracotta); border: 2px solid #fff;
}
.fp-person.has-badge .fp-person__badge { display: grid; }
.fp-person.is-dimmed .avatar { filter: grayscale(.8) brightness(.9); }
.fp-person.is-passing .avatar__head { box-shadow: 0 0 0 3px var(--gold); }
.fp-person.is-chosen .avatar__head { animation: halo 1.6s ease-in-out infinite; }
@keyframes halo {
  0%, 100% { box-shadow: 0 0 0 4px var(--gold), 0 0 16px 6px rgba(233, 185, 73, .6); }
  50% { box-shadow: 0 0 0 6px #ffd76a, 0 0 28px 12px rgba(233, 185, 73, .85); }
}

/* 桌上的名牌 */
.fp-card {
  position: absolute; left: 0; top: 0; transform-origin: 50% 0;
  padding: 2px 6px; border-radius: 5px; text-align: center;
  background: linear-gradient(#fffaf0, #efe2c8); color: var(--ink);
  font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 3px 5px rgba(40, 20, 5, .35);
}
.fp-card.is-chosen { background: linear-gradient(#ffe9a8, #e9b949); }

.scene.is-empty .fp-glow { opacity: .3; }

/* ---------- 说明文字 ---------- */
.caption { text-align: center; padding: 14px 6px 4px; min-height: 92px; }
.caption__eyebrow { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 2px; color: var(--gold); min-height: 1.2em; }
.caption__name {
  margin: 4px 0 2px; font-size: 26px; line-height: 1.2;
  font-family: "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", serif;
}
.caption__name.is-reveal { animation: rise .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.caption__food { margin: 0; font-size: 14px; color: var(--cream-dim); min-height: 1.3em; }

/* ---------- 顺序条 ---------- */
.order-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 10px; margin: 0 -14px; padding-inline: 14px;
  scrollbar-width: none;
}
.order-strip::-webkit-scrollbar { display: none; }
.order-item {
  position: relative; flex: none; width: 44px; border: 0; padding: 0; background: none; text-align: center;
  animation: fadeUp .3s both; animation-delay: calc(var(--i, 0) * 35ms);
}
.order-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto; border: 2px solid rgba(255, 255, 255, .25); }
.order-item b {
  position: absolute; left: -2px; top: -4px; min-width: 18px; height: 18px; border-radius: 999px;
  background: var(--terracotta); color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 4px;
}
.order-item span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-item.is-current img { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.order-item.is-current span { color: var(--cream); }
.order-arrow { flex: none; align-self: center; margin-top: -14px; color: rgba(255, 255, 255, .25); font-size: 12px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 按钮 ---------- */
.actions { display: flex; gap: 10px; margin-top: auto; padding-top: 6px; }
.btn { border: 0; border-radius: 999px; padding: 15px 18px; font-weight: 800; font-size: 17px; transition: transform .12s, opacity .2s; }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn--primary {
  flex: 1; color: #fff;
  background: linear-gradient(180deg, #df7055, var(--terracotta) 60%, #a23f2b);
  box-shadow: 0 5px 0 #7a2c1d, 0 12px 22px rgba(0, 0, 0, .35);
}
.btn--primary:active { transform: translateY(4px); box-shadow: 0 1px 0 #7a2c1d, 0 6px 12px rgba(0, 0, 0, .35); }
.btn--round { width: 54px; padding: 0; font-size: 22px; background: rgba(255, 255, 255, .1); color: var(--cream); }
.btn--small { padding: 10px 16px; font-size: 14px; background: var(--wood); color: #fff; }
.btn--line { width: 100%; margin-top: 12px; background: var(--line); color: #fff; font-size: 15px; }
.verse {
  margin: 12px 0 0; text-align: center; font-size: 12px; line-height: 1.6; color: rgba(247, 236, 217, .55);
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif; min-height: 1.6em;
}

/* ---------- 成员抽屉 ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; animation: fadeIn .2s; }
.sheet__panel {
  width: 100%; max-width: 480px; margin: 0 auto; max-height: 80dvh; overflow-y: auto;
  padding: 8px 16px calc(20px + var(--safe-b)); border-radius: 22px 22px 0 0;
  background: #fffaf1; color: var(--ink); animation: slideUp .3s cubic-bezier(.2, .9, .3, 1);
}
.sheet__grip { width: 40px; height: 5px; border-radius: 3px; background: #e2d3bb; margin: 0 auto 10px; }
.sheet h3 { margin: 0; font-size: 17px; }
.sheet__tip { margin: 4px 0 12px; font-size: 12px; color: var(--ink-soft); }
.sheet__note { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
.sheet__note:empty { display: none; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideUp { from { transform: translateY(100%); } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border-radius: 999px;
  background: #fbf3e6; border: 1px solid #efdfc5; font-size: 13px; max-width: 100%;
}
.chip__head { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none; border: 0; padding: 0; background: #fff; }
.chip__head img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip__name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip__btn { border: 0; background: transparent; padding: 2px 3px; font-size: 14px; line-height: 1; }
.chip.is-me { border-color: var(--gold); }
.chip.is-excluded { opacity: .5; }
.chip.is-excluded .chip__name { text-decoration: line-through; }
.chip.is-offline .chip__head { filter: grayscale(1); }
.add-row { display: flex; gap: 8px; margin-top: 14px; }
.add-row input {
  flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid #e6d5b8;
  background: #fff; font: inherit; font-size: 16px; color: var(--ink);
}

/* ---------- Toast / Loading / Confetti ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(90px + var(--safe-b)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: 88vw;
  padding: 10px 16px; border-radius: 999px; font-size: 14px; background: rgba(255, 250, 241, .95); color: var(--ink);
  transition: all .3s;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.loading {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: var(--bg); transition: opacity .4s;
}
.loading.is-done { opacity: 0; pointer-events: none; }
.loading__icon { font-size: 44px; animation: bob 1s ease-in-out infinite; }
.loading p { margin: 0; color: var(--cream-dim); }
@keyframes bob { 50% { transform: translateY(-8px); } }

.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti-layer span { position: absolute; top: -40px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--drift), 110vh) rotate(540deg); } }

@media (max-height: 700px) {
  .scene { height: 50dvh; }
  .caption { min-height: 80px; padding-top: 8px; }
  .caption__name { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-person.is-chosen .avatar__head, .loading__icon { animation: none; }
}