/* public/online.css — 線上版特有樣式。
   沿用 style.css 的 design token,不定義新色票。 */

/* ---------- 頂列 ----------
   grid 改成 [房號][荷官留白][按鈕],中央不能放東西 */
.topbar.online {
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-2);
}
.room-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: var(--sp-1);
  min-width: 0;
}
.topbar-actions { display: flex; gap: 2px; }

/* 階段標籤移到底池下方時,上下留白要反過來 */
.stage-label.below {
  margin-bottom: 0;
  margin-top: var(--sp-3);
}

.room-code {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--ink-50);
}

/* 頂列右邊有五顆 44px 的按鈕,320px 寬的螢幕只剩約 64px 給房號 ——
   放得下六碼,放不下「房號 」加六碼。藏前綴,不要讓瀏覽器去截那六碼。 */
@media (max-width: 359px) { .room-pre { display: none; } }

.conn-state {
  display: block;
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-400);
}
.conn-state.ok { color: var(--call-lt); }
.conn-state.bad { color: var(--fold-lt); }

/* 未讀聊天的小紅點 */
.icon-btn { position: relative; }
.chat-dot {
  position: absolute;
  top: 6px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fold-lt);
  box-shadow: 0 0 0 2px rgba(21,15,29,.9);
}
.chat-dot.hidden { display: none; }

/* ---------- 行動倒數 ----------
   用 transform: scaleX 而不是改 width —— 只動合成器,不觸發版面重算。 */
.turn-timer {
  height: 3px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.1);
  overflow: hidden;
  margin-bottom: var(--sp-2);
}
.turn-timer.hidden { display: none; }
#turnTimerFill {
  display: block;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--brass-400), var(--brass-200));
  will-change: transform;
}
#turnTimerFill.urgent {
  background: linear-gradient(90deg, var(--fold), var(--fold-lt));
}

/* ---------- 收合式加注 ---------- */
.control-actions { grid-template-columns: repeat(3, 1fr); }

.raise-confirm {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-2);
}

.btn-ghost {
  --b-lt: #3a3a3a; --b-mid: #2a2a2a; --b-dk: #191919;
  color: var(--ink-200);
}

/* 展開時從下方滑入,讓「這是剛長出來的一層」讀得出來 */
.raise-box:not(.hidden) {
  animation: raise-in .18s cubic-bezier(.2,.9,.3,1) 1;
}
@keyframes raise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 斷線的座位 ---------- */
.seat.offline .plaque {
  border-color: rgba(255,255,255,.06);
  opacity: .65;
}
.seat.offline .pname { color: var(--ink-400); }

/* ---------- 聊天 ---------- */
.chat-log {
  flex: 1;
  min-height: 180px;
  max-height: 46dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  -webkit-overflow-scrolling: touch;
}

.chat-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 82%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  align-self: flex-start;
}
.chat-row.mine {
  align-self: flex-end;
  background: rgba(201,160,82,.16);
}

.chat-who {
  font-size: var(--t-3xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--brass-300);
}
.chat-text {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-100);
  word-break: break-word;
}

.chat-input-row {
  display: flex;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,.08);
}
.chat-input-row .text-input { flex: 1; min-width: 0; }
.chat-input-row .btn { flex: 0 0 auto; padding: var(--sp-3) var(--sp-4); }

/* ---------- 加入畫面 ---------- */
.join-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: left;
  margin-bottom: var(--sp-6);
}
.join-fields .field-label { margin-top: var(--sp-2); }
.join-fields .field-note { margin-top: var(--sp-1); }

.join-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  color: var(--ink-600);
  font-size: var(--t-2xs);
}
.join-divider::before, .join-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.1);
}

.join-hint { margin-top: var(--sp-4); text-align: center; }

/* 開桌後把房號放大,那是要唸給朋友聽的東西 */
.room-code.fresh {
  animation: code-pop .5s cubic-bezier(.2,1.5,.4,1) 1;
  color: var(--brass-200);
}
@keyframes code-pop {
  0% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* AI 標記:一個小點,不寫字。
   玩家有權知道對手是機器人(誠實),但名字裡不該寫「AI 岩石」——
   那等於把對手的打法直接告訴他,讀人的樂趣就沒了。 */
.seat.is-bot .avatar { position: relative; }
.seat.is-bot .avatar::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--ink-400);
  box-shadow: 0 0 0 1.5px rgba(12,11,9,.95);
}

/* 設定抽屜裡的荷官預覽 */
.dealer-opt .dealer-img { width: 100%; height: auto; max-height: 78px; object-fit: contain; }

/* 荷官換表情時輕輕一跳,讓眼角餘光注意到他的反應(dealer-mood.js) */
.dealer-figure .dealer-img { transform-origin: 50% 90%; }
.dealer-figure .dealer-img.mood-pop { animation: mood-pop .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mood-pop {
  from { transform: scale(.94); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dealer-figure .dealer-img.mood-pop { animation: none; }
}

/* 荷官的對話泡泡(dealer-mood.js)。位置由 JS 算:荷官右側、肩膀高度。
   左下角是尖角,指回荷官。z-index 高於座位,但不吃點擊。 */
.dealer-say {
  position: absolute;
  z-index: 7;
  /* 寬度跟著字走,超過 11em 才換行。原本是 max-width + nowrap:
     長台詞(「你在 Button(莊家位),最後行動」)的字會跑出白框外 */
  width: max-content;
  max-width: 11em;
  padding: 6px 10px;
  border-radius: 10px 10px 10px 2px;
  background: #fff;
  color: #141a33;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  pointer-events: none;
}
.dealer-say[hidden] { display: none; }
.dealer-say.say-in { animation: say-in .22s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 0 100%; }
@keyframes say-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@media (min-width: 760px) { .dealer-say { font-size: 14px; padding: 8px 12px; } }
@media (prefers-reduced-motion: reduce) { .dealer-say.say-in { animation: none; } }

/* ---------- 桌上的對話氣泡 ---------- */

/* 泡泡層。蓋在牌桌上,但不吃點擊 */
.emote-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

/* 對話氣泡(AI 的台詞、真人的快捷對話):座位正上方(上排座位改在正下方),置中對齊座位。
   寬度上限 9em 約等於兩行七個字 —— banter.js 的台詞上限就是照這個訂的。 */
.speech-pop {
  position: absolute;
  transform: translate(-50%, calc(-100% - 34px));
  z-index: 2;
}
.speech-pop.below { transform: translate(-50%, 40px); }
/* 自己的快捷對話:手牌右邊、垂直置中,寬度收窄一點才不會超出螢幕右緣 */
.speech-pop.beside { transform: translate(8px, -50%); }
.speech-pop.beside .speech-bubble { max-width: 7.5em; }
.speech-bubble {
  max-width: 9em;
  padding: 5px 9px;
  font-size: var(--t-2xs);
  line-height: 1.35;
  font-weight: 500;
  color: var(--ink-50);
  text-align: center;
  word-break: break-word;
  text-wrap: balance;              /* 兩行時左右平均,不要剩一個字孤零零在第二行 */
  border-radius: var(--r-md);
  background: linear-gradient(rgba(26,23,19,.96), rgba(15,13,11,.97));
  border: 1px solid var(--brass-500);
  box-shadow: var(--sh-md);
  animation: speech-life 3200ms var(--ease) forwards;
}
@keyframes speech-life {
  0%   { opacity: 0; transform: translateY(6px) scale(.9); }
  6%   { opacity: 1; transform: translateY(0) scale(1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* 表情按鈕:浮在牌桌與控制列之間那條留白帶的右端,拇指甜蜜點。
   .controls 必須是定位基準,否則 absolute 會往上找到別的祖先、整顆跑出畫面外。 */
.controls { position: relative; }

.emote-btn {
  position: absolute;
  right: var(--sp-3);
  top: -46px;
  width: 42px; height: 42px;
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--brass-600);
  background: linear-gradient(rgba(30,27,22,.95), rgba(18,16,13,.96));
  box-shadow: var(--sh-md);
  cursor: pointer;
  transition: transform 120ms var(--ease), border-color var(--dur) var(--ease);
}
.emote-btn:active { transform: scale(.92); }
.emote-btn:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 2px; }

/* 快捷對話面板:原地取代控制列 */
.quick-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: raise-in .16s var(--ease) 1;
}
.quick-panel.hidden { display: none; }
.controls.emoting .control-actions,
.controls.emoting .raise-box { display: none; }

/* 回應列:有人剛對桌上丟話才出現。金色,跟一般選項分開 */
.quick-reply {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201,160,82,.25);
}
.quick-reply.hidden { display: none; }
.quick-who {
  font-size: var(--t-3xs);
  color: var(--brass-300);
  white-space: nowrap;
  max-width: 7em;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 一般選項:自動換行的膠囊。右邊留給浮在上方的按鈕以外的空間不用算 ——
   面板打開時控制列已經藏起來了 */
.quick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.quick-opt {
  min-height: 32px;
  padding: 0 11px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-50);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform 120ms var(--ease);
}
.quick-opt:active { transform: scale(.95); background: rgba(201,160,82,.2); }
.quick-opt:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 2px; }
.quick-opt.reply {
  color: #1a1408;
  font-weight: 600;
  border-color: transparent;
  background: var(--brass-300);
}

/* 按鈕:線條對話框圖示,跟頂列按鈕同一套畫法。stroke 用 currentColor */
.emote-btn { display: grid; place-items: center; color: #fff; }
.emote-btn svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 有人對你講話、可以回:按鈕亮金框、右上角一個點,提示「點開就能回」 */
.quick-btn.has-reply { border-color: var(--brass-300); }
.quick-btn.has-reply::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brass-300);
  box-shadow: 0 0 0 2px rgba(0,0,0,.5);
  animation: reply-ping 1.2s var(--ease) infinite;
}
@keyframes reply-ping { 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .quick-btn.has-reply::after { animation: none; } }

@media (max-width: 759px) {
  .quick-opt { min-height: 30px; padding: 0 9px; font-size: 12px; }
  .quick-grid, .quick-reply { gap: 5px; }
}

/* ---------- 活動名稱與邀請 ---------- */
.event-badge {
  margin: calc(var(--sp-2) * -1) 0 var(--sp-5);
  font-size: var(--t-sm);
  color: var(--brass-200);
  background: rgba(201,160,82,.12);
  border: 1px solid rgba(201,160,82,.28);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  display: inline-block;
}
.event-badge.hidden { display: none; }
.event-badge.gone {
  color: var(--fold-lt);
  background: rgba(168,64,58,.12);
  border-color: rgba(168,64,58,.32);
}

.invite-row { display: flex; gap: var(--sp-2); }
.invite-row .text-input {
  flex: 1; min-width: 0;
  font-size: var(--t-2xs);
  color: var(--ink-200);
}
.invite-row .btn { flex: 0 0 auto; padding: var(--sp-3) var(--sp-4); }

/* 有活動名稱時房號會被取代,名稱可能較長 */
.room-code {
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ───────── 登入 ─────────
   放在加入牌桌的彈窗裡。沒開登入時整區 display:none,
   版面完全回到訪客模式的樣子。 */
.auth-box {
  margin: 0 0 18px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
}
.auth-box.hidden { display: none; }

.auth-why {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
  text-align: center;
}
#gsiButton { display: flex; justify-content: center; min-height: 44px; }

.auth-signedin {
  display: flex;
  align-items: center;
  gap: 11px;
}
.auth-signedin.hidden, .auth-signedout.hidden, .auth-ig.hidden { display: none; }

.auth-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid rgba(232, 190, 106, .55);
  background: rgba(255, 255, 255, .08);
}
.auth-avatar.hidden { display: none; }

/* 頭像本身就是「換照片」按鈕。右下角的小相機告訴人這裡可以按;
   沒有頭像(Apple 登入)時顯示一個 + 的空圈 */
.auth-avatar-btn {
  position: relative;
  flex: none;
  width: 44px; height: 44px;
  padding: 0; border: 0; background: none;
  border-radius: 50%;
  cursor: pointer;
}
.auth-avatar-btn:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 2px; }
.auth-avatar-empty {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .35);
  place-items: center;
  font-size: 22px; font-weight: 500; line-height: 1;
  color: rgba(255, 255, 255, .7);
}
.auth-avatar.hidden + .auth-avatar-empty { display: grid; }
.auth-avatar-cam {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--room-700, #141a33);
  border: 1px solid rgba(255, 255, 255, .25);
}
.auth-avatar-cam svg {
  width: 12px; height: 12px;
  fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round;
}
.auth-avatar-btn.busy { pointer-events: none; }
.auth-avatar-btn.busy .auth-avatar,
.auth-avatar-btn.busy .auth-avatar-empty { opacity: .45; }
.auth-avatar-btn.busy .auth-avatar-cam { animation: avatar-busy 1s linear infinite; }
@keyframes avatar-busy { to { transform: rotate(360deg); } }

.ig-note { margin-top: 6px; line-height: 1.6; }
.auth-link {
  padding: 4px 2px; margin-left: 4px;
  background: none; border: 0;
  font: inherit; color: var(--brass-300);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.auth-link.hidden { display: none; }

/* 名牌可以點(看玩家卡片)。有填 IG 的人,名牌右上角掛一個小 IG 標記 ——
   不然沒人知道點下去有東西看 */
.seat .plaque[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.seat .plaque[role="button"]:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 2px; }
.seat.has-ig .plaque { position: relative; }
/* 掛在頭像圓圈的右下角,完全落在名牌裡面 ——
   原本放名牌右上角,量過會蓋到自己底牌的角(底牌就疊在名牌正上方) */
.seat.has-ig .plaque::after {
  content: '';
  position: absolute;
  left: calc(5px + var(--avatar) - 9px);
  bottom: 2px;
  width: 12px; height: 12px;
  border-radius: 3.5px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3C/svg%3E")
      center / 8px 8px no-repeat,
    linear-gradient(45deg, #f9a825, #e1306c 55%, #833ab4);
  box-shadow: 0 0 0 1.5px var(--room-900, #0a0e1c);
  pointer-events: none;
}

/* 玩家卡片 */
.player-card { max-width: 420px; margin: 0 auto; }
.pc-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 6px; }
.pc-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
  font-size: 38px; font-weight: 700; color: rgba(255, 255, 255, .72);
}
.pc-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-name {
  max-width: 100%;
  font-size: 18px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-ig {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  text-decoration: none;
}
.pc-ig.hidden { display: none; }
.pc-ig svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pc-note { text-align: center; }

/* min-width:0 是必要的:flex 子元素預設 min-width:auto,
   長名字會把「登出」按鈕擠出彈窗外面 */
.auth-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.auth-name {
  font-weight: 700; font-size: 15px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-points { font-size: 12px; color: #e8be6a; font-weight: 600; }

.auth-ig { margin-top: 12px; }
.ig-row { display: flex; gap: 8px; }
.ig-row .text-input { flex: 1; min-width: 0; }

.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
  flex: none;
  white-space: nowrap;
}

.btn:disabled { opacity: .42; pointer-events: none; }

/* 真人大頭貼疊在字母頭像上面。載入失敗時 img 會被移除,
   底下的 SVG 字母頭像就自然露出來 —— 不會出現破圖 */
.seat .avatar { position: relative; overflow: hidden; }
.seat .seat-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ───────── 補碼面板 ───────── */
.rebuy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 4px;
  text-align: center;
}
.rebuy.hidden { display: none; }

/* 3D 骰子。app.js 的 buildDie 產生六個面,showDieFace 轉到指定那一面。
   transform 最前面固定斜一個角度(在 app.js),永遠看得到三個面 —— 停下來也是立體的 */
.rebuy-die {
  --die: 64px;
  width: var(--die); height: var(--die);
  margin: 6px auto 14px;
  perspective: 420px;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .55));
}
.die-cube {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.2, .8, .25, 1);
}
.die-face, .die-core { position: absolute; inset: 0; border-radius: 28%; }
/* 內核:三個軸向各疊 7 片實心切片,填住六個面圓角轉角露出的縫 —— 沒有它骰子看起來是六張紙拼的。
   圓角 28% 是 Raymond 要的「再圓一點」;更圓(34%)切片就補不滿,轉角會露出缺口 */
.die-core { background: #e7e2d8; }
.die-face {
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 15%;
  background: radial-gradient(120% 120% at 30% 20%, #fffefb 0%, #f4f0e8 45%, #e2dccf 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -3px 6px rgba(120,100,70,.18), inset 0 3px 4px rgba(255,255,255,.9);
  backface-visibility: hidden;
}
.die-face span { display: grid; place-items: center; }
/* 點數是刻進去的凹點:內陰影 + 下緣一條亮邊 */
.die-face .pip::before {
  content: ''; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #1a1a20 0%, #2c2c34 55%, #4a4a52 100%);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.85);
}
.die-face.one .pip::before { width: 92%; background: radial-gradient(circle at 50% 35%, #8e0f0f 0%, #c81f1f 60%, #e24a4a 100%); }
.die-front  { transform: translateZ(calc(var(--die) / 2)); }
.die-back   { transform: rotateY(180deg) translateZ(calc(var(--die) / 2)); }
.die-right  { transform: rotateY(90deg)  translateZ(calc(var(--die) / 2)); }
.die-left   { transform: rotateY(-90deg) translateZ(calc(var(--die) / 2)); }
.die-top    { transform: rotateX(90deg)  translateZ(calc(var(--die) / 2)); }
.die-bottom { transform: rotateX(-90deg) translateZ(calc(var(--die) / 2)); }

.rebuy-msg {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}

/* 沒有骰子可擲時按鈕要看得出來按不了 */
.rebuy .btn:disabled { opacity: .38; pointer-events: none; }
.rebuy .btn-sm { width: 100%; }

/* ───────── 短提示 ─────────
   style.css 的舊版把它貼在底部(bottom: 2px)。這裡改到頂部時一定要把 bottom 取消,
   否則 top + bottom 同時成立,提示框會從上撐到下,變成蓋住整張牌桌的深色長條
   (Raymond 回報:剛進牌局出現「不知道是什麼」的大黑框,就是「帶了 X 上桌」這則提示)。 */
.term-toast {
  position: absolute;
  /* 放在牌桌正下方、蓋在「輪到你了」那行訊息上(2.6 秒)。
     放頂部會擋到荷官的臉,放舞台底部會壓到自己的名牌(實測 375 寬) */
  top: calc(100% + 4px); bottom: auto; left: 50%;
  height: auto;
  transform: translate(-50%, -8px);
  z-index: 40;
  max-width: 84%;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(18, 13, 24, .93);
  border: 1px solid rgba(232, 190, 106, .3);
  color: #f2e9dd;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: opacity .22s ease-out, transform .22s ease-out;
  pointer-events: none;
}
.term-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .die-cube { transition-duration: 0ms !important; }
  .term-toast { transition: none; }
}

/* 音效開關:兩個圖示疊著,靠 class 決定顯示哪一個 */
#btnSound .ico-off { display: none; }
#btnSound.muted .ico-on { display: none; }
#btnSound.muted .ico-off { display: block; }
#btnSound.muted { opacity: .55; }

/* ───────── 買入面板 ───────── */
.buyin {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 6px;
  text-align: center;
}
.buyin.hidden { display: none; }

.buyin-bank { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .6); }
.buyin-bank b { color: #e8be6a; font-size: 16px; font-weight: 800; }
.buyin-msg { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .78); font-weight: 600; }

.buyin-presets { display: flex; gap: 8px; justify-content: center; }
.chip-preset {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #f2e9dd;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.chip-preset:active { background: rgba(232, 190, 106, .22); }

.buyin-slide { display: flex; align-items: center; gap: 12px; }
.buyin-slide input[type=range] { flex: 1; min-width: 0; }
.buyin-amt {
  flex: none;
  min-width: 68px;
  text-align: right;
  font-size: 17px;
  font-weight: 800;
  color: #e8be6a;
  font-variant-numeric: tabular-nums;
}
.buyin .field-note { margin: 0; }

/* ───────── 每日任務 ───────── */
.mission-bank {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  text-align: center;
}
.mission-bank b { color: #e8be6a; font-size: 16px; font-weight: 800; }

.mission-list { display: flex; flex-direction: column; gap: 9px; }

.mission {
  padding: 12px 13px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}
.mission.done { border-color: rgba(232, 190, 106, .4); background: rgba(232, 190, 106, .09); }
.mission.claimed { opacity: .48; }

/* min-width:0 是必要的:flex 子元素預設 min-width:auto,
   長任務名稱會把領獎按鈕擠出面板外 */
.mission-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mission-label { flex: 1 1 100%; min-width: 0; font-size: 14px; font-weight: 600; color: #f2e9dd; }

.mission-bar {
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.mission-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c9a24a, #e8be6a);
  transition: width .3s ease-out;
}
.mission-prog {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .62);
  font-variant-numeric: tabular-nums;
}
.mission-info .btn { flex: none; min-width: 62px; }

.mission-ref { margin-top: 18px; }
.mission-ref .field-note { margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) { .mission-bar span { transition: none; } }

/* ───────── 排行榜 ───────── */
.board-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
}
.board-tab {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, .58);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s ease-out, color .18s ease-out;
}
.board-tab.active { background: rgba(232, 190, 106, .16); color: #e8be6a; }

.board-list { display: flex; flex-direction: column; gap: 6px; }

.board-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .04);
}
/* 自己那一列要一眼認得出來 —— 排行榜看的第一件事就是「我在哪」 */
.board-row.me {
  background: rgba(232, 190, 106, .13);
  border: 1px solid rgba(232, 190, 106, .34);
}

.board-rank {
  flex: none;
  width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 255, 255, .5);
}
.board-rank.top { color: var(--brass-300); font-size: 16px; }

.board-avatar {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .72);
}
.board-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* min-width:0 讓長名字截斷而不是把數字擠出去 */
.board-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #f2e9dd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-val {
  flex: none;
  font-size: 14px;
  font-weight: 800;
  color: #e8be6a;
  font-variant-numeric: tabular-nums;
}
.board-val.up { color: #5fc98a; }
.board-val.down { color: #d9736b; }

@media (prefers-reduced-motion: reduce) { .board-tab { transition: none; } }

/* ───────── 層級 ─────────
   排行榜與任務的入口在「加入牌局」的彈窗裡,所以它們必須疊在
   彈窗**之上**,否則從那裡點開會被蓋住、看起來像沒反應。

   但斷線提示要永遠在最上面 —— 連線斷了的時候,任何面板都不該
   擋住「重新加入」那顆按鈕。 */
/* **所有** sheet 都要疊在彈窗之上,不是逐個列 ID。

   原本寫 `#boardSheet, #missionSheet { z-index: 110 }` —— 那是逐個補的
   修法,結果每新增一個面板(版位、買籌碼)就再中一次同樣的 bug:
   從加入彈窗點開,面板在彈窗後面,看起來像按了沒反應。

   sheet 本來就是「開在最上層的面板」,90 那個值是當初只有聊天與
   房間設定、而且只在牌局中開啟時定的。現在條件變了,規則就該跟著變。 */
.sheet { z-index: 110; }

/* 斷線提示永遠最上層 —— 連線斷掉時,任何面板都不該擋住「重新加入」。 */
#downOverlay { z-index: 120; }

/* ───────── 贊助商版位:牌桌上的呈現 ─────────
   三個位置的曝光度差很多,價格也照這個排 —— 中央每一手都在視線裡,
   地毯在桌外只有餘光掃到。定價反映的就是這個差距。 */
.ad-slot {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  max-width: 76%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 位置是量出來的,不是猜的。在 375px 直式下,牌桌內部只有兩段是空的:
   0–11%(荷官下方)與 64–75%(階段標籤與下排座位之間)。
   公牌 30–41%、底池 44–58%、上排座位 11–28%、下排座位 75–101% 全都佔著。
   我第一版把三個版位全放在被佔用的區域,結果三個字全部疊在一起看不懂。 */

/* 中央:階段標籤與下排座位之間。最貴的位置,每一手都在視線裡 */
.ad-center {
  left: 50%; top: 68%;
  transform: translateX(-50%);
  font-size: 12px;
  color: rgba(255, 255, 255, .46);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
/* 桌邊:牌桌最上緣,荷官下方 */
.ad-rail {
  left: 50%; top: 3.5%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(255, 255, 255, .32);
  letter-spacing: .12em;
}
/* 地毯:桌子**外面**的地板,直排貼在左緣。
   直排只需要十幾 px 寬,牌桌變大把邊距壓縮了也不會被擠掉 —— 
   橫排的話一旦邊距變窄就會被裁掉。 */
.ad-carpet {
  left: 3px; top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  max-height: 60%;
  max-width: none;
  font-size: 9px;
  color: rgba(255, 255, 255, .2);
  letter-spacing: .22em;
}

/* ───────── 買版位的面板 ───────── */
.ad-bank { margin: 0 0 14px; font-size: 13px; color: rgba(255, 255, 255, .6); text-align: center; }
.ad-bank b { color: #e8be6a; font-size: 16px; font-weight: 800; }

.ad-list { display: flex; flex-direction: column; gap: 9px; }
.ad-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}
.ad-row.taken { opacity: .5; }
/* min-width:0 讓長文字截斷而不是把按鈕推出面板 */
.ad-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ad-name { font-size: 14px; font-weight: 700; color: #f2e9dd; }
.ad-meta {
  font-size: 12px; color: rgba(255, 255, 255, .55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-row .btn { flex: none; min-width: 72px; }
.ad-form { margin-top: 18px; }
.ad-form .text-input { width: 100%; margin-bottom: 8px; }

/* ───────── 洗牌驗證 ───────── */
.fair-intro {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}
.fair-intro strong { color: #e8be6a; font-weight: 700; }

.fair-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fair-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(95, 201, 138, .1);
  border: 1px solid rgba(95, 201, 138, .28);
  font-size: 13px;
  color: #f2e9dd;
}
/* 對不上是嚴重的事,視覺上要立刻分得出來 */
.fair-row.bad { background: rgba(217, 115, 107, .14); border-color: rgba(217, 115, 107, .45); }
.fair-row.unknown { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }

.fair-verdict { font-weight: 700; color: #5fc98a; white-space: nowrap; }
.fair-row.bad .fair-verdict { color: #d9736b; }
.fair-row.unknown .fair-verdict { color: rgba(255, 255, 255, .5); }

#fairSheet { z-index: 110; }

/* Apple 登入按鈕。Apple 的品牌規範要求黑底白字,不要自己配色 */
.apple-btn {
  margin-top: 8px;
  background: #000;
  color: #fff;
  border-color: #000;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  min-height: 44px;      /* 觸控目標最小尺寸 */
}
#appleButton.hidden, #appleNote.hidden { display: none; }
#appleNote { margin-top: 8px; text-align: center; }

/* ═══════════════════════════════════════════════════════════
   加入牌局頁的按鈕系統
   ═══════════════════════════════════════════════════════════
   牌桌上的 .btn 是刻意做成實體按鈕的(頂緣高光、側面厚度、落地陰影)——
   那對「蓋牌/跟注/加注」是對的,那些動作就該有手感。

   但這一頁是**表單**,不是牌桌。同一套處理搬過來,就跟扁平的輸入框
   和 Google 的 widget 打架:三種圓角、兩種寬度、兩種對齊。

   所以這裡另立一套:扁平、統一 14px 圓角、統一 54px 高、滿寬。
   一個重點色(黃銅金)說話,其餘交給中性色。 */

.modal .btn-lg.btn-block,
.oauth-slot {
  min-height: 54px;
  border-radius: 14px;
  width: 100%;
}

/* 主要動作:實色黃銅,不是漸層立體。
   拿掉側面厚度與頂緣高光 —— 那是牌桌的語言,不是表單的。 */
.modal .btn-primary.btn-lg {
  background: linear-gradient(180deg, #e0bd72, #c9a24a);
  color: #1a1420;
  text-shadow: none;
  border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px -6px rgba(201,162,74,.55);
}
.modal .btn-primary.btn-lg:hover:not(:disabled) { filter: brightness(1.06); }
.modal .btn-primary.btn-lg:active:not(:disabled) { transform: translateY(1px); filter: brightness(.96); }

/* 次要動作:透明底 + 一道細邊。
   原本是深灰實色,跟深灰的輸入框幾乎同色 —— 看起來像第三個輸入框。 */
.modal #btnJoin {
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
  color: #f2e9dd;
  text-shadow: none;
}
.modal #btnJoin:hover:not(:disabled) {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.26);
  filter: none;
}
.modal #btnJoin:active:not(:disabled) { transform: translateY(1px); }

/* ───────── Google 登入 ─────────
   Google 的 widget 樣式不可控(藥丸圓角、260px 固定寬、內縮不對齊)。
   做法:自己畫一顆符合品牌規範的按鈕(G logo + 核可文案),
   把 Google 真正的按鈕透明疊在上面。

   視覺完全一致,而**點擊的仍然是 Google 的按鈕** ——
   不是自己呼叫 API 假裝,流程與規範都沒有繞過。 */
.oauth-slot {
  position: relative;
  overflow: hidden;          /* 覆蓋層放大後不要溢出去蓋到別的元素 */
  margin-top: 2px;
}

.oauth-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: inherit;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.16);
  color: #f2e9dd;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .18s ease-out, border-color .18s ease-out;
}
.oauth-logo { flex: none; display: block; }

/* 真正的 Google 按鈕:透明、鋪滿、放大到覆蓋整個點擊區。
   GIS 的按鈕只有 40px 高,不放大的話下緣 14px 點不到。 */
.oauth-real {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oauth-real > div { transform: scale(1.6); }

/* 滑過/按下時,回饋做在自己畫的那一層 */
.oauth-slot:hover .oauth-face {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.26);
}
.oauth-slot:active .oauth-face { transform: translateY(1px); }
/* 鍵盤操作時 Google 的按鈕會拿到焦點,焦點框要畫在看得見的那一層 */
.oauth-real:focus-within + .oauth-face,
.oauth-slot:focus-within .oauth-face {
  outline: 2px solid var(--brass-300, #d9b96f);
  outline-offset: 2px;
}

/* 備援登入的出口。

   刻意做得低調 —— 它是「出事的時候」的路,不該跟主要按鈕搶。
   但也不能藏:做成連結的樣子、放在按鈕正下方、隨時看得到。
   點擊區仍然給滿 44px 高,手機上要按得到。 */
.oauth-alt {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.oauth-alt-btn {
  background: none;
  border: none;
  padding: 10px 8px;
  min-height: 44px;
  color: rgba(255,255,255,.5);
  font-size: 13px;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .18s ease-out;
}
.oauth-alt-btn:hover:not(:disabled) { color: rgba(255,255,255,.8); }
.oauth-alt-btn:focus-visible {
  outline: 2px solid var(--brass-300, #d9b96f);
  outline-offset: 2px;
  border-radius: 8px;
}
.oauth-alt-btn:disabled { opacity: .6; cursor: default; }

/* 出問題時的說明。用琥珀色而不是紅色 ——
   這多半不是使用者做錯了什麼,是環境擋住了。 */
.auth-fallback {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(217,185,111,.09);
  border: 1px solid rgba(217,185,111,.28);
}
.auth-trouble {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #e8d5a8;
}

/* 登入區不再是一個灰盒子。
   盒子讓它看起來像後來補上的附件,而不是流程的第一步 —— 
   改用一道細分隔線收尾就夠。 */
.auth-box {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  /* 一定要歸零 —— 舊規則的 16px 圓角配上只剩底邊的 border,
     會畫出一道兩端上翹的弧線,看起來像個沒關好的空盒子。 */
  border-radius: 0;
  padding: 0 0 20px;
  margin-bottom: 20px;
}
.auth-why {
  margin-bottom: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}

@media (prefers-reduced-motion: reduce) {
  .oauth-face { transition: none; }
}

/* ───────── 登入後的身分區 ─────────
   四顆按鈕跟身分資訊擠在同一排,在 320px 下名字與本金會被壓成 0px ——
   最重要的東西(你有多少錢)反而是第一個被犧牲的。改成兩排。 */
.auth-signedin { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.auth-signedin.hidden { display: none; }

.auth-id { display: flex; align-items: center; gap: 11px; }

.auth-signout {
  flex: none;
  padding: 6px 10px;
  border: none;
  background: none;
  color: rgba(255,255,255,.42);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-signout:hover { color: rgba(255,255,255,.7); }

/* 三等分。grid 而不是 flex —— 三顆按鈕要等寬,
   文字長度不同時 flex 會給出三種寬度。 */
/* 四顆按鈕(買籌碼/版位/排行/任務)。等寬用 grid 不用 flex ——
   文字長度不同時 flex 會給出四種寬度。 */
.auth-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.auth-actions .btn { font-size: 12px; padding-left: 4px; padding-right: 4px; }
.auth-actions .btn {
  width: 100%;
  min-height: 40px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
  text-shadow: none;
  color: #f2e9dd;
}
.auth-actions .btn:hover:not(:disabled) {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.24);
  filter: none;
}

/* IG 的「儲存」還留著牌桌用的立體樣式,在一片扁平裡特別突兀。
   統一成跟其他次要動作一樣的描邊風格。 */
.modal #btnSaveIg {
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
  text-shadow: none;
  color: #f2e9dd;
  border-radius: 12px;
}
.modal #btnSaveIg:hover:not(:disabled) {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.24);
  filter: none;
}
.modal #btnSaveIg:active:not(:disabled) { transform: translateY(1px); }

/* 法律頁面的連結。放在加入牌局彈窗的最下面 ——
   金流商審核會找這些連結,而玩家在付費前本來就該看得到。 */
.legal-links {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}
.legal-links a {
  color: rgba(255, 255, 255, .38);
  text-decoration: none;
  padding: 6px 8px;
  display: inline-block;
}
.legal-links a:hover { color: rgba(232, 190, 106, .85); text-decoration: underline; }

/* ───────── 緊湊座位:直式桌坐滿 7 人 ─────────
   跟 render.js 的 PORTRAIT_7 座位表是一組的,缺一個就會疊成一團。
   這是**結構**不是外觀,所以放在這裡而不是 skin.css。

   一般座位是直向堆疊:下注籌碼 → 兩張牌 → 名牌 → 動作標籤,整個約 100px 高。
   直式桌中段被公牌和底池佔走,7 個人只剩公牌上方和下方兩條窄帶可以坐,
   100px 高的座位放不進去。所以對手改成:

     · 牌背縮到 20px,下半截夾在名牌後面(只露出 12px)。
       對手的牌背本來就沒有資訊量 —— 要看清楚的是公牌和自己的手牌,那兩個不縮。
     · 下注只留金額膠囊、不畫籌碼堆,而且掛在名牌靠桌心的那一側,不佔垂直空間。
     · **攤牌亮牌時放大回來** —— 20px 的牌點數只有 7px,看不清楚誰贏了什麼。

   自己的座位完全不變。 */
.table.crowded .seat:not(.is-human) { gap: 0; }
.table.crowded .seat:not(.is-human) .hole {
  --card-w-sm: 20px;
  min-height: 0;
  gap: 2px;
}
/* 牌的下半截塞到名牌後面。**只有真的有牌時才這樣做** —— 沒發到牌的座位
   (牌局中途入座、籌碼 0)套上負邊距的話,被拉上去蓋住的是動作標籤
   (實測「離座」兩個字被名牌蓋掉一半)。 */
.table.crowded .seat:not(.is-human) .hole:has(.card) { margin-bottom: -16px; }
.table.crowded .seat.pos-top:not(.is-human) .hole:has(.card) { margin-bottom: 0; margin-top: -16px; }
.table.crowded .seat:not(.is-human) .plaque { position: relative; z-index: 1; }
.table.crowded .seat:not(.is-human) .action-tag { margin-top: 2px; position: relative; z-index: 1; }
.table.crowded .seat.pos-top:not(.is-human) .action-tag { margin-top: 0; margin-bottom: 2px; }

/* 亮牌:放大、浮到最上層、不再夾在名牌後面 */
.table.crowded .seat:not(.is-human) .hole:has(.card:not(.back)) {
  --card-w-sm: 30px;
  margin: 0 0 2px;
  position: relative;
  z-index: 6;
}
.table.crowded .seat.pos-top:not(.is-human) .hole:has(.card:not(.back)) { margin: 2px 0 0; }

/* 下注:只留金額,掛在靠桌心那一側 */
.table.crowded .seat:not(.is-human) .bet {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.table.crowded .seat.side-l:not(.is-human) .bet { left: calc(100% + 3px); }
.table.crowded .seat.side-r:not(.is-human) .bet { right: calc(100% + 3px); }
.table.crowded .seat:not(.is-human) .bet .chip-col { display: none; }

/* 公牌正上方那兩席:動作標籤往上掛。
   掛在名牌下面的話會落進公牌那一排(翻牌前那一排是空框,實測疊 366 px²)。 */
.table.crowded .seat.tag-up:not(.is-human) .action-tag { order: -1; margin: 0 0 2px; }
/* 局數標籤收窄一點,讓出兩側下注金額的位置 */
.table.crowded .stage-label.below { max-width: 80px; }
/* 下注金額膠囊的位置(緊湊模式),用最壞情況量過:每席四位數下注 + 最長的動作標籤。
   · 下方兩側的座位:往桌心那一側正好是底池框和局數標籤的高度,沒有空間。
     改放在座位正上方 —— 那裡是公牌和座位之間的空帶,讀起來也像「把籌碼推出去」。
   · 上方兩席:兩邊的膠囊往中間長,四位數時會在正中間碰頭。膠囊收窄一點就錯開了。 */
.table.crowded .seat:not(.is-human) .bet .chip-amt { padding: 1px 4px; font-size: 9.5px; }
.table.crowded .seat:not(.is-human):not(.pos-top):not(.tag-up) .bet {
  top: auto;
  bottom: calc(100% + 2px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* ───────── 分享圖示 ─────────
   單色,用遮罩上色 —— 跟著按鈕的文字顏色走(金色鈕上是深色、玻璃鈕上是白色)。
   哪一款由 <html> 上的平台 class 決定,見 app.js 開頭。 */
.share-ico {
  display: inline-block;
  flex: none;
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: var(--share) center / contain no-repeat;
          mask: var(--share) center / contain no-repeat;
  --share: url("/icons/share-android.svg");
}
.plat-apple .share-ico {
  --share: url("/icons/share-ios.svg");
  /* iOS 的圖示是「箭頭穿出方框」,視覺重心偏上,往上提一點才會跟文字對齊 */
  transform: translateY(-1px);
}
.btn:has(> .share-ico) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-block:has(> .share-ico) { display: flex; }

/* 房間設定裡只有圖示的分享鈕:正方形,跟旁邊的「複製」等高 */
.invite-row .btn-share-only { padding: 0; width: 48px; }
.invite-row .btn-share-only .share-ico { width: 20px; height: 20px; }

/* ───────── 刪除帳號 ─────────
   入口是低調的文字連結(不跟買籌碼、任務搶位置),
   面板裡的按鈕才是明確的紅色 —— 危險的動作要長得危險,但只在你決定要做的那一步。 */
.auth-delete {
  display: block;
  margin: 10px auto 0;
  padding: 10px 8px;
  min-height: 44px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12px;
  color: var(--ink-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.auth-delete:hover { color: #ff9d96; }
.auth-delete:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 2px; border-radius: 6px; }

.delete-body { overflow-y: auto; }
.delete-lead { color: var(--ink-50); line-height: 1.6; margin-bottom: 8px; }
.delete-lead strong { color: #ff9d96; }
.delete-points { color: var(--brass-300); font-weight: 600; margin-bottom: 16px; }
.delete-sub { font-size: 12px; color: var(--ink-400); letter-spacing: .04em; margin: 12px 0 4px; }
.delete-list { margin: 0 0 4px; padding-left: 1.2em; color: var(--ink-100); font-size: 13px; line-height: 1.7; }

.delete-consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 18px 0 12px; padding: 12px;
  border: 1px solid rgba(225,6,0,.35); border-radius: 8px;
  background: rgba(225,6,0,.08);
  font-size: 13px; line-height: 1.55; color: var(--ink-100);
  cursor: pointer;
}
.delete-consent input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: #E10600; }

.delete-error {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(237,180,11,.1); border: 1px solid rgba(237,180,11,.35);
  color: #f3dfa6; font-size: 13px; line-height: 1.55;
}

/* .btn.btn-danger 而不是 .btn-danger:skin.css 最後載入,它的 .btn 會把同權重的
   背景色蓋成灰色玻璃 —— 實測刪除鈕變成跟一般按鈕一樣的灰色。
   危險的按鈕長得不危險,比沒有顏色更糟。 */
.btn.btn-danger { background: #c8102e; color: #fff; border: 1px solid #c8102e; min-height: 52px; }
.btn.btn-danger:hover:not(:disabled) { background: #e01536; }
.btn.btn-danger:disabled { opacity: .35; cursor: not-allowed; }

/* ───────── iPhone 自動放大 ─────────
   iOS Safari 只要點到字級小於 16px 的輸入框,就會自動把整頁放大,
   而且打完字**不會縮回來** —— 玩家得自己用兩指縮小(Raymond 回報「手機版莫名大一點」)。
   原本輸入框是 13px。觸控裝置上一律 16px,就不會觸發放大。
   不用 maximum-scale=1 鎖縮放:那會連玩家自己想放大看牌都一起禁掉。 */
@media (max-width: 759px), (pointer: coarse) {
  input:not([type]), input[type="text"], input[type="search"], input[type="email"],
  input[type="number"], input[type="tel"], input[type="url"], input[type="password"],
  textarea, select, .text-input {
    font-size: 16px;
  }
}

/* ───────── 房間設定:不要擠 ─────────
   Raymond 回報設定頁太擠:欄位之間只有 16px、內容貼著捲軸、牌背兩排佔掉一大塊。
   - 欄位間距加大,每個欄位之間畫一條細線分段
   - 右側留白,內容不再貼著捲軸;捲軸改成細的深色(原本是一條白色的軌道)
   - 牌背只剩四種 → 排成一列 */
.settings {
  gap: 0;
  padding-right: 10px;
  margin-right: -4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.settings::-webkit-scrollbar { width: 6px; }
.settings::-webkit-scrollbar-track { background: transparent; }
.settings::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.settings > .field { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.07); gap: 10px; }
.settings > .field:first-child { padding-top: 4px; border-top: 0; }
.settings .field-note { line-height: 1.6; }
.settings .back-picker { grid-template-columns: repeat(5, 1fr); }
.settings .back-opt { padding: 10px 4px 8px; gap: 6px; }

/* 進場畫面的品牌標:LOGO + Deal with Ray 字樣(字樣是 Akzidenz-Grotesk BQ Condensed A 轉成的 SVG 外框,
   不是網頁字體 —— 字體授權只允許做成圖,不能把字體檔放上網站) */
.join-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 10px; }
.join-brand-mark { height: 40px; width: auto; }
.join-brand-word { height: 22px; width: auto; }

/* 3D 骰子(dice3d.js)載入後,WebGL 畫布蓋在原位,CSS 骰子藏起來。
   畫布比骰子大 1.7 倍(翻滾時不被切到),用負邊距置中,不改變面板高度 */
.rebuy-die { position: relative; }
.rebuy-die.gl .die-cube { visibility: hidden; }
.rebuy-die .die-gl {
  position: absolute; left: 50%; top: 50%;
  width: 170% !important; height: 170% !important;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.rebuy-die.gl { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45)); }

/* ───────── 換桌鈕(牌桌左下,跟右邊的表情鈕對稱) ─────────
   .controls 是定位基準(見 .emote-btn)。排隊中(這手打完才換)改成金框提示 */
.switch-btn {
  position: absolute;
  left: var(--sp-3);
  top: -46px;
  height: 44px;
  padding: 0 12px 0 10px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--hair, rgba(255,255,255,.1));
  color: #fff;
  font: 700 13px/1 var(--font-ui);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.switch-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.switch-btn:hover { background: rgba(255,255,255,.16); }
.switch-btn:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 2px; }
.switch-btn:disabled { opacity: .5; }
.switch-btn.pending { border-color: var(--brass-400); color: var(--brass-200); }

/* ───────── 大廳:公開桌三個等級 ───────── */
.public-tables { margin: 0 0 14px; }
.public-tier-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.public-tier-row.two { grid-template-columns: repeat(2, 1fr); }   /* 全押或棄牌只有兩個等級 */

/* 名牌上的預備金(全押或棄牌桌,只有自己的座位)。比籌碼小一號、不用金色 ——
   金色只給「桌上的錢」,預備金這一手還用不到 */
.plaque .reserve {
  font-size: var(--t-3xs); font-weight: 600; line-height: 1.2;
  color: var(--ink-400); white-space: nowrap;
}
.plaque .reserve.hidden { display: none; }
.tier-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; min-height: 56px;
}
.tier-btn b { font: 800 16px/1.1 system-ui, -apple-system, sans-serif; letter-spacing: -.01em; }
.tier-btn small { font-size: 11px; opacity: .7; font-weight: 600; }

/* ───────── 打賞荷官 ───────── */
.gift-amts { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; width: 100%; }
.gift-amts .gift-amt { min-height: 44px; font-variant-numeric: tabular-nums; font-family: system-ui, sans-serif; }
.gift-amts .gift-amt[data-armed="1"] { border-color: var(--brass-400); color: var(--brass-200); }
.gift-note { text-align: center; margin-top: 8px; }
/* 荷官可以點(打賞)。原本是 pointer-events:none,只是一張圖 */
.dealer-figure { pointer-events: auto; cursor: pointer; }
.rebuy-die.hidden { display: none; }

/* ───────── 電腦版:名牌在桌緣外(.table.ring)─────────
   app.js 在夠大的桌機視窗(≥1024×640)掛上 .ring,並替每個座位算出名牌往外推的位移(--ox / --oy)。
   名牌脫離座位的直排(position:absolute),座位本身只剩手牌、下注與動作標籤,留在桌內。
   名牌搬出去之後桌面空出來,牌與頭像跟著放大。

   兩個比例(app.js 算):
     --ring-s 視窗大小(1440×900 = 1)→ 只管桌子四周的留白
     --ring-c 桌子實際高度(512px = 1)→ 牌、頭像、名牌、字
   牌要跟著「桌子」縮,不能跟著視窗:下方買入面板一出現桌子就被壓扁,
   牌照視窗大小畫的話會疊成一團(實測過)。
   比 1024×640 小的桌機視窗不用這套,退回原本整個座位在桌內的排法。 */
@media (min-width: 1024px) and (min-height: 640px) {
  /* 上下各一個名牌高、左右各一個名牌寬,再多留一點 —— 名牌就放在這一圈裡。
     只在 app.js 判斷「放得下」時才掛 .ringed(見 layoutSeats) */
  .stage.ringed { padding: calc(88px * var(--ring-s, 1)) calc(235px * var(--ring-s, 1)) calc(118px * var(--ring-s, 1)); }
  .table.ring {
    --avatar: calc(64px * var(--ring-c, 1));
    --card-w: calc(76px * var(--ring-c, 1));
    --card-w-sm: calc(54px * var(--ring-c, 1));
    --ring-plaque-w: calc(190px * var(--ring-c, 1));
    --seat-w: calc(132px * var(--ring-c, 1));     /* 座位本身(手牌那一欄)也跟著桌子縮 */
  }
  /* 底池與局數說明也跟著縮 —— 桌子被壓小時它們不縮,就會變成桌心的大障礙(公牌已經用 --card-w 縮了) */
  .table.ring .pot-row, .table.ring .stage-label { scale: min(1, var(--ring-c, 1)); }
  .table.ring .seat .plaque {
    position: absolute;
    left: 50%; top: 50%;
    width: var(--ring-plaque-w);
    transform: translate(calc(-50% + var(--ox, 0px)), calc(-50% + var(--oy, 0px)));
    padding: calc(6px * var(--ring-c, 1)) calc(10px * var(--ring-c, 1)) calc(6px * var(--ring-c, 1)) calc(6px * var(--ring-c, 1));
    gap: calc(10px * var(--ring-c, 1));
    z-index: 2;
  }
  /* 自己的手牌要最大。skin.css 為了舊的擠法把桌機自己的牌壓在 42px,名牌搬出去之後不需要了 */
  .table.ring .seat.is-human .hole { --card-w-sm: calc(70px * var(--ring-c, 1)); gap: 4px; }
  /* 自己的下注放在手牌右邊,不是上面 —— 上面是底池與局數說明,中小視窗會撞到 */
  .table.ring .seat.is-human .bet {
    position: absolute;
    left: calc(50% + 70px * var(--ring-c, 1) + 10px);
    top: calc(50% - 18px);
    translate: 0 -50%;
    transform-origin: left center;
  }
  /* 下注(籌碼堆與金額)跟著桌子縮。桌子被下方面板壓小時,相鄰座位的五位數下注才不會互碰 */
  .table.ring .seat .bet { scale: min(1, var(--ring-c, 1)); }
  .table.ring .seat .pname { font-size: calc(15px * var(--ring-c, 1)); }
  .table.ring .seat .chips { font-size: calc(17px * var(--ring-c, 1)); }
}

/* ───────── 裝到主畫面 ───────── */
.install-row { margin-top: var(--sp-3); text-align: center; font-size: var(--t-xs); }
.install-row.hidden { display: none; }
.install-row .auth-link { margin: 0; }
.install-modal h2 { margin-bottom: var(--sp-4); }
.install-steps {
  margin: 0 0 var(--sp-6);
  padding-left: 1.4em;
  text-align: left;
  color: var(--ink-100);
  line-height: 1.7;
}
.install-steps li + li { margin-top: var(--sp-2); }
/* 分享圖示夾在句子裡,跟文字同高 */
.install-steps .share-ico { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.install-warn {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(237,180,11,.1);
  border: 1px solid rgba(237,180,11,.3);
  color: var(--brass-200);
  text-align: left;
  font-size: var(--t-xs);
  line-height: 1.6;
}
.install-warn.hidden { display: none; }

/* 全螢幕的遮罩(大廳、斷線、裝到主畫面)要讓開瀏海和底部的 Home 條。
   瀏覽器裡這兩個值是 0,不影響;在 APP 和主畫面版裡,內容會畫到螢幕最上緣,
   不加的話大廳卡片的頂端會被動態島蓋住。 */
.overlay {
  padding-top: max(var(--sp-5), env(safe-area-inset-top));
  padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
}

/* ───────── 玩家卡片:封鎖 / 檢舉 ───────── */
/* 卡片內容是置中收縮的直排,這兩塊要撐滿寬度才按得到 */
.pc-safety, .pc-report { align-self: stretch; width: 100%; }
.pc-safety { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-4); }
.pc-safety .btn { width: 100%; }
.pc-safety.hidden, .pc-report.hidden { display: none; }
.pc-report { margin-top: var(--sp-4); text-align: left; }
.pc-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-2) 0; }
.pc-reasons .btn { padding: 6px 12px; min-height: 36px; font-size: var(--t-xs); }
.pc-reasons .btn.on { border-color: var(--brass-400); color: var(--brass-200); background: rgba(237,180,11,.12); }
.pc-report textarea { width: 100%; margin-bottom: var(--sp-2); resize: none; }

/* 手機:自己的動作標籤(大盲、跟注 20…)放在名牌右側,不掛在名牌下面。
   自己的座位貼著牌桌底部,標籤往下長會超出舞台,壓到下面「等 ○○ 行動…」那行字
   (教練列出現、舞台變矮時最明顯)。名牌右邊是空的絨面,放那裡不佔垂直空間。 */
@media (max-width: 759px) {
  .table:not(.ring) .seat.is-human .action-tag {
    position: absolute;
    left: calc(100% + 6px);
    bottom: 13px;
    max-width: none;
  }
}

/* 大廳底部的語言選單(public/i18n.js 填選項)。跟法律連結同一個安靜的層級,但要點得到:44px 高 */
.lang-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 4px 0 0;
}
.lang-ico { width: 16px; height: 16px; fill: none; stroke: rgba(232, 190, 106, .6); stroke-width: 1.6; }
.lang-select {
  min-height: 44px; padding: 0 28px 0 10px;
  font: inherit; font-size: 13px; color: rgba(255, 255, 255, .7);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8be6a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 8px center / 10px 7px;
  border: 0; border-radius: 8px;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.lang-select:focus-visible { outline: 2px solid rgba(232, 190, 106, .8); outline-offset: 2px; }
.lang-select option { color: #111; }