/* Village Zero — 像素遊戲介面樣式 */
@font-face { font-family: "Cubic11"; src: url("../assets/fonts/Cubic_11.woff2") format("woff2"); font-display: swap; }

:root {
  --ink: #2b2133; --ink-soft: #4a3a4f;
  --paper: #fff6e4; --paper-2: #f3e3c4; --paper-3: #e6cfa6;
  --wood: #a8693f; --wood-dk: #7a4a2c;
  --gold: #f2c14e; --gold-dk: #c98f2c; --cream: #fff4c4;
  --green: #55b066; --red: #ef5f6e; --blue: #4f8fd8;
  --frame: #c9965f; --head: #7a4a2c;
  --font: "Cubic11", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: #2b2133; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: none; font-smooth: never; }
body { position: fixed; inset: 0; touch-action: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
button, input { font-family: inherit; }

#game { position: fixed; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
#overlay { position: fixed; left: 0; top: 0; pointer-events: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }

/* ── 載入畫面 ── */
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: #2b2133; color: var(--cream); z-index: 50; transition: opacity .4s; font-size: 33px; letter-spacing: 2px; }
#loading.done { opacity: 0; pointer-events: none; }
.load-box { text-align: center; }
.load-box span { display: block; font-size: 16px; margin-top: 12px; color: #c9b8d6; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .4; } }

/* ── 共用按鈕 ── */
.btn, .menu-btn, .chip, .hud-btn, .opt, .seg button, .tabs button, .sort-btn, .game-card {
  border: 0; cursor: pointer; color: var(--ink); background: var(--paper);
  box-shadow: 0 0 0 3px var(--ink), inset 0 -4px 0 var(--paper-3), inset 0 3px 0 #fff;
  transition: transform .05s;
}
.btn:active, .menu-btn:active, .chip:active, .hud-btn:active, .opt:active, .sort-btn:active, .game-card:active { transform: translateY(2px); box-shadow: 0 0 0 3px var(--ink), inset 0 -1px 0 var(--paper-3); }
.btn:disabled, .menu-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn { padding: 10px 16px; font-size: 16px; margin: 3px; }
.btn.big { display: block; width: calc(100% - 6px); padding: 14px; font-size: 20px; margin: 14px 3px 6px; }
.btn.small { padding: 6px 10px; font-size: 14px; }
.btn.primary, .menu-btn.primary { background: var(--gold); box-shadow: 0 0 0 3px var(--ink), inset 0 -4px 0 var(--gold-dk), inset 0 3px 0 #ffe9a3; }
.btn.danger { background: #f7b4b4; box-shadow: 0 0 0 3px var(--ink), inset 0 -4px 0 #d77b7b; }
.btn.google { background: #fff; }
.g-mark { display: inline-block; width: 1.3em; color: #4f8fd8; font-weight: bold; }
.muted { color: #7a6a6f; font-size: 14px; line-height: 1.6; }

/* ── HUD ── */
#hud { position: fixed; left: 0; right: 0; top: 0; display: none; justify-content: space-between; align-items: flex-start; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); pointer-events: none; }
body.playing #hud { display: flex; }
.hud-left { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.coin-pill { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 8px; background: var(--paper); padding: 6px 14px 6px 8px; font-size: 22px; box-shadow: 0 0 0 3px var(--ink), inset 0 -4px 0 var(--paper-3), 0 6px 0 rgba(0,0,0,.25); }
.coin-pill img { width: 24px; height: 24px; image-rendering: pixelated; }
.loc { background: rgba(43,33,51,.78); color: var(--cream); padding: 5px 10px; font-size: 16px; box-shadow: 0 0 0 2px rgba(43,33,51,.9); }
.hud-btn { pointer-events: auto; width: 46px; height: 46px; font-size: 22px; }
.coin-float { position: absolute; left: 100%; top: 4px; margin-left: 10px; font-size: 22px; white-space: nowrap; animation: floatUp 1.2s ease-out forwards; text-shadow: 2px 2px 0 var(--ink); }
.coin-float.up { color: #ffe08a; } .coin-float.down { color: #ff9a9a; }
@keyframes floatUp { from { transform: translateY(6px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-26px); opacity: 0; } }

/* 手機互動鍵與搖桿 */
#act { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); display: none; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--cream); font-size: 16px; }
body.touch.playing #act.show { display: flex; }
.act-key { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 26px; box-shadow: 0 0 0 4px var(--ink), inset 0 -6px 0 var(--gold-dk), 0 6px 0 rgba(0,0,0,.3); }
.act-label { position: absolute; right: 0; bottom: calc(100% + 6px); max-width: 62vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cream); background: rgba(43,33,51,.88); padding: 5px 10px; border-radius: 8px; pointer-events: none; } /* 放在 A 鍵正上方：以前在左邊，會被快捷列蓋住 */
#act:active .act-key { transform: translateY(3px); }
#act.flash .act-label { animation: actFlash .7s ease-out; }
@keyframes actFlash { 0% { background: #ffd23f; color: #2b2133; transform: scale(1.18); } 100% { background: rgba(43,33,51,.85); transform: scale(1); } }
#act-next { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 122px); display: none; padding: 6px 10px; border: 3px solid var(--ink); border-radius: 18px; background: var(--cream); color: var(--ink); font-size: 14px; max-width: 62vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: inherit; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
body.touch.playing #act-next.show { display: block; }
body.chatting #act-next { display: none !important; }
#stick-zone { position: fixed; left: 0; bottom: 0; width: 55%; height: 75%; display: none; touch-action: none; }
body.touch.playing #stick-zone { display: block; }
#stick { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; background: rgba(255,246,228,.18); box-shadow: 0 0 0 3px rgba(43,33,51,.5); display: none; pointer-events: none; }
#stick.on { display: block; }
#knob { position: absolute; left: 30px; top: 30px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,246,228,.85); box-shadow: 0 0 0 3px var(--ink); }

/* ── 提示訊息 ── */
#toasts { position: fixed; left: 50%; top: max(118px, calc(env(safe-area-inset-top) + 108px)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; z-index: 40; width: min(92vw, 520px); }
.toast { background: var(--paper); padding: 10px 16px; font-size: 16px; box-shadow: 0 0 0 3px var(--ink), 0 6px 0 rgba(0,0,0,.25); animation: popIn .2s steps(3); text-align: center; }
.toast.warn { background: #ffd9d9; }
.toast.out { opacity: 0; transition: opacity .4s; }
@keyframes popIn { from { transform: scale(.85); opacity: 0; } }

/* ── 視窗 ── */
.pshade { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(28,20,36,.55); padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); z-index: 20; opacity: 0; transition: opacity .15s; }
.pshade.in { opacity: 1; }
.pwin { flex: 0 1 auto; width: min(560px, calc(100vw - 32px)); min-width: 0; max-height: calc(var(--app-h, 100vh) - 32px); display: flex; flex-direction: column; background: var(--paper);
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--frame), 0 0 0 10px var(--ink), 0 14px 0 6px rgba(0,0,0,.3); }
.pwin.wide { width: min(720px, calc(100vw - 32px)); }
.phead { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--head); color: var(--cream); font-size: 22px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.ptitle { flex: 1; }
.pclose { width: 36px; height: 36px; border: 0; font-size: 18px; cursor: pointer; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 3px var(--ink), inset 0 -3px 0 var(--paper-3); }
.pbody { flex: 1 1 auto; min-height: 0; padding: 16px; min-width: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; font-size: 16px; line-height: 1.5; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.theme-work { --frame: #5d93ab; --head: #2f5d73; }
.theme-arcade { --frame: #ef6f8f; --head: #7b4bb3; --paper: #fff3f7; --paper-3: #f3cddb; }
.theme-bank { --frame: #f2c14e; --head: #6b4c2e; }
.theme-beach { --frame: #4fb3c7; --head: #2c6f86; }
.theme-menu { --frame: #c9965f; --head: #7a4a2c; }

/* ── 封面 ── */
.title-screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: max(5vh, 24px) 16px max(3vh, 16px);
  background: radial-gradient(ellipse at center, rgba(43,33,51,0) 30%, rgba(43,33,51,.55) 100%); transition: opacity .35s; z-index: 10; }
.title-screen.out { opacity: 0; pointer-events: none; }
.title-top { text-align: center; }
.logo { width: min(86vw, 640px); image-rendering: pixelated; display: block; margin: 0 auto; filter: drop-shadow(0 6px 0 rgba(43,33,51,.45)); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.subtitle { color: var(--cream); font-size: 22px; margin-top: 8px; text-shadow: 2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); letter-spacing: 4px; }
.tagline { color: #fff; font-size: 16px; margin-top: 10px; text-shadow: 2px 2px 0 var(--ink); }
.title-menu { display: flex; flex-direction: column; gap: 14px; width: min(320px, 82vw); }
.menu-btn { padding: 12px; font-size: 22px; }
.title-note { color: var(--cream); background: rgba(43,33,51,.8); padding: 6px 12px; font-size: 14px; }
.title-foot { color: #e9dcf2; font-size: 14px; text-shadow: 2px 2px 0 var(--ink); text-align: center; }
.title-legal { margin-top: 2px; font-size: 12px; }
.title-legal a { color: #f2c14e; }
@media (max-height: 520px) {
  .title-screen { flex-direction: row; justify-content: space-around; padding: 16px; }
  .logo { width: min(48vw, 420px); }
  .title-menu { gap: 10px; width: min(260px, 40vw); }
  .menu-btn { padding: 8px; font-size: 18px; }
  .title-foot, .title-note { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .title-note { bottom: 34px; }
}

/* ── 角色建立 ── */
.creator { display: flex; gap: 16px; align-items: flex-start; }
.creator-stage { flex: none; width: 200px; }
.creator-opts { flex: 1 1 auto; min-width: 0; }
.creator-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; background: #8fd07a; padding: 10px 6px; box-shadow: inset 0 0 0 3px var(--ink), inset 0 -10px 0 #6dbb6a; }
.creator-preview { width: 192px; height: 112px; image-rendering: pixelated; }
.opt-row { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.opt-row > .opt-label { padding-top: 7px; }
.opt-label { width: 3em; flex: none; font-size: 15px; }
.opt-items { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 320px; gap: 10px; padding: 3px; }
.opt-items.text { max-width: none; }
.opt-items.text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { padding: 5px 4px; font-size: 14px; min-width: 0; height: 36px; display: flex; align-items: center; justify-content: center; }
.opt.on { background: var(--gold); box-shadow: 0 0 0 3px var(--ink), inset 0 -3px 0 var(--gold-dk); }
.swatch { display: block; width: 18px; height: 18px; box-shadow: 0 0 0 2px var(--ink); }
.name-input, .bet-input, .auth-form input { flex: 1; min-width: 0; padding: 10px; font-size: 18px; border: 0; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink), inset 0 4px 0 #e9dcc8; outline: none; user-select: text; -webkit-user-select: text; }
.name-input:focus, .bet-input:focus, .auth-form input:focus { box-shadow: inset 0 0 0 3px var(--blue), inset 0 4px 0 #dbe9f8; }
.creator-foot .btn.big { margin-top: 6px; }
@media (max-width: 560px), (max-height: 520px) {
  .creator { flex-direction: column; align-items: stretch; gap: 12px; }
  .creator-stage { width: auto; flex-direction: row; justify-content: center; }
  .creator-preview { width: 96px; height: 56px; }
}
@media (max-width: 420px) {
  .opt-items { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
  .opt-items.text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt-label { width: 2.6em; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .creator { flex-direction: row; align-items: flex-start; }
  .creator-stage { flex-direction: column; width: 150px; }
  .opt-items { grid-template-columns: repeat(6, minmax(0, 44px)); }
  .opt-items.text { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .opt { height: 32px; }
  .opt-row { margin-bottom: 8px; }
}

/* ── 設定與登入 ── */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 2px dashed var(--paper-3); }
.set-row input[type=range] { width: 50%; accent-color: var(--wood); }
.switch { appearance: none; width: 52px; height: 28px; background: #c9bca2; box-shadow: inset 0 0 0 3px var(--ink); position: relative; cursor: pointer; }
.switch::after { content: ""; position: absolute; left: 5px; top: 5px; width: 18px; height: 18px; background: #fff; box-shadow: 0 0 0 2px var(--ink); transition: left .1s; }
.switch:checked { background: var(--green); } .switch:checked::after { left: 29px; }
.seg { display: flex; gap: 8px; }
.seg button { padding: 6px 10px; font-size: 14px; }
.seg button.on, .tabs button.on { background: var(--gold); box-shadow: 0 0 0 3px var(--ink), inset 0 -3px 0 var(--gold-dk); }
.about { margin-top: 14px; }
.tabs { display: flex; gap: 12px; margin-bottom: 14px; }
.tabs button { flex: 1; padding: 8px; font-size: 18px; }
.auth-banner { background: #fff1c2; padding: 10px; font-size: 15px; box-shadow: inset 0 0 0 2px var(--gold-dk); }
.or { text-align: center; color: #7a6a6f; margin: 8px 0; font-size: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 15px; }
.auth-form input:disabled { background: #eee6da; }
.linkish { background: none; border: 0; color: var(--blue); cursor: pointer; padding: 4px 0; font-size: 14px; }
.linkish:disabled { color: #aaa; }
.profile { padding: 10px; background: var(--paper-2); margin-bottom: 16px; box-shadow: inset 0 0 0 2px var(--paper-3); }
.profile-name { font-size: 22px; }
.menu-list { display: flex; flex-direction: column; gap: 14px; padding: 3px; }

/* ── 遊樂場 ── */
.lobby-hint { margin-top: 0; }
.game-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding: 3px; }
.game-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; text-align: center; position: relative; }
.game-card.open { background: #fff; }
.game-card.soon { opacity: .65; cursor: not-allowed; }
.gc-icon { width: 48px; height: 48px; image-rendering: pixelated; }
.gc-emoji { font-size: 38px; line-height: 48px; }
.gc-name { font-size: 18px; } .gc-desc { font-size: 13px; color: #7a6a6f; }
.gc-soon { position: absolute; top: 6px; right: 6px; background: var(--ink); color: var(--cream); font-size: 12px; padding: 2px 6px; }
.btn.back { margin: 0 0 12px; }

.dice-table { display: flex; justify-content: space-around; align-items: center; background: #3f8a5a; padding: 14px 6px; box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 9px #2f6e43, inset 0 0 0 11px #c9965f; color: #fff; }
.dice-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.portrait { width: 48px; height: 72px; image-rendering: pixelated; }
.who { font-size: 15px; text-shadow: 2px 2px 0 var(--ink); }
.dice-pair { display: flex; gap: 8px; }
.die { width: 52px; height: 52px; image-rendering: pixelated; }
.die.rolling { animation: shake .12s steps(2) infinite; }
@keyframes shake { 50% { transform: translate(2px, -3px) rotate(6deg); } }
.dice-sum { font-size: 16px; background: rgba(43,33,51,.6); padding: 2px 8px; min-width: 4em; text-align: center; }
.vs { font-size: 26px; color: var(--cream); text-shadow: 3px 3px 0 var(--ink); }
.dice-banner { margin: 14px 0; padding: 10px; text-align: center; font-size: 18px; background: #fff; box-shadow: inset 0 0 0 3px var(--ink); }
.dice-banner.win { background: #d9f5d0; } .dice-banner.lose { background: #ffd9d9; } .dice-banner.tie { background: #e6e6f5; } .dice-banner.warn { background: #fff1c2; }
.dice-banner.jackpot { background: linear-gradient(90deg, #ffe08a, #fff4c4, #ffe08a); animation: glow .5s steps(2) infinite; }
@keyframes glow { 50% { box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 4px var(--gold); } }
.bet-row { display: flex; align-items: center; gap: 12px; }
.bet-label { display: flex; align-items: center; gap: 6px; font-size: 18px; }
.coin-ico { width: 20px; height: 20px; image-rendering: pixelated; vertical-align: -4px; }
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 10px; margin-top: 14px; padding: 3px; }
.chip { padding: 7px 4px; font-size: 15px; min-width: 0; }
.chip.allin { background: #ffcf7a; box-shadow: 0 0 0 3px var(--ink), inset 0 -3px 0 var(--gold-dk); }
.dice-history { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 28px; margin-top: 4px; }
.hist-label { font-size: 13px; color: #7a6a6f; margin-right: 4px; }
.hist { width: 26px; height: 26px; display: grid; place-items: center; font-size: 14px; box-shadow: inset 0 0 0 2px var(--ink); }
.hist.win { background: #b8e8a8; } .hist.lose { background: #f6b0b0; } .hist.tie { background: #d6d6ea; } .hist.jackpot { background: var(--gold); }
.rules { margin-top: 10px; font-size: 14px; color: #5a4a50; }
.rules summary { cursor: pointer; }
.rules p { margin: 6px 0; }

/* ── 工作所 ── */
.work-stage { position: relative; background: var(--ink); padding: 3px; }
.work-canvas { display: block; width: 100%; image-rendering: pixelated; }
.work-stats { position: absolute; left: 8px; right: 8px; top: 6px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 15px; pointer-events: none; }
.work-stats span { background: rgba(43,33,51,.8); color: var(--cream); padding: 2px 8px; }
.work-stats .miss { color: #ff8a8a; margin-left: auto; }
/* 手機上一排放不下時不要換行：換到第二排的愛心會蓋住分貨區 */
@media (max-width: 520px) {
  .work-stats { flex-wrap: nowrap; gap: 4px; font-size: 13px; left: 4px; right: 4px; top: 4px; }
  .work-stats span { padding: 1px 5px; white-space: nowrap; }
  .work-stats .miss { font-size: 11px; letter-spacing: -1px; }
}
.work-msg { margin: 12px 0; text-align: center; font-size: 17px; min-height: 1.5em; }
.work-msg.good { color: #2f7a3f; } .work-msg.bad { color: #c03a48; } .work-msg.warn { color: #a66a10; }
.sort-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 3px; }
.sort-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; font-size: 15px; touch-action: none; }
.sort-btn img { width: 36px; height: 36px; image-rendering: pixelated; }
.sort-btn kbd { font-family: inherit; font-size: 12px; color: #7a6a6f; }
body.touch .sort-btn kbd { display: none; }
.sort-btn.s0 { background: #ffe1e4; } .sort-btn.s1 { background: #dfeafb; } .sort-btn.s2 { background: #ddf3e0; }
.sort-btn.hit { transform: translateY(3px); filter: brightness(.92); }
.work-intro { margin-top: 12px; }
.pay-table { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.pay-table span { background: var(--paper-2); padding: 3px 8px; box-shadow: inset 0 0 0 2px var(--paper-3); }
.payslip { background: #fff; padding: 12px; text-align: center; box-shadow: inset 0 0 0 3px var(--ink); }
.payslip-title { font-size: 18px; margin-bottom: 6px; }
.payslip-total { font-size: 33px; color: #a66a10; margin: 6px 0; }
.payslip-total .coin-ico { width: 30px; height: 30px; vertical-align: -5px; }

/* ── 銀行 ── */
.bank-closed { text-align: center; }
.bank-sign { display: inline-block; font-size: 33px; padding: 6px 22px; background: #82603d; color: var(--gold); box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 3px #a87b4f; margin: 6px 0 10px; }

@media (max-width: 600px) {
  .pbody { padding: 12px; font-size: 15px; }
  .phead { font-size: 18px; }
  .die { width: 40px; height: 40px; }
  .dice-side { min-width: 0; }
  .portrait { width: 32px; height: 48px; }
}
@media (max-height: 520px) {
  .pshade { padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
  .pwin, .pwin.wide { max-height: calc(var(--app-h, 100vh) - 16px); width: min(820px, calc(100vw - 24px)); }
  .dice-table { padding: 8px 6px; }
  .die { width: 38px; height: 38px; }
  .portrait { width: 32px; height: 48px; }
  .btn.big { padding: 10px; font-size: 18px; margin-top: 10px; }
  .phead { padding: 6px 10px; font-size: 18px; }
  .pclose { width: 30px; height: 30px; }
  .pbody { padding: 10px 12px; }
  .work-stage { display: flex; justify-content: center; }
  .work-canvas { width: auto; height: min(44vh, 190px); }
  .work-msg { margin: 6px 0; font-size: 15px; }
  .sort-btn { flex-direction: row; justify-content: center; padding: 6px 4px; gap: 8px; }
  .sort-btn img { width: 26px; height: 26px; }
  #toasts { top: 70px; }
}

/* 手機防溢出：所有視窗內元素都不得撐寬 */
.pbody img, .pbody canvas, .pbody input { max-width: 100%; }
.bet-row { min-width: 0; }
.bet-input { width: 100%; }
.dice-banner { font-size: 16px; }
.dice-layout { min-width: 0; }
@media (max-width: 420px) {
  .pshade { padding: 10px; }
  .pwin, .pwin.wide { width: calc(100vw - 20px); max-height: calc(var(--app-h, 100vh) - 20px); }
  .pbody { padding: 10px; }
  .dice-table { padding: 10px 4px; }
  .die { width: 36px; height: 36px; }
  .vs { font-size: 20px; }
  .who { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chips { gap: 8px; }
  .chip { font-size: 14px; padding: 6px 2px; }
  .btn.big { font-size: 18px; padding: 12px; }
  .game-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gc-desc { display: none; }
}
/* 手機橫向：雙骰改左右兩欄，一個畫面就能玩，不用捲動 */
@media (orientation: landscape) and (max-height: 520px) {
  .dice-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  .dice-layout .dice-banner { margin: 8px 0 0; padding: 6px; font-size: 15px; }
  .dice-layout .btn.big { margin-top: 8px; }
  .dice-layout .chips { margin-top: 8px; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dice-layout .bet-input { padding: 6px; font-size: 16px; }
  .btn.back { margin-bottom: 8px; padding: 4px 8px; }
  .game-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gc-desc { display: none; }
  .creator { gap: 10px; }
}

/* 視窗開啟時，提示訊息移到畫面底部，不遮住操作 */
body.panel-open #toasts { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); }
body.panel-open .toast { font-size: 14px; padding: 6px 12px; }
.name-row { align-items: center; }
.name-row > .opt-label { padding-top: 0; }
/* 「入住村莊」固定在視窗底部，選項多時也看得到 */
.creator-foot { position: -webkit-sticky; position: sticky; bottom: -16px; margin: 0 -16px -16px; padding: 4px 16px 12px; background: var(--paper); box-shadow: 0 -3px 0 var(--paper-3); z-index: 2; }
@media (max-width: 600px) { .creator-foot { bottom: -12px; margin: 0 -12px -12px; padding: 4px 12px 10px; } }
@media (max-width: 420px) { .creator-foot { bottom: -10px; margin: 0 -10px -10px; padding: 4px 10px 8px; } }
@media (max-height: 520px) { .creator-foot { bottom: -10px; margin: 0 -12px -10px; padding: 2px 12px 8px; } .creator-foot .btn.big { margin-top: 6px; padding: 8px; } }

.profile-acct { font-size: 14px; color: #5a4a50; margin: 2px 0 4px; }
.auth-title { font-size: 20px; margin-bottom: 10px; }
.auth-banner.good { background: #dff5d6; box-shadow: inset 0 0 0 2px #4a8d50; }
.auth-banner.warn { background: #ffe1e1; box-shadow: inset 0 0 0 2px #c03a48; }
.auth-form .linkish { display: block; margin: 6px auto 0; }

/* ── 多人：在線人數與聊天 ── */
.online { pointer-events: auto; cursor: pointer; font-size: 14px; color: #ffd9d9; background: rgba(43,33,51,.7); padding: 3px 8px; }
.online:empty { display: none; }
.online.on { color: #b8f0b0; }
.hud-right { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.chat-btn { display: none; }
body.cloud .chat-btn { display: block; }
#chatlog { position: fixed; left: max(12px, env(safe-area-inset-left)); top: 150px; width: min(340px, 60vw); display: flex; flex-direction: column; gap: 4px; pointer-events: none !important; }
.chat-line { background: rgba(43,33,51,.72); color: #fff8ec; padding: 3px 8px; font-size: 14px; line-height: 1.45; word-break: break-word; transition: opacity 1s; }
.chat-line b { color: #9fe3ff; font-weight: normal; }
.chat-line.self b { color: #ffe08a; }
.chat-line.fade { opacity: 0; }
body.chatting #chatlog { display: none; }
#chatbar { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100vw - 20px)); display: none; flex-direction: column; gap: 6px; z-index: 15; }
#chatbar.open { display: flex; }
.chat-history { max-height: min(220px, 34vh); overflow-y: auto; display: flex; flex-direction: column; gap: 3px; touch-action: pan-y; }
.chat-empty { color: #fff8ec; background: rgba(43,33,51,.72); padding: 4px 8px; font-size: 14px; }
.chat-row { display: flex; gap: 8px; align-items: center; padding: 3px; }
.chat-input { flex: 1 1 auto; min-width: 0; padding: 10px; font-size: 16px; border: 0; background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--ink); outline: none; user-select: text; -webkit-user-select: text; }
.chat-send, .chat-close { margin: 0; padding: 10px 12px; flex: none; }
body.chatting #act, body.chatting #stick-zone { display: none !important; }
@media (max-height: 520px) { #chatlog { top: 120px; } .chat-history { max-height: 30vh; } }

/* ── 線上更新提示 ── */
#update-banner { position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 140px); padding: 8px 12px; background: var(--paper); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 rgba(0,0,0,.25); font-size: 15px; animation: popIn .2s steps(3); }
#update-banner .upd-note { color: #5a4a50; font-size: 13px; }
#update-banner .btn { margin: 0; }

/* ── 交易 ── */
#trade-invite { position: fixed; left: 50%; top: max(64px, calc(env(safe-area-inset-top) + 56px)); transform: translateX(-50%); z-index: 35; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); padding: 10px 14px; background: #fff1c2; box-shadow: 0 0 0 3px var(--ink), 0 6px 0 rgba(0,0,0,.25); font-size: 16px; animation: popIn .2s steps(3); }
#trade-invite .btn { margin: 0; }
.inv-left { color: #a66a10; font-size: 14px; min-width: 2.5em; }
.trade-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.trade-side { background: #fff; padding: 10px; box-shadow: inset 0 0 0 3px var(--ink); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.trade-side.ready { box-shadow: inset 0 0 0 3px #3a8048, inset 0 0 0 6px #b8e8a8; }
.trade-who { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.trade-portrait { width: 24px; height: 36px; image-rendering: pixelated; }
.trade-amount { font-size: 26px; padding: 8px 0; }
.trade-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; gap: 8px; }
.trade-fee { font-size: 13px; color: #7a5a30; }
.trade-state { font-size: 14px; color: #7a6a6f; }
.trade-side.ready .trade-state { color: #2f7a3f; }
.trade-note { margin-top: 10px; font-size: 14px; color: #5a4a50; text-align: center; }
.trade-cancel { display: block; margin: 8px auto 0; }
.trade-wait, .trade-done { text-align: center; padding: 12px; background: #fff; box-shadow: inset 0 0 0 3px var(--ink); display: flex; flex-direction: column; gap: 8px; }
.trade-wait-title, .trade-done-title { font-size: 22px; }
.player-card { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.card-portrait { width: 48px; height: 72px; image-rendering: pixelated; }
.bank-balance { text-align: center; background: #fff; padding: 10px; box-shadow: inset 0 0 0 3px var(--ink); }
.bank-amount { font-size: 33px; color: #a66a10; }
.bank-section { font-size: 18px; margin: 14px 0 8px; }
.online-list { display: flex; flex-direction: column; gap: 10px; padding: 3px; }
.online-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; padding: 6px 10px; box-shadow: inset 0 0 0 2px var(--paper-3); }
.online-name { color: #2f7a3f; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
@media (max-width: 420px) { .trade-grid { gap: 8px; } .trade-side { padding: 8px; } .trade-amount { font-size: 22px; } }

/* ── 銀行 ── */
.bank-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bank-card { background: #fff; padding: 12px; box-shadow: inset 0 0 0 3px var(--ink); display: flex; flex-direction: column; gap: 8px; }
.bank-card .bank-section { margin-top: 0; }
.bank-pending { font-size: 14px; color: #6b4c2e; min-height: 2.6em; }
.meter { height: 14px; background: #efe6d2; box-shadow: inset 0 0 0 2px var(--ink); }
.meter-fill { height: 100%; width: 0; background: var(--gold); box-shadow: inset 0 -3px 0 var(--gold-dk); transition: width .5s; }
.meter.full .meter-fill { animation: glow .6s steps(2) infinite; }
.bank-row { display: flex; }
.bank-wallet { font-size: 14px; color: #5a4a50; text-align: center; }
.bank-msg { min-height: 1.4em; text-align: center; font-size: 15px; }
.bank-msg.good { color: #2f7a3f; } .bank-msg.bad { color: #c03a48; }
.bank-rules { font-size: 13px; margin: 0; }
.bank-card .btn.big { margin: 4px 0; width: 100%; }
.bank-card .row-btns .btn { flex: 1; margin: 0; }
@media (max-width: 640px) { .bank-layout { grid-template-columns: 1fr; } }

/* ── 踩地雷／抽獎 ── */
.mines-table { background: #3f8a5a; padding: 14px 8px; box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 9px #2f6e43, inset 0 0 0 11px #c9965f; }
.mines-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mine-box { border: 0; background: transparent; padding: 0; cursor: pointer; aspect-ratio: 24 / 22; }
.mine-box img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.mine-box:disabled { cursor: default; }
.mine-box:not(:disabled):hover img { transform: translateY(-3px); }
.mine-box.dim img { opacity: .55; }
.mine-box.shake img { animation: shake .12s steps(2) infinite; }
.mines-info { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mult-step { background: rgba(43,33,51,.55); color: #fff8ec; padding: 2px 8px; font-size: 14px; }
.mult-step.next { background: var(--gold); color: var(--ink); }
.mult-step.got { background: #2f7a3f; }
.btn.big.cash { background: #9be0ad; box-shadow: 0 0 0 3px var(--ink), inset 0 -4px 0 #4a8d50; }
.bet-box.locked { opacity: .55; }
.lot-machine { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; background: linear-gradient(#ffe1ea, #f6b3c3); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 9px #ef6f8f; }
.capsule { width: 96px; height: 96px; image-rendering: pixelated; }
.lot-label { font-size: 22px; min-height: 1.3em; }
.lot-odds { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 8px 0; }
.lot-odd { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.lot-odd i { width: 12px; height: 12px; display: inline-block; box-shadow: 0 0 0 2px var(--ink); }
.lot-odd small { color: #7a6a6f; }
.hist { width: auto; min-width: 26px; padding: 0 4px; }

[hidden] { display: none !important; }

/* ── 咖啡師 ── */
.barista-stage { position: relative; background: #6b4c2e; padding: 40px 10px 10px; box-shadow: inset 0 0 0 3px var(--ink); }
.barista-stats { top: 8px; }
.barista-counter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; background: #a8693f; padding: 10px; box-shadow: inset 0 0 0 3px var(--ink), inset 0 -8px 0 #86502f; }
.barista-customer { width: 48px; height: 72px; image-rendering: pixelated; }
.barista-order { background: #fff; padding: 8px; box-shadow: inset 0 0 0 3px var(--ink); min-height: 72px; }
.order-name { font-size: 18px; }
.order-recipe { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.order-recipe span { font-size: 13px; padding: 2px 6px; background: #efe6d2; }
.order-recipe span.done { background: #9be0ad; }
.order-recipe span.hidden-step { background: #d8cfe6; color: #6a5a72; }
.cup-img { width: 56px; height: 64px; image-rendering: pixelated; }
.barista-patience { margin-top: 8px; }
.barista-patience .meter-fill { background: #ef6f7c; box-shadow: none; transition: none; width: 100%; }
.ing-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 3px; }
.ing-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; font-size: 16px; border: 0; cursor: pointer; background: var(--paper); box-shadow: 0 0 0 3px var(--ink), inset 0 -4px 0 var(--paper-3); touch-action: none; }
.ing-btn i { width: 16px; height: 16px; box-shadow: 0 0 0 2px var(--ink); display: inline-block; }
.ing-btn kbd { font-family: inherit; font-size: 11px; color: #7a6a6f; }
body.touch .ing-btn kbd { display: none; }
.ing-btn.hit { transform: translateY(3px); filter: brightness(.92); }
@media (max-height: 520px) { .barista-stage { padding-top: 34px; } .barista-customer { width: 32px; height: 48px; } .ing-btn { padding: 6px 4px; } }
.ing-btn.pouring { opacity: .6; }

/* ── 大老二 ── */
.b2-seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.b2-seat { background: rgba(255,255,255,.55); border: 2px solid var(--ink, #2b2133); border-radius: 8px; padding: 4px 4px 3px; text-align: center; min-width: 0; transition: transform .15s; }
.b2-seat.turn { background: #fff3c4; transform: translateY(-2px); box-shadow: 0 3px 0 rgba(43,33,51,.25); }
.b2-seat.winner { background: #d9f7c8; }
.b2-face { font-size: 20px; line-height: 1.1; }
.b2-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2-count { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; }
.b2-back { width: 10px; height: 14px; border: 1.5px solid #2b2133; border-radius: 2px; background: repeating-linear-gradient(45deg, #9a6bd1 0 2px, #c9a8ef 2px 4px); }
.b2-act { font-size: 12px; color: #7b4bb3; min-height: 1.2em; }
.b2-table { margin: 8px 0 6px; min-height: 82px; display: flex; align-items: center; justify-content: center; background: #3f8a5c; border: 2px solid #2b2133; border-radius: 10px; padding: 6px; box-shadow: inset 0 0 0 3px #57a874; }
.b2-empty { color: #d9f7c8; font-size: 13px; }
.b2-played { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.b2-cards { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.b2-by { color: #fff; font-size: 12px; }
.b2-hand { --n: 13; display: flex; justify-content: center; padding: 14px 4px 4px; margin-top: 4px; min-height: 76px; }
.b2-hand .pcard { margin-left: calc(min(0px, (100% - var(--n) * 40px) / (var(--n) - 1 + .0001))); }
.b2-hand .pcard:first-child { margin-left: 0; }
.pcard { position: relative; flex: 0 0 auto; width: 40px; height: 56px; padding: 3px 0 0 4px; background: #fffdf7; border: 2px solid #2b2133; border-radius: 5px; color: #2b2133; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; font-family: inherit; cursor: default; box-shadow: 0 2px 0 rgba(43,33,51,.25); transition: transform .1s; }
button.pcard { cursor: pointer; }
.pcard.red { color: #d8414f; }
.pcard .pc-rank { font-size: 15px; }
.pcard .pc-suit { font-size: 15px; }
.pcard.sel { transform: translateY(-12px); background: #fff3c4; border-color: #b8870f; }
.pcard.small { width: 28px; height: 38px; padding: 2px 0 0 3px; border-radius: 4px; }
.pcard.small .pc-rank, .pcard.small .pc-suit { font-size: 12px; }
.b2-actions { display: grid; grid-template-columns: auto auto 1fr 1.4fr; gap: 6px; margin-top: 6px; align-items: stretch; }
.b2-setup { text-align: center; margin-top: 6px; }
.b2-unit-label { font-size: 13px; margin-bottom: 4px; }
.b2-units { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.b2-units .chip.on { background: #ffd166; }
.b2-escrow { margin: 6px 0; }
.b2-result { margin-top: 8px; }
.b2-score { width: 100%; border-collapse: collapse; font-size: 13px; }
.b2-score th, .b2-score td { padding: 3px 6px; border-bottom: 1px dashed rgba(43,33,51,.25); text-align: left; }
.b2-score tr.win td { background: #d9f7c8; }
.b2-reveal { margin-top: 6px; display: grid; gap: 4px; }
.b2-reveal-row { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
@media (max-width: 480px) {
  .b2-actions { grid-template-columns: 1fr 1fr; }
  .b2-hand .pcard { margin-left: calc(min(0px, (100% - var(--n) * 34px) / (var(--n) - 1 + .0001))); }
  .pcard { width: 34px; height: 50px; }
  .pcard .pc-rank, .pcard .pc-suit { font-size: 13px; }
}

/* ── GM 工具 ── */
.menu-btn.gm { background: #fff3c4; }
.gm-sec { margin-bottom: 12px; }
.gm-sec h3 { font-size: 14px; margin: 0 0 6px; }
.gm-search, .gm-note { width: 100%; box-sizing: border-box; margin: 4px 0; }
.gm-list { display: grid; gap: 4px; max-height: 210px; overflow-y: auto; margin-top: 4px; }
.gm-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name bal" "mail bal"; gap: 0 8px; text-align: left; padding: 6px 8px; border: 2px solid #2b2133; border-radius: 6px; background: #fff; font-family: inherit; cursor: pointer; }
.gm-row.sel { background: #fff3c4; border-color: #b8870f; }
.gm-name { grid-area: name; } .gm-name em { font-style: normal; font-size: 11px; color: #7b4bb3; } .gm-name em.bad { color: #d8414f; }
.gm-mail { grid-area: mail; font-size: 11px; color: #6b5f78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-row .gm-bal { grid-area: bal; align-self: center; }
.gm-bal { color: #b8870f; font-variant-numeric: tabular-nums; }
.gm-target { padding: 6px 8px; border: 2px dashed rgba(43,33,51,.35); border-radius: 6px; margin-bottom: 6px; font-size: 13px; }
.gm-target.on { border-style: solid; border-color: #b8870f; background: #fffaf0; }
.gm-btns { display: flex; gap: 6px; margin-top: 6px; } .gm-btns .btn.primary { flex: 1; }
.btn.danger { background: #ef8a6f; }
.gm-log { display: grid; gap: 2px; font-size: 12px; max-height: 180px; overflow-y: auto; }
.gm-log-row { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; padding: 3px 0; border-bottom: 1px dashed rgba(43,33,51,.2); }
.gm-log-row .muted { grid-column: 1 / -1; }
.order-recipe span.next { background: #ffd166; outline: 2px solid #b8870f; }

/* ── 背包 ── */
.bag-btn img { width: 28px; height: 28px; image-rendering: pixelated; }
.bike-btn.on { background: var(--gold, #f2c14e); }
.bike-btn[hidden] { display: none; }
.sec-title { font-size: 14px; margin: 6px 0 4px; }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; margin: 6px 0; }
.bag-cell { position: relative; aspect-ratio: 1; border: 2px solid #2b2133; border-radius: 6px; background: #fffdf7; display: flex; align-items: center; justify-content: center; padding: 0; font-family: inherit; }
.bag-cell.empty { background: rgba(43,33,51,.06); border-style: dashed; border-color: rgba(43,33,51,.25); }
.bag-cell.g2 { background: #eaf8e6; } .bag-cell.g3 { background: #e5f0fd; } .bag-cell.g4 { background: #f4e6fb; }
.bag-cell .qty { position: absolute; right: 3px; bottom: 1px; font-size: 11px; }
.bag-cell .cell-stars { position: absolute; left: 3px; top: 1px; font-size: 9px; color: #b8870f; letter-spacing: -1px; }
.item-ico { width: 36px; height: auto; image-rendering: pixelated; flex: 0 0 auto; }
.bag-detail { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 6px 8px; border: 2px dashed rgba(43,33,51,.25); border-radius: 6px; font-size: 13px; }
.item-name { font-size: 14px; } .grade { font-size: 12px; }
.rod-list { display: grid; gap: 6px; }
.rod-row, .fm-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 2px solid #2b2133; border-radius: 6px; background: #fffdf7; }
.rod-row.on, .fm-row.on { background: #fff3c4; }
.rod-name { flex: 1; display: flex; flex-direction: column; font-size: 14px; } .rod-name small { font-size: 11px; color: #6b5f78; }
.tag { font-size: 12px; padding: 2px 6px; background: #ffd166; border: 2px solid #2b2133; border-radius: 4px; white-space: nowrap; }
/* ── 魚攤 ── */
.fm-content { margin-top: 8px; display: grid; gap: 8px; }
.fm-list { display: grid; gap: 6px; }
.fm-info { flex: 1; min-width: 0; }
.fm-empty { padding: 16px 0; text-align: center; }
.fm-prices { width: 100%; border-collapse: collapse; font-size: 12px; }
.fm-prices th, .fm-prices td { padding: 3px 4px; border-bottom: 1px dashed rgba(43,33,51,.25); text-align: right; }
.fm-prices th:first-child, .fm-prices td:first-child { text-align: left; }
.tabs button.on { background: #ffd166; }
/* ── 釣魚 ── */
/* Fishing layout: keep exactly the same vertical slots before/after a bite.
   The tension/progress meter must stay in layout while hidden; otherwise
   hook and reel buttons jump when the fish starts fighting. */
.fish-meters[hidden] { display: grid; visibility: hidden; pointer-events: none; }
.fish-stage ~ .dice-banner {
  height: 88px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  overflow-wrap: anywhere;
  overflow-y: auto;
}
.fish-stage { border: 3px solid #2b2133; border-radius: 8px; overflow: hidden; background: #5cb6e0; }
.fish-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; touch-action: none; }
.fish-meters { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; margin: 8px 0 4px; }
.meter-label { font-size: 12px; }
.ten-bar, .prog-bar { position: relative; height: 14px; border: 2px solid #2b2133; border-radius: 4px; background: #f3e9df; overflow: hidden; }
.ten-green { position: absolute; top: 0; bottom: 0; background: #b8e8b0; }
.ten-fill { position: absolute; left: 0; top: 3px; bottom: 3px; background: #4f8fd8; transition: width .05s linear; }
.ten-fill.hot { background: #ef5f6e; } .ten-fill.slack { background: #9aa7b4; }
.prog-fill { height: 100%; background: #f2c14e; width: 0; }
.fish-btn { width: 100%; margin-top: 6px; user-select: none; -webkit-user-select: none; touch-action: none; }
.fish-btn.hook { background: #ef8a6f; } .fish-btn.reel { background: #9be0ad; }
.fish-btn.reel:active { transform: translateY(2px); }
.fish-rod { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 6px; color: #6b5f78; }
.fish-result { display: flex; gap: 12px; align-items: center; margin: 6px 0; padding: 6px 10px; border: 2px solid #2b2133; border-radius: 8px; background: #fffdf7; }
.fish-big { width: 72px; image-rendering: pixelated; }

/* 手機連點不跳出選取／複製選單；只有輸入框可以選字 */
button, .btn, .chip, .bag-cell, .fish-stage { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.fish-auto { width: 100%; margin-top: 6px; }
.fish-auto.on { background: #c9e9ff; }
.auto-bar { margin-top: 6px; height: 10px; }
.auto-log { font-size: 13px; margin-top: 4px; }
.coffee-box { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 8px; border: 2px solid #2b2133; border-radius: 6px; background: #fffaf0; }
.coffee-toggle { display: flex; align-items: center; gap: 4px; font-size: 14px; white-space: nowrap; }
.coffee-toggle input { width: 18px; height: 18px; }
.fish-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fish-row .fish-rod { margin-top: 0; }
.fish-bait.on { background: #ffe0ea; }
.boost-line { color: #b8870f; font-size: 13px; }
/* ── 咖啡農園 ── */
.farm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 8px 0; }
.farm-plot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 2px solid #2b2133; border-radius: 8px; background: #f3e4d0; font-family: inherit; font-size: 13px; min-width: 0; }
.farm-plot img { width: 48px; height: auto; image-rendering: pixelated; }
.farm-plot.empty { background: #efe6d2; border-style: dashed; cursor: pointer; }
.farm-plot.s3 { background: #ffe6e6; }
.farm-plot small { font-size: 11px; color: #6b5f78; }
.grow-bar { width: 80%; height: 6px; border: 1px solid #2b2133; border-radius: 3px; background: #fff; overflow: hidden; }
.grow-bar div { height: 100%; background: #6dbb6a; }
.farm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .farm-btns { grid-template-columns: 1fr; } }
/* ── 港邊小館、佈告欄 ── */
.cook-pan { display: flex; align-items: center; gap: 10px; padding: 8px; border: 2px solid #2b2133; border-radius: 8px; background: #fff3e0; margin: 6px 0; }
.cook-pan .cook-emoji { font-size: 28px; animation: cook-shake .25s infinite alternate; }
.cook-pan .grow-bar { flex: 1; height: 10px; }
@keyframes cook-shake { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.quest-list { display: grid; gap: 8px; margin: 8px 0; }
.quest-row { display: flex; align-items: center; gap: 8px; padding: 8px; border: 2px solid #2b2133; border-radius: 8px; background: #fffdf7; }
.quest-row .grow-bar { width: 100%; height: 8px; margin: 4px 0; }
.quest-row.done { background: #fff3c4; } .quest-row.claimed { background: #eaf8e6; opacity: .85; } .quest-row.bonus { border-style: dashed; }
.link-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid #2b2133; border-radius: 6px; background: #fffdf7; }
.link-row .ok { color: #3a8048; }

/* Offline fishing: compact scrollable catch box on phones. */
.offline-fishing-box{margin-top:14px;padding:12px;border:2px solid #2b2133;border-radius:8px;background:#fff9e8;max-height:300px;overflow-y:auto}
.offline-fishing-box .chips{margin:8px 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.offline-fishing-box .chip{white-space:normal;min-height:36px;font-size:13px}

/* Make guest account limitations readable before starting. */
.guest-mode-notice{margin:0;padding:5px 10px;max-width:100%;font-size:12px;line-height:1.5;text-align:center;color:#fff2d6;background:rgba(43,33,51,.82);border:1px solid rgba(255,242,214,.35);border-radius:5px}

/* V0.15 paper doll: exactly the same 52px square cell as inventory items. */
.paper-slots{display:grid;grid-template-columns:repeat(3,52px);justify-content:center;gap:7px 5px}
.paper-slot-wrap{width:52px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.paper-slot{width:52px;height:52px;min-width:52px;max-width:52px;flex:0 0 52px;aspect-ratio:1;cursor:pointer}
.paper-slot-icon{font-size:25px;line-height:1}
.paper-slot-placeholder{font-size:18px;opacity:.42;line-height:1}
.paper-slot-caption{width:100%;font-size:9px;line-height:1.25;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}


/* V0.15: touch and keyboard accessible inventory-to-offer selection. */
.trade-offer-icons,.trade-picker-bag,.trade-picker-drop{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
.trade-offer-item,.trade-picker-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:72px;min-height:88px;border:2px solid #ba9e7b;border-radius:8px;background:#f8efdf;color:#473b36;padding:5px;font:inherit}
.trade-picker-cell{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.trade-picker-cell.selected{background:#e6f2d4;box-shadow:inset 0 0 0 2px #80a266}
.trade-picker-cell small,.trade-offer-item small{font-size:11px;line-height:1.2;overflow-wrap:anywhere}
.trade-picker-bag{max-height:230px;overflow-y:auto;align-content:flex-start;padding:12px}
.trade-picker-drop{min-height:106px;border:2px dashed #ba9e7b;border-radius:10px;padding:10px;margin-bottom:10px}
.trade-picker-drop.drag-over{background:#ecf8d7;border-color:#648c42}
.trade-picker-detail{display:flex;flex-direction:column;gap:7px;min-height:80px;padding:8px 0}
.trade-quantity{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.trade-quantity input{width:75px;min-width:0}
.trade-drag-ghost{position:fixed;z-index:10000;pointer-events:none;opacity:.85;transform:translate(-50%,-50%);width:64px}
.trade-picker-cell:focus-visible{outline:3px solid #3468a1;outline-offset:2px}
.gm-wealth-sum { font-size: 13px; margin: 6px 0; color: #b8870f; }
.gm-wealth-scroll { max-height: 320px; overflow: auto; border: 2px solid #2b2133; border-radius: 6px; background: #fff; }
.gm-wealth-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gm-wealth-table th, .gm-wealth-table td { padding: 4px 6px; border-bottom: 1px dashed rgba(43,33,51,.2); text-align: left; white-space: nowrap; }
.gm-wealth-table th { position: sticky; top: 0; background: #f6ecd8; cursor: pointer; }
.gm-wealth-table th.on { color: #7b4bb3; }
.gm-wealth-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.gm-wealth-table .strong { color: #b8870f; }

/* ── 個人倉庫 ── */
.st-head { display: flex; gap: 6px; align-items: baseline; margin-bottom: 6px; }
.st-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.st-tabs .st-lock { opacity: .5; }
.st-tabs .st-buy { background: #fff3c4; }
.st-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
.bag-cell.st-sel { outline: 3px solid #f2c14e; outline-offset: 1px; }
.st-detail { display: grid; gap: 6px; padding: 8px; margin: 6px 0; border: 2px dashed rgba(43,33,51,.25); border-radius: 8px; min-height: 44px; }
.st-info { display: flex; align-items: center; gap: 6px; }
.st-custom { display: flex; gap: 6px; align-items: center; }
.st-qty { width: 90px; }

/* ── 背包：欄位選擇器、分類、排序、縮小固定列 ── */
.paper-slot.picking { outline: 3px solid #f2c14e; outline-offset: 1px; }
.slot-picker { border: 2px solid #2b2133; border-radius: 8px; background: #fffdf7; padding: 8px; margin: 4px 0 8px; }
.slot-picker-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.slot-picker-head button { margin-left: auto; }
.slot-picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; }
.slot-pick { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "ico name" "ico act"; align-items: center; gap: 0 6px; text-align: left; padding: 4px 6px; border: 2px solid #2b2133; border-radius: 6px; font-family: inherit; cursor: pointer; }
.slot-pick .item-ico { grid-area: ico; }
.slot-pick-name { grid-area: name; font-size: 13px; }
.slot-pick-act { grid-area: act; font-size: 11px; color: #6b5f78; }
.slot-pick.worn { box-shadow: inset 0 0 0 2px #f2c14e; }
.slot-pick.worn .slot-pick-act { color: #b8870f; }
.inv-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 4px; }
.inv-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 12px; }
.inv-sort .chip.small { padding: 2px 8px; font-size: 12px; }
.inv-empty { grid-column: 1 / -1; text-align: center; padding: 12px 0; }
.inv-sticky { position: sticky; top: -1px; z-index: 5; display: flex; align-items: center; gap: 5px; padding: 5px 6px; margin: -4px -4px 6px; background: #fff3c4; border: 2px solid #2b2133; border-radius: 8px; box-shadow: 0 3px 0 rgba(43,33,51,.15); }
.inv-sticky[hidden] { display: none; }
.inv-sticky-label { font-size: 12px; margin-right: 2px; }
.inv-sticky-slot { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; border: 2px solid #2b2133; border-radius: 6px; background: #fffdf7; cursor: pointer; }
.farm-estimate { font-size: 13px; color: #6b4f1d; background: #fff3c4; border: 2px solid #e2c06a; border-radius: 6px; padding: 4px 8px; margin: 4px 0 8px; }
.farm-expand { margin-top: 8px; text-align: center; }
.gm-deduct { border-top: 2px dashed rgba(216,65,79,.35); padding-top: 8px; }
.gm-bal.minus { color: #d8414f; }
.btn.danger { background: #f6c7c9; }
/* ── 丟棄／整理模式 ── */
.inv-batch { border: 2px solid #d8414f; border-radius: 8px; background: #fff5f5; padding: 6px; margin: 6px 0; display: grid; gap: 6px; }
.inv-batch[hidden] { display: none; }
.inv-batch-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.inv-batch-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; }
.bag-cell.picked { outline: 3px solid #d8414f; outline-offset: 1px; }
.bag-cell.locked { opacity: .45; }
.bag-cell .pick-mark { position: absolute; left: 2px; bottom: 1px; background: #d8414f; color: #fff; border-radius: 4px; font-size: 10px; padding: 0 3px; }
.inv-tidy.on { background: #f6c7c9; }
.inv-discard { margin-top: 6px; font-size: 13px; }
.inv-discard summary { cursor: pointer; color: #b0343f; }
.inv-discard .chips { align-items: center; margin-top: 4px; }
.inv-discard-qty { width: 72px; }
/* ── 遊戲會館／拉霸 ── */
.slot-pool { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; padding: 8px; margin-bottom: 10px; border-radius: 10px; background: linear-gradient(#5b2a4a, #3a1f36); color: #fff3c4; border: 2px solid #ffd84a; text-align: center; }
.slot-pool b { font-size: 24px; color: #ffd84a; text-shadow: 0 2px 0 #7a2a2a; }
.slot-pool small { width: 100%; font-size: 11px; opacity: .85; }
.slot-machine { display: flex; justify-content: center; gap: 8px; padding: 12px; margin: 6px auto 10px; max-width: 320px; background: #c92c3c; border: 3px solid #2b2133; border-radius: 12px; box-shadow: inset 0 -4px 0 #8a1e2a; }
.slot-reel { width: 76px; height: 76px; background: #fffaf0; border: 3px solid #2b2133; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.slot-reel img { width: 56px; height: 56px; image-rendering: pixelated; }
.slot-reel.spin img { filter: blur(1px); transform: translateY(2px); }
.slot-spin { display: block; margin: 8px auto; min-width: 200px; }
.slot-recent { text-align: center; font-size: 12px; margin-top: 4px; }
.slot-pay td { padding: 2px 8px; } .slot-pay img { width: 20px; height: 20px; image-rendering: pixelated; vertical-align: middle; }
/* 選取中的 chip（頁籤、排序、押注等共用） */
.chip.on { background: #ffd166; box-shadow: 0 0 0 3px #2b2133, inset 0 -2px 0 #e0a92e; font-weight: bold; }
/* ── 吹牛骰 ── */
.liar-tables { display: grid; gap: 6px; }
.liar-table-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 2px solid #2b2133; border-radius: 8px; background: #fffdf7; }
.liar-names { font-size: 12px; }
.liar-head { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 14px; margin-bottom: 6px; }
.liar-wild { color: #2f7a4a; } .liar-wild.off { color: #b0343f; }
.liar-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 8px; }
.liar-seat { display: grid; gap: 2px; padding: 6px; border: 2px solid #2b2133; border-radius: 8px; background: #fffdf7; text-align: center; font-size: 13px; }
.liar-seat.turn { background: #fff3c4; box-shadow: 0 0 0 3px #f2c14e; }
.liar-seat.me { border-color: #4f8fd8; }
.liar-seat.left { opacity: .45; }
.liar-clock { text-align: center; font-size: 15px; margin: 4px 0; }
.liar-clock.urgent { color: #d8414f; font-weight: bold; }
.liar-bid { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 18px; margin: 6px 0; min-height: 40px; }
.liar-die { width: 32px; height: 32px; image-rendering: pixelated; }
.liar-die.big { width: 40px; height: 40px; }
.liar-die.mine { width: 44px; height: 44px; }
.liar-die.miss { opacity: .35; }
.liar-die.hit { filter: drop-shadow(0 0 3px #f2c14e); }
.liar-mine { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.liar-controls { display: grid; gap: 8px; padding: 8px; border: 2px dashed rgba(43,33,51,.3); border-radius: 8px; }
.liar-qty { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 18px; }
.liar-faces { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.liar-face { padding: 2px; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; }
.liar-face.on { border-color: #f2c14e; background: #fff3c4; }
.liar-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.liar-history { font-size: 12px; margin: 6px 0; }
.liar-reveal { display: grid; gap: 4px; margin: 6px 0; }
.liar-reveal-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .liar-reveal-row b { min-width: 70px; font-size: 13px; }
.liar .btn.small { margin-top: 10px; }
.slot-auto { justify-content: center; align-items: center; margin: 4px 0; }
/* ── 猜拳決鬥浮動卡 ── */
.rps-float { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; width: min(340px, calc(100vw - 20px)); padding: 10px 12px; background: #fffdf7; border: 3px solid #2b2133; border-radius: 12px; box-shadow: 0 6px 0 rgba(43,33,51,.25); text-align: center; font-size: 14px; }
.rps-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.rps-score { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 15px; } .rps-score b { font-size: 24px; }
.rps-reveal { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 4px 0; font-size: 15px; }
.rps-reveal.win { color: #2f7a4a; } .rps-reveal.lose { color: #b0343f; }
.rps-hand { font-size: 30px; }
.rps-btns { display: flex; justify-content: center; gap: 10px; margin: 6px 0; }
.rps-pick { font-size: 34px; width: 64px; height: 64px; border: 3px solid #2b2133; border-radius: 12px; background: #fff3c4; cursor: pointer; box-shadow: 0 3px 0 #2b2133; }
.rps-pick:active { transform: translateY(2px); box-shadow: 0 1px 0 #2b2133; }
.rps-clock { font-size: 13px; color: #6b5f78; } .rps-clock.urgent { color: #d8414f; font-weight: bold; }
.rps-round { font-size: 12px; }
/* ── 釣魚大賽 ── */
.contest-banner { display: grid; gap: 2px; text-align: center; padding: 10px; border-radius: 10px; border: 2px solid #2b2133; background: #e8f4ff; margin-bottom: 8px; }
.contest-banner.live { background: #fff3c4; box-shadow: 0 0 0 3px #f2c14e; }
.contest-banner b { font-size: 17px; }
.contest-info { text-align: center; font-size: 13px; margin-bottom: 8px; }
.contest-joined { display: block; text-align: center; margin: 6px 0; }
.contest-board { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.contest-board th, .contest-board td { padding: 4px 6px; border-bottom: 1px dashed rgba(43,33,51,.2); text-align: left; }
.contest-board tr.me { background: #fff3c4; font-weight: bold; }
.contest-last { font-size: 12px; margin-top: 6px; }
.contest-hud { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: min(52vw, 420px); z-index: 30; padding: 4px 10px; border: 2px solid #2b2133; border-radius: 8px; background: #fff3c4; font-size: 13px; font-weight: 800; text-align: center; pointer-events: none; font-variant-numeric: tabular-nums; }
.contest-hud[hidden] { display: none; }
button.contest-hud { font-family: inherit; color: #2b2133; }
.contest-hud.tap { pointer-events: auto; cursor: pointer; animation: hudPulse 1.2s ease-in-out infinite; }
@keyframes hudPulse { 50% { background: #ffe07a; } }
.rpscup-hud { top: calc(44px + env(safe-area-inset-top)); pointer-events: auto; cursor: pointer; background: #ffe0d0; color: #2b2133; font-family: inherit; }
.rpscup-prize { display: flex; align-items: center; gap: 8px; justify-content: center; font-weight: 800; margin-bottom: 6px; }
.rpscup-prize .item-ico { width: 40px; height: 40px; }
.rpscup-names { margin: 6px 0; font-size: 13px; }
.rpscup-bracket { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.rpscup-match { display: flex; align-items: center; gap: 6px; padding: 5px 8px; margin: 3px 0; border: 2px solid #2b2133; border-radius: 8px; background: #fffdf7; }
.rpscup-match.live { background: #fff3c4; }
.rpscup-p { flex: 1; display: flex; justify-content: space-between; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpscup-p.win { font-weight: 800; color: #1a7a3a; }
.rpscup-p.lose { opacity: .5; text-decoration: line-through; }
.rpscup-p.me { text-decoration-color: #c8282e; color: #c8282e; }
.rpscup-p.win.me { color: #c8282e; }
.rpscup-vs { flex: 0 0 auto; font-size: 12px; color: #6a5a7a; }
.beach-hud { position: fixed; top: calc(44px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: min(70vw, 460px); z-index: 30; padding: 3px 10px; border: 2px solid #0a3a5a; border-radius: 8px; background: #d8f4ff; color: #0a3a5a; font-size: 12px; font-weight: 800; text-align: center; pointer-events: none; font-variant-numeric: tabular-nums; }
.beach-hud[hidden] { display: none; }
.bbq-btns { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.beach-contest-wrap > summary { font-weight: 800; }

/* ── 麻將 ── */
.mj-tile { display: inline-block; image-rendering: auto; user-select: none; -webkit-user-drag: none; vertical-align: bottom; }
.mj-tile.hand { width: calc((100% - 6px) / 17.6); max-width: 30px; min-width: 18px; height: auto; transition: transform .1s; }
.mj-tile.small { width: 20px; height: 27px; }
.mj-tile.tiny { width: 15px; height: 20px; }
.mj-tile.tap { cursor: pointer; }
.mj-tile.sel { transform: translateY(-8px); filter: drop-shadow(0 2px 0 #ffd166); }
.mj-tile.hot { filter: drop-shadow(0 0 0 #ff5d6c) drop-shadow(0 0 2px #ff5d6c); }
.mj-info { display: flex; justify-content: space-between; font-size: 13px; margin: 2px 0 4px; }
.mj-others { display: grid; gap: 4px; }
.mj-player { background: rgba(255,255,255,.55); border: 2px solid var(--ink, #2b2133); border-radius: 8px; padding: 3px 5px; }
.mj-player.turn { background: #fff3c4; }
.mj-player.me { margin-top: 4px; background: #eaf7ee; }
.mj-player.me.turn { background: #fff3c4; }
.mj-pname { display: flex; align-items: center; gap: 4px; font-size: 12px; flex-wrap: wrap; }
.mj-wind { display: inline-grid; place-items: center; width: 18px; height: 18px; background: var(--ink, #2b2133); color: #fff; border-radius: 4px; font-size: 11px; }
.mj-dealer { background: #d8414f; color: #fff; border-radius: 4px; padding: 0 4px; font-size: 11px; }
.mj-total { margin-left: auto; font-size: 12px; }
.mj-total.up { color: #2f8a4c; } .mj-total.down { color: #c8333a; }
.mj-flowers { display: inline-flex; gap: 1px; }
.mj-melds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.mj-meld { display: inline-flex; gap: 0; }
.mj-river { display: flex; flex-wrap: wrap; gap: 1px; min-height: 20px; margin-top: 2px; }
.mj-claim { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; margin: 6px 0 2px; padding: 4px; background: #fff; border: 2px dashed #d8414f; border-radius: 8px; }
.mj-hand { display: flex; align-items: flex-end; justify-content: center; padding: 12px 0 4px; min-height: 52px; }
.mj-gap { width: 6px; flex: none; }
.mj-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.mj-actions .btn { flex: 1 1 auto; }
.mj-hu { background: #d8414f !important; color: #fff !important; }
.mj-chi { display: inline-flex; align-items: center; gap: 1px; }
.mj-log { font-size: 12px; text-align: center; margin-top: 4px; }
.mj-cfg { display: flex; gap: 10px; justify-content: center; margin: 6px 0; }
.mj-cfg label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.mj-num { width: 92px; padding: 6px; font: inherit; border: 2px solid var(--ink, #2b2133); border-radius: 6px; background: #fff; }
.mj-result { margin-top: 4px; }
.mj-items { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 4px 0 8px; }
.mj-reveal { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: flex-end; margin-bottom: 8px; }

/* 觀戰 */
.gt-row-btns { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.gt-watch-banner { background: #e7f0ff; border: 2px dashed #2f5fa8; border-radius: 8px; padding: 4px 8px; font-size: 12px; text-align: center; margin-bottom: 4px; }
.gt-watchers { font-size: 12px; }
.b2-seats.four { grid-template-columns: repeat(2, 1fr); }
.casino-status { text-align: center; font-size: 12px; margin: -2px 0 6px; }
.casino-status.full { color: #c8333a; font-weight: bold; }

/* 賭場競賽 */
.casino-bar { background: #fff7e0; border: 2px solid var(--ink, #2b2133); border-radius: 10px; padding: 8px; margin-bottom: 8px; display: grid; gap: 6px; }
.casino-bar.compact { display: flex; align-items: center; gap: 8px; padding: 4px 8px; margin: 0; flex-wrap: wrap; }
.casino-bar.compact .btn { padding: 4px 10px; }
.casino-head { display: flex; justify-content: space-between; align-items: baseline; }
.casino-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.casino-stats > div { background: #fff; border-radius: 8px; padding: 4px; display: grid; }
.casino-stats small { font-size: 11px; color: #7a6f86; }
.casino-stats b { font-size: 16px; }
.casino-board { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13px; }
.casino-board li { display: flex; justify-content: space-between; padding: 2px 6px; border-radius: 4px; }
.casino-board li.me { background: #ffe9a8; }
.casino-last { font-size: 12px; margin: 0; }
.arcade-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }

/* admin 商品價格 */
.gm-prices { display: grid; gap: 6px; }
.gm-price-group summary { font-weight: bold; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.gm-price-row { display: grid; grid-template-columns: 1fr 96px auto auto; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px dashed rgba(43,33,51,.2); }
.gm-price-row.changed { background: #fff3c4; }
.gm-price-row .bet-input { width: 100%; padding: 4px 6px; }
.gm-price-name { display: grid; }
.gm-price-row .btn { padding: 4px 10px; font-size: 13px; min-height: 0; }
@media (max-width: 480px) { .gm-price-row { grid-template-columns: 1fr auto auto; } .gm-price-name { grid-column: 1 / -1; } }

/* 村莊建設捐款 */
.donate { display: grid; gap: 8px; }
.donate-hero { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
.donate-q { width: 64px; height: 64px; display: grid; place-items: center; font-size: 36px; font-weight: bold; color: #fffaf0; background: linear-gradient(135deg, #2f5fa8, #7b4bb3); border: 3px solid var(--ink, #2b2133); border-radius: 12px; }
.donate-hero p { margin: 2px 0 0; font-size: 13px; }
.donate-bar { position: relative; height: 26px; background: #efe6d2; border: 2px solid var(--ink, #2b2133); border-radius: 13px; overflow: hidden; }
.donate-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #f2c14e, #ffe08a); }
.donate-bar span { position: relative; display: block; text-align: center; line-height: 22px; font-size: 13px; font-weight: bold; }
.donate-form { display: grid; gap: 6px; }

/* 神秘新區域：海灘 */
.beach-shop { display: grid; gap: 8px; }
.beach-shop .sec-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.beach-buff { color: #2c8a5a; font-size: 13px; font-weight: bold; }
.beach-codex { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.beach-card { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; background: #fff8e8; border: 2px solid #e3c788; border-radius: 8px; text-align: center; }
.beach-card b { font-size: 13px; }
.beach-card small { color: #8a7a6a; font-size: 11px; }
.beach-card.unknown { background: #eee8dc; border-color: #cfc6b4; color: #9a8f80; }
.beach-emoji { font-size: 26px; line-height: 1.1; }
.monument-text { text-align: center; line-height: 1.6; }
.monument-board li:nth-child(-n+3) b { color: #c98f2c; }

/* 製作工坊 */
.craft-entry { width: 100%; margin-bottom: 12px; font-size: 16px; }
.craft-card { background: var(--paper-2, #f6ead2); border: 3px solid var(--ink, #3b2b3a); border-radius: 8px; padding: 10px; margin: 10px 0; }
.craft-head { display: flex; gap: 10px; align-items: flex-start; }
.craft-emoji { font-size: 30px; line-height: 1; }
.craft-rar { font-size: 13px; font-weight: bold; }
.craft-note { font-size: 13px; margin: 6px 0; color: #6b4f2a; }
.craft-ins { display: grid; gap: 4px; margin: 8px 0; }
.craft-in { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 6px; font-size: 14px; color: #a2453f; }
.craft-in.ok { color: #2f7a46; }
.craft-in .item-ico { width: 28px; height: 28px; }
.craft-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.craft-buffs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; font-size: 14px; }

/* 效果剩餘時間（HUD 左上） */
.buff-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; max-width: 60vw; }
.buff-bar:empty { display: none; }
.buff-chip { background: #2b2235d9; color: #fff2c6; border: 2px solid #f4cd74; border-radius: 6px; padding: 2px 6px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.buff-chip.ending { border-color: #ff8a7a; color: #ffd0c8; }

/* 擺攤 */
.market-entry { margin: 4px 0 8px; }
.market-status { padding: 8px 10px; border: 3px solid var(--ink, #3b2b3a); border-radius: 8px; background: #fff4d6; margin-bottom: 8px; font-weight: 800; }
.market-status.on { background: #e9f7dc; }
.market-h { margin: 14px 0 6px; font-size: 16px; }
.market-pick { border: 3px dashed #c99a4f; border-radius: 8px; padding: 8px; margin: 6px 0; background: #fffaf0; }
.market-pick-in { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0; font-size: 14px; }

/* 佈告欄・玩家收購／每週排行 */
.wanted-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.wanted-sel { width: auto; min-width: 90px; padding: 4px 6px; font-size: 15px; }
.weekly-claim { width: 100%; margin: 6px 0; }

/* 稱號 */
.title-badge-canvas { display: inline-block; vertical-align: middle; image-rendering: auto; }
.title-now { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 3px solid var(--ink, #3b2b3a); border-radius: 8px; background: #fff4d6; }
.title-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 8px; margin: 6px 0; border: 3px solid #d8c4a0; border-radius: 8px; background: #fffaf0; }
.title-row.on { border-color: #f0b93a; background: #fff3c8; }
.title-row .craft-btns { grid-row: 1 / span 2; grid-column: 2; }
.title-preview { display: flex; justify-content: center; margin: 12px 0; min-height: 40px; }
.title-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin-bottom: 12px; }
.title-swatch { background: #2b2235; border: 3px solid transparent; border-radius: 8px; padding: 6px 2px; cursor: pointer; display: flex; justify-content: center; }
.title-swatch.selected { border-color: #ffd66e; background: #4a3a5c; }

/* 釣魚大賽最後 10 秒倒數 */
.contest-big { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 950; font-size: 120px; font-weight: 900; color: #fff3a8; text-shadow: 0 6px 0 #2b2133, 0 0 24px rgba(255, 200, 60, .8); pointer-events: none; }
.contest-big[hidden] { display: none; }
.contest-big.pop { animation: contest-pop .9s ease-out; }
@keyframes contest-pop { 0% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.92); opacity: .6; } }

/* 抖內開發者 */
.dev-donate-qr { display: flex; justify-content: center; margin: 8px 0; }
.dev-donate-qr img { width: min(300px, 80vw); border-radius: 10px; border: 3px solid var(--ink, #3b2b3a); background: #fff; }
.dev-donate-acct { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 6px 0 10px; font-size: 16px; }

/* 附近語音 */
.voice-btn { font-size: 18px; width: auto; min-width: 46px; padding: 0 6px; }
.voice-btn.on { background: #c8f5d2; box-shadow: 0 0 0 3px var(--ink), inset 0 -3px 0 #6fc98a; }
.voice-ptt { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 100px); z-index: 40; padding: 12px 14px; border: 3px solid var(--ink, #2b2133); border-radius: 999px; background: #fff3c4; color: #2b2133; font-weight: 900; font-size: 15px; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 5px 0 rgba(0,0,0,.3); }
.voice-ptt.talking { background: #7be08f; transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 0 4px rgba(123,224,143,.5); }
.voice-ptt[hidden] { display: none; }
.dev-donate-note { border: 3px dashed #e0a030; border-radius: 10px; background: #fff6d6; padding: 8px 10px; margin: 8px 0; display: grid; gap: 4px; }
.voice-diag { margin: 10px 0; font-size: 12px; } .voice-diag pre { white-space: pre-wrap; word-break: break-all; background: #2b2235; color: #e8f0d8; padding: 8px; border-radius: 6px; max-height: 260px; overflow: auto; user-select: text; -webkit-user-select: text; }

/* ── 房屋：屋主工具列 ── */
.house-bar { position: fixed; bottom: calc(92px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 25; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; width: max-content; max-width: calc(100vw - 32px); padding: 5px 8px; border: 2px solid #2b2133; border-radius: 10px; background: rgba(255, 248, 236, 0.94); }
.house-bar[hidden], body:not(.playing) .house-bar, body.panel-open .house-bar { display: none; }
.house-bar .btn { width: auto; flex: 0 0 auto; margin: 0; }
.house-bar-tip { flex-basis: 100%; text-align: center; font-size: 12px; font-weight: 700; color: #5a4a66; }
.house-size-ico { font-size: 28px; width: 40px; text-align: center; }

/* ── 新手引導 ── */
.tut-card { position: fixed; bottom: calc(92px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 24; width: min(360px, calc(100vw - 32px)); padding: 7px 10px 8px; border: 2px solid #2b2133; border-radius: 10px; background: rgba(255, 243, 196, 0.96); box-shadow: 0 3px 0 rgba(43, 33, 51, 0.35); pointer-events: none; } /* 不擋搖桿 */
.tut-card[hidden], .tut-card.away, body:not(.playing) .tut-card, body.panel-open .tut-card { display: none; }
.tut-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: #6a4a2a; }
.tut-skip { pointer-events: auto; border: 1px solid #8a7a6a; border-radius: 6px; background: #fffaf0; padding: 2px 8px; font: inherit; font-size: 11px; color: #5a4a66; cursor: pointer; }
.tut-text { margin-top: 4px; font-size: 15px; line-height: 1.45; color: #2b2133; font-weight: 700; }
.tut-card { border-width: 3px; }
.tut-card.pop { animation: tutPop .9s ease-out 1; }
@keyframes tutPop { 0% { transform: translateX(-50%) scale(1.08); background: #ffe07a; } 100% { transform: translateX(-50%) scale(1); } }
.tut-back { margin-top: 6px; padding: 4px 8px; border-radius: 6px; background: #fff3c4; font-size: 14px; font-weight: 700; color: #6a4a00; }
.tut-skip.confirm { background: #ffd6cf; border-color: #c8282e; color: #a01818; font-weight: 800; }
.casino-tip { position: fixed; top: calc(70px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 90; width: min(340px, calc(100vw - 32px)); padding: 10px 12px; border: 3px solid #2b2133; border-radius: 10px; background: #e8ffd8; box-shadow: 0 4px 0 rgba(43,33,51,.3); cursor: pointer; transition: opacity .3s; }
.casino-tip p { margin: 4px 0; font-size: 14px; line-height: 1.45; }
.casino-tip small { color: #6a5a7a; }
.casino-tip.out { opacity: 0; }

/* ── 選單：常用功能兩欄 ── */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.menu-grid .menu-btn { font-size: 18px; padding: 10px 6px; }
@media (max-height: 720px) { .menu-grid .menu-btn { font-size: 16px; padding: 7px 4px; } }
.gm-tabs { flex-wrap: wrap; gap: 8px; }
.gm-tabs button { font-size: 15px; padding: 6px 10px; }
.tut-reward { margin-top: 3px; font-size: 11px; color: #8a5a20; }

/* ── 關係系統 ── */
.rel-card { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; }
.rel-card:empty { display: none; }
.rel-line { font-weight: 700; color: #a02a5e; }
.rel-row { border: 2px solid #2b2133; border-radius: 8px; background: #fffaf3; padding: 8px 10px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.rel-row .btn { align-self: flex-end; }
.rel-row-head { display: flex; justify-content: space-between; align-items: center; }
.rel-bar { height: 8px; border: 2px solid #2b2133; border-radius: 6px; background: #f3e6ea; overflow: hidden; }
.rel-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff9cc8, #ff5a9a); }
.rel-help ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.rel-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rel-acts .btn { width: auto; }
.cook-all { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .cook-all .btn { font-size: 16px; }

/* ── 每日簽到 ── */
.daily-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 8px 0 12px; }
.daily-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 2px solid #2b2133; border-radius: 6px; background: #fffaf0; font-size: 11px; }
.daily-day b { font-size: 12px; }
.daily-day span { min-height: 14px; }
.daily-day.done { background: #e4f4dc; color: #4a7a3a; }
.daily-day.today { background: #ffe08a; box-shadow: 0 0 0 2px #ffb800; }
/* 收到告白／邀請的視窗 */
.rel-invite-title { font-size: 20px; font-weight: bold; text-align: center; margin: 10px 0 4px; color: #c2185b; }
.rel-invite-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 10px; }
/* 套裝說明 */
.set-box { margin: 8px 0; padding: 8px 10px; border: 2px solid #e8433a; border-radius: 8px; background: #fff3f0; font-size: 13px; line-height: 1.6; color: #5a3a3a; }
.set-box b { color: #c62828; }
.set-box.on { background: linear-gradient(#fff6e0, #ffe8d8); box-shadow: 0 0 0 2px #ffd06a inset; }
.set-pieces { display: flex; flex-wrap: wrap; gap: 2px 10px; color: #9a8a8a; }
.set-pieces .worn { color: #2e7d32; font-weight: bold; }
.set-eff-h { margin-top: 4px; font-weight: bold; }
.set-box:not(.on) .set-eff { color: #9a8a8a; }
/* 聊天紀錄裡的廣播 */
.chat-line.sys { background: rgba(120,70,20,.78); color: #fff3d0; }
.chat-line.sys b { color: #ffd36a; font-weight: bold; }
/* 打工升級：等級列、尖峰標示、連擊、特調／貴賓訂單、幫廚 */
.work-level { margin: 8px 0; padding: 8px 10px; border: 2px solid #e0c48a; border-radius: 8px; background: #fffaf0; text-align: left; }
.work-level-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.work-level-perk { font-size: 12px; margin-top: 2px; }
.rush-badge { margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; background: linear-gradient(90deg, #ff7a3a, #ffb03a); color: #fff; font-weight: bold; text-align: center; animation: rush-pulse 1.2s ease-in-out infinite; }
@keyframes rush-pulse { 50% { filter: brightness(1.15); } }
.combo-hot { color: #ff7a3a; font-weight: bold; }
.order-name.special { color: #c2185b; font-weight: bold; }
.level-up { color: #c2185b; font-weight: bold; }
.kitchen-btns { grid-template-columns: repeat(4, 1fr); }
.act-ico { font-size: 22px; line-height: 1; }
.kitchen-dish { display: flex; align-items: center; justify-content: center; min-width: 64px; }
.kitchen-dish-img { width: 56px; height: 56px; image-rendering: pixelated; }
.kitchen-dish-img.cooking { animation: rush-pulse .5s ease-in-out infinite; }

.coin-ico.sm { width: 14px; height: 14px; vertical-align: -3px; }

/* ── 德州撲克 ── */
.poker { display: grid; gap: 6px; }
.pk-felt { position: relative; width: 100%; max-width: 640px; margin: 4px auto 0; aspect-ratio: 16 / 11; border-radius: 48% / 46%;
  background: radial-gradient(ellipse at 50% 45%, #3f9a63 0%, #2c7a4c 60%, #22603c 100%); border: 10px solid #7a4a2c; box-shadow: inset 0 0 0 3px #a8703f, inset 0 4px 18px rgba(0,0,0,.35), 0 4px 0 #2b2133; }
.pk-center { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; }
.pk-pot { color: #fff3c4; font-weight: bold; font-size: 14px; text-shadow: 0 1px 0 rgba(0,0,0,.5); min-height: 18px; }
.pk-board { display: flex; gap: 4px; }
.pk-card { position: relative; width: 36px; height: 50px; background: #fffdf7; border: 2px solid #2b2133; border-radius: 5px; color: #2b2133;
  display: flex; flex-direction: column; align-items: flex-start; padding: 3px 0 0 4px; line-height: 1; font-weight: bold; box-shadow: 0 2px 0 rgba(43,33,51,.3); }
.pk-card.red { color: #d8414f; }
.pk-card .pk-r { font-size: 14px; } .pk-card .pk-s { font-size: 15px; }
.pk-card.back { background: repeating-linear-gradient(45deg, #b23a48 0 4px, #8f2a37 4px 8px); border-color: #fffdf7; outline: 2px solid #2b2133; outline-offset: -4px; }
.pk-card.slot { background: rgba(255,255,255,.08); border: 2px dashed rgba(255,255,255,.3); box-shadow: none; }
.pk-card.hit { background: #fff3c4; border-color: #b8870f; }
.pk-card.sm { width: 24px; height: 34px; padding: 2px 0 0 3px; border-radius: 4px; }
.pk-card.sm .pk-r, .pk-card.sm .pk-s { font-size: 11px; }
.pk-card.lg { width: 50px; height: 70px; padding: 4px 0 0 6px; }
.pk-card.lg .pk-r, .pk-card.lg .pk-s { font-size: 20px; }
.pk-seat { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; z-index: 1; }
.pk-seat.empty span { padding: 4px 10px; border: 2px dashed rgba(255,255,255,.45); border-radius: 10px; color: rgba(255,255,255,.7); font-size: 12px; }
.pk-hole { display: flex; gap: 2px; }
.pk-plate { min-width: 78px; max-width: 110px; padding: 3px 6px; background: #2b2133; color: #f3ead8; border-radius: 8px; border: 2px solid #4b3b57; display: grid; justify-items: center; line-height: 1.2; position: relative; }
.pk-plate b { font-size: 12px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-stack { font-size: 12px; color: #f2c14e; }
.pk-status { font-size: 11px; color: #c9f0d4; }
.pk-seat.me .pk-plate { border-color: #f2c14e; }
.pk-seat.turn .pk-plate { border-color: #7fe0a0; box-shadow: 0 0 0 3px rgba(127,224,160,.45); }
.pk-seat.folded { opacity: .55; }
.pk-seat.win .pk-plate { border-color: #ffd34e; box-shadow: 0 0 0 3px rgba(255,211,78,.55); }
.pk-timer { width: 100%; height: 3px; background: rgba(255,255,255,.2); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.pk-timer > i { display: block; height: 100%; width: 100%; background: #7fe0a0; transition: width .25s linear; }
.pk-btn { position: absolute; right: -10px; top: -6px; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: bold; display: grid; place-items: center; border: 2px solid #2b2133; }
.pk-btn.d { background: #fffdf7; color: #2b2133; } .pk-btn.sb { background: #8ce0ff; } .pk-btn.bb { background: #f2c14e; }
.pk-seat .pk-btn.sb, .pk-seat .pk-btn.bb { left: -10px; right: auto; }
.pk-bet { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: bold; color: #fffdf7; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.pk-bet i { width: 12px; height: 12px; border-radius: 50%; background: #f2c14e; border: 2px dashed #b23a48; display: inline-block; }
.pk-clock { text-align: center; font-size: 14px; min-height: 18px; }
.pk-clock.urgent { color: #d8414f; font-weight: bold; }
.pk-mine { display: flex; justify-content: center; align-items: center; gap: 12px; }
.pk-mine.folded { opacity: .5; }
.pk-mine-info { display: grid; gap: 2px; }
.pk-mine-info b { font-size: 16px; }
.pk-controls { display: grid; gap: 6px; }
.pk-raise { display: grid; gap: 4px; justify-items: center; }
.pk-range-row { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px; }
.pk-range { flex: 1; accent-color: #b23a48; }
.pk-raise-amt { min-width: 64px; text-align: right; }
.pk-acts { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; }
.pk-note { text-align: center; font-size: 12px; }
.pk-foot { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 520px) {
  .pk-felt { aspect-ratio: 10 / 11; border-width: 7px; }
  .pk-plate { min-width: 64px; padding: 2px 4px; }
  .pk-plate b { font-size: 11px; max-width: 72px; }
  .pk-card.md { width: 30px; height: 42px; } .pk-card.md .pk-r, .pk-card.md .pk-s { font-size: 12px; }
}
.pk-raise .chips { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }

/* ── 扭蛋機 ── */
.gc-top { display: grid; gap: 8px; }
.gc-legends { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gc-legend { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 2px solid #2b2133; border-radius: 8px; background: linear-gradient(#fff3c4, #ffe08a); font-size: 12px; text-align: center; }
.gc-legend img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.gc-legend.owned { background: linear-gradient(#e6f7e0, #c9eebd); }
.gc-legend small { color: #2f7a4a; }
.gc-hint { text-align: center; font-size: 13px; margin: 0; }
.gc-pity { display: grid; gap: 3px; justify-items: center; font-size: 13px; }
.gc-pity-bar { width: 100%; max-width: 360px; height: 10px; border: 2px solid #2b2133; border-radius: 6px; background: #fffdf7; overflow: hidden; }
.gc-pity-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #b48cff, #ff9ad5, #ffd27a); }
.gc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gc-btns .coin-ico { vertical-align: -3px; }
.gc-results { display: grid; gap: 6px; }
.gc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.gc-cap { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border: 2px solid #2b2133; border-radius: 10px; background: linear-gradient(var(--cap) 0 42%, #fffdf7 42%); font-size: 11px; text-align: center; animation: gcPop .35s both; }
.gc-cap-ico { width: 40px; height: 40px; display: grid; place-items: center; background: #fffdf7; border: 2px solid #2b2133; border-radius: 50%; }
.gc-cap-ico img { max-width: 34px; max-height: 34px; image-rendering: pixelated; }
.gc-cap.big { background: linear-gradient(#ffd34e, #fff3c4); box-shadow: 0 0 0 3px rgba(255,211,78,.6); }
.gc-mount-ico { max-width: 36px !important; max-height: 36px !important; }
.gc-sum { text-align: center; font-size: 12px; }
.gc-table { display: grid; gap: 2px; }
.gc-row { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 4px; border-bottom: 1px dashed rgba(43,33,51,.2); }
@keyframes gcPop { from { opacity: 0; transform: translateY(-14px) scale(.8); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .gc-grid { grid-template-columns: repeat(5, 1fr); gap: 3px; } .gc-cap { font-size: 10px; } .gc-cap-ico { width: 32px; height: 32px; } .gc-legend img { width: 44px; height: 44px; } }

/* 傳送門淡入淡出 */
#portal-fade { position: fixed; inset: 0; background: radial-gradient(circle, #8ce0ff 0%, #6a4ab8 45%, #2b2133 100%); opacity: 0; pointer-events: none; transition: opacity .26s; z-index: 50; }
#portal-fade.on { opacity: 1; }

/* 銀行：其他服務 */
.bank-services .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.svc-btn { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border: 3px solid var(--ink); border-radius: 10px; background: #fffdf7; color: var(--ink); font-family: inherit; cursor: pointer; box-shadow: 0 3px 0 rgba(43,33,51,.25); }
.svc-btn:active { transform: translateY(2px); box-shadow: none; }
.svc-ico { font-size: 26px; line-height: 1; }
.svc-btn b { font-size: 15px; } .svc-btn small { font-size: 11px; opacity: .75; text-align: center; }
.bank-services .back { margin-bottom: 6px; }

/* 德州撲克：版面調整（座位不超出桌面、橫拿手機時左右排） */
.pk-wrap { display: grid; gap: 6px; }
.pk-main, .pk-side { display: grid; gap: 6px; align-content: start; min-width: 0; }
.pk-head { margin-bottom: 0; }
.pk-seat.top { grid-auto-flow: row; }
.pk-seat.top .pk-hole { order: 2; margin-top: -4px; }
.pk-seat:not(.top) .pk-hole { margin-bottom: -4px; }
.pk-hole.mine .pk-card { box-shadow: 0 0 0 2px #f2c14e, 0 2px 0 rgba(43,33,51,.3); }
@media (max-width: 520px) {
  .pk-felt { aspect-ratio: 1 / 0.95; border-width: 6px; }
  .pk-card.sm { width: 20px; height: 28px; }
  .pk-card.sm .pk-r, .pk-card.sm .pk-s { font-size: 10px; }
  .pk-plate { min-width: 56px; max-width: 84px; padding: 2px 4px; }
  .pk-plate b { font-size: 10px; max-width: 76px; }
  .pk-stack, .pk-status { font-size: 10px; }
  .pk-btn { width: 16px; height: 16px; font-size: 9px; right: -7px; top: -5px; }
  .pk-seat .pk-btn.sb, .pk-seat .pk-btn.bb { left: -7px; }
  .pk-bet { font-size: 10px; }
  .pk-acts .btn.big { padding: 8px 4px; font-size: 15px; }
  .pk-side .liar-history { display: none; }
}
/* 橫拿手機（矮螢幕）：牌桌在左、按鈕在右 */
@media (orientation: landscape) and (max-height: 560px) {
  .pk-wrap { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
  .pk-felt { width: min(100%, calc((100dvh - 150px) * 1.6)); aspect-ratio: 16 / 10; border-width: 6px; }
  .poker .rules { display: none; }
  .pk-side .liar-history { display: none; }
  .pk-card.sm { width: 20px; height: 28px; }
  .pk-card.sm .pk-r, .pk-card.sm .pk-s { font-size: 10px; }
  .pk-card.md { width: 28px; height: 40px; } .pk-card.md .pk-r, .pk-card.md .pk-s { font-size: 12px; }
  .pk-plate { min-width: 56px; max-width: 84px; padding: 2px 4px; }
  .pk-plate b { font-size: 10px; max-width: 76px; }
  .pk-stack, .pk-status { font-size: 10px; }
  .pk-btn { width: 16px; height: 16px; font-size: 9px; right: -7px; top: -5px; }
  .pk-seat .pk-btn.sb, .pk-seat .pk-btn.bb { left: -7px; }
  .pk-bet { font-size: 10px; }
  .pk-pot { font-size: 12px; }
}

/* 右上角：官方 LINE 社群按鈕（在選單左邊） */
.hud-row { display: flex; gap: 8px; align-items: center; }
.hud-btn.line-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: #06c755; color: #fff; text-decoration: none; line-height: 1; border-color: #2b2133; }
.hud-btn.line-btn b { font-size: 12px; letter-spacing: .5px; }
.hud-btn.line-btn small { font-size: 11px; margin-top: 2px; }
.hud-btn.line-btn:active { filter: brightness(.9); }

/* 🌱 新手之路、🎓 師徒 */
.hud-btn.newbie-btn { position: relative; background: #c8f0a0; }
.hud-btn.newbie-btn[hidden] { display: none; }
.newbie-stage.locked { opacity: .55; }
.donate-bar.newbie-bar { height: 16px; margin: 4px 0; font-size: 11px; }

/* 📚 遊戲百科 */
.wiki-search { width: 100%; box-sizing: border-box; padding: 8px 10px; margin: 4px 0 8px; font: inherit; font-size: 14px; border: 2px solid var(--frame); border-radius: 8px; background: #fff; color: var(--ink); }
.wiki-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wiki-cat { font: inherit; font-size: 13px; padding: 5px 10px; border: 2px solid var(--frame); border-radius: 999px; background: var(--paper-2); color: var(--ink); cursor: pointer; }
.wiki-cat.on { background: var(--gold); border-color: var(--gold-dk); font-weight: bold; }
.wiki-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.wiki-item { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; padding: 10px; border: 2px solid var(--paper-3); border-radius: 10px; background: #fffaf0; color: var(--ink); cursor: pointer; }
.wiki-item:hover { border-color: var(--gold-dk); }
.wiki-item b { display: block; font-size: 14px; }
.wiki-item small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
.wiki-item-ico { font-size: 24px; flex: none; }
.wiki-title { margin: 10px 0 6px; font-size: 18px; }
.wiki-h { font-weight: bold; margin: 12px 0 4px; font-size: 14px; color: var(--wood-dk); }
.wiki-p { margin: 6px 0; line-height: 1.6; font-size: 14px; }
.wiki-ul { margin: 4px 0 8px; padding-left: 20px; line-height: 1.6; font-size: 14px; }
.wiki-ul li { margin: 2px 0; }
.wiki-tip { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--cream); font-size: 13px; line-height: 1.5; }
.wiki-tw { overflow-x: auto; margin: 6px 0 8px; }
.wiki-t { border-collapse: collapse; width: 100%; font-size: 13px; }
.wiki-t th { background: var(--paper-3); text-align: left; padding: 5px 8px; white-space: nowrap; }
.wiki-t td { padding: 5px 8px; border-bottom: 1px solid var(--paper-3); vertical-align: middle; line-height: 1.45; }
.wiki-t tr:nth-child(even) td { background: rgba(230, 207, 166, .18); }
.wiki-ico { width: 22px; height: 22px; image-rendering: pixelated; vertical-align: middle; margin-right: 4px; }
.wiki-fish { white-space: nowrap; }
.wiki-foot { margin-top: 14px; font-size: 12px; }

/* 🏪 市集廣場：16 格攤位選擇 */
.market-slots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 8px 0; }
.market-slot { font: inherit; font-size: 14px; font-weight: bold; padding: 6px 2px; border: 2px solid var(--frame); border-radius: 6px; background: #fffaf0; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.market-slot small { font-size: 10px; font-weight: normal; color: var(--ink-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-slot.on { background: var(--gold); border-color: var(--gold-dk); }
.market-slot.taken { background: var(--paper-3); opacity: .7; cursor: not-allowed; }
.market-no { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: var(--wood); color: #fff; font-size: 15px; font-weight: bold; }

/* 📲 加到主畫面說明 */
.inapp-banner { display: block; width: 100%; margin: 0 0 8px; padding: 8px 10px; background: #fff3c4; color: #6a4a00; border: 3px solid #2b2133; font: inherit; font-size: 14px; text-align: left; line-height: 1.4; cursor: pointer; }
.ig-steps { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; }
.ig-step { position: relative; display: flex; align-items: center; gap: 12px; background: #fff; padding: 10px 10px 10px 14px; box-shadow: inset 0 0 0 2px var(--paper-3, #e6d5b5); }
.ig-num { position: absolute; left: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: #ef7b6b; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #2b2133; }
.ig-art { flex: 0 0 112px; height: 56px; display: flex; align-items: center; justify-content: center; background: #f4ecdc; box-shadow: inset 0 0 0 2px #d9c7a4; }
.ig-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ig-text b { font-size: 15px; font-weight: 400; color: #2b2133; }
.ig-text small { font-size: 12px; color: #7a6a5a; line-height: 1.35; }
.ig-bar { width: 100px; height: 26px; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 2px #cdbb98; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 9px; font-size: 10px; color: #7a6a5a; }
.ig-bar.bottom { justify-content: center; padding: 0; }
.ig-share { position: relative; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px #4a8fe0; display: inline-block; }
.ig-share i { position: absolute; left: 6px; top: 9px; width: 10px; height: 8px; border: 2px solid #4a8fe0; border-top: none; }
.ig-share b { position: absolute; left: 10px; top: 3px; width: 2px; height: 10px; background: #4a8fe0; }
.ig-share b::before { content: ''; position: absolute; left: -3px; top: 0; width: 5px; height: 5px; border-left: 2px solid #4a8fe0; border-top: 2px solid #4a8fe0; transform: rotate(45deg); transform-origin: center; }
.ig-menu { width: 104px; background: #fff; padding: 4px; box-shadow: inset 0 0 0 2px #cdbb98; }
.ig-menu-row { display: block; font-size: 10px; padding: 4px 5px; color: #2b2133; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-menu-row.on { box-shadow: inset 0 0 0 2px #4a8fe0; background: #eaf3ff; }
.ig-dots { font-size: 26px; line-height: 1; color: #2b2133; }
.ig-dots.small { font-size: 16px; padding-right: 4px; }
.ig-app { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: #2b2133; }
.ig-app img { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 0 0 2px #2b2133; }
.ig-note { font-size: 12px; margin: 0 0 10px; }
.ig-actions { display: flex; gap: 8px; margin-top: 8px; }
.ig-actions .btn { flex: 1; }