/* ===== 海島心臟病 — 可愛海島風 ===== */
:root {
  --sky: #A8E6FF;
  --sea: #3CB7C8;
  --sea-dark: #1E8196;
  --sand: #F6DDB0;
  --wood: #B9824D;
  --wood-dark: #7A4E2A;
  --wood-light: #E2B47A;
  --coral: #FF6F61;
  --coral-dark: #D2473B;
  --ink: #3B2A1E;
  --ink-soft: #7A6450;
  --paper: #FFF9EE;
  --ok: #3DAE6B;
  --bad: #E0483E;
  --radius: 18px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --font: "jf-openhuninn", "Arial Rounded MT Bold", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(ellipse 60% 12% at 18% 31%, #6FC08A 0 60%, transparent 62%),
    radial-gradient(ellipse 36% 8% at 80% 31%, #7FCB95 0 60%, transparent 62%),
    linear-gradient(180deg, #8FDCFF 0%, #D4F4FF 30%, #6CD0DC 31%, #3AAFC4 46%, #F0D29C 46.5%, #E3BC7E 100%);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input { font-family: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 4px solid #FFD447; outline-offset: 2px; }
[hidden] { display: none !important; }

#app { min-height: 100dvh; }
.screen { min-height: 100dvh; padding: calc(12px + var(--safe-t)) calc(16px + var(--safe-r)) calc(20px + var(--safe-b)) calc(16px + var(--safe-l)); }

/* ---------- 木牌標題 ---------- */
.wood-sign {
  display: inline-block; margin: 0;
  padding: .28em .9em .34em;
  background: linear-gradient(180deg, #D9A469, #A96F3C);
  border: 4px solid var(--wood-dark);
  border-radius: 16px;
  box-shadow: 0 6px 0 var(--wood-dark), inset 0 3px 0 rgba(255,255,255,.35);
  color: #FFF4E0;
  text-shadow: 0 3px 0 var(--wood-dark);
  letter-spacing: .06em;
}
.wood-sign.small { font-size: 1rem; padding: .2em .7em; border-width: 3px; box-shadow: 0 4px 0 var(--wood-dark); }

/* ---------- 立體按鈕 ---------- */
.btn3d {
  --c1: #FFD27A; --c2: #F2A93B; --edge: #B8741A; --fg: #4A2C0A;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; flex-direction: column;
  min-height: 48px; padding: .55em 1.2em;
  border: 3px solid var(--edge); border-radius: 18px;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  color: var(--fg); font-size: 1.05rem; font-weight: 800; letter-spacing: .04em;
  box-shadow: 0 6px 0 var(--edge), 0 10px 16px rgba(60,30,0,.18), inset 0 3px 0 rgba(255,255,255,.5);
  transition: transform .08s, box-shadow .08s;
  touch-action: manipulation;
}
.btn3d > svg { width: 1.2em; height: 1.2em; }
.btn3d:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--edge), inset 0 3px 0 rgba(255,255,255,.4); }
.btn3d:disabled { filter: grayscale(.7) opacity(.6); }
.btn3d.coral { --c1: #FF9A8B; --c2: #F2574A; --edge: #B7352B; --fg: #fff; text-shadow: 0 2px 0 rgba(120,20,10,.35); }
.btn3d.sea { --c1: #7EE0EA; --c2: #2FA7BD; --edge: #1B7285; --fg: #fff; text-shadow: 0 2px 0 rgba(10,60,80,.35); }
.btn3d.sand { --c1: #FFF1D2; --c2: #EFCF94; --edge: #B89053; --fg: #5A3A14; }
.btn3d.small { min-height: 44px; padding: .35em .9em; font-size: .95rem; flex-direction: row; box-shadow: 0 4px 0 var(--edge), inset 0 2px 0 rgba(255,255,255,.5); }
.btn3d.mini { width: 52px; height: 52px; min-height: 0; padding: 0; border-radius: 16px; }
.btn3d.mini svg { width: 26px; height: 26px; }
.btn3d.btn-big { width: 100%; font-size: 1.3rem; padding: .6em 1em; }
.btn3d.btn-big small { font-size: .78rem; font-weight: 600; opacity: .9; letter-spacing: 0; }
.btn3d.btn-wide { width: 100%; flex-direction: row; }

.icon-btn {
  width: 52px; height: 52px; display: inline-grid; place-items: center;
  border: 3px solid var(--wood-dark); border-radius: 16px;
  background: linear-gradient(180deg, #E8B97F, #B98048);
  color: #FFF6E6; box-shadow: 0 4px 0 var(--wood-dark), inset 0 2px 0 rgba(255,255,255,.35);
  padding: 0; flex: none; touch-action: manipulation;
}
.icon-btn svg { width: 26px; height: 26px; }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-dark); }
.icon-btn.small { width: 44px; height: 44px; border-radius: 12px; }
.icon-btn.small svg { width: 20px; height: 20px; }
.gear-btn { position: fixed; z-index: 60; top: calc(10px + var(--safe-t)); right: calc(12px + var(--safe-r)); }
/* 語言切換鈕：固定在設定鈕左邊，跟設定鈕同風格同尺寸（顯示「EN」或「中」） */
.lang-toggle {
  position: fixed; z-index: 60; top: calc(10px + var(--safe-t)); right: calc(72px + var(--safe-r));
  width: 52px; height: 52px; display: inline-grid; place-items: center; padding: 0;
  border: 3px solid var(--wood-dark); border-radius: 16px;
  background: linear-gradient(180deg, #E8B97F, #B98048);
  color: #FFF6E6; font-size: 1.05rem; font-weight: 900; letter-spacing: .02em; line-height: 1;
  box-shadow: 0 4px 0 var(--wood-dark), inset 0 2px 0 rgba(255,255,255,.35);
  touch-action: manipulation; cursor: pointer;
}
.lang-toggle:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-dark); }

.link-btn { background: none; border: 0; color: var(--sea-dark); font-weight: 800; text-decoration: underline; min-height: 44px; padding: 0 .5em; font-size: .95rem; }
.link-btn.danger { color: var(--bad); }

/* ---------- 共用卡片 ---------- */
.topbar { display: flex; align-items: center; gap: 12px; padding-right: 132px; margin-bottom: 14px; }
.topbar h2 { margin: 0; font-size: 1.5rem; color: #fff; text-shadow: 0 2px 0 rgba(0,60,80,.35), 0 0 12px rgba(0,60,80,.2); outline: none; }
.panel-card {
  background: var(--paper);
  border: 4px solid var(--wood-light);
  border-radius: 24px;
  box-shadow: 0 8px 0 rgba(122,78,42,.35), 0 14px 30px rgba(0,40,60,.18);
  padding: 18px;
}
.card-title { margin: 0 0 10px; font-size: 1.15rem; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; font-weight: 800; }
.field > span { font-size: 1rem; }
.field input {
  min-height: 50px; border: 3px solid var(--wood-light); border-radius: 14px; padding: 0 14px;
  font-size: 1.1rem; background: #fff;
}
.row-field { flex-direction: row; align-items: center; justify-content: space-between; }
.hint { color: var(--ink-soft); font-weight: 600; font-size: .88rem; line-height: 1.5; }
.note { color: var(--ink-soft); font-size: .85rem; line-height: 1.5; margin: 14px 0 0; }

.stepper { display: flex; align-items: center; gap: 14px; }
.stepper b { font-size: 1.8rem; min-width: 1.4em; text-align: center; }

.seg { display: flex; flex-wrap: wrap; gap: 6px; background: #F1E3C8; padding: 5px; border-radius: 16px; }
.seg button {
  flex: 1 1 0; min-width: 64px; min-height: 48px; border: 0; border-radius: 12px; background: transparent;
  font-size: 1rem; font-weight: 800; color: var(--ink-soft);
}
.seg button[aria-checked="true"] { background: linear-gradient(180deg, #FF9A8B, #F2574A); color: #fff; box-shadow: 0 3px 0 #B7352B; }
.seg.small button { min-height: 44px; min-width: 56px; font-size: .92rem; }

.char-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.char-opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px;
  background: #fff; border: 3px solid #EEDFC4; border-radius: 16px; font-weight: 800; font-size: .88rem; min-height: 48px;
}
.char-opt svg { width: 100%; max-width: 72px; height: auto; }
.char-opt[aria-checked="true"] { border-color: var(--coral); background: #FFF0EC; box-shadow: 0 0 0 3px rgba(255,111,97,.25); }
.char-grid.small .char-opt svg { max-width: 54px; }

/* 首頁的「← 回遊戲大廳」（<a>，所以要自己拿掉底線、撐到 44px 高）。
 * display 寫死會蓋掉 [hidden]，所以下面那條一定要留。 */
.lobby-home-link {
  position: fixed; z-index: 55;
  top: calc(var(--safe-t) + 12px); left: calc(var(--safe-l) + 12px);
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1em;
  border: 3px solid var(--wood-dark); border-radius: 16px;
  background: linear-gradient(180deg, #E8B97F, #B98048);
  color: #FFF6E6; text-decoration: none; font-weight: 800; font-size: .95rem; white-space: nowrap;
  box-shadow: 0 4px 0 var(--wood-dark), inset 0 2px 0 rgba(255,255,255,.35);
  text-shadow: 0 1px 0 rgba(90,50,10,.5);
}
.lobby-home-link[hidden] { display: none; }
.lobby-home-link:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-dark); }

/* ---------- 首頁 ---------- */
.home-wrap { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
.title-sign { font-size: clamp(2rem, 8vw, 3rem); margin-top: 6px; }
.hero { width: min(100%, 460px); }
.hero-svg { width: 100%; height: auto; display: block; }
.home-tag { margin: 0; text-align: center; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(0,60,80,.4); font-size: 1.05rem; line-height: 1.5; }
.home-actions { width: 100%; display: grid; gap: 16px; margin-top: 6px; }
.home-stats { margin: 4px 0 0; color: var(--ink-soft); font-weight: 700; }
/* 「怎麼玩」「我的拍速」是次要動作：並排成一列，放在兩顆主按鈕下面 */
.home-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-sub .btn3d.btn-big { font-size: 1.1rem; padding-left: .5em; padding-right: .5em; }
@media (min-width: 900px) and (orientation: landscape) {
  .home-wrap { max-width: 980px; min-height: calc(100dvh - 40px); align-content: center; display: grid; grid-template-columns: 1.1fr 1fr; grid-template-areas: "title title" "hero actions" "tag actions" "stats actions"; column-gap: 32px; align-items: center; }
  .title-sign { grid-area: title; justify-self: center; }
  .hero { grid-area: hero; width: 100%; }
  .home-tag { grid-area: tag; }
  .home-actions { grid-area: actions; align-self: center; }
  .home-stats { grid-area: stats; text-align: center; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .home-wrap { max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "title actions" "hero actions" "tag actions"; gap: 8px 24px; }
  .title-sign { grid-area: title; font-size: 1.8rem; justify-self: center; }
  .hero { grid-area: hero; width: 100%; max-width: 340px; justify-self: center; }
  .home-tag { grid-area: tag; font-size: .92rem; }
  .home-actions { grid-area: actions; gap: 12px; }
  .home-actions .btn-big { font-size: 1.1rem; padding: .45em 1em; }
  .home-stats { display: none; }
  #screen-home { padding-right: calc(76px + var(--safe-r)); }
}

/* ---------- 單機設定、說明 ---------- */
.setup, .help { max-width: 620px; margin: 0 auto; }
@media (min-width: 900px) and (orientation: landscape) {
  .setup { max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .setup .field:nth-child(2) { grid-row: span 4; }
  .setup #solo-start { grid-column: 1 / -1; }
}
.help-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.help-steps li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; background: #fff; border-radius: 18px; padding: 12px; border: 3px solid #F1E3C8; }
.help-steps h3 { margin: 0 0 4px; font-size: 1.1rem; }
.help-steps p { margin: 0; line-height: 1.6; }
.help-pic { display: flex; justify-content: center; align-items: center; gap: 6px; }
.help-pic > svg { width: 80px; height: auto; }
.help-pic.pair .help-card { width: 58px; }
.help-card svg { width: 100%; height: auto; display: block; }
.help-tips ul { padding-left: 1.2em; line-height: 1.7; }
.call-demo { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 14px; background: #fff; border: 3px solid var(--wood); border-radius: 18px; font-weight: 900; }
.call-demo span { font-size: 1rem; }
.call-demo b { font-size: 2.2rem; color: var(--coral); }
.call-demo.small { padding: 2px 8px; } .call-demo.small b { font-size: 1.5rem; }
@media (max-width: 420px) { .help-steps li { grid-template-columns: 1fr; text-align: center; } }

/* ---------- 大廳與房間 ---------- */
.lobby-grid, .room-grid { max-width: 1100px; margin: 0 auto; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.panel-card, .chat { min-width: 0; }
@media (min-width: 900px) {
  .lobby-grid { grid-template-columns: 380px 1fr; align-items: start; }
  .room-grid { grid-template-columns: 340px 1fr; align-items: start; }
  .room-grid .room-chat-card { order: -1; position: sticky; top: 76px; }
}
.conn-line { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: #F4ECDC; line-height: 1.4; }
.conn-line .dot { width: 12px; height: 12px; border-radius: 50%; background: #B8A58A; flex: none; }
.conn-line.ok .dot { background: var(--ok); }
.conn-line.wait .dot { background: #F2A93B; animation: blink 1s infinite; }
.conn-line.bad { background: #FDE3DF; } .conn-line.bad .dot { background: var(--bad); }
@keyframes blink { 50% { opacity: .25; } }
.lobby-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.room-list, .seat-list, .spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.room-row, .invite-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 3px solid #F1E3C8; border-radius: 16px; padding: 12px;
}
.invite-card { border-color: var(--coral); background: #FFF3EF; }
.invite-card.bad { border-color: var(--bad); color: var(--bad); font-weight: 800; }
.invite-card > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.room-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.room-meta small { width: 100%; color: var(--ink-soft); font-weight: 700; }
.room-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.room-list .empty { padding: 20px; text-align: center; color: var(--ink-soft); font-weight: 700; }
.code { font-family: ui-monospace, monospace; background: #F1E3C8; padding: 2px 8px; border-radius: 8px; font-weight: 800; letter-spacing: .1em; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 800; background: #E3F6E9; color: #1F7A45; }
.pill svg { width: 14px; height: 14px; }
.pill.playing { background: #FFE6D6; color: #B3501E; }
.pill.spec { background: #E4ECFF; color: #3654A8; }
.pill.host { background: #FFF1C2; color: #8A6300; }
.role-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.seat-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 3px solid #F1E3C8; border-radius: 16px; padding: 8px 10px; min-height: 64px; flex-wrap: wrap; }
.seat-row.me { border-color: var(--sea); }
.seat-row.empty { border-style: dashed; background: rgba(255,255,255,.6); }
.seat-row .nm { flex: 1; min-width: 5em; }
.mini { width: 46px; height: 46px; flex: none; display: inline-block; }
.mini svg { width: 100%; height: 100%; display: block; }
.mini.ghost { border-radius: 50%; background: #F1E3C8; }
.tag { font-style: normal; font-size: .78rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #F1E3C8; white-space: nowrap; }
.tag.host { background: #FFF1C2; color: #8A6300; }
.tag.ready { background: #DDF5E5; color: #1F7A45; }
.tag.wait { background: #FFE9E0; color: #B3501E; }
.tag.off { background: #EEE; color: #777; }
.tag.ai { background: #E4ECFF; color: #3654A8; }
.tag.turn { background: #FFE9A8; color: #7A5A00; }
.tag.start { background: #FFD9D3; color: #B7352B; }
.room-actions { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.last-game { margin: 4px 0 0; font-weight: 800; color: var(--sea-dark); }
.host-box h4, .invite-box h4, .spec-line h4 { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; }
.host-box h4 svg, .invite-box h4 svg, .spec-line h4 svg { width: 20px; height: 20px; }
.set-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.set-line > span { min-width: 5em; font-weight: 800; }
.set-line .seg { flex: 1; }
.invite-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.invite-row input { flex: 1; min-width: 0; min-height: 44px; border: 3px solid #F1E3C8; border-radius: 12px; padding: 0 10px; font-size: .9rem; background: #fff; }
.spec-list li { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.spec-list .mini { width: 36px; height: 36px; }

/* ---------- 聊天室 ---------- */
.chat { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.chat-log { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; min-height: 120px; max-height: 320px; background: #fff; border-radius: 14px; border: 2px solid #F1E3C8; display: flex; flex-direction: column; gap: 6px; }
.chat-log li { display: flex; flex-direction: column; gap: 2px; font-size: .92rem; line-height: 1.4; word-break: break-word; }
.chat-log .who { display: flex; align-items: center; gap: 4px; }
.chat-log .who svg { width: 22px; height: 22px; }
.chat-log .who b { font-size: .8rem; color: var(--ink-soft); }
.chat-log .who i { font-style: normal; font-size: .7rem; background: #E4ECFF; color: #3654A8; padding: 0 5px; border-radius: 6px; margin-left: 4px; }
.chat-log .sys { color: var(--ink-soft); font-size: .8rem; text-align: center; }
.chat-quick { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chip { flex: none; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 2px solid #F1D8AE; background: #FFF6E4; font-weight: 800; font-size: .85rem; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; min-height: 46px; border: 3px solid #F1E3C8; border-radius: 14px; padding: 0 12px; font-size: 1rem; background: #fff; }
.chat-form .send { width: 48px; height: 48px; }

/* ---------- 對局畫面 ---------- */
body.in-game { overflow: hidden; }
.game-screen {
  padding: 0; height: 100dvh; min-height: 0;
  display: grid; grid-template-columns: 1fr;
  background:
    repeating-linear-gradient(90deg, rgba(122,78,42,.12) 0 2px, transparent 2px 70px),
    linear-gradient(180deg, transparent 0 22%, #D9AE72 22%, #C9965A 100%);
  position: relative; overflow: hidden;
}
.side {
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
  padding: calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b)) calc(10px + var(--safe-l));
  background: rgba(255,249,238,.94); border-right: 4px solid var(--wood-light);
  box-shadow: 4px 0 16px rgba(60,30,0,.15);
  z-index: 30;
}
.side-head { display: flex; align-items: center; gap: 8px; }
.side-title { flex: 1; text-align: center; }
.summary { overflow-y: auto; min-height: 0; flex: 0 1 auto; font-size: .92rem; }
.side-chat { flex: 1 1 200px; min-height: 180px; }
.side-chat .chat-log { max-height: none; }
.sum-status { font-weight: 900; font-size: 1.05rem; padding: 8px 10px; background: #FFF1C2; border-radius: 12px; margin-bottom: 8px; line-height: 1.4; }
.summary .role { margin: 0 0 8px; color: #3654A8; font-weight: 800; }
.sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sum-grid div { background: #fff; border-radius: 12px; padding: 6px; text-align: center; border: 2px solid #F1E3C8; }
.sum-grid small { display: block; color: var(--ink-soft); font-weight: 700; font-size: .75rem; }
.sum-grid b { font-size: 1.35rem; } .sum-grid i { font-style: normal; font-size: .75rem; margin-left: 2px; }
.summary h4 { margin: 10px 0 6px; font-size: .9rem; color: var(--ink-soft); }
.sum-seats, .sum-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sum-seats li { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 10px; padding: 3px 8px 3px 3px; border-left: 5px solid var(--seat); }
.sum-seats li.me { background: #EAF8FA; }
.sum-seats .mini { width: 30px; height: 30px; }
.sum-seats .nm { flex: 1; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-seats .ct { font-size: 1.05rem; }
.sum-log li { font-size: .82rem; line-height: 1.4; padding: 3px 6px; border-radius: 8px; background: rgba(255,255,255,.7); }
.sum-log li:first-child { background: #fff; font-weight: 800; }
.sum-log .dim { color: var(--ink-soft); }
.sum-keys { color: var(--ink-soft); font-size: .75rem; margin: 8px 0 0; }

.side-open, .chat-fab, .menu-fab { position: fixed; z-index: 25; }
.side-open { top: calc(10px + var(--safe-t)); left: calc(12px + var(--safe-l)); }
.menu-fab { top: calc(10px + var(--safe-t)); left: calc(74px + var(--safe-l)); }
.chat-fab { bottom: calc(14px + var(--safe-b)); left: calc(12px + var(--safe-l)); }
.chat-fab .badge { position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; border-radius: 12px; background: var(--bad); color: #fff; font-size: .8rem; font-weight: 900; display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; }
.chat-pop {
  position: fixed; z-index: 40; left: calc(10px + var(--safe-l)); bottom: calc(76px + var(--safe-b));
  width: min(360px, calc(100vw - 20px)); height: min(420px, 60dvh);
  background: var(--paper); border: 4px solid var(--wood-light); border-radius: 20px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.chat-pop-head { display: flex; align-items: center; justify-content: space-between; }
.chat-pop .chat { flex: 1; }
.chat-pop .chat-log { max-height: none; }

/* 窄版：左欄變成抽屜 */
.side { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); transform: translateX(-105%); transition: transform .25s; }
body.side-open .side { transform: none; }
.side-close { display: inline-grid; }
@media (min-width: 900px) and (min-height: 560px) {
  .game-screen { grid-template-columns: clamp(230px, 22vw, 290px) 1fr; }
  .side { position: relative; transform: none; width: auto; transition: none; }
  .side-open, .side-close, .chat-fab, .chat-pop, .menu-fab { display: none !important; }
}

/* ---------- 牌桌 ----------
 * 版面不看螢幕，看「牌桌實際拿到的空間」（container query）：
 * 桌機有左欄、手機左欄收成抽屜，同一個尺寸的螢幕牌桌大小也不同，這樣才不會估錯。
 *   直長（手機直向、平板直向、窄視窗）：對手一排在上、牌堆在中、自己＋拍牌鈕在下
 *   寬（桌機、平板橫向）：圍桌 —— 對手在左／上／右，自己在下
 *   矮（手機橫向）：對手直排在左、牌堆在中、自己＋拍牌鈕在右
 * 所有尺寸都用 cq 單位跟著牌桌大小縮放，平板上不會小小一坨，小手機上也不會擠爆。
 */
.board {
  container: board / size;
  position: relative; min-height: 0; min-width: 0; height: 100%;
  padding: calc(8px + var(--safe-t)) calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l));
}
/* 左欄收成抽屜時，左上／右上有固定按鈕，牌桌往下讓出一排 */
@media (max-width: 899px), (max-height: 559px) {
  .board { padding-top: calc(68px + var(--safe-t)); }
}
.tgrid {
  --av: clamp(40px, min(12cqw, 9.5cqh), 124px);
  --slap: clamp(92px, min(28cqw, 17cqh), 220px);
  --fs: clamp(.78rem, min(3.2cqw, 2.1cqh), 1.25rem);
  height: 100%; min-height: 0;
  display: grid; gap: clamp(6px, 1.6cqh, 16px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "opps" "center" "me";
}
.opps { grid-area: opps; display: flex; justify-content: space-around; align-items: flex-start; gap: 4px; min-width: 0; }
.opps .seat { flex: 1 1 0; max-width: 34%; }
.center { grid-area: center; }
.me-area {
  grid-area: me; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-width: 0; padding: 0 4px 12px;
}
body.online-game .me-area { padding-left: calc(62px + var(--safe-l)); }

/* 寬：圍桌 */
@container board (min-aspect-ratio: 23 / 20) and (min-height: 500px) {
  .tgrid {
    --av: clamp(56px, min(9cqw, 11cqh), 128px);
    --slap: clamp(110px, min(18cqw, 21cqh), 220px);
    --fs: clamp(.85rem, min(1.7cqw, 2.3cqh), 1.25rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "left top right" "left center right" "me me me";
  }
  .opps { display: contents; }
  .opps .seat { max-width: none; flex: none; }
  .seat.pos-left { grid-area: left; align-self: center; justify-self: center; }
  .seat.pos-top { grid-area: top; justify-self: center; }
  .seat.pos-right { grid-area: right; align-self: center; justify-self: center; }
  .me-area { justify-content: center; gap: clamp(24px, 8cqw, 120px); padding-left: 4px; }
  body.online-game .me-area { padding-left: 4px; }
}

/* 矮：手機橫向 */
@container board (max-height: 499px) and (min-aspect-ratio: 5 / 4) {
  .tgrid {
    --av: clamp(34px, 13cqh, 64px);
    --slap: clamp(84px, 38cqh, 160px);
    --fs: clamp(.74rem, 3.4cqh, 1rem);
    margin-top: -60px; height: calc(100% + 60px);     /* 把 .board 為固定按鈕讓出的空間拿回來，改由左右兩欄自己避開 */
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "opps center me";
  }
  .opps { flex-direction: column; justify-content: center; align-items: stretch; gap: 4px; padding-top: 58px; max-width: 36cqw; }
  .opps .seat { flex: none; max-width: none; flex-direction: row; align-items: center; gap: 6px; }
  .opps .seat .seat-body { align-items: flex-start; }
  .me-area { flex-direction: column; justify-content: center; gap: 8px; padding: 58px 0 6px; }
  body.online-game .me-area { padding-left: 0; }
  .me-area .seat.me { flex-direction: row; gap: 6px; }
  .me-area .seat.me .seat-body { align-items: flex-start; }
  .seat .bubble { top: -10px; right: auto; left: calc(var(--av) - 12px); }
}

/* 座位 */
.seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.seat-body { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.avatar {
  width: var(--av); height: var(--av); flex: none; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #FFFFFF, #CFEFF3 70%);
  border: 4px solid var(--seat); box-shadow: 0 5px 0 rgba(0,0,0,.15);
  overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.avatar svg { width: 100%; height: 100%; display: block; transform: translateY(6%); }
.seat-tag {
  display: flex; align-items: center; gap: .35em; max-width: 100%; min-width: 0;
  padding: .2em .25em .2em .65em; border-radius: 999px;
  background: linear-gradient(180deg, #7A5232, #5C3B21); color: #FFF4E0;
  border: 2px solid #3F2814; font-size: var(--fs); box-shadow: 0 3px 0 rgba(0,0,0,.2);
}
.seat-tag .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 8em; }
.count { flex: none; display: inline-flex; align-items: center; gap: 2px; background: #FFF4E0; color: var(--ink); border-radius: 999px; padding: .05em .5em .05em .25em; font-weight: 900; }
.count .stack-icon { width: 1.25em; height: 1.25em; }
.count b { font-size: 1.15em; min-width: 1.2em; text-align: center; }
.seat-flag { font-size: max(11.5px, calc(var(--fs) * .8)); font-weight: 800; background: rgba(255,255,255,.88); color: #3654A8; border-radius: 8px; padding: 1px 6px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.seat.offline .avatar { filter: grayscale(.9) opacity(.6); }
.seat.offline .seat-flag { color: #777; }
.seat.is-turn .avatar { box-shadow: 0 0 0 5px #FFE27A, 0 5px 0 rgba(0,0,0,.15); transform: translateY(-3px); }
.seat.is-starter .avatar { box-shadow: 0 0 0 6px #FF9A8B, 0 5px 0 rgba(0,0,0,.15); animation: glow 1.1s ease-in-out infinite; }
.seat.is-empty .count { background: #DDF5E5; color: #1F7A45; }
.seat.winner .avatar { box-shadow: 0 0 0 6px #FFD447, 0 0 30px #FFD447; }
@keyframes glow { 50% { box-shadow: 0 0 0 10px rgba(255,154,139,.45), 0 5px 0 rgba(0,0,0,.15); } }
.bubble {
  position: absolute; top: -8px; left: calc(50% + var(--av) * .3); z-index: 5;
  background: #fff; color: var(--ink); font-weight: 900; font-size: var(--fs);
  padding: .2em .6em; border-radius: 14px; border: 3px solid var(--seat); white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0,0,0,.12); animation: pop .25s;
}
.opps .seat:last-child .bubble { left: auto; right: calc(50% + var(--av) * .3); }
.bubble.bad { border-color: var(--bad); color: var(--bad); }
.seat.shake { animation: shake .45s; }
@keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }

/* 中間：牌桌、喊數、牌堆（牌的大小跟著牌桌實際空間走） */
.center {
  container: table / size;
  position: relative; min-height: 0; min-width: 0;
  background: radial-gradient(ellipse at 50% 45%, #8EE2DD 0%, #4FC4CA 55%, #36A9B8 100%);
  border: clamp(6px, 1.4vmin, 14px) solid #B9824D; border-radius: 48% / 42%;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.25), inset 0 10px 30px rgba(0,60,80,.3), 0 8px 0 #7A4E2A, 0 16px 26px rgba(60,30,0,.25);
}
.center-inner {
  --card: clamp(58px, min(calc((100cqh - 120px) / 1.62), 44cqw), 290px);
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(6px, 3cqh, 16px);
}
@container table (max-height: 300px) and (min-aspect-ratio: 1 / 1) {
  /* 牌桌很矮（手機橫向）：喊數泡泡改到牌堆左邊，省下高度給牌 */
  .center-inner { --card: clamp(56px, min(calc((100cqh - 40px) / 1.6), calc((100cqw - 140px) / 1.3)), 200px); flex-direction: row; gap: clamp(8px, 4cqw, 28px); }
  .call::after { left: auto; right: -14px; top: 50%; bottom: auto; margin: -10px 0 0; border: 10px solid transparent; border-left-color: var(--wood-dark); border-right: 0; }
}
.call {
  position: relative; display: inline-flex; align-items: baseline; gap: .15em; flex: none;
  padding: .12em .6em .18em; background: #FFFBF2; border: 4px solid var(--wood-dark); border-radius: 22px;
  box-shadow: 0 5px 0 var(--wood-dark); font-weight: 900; line-height: 1;
}
.call::after { content: ""; position: absolute; left: 50%; bottom: -14px; margin-left: -10px; border: 10px solid transparent; border-top-color: var(--wood-dark); border-bottom: 0; }
.call-label { font-size: clamp(.9rem, min(4.5cqh, 5cqw), 1.7rem); }
.call-num { font-size: clamp(1.8rem, min(11cqh, 12cqw), 4.6rem); color: var(--coral); min-width: 1.2em; text-align: center; display: inline-block; }
.call.idle .call-num { color: #C8B69B; }
.call.big .call-num, body.big-call .call-num { font-size: clamp(2.4rem, min(16cqh, 17cqw), 6.4rem); }
.call-num.pop { animation: pop .3s; }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

.pile-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.pile::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--card); height: calc(var(--card) * 1.4); transform: translate(-50%, -50%); border: 4px dashed rgba(255,255,255,.55); border-radius: 14px; }
.pile { position: relative; width: calc(var(--card) * 1.25); height: calc(var(--card) * 1.5); touch-action: manipulation; cursor: pointer; }
@media (hover: none) { .pile { cursor: default; } }
.pc { position: absolute; left: 50%; top: 50%; width: var(--card); transform: translate(-50%, -50%) rotate(var(--r, 0deg)); filter: drop-shadow(0 4px 4px rgba(0,40,50,.3)); }
.pc svg { width: 100%; height: auto; display: block; }
.pc.under { filter: drop-shadow(0 2px 2px rgba(0,40,50,.3)) brightness(.95); }
.pc.deal { animation: deal-top .28s cubic-bezier(.2,.8,.3,1.2); }
.pc.deal.from-left { animation-name: deal-left; } .pc.deal.from-right { animation-name: deal-right; } .pc.deal.from-bottom { animation-name: deal-bottom; }
@keyframes deal-top { from { transform: translate(-50%, -140%) rotate(-30deg) scale(.6); opacity: .3; } }
@keyframes deal-left { from { transform: translate(-170%, -50%) rotate(-40deg) scale(.6); opacity: .3; } }
@keyframes deal-right { from { transform: translate(70%, -50%) rotate(40deg) scale(.6); opacity: .3; } }
@keyframes deal-bottom { from { transform: translate(-50%, 60%) rotate(20deg) scale(.6); opacity: .3; } }
.pile-info { display: flex; align-items: center; gap: 4px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(0,60,80,.45); font-size: clamp(.8rem, 3.6cqh, 1.05rem); white-space: nowrap; }
.pile-info .stack svg { width: 1.4em; height: 1.4em; display: block; }
.slap-marks { position: absolute; inset: 0; pointer-events: none; }
.slap-mark { position: absolute; width: calc(var(--card) * .62); transform: translate(-50%, -50%) rotate(var(--r)); animation: slap-in .18s ease-out; }
.slap-mark svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 3px rgba(0,0,0,.3)); }
.slap-mark svg g { fill: #FFF7EE; stroke: var(--seat); stroke-width: 5; }
.slap-mark b { position: absolute; right: -4px; top: -4px; width: 28px; height: 28px; border-radius: 50%; background: var(--seat); color: #fff; display: grid; place-items: center; font-size: .95rem; border: 3px solid #fff; }
.slap-mark.wrong svg g { stroke: var(--bad); }
@keyframes slap-in { from { transform: translate(-50%, -50%) rotate(var(--r)) scale(1.6); opacity: 0; } }

/* 等待開始：開始鈕與提示直接放在空的牌堆上（這時牌堆一定是空的），不跟拍牌鈕搶位置 */
.wait-box {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px;
}
.wait-box > * { pointer-events: auto; }
.wait-box.idle > :not(.banner) { display: none !important; }
.wait-text {
  font-weight: 900; color: var(--ink); text-align: center; line-height: 1.4; max-width: min(90%, 20em);
  font-size: clamp(.85rem, min(4.4cqh, 4.6cqw), 1.2rem);
  background: rgba(255,251,242,.94); border: 3px solid var(--wood-light); border-radius: 16px; padding: .35em .9em;
  box-shadow: 0 4px 0 rgba(122,78,42,.3);
}
.wait-text:empty { display: none; }
.start-btn { font-size: clamp(1.15rem, min(7cqh, 7cqw), 1.8rem); padding: .45em 1.6em; flex-direction: row; min-height: 56px; animation: breathe 1.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); } }

.banner {
  /* 不用 translateX 置中：彈出動畫會改寫 transform，橫幅就歪到右邊 */
  order: -1; max-width: 94%; z-index: 6;
  background: #FFFBF2; border: 4px solid var(--wood-dark); border-radius: 18px; padding: .35em .9em;
  font-weight: 900; font-size: clamp(.9rem, min(4.6cqh, 4.4cqw), 1.4rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 5px 0 var(--wood-dark); animation: pop .3s;
}
.banner.bad { border-color: var(--coral-dark); color: var(--coral-dark); box-shadow: 0 5px 0 var(--coral-dark); }

/* 自己的區域 */
.card-rank { font-family: "Arial Rounded MT Bold", "Nunito", "Helvetica Neue", Arial, sans-serif; font-weight: 900; }
.me-area .seat.me { flex: 0 1 auto; min-width: 0; }
.slap-btn {
  width: var(--slap); height: var(--slap); flex: none; border-radius: 50%; margin: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 6px solid #9A2E25;
  background: radial-gradient(circle at 40% 30%, #FF9C8E 0%, #F4574A 55%, #D23E32 100%);
  color: #fff; font-size: clamp(1rem, calc(var(--slap) * .15), 1.8rem); font-weight: 900; letter-spacing: .1em;
  box-shadow: 0 10px 0 #8E2A21, 0 0 0 8px #E2B47A, 0 0 0 12px var(--wood-dark), 0 18px 26px rgba(60,20,0,.35), inset 0 6px 0 rgba(255,255,255,.35);
  text-shadow: 0 2px 0 rgba(120,20,10,.4);
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .06s, box-shadow .06s;
}
.slap-btn .hand-icon { width: 52%; height: auto; }
.slap-btn:active, .slap-btn.pressed { transform: translateY(8px); box-shadow: 0 2px 0 #8E2A21, 0 0 0 8px #E2B47A, 0 0 0 12px var(--wood-dark), inset 0 6px 0 rgba(255,255,255,.3); }
.slap-btn.pressed { animation: press .25s; }
@keyframes press { 0% { transform: translateY(8px) scale(.94); } 100% { transform: none; } }
.slap-btn.idle { filter: saturate(.75); }
.slap-btn.done { filter: saturate(.55) brightness(.95); }
.spec-badge, .out-badge {
  display: flex; align-items: center; gap: 8px; padding: .6em 1em; border-radius: 16px; font-weight: 900; font-size: var(--fs);
  background: #E4ECFF; color: #3654A8; border: 3px solid #9FB4EA; max-width: 60%; text-align: center; line-height: 1.35;
}
.out-badge { background: #DDF5E5; color: #1F7A45; border-color: #8FD4A6; flex-direction: column; gap: 2px; }
.out-badge b { font-size: 1.3em; }
.spec-badge svg { width: 1.5em; height: 1.5em; flex: none; }

/* 結算 */
.result { position: absolute; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(20,60,70,.45); backdrop-filter: blur(3px); padding: 16px; }
.result-card { width: min(440px, 100%); max-height: 92dvh; overflow-y: auto; background: var(--paper); border: 5px solid var(--wood-light); border-radius: 26px; padding: 18px; text-align: center; box-shadow: 0 10px 0 rgba(122,78,42,.45); animation: pop .35s; }
.result-hero { width: 130px; height: 130px; margin: -6px auto 0; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #FFF6C9, #FFD447); border: 5px solid #E0A800; overflow: hidden; }
.result-hero svg { width: 100%; height: 100%; transform: translateY(6%); }
.result-card h2 { margin: 10px 0; font-size: 1.6rem; }
.rank-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; text-align: left; }
.rank-list li { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 4px 10px 4px 4px; border: 2px solid #F1E3C8; }
.rank-list li.me { border-color: var(--sea); background: #EAF8FA; }
.rank-list .no { width: 30px; height: 30px; border-radius: 50%; background: #F1E3C8; display: grid; place-items: center; font-weight: 900; flex: none; }
.rank-list li:first-child .no { background: #FFD447; }
.rank-list .mini { width: 38px; height: 38px; }
.rank-list .nm { flex: 1; font-weight: 800; }
.result-stats { color: var(--ink-soft); font-weight: 700; font-size: .9rem; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.result-actions .btn3d { flex-direction: row; }
.bounce { animation: bounce 1s ease-in-out infinite; }
@keyframes bounce { 50% { transform: translateY(-6px); } }

.net-banner { position: fixed; z-index: 50; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); background: var(--bad); color: #fff; font-weight: 900; padding: 8px 16px; border-radius: 14px; box-shadow: 0 4px 0 #9A2E25; max-width: calc(100vw - 150px); text-align: center; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(20,50,60,.5); padding: calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b)); }
.modal-card { width: min(480px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--paper); border: 5px solid var(--wood-light); border-radius: 26px; box-shadow: 0 10px 0 rgba(122,78,42,.45); animation: pop .25s; }
.modal-card.narrow { width: min(380px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px 20px; }
.modal-head h2 { margin: 0; font-size: 1.4rem; }
.modal-body { overflow-y: auto; padding: 4px 20px 20px; }
.menu-body { display: grid; gap: 14px; }
.menu-body .hint { margin: 0; text-align: center; }
.set-group { margin: 14px 0 6px; font-size: .95rem; color: var(--ink-soft); }
.set-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 4px; border-bottom: 2px dashed #EEDFC4; }
.set-row.vol { min-height: 48px; padding-left: 50px; }
.set-ico { width: 36px; height: 36px; display: grid; place-items: center; background: #FFF1D2; border-radius: 10px; color: var(--wood-dark); flex: none; }
.set-ico svg { width: 22px; height: 22px; }
.set-text { flex: 1; display: flex; flex-direction: column; }
.set-text small { color: var(--ink-soft); font-weight: 600; }
.set-row input[type=range] { flex: 1.3; accent-color: var(--coral); min-height: 44px; }
.switch { appearance: none; -webkit-appearance: none; width: 58px; height: 34px; border-radius: 17px; background: #D8CBB4; position: relative; flex: none; transition: background .2s; cursor: pointer; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 3px rgba(0,0,0,.2); transition: transform .2s; }
.switch:checked { background: var(--ok); }
.switch:checked::after { transform: translateX(24px); }
.set-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.set-actions .btn3d { flex-direction: row; }

/* ---------- 提示 ---------- */
.toasts { position: fixed; z-index: 90; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: calc(100% - 32px); }
.toast { background: rgba(59,42,30,.92); color: #fff; font-weight: 800; padding: 10px 18px; border-radius: 14px; animation: pop .25s; max-width: 100%; text-align: center; }
.toast.bad { background: rgba(200,50,40,.95); }
.toast.out { opacity: 0; transition: opacity .4s; }

/* ---------- 減少動態 ---------- */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 直向時聊天彈層放在上半部，不要蓋住下面的拍牌鈕 */
@media (orientation: portrait) {
  .chat-pop { top: calc(70px + var(--safe-t)); bottom: auto; height: min(360px, 42dvh); }
}

.voice-row { padding-left: 50px; }
.voice-seg { margin: 6px 0 4px 50px; }

/* 出完離場（只剩一人模式） */
.seat.is-out .avatar { box-shadow: 0 0 0 5px #7FD99A, 0 5px 0 rgba(0,0,0,.15); }
.seat.is-out .seat-flag { color: #1F7A45; background: #DDF5E5; }
.bubble.good { border-color: var(--ok); color: #1F7A45; }
.slap-btn.out, .slap-btn:disabled { filter: grayscale(.85) opacity(.55); cursor: not-allowed; }
.sum-mode { color: var(--ink-soft); font-size: .78rem; font-weight: 700; margin: 8px 0 0; }
.result-sub { margin: -4px 0 10px; color: var(--ink-soft); font-weight: 800; }
@media (max-width: 520px) {
  .set-line { flex-direction: column; align-items: stretch; gap: 4px; }
  .set-line .seg button { min-width: 0; }
}

/* 首頁左上角有「回遊戲大廳」，窄螢幕與矮螢幕往下讓出一排 */
@media (max-width: 899px), (max-height: 560px) {
  #screen-home .home-wrap { padding-top: 56px; }
}
/* 結算：矮螢幕把大頭貼縮小、名次排緊一點 */
@media (max-height: 560px) {
  .result-card { padding: 12px; }
  .result-hero { width: 72px; height: 72px; border-width: 4px; }
  .result-card h2 { font-size: 1.25rem; margin: 6px 0; }
  .rank-list { gap: 4px; }
  .rank-list li { padding-top: 2px; padding-bottom: 2px; }
  .rank-list .mini { width: 30px; height: 30px; }
}
@media (max-height: 560px) and (min-width: 600px) {
  .result-card { width: min(640px, 100%); display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; text-align: left; }
  .result-hero { grid-row: span 2; margin: 0; }
  .rank-list, .result-stats, .result-actions, .result-sub { grid-column: 1 / -1; }
}
/* 房間座位列：按鈕永遠在同一行最右邊，名字太長就省略 */
.seat-row { flex-wrap: nowrap; }
.seat-row .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-row .tag, .seat-row .icon-btn, .seat-row .btn3d { flex: none; }
@media (max-width: 420px) {
  .seat-row { gap: 6px; padding: 6px 8px; }
  .seat-row .mini { width: 38px; height: 38px; }
  .seat-row .tag { font-size: .72rem; padding: 2px 6px; }
  .voice-row, .set-row.vol { padding-left: 0; }
  .voice-seg { margin-left: 0; }
}
@media (max-height: 560px) and (min-width: 600px) {
  .result { padding: 8px 72px; }
  .rank-list { grid-template-columns: 1fr 1fr; }
}
/* 手機橫向：自己的座位改成上下排，讓中間的牌桌寬一點 */
@container board (max-height: 499px) and (min-aspect-ratio: 5 / 4) {
  .me-area .seat.me { flex-direction: column !important; }
  .me-area .seat.me .seat-body { align-items: center !important; }
  .me-area .seat-tag .name { max-width: 6em; }
  .opps .seat-tag .name { max-width: 5.5em; }
}
/* 高的螢幕（平板直向）：首頁內容上下置中，別全擠在上面；按鈕與字大一點 */
@media (min-height: 900px) and (min-width: 700px) {
  .home-wrap { min-height: calc(100dvh - 40px); justify-content: center; max-width: 640px; gap: 18px; }
  .home-tag { font-size: 1.25rem; }
  .btn3d.btn-big { font-size: 1.5rem; }
  .btn3d.btn-big small { font-size: .9rem; }
  .result-card { width: min(520px, 100%); }
}
/* 寬（圍桌）：上方與自己的座位改成橫排（頭像在左、名牌在右），把高度留給中間的牌 */
@container board (min-aspect-ratio: 23 / 20) and (min-height: 500px) {
  .tgrid { --slap: clamp(104px, min(15cqw, 18cqh), 200px); gap: clamp(4px, 1.2cqh, 12px); }
  .seat.pos-top, .me-area .seat.me { flex-direction: row; gap: 10px; }
  .seat.pos-top .seat-body, .me-area .seat.me .seat-body { align-items: flex-start; }
  .seat.pos-top .bubble, .me-area .seat.me .bubble { left: calc(var(--av) - 14px); }
  .me-area { padding-bottom: 4px; }
}
.summary { padding-right: 4px; overflow-x: hidden; }
.sum-seats li { min-width: 0; }
.sum-seats .ct, .sum-seats .tag { flex: none; }
/* 等待開始時，上一張的拍牌手印淡掉，不要跟開始鈕搶眼 */
.center.waiting .slap-marks { opacity: .3; }
@media (min-width: 1600px) and (min-height: 560px) {
  .game-screen { grid-template-columns: clamp(290px, 19vw, 360px) 1fr; }
  .summary { font-size: 1rem; }
}

/* ---------- 拍速 ---------- */
.sum-grid.speed b { font-size: 1.15rem; }
.speed-box { margin: 4px 0 8px; text-align: left; }
.speed-box h3 { margin: 6px 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.speed-box .rec, .title-chip { font-size: .8rem; font-weight: 900; color: #8A5A00; background: #FFE9A8; border: 2px solid #F2C14E; border-radius: 999px; padding: 1px 10px; }
.speed-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: .9rem; }
.speed-table th, .speed-table td { padding: 5px 6px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.speed-table thead th { color: var(--ink-soft); font-size: .78rem; font-weight: 800; }
.speed-table tbody th, .speed-table thead th:first-child { text-align: left; }
.speed-table tbody tr { background: #fff; }
.speed-table tbody tr > :first-child { border-radius: 10px 0 0 10px; }
.speed-table tbody tr > :last-child { border-radius: 0 10px 10px 0; }
.speed-table tbody tr.me { background: #EAF8FA; }
.speed-table tbody th { font-weight: 800; display: flex; align-items: center; gap: 6px; max-width: 11em; overflow: hidden; text-overflow: ellipsis; }
.speed-table .mini { width: 26px; height: 26px; }
@media (max-width: 420px) { .speed-table { font-size: .82rem; } .speed-table th, .speed-table td { padding: 4px 3px; } }

.speed-page { max-width: 820px; margin: 0 auto; display: grid; gap: 16px; }
.speed-empty { text-align: center; }
.speed-empty p { margin: 6px 0; font-weight: 800; }
.speed-hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.speed-hero > div { background: #fff; border: 3px solid #F1E3C8; border-radius: 16px; padding: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.speed-hero small { color: var(--ink-soft); font-weight: 800; }
.speed-hero b { font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.speed-hero b i { font-style: normal; font-size: .9rem; margin-left: 2px; color: var(--ink-soft); }
.speed-hero .big { border-color: #F2C14E; background: #FFF8DC; }
.speed-hero .big b { font-size: 2.4rem; color: var(--coral-dark); }
.speed-hero .sub { font-size: .75rem; color: var(--ink-soft); font-weight: 700; }
@media (max-width: 640px) { .speed-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chart-wrap { position: relative; }
.speed-chart { width: 100%; height: auto; display: block; overflow: visible; }
.speed-chart .gl { stroke: #EADFCB; stroke-width: 1; }
.speed-chart .base { stroke: #CDBB9C; stroke-width: 1.5; }
.speed-chart text { pointer-events: none; }
.speed-chart .ax { fill: var(--ink-soft); font-size: 11px; font-weight: 700; }
.speed-chart .lbl { fill: var(--ink); font-size: 12px; font-weight: 900; }
.speed-chart .bar path { fill: #2FA7BD; transition: fill .15s; }
.speed-chart .bar .hit { fill: transparent; }
.speed-chart .bar:hover path, .speed-chart .bar:focus path { fill: #1B7285; }
.speed-chart .bar:focus { outline: none; }
.chart-tip { position: absolute; top: -6px; background: rgba(59,42,30,.94); color: #fff; font-size: .82rem; font-weight: 800; padding: 6px 10px; border-radius: 10px; pointer-events: none; white-space: nowrap; }
.speed-reset { display: flex; justify-content: flex-end; }

/* 彈窗內容太長時要能捲：卡片高度一定要限制在畫面內（grid 裡的 max-height:100% 不會生效），
 * 捲動交給內容區，並顯示看得見的捲軸 */
.modal-card { max-height: calc(100dvh - 24px - var(--safe-t) - var(--safe-b)); min-height: 0; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-body, .result-card, .summary, .chat-log {
  scrollbar-width: thin; scrollbar-color: #C9A56E transparent;
}
.modal-body::-webkit-scrollbar, .result-card::-webkit-scrollbar, .summary::-webkit-scrollbar, .chat-log::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb, .result-card::-webkit-scrollbar-thumb, .summary::-webkit-scrollbar-thumb, .chat-log::-webkit-scrollbar-thumb { background: #C9A56E; border-radius: 8px; }
/* 頁面比一個螢幕長時，底下也要有沙灘色（iOS 不支援固定背景） */
html { background: #E3BC7E; }

/* 結算卡變長（加了拍速表）時，按鈕固定在卡片底部，不用捲到最下面才按得到 */
.result-actions { position: sticky; bottom: -18px; background: linear-gradient(180deg, rgba(255,249,238,0), var(--paper) 30%); padding: 14px 0 4px; margin-bottom: -4px; }
@media (max-height: 560px) { .result-actions { bottom: -12px; } }

.speed-table.compact { table-layout: fixed; }
.speed-table.compact thead th { white-space: normal; line-height: 1.2; }
.speed-table.compact th:first-child { width: 40%; }
.speed-table.compact tbody th { max-width: none; }
.speed-table.compact tbody th .nm-cell { overflow: hidden; text-overflow: ellipsis; }
.speed-table tbody th { display: table-cell; overflow: hidden; text-overflow: ellipsis; }
.speed-table tbody th .mini { vertical-align: middle; margin-right: 4px; }

/* 單機：每個電腦各自的難度 */
.diff-all { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.diff-all small { font-weight: 800; color: var(--ink-soft); }
.diff-all .seg { flex: 1; }
.ai-diff-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.ai-diff-list li { display: flex; align-items: center; gap: 10px; }
.ai-no { flex: none; width: 4.2em; font-weight: 800; }
.ai-diff-list .seg { flex: 1; }
@media (max-width: 420px) { .ai-no { width: 3.6em; font-size: .9rem; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) {
  .diff-all { flex-direction: column; align-items: stretch; gap: 4px; }
  .ai-diff-list .seg button, .diff-all .seg button { min-width: 0; padding: 0 2px; }
}
@media (max-width: 420px) {
  .ai-diff-list li { flex-direction: column; align-items: stretch; gap: 2px; }
  .ai-no { width: auto; font-size: .85rem; color: var(--ink-soft); }
}

/* ---------- 自製下拉選單 ---------- */
.dd-btn {
  --c: #3654A8; --bg: #E4ECFF; --bd: #9FB4EA;
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 42px; padding: 0 10px 0 10px; border-radius: 14px;
  border: 2px solid var(--bd); background: var(--bg); color: var(--c);
  font-weight: 900; font-size: .88rem; box-shadow: 0 3px 0 var(--bd);
  transition: transform .08s, box-shadow .08s;
}
.dd-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bd); }
.dd-btn .dd-chev { width: 16px; height: 16px; transition: transform .15s; }
.dd-btn[aria-expanded="true"] .dd-chev { transform: rotate(180deg); }
.dd-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(255,212,71,.8), 0 3px 0 var(--bd); }
.dd-pips { display: inline-flex; gap: 2px; }
.dd-pips i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; }
.dd-pips i.on { opacity: 1; }
.lv-kid { --c: #1F7A45; --bg: #DDF5E5; --bd: #8FD4A6; }
.lv-easy { --c: #1C6FA8; --bg: #E1F2FF; --bd: #93C8EE; }
.lv-normal { --c: #8A5A00; --bg: #FFF1C2; --bd: #EFCB63; }
.lv-hard { --c: #B7352B; --bg: #FFE3DE; --bd: #F2A197; }
.dd-pop {
  position: fixed; z-index: 95; margin: 0; padding: 6px; list-style: none;
  max-height: min(320px, 60dvh); overflow-y: auto;
  background: var(--paper); border: 3px solid var(--wood-light); border-radius: 18px;
  box-shadow: 0 6px 0 rgba(122,78,42,.35), 0 16px 30px rgba(0,40,60,.22);
  animation: dd-in .14s ease-out;
}
@keyframes dd-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.dd-pop li {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 12px;
  color: var(--c, var(--ink)); cursor: pointer; border: 2px solid transparent;
}
.dd-pop li + li { margin-top: 3px; }
.dd-pop li.active, .dd-pop li:hover { background: var(--bg, #F4ECDC); border-color: var(--bd, transparent); }
.dd-pop li[aria-selected="true"] { background: var(--bg); border-color: var(--bd); }
.dd-opt-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dd-opt-text b { font-size: .98rem; }
.dd-opt-text small { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.dd-check { width: 20px; height: 20px; flex: none; }
.dd-pop .dd-pips i { width: 8px; height: 8px; }

/* Character names may be longer in English. */
.char-grid, .setup-me .char-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.char-opt { min-width: 0; overflow-wrap: anywhere; }
@media(max-width: 360px) { .char-grid, .setup-me .char-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }