:root {
  /* 預設主題：陽光草地（明亮） */
  --page-solid: #fff6dc;
  --page-bg: radial-gradient(circle at 88% -6%, rgba(255,236,150,.95) 0 90px, rgba(255,236,150,0) 260px),
             linear-gradient(180deg, #bfe6ff 0%, #e4f5ff 38%, #fff6dc 100%);
  --felt: #ffffff;          /* 對話框 */
  --felt-dark: #fffaf0;     /* 側邊面板 */
  --table-a: #a8e29a;
  --table-b: #8ed27f;
  --table-c: #74bf68;
  --rim: #e7b979;
  --rim-hi: #f7dcae;
  --table-shadow: 0 14px 30px rgba(90,120,60,.25);
  --pattern: none;
  --pattern-size: auto;
  --text: #2f3b2f;
  --muted: #66756a;
  --gold: #ff9a3c;          /* 強調色 */
  --gold-dark: #d9741a;
  --on-gold: #ffffff;
  --panel: rgba(255,255,255,.72);
  --panel-strong: rgba(255,255,255,.86);
  --panel-line: rgba(80,110,70,.12);
  --panel-shadow: 0 6px 20px rgba(90,120,60,.12);
  --row: rgba(80,110,70,.07);
  --chip: rgba(255,255,255,.9);
  --chip-text: #2f3b2f;
  --chip-muted: #66756a;
  --btn: #ffffff;
  --btn-text: #2f3b2f;
  --btn-shadow: #d9cdb4;
  --line: rgba(47,59,47,.22);
  --input: #ffffff;
  --overlay: rgba(40,60,40,.35);
  --meld: rgba(255,255,255,.55);
  --ivory: #f7efdc;
  --ivory-edge: #d9c9a3;
  --tile-side: #b89a5e;
  --red: #b3261e;
  --black: #1e1e1e;
  --tw: min(calc((100vw - 84px) / 8.6), 56px);
  --sw: 20px;
  --xw: 16px;
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--page-solid); }
html, body { margin: 0; }

body {
  min-height: 100vh;
  isolation: isolate;
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

#app { max-width: 1100px; margin: 0 auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }

h1, h2, h3 { margin: 0; font-weight: 700; }

button {
  font: inherit;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  background: var(--btn);
  color: var(--btn-text);
  font-weight: 600;
  box-shadow: 0 2px 0 var(--btn-shadow);
  transition: transform 0.08s, filter 0.15s;
}
button:active { transform: translateY(2px); box-shadow: none; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--gold); color: var(--on-gold); box-shadow: 0 2px 0 var(--gold-dark); }
button.danger { background: #e9573f; color: #fff; box-shadow: 0 2px 0 #9b2c1b; }
button.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
button.big { padding: 14px 18px; font-size: 1.1rem; width: 100%; }

input, select {
  font: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--input);
  color: var(--text);
  min-width: 0;
}
select option { color: #222; }

.muted { color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.hidden { display: none !important; }

/* ---------- 首頁 / 大廳 ---------- */
.home { max-width: 460px; margin: 4vh auto 0; }
.logo { text-align: center; margin-bottom: 18px; }
.logo .pieces { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.logo h1 { font-size: 2.2rem; letter-spacing: .2em; }
.logo p { margin: 6px 0 0; }

.card {
  background: var(--panel);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--panel-line);
  box-shadow: var(--panel-shadow);
}
.card h2 { font-size: 1.05rem; margin-bottom: 10px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .9rem; color: var(--muted); }
.check { display: flex; gap: 8px; align-items: center; font-size: .95rem; }
.check input { width: 18px; height: 18px; }

.code {
  font-size: 2.6rem; letter-spacing: .3em; font-weight: 800; text-align: center;
  color: var(--gold-dark); font-family: ui-monospace, Menlo, monospace; padding: 4px 0;
}
.seat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.seat-list li { background: var(--row); border-radius: 10px; padding: 9px 12px; display: flex; justify-content: space-between; }
.error { background: rgba(233,87,63,.14); border: 1px solid #e9573f; border-radius: 10px; padding: 10px 12px; }

/* ---------- 牌 ---------- */
.tile {
  --s: var(--tw);
  width: var(--s);
  height: calc(var(--s) * 1.25);
  border-radius: calc(var(--s) * 0.16);
  background: linear-gradient(180deg, #fffaf0, var(--ivory) 70%, var(--ivory-edge));
  box-shadow: 0 calc(var(--s) * 0.07) 0 var(--tile-side), 0 calc(var(--s) * 0.1) calc(var(--s) * 0.12) rgba(0,0,0,.35);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  flex: none;
  user-select: none;
  font-family: "Kaiti TC", "STKaiti", "KaiTi", "BiauKai", "Noto Serif TC", serif;
  font-weight: 700;
  font-size: calc(var(--s) * 0.5);
  line-height: 1;
}
.tile::before {
  content: "";
  position: absolute;
  width: calc(var(--s) * 0.82);
  height: calc(var(--s) * 0.82);
  border-radius: 50%;
  border: max(1.5px, calc(var(--s) * 0.045)) solid currentColor;
  opacity: .8;
}
.tile.r { color: var(--red); }
.tile.b { color: var(--black); }
.tile.back {
  background: linear-gradient(180deg, #3f8a64, #2b6a4b);
  box-shadow: 0 calc(var(--s) * 0.07) 0 #1b4632, 0 calc(var(--s) * 0.1) calc(var(--s) * 0.12) rgba(0,0,0,.35);
}
.tile.back::before { display: none; }
.tile.sm { --s: var(--sw); }
.tile.xs { --s: 13px; }
.tile.xs-face { --s: var(--xw); }
.tile.xs::before { display: none; }
.tile.last { outline: 2.5px solid var(--gold); outline-offset: 1px; }
.tile.win { outline: 3px solid var(--gold); outline-offset: 2px; }

.hand .tile { cursor: pointer; transition: transform .12s; }
.hand.can-play .tile:hover { transform: translateY(-4px); }
.hand .tile.sel { transform: translateY(calc(var(--tw) * -0.35)); }
.hand .tile.new { margin-left: calc(var(--tw) * 0.3); }

.tiles { display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-end; }
.meld { display: inline-flex; gap: 1px; padding: 2px 3px; border-radius: 6px; background: var(--meld); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 65%, transparent); }
.melds { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- 牌桌 ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.topbar .info { display: flex; gap: 8px; flex-wrap: wrap; font-size: .9rem; }
.pill { background: var(--panel); box-shadow: var(--panel-shadow); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.pill strong { color: var(--gold-dark); }

.me { background: var(--panel-strong); border-radius: 16px; padding: 10px 12px 12px; border: 2px solid transparent; box-shadow: var(--panel-shadow); }
.me.turn { border-color: var(--gold); }
.me .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.me .sect { margin-bottom: 8px; }
.me .head .avatar { margin-right: 2px; }
.me .hand { display: flex; flex-wrap: nowrap; gap: 3px; padding-top: calc(var(--tw) * 0.4); overflow-x: auto; padding-bottom: 6px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; min-height: 46px; }
.actions .hint { flex: 1 1 100%; font-size: .95rem; }
.actions .hint b { color: var(--gold-dark); }
.actions button { display: inline-flex; align-items: center; gap: 6px; }
.actions button .tile { --s: 20px; }
.actions button .tile::before { display: none; }


/* ---------- 結算 ---------- */
.overlay {
  position: fixed; inset: 0; background: var(--overlay);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 16px; overflow-y: auto; z-index: 10;
}
.dialog {
  background: var(--felt);
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  padding: 16px;
  width: min(640px, 100%);
  margin-top: 4vh;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.dialog h2 { font-size: 1.5rem; text-align: center; margin-bottom: 4px; color: var(--gold-dark); }
.dialog .sub { text-align: center; margin-bottom: 14px; }
.result-row { padding: 8px 10px; border-radius: 12px; background: var(--row); margin-bottom: 6px; }
.result-row.winner { background: color-mix(in srgb, var(--gold) 18%, transparent); border: 1px solid var(--gold); }
.result-row .head { display: flex; justify-content: space-between; margin-bottom: 6px; font-weight: 700; }
.rules { line-height: 1.7; }
.rules ul { padding-left: 1.2em; margin: 6px 0; }

@media (min-width: 720px) {
  :root { --sw: 28px; --xw: 22px; }
  #app { padding-top: 18px; }
}


.sm-btn { padding: 7px 11px; font-size: .9rem; }

/* ---------- 牌桌 ---------- */
.table {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 14px 10px 10px;
  margin-bottom: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  isolation: isolate;
}
.table.opp-3 { grid-template-areas: ". top top top top ." "left left center center right right" "me me me me me me"; }
.table.opp-4 { grid-template-areas: "tl tl tl tr tr tr" "left left center center right right" "me me me me me me"; }
/* 傾斜的橢圓牌桌（只有桌面背景傾斜，牌不變形，動畫才準） */
.table::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 46% / 40%;
  background: radial-gradient(ellipse at 50% 40%, var(--table-a), var(--table-b) 60%, var(--table-c));
  border: 10px solid var(--rim);
  box-shadow: inset 0 0 0 3px var(--rim-hi), inset 0 8px 30px rgba(0,0,0,.18), var(--table-shadow);
  transform: perspective(900px) rotateX(14deg);
  transform-origin: 50% 60%;
}
.zone { display: flex; flex-direction: column; gap: 4px; align-items: center; min-width: 0; }
.zone.pos-top { grid-area: top; }
.zone.pos-top-left { grid-area: tl; }
.zone.pos-top-right { grid-area: tr; }
.zone.pos-left { grid-area: left; }
.zone.pos-right { grid-area: right; }
.zone.pos-me { grid-area: me; }

.seat-info {
  display: flex; align-items: center; gap: 6px;
  background: var(--chip);
  color: var(--chip-text);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  max-width: 100%;
  border: 2px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.zone.turn .seat-info { border-color: var(--gold); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 70%, transparent); }
.seat-text { min-width: 0; line-height: 1.15; }
.seat-name { display: flex; gap: 4px; align-items: center; font-size: .85rem; font-weight: 700; min-width: 0; }
.seat-name .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-meta { font-size: .72rem; color: var(--chip-muted); }
.seat-tiles { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: flex-end; min-height: 18px; }
.backs { display: flex; gap: 1px; }
.seat-tiles .tiles { gap: 1px; }
.seat-tiles .meld { padding: 1px; }

.pond {
  display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;
  align-content: flex-start;
  min-height: calc(var(--sw) * 1.3);
  width: 100%;
  max-width: calc(var(--sw) * 8 + 16px);
}
.zone.pos-me .pond { max-width: calc(var(--sw) * 12 + 24px); }

.center { grid-area: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 0; }
.wall-pile { display: flex; }
.wall-pile .tile { margin-left: calc(var(--sw) * -0.55); }
.wall-pile .tile:first-child { margin-left: 0; }
.wall-count { font-size: .8rem; background: var(--chip); color: var(--chip-text); padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.wall-count strong { color: var(--gold-dark); }

/* ---------- 頭像 ---------- */
.avatar { --a: 40px; position: relative; width: var(--a); height: var(--a); flex: none; display: inline-block; }
.avatar.sm { --a: 34px; }
.avatar.xs { --a: 26px; }
.avatar-svg { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
.avatar.mood-happy .avatar-svg { animation: bounce .6s ease-in-out 3; }
.avatar.mood-sad .avatar-svg { filter: saturate(.6); }
.think-dots {
  position: absolute; top: -9px; right: -10px;
  background: #fff; border-radius: 10px; padding: 3px 5px;
  display: flex; gap: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.think-dots i { width: 4px; height: 4px; border-radius: 50%; background: #555; animation: dot 1s infinite; }
.think-dots i:nth-child(2) { animation-delay: .15s; }
.think-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.avatar-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.avatar-pick { padding: 0; background: none; box-shadow: none; border-radius: 50%; aspect-ratio: 1; opacity: .6; }
.avatar-pick svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.avatar-pick.on { opacity: 1; box-shadow: 0 0 0 3px var(--gold); }
@media (max-width: 420px) { .avatar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .avatar-pick { max-width: 64px; justify-self: center; width: 100%; } }

/* ---------- 特效 ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.callout {
  position: absolute;
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-weight: 900;
  font-size: 2.8rem;
  line-height: 1;
  color: #fff3c4;
  --o: #9b1f16;
  text-shadow:
    2px 0 0 var(--o), -2px 0 0 var(--o), 0 2px 0 var(--o), 0 -2px 0 var(--o),
    2px 2px 0 var(--o), -2px 2px 0 var(--o), 2px -2px 0 var(--o), -2px -2px 0 var(--o),
    0 5px 0 var(--o), 0 8px 18px rgba(0,0,0,.6);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.callout.big { font-size: 4.2rem; color: #ffe066; }
.callout.gray { color: #eee; --o: #444; }
.spark {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #ffd84d 45%, rgba(255,180,0,0) 70%);
}

/* ---------- 設定 / 結算列 ---------- */
.segs { display: flex; gap: 6px; flex-wrap: wrap; }
.seg { background: var(--row); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.seg.on { background: var(--gold); color: var(--on-gold); box-shadow: 0 2px 0 var(--gold-dark); }
.result-bar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center; z-index: 9;
  background: var(--felt); padding: 10px 12px; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

@media (prefers-reduced-motion: reduce) {
  .avatar.mood-happy .avatar-svg, .think-dots i { animation: none; }
}


/* ---------- 遊戲畫面整體配置 ---------- */
.game { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "table" "me"; }
.game > .topbar { grid-area: top; }
.game > .table { grid-area: table; }
.game > .me { grid-area: me; }
.last-act {
  font-size: .72rem; color: var(--chip-text); background: color-mix(in srgb, var(--chip) 70%, transparent); padding: 1px 8px; border-radius: 999px; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 牌局紀錄面板 ---------- */
.log-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 12;
  width: min(300px, 82vw);
  background: var(--felt-dark);
  border-left: 1px solid var(--panel-line);
  box-shadow: -10px 0 30px rgba(0,0,0,.2);
  display: flex; flex-direction: column;
  transform: translateX(105%);
  transition: transform .25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.log-open .log-panel { transform: none; }
.log-backdrop { position: fixed; inset: 0; z-index: 11; background: var(--overlay); }
.log-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--panel-line); }
.log-list { list-style: none; margin: 0; padding: 8px 10px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.log-list li { font-size: .88rem; padding: 6px 10px; border-radius: 8px; background: var(--row); color: var(--text); }
.log-list li:first-child { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.log-list li.call { border-left: 3px solid var(--gold); }
.log-list li.win { background: color-mix(in srgb, var(--gold) 26%, transparent); color: var(--text); font-weight: 700; }
.log-list li.sys { color: var(--muted); background: none; text-align: center; }

/* 大螢幕：紀錄面板固定在右邊 */
@media (min-width: 1100px) and (min-height: 600px) {
  #app { max-width: 1400px; }
  .game { grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "top top" "table log" "me log"; column-gap: 16px; }
  .log-panel {
    grid-area: log; position: static; transform: none; width: auto; z-index: auto;
    border: 1px solid var(--panel-line); border-radius: 16px; box-shadow: var(--panel-shadow);
    background: var(--panel); max-height: calc(100vh - 90px); align-self: start;
    position: sticky; top: 12px;
  }
  .log-btn, .log-close, .log-backdrop { display: none; }
}

/* ---------- 手機橫向：牌桌在左、自己的牌在右 ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  :root { --sw: 17px; --xw: 13px; --tw: min(calc((44vw - 50px) / 8.6), calc((100vh - 150px) / 1.6), 46px); }
  #app { max-width: none; padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
  .game {
    height: calc(100vh - 12px);
    height: calc(100dvh - 12px);
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "table top" "table me";
    column-gap: 10px;
  }
  .topbar { margin-bottom: 6px; }
  .topbar .info { font-size: .8rem; }
  .sm-btn { padding: 5px 9px; font-size: .82rem; }
  .table { margin: 0; padding: 8px 8px 6px; gap: 3px; align-content: space-between; overflow: hidden; }
  .table::before { border-width: 7px; }
  .avatar { --a: 30px; }
  .avatar.sm { --a: 28px; }
  .seat-info { padding: 2px 8px 2px 2px; gap: 4px; }
  .seat-name { font-size: .75rem; }
  .seat-meta { font-size: .65rem; }
  .zone { gap: 2px; }
  .pond { min-height: calc(var(--sw) * 1.25); }
  .center { padding: 0; }
  .me { overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; }
  .me .head { margin-bottom: 4px; }
  .me .sect { margin-bottom: 4px; }
  .me .hand { padding-top: calc(var(--tw) * 0.38); }
  .actions { margin-top: 4px; gap: 6px; min-height: 0; }
  .actions .hint { font-size: .82rem; }
  .actions button { padding: 8px 12px; }
  .callout { font-size: 2.2rem; }
  .callout.big { font-size: 3.2rem; }
  .dialog { margin-top: 0; padding: 12px; }
  .dialog h2 { font-size: 1.25rem; }
  .result-row { padding: 6px 8px; margin-bottom: 4px; }
  .result-row .tile.sm { --s: 18px; }
}


/* ---------- 背景主題 ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--pattern);
  background-size: var(--pattern-size);
}

/* ===== 明亮主題 ===== */
[data-theme="beach"] {
  --page-solid: #fdf0d2;
  --page-bg: radial-gradient(circle at 12% -4%, rgba(255,240,170,.95) 0 80px, rgba(255,240,170,0) 240px),
             linear-gradient(180deg, #9fe3f2 0%, #c9f1f5 35%, #fff4dd 72%, #fbe6bf 100%);
  --table-a: #7fdad2; --table-b: #5cc8c0; --table-c: #42b1aa;
  --rim: #f0d39e; --rim-hi: #fff0cf;
  --gold: #ff7a5c; --gold-dark: #e0583a;
  --text: #24414a; --muted: #5b7880; --chip-text: #24414a; --chip-muted: #5b7880;
  --table-shadow: 0 14px 30px rgba(40,120,130,.25);
  /* 浪花 */
  --pattern: radial-gradient(ellipse 30px 6px at 50% 100%, rgba(255,255,255,.55) 0 60%, transparent 62%);
  --pattern-size: 90px 44px;
}

[data-theme="sakura"] {
  --page-solid: #fff3f5;
  --page-bg: linear-gradient(180deg, #ffe1ea 0%, #fff0f3 45%, #fffaf5 100%);
  --table-a: #fbe3ea; --table-b: #f6cbd8; --table-c: #efb3c6;
  --rim: #f3dcc6; --rim-hi: #fff4ea;
  --gold: #ff6f91; --gold-dark: #e04e73;
  --text: #4a2f38; --muted: #87666f; --chip-text: #4a2f38; --chip-muted: #87666f;
  --table-shadow: 0 14px 30px rgba(200,110,140,.22);
  /* 花瓣 */
  --pattern: radial-gradient(ellipse 7px 4px at 20% 30%, rgba(255,150,180,.45) 0 70%, transparent 75%),
             radial-gradient(ellipse 5px 8px at 70% 60%, rgba(255,170,195,.4) 0 70%, transparent 75%),
             radial-gradient(ellipse 6px 4px at 45% 85%, rgba(255,190,205,.45) 0 70%, transparent 75%);
  --pattern-size: 170px 170px;
}

[data-theme="lemon"] {
  --page-solid: #fffbea;
  --page-bg: radial-gradient(circle at 85% 0%, rgba(255,225,90,.7) 0 70px, rgba(255,225,90,0) 280px),
             linear-gradient(180deg, #fff3b0 0%, #fff9d8 50%, #fffdf2 100%);
  --table-a: #b7ecd2; --table-b: #98dfbd; --table-c: #7bcfa6;
  --rim: #f7cf55; --rim-hi: #ffe9a0;
  --gold: #f2a100; --gold-dark: #c98100;
  --text: #3d3a22; --muted: #77735a; --chip-text: #3d3a22; --chip-muted: #77735a;
  --table-shadow: 0 14px 30px rgba(170,150,40,.22);
  /* 小圓點 */
  --pattern: radial-gradient(circle, rgba(255,200,60,.22) 0 3px, transparent 3.5px);
  --pattern-size: 36px 36px;
}

[data-theme="sky"] {
  --page-solid: #eef7ff;
  --page-bg: linear-gradient(180deg, #a9d8ff 0%, #d3ecff 45%, #f3f9ff 100%);
  --table-a: #b2d8fb; --table-b: #93c4f3; --table-c: #77afe8;
  --rim: #ffffff; --rim-hi: #e3eefa;
  --gold: #3b8ee8; --gold-dark: #2470c4;
  --text: #22364d; --muted: #5b7088; --chip-text: #22364d; --chip-muted: #5b7088;
  --table-shadow: 0 14px 30px rgba(60,120,190,.25);
  /* 白雲 */
  --pattern: radial-gradient(ellipse 60px 18px at 30% 40%, rgba(255,255,255,.85) 0 60%, transparent 63%),
             radial-gradient(ellipse 34px 16px at 38% 33%, rgba(255,255,255,.85) 0 60%, transparent 63%),
             radial-gradient(ellipse 46px 14px at 78% 78%, rgba(255,255,255,.7) 0 60%, transparent 63%);
  --pattern-size: 320px 260px;
}

/* ===== 夜間主題（深色） ===== */
[data-theme="classic"], [data-theme="night"], [data-theme="ink"] {
  --text: #f3efe4;
  --muted: #b9cbbf;
  --panel: rgba(0,0,0,.22);
  --panel-strong: rgba(0,0,0,.38);
  --panel-line: rgba(255,255,255,.08);
  --panel-shadow: none;
  --row: rgba(0,0,0,.2);
  --chip: rgba(0,0,0,.38);
  --chip-text: #f3efe4;
  --chip-muted: #b9cbbf;
  --btn: #f7efdc;
  --btn-text: #2a2a2a;
  --btn-shadow: #b89a5e;
  --line: rgba(255,255,255,.3);
  --input: rgba(0,0,0,.25);
  --overlay: rgba(0,0,0,.55);
  --meld: rgba(0,0,0,.4);
  --gold: #e8b64c;
  --gold-dark: #e8b64c;
  --on-gold: #2a2a2a;
  --table-shadow: 0 14px 30px rgba(0,0,0,.45);
}
[data-theme="classic"] {
  --page-solid: #163a2b;
  --page-bg: radial-gradient(ellipse at 50% 0%, #2a6149, #1f4d3a 45%, #163a2b);
  --felt: #1f4d3a; --felt-dark: #163a2b;
  --table-a: #2f7a57; --table-b: #22603f; --table-c: #1a4b31;
  --rim: #7a4a26; --rim-hi: #a8703d;
}
[data-theme="night"] {
  --page-solid: #0a1224;
  --page-bg: radial-gradient(ellipse at 50% 0%, #1c2f55, #13213d 45%, #0a1224);
  --felt: #13213d; --felt-dark: #0a1224;
  --table-a: #2a5694; --table-b: #1e4378; --table-c: #16335e;
  --rim: #4b5163; --rim-hi: #a8b0c2;
  --muted: #b3c0d9; --chip-muted: #b3c0d9;
  --pattern: radial-gradient(circle at 12% 18%, rgba(255,255,255,.75) 0 1px, transparent 1.6px),
             radial-gradient(circle at 63% 9%, rgba(255,255,255,.5) 0 .8px, transparent 1.3px),
             radial-gradient(circle at 38% 52%, rgba(255,255,255,.6) 0 1px, transparent 1.6px),
             radial-gradient(circle at 85% 66%, rgba(255,255,255,.45) 0 .8px, transparent 1.3px),
             radial-gradient(circle at 22% 84%, rgba(255,240,200,.6) 0 1.1px, transparent 1.8px);
  --pattern-size: 180px 180px;
}
[data-theme="ink"] {
  --page-solid: #191b1f;
  --page-bg: radial-gradient(ellipse at 50% 0%, #363a41, #2a2d33 45%, #191b1f);
  --felt: #2a2d33; --felt-dark: #191b1f;
  --table-a: #555c64; --table-b: #454b52; --table-c: #363b41;
  --rim: #141518; --rim-hi: #3c3f45;
  --muted: #c2c6cc; --chip-muted: #c2c6cc;
  --gold: #e0b35a; --gold-dark: #e0b35a;
  --pattern: radial-gradient(ellipse 55% 22% at 18% 100%, rgba(255,255,255,.07), transparent 70%),
             radial-gradient(ellipse 45% 30% at 62% 100%, rgba(255,255,255,.05), transparent 70%),
             radial-gradient(ellipse 40% 18% at 92% 100%, rgba(255,255,255,.06), transparent 70%),
             radial-gradient(circle at 82% 14%, rgba(255,235,210,.12) 0 40px, transparent 42px);
}

/* 主題選單 */
.theme-group { font-size: .78rem; color: var(--muted); margin: 4px 0 -2px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.theme-pick {
  padding: 6px; background: var(--row); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line);
  display: flex; flex-direction: column; gap: 5px; align-items: stretch; font-size: .82rem; font-weight: 600;
}
.theme-pick.on { box-shadow: 0 0 0 3px var(--gold); }
.theme-swatch { height: 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.theme-swatch i { width: 70%; height: 60%; border-radius: 50%; border: 4px solid; display: block; }


/* ---------- 計分 ---------- */
.money { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money.up, .delta.up { color: #2e9d4f; }
.money.down, .delta.down { color: #d9483b; }
[data-theme="classic"] .money.up, [data-theme="night"] .money.up, [data-theme="ink"] .money.up,
[data-theme="classic"] .delta.up, [data-theme="night"] .delta.up, [data-theme="ink"] .delta.up { color: #7ee08f; }
[data-theme="classic"] .money.down, [data-theme="night"] .money.down, [data-theme="ink"] .money.down,
[data-theme="classic"] .delta.down, [data-theme="night"] .delta.down, [data-theme="ink"] .delta.down { color: #ff8f80; }
.delta { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.score-box {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--gold) 60%, transparent);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.flower { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.flower b { color: var(--gold-dark); }
.sc-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; }
.sc-item { background: var(--chip); color: var(--chip-text); border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: .9rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.sc-item.five { background: var(--gold); color: var(--on-gold); }
.sc-op { font-weight: 800; color: var(--muted); }
.sc-total { font-size: 1.6rem; font-weight: 900; color: var(--gold-dark); }
.zone.folded .seat-info { opacity: .6; }
.folded-tag { font-size: .72rem; background: var(--chip); color: var(--chip-muted); border-radius: 999px; padding: 2px 8px; }

.broke { text-align: center; font-weight: 700; padding: 8px 10px; margin: 4px 0 10px; border-radius: 10px; background: rgba(217,72,59,.12); color: #c0392b; }
[data-theme="classic"] .broke, [data-theme="night"] .broke, [data-theme="ink"] .broke { color: #ff9c8f; }