/* 晚晴茶屋 — low-footprint table controls over a real voxel room */
:root {
  --ink: #5d4a3d;
  --ink-soft: #857366;
  --paper: #fffdf5;
  --paper-solid: #fff8e9;
  --leaf: #7cad8a;
  --leaf-dark: #55765d;
  --sky: #91afd0;
  --sky-dark: #627fa2;
  --sun: #edc77a;
  --orange: #df8f78;
  --danger: #d86565;
  --purple: #a18bbd;
  --line: rgba(104, 79, 56, 0.20);
  --shadow: 0 5px 0 rgba(101, 73, 49, 0.18), 0 14px 34px rgba(65, 44, 29, 0.16);
  --shadow-small: 0 3px 0 rgba(101, 73, 49, 0.16), 0 8px 20px rgba(65, 44, 29, 0.13);
  --font: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --display: "Baloo 2", "Noto Sans TC", sans-serif;
  --safe-top: max(10px, env(safe-area-inset-top));
  --safe-bottom: max(12px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  background: #d9bd91;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; }

#scene {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  filter: none;
}

#vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(77, 54, 34, 0.19) 100%);
}

/* 載入 */
#loading {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #efdcb9 0%, #e7cfaa 54%, #c9a16f 100%);
  color: #5d4a3d;
  transition: opacity 320ms ease;
}
#loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 250, 232, 0.38), rgba(255, 245, 222, 0.08) 52%, rgba(104, 73, 48, 0.12));
}
#loading > * { position: relative; }
#loading .loading-mark {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: var(--leaf);
  color: white;
  font-size: 36px;
  box-shadow: var(--shadow);
  animation: loaderHop 850ms ease-in-out infinite alternate;
}
#loading strong { margin-top: 12px; font-size: 20px; font-weight: 900; letter-spacing: 0.04em; }
#loading span { color: var(--ink-soft); font-size: 13px; }
@keyframes loaderHop { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-10px) rotate(3deg); } }

/* 頂部牌局資訊 */
#hud {
  position: fixed;
  top: var(--safe-top);
  left: 12px;
  right: 12px;
  z-index: 15;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none;
}
#hud-left { min-width: 0; }
#badge-turn,
.chip,
.score-card,
#game-prompt,
#connection-pill,
.icon-button {
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 253, 245, 0.94);
  box-shadow: var(--shadow-small);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#badge-turn {
  display: inline-flex;
  align-items: center;
  max-width: min(56vw, 480px);
  min-height: 42px;
  padding: 8px 15px 8px 10px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.01em;
}
.turn-dot {
  width: 13px;
  height: 13px;
  margin-right: 9px;
  border-radius: 4px;
  background: #a8b0aa;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16);
  flex: 0 0 auto;
}
#badge-turn.mine {
  color: #183d27;
  background: #f7ffda;
  border-color: #f9ef83;
  animation: turnPulse 1.45s ease-in-out infinite;
}
#badge-turn.mine .turn-dot { background: var(--sun); }
@keyframes turnPulse {
  50% { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(49, 77, 48, 0.14), 0 18px 38px rgba(33, 80, 36, 0.22); }
}

#hud-sub { display: flex; gap: 7px; margin-top: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 5px 10px;
  border-radius: 11px;
  color: var(--ink-soft);
  font-size: 12px;
  white-space: nowrap;
}
.chip i { color: var(--leaf-dark); font-size: 15px; }
.chip b { color: var(--ink); font-family: var(--display); font-size: 14px; }
.chip.wager { background: #fff2b6; border-color: #ffe36e; }
.chip.wager i { color: #bd741f; }

#hud-scores {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 6px;
  width: min(286px, 45vw);
}
.score-card {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 9px 5px 5px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 11px;
  transition: transform 180ms ease, background 180ms ease;
}
.score-card .avatar-dot {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  color: #fff;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.13);
}
.score-card .player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-card .pts { min-width: 34px; text-align: right; font-family: var(--display); font-size: 13px; }
.score-card .pts.plus { color: #20834b; }
.score-card .pts.minus { color: #c64141; }
.score-card.dealer { background: #fff2b6; border-color: #ffe36e; }
.score-card.turn { transform: translateY(2px) scale(1.025); outline: 3px solid rgba(255, 207, 64, 0.55); }
.score-card.me { border-color: #7acff1; }

/* 低佔位的視角與連線工具 */
#view-tools {
  position: fixed;
  right: 13px;
  bottom: calc(var(--safe-bottom) + 4px);
  z-index: 18;
  display: flex;
  gap: 7px;
}
.icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 13px;
  color: #395847;
  font-size: 20px;
  cursor: pointer;
}
.icon-button:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(49, 77, 48, 0.18); }
.icon-button.active { color: #fff; background: var(--sky); }

#connection-pill {
  position: fixed;
  left: 13px;
  bottom: calc(var(--safe-bottom) + 4px);
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 10px;
  border-radius: 11px;
  color: var(--ink-soft);
  font-size: 11px;
}
.connection-dot { width: 9px; height: 9px; border-radius: 3px; background: #d99a35; }
#connection-pill.online .connection-dot { background: #40ad68; }
#connection-pill.offline .connection-dot { background: var(--danger); }

/* 精準倒數與操作提示 */
#timer-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 5px;
  background: rgba(255, 255, 255, 0.36);
  pointer-events: none;
}
#timer-bar {
  width: 0;
  height: 100%;
  background: var(--leaf);
  transform-origin: left;
  transition: width 900ms linear, background 180ms ease;
}
#timer-bar.urgent { background: var(--danger); }

#game-prompt {
  position: fixed;
  top: 118px;
  left: 50%;
  z-index: 14;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 180px));
  padding: 8px 12px;
  border-radius: 14px;
  transform: translateX(-50%);
  pointer-events: none;
}
#game-prompt > i { color: var(--sky-dark); font-size: 22px; }
#game-prompt > span { display: grid; min-width: 0; }
#prompt-title { font-size: 13px; font-weight: 900; }
#prompt-detail { margin-top: 1px; color: var(--ink-soft); font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#game-prompt.mine { background: #f7ffda; border-color: #f9ef83; }
#game-prompt.mine > i { color: #c48119; }

#claim-banner {
  position: fixed;
  top: 24%;
  left: 50%;
  z-index: 31;
  max-width: min(360px, calc(100vw - 28px));
  padding: 7px 13px 9px;
  border: 2px solid #fff;
  border-radius: 12px;
  color: #fff;
  background: var(--orange);
  box-shadow: 0 5px 0 rgba(111, 57, 24, 0.24), 0 9px 22px rgba(52, 79, 48, 0.20);
  font-size: clamp(13px, 2.2vw, 19px);
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.82);
}
#claim-banner.show { animation: bannerPop 920ms cubic-bezier(.2, 1.2, .35, 1) forwards; }
@keyframes bannerPop {
  16%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -72%) scale(0.97); }
}

/* 選牌確認：避免手機誤觸，第二次點牌也可送出 */
#selection-dock {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 69px);
  z-index: 24;
  display: grid;
  grid-template-columns: auto minmax(82px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: min(370px, calc(100vw - 24px));
  padding: 7px;
  border: 2px solid #fff;
  border-radius: 16px;
  background: rgba(255, 253, 245, 0.97);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  animation: dockIn 180ms ease-out;
}
#selection-dock[hidden] { display: none; }
#selection-dock > span { display: grid; text-align: center; }
#selection-dock > .selected-face { display:flex; align-items:center; justify-content:center; gap:9px; }
.selected-face > span { display:grid; text-align:left; }
#selected-tile-face { width:30px; height:41px; border-radius:3px; box-shadow:1px 2px 0 #d4c8b0; }
.music-controls { display:grid; gap:9px; padding:10px 0 16px; margin-bottom:14px; border-bottom:1px solid #c9b894; }
.music-controls label { display:flex; justify-content:space-between; font-size:12px; }
.music-controls small { color:#5c695e; font-size:11px; line-height:1.5; }
#music-volume { width:100%; min-height:30px; accent-color:#486c58; }
#selection-dock small { color: var(--ink-soft); font-size: 9px; }
#selected-tile-name { font-size: 15px; font-weight: 900; }
#selection-dock button {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}
.dock-secondary { color: #68736b; background: #edf0ea; }
.dock-primary { color: #fff; background: var(--orange); box-shadow: inset 0 -3px 0 rgba(122, 54, 20, 0.22); }
@keyframes dockIn { from { opacity: 0; transform: translate(-50%, 12px) scale(0.96); } }

/* 吃碰槓胡列 */
#action-bar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 10px);
  z-index: 23;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: min(760px, calc(100vw - 130px));
  transform: translateX(-50%);
}
#action-bar button,
#result-next {
  min-width: 92px;
  min-height: 46px;
  padding: 8px 17px 10px;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 14px;
  color: #fff;
  background: var(--sky);
  box-shadow: var(--shadow-small);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  transition: transform 110ms ease, filter 110ms ease;
  animation: actionIn 190ms ease-out backwards;
}
#action-bar button i,
#result-next i { margin-right: 6px; font-size: 17px; vertical-align: -1px; }
#action-bar button:hover { filter: brightness(1.06); transform: translateY(-2px); }
#action-bar button:active { transform: translateY(2px) scale(0.98); box-shadow: 0 2px 0 rgba(49, 77, 48, 0.18); }
#action-bar button:disabled { opacity: 0.58; cursor: wait; transform: none; }
#action-bar button.pong { background: var(--leaf); }
#action-bar button.kong { background: var(--purple); }
#action-bar button.hu { color: #67420d; background: var(--sun); }
#action-bar button.pass { color: #526057; background: #e7ede5; }
#action-bar button.next { color: #67420d; background: var(--sun); }
@keyframes actionIn { from { opacity: 0; transform: translateY(10px) scale(0.92); } }

/* 結算 */
#result-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 52, 32, 0.46);
  backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
#result-overlay.show { opacity: 1; pointer-events: auto; }
#result-card {
  width: min(430px, 92vw);
  max-height: min(650px, 88vh);
  overflow: auto;
  padding: 25px;
  border: 3px solid #fff;
  border-radius: 24px;
  background: var(--paper-solid);
  box-shadow: 0 8px 0 rgba(42, 91, 48, 0.28), 0 28px 68px rgba(10, 34, 18, 0.34);
  text-align: center;
  transform: translateY(16px) scale(0.94);
  transition: transform 280ms cubic-bezier(.2, 1.22, .3, 1);
}
#result-overlay.show #result-card { transform: translateY(0) scale(1); }
#result-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  border-radius: 18px;
  color: #784d08;
  background: var(--sun);
  box-shadow: inset 0 -5px 0 rgba(120, 72, 7, 0.18);
  font-size: 30px;
}
.eyebrow { margin: 0; color: var(--ink-soft); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
#result-title { margin: 2px 0 12px; color: var(--leaf-dark); font-size: 27px; font-weight: 900; }
#result-lines { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.75; }
#result-lines:empty { display: none; }
#result-scores { margin-top: 13px; padding-top: 12px; border-top: 2px dashed #d7d9c9; color: var(--ink-soft); font-size: 13px; line-height: 1.9; }
#result-next { margin-top: 16px; color: #67420d; background: var(--sun); }

/* 短暫訊息 */
.float-label,
#toast {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  color: #fff;
  background: rgba(32, 55, 38, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-small);
  font-weight: 900;
}
.float-label {
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 14px;
  animation: floatUp 1.15s ease-out forwards;
}
.float-label.big { font-size: 19px; }
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.72); }
  18% { opacity: 1; transform: translate(-50%, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55px) scale(.96); }
}
#toast {
  left: 50%;
  bottom: calc(var(--safe-bottom) + 75px);
  max-width: min(520px, calc(100vw - 28px));
  padding: 9px 15px;
  border-radius: 13px;
  font-size: 12px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 160ms ease, transform 160ms ease;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.fatal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 52, 32, 0.62);
  backdrop-filter: blur(8px);
}
.fatal-card {
  display: grid;
  justify-items: center;
  width: min(390px, 92vw);
  padding: 26px;
  border: 3px solid #fff;
  border-radius: 22px;
  color: var(--ink);
  background: var(--paper-solid);
  box-shadow: var(--shadow);
  text-align: center;
}
.fatal-card > i { color: var(--danger); font-size: 40px; }
.fatal-card strong { margin-top: 8px; font-size: 19px; font-weight: 900; }
.fatal-card p { margin: 8px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }

@media (max-width: 760px) {
  #hud { left: 8px; right: 8px; gap: 7px; }
  #badge-turn { max-width: 57vw; min-height: 37px; padding: 6px 10px 6px 8px; font-size: 11px; border-radius: 11px; }
  .turn-dot { width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; }
  #hud-sub { gap: 4px; margin-top: 5px; }
  .chip { min-height: 27px; padding: 3px 7px; font-size: 9px; border-radius: 9px; }
  .chip i { font-size: 12px; }
  .chip b { font-size: 11px; }
  #hud-scores { width: 40vw; grid-template-columns: 1fr; gap: 4px; }
  .score-card { grid-template-columns: 21px minmax(0, 1fr) auto; min-height: 29px; padding: 3px 6px 3px 3px; border-width: 1px; border-radius: 9px; font-size: 9px; }
  .score-card .avatar-dot { width: 21px; height: 21px; border-radius: 7px; font-size: 9px; }
  .score-card .pts { min-width: 28px; font-size: 10px; }
  #game-prompt { top: 108px; max-width: calc(100vw - 175px); padding: 6px 9px; gap: 7px; border-radius: 11px; }
  #game-prompt > i { font-size: 18px; }
  #prompt-title { font-size: 10px; }
  #prompt-detail { display: none; }
  #action-bar { bottom: calc(var(--safe-bottom) + 54px); max-width: calc(100vw - 18px); gap: 6px; }
  #action-bar button { min-width: 72px; min-height: 43px; padding: 7px 12px 9px; border-radius: 12px; font-size: 12px; }
  #selection-dock { bottom: calc(var(--safe-bottom) + 58px); }
  #selection-dock + #action-bar:empty { bottom: calc(var(--safe-bottom) + 8px); }
  #view-tools { right: 8px; bottom: calc(var(--safe-bottom) + 2px); }
  .icon-button { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; }
  #connection-pill { left: 8px; bottom: calc(var(--safe-bottom) + 2px); min-height: 31px; padding: 4px 8px; font-size: 9px; }
  #toast { bottom: calc(var(--safe-bottom) + 104px); }
}

@media (max-width: 430px) {
  #hud-scores { width: 39vw; }
  #hud-sub .wager { display: none !important; }
  #game-prompt { top: 101px; max-width: 55vw; }
  #selection-dock { grid-template-columns: auto 1fr auto; min-width: calc(100vw - 16px); }
  #selection-dock button { min-height: 40px; padding: 0 11px; font-size: 11px; }
}

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

@media (prefers-contrast: more) {
  #badge-turn, .chip, .score-card, #game-prompt, #connection-pill, .icon-button, #selection-dock { border-color: #26332b; background: #fff; }
}

/* Teahouse shell: quiet, compact, legible. */
[hidden] { display:none !important; }
:root { --shadow-small:0 3px 12px #20170e26; --shadow:0 8px 28px #20170e38; }
#badge-turn,.chip,.score-card,#game-prompt,#connection-pill,.icon-button {
  border:1px solid #ead9b3a8; background:#fff6e8eb; box-shadow:var(--shadow-small);
}
#hud { top:max(14px,env(safe-area-inset-top)); left:18px; right:18px; }
#badge-turn { border-radius:10px; font-size:13px; min-height:38px; padding:8px 12px; }
#hud-sub { margin-top:6px; gap:5px; }
.chip { border-radius:7px; padding:4px 8px; min-height:25px; font-size:10px; }
.chip b { font-size:12px; }
#hud-scores { width:270px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.score-card { min-height:34px; border-radius:8px; padding:4px 7px; font-size:10px; gap:5px; grid-template-columns:21px minmax(0,1fr) auto; }
.score-card .avatar-dot { width:21px;height:21px;font-size:11px;border-radius:5px; }
.score-card .pts { font-size:12px; min-width:18px; }
.score-card.turn { border-color:#bd8b4e; background:#f8e4b9; }
#game-prompt { top:100px; max-width:min(470px,calc(100vw - 36px)); border-radius:8px; padding:6px 12px; background:#fff6e8dc; }
#prompt-title { font-size:12px; }
#prompt-detail { font-size:10px; }
#view-tools { right:18px;bottom:max(16px,env(safe-area-inset-bottom));gap:6px; }
.icon-button { display:flex; align-items:center; justify-content:center; gap:7px; width:auto; min-width:42px; height:40px; border-radius:9px; padding:0 11px; font-size:18px; color:#544334; }
.icon-button span { font-size:11px;font-weight:700; }
.icon-button[aria-pressed=true] { background:#3f6554;color:#fff2dc;border-color:#8eab83; }
.icon-button.active { background:#ead5ad;color:#594630; }
#connection-pill { bottom:max(18px,env(safe-area-inset-bottom));left:18px; font-size:10px; }
#room-caption { display:none;position:fixed;z-index:10;left:26px;bottom:82px;color:#f5e6c9;pointer-events:none;text-shadow:0 2px 15px #0009; }
#room-caption span { display:block;font-size:10px;letter-spacing:3px;margin-bottom:5px;opacity:.8; }
#room-caption strong { display:block;font-size:29px;letter-spacing:6px;font-weight:700; }
#room-caption small { display:block;margin-top:7px;font-size:11px;letter-spacing:2px; }
.room-view #room-caption { display:block; }
.room-view #hud,.room-view #game-prompt,.room-view #claim-banner,.room-view #timer-wrap { visibility:hidden; }
.room-view #hud:has(#badge-turn.mine) {visibility:visible;}
.room-view #hud:has(#badge-turn.mine) #hud-scores,.room-view #hud:has(#badge-turn.mine) #hud-sub {visibility:hidden;}
.room-view #vignette { background:linear-gradient(0deg,#151c1c66,transparent 26%); }
#result-overlay:not(.show) { visibility:hidden; }
#claim-banner { top:155px;font-size:14px;letter-spacing:0;background:#84593eea; }
#selection-dock { border-color:#ccb58d; }
@media(max-width:760px) {
  #hud {left:10px;right:10px;gap:8px;}
  #badge-turn {font-size:11px;max-width:48vw;min-height:35px;}
  #hud-scores {width:43vw;grid-template-columns:repeat(2,minmax(0,1fr));}
  .score-card {font-size:9px;min-height:32px;grid-template-columns:minmax(0,1fr) auto;}
  .score-card .avatar-dot {display:none;}
  #game-prompt {top:96px;max-width:calc(100vw - 28px);}
  #view-tools {right:10px;bottom:max(12px,env(safe-area-inset-bottom));}
  .icon-button {height:40px;padding:0 9px;}
  #connection-pill {left:10px;bottom:max(15px,env(safe-area-inset-bottom));font-size:9px;}
  #room-caption {left:18px;bottom:77px;}
}
@media(max-width:430px) {
  #hud-scores{width:44vw;}
  #badge-turn{font-size:10px;padding:7px;}
  #view-tools{gap:4px;}
  .icon-button{padding:0 7px;min-width:35px;gap:4px;}
  .icon-button span{font-size:10px;}
  #room-caption strong{font-size:25px;}
}
[hidden]{display:none!important}
#table-event{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);font-size:12px;color:#f8eed9;text-shadow:0 1px 4px #241b15;pointer-events:none;white-space:nowrap;z-index:20;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
.room-view #table-event{display:none}
#table-menu{position:fixed;right:16px;bottom:70px;width:min(310px,calc(100vw - 32px));box-sizing:border-box;padding:18px;z-index:100;border:1px solid #b8a687;border-radius:16px;background:#f6efdf;color:#423d30;box-shadow:0 12px 50px #201a1466;font:500 14px/1.6 'Noto Sans TC',sans-serif}
#table-menu header{display:flex;align-items:center;justify-content:space-between}
#table-menu button{border:1px solid #adbaa0;background:#647e61;color:#fff7e7;border-radius:9px;padding:10px 14px;cursor:pointer;font:700 13px 'Noto Sans TC',sans-serif}
#table-menu #menu-close{background:transparent;color:#423d30;border:0;padding:6px;font-size:20px}
#table-menu .menu-detail{font-size:12px;color:#6c685d}
#table-menu button:disabled{opacity:.5;cursor:wait}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}