/* ───────────────────────────────────────────────────────────────
   skin.css — 把 /intro 的視覺語言帶進遊戲本體

   這一層**最後載入**,只做兩件事:
     1. 重新定義 style.css 的 design token(顏色、字體、圓角)。
        大部分畫面是吃 token 的,改這裡就整片跟著變。
     2. 補那些把顏色寫死、token 帶不動的地方。

   不直接改 style.css / online.css 的原因:整個方向可以靠拿掉
   index.html 裡的一行 <link> 完整回退。視覺重新定向這種事,
   回得去比改得乾淨重要。

   方向(與 /intro 一致):
     · 深藍黑底 #0a0e1c,不是紫色房間
     · 電光金 #EDB40B 是**唯一**的重點色 —— 只給「錢」和「輪到你」
     · Albert Sans,數字用緊字距
     · 玻璃面板 rgba(20,20,30,.8) + 1px 白 10% 細邊
     · 扁平、小圓角。立體按鈕是上一個方向(賭場實體感)的語言
   ─────────────────────────────────────────────────────────────── */

:root {
  /* Albert Sans 沒有中文字形。中文一定要有明確的 fallback,
     否則在 Windows 上會掉到新細明體 */
  --font-display: "Albert Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-ui:      "Albert Sans", "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;

  /* 黃銅 → 電光金。沿用 brass 這個名字,是因為有上百處在引用它;
     改名等於把整份 CSS 重寫一遍,而且回不去 */
  --brass-100: #fdf3cf;
  --brass-200: #f9e08a;
  --brass-300: #f3c93a;
  --brass-400: #EDB40B;
  --brass-500: #c99706;
  --brass-600: #9a7405;
  --brass-700: #6e5304;

  /* 房間:紫 → 深藍黑 */
  --room-900: #0a0e1c;
  --room-800: #0e1326;
  --room-700: #141a33;
  --room-600: #1a2140;

  /* 絨布壓沉,跟 /intro 那張牌桌同一組綠。
     原本的亮綠配紫色房間是對的,配深藍黑會太跳 */
  --felt-900: #071d15;
  --felt-800: #0c2f22;
  --felt-700: #124832;
  --felt-600: #185a3e;
  --felt-500: #1f6b4a;
  --felt-400: #2a8a60;

  /* 護欄偏藍黑,跟房間同色系才坐得住 */
  --rail-900: #070912;
  --rail-800: #0d1120;
  --rail-700: #151a2e;
  --rail-600: #1f2640;

  /* 中性色偏冷一階 */
  --ink-50:  #ffffff;
  --ink-100: #e9ebf2;
  --ink-200: #c3c7d4;
  --ink-400: #8a90a3;
  --ink-600: #5b6176;

  /* 圓角收緊 */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px;

  --glass: rgba(20,20,30,.8);
  --hair: rgba(255,255,255,.1);
  --gold: #EDB40B;
  --f1-red: #E10600;

  /* ── 牌放大 ──
     手機上絨面可用寬約 258px。公牌 42px × 5 + 4 個間距 = 226px,放得下。 */
  --card-w: 42px;
  --card-w-sm: 32px;
}
/* 桌機**不放大**,明確寫回 style.css 的原值。
   (一定要寫:上面那條沒有 media 的 :root 會蓋掉 style.css 裡桌機的 60px)
   桌機是橫躺的桌子,垂直空間本來就緊 —— 試過 68/48,
   實測公牌會擦到對手的牌、局數標籤會壓到自己的手牌。 */
@media (min-width: 760px) {
  :root { --card-w: 60px; --card-w-sm: 42px; }
}

/* ───────── 房間 ───────── */
body {
  background:
    radial-gradient(60% 45% at 50% 40%, rgba(31,107,74,.38), transparent 70%),
    radial-gradient(40% 35% at 88% 92%, rgba(225,6,0,.16), transparent 70%),
    radial-gradient(45% 40% at 8% 88%, rgba(237,180,11,.09), transparent 70%),
    var(--room-900);
  letter-spacing: -.005em;
}
/* 菱格暗紋是私人會所的語言,拿掉;只留細顆粒,避免大面積漸層出現色帶 */
body::before {
  background-image:
    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.22'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ───────── 頂列:/intro 導覽列的方形玻璃鈕 ───────── */
.topbar-actions { gap: 1px; }
.icon-btn {
  border-radius: 0;
  background: rgba(255,255,255,.08);
  color: #fff;
}
.icon-btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.icon-btn:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }
.icon-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.icon-btn:active { background: rgba(255,255,255,.22); }
.room-code { font-weight: 700; letter-spacing: -.02em; }

/* 荷官原本伸出桌面上緣約 49px,頭會探進頂列 —— 音效鈕一直是壓在她頭髮上的,
   只是以前按鈕是透明的所以沒人注意。按鈕有了玻璃底之後就變成一塊板子蓋在臉上。
   讓她少探出來一點,桌子上方多留 20px,兩者剛好錯開(桌子只縮 3.5%)。 */
/* 只在手機:桌機的頂列按鈕在右上角,離中央的荷官很遠,本來就不會撞 */
@media (max-width: 759px) {
  /* 荷官放大約 35%(55×66 → 76×92)。
     她要變大就需要垂直空間,而上面是頂列、不能蓋(會擋住聊天和音效的圖示),
     所以空間只能跟桌子要:桌子上方多留 38px。 */
  .stage { padding-top: calc(var(--sp-2) + 38px); }
  /* 荷官換成 Raymond 的半身照(2026-09-19)。圖比原本寬(要露肩膀和手),
     而且整張都要看得到 —— 雙手交叉、握拳在圖的下緣,裁掉就沒了。
     所以高度跟著圖走,下緣淡出直接做在圖裡,不用 ::after 的漸層。
     多出來的高度往桌面裡長(站在桌後、手靠著桌緣),不往上撞頂列。 */
  .dealer-figure {
    width: clamp(96px, 32%, 120px);
    height: auto;
    transform: translate(-50%, -42%);
  }
  .dealer-figure::after { display: none; }
}
/* 桌機:原本 80px 寬、只露出頭,在 1200px 寬的桌子上小到看不清。
   放大到約桌寬的 1/10(Raymond 指定的大小:約 128×155,頭在桌緣上方、手落在絨面上),
   之後又要求再大 30% → 桌寬約 13.65%(143–195px)。
   上排兩個座位在桌寬 1/4 與 3/4 附近,中間這一段是空的,往下長不會撞到。 */
@media (min-width: 760px) {
  .dealer-figure {
    width: clamp(143px, 13.65%, 195px);
    height: auto;
    transform: translate(-50%, -36%);
  }
  .dealer-figure::after { display: none; }
}

/* ───────── 牌桌 ─────────
   絨面外緣原本是一圈綠色霓虹。/intro 那張桌子是金色細線 —— 跟著換,
   這是兩個畫面之間最直接的呼應。 */
.table::before {
  box-shadow:
    0 0 0 1.5px rgba(237,180,11,.5),
    0 0 22px 0 rgba(237,180,11,.10),
    inset 0 3px 5px rgba(0,0,0,.5),
    inset 0 -2px 3px rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 0 80px rgba(3,14,10,.6);
}

/* 名牌:玻璃面板。
   **沒有加 backdrop-filter** —— 它後面是一片純綠絨布,糊了也看不出差別,
   而六張名牌各開一個模糊層,在舊 Android 上是實打實的掉幀。 */
.plaque {
  background: var(--glass);
  border: 1px solid var(--hair);
}
.pname { font-weight: 500; color: rgba(255,255,255,.72); letter-spacing: 0; }
.chips { color: var(--gold); letter-spacing: -.03em; font-weight: 700; }

.seat.active .plaque {
  border-color: var(--gold);
  box-shadow: var(--sh-md), 0 0 0 1px var(--gold), 0 0 22px -2px rgba(237,180,11,.6);
}
.seat.active .pname { color: #fff; }
.seat.tilted.active .plaque {
  border-color: var(--gold);
  box-shadow: var(--sh-md), 0 0 0 1px var(--gold),
              0 0 22px -2px rgba(237,180,11,.6), 0 0 26px -4px rgba(225,6,0,.7);
}

.action-tag {
  background: rgba(10,14,28,.85);
  border-color: var(--hair);
  border-radius: var(--r-sm);
  font-weight: 500;
  color: rgba(255,255,255,.8);
}

/* 底池:這是桌上最重要的一個數字,給它 /intro 的顯示數字待遇 */
/* 手機上:上下排,不是左右排。
   左右排的時候寬度 = 小標 + 數字,底池一到四位數(實測 1,150)就會
   左右各壓到中段座位的牌 4px —— 牌放大之後,桌心那條橫向空間變得很緊。
   上下排的寬度只由數字決定,而且「小標在上、大數字在下」本來就是 /intro 的排法。
   桌機是橫桌,橫向空間多得是、垂直才緊,所以維持左右排。 */
.pot {
  background: rgba(10,14,28,.72);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 4px 12px 5px;
  gap: 8px;
}
@media (max-width: 759px) {
  .pot { flex-direction: column; align-items: center; padding: 4px 10px 5px; gap: 2px; }
  .pot-label { font-size: 9px; line-height: 1; }
}
.pot-label { letter-spacing: .08em; color: rgba(255,255,255,.55); opacity: 1; text-transform: none; }
.pot-value {
  /* 跟著桌寬縮:面板開著、桌子變窄時,四位數的底池會擦到中段座位的名牌 */
  font-size: 1.375rem;
  font-size: clamp(1rem, 7.5cqw, 1.375rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--gold);
}
/* 中央區塊(公牌 + 底池 + 局數標籤)是用**中心點**定位的。
   底池改直排、標籤改兩行之後,整塊高了約 25px —— 中心不動,
   所以公牌被往上頂了約 12px,直接撞上排座位的牌(實測剛好疊 12px)。
   把多出來的那一半抵銷掉:公牌回到原本的位置,多的高度全部往下長。
   12 → 20px(2026-09-21):上排兩席的牌是往桌心掛的,桌子放胖之後公牌
   仍然會被那兩張牌擦到上緣。再往下 8px,最壞情況(每席都有牌 + 下注籌碼 +
   動作標籤)公牌離上排座位還有十幾 px,底池離自己的座位也還有 50px 以上。 */
@media (max-width: 759px) { .center { transform: translate(-50%, calc(-50% + 20px)); } }

/* 收窄成兩行。單行的時候它有 115px 寬,牌放大後左邊的「第」字會被座位的牌蓋掉 */
.stage-label { letter-spacing: .04em; color: rgba(255,255,255,.45); }
@media (max-width: 759px) {
  .stage-label.below { max-width: 92px; white-space: normal; text-align: center; line-height: 1.35; margin-inline: auto; }
}

.dealer-btn { background: var(--gold); color: #1a1420; font-weight: 800; }

/* ───────── 牌面 ─────────
   跟 /intro 那對 A 同一套:暖白、正紅、點數用緊字距的粗體 */
.card {
  background: linear-gradient(160deg, #fffdf8, #efe7d8);
  border-radius: 5px;
  font-weight: 700;
  letter-spacing: -.06em;
}
.card.red   { color: #c8102e; }
.card.black { color: #1a1420; }
.card.win   { box-shadow: 0 0 0 2px var(--gold), 0 0 18px 2px rgba(237,180,11,.65); }

/* 自己的手牌再大一級 —— 這是玩家盯最久的兩張牌 */
.seat.is-human .hole { --card-w-sm: 54px; gap: 3px; }
@media (min-width: 760px) { .seat.is-human .hole { --card-w-sm: 42px; gap: 2px; } }   /* 桌機維持原值:試過 52 和 64,都會讓局數標籤壓到牌 */

/* ───────── 手機直式:桌子吃滿寬度 ─────────
   1:1.85 是真實牌桌的比例,但手機直式先用完的是**高度**:桌寬是桌高
   除以 1.85 算出來的,而桌高又是「螢幕扣掉頂列和控制列」剩下的。
   375px 的機子、加注面板打開時,桌子只有 224px 寬 —— 五張公牌就要
   223px,等於整條公牌從護欄壓到護欄,兩側座位的手牌再往桌心掛就疊上去。
   左右兩邊明明各空著 60px 沒人用。

   比例放胖到 1:1.3:同樣的高度下桌子有 318px 寬(+42%),絨面 274px,
   公牌左右各留 25px。高度仍然是 height:100%,所以桌子永遠不會超出
   舞台、也永遠是直的(寬高比 1.3 > 1,座位排布不會翻成橫桌那一套)。 */
@media (max-width: 759px) {
  .table {
    aspect-ratio: 1 / 1.3;
    /* 空間夠的時候(觀戰、沒有加注面板)停在滿寬,不再長胖。
       這裡**不能**用 max-width: 100% —— .table 是 place-items:center 的
       grid item,百分比上限在「高度明確 + aspect-ratio 推寬度」這條路徑上
       量不到東西(實測桌子長到 473px,兩側直接切出畫面)。舞台左右各一個
       --sp-2 的內距,從視窗寬扣掉就是能用的寬。 */
    max-width: calc(100vw - 2 * var(--sp-2));
  }
}
/* 平板直式(iPad 等 ≥760 寬、但高比寬大)同樣的坑:style.css 給 1.85:1 + height:100%,
   1024×1366 時桌寬算成 2103px,整頁被撐寬、大廳視窗被擠到右下角(2026-09-23 送審前實測)。
   入座後的電腦版排法(.ring)由 app.js 算寬高,不受影響;大廳(還沒有牌局)和
   1024 以下的平板直式走的是這條 CSS。舞台左右內距是 --sp-8(style.css)。
   高度也要一起封頂,否則只封寬度時比例被拉成直的。 */
@media (min-width: 760px) {
  .table {
    max-width: calc(100vw - 2 * var(--sp-8));
    max-height: calc((100vw - 2 * var(--sp-8)) / 1.85);
  }
}

/* 牌的大小跟著桌子走。

   桌上所有東西的「位置」都是百分比,桌子縮小時會一起靠攏;但牌的「大小」
   是固定 px。表情面板或加注面板一打開,桌子被壓矮、等比變窄,
   固定大小的牌就擠在一起(實測:公牌壓到座位、局數標籤被蓋住)。

   用容器查詢單位讓牌寬跟著桌寬變。**不是等比例** —— 第一版用等比例
   (42/293 × 桌寬),面板開著時公牌還是跟上排座位的牌疊了 12px。
   原因是名牌、下注籌碼、動作標籤都是固定高度、不會跟著縮,
   桌子一小它們佔的比例就變大,留給牌的空間縮得比桌子快。

   所以用兩個錨點拉一條線:
     桌寬 293px(正常)      → 放大後的尺寸 42 / 32 / 54
     桌寬 257px(面板開著)  → 原版的尺寸   34 / 27 / 42  ← 已知這個尺寸不會疊
   再用 clamp 封頂封底。小桌時等於自動退回原版,大桌時才享有放大。

  兩個維度都要看(2026-09-21):桌子放胖之後寬度會先撞到 max-width 停住,
  只盯 cqw 的話,面板打開、桌子被壓矮時牌不會跟著縮,那層保護就失效了。
  改成 min(寬錨點, 高錨點) —— 高的錨點是同樣那兩個狀態的桌高 542 / 475px。
  誰先變緊就聽誰的。

   一定要包在 @supports 裡 —— 自訂屬性的宣告永遠「合法」,不支援 cqw 的
   瀏覽器要到 width 真的去用它的時候才失敗,而那時候會退成 auto,
   不是退回上面的固定值。牌會直接變形。 */
@supports (width: 1cqw) {
  .table { container-type: size; }
  @media (max-width: 759px) {
    .table {
      --card-w:    clamp(30px, min(22.22cqw - 23.1px, 11.94cqh - 22.7px), 42px);
      --card-w-sm: clamp(24px, min(13.89cqw -  8.7px,  7.46cqh -  8.4px), 32px);
    }
    .seat.is-human .hole { --card-w-sm: clamp(40px, min(33.33cqw - 43.7px, 17.91cqh - 43.1px), 54px); }
  }
}

/* ───────── 底部控制列 ───────── */
.msg { color: #fff; font-weight: 500; }
.hand-hint {
  border-radius: var(--r-sm);
  letter-spacing: .02em;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  border-color: var(--hair);
}
.controls {
  background: var(--glass);
  border: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

/* 動作鈕:扁平。三顆用**明度**拉開,不是用三種彩色 ——
     蓋牌  暗紅玻璃   (退場,最不搶)
     過牌  白色玻璃
     跟注  白色實心   (最常按的那一顆,最亮)
     加注  金色實心   (金色 = 錢變多)
   按下去的回饋保留 90ms 的下沉,手感不能因為變扁平就沒了。 */
.btn {
  border-radius: var(--r-md);
  min-height: 52px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: none;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}
.btn:hover:not(:disabled) { filter: none; background: rgba(255,255,255,.18); }
.btn:active:not(:disabled) {
  transform: translateY(1px) scale(.985);
  box-shadow: none;
  filter: brightness(.92);
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn:disabled { opacity: .3; box-shadow: none; }

.btn-fold {
  background: rgba(225,6,0,.16);
  border-color: rgba(225,6,0,.45);
  color: #ff9d96;
}
.btn-fold:hover:not(:disabled) { background: rgba(225,6,0,.26); }

.btn-call {
  background: #fff;
  border-color: #fff;
  color: #0a0e1c;
}
.btn-call:hover:not(:disabled) { background: #eef0f6; }

.btn-raise, .btn-primary,
.modal .btn-primary.btn-lg {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: #1a1420;
  text-shadow: none;
  box-shadow: 0 8px 24px -10px rgba(237,180,11,.6);
}
.btn-raise:hover:not(:disabled), .btn-primary:hover:not(:disabled),
.modal .btn-primary.btn-lg:hover:not(:disabled) { background: #f6c52e; filter: none; }

.preset {
  border-radius: var(--r-sm);
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: var(--hair);
  font-weight: 600;
}
.preset:active:not(:disabled) { background: rgba(237,180,11,.25); }
.raise-amt { color: var(--gold); letter-spacing: -.04em; font-size: 1.25rem; }

/* ───────── 快捷對話 ─────────
   面板的結構規則在 online.css(拿掉 skin 也要能運作)。這裡只管顏色。 */
.emote-btn {
  width: 44px; height: 44px;
  border-radius: var(--r-md);                    /* 跟頂列的方形玻璃鈕一致,不是圓形 */
  background: rgba(255,255,255,.08);
  border: 1px solid var(--hair);
  box-shadow: none;
  color: #fff;
}
.emote-btn:hover { background: rgba(255,255,255,.16); }
.quick-btn.has-reply { border-color: var(--gold); }
.quick-btn.has-reply::after { background: var(--gold); }
.quick-opt {
  color: #fff;
  border-color: var(--hair);
  background: rgba(255,255,255,.06);
}
.quick-opt:hover { background: rgba(255,255,255,.12); }
.quick-opt:active { background: rgba(237,180,11,.2); }
.quick-opt.reply { color: #0a0e1c; background: var(--gold); border-color: transparent; }
.quick-who { color: var(--gold); }

.speech-bubble {
  background: rgba(10,14,28,.94);
  border: 1px solid var(--gold);
  color: #fff;
}

/* ───────── 面板 / 彈窗 ───────── */
.overlay { background: rgba(5,7,14,.82); }
.sheet   { background: rgba(5,7,14,.7); }

.modal, .sheet-panel {
  background: var(--glass);
  border-color: var(--hair);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.6);
}
.sheet-panel { border-top: 1px solid var(--hair); }
.sheet-head h2 { letter-spacing: -.02em; font-weight: 700; }

.eyebrow { color: var(--gold); letter-spacing: .14em; font-weight: 700; }
.modal h2 {
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-size: clamp(2rem, 9vw, 2.75rem);
}

.modal .btn-lg.btn-block, .oauth-slot { border-radius: 8px; }
.modal #btnJoin { border-color: rgba(255,255,255,.18); color: #fff; }
.oauth-face { color: #fff; border-color: rgba(255,255,255,.18); }

/* 凡是「錢」的數字都是金色 + 緊字距 */
.auth-points, .field-value { color: var(--gold); letter-spacing: -.03em; }

input[type=text], input:not([type]), textarea {
  border-radius: 8px;
}
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ───────── 需要「對齊」的數字 ─────────
   Albert Sans **沒有等寬數字**:實測 "1111" 寬 26px、"0000" 寬 51px,
   font-variant-numeric: tabular-nums 在它身上完全無效。

   大部分數字無所謂(底池、名牌籌碼是直接換值、各自獨立)。
   但有兩種地方不行:
     · 排行榜的數字欄 —— 個位對不齊個位,就沒辦法一眼比大小
     · 加注滑桿的金額 —— 拖的時候每一格寬度都在變,數字會左右抖
   這幾處改用系統字體的數字(iOS 是 SF、Android 是 Roboto,都有等寬數字)。
   13px 上下的大小,跟旁邊的 Albert Sans 幾乎看不出差別,而且不用多下載任何東西。 */
.board-val, .raise-amt, .mission-prog, .field-value {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* 多語系字型(public/i18n.js 依語言載入對應的 Noto 字型,並設定 <html lang>)。
   Albert Sans 只有拉丁字母,後面接的那一套負責該語言的字。 */
:root:lang(zh-Hans) {
  --font-display: "Albert Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-ui:      "Albert Sans", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
:root:lang(ja) {
  --font-display: "Albert Sans", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-ui:      "Albert Sans", "Noto Sans JP", -apple-system, "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
}
:root:lang(ko) {
  --font-display: "Albert Sans", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-ui:      "Albert Sans", "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}
:root:lang(th) {
  --font-display: "Albert Sans", "Noto Sans Thai", "Thonburi", "Leelawadee UI", system-ui, sans-serif;
  --font-ui:      "Albert Sans", "Noto Sans Thai", -apple-system, "Thonburi", "Leelawadee UI", system-ui, sans-serif;
}