/* ===== 寶島大富翁 — 可愛台灣風 ===== */
: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 { margin: 0; min-height: 100%; }
body { margin: 0; min-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: clip;
}
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)); }

.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: 70px; 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; }
@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)); }
}

/* ---------- 單機設定、說明 ---------- */
.help { max-width: 620px; margin: 0 auto; }
.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; }
}
.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-chatbox { flex: 1 1 0; min-height: 44px; display: flex; flex-direction: column; gap: 6px; }
.side-chatbox[hidden] { display: none; }
.side-chatbox.min { flex: 0 0 auto; }
.side-chatbox.min .side-chat { display: none; }
.side-chat { flex: 1 1 auto; min-height: 0; }
.side-chat .chat-log { max-height: none; min-height: 60px; }
.chat-toggle { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 14px; border: 3px solid var(--wood-light); border-radius: 999px; background: #FFF6E2; color: var(--ink); font: inherit; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 rgba(122,78,42,.25); }
.chat-toggle b { flex: 1; text-align: left; }
.chat-toggle .badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--bad); color: #fff; font-size: .78rem; display: grid; place-items: center; }
.chat-toggle .badge[hidden] { display: none; }
.chat-toggle .caret { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid currentColor; transition: transform .15s; }
.chat-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.chat-toggle:active { transform: translateY(2px); box-shadow: 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; }
}

.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 { display: block; width: 100%; height: 94%; margin-top: 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: calc(100vh - 24px - var(--safe-t) - var(--safe-b)); max-height: calc(100dvh - 24px - var(--safe-t) - var(--safe-b)); min-height: 0; 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; min-height: 0; flex: 1 1 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); }
}

.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; }
  .set-row.vol { padding-left: 0; }
}
@media (max-height: 560px) and (min-width: 600px) {
  .result { padding: 8px 72px; }
  .rank-list { grid-template-columns: 1fr 1fr; }
}
/* 高的螢幕（平板直向）：首頁內容上下置中，別全擠在上面；按鈕與字大一點 */
@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%); }
}
.summary { padding-right: 4px; overflow-x: clip; }
.sum-seats li { min-width: 0; }
.sum-seats .ct, .sum-seats .tag { flex: none; }
@media (min-width: 1600px) and (min-height: 560px) {
  .game-screen { grid-template-columns: clamp(290px, 19vw, 360px) 1fr; }
  .summary { font-size: 1rem; }
}

.shape { display: block; }
.sh-inline { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: .25em; }
.float {
  position: absolute; z-index: 8; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font-size: 2.8cqw; font-weight: 900; color: #fff; padding: .1cqw 1cqw; border-radius: 2cqw; animation: floatUp 1.3s ease-out forwards;
  text-shadow: 0 .2cqw 0 rgba(0,0,0,.3); border: .3cqw solid #fff;
}
.float.good { background: var(--ok); } .float.bad { background: var(--bad); }
@keyframes floatUp { 0% { opacity: 0; margin-top: 0; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -6cqw; } }
/* 左欄摘要：玩家列 */
.sum-seats li { flex-wrap: wrap; }
.sum-seats li.turn { background: #FFF4C2; box-shadow: 0 0 0 3px var(--seat); }
.sum-seats li.out { opacity: .5; }
.sum-seats .who { flex: 1; min-width: 0; display: grid; }
.sum-seats .who small { color: var(--ink-soft); font-weight: 700; font-size: .75rem; }
.sum-seats .tags { display: flex; gap: 3px; flex-wrap: wrap; }
.sum-seats .ct { display: grid; text-align: right; } .sum-seats .ct small { color: var(--ink-soft); font-size: .7rem; font-weight: 700; }

/* 我的地產／格子說明視窗 */
.modal-card.wide { width: min(640px, 100%); }
.mg-cash { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: #FFF1C2; font-weight: 800; }
.mg-hint { margin: 8px 0; }
.mg-group { margin-top: 10px; border-left: 8px solid var(--gc); background: #fff; border-radius: 12px; padding: 6px 10px 10px; }
.mg-group h4 { margin: 4px 0 6px; font-size: 1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mg-group h4 i { font-style: normal; font-size: .8rem; color: var(--ink-soft); font-weight: 700; }
.mg-group h4 i.full { color: var(--ok); }
.mg-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 2px dashed #F1E3C8; flex-wrap: wrap; }
.mg-gl { width: 34px; height: 34px; flex: none; } .mg-gl svg { width: 100%; height: 100%; }
.mg-name { flex: 1 1 120px; display: grid; min-width: 0; } .mg-name small { color: var(--ink-soft); font-weight: 700; } .mg-name .why { color: var(--coral-dark); }
.mg-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ti-head { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-left: 10px solid var(--gc); background: #fff; border-radius: 12px; }
.ti-head h3 { margin: 0; } .ti-head small { color: var(--ink-soft); font-weight: 700; }
.ti-gl { width: 56px; height: 56px; flex: none; } .ti-gl svg { width: 100%; height: 100%; }
.ti-line { margin: 8px 0 0; font-weight: 700; }
.ti-rent { width: 100%; margin-top: 8px; border-collapse: collapse; }
.ti-rent th, .ti-rent td { padding: 4px 8px; text-align: left; border-bottom: 2px dashed #F1E3C8; }
.ti-rent tr.now { background: #FFF1C2; font-weight: 900; }
.own-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; }
.own-chip svg { width: 20px; height: 20px; }

body.big-text .mc { font-size: clamp(13px, 2.6cqw, 24px); }
body.big-text .sum-seats, body.big-text .sum-log { font-size: 1.08rem; }

/* =====================================================================
 * 3D 棋盤版面：畫布鋪滿整個 .board，中央操作區浮在上面。
 *  - 寬版（橫向）：畫布在左、操作區在右邊一欄
 *  - 窄版（直向）：畫布在上、操作區在下面、玩家現金列在最上面
 * ===================================================================== */
.board { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.b3d { position: relative; flex: 1 1 0; min-height: 0; min-width: 0; width: 100%; display: block; cursor: grab; outline-offset: -4px; }
.b3d:active { cursor: grabbing; }
.mb { display: contents; }
.mc { flex: none; pointer-events: auto; overflow: hidden auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 10px 14px; text-align: center; font-size: 15px; background: rgba(255,249,238,.94); border: 4px solid var(--wood-light); border-radius: 22px; box-shadow: 0 8px 0 rgba(122,78,42,.35), 0 10px 24px rgba(0,0,0,.18); z-index: 3; }
.mc > :first-child { margin-top: auto; } .mc > :last-child { margin-bottom: auto; }   /* 內容比面板矮就置中；比面板高就從最上面開始捲（不會把最上一列切掉） */
.mc-top { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; justify-content: space-between; width: 100%; font-weight: 900; color: var(--ink-soft); min-width: 0; }
.mc-top .mc-round { flex: 1 1 auto; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92em; }
.mc-props { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; margin-left: 0; padding: 4px 10px; min-height: 32px; border: 0; border-radius: 999px; background: #EAF8FA; color: var(--sea-dark); font: inherit; font-size: .85rem; font-weight: 900; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.mc-props svg { width: 16px; height: 16px; }
.mc-props:active { transform: translateY(1px); box-shadow: none; }
.mc-timer { flex: none; white-space: nowrap; font-size: .88em; padding: 0 8px; border-radius: 10px; background: #EAF8FA; color: var(--sea-dark); }
.mc-timer.hurry { background: #FFE0DC; color: var(--bad); animation: pulse .7s infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }
.mc-turn { display: flex; align-items: center; justify-content: center; gap: .5em; flex-wrap: wrap; padding: .15em .8em .15em .25em; border-radius: 2em; background: #fff; border: 3px solid var(--seat); font-size: 1.15em; }
.mc-turn.mine { background: #FFF4C2; animation: pulse 1s infinite alternate; }
.mc-turn .mini { width: 2.1em; height: 2.1em; flex: none; }
.mc-turn .tag, .tag { font-style: normal; font-size: .7em; font-weight: 800; padding: .1em .55em; border-radius: 1em; background: #F1E3C8; color: var(--ink-soft); }
.mc-dice { min-height: 1.4em; }
.mc-sum { font-size: 1.35em; font-weight: 900; color: var(--coral-dark); white-space: nowrap; }
.mc-msg { margin: 0; min-height: 2.4em; font-weight: 800; line-height: 1.3; max-width: 100%; }
.mc-prompt { margin: 0; font-weight: 800; line-height: 1.35; }
.mc-prompt.dim { color: var(--ink-soft); } .mc-prompt.strong { color: var(--coral-dark); font-size: 1.1em; }
.mc-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; align-items: center; }
.mc-actions .btn3d { flex-direction: row; min-width: 130px; }
.mc-actions .btn3d.small { min-width: 0; }
.mc-tile { display: flex; align-items: center; gap: 10px; position: relative; padding: .45em .9em .45em 1.4em; background: #fff; border-radius: 12px; border: 3px solid #F1E3C8; text-align: left; }
.mc-band { position: absolute; left: 0; top: 0; bottom: 0; width: .8em; border-radius: 10px 0 0 10px; }
.mc-gl { width: 2.6em; height: 2.6em; flex: none; } .mc-gl svg { width: 100%; height: 100%; }
.mc-tn { display: grid; } .mc-tn small { color: var(--ink-soft); font-weight: 700; }
.card-toast { position: absolute; z-index: 6; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: min(78%, 380px); padding: 6px 12px 6px 8px; border-radius: 16px; border: 3px solid #E0A800; background: #FFF4C2; box-shadow: 0 4px 0 rgba(122,78,42,.35); font-weight: 800; font-size: 14px; line-height: 1.3; cursor: pointer; animation: toastIn .25s; }
.card-toast.chest { background: #E7F6EC; border-color: #3DAE6B; }
.card-toast .ct-ico { width: 30px; height: 30px; flex: none; } .card-toast .ct-ico svg { width: 100%; height: 100%; }
.card-toast .ct-tx { display: grid; text-align: left; } .card-toast .ct-tx b { font-size: 12px; color: var(--ink-soft); }
@keyframes toastIn { from { opacity: 0; margin-top: -12px; } to { opacity: 1; margin-top: 0; } }
.float { font-size: 22px; padding: 2px 10px; border-radius: 16px; border: 3px solid #fff; }
@keyframes floatUp { 0% { opacity: 0; margin-top: 0; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -60px; } }

/* 窄版（直向）：現金列在最上面、畫布、操作區在下面 */
.game-screen .board { padding: calc(60px + var(--safe-t)) 8px calc(8px + var(--safe-b)); gap: 6px; }
body.online-game .game-screen .board { padding-bottom: calc(68px + var(--safe-b)); }
.mc { max-height: 42%; }
.mb-strip { order: -1; flex: none; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 6px; }
.mb-strip .ms { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 6px; padding: 3px 6px; border-radius: 14px; background: rgba(255,249,238,.95); border: 3px solid var(--seat); min-width: 0; }
.mb-strip .ms.turn { background: #FFF1B0; box-shadow: 0 0 0 3px var(--seat); }
.mb-strip .ms.out { opacity: .5; }
.mb-strip .mini { width: 30px; height: 30px; grid-row: 1 / 3; }
.mb-strip b { font-size: 14px; text-align: left; line-height: 1.1; white-space: nowrap; }
.mb-strip small { font-size: 11px; color: var(--ink-soft); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mb-strip .ms-shape { display: inline-block; width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; }
/* 橫向：畫布佔滿，操作區縮成一張小面板浮在右下角（棋盤左右本來就有空白），不佔版面 */
@media (min-aspect-ratio: 1/1) {
  .game-screen .board { padding: 10px; }
  body.online-game .game-screen .board { padding-bottom: 10px; }
  .b3d { flex: 1 1 0; width: 100%; height: 100%; }
  .mc { position: absolute; right: 14px; bottom: 14px; width: clamp(230px, 26%, 300px); max-height: calc(100% - 28px); align-self: auto; padding: 8px 12px; gap: 6px; }
  .mb-strip { display: none; }
}
/* 手機橫放：左邊要讓出資訊／選單鈕，右邊讓出設定鈕 */
@media (max-height: 559px) and (min-aspect-ratio: 1/1) {
  .game-screen .board { padding: 6px calc(64px + var(--safe-r)) 6px calc(126px + var(--safe-l)); }
  .mc { width: clamp(210px, 34%, 270px); font-size: 13px; right: calc(70px + var(--safe-r)); bottom: 8px; }
}
body.big-text .mc { font-size: 18px; }
.cam-btns { position: absolute; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: auto; }
.cam-btns .btn3d { min-height: 38px; padding: .2em .7em; font-size: .85rem; }
.cam-btns .btn3d[aria-pressed="true"] { --c1: #7EE0EA; --c2: #2FA7BD; --edge: #1B7285; --fg: #fff; }

/* ---------- 道具 ---------- */
.mc-itemwrap { margin: 4px 0; padding: 6px 8px; border-radius: 14px; background: rgba(255,248,230,.92); border: 2px dashed #E9C77B; }
.mc-ihead { width: 100%; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; min-height: 32px; display: flex; align-items: center; justify-content: space-between; color: #5A3A14; font-size: .85rem; }
.mc-ihead small { opacity: .7; font-weight: 700; }
.mc-inone { margin: 2px 0 0; font-size: .75rem; color: #7A5A2E; text-align: center; }
.it-tx { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.it-tx small { display: block; }
.mc-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 2px 0 4px; }
.it-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 999px; background: #FFF8E6; border: 2px solid #E9C77B; color: #5A3A14; font-size: .85rem; font-weight: 700; font-family: inherit; }
.it-chip .it-ico { width: 26px; height: 26px; display: inline-flex; }
.it-chip .it-ico svg { width: 100%; height: 100%; }
.it-chip small { font-weight: 600; opacity: .65; font-size: .72rem; }
button.it-chip.on { cursor: pointer; background: #FFE9A8; border-color: #F2A93B; box-shadow: 0 3px 0 #D99A00; min-height: 44px; }
button.it-chip.on:active, button.it-chip.sel { transform: translateY(2px); box-shadow: 0 1px 0 #D99A00; background: #FFD86B; }
button.it-chip.on:focus-visible { outline: 3px solid #3D5FC4; outline-offset: 2px; }
.mc-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pick-n { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 6px; width: 100%; max-width: 420px; }
.pick-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; min-height: 60px; border-radius: 12px; border: 2px solid #E9C77B; background: #fff; cursor: pointer; font-family: inherit; box-shadow: 0 3px 0 #D9B25C; }
.pick-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #D9B25C; }
.pick-btn:focus-visible { outline: 3px solid #3D5FC4; outline-offset: 2px; }
.pick-btn svg { width: 30px; height: 30px; }
.pick-btn small { font-size: .68rem; color: #5A3A14; white-space: nowrap; }
.sum-items, .ms .sum-items { display: inline-flex; gap: 2px; margin-top: 2px; }
.it-mini { width: 18px; height: 18px; display: inline-flex; }
.it-mini svg { width: 100%; height: 100%; }
.sum-seats li .sum-items { grid-column: 2; }
.sum-seats .who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1; }
.sum-seats .who small { display: block; }

.inv-cap { margin: 0 0 8px; font-size: .9rem; color: #5A3A14; }
.inv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inv-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #FFF8E6; border: 2px solid #E9C77B; }
.inv-list .it-ico.big { width: 44px; height: 44px; flex: none; display: inline-flex; }
.inv-list .it-ico.big svg { width: 100%; height: 100%; }
.inv-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; color: #5A3A14; }
.inv-tx small { font-size: .8rem; opacity: .8; }
.inv-auto { font-style: normal; font-size: .8rem; font-weight: 700; color: #7A5A2E; }
.inv-empty { justify-content: center; color: #7A5A2E; }

.tgt-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; }
.tgt-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 3px solid var(--seat, #E9C77B); background: #fff; cursor: pointer; font-family: inherit; box-shadow: 0 3px 0 rgba(0,0,0,.12); color: #3A2410; }
.tgt-btn .mini { width: 34px; height: 34px; display: inline-flex; }
.tgt-btn .mini svg { width: 100%; height: 100%; }
.tgt-btn b { font-size: .9rem; }
.tgt-btn small { font-size: .72rem; opacity: .75; }
.tgt-btn .tg-tx { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.tgt-btn.sel { background: #FFF1B0; box-shadow: 0 0 0 3px var(--seat, #E9C77B), 0 3px 0 rgba(0,0,0,.18); transform: translateY(-1px); }
.tgt-btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.tgt-list.tiles { max-height: 132px; overflow-y: auto; align-content: flex-start; padding: 2px; }
.mc-pick .btn3d { align-self: stretch; }
.tgt-btn:active { transform: translateY(2px); box-shadow: none; }
.tgt-btn:focus-visible { outline: 3px solid #3D5FC4; outline-offset: 2px; }

/* ---------- 自製卷軸（scrollbar.js）：原生卷軸一律隱藏 ---------- */
.cs { scrollbar-width: none; -ms-overflow-style: none; }
.cs::-webkit-scrollbar { display: none; width: 0; height: 0; }
html.cs-page { scrollbar-width: none; -ms-overflow-style: none; }
html.cs-page::-webkit-scrollbar { display: none; width: 0; }
#cs-layer { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.cs-track { position: fixed; width: 14px; border-radius: 999px; background: rgba(255, 244, 214, .78); border: 2px solid rgba(196, 140, 64, .55); box-shadow: inset 0 1px 2px rgba(122, 78, 42, .25); pointer-events: auto; touch-action: none; display: none; }
.cs-thumb { position: absolute; left: -1px; right: -1px; top: 0; min-height: 44px; border-radius: 999px; background: linear-gradient(180deg, #FFC96B, #E8963A); border: 2px solid #A8642A; box-shadow: 0 2px 0 #8A4E1F; cursor: grab; touch-action: none; }
.cs-thumb::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 14px; margin: -7px 0 0 -2px; border-radius: 4px; background: rgba(138, 78, 31, .55); }
.cs-thumb.drag, .cs-thumb:active { cursor: grabbing; background: linear-gradient(180deg, #FFB347, #D97F22); }
.cs-track:hover .cs-thumb { filter: brightness(1.05); }
.summary { padding-right: 20px; }
.modal-body, .chat-log, .result-card { scroll-padding-right: 20px; }

/* ---------- 地圖選擇卡片 ---------- */
.map-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; width: 100%; }
.map-card { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px 6px 6px; text-align: left; font-family: inherit; color: var(--ink); background: #fff; border: 3px solid #E9C77B; border-radius: 16px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.1); }
.map-card[aria-checked="true"] { border-color: var(--coral); background: #FFF1E8; box-shadow: 0 3px 0 var(--coral-dark); }
.map-card:focus-visible { outline: 3px solid #3D5FC4; outline-offset: 2px; }
.map-sw { flex: none; width: 46px; height: 46px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); }
.map-sw b { font-size: 1.15rem; }
.map-sw small { font-size: .62rem; opacity: .8; }
.map-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.map-tx b { font-size: 1rem; }
.map-tx small { font-size: .74rem; color: var(--ink-soft); line-height: 1.25; }
.set-line.stack { flex-direction: column; align-items: stretch; gap: 6px; }

/* ---------- 道具商店 ---------- */
.shop-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; width: 100%; }
.shop-item { position: relative; display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 4px 44px 4px 6px; text-align: left; font-family: inherit; color: #3A2410; background: #FFF8E6; border: 2px solid #E9C77B; border-radius: 14px; box-shadow: 0 3px 0 #D99A00; cursor: pointer; }
.shop-item:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.shop-item:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #D99A00; }
.shop-item .it-ico { width: 30px; height: 30px; flex: none; display: inline-flex; }
.shop-item .it-ico svg { width: 100%; height: 100%; }
.shop-item .it-tx { display: flex; flex-direction: column; min-width: 0; }
.shop-item .it-tx b { font-size: .9rem; }
.shop-item .it-tx small { font-size: .68rem; line-height: 1.2; opacity: .7; }
.shop-price { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 900; font-size: .9rem; background: #FFD447; color: #4A2C0A; border-radius: 999px; padding: 2px 8px; }

/* 房間裡替每個電腦選難度：圓潤的分段按鈕（取代原生下拉選單） */
/* 自製下拉選單（電腦難度） */
.ai-dd { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; margin-left: auto; border: 3px solid var(--wood-light); border-radius: 999px; background: #FFF6E2; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 900; cursor: pointer; box-shadow: 0 3px 0 rgba(122,78,42,.28); white-space: nowrap; }
.ai-dd:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(122,78,42,.28); }
.ai-dd[aria-expanded="true"] { background: #EAF8FA; border-color: var(--sea); }
.ai-dd-caret { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid currentColor; transition: transform .15s; }
.ai-dd[aria-expanded="true"] .ai-dd-caret { transform: rotate(180deg); }
.dd-menu { position: fixed; z-index: 400; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: #FFF9EE; border: 4px solid var(--wood-light); border-radius: 18px; box-shadow: 0 8px 0 rgba(122,78,42,.3), 0 14px 28px rgba(0,0,0,.22); animation: ddIn .12s ease-out; }
.dd-opt { display: block; width: 100%; min-height: 40px; padding: 6px 16px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-weight: 900; text-align: left; cursor: pointer; }
.dd-opt:hover, .dd-opt:focus-visible { background: #F3E3BF; outline: none; }
.dd-opt[aria-selected="true"] { background: linear-gradient(#FF8E7F, #F0584B); color: #fff; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 道具選對手：卡片式（頭像、現金、位置、地產數、不能選的原因） */
.pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px; width: 100%; max-height: 176px; overflow-y: auto; padding: 3px; align-content: start; }
.pcard { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 0; padding: 6px 8px; border-radius: 16px; text-align: left; }
.pcard .pc-head { display: flex; align-items: center; gap: 6px; }
.pcard .pc-head .mini { width: 32px; height: 32px; flex: none; }
.pcard .pc-head b { font-size: .92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .pc-stats { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: .72rem; color: var(--ink-soft); }
.pcard .pc-stats b { color: var(--ink); font-size: .74rem; }
.pcard .pc-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.pc-tag { font-style: normal; font-size: .66rem; font-weight: 900; padding: 1px 7px; border-radius: 999px; background: #EAF8FA; color: var(--sea-dark); }
.pc-tag.bad { background: #FFE0DC; color: #B23A2F; } .pc-tag.guard { background: #E8F7DC; color: #3E7A22; }
.pcard .pc-eff { font-size: .74rem; font-weight: 900; color: #B23A2F; background: #FFF1B0; border-radius: 10px; padding: 2px 8px; align-self: flex-start; }
.pcard .pc-eff.why { background: #EFE7D8; color: #7A6A55; font-weight: 700; }
.pcard.sel::after { content: '\2713'; position: absolute; right: 8px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--seat, #F0584B); color: #fff; font-size: .8rem; font-weight: 900; display: grid; place-items: center; }

/* 左欄：摘要／玩家分頁；聊天室縮成一條時，摘要區拿到整個高度 */
.summary { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.sum-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: #F0E1BF; flex: none; }
.sum-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 4px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: inherit; font-weight: 900; cursor: pointer; }
.sum-tabs button i { font-style: normal; font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.08); }
.sum-tabs button[aria-selected="true"] { background: linear-gradient(#FF8E7F, #F0584B); color: #fff; box-shadow: 0 3px 0 #C23B30; }
.sum-tabs button[aria-selected="true"] i { background: rgba(255,255,255,.28); }
.sum-tabs button:focus-visible { outline: 3px solid #3D5FC4; outline-offset: 2px; }
.sum-pane { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.sum-me { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 6px; border-radius: 14px; background: #fff; border: 3px solid var(--seat, #E9C77B); }
.sum-me .mini { width: 34px; height: 34px; } .sum-me .mini svg { width: 100%; height: 100%; }
.sum-me .who { display: flex; flex-direction: column; line-height: 1.2; } .sum-me .who small { color: var(--ink-soft); font-size: .74rem; }
.sum-me .ct { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .sum-me .ct b { font-size: 1.15rem; } .sum-me .ct small { color: var(--ink-soft); font-size: .72rem; }
.sum-seats.dense li { padding: 4px 6px; }
.sum-seats.dense .mini { width: 26px; height: 26px; }

.stat-chips { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: .74rem; color: var(--ink-soft); line-height: 1.3; }
.stat-chips > span { white-space: nowrap; } .stat-chips b { color: var(--ink); font-weight: 900; }
.sum-status { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.sum-status small { font-size: .78rem; font-weight: 800; color: var(--ink-soft); }
.sum-status b { font-size: 1.05rem; }
.sum-pane, .pcards { scroll-padding-right: 20px; }
.sum-pane { padding-right: 14px; }
.summary { padding-right: 4px; }

/* ===== 結算畫面（豐富版）：皇冠、彩帶、統計方塊、小獎項、資產長條 ===== */
.result-card { position: relative; width: min(500px, 100%); }
.result-top { position: relative; display: grid; justify-items: center; gap: 4px; }
.result-badge { display: inline-block; padding: 2px 12px; border-radius: 999px; background: #FFE9A8; color: #7A4E2A; font-weight: 900; font-size: .8rem; border: 2px solid #E0A800; }
.hero-wrap { position: relative; width: fit-content; margin: 0 auto; }
.hero-wrap .crown { position: absolute; left: 50%; top: -22px; width: 54px; height: 32px; transform: translateX(-50%) rotate(-6deg); z-index: 2; animation: bounce 1.6s ease-in-out infinite; filter: drop-shadow(0 2px 0 rgba(122,78,42,.35)); }
.result-hero { margin-top: 6px; box-shadow: 0 0 0 6px rgba(255,212,71,.35), 0 0 0 12px rgba(255,212,71,.15); }
.result-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; }
.result-tiles div { background: #fff; border: 2px solid #F1E3C8; border-radius: 14px; padding: 6px 4px; display: grid; min-width: 0; }
.result-tiles b { font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-tiles span { font-size: .72rem; color: var(--ink-soft); font-weight: 800; }
.result-awards { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 10px; }
.award { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; padding: 3px 10px; border-radius: 999px; background: #fff; border: 2px solid var(--seat, #F1E3C8); font-weight: 800; font-size: .78rem; min-width: 0; }
.award em { font-style: normal; background: var(--seat, #F1E3C8); color: #fff; border-radius: 999px; padding: 0 7px; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.award small { color: var(--ink-soft); font-weight: 800; }
.rank-list li { display: grid; grid-template-columns: 30px 38px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 3px; align-items: center; padding: 5px 10px 6px 5px; }
.rank-list li.first { border-color: #FFD447; background: linear-gradient(#FFFBEA, #fff); }
.rank-list li.out { opacity: .65; }
.rank-list .nm { display: flex; align-items: center; gap: 4px; min-width: 0; }
.rank-list .nm .nt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list .sc { font-weight: 900; white-space: nowrap; }
.rank-list .bar { grid-column: 3 / -1; height: 9px; border-radius: 999px; background: #F1E3C8; overflow: hidden; }
.rank-list .bar .fill { display: block; height: 100%; border-radius: 999px; background: var(--seat, #999); min-width: 6px; overflow: hidden; }
.rank-list .bar .cash { display: block; height: 100%; background: rgba(255,255,255,.55); }
.rank-list .chips { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .74rem; color: var(--ink-soft); font-weight: 700; }
.rank-list .chips b { color: var(--ink); }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.confetti.soft { opacity: .4; }
.confetti i { position: absolute; top: -12px; left: var(--x); width: 9px; height: 14px; background: var(--c); border-radius: 2px; transform: rotate(var(--r)); animation: confetti-fall var(--t) linear var(--d) infinite; }
.result-card { z-index: 1; }
@keyframes confetti-fall { to { transform: translateY(105dvh) rotate(calc(var(--r) + 540deg)); } }
@media (max-width: 380px) {
  .result-tiles b { font-size: .95rem; }
  .rank-list li { grid-template-columns: 26px 32px minmax(0, 1fr) auto; column-gap: 6px; }
  .rank-list .mini { width: 32px; height: 32px; }
}
@media (max-height: 560px) {
  .result-tiles, .rank-list .chips { display: none; }
  .hero-wrap .crown { width: 36px; height: 22px; top: -14px; }
  .result-awards { margin-bottom: 6px; }
}
@media (max-height: 560px) and (min-width: 600px) {
  .result-card { width: min(640px, 100%); grid-template-columns: auto 1fr; }
  .result-top { grid-row: span 2; }
  .result-awards { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (min-height: 900px) and (min-width: 700px) {
  .result-card { width: min(600px, 100%); padding: 24px; }
  .result-hero { width: 150px; height: 150px; }
  .rank-list .chips { font-size: .82rem; }
}
.result-top { padding-top: 14px; }
@media (max-height: 560px) and (min-width: 600px) {
  .result-top { padding-top: 10px; }
  .result-card .result-sub { grid-column: 2; margin: 0 0 4px; }
  .result-card h2 { grid-column: 2; }
}
.result-badge { margin-bottom: 20px; }
@media (max-height: 560px) { .result-badge { margin-bottom: 12px; } }

/* 選遙控骰／機票：選中的點數與落點預覽 */
.pick-btn.sel { background: #FFE9A8; border-color: #F2A93B; transform: translateY(2px); box-shadow: 0 1px 0 #D99A00; }
.mc-hint { margin: 0; font-size: .82rem; font-weight: 800; color: var(--ink-soft); text-align: center; }
.mc-hint.good { color: #1F7A46; }
.mc-hint.bad { color: #C0392B; }

/* 機票：分類篩選＋格子清單 */
.fly-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; }
.fly-f { min-height: 32px; padding: 2px 10px; border-radius: 999px; border: 2px solid #E9C77B; background: #fff; color: #5A3A14; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.fly-f.on { background: #FFD86B; border-color: #F2A93B; }
.fly-f:focus-visible, .tchip:focus-visible { outline: 3px solid #3D5FC4; outline-offset: 2px; }
.tilegrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); max-height: 168px; }
.tchip { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 8px 4px 12px; border-radius: 12px; border: 2px solid #E9C77B; background: #fff; font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.tchip .tc-band { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--band, #D9B25C); }
.tchip .tc-gl { width: 24px; height: 24px; flex: none; display: inline-flex; }
.tchip .tc-gl svg { width: 100%; height: 100%; }
.tchip .tc-tx { display: grid; min-width: 0; }
.tchip .tc-tx b { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchip .tc-tx small { font-size: .68rem; font-weight: 700; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchip .tc-tx small.good { color: #1F7A46; }
.tchip .tc-tx small.bad { color: #C0392B; }
.tchip.sel { background: #FFE9A8; border-color: #F2A93B; box-shadow: 0 0 0 2px #F2A93B; }
.map-note { margin: 6px 0 0; font-size: .78rem; color: var(--ink-soft); font-weight: 700; }
.map-sw { background: linear-gradient(135deg, #BFE9F5 0 45%, #E0A65E 45% 100%); color: #3B2A1E; }

/* ---- 擲骰數選擇、遙控骰 1～12、商店買賣、道具說明 ---- */
.dice-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 360px; margin: 2px auto 6px; }
.dc-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 6px; min-height: 76px; border-radius: 14px; border: 2px solid #E9C77B; background: #fff; color: #5A3A14; font-family: inherit; cursor: pointer; box-shadow: 0 3px 0 #D9B25C; }
.dc-btn.sel { background: #FFE9A8; border-color: #F2A93B; transform: translateY(2px); box-shadow: 0 1px 0 #D99A00; }
.dc-btn:focus-visible { outline: 3px solid #3D5FC4; outline-offset: 2px; }
.dc-btn:disabled { opacity: .6; }
.dc-dice { display: inline-flex; gap: 4px; } .dc-dice svg { width: 30px; height: 30px; }
.dc-btn b { font-size: .95rem; } .dc-btn small { font-size: .7rem; opacity: .75; text-align: center; }
.pick-n.pick-12 { grid-template-columns: repeat(6, minmax(40px, 1fr)); }
.pk-n { font-size: 1.15rem; font-weight: 900; color: var(--coral-dark, #E8503F); line-height: 1.2; }
.pts { color: #B97A00; font-size: 1.1em; }
.ptsline { display: block; color: #B97A00; font-weight: 700; }
.shop-item .it-tx em { font-style: normal; font-size: .68rem; font-weight: 700; color: #B97A00; }
.shop-item.done { background: #F0E9D6; }
.shop-item.sellb { background: #F1FAF3; border-color: #9FD5AE; box-shadow: 0 3px 0 #7DBB8D; }
.shop-price.back { background: #B9EBC7; color: #1F6B3A; }
.sell-h { margin: 4px 0 0; }
.shop-list.sell { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ig-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ig-list li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: #FFF8E6; border: 2px solid #E9C77B; color: #5A3A14; }
.ig-list .it-ico { width: 40px; height: 40px; flex: none; display: inline-flex; } .ig-list .it-ico svg { width: 100%; height: 100%; }
.ig-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ig-tx small { font-size: .8rem; opacity: .85; }
.ig-meta { flex: none; text-align: right; font-size: .78rem; font-weight: 700; color: #7A5A2E; }
.ig-meta b { display: inline-block; background: #FFD447; color: #4A2C0A; border-radius: 999px; padding: 1px 8px; }
.ig-rule { margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: #EAF6FF; color: #24507A; font-size: .88rem; line-height: 1.5; }
@media (max-width: 420px) { .pick-n.pick-12 { grid-template-columns: repeat(4, 1fr); } }

/* ---- 道具商店：滿版疊在遊戲畫面上（RWD） ---- */
.shop-ov { position: absolute; inset: 0; z-index: 40; display: flex; align-items: stretch; justify-content: center; padding: max(8px, var(--safe-t)) max(8px, var(--safe-r)) max(8px, var(--safe-b)) max(8px, var(--safe-l)); background: radial-gradient(circle at 20% 15%, rgba(255, 214, 120, .55), transparent 45%), radial-gradient(circle at 85% 90%, rgba(255, 150, 190, .45), transparent 50%), rgba(58, 36, 16, .72); backdrop-filter: blur(3px); animation: so-in .28s ease-out; }
.shop-ov[hidden] { display: none; }
@keyframes so-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.so-card { position: relative; width: 100%; max-width: 1100px; display: flex; flex-direction: column; min-height: 0; background: #FFF8E6; border: 3px solid #E9C77B; border-radius: 22px; box-shadow: 0 8px 0 #D9B25C, 0 18px 40px rgba(0, 0, 0, .35); overflow: hidden; color: #4A2C0A; }
.so-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 26px 16px 10px; background: linear-gradient(#FFE9B8, #FFF3D6); }
.so-awning { position: absolute; left: 0; right: 0; top: 0; height: 16px; background: repeating-linear-gradient(90deg, #EF5B5B 0 28px, #FFFFFF 28px 56px); box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.so-awning::after { content: ''; position: absolute; left: 0; right: 0; top: 16px; height: 8px; background: radial-gradient(circle at 14px 0, #EF5B5B 13px, transparent 14px) 0 0 / 56px 8px repeat-x, radial-gradient(circle at 42px 0, #fff 13px, transparent 14px) 0 0 / 56px 8px repeat-x; }
.so-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.so-logo { width: 46px; height: 46px; flex: none; display: inline-flex; animation: so-bob 2.4s ease-in-out infinite; }
.so-logo svg { width: 100%; height: 100%; }
@keyframes so-bob { 50% { transform: translateY(-3px) rotate(-3deg); } }
.so-title h2 { margin: 0; font-size: 1.35rem; line-height: 1.15; }
.so-title small { color: #8A5A22; font-weight: 700; }
.so-stats { display: flex; gap: 8px; }
.so-pts, .so-bag { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 12px; border-radius: 999px; font-weight: 900; background: #FFD447; color: #4A2C0A; box-shadow: 0 3px 0 #D99A00; }
.so-pts i, .so-bag i { font-style: normal; }
.so-pts b { font-size: 1.4rem; } .so-bag b { font-size: 1.05rem; }
.so-bag { background: #E4F3FF; box-shadow: 0 3px 0 #9CC6E8; } .so-bag.full { background: #FFD9D2; box-shadow: 0 3px 0 #E59A8E; }
.so-tabs { display: flex; gap: 6px; padding: 8px 12px 0; background: #FFF3D6; }
.so-tab { flex: 1; min-height: 44px; border: 2px solid #E9C77B; border-bottom: 0; border-radius: 14px 14px 0 0; background: #FFF; font-family: inherit; font-weight: 900; font-size: 1rem; color: #7A5A2E; cursor: pointer; }
.so-tab.on { background: #FFE9A8; color: #4A2C0A; }
.so-tab em { font-style: normal; background: #F2A93B; color: #fff; border-radius: 999px; padding: 0 7px; font-size: .78rem; margin-left: 4px; }
.so-tab:focus-visible, .so-item:focus-visible { outline: 3px solid #3D5FC4; outline-offset: 2px; }
.so-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; background: #FFF8E6; border-top: 2px solid #E9C77B; }
.so-hint { margin: 0 0 8px; font-size: .88rem; color: #7A5A2E; font-weight: 700; }
.so-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.so-item { --tc: #7FB4E8; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px 8px; text-align: center; font-family: inherit; color: #4A2C0A; background: #fff; border: 3px solid var(--tc); border-radius: 18px; box-shadow: 0 4px 0 var(--tc); cursor: pointer; transition: transform .12s; }
.so-item:not(:disabled):hover { transform: translateY(-2px); }
.so-item:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tc); }
.so-item:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; filter: grayscale(.4); }
.so-item.t-sky { --tc: #7FB4E8; } .so-item.t-mint { --tc: #6CCB94; } .so-item.t-grape { --tc: #A08BE8; } .so-item.t-amber { --tc: #F2A93B; } .so-item.t-rose { --tc: #F0708A; }
.so-item.sell { background: #F1FAF3; }
.si-ico { width: 58px; height: 58px; display: inline-flex; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .12)); }
.si-ico svg { width: 100%; height: 100%; }
.si-name { font-size: 1.05rem; font-weight: 900; }
.si-desc { font-size: .76rem; line-height: 1.3; color: #6B4A20; min-height: 3.9em; }
.si-stock { width: 100%; height: 8px; border-radius: 999px; background: #EFE2BF; overflow: hidden; }
.si-stock i { display: block; height: 100%; background: linear-gradient(90deg, #6CCB94, #F2A93B); border-radius: 999px; }
.si-meta { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 6px; }
.si-meta small { font-weight: 700; color: #7A5A2E; }
.si-price { background: #FFD447; color: #4A2C0A; border-radius: 999px; padding: 2px 10px; font-size: .95rem; box-shadow: 0 2px 0 #D99A00; }
.si-price.back { background: #B9EBC7; color: #1F6B3A; box-shadow: 0 2px 0 #7DBB8D; }
.si-tag { position: absolute; top: 6px; right: 6px; background: #4A2C0A; color: #FFF3D6; font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; transform: rotate(4deg); }
.so-empty { text-align: center; padding: 30px 0; color: #8A5A22; font-weight: 800; }
.so-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 12px calc(8px + 2px); background: #FFF3D6; border-top: 2px solid #E9C77B; }
.so-bagrow { display: flex; gap: 4px; flex-wrap: wrap; }
.so-slot { width: 34px; height: 34px; border-radius: 10px; border: 2px dashed #E0C88F; display: inline-flex; padding: 2px; background: rgba(255, 255, 255, .6); }
.so-slot.on { border: 2px solid #E9C77B; background: #fff; } .so-slot svg { width: 100%; height: 100%; }
.so-ask { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(58, 36, 16, .6); }
.so-ask-card { width: min(92%, 380px); padding: 18px 16px; text-align: center; background: #FFF8E6; border: 3px solid #E9C77B; border-radius: 20px; box-shadow: 0 6px 0 #D9B25C; }
.so-ask-card h3 { margin: 0 0 6px; font-size: 1.2rem; } .so-ask-card p { margin: 0 0 12px; color: #6B4A20; line-height: 1.5; }
.so-ask-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .so-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .so-title h2 { font-size: 1.1rem; } .so-title small { display: none; }
  .si-ico { width: 46px; height: 46px; } .si-desc { font-size: .7rem; min-height: 4.2em; }
  .so-slot { width: 28px; height: 28px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .so-head { padding-top: 22px; padding-bottom: 4px; } .so-logo { width: 32px; height: 32px; } .so-tab { min-height: 36px; }
  .so-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .si-desc { display: none; } .si-ico { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .shop-ov, .so-logo { animation: none; } }
.so-head { padding-right: calc(64px + var(--safe-r)); }
@media (max-width: 640px) { .so-head { padding-right: calc(58px + var(--safe-r)); } }
@media (max-width: 640px), (max-height: 700px) {
  .dice-choose { margin: 0 auto 4px; gap: 6px; }
  .dc-btn { min-height: 48px; flex-direction: row; justify-content: center; gap: 6px; padding: 4px 6px; }
  .dc-btn small { display: none; } .dc-dice svg { width: 24px; height: 24px; } .dc-btn b { font-size: .9rem; }
}
.it-chip.ready { background: #FFF1C2; border-color: #F2A93B; }
@media (max-width: 640px) {
  .mc-items .it-chip .it-tx small { display: none; }
  .mc-items .it-chip { padding: 2px 8px 2px 3px; }
  .mc-items .it-chip .it-ico { width: 22px; height: 22px; }
}

/* ====================================================================
 * 排版優化：單機設定、線上大廳、房間（手機／平板／桌機、直橫向）
 * ==================================================================== */
.card-title { display: flex; align-items: center; gap: 8px; }
.ct-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #FFE9B8; font-size: 1.05rem; flex: none; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.card-head .card-title { margin: 0; }
.chip { display: inline-flex; align-items: center; padding: 2px 10px; min-height: 24px; border-radius: 999px; background: #F4ECDC; color: var(--ink-soft); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.room-count { font-weight: 900; font-size: .85rem; color: var(--ink-soft); background: #F4ECDC; border-radius: 999px; padding: 2px 12px; }
.room-count:empty { display: none; }

/* ---------- 單機設定 ---------- */
.setup-grid { max-width: 640px; margin: 0 auto; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); padding-bottom: calc(86px + var(--safe-b, 0px)); }
.setup-grid .panel-card .field:last-child { margin-bottom: 0; }
.setup-start {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + var(--safe-b, 0px));
  background: linear-gradient(180deg, rgba(255,249,238,0), rgba(255,249,238,.92) 38%);
  display: flex; justify-content: center; pointer-events: none;
}
.setup-start .btn3d { width: min(640px, 100%); pointer-events: auto; }
.setup-me .char-grid { grid-template-columns: repeat(4, 1fr); }
.diff-all { display: flex; flex-direction: column; gap: 4px; }
.diff-all small { color: var(--ink-soft); font-weight: 800; }
.ai-diff-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.ai-diff-list li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: center; gap: 8px; background: #fff; border: 3px solid #F1E3C8; border-radius: 14px; padding: 4px 6px 4px 10px; }
.ai-diff-list .ai-no { font-size: .88rem; font-weight: 900; color: var(--ink-soft); white-space: nowrap; }
.ai-diff-list .seg { padding: 3px; border-radius: 12px; flex-wrap: nowrap; }
.ai-diff-list .seg button { min-height: 38px; min-width: 0; padding: 0 4px; font-size: .84rem; }
.seg button small { font-size: .7em; font-weight: 800; margin-left: 1px; }
#solo-limit button { white-space: nowrap; padding: 0 6px; }
#solo-map .map-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
@media (min-width: 900px) {
  .setup-grid { max-width: 1060px; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; }
  .setup-me { position: sticky; top: 16px; }
  .setup-start { grid-column: 1 / -1; }
  .setup-grid .setup-game { grid-column: 2; grid-row: 1; }
  .setup-grid .setup-me { grid-column: 1; grid-row: 1; }
  .ai-diff-list { grid-template-columns: 1fr; }
}
@media (min-width: 900px) and (max-width: 1100px) { .ai-diff-list { grid-template-columns: 1fr; } .ai-diff-list li { grid-template-columns: 4.6em minmax(0, 1fr); } }
@media (max-width: 480px) { .ai-diff-list li { grid-template-columns: 1fr; gap: 2px; padding: 6px 8px; } }
.ai-diff-list .seg button { white-space: nowrap; }

/* ---------- 線上大廳 ---------- */
.lobby-me .lobby-actions { margin-top: 4px; }
.lobby-me .lobby-actions + .btn3d { margin-top: 12px; }
.lobby-me .note { margin-top: 12px; padding-top: 12px; border-top: 2px dashed #EBDDBF; }
.room-list { max-height: none; }
.room-row { align-items: center; flex-wrap: nowrap; transition: transform .12s, border-color .12s; }
.room-row:hover { border-color: var(--wood-light); transform: translateY(-1px); }
.room-row.playing { background: #FFF8F2; }
.room-meta { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
.room-meta .room-name { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-info { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.seat-dots { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 8px; min-height: 24px; background: #F4ECDC; border-radius: 999px; }
.seat-dots em { font-style: normal; font-size: .8rem; font-weight: 900; color: var(--ink-soft); margin-left: 3px; }
.sdot { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid #D9C7A3; }
.sdot.on { background: var(--coral); border-color: var(--coral-dark, #D9473A); }
.room-row .room-btns { flex: none; flex-wrap: nowrap; }
.room-list .empty { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border: 3px dashed #EBDDBF; border-radius: 16px; background: rgba(255,255,255,.55); }
.room-list .empty .empty-ico { font-size: 2.4rem; line-height: 1; }
.room-list .empty small { color: var(--ink-soft); font-weight: 700; line-height: 1.5; }
@media (min-width: 900px) {
  .lobby-grid { grid-template-columns: 360px minmax(0, 1fr); }
  .lobby-me { position: sticky; top: 16px; }
  .lobby-rooms .room-list { max-height: calc(100dvh - 190px); overflow-y: auto; padding: 2px 4px 6px 2px; }
}
@media (max-width: 560px) {
  .room-row { flex-wrap: wrap; }
  .room-row .room-btns { width: 100%; }
  .room-row .room-btns .btn3d { flex: 1 1 0; }
}
@media (max-width: 899px) {
  .lobby-grid { gap: 12px; }
}

/* ---------- 線上房間 ---------- */
.room-grid { max-width: 1100px; }
.room-summary { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #FFF1C9, #FFE2B0); border: 3px solid #F2CD86; }
.rs-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.rs-title b { font-size: 1.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-chips .chip { background: rgba(255,255,255,.7); color: var(--ink); }
.seat-row { min-height: 66px; }
.seat-no { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #F1E3C8; color: var(--ink-soft); font-style: normal; font-size: .78rem; font-weight: 900; }
.seat-row.me .seat-no { background: var(--sea); color: #fff; }
.seat-row .mini { width: 50px; height: 50px; }
.seat-row.empty { background: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 10px, rgba(255,255,255,.3) 10px 20px); }
.seat-row.empty .nm { color: var(--ink-soft); font-weight: 700; }
.room-actions { margin: 16px 0 0; }
.room-seats-card .role-line { margin-bottom: 10px; }
.room-side-card .host-box:empty, .room-side-card .invite-box:empty { display: none; }
.room-side-card > :first-child h4 { margin-top: 0; }
.room-side-card .invite-box, .room-side-card .spec-line { margin-top: 14px; padding-top: 4px; border-top: 2px dashed #EBDDBF; }
.room-side-card .host-box + .invite-box { margin-top: 12px; }
.room-grid .room-chat-card .card-title { margin-bottom: 8px; }
@media (min-width: 900px) {
  .room-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "seats side" "chat side"; align-items: start; }
  .room-seats-card { grid-area: seats; }
  .room-side-card { grid-area: side; }
  .room-chat-card { grid-area: chat; }
}
@media (max-width: 899px) {
  .room-grid { gap: 12px; }
}
@media (max-width: 420px) {
  .seat-no { display: none; }
  .rs-title b { font-size: 1.05rem; }
}

/* 單機：每個電腦各自設定（可收合，行距放寬） */
.ai-each { margin-top: 6px; }
.ai-each > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px; border-radius: 12px; background: #F4ECDC; color: var(--ink-soft); font-size: .9rem; font-weight: 900; }
.ai-each > summary::-webkit-details-marker { display: none; }
.ai-each > summary::after { content: ''; margin-left: auto; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid currentColor; transition: transform .15s; }
.ai-each[open] > summary::after { transform: rotate(180deg); }
.ai-each > summary:focus-visible { outline: 3px solid #3D5FC4; outline-offset: 2px; }
.ai-each .ai-diff-list { margin-top: 10px; gap: 10px; }
.ai-diff-list li { padding-top: 6px; padding-bottom: 6px; }
.ai-diff-list .seg button { min-height: 42px; }
@media (min-width: 900px) { .ai-each .ai-diff-list { gap: 12px; } }

/* 地圖大小：自製下拉選單 */
.map-select { width: 100%; }
.map-dd { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 62px; padding: 6px 12px 6px 6px; text-align: left; font-family: inherit; color: var(--ink); background: #fff; border: 3px solid #E9C77B; border-radius: 16px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.1); }
.map-dd:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.1); }
.map-dd[aria-expanded="true"] { border-color: var(--sea); background: #EAF8FA; }
.map-dd:focus-visible { outline: 3px solid #3D5FC4; outline-offset: 2px; }
.map-dd .map-tx { flex: 1; }
.dd-caret { flex: none; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--ink-soft); transition: transform .15s; margin-right: 4px; }
.map-dd[aria-expanded="true"] .dd-caret { transform: rotate(180deg); }
.map-menu { gap: 4px; max-height: calc(100dvh - 16px); overflow-y: auto; }
.map-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 4px 10px 4px 4px; text-align: left; font-family: inherit; color: var(--ink); background: transparent; border: 3px solid transparent; border-radius: 14px; cursor: pointer; }
.map-opt:hover, .map-opt:focus-visible { background: #FFF1D6; outline: none; }
.map-opt[aria-selected="true"] { border-color: var(--coral); background: #FFF1E8; }
.map-opt .map-tx { flex: 1; }
.dd-check { flex: none; width: 10px; height: 18px; border-right: 4px solid var(--coral); border-bottom: 4px solid var(--coral); transform: rotate(45deg) translate(-2px, -3px); margin-right: 6px; }
#solo-map .map-note, .host-box .map-note { margin: 6px 0 0; }

.room-chat-card .chat-log { min-height: 200px; max-height: min(480px, calc(100dvh - 300px)); }
@media (max-width: 899px) { .room-chat-card .chat-log { min-height: 140px; max-height: 240px; } }


/* 單機：開始遊戲放在最下方（小顆、置中），捲動時貼在畫面底部 */
.setup-start { position: sticky; bottom: calc(10px + var(--safe-b, 0px)); left: auto; right: auto; z-index: 20; padding: 0; background: none; pointer-events: none; display: flex; justify-content: center; }
.setup-start .btn3d { width: auto; min-width: 220px; min-height: 52px; padding: 0 36px; font-size: 1.1rem; pointer-events: auto; }
.setup-grid { padding-bottom: 8px; }
@media (min-width: 900px) { .setup-start { grid-column: 1 / -1; } }

/* 地圖大小＋回合上限：同一排兩個下拉 */
.dd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dd-pair .field { margin-bottom: 8px; min-width: 0; }
.dd-pair .map-dd { min-height: 58px; }
.dd-pair .map-tx { min-width: 0; }
.dd-pair .map-tx b, .dd-pair .map-tx small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-sw.lim { background: linear-gradient(135deg, #FFE9B8 50%, #F5C26B 50%); }
@media (max-width: 560px) { .dd-pair { gap: 8px; } .dd-pair .map-tx small { display: none; } .dd-pair .map-dd { gap: 8px; padding-right: 8px; } .dd-pair .dd-caret { margin-right: 0; } }

/* 房間：兩欄（左：座位＋房間設定；右：聊天室＋邀請連結）；窄螢幕依序 座位 → 聊天室 → 設定 → 邀請 */
.room-col { display: contents; }
.room-seats-card { order: 1; } .room-chat-card { order: 2; } .room-side-card { order: 3; } .room-invite-card { order: 4; }
.room-invite-card .invite-box h4 { margin-top: 0; }
.room-invite-card .spec-line { margin-top: 14px; padding-top: 4px; border-top: 2px dashed #EBDDBF; }
.room-side-card .host-box h4 { margin-top: 0; }
@media (min-width: 900px) {
  .room-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: none; align-items: start; }
  .room-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .room-seats-card, .room-chat-card, .room-side-card, .room-invite-card { order: 0; grid-area: auto; position: static; }
  .room-col-b { position: sticky; top: 16px; }
}
@media (max-width: 899px) {
  .room-grid { grid-template-areas: none; }
  .room-seats-card, .room-chat-card, .room-side-card, .room-invite-card { grid-area: auto; position: static; }
}
.setup-game > small.hint, .room-side-card small.hint { display: block; margin-top: 4px; }
/* 開始遊戲：置中對齊 */
.setup-start { display: grid; justify-items: center; justify-self: stretch; width: 100%; }
.setup-start .btn3d { margin: 0 auto; }

/* 單機開始鈕：不黏底，直接置於最下方，寬度與「遊戲設定」卡片一致 */
.setup-grid .setup-start { position: static; bottom: auto; background: none; padding: 0; display: block; width: auto; pointer-events: auto; }
.setup-grid .setup-start .btn3d { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; margin: 0; min-height: 56px; font-size: 1.15rem; }
.setup-grid { padding-bottom: calc(16px + var(--safe-b, 0px)); }
@media (min-width: 900px) { .setup-grid .setup-start { grid-column: 2; grid-row: 2; } }

/* 電腦難度：一個電腦一格、同一排（最多 5 格），每格是精簡下拉 */
.ai-diff-list { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)) !important; gap: 8px !important; }
.ai-diff-list li { display: flex !important; flex-direction: column; align-items: stretch; gap: 4px !important; padding: 6px 6px 8px !important; text-align: center; }
.ai-diff-list .ai-no { font-size: .8rem; text-align: center; }
.cell-dd { min-height: 44px; padding: 4px 6px; gap: 4px; justify-content: center; border-radius: 12px; border-width: 2px; }
.cell-dd b { font-size: .95rem; white-space: nowrap; }
.cell-dd .dd-caret { border-left-width: 5px; border-right-width: 5px; border-top-width: 6px; margin: 0; }
.cell-menu .dd-opt { display: flex; align-items: center; justify-content: space-between; min-height: 44px; white-space: nowrap; }
@media (max-width: 480px) { .ai-diff-list { gap: 5px !important; } .ai-diff-list li { padding: 4px 3px 6px !important; } .ai-diff-list .ai-no { font-size: .7rem; } .cell-dd { padding: 4px 2px; gap: 2px; } .cell-dd b { font-size: .8rem; } .cell-dd .dd-caret { border-left-width: 3px; border-right-width: 3px; border-top-width: 4px; } }

/* 窄螢幕防溢出：座位列、下拉文字 */
.seat-list, .seat-list > li, .room-col, .room-grid > * { min-width: 0; }
.map-dd .map-tx { min-width: 0; overflow: hidden; }
.map-dd .map-tx b, .map-dd .map-tx small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 440px) {
  .seat-row { flex-wrap: wrap !important; row-gap: 4px; }
  .seat-row .nm { flex: 1 1 5.5em; min-width: 0; }
  .seat-row .tag { margin-left: 0; }
}
@media (max-width: 340px) { .cell-dd b { font-size: .72rem; } .cell-dd { padding: 4px 1px; } .ai-diff-list .ai-no { font-size: .64rem; } }
@media (max-width: 560px) { .dd-pair .map-tx small { display: none !important; } }
@media (max-width: 360px) { .dd-pair .map-sw { width: 36px; height: 36px; } .dd-pair .map-sw b { font-size: .95rem; } .dd-pair .map-sw small { font-size: .52rem; } .dd-pair .map-dd { padding-left: 4px; gap: 5px; min-height: 48px; } .dd-pair .dd-caret { display: none; } .dd-pair .map-tx b { font-size: .9rem; } }

/* 對局左欄：只有「摘要」可以捲動（避免兩條卷軸）；聊天室展開時固定保留一段高度，縮小時摘要吃滿 */
.side { overflow: hidden; }
.side .summary { flex: 1 1 0; min-height: 90px; }
.side-chatbox { flex: 0 0 clamp(150px, 38%, 320px); min-height: 0; }
.side-chatbox.min { flex: 0 0 auto; }
.side-chat { flex: 1 1 0; min-height: 0; }
.side-chat .chat-log { min-height: 60px; }
@media (max-height: 480px) { .side-chat .chat-quick { display: none; } .side-chatbox { flex-basis: clamp(120px, 42%, 320px); } .side .summary { min-height: 70px; } }

/* 對局左欄聊天室：標題（展開／縮小）＋訊息＋輸入列包成同一個卡片 */
.side-chatbox { padding: 4px 8px 8px; gap: 6px; background: #FFF6E2; border: 3px solid var(--wood-light); border-radius: 20px; box-shadow: 0 3px 0 rgba(122,78,42,.25); overflow: hidden; }
.side-chatbox .chat-toggle { border: 0; background: transparent; box-shadow: none; min-height: 36px; padding: 2px 6px; }
.side-chatbox.min { padding-bottom: 4px; }
.side-chatbox .side-chat { gap: 6px; border-top: 2px dashed #E9D2A4; padding-top: 8px; }
.side-chatbox .chat-log { border-width: 2px; border-radius: 12px; }
.side-chatbox .chat-form input { min-height: 42px; border-width: 2px; border-radius: 12px; }
.side-chatbox .chat-form .send { width: 44px; height: 44px; }

/* 左欄聊天室固定在左下角（浮在摘要上），切換摘要／玩家分頁不會跳動；摘要吃滿整欄、只有它會捲動 */
.side { position: fixed; }
@media (min-width: 900px) and (min-height: 560px) { .side { position: relative; } }
.side .summary { flex: 1 1 0; min-height: 0; padding-bottom: calc(var(--chat-h, 0px) + 10px); }
.side-chatbox { position: absolute; left: calc(10px + var(--safe-l, 0px)); right: 10px; bottom: calc(10px + var(--safe-b, 0px)); z-index: 5; flex: none; height: clamp(150px, 38%, 320px); }
.side-chatbox.min { height: auto; }
@media (max-height: 480px) { .side-chatbox { height: clamp(112px, 36%, 320px); } .side-chatbox.min { height: auto; } }

/* 使用道具（選目標）時：面板不整塊捲動，只有清單自己捲；提示、確認、取消固定在清單下面 */
.mc:has(.mc-pick) { overflow: hidden; }
.mc:has(.mc-pick) .mc-dice, .mc:has(.mc-pick) .mc-msg { display: none; }
.mc:has(.mc-pick) > :first-child { margin-top: 0; }
.mc-pick { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mc-pick .pcards { flex: 1 1 auto; min-height: 84px; max-height: none; }
.mc-pick .pick-n { flex: none; }
.mc-pick .tile-mini, .mc-pick .mc-hint { flex: none; }
.mc-pick .pick-12 .pick-btn { min-height: 48px; padding: 3px 2px; }
.mc-pick .pick-12 .pick-btn small { font-size: .6rem; }
.mc-pick .link-btn { flex: none; min-height: 36px; }
@media (max-height: 520px) { .mc-pick .pick-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .mc-pick .pick-12 .pick-btn { min-height: 40px; } .mc-pick .pick-12 .pick-btn small { display: none; } }
.mc:has(.mc-pick) .mc-turn { display: none; }
.mc:has(.mc-pick) { gap: 6px; justify-content: flex-start; }
.mc-pick .pcards { min-height: 120px; }
@media (max-width: 520px) { .mc-pick .pcards { grid-template-columns: 1fr; } .mc-pick .pcard .pc-stats { display: flex; flex-wrap: wrap; gap: 2px 8px; } }
.mc-pick .pcards { grid-auto-rows: max-content; }
.mc-pick .pcards .pcard, .mc-pick .pcards .tchip { min-height: 48px; }
@media (max-width: 520px), (max-height: 520px) {
  .mc-pick .mc-prompt.dim { display: none; }
  .mc-pick .mc-prompt.strong { font-size: .95em; }
  .mc:has(.mc-pick) .mc-props { display: none; }
  .mc-pick .fly-f { min-height: 28px; padding: 1px 8px; }
  .mc-pick .pcards { min-height: 130px; }
}

/* 道具庫：加寬、兩欄、按鈕不換行 */
.modal-card.inv-wide { width: min(760px, 100%); }
.modal-card.inv-wide .modal-body { padding-inline: 18px; }
.inv-cap { font-size: 1rem; line-height: 1.5; }
.inv-list { gap: 10px; }
.inv-list li { padding: 10px 14px; gap: 14px; }
.inv-list li .btn3d { white-space: nowrap; flex: none; min-width: 7.5em; }
.inv-tx b { font-size: 1.05rem; }
.inv-tx small { font-size: .88rem; line-height: 1.45; }
.inv-list li.inv-empty { grid-column: 1 / -1; }
@media (min-width: 700px) { .inv-list { display: grid; grid-template-columns: 1fr 1fr; } .inv-list li { align-items: center; } }
@media (max-width: 520px) { .inv-list li { flex-wrap: wrap; } .inv-list li .btn3d { width: 100%; } }

/* Keep the language switch beside settings, including narrow English layouts. */
.lang-toggle { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: calc(70px + env(safe-area-inset-right)); min-width: 48px; min-height: 48px; padding: 8px; border: 2px solid #4a3b55; border-radius: 14px; background: #fff0de; color: #4a3b55; font: 800 16px/1.2 system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 0 #cfb99f; z-index: 1001; }
.lang-toggle:focus-visible { outline: 3px solid #287dac; outline-offset: 3px; }
#btn-settings { min-width: 48px; min-height: 48px; }
.panel-head h2, .setrow label, .rule-field, .modal-head h2 { min-width: 0; overflow-wrap: anywhere; }
html[lang="en"] .home-btns .btn3d, html[lang="en"] .btn-wide { white-space: normal; overflow-wrap: anywhere; }

/* 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)); } }

/* Narrow portrait screens keep balances and English player names readable. */
@media (max-width: 600px) and (orientation: portrait) {
  .mb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-strip .ms { grid-template-columns: auto minmax(0, 1fr); }
  .mb-strip b, .mb-strip small { white-space: normal; overflow-wrap: anywhere; }
  .mb-strip small { overflow: visible; line-height: 1.2; }
}