/* ===== 撞球對決：樣式（深色胡桃木、黃銅、綠色桌布） ===== */
:root {
  --bg0: #120a07; --bg1: #1d110b; --bg2: #2a1a10; --edge: #4a2f1c;
  --cream: #f3e6cf; --muted: #a58f70; --brass: #e3a840; --brass-d: #a6741a; --brass-l: #ffd777;
  --green: #1f8f5a; --green-d: #0f5c38; --red: #e0503f; --blue: #4aa3ff;
  --seat0: #4aa3ff; --seat1: #ff6b5e;
  --scroll-track: #1a0f09; --scroll-thumb: #a6741a;
  --chat-rail-width: clamp(220px, 16vw, 240px);
  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, -apple-system, sans-serif;
  --r: 14px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg0); color: var(--cream); font-family: var(--font); overflow: hidden; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; }
input, .selectable { -webkit-user-select: text; user-select: text; }
button { font-family: inherit; }
#app { position: fixed; inset: 0; background: radial-gradient(120% 90% at 50% 0%, #2c1a10 0%, #150c07 60%, #0c0604 100%); }
#app, #app * { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: thin; }
#app *::-webkit-scrollbar { width: 10px; height: 10px; }
#app *::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 999px; }
#app *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--brass-l), var(--scroll-thumb)); border: 2px solid var(--scroll-track); border-radius: 999px; }
#app *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffe7a0, #bd8135); }
#app *::-webkit-scrollbar-corner { background: var(--scroll-track); }
#app *::-webkit-scrollbar-button { display: none; }
.hidden { display: none !important; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen.active { display: flex; }
:focus-visible { outline: 3px solid var(--brass-l); outline-offset: 2px; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .001s !important; transition-duration: .001s !important; }

/* ---------- 按鈕（立體） ---------- */
.btn { appearance: none; border: 0; cursor: pointer; color: var(--cream); font-weight: 700; font-size: 16px; letter-spacing: .04em; padding: 11px 20px; border-radius: var(--r);
  background: linear-gradient(#7a4c2a, #5a3519 55%, #482a14); box-shadow: 0 4px 0 #1f1008, 0 8px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,225,180,.35), inset 0 -2px 0 rgba(0,0,0,.25);
  text-shadow: 0 1px 0 rgba(0,0,0,.5); transition: transform .06s, box-shadow .06s, filter .15s; min-height: 44px; position: relative; }
.btn:hover { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #1f1008, 0 3px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,225,180,.3); }
.btn:disabled { filter: grayscale(.85) brightness(.6); cursor: not-allowed; }
.btn.gold { color: #3a2208; text-shadow: 0 1px 0 rgba(255,240,190,.55); background: linear-gradient(#ffe08a, #f0b94c 50%, #c98c25); box-shadow: 0 4px 0 #7b5112, 0 8px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(120,70,0,.3); }
.btn.green { background: linear-gradient(#37c283, #1f9a62 55%, #14683f); box-shadow: 0 4px 0 #093a22, 0 8px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(200,255,225,.5), inset 0 -2px 0 rgba(0,0,0,.25); }
.btn.danger { background: linear-gradient(#f27a63, #d4472f 55%, #9f2a1a); box-shadow: 0 4px 0 #571408, 0 8px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,220,210,.5); }
.btn.ghost { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 2px rgba(227,168,64,.38); text-shadow: none; }
.btn.ghost:active:not(:disabled) { box-shadow: inset 0 0 0 2px rgba(227,168,64,.6); }
.btn.big { font-size: 20px; padding: 15px 34px; min-height: 56px; border-radius: 18px; }
.btn.small { font-size: 14px; padding: 7px 14px; min-height: 36px; border-radius: 11px; }
.btn.round { width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.btn.round.small { width: 36px; height: 36px; min-height: 36px; font-size: 18px; }
.btn.grow { flex: 1; }
.ico { display: inline-block; width: 26px; height: 26px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ico-gear { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M19.4%2013a7.9%207.9%200%200%200%200-2l2.1-1.6a.5.5%200%200%200%20.1-.6l-2-3.5a.5.5%200%200%200-.6-.2l-2.5%201a7.6%207.6%200%200%200-1.7-1l-.4-2.6a.5.5%200%200%200-.5-.4h-4a.5.5%200%200%200-.5.4l-.4%202.6a7.6%207.6%200%200%200-1.7%201l-2.5-1a.5.5%200%200%200-.6.2l-2%203.5a.5.5%200%200%200%20.1.6L4.6%2011a7.9%207.9%200%200%200%200%202l-2.1%201.6a.5.5%200%200%200-.1.6l2%203.5c.1.2.4.3.6.2l2.5-1c.5.4%201.1.7%201.7%201l.4%202.6c0%20.2.2.4.5.4h4c.3%200%20.5-.2.5-.4l.4-2.6c.6-.3%201.2-.6%201.7-1l2.5%201c.2.1.5%200%20.6-.2l2-3.5a.5.5%200%200%200-.1-.6L19.4%2013zM12%2015.5a3.5%203.5%200%201%201%200-7%203.5%203.5%200%200%201%200%207z%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M19.4%2013a7.9%207.9%200%200%200%200-2l2.1-1.6a.5.5%200%200%200%20.1-.6l-2-3.5a.5.5%200%200%200-.6-.2l-2.5%201a7.6%207.6%200%200%200-1.7-1l-.4-2.6a.5.5%200%200%200-.5-.4h-4a.5.5%200%200%200-.5.4l-.4%202.6a7.6%207.6%200%200%200-1.7%201l-2.5-1a.5.5%200%200%200-.6.2l-2%203.5a.5.5%200%200%200%20.1.6L4.6%2011a7.9%207.9%200%200%200%200%202l-2.1%201.6a.5.5%200%200%200-.1.6l2%203.5c.1.2.4.3.6.2l2.5-1c.5.4%201.1.7%201.7%201l.4%202.6c0%20.2.2.4.5.4h4c.3%200%20.5-.2.5-.4l.4-2.6c.6-.3%201.2-.6%201.7-1l2.5%201c.2.1.5%200%20.6-.2l2-3.5a.5.5%200%200%200-.1-.6L19.4%2013zM12%2015.5a3.5%203.5%200%201%201%200-7%203.5%203.5%200%200%201%200%207z%27/%3E%3C/svg%3E"); }
.ico-back { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M15.5%204.5%208%2012l7.5%207.5%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%273.2%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M15.5%204.5%208%2012l7.5%207.5%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%273.2%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E"); }
.btn.gear { background: linear-gradient(#ffe08a, #f0b94c 50%, #c98c25); color: #3a2208; text-shadow: none; box-shadow: 0 3px 0 #7b5112, 0 6px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7); }

/* ---------- 共用版型 ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex: none; }
.bar h2 { margin: 0; font-size: 22px; letter-spacing: .12em; text-shadow: 0 2px 0 rgba(0,0,0,.5); flex: 1; text-align: center; }
#roomTitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(16px, 2.8vw, 22px); letter-spacing: .04em; }
.bar-right { display: inline-flex; align-items: center; gap: 10px; }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 4px 16px 28px; }
.sheet { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.sheet.wide { max-width: 1040px; }
.sec { margin: 10px 0 0; font-size: 15px; letter-spacing: .14em; color: var(--brass); font-weight: 800; }
.sec.tight { margin: 0 0 8px; }
.note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.lbl { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.val { color: var(--cream); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.actions { display: flex; justify-content: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.card { background: linear-gradient(#2b1a10, #1f120b); border: 1px solid var(--edge); border-radius: 16px; padding: 14px 16px; box-shadow: inset 0 1px 0 rgba(255,225,180,.08), 0 8px 22px rgba(0,0,0,.35); }
.badge { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 11px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; text-align: center; }
.chip { display: inline-block; padding: 6px 16px; border-radius: 12px; font-weight: 800; letter-spacing: .1em; background: linear-gradient(#4b2f1b, #34200f); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255,225,180,.25); }
.status-pill { align-self: center; padding: 8px 18px; border-radius: 20px; background: rgba(15,8,5,.8); border: 1px solid var(--edge); font-size: 14px; font-weight: 700; text-align: center; }
.status-pill.warn { border-color: var(--red); color: #ffd4cc; }
.status-pill.ok { border-color: #2f9a62; color: #bff0d3; }
.field { width: 100%; min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid #5a3b22; background: #130b06; color: var(--cream); font-size: 16px; font-family: inherit; box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
.field:focus { outline: 3px solid rgba(255,215,119,.55); border-color: var(--brass); }
.spinner { width: 34px; height: 34px; margin: 10px auto 0; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--brass); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 首頁 ---------- */
#screen-home { padding: 0; }
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 50% 45%, rgba(10,5,3,.15), rgba(10,5,3,.72) 90%), linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.05) 40%, rgba(0,0,0,.6)); }
#homeGear { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); z-index: 3; }
.hero-body { position: relative; z-index: 2; margin: auto; text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero-eyebrow { letter-spacing: .5em; font-size: 14px; color: var(--brass-l); font-weight: 800; opacity: .9; }
.hero-title { margin: 6px 0 0; font-size: clamp(54px, 11vw, 112px); line-height: 1.05; letter-spacing: .14em; font-weight: 900; background: linear-gradient(#fff3c8 10%, #f1be52 48%, #a8731a 92%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(60,30,5,.85)) drop-shadow(0 12px 22px rgba(0,0,0,.8)); }
.hero-sub { margin: 6px 0 24px; color: #e8d7b6; letter-spacing: .26em; font-size: clamp(13px, 2.2vw, 18px); text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.hero-menu { display: flex; flex-direction: column; gap: 16px; width: min(78vw, 340px); }
.hero-menu .btn { width: 100%; }
.hero-stats { margin: 18px 0 0; color: var(--muted); font-size: 13px; letter-spacing: .06em; text-shadow: 0 2px 6px #000; min-height: 18px; }

/* ---------- 規則卡、分段按鈕 ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.kcard { text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--edge); background: linear-gradient(#2b1a10, #1c110a); color: var(--cream); font: inherit; box-shadow: inset 0 1px 0 rgba(255,225,180,.08), 0 6px 14px rgba(0,0,0,.35); transition: border-color .15s, transform .1s; }
.kcard:hover { border-color: #7b5530; }
.kcard[aria-checked="true"] { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(227,168,64,.25), inset 0 1px 0 rgba(255,225,180,.15), 0 6px 14px rgba(0,0,0,.4); }
.kcard .k-top { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.kcard .k-name { font-size: 19px; font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.kcard .k-tag { margin-left: auto; white-space: nowrap; flex: none; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 9px; background: var(--green); color: #eafff2; }
.kcard p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: #d4c2a2; }
.kball { width: 34px; height: 34px; border-radius: 50%; flex: none; box-shadow: inset -4px -5px 8px rgba(0,0,0,.45), inset 3px 3px 6px rgba(255,255,255,.4), 0 3px 5px rgba(0,0,0,.5); }
.seg { display: inline-flex; padding: 4px; border-radius: 16px; background: #120a06; border: 1px solid var(--edge); box-shadow: inset 0 2px 6px rgba(0,0,0,.7); gap: 4px; flex-wrap: wrap; }
.seg.four { display: grid; grid-template-columns: repeat(5, 1fr); }
.seg.four .seg-b { padding: 8px 2px; white-space: nowrap; font-size: 15px; }
.seg-b { appearance: none; border: 0; min-height: 44px; padding: 8px 18px; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-weight: 800; letter-spacing: .06em; cursor: pointer; transition: background .12s, color .12s; }
.seg-b[aria-checked="true"] { color: #3a2208; background: linear-gradient(#ffe08a, #f0b94c 55%, #c98c25); box-shadow: 0 2px 0 #7b5112, inset 0 1px 0 rgba(255,255,255,.7); }
#modeSeg { align-self: flex-start; }

/* ---------- 表單與房間 ---------- */
.nick-row .lbl { flex: none; }
.nick-row .field { flex: 1; min-width: 0; }
#btnNickRandom { flex: none; white-space: nowrap; min-height: 44px; }
.form-grid { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px 12px; align-items: center; }
.form-grid > .seg { min-width: 0; }
.form-grid .lbl { font-size: 14px; }
.room-list { display: flex; flex-direction: column; gap: 10px; }
.room-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(#2b1a10, #1f120b); border: 1px solid var(--edge); }
.room-row .rn { font-weight: 800; font-size: 16px; }
.room-row .rm { color: var(--muted); font-size: 13px; margin-top: 3px; }
.room-row .grow { flex: 1; min-width: 0; }
.empty { padding: 26px 16px; text-align: center; color: var(--muted); border: 2px dashed #4a2f1c; border-radius: 16px; font-size: 15px; line-height: 1.7; }
.room-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
.room-grid .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.seat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seat-card { padding: 14px; border-radius: 16px; border: 2px solid var(--edge); background: linear-gradient(#2b1a10, #1f120b); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-height: 138px; justify-content: center; }
.seat-card.mine { border-color: var(--brass); }
.seat-card .nm { font-weight: 800; font-size: 17px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-card .st { font-size: 13px; color: var(--muted); font-weight: 700; }
.seat-card .st.ready { color: #7de3a8; }
.seat-card.empty-seat { border-style: dashed; color: var(--muted); }
.spec-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 30px; }
.spec { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 14px; background: #130b06; border: 1px solid var(--edge); font-size: 13px; font-weight: 700; }
.invite-row { display: flex; gap: 8px; align-items: center; }
.invite-row .field { font-size: 13px; }
.cfg-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; margin: 8px 0; }
.cfg-row .seg-b { min-height: 38px; padding: 5px 12px; font-size: 14px; }
.cfg-val { font-weight: 800; }
.fixed-turn-row { grid-column: 1 / -1; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 8px; padding: 14px 16px; border: 1px solid var(--edge); border-radius: 14px; background: linear-gradient(110deg, rgba(220,170,80,.09), rgba(220,170,80,.02)); }
.fixed-turn-row > .lbl { font-size: 14px; white-space: nowrap; }
.fixed-turn-row .cfg-val { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; color: var(--cream); }
.fixed-turn-time { flex: none; padding: 5px 12px; border: 1px solid var(--brass); border-radius: 10px; color: var(--brass); font-size: 19px; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fixed-turn-detail { flex: 1 1 210px; font-size: 13px; font-weight: 600; line-height: 1.7; }
.fixed-turn-extension { display: inline-block; margin-left: 6px; color: var(--brass); white-space: nowrap; }
@media (max-width: 480px) {
  .fixed-turn-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
  .fixed-turn-detail { flex-basis: 190px; }
}

/* ---------- 座位徽章與球圖示 ---------- */
.avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: #fff8e6;
  background: radial-gradient(circle at 35% 30%, #6b4326, #2a170b 70%); box-shadow: 0 3px 6px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,225,180,.3); text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.avatar::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 4px solid var(--seat); box-shadow: 0 0 10px color-mix(in srgb, var(--seat) 55%, transparent); }
.avatar.s0 { --seat: var(--seat0); } .avatar.s1 { --seat: var(--seat1); } .avatar.sp { --seat: #8a8a8a; }
.avatar.sm { width: 38px; height: 38px; font-size: 17px; } .avatar.sm::before { border-width: 3px; }
.mini-ball { display: inline-block; width: 20px; height: 20px; border-radius: 50%; position: relative; box-shadow: inset -2px -3px 4px rgba(0,0,0,.4), inset 2px 2px 3px rgba(255,255,255,.4); overflow: hidden; font-size: 9px; font-weight: 800; line-height: 20px; text-align: center; color: #111; }
.mini-ball.stripe { background-image: linear-gradient(#f6f1e4 0 28%, transparent 28% 72%, #f6f1e4 72%); }
.mini-ball.out { opacity: .22; filter: grayscale(.8); }
.mini-ball b { position: absolute; inset: 5px; border-radius: 50%; background: #f6f1e4; font-size: 8px; line-height: 10px; font-weight: 800; color: #111; }
.dc-dot { width: 8px; height: 8px; border-radius: 50%; background: #5ee08a; display: inline-block; }
.dc-dot.off { background: #ff6b5e; }

/* ---------- 遊戲畫面 ---------- */
#screen-game { padding-left: 0; padding-right: 0; }
.g-top { display: flex; align-items: center; gap: 10px; padding: 4px 10px 2px; flex: none; position: relative; z-index: 5; }
.g-top .bar-right { margin-left: auto; position: relative; z-index: 1; }
.g-top > .btn { z-index: 1; }
@media (min-width: 821px) and (min-aspect-ratio: 1/1) {
  #screen-game > .g-top { position: absolute; inset: 4px 10px auto; height: 0; padding: 0; pointer-events: none; }
  #screen-game > .g-top > .btn { position: absolute; top: 0; left: 0; pointer-events: auto; }
  #screen-game > .g-top .bar-right { position: absolute; top: 0; right: 0; margin-left: 0; pointer-events: auto; }
  #screen-game > .g-scoreboard { margin-top: 10px; }
}
.g-status { display: flex; align-items: center; justify-content: center; flex: none; width: 100%; min-width: 0; min-height: 28px; margin: 0; padding: 3px 10px; border-radius: 15px; background: rgba(15,8,5,.82); border: 1px solid #55391f; font-weight: 900; letter-spacing: .04em; font-size: 13px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,225,180,.12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-status.mine { color: var(--brass-l); border-color: var(--brass); }
.g-status.toast-message { color: var(--brass-l); border-color: var(--brass); }
.g-status.toast-foul { color: #ffd6cf; border-color: var(--red); }
.g-status.toast-message, .g-status.toast-foul { white-space: normal; line-height: 1.3; overflow: visible; text-overflow: clip; }
.g-scoreboard { flex: none; align-self: center; width: min(var(--hud-board-width, 100%), 760px); max-width: 100%; left: var(--hud-board-shift, 0px); display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 3px 6px; padding: 0 0 1px; position: relative; z-index: 4; }
.seat-list { display: contents; }
.pseat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 6px; align-items: center; min-width: 0; padding: 3px 6px; border-radius: 11px; border: 2px solid transparent; background: rgba(255,255,255,.035); }
.pseat-info { min-width: 0; }
.pseat.seat-0 { grid-column: 1; grid-row: 1; direction: rtl; text-align: right; }
.pseat.seat-1 { grid-column: 3; grid-row: 1; }
.pseat.seat-0 .pseat-info { direction: ltr; text-align: right; }
.pseat.seat-0 .pname { direction: rtl; }
.pseat.seat-0 .pname .n { direction: ltr; unicode-bidi: plaintext; }
.pseat.seat-0 .potted-row { direction: rtl; }
.pseat.turn { border-color: var(--brass); background: rgba(227,168,64,.08); box-shadow: 0 0 0 2px rgba(227,168,64,.15); }
.pseat .avatar { width: 28px; height: 28px; font-size: 13px; }
.pseat .pname { font-weight: 900; font-size: 13px; display: flex; align-items: center; gap: 4px; min-width: 0; }
.pseat .pname span.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pseat .tag { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 9px; background: var(--green); color: #eafff2; flex: none; }
.pseat .pline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #cdb995; }
.pseat .pscore { direction: ltr; unicode-bidi: isolate; flex: none; margin-left: auto; color: var(--brass-l); font-size: 15px; font-weight: 900; }
.potted-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-width: 0; border-top: 1px solid rgba(227,168,64,.16); padding-top: 2px; }
.potted-label { flex: none; color: var(--muted); font-size: 10px; font-weight: 800; }
.potted-history { display: flex; align-items: center; gap: 3px; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 2px 2px 3px; }
.potted-history .mini-ball { flex: none; width: 16px; height: 16px; line-height: 16px; font-size: 7px; }
.potted-history .mini-ball b { inset: 3px; font-size: 6px; line-height: 8px; }
.potted-empty { color: #a58f70; font-size: 10.5px; }
.g-score-center { grid-column: 2; grid-row: 1; display: flex; justify-content: center; align-items: center; gap: 4px; min-width: 0; }
.timer { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.timer .lbl { font-size: 9px; line-height: 1.1; }
.g-score-meta { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.g-main { flex: 1; min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; position: relative; margin: 0; }
.g-main.with-chat { grid-template-columns: var(--chat-rail-width) minmax(0, 1fr); }
.panel { position: relative; z-index: 20; width: 100%; transform: none; background: linear-gradient(#22140c, #150a06); border: 1px solid var(--edge); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; box-shadow: inset 0 1px 0 rgba(255,225,180,.07); }
.panel.open { transform: translateX(0); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-head .sec.tight { margin: 0; }
.timer-dot { min-width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums; border: 3px solid var(--brass); background: #140b06; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.timer-dot.low { border-color: var(--red); color: #ffb0a4; animation: pulse .6s infinite alternate; }
#btnExtend.extend-time { width: 48px; height: 48px; min-height: 48px; padding: 0 4px; border-radius: 11px; font-size: 11px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
#btnExtend.extend-time.spent { color: var(--muted); background: #302116; box-shadow: inset 0 0 0 1px var(--edge); text-shadow: none; }
#btnExtend.extend-time.spent:disabled { filter: grayscale(.25) brightness(.85); }
@keyframes pulse { to { transform: scale(1.1); } }
.drawer-close { display: inline-flex; }
.panel .drawer-close.btn { display: none; }
.g-score-meta .g-status { align-self: stretch; }
.g-score-meta .spec-note { flex: 0 1 auto; min-width: 0; max-width: 100%; padding: 4px 8px; font-size: 11px; line-height: 1.3; }
.hint-box b { color: var(--brass-l); }
.spec-note { font-size: 13px; color: #bfe3ff; padding: 8px 10px; border-radius: 10px; background: rgba(74,163,255,.1); border: 1px solid rgba(74,163,255,.3); }
.chat-card { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; border-top: 1px solid var(--edge); padding-top: 8px; }
.chat-log { flex: 1; min-height: 90px; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.card .chat-log { max-height: 260px; }
.msg { max-width: 88%; padding: 6px 10px; border-radius: 12px; background: #2e1d12; font-size: 13.5px; line-height: 1.45; word-break: break-word; align-self: flex-start; }
.msg.me { align-self: flex-end; background: #1f7a4d; }
.msg .who { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.msg.me .who { color: #bff0d3; }
.msg.sys { align-self: center; background: transparent; color: var(--muted); font-size: 12px; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.quick .btn { min-height: 32px; padding: 4px 10px; font-size: 13px; border-radius: 10px; }
.chat-form { display: flex; gap: 8px; min-width: 0; }
.chat-form .field { flex: 1 1 auto; min-width: 0; }
.chat-form .btn { flex: 0 0 auto; min-width: 60px; padding-right: 12px; padding-left: 12px; white-space: nowrap; }
.chat-form .field { min-height: 38px; padding: 4px 10px; font-size: 14px; }
.stage { position: relative; min-height: 0; min-width: 0; }
#gCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: default; }
/* 游標：可瞄準時是金色虛線圈、拖曳轉向時圈變亮變大、拖母球時是白色圈（都不是十字） */
#gCanvas.aimable { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2236%22%20height=%2236%22%20viewBox=%220%200%2036%2036%22%3E%3Ccircle%20cx=%2218%22%20cy=%2218%22%20r=%2210%22%20fill=%22none%22%20stroke=%22rgba%2820%2C10%2C2%2C.75%29%22%20stroke-width=%225%22/%3E%3Ccircle%20cx=%2218%22%20cy=%2218%22%20r=%2210%22%20fill=%22none%22%20stroke=%22%23f4d27a%22%20stroke-width=%222.4%22%20stroke-dasharray=%2214%205%22/%3E%3Ccircle%20cx=%2218%22%20cy=%2218%22%20r=%222.4%22%20fill=%22%23f4d27a%22%20stroke=%22rgba%2820%2C10%2C2%2C.75%29%22%20stroke-width=%221.2%22/%3E%3C/svg%3E") 18 18, grab; }
#gCanvas.turning { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2240%22%20height=%2240%22%20viewBox=%220%200%2040%2040%22%3E%3Ccircle%20cx=%2220%22%20cy=%2220%22%20r=%2213%22%20fill=%22none%22%20stroke=%22rgba%28255%2C233%2C168%2C.45%29%22%20stroke-width=%221.6%22%20stroke-dasharray=%223%204%22/%3E%3Ccircle%20cx=%2220%22%20cy=%2220%22%20r=%229%22%20fill=%22rgba%28244%2C210%2C122%2C.28%29%22%20stroke=%22rgba%2820%2C10%2C2%2C.8%29%22%20stroke-width=%225%22/%3E%3Ccircle%20cx=%2220%22%20cy=%2220%22%20r=%229%22%20fill=%22none%22%20stroke=%22%23ffe9a8%22%20stroke-width=%222.6%22/%3E%3Ccircle%20cx=%2220%22%20cy=%2220%22%20r=%223.2%22%20fill=%22%23ffe9a8%22%20stroke=%22rgba%2820%2C10%2C2%2C.8%29%22%20stroke-width=%221.1%22/%3E%3C/svg%3E") 20 20, grabbing; }
#gCanvas.grab { cursor: grab; }
#gCanvas.grabbing { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2236%22%20height=%2236%22%20viewBox=%220%200%2036%2036%22%3E%3Ccircle%20cx=%2218%22%20cy=%2218%22%20r=%2212%22%20fill=%22rgba%28255%2C255%2C255%2C.18%29%22%20stroke=%22rgba%2820%2C10%2C2%2C.75%29%22%20stroke-width=%225%22/%3E%3Ccircle%20cx=%2218%22%20cy=%2218%22%20r=%2212%22%20fill=%22none%22%20stroke=%22%23ffffff%22%20stroke-width=%222.4%22/%3E%3Ccircle%20cx=%2218%22%20cy=%2218%22%20r=%223.4%22%20fill=%22%23ffffff%22%20stroke=%22rgba%2820%2C10%2C2%2C.75%29%22%20stroke-width=%221.2%22/%3E%3C/svg%3E") 18 18, grabbing; }
#gCanvas.hot { cursor: pointer; }
.dc-banner { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 10px 18px; border-radius: 20px; background: rgba(120,25,15,.92); border: 2px solid #ff8a78; font-weight: 800; z-index: 6; }
.rack-btn { position: absolute; right: 10px; bottom: 10px; z-index: 5; }
.safety-btn { position: absolute; left: 10px; bottom: 10px; z-index: 5; }
.safety-btn[aria-pressed="true"] { background: linear-gradient(#e9c46a, #b98a2d); color: #2a1b06; border-color: #ffe29a; }
.drawer-btn { display: none; position: absolute; left: 8px; top: 8px; z-index: 6; }
.dot { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 2px solid #190e08; }

/* 底部操作列 */
.g-controls { flex: none; display: grid; grid-template-columns: auto minmax(120px, 1fr) minmax(160px, 1.4fr) minmax(130px, 180px); gap: 12px; align-items: end; padding: 5px 12px calc(7px + env(safe-area-inset-bottom)); }
.g-controls .lbl { font-size: 12px; }
.g-controls .val { font-size: 13px; }
.g-controls.swap { direction: rtl; } .g-controls.swap > * { direction: ltr; }
.ctl-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.slider { position: relative; height: 38px; border-radius: 19px; background: linear-gradient(#0e0704, #1a0f08); border: 1px solid #4a2f1c; box-shadow: inset 0 3px 7px rgba(0,0,0,.8); touch-action: none; cursor: pointer; }
.slider .ticks { position: absolute; left: 16px; right: 16px; top: 50%; height: 12px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(255,235,200,.4) 0 2px, transparent 2px calc(12.5%)); background-size: 100% 100%; opacity: .7; border-radius: 2px; pointer-events: none; }
.slider .knob { position: absolute; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff0b4, #f0b94c 50%, #a6741a); box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.8); pointer-events: none; }
.slider.power .fill { position: absolute; left: 4px; top: 5px; bottom: 5px; border-radius: 14px; background: linear-gradient(90deg, #2fc07e, #e7d34a 60%, #e0503f); pointer-events: none; opacity: .95; }
.slider.off { opacity: .45; pointer-events: none; }
.shoot { height: 58px; font-size: 22px; letter-spacing: .3em; border-radius: 16px; padding: 0 10px; }
.spin-ctl { position: relative; display: flex; align-items: center; gap: 6px; }
.spin-pop .cue-modes { width: 100%; }
.mini-ball.next { outline: 2px solid var(--brass-l); outline-offset: 1px; animation: nextPulse 1s infinite alternate; }
@keyframes nextPulse { to { outline-color: rgba(255,225,150,.25); } }
.cue-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.cue-modes button { appearance: none; cursor: pointer; font: inherit; font-weight: 800; font-size: 13px; letter-spacing: .08em; color: var(--cream); background: linear-gradient(#4a2d1a, #35200f); border: 2px solid #5a3a22; border-radius: 10px; padding: 3px 8px; min-width: 52px; min-height: 26px; line-height: 1.1; }
.cue-modes button[aria-pressed="true"] { background: linear-gradient(#f3c968, #d79b32); color: #2b1706; border-color: var(--brass-l); box-shadow: 0 0 10px rgba(243,201,104,.45); }
.cue-modes button:disabled { opacity: .4; cursor: default; }
.spin-chip { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }
.spin-mini { width: 48px; height: 48px; border-radius: 50%; position: relative; background: radial-gradient(circle at 35% 30%, #fff, #e6dfcd 60%, #b9b09a); box-shadow: 0 4px 8px rgba(0,0,0,.5), inset -3px -4px 8px rgba(0,0,0,.25); }
.spin-mini i, .spin-ball i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #e0302a; box-shadow: 0 0 0 2px rgba(255,255,255,.7); left: 50%; top: 50%; }
.spin-pop { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 12; width: 190px; padding: 12px; border-radius: 16px; background: linear-gradient(#2b1a10, #1c110a); border: 2px solid var(--brass); box-shadow: 0 12px 30px rgba(0,0,0,.7); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.spin-ball { position: relative; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e6dfcd 60%, #b9b09a); box-shadow: 0 5px 10px rgba(0,0,0,.5), inset -6px -8px 14px rgba(0,0,0,.25); touch-action: none; cursor: crosshair; }
.spin-ball::before, .spin-ball::after { content: ""; position: absolute; background: rgba(0,0,0,.18); }
.spin-ball::before { left: 50%; top: 10%; bottom: 10%; width: 1px; } .spin-ball::after { top: 50%; left: 10%; right: 10%; height: 1px; }
.spin-tip { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* 結算與選擇 */
.overlay { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(8,4,2,.66); backdrop-filter: blur(2px); padding: 16px; }
.result-card { width: min(520px, 100%); max-height: 100%; overflow: auto; padding: 22px 22px 20px; border-radius: 22px; text-align: center; background: linear-gradient(#2d1b10, #1a0f08); border: 2px solid var(--brass); box-shadow: 0 20px 60px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,225,180,.2); animation: pop .3s ease-out; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.res-badge { display: flex; justify-content: center; margin-bottom: 6px; }
.res-badge .avatar { width: 84px; height: 84px; font-size: 38px; }
.res-title { margin: 6px 0 4px; font-size: 30px; font-weight: 900; letter-spacing: .12em; color: var(--brass-l); text-shadow: 0 3px 0 rgba(0,0,0,.6); }
.res-reason { margin: 0 0 12px; color: #e3d3b3; font-size: 15px; line-height: 1.6; }
.res-stats { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px 10px; align-items: center; font-size: 14px; margin-bottom: 12px; padding: 10px; border-radius: 12px; background: #120a06; border: 1px solid var(--edge); }
.res-stats .mid { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.res-stats .v { font-weight: 900; font-size: 17px; }
.res-stats .head { font-weight: 900; font-size: 15px; }
.res-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.res-actions .btn { width: 100%; }
.choice-opts { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.choice-opts .btn { text-align: left; padding: 12px 16px; }
.choice-opts .btn small { display: block; font-weight: 600; opacity: .8; font-size: 13px; margin-top: 2px; letter-spacing: .02em; }

/* 設定與確認 Modal */
.modal { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(6,3,2,.72); backdrop-filter: blur(3px); padding: 14px; }
.modal-card { width: min(560px, 100%); max-height: 94%; display: flex; flex-direction: column; border-radius: 22px; background: linear-gradient(#2d1b10, #1a0f08); border: 2px solid var(--brass); box-shadow: 0 24px 70px rgba(0,0,0,.85); animation: pop .22s ease-out; }
.modal-card.small { width: min(420px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 8px; }
.modal-head h2 { margin: 0; font-size: 22px; letter-spacing: .14em; color: var(--brass-l); }
.modal-body { overflow-y: auto; padding: 4px 18px 10px; display: flex; flex-direction: column; gap: 4px; }
.modal-body > * { flex: none; }
.modal-text { margin: 4px 18px 12px; line-height: 1.7; color: #e6d7b8; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 10px 18px 16px; }
.set-group { margin: 12px 0 2px; color: var(--brass); font-weight: 800; letter-spacing: .14em; font-size: 14px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); min-height: 50px; }
.set-row .tx { flex: 1; min-width: 0; } .set-row .tx b { display: block; font-size: 15px; } .set-row .tx span { font-size: 12.5px; color: var(--muted); }
.toggle { position: relative; width: 62px; height: 34px; flex: none; border-radius: 17px; border: 0; cursor: pointer; background: #120a06; box-shadow: inset 0 3px 6px rgba(0,0,0,.8), 0 0 0 1px #4a2f1c; transition: background .15s; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8dcc2, #9d8c6c); box-shadow: 0 2px 4px rgba(0,0,0,.6); transition: transform .15s, background .15s; }
.toggle[aria-checked="true"] { background: linear-gradient(#27b070, #167a4a); }
.toggle[aria-checked="true"]::after { transform: translateX(28px); background: radial-gradient(circle at 35% 30%, #fff0b4, #f0b94c 55%, #a6741a); }
.set-slider { width: 150px; flex: none; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { appearance: none; cursor: pointer; border: 3px solid transparent; border-radius: 12px; padding: 0; background: none; color: var(--cream); font: inherit; font-weight: 700; font-size: 12.5px; text-align: center; width: 92px; }
.swatch .sw { display: block; height: 46px; border-radius: 9px; margin-bottom: 4px; box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.5); position: relative; overflow: hidden; }
.swatch[aria-checked="true"] { border-color: var(--brass); }
.swatch .sw.cue::before { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 9px; margin-top: -4px; transform: rotate(-12deg); border-radius: 5px; background: linear-gradient(90deg, var(--tip) 0 6%, #f4efe2 6% 14%, var(--shaft) 14% 66%, var(--butt) 66%); }
.global-toast { position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); max-width: 92%; padding: 10px 20px; border-radius: 22px; background: rgba(15,8,5,.94); border: 2px solid var(--brass); font-weight: 800; z-index: 80; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; text-align: center; }
.global-toast.show { opacity: 1; transform: translate(-50%, 0); }
.help h3 { color: var(--brass-l); letter-spacing: .1em; margin: 18px 0 6px; font-size: 19px; }
.help p, .help li { line-height: 1.8; color: #e6d7b8; font-size: 15px; }
.help ul, .help ol { padding-left: 22px; margin: 6px 0; }
.help .card { margin-top: 8px; }
.help .kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-size: 14.5px; line-height: 1.7; }
.help .kv b { color: var(--brass-l); }

/* ---------- 響應式 ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 820px) {
  .g-top { gap: 6px; padding: 4px 8px 3px; }
  .g-top .btn.round { width: 40px; height: 40px; min-height: 40px; }
  .g-status { min-height: 26px; font-size: 12px; letter-spacing: .02em; padding: 3px 8px; border-radius: 14px; }
  .g-scoreboard { width: min(100%, 760px); left: 0; grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); gap: 2px 5px; padding: 0 8px 2px; }
  .pseat { gap: 3px 5px; padding: 3px 4px; border-radius: 11px; }
  .pseat .avatar { width: 26px; height: 26px; font-size: 12px; }
  .pseat .pname { gap: 4px; font-size: 12px; }
  .pseat .tag { padding: 1px 5px; font-size: 9px; }
  .pseat .pline { font-size: 9.5px; }
  .pseat .pscore { font-size: 15px; }
  .potted-row { gap: 4px; padding-top: 3px; }
  .potted-label, .potted-empty { font-size: 9px; }
  .potted-history { gap: 2px; }
  .potted-history .mini-ball { width: 16px; height: 16px; line-height: 16px; font-size: 7px; }
  .potted-history .mini-ball b { inset: 3px; font-size: 6px; line-height: 8px; }
  .timer { gap: 1px; }
  .timer .lbl { font-size: 9px; }
  .timer-dot { min-width: 48px; height: 48px; border-width: 3px; font-size: 16px; }
  .g-score-center { gap: 4px; }
  #btnExtend.extend-time { width: 48px; height: 48px; min-height: 48px; font-size: 11px; }
  .g-score-meta { gap: 2px; }
  .g-score-meta .spec-note { padding: 4px 6px; font-size: 10px; }
  .g-main { display: block; margin: 0; }
  .stage { position: absolute; inset: 0; }
  .panel { position: absolute; z-index: 20; left: 0; top: 0; bottom: 0; width: min(320px, calc(100vw - 16px)); transform: translateX(calc(-100% - 12px)); transition: transform .22s; padding: 10px; gap: 8px; box-shadow: 0 0 40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,225,180,.07); }
  .panel.open { transform: translateX(0); }
  .panel .drawer-close.btn { display: inline-flex; }
  .drawer-btn { display: inline-flex; }
  .room-grid { grid-template-columns: 1fr; }
  .g-controls { grid-template-columns: auto 1fr; grid-template-areas: "spin fine" "power power" "shoot shoot"; gap: 6px 10px; align-items: center; padding-top: 3px; }
  .g-controls .spin-ctl { grid-area: spin; } .g-controls .fine-ctl { grid-area: fine; } .g-controls .power-ctl { grid-area: power; }
  .g-controls .shoot { grid-area: shoot; height: 54px; }
  .spin-mini { width: 46px; height: 46px; }
  .cue-modes button { min-height: 22px; font-size: 12px; padding: 1px 6px; min-width: 46px; }
  .form-grid { grid-template-columns: 90px minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .form-grid, .cfg-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .form-grid > .lbl { margin-top: 4px; }
  .form-grid > .seg, .cfg-row > .seg { display: flex; min-width: 0; }
  .form-grid > .seg .seg-b, .cfg-row > .seg .seg-b { flex: 1; min-height: 44px; padding: 8px 10px; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .g-top { padding-top: 3px; padding-bottom: 2px; } .g-top .btn.round { width: 38px; height: 38px; min-height: 38px; }
  .g-status { min-height: 24px; font-size: 12px; padding: 2px 8px; }
  .g-scoreboard { grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); gap: 2px 5px; padding-bottom: 1px; }
  .pseat { padding: 3px 6px; gap: 2px 6px; }
  .pseat .avatar { width: 26px; height: 26px; font-size: 12px; }
  .pseat .pname { font-size: 12px; }
  .pseat .pline { font-size: 10px; }
  .potted-row { padding-top: 2px; }
  .potted-label, .potted-empty { font-size: 9px; }
  .potted-history .mini-ball { width: 16px; height: 16px; line-height: 16px; font-size: 7px; }
  .potted-history .mini-ball b { inset: 3px; font-size: 6px; line-height: 8px; }
  .timer .lbl { display: none; }
  .timer-dot { min-width: 46px; height: 46px; border-width: 3px; font-size: 15px; }
  .g-score-center { gap: 4px; }
  #btnExtend.extend-time { width: 48px; height: 46px; min-height: 46px; font-size: 11px; }
  .g-score-meta { gap: 3px; }
  .g-score-meta .spec-note { padding: 3px 7px; font-size: 10px; }
  .g-main { display: block; margin: 0; }
  .stage { position: absolute; inset: 0; }
  .panel { position: absolute; z-index: 20; left: 0; top: 0; bottom: 0; width: min(320px, calc(100vw - 16px)); transform: translateX(calc(-100% - 12px)); transition: transform .22s; padding: 8px; gap: 6px; }
  .panel.open { transform: translateX(0); }
  .panel .drawer-close.btn { display: inline-flex; }
  .drawer-btn { display: inline-flex; }
  .g-controls { padding-top: 3px; gap: 8px; } .slider { height: 32px; } .shoot { height: 50px; font-size: 20px; }
  .spin-mini { width: 42px; height: 42px; }
  .chat-log { min-height: 60px; max-height: 120px; }
  .hero-title { font-size: 58px; } .hero-menu { gap: 10px; } .btn.big { padding: 10px 28px; min-height: 46px; font-size: 18px; } .hero-sub { margin-bottom: 12px; }
}
@media (max-height: 520px) { .spin-ball { width: 88px; height: 88px; } .spin-tip { display: none; } .spin-pop { width: 168px; padding: 8px; gap: 6px; } }
@media (max-width: 520px) { .btn.big { font-size: 18px; padding: 13px 26px; } .cards { grid-template-columns: 1fr; } .seat-cards { grid-template-columns: 1fr 1fr; } .res-title { font-size: 26px; } }
.high-contrast .mini-ball { outline: 1px solid rgba(255,255,255,.7); }

/* 左上角「返回遊戲大廳」膠囊（只在首頁），與右上角設定鈕對稱 */
.lobby-pill { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left)); z-index: 3; display: inline-flex; align-items: center; gap: 4px; min-height: 46px; padding: 0 16px 0 8px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 15px; letter-spacing: .04em; color: #3a2208; background: linear-gradient(#ffe08a, #f0b94c 50%, #c98c25); box-shadow: 0 3px 0 #7b5112, 0 6px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7); transition: transform .12s, filter .12s; }
.lobby-pill[hidden] { display: none; }
.lobby-pill:hover { filter: brightness(1.08); }
.lobby-pill:active { transform: translateY(2px); }
.lobby-pill:focus-visible { outline: 3px solid #fff3c4; outline-offset: 2px; }
@media (max-width: 380px) { .lobby-pill { padding: 0 12px 0 4px; font-size: 14px; } }
@media (max-height: 420px) { .lobby-pill { min-height: 40px; } }