/* 台灣麻將 UI — 依 Claude Design handoff 重作。
   設計基準 1366×1024 平板橫向，.mj-device 等比 scale 置中。
   全部 scope 在 #twmj-app；外觀走 data-theme + CSS 變數。
   檔案分區：tokens / device frame / tiles / shared chrome / table / seats /
            discards / your area / setup / settings / results / themes */

/* ───────────────────────── tokens ───────────────────────── */
#twmj-app {
  --serif: "Noto Serif TC", "Songti TC", "STSong", serif;
  --sans:  "Noto Sans TC", "PingFang TC", system-ui, -apple-system, sans-serif;

  --tile-ivory:  #f7f2e4;
  --tile-ivory2: #ece3cd;
  --tile-edge:   #c9bd9a;
  --tile-ink:    #2a2620;
  --tile-red:    #c0271d;
  --tile-green:  #1f7a44;
  --tile-blue:   #2a5fb0;
  --dot-a:       #2a5fb0;
  --dot-b:       #1f7a44;
  --tile-back:   #2f7d57;
  --tile-back2:  #1d5e3f;

  /* ── 預設主題變數（classic 值）──
     所有 data-theme 選擇器只做覆蓋；即使 data-theme 完全失配，
     UI 仍呈現完整古典配色，永遠不會因快取/stale localStorage 塌成全綠。 */
  --gold: #d4a93c; --gold-soft: #f0d99a; --chip: #b3282d;
  --felt: #2f7a52; --felt2: #1d5d3c; --felt-line: rgba(255,255,255,.10);
  --wood: #6e4a28; --wood2: #4a3018; --wood3: #3a2412;
  --panel: #ecd9ad; --panel2: #dcc28a; --panel-ink: #4a3416; --panel-sub: #7a5a30;
  --line: rgba(74,48,24,.28);
  --hud-ink: #f3e6c8; --hud-sub: #d9b87a;
  --banner: #a3242a; --banner2: #7d191e;
  --bg-1: #5a3c22; --bg-2: #3a2614;

  position: relative;
  flex: 1;
  min-height: 0;            /* 比照 solitaire：吃滿 #game-container 的 flex 高度 */
  width: 100%;
  display: grid; place-items: center;
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* 留邊底色用主題深木色（見各 theme override），避免寬螢幕兩側出現黑塊 */
  background: radial-gradient(120% 120% at 50% 0%, var(--bg-1, #1a1d22), var(--bg-2, #07080a));
}
#twmj-app * { box-sizing: border-box; }
#twmj-app button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ───────────────── device scale frame ───────────────── */
.mj-device {
  width: 1560px; height: 1024px;
  position: absolute; left: 50%; top: 50%;   /* 真正置中，layout box(1024px) 不撐開容器 */
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--mj-scale, 1));
  border-radius: 26px; overflow: hidden; box-shadow: 0 40px 120px -30px rgba(0,0,0,.8);
}

/* ───────────────────────── tiles ───────────────────────── */
.tile { width: var(--tw); height: calc(var(--tw) * 1.588); position: relative; flex: 0 0 auto;
  transition: transform .16s ease, filter .16s ease; }
/* 圖檔模式：img 鋪滿牌面，tile-body 只保留陰影/圓角，背景改透明 */
.tile-img { position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: calc(var(--tw) * .12); object-fit: fill; display: block; }
.tile-body { position: absolute; inset: 0; border-radius: calc(var(--tw) * .12);
  background: transparent;
  box-shadow:
    inset 0 calc(var(--tw) * .03) 0 rgba(255,255,255,.9),
    inset 0 calc(var(--tw) * -.08) 0 var(--tile-ivory2),
    inset 0 0 0 1px var(--tile-edge),
    0 calc(var(--tw) * .06) calc(var(--tw) * .12) rgba(40,25,8,.32);
  overflow: hidden; }
.tile.clickable { cursor: pointer; }
.tile.clickable:hover { transform: translateY(calc(var(--tw) * -.14)); }
.tile.locked { opacity: .35; cursor: not-allowed; }
.tile.locked:hover { transform: none; }
.tile.lit .tile-body { box-shadow:
    inset 0 0 0 2px var(--gold, #d4a93c),
    0 0 0 3px color-mix(in oklab, var(--gold, #d4a93c) 55%, transparent),
    0 calc(var(--tw) * .1) calc(var(--tw) * .18) rgba(40,25,8,.4); }
/* 有台的花牌（正花，方向對到自己座位＝+1 台）：金色高亮框，一眼看出算幾台 */
.tile.flower-scoring { position: relative; }
.tile.flower-scoring .tile-body { box-shadow:
    inset 0 0 0 2px #e0a92e,
    0 0 0 3px rgba(224,169,46,.6),
    0 calc(var(--tw) * .08) calc(var(--tw) * .16) rgba(40,25,8,.4); }
/* 吃/碰/槓來的那張（claimed）：放在面子中間，加底色橫條標示「這張是吃來的」 */
.meld .tile.claimed { position: relative; }
.meld .tile.claimed .tile-body { box-shadow:
    inset 0 0 0 2px #2a7bb5,
    0 0 0 2px rgba(42,123,181,.45),
    0 calc(var(--tw) * .08) calc(var(--tw) * .16) rgba(40,25,8,.4); }
.meld .tile.claimed::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: calc(var(--tw) * -.12);
  height: calc(var(--tw) * .07); border-radius: 999px; background: #2a7bb5; }

/* 出牌建議：建議打出的那張牌往上微抬 + 綠光 + 上方箭頭標記 */
.tile.suggest { transform: translateY(calc(var(--tw) * -.28)); position: relative; z-index: 3; }
.tile.suggest:hover { transform: translateY(calc(var(--tw) * -.36)); }
.tile.suggest .tile-body { box-shadow:
    inset 0 0 0 2px #2faa5a,
    0 0 0 3px rgba(47,170,90,.4),
    0 calc(var(--tw) * .12) calc(var(--tw) * .2) rgba(40,25,8,.45); }
.tile.suggest::after { content: '打這張'; position: absolute; left: 50%; top: calc(var(--tw) * -.5);
  transform: translateX(-50%); font: 800 calc(var(--tw) * .22)/1 var(--sans, sans-serif); color: #fff;
  background: #2faa5a; padding: calc(var(--tw) * .08) calc(var(--tw) * .14); border-radius: 999px;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.35); pointer-events: none; }
.tile.suggest::before { content: ''; position: absolute; left: 50%; top: calc(var(--tw) * -.18);
  transform: translateX(-50%); border: calc(var(--tw) * .1) solid transparent;
  border-top-color: #2faa5a; pointer-events: none; }
.tile.dim { filter: brightness(.82) saturate(.9); }
.tile.ghost { opacity: .5; }
.tile.down .tile-back { position: absolute; inset: 0; border-radius: calc(var(--tw) * .12);
  background:
    repeating-linear-gradient(50deg, rgba(255,255,255,.08) 0 3px, transparent 3px 8px),
    linear-gradient(157deg, var(--tile-back) 0%, var(--tile-back2) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 calc(var(--tw)*.04) 0 rgba(255,255,255,.18),
    0 calc(var(--tw) * .06) calc(var(--tw) * .12) rgba(40,25,8,.32); }

.tile-face { position: absolute; inset: 0; display: grid; place-items: center; }

/* 萬 */
.tile-face.wan { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--tw) * .10); padding-top: calc(var(--tw)*.06); }
.wan-num { font: 800 calc(var(--tw) * .42)/.9 var(--serif); color: var(--tile-red); }
.wan-char { font: 800 calc(var(--tw) * .40)/.9 var(--serif); color: var(--tile-ink); }

/* 筒 dots */
.t-dots { position: relative; width: 66%; height: 66%; }
.dot { position: absolute; width: calc(var(--tw) * .2); height: calc(var(--tw) * .2);
  transform: translate(-50%, -50%); border-radius: 50%;
  border: calc(var(--tw) * .05) solid var(--dot-a);
  background: radial-gradient(circle at 50% 50%, #fff 30%, transparent 32%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

/* 條 bamboo */
.t-bam { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--tw)*.08);
  width: 70%; height: 78%; }
.bam-row { display: flex; justify-content: center; gap: calc(var(--tw) * .1); flex: 1; align-items: stretch; }
.stick { width: calc(var(--tw) * .12); border-radius: 999px;
  background: linear-gradient(180deg, #2c9a5a, var(--tile-green));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.t-bam.one { align-items: center; justify-content: center; flex-direction: column; gap: calc(var(--tw)*.04); }
.t-bam.one .stick.tall { width: calc(var(--tw) * .14); height: 48%; }
.t-bam.one .bird-dot { width: calc(var(--tw)*.22); height: calc(var(--tw)*.22); border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #e0524a, #b3282d); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

/* 字牌 / 花 */
.tile-face.honor { display: grid; place-items: center; }
.honor-char { font: 800 calc(var(--tw) * .56)/1 var(--serif); position: relative; }
.honor-char.red { color: var(--tile-red); }
.honor-char.green { color: var(--tile-green); }
.honor-char.blue { color: var(--tile-blue); }
.honor-char.flower { color: var(--tile-red); font-size: calc(var(--tw) * .5); }
.tile-face.honor .bai-frame { position: absolute; inset: 16%; border: calc(var(--tw)*.05) solid var(--tile-blue); border-radius: 4px; }

/* melds */
.meld { display: flex; gap: 2px; }
.meld .tile { filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }

/* ──────── shared chrome: avatar, coin, chip, bubble ──────── */
.avatar { border-radius: 16px; overflow: hidden; position: relative;
  background: linear-gradient(160deg, #6b5536, #3c2e1b); display: grid; place-items: center; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar .ava-fallback { font: 700 26px var(--serif); color: #e9d9b8; }

.coin { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.coin::before { content: ""; width: 1em; height: 1em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe89a, #e0a92e 60%, #b9831c);
  box-shadow: inset 0 0 0 1.5px #c9941f; }
/* 本將累積輸贏（帶正負號的 tally coin）：不顯示金幣點、改用綠/紅正負色 */
.coin.up, .coin.down, .coin.zero { gap: 0; }
.coin.up::before, .coin.down::before, .coin.zero::before { display: none; }
.coin.up { color: #1f8a3a; }
.coin.down { color: #c23b3b; }
.coin.zero { color: var(--panel-sub); }

.actions { display: flex; gap: 14px; align-items: center; }
#twmj-app .act-chip { width: 102px; height: 102px; border-radius: 50%; position: relative;
  display: grid; place-items: center; font: 800 38px/1 var(--serif); color: #fff;
  background: radial-gradient(circle at 50% 32%, #e0524a, var(--chip, #b3282d) 64%, #8d1f1b);
  box-shadow: 0 6px 0 #7c1a17, 0 10px 18px rgba(0,0,0,.4),
    inset 0 2px 2px rgba(255,255,255,.35), inset 0 0 0 3px rgba(255,255,255,.18),
    inset 0 0 0 6px rgba(0,0,0,.12);
  letter-spacing: .04em; transition: transform .1s, box-shadow .1s, filter .15s; }
#twmj-app .act-chip::after { content: ""; position: absolute; inset: 9px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.35); }
#twmj-app .act-chip:hover { filter: brightness(1.07); }
#twmj-app .act-chip:active { transform: translateY(5px); box-shadow: 0 1px 0 #7c1a17, 0 4px 10px rgba(0,0,0,.4),
  inset 0 2px 2px rgba(255,255,255,.35), inset 0 0 0 3px rgba(255,255,255,.18); }
#twmj-app .act-chip.disabled { background: radial-gradient(circle at 50% 32%, #9a9387, #6f6a60 64%, #58544c);
  box-shadow: 0 6px 0 #44413a, 0 10px 18px rgba(0,0,0,.3), inset 0 0 0 3px rgba(255,255,255,.1);
  color: rgba(255,255,255,.55); cursor: not-allowed; pointer-events: none; }
#twmj-app .act-chip.hu { background: radial-gradient(circle at 50% 32%, #ffd76a, #e0a92e 64%, #b9831c);
  box-shadow: 0 6px 0 #936517, 0 10px 22px rgba(224,169,46,.5),
    inset 0 2px 2px rgba(255,255,255,.5), inset 0 0 0 3px rgba(255,255,255,.3); color: #5a3a06;
  animation: huPulse 1.1s ease-in-out infinite; }
#twmj-app .act-chip.pass { width: 83px; height: 83px; font-size: 28px;
  background: radial-gradient(circle at 50% 32%, #8c8478, #5f5a50 64%, #46423a);
  box-shadow: 0 5px 0 #38352e, 0 8px 14px rgba(0,0,0,.35), inset 0 2px 2px rgba(255,255,255,.2);
  color: #fff; }
#twmj-app .act-chip.pass::after { display: none; }
/* 聽：綠色籌碼（與聽牌雷達/出牌建議的綠呼應），脈動提示可宣告聽牌 */
#twmj-app .act-chip.ting { background: radial-gradient(circle at 50% 32%, #4fd07a, #2faa5a 64%, #1f7a44);
  box-shadow: 0 6px 0 #18603a, 0 10px 22px rgba(47,170,90,.5),
    inset 0 2px 2px rgba(255,255,255,.45), inset 0 0 0 3px rgba(255,255,255,.28); color: #08361d;
  animation: huPulse 1.3s ease-in-out infinite; }
#twmj-app .act-chip.ting::after { border-color: rgba(255,255,255,.4); }
@keyframes huPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.bubble { position: relative; background: #fffdf5; color: #2a2620; border-radius: 16px;
  padding: 12px 18px; box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.06);
  font-weight: 700; }
.bubble .bub-label { font-size: 14px; color: #7a6a4a; font-weight: 700; }
.bubble .bub-main { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.bubble.point-down::after { content: ""; position: absolute; bottom: -10px; left: 28px;
  border: 10px solid transparent; border-top-color: #fffdf5; border-bottom: 0; }

/* ───────────────────────── table ───────────────────────── */
/* base fallback：即使主題規則未命中也不會全黑（用變數，主題會覆蓋細節） */
.table-frame { position: absolute; inset: 0; padding: 14px;
  background: linear-gradient(160deg, var(--wood, #6e4a28), var(--wood2, #4a3018)); }
.felt { position: absolute; inset: 26px; border-radius: 70px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 42%, var(--felt, #2f7a52), var(--felt2, #1d5d3c)); }

/* HUD */
.hud { position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 46px; }
.hud-left { display: flex; flex-direction: column; gap: 10px; }
.round-banner { display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--banner), var(--banner2));
  color: #ffeec8; font: 800 44px/1 var(--serif); letter-spacing: .06em;
  padding: 10px 18px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
  border: 1px solid rgba(0,0,0,.2); }
.round-banner .rb-bracket { opacity: .7; }
.hud-meta { display: flex; align-items: center; gap: 14px; color: var(--hud-ink); font-weight: 700; font-size: 30px; }
.hud-meta .lian { display: inline-flex; align-items: center; gap: 6px; }
.hud-meta .lian b { color: var(--gold-soft); }
.gear { display: inline-flex; align-items: center; gap: 7px; color: var(--hud-sub); font-weight: 700; font-size: 28px;
  background: rgba(0,0,0,.22); padding: 6px 12px; border-radius: 999px; }
.gear:hover { color: var(--hud-ink); }
.gear .gico { font-size: 30px; }
/* 連莊下方：回台灣麻將主頁（選房大廳）連結 */
.hud-home { align-self: flex-start; color: var(--hud-sub); font-weight: 700; font-size: 22px;
  background: rgba(0,0,0,.18); padding: 5px 14px; border-radius: 999px; cursor: pointer;
  transition: color .15s, background .15s; }
.hud-home:hover { color: var(--hud-ink); background: rgba(0,0,0,.3); }

.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.wall-count { display: inline-flex; align-items: center; gap: 9px; color: var(--hud-ink);
  font: 800 38px/1 var(--serif); background: rgba(0,0,0,.24); padding: 9px 15px; border-radius: 12px; }
.wall-count b { color: var(--gold-soft); font-size: 48px; }
.wall-stack { display: flex; gap: 2px; }
.wall-stack i { width: 6px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, var(--tile-back), var(--tile-back2)); }
.stake-info { color: var(--gold-soft); font-weight: 700; font-size: 26px; text-align: right; line-height: 1.4; }
.back-btn { color: var(--hud-sub); font-weight: 700; font-size: 28px;
  background: rgba(0,0,0,.22); padding: 6px 12px; border-radius: 999px; }
.back-btn:hover { color: var(--hud-ink); }

/* opponent seats */
.seat { position: absolute; z-index: 15; display: flex; gap: 12px; }
.seat-top   { top: 8px;  left: 50%; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 6px; z-index: 22; }
.seat-left  { left: 30px; top: 47%; transform: translateY(-50%); flex-direction: column; align-items: flex-start; }
.seat-right { right: 30px; top: 47%; transform: translateY(-50%); flex-direction: column; align-items: flex-end; }
/* 輪到該家：卡片底色換成亮金黃 + 粗金邊 + 強光暈，老人家一眼看出 */
.seat.active .pcard {
  background: linear-gradient(165deg, #fff5c0, #f5d84a);
  border-color: #d4a93c;
  animation: seatPulse 1s ease-in-out infinite; }
@keyframes seatPulse {
  0%,100% { box-shadow: 0 0 0 4px #d4a93c, 0 0 18px 4px rgba(212,169,60,.7), 0 8px 20px rgba(0,0,0,.3); }
  50%     { box-shadow: 0 0 0 6px #f0c93a, 0 0 36px 10px rgba(240,201,58,.9), 0 8px 20px rgba(0,0,0,.3); }
}

.pcard { display: flex; align-items: center; gap: 12px; position: relative;
  background: linear-gradient(165deg, var(--panel), var(--panel2));
  border-radius: 16px; padding: 10px 14px 10px 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.5);
  border: 1px solid var(--line); transition: box-shadow .2s; }
.seat-right .pcard { flex-direction: row-reverse; padding: 10px 10px 10px 14px; }
.pcard .avatar { width: 60px; height: 60px; border: 2px solid var(--gold); flex: 0 0 auto; }
.pcard .pinfo { display: flex; flex-direction: column; gap: 4px; min-width: 76px; }
.seat-right .pcard .pinfo { align-items: flex-end; }
.pcard .pname { font: 700 18px/1 var(--serif); color: var(--panel-ink); display: flex; align-items: center; gap: 6px; }
.pcard .pcoins { color: var(--panel-sub); font-size: 14px; }
.wind-chip { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center;
  font: 800 16px/1 var(--serif); color: #fff; background: linear-gradient(160deg, #3f7d5c, #245c3f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3); flex: 0 0 auto; }
.wind-chip.dealer { background: linear-gradient(160deg, #d4524a, #a8302a); }
.dealer-tag { position: absolute; top: -14px; left: 10px; background: #c0392b; color: #fff8e0;
  font: 900 15px/1 var(--sans); letter-spacing: .08em; padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0,0,0,.45), 0 0 0 2px #f5c842; z-index: 2; }
.seat-right .dealer-tag { left: auto; right: 12px; }

.seat-hand { display: flex; gap: 2px; }
.seat-top .seat-hand .tile { width: var(--hand-tw, 31px); }
.seat-exposed { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.seat-exposed:empty { display: none; }
/* 上家吃碰槓花：限最大寬讓多面子換行，但不往下延伸太深 */
.seat-top .seat-exposed { max-width: 700px; justify-content: center; gap: 6px; }
.seat-melds { display: flex; gap: 7px; flex-wrap: wrap; }
.seat-left .seat-melds, .seat-right .seat-melds { max-width: 180px; }
.seat-top .seat-melds { max-width: 700px; justify-content: center; }
.seat-right .seat-exposed { justify-content: flex-end; }
.seat-right .seat-melds { justify-content: flex-end; }

.flowers { display: inline-flex; align-items: center;
  background: rgba(0,0,0,.18); padding: 3px 5px; border-radius: 8px; width: fit-content; }
.flowers .fl-tiles { display: flex; flex-wrap: wrap; gap: 3px; }
.flowers .fl-tiles .tile { filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }

.hand-mini { display: flex; align-items: center; gap: 10px; }
.seat-right .hand-mini { flex-direction: row-reverse; }
.hm-stack { position: relative; width: 36px; height: 30px; }
.hm-back { position: absolute; top: 0; width: 22px; height: 30px; border-radius: 4px;
  background: linear-gradient(157deg, var(--tile-back), var(--tile-back2));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.3); }
.hm-count { font-size: 13px; font-weight: 700; color: var(--hud-sub);
  background: rgba(0,0,0,.22); padding: 4px 10px; border-radius: 999px; }

/* per-player discards (各家牌河) */
.discards { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10;
  width: 660px; height: 360px; }
.discard-well { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: 70px; height: auto; border-radius: 14px; background: rgba(0,0,0,.14);
  box-shadow: inset 0 0 0 1px var(--felt-line), inset 0 3px 12px rgba(0,0,0,.28);
  display: grid; place-items: center; padding: 6px; }
.center-status { display: none; }
.dz { position: absolute; display: grid; gap: 3px; }
.dz .tile { width: var(--dz-tw, 31px); }
.dz-top    { top: -80px; left: 50%; transform: translateX(-50%); grid-template-columns: repeat(7, 1fr); }
.dz-bottom { bottom: 0;  left: 50%; transform: translateX(-50%); grid-template-columns: repeat(7, 1fr); }
.dz-left   { left: 0;   top: 50%;  transform: translateY(-50%); grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; }
.dz-right  { right: 0;  top: 50%;  transform: translateY(-50%); grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; }
.dz .tile.last .tile-body { box-shadow: inset 0 0 0 2px #46e08a,
  0 0 0 3px color-mix(in oklab, #46e08a 55%, transparent), 0 3px 10px rgba(0,0,0,.35);
  animation: ringPulse 1.3s ease-in-out infinite; }
@keyframes ringPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .8; } }

/* claim bubble — 絕對定位在 action-bar 右端，不佔 flex 空間、不蓋棄牌區 */
.claim-bubble[hidden] { display: none; }
.claim-bubble { position: absolute; right: 200px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; z-index: 5; }
.claim-bubble .bubble { padding: 8px 14px; border-radius: 12px; }
.claim-bubble .bubble .bub-label { font-size: 13px; }
.claim-bubble .bubble .bub-main { margin-top: 4px; gap: 6px; }
.claim-bubble .bubble .bub-main .tile { width: 41px; }
.claim-bubble .bubble.point-down::after { display: none; }

/* your area (bottom) */
.you-area { position: absolute; left: 0; right: 0; bottom: 0; z-index: 18; padding: 0 0 16px; }

.action-bar { position: relative; display: flex; justify-content: center; align-items: center; gap: 24px; margin-bottom: 12px; min-height: 110px; }

/* 多吃法選擇面板：浮在動作列上方、置中 */
.chi-chooser { position: absolute; left: 50%; bottom: 280px; transform: translateX(-50%); z-index: 30;
  background: linear-gradient(165deg, #f0e2bb, #e1cb95); border: 1px solid rgba(74,48,24,.3);
  border-radius: 18px; padding: 16px 20px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.chi-chooser[hidden] { display: none; }
.chi-chooser-head { font: 800 18px/1 var(--serif); color: #3a2812; text-align: center; margin-bottom: 12px; }
.chi-options { display: flex; gap: 14px; justify-content: center; }
.chi-option { display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #fffdf5; border: 2px solid #d4a93c; border-radius: 14px; padding: 12px 16px; cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.chi-option:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 10px 22px rgba(0,0,0,.3); }
.chi-tiles { display: flex; gap: 3px; }
.chi-label { font: 700 14px/1 var(--sans); color: #5a3a14; }
.chi-cancel { display: block; margin: 14px auto 0; padding: 8px 22px; border-radius: 999px;
  background: rgba(74,48,24,.12); color: #4a3416; font: 800 14px/1 var(--sans); }
.chi-cancel:hover { background: rgba(74,48,24,.2); }
.ting-hint { position: absolute; right: 26px; bottom: 232px; z-index: 21;
  background: linear-gradient(180deg, #fffdf5, #f6ecd2); color: #4a3416;
  border-radius: 14px; padding: 11px 15px; max-width: 230px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 0 0 1px var(--gold); }
.ting-hint .th-top { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 15px; color: #b3282d; }
.ting-hint .th-list { margin-top: 7px; font-size: 13px; color: #6a5230; line-height: 1.5; }
.ting-hint .th-list b { color: #1f7a44; }

/* 右側常駐動作面板：胡/槓/聽/解除聽牌/吃/碰/過 都做在卡片右邊（圓形大鈕好按），聽牌中也一直看得到 */
.side-actions { position: absolute; right: 36px; bottom: 150px; z-index: 22;
  display: flex; flex-direction: column; align-items: center; gap: 16px; }
.side-actions[hidden] { display: none; }
/* 側欄沿用中央圓形籌碼鈕（圓形好按）；聽牌/取消與吃碰槓同形狀同位置 */
#twmj-app .side-actions .act-chip { width: 96px; height: 96px; font-size: 36px;
  letter-spacing: 0; white-space: nowrap; line-height: 1; }
/* 多字鈕（取消聽）縮字以放進圓內 */
#twmj-app .side-actions .act-chip.pass { width: 96px; height: 96px; font-size: 23px; padding: 0 6px; }

.hand-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.you-exposed { display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-wrap: wrap;
  max-width: 1100px; padding: 8px 14px; border-radius: 14px; background: rgba(0,0,0,.14);
  box-shadow: inset 0 0 0 1px var(--felt-line); }
.you-exposed:empty { display: none; }
.you-exposed .meld { gap: 2px; }
.you-exposed .meld .tile { filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }

/* 手牌固定牌寬 80px（長者友善，不動）。整排從原本的 -70px 左移「往右調一點點」→ -28px，
   讓莊家滿手 17 張左邊不出枱、右邊仍放得下。位移量只是這個單一數字，要再微調改它即可。 */
.hand-dock { display: flex; align-items: flex-end; justify-content: center; gap: 12px;
  transform: translateX(-28px); }
.hand-groups { display: flex; align-items: flex-end; gap: 0;
  background: rgba(0,0,0,.16); padding: 12px 14px 12px; border-radius: 18px 18px 8px 8px;
  box-shadow: inset 0 0 0 1px var(--felt-line); position: relative; }
.hand-group { display: flex; flex-direction: column; align-items: center; gap: 0; }
.hand-group .hg-tiles { display: flex; gap: 3px; }
.hand-group .hg-label { display: none; }
.group-sep { display: none; }

/* 摸牌不晃手牌：左右各保留等寬空槽（剛摸牌 80px），無論有無摸牌都對稱，
   .hand-groups 恆在 .hand-dock 正中央，不會因 drawn-dock 出現/消失而左右位移 */
.hand-dock .dock-spacer { width: 80px; flex: 0 0 80px; align-self: stretch; }
.drawn-dock-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 80px; flex: 0 0 80px; }
.drawn-dock { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.drawn-dock[hidden] { display: none; }
.drawn-dock-wrap { position: relative; }
/* 分隔虛線只在真的有摸牌時顯示（避免空槽留下幻影線） */
.drawn-dock-wrap:has(.drawn-dock:not([hidden]))::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 30px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--gold-soft) 0 5px, transparent 5px 10px); opacity: .5; }
.drawn-dock .dd-label { font-size: 12px; font-weight: 700; color: var(--gold-soft); letter-spacing: .08em; }
.drawn-dock .tile { width: 80px; animation: drawIn .5s cubic-bezier(.3,1.3,.5,1) backwards; }
@keyframes drawIn { from { transform: translateY(-40px) rotate(-6deg); } to { transform: none; } }

/* 橫向排版：頭像在左、稱呼+金幣兩列在右 → 整體最多 2 列高（不再三層堆疊） */
.you-corner { position: absolute; left: 20px; bottom: 175px; z-index: 20;
  display: flex; flex-direction: row; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 16px; transition: box-shadow .2s, background .2s;
  white-space: nowrap;
  /* 與其他 3 家對手卡片 .pcard 同款米色面板，四家外觀一致 */
  background: linear-gradient(165deg, var(--panel), var(--panel2));
  box-shadow: 0 8px 20px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.5);
  border: 1px solid var(--line); }
.you-corner .yc-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.you-corner .yc-name { font: 700 17px/1 var(--serif); color: var(--panel-ink); display: flex; align-items: center; gap: 7px; }
.you-corner .yc-coin { color: var(--panel-sub); font-size: 13px; }
.you-corner .ready-badge { font: 800 19px/1 var(--serif); color: #fff;
  background: linear-gradient(160deg, #d4524a, #a8302a); padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(168,48,42,.5); letter-spacing: .12em;
  animation: readyPulse 1.4s ease-in-out infinite; }
@keyframes readyPulse { 0%,100% { box-shadow: 0 2px 8px rgba(168,48,42,.5); }
  50% { box-shadow: 0 2px 14px rgba(212,82,74,.9); } }
/* 輪到你：角落底色亮金黃 + 強光暈脈動 */
#twmj-app.your-turn .you-corner {
  background: linear-gradient(135deg, #fff5c0, #f5d84a);
  animation: cornerPulse 1s ease-in-out infinite; }
@keyframes cornerPulse {
  0%,100% { box-shadow: 0 0 0 4px #d4a93c, 0 0 18px 4px rgba(212,169,60,.7); }
  50%     { box-shadow: 0 0 0 6px #f0c93a, 0 0 36px 10px rgba(240,201,58,.9); }
}

/* 連莊骰子 */
.lz-dice { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap;
  background: rgba(0,0,0,.22); padding: 4px 8px; border-radius: 999px; }
.lz-dice:empty { display: none; }
.lz-dice .die { font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

/* 自家連莊骰子 */
.you-corner .lz-dice { margin-top: 0; align-self: center; }

/* ───────────── overlays: setup / settings / results ───────────── */
.overlay-dim[hidden] { display: none; }   /* [hidden] 屬性的 display:none 規則特異度低於 class，需顯式覆蓋 */
.overlay-dim { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(8,7,5,.45); backdrop-filter: blur(3px);
  /* 內容比視窗高時可捲動，避免底部按鈕被截斷 */
  overflow: auto; padding: 20px 0; }
/* 覆蓋層面板（設定/結算）：底色「寫死」米色，不靠主題變數 →
   不會因主題未載入/快取舊 CSS 而變透明（同大廳處理，穩定優先）。 */
/* 擲骰面板 */
.dice-roll-panel { background: linear-gradient(165deg,#f0e2bb,#e1cb95);
  border-radius: 24px; padding: 36px 56px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.dice-roll-title { font: 800 26px/1 var(--serif); color: #3a2812; }
.dice-roll-area { display: flex; gap: 28px; }
.roll-die { font-size: 76px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.dice-total { font: 700 22px/1 var(--serif); color: #5a3a14; min-height: 28px; }
.dice-dealer { font: 800 30px/1 var(--serif); color: #b3282d; min-height: 38px; }

.panel-card { background: linear-gradient(165deg, #f0e2bb, #e1cb95);
  color: #3a2812; border-radius: 24px; padding: 30px 34px; min-width: 460px; max-width: 600px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5); border: 1px solid rgba(74,48,24,.3); }
.panel-card h2 { font: 800 30px/1.1 var(--serif); margin: 0 0 6px; color: #3a2812; }
.panel-card .pc-sub { color: #7a5a30; font-size: 15px; margin-bottom: 22px; }

/* ───────────── 選房大廳（脫離 .mj-device scale，直接填滿 #twmj-app）───────────── */
.mj-setup-screen {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, #6e4a28 0%, #5a3c22 45%, #3a2614 100%);
  background-color: #3a2614;
  font-family: "Noto Serif TC", "Songti TC", serif;
  -webkit-font-smoothing: antialiased;
}
.mj-setup-screen[hidden] { display: none; }

/* 內容卡：最大寬度 860px，上下左右 padding */
.mjs-inner {
  width: 100%; max-width: 860px;
  padding: 36px 40px;
  box-sizing: border-box;
}

/* 頂部品牌列 + 個人卡 */
.lobby-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 12px; }
.lobby-brand { display: flex; align-items: center; gap: 16px; }
.lobby-brand > div { flex: 0 0 auto; }
.lobby-logo { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  font: 800 44px/1 "Noto Serif TC", serif; color: #fff;
  background: linear-gradient(160deg, #a3242a, #7d191e);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 8px 18px rgba(0,0,0,.4); }
.lobby-title { font: 800 40px/1 "Noto Serif TC", serif; color: #f7ecd2; letter-spacing: .04em; white-space: nowrap; }
.lobby-sub { color: #d9b87a; font-size: 17px; margin-top: 6px; letter-spacing: .12em; white-space: nowrap; }
.lobby-me { display: flex; align-items: center; gap: 12px; background: linear-gradient(165deg, #f0e2bb, #e1cb95);
  padding: 10px 16px; border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.3); border: 1px solid rgba(74,48,24,.3); }
.lobby-me .avatar { width: 44px; height: 44px; border: 2px solid #d4a93c; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; background: linear-gradient(160deg,#6b5536,#3c2e1b); }
.lobby-me .avatar .ava-fallback { font: 700 18px "Noto Serif TC", serif; color: #e9d9b8; }
.lobby-me .lm-name { font: 700 20px/1 "Noto Serif TC", serif; color: #3a2812; }
.lobby-me .lm-coins { display: flex; align-items: center; gap: 5px; color: #7a5a30; font-size: 16px; font-weight: 700; margin-top: 5px; }

/* 房間標題列 */
.rooms-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; }
.rooms-head h3 { font: 700 26px/1 "Noto Serif TC", serif; color: #f7ecd2; margin: 0; }
.rooms-head .rh-sub { color: #d9b87a; font-size: 15px; }

/* 房間網格：桌機 2 欄，手機單欄 */
.room-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.room { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(165deg, #f0e2bb, #e1cb95); border: 1px solid rgba(74,48,24,.30);
  box-shadow: 0 6px 16px rgba(0,0,0,.28); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.room:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.4); }
.room:active { transform: translateY(0); }
.room-mark { width: 48px; height: 48px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center;
  font: 800 28px/1 "Noto Serif TC", serif; color: #fff; background: linear-gradient(160deg, #5a8f72, #36664f); }
.room-info { flex: 1; min-width: 0; }
.room-name { font: 700 22px/1 "Noto Serif TC", serif; color: #3a2812; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.room-name .hot { font-size: 13px; font-weight: 800; color: #fff; background: #d4524a; padding: 2px 6px; border-radius: 999px; }
.room-stake { color: #7a5a30; font-size: 17px; font-weight: 700; margin-top: 5px; }
.room-level { font-size: 14px; color: #8a6a3c; font-weight: 700; margin-top: 3px; }
.room-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.room-seats { display: flex; gap: 4px; }
.room-seats i { width: 10px; height: 10px; border-radius: 50%; background: rgba(74,48,24,.25); }
.room-seats i.on { background: #d4a93c; }
.room-enter { color: #4a2e06; font: 800 16px/1 "Noto Sans TC", sans-serif; padding: 9px 18px; border-radius: 999px;
  background: linear-gradient(180deg, #f4d781 0%, #d9a93a 55%, #b9831c 100%);
  border: 1px solid #9a6c14;
  box-shadow: 0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.55); white-space: nowrap; }
.room-enter:hover { filter: brightness(1.06); }
.room-enter:active { transform: translateY(1px); }

/* 手機：單欄、字縮小 */
@media (max-width: 600px) {
  .mjs-inner { padding: 20px 16px; }
  .lobby-title { font-size: 26px; }
  .lobby-logo { width: 40px; height: 40px; font-size: 32px; }
  .room-grid { grid-template-columns: 1fr; }
  .rooms-head h3 { font-size: 20px; }
}
/* 矮視窗（手機橫式）：縮小上下間距 */
@media (max-height: 500px) {
  .mjs-inner { padding: 12px 24px; }
  .lobby-head { margin-bottom: 4px; }
  .rooms-head { margin: 10px 0 8px; }
  .room { padding: 10px 14px; }
  .room-name { font-size: 18px; }
  .room-stake { font-size: 14px; margin-top: 3px; }
}

/* settings rows（底色寫死，深棕字，金色分段控制） */
.set-group { margin-bottom: 20px; }
.set-group .sg-title { font: 800 14px/1 var(--sans); letter-spacing: .1em; color: #8a6a3c;
  text-transform: uppercase; margin-bottom: 10px; }
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0;
  border-bottom: 1px solid rgba(74,48,24,.2); font-weight: 700; font-size: 16px; color: #3a2812; }
.set-row:last-child { border-bottom: none; }
.seg { display: inline-flex; background: rgba(74,48,24,.12); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { padding: 6px 14px; border-radius: 999px; font: 700 14px/1 var(--sans); color: #7a5a30; }
.seg button.active { background: linear-gradient(180deg, #f4d781, #d9a93a); color: #4a2e06; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
/* 個人 / 固定牌友設定控件 */
#mj-settings .panel-card { max-height: calc(100% - 40px); overflow: auto; width: 560px; max-width: 92%; }
.set-input { font: 700 16px/1 var(--sans); color: #3a2812; background: #fffdf5;
  border: 1.5px solid #d4a93c; border-radius: 10px; padding: 8px 12px; min-width: 0; }
.set-input:focus { outline: none; border-color: #b9831c; box-shadow: 0 0 0 3px rgba(212,169,60,.3); }
.ava-edit { display: flex; align-items: center; gap: 10px; }
.ava-edit-pic { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center; background: rgba(74,48,24,.12); font-size: 26px; }
.ava-edit-pic img.ava-photo, .avatar img.ava-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-btn { font: 700 13px/1 var(--sans); color: #5a3a14; background: #f4d781;
  padding: 7px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; }
.mini-btn:hover { filter: brightness(1.05); }
.mini-btn.ghost { background: rgba(74,48,24,.12); color: #6a4a20; }
.friend-row { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(74,48,24,.15); }
.friend-row:last-child { border-bottom: none; }
.friend-row .friend-pic { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center; background: rgba(74,48,24,.12); font-size: 24px; }
.friend-row .friend-name { flex: 1; }
/* 你的座位頭像 */
.you-corner .yc-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: rgba(0,0,0,.2); font-size: 24px; }

.panel-actions { display: flex; gap: 12px; margin-top: 8px; }
.btn { flex: 1; padding: 14px; border-radius: 14px; font: 800 18px/1 var(--serif); transition: filter .12s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn-secondary { background: rgba(74,48,24,.12); color: #3a2812; }
.btn-primary { background: linear-gradient(180deg, #f4d781 0%, #d9a93a 55%, #b9831c 100%);
  color: #4a2e06; border: 1px solid #9a6c14; box-shadow: 0 6px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5); }
.btn:hover { filter: brightness(1.05); }

/* results（底色寫死米色；紅橫幅、紅台數、金按鈕） */
/* 加寬，開牌每排更容易單行放下 → 整體變矮；並限高 + 卡片內捲動，底部按鈕一定看得到 */
/* 結算卡加寬：開牌每排更易單行放下→整體變矮；限高+內捲動，底部「下一局」按鈕一定看得到 */
.res-card { text-align: center; min-width: 720px; max-width: 1000px; width: 900px;
  max-height: 940px; overflow-y: auto; overflow-x: hidden; }
/* 底部按鈕黏在結算卡底，捲動時也一直看得到、不會被截 */
.res-card .panel-actions { position: sticky; bottom: -30px; margin-top: 22px;
  gap: 24px; padding-top: 18px; background: linear-gradient(180deg, rgba(240,226,187,0), #ead9b0 28%); }
/* 結算兩個按鈕(回大廳/下一局)高度與字型放大一倍，整體高度跟著調 */
.res-card .panel-actions .btn { padding: 28px; font: 800 36px/1 var(--serif); border-radius: 18px; }
.res-banner { display: inline-flex; gap: 14px; font: 900 56px/1 var(--serif); color: #fff;
  -webkit-text-stroke: 1px #8d1f1b; text-shadow: 0 4px 0 #8d1f1b, 0 10px 22px rgba(0,0,0,.4);
  margin-bottom: 8px; animation: resPop .5s cubic-bezier(.34,1.4,.5,1); }
.res-sub { color: #7a5a30; font-weight: 700; font-size: 21px; margin-bottom: 22px; }
/* 各家開牌列（設計稿 .rv-row；色彩寫死米色面板系，不靠主題變數） */
.res-reveal { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; text-align: left; }
.rv-row { display: flex; align-items: center; gap: 16px; padding: 9px 14px; border-radius: 14px;
  background: rgba(74,48,24,.06); border: 1px solid rgba(74,48,24,.18); }
.rv-row.win { background: linear-gradient(180deg, rgba(212,169,60,.26), rgba(212,169,60,.12));
  border-color: #d4a93c; box-shadow: inset 0 0 0 1px #d4a93c; }
.rv-row.dealin { background: rgba(163,36,42,.09); }
.rv-who { display: flex; align-items: center; gap: 11px; width: 150px; flex: 0 0 auto; }
.rv-who .avatar { width: 44px; height: 44px; border: 2px solid #d4a93c; border-radius: 12px; flex: 0 0 auto; }
.rv-who .avatar .ava-fallback { font-size: 22px; }
.rv-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rv-name { font: 700 16px/1 var(--serif); color: #3a2812; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv-dealer { font: 800 11px/1 var(--sans); color: #fff; background: #a3242a; padding: 2px 6px; border-radius: 5px; }
.rv-role { font: 800 11px/1 var(--sans); padding: 2px 7px; border-radius: 999px; letter-spacing: .05em; }
.rv-role.win { background: #d4a93c; color: #4a3406; }
.rv-role.deal-in { background: #a3242a; color: #fff; }
.rv-role.lose { background: rgba(74,48,24,.16); color: #6a4a20; }
.rv-role.draw { background: rgba(74,48,24,.14); color: #6a4a20; }
.rv-delta { font: 800 16px/1 var(--serif); }
.rv-delta.up { color: #1f7a44; }
.rv-delta.down { color: #a3242a; }
.rv-delta.zero { color: #8a6a3c; }
.rv-tiles { flex: 1; display: flex; align-items: flex-end; gap: 3px; flex-wrap: wrap; }
.rv-tiles .meld { margin-right: 2px; }
.rv-sep { width: 2px; align-self: stretch; margin: 2px 6px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, rgba(74,48,24,.4) 0 4px, transparent 4px 8px); }
.res-flowers { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center;
  width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(106,74,32,.4); }
.res-fl-sep { width: 1px; align-self: stretch; min-height: 28px; margin: 0 4px;
  background: rgba(106,74,32,.4); flex-shrink: 0; }
.res-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align: left; margin-bottom: 22px; }
.res-cols .rc-title { font: 800 15px/1 var(--serif); color: #8a6a3c; margin-bottom: 10px;
  letter-spacing: .06em; }
.tai-item { display: flex; justify-content: space-between; padding: 6px 0; font-weight: 700; font-size: 15px;
  color: #3a2812; border-bottom: 1px dashed rgba(74,48,24,.25); }
.tai-item b { color: #a3242a; }
.settle-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 15px; font-weight: 700; color: #3a2812; }
.settle-row.total { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(74,48,24,.25); font-size: 18px; }
.settle-row.total .income { font: 900 32px/1 var(--serif); color: #a3242a; }
@keyframes resPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ───────────────────────── themes ───────────────────────── */
#twmj-app[data-theme="classic"] {
  --gold:#d4a93c; --gold-soft:#f0d99a; --chip:#b3282d;
  --felt:#2f7a52; --felt2:#1d5d3c; --felt-line:rgba(255,255,255,.10);
  --wood:#6e4a28; --wood2:#4a3018; --wood3:#3a2412;
  --panel:#ecd9ad; --panel2:#dcc28a; --panel-ink:#4a3416; --panel-sub:#7a5a30;
  --line:rgba(74,48,24,.28);
  --hud-ink:#f3e6c8; --hud-sub:#d9b87a;
  --banner:#a3242a; --banner2:#7d191e;
  --bg-1:#5a3c22; --bg-2:#3a2614;
}
#twmj-app[data-theme="classic"] .mj-device {
  background: radial-gradient(120% 90% at 50% 0%, #7a542f 0%, var(--bg-1) 40%, var(--bg-2) 100%);
}
#twmj-app[data-theme="classic"] .table-frame {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #7c5631 0%, var(--wood) 45%, var(--wood2) 100%);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.3), inset 0 0 0 10px #5e3f20,
    inset 0 0 0 13px var(--gold), inset 0 0 40px rgba(0,0,0,.5);
}
#twmj-app[data-theme="classic"] .felt {
  background: radial-gradient(70% 60% at 50% 42%, #3a8f63 0%, var(--felt) 45%, var(--felt2) 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.4), inset 0 0 0 2px rgba(0,0,0,.25);
}
#twmj-app[data-theme="classic"] .felt::before {
  content:""; position:absolute; inset:14% 20%; border-radius:50%/40%;
  border:2px solid rgba(212,169,60,.18); box-shadow: 0 0 0 8px rgba(212,169,60,.07);
}

#twmj-app[data-theme="modern"] {
  --gold:#c9a86a; --gold-soft:#e6cf9c; --chip:#c0463d;
  --felt:#13524b; --felt2:#0c3a35; --felt-line:rgba(201,168,106,.12);
  --wood:#2a2521; --wood2:#1b1815; --wood3:#100e0c;
  --panel:#f4efe6; --panel2:#e6ddcb; --panel-ink:#2a2521; --panel-sub:#7d7567;
  --line:rgba(255,255,255,.10);
  --hud-ink:#f1ead9; --hud-sub:#bdb39c;
  --banner:#1f6f63; --banner2:#114a42;
  --bg-1:#23201c; --bg-2:#100e0c;
}
#twmj-app[data-theme="modern"] .mj-device {
  background: radial-gradient(120% 90% at 50% 0%, #2c2823, var(--bg-1) 45%, var(--bg-2) 100%);
}
#twmj-app[data-theme="modern"] .table-frame {
  background: linear-gradient(160deg, #322c27 0%, var(--wood) 50%, var(--wood2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 0 8px #1b1815,
    inset 0 0 0 9px rgba(201,168,106,.5), inset 0 0 50px rgba(0,0,0,.55);
}
#twmj-app[data-theme="modern"] .felt {
  background: radial-gradient(75% 65% at 50% 40%, #196057 0%, var(--felt) 48%, var(--felt2) 100%);
  box-shadow: inset 0 0 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(201,168,106,.25);
}
#twmj-app[data-theme="modern"] .felt::before {
  content:""; position:absolute; inset:16% 22%; border-radius:50%/42%;
  border:1px solid rgba(201,168,106,.16);
}

#twmj-app[data-theme="minimal"] {
  --gold:#b08453; --gold-soft:#d8b483; --chip:#c1714a;
  --felt:#9aa988; --felt2:#8a9a78; --felt-line:rgba(58,53,46,.07);
  --wood:#e7dcc8; --wood2:#d8c9ad; --wood3:#c8b793;
  --panel:#faf6ee; --panel2:#efe8da; --panel-ink:#3a352e; --panel-sub:#8a8275;
  --line:rgba(58,53,46,.14);
  --hud-ink:#3a352e; --hud-sub:#8a8275;
  --banner:#c1714a; --banner2:#a85b38;
  --bg-1:#efe8da; --bg-2:#e2d8c5;
  --tile-back:#9aa988; --tile-back2:#7e8e6c;
}
#twmj-app[data-theme="minimal"] .mj-device {
  background: linear-gradient(160deg, #f3ede1, var(--bg-1) 45%, var(--bg-2) 100%);
}
#twmj-app[data-theme="minimal"] .table-frame {
  background: linear-gradient(160deg, #efe6d4, var(--wood) 55%, var(--wood2) 100%);
  box-shadow: inset 0 0 0 1px rgba(58,53,46,.12), inset 0 0 0 7px #f3ede1,
    inset 0 0 0 8px rgba(176,132,83,.5);
}
#twmj-app[data-theme="minimal"] .felt {
  background: radial-gradient(75% 65% at 50% 40%, #a6b495 0%, var(--felt) 50%, var(--felt2) 100%);
  box-shadow: inset 0 0 0 1px rgba(58,53,46,.12);
}
#twmj-app[data-theme="minimal"] .felt::before {
  content:""; position:absolute; inset:17% 24%; border-radius:50%/42%;
  border:1px dashed rgba(58,53,46,.16);
}
#twmj-app[data-theme="minimal"] .act-chip {
  background: var(--chip); box-shadow: 0 4px 0 color-mix(in oklab, var(--chip) 70%, #000),
    0 8px 14px rgba(0,0,0,.2); border-radius: 18px; font-weight: 800; }
#twmj-app[data-theme="minimal"] .act-chip::after { display:none; }
#twmj-app[data-theme="minimal"] .act-chip.hu { color:#fff; background: var(--gold);
  box-shadow: 0 4px 0 color-mix(in oklab, var(--gold) 70%, #000), 0 8px 16px rgba(0,0,0,.2); }
#twmj-app[data-theme="minimal"] .act-chip.disabled { background:#bdb6a8; box-shadow:0 4px 0 #9a9384; color:#fff; }
#twmj-app[data-theme="minimal"] .tile-body { box-shadow:
    inset 0 0 0 1px var(--tile-edge), 0 2px 5px rgba(58,53,46,.18); }

@media (prefers-reduced-motion: reduce) {
  #twmj-app *, #twmj-app *::before, #twmj-app *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}