/* ============================================================
   德州撲克 — 手機直式優先（mobile-first）
   方向：minimal-luxury / 私人牌室（salon privé）
   意象：沉穩 · 精緻 · 專注
   單一 accent：黃銅。籌碼色是功能性訊息,不算 accent。
   ============================================================ */

:root {
  /* 全站黑體。Inter 負責拉丁字與數字(tabular-nums 好看),
     Noto Sans TC 負責中文 — 兩者搭成一套,不是兩種風格 */
  --font-display: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-ui: "Inter", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;

  --t-3xs: 0.625rem;
  --t-2xs: 0.6875rem;
  --t-xs:  0.75rem;
  --t-sm:  0.8125rem;
  --t-base:0.875rem;
  --t-md:  1rem;
  --t-lg:  1.25rem;
  --t-xl:  1.5rem;
  --t-2xl: clamp(1.5rem, 7vw, 2.25rem);

  /* 黃銅 ramp — 唯一 accent */
  --brass-100: #f4e8cc;
  --brass-200: #e8d3a0;
  --brass-300: #d9b972;
  --brass-400: #c9a052;
  --brass-500: #b8883c;
  --brass-600: #9a6d2e;
  --brass-700: #7a5424;

  /* 絨面 ramp — 明亮翡翠綠。桌子必須是畫面裡最亮的實體,才有「被燈打亮」的存在感 */
  --felt-900: #05392a;
  --felt-800: #076445;
  --felt-700: #08805a;
  --felt-600: #0b9468;
  --felt-500: #12a877;
  --felt-400: #1fbb87;   /* 光斑中心 */

  /* 護欄:近黑軟墊(vinyl),不是棕色皮革 */
  --rail-900: #0a0d0e;
  --rail-800: #14191b;
  --rail-700: #1e2528;
  --rail-600: #2b3438;

  /* 環境:紫色調的房間,不是純黑虛空 */
  --room-900: #150f1d;
  --room-800: #241933;
  --room-700: #362545;
  --room-600: #48335c;

  /* 護欄寬度:太細沒份量,太粗吃掉檯面 */
  --rail-w: clamp(17px, 7%, 30px);

  /* 暖中性色 */
  --ink-50:  #f7f5f1;
  --ink-100: #e6e2db;
  --ink-200: #cbc6bd;
  --ink-400: #928d84;
  --ink-600: #56524b;
  --ink-800: #262320;
  --ink-900: #17150f;

  /* 語意化行動色。每色三階:亮面 / 主面 / 暗面,用來做按鈕的立體漸層 */
  --fold-lt:  #cf5f56;  --fold:  #a8403a;  --fold-dk:  #6e2622;
  --check-lt: #5b8aa6;  --check: #3d6480;  --check-dk: #26404f;
  --call-lt:  #45a873;  --call:  #2b7d51;  --call-dk:  #175033;
  --raise-lt: #f0cd7c;  --raise: #c9a052;  --raise-dk: #8a6a22;

  --leather-600: #3a2617;
  --leather-700: #241609;

  /* 籌碼:金/銀/銅三族,每族兩階(低額較暗、高額較亮)。
     金屬要用漸層而非平色 — 曲面反光才是「金屬感」的來源 */
  --chip-1:    linear-gradient(145deg, #b8834c 0%, #8a5a28 46%, #5f3a14 100%);  /* 暗銅 */
  --chip-5:    linear-gradient(145deg, #e0a262 0%, #b06f2f 46%, #7c4a19 100%);  /* 亮銅 */
  --chip-25:   linear-gradient(145deg, #b9c0c8 0%, #838b94 46%, #5a616a 100%);  /* 暗銀 */
  --chip-100:  linear-gradient(145deg, #f0f4f8 0%, #aab2bb 46%, #767d86 100%);  /* 亮銀 */
  --chip-500:  linear-gradient(145deg, #d4ab4a 0%, #9d7620 46%, #6b4e10 100%);  /* 暗金 */
  --chip-1000: linear-gradient(145deg, #fbe49c 0%, #d4a838 46%, #8f6a16 100%);  /* 亮金 */

  --chip-edge-warm: rgba(255,236,196,.62);
  --chip-edge-cool: rgba(246,250,255,.7);

  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;

  --r-sm: 5px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  --sh-sm: 0 1px 2px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.18);
  --sh-md: 0 2px 4px rgba(0,0,0,.22), 0 6px 16px rgba(0,0,0,.26);
  --sh-lg: 0 10px 30px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.24);

  /* 手機基準尺寸。桌子改 stadium 後檯面變窄,公牌 5 張的總寬是主要約束 */
  --card-w: 34px;      /* 公牌:5 張 + gap 共 186px */
  --card-w-sm: 27px;   /* 手牌 */
  --seat-w: 104px;     /* 原 80px。頭像放大後名字要有位置,實測 5 人桌名牌互不重疊 */
  --avatar: 40px;      /* 2026-09-19 Raymond:頭像放大 1.5 倍(原 27px) */

  --ease: cubic-bezier(.2,.7,.3,1);
  --dur: 200ms;
}

/* 矮手機(iPhone SE 375×667 這類):40px 頭像會讓上方兩席互疊、下方兩席壓到自己的手牌。
   實測 30px / 82px 名牌:零重疊、名字不截斷。高度 ≥ 761 的手機(375×812)維持 40px / 104px。 */
@media (max-width: 759px) and (max-height: 760px) {
  :root { --avatar: 30px; --seat-w: 82px; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--ink-100);
  /* 紫色房間:桌子是綠的,環境用互補的紫色才推得開,純黑會讓桌子懸在虛空 */
  background:
    radial-gradient(ellipse 75% 45% at 50% 42%, var(--room-600) 0%, transparent 62%),
    radial-gradient(ellipse 120% 70% at 50% 50%, var(--room-800) 0%, var(--room-900) 78%),
    var(--room-900);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  overflow: hidden;
  overscroll-behavior: none;
}

/* 房間的布面織紋:菱格暗紋 + 細顆粒。
   平的紫色漸層讀起來像空白畫布,有織紋才像一個「場所」 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.05'%3E%3Cpath d='M22 1 43 22 22 43 1 22z'/%3E%3Ccircle cx='22' cy='22' r='2.5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 44px 44px, 180px 180px;
}

/* 一屏版面:頂列 / 牌桌 / 控制列,不捲動。
   z-index 讓內容浮在房間織紋之上 */
.app {
  position: relative;
  z-index: 1;
}

/* 一屏版面:頂列 / 牌桌 / 控制列,不捲動 */
.app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- 頂列 ---------- */
.topbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
}

.brand { text-align: center; line-height: 1.15; }

.brand-mark {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 900;          /* 黑體標題靠字重出力量,不靠字級 */
  letter-spacing: .02em;     /* 黑體不需要襯線標題那種鬆散字距 */
  color: var(--ink-50);
}

.brand-sub {
  display: block;
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-400);
  opacity: .85;
}

.icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none;
  border: none;
  border-radius: var(--r-md);
  color: var(--ink-200);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 純圖示看不出功能,補一行小標籤 */
.icon-btn.has-label { gap: 1px; }
.icon-btn.has-label svg { width: 18px; height: 18px; }
.icon-label {
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  color: currentColor;
  opacity: .78;
}
.icon-btn:hover { color: var(--brass-300); background: rgba(255,255,255,.05); }
.icon-btn:focus-visible { outline: 2px solid var(--brass-300); outline-offset: -2px; }

/* ---------- 舞台與牌桌 ---------- */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-2);
}

/* 德州術語提示:短暫出現在牌桌下緣,不擋公牌與座位 */
.term-toast {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  background: linear-gradient(rgba(30,27,22,.96), rgba(18,16,13,.97));
  border: 1px solid rgba(217,185,114,.34);
  box-shadow: var(--sh-lg), 0 0 22px -6px rgba(201,160,82,.5);
  white-space: nowrap;
  pointer-events: none;
  animation: term-in .28s cubic-bezier(.2,1.4,.4,1) 1;
}
.term-toast[hidden] { display: none; }
.term-toast.out { animation: term-out .3s var(--ease) forwards; }

.term-en {
  font-size: var(--t-base);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--brass-200);
}
.term-zh { font-size: var(--t-2xs); color: var(--ink-200); }

@keyframes term-in {
  from { opacity: 0; transform: translate(-50%, 14px) scale(.9); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes term-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, -10px); }
}

/* .table 本身 = 護欄(深色軟墊);::before = 絨面檯面。
   分兩層才能做出「檯面內凹、護欄有厚度」的實體感 —
   單層用 box-shadow spread 疊同心環永遠是扁的。 */
.table {
  position: relative;
  height: 100%;
  /* stadium(跑道形):兩端半圓、中間直線段。真實牌桌約 1:2 */
  aspect-ratio: 1 / 1.85;
  max-width: 100%;
  max-height: 100%;
  border-radius: 999px;
  /* 軟墊的立體感:上方受光、下方背光 */
  background: linear-gradient(180deg, var(--rail-600) 0%, var(--rail-800) 22%, var(--rail-900) 62%, var(--rail-800) 100%);
  box-shadow:
    /* 護欄頂緣的細高光,界定出圓弧的最高點 */
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.7),
    /* 接觸陰影:六層遞進衰減,讓桌子「坐」在房間裡而不是浮著 */
    0 2.8px 2.2px rgba(0,0,0,.05),
    0 6.7px 5.3px rgba(0,0,0,.07),
    0 12.5px 10px rgba(0,0,0,.09),
    0 22.3px 17.9px rgba(0,0,0,.11),
    0 41.8px 33.4px rgba(0,0,0,.13),
    0 100px 80px rgba(0,0,0,.22);
}

/* 絨面檯面 */
.table::before {
  content: "";
  position: absolute;
  inset: var(--rail-w);
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
  /* 頂燈打出的光斑:中心略高於幾何中心,因為燈在桌子上方偏前 */
  background:
    radial-gradient(ellipse 58% 42% at 50% 42%,
      var(--felt-400) 0%, var(--felt-500) 28%, var(--felt-600) 52%,
      var(--felt-700) 76%, var(--felt-800) 100%);
  box-shadow:
    /* 綠光只溢到護欄內緣一圈。blur/spread 放大會把黑色軟墊整個吃掉,
       護欄就消失了 — 要的是「發光的邊」,不是「發光的桌子」 */
    0 0 9px 1px rgba(60,225,165,.55),
    0 0 18px 3px rgba(18,168,119,.22),
    /* 檯面內凹:上緣暗、下緣亮,讀起來是往下陷的 */
    inset 0 3px 5px rgba(0,0,0,.45),
    inset 0 -2px 3px rgba(255,255,255,.09),
    /* 界定檯面範圍的細亮線 */
    inset 0 0 0 1px rgba(190,255,225,.16),
    /* 絨面暗角 */
    inset 0 0 70px rgba(2,40,28,.5);
}

/* 絨布織紋:短纖維的細微顆粒,疊在絨面之上 */
.table::after {
  content: "";
  position: absolute;
  inset: var(--rail-w);
  border-radius: 999px;
  z-index: 1;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* 贊助商版位:絨面浮水印,壓在公牌之下 */
/* 印在公牌「上方」的絨面空白處。放桌心會被公牌與底池整個蓋住,等於看不見。 */
.sponsor {
  position: absolute;
  top: 27%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 66%;
  pointer-events: none;
}
/* logo 去色提亮才會像「印在絨布上」而不是貼上去的貼紙 */
.sponsor img {
  display: block;
  width: 100%; height: auto;
  opacity: .13;
  filter: grayscale(1) brightness(1.7);
}
.sponsor[hidden] { display: none; }

/* 沒有贊助商時,絨面印自家品牌。淡淡的,只是「桌布上的印花」 */
.sponsor-brand {
  display: block;
  width: 58%;
  margin: 0 auto;
  opacity: .26;
}
/* .sponsor img 的去色提亮是給贊助商圖用的,自家字樣保留金色 */
.sponsor img.sponsor-brand { width: 58%; opacity: .26; filter: none; }

/* 文字版贊助商:絨面上的印刷字 */
.sponsor-text {
  text-align: center;
  font-size: clamp(13px, 4.4vw, 22px);
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.25;
  text-transform: uppercase;
  color: #dcfff0;
  /* 浮水印但要看得見:太淡等於沒放,太濃會搶走牌面 */
  opacity: .28;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  word-break: break-word;
}

/* 荷官:坐在牌桌上緣 */
/* 荷官在桌子上緣。只露出頭與肩 —
   顯示完整半身會往下佔掉一大塊,壓住正上方玩家的名牌與籌碼。
   下半身本來就該被桌子擋住,裁掉才符合「她站在桌後」的空間邏輯。 */
.dealer-figure {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -74%);
  z-index: 2;                      /* 低於座位(3),重疊時讓玩家資訊在上 */
  width: clamp(54px, 19%, 80px);
  height: clamp(46px, 16%, 66px);  /* 高度小於等比高度 → 自然裁掉下半身 */
  overflow: hidden;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.65));
}

/* 遮罩下緣,讓裁切邊界不是一條硬線 */
.dealer-figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(transparent, rgba(10,13,14,.85));
  pointer-events: none;
}
.dealer-figure svg,
.dealer-figure .dealer-img { display: block; width: 100%; height: auto; }
.dealer-figure:empty { display: none; }

/* ---------- 中央區 ---------- */
.center {
  position: absolute;
  top: 47%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  z-index: 2;
}

.stage-label {
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-300);
  opacity: .75;
  min-height: 1.2em;
  margin-bottom: var(--sp-2);
}

.community {
  display: flex;
  gap: 4px;
  justify-content: center;
  min-height: calc(var(--card-w) * 1.4);
}

.pot-row {
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

.pot {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(217,185,114,.22);
  box-shadow: var(--sh-sm);
}

.pot-label {
  font-size: var(--t-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-200);
  opacity: .8;
}

.pot-value {
  font-size: var(--t-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brass-200);
}

/* ---------- 籌碼 ---------- */
.chip-stack {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  min-height: 0;
}

.chip-col { display: flex; flex-direction: column-reverse; }

.chip {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--chip-face, var(--chip-100));
  /* dashed 邊框剛好模擬籌碼邊緣的缺口紋 */
  border: 2px dashed var(--chip-edge, var(--chip-edge-cool));
  box-shadow:
    0 1px 2px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(255,255,255,.4),      /* 上緣受光 */
    inset 0 -1px 1px rgba(0,0,0,.35),          /* 下緣背光 */
    inset 0 0 0 1px rgba(0,0,0,.22);
  margin-top: -11px;
}
.chip:first-child { margin-top: 0; }

.chip-c1    { --chip-face: var(--chip-1);    --chip-edge: var(--chip-edge-warm); }
.chip-c5    { --chip-face: var(--chip-5);    --chip-edge: var(--chip-edge-warm); }
.chip-c25   { --chip-face: var(--chip-25);   --chip-edge: var(--chip-edge-cool); }
.chip-c100  { --chip-face: var(--chip-100);  --chip-edge: var(--chip-edge-cool); }
.chip-c500  { --chip-face: var(--chip-500);  --chip-edge: var(--chip-edge-warm); }
.chip-c1000 { --chip-face: var(--chip-1000); --chip-edge: var(--chip-edge-warm); }

.chip-amt {
  font-size: var(--t-3xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brass-200);
  background: rgba(0,0,0,.5);
  padding: 1px 6px;
  border-radius: var(--r-full);
  align-self: center;
}

.pot-chips { min-height: 0; }
.pot-chips:empty { display: none; }

/* ---------- 座位 ---------- */
.seat {
  position: absolute;
  width: calc(var(--seat-w) * var(--seat-scale, 1));
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: opacity var(--dur) var(--ease);
}

/* 上半桌:名牌在上、牌與籌碼往桌心掛 */
.seat.pos-top { flex-direction: column-reverse; }

.seat .hole {
  display: flex;
  gap: 2px;
  justify-content: center;
  min-height: calc(var(--card-w-sm) * 1.4);
}

.seat .bet { min-height: 0; }
.seat .bet:empty { display: none; }

.plaque {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 5px;
  background: linear-gradient(rgba(18,16,14,.92), rgba(12,11,9,.94));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.avatar {
  flex: 0 0 auto;
  width: var(--avatar); height: var(--avatar);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.avatar svg { display: block; width: 100%; height: 100%; }

.info { min-width: 0; text-align: left; line-height: 1.25; }

.pname {
  font-size: var(--t-3xs);
  font-weight: 600;
  color: var(--ink-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chips {
  font-size: var(--t-2xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brass-300);
}

.action-tag {
  font-size: var(--t-3xs);
  font-weight: 600;
  color: var(--ink-100);
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.08);
  padding: 1px 7px;
  border-radius: var(--r-full);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.action-tag:empty { display: none; }

/* 輪到誰 */
.seat.active .plaque {
  border-color: var(--brass-400);
  box-shadow: var(--sh-md), 0 0 0 1px var(--brass-500), 0 0 20px -2px rgba(201,160,82,.55);
}
.seat.active .pname { color: var(--brass-200); }

.seat.folded { opacity: .35; filter: saturate(.4); }

/* 上頭(tilt):輸掉大池後會變激進。紅光是玩家唯一看得到的線索 */
.seat.tilted .plaque {
  border-color: rgba(200,80,70,.75);
  box-shadow: var(--sh-md), 0 0 0 1px rgba(200,80,70,.5), 0 0 18px -2px rgba(210,70,60,.6);
}
.seat.tilted .pname { color: #ff9b8f; }
.seat.tilted.active .plaque {
  border-color: var(--brass-400);
  box-shadow: var(--sh-md), 0 0 0 1px var(--brass-500),
              0 0 20px -2px rgba(201,160,82,.55), 0 0 26px -4px rgba(210,70,60,.7);
}

/* 你的座位稍微放大 */
.seat.is-human { --seat-scale: 1.16; }
.seat.is-human .hole { --card-w-sm: 42px; }

/* 莊家鈕 */
.dealer-btn {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--brass-200), var(--brass-500));
  color: var(--ink-900);
  font-size: var(--t-3xs);
  font-weight: 800;
  display: grid; place-items: center;
  border: 1.5px solid var(--brass-700);
  box-shadow: var(--sh-md);
  transform: translate(-50%, -50%);
  z-index: 4;
  transition: left var(--dur) var(--ease), top var(--dur) var(--ease);
}

/* ---------- 撲克牌 ---------- */
.card {
  position: relative;
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: linear-gradient(168deg, #fdfcf9 0%, #f4f1ea 100%);
  box-shadow: var(--sh-sm), inset 0 0 0 1px rgba(0,0,0,.1);
  font-size: calc(var(--card-w) * .32);
  line-height: 1;
  overflow: hidden;
}

.card.small { width: var(--card-w-sm); font-size: calc(var(--card-w-sm) * .36); }

.card .idx {
  position: absolute;
  top: .24em; left: .26em;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .94;
}
/* 角落不再有花色,省下來的空間讓數字放大 —— 手機上數字才是要一眼認出的東西 */
.card .idx .r { font-size: 1.24em; font-weight: 800; letter-spacing: -.04em; }
/* "10" 兩個字元,不縮就會撐破索引欄 */
.card .idx .r.wide { font-size: .98em; letter-spacing: -.09em; }

.card .pip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -44%);
  font-size: 1.95em;
  opacity: .92;
}
.card.small .pip { font-size: 1.6em; }

/* .idx-br(右下角旋轉索引)已移除 —— 見 render.js:沒有花色時 6 和 9 分不出來 */

.card.red   { color: #b3202a; }
.card.black { color: #1c1a17; }

/* 牌背:經典撲克牌的做法 — 花紋外圍留一圈白邊,而不是滿版到邊緣。
   白邊用 inset shadow 疊在紋樣之上,所以紋樣本身可以是簡單的滿版重複。 */
.card.back {
  background: var(--back-bg, repeating-linear-gradient(45deg, #1e3a6e 0 3px, #2d4f8f 3px 6px));
  box-shadow:
    var(--sh-sm),
    inset 0 0 0 1px rgba(0,0,0,.3),          /* 紋樣與白邊之間的細線 */
    inset 0 0 0 2.5px #f1ece0,                /* 白邊 */
    inset 0 0 0 3.5px rgba(0,0,0,.22);        /* 白邊外緣壓線 */
}

/* 紋樣全部走「白色細紋印在低飽和底色上」的經典撲克做法。
   復古配色(撲克藍/磚紅/墨綠/米)比鮮豔色更像真牌。 */

/* 0 經典藍網 */
.back-0 {
  --back-bg:
    repeating-linear-gradient(45deg, rgba(255,255,255,.42) 0 .6px, transparent .6px 3.2px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.42) 0 .6px, transparent .6px 3.2px),
    linear-gradient(160deg, #34589b 0%, #1e3a6e 100%),
    #24447e;
}

/* 1 經典紅網 */
.back-1 {
  --back-bg:
    repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 .6px, transparent .6px 3.2px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.4) 0 .6px, transparent .6px 3.2px),
    #a33232;
}

/* 2 墨綠菱葉 */
.back-2 {
  --back-bg:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.5) 1.1px, transparent 1.2px) 0 0/6px 6px,
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.5) 1.1px, transparent 1.2px) 3px 3px/6px 6px,
    repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 .5px, transparent .5px 6px),
    #2f6b4a;
}

/* 3 靛藍點陣 */
.back-3 {
  --back-bg:
    radial-gradient(circle, rgba(255,255,255,.55) .8px, transparent .9px) 0 0/3.4px 3.4px,
    #2b3f78;
}

/* 4 磚紅菱格 */
.back-4 {
  --back-bg:
    repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 .7px, transparent .7px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.5) 0 .7px, transparent .7px 5px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.12) 0 2.5px, transparent 2.5px 5px),
    #b04038;
}

/* 5 米金雅緻 */
.back-5 {
  --back-bg:
    repeating-linear-gradient(45deg, rgba(120,92,40,.35) 0 .6px, transparent .6px 3.4px),
    repeating-linear-gradient(-45deg, rgba(120,92,40,.35) 0 .6px, transparent .6px 3.4px),
    #e6dcc0;
}

/* 6 Deal with Ray 品牌牌背:深藍黑底 + 電光金 LOGO。
   米白邊在深底上太跳、像貼紙,改成暗金細框 */
.back-6 {
  --back-bg:
    url("/brand/mark.svg") center / 58% auto no-repeat,
    radial-gradient(circle, rgba(237,180,11,.10) .7px, transparent .8px) 0 0/4px 4px,
    radial-gradient(ellipse at 50% 40%, #1a2444 0%, #0a0e1c 85%);
}
/* 7–9:同一款 Ray 設計的其他配色(2026-09-19 Raymond:「用這個給我四種不同的配色」) */
.back-7 {   /* 酒紅 + 金 */
  --back-bg:
    url("/brand/mark.svg") center / 58% auto no-repeat,
    radial-gradient(circle, rgba(237,180,11,.10) .7px, transparent .8px) 0 0/4px 4px,
    radial-gradient(ellipse at 50% 40%, #5a1422 0%, #1c050a 85%);
}
.back-8 {   /* 墨綠 + 金 */
  --back-bg:
    url("/brand/mark.svg") center / 58% auto no-repeat,
    radial-gradient(circle, rgba(237,180,11,.10) .7px, transparent .8px) 0 0/4px 4px,
    radial-gradient(ellipse at 50% 40%, #15503a 0%, #04160f 85%);
}
.back-9 {   /* 墨黑 + 銀 */
  --back-bg:
    url("/brand/mark-light.svg") center / 58% auto no-repeat,
    radial-gradient(circle, rgba(255,255,255,.08) .7px, transparent .8px) 0 0/4px 4px,
    radial-gradient(ellipse at 50% 40%, #2c2d35 0%, #060608 85%);
}
.card.back.back-7, .card.back.back-8 {
  box-shadow:
    var(--sh-sm),
    inset 0 0 0 1px rgba(0,0,0,.45),
    inset 0 0 0 2.5px rgba(237,180,11,.55),
    inset 0 0 0 3.5px rgba(0,0,0,.3);
}
.card.back.back-9 {
  box-shadow:
    var(--sh-sm),
    inset 0 0 0 1px rgba(0,0,0,.45),
    inset 0 0 0 2.5px rgba(210,214,224,.6),
    inset 0 0 0 3.5px rgba(0,0,0,.3);
}
/* 10 象牙白 + 深藍(Raymond:「有沒有可能有一款牌背是白底」)。
   正面朝上的牌也是白的 —— 牌背一定要有明顯的深藍雙框與 LOGO,蓋著的牌才不會被看成翻開的牌 */
.back-10 {
  --back-bg:
    url("/brand/mark-navy.svg") center / 52% auto no-repeat,
    repeating-linear-gradient(45deg, rgba(26,36,68,.07) 0 .6px, transparent .6px 4px),
    repeating-linear-gradient(-45deg, rgba(26,36,68,.07) 0 .6px, transparent .6px 4px),
    #f6f3ec;
}
.card.back.back-10 {
  box-shadow:
    var(--sh-sm),
    inset 0 0 0 1px rgba(0,0,0,.18),
    inset 0 0 0 3px #f6f3ec,
    inset 0 0 0 4.5px #1a2444,
    inset 0 0 0 6px #f6f3ec,
    inset 0 0 0 6.8px rgba(26,36,68,.55);
}
.card.back.back-6 {
  box-shadow:
    var(--sh-sm),
    inset 0 0 0 1px rgba(0,0,0,.45),
    inset 0 0 0 2.5px rgba(237,180,11,.55),
    inset 0 0 0 3.5px rgba(0,0,0,.3);
}

/* 未發出的公牌:只留一道極淡的凹槽暗示位置。
   做成明顯的空框會讓翻牌前的桌心變成 5 個大洞,搶走視覺焦點 */
.card.placeholder {
  background: rgba(2,40,28,.16);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.22),
    inset 0 -1px 0 rgba(255,255,255,.05);
}

.card.win {
  box-shadow:
    var(--sh-md),
    inset 0 0 0 1px rgba(0,0,0,.1),
    0 0 0 2px var(--brass-400),
    0 0 18px -2px rgba(201,160,82,.65);
}

/* ---------- 控制列 ---------- */
.dock {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}

.msg {
  text-align: center;
  font-size: var(--t-sm);
  color: var(--brass-200);
  min-height: 1.5em;
  margin-bottom: var(--sp-1);
}

.hand-hint {
  text-align: center;
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-200);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-full);
  padding: 2px var(--sp-3);
  width: fit-content;
  margin: 0 auto var(--sp-2);
}
.hand-hint[hidden] { display: none; }

.controls {
  background: linear-gradient(rgba(28,25,21,.9), rgba(18,16,13,.94));
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--sh-md);
}

.control-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

/* 按鈕做成「有厚度、可按下去」的實體:
   頂緣受光、底緣背光、下方一道實色邊當側面,按下時整顆下沉並翻成內凹。
   扁平色塊配不上金屬籌碼與擬真牌桌。 */
.btn {
  position: relative;
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: .02em;
  padding: var(--sp-3) var(--sp-2);
  min-height: 48px;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  background: linear-gradient(180deg, var(--b-lt, #4a4a4a) 0%, var(--b-mid, #333) 52%, var(--b-dk, #222) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),        /* 頂緣高光 */
    inset 0 -2px 4px rgba(0,0,0,.32),          /* 底緣內陰影 */
    0 3px 0 var(--b-dk, #222),                 /* 按鈕側面的厚度 */
    0 5px 12px rgba(0,0,0,.42);                /* 落地陰影 */
  white-space: nowrap;
  transition: filter var(--dur) var(--ease), transform 90ms var(--ease),
              box-shadow 90ms var(--ease), opacity var(--dur) var(--ease);
}

.btn:hover:not(:disabled) { filter: brightness(1.1); }

/* 按下去要真的沉下去,而不是縮小 */
.btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.45),
    0 0 0 rgba(0,0,0,0),
    0 1px 3px rgba(0,0,0,.3);
}

.btn:focus-visible { outline: 2px solid var(--brass-200); outline-offset: 3px; }
.btn:disabled {
  opacity: .3;
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 var(--b-dk, #222);
}
.btn.hidden { display: none; }

.btn-fold  { --b-lt: var(--fold-lt);  --b-mid: var(--fold);  --b-dk: var(--fold-dk); }
.btn-check { --b-lt: var(--check-lt); --b-mid: var(--check); --b-dk: var(--check-dk); }
.btn-call  { --b-lt: var(--call-lt);  --b-mid: var(--call);  --b-dk: var(--call-dk); }

.btn-raise, .btn-primary {
  --b-lt: var(--raise-lt); --b-mid: var(--raise); --b-dk: var(--raise-dk);
  color: #2a1f08;
  text-shadow: 0 1px 0 rgba(255,255,255,.32);
}

.btn-lg { font-size: var(--t-md); min-height: 54px; }
.btn-block { width: 100%; }

/* 加注區 */
.raise-box {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,.09);
}
.raise-box.hidden { display: none; }

.raise-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }

.preset {
  font-family: inherit;
  font-size: var(--t-2xs);
  font-weight: 700;
  padding: var(--sp-2) 2px;
  min-height: 34px;
  color: var(--brass-200);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.preset:active:not(:disabled) { background: rgba(217,185,114,.2); }
.preset:disabled { opacity: .3; cursor: not-allowed; }
.preset:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 2px; }

.raise-slide { display: flex; align-items: center; gap: var(--sp-3); }

.raise-amt {
  font-size: var(--t-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brass-200);
  min-width: 58px;
  text-align: right;
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 4px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.16);
  cursor: pointer;
}
input[type=range]:disabled { opacity: .3; }
input[type=range]:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 6px; }

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;      /* 觸控目標 */
  border-radius: 50%;
  background: linear-gradient(160deg, var(--brass-200), var(--brass-500));
  border: 1.5px solid var(--brass-700);
  box-shadow: var(--sh-sm);
}
input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brass-400);
  border: 1.5px solid var(--brass-700);
}

/* ---------- 抽屜 ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  background: rgba(6,5,4,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sheet.hidden { display: none; }

.sheet-panel {
  width: 100%;
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(rgba(30,27,22,.98), rgba(19,17,14,.99));
  border-top: 1px solid rgba(217,185,114,.22);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0,0,0,.5);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.sheet-head h2 {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-50);
}

.sheet-foot { padding-top: var(--sp-4); }

.log {
  flex: 1;
  overflow-y: auto;
  font-size: var(--t-sm);
  line-height: 1.8;
  color: var(--ink-200);
  -webkit-overflow-scrolling: touch;
}
.log div { opacity: .82; }
.log div:last-child { opacity: 1; color: var(--brass-200); }

/* ---------- 設定 ---------- */
/* min-width:0 是必要的:flex 子項預設 min-width:auto,會被內容撐破容器 */
.settings {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }

.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 0;
}

.field-label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
  min-width: 0;
}

.field-value {
  flex: 0 0 auto;
  font-size: var(--t-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brass-200);
}

.field-note { font-size: var(--t-2xs); color: var(--ink-600); }

.seg { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

.seg-opt {
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  min-height: 40px;
  min-width: 44px;
  color: var(--ink-200);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg-opt[aria-pressed="true"] {
  background: var(--brass-500);
  border-color: var(--brass-600);
  color: var(--ink-900);
}
.seg-opt:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 2px; }

.text-input {
  font-family: inherit;
  font-size: var(--t-sm);
  padding: var(--sp-3);
  min-height: 44px;
  color: var(--ink-50);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-sm);
  width: 100%;
}
.text-input:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 1px; }

/* 牌背選擇器:直接顯示真的牌背,所見即所得 */
.back-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

.back-opt {
  padding: var(--sp-2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.back-opt .card { width: 38px; }
.back-opt span { font-size: var(--t-2xs); color: var(--ink-400); }
.back-opt[aria-pressed="true"] {
  border-color: var(--brass-400);
  background: rgba(201,160,82,.14);
}
.back-opt[aria-pressed="true"] span { color: var(--brass-200); }
.back-opt:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 2px; }

.dealer-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

.dealer-opt {
  padding: var(--sp-2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dealer-opt svg,
.dealer-opt .dealer-img { width: 100%; height: auto; max-height: 84px; object-fit: contain; }
.dealer-opt span { font-size: var(--t-2xs); color: var(--ink-400); }
.dealer-opt[aria-pressed="true"] {
  border-color: var(--brass-400);
  background: rgba(201,160,82,.14);
}
.dealer-opt[aria-pressed="true"] span { color: var(--brass-200); }
.dealer-opt:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 2px; }

/* ---------- 遮罩與彈窗 ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(6,5,4,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.overlay.hidden { display: none; }

.modal {
  width: min(400px, 100%);
  text-align: center;
  background: linear-gradient(rgba(30,27,22,.96), rgba(19,17,14,.98));
  border: 1px solid rgba(217,185,114,.2);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-5);
  box-shadow: var(--sh-lg), 0 0 60px -20px rgba(201,160,82,.25);
}

.eyebrow {
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-400);
  margin-bottom: var(--sp-2);
}

.modal h2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--ink-50);
  margin-bottom: var(--sp-5);
}

.modal-text { color: var(--ink-200); margin-bottom: var(--sp-6); }

.rules { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); text-align: left; }

.rules > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.rules dt {
  font-size: var(--t-2xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.rules dd {
  font-size: var(--t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brass-200);
}

/* ---------- 擲骰補碼 ---------- */
.dice-stage {
  display: grid;
  place-items: center;
  min-height: 108px;
  margin-bottom: var(--sp-3);
}

.dice {
  width: 84px; height: 84px;
  padding: 11px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 4px;
  border-radius: 16px;
  background: linear-gradient(155deg, #fdfcf9 0%, #ece7dd 55%, #d8d2c6 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.9),
    inset 0 -3px 4px rgba(0,0,0,.16),
    0 6px 14px rgba(0,0,0,.45),
    0 2px 4px rgba(0,0,0,.3);
}

.dice .pip { border-radius: 50%; }
/* 只有 .on 的格子畫點,其餘留空當版位 */
.dice .pip.on {
  background: radial-gradient(circle at 34% 30%, #4a4640, #17150f 70%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.25);
}

/* 滾動中:翻騰感。結束前不揭曉點數,期待感才建立得起來 */
.dice.rolling { animation: dice-tumble .34s linear infinite; }
@keyframes dice-tumble {
  0%   { transform: rotate(0deg)   scale(1);    }
  25%  { transform: rotate(-9deg)  scale(1.06) translateY(-6px); }
  50%  { transform: rotate(6deg)   scale(.97);  }
  75%  { transform: rotate(10deg)  scale(1.04) translateY(-3px); }
  100% { transform: rotate(0deg)   scale(1);    }
}

/* 定格:overshoot 回彈才有「落定」的重量 */
.dice.settled { animation: dice-settle .42s cubic-bezier(.2,1.5,.4,1) 1; }
@keyframes dice-settle {
  0%   { transform: scale(1.32) rotate(-4deg); }
  60%  { transform: scale(.95)  rotate(1deg);  }
  100% { transform: scale(1)    rotate(0deg);  }
}

/* 高點數給更強的回饋 — juice 依事件重要性縮放 */
.dice.big {
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.9),
    inset 0 -3px 4px rgba(0,0,0,.16),
    0 6px 14px rgba(0,0,0,.45),
    0 0 0 3px var(--brass-400),
    0 0 30px 4px rgba(233,200,110,.65);
}

.dice-result {
  min-height: 2em;
  margin-bottom: var(--sp-5);
  font-size: var(--t-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brass-200);
}
.dice-result.pop { animation: result-pop .38s cubic-bezier(.2,1.5,.4,1) 1; }
@keyframes result-pop {
  0%   { transform: scale(.7); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}

.hidden { display: none !important; }

/* ============================================================
   桌機／平板:牌桌轉回橫躺橢圓,元件放大
   ============================================================ */
@media (min-width: 760px) {
  :root {
    --card-w: 60px;
    --card-w-sm: 42px;
    --seat-w: 132px;
    /* 原 40px,放大 1.5 倍到 60px。但矮視窗(例如 920×560)名牌太高會壓到手牌 ——
       跟著視窗高度縮,800px 高以上才是 60px(實測名牌與手牌零重疊) */
    --avatar: clamp(40px, 7.5vh, 60px);
    --t-3xs: 0.6875rem;
    --t-2xs: 0.75rem;
  }

  .table { aspect-ratio: 1.85 / 1; }   /* 桌機:同一個 stadium,轉成橫躺 */

  .stage { padding: var(--sp-6) var(--sp-8); }

  .brand-mark { font-size: var(--t-xl); }

  .dock { max-width: 720px; margin: 0 auto; width: 100%; }

  .controls { flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; }
  .control-actions { display: flex; }
  .btn { padding: var(--sp-3) var(--sp-5); }

  .raise-box {
    border-top: none;
    border-left: 1px solid rgba(255,255,255,.09);
    padding-top: 0;
    padding-left: var(--sp-4);
    flex: 1;
    min-width: 260px;
  }

  .raise-presets { grid-template-columns: repeat(4, 1fr); }

  .chip { width: 18px; height: 18px; margin-top: -13px; }

  .sheet { align-items: center; justify-content: center; padding: var(--sp-6); }
  .sheet-panel { max-width: 480px; border-radius: var(--r-xl); border: 1px solid rgba(217,185,114,.22); }
}

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