/* 共用元件（UIUX 第 5 節）。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  border-radius: var(--r-md); font: var(--t-head);
  transition: transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease), opacity var(--d-fast);
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; }
.btn--primary { height: 56px; background: var(--accent); color: var(--accent-ink); width: 100%; }
.btn--ghost { height: 48px; border: 1px solid var(--line); background: var(--surface); color: var(--text); width: 100%; }
.btn--text { height: 48px; color: var(--muted); font: var(--t-body); }
.btn-ic svg, .icon-btn svg { width: 22px; height: 22px; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); color: var(--muted); }
.icon-btn:active { background: var(--raised); }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 頂列 */
.topbar { flex: 0 0 48px; height: 48px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: var(--s2); }
.topbar-l { display: flex; align-items: center; }
.topbar-c { min-width: 0; display: flex; align-items: center; justify-content: center; }
.topbar-r { display: flex; align-items: center; gap: var(--s2); justify-content: flex-end; min-width: 48px; }
.topbar-title { font: var(--t-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phase-chip { font: var(--t-micro); letter-spacing: .04em; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full); padding: var(--s1) var(--s3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.timenum { font: 700 18px/24px var(--font-num); font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }
.timenum--warn { color: var(--warn); }

/* 時間條 */
.timebar { height: 6px; background: var(--raised); border-radius: var(--r-full); overflow: hidden; flex: 0 0 6px; }
.timebar-fill { height: 100%; width: 100%; background: var(--info); transform-origin: left center; transform: scaleX(1); }
.timebar--warn .timebar-fill { background: var(--warn); }
.timebar--pulse { animation: pulse var(--d-slow) var(--ease) 2; }
@keyframes pulse { 50% { opacity: .4; } }

/* 玩家列 */
.prow {
  height: 48px; display: grid; grid-template-columns: 28px 32px 1fr auto auto; align-items: center; gap: var(--s2);
  padding: 0 var(--s3); background: var(--surface); border-radius: var(--r-sm); position: relative;
  transition: transform var(--d-base) var(--ease), opacity var(--d-base);
}
.prow--me { background: var(--raised); }
.prow--me::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--accent); border-radius: var(--r-full); }
.prow--out { opacity: .45; }
.prow-rank { font: 700 16px/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--muted); text-align: center; }
.prow-name { font: var(--t-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.prow-me { color: var(--accent); font: var(--t-micro); margin-left: var(--s1); }
.prow-sub { font: var(--t-micro); color: var(--dim); display: block; }
.prow-tag { font: var(--t-micro); color: var(--dim); border: 1px solid var(--line); border-radius: var(--r-full); padding: 0 6px; margin-left: var(--s1); }
.prow-score { font: 700 16px/1 var(--font-num); text-align: right; min-width: 3em; }
.prow-status { display: flex; align-items: center; gap: var(--s1); font: var(--t-micro); color: var(--muted); }
.delta { display: inline-flex; align-items: center; gap: 2px; font: var(--t-micro); font-variant-numeric: tabular-nums; }
.delta svg { width: 12px; height: 12px; }
.delta--up { color: var(--ok); }
.delta--down { color: var(--danger); }
.standings { display: flex; flex-direction: column; gap: var(--s1); }

/* 頭像 */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); width: 32px; height: 32px; font-size: 18px; line-height: 1; flex: 0 0 auto; background: var(--av-slate); }
.avatar[data-size="40"] { width: 40px; height: 40px; font-size: 22px; }
.avatar[data-size="56"] { width: 56px; height: 56px; font-size: 30px; }
.avatar[data-bg="sand"] { background: var(--av-sand); }
.avatar[data-bg="sage"] { background: var(--av-sage); }
.avatar[data-bg="sky"] { background: var(--av-sky); }
.avatar[data-bg="rose"] { background: var(--av-rose); }
.avatar[data-bg="slate"] { background: var(--av-slate); }
.avatar[data-bg="clay"] { background: var(--av-clay); }

.rank-badge { font: var(--t-micro); letter-spacing: .04em; padding: 2px 8px; border-radius: var(--r-full); background: var(--rank-0); color: var(--text); white-space: nowrap; }
.rank-badge[data-rank="1"] { background: var(--rank-1); }
.rank-badge[data-rank="2"] { background: var(--rank-2); }
.rank-badge[data-rank="3"] { background: var(--rank-3); }
.rank-badge[data-rank="4"] { background: var(--rank-4); }

/* 撲克牌 */
.card {
  position: relative; display: inline-flex; flex-direction: column; justify-content: flex-start; gap: 2px;
  width: 56px; aspect-ratio: 5 / 7; border-radius: var(--r-sm); padding: 4px 5px; overflow: hidden;
  font-family: var(--font-num);
}
.card--face { background: var(--card-face); color: var(--card-black); }
.card--red { color: var(--card-red); }
.card--back { background: var(--card-back); border: 1px solid rgba(255,255,255,.08); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px); align-items: center; justify-content: center; }
/* 牌面（spec 六.7）：角標、點數排列、人頭圖、A 特製圖。字級隨牌寬（容器查詢單位）縮放 */
.card--face { container-type: inline-size; padding: 0; }
.card-corner { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; }
.card-corner--tl { top: 5%; left: 6%; }
.card-corner--br { bottom: 5%; right: 6%; transform: rotate(180deg); }
.card-rank { font: 800 16px/1 var(--font-num); letter-spacing: -.04em; }
.card-suit { display: block; width: 12px; height: 12px; }
.suit-svg { display: block; width: 100%; height: 100%; }
.card-mid { position: absolute; top: 14%; bottom: 14%; left: 22%; right: 22%; }
.card-mid--pips { top: 18%; bottom: 18%; left: 34%; right: 34%; }
.card-pip { position: absolute; width: 19cqw; height: 19cqw; transform: translate(-50%, -50%); }
.card-pip--flip { transform: translate(-50%, -50%) rotate(180deg); }
.card-mid--one, .card-mid--ace { display: flex; align-items: center; justify-content: center; }
.card .suit-svg { fill: currentColor; stroke: none; }
.card-mid--one .suit-svg { width: 70%; height: auto; }
.card-ace-art { width: 100%; height: auto; }
.card-mid--face { top: 9%; bottom: 9%; left: 22%; right: 22%; border: 1px solid var(--card-gold); border-radius: 3px; background: #FBF7EC; overflow: hidden; }
.card-face-art { width: 100%; height: 100%; object-fit: contain; display: block; }
.card[data-size="xs"] { width: 26px; border-radius: 4px; }
.card[data-size="xs"] .card-corner--tl { top: 50%; left: 50%; transform: translate(-50%, -50%); gap: 2px; }
.card[data-size="xs"] .card-rank { font-size: 11px; }
.card[data-size="xs"] .card-suit { width: 9px; height: 9px; }
.card[data-size="sm"] { width: 40px; }
.card[data-size="sm"] .card-rank { font-size: 12px; }
.card[data-size="sm"] .card-suit { width: 8px; height: 8px; }
.card[data-size="sm"] .card-corner--br { display: none; }
.card[data-size="sm"] .card-mid { top: 30%; bottom: 8%; left: 20%; right: 8%; }
.card[data-size="sm"] .card-mid--face { top: 12%; left: 30%; right: 6%; bottom: 6%; }
.card[data-size="md"] .card-rank { font-size: 17cqw; }
.card[data-size="md"] .card-suit { width: 13cqw; height: 13cqw; }
.card[data-size="md"] { width: 100%; }

/* 提示、浮層、對話框 */
.overlay-layer { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.overlay-layer > * { pointer-events: auto; }
.toast-wrap { position: absolute; top: calc(var(--s2) + env(safe-area-inset-top)); left: var(--s4); right: var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s2); z-index: 40; pointer-events: none; }
.toast {
  background: var(--raised); color: var(--text); font: var(--t-small); padding: var(--s2) var(--s4);
  border-radius: var(--r-full); box-shadow: var(--shadow); max-width: 100%;
  animation: toast-in var(--d-base) var(--ease) both;
}
.toast--out { animation: toast-out var(--d-base) var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px); } }

.dialog-mask { position: absolute; inset: 0; background: rgba(0,0,0,.6); z-index: 50; display: flex; align-items: flex-end; animation: fade-in var(--d-base) var(--ease) both; }
.dialog {
  width: 100%; max-height: 70%; background: var(--surface); border-radius: var(--r-md) var(--r-md) 0 0;
  padding: var(--s6) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: var(--s3);
  animation: sheet-in var(--d-base) var(--ease) both;
}
.dialog--tall { max-height: 88%; }
.dialog-title { font: var(--t-title); }
.dialog-body { font: var(--t-body); color: var(--muted); overflow-y: auto; min-height: 0; }
.dialog-actions { display: flex; flex-direction: column; gap: var(--s2); }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 跑馬燈、表情、等待 */
.ticker { flex: 0 0 28px; height: 28px; overflow: hidden; font: var(--t-small); color: var(--muted); display: flex; align-items: center; }
.ticker-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fade-in var(--d-base) var(--ease) both; }
.emotes { display: flex; gap: var(--s2); justify-content: center; }
.emote-btn { width: 44px; height: 44px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); font: var(--t-small); display: inline-flex; align-items: center; justify-content: center; }
.emote-btn:active { background: var(--raised); }
.emote-pop { position: absolute; font: var(--t-small); background: var(--raised); padding: var(--s1) var(--s3); border-radius: var(--r-full); box-shadow: var(--shadow); animation: pop var(--d-slow) var(--ease) both; white-space: nowrap; z-index: 20; }
.emote-pop--me { background: var(--accent); color: var(--accent-ink); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.wait-line { display: flex; align-items: center; justify-content: center; gap: var(--s2); color: var(--muted); font: var(--t-small); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; animation: dot 1.2s var(--ease) infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* 分段選擇、輸入 */
.seg { display: flex; gap: var(--s2); }
.seg--wrap { flex-wrap: wrap; }
.seg-btn { flex: 1 1 0; min-width: 56px; height: 48px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font: var(--t-head); color: var(--muted); }
.seg-btn[data-on="true"], .seg-btn[aria-checked="true"] { background: var(--raised); border-color: var(--accent); color: var(--text); }
.text-input { height: 48px; padding: 0 var(--s3); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); width: 100%; }
.text-input:focus { border-color: var(--info); outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; }
  .dots i { animation: none; opacity: .6; }
}

/* 超車條（spec 六.5 第五節）：我的頭像與對手換位，被超的那顆抖一下 */
.overtake {
  position: absolute; left: 50%; top: 64px; z-index: 20; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s3) 6px 6px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.35);
  animation: ot-life var(--ot-ms, 1600ms) var(--ease) both; pointer-events: none;
}
.overtake--up { border-color: var(--accent); }
.overtake--down { border-color: var(--warn); }
.ot-track { position: relative; width: 76px; height: 36px; flex: 0 0 auto; }
.ot-av { position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%; }
.ot-av--me { z-index: 2; box-shadow: 0 0 0 2px var(--accent); }
/* up：我從後面（左）超到前面（右），對手被超後抖；down：對手從後面超到前面，我抖 */
.overtake--up .ot-av--me { animation: ot-pass 600ms var(--ease) 150ms both; }
.overtake--up .ot-av--other { left: 40px; animation: ot-back 600ms var(--ease) 150ms both, ot-shake 300ms var(--ease) 750ms; }
.overtake--down .ot-av--me { left: 40px; animation: ot-back 600ms var(--ease) 150ms both, ot-shake 300ms var(--ease) 750ms; }
.overtake--down .ot-av--other { z-index: 3; animation: ot-pass 600ms var(--ease) 150ms both; }
.ot-text { font: 700 14px/1.2 var(--font); white-space: nowrap; }
@keyframes ot-pass { from { transform: translateX(0); } to { transform: translateX(40px); } }
@keyframes ot-back { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@keyframes ot-shake { 25%, 75% { translate: -4px 0; } 50% { translate: 4px 0; } }
@keyframes ot-life { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
.overtake--still, .overtake--still .ot-av { animation: none; }
.overtake--still.overtake--up .ot-av--me, .overtake--still.overtake--down .ot-av--other { transform: translateX(40px); }
.overtake--still.overtake--up .ot-av--other, .overtake--still.overtake--down .ot-av--me { transform: translateX(-40px); }