:root {
  --bg: #0f0c1d;
  --panel: #1b1731;
  --panel-2: #262043;
  --line: #352e58;
  --text: #f5f3ff;
  --muted: #a39dc4;
  --accent: #ffb627;
  --accent-2: #ff8a1f;
  --accent-deep: #b86400;
  --accent-text: #2a1600;
  --violet: #7c5cff;
  --violet-deep: #4a32c4;
  --danger: #ff4d6d;
  --danger-deep: #b3203d;
  --success: #3ddc97;
  --radius: 20px;
  --card-w: clamp(150px, 26dvh, 200px);
  --font: "Kanit", system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", "Leelawadee UI", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

/* แสงไฟปาร์ตี้จางๆ หลังเนื้อหา */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60vmax 45vmax at 0% 0%, #ff8a1f26, transparent 60%),
    radial-gradient(55vmax 45vmax at 100% 10%, #7c5cff33, transparent 60%),
    radial-gradient(60vmax 40vmax at 50% 110%, #ff4d6d1f, transparent 60%),
    var(--bg);
}
body.flash::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #fff;
  pointer-events: none;
  animation: flash 0.5s ease-out forwards;
}
@keyframes flash { from { opacity: 0.85; } to { opacity: 0; } }

#app {
  max-width: 520px;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100dvh;
}
#app.enter > * { animation: rise 0.35s ease-out both; }
#app.enter > *:nth-child(2) { animation-delay: 0.04s; }
#app.enter > *:nth-child(3) { animation-delay: 0.08s; }
#app.enter > *:nth-child(4) { animation-delay: 0.12s; }
#app.enter > *:nth-child(n + 5) { animation-delay: 0.16s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

h1, h2, p { margin: 0; }
h1 { font-size: 34px; font-weight: 700; line-height: 1.2; }
h2 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
small { color: var(--muted); font-weight: 400; }
.muted { color: var(--muted); }
.center { text-align: center; }
.hint { color: var(--muted); font-size: 13px; margin-top: 10px; }
.alert { color: var(--accent); font-weight: 600; font-size: 1.15em; }
.eyebrow { color: var(--muted); font-size: 13px; letter-spacing: 0.08em; }
.count { display: inline-block; min-width: 26px; padding: 0 8px; border-radius: 999px; background: var(--panel-2); font-size: 14px; text-align: center; vertical-align: 2px; }

/* ---------- loading ---------- */

.splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.splash-logo { font-size: 84px; line-height: 1; animation: cheers 1.1s ease-in-out infinite; }
@keyframes cheers {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
}

.dots { display: inline-flex; gap: 6px; vertical-align: middle; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.waiting { color: var(--muted); display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.waiting.center { justify-content: center; margin: 4px 0; }

.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
  vertical-align: -0.15em;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(100deg, #ffffff14 30%, #ffffff2e 50%, #ffffff14 70%) 0 0 / 220% 100% var(--panel-2) !important;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* ---------- components ---------- */

.hero { text-align: center; padding: 18px 0 2px; }
.logo { font-size: 68px; line-height: 1; filter: drop-shadow(0 8px 18px #ffb62755); }
.hero h1 { background: linear-gradient(90deg, #ffd36b, #ff8a1f 55%, #ff5d8f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--muted); }

.panel {
  background: linear-gradient(180deg, #221d3d, var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 10px 30px #00000040;
}

label { display: block; color: var(--muted); font-size: 14px; margin-bottom: 6px; }

input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: #120f22;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: #6b6690; }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px #ffb62726; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#code { letter-spacing: 10px; font-size: 24px; font-weight: 600; text-align: center; padding-left: 26px; }

.row { display: flex; gap: 8px; align-items: center; }
.row .btn { flex: none; }
.row.split { justify-content: space-between; }
.gap { margin-top: 12px; }

.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

button { font: inherit; color: inherit; touch-action: manipulation; user-select: none; -webkit-user-select: none; }

/* ปุ่มมีขอบล่างหนาแบบปุ่มเกม กดแล้วยุบลงให้รู้สึกได้ */
.btn {
  --edge: #110e22;
  position: relative;
  appearance: none;
  border: 0;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
  min-height: 52px;
  padding: 10px 20px;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--edge), inset 0 1px 0 #ffffff1f;
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s, filter 0.15s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge), inset 0 1px 0 #ffffff1f; }
.btn:disabled { cursor: default; }
.btn:disabled:not(.busy) { filter: saturate(0.3) brightness(0.75); }
.btn.primary { --edge: var(--accent-deep); background: linear-gradient(180deg, #ffd15c, var(--accent-2)); color: var(--accent-text); }
.btn.violet { --edge: var(--violet-deep); background: linear-gradient(180deg, #9a82ff, var(--violet)); color: #fff; }
.btn.danger { --edge: var(--danger-deep); background: linear-gradient(180deg, #ff7a92, var(--danger)); color: #fff; }
.btn.ghost { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:active:not(:disabled) { transform: scale(0.97); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.block { display: block; width: 100%; }
.btn.big { min-height: 64px; font-size: 20px; border-radius: 18px; }
.btn.huge { min-height: 96px; font-size: 30px; border-radius: 26px; box-shadow: 0 6px 0 var(--edge), inset 0 1px 0 #ffffff40; }
.btn.small { min-height: 38px; padding: 4px 14px; font-size: 14px; border-radius: 12px; box-shadow: 0 3px 0 var(--edge), inset 0 1px 0 #ffffff1f; }
.btn.ghost.small { box-shadow: inset 0 0 0 1.5px var(--line); }

.btn.busy > span { visibility: hidden; }
.btn.busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}

.icon {
  appearance: none;
  border: 0;
  background: var(--panel-2);
  border-radius: 14px;
  width: 46px;
  height: 46px;
  font-size: 20px;
  cursor: pointer;
  flex: none;
  box-shadow: 0 3px 0 #110e22;
}
.icon:active { transform: translateY(2px); box-shadow: 0 1px 0 #110e22; }

.av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: linear-gradient(145deg, hsl(var(--h) 90% 68%), hsl(var(--h) 75% 48%));
  color: #14101f;
  font-weight: 700;
  font-size: 0.85em;
  line-height: 1;
  box-shadow: inset 0 -2px 0 #0003;
}
.who .av { font-size: 30px; margin-bottom: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--panel-2); font-size: 14px; }

.offline {
  background: var(--danger);
  color: #fff;
  text-align: center;
  padding: 8px;
  border-radius: 12px;
  font-size: 14px;
  position: sticky;
  top: 8px;
  z-index: 5;
}

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  translate: -50% 0;
  background: #f5f3ff;
  color: #1b1731;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 999px;
  max-width: 90vw;
  z-index: 40;
  box-shadow: 0 12px 30px #0008;
}
#toast.show { animation: toast 0.25s ease-out; }
@keyframes toast { from { opacity: 0; transform: translateY(16px) scale(0.95); } }

#modal {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: #07051299;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  animation: fade 0.15s ease-out;
}
#modal[hidden], #intro[hidden], #toast[hidden] { display: none; }
.sheet {
  width: 100%;
  max-width: 440px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px 18px 18px;
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  animation: sheet 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@media (min-width: 700px) { #modal { align-items: center; } }

#intro {
  position: fixed;
  inset: 0;
  z-index: 34;
  display: grid;
  place-items: center;
  background: #0f0c1de6;
  pointer-events: none;
  animation: intro-bg 1.3s ease-in-out forwards;
}
.intro-card { display: flex; flex-direction: column; align-items: center; animation: intro 1.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; }
.intro-card span { font-size: 110px; line-height: 1.1; }
.intro-card b { font-size: 30px; }
.intro-card small { font-size: 22px; color: var(--accent); font-weight: 600; }
@keyframes intro-bg { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes intro {
  0% { transform: scale(0.4); opacity: 0; }
  25%, 75% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ปุ่มหลักอยู่ล่างสุดของจอเสมอ ให้นิ้วโป้งกดถึงโดยไม่ต้องมอง */
.dock { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* ---------- lobby ---------- */

.lobby, .lobby-main { display: flex; flex-direction: column; gap: 12px; }
.code { display: flex; justify-content: center; gap: 8px; margin: 6px 0 2px; }
.code span {
  width: 52px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #120f22;
  border: 2px solid var(--line);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.qr { width: 164px; height: 164px; background: #fff; border-radius: 16px; padding: 8px; margin: 12px auto; display: block; }
.qr svg { display: block; width: 100%; height: 100%; }

.players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.players li { display: flex; align-items: center; gap: 10px; background: #120f2299; border-radius: 14px; padding: 6px 10px 6px 6px; font-size: 17px; }
.players .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players li.off .av, .players li.off .pname { opacity: 0.4; }
.tag { flex: none; font-size: 12px; padding: 2px 10px; border-radius: 999px; background: #ffb62722; color: var(--accent); }
.tag.dim { background: #ffffff14; color: var(--muted); }

.games { display: flex; flex-direction: column; gap: 8px; }
.game {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px;
  min-height: 68px;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: #120f2299;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.06s;
}
.game:active:not(:disabled) { transform: scale(0.98); }
.game:disabled { cursor: default; }
.game:disabled:not(.on) { opacity: 0.45; }
.game.on { border-color: var(--accent); background: #ffb62714; }
.game .emoji { flex: none; width: 48px; height: 48px; display: grid; place-items: center; font-size: 28px; border-radius: 14px; background: var(--panel-2); }
.game.on .emoji { background: #ffb62733; }
.game .gtext { flex: 1; min-width: 0; }
.game b { font-weight: 600; }
.game small { display: block; line-height: 1.35; }
.game .check { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 14px; transform: scale(0); transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.6); }
.game.on .check { transform: scale(1); }

details summary { cursor: pointer; color: var(--muted); padding: 8px 0; list-style: none; display: flex; align-items: center; justify-content: space-between; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "▾"; transition: transform 0.2s; }
details[open] summary::after { transform: rotate(180deg); }
.games + details { margin-top: 8px; }
.menu[open] { display: flex; flex-direction: column; gap: 10px; }
.panel[data-id] { padding-block: 8px; }

.rules { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rules li { display: flex; gap: 10px; align-items: baseline; }
.rules.edit li { align-items: center; }
.rules b { flex: none; width: 30px; height: 30px; display: grid; place-items: center; align-self: center; border-radius: 8px; background: var(--panel-2); color: var(--accent); font-size: 14px; }
.rules input { min-height: 42px; padding: 6px 12px; font-size: 15px; border-radius: 12px; }

/* ---------- playing ---------- */

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.topbar b { flex: 1; min-width: 0; font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roomtag { flex: none; font-size: 13px; color: var(--muted); background: var(--panel-2); padding: 4px 12px; border-radius: 999px; }

.strip { list-style: none; margin: 0 -16px; padding: 4px 16px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip li { flex: none; display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--panel); border: 1.5px solid transparent; color: var(--muted); font-size: 14px; white-space: nowrap; transition: background 0.2s, transform 0.2s; }
.strip li.me { color: var(--text); border-color: var(--line); }
.strip li.off { opacity: 0.4; }
.strip li.now { background: linear-gradient(180deg, #ffd15c, var(--accent-2)); color: var(--accent-text); font-weight: 600; transform: scale(1.06); box-shadow: 0 4px 14px #ffb62755; }

.gamebox { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.showcase { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.showcase > .panel { width: 100%; }

.meter { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.meter b { color: var(--text); }
.meter .bar { flex: 1; height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), #b39dff); transition: width 0.4s ease-out; }
.kings { display: flex; gap: 4px; }
.kings i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--panel-2); color: #6b6690; font-style: normal; font-weight: 700; font-size: 12px; }
.kings i.on { background: var(--danger); color: #fff; box-shadow: 0 0 10px #ff4d6d99; }

.rest {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #120f2299;
  border: 1.5px dashed var(--line);
}
.rest .av { font-size: 22px; }
.rest b { display: block; font-size: 19px; font-weight: 600; }
.rest div span { color: var(--muted); font-size: 14px; }

.finish { text-align: center; display: flex; flex-direction: column; }
.finish b { font-size: 26px; }
.finish span { color: var(--muted); }

.status, .board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.status li { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.board li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #ffffff12; }
.board li:last-child { border: 0; }
.board b { color: var(--accent); }

/* kings */
.card3d { width: var(--card-w); height: calc(var(--card-w) * 1.4); perspective: 900px; flex: none; }
.card3d .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.card3d .card { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card3d .card.back { transform: rotateY(180deg); }
.card3d.flip .inner { animation: flip 0.65s cubic-bezier(0.3, 0.8, 0.3, 1.15); }
@keyframes flip {
  from { transform: rotateY(180deg) scale(0.85); }
  to { transform: none; }
}

.card {
  position: relative;
  width: var(--card-w);
  height: calc(var(--card-w) * 1.4);
  font-size: calc(var(--card-w) / 7.5);
  border-radius: 0.75em;
  background: linear-gradient(160deg, #fff, #ece9f5);
  color: #1b1731;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px #000a, inset 0 0 0 0.12em #fff;
  flex: none;
}
.card.red { color: #e0213f; }
.card.back {
  background:
    radial-gradient(circle at 50% 50%, #ffffff26 0 32%, transparent 33%),
    repeating-linear-gradient(45deg, #ffffff12 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #8a6cff, #4a32c4);
  box-shadow: 0 14px 34px #000a, inset 0 0 0 0.3em #ffffff26;
}
.card .emblem { font-size: 2.6em; line-height: 1; }
.card .pip { font-size: 4em; line-height: 1; }
.card .corner { position: absolute; top: 0.4em; left: 0.55em; font-weight: 700; line-height: 1; text-align: center; }
.card .corner.bottom { top: auto; left: auto; bottom: 0.4em; right: 0.55em; transform: rotate(180deg); }

.rule { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rule h2 { font-size: clamp(22px, 6vw, 30px); line-height: 1.3; margin: 0; }
.rule .by { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 6px; }
.rank-badge { display: inline-block; padding: 0 12px; border-radius: 999px; background: #fff; color: #1b1731; font-weight: 700; font-size: 15px; }
.rank-badge.red { color: #e0213f; }
.lastcard { text-align: center; color: var(--muted); font-size: 14px; }

.draw-zone, .bomb-zone {
  flex: 1;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52dvh;
  border-radius: 32px;
  cursor: pointer;
  color: var(--text);
  font-size: 18px;
  transition: transform 0.08s;
}
.draw-zone b, .bomb-zone b { font-size: 34px; font-weight: 700; line-height: 1.2; }
.draw-zone:active, .bomb-zone:active { transform: scale(0.97); }
.draw-zone {
  border: 3px solid var(--accent);
  background: radial-gradient(circle at 50% 35%, #ffb62733, #1b1731 70%);
  animation: glow 1.2s ease-in-out infinite alternate;
}
.draw-zone > span:last-child { color: var(--accent); }
@keyframes glow {
  from { box-shadow: 0 0 0 0 #ffb62700; }
  to { box-shadow: 0 0 0 10px #ffb62730; }
}
/* สำรับไพ่ซ้อนกันสามใบ */
.stack { position: relative; width: var(--card-w); height: calc(var(--card-w) * 1.4); margin-bottom: 18px; }
.stack .card { position: absolute; inset: 0; }
.stack .card:nth-child(1) { transform: rotate(-9deg) translate(-8%, 2%); }
.stack .card:nth-child(2) { transform: rotate(6deg) translate(7%, 1%); }
.stack .card:nth-child(3) { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }

.race .done { font-size: 22px; font-weight: 600; }
.race .btn.huge { animation: wiggle 0.35s ease-in-out infinite alternate; }
@keyframes wiggle { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }

/* spin */
.spin { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.spin-name { font-size: clamp(36px, 11vw, 56px); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.spin-name.rolling { color: var(--accent); filter: blur(1.2px); }
.spin.pop { animation: pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.5); border-color: var(--accent); }
@keyframes pop { from { transform: scale(0.85); } }

/* bomb */
.bomb-zone {
  border: 3px solid var(--danger);
  background: radial-gradient(circle at 50% 35%, #ff4d6d59, #2a0f1a 72%);
  animation: danger 0.5s ease-in-out infinite alternate;
}
@keyframes danger {
  from { box-shadow: 0 0 0 0 #ff4d6d00; }
  to { box-shadow: 0 0 0 12px #ff4d6d40; }
}
.bomb h2 { font-size: 26px; margin-bottom: 4px; }
.bomb-icon { font-size: 104px; line-height: 1.2; display: inline-block; }
.bomb-icon.ticking { animation: tick 0.45s ease-in-out infinite alternate; }
@keyframes tick {
  from { transform: scale(1) rotate(-6deg); }
  to { transform: scale(1.15) rotate(6deg); }
}
.fuse { width: 60%; height: 6px; border-radius: 999px; background: #ffffff1f; overflow: hidden; margin-bottom: 10px; }
.fuse i { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, #ffd15c, #ff4d6d); animation: fuse 0.9s linear infinite; }
@keyframes fuse { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.bomb.boom { animation: shake 0.5s linear; border-color: var(--danger); }
@keyframes shake {
  10%, 50%, 90% { transform: translate(-8px, 3px) rotate(-1deg); }
  30%, 70% { transform: translate(8px, -3px) rotate(1deg); }
}

/* ---------- จอใหญ่ของผู้เล่น (แท็บเล็ต/คอม) ---------- */

@media (min-width: 860px) {
  body:not(.table):not(.playing) #app:has(.lobby) { max-width: 940px; }
  .lobby { display: grid; grid-template-columns: 320px 1fr; align-items: start; }
  body:not(.table).playing #app { max-width: 640px; }
  .strip { margin: 0; padding: 4px 0; flex-wrap: wrap; }
}

/* มือถือแนวนอน: ไพ่กับคำสั่งวางข้างกัน */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --card-w: clamp(110px, 38dvh, 170px); }
  .showcase { flex-direction: row; justify-content: center; }
  .draw-zone, .bomb-zone { min-height: 60dvh; flex-direction: row; gap: 20px; }
  .stack { margin: 0 20px 0 0; }
}

/* ---------- จอกลาง: อ่านได้จากรอบวง ---------- */

body.table { --card-w: clamp(180px, 38dvh, 360px); }
body.table #app { max-width: 1280px; }
.tv { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.tv-main { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.tv-side { display: flex; flex-direction: column; gap: 12px; }
.tv-side .strip { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 8px; }
.tv-side .strip li { font-size: 18px; }
.tv-wait { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.tv-wait .logo { font-size: 120px; animation: cheers 1.6s ease-in-out infinite; }

@media (min-width: 860px) {
  .tv { display: grid; grid-template-columns: 1fr 320px; align-items: stretch; }
  body.table .topbar b { font-size: 26px; }
  body.table .gamebox { justify-content: center; gap: 22px; font-size: 20px; }
  body.table .showcase { flex-direction: row; justify-content: center; gap: 44px; }
  body.table .rule { text-align: left; align-items: flex-start; max-width: 540px; gap: 8px; }
  body.table .rule h2 { font-size: clamp(32px, 4.2vw, 56px); }
  body.table .rank-badge { font-size: 22px; }
  body.table .rule .by { font-size: 18px; }
  body.table .alert { font-size: 1.5em; }
  body.table .spin { min-height: 44dvh; }
  body.table .spin-name { font-size: clamp(64px, 9vw, 140px); }
  body.table .who .av { font-size: 54px; }
  body.table .bomb-icon { font-size: 22dvh; }
  body.table .bomb h2 { font-size: 40px; }
  body.table .dock { margin-top: 0; }
  body.table .dock .btn.big { min-height: 76px; font-size: 24px; }
  body.table .meter { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ไพ่ J: ปุ่มกำมือต้องเห็นทันทีโดยไม่ต้องเลื่อนจอ จึงย่อไพ่ลง */
.race .btn.huge { margin-bottom: 14px; }
.gamebox:has(.race) { --card-w: clamp(96px, 15dvh, 150px); }
body.table .gamebox:has(.race) { --card-w: clamp(160px, 30dvh, 300px); }

/* ---------- โต๊ะกลม: เห็นว่าใครนั่งตรงไหน ใครอยู่ซ้าย/ขวา ---------- */

.rt {
  position: relative;
  flex: none;
  width: min(100%, 46dvh, 440px);
  aspect-ratio: 1 / 1.1; /* ต้องตรงกับ TABLE_ASPECT ใน app.js */
  margin: 0 auto;
  container-type: inline-size;
}
.felt {
  position: absolute;
  inset: 11% 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 36%, #33987a, #17503d 62%, #0e3528);
  box-shadow: 0 0 0 5px #d39a4a, 0 0 0 10px #7a4d1e, 0 24px 50px #000b, inset 0 0 50px #000a;
  transition: background 0.3s;
}
.rt-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.rt-tip { color: #d8f3e6cc; font-size: 14px; line-height: 1.5; }
.rt .card3d, .rt .card, .rt .stack { --card-w: 30cqw; }
.rt .stack { margin: 0; }

.seat {
  position: absolute;
  z-index: 1;
  width: 24cqw;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 22px;
}
.rt-m .seat { font-size: 18px; }
.rt-l .seat { font-size: 15px; }
.rt-x .seat { font-size: 12px; }
.seat-av { position: relative; display: block; border-radius: 50%; transition: scale 0.25s, box-shadow 0.25s; }
.seat .av { font-size: 1em; width: 2.1em; height: 2.1em; }
.sname {
  max-width: 100%;
  padding: 0 8px;
  border-radius: 999px;
  background: #0f0c1dd9;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rt-x .sname { font-size: 10px; padding: 0 5px; }
.seat.me .sname { color: var(--accent); font-weight: 600; }
.seat.off { opacity: 0.4; }
.side { font-style: normal; font-size: 10px; font-weight: 600; line-height: 1.5; padding: 0 7px; border-radius: 999px; background: var(--violet); color: #fff; }
.badge { position: absolute; right: -0.5em; top: -0.5em; font-size: 0.95em; line-height: 1; filter: drop-shadow(0 2px 3px #0009); }
.crown { position: absolute; left: -0.35em; top: -0.5em; font-size: 0.7em; line-height: 1; rotate: -20deg; }

.seat.now .seat-av { scale: 1.18; animation: seat-now 0.9s ease-in-out infinite alternate; }
.seat.now .sname { background: var(--accent); color: var(--accent-text); font-weight: 600; }
@keyframes seat-now {
  from { box-shadow: 0 0 0 3px var(--accent), 0 0 10px 2px #ffb62766; }
  to { box-shadow: 0 0 0 3px var(--accent), 0 0 26px 9px #ffb627aa; }
}
.seat.ok .seat-av { box-shadow: 0 0 0 3px var(--success); }
.seat.picked .seat-av { box-shadow: 0 0 0 3px var(--accent); }
.seat.drink .seat-av { scale: 1.12; box-shadow: 0 0 0 3px var(--danger), 0 0 24px 8px #ff4d6daa; animation: none; }
.seat.drink .sname { background: var(--danger); color: #fff; font-weight: 600; }
.seat.drink .badge { animation: bob 0.8s ease-in-out infinite; }
.seat.hot .seat-av { scale: 1.2; animation: seat-hot 0.35s ease-in-out infinite alternate; }
.seat.hot .badge { font-size: 1.3em; animation: tick 0.4s ease-in-out infinite alternate; }
@keyframes seat-hot {
  from { box-shadow: 0 0 0 3px var(--danger), 0 0 8px 2px #ff4d6d88; }
  to { box-shadow: 0 0 0 3px var(--danger), 0 0 30px 12px #ff4d6dcc; }
}
.seat.pop { animation: seat-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.6); }
@keyframes seat-pop {
  0% { scale: 0.6; }
  60% { scale: 1.35; }
  100% { scale: 1; }
}

/* ที่นั่งที่แตะได้: สลับที่ในห้องรอ หรือเลือกเพื่อนตอนเปิดไพ่ 2/3 */
button.seat { cursor: pointer; }
button.seat:active .seat-av { scale: 0.9; }
.picking button.seat .seat-av { animation: pickable 0.6s ease-in-out infinite alternate; }
@keyframes pickable {
  from { box-shadow: 0 0 0 3px #fff; scale: 1; }
  to { box-shadow: 0 0 0 3px #fff, 0 0 22px 8px #ffffff99; scale: 1.14; }
}
.lobby .rt { width: min(100%, 360px); }

.side-info { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 84px; justify-content: center; }
.rule h2 { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.prompt { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 18px; font-weight: 600; color: var(--muted); }
.prompt.hot { color: var(--accent); animation: pulse 0.8s ease-in-out infinite alternate; }
@keyframes pulse { to { scale: 1.06; } }
.race-btn { animation: wiggle 0.35s ease-in-out infinite alternate; }

.deck-btn { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; animation: deck 1s ease-in-out infinite alternate; }
@keyframes deck {
  from { filter: drop-shadow(0 0 0 #ffb62700); scale: 1; }
  to { filter: drop-shadow(0 0 16px #ffb627cc); scale: 1.06; }
}

.board li span { display: flex; align-items: center; gap: 8px; }
.board .av { font-size: 13px; }

/* หมุนขวด */
.bottle { width: 13cqw; height: 40cqw; filter: drop-shadow(0 8px 10px #0009); will-change: transform; }
.bottle svg { display: block; width: 100%; height: 100%; }

/* ระเบิด */
.bomb-core { display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.rt .bomb-icon { font-size: 26cqw; }
.rt .fuse { width: 36cqw; margin: 0; }
.danger-zone .felt { background: radial-gradient(ellipse at 50% 36%, #b0405a, #5a1a28 62%, #360d17); animation: danger 0.5s ease-in-out infinite alternate; }
.rt.boom { animation: shake 0.5s linear; }
.throw { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.throw .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; padding: 8px; line-height: 1.25; min-width: 0; }
.throw small { max-width: 100%; color: #fff; opacity: 0.9; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* อีโมจิพุ่งกระจาย */
#fx { position: fixed; inset: 0; z-index: 33; overflow: hidden; pointer-events: none; }
#fx .bit { position: absolute; left: 50%; top: 40%; font-size: 26px; line-height: 1; opacity: 0; animation: fly 1.3s cubic-bezier(0.15, 0.8, 0.3, 1) forwards; }
@keyframes fly {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1.3); opacity: 0; }
}

@media (min-width: 860px) {
  body.table .rt { width: min(100%, 74dvh, 660px); margin: 0; }
  body.table .side-info { flex: 1; max-width: 480px; align-items: flex-start; }
  body.table .sname { font-size: 16px; }
  body.table .prompt { font-size: 28px; justify-content: flex-start; }
  body.table .rule h2 { justify-content: flex-start; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .rt { width: min(60%, 78dvh); }
}

/* ยึดกึ่งกลาง "อวาตาร์" ไว้ที่จุดที่นั่ง (ไม่ใช่กึ่งกลางทั้งบล็อกที่มีป้ายชื่อ) ปากขวดจะได้ชี้ตรงหน้าคน */
.seat { transform: translate(-50%, -1.05em); transform-origin: 50% 1.05em; }
.rt { margin-bottom: 26px; }

#fx .flyer { position: absolute; font-size: 40px; line-height: 1; filter: drop-shadow(0 6px 8px #000a); }

/* ---------- แถบ "ถึงตาใคร" ---------- */

.turnbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: var(--panel);
  border: 1.5px solid var(--line);
}
.turnbar .av { font-size: 22px; }
.turnbar > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.turnbar small { font-size: 12px; color: var(--muted); }
.turnbar b { font-size: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-emoji { font-size: 26px; line-height: 1; }
.turnbar.mine {
  background: linear-gradient(180deg, #ffd15c, var(--accent-2));
  border-color: transparent;
  color: var(--accent-text);
  animation: glow 1s ease-in-out infinite alternate;
}
.turnbar.mine small { color: #5a3600; font-weight: 500; }

/* ---------- การ์ดผลลัพธ์: ใครเปิด กติกาอะไร ใครโดน ---------- */

.result {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #221d3d, var(--panel));
  border: 1px solid var(--line);
  text-align: center;
}
.result.empty { background: none; border-style: dashed; }
.result-head { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.result-head b { color: var(--text); font-weight: 600; }
.result-head .av { font-size: 14px; }
.result h2 { margin: 0; font-size: clamp(20px, 5.6vw, 28px); line-height: 1.3; }
.outcome { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; width: 100%; padding: 8px 12px; border-radius: 14px; background: #120f2299; color: var(--muted); font-weight: 500; }
.outcome.hot { color: var(--accent); background: #ffb62718; font-weight: 600; animation: pulse 0.8s ease-in-out infinite alternate; }
.outcome.bad { flex-direction: column; background: #ff4d6d22; border: 1.5px solid #ff4d6d88; color: var(--text); }
.outcome .tagline { font-size: 13px; font-weight: 600; color: #ff9db0; letter-spacing: 0.04em; }
.outcome .chips { margin: 0; }
.outcome .chip { font-size: 17px; font-weight: 600; background: var(--danger); color: #fff; padding: 3px 14px 3px 3px; }
.outcome .chip.all { padding: 4px 16px; }
.outcome .chip .av { font-size: 15px; }

.seat.drew .badge { font-size: 0.8em; right: auto; left: -0.5em; top: auto; bottom: -0.3em; }

/* ---------- ป้ายประกาศเลื่อนลงจากบนจอ ---------- */

#callout {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  z-index: 32;
  width: min(92vw, 460px);
  translate: -50% 0;
  pointer-events: none;
  animation: callout 3.2s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
}
#callout[hidden] { display: none; }
.callout-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 20px;
  background: #f5f3ff;
  color: #1b1731;
  box-shadow: 0 16px 40px #000a;
}
.callout-card .av { font-size: 24px; }
.callout-card > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.callout-card b { font-size: 19px; font-weight: 700; }
.callout-card span:not(.av) { font-size: 15px; color: #4b4570; }
.callout-card em { font-style: normal; font-weight: 700; font-size: 17px; color: #d6283b; }
#callout.bad .callout-card { background: linear-gradient(180deg, #ff7a92, var(--danger)); color: #fff; }
#callout.bad .callout-card span:not(.av), #callout.bad .callout-card em { color: #fff; }
@keyframes callout {
  0% { transform: translateY(-140%); opacity: 0; }
  8%, 88% { transform: none; opacity: 1; }
  100% { transform: translateY(-140%); opacity: 0; }
}

/* ---------- เมนูรวมที่เดียว (แผ่นเลื่อนขึ้นจากล่าง) ---------- */

.menu-wrap {
  position: fixed;
  inset: 0;
  z-index: 31;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #07051299;
  animation: none !important;
}
.menu-sheet {
  width: 100%;
  max-width: 520px;
  max-height: 86dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-bottom: 0;
}
.menu-wrap.fresh { animation: fade 0.15s ease-out !important; }
.menu-wrap.fresh .menu-sheet { animation: sheet 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.menu-head { display: flex; align-items: center; justify-content: space-between; }
.menu-head b { font-size: 20px; font-weight: 600; }
.menu-head::before { content: ""; position: absolute; }
.menu-row {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  padding: 8px 14px;
  border: 0;
  border-radius: 16px;
  background: #120f2299;
  font-size: 17px;
  cursor: pointer;
}
.switch { position: relative; width: 48px; height: 28px; border-radius: 999px; background: #4a4470; transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: translate 0.2s; }
.switch.on { background: var(--success); }
.switch.on::after { translate: 20px 0; }
.menu-sec { border-radius: 16px; background: #120f2299; padding: 4px 14px; }
.menu-sec summary { color: var(--text); font-weight: 500; min-height: 44px; }
.menu-sec > :not(summary) { margin-bottom: 10px; }
.menu-sec .players li { background: var(--panel-2); }
@media (min-width: 700px) {
  .menu-wrap { align-items: center; }
  .menu-sheet { border-radius: 26px; border-bottom: 1px solid var(--line); }
}

@media (min-width: 860px) {
  body.table .turnbar { font-size: 20px; align-self: flex-start; padding-right: 22px; }
  body.table .turnbar b { font-size: 30px; }
  body.table .turnbar small { font-size: 16px; }
  body.table .result { align-items: flex-start; text-align: left; padding: 18px 20px; }
  body.table .result h2 { font-size: clamp(30px, 3.6vw, 48px); }
  body.table .result-head { font-size: 20px; }
  body.table .outcome { justify-content: flex-start; font-size: 22px; }
  body.table .outcome.bad { align-items: flex-start; }
  body.table .outcome .chip { font-size: 26px; }
  body.table #callout { width: min(60vw, 720px); }
  body.table .callout-card b { font-size: 28px; }
  body.table .callout-card span:not(.av), body.table .callout-card em { font-size: 22px; }
}

/* ปุ่มหลักของเกมลอยติดขอบล่างจอเสมอ ไม่ต้องเลื่อนหา */
body.playing:not(.table) .dock { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 4; }
body.playing:not(.table) .dock:empty { display: none; }
body.playing:not(.table) .rt { width: min(100%, 42dvh, 440px); }
.board li > span { display: flex; align-items: center; gap: 8px; }
.board li span.av { display: inline-grid; }
#callout { animation-duration: 2.6s; }
@media (min-width: 860px) {
  body.table .rt { width: min(100%, 60dvh, 600px); }
}
@media (min-width: 860px) {
  body.table .rt { width: min(100%, 52dvh, 560px); }
}

/* ---------- สถิติคืนนี้ และยอดค้างดื่ม ---------- */

.debt { font-style: normal; font-size: 10px; font-weight: 700; line-height: 1.5; padding: 0 7px; border-radius: 999px; background: var(--danger); color: #fff; white-space: nowrap; }
.debtbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: #ff4d6d26;
  border: 1.5px solid #ff4d6d99;
  font-weight: 500;
}
.debtbar b { font-size: 20px; color: #ff9db0; }
.debtbar .btn { --edge: #1e8f60; background: linear-gradient(180deg, #6ff0b6, var(--success)); color: #06281a; flex: none; }
.score li { align-items: center; gap: 8px; }
.score li > span { flex: 1; min-width: 0; flex-wrap: wrap; }
.score b { flex: none; color: var(--text); white-space: nowrap; }
.score em { font-style: normal; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--danger); color: #fff; }
.score em.ok { background: #3ddc9733; color: var(--success); }
.score .tag { font-style: normal; }
.menu-sec .btn.small { margin-top: 4px; }

/* กลางโต๊ะเกมไพ่: สำรับ + แก้วกลาง อยู่ข้างไพ่ใบล่าสุด ทุกเครื่องเห็นเหมือนกัน */
.pile { display: flex; align-items: center; justify-content: center; gap: 4cqw; }
.pile-side { display: flex; flex-direction: column; align-items: center; gap: 3cqw; }
.rt .pile-side .stack, .rt .pile-side .card { --card-w: 14cqw; }
.rt .pile.solo .pile-side .stack, .rt .pile.solo .pile-side .card { --card-w: 24cqw; }
.pile-side .card { box-shadow: 0 4px 10px #0008, inset 0 0 0 0.3em #ffffff26; }
.cup {
  position: relative;
  width: 11cqw;
  height: 12cqw;
  border: 0.7cqw solid #ffffffcc;
  border-top: 0;
  border-radius: 0 0 3cqw 3cqw;
  background: #ffffff1a;
  overflow: hidden;
}
.cup i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #ffd15c, #ff8a1f); transition: height 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
.cup b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.6cqw; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.rt .pile:not(.solo) .card3d, .rt .pile:not(.solo) .card3d .card { --card-w: 27cqw; }

/* ---------- ตั้งค่ากติกาไพ่แต่ละใบ ---------- */

.rules.edit { gap: 10px; }
.rules .rule-edit { display: grid; grid-template-columns: 30px 1fr; gap: 6px 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #ffffff12; }
.rule-edit select { grid-column: 2; }
select {
  width: 100%;
  min-height: 40px;
  padding: 6px 34px 6px 12px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: #120f22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a39dc4' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  appearance: none;
}
select:focus { outline: none; border-color: var(--accent); }
.rule-view { display: flex; flex-direction: column; }
.rule-view small { font-size: 12px; color: var(--accent); opacity: 0.85; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.kings i { font-size: 12px; }

/* =====================================================================
   จอเกมเต็มจอ: อยู่ในห้องแล้วทั้งหน้าพอดีจอเดียว ไม่มีการเลื่อนหน้า
   แถบบน (hud) / เวที (stage) / ผลลัพธ์ (info) / ปุ่ม (actions)
   ===================================================================== */

body.fit { height: 100dvh; overflow: hidden; }
body.fit #app {
  height: 100dvh;
  min-height: 0;
  gap: 8px;
  padding-top: calc(10px + env(safe-area-inset-top));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
body.fit #app.enter > * { animation: fade 0.3s ease-out both; }

.game-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.hud { grid-area: hud; flex: none; display: flex; align-items: center; gap: 8px; min-height: 50px; }
.hud .turnbar { flex: 1; min-width: 0; padding: 4px 12px 4px 4px; }
.hud .turnbar .av { font-size: 17px; }
.hud .turnbar b { font-size: 17px; }
.hud .turnbar small { font-size: 11px; }
.hud .turn-emoji { font-size: 20px; }
.hud-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.hud-title b { font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-title small { font-size: 12px; color: var(--muted); }
.hud .btn.small { flex: none; }

.debt-pill {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  padding: 4px 12px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #6ff0b6, var(--success));
  color: #06281a;
  box-shadow: 0 3px 0 #1e8f60;
  cursor: pointer;
  animation: pulse 0.9s ease-in-out infinite alternate;
}
.debt-pill span { font-size: 11px; font-weight: 600; color: #8a1029; }
.debt-pill b { font-size: 14px; }
.debt-pill:active { transform: translateY(2px); box-shadow: 0 1px 0 #1e8f60; }

/* เวที: โต๊ะย่อขยายให้พอดีพื้นที่ที่เหลือเสมอ */
.stage { grid-area: stage; flex: 1; min-height: 0; position: relative; container-type: size; display: grid; place-items: center; }
.stage > .rt { width: min(100cqw, calc((100cqh - 28px) / 1.1)) !important; margin: 0 0 24px !important; }
.stage-tag { position: absolute; z-index: 2; padding: 2px 10px; border-radius: 999px; background: #0f0c1dcc; color: var(--muted); font-size: 12px; }
.stage-tag b { color: var(--text); }
.stage-tag.tl { top: 0; left: 0; }
.stage-tag.bc { bottom: 0; left: 50%; translate: -50% 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.info { grid-area: info; flex: none; max-height: 32%; overflow: hidden; }
.info .result { padding: 10px 12px; gap: 6px; }
.info .result h2 { font-size: clamp(18px, 5vw, 24px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.info .outcome { flex-direction: row !important; flex-wrap: wrap; padding: 6px 10px; }
.info .outcome .tagline { font-size: 14px; }

.actions { grid-area: actions; flex: none; display: flex; align-items: stretch; gap: 10px; min-height: 72px; }
.actions:empty { display: none; }
.actions > .btn.huge, .actions > .wait-pill { flex: 1; min-width: 0; }
.actions .btn.huge { min-height: 72px; font-size: 26px; border-radius: 22px; }
.wait-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 22px;
  border: 1.5px dashed var(--line);
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.wait-pill small { font-size: 13px; font-weight: 400; color: var(--muted); }
.wait-pill.hot { border-color: var(--accent); color: var(--accent); animation: pulse 0.8s ease-in-out infinite alternate; }
.side-btn { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; font-size: 24px; line-height: 1.1; }
.side-btn small { font-size: 12px; color: var(--muted); }
.throw-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.throw-btn small { max-width: 100%; font-size: 15px; color: #fff; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-screen.danger .felt { background: radial-gradient(ellipse at 50% 36%, #b0405a, #5a1a28 62%, #360d17); animation: danger 0.5s ease-in-out infinite alternate; }

/* ห้องรอ: QR กลางโต๊ะ + เลือกเกมแบบการ์ดแถวเดียว */
.lobby-center { display: flex; flex-direction: column; align-items: center; gap: 1.5cqw; }
.rt .lobby-center .qr { width: 34cqw; height: 34cqw; margin: 0; padding: 1.2cqw; border-radius: 3cqw; }
.mini-code { font-size: 7cqw; font-weight: 700; letter-spacing: 1.2cqw; line-height: 1; color: var(--accent); }
.tv-wait-c { font-size: 22cqw; line-height: 1; animation: cheers 1.6s ease-in-out infinite; }
.pick-info { display: flex; flex-direction: column; gap: 8px; max-height: none; }
.game-pick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 8px; overflow-x: auto; scrollbar-width: none; }
.game-pick::-webkit-scrollbar { display: none; }
.gcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 16px; border: 2px solid var(--line); background: #120f2299; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.gcard span { font-size: 28px; line-height: 1.15; }
.gcard b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.gcard.on { border-color: var(--accent); background: #ffb62718; }
.gcard:disabled { cursor: default; }
.gcard:disabled:not(.on) { opacity: 0.45; }
.gdesc { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.gdesc .btn { flex: none; }

/* แผ่นเด้งขึ้น */
.share-body { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.share-body .qr { width: min(64vw, 240px); height: min(64vw, 240px); }
.chev { font-style: normal; font-size: 22px; color: var(--muted); }
.menu-sheet .rules.edit { margin-top: 6px; }

/* มือถือแนวนอน: โต๊ะซ้าย ผลลัพธ์+ปุ่มขวา */
@media (orientation: landscape) and (max-height: 520px) {
  body.fit #app { max-width: 900px; }
  .game-screen { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "hud hud" "stage info" "stage actions"; gap: 8px 16px; }
  .info { max-height: none; align-self: center; }
}

/* จอกลาง: แถบข้างคงที่ โต๊ะใหญ่ซ้าย ผลลัพธ์ขวา */
@media (min-width: 700px) {
  body.table.fit #app { max-width: none; }
  body.table .tv { display: grid; grid-template-columns: 1fr 300px; gap: 20px; height: 100%; min-height: 0; }
  body.table .tv-main { min-height: 0; display: flex; }
  body.table .tv-side { min-height: 0; overflow-y: auto; }
  body.table .game-screen { display: grid; grid-template-columns: 1fr minmax(300px, 420px); grid-template-rows: auto 1fr auto; grid-template-areas: "hud hud" "stage info" "stage actions"; gap: 16px 24px; }
  body.table .info { max-height: none; align-self: center; }
  body.table .info .result h2 { font-size: clamp(26px, 3vw, 42px); -webkit-line-clamp: 4; }
  body.table .hud .turnbar { flex: 0 1 auto; }
  body.table .hud .turnbar b { font-size: 26px; }
  body.table .hud .turnbar small { font-size: 14px; }
  body.table .hud .turnbar .av { font-size: 22px; }
  body.table .hud-title { align-items: flex-end; text-align: right; }
  body.table .sname { font-size: 15px; }
}
@media (max-width: 699px) {
  body.table .tv-side { display: none; }
}
/* ที่นั่งที่แตะเลือกได้ตอนไพ่ "เลือกเพื่อน" */
button.seat[data-g="pick"] .seat-av { animation: pickable 0.6s ease-in-out infinite alternate; }
/* สำรับเป็น span: ต้องเป็น block ถึงจะมีขนาด (ตอนอยู่ในปุ่มแตะเปิดไพ่) */
.stack, .deck-btn { display: block; }
.seat-tip { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- ป๊อกเด้ง ---------- */

.pd-center { display: flex; flex-direction: column; align-items: center; gap: 1.5cqw; color: #d8f3e6; }
.pd-center small { font-size: 3.4cqw; color: #d8f3e6cc; line-height: 1.3; }
.pd-big { font-size: 16cqw; line-height: 1; }
.pd-name { font-size: 5.4cqw; font-weight: 700; color: #fff; text-shadow: 0 2px 4px #0008; display: flex; align-items: center; gap: 1.5cqw; }
.deng { font-size: 3.2cqw; padding: 0.3cqw 2cqw; border-radius: 999px; background: var(--accent); color: var(--accent-text); text-shadow: none; }
.hand { display: flex; gap: 1.5cqw; }
.mcard {
  width: 13cqw;
  height: 18cqw;
  border-radius: 1.6cqw;
  background: linear-gradient(160deg, #fff, #ece9f5);
  color: #1b1731;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1cqw 2.5cqw #0009;
}
.mcard b { font-size: 5.4cqw; font-weight: 700; }
.mcard i { font-style: normal; font-size: 5cqw; }
.mcard.red { color: #e0213f; }
.mcard.back { background: radial-gradient(circle at 50% 50%, #ffffff26 0 30%, transparent 31%), repeating-linear-gradient(45deg, #ffffff12 0 4px, transparent 4px 8px), linear-gradient(160deg, #8a6cff, #4a32c4); }
.hand .mcard:nth-child(1) { rotate: -6deg; }
.hand .mcard:nth-child(3) { rotate: 6deg; }
.actions .btn.violet.huge { flex: 1; }
.game-pick { grid-auto-columns: minmax(78px, 1fr); }
.gcard b { font-size: 12px; white-space: normal; text-align: center; line-height: 1.2; }

/* ---------- แบล็คแจ็ค / ไพ่สูง-ต่ำ ---------- */

.hand.many .mcard + .mcard { margin-left: -6cqw; }
.hand.many .mcard { rotate: none !important; }
.dealer-row { display: flex; align-items: center; gap: 1cqw; margin-bottom: 1cqw; }
.dealer-row small { font-size: 3cqw; margin-right: 1cqw; }
.dealer-row .mcard { width: 8cqw; height: 11cqw; }
.dealer-row .mcard b { font-size: 3.4cqw; }
.dealer-row .mcard i { font-size: 3cqw; }
.pd-name.bust { color: #ff9db0; }

.hl-center { display: flex; flex-direction: column; align-items: center; gap: 3cqw; }
.rt .hl-center .card3d, .rt .hl-center .card3d .card { --card-w: 28cqw; }
.streak { display: flex; gap: 2cqw; }
.streak i { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #ffffff33; }
.streak i.on { background: var(--success); box-shadow: 0 0 2cqw var(--success); }
.hl-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.hl-btn small { font-size: 14px; opacity: 0.85; }
.result-head { flex-wrap: wrap; justify-content: center; }
.hl-btn small { opacity: 1; font-weight: 600; }
.game-pick { scroll-snap-type: x mandatory; } .gcard { scroll-snap-align: start; }

/* ---------- ห้องรอ: การ์ดเกมที่เลือกอยู่ + หน้าเลือกเกม ---------- */

.cur-game { display: flex; gap: 10px; align-items: stretch; }
.cur-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  border: 2px solid var(--accent);
  background: #ffb62714;
  text-align: left;
  cursor: pointer;
}
.cur-main:active { transform: scale(0.98); }
.cur-main .emoji { flex: none; width: 48px; height: 48px; display: grid; place-items: center; font-size: 28px; border-radius: 14px; background: #ffb62733; }
.cur-main .ctext { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cur-main .ctext small { font-size: 12px; color: var(--muted); }
.cur-main .ctext b { font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev-text { flex: none; font-size: 14px; font-weight: 600; color: var(--accent); }
.cur-game .side-btn { width: 64px; border-radius: 18px; }

.sheet-h { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--muted); }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gtile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border-radius: 18px;
  border: 2px solid var(--line);
  background: #120f2299;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.06s;
}
.gtile:active:not(:disabled) { transform: scale(0.97); }
.gtile:disabled { cursor: default; }
.gtile.on { border-color: var(--accent); background: #ffb62714; }
.gtile .emoji { font-size: 32px; line-height: 1.1; }
.gtile b { font-size: 16px; font-weight: 600; }
.gtile small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.gtile .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 4px; }
.gtile .tags i { font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); color: var(--text); }
.gtile .tags i.warn { background: #ff4d6d33; color: #ff9db0; }
.gtile .check { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 13px; }
@media (min-width: 700px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- ห้องรอ: การ์ดเกมที่เลือกอยู่ + หน้าเลือกเกม ---------- */

.cur-game { display: flex; gap: 10px; align-items: stretch; }
.cur-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  border: 2px solid var(--accent);
  background: #ffb62714;
  text-align: left;
  cursor: pointer;
}
.cur-main:active { transform: scale(0.98); }
.cur-main .emoji { flex: none; width: 48px; height: 48px; display: grid; place-items: center; font-size: 28px; border-radius: 14px; background: #ffb62733; }
.cur-main .ctext { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cur-main .ctext small { font-size: 12px; color: var(--muted); }
.cur-main .ctext b { font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev-text { flex: none; font-size: 14px; font-weight: 600; color: var(--accent); }
.cur-game .side-btn { width: 64px; border-radius: 18px; }

.sheet-h { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--muted); }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gtile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border-radius: 18px;
  border: 2px solid var(--line);
  background: #120f2299;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.06s;
}
.gtile:active:not(:disabled) { transform: scale(0.97); }
.gtile:disabled { cursor: default; }
.gtile.on { border-color: var(--accent); background: #ffb62714; }
.gtile .emoji { font-size: 32px; line-height: 1.1; }
.gtile b { font-size: 16px; font-weight: 600; }
.gtile small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.gtile .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 4px; }
.gtile .tags i { font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); color: var(--text); }
.gtile .tags i.warn { background: #ff4d6d33; color: #ff9db0; }
.gtile .check { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 13px; }
@media (min-width: 700px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- นับถอยหลัง ---------- */

.cd {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #120f22;
  border: 2.5px solid var(--success);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cd.hurry { border-color: var(--danger); color: #ff9db0; animation: pulse 0.5s ease-in-out infinite alternate; }
.turnbar.mine .cd { background: #fff; color: var(--accent-text); }
.actions { position: relative; }
.timerbar { position: absolute; left: 6px; right: 6px; top: -7px; height: 4px; border-radius: 999px; background: #ffffff1a; overflow: hidden; }
.timerbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--danger), var(--accent), var(--success)); animation: timer var(--dur) linear forwards; }
@keyframes timer { from { width: var(--from); } to { width: 0; } }

/* ---------- อีโมจิแซวเพื่อน ---------- */

.hud .icon.on { background: var(--accent); }
.react-tray {
  position: fixed;
  left: 50%;
  bottom: calc(100px + env(safe-area-inset-bottom));
  z-index: 20;
  translate: -50% 0;
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px #000a;
  animation: sheet 0.2s ease-out;
  max-width: calc(100vw - 24px);
}
.react-tray button {
  appearance: none;
  border: 0;
  background: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.08s, background 0.15s;
}
.react-tray button:active { transform: scale(1.35); background: #ffffff1a; }
#fx .react-float {
  position: absolute;
  font-size: 40px;
  line-height: 1;
  translate: -50% -50%;
  filter: drop-shadow(0 4px 6px #0009);
  animation: react-up 1.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes react-up {
  0% { transform: translateY(0) scale(0.3); opacity: 0; }
  15% { transform: translateY(-20px) scale(1.3); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(-140px) scale(1); opacity: 0; }
}

/* ---------- แท่นรางวัล ---------- */

.podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin-top: 8px; }
.pod { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; animation: rise 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.pod .av { font-size: 22px; }
.pod.p1 .av { font-size: 30px; box-shadow: 0 0 0 3px var(--accent), 0 0 24px #ffb62799; }
.pod b { max-width: 100%; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod small { font-size: 12px; color: var(--muted); }
.pod .block { width: 100%; margin-top: 4px; display: grid; place-items: start center; padding-top: 6px; border-radius: 12px 12px 4px 4px; font-size: 28px; }
.pod.p1 .block { height: 96px; background: linear-gradient(180deg, #ffd15c, #c98a1f); }
.pod.p2 .block { height: 70px; background: linear-gradient(180deg, #e3e1f0, #8e8aa8); }
.pod.p3 .block { height: 52px; background: linear-gradient(180deg, #e8a36b, #8f5428); }
.pod.p1 { animation-delay: 0.25s; }
.pod.p3 { animation-delay: 0.1s; }
.titles { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.titles li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: #120f2299; }
.t-emoji { font-size: 28px; line-height: 1.1; }
.titles b { display: block; font-size: 16px; }
.titles small { color: var(--muted); font-size: 13px; }
.titles .chips { justify-content: flex-start; margin-top: 6px; }
/* ถาดอีโมจิเด้งลงใต้แถบบน (ไม่บังผลลัพธ์และปุ่มล่าง) */
.react-tray { top: calc(68px + env(safe-area-inset-top)); bottom: auto; }

/* ---------- หน้าเลือกเกม: เต็มจอ ---------- */

.menu-wrap.full { align-items: stretch; background: var(--bg); }
.menu-wrap.full .menu-sheet {
  max-width: none;
  max-height: none;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-left)) calc(20px + env(safe-area-inset-bottom));
}
.menu-wrap.full .menu-sheet > * { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.menu-wrap.full .menu-head { position: sticky; top: calc(-12px - env(safe-area-inset-top)); z-index: 2; padding: 8px 0; background: var(--bg); }
.menu-wrap.full .menu-head b { font-size: 24px; }
.menu-wrap.full.fresh .menu-sheet { animation: rise 0.3s ease-out; }
.menu-wrap.full .game-grid { gap: 12px; }
.menu-wrap.full .gtile { padding: 14px; min-height: 168px; }
.menu-wrap.full .gtile .emoji { font-size: 40px; }
.menu-wrap.full .gtile b { font-size: 18px; }
.menu-wrap.full .gtile small { font-size: 13px; }
.menu-wrap.full .sheet-h { font-size: 16px; margin-top: 10px; }
@media (min-width: 700px) { .menu-wrap.full .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* หน้าตั้งกติกาเต็มจอ: แถวกติกากว้างขึ้น ปุ่มบันทึกอยู่แถวเดียว */
.menu-wrap.full .rules.edit .rule-edit { grid-template-columns: 36px 1fr; padding-bottom: 12px; }
.menu-wrap.full .rules.edit b { width: 36px; height: 36px; font-size: 16px; }
@media (min-width: 700px) {
  .menu-wrap.full .rules.edit .rule-edit { grid-template-columns: 36px 1fr 1fr; }
  .menu-wrap.full .rule-edit select { grid-column: auto; }
}

/* ---------- โป๊กเกอร์ ---------- */

.hand.community { gap: 1cqw; }
.hand.community .mcard { width: 9.5cqw; height: 13cqw; rotate: none !important; }
.hand.community .mcard b { font-size: 4cqw; }
.hand.community .mcard i { font-size: 3.6cqw; }
.hand.hole { margin-top: 1.5cqw; }
.hand.hole.folded { opacity: 0.4; filter: grayscale(1); }
.seat.off-hand .seat-av { opacity: 0.45; filter: grayscale(0.8); }
.chips.results { justify-content: center; }
.chip.bad { background: var(--danger); color: #fff; }
.chip.good { background: #3ddc9733; color: var(--success); }
.btn.danger.huge small { display: block; font-size: 14px; opacity: 0.9; }
.actions .btn.danger.huge { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }

/* ---------- การ์ดบทบาทลับ: กดค้างถึงเห็น ---------- */

.peek {
  position: relative;
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  background: #120f22;
  cursor: pointer;
  -webkit-touch-callout: none;
}
.peek-secret { display: none; font-size: 16px; }
.peek-cover { font-size: 14px; color: var(--muted); }
.peek:active .peek-cover { display: none; }
.peek:active .peek-secret { display: block; }
.peek.zombie:active { border-color: var(--danger); background: #3a1a24; }
.peek.human:active { border-color: var(--success); background: #12301f; }

/* ---------- ซอมบี้ ---------- */

.seat.zombie .seat-av { box-shadow: 0 0 0 3px #7bd389, 0 0 18px #7bd38999; }
.zb-night .pd-big { filter: drop-shadow(0 0 20px #8ab4ff); }
.game-screen:has(.zb-night) .felt { background: radial-gradient(ellipse at 50% 36%, #2a3a6a, #121a3a 62%, #0a0f24); }

/* ---------- สายลับ ---------- */

.loc-grid { width: 100%; height: 100%; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; padding: 4px; }
.loc { padding: 12px 8px; border-radius: 14px; border: 2px solid var(--line); background: #120f22; font-size: 15px; font-weight: 500; cursor: pointer; }
.loc:active { border-color: var(--accent); background: #ffb62722; }

/* ---------- เต๋าโกหก ---------- */

.die { display: inline-block; font-size: 9cqw; line-height: 1; color: #fff; text-shadow: 0 2px 4px #0008; }
.die.hit { color: var(--accent); text-shadow: 0 0 10px var(--accent); }
.dice-row { display: flex; gap: 1.5cqw; margin-top: 1cqw; }
.bid-now { font-size: 9cqw; font-weight: 700; color: #fff; line-height: 1.1; }
.dice-all { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.dice-line { display: inline-flex; align-items: center; gap: 2px; }
.dice-line .av { font-size: 12px; margin-right: 3px; }
.dice-line .die { font-size: 22px; }
.bid-ctl { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.bid-ctl .qty { display: flex; align-items: center; justify-content: center; gap: 14px; }
.bid-ctl .qty b { min-width: 40px; text-align: center; font-size: 26px; }
.bid-ctl .faces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.face { appearance: none; border: 2px solid var(--line); background: #120f22; border-radius: 10px; font-size: 28px; line-height: 1.2; color: #fff; cursor: pointer; }
.face.on { border-color: var(--accent); background: #ffb62722; color: var(--accent); }
.bid-btns { display: flex; gap: 8px; }
.bid-btns .btn { flex: 1; min-height: 52px; font-size: 18px; }

/* ---------- ไพ่ในมือ (หมดมือ! / จั่วเจอระเบิด) ---------- */

.hand-row { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding: 6px 2px 4px; scrollbar-width: none; align-items: flex-end; }
.hand-row::-webkit-scrollbar { display: none; }
.hand-btn { flex: none; appearance: none; border: 0; padding: 0; background: none; cursor: pointer; transition: transform 0.12s; }
.hand-btn:disabled { cursor: default; filter: brightness(0.5) saturate(0.6); }
.hand-btn.ok { transform: translateY(-6px); }
.hand-btn.ok:active { transform: translateY(-2px) scale(0.95); }
.hand-btn.aim { transform: translateY(-12px); filter: drop-shadow(0 0 10px var(--accent)); }
.cnt { font-size: 11px; font-weight: 700; background: #0f0c1d; color: #fff; border-radius: 999px; padding: 1px 6px; }

/* ไพ่หมดมือ! */
.ucard {
  --uc: #8a8aa0;
  width: 46px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--uc);
  border: 3px solid #fff;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 4px 10px #0008;
  text-shadow: 0 1px 2px #0006;
}
.ucard b { display: grid; place-items: center; width: 74%; height: 62%; border-radius: 50%; background: #ffffff33; rotate: -20deg; }
.c-r { --uc: #e53950; }
.c-y { --uc: #f2b705; }
.c-g { --uc: #2fb36d; }
.c-b { --uc: #2f7de1; }
.c-w { --uc: conic-gradient(#e53950 0 25%, #f2b705 0 50%, #2fb36d 0 75%, #2f7de1 0); }
.ucard.c-w { background: conic-gradient(#e53950 0 25%, #f2b705 0 50%, #2fb36d 0 75%, #2f7de1 0); }
.ucard.back { background: #1b1731; border-color: #ffffffaa; font-size: 14px; }
.ucard.back b { background: #ffb62755; rotate: none; }
.ucard.big { width: 22cqw; height: 32cqw; font-size: 9cqw; border-width: 1cqw; border-radius: 3cqw; }
.ucard.as-r { box-shadow: 0 0 0 1.4cqw #e53950, 0 6px 20px #000a; }
.ucard.as-y { box-shadow: 0 0 0 1.4cqw #f2b705, 0 6px 20px #000a; }
.ucard.as-g { box-shadow: 0 0 0 1.4cqw #2fb36d, 0 6px 20px #000a; }
.ucard.as-b { box-shadow: 0 0 0 1.4cqw #2f7de1, 0 6px 20px #000a; }
.ucard.tiny { display: inline-grid; width: 20px; height: 28px; font-size: 10px; border-width: 1.5px; border-radius: 4px; vertical-align: middle; }
.rt .ucard.back { width: 14cqw; height: 20cqw; font-size: 4.5cqw; border-width: 0.8cqw; }
.crazy-center { display: flex; align-items: center; gap: 4cqw; }
.dir { font-size: 10cqw; font-weight: 700; color: var(--uc); text-shadow: 0 0 8px #000; }
.dir.cw { animation: spin 3s linear infinite; }
.dir.ccw { animation: spin 3s linear infinite reverse; }
.color-pick { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 8px; align-items: stretch; }
.cpick { border: 0; border-radius: 16px; background: var(--uc); color: #fff; font: inherit; font-weight: 700; font-size: 16px; text-shadow: 0 1px 2px #0008; cursor: pointer; box-shadow: 0 4px 0 #0006; }
.call-btn { width: 100%; min-height: 48px; font-size: 20px; }

/* ไพ่จั่วเจอระเบิด */
.bcard {
  width: 58px;
  height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 10px;
  background: linear-gradient(160deg, #2a2547, #1b1731);
  border: 2px solid var(--line);
  color: var(--text);
  box-shadow: 0 4px 10px #0008;
}
.bcard b { font-size: 26px; line-height: 1; }
.bcard small { font-size: 11px; font-weight: 600; color: var(--muted); }
.bcard.t-defuse { border-color: var(--success); background: linear-gradient(160deg, #1e5a3e, #12301f); }
.bcard.t-cheers { border-color: var(--accent); }
.bcard.t-attack { border-color: var(--danger); }
.bcard.back { background: repeating-linear-gradient(45deg, #ff4d6d22 0 6px, transparent 6px 12px), linear-gradient(160deg, #3a1a24, #1b1731); border-color: #ff4d6d88; }
.bcard.big { width: 24cqw; height: 32cqw; border-radius: 3cqw; }
.bcard.big b { font-size: 9cqw; }
.bcard.big small { font-size: 3.6cqw; }
.boom-center { display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.bombs { font-size: 5cqw; font-weight: 700; color: #ff9db0; text-shadow: 0 2px 4px #000; }
.peek-row { display: flex; gap: 10px; justify-content: center; font-weight: 600; color: var(--accent); }
.peek-row span { font-size: 18px; }
.place-row { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.place-row .btn { padding: 6px 4px; font-size: 14px; min-height: 64px; }

/* หมาป่า: คำอธิบายบทบาทในการ์ด */
.peek-secret .how { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.zb-day .pd-big { filter: drop-shadow(0 0 18px #ffd15c); }
.warn-tip { color: #ff9db0; }

/* ---------- คนขอเข้าห้อง (เจ้าของห้องเห็น) ---------- */

.knocks { position: fixed; left: 50%; top: calc(70px + env(safe-area-inset-top)); z-index: 36; translate: -50% 0; width: min(94vw, 460px); display: flex; flex-direction: column; gap: 8px; }
.knock-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 18px; background: #f5f3ff; color: #1b1731; box-shadow: 0 14px 34px #000b; animation: sheet 0.25s ease-out; }
.kc-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-btns { flex: none; display: flex; gap: 6px; }
.knock-card .btn.ghost { color: #4b4570; box-shadow: inset 0 0 0 1.5px #c9c4e0; }
.players .kick { flex: none; min-height: 30px; padding: 2px 10px; font-size: 12px; }
.splash h1 { font-size: 28px; }
.rules b { width: auto; min-width: 30px; padding: 0 5px; }

/* ---------- ยืนยันอายุ / ตั้งค่าห้อง ---------- */

.splash.age { gap: 14px; max-width: 420px; margin: 0 auto; width: 100%; }
.age-rules { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); font-size: 15px; }
.care-note { margin-top: 0; }
.set-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.set-row > span { font-size: 14px; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { appearance: none; border: 2px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 12px; padding: 6px 12px; min-height: 40px; font-size: 14px; font-weight: 600; cursor: pointer; }
.seg button.on { border-color: var(--accent); background: #ffb62722; color: var(--accent); }
.score .adj { display: flex; gap: 4px; flex: none; }
.score .adj .btn { min-height: 30px; width: 34px; padding: 0; }
.score em.cap { background: #ffffff1f; color: var(--text); }
a { color: var(--accent); }
#toast { pointer-events: none; }

/* การ์ดเกมเล่นคนเดียว (ฟาร์มครัวยิ้ม) บนหน้าแรก */
.solo-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid #3d6b3a;
  background: linear-gradient(135deg, #1f3a26, #2a2350);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 8px 24px #00000040;
  transition: transform 0.12s ease;
}
.solo-card:active { transform: scale(0.98); }
.solo-card .solo-emoji {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #c9ec9b;
  font-size: 26px;
}
.solo-card > span:nth-child(2) { flex: 1; min-width: 0; }
.solo-card b { display: block; font-size: 16px; }
.solo-card small { display: block; font-size: 12.5px; line-height: 1.35; }
.solo-card i { font-style: normal; font-size: 24px; color: var(--muted); }
.solo { margin-top: 14px; display: grid; gap: 8px; }
.solo .solo-card { margin-top: 0; }
.solo-title { font-size: 15px; font-weight: 600; margin: 0 2px 2px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.solo-title small { font-size: 12px; }
.solo-card .solo-emoji.town { background: #ffc9d9; }
.solo-card .solo-emoji.link { background: linear-gradient(135deg, #ffb3d1, #b69cff); }
.solo-card .new { font-style: normal; font-size: 11px; font-weight: 600; color: var(--accent-text); background: var(--accent); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 2px; }

/* =====================================================================
   หน้าแรก (hub): จอเดียวพอดี ไม่เลื่อนลง ตารางเกมปัดซ้าย-ขวาเป็นหน้าๆ
   ===================================================================== */
body.hub #app { max-width: 980px; gap: 10px; }
.hub-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hub-brand { display: flex; align-items: center; gap: 8px; }
.hub-logo { font-size: 30px; filter: drop-shadow(0 4px 10px #ffb62755); }
.hub-brand b { font-size: 24px; font-weight: 700; background: linear-gradient(90deg, #ffd36b, #ff8a1f 55%, #ff5d8f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hub-me { max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; }

.hub-cont { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hub-cont > span { flex: none; font-size: 12px; color: var(--muted); }
.cont-chip { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 14px; background: color-mix(in srgb, var(--c) 22%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); color: var(--text); text-decoration: none; }
.cont-chip i { font-style: normal; font-size: 20px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--c); }
.cont-chip b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-chip small { margin-left: auto; flex: none; font-size: 11px; }

.hub-tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.hub-tabs button { border: 0; border-radius: 12px; padding: 10px 6px; font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); background: transparent; }
.hub-tabs button small { font-size: 11px; opacity: 0.75; color: inherit; }
.hub-tabs button[aria-selected='true'] { color: var(--accent-text); background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 14px #ff8a1f44; }

.hub-pages { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hub-pages::-webkit-scrollbar { display: none; }
.hub-page { flex: 0 0 100%; min-width: 0; display: grid; gap: 10px; scroll-snap-align: start; align-content: start; }
.htile { position: relative; min-width: 0; min-height: 0; max-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, #262043, var(--panel)); color: var(--text); font: inherit; text-align: center; transition: transform 0.1s; }
.htile:active { transform: scale(0.95); }
.htile .e { font-size: clamp(24px, 4.4dvh, 38px); line-height: 1.15; }
.htile b { max-width: 100%; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htile small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.htile.solo { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 35%, #262043), var(--panel)); border-color: color-mix(in srgb, var(--c) 50%, var(--line)); }
.htile .badge { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; color: var(--accent-text); background: var(--accent); }
.htile .badge.hot { background: transparent; padding: 0; font-size: 13px; }
.hub-dots { flex: none; height: 8px; display: flex; justify-content: center; gap: 6px; }
.hub-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all 0.2s; }
.hub-dots i.on { width: 20px; border-radius: 4px; background: var(--accent); }

.hub-bottom { flex: none; display: flex; flex-direction: column; gap: 8px; }
.hub-bottom .row { display: flex; gap: 8px; }
.hub-bottom input { flex: 1; min-width: 0; }
.hub-bottom .grow { flex: 1; }
.hub-care { margin: 0; text-align: center; font-size: 11px; color: var(--muted); }
.hub-care a { color: var(--muted); }

.ginfo-desc { margin: 0; font-size: 16px; line-height: 1.5; }
.ginfo-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ginfo-tags i { font-style: normal; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: #120f2299; border: 1px solid var(--line); }
@media (min-width: 700px) {
  .hub-bottom { flex-direction: row; align-items: center; }
  .hub-bottom .row { flex: 1; }
  .hub-care { display: none; }
}
.hub-bottom #code::placeholder { letter-spacing: normal; font-size: 15px; }

/* ---------- ภาพอธิบายจอกลาง ---------- */
.tvguide { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tvguide li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 6px; border-radius: 14px; background: #120f2299; border: 1px solid var(--line); }
.tvguide svg { width: 100%; max-width: 120px; height: auto; }
.tvguide b { font-size: 13.5px; }
.tvguide small { font-size: 11.5px; line-height: 1.35; }
.tg-beam { stroke-dasharray: 4 4; animation: tg-dash 0.9s linear infinite; }
.tg-bob { animation: tg-bob 1.8s ease-in-out infinite; transform-box: fill-box; }
@keyframes tg-dash { to { stroke-dashoffset: -16; } }
@keyframes tg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.tv-scan { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.tv-scan svg { width: 92px; height: auto; flex: none; }
.tv-scan span { font-size: 14px; color: var(--muted); text-align: left; }
.tv-hint { display: none; }
@media (min-width: 900px) and (orientation: landscape) {
  .tv-hint { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 16px; background: linear-gradient(90deg, #ffb6271f, #7c5cff1f); border: 1px solid #ffb62755; }
  .tv-hint span { flex: 1; font-size: 15px; }
  .tv-hint .btn { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .tg-beam, .tg-bob { animation: none; } }

/* =====================================================================
   มาตรฐาน 1Short (ตรวจ UX/UI): ปุ่มกดได้อย่างน้อย 44px, ตัวอักษรเนื้อหาอย่างน้อย 12px
   ===================================================================== */
.btn.small { min-height: 44px; }
.seg button { min-height: 44px; min-width: 44px; }
.score .adj .btn { min-height: 44px; width: 44px; font-size: 18px; }
.hub-me { min-height: 44px; }
/* ลิงก์ในบรรทัดข้อความ: พื้นที่กดอย่างน้อย 24px (WCAG 2.5.8) */
.hub-care a, .splash.age .hint a, p.hint a { display: inline-block; padding: 4px 2px; }
.htile small, .cont-chip small, .hub-care, .hub-tabs button small { font-size: 12px; }
.hub-tabs button small { opacity: 1; }
.htile .badge { font-size: 11px; }
.hud .turnbar small { font-size: 12px; }
.hub-tabs button { min-height: 44px; }

/* จอเต็มแบบเกม (หน้าแรก/ในห้อง): ยึดกับขอบจอจริงด้วย inset 0 แทน 100dvh
   ในแอปที่ติดตั้งบนมือถือ (PWA) 100dvh คำนวณเพี้ยนได้ ทำให้ปุ่มด้านล่างตกขอบจอ */
body.fit { position: fixed; inset: 0; height: auto; }
body.fit #app { position: absolute; inset: 0; height: auto; width: auto; margin-inline: auto; }

/* =====================================================================
   จอกลางทุกขนาด (แก้: มือถือไม่เห็น QR / iPad แนวตั้งโต๊ะหาย / มือถือแนวนอนปุ่มตกขอบ)
   ===================================================================== */
/* iPad แนวนอน/โน้ตบุ๊กเล็ก: แผงข้างแคบลง โต๊ะได้ที่มากขึ้น */
@media (min-width: 700px) and (max-width: 1099px) and (orientation: landscape) {
  body.table .tv { grid-template-columns: 1fr 250px; }
  body.table .game-screen { grid-template-columns: 1fr minmax(220px, 300px); }
  body.table .tv-side .qr { width: 150px; height: 150px; }
}
/* มือถือแนวนอน (จอเตี้ย): แผงข้างเหลือแค่ QR + รหัส + ปุ่ม */
@media (orientation: landscape) and (max-height: 520px) {
  body.table .tv { grid-template-columns: 1fr 210px; gap: 12px; }
  body.table .tv-side { gap: 8px; }
  body.table .tv-side > .panel.center { padding: 8px; }
  body.table .tv-side .eyebrow, body.table .tv-side .tv-scan, body.table .tv-side > .panel:not(.center) { display: none; }
  body.table .tv-side .code { margin: 0; gap: 4px; }
  body.table .tv-side .code span { width: 32px; height: 40px; font-size: 22px; }
  body.table .tv-side .qr { width: 130px; height: 130px; margin: 8px auto 0; padding: 6px; }
}
/* แนวตั้งทุกขนาด และมือถือ: โต๊ะอยู่บน แถบล่าง = QR ซ้าย · รหัสห้อง + ปุ่มขวา */
@media (orientation: portrait), (max-width: 699px) {
  body.table.fit #app { max-width: none; }
  body.table .tv { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
  body.table .tv-main { flex: 1; min-height: 0; display: flex; }
  body.table .game-screen { display: flex; flex-direction: column; }
  body.table .tv-side { flex: none; overflow: visible; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 6px; padding: 10px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
  body.table .tv-side > .panel.center { display: contents; }
  body.table .tv-side .qr { grid-column: 1; grid-row: 1 / span 3; width: 116px; height: 116px; margin: 0; padding: 6px; }
  body.table .tv-side .eyebrow { grid-column: 2; grid-row: 1; text-align: left; }
  body.table .tv-side .code { grid-column: 2; grid-row: 2; justify-content: flex-start; margin: 0; gap: 4px; }
  body.table .tv-side .code span { width: 32px; height: 40px; font-size: 22px; }
  body.table .tv-side .tv-scan { display: none; }
  body.table .tv-side > .panel:not(.center) { display: none; }
  body.table .tv-side > .row.split { grid-column: 2; grid-row: 3; align-self: end; display: flex; flex-direction: row; justify-content: flex-start; gap: 8px; }
}
/* แท็บเล็ตแนวตั้ง: QR ใหญ่ขึ้น และมีสถิติเป็นคอลัมน์ที่สาม */
@media (orientation: portrait) and (min-width: 700px) {
  body.table .tv-side { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 18px; }
  body.table .tv-side .qr { width: 168px; height: 168px; }
  body.table .tv-side .code span { width: 42px; height: 52px; font-size: 30px; }
  body.table .tv-side > .panel:not(.center) { display: block; grid-column: 3; grid-row: 1 / span 3; margin: 0; max-height: 200px; overflow: auto; background: transparent; border: 0; padding: 0; box-shadow: none; }
  body.table .rt { width: min(100%, 48dvh, 620px); margin: 0 auto; }
}

/* ตัวเลือกบทบาทเสริม (เกมหมาป่า) */
.role-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.role-opt label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border-radius: 14px; background: #120f2299; border: 1px solid var(--line); cursor: pointer; }
.role-opt input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.role-opt b { display: block; font-size: 15px; }
.role-opt small { display: block; font-size: 12.5px; }

/* โป๊กเกอร์: ไพ่ 2 ใบของแต่ละคนตอนเปิดไพ่ (ข้างชื่อในผลลัพธ์) */
.chip-cards { display: inline-flex; gap: 2px; margin-left: 4px; }
.chip-cards .mcard { width: 26px; height: 36px; font-size: 11px; border-radius: 5px; }
/* ปุ่มขนาด big ในแถวปุ่มล่าง (เช่น โป๊กเกอร์ 3 ปุ่ม): ข้อความรองขึ้นบรรทัดใหม่ */
.actions > .btn.big { flex: 1; min-width: 0; flex-direction: column; gap: 2px; line-height: 1.15; font-size: 18px; white-space: nowrap; padding-inline: 6px; }
.actions > .btn.big small { display: block; font-size: 12px; font-weight: 500; opacity: 0.9; }

/* สแกน QR ในแอป */
.hub-bottom .scan-btn { flex: none; width: 52px; padding: 0; font-size: 22px; }
.scan-wrap { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: calc(16px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); background: #05030c; }
.scan-box { position: relative; width: min(86vw, 58dvh, 420px); aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: #111; }
.scan-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 14%; border-radius: 18px; box-shadow: 0 0 0 9999px #05030c99; border: 3px solid var(--accent); animation: scan-pulse 1.6s ease-in-out infinite; }
@keyframes scan-pulse { 50% { border-color: #fff; } }
.scan-msg { margin: 0; max-width: 420px; text-align: center; font-size: 15px; color: var(--text); }
.scan-wrap .scan-close { max-width: 420px; }
@media (prefers-reduced-motion: reduce) { .scan-frame { animation: none; } }