/* ============================================================
   多人飯局遊戲畫面
   延續 site.css 的設計 token；只補這一組畫面用得到的元件。
   Mobile first：320px 寬也要能玩，主要按鈕拇指可觸達（§8.1）。
   ============================================================ */

.game-shell {
  max-width: 560px;
  margin-inline: auto;
}

/* ---------------- 常駐狀態列：房號 / 階段 / 進度 ---------------- */
.game-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  background: var(--ef-surface);
  border: 1px solid var(--ef-line);
  border-radius: 999px;
  box-shadow: var(--ef-shadow-sm);
  padding: .5rem .9rem;
  position: sticky;
  top: 68px;
  z-index: 10;
}
.game-bar-code { display: flex; align-items: baseline; gap: .35rem; }
.game-bar-label { font-size: .68rem; color: var(--ef-ink-soft); font-weight: 700; }
.game-bar-code strong {
  font-family: "Poppins", monospace;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ef-primary-dark);
}
.game-bar-stage {
  display: flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 600; color: var(--ef-ink-soft);
  margin-inline: auto;
}
.game-bar-progress { font-size: .75rem; font-weight: 700; color: var(--ef-ink-soft); }

/* 連線指示點：離線時要看得出來，不能只靠顏色，所以另外配文字階段名稱 */
.stage-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #c9ccd6; flex: 0 0 auto;
}
.stage-dot.is-online { background: var(--ef-success); box-shadow: 0 0 0 3px rgba(46, 194, 126, .18); }
.stage-dot.is-offline { background: #f0a202; box-shadow: 0 0 0 3px rgba(240, 162, 2, .18); }

.game-section { margin-top: 1.25rem; }

/* ---------------- Lobby：QR 與房號 ---------------- */
.qr-box {
  width: min(240px, 62vw);
  margin: .75rem auto .5rem;
  padding: .75rem;
  background: #fff;
  border-radius: var(--ef-radius);
  box-shadow: var(--ef-shadow-sm);
  border: 1px solid var(--ef-line);
}
.qr-box svg { width: 100%; height: auto; display: block; }
.qr-fallback {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--ef-ink-soft); word-break: break-all; padding: 1rem .5rem;
}
.qr-fallback .bi { font-size: 1.6rem; color: var(--ef-primary); }

.room-code-big {
  font-family: "Poppins", monospace;
  font-size: clamp(1.8rem, 8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--ef-ink);
}

/* ---------------- 玩家名單 ---------------- */
.player-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.player-chip {
  display: flex; align-items: center; gap: .45rem;
  padding: .35rem .7rem .35rem .35rem;
  background: #f6f7f9;
  border: 1px solid var(--ef-line);
  border-radius: 999px;
  font-size: .85rem;
}
.player-chip.is-me { border-color: rgba(255, 107, 53, .5); background: var(--ef-primary-soft); }
.player-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ef-primary), var(--ef-secondary));
  color: #fff; font-weight: 800; font-size: .8rem;
}
.player-name { font-weight: 600; color: var(--ef-ink); }
.player-badge {
  font-size: .68rem; font-weight: 800; padding: .1rem .45rem;
  border-radius: 999px; background: #e9ecf1; color: var(--ef-ink-soft);
}
.player-badge.is-host { background: var(--ef-secondary); color: #4a3200; }
.player-badge.is-offline { background: #ffe9c7; color: #8a5a00; }
.player-badge.is-done { background: #d8f5e7; color: #1b7f52; }

/* ---------------- 等待中的呼吸動畫 ---------------- */
.waiting-pulse {
  width: 68px; height: 68px; margin: 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ef-primary-soft);
  color: var(--ef-primary);
  font-size: 1.8rem;
  animation: waitPulse 1.8s ease-in-out infinite;
}
@keyframes waitPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 53, .28); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(255, 107, 53, 0); }
}

.game-progress { height: 10px; border-radius: 999px; background: #eceef2; }
.game-progress .progress-bar {
  background: linear-gradient(90deg, var(--ef-primary), var(--ef-secondary));
  transition: width .4s var(--ef-ease);
}

/* ---------------- 轉盤 ---------------- */
.game-wheel canvas {
  width: 100%; height: auto;
  filter: drop-shadow(var(--ef-shadow-md));
  transform-origin: 50% 50%;
}

/* ---------------- 我的命運球 ---------------- */
.ball-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; }
.fate-ball {
  min-width: 96px;
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .7rem .9rem;
  background: var(--ef-surface);
  border: 1px solid var(--ef-line);
  border-radius: var(--ef-radius);
  box-shadow: var(--ef-shadow-sm);
  animation: ballPop .45s var(--ef-ease) both;
}
.fate-ball strong { font-size: .95rem; color: var(--ef-ink); }
.fate-ball small { font-size: .68rem; color: var(--ef-ink-soft); }
.fate-emoji { font-size: 1.7rem; line-height: 1.2; }
@keyframes ballPop {
  from { opacity: 0; transform: scale(.7) translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- 命運球統計 / 淘汰 ---------------- */
.tally-list { display: flex; flex-direction: column; gap: .5rem; }
.tally-row {
  display: grid;
  grid-template-columns: 32px minmax(56px, auto) 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  background: var(--ef-surface);
  border: 1px solid var(--ef-line);
  border-radius: 14px;
  box-shadow: var(--ef-shadow-sm);
  animation: fadeInUp .4s var(--ef-ease) both;
  transition: opacity .35s, filter .35s;
}
.tally-emoji { font-size: 1.3rem; }
.tally-name { font-weight: 700; font-size: .9rem; color: var(--ef-ink); }
.tally-bar { height: 8px; border-radius: 999px; background: #eceef2; overflow: hidden; }
.tally-bar i { display: block; height: 100%; border-radius: 999px; transition: width .5s var(--ef-ease); }
.tally-count { font-weight: 800; font-size: .85rem; color: var(--ef-ink-soft); }
/* 被淘汰的料理：淡出 + 刪除線，不只用顏色表示（§16 可及性） */
.tally-row.is-eliminated { opacity: .4; filter: grayscale(1); }
.tally-row.is-eliminated .tally-name { text-decoration: line-through; }

/* ---------------- 決賽勝出橫幅 ---------------- */
.winner-banner {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  padding: 1rem 1.25rem;
  border-radius: var(--ef-radius);
  background: linear-gradient(135deg, var(--ef-primary), var(--ef-secondary));
  color: #fff;
  box-shadow: var(--ef-shadow-md);
  animation: ballPop .5s var(--ef-ease) both;
}
.winner-banner small { display: block; font-size: .72rem; opacity: .9; font-weight: 700; }
.winner-banner strong { font-size: 1.45rem; font-weight: 800; }
.winner-emoji { font-size: 2.4rem; line-height: 1; }

/* ---------------- 候選店家 ---------------- */
.candidate-list { display: flex; flex-direction: column; gap: .6rem; }
.candidate-card {
  display: flex; gap: .75rem; align-items: stretch;
  background: var(--ef-surface);
  border: 1px solid var(--ef-line);
  border-radius: var(--ef-radius);
  box-shadow: var(--ef-shadow-sm);
  overflow: hidden;
  animation: fadeInUp .4s var(--ef-ease) both;
}
.candidate-card img { width: 92px; object-fit: cover; flex: 0 0 92px; background: #eee; }
.candidate-photo-empty {
  width: 92px; flex: 0 0 92px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #fff1ea, #ffe6d3);
  color: var(--ef-secondary); font-size: 1.6rem;
}
.candidate-body { padding: .6rem .8rem .6rem 0; display: flex; flex-direction: column; gap: .3rem; }
.candidate-body strong { font-size: .95rem; color: var(--ef-ink); }
.candidate-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .78rem; }

.candidate-list.compact { gap: .25rem; }
.candidate-line {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .4rem .7rem;
  border-radius: 10px;
  font-size: .85rem;
  background: #f6f7f9;
  color: var(--ef-ink-soft);
}
.candidate-line.is-winner {
  background: var(--ef-primary-soft);
  color: var(--ef-ink);
  font-weight: 700;
}

/* ---------------- 建立飯局頁 ---------------- */
.locate-row { display: flex; align-items: center; gap: .75rem; }
.locate-icon {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center; border-radius: 13px;
  background: var(--ef-primary-soft); color: var(--ef-primary); font-size: 1.2rem;
}
.locate-text { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.locate-text small { font-size: .75rem; color: var(--ef-ink-soft); }
.locate-row[data-state="ok"] .locate-icon { background: #d8f5e7; color: #1b7f52; }
.locate-row[data-state="error"] .locate-icon { background: #ffe3e3; color: var(--ef-danger); }

.radius-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 480px) {
  .radius-grid { grid-template-columns: repeat(4, 1fr); }
}
.radius-option {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .65rem .4rem;
  background: var(--ef-surface);
  border: 2px solid var(--ef-line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .12s var(--ef-ease);
}
.radius-option strong { font-size: .95rem; color: var(--ef-ink); }
.radius-option small { font-size: .68rem; color: var(--ef-ink-soft); }
.radius-option:active { transform: scale(.97); }
.radius-option.active {
  border-color: var(--ef-primary);
  background: var(--ef-primary-soft);
}
.radius-option.active strong { color: var(--ef-primary-dark); }

.how-to-list { padding-left: 1.1rem; color: var(--ef-ink-soft); font-size: .88rem; }
.how-to-list li { margin-bottom: .3rem; }

/* ---------------- 加入頁 ---------------- */
.join-hero {
  text-align: center;
  padding: 1.75rem 1.25rem;
  border-radius: var(--ef-radius-lg);
  background: linear-gradient(135deg, #ff7a45 0%, #ff6b35 45%, #ffb627 100%);
  color: #fff;
  box-shadow: var(--ef-shadow-lg);
}
.join-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .2em; opacity: .9; }
.join-code {
  font-family: "Poppins", monospace;
  font-size: clamp(2rem, 10vw, 2.8rem);
  font-weight: 800;
  letter-spacing: .16em;
  margin: .25rem 0 .4rem;
}
.join-status { font-size: .85rem; opacity: .95; }

/* ---------------- 尊重 reduced-motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .waiting-pulse { animation: none; }
  .game-wheel canvas { transition-duration: .6s !important; }
}

/* 底部導覽列會蓋住內容，遊戲畫面的最後一塊要留空間 */
@media (max-width: 767.98px) {
  .game-shell { padding-bottom: .5rem; }
  .game-bar { top: 8px; }
}