:root {
  --bg: #07110c;
  --ink: #f6f1e4;
  --muted: rgba(246, 241, 228, 0.62);
  --faint: rgba(246, 241, 228, 0.12);
  --gold: #f4cf7a;
  --gold-2: #d39a3a;
  --gold-ink: #3a2408;
  --felt-1: #23875a;
  --felt-2: #136240;
  --felt-3: #093a25;
  --rail-1: #4a2c17;
  --rail-2: #7a4b26;
  --red: #d42a3c;
  --black: #17181c;
  --good: #6fe39b;
  --bad: #ff7a7a;
  --radius: 16px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --cw: clamp(48px, 17vw, 84px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(120% 70% at 50% 0%, #143323 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 110%, #2a1a0c 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input { font: inherit; color: inherit; user-select: text; -webkit-user-select: text; }

.screen { display: none; height: 100dvh; width: 100%; max-width: 980px; margin: 0 auto; position: relative; }
.screen.active { display: flex; flex-direction: column; }

/* ---------- 按鈕 ---------- */
.btn {
  height: 50px; padding: 0 22px; border-radius: 14px; font-weight: 700; font-size: 17px; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.12s ease, filter 0.2s ease, opacity 0.2s ease;
}
.btn:active:not(:disabled) { transform: scale(0.96); }
.btn:disabled { opacity: 0.38; cursor: default; }
.btn.primary {
  color: var(--gold-ink);
  background: linear-gradient(180deg, #ffe7a8 0%, var(--gold) 38%, var(--gold-2) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 -2px 0 rgba(0, 0, 0, 0.15) inset, 0 8px 22px rgba(211, 154, 58, 0.35);
}
.btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  backdrop-filter: blur(8px);
}
.btn.ghost { background: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset; color: var(--muted); }
.btn.big { height: 56px; width: 100%; font-size: 18px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px;
  background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.icon-btn:active { transform: scale(0.94); }
.link-btn { color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; padding: 10px; }

/* ---------- 首頁 ---------- */
#home { align-items: center; justify-content: center; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); gap: 26px; }
.home-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 32% at 50% 30%, rgba(244, 207, 122, 0.16), transparent 70%);
}
.hero { text-align: center; position: relative; }
.hero-cards { position: relative; height: 150px; width: 240px; margin: 0 auto 6px; }
.hero-cards .card { --cw: 82px; position: absolute; left: 50%; bottom: 0; transform-origin: 50% 120%; animation: heroIn 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.2) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(60px) rotate(0deg) scale(0.8); } }
.logo {
  font-family: "Noto Serif TC", var(--serif); font-weight: 900; font-size: clamp(48px, 15vw, 72px); margin: 0; line-height: 1.05;
  background: linear-gradient(180deg, #fff3cf 0%, var(--gold) 45%, #b8802d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(244, 207, 122, 0.25));
}
.logo span { font-size: 0.5em; margin-left: 6px; vertical-align: 0.5em; }
.tagline { margin: 10px 0 0; color: var(--muted); letter-spacing: 0.3em; font-size: 13px; }
.panel {
  width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; position: relative;
  padding: 22px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset, 0 20px 50px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}
.field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.field input, .code-input {
  height: 52px; border-radius: 14px; border: 0; padding: 0 16px; font-size: 18px; outline: none;
  background: rgba(0, 0, 0, 0.35); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  transition: box-shadow 0.2s;
}
.field input:focus, .code-input:focus { box-shadow: 0 0 0 2px var(--gold) inset; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--faint); }
.join-row { display: flex; gap: 10px; }
.code-input { flex: 1; min-width: 0; text-align: center; letter-spacing: 0.5em; font-family: var(--serif); font-weight: 700; font-size: 22px; }
.shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- 撲克牌 ---------- */
.card {
  --h: calc(var(--cw) * 1.42);
  width: var(--cw); height: var(--h); border-radius: calc(var(--cw) * 0.11);
  background: linear-gradient(160deg, #ffffff 0%, #f6f3ec 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.25), 0 8px 18px rgba(0, 0, 0, 0.25);
  color: var(--black); position: relative; flex: none; font-family: var(--serif);
}
.card.red { color: var(--red); }
.card .ci { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 0.9; }
.card .ci.tl { top: calc(var(--cw) * 0.06); left: calc(var(--cw) * 0.07); }
.card .ci.br { bottom: calc(var(--cw) * 0.06); right: calc(var(--cw) * 0.07); transform: rotate(180deg); }
.card .ci b { font-size: calc(var(--cw) * 0.3); font-weight: 700; letter-spacing: -0.06em; }
.card .ci i { font-style: normal; font-size: calc(var(--cw) * 0.24); margin-top: 1px; }
.card .cc {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * 0.62);
  padding-top: calc(var(--cw) * 0.04);
}
.card .cc.face {
  inset: calc(var(--cw) * 0.24) calc(var(--cw) * 0.2);
  border-radius: calc(var(--cw) * 0.06);
  background: linear-gradient(160deg, rgba(244, 207, 122, 0.35), rgba(211, 154, 58, 0.12));
  box-shadow: 0 0 0 1px rgba(160, 110, 30, 0.45) inset;
  font-size: calc(var(--cw) * 0.5); font-weight: 900; padding: 0;
}
.card .cc.face small { display: block; font-size: 0.5em; text-align: center; margin-top: -0.25em; }
.card.two::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(211, 154, 58, 0.55) inset;
}
.back {
  width: var(--cw); height: calc(var(--cw) * 1.42); border-radius: calc(var(--cw) * 0.11); flex: none; position: relative;
  background: radial-gradient(circle at 50% 40%, #c3303f, #7c1426 80%);
  box-shadow: 0 0 0 1.5px #fff7ea inset, 0 0 0 1px rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.35);
}
.back::after {
  content: ""; position: absolute; inset: 12%; border-radius: 3px;
  border: 1px solid rgba(255, 220, 150, 0.55);
  background:
    repeating-linear-gradient(45deg, rgba(255, 220, 150, 0.22) 0 1.5px, transparent 1.5px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 220, 150, 0.22) 0 1.5px, transparent 1.5px 6px);
}

/* ---------- 等待開局 ---------- */
#lobby { padding: 0 18px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
.topbar {
  display: flex; align-items: center; gap: 10px; height: 56px; flex: none;
  padding: env(safe-area-inset-top) 12px 0; min-height: calc(56px + env(safe-area-inset-top));
}
#lobby .topbar { padding-left: 0; padding-right: 0; }
.topbar-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; }
.topbar-right { display: flex; gap: 8px; }
.room-chip, .round-chip {
  font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset; color: var(--muted); font-weight: 600; white-space: nowrap;
}
.room-chip b { color: var(--gold); font-family: var(--serif); letter-spacing: 0.12em; margin-left: 4px; }
.code-card {
  text-align: center; padding: 22px 18px 18px; border-radius: 22px; margin-top: 6px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(35, 135, 90, 0.55), rgba(9, 58, 37, 0.65));
  box-shadow: 0 0 0 1px rgba(244, 207, 122, 0.25) inset, 0 18px 40px rgba(0, 0, 0, 0.35);
}
.code-card .label { font-size: 13px; color: var(--muted); letter-spacing: 0.3em; }
.code-digits { display: flex; justify-content: center; gap: 10px; margin: 12px 0 16px; }
.code-digits span {
  width: 58px; height: 72px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 900; font-size: 40px; color: var(--gold-ink);
  background: linear-gradient(180deg, #fffaf0, #efe4c9);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 18px rgba(0, 0, 0, 0.35);
}
.code-card .btn { height: 42px; font-size: 15px; }
.section-title { font-size: 13px; color: var(--muted); letter-spacing: 0.2em; margin: 22px 4px 10px; }
.seats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seat-card {
  border-radius: 18px; padding: 14px; display: flex; align-items: center; gap: 12px; min-height: 76px; position: relative;
  background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  animation: pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
.seat-card.me { box-shadow: 0 0 0 1.5px rgba(244, 207, 122, 0.6) inset; }
.seat-card.empty { justify-content: center; flex-direction: column; gap: 6px; background: transparent; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.14) inset; border: 0; }
.seat-card.empty .wait { color: var(--muted); font-size: 13px; }
.seat-card.empty .btn { height: 34px; font-size: 13px; padding: 0 12px; border-radius: 10px; }
.seat-card .meta { min-width: 0; }
.seat-card .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.tag { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: var(--muted); }
.tag.gold { background: rgba(244, 207, 122, 0.18); color: var(--gold); }
.kick { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 8px; color: var(--muted); font-size: 13px; }
@keyframes pop { from { opacity: 0; transform: scale(0.9); } }
.settings { display: flex; flex-direction: column; gap: 10px; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}
.setting-row .t { font-size: 15px; }
.setting-row .d { font-size: 12px; color: var(--muted); margin-top: 2px; }
.seg { display: flex; background: rgba(0, 0, 0, 0.35); border-radius: 11px; padding: 3px; }
.seg button { height: 32px; min-width: 44px; padding: 0 10px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg button.on { background: var(--gold); color: var(--gold-ink); }
.toggle { width: 50px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); position: relative; flex: none; transition: background 0.2s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.toggle.on { background: var(--gold-2); }
.toggle.on::after { transform: translateX(20px); }
.settings.readonly button { pointer-events: none; }
.lobby-foot { position: sticky; bottom: 0; padding: 22px 0 4px; margin-top: auto; background: linear-gradient(transparent, var(--bg) 28%); }
.hint-line { text-align: center; color: var(--muted); font-size: 12px; margin-top: 10px; }

/* ---------- 頭像 ---------- */
.avatar {
  --hue: 30; width: 46px; height: 46px; border-radius: 50%; flex: none; position: relative;
  display: grid; place-items: center; font-weight: 800; font-size: 19px; color: #fff;
  background: linear-gradient(140deg, hsl(var(--hue) 75% 62%), hsl(calc(var(--hue) + 40) 70% 38%));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 4px 12px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.avatar.sm { width: 36px; height: 36px; font-size: 15px; }
.avatar .bot { position: absolute; right: -6px; bottom: -4px; font-size: 14px; font-style: normal; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }

/* ---------- 牌桌 ---------- */
#game { overflow: hidden; }
.felt-wrap { flex: 1; position: relative; padding: 6px 14px 4px; min-height: 0; }
.felt {
  position: absolute; inset: 6px 14px 4px; border-radius: 46% / 26%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 42%, var(--felt-1) 0%, var(--felt-2) 48%, var(--felt-3) 100%);
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(244, 207, 122, 0.18),
    0 0 0 9px var(--rail-1),
    0 0 0 11px var(--rail-2),
    0 0 0 12px rgba(0, 0, 0, 0.5),
    0 18px 50px rgba(0, 0, 0, 0.65);
}
.felt::before {
  content: ""; position: absolute; inset: 14% 16%; border-radius: 50%;
  border: 1.5px solid rgba(244, 207, 122, 0.14); pointer-events: none;
}
.felt-mark {
  position: absolute; left: 50%; top: 76%; transform: translate(-50%, -50%); pointer-events: none;
  font-family: "Noto Serif TC", var(--serif); font-weight: 900; font-size: 40px; color: rgba(0, 0, 0, 0.14); letter-spacing: 0.4em;
  white-space: nowrap;
}

/* 對手座位 */
.seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 92px; z-index: 2; transition: opacity 0.3s; }
.seat.r2 { top: 12px; left: 50%; transform: translateX(-50%); }
.seat.r1 { right: 2px; top: 36%; }
.seat.r3 { left: 2px; top: 36%; }
.seat .nm {
  font-size: 13px; font-weight: 700; max-width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.45);
}
.seat .chip-line { font-size: 11px; color: var(--gold); font-weight: 700; margin-top: -2px; }
.seat .cnt {
  position: absolute; top: -4px; right: 12px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; font-family: var(--serif);
  background: #fff; color: var(--black); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.seat .cnt.warn { background: var(--red); color: #fff; animation: beat 0.9s infinite; }
@keyframes beat { 50% { transform: scale(1.18); } }
.seat .fan { display: flex; height: 26px; margin-top: 1px; }
.seat .fan .back { --cw: 18px; margin-left: -12px; }
.seat .fan .back:first-child { margin-left: 0; }
.seat.turn .avatar { box-shadow: 0 0 0 3px var(--gold), 0 0 0 7px rgba(244, 207, 122, 0.3), 0 0 26px rgba(244, 207, 122, 0.7); animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 0 10px rgba(244, 207, 122, 0.12), 0 0 34px rgba(244, 207, 122, 0.9); } }
.seat.off { opacity: 0.55; }
.seat .status-tag { font-size: 10px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); color: var(--muted); }
.thinking { display: inline-flex; gap: 3px; }
.thinking i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); animation: dot 1s infinite; }
.thinking i:nth-child(2) { animation-delay: 0.15s; }
.thinking i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 50% { opacity: 0.2; transform: translateY(-2px); } }

/* 「過」泡泡 */
.pass-bubble {
  position: absolute; z-index: 3; font-weight: 800; font-size: 14px; padding: 5px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.92); color: #444; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  animation: pop 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}
.pass-bubble.r0 { left: 50%; bottom: 12px; transform: translateX(-50%); }
.pass-bubble.r1 { right: 98px; top: calc(36% + 14px); }
.pass-bubble.r2 { left: calc(50% + 52px); top: 22px; }
.pass-bubble.r3 { left: 98px; top: calc(36% + 14px); }

/* 桌面中央 */
.center { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1; width: 100%; pointer-events: none; }
.pile-cards { display: flex; justify-content: center; }
.pile-cards .card { --cw: clamp(44px, 13vw, 70px); margin-left: calc(var(--cw) * -0.42); }
.pile-cards .card:first-child { margin-left: 0; }
.pile.fly .card { animation: fly 0.42s cubic-bezier(0.2, 0.85, 0.25, 1.05) both; }
.pile.fly .card:nth-child(2) { animation-delay: 0.03s; }
.pile.fly .card:nth-child(3) { animation-delay: 0.06s; }
.pile.fly .card:nth-child(4) { animation-delay: 0.09s; }
.pile.fly .card:nth-child(5) { animation-delay: 0.12s; }
@keyframes fly { from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(0.7); } }
.pile.from-r0 { --fx: 0; --fy: 220px; --fr: -8deg; }
.pile.from-r1 { --fx: 160px; --fy: -10px; --fr: 14deg; }
.pile.from-r2 { --fx: 0; --fy: -180px; --fr: 8deg; }
.pile.from-r3 { --fx: -160px; --fy: -10px; --fr: -14deg; }
.pile-cap { text-align: center; font-size: 13px; color: var(--muted); margin-top: 10px; }
.pile-cap b { color: var(--ink); }
.pile-cap .type { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); color: var(--gold); font-weight: 700; }
.lead-msg { font-size: 14px; color: rgba(255, 255, 255, 0.75); padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); }
.lead-msg b { color: var(--gold); }
.club3-tip { font-size: 12px; color: var(--gold); }

/* toast */
#toast, #globalToast {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -8px); z-index: 20; pointer-events: none;
  padding: 9px 18px; border-radius: 999px; background: rgba(10, 18, 14, 0.88); color: var(--ink); font-weight: 700; font-size: 14px;
  box-shadow: 0 0 0 1px rgba(244, 207, 122, 0.35), 0 10px 30px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
}
#globalToast { position: fixed; top: 16px; }
#toast.show, #globalToast.show { opacity: 1; transform: translate(-50%, 0); }

#fx { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
canvas.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* ---------- 我的區域 ---------- */
.me { flex: none; padding: 6px 12px calc(10px + env(safe-area-inset-bottom)); position: relative; }
.me::before {
  content: ""; position: absolute; inset: -30px 0 0; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(70% 60% at 50% 100%, rgba(244, 207, 122, 0.2), transparent 70%);
}
.me.myturn::before { opacity: 1; }
.me-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; position: relative; }
.me-id { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.me-id .nm { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-id .chip-line { font-size: 12px; color: var(--gold); font-weight: 700; }
.your-turn {
  font-size: 13px; font-weight: 800; padding: 5px 12px; border-radius: 999px; color: var(--gold-ink);
  background: linear-gradient(180deg, #ffe7a8, var(--gold)); box-shadow: 0 0 18px rgba(244, 207, 122, 0.55); animation: beat 1.4s infinite;
}
.wait-turn { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.me-bar .icon-btn { width: 38px; height: 38px; font-size: 13px; font-weight: 700; }
.me-bar .icon-btn.sort { width: auto; padding: 0 10px; }
.me.myturn .me-id .avatar { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(244, 207, 122, 0.7); }

.hand { position: relative; height: calc(var(--cw) * 1.42 + 26px); touch-action: none; margin: 0 -4px; }
.hand .card {
  position: absolute; bottom: 4px; transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.16s, left 0.3s ease;
  cursor: pointer;
}
.hand .card.sel { transform: translateY(-20px); box-shadow: 0 0 0 2.5px var(--gold), 0 0 18px rgba(244, 207, 122, 0.55), 0 10px 20px rgba(0, 0, 0, 0.35); }
.hand .card.deal { animation: deal 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
@keyframes deal { from { opacity: 0; transform: translateY(-140px) rotate(-12deg) scale(0.6); } }
.hand.dim .card { filter: brightness(0.92); }
.actions { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 10px; margin-top: 2px; }
.actions .btn { height: 52px; padding: 0 8px; }
.actions .btn.primary small { font-size: 12px; font-weight: 700; opacity: 0.75; }
.combo-hint { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); white-space: nowrap; pointer-events: none; transition: opacity 0.2s; }
.combo-hint.ok { color: var(--good); }
.combo-hint.no { color: var(--bad); }
.combo-hint:empty { opacity: 0; }


/* ---------- 彈窗 ---------- */
#modal:empty { display: none; }
.modal-back {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); animation: fade 0.25s both;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: min(520px, 100%); max-height: 88dvh; overflow-y: auto; padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0; background: linear-gradient(180deg, #17291f, #0d1913);
  box-shadow: 0 0 0 1px rgba(244, 207, 122, 0.22) inset, 0 -20px 60px rgba(0, 0, 0, 0.5);
  animation: rise 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
@keyframes rise { from { transform: translateY(60%); opacity: 0; } }
@media (min-width: 600px) { .modal-back { align-items: center; } .sheet { border-radius: 26px; } }
.sheet h2 { margin: 0; text-align: center; font-size: 26px; }
.sheet .sub { text-align: center; color: var(--muted); font-size: 13px; margin-top: 6px; }
.crown { text-align: center; font-size: 52px; line-height: 1; margin-bottom: 8px; animation: pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.5) both; }
.result h2.win { background: linear-gradient(180deg, #fff3cf, var(--gold) 55%, #c08a33); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 32px; }
.rows { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); animation: pop 0.4s both; }
.row.winner { background: linear-gradient(90deg, rgba(244, 207, 122, 0.2), rgba(244, 207, 122, 0.05)); box-shadow: 0 0 0 1px rgba(244, 207, 122, 0.35) inset; }
.row .nm { font-weight: 700; }
.row .left { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row .mult { color: var(--bad); font-weight: 800; }
.row .mini { display: flex; margin-top: 6px; }
.row .mini .card { --cw: 24px; margin-left: -12px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3); }
.row .mini .card:first-child { margin-left: 0; }
.row .mini .card .ci.br, .row .mini .card .cc { display: none; }
.row .money { text-align: right; }
.row .delta { font-family: var(--serif); font-weight: 900; font-size: 22px; }
.row .delta.up { color: var(--good); }
.row .delta.down { color: var(--bad); }
.row .total { font-size: 12px; color: var(--muted); }
.sheet-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.rules h3 { color: var(--gold); font-size: 15px; margin: 18px 0 6px; }
.rules p, .rules li { color: rgba(246, 241, 228, 0.82); font-size: 14px; line-height: 1.7; margin: 0; }
.rules ul { padding-left: 20px; margin: 0; }
.rules .order { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rules .order span { padding: 3px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); font-size: 13px; }

@media (max-height: 700px) {
  :root { --cw: clamp(44px, 14vw, 64px); }
  .actions .btn { height: 46px; }
  .seat .fan { display: none; }
}
@media (min-width: 700px) {
  .seat.r1 { right: 24px; }
  .seat.r3 { left: 24px; }
  .pass-bubble.r1 { right: 120px; }
  .pass-bubble.r3 { left: 120px; }
}

/* ================= v2：圖示、動畫、客製卡面 ================= */
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn .ico { width: 19px; height: 19px; }
.icon-btn .ico { width: 21px; height: 21px; }
.icon-btn { color: rgba(246, 241, 228, 0.86); transition: background 0.2s, color 0.2s, transform 0.12s; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--gold); }
.me-bar .icon-btn.sort { gap: 5px; display: inline-flex; align-items: center; }
.me-bar .icon-btn.sort .ico { width: 16px; height: 16px; }
.kick { display: grid; place-items: center; }
.kick .ico { width: 15px; height: 15px; }
.seat-card.empty .btn { gap: 4px; }
.seat-card.empty .btn .ico { width: 15px; height: 15px; }

/* 籌碼：小撲克籌碼 */
.coin {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; flex: none;
  background:
    radial-gradient(circle, #fbe3a1 0 36%, #c98f2e 37% 44%, transparent 45%),
    repeating-conic-gradient(#e0b04f 0 22.5deg, #fff6dc 22.5deg 45deg);
  box-shadow: 0 0 0 1px #7a4e12, 0 1px 2px rgba(0, 0, 0, 0.5);
}
.coin.flying { position: fixed; width: 22px; height: 22px; margin: 0; z-index: 70; pointer-events: none; }

/* 電腦徽章 */
.avatar .bot {
  right: -5px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: #10201a; color: var(--gold); box-shadow: 0 0 0 1.5px rgba(244, 207, 122, 0.7); filter: none;
}
.avatar .bot .ico { width: 13px; height: 13px; stroke-width: 2; }
.avatar.sm .bot { width: 17px; height: 17px; }
.avatar.sm .bot .ico { width: 11px; height: 11px; }
.avatar.xl { width: 84px; height: 84px; font-size: 34px; box-shadow: 0 0 0 3px #fff3cf, 0 0 0 6px rgba(244, 207, 122, 0.45), 0 10px 30px rgba(0, 0, 0, 0.5); }

/* 輪到誰：旋轉金色光圈 */
.seat.turn .avatar { animation: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 24px rgba(244, 207, 122, 0.55); }
.seat.turn .avatar::before, .me.myturn .me-id .avatar::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(244, 207, 122, 0.2) 65%, var(--gold) 88%, #fff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 牌落桌的光暈與殘影 */
.pile-cards { position: relative; }
.land-ring {
  position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: -1;
  transform: translate(-50%, -50%) scale(0.4); opacity: 0;
  background: radial-gradient(circle, rgba(244, 207, 122, 0.45), rgba(244, 207, 122, 0) 65%);
  animation: land 1.1s 0.45s ease-out both;
}
@keyframes land { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }
.pile-cards.ghost { position: fixed; z-index: 0; pointer-events: none; display: flex; justify-content: center; }
.pile-cards.ghost .card { --cw: clamp(44px, 13vw, 70px); }

/* 畫面切換、按鈕光澤 */
.screen.active { animation: screenIn 0.45s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px) scale(0.99); } }
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-18deg);
}
.btn.primary:hover:not(:disabled)::after { animation: sheen 0.9s ease; }
.me.myturn .btn.primary:not(:disabled)::after, #startBtn:not(:disabled)::after { animation: sheen 2.6s ease-in-out infinite; }
@keyframes sheen { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.your-turn { animation: turnPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.5) both, beat 1.6s 0.5s infinite; }
@keyframes turnPop { from { transform: scale(0.4); opacity: 0; } }


/* 結算：皇冠與光芒 */
.crown { display: none; }
.champ { position: relative; width: 140px; height: 132px; margin: -4px auto 6px; display: grid; place-items: end center; }
.champ .avatar.xl { margin-bottom: 8px; animation: pop 0.6s 0.1s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }
.champ .rays {
  position: absolute; left: 50%; top: 58%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(244, 207, 122, 0.22) 0 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%);
  mask: radial-gradient(circle, #000 20%, transparent 68%);
  animation: spin 18s linear infinite, fade 0.8s both;
}
.crown-ico {
  position: absolute; top: 0; left: 50%; width: 64px; height: 48px; margin-left: -32px; z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); animation: crownDrop 0.8s 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes crownDrop { from { transform: translateY(-70px) rotate(-25deg); opacity: 0; } }
.row .delta { font-variant-numeric: tabular-nums; }

/* ---------- 客製卡面（13 張完整卡面，程式補花色） ---------- */
.card.art-card { overflow: hidden; background: #fff; }
.card.art-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.card.art-card .slot {
  position: absolute; transform: translate(-50%, -50%) rotate(var(--rot)); font-style: normal; line-height: 1;
  font-size: calc(var(--cw) * var(--sz)); font-family: var(--serif); color: var(--suit-c);
  text-shadow: 0 0 2px #fff, 0 0 4px #fff;
}
.card.art-card .frame { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 calc(var(--cw) * 0.035) var(--suit-c); opacity: 0.9; }
.card.art-card .tint-layer { position: absolute; inset: 0; background: var(--suit-c); mix-blend-mode: color; opacity: 0.85; pointer-events: none; }
.card.su0 { --suit-c: #23794b; } /* ♣ 綠 */
.card.su1 { --suit-c: #2b63c9; } /* ♦ 藍 */
.card.su2 { --suit-c: #d0283b; } /* ♥ 紅 */
.card.su3 { --suit-c: #1d1f26; } /* ♠ 黑 */
.row .mini .card.art-card .slot:not(:first-of-type) { display: none; }
/* 花色徽章：圖案太滿時也看得清楚 */
.card.art-card .slot {
  width: 1.25em; height: 1.25em; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 251, 238, 0.97) 58%, rgba(255, 251, 238, 0) 72%);
  text-shadow: none;
}

/* ---------- 會動的頭像（blob） ---------- */
.avatar { background: none !important; box-shadow: none !important; text-shadow: none; color: transparent; }
.avatar svg.blob {
  position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; overflow: visible; display: block;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
}
.seat.turn .avatar, .champ .avatar.xl, .me.myturn .me-id .avatar { box-shadow: none !important; animation: none; }
.seat.turn .avatar svg.blob, .me.myturn .me-id .avatar svg.blob { filter: drop-shadow(0 0 8px rgba(244, 207, 122, 0.75)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3)); }
.seat.turn .avatar::before, .me.myturn .me-id .avatar::before { inset: -9px; }
.avatar .bot { z-index: 2; }

/* 只剩「過」和「出牌」 */
.actions { grid-template-columns: 1fr 2fr; }
#clearBtn:disabled { opacity: 0.3; cursor: default; }
.hand .card { touch-action: none; }

/* ---------- 顯示更清楚：手牌兩排、牌堆攤開 ---------- */
.hand .card { bottom: auto; }
.hand .combo-hint { top: -6px; }
/* 手牌的花色徽章放大 */
.hand .card.art-card .slot { font-size: calc(var(--cw) * 0.19) !important; }
.hand .card.art-card .slot:last-of-type { display: none; }
/* 桌上牌堆：牌放大、幾乎不重疊 */
.pile-cards .card, .pile-cards.ghost .card { --cw: clamp(50px, 15.5vw, 84px); margin-left: calc(var(--cw) * -0.1); }
.pile-cards .card:first-child { margin-left: 0; }
.pile-cards .card.art-card .slot { font-size: calc(var(--cw) * 0.17) !important; }
.pile-cap { font-size: 14px; }
.pile-cap .type { font-size: 15px; padding: 3px 10px; }

/* ================= 多遊戲 ================= */
/* 大廳：選遊戲 */
.game-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.game-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset; transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.game-card .ico { width: 28px; height: 28px; color: var(--muted); }
.game-card b { font-size: 15px; }
.game-card small { font-size: 11px; color: var(--muted); }
.game-card.on { background: linear-gradient(180deg, rgba(244, 207, 122, 0.2), rgba(244, 207, 122, 0.06)); box-shadow: 0 0 0 1.5px var(--gold) inset, 0 8px 20px rgba(0, 0, 0, 0.3); }
.game-card.on .ico { color: var(--gold); }
.game-card:active { transform: scale(0.96); }
.game-pick.readonly .game-card { pointer-events: none; }
.game-pick.readonly .game-card:not(.on) { opacity: 0.45; }

.btn.danger {
  color: #fff; background: linear-gradient(180deg, #ff6b6b, #c81e33);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 -2px 0 rgba(0, 0, 0, 0.18) inset, 0 8px 20px rgba(200, 30, 51, 0.35);
}
.actions.dice { grid-template-columns: 1fr 2fr; }
.actions.cheat { grid-template-columns: 1fr 1fr 1.6fr; }
.actions.cheat.two { grid-template-columns: 1fr 1fr; }

/* 骰子 */
.die {
  --d: 26px; width: var(--d); height: var(--d); display: inline-grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: calc(var(--d) * 0.14); border-radius: calc(var(--d) * 0.22); vertical-align: middle; flex: none;
  background: linear-gradient(150deg, #ffffff, #efe8d8); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.2s, opacity 0.2s;
}
.die i { width: 72%; height: 72%; place-self: center; border-radius: 50%; background: #1d1d24; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); }
.die.f1 i, .die.f4 i { background: #d42a3c; }
.die.f1 i { width: 100%; height: 100%; }
.die.xs { --d: 16px; padding: 2px; border-radius: 4px; }
.die.sm { --d: 28px; }
.die.lg { --d: 58px; }
.die.xl { --d: clamp(46px, 13vw, 60px); }
.die.hit { box-shadow: 0 0 0 2.5px var(--gold), 0 0 16px rgba(244, 207, 122, 0.7), 0 4px 8px rgba(0, 0, 0, 0.35); transform: translateY(-4px); }
.die.dim { opacity: 0.35; }
.my-dice { display: flex; justify-content: center; gap: 10px; padding: 12px 0 4px; }
.dice-hint { text-align: center; font-size: 12px; color: var(--muted); min-height: 18px; }
.dice-hint b { color: var(--gold); font-size: 14px; }
.bid-picker { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px 0 10px; transition: opacity 0.2s; }
.bid-picker.off { opacity: 0.4; pointer-events: none; }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper .icon-btn { width: 44px; height: 44px; font-size: 24px; font-weight: 700; }
.cval { min-width: 64px; text-align: center; }
.cval b { font-family: var(--serif); font-size: 34px; color: var(--gold); }
.cval small { font-size: 13px; color: var(--muted); margin-left: 3px; }
.faces { display: flex; gap: 7px; }
.faces .face { padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset; transition: background 0.15s, box-shadow 0.15s, transform 0.12s; }
.faces .face.on { background: rgba(244, 207, 122, 0.22); box-shadow: 0 0 0 2px var(--gold) inset; }
.faces .face:active { transform: scale(0.92); }
#bidBtn .die { margin-left: 4px; }

.cup-line { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.cup-line .ico { width: 18px; height: 18px; color: var(--gold); transform-origin: 50% 100%; }
.seat-bid { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; gap: 4px; }
.dice-bid { text-align: center; }
.dice-bid .who { font-size: 14px; color: var(--muted); }
.dice-bid .who b { color: var(--ink); }
.dice-bid .big { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.dice-bid .num { font-family: var(--serif); font-weight: 900; font-size: 64px; line-height: 1; color: var(--gold); text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
.dice-bid .x { font-size: 18px; color: var(--muted); }
.dice-bid.pop .big { animation: bidPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.5) both; }
@keyframes bidPop { from { transform: scale(0.5); opacity: 0; } }
.wild-chip { font-size: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(244, 207, 122, 0.16); color: var(--gold); }
.wild-chip.off { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.open-stamp {
  font-family: "Noto Serif TC", var(--serif); font-weight: 900; font-size: 72px; color: #ff5a5a; transform: rotate(-12deg);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); animation: stampIn 0.4s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
@keyframes stampIn { from { transform: rotate(-12deg) scale(2.4); opacity: 0; } }

.verdict { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.verdict > div { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.verdict small { font-size: 12px; color: var(--muted); }
.verdict b { font-family: var(--serif); font-size: 34px; color: var(--gold); line-height: 1.1; }
.verdict b.ok { color: var(--good); }
.verdict b.no { color: var(--bad); }
.verdict .vs { font-size: 26px; color: var(--muted); }
.verdict-line { text-align: center; font-weight: 700; margin-top: 8px; }
.mini-dice { display: flex; gap: 3px; margin-top: 6px; }
.row.loser { background: linear-gradient(90deg, rgba(255, 90, 90, 0.16), rgba(255, 90, 90, 0.04)); }

/* 撲克吹牛 */
.cheat-pile { position: relative; width: 62px; height: 86px; }
.cheat-pile .stack .back {
  --cw: 56px; position: absolute; left: 0; top: 0;
  transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.5px)) rotate(calc((var(--i) - 3) * 3deg));
}
.pile-total {
  position: absolute; right: -14px; top: -10px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 900; font-size: 14px; background: var(--gold); color: var(--gold-ink); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.claim { font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.claim b { color: var(--ink); }
.claim-n { font-family: var(--serif); font-weight: 900; font-size: 26px; color: var(--gold); }
.claim-r {
  font-family: var(--serif); font-weight: 900; font-size: 22px; min-width: 34px; height: 44px; padding: 0 6px; border-radius: 6px; display: inline-grid; place-items: center;
  background: #fff; color: var(--black); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.reveal { position: relative; }
.reveal .stamp {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg); white-space: nowrap;
  font-family: "Noto Serif TC", var(--serif); font-weight: 900; font-size: 34px; padding: 2px 14px; border-radius: 10px;
  border: 4px solid currentColor; background: rgba(255, 255, 255, 0.85);
}
.reveal .stamp.lie { color: #d42a3c; }
.reveal .stamp.true { color: #1f8a4c; }
.lead-msg.small { font-size: 12px; padding: 5px 12px; }
.rank-pick { display: flex; gap: 5px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.rank-pick::-webkit-scrollbar { display: none; }
.rank-pick button {
  flex: none; min-width: 34px; height: 40px; border-radius: 9px; font-family: var(--serif); font-weight: 900; font-size: 17px;
  background: #fff; color: var(--black); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform 0.12s, box-shadow 0.15s;
}
.rank-pick button.on { background: var(--gold); box-shadow: 0 0 0 2px #fff7dd, 0 0 14px rgba(244, 207, 122, 0.7); transform: translateY(-3px); }

/* ================= 進場流程 ================= */
#home { justify-content: flex-start; overflow-y: auto; padding: calc(16px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom)); gap: 0; }
#home .step { display: none; width: min(420px, 100%); margin: auto; flex-direction: column; align-items: center; gap: 16px; position: relative; }
#home .step.on { display: flex; animation: stepIn 0.5s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
#home .step.on.rev { animation-name: stepBack; }
@keyframes stepIn { from { opacity: 0; transform: translateX(40px); } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-40px); } }
.hero-games { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hero-games span {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.hero-games .ico { width: 16px; height: 16px; color: var(--gold); }
[data-step="welcome"] .btn.big { margin-top: 10px; }
.step-head { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.dots { display: flex; gap: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.2); transition: width 0.3s, background 0.3s; }
.dots i.on { width: 22px; background: var(--gold); }
.step-title { margin: 0; font-family: "Noto Serif TC", var(--serif); font-weight: 900; font-size: 28px; letter-spacing: 0.06em; }
.me-preview { position: relative; height: 150px; display: grid; place-items: center; }
.me-preview::before {
  content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(244, 207, 122, 0.22), transparent 65%);
}
.me-preview .avatar.xl { width: 120px; height: 120px; }
.name-input {
  width: 100%; height: 54px; border: 0; border-radius: 16px; text-align: center; font-size: 20px; font-weight: 700; outline: none;
  background: rgba(0, 0, 0, 0.35); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset; transition: box-shadow 0.2s;
}
.name-input:focus { box-shadow: 0 0 0 2px var(--gold) inset; }
.pick-group { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.pick-label { font-size: 12px; color: var(--muted); letter-spacing: 0.2em; margin-top: 4px; }
.pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pick button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 6px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; transition: box-shadow 0.2s, background 0.2s, transform 0.12s;
}
.pick button:active { transform: scale(0.93); }
.pick button.on { background: rgba(244, 207, 122, 0.16); box-shadow: 0 0 0 2px var(--gold) inset; }
.pick button small { font-size: 11px; color: var(--muted); }
.pick button.on small { color: var(--gold); }
.pick .avatar { width: 34px; height: 34px; }
.pick.colors button { aspect-ratio: 1; padding: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 3px 8px rgba(0, 0, 0, 0.35); }
.pick.colors button.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); transform: scale(0.92); }
.me-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; text-align: left;
  background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.me-chip .avatar.sm { width: 40px; height: 40px; }
.me-chip span { display: flex; flex-direction: column; }
.me-chip b { font-size: 16px; }
.me-chip small { font-size: 11px; color: var(--muted); }
.choice {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 14px 30px rgba(0, 0, 0, 0.3); transition: transform 0.15s, box-shadow 0.2s;
}
button.choice:active { transform: scale(0.98); }
button.choice:hover { box-shadow: 0 0 0 1.5px var(--gold) inset, 0 14px 30px rgba(0, 0, 0, 0.3); }
.choice-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, #ffe7a8, var(--gold-2)); color: var(--gold-ink); }
.choice-ico .ico { width: 24px; height: 24px; stroke-width: 2.2; }
.choice.join .choice-ico { background: rgba(255, 255, 255, 0.1); color: var(--gold); }
.choice-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.choice-txt b { font-size: 18px; }
.choice-txt small { font-size: 13px; color: var(--muted); }
.choice .join-row { width: 100%; }
.edit-me { position: absolute; right: 8px; bottom: 8px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: var(--gold); background: rgba(244, 207, 122, 0.14); }

/* ================= 下注 ================= */
.pchip {
  --pc: #2b63c9; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; position: relative;
  background:
    radial-gradient(circle, var(--pc) 0 46%, #fff 47% 52%, var(--pc) 53% 64%, transparent 65%),
    repeating-conic-gradient(var(--pc) 0 20deg, #fff 20deg 40deg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 3px 6px rgba(0, 0, 0, 0.45);
}
.pchip.c0 { --pc: #2b63c9; }
.pchip.c1 { --pc: #d0283b; }
.pchip.c2 { --pc: #1d7a4a; }
.pchip.c3 { --pc: #7a3fd0; }
.pchip.big { width: 64px; height: 64px; font-family: var(--serif); font-weight: 900; font-size: 14px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); transition: transform 0.12s; }
.pchip.big:active { transform: scale(0.9) rotate(-12deg); }
.pchip.big span { position: relative; z-index: 1; }
.bet-tag { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: var(--muted); display: inline-flex; align-items: center; animation: dot 1.4s infinite; }
.bet-tag.done { color: var(--gold-ink); background: linear-gradient(180deg, #ffe7a8, var(--gold)); animation: pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.5) both; }
.bet-tag.done .coin { margin-right: 3px; }
.bet-tag.small { font-size: 11px; padding: 2px 8px; animation: none; background: rgba(244, 207, 122, 0.16); color: var(--gold); }
.pot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pot-stack { position: relative; width: 90px; height: 70px; }
.pot-stack .pchip { position: absolute; left: calc(50% - 13px + var(--o) * 4px); bottom: calc(var(--i) * 3px); transform: rotate(calc(var(--i) * 23deg)); }
.pot-num { font-size: 15px; color: var(--muted); }
.pot-num b { font-family: var(--serif); font-weight: 900; font-size: 42px; color: var(--gold); margin-left: 4px; vertical-align: -6px; }
.pot-sub { font-size: 12px; color: var(--muted); }
.bet-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 12px; }
.bet-amount { display: flex; align-items: baseline; gap: 8px; }
.bet-amount small { font-size: 13px; color: var(--muted); }
.bet-amount b { font-family: var(--serif); font-weight: 900; font-size: 44px; color: var(--gold); display: inline-block; }
.chip-row { display: flex; gap: 12px; justify-content: center; }
.bet-tools { display: flex; gap: 10px; }
.bet-tools .btn { height: 38px; font-size: 14px; padding: 0 14px; }
.actions.bet { grid-template-columns: 1fr; }
.bet-note { font-size: 12px; color: var(--gold); margin-top: 2px; }
#roundChip b { color: var(--gold); font-family: var(--serif); margin-left: 2px; }
#roundChip .coin { margin-left: 4px; }

/* 標題四個字一樣大 */
.logo span { font-size: 1em; margin-left: 0; vertical-align: 0; }
.logo { letter-spacing: 0.04em; }

/* 不讓按鈕、標籤裡的字被擠成兩行 */
.btn, .seg button, .tag, .bet-tag, .your-turn, .wait-turn, .room-chip, .round-chip, .game-card b, .game-card small,
.pick button small, .hero-games span, .edit-me, .seat .nm, .cup-line, .seat-bid, .claim, .pile-cap, .lead-msg, .wild-chip { white-space: nowrap; }
.setting-row.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.setting-row.stack .seg { width: 100%; }
.setting-row.stack .seg button { flex: 1; }

/* 自己的座位卡：整張可點來改頭像 */
.seat-card.me { cursor: pointer; }
.seat-card.me:active { transform: scale(0.98); }
.av-wrap { position: relative; flex: none; }
.edit-badge {
  position: absolute; right: -6px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 2px #14251c, 0 2px 6px rgba(0, 0, 0, 0.4);
}
.edit-badge .ico { width: 13px; height: 13px; stroke-width: 2.2; }
.edit-me { display: none; }

/* 窄螢幕：頂部列可以縮、結算光芒不撐寬視窗 */
.topbar-mid { min-width: 0; }
.room-chip, .round-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sheet { overflow-x: hidden; }
@media (max-width: 370px) {
  .topbar { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .topbar .icon-btn { width: 36px; height: 36px; }
  .topbar-right { gap: 6px; }
  .topbar-mid { gap: 5px; }
  .room-chip, .round-chip { padding: 5px 9px; font-size: 12px; }
  .room-chip b { letter-spacing: 0.05em; }
}

/* 矮螢幕（小手機）精簡版面 */
@media (max-height: 700px) {
  .seat { gap: 3px; }
  .seat .chip-line, .cup-line { display: none; }
  .seat .avatar { width: 40px; height: 40px; }
  .dice-bid .num { font-size: 46px; }
  .dice-bid .who { font-size: 12px; }
  .die.lg { --d: 42px; }
  .die.xl { --d: 42px; }
  .my-dice { gap: 8px; padding: 6px 0 2px; }
  .dice-hint { font-size: 11px; }
  .bid-picker { gap: 6px; margin: 4px 0 6px; }
  .stepper .icon-btn { width: 38px; height: 38px; }
  .cval b { font-size: 28px; }
  .faces { gap: 5px; }
  .faces .face { padding: 4px; }
  .die.sm { --d: 24px; }
  .pot-num b { font-size: 34px; }
  .pot-stack { height: 52px; }
  .bet-amount b { font-size: 36px; }
  .pchip.big { width: 54px; height: 54px; font-size: 12px; }
  .bet-box { gap: 8px; padding: 4px 0 8px; }
  .me-bar { margin-bottom: 2px; }
  .seat.r1, .seat.r3 { top: 30%; }
}
.me-id .nm, .me-id .chip-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 370px) {
  .me-bar { gap: 6px; }
  .me-bar .icon-btn.sort span { display: none; }
  .me-bar .icon-btn.sort { width: 38px; padding: 0; justify-content: center; }
  .your-turn, .wait-turn { font-size: 12px; }
}

/* 喊數量：到最小值時「−」變灰，並說明最少幾個 */
.stepper .icon-btn:disabled { opacity: 0.3; cursor: default; }
.cmin { font-size: 11px; color: var(--muted); white-space: nowrap; min-height: 14px; margin-top: 2px; }

/* 座位依人數沿牌桌排成弧形 */
.seat.dyn { right: auto; transform: translate(-50%, -50%); }
.pass-bubble.dyn { transform: translate(-50%, -50%); }
/* 人多時座位縮小 */
.seat.sm { width: 70px; gap: 2px; }
.seat.sm .avatar { width: 34px; height: 34px; }
.seat.sm .nm { font-size: 11px; max-width: 70px; padding: 2px 7px; }
.seat.sm .chip-line, .seat.sm .fan, .seat.sm .cup-line, .seat.sm .status-tag { display: none; }
.seat.sm .cnt { right: 6px; top: -6px; min-width: 20px; height: 20px; font-size: 11px; }
.seat.sm .bet-tag { font-size: 10px; padding: 2px 7px; }
.seat.sm .seat-bid { font-size: 10px; padding: 2px 6px; }
.seat.sm .avatar .bot { width: 15px; height: 15px; right: -5px; bottom: -3px; }
.seat.sm .avatar .bot .ico { width: 10px; height: 10px; }

/* 房號永遠完整顯示，遊戲名稱那顆才縮 */
.room-chip { flex: none; }

/* ================= UNO ================= */
:root { --u-r: #e8373e; --u-y: #f2b915; --u-g: #2fa64a; --u-b: #2a6fdb; --u-w: #1c1c22; }
.game-pick { grid-template-columns: repeat(2, 1fr); }
.card.uno {
  --uc: var(--u-w); background: var(--uc); color: #fff; overflow: hidden; font-family: var(--serif);
  border-radius: calc(var(--cw) * 0.13);
  box-shadow: inset 0 0 0 calc(var(--cw) * 0.055) #fff, 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.25), 0 8px 18px rgba(0, 0, 0, 0.25);
}
.card.uno.c-r { --uc: var(--u-r); }
.card.uno.c-y { --uc: var(--u-y); }
.card.uno.c-g { --uc: var(--u-g); }
.card.uno.c-b { --uc: var(--u-b); }
.card.uno .u-oval {
  position: absolute; left: 50%; top: 50%; width: 66%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--uc); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.card.uno .u-oval b { font-size: calc(var(--cw) * 0.36); font-weight: 900; line-height: 1; display: grid; place-items: center; }
.card.uno.c-w .u-oval { background: conic-gradient(var(--u-r) 0 25%, var(--u-y) 0 50%, var(--u-g) 0 75%, var(--u-b) 0); color: #fff; }
.card.uno.c-w .u-oval b { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.card.uno .u-ico { width: 0.95em; height: 0.95em; stroke-width: 3; }
.card.uno .u-corner { position: absolute; font-size: calc(var(--cw) * 0.2); font-weight: 900; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); display: grid; place-items: center; }
.card.uno .u-corner.tl { top: 7%; left: 10%; }
.card.uno .u-corner.br { bottom: 7%; right: 10%; transform: rotate(180deg); }
.card.uno .u-corner .u-ico { width: 1em; height: 1em; }
.hand .card.uno.nope { filter: brightness(0.5) saturate(0.55); }
.hand .card.uno.sel { box-shadow: inset 0 0 0 calc(var(--cw) * 0.055) #fff, 0 0 0 3px var(--gold), 0 0 20px rgba(244, 207, 122, 0.6), 0 10px 20px rgba(0, 0, 0, 0.35); }
.card.uno.big { --cw: clamp(66px, 19vw, 96px); }
.row .mini .card.uno .u-oval, .row .mini .card.uno .u-corner.br { display: none; }
.row .mini .card.uno .u-corner.tl { font-size: 9px; }

.uno-table { display: flex; align-items: center; gap: 26px; position: relative; z-index: 1; pointer-events: auto; }
.uno-deck { position: relative; width: 58px; height: 82px; padding: 0; border-radius: 8px; }
.uno-deck .back { --cw: 56px; position: absolute; left: 0; top: 0; transform: translate(calc(var(--i) * -1.5px), calc(var(--i) * -1.5px)); }
.uno-deck.can { animation: deckGlow 1.4s ease-in-out infinite; }
@keyframes deckGlow { 50% { filter: drop-shadow(0 0 12px rgba(244, 207, 122, 0.85)); transform: translateY(-3px); } }
.uno-discard { position: relative; }
.cur-ring { position: absolute; inset: -9px; border-radius: 18px; pointer-events: none; box-shadow: 0 0 0 3px var(--cur), 0 0 26px var(--cur); transition: box-shadow 0.4s; }
.uno-dir {
  position: absolute; left: 50%; top: 42%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; pointer-events: none;
  border: 2px dashed rgba(244, 207, 122, 0.22); animation: spin 14s linear infinite;
}
.uno-dir::after {
  content: ""; position: absolute; top: -7px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-left: 10px solid rgba(244, 207, 122, 0.5);
}
.uno-dir.ccw { animation-direction: reverse; }
.uno-dir.ccw::after { transform: scaleX(-1); }
.uno-info { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.uno-info .pending { font-family: var(--serif); font-weight: 900; font-size: 28px; color: #ff6b6b; }
.cname { font-weight: 900; }
.cname.c-r { color: #ff6b70; }
.cname.c-y { color: #ffd34d; }
.cname.c-g { color: #5fd47c; }
.cname.c-b { color: #6aa6ff; }
.uno-badge { font-size: 11px; font-weight: 900; color: #fff; background: var(--u-r); padding: 2px 8px; border-radius: 999px; animation: beat 0.8s infinite; white-space: nowrap; }
.actions.uno { grid-template-columns: 1fr 1fr 1.6fr; }
.uno-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; z-index: 12; pointer-events: none; animation: unoPop 1.9s both; }
.uno-banner b {
  display: block; font-family: var(--serif); font-weight: 900; font-size: 84px; line-height: 1; letter-spacing: 0.04em;
  background: linear-gradient(90deg, var(--u-r), var(--u-y), var(--u-g), var(--u-b)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.35));
}
.uno-banner small { font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
@keyframes unoPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-12deg); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(3deg); } 25% { transform: translate(-50%, -50%) scale(1) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1.05); } }
.flying-card { position: fixed; z-index: 70; pointer-events: none; --cw: 40px; }
.color-pick h2 { margin-bottom: 4px; }
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.cp { height: 86px; border-radius: 18px; font-size: 22px; font-weight: 900; color: #fff; background: var(--uc); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35), 0 8px 20px rgba(0, 0, 0, 0.35); transition: transform 0.12s; }
.cp:active { transform: scale(0.95); }
.cp.c-r { --uc: var(--u-r); }
.cp.c-y { --uc: var(--u-y); }
.cp.c-g { --uc: var(--u-g); }
.cp.c-b { --uc: var(--u-b); }
@media (max-height: 700px) {
  .card.uno.big { --cw: 60px; }
  .uno-deck { width: 50px; height: 72px; }
  .uno-deck .back { --cw: 48px; }
  .uno-dir { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
}

/* ---------- UNO 經典風格牌面（自己畫的，不用官方圖） ---------- */
.card.uno {
  font-family: "Arial Black", "Helvetica Neue", Arial, "PingFang TC", sans-serif;
  border-radius: calc(var(--cw) * 0.1);
  box-shadow: inset 0 0 0 calc(var(--cw) * 0.07) #fff, 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 18px rgba(0, 0, 0, 0.28);
}
/* 斜放的白色橢圓 */
.card.uno .u-oval {
  width: calc(var(--cw) * 1.22); height: calc(var(--cw) * 0.7); aspect-ratio: auto;
  transform: translate(-50%, -50%) rotate(-58deg); background: #fff; box-shadow: none;
}
.card.uno .u-oval b {
  transform: rotate(58deg); color: var(--uc); font-style: italic; font-weight: 900; letter-spacing: -0.04em;
  font-size: calc(var(--cw) * 0.58);
  text-shadow: calc(var(--cw) * -0.028) calc(var(--cw) * 0.028) 0 #111, calc(var(--cw) * -0.012) calc(var(--cw) * 0.012) 0 #111;
}
.card.uno .u-oval b .u-ico { width: 0.82em; height: 0.82em; stroke-width: 3.4; filter: drop-shadow(calc(var(--cw) * -0.025) calc(var(--cw) * 0.025) 0 #111); }
/* 角落白色粗斜體＋黑色陰影 */
.card.uno .u-corner {
  font-style: italic; font-size: calc(var(--cw) * 0.24); letter-spacing: -0.04em;
  text-shadow: calc(var(--cw) * -0.018) calc(var(--cw) * 0.018) 0 #111;
}
.card.uno .u-corner.tl { top: 9%; left: 12%; }
.card.uno .u-corner.br { bottom: 9%; right: 12%; }
.card.uno .u-corner .u-ico { filter: drop-shadow(calc(var(--cw) * -0.015) calc(var(--cw) * 0.015) 0 #111); stroke-width: 3.4; }
/* 萬能牌：黑底，橢圓分成四色 */
.card.uno.c-w { --uc: #111; }
.card.uno.c-w .u-oval {
  background: conic-gradient(from -32deg, var(--u-r) 0 25%, var(--u-b) 0 50%, var(--u-g) 0 75%, var(--u-y) 0);
  box-shadow: 0 0 0 calc(var(--cw) * 0.035) #fff;
}
.card.uno.c-w .u-oval b { color: #fff; text-shadow: calc(var(--cw) * -0.03) calc(var(--cw) * 0.03) 0 #111; }

/* UNO 牌背：黑底紅橢圓 */
.back.uno-back { background: #111; box-shadow: inset 0 0 0 calc(var(--cw) * 0.07) #fff, 0 0 0 1px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.35); overflow: hidden; }
.back.uno-back::after {
  content: "畢旅"; inset: auto; left: 50%; top: 50%; width: calc(var(--cw) * 1.15); height: calc(var(--cw) * 0.62); border: 0; border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-58deg); background: var(--u-r);
  display: grid; place-items: center; color: var(--u-y); font-family: "Arial Black", "PingFang TC", sans-serif; font-weight: 900; font-style: italic;
  font-size: calc(var(--cw) * 0.24); text-shadow: calc(var(--cw) * -0.02) calc(var(--cw) * 0.02) 0 #111;
}
.back.uno-back::after { line-height: 1; }
.uno-back-text { display: none; }

/* +2、+4 字比較寬，縮小一點 */
.card.uno.wide .u-oval b { font-size: calc(var(--cw) * 0.42); }
.card.uno.wide .u-corner { font-size: calc(var(--cw) * 0.19); }

/* ================= 往上滑出牌 ================= */
.hand .card.swipe-ready { box-shadow: 0 0 0 3px var(--gold), 0 0 26px rgba(244, 207, 122, 0.85), 0 14px 26px rgba(0, 0, 0, 0.4) !important; z-index: 5; }
.hand .card.swipe-ready::before {
  content: "放開出牌"; position: absolute; left: 50%; top: -26px; transform: translateX(-50%); white-space: nowrap; z-index: 6;
  font-family: var(--font); font-size: 11px; font-weight: 800; font-style: normal; color: var(--gold-ink); padding: 3px 8px; border-radius: 999px;
  background: linear-gradient(180deg, #ffe7a8, var(--gold));
}

/* ================= 結算：準備狀態 ================= */
.ready-strip { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: -4px 0 14px; font-size: 13px; color: var(--muted); }
.rd-avatars { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rd { position: relative; opacity: 0.45; transition: opacity 0.3s, transform 0.3s; }
.rd.on { opacity: 1; transform: translateY(-2px); }
.rd i {
  position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--good); color: #0b2a17; box-shadow: 0 0 0 2px #14251c; transform: scale(0); transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
.rd.on i { transform: scale(1); }
.rd i .ico { width: 12px; height: 12px; stroke-width: 3; }
#readyBtn.is-ready { background: linear-gradient(180deg, #8ff0b4, #2fb46a); color: #0b2a17; box-shadow: 0 8px 22px rgba(47, 180, 106, 0.35); }
.host-links { display: flex; justify-content: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }

/* ================= 桌上的立體彩池 ================= */
.felt.has-pot .felt-mark { display: none; }
.pot-table { position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); display: flex; align-items: flex-end; gap: 12px; z-index: 1; pointer-events: none; }
.pstacks { display: flex; align-items: flex-end; gap: 3px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4)); }
.pstack { display: flex; flex-direction: column-reverse; align-items: center; }
.pc {
  --pc: #2b63c9; width: 34px; height: 9px; margin-top: -4px; border-radius: 50%; display: block;
  background: repeating-linear-gradient(90deg, var(--pc) 0 5px, #fff 5px 8px);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pc:last-child {
  height: 14px; margin-top: -7px;
  background: radial-gradient(ellipse at center, var(--pc) 0 40%, #fff 41% 47%, var(--pc) 48% 70%, #fff 71% 76%, var(--pc) 77%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.pc.c0 { --pc: #2b63c9; }
.pc.c1 { --pc: #d0283b; }
.pc.c2 { --pc: #1d7a4a; }
.pc.c3 { --pc: #7a3fd0; }
.pot-table.drop .pc { animation: chipDrop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both; animation-delay: calc(var(--i) * 45ms + var(--k) * 90ms + 300ms); }
@keyframes chipDrop { from { transform: translateY(-60px); opacity: 0; } }
.pot-label {
  display: flex; align-items: baseline; gap: 5px; padding: 6px 13px; border-radius: 999px; white-space: nowrap;
  background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 1px rgba(244, 207, 122, 0.45) inset, 0 0 18px rgba(244, 207, 122, 0.18);
  animation: potGlow 2.4s ease-in-out infinite;
}
.pot-label .coin { align-self: center; }
.pot-label b { font-family: var(--serif); font-weight: 900; font-size: 22px; color: var(--gold); }
.pot-label small { font-size: 11px; color: var(--muted); }
@keyframes potGlow { 50% { box-shadow: 0 0 0 1px rgba(244, 207, 122, 0.7) inset, 0 0 26px rgba(244, 207, 122, 0.35); } }
@media (max-height: 700px) {
  .pot-table { top: 82%; gap: 8px; }
  .pc { width: 28px; }
  .pot-label b { font-size: 18px; }
}

/* ================= 橫向版面：牌桌在左、手牌在右 ================= */
@media (orientation: landscape) and (max-height: 560px), (orientation: landscape) and (min-width: 900px) and (min-height: 561px) {
  #game.screen.active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 44%); grid-template-rows: auto minmax(0, 1fr); max-width: none; }
  #game .topbar { grid-column: 1 / -1; }
  #game .felt-wrap { grid-column: 1; grid-row: 2; }
  #game .me { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; padding: 4px 14px calc(10px + env(safe-area-inset-bottom)); }
  #game .me::before { inset: 0; background: radial-gradient(70% 60% at 50% 100%, rgba(244, 207, 122, 0.16), transparent 70%); }
}
/* 橫拿的手機很矮：卡片、按鈕都縮小 */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --cw: min(13vh, 62px); }
  .topbar { min-height: calc(46px + env(safe-area-inset-top)); height: 46px; }
  .topbar .icon-btn { width: 34px; height: 34px; }
  .actions .btn { height: 42px; font-size: 15px; }
  .me-bar { margin-bottom: 0; }
  .seat .chip-line, .seat .fan, .cup-line { display: none; }
  .seat .avatar { width: 36px; height: 36px; }
  .pile-cards .card, .pile-cards.ghost .card { --cw: min(12vh, 56px); }
  .card.uno.big { --cw: min(14vh, 62px); }
  .die.xl { --d: min(10vh, 44px); }
  .bid-picker { margin: 2px 0 4px; gap: 4px; }
  .dice-bid .num { font-size: 40px; }
  .die.lg { --d: 38px; }
  .pot-table { top: 84%; }
  .felt-wrap { padding: 4px 10px 6px; }
  .felt { inset: 4px 10px 6px; }
}

/* 彩池籌碼重畫：一疊一色、側邊立體加白點、頂面有邊紋 */
.pc {
  width: 38px; height: 10px; margin-top: -5px;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.9) 7px 10px, transparent 10px 19px),
    linear-gradient(180deg, color-mix(in srgb, var(--pc) 65%, #fff) 0%, var(--pc) 45%, color-mix(in srgb, var(--pc) 60%, #000) 100%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 1px 0 rgba(0, 0, 0, 0.25);
}
.pc:last-child {
  height: 18px; margin-top: -9px;
  background:
    radial-gradient(ellipse at center, var(--pc) 0 36%, rgba(255, 255, 255, 0.95) 37% 42%, var(--pc) 43% 60%, transparent 61%),
    repeating-conic-gradient(var(--pc) 0 20deg, #fff 20deg 32deg);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--pc) 55%, #000), 0 3px 4px rgba(0, 0, 0, 0.35);
}
.pc.c0 { --pc: #2560c9; }
.pc.c1 { --pc: #d22a3d; }
.pc.c2 { --pc: #1f8a4f; }
@media (max-height: 700px) { .pc { width: 32px; } }