/* =========================================================
 * 骰子電玩城 — 對局畫面
 * 構圖參考：中央 3D 棋盤（天空、遠山、浮空島）、上方回合橫幅、
 * 右側玩家資訊、右下骰子與操作面板、左下聊天紀錄
 * 介面都貼在畫面邊緣；3D 鏡頭會依右側面板寬度把棋盤移到空出來的中央
 * ========================================================= */
.city3d .game3 { display: block; padding: 0 10px 10px; }
.city3d .game3.hidden { display: none !important; }

.scene-box {
  position: relative;
  height: calc(100vh - var(--top-h, 54px) - 12px);
  min-height: 520px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(#3b3f9e, #7f9cf5 55%, #c5f6fa);
  box-shadow: 0 6px 0 #120f27;
}
.scene3d { position: absolute; inset: 0; touch-action: none; }
.scene3d canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
.scene-box .fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.no3d { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; font-weight: 800; color: #fff; }

/* 介面共用：黃色圓角面板 */
.g-panel, .g-players, .g-ops, .g-chat, .g-turn .turn-info {
  background: #fff8e6;
  border-radius: 16px;
  box-shadow: 0 5px 0 #e0a42a, inset 0 0 0 3px #fff;
  color: #5a3a0a;
}

/* 上方中央：輪到誰 */
.g-turn { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none; }
.g-turn .turn-info {
  display: flex; align-items: center; gap: 8px; padding: 8px 22px;
  background: linear-gradient(#ffd66b, #ffb31a); color: #fff; font-size: 20px; font-weight: 900;
  text-shadow: 0 2px 0 #c96a00; box-shadow: 0 5px 0 #c96a00, inset 0 0 0 3px rgba(255, 255, 255, .45); white-space: nowrap;
}
.g-turn .turn-info .dot { width: 1.5em; height: 1.5em; display: inline-grid; place-items: center; border-radius: 50%; border: 2px solid #fff; text-shadow: none; }

/* 左上：迷因台詞 */
.g-meme { position: absolute; top: 10px; left: 10px; z-index: 4; width: min(380px, 32%); margin: 0; }
.meme-bar.g-meme:not(.show) { display: none; }

/* 右上：鏡頭按鈕 */
.cam-buttons { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
.cam-btn { border: 0; border-radius: 12px; min-width: 38px; height: 36px; padding: 0 10px; background: #ffc93c; color: #fff; font: inherit; font-weight: 900; font-size: 15px; text-shadow: 0 1px 0 #c96a00; box-shadow: 0 4px 0 #c96a00; cursor: pointer; }
.cam-btn.wide { font-size: 13px; }
.cam-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c96a00; }
.cam-btn.primary { background: #ff922b; box-shadow: 0 4px 0 #d9480f; }
.cam-btn.paused { background: #fff; color: #d9480f; text-shadow: none; animation: pulse 1.4s infinite; }
.cam-hint { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); z-index: 4; padding: 4px 12px; border-radius: 999px; background: rgba(43, 38, 69, .85); color: #ffe066; font-size: 12px; font-weight: 800; pointer-events: none; }
.cam-hint[hidden] { display: none; }
.demo-badge { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; padding: 6px 14px; border-radius: 999px; background: #e5484d; color: #fff; font-weight: 900; font-size: 14px; pointer-events: none; }

/* 右側：玩家資訊（精簡卡片） */
.g-players { position: absolute; top: 56px; right: 10px; z-index: 3; width: 236px; max-height: calc(100% - 56px - 250px); overflow-y: auto; padding: 8px; }
.g-players-head { margin: 0 4px 6px; padding: 3px 10px; border-radius: 10px; background: #ffd43b; color: #fff; font-weight: 900; font-size: 13px; text-shadow: 0 1px 0 #c96a00; text-align: center; }
.g-players .player-list { gap: 8px; }
.g-players .pcard { padding: 6px 8px; border-left-width: 6px; box-shadow: 0 3px 0 #e0c9a6; }
.g-players .pcard.current { transform: none; box-shadow: 0 0 0 3px #ffd43b, 0 3px 0 #e0c9a6; }
.g-players .avatar { width: 30px; height: 30px; font-size: 17px; }
.g-players .pc-name b { font-size: 14px; }
.g-players .pc-name small { font-size: 11px; }
.g-players .badge { font-size: 10px; padding: 1px 6px; }
.g-players .pc-stats { grid-template-columns: 1fr 1fr .5fr; gap: 4px; margin: 5px 0 4px; }
.g-players .pc-stats div { padding: 2px 5px; }
.g-players .pc-stats small { font-size: 10px; }
.g-players .pc-stats b { font-size: 13px; }
.g-players .pc-foot { font-size: 11px; }
.g-players .skill-tag { padding: 1px 6px; }
/* 5～8 人：精簡卡片（數字排成一行），面板內可捲動 */
.g-players .player-list.compact { gap: 5px; }
.g-players .compact .pcard { padding: 4px 7px; }
.g-players .compact .avatar { width: 24px; height: 24px; font-size: 14px; }
.g-players .compact .pc-name b { font-size: 13px; }
.g-players .compact .pc-name small { font-size: 10px; }
.g-players .compact .pc-stats { display: flex; gap: 3px; margin: 3px 0 2px; }
.g-players .compact .pc-stats div { flex: 1 1 auto; flex-direction: row; align-items: baseline; gap: 3px; padding: 1px 4px; min-width: 0; }
.g-players .compact .pc-stats div:last-child { flex: 0 0 auto; }
.g-players .compact .pc-stats small { font-size: 9px; white-space: nowrap; }
.g-players .compact .pc-stats b { font-size: 11.5px; white-space: nowrap; }
.g-players .compact .pc-foot { font-size: 10px; }
.g-players .compact .skill-tag { padding: 0 5px; }

/* 右下：骰子與操作面板 */
.g-ops { position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 300px; padding: 8px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.g-ops-head { align-self: stretch; text-align: center; font-weight: 900; font-size: 14px; color: #8a6d3b; }
.g-ops .dice-area { min-height: 54px; gap: 10px; }
.g-ops .die { width: 50px; height: 50px; box-shadow: 0 4px 0 #e0c9a6, inset 0 0 0 2px #f1f3f5; }
.g-ops .dice-total { color: #e8590c; font-size: 16px; }
.g-ops .prompt { margin: 0; min-height: 0; font-size: 12px; color: #8a6d3b; text-align: center; }
.g-ops .prompt.your-turn { color: #d9480f; font-weight: 800; }
.g-ops .actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; width: 100%; }
.op-btn { border: 0; border-radius: 12px; padding: .5em .3em; font: inherit; font-weight: 900; font-size: 13px; color: #fff; cursor: pointer; transition: transform .08s; }
.op-btn:active:not(:disabled) { transform: translateY(3px); }
.op-btn:disabled { filter: grayscale(.7); opacity: .5; cursor: not-allowed; }
.op-btn.roll { background: #ff922b; box-shadow: 0 4px 0 #d9480f; }
.op-btn.skill { background: #845ef7; box-shadow: 0 4px 0 #5f3dc4; }
.op-btn.end { background: #20c997; box-shadow: 0 4px 0 #087f5b; }
.op-btn.bag { grid-column: 1 / -1; background: #fff3bf; color: #5a3a0a; box-shadow: 0 4px 0 #e0a42a; }
.op-btn.bag b { display: inline-block; min-width: 1.4em; padding: 0 4px; border-radius: 999px; background: #ff922b; color: #fff; font-size: 12px; }
.op-btn.bag.has-usable { animation: pulse 1.4s infinite; }
.op-btn.pulse { animation: pulse 1.2s infinite; }
.op-btn small { font-weight: 400; font-size: .8em; }
.hud-drawer { width: 100%; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 2px dashed #f0d9a8; }
.hud-drawer[hidden] { display: none; }
.drawer-sec h4 { margin: 0 0 4px; font-size: 12px; color: #8a6d3b; }
.drawer-sec h4 small { font-weight: 400; }
.drawer-sec .item-bar, .drawer-sec .card-bar { justify-content: flex-start; }

/* 左下：聊天與紀錄 */
.g-chat { position: absolute; left: 10px; bottom: 10px; z-index: 3; width: 340px; padding: 8px 10px; }
.g-chat #log { list-style: none; margin: 6px 0 0; padding: 0; height: 150px; overflow-y: auto; font-size: 12px; }
.g-chat #log li { padding: 3px 2px; border-bottom: 1px dashed #f0d9a8; }
.g-chat #gameChat .chat-list { height: 112px; }
.chat-badge { display: inline-block; min-width: 1.4em; padding: 0 4px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; }

/* 機會／命運事件卡（上方中央，不擋住操作區） */
.event-card {
  position: absolute; left: 50%; top: 66px; transform: translateX(-50%); z-index: 6;
  width: min(360px, calc(100% - 24px)); border-radius: 18px; background: #fffaf0; color: #2b2645;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .25), 0 0 0 4px var(--ec, #e5484d); overflow: hidden; animation: pop .25s ease-out;
}
.event-card[hidden] { display: none; }
.ec-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: var(--ec, #e5484d); color: #fff; font-weight: 900; font-size: 16px; }
.event-card.fate .ec-head { color: #3b2f00; }
.ec-who { font-size: 13px; font-weight: 700; }
.event-card h3 { margin: 10px 14px 4px; font-size: 19px; }
.event-card p { margin: 4px 14px; font-size: 14px; line-height: 1.5; }
.ec-changes { margin: 6px 14px; padding: 8px 10px 8px 26px; border-radius: 10px; background: #f3eefc; font-weight: 800; font-size: 14px; }
.ec-changes .neg { color: var(--loss); } .ec-changes .pos { color: var(--gain); }
.ec-line { color: var(--primary-dark); font-weight: 800; }
.ec-line:empty { display: none; }
.ec-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px 12px; }

/* 較矮的桌機：面板縮小，避免互相重疊 */
@media (max-height: 760px) and (min-width: 901px) {
  .g-chat #log { height: 100px; }
  .g-chat #gameChat .chat-list { height: 70px; }
  .g-players { max-height: calc(100% - 56px - 230px); }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .g-chat { width: 290px; }
  .g-players { width: 210px; }
  .g-ops { width: 270px; }
}

/* ---------- 平板與手機：3D 在上，其他面板依序排在下方（不疊在棋盤上） ---------- */
@media (max-width: 900px) {
  .scene-box { height: auto; min-height: 0; overflow: visible; background: transparent; box-shadow: none; display: flex; flex-direction: column; gap: 10px; }
  .scene3d { position: relative; inset: auto; height: 54vh; min-height: 300px; border-radius: 16px; overflow: hidden; background: linear-gradient(#3b3f9e, #7f9cf5 55%, #c5f6fa); }
  .scene-box .fx-layer { height: 54vh; bottom: auto; }
  .g-turn { top: 8px; }
  .g-turn .turn-info { font-size: 15px; padding: 6px 14px; }
  .g-meme { width: auto; right: 10px; top: 56px; }
  .cam-buttons { top: auto; bottom: auto; top: calc(54vh - 46px); right: 8px; max-width: none; }
  .cam-btn { height: 32px; min-width: 34px; font-size: 13px; }
  .cam-btn.wide { font-size: 12px; padding: 0 8px; }
  .g-players, .g-ops, .g-chat { position: static; width: auto; max-height: none; }
  .g-ops { order: 1; }
  .g-players { order: 2; }
  .g-chat { order: 3; }
  .g-players .player-list { display: grid; grid-template-columns: 1fr 1fr; }
  .event-card { top: 50px; }
  .cam-hint { top: 50px; }
}
@media (max-width: 520px) {
  .g-players .player-list { grid-template-columns: 1fr; }
  .cam-btn.wide { font-size: 11px; }
}

/* ---------- 新迷因卡：瘋狂67、卡名字幕、閃身步狀態 ---------- */
.c67 { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 7; }
.c67-num { min-width: 1.4em; text-align: center; font-size: clamp(72px, 14vw, 140px); font-weight: 900; line-height: 1; color: #fff; padding: 6px 22px; border-radius: 26px; -webkit-text-stroke: 3px #2b2645; }
.c67-num.c67-6 { background: #f06595; box-shadow: 0 8px 0 #a61e4d; transform: rotate(-6deg) scale(.96); }
.c67-num.c67-7 { background: #5c7cfa; box-shadow: 0 8px 0 #364fc7; transform: rotate(6deg) scale(1.04); }
.c67-num.c67-final { animation: c67Final .6s ease-out; }
.c67-cap { font-size: 18px; font-weight: 900; color: #fff; background: #2b2645; padding: 2px 14px; border-radius: 999px; }
@keyframes c67Final { 0% { transform: scale(1.6); } 40% { transform: scale(.9); } 100% { transform: scale(1); } }
.die-67 { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; background: #f06595; color: #fff; font-size: 28px; font-weight: 900; box-shadow: 0 4px 0 #a61e4d; }
.meme-caption { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); max-width: 90%; text-align: center; font-size: clamp(22px, 4.5vw, 44px); font-weight: 900; color: #ffe066; -webkit-text-stroke: 2px #1a1a1a; text-shadow: 0 4px 0 #1a1a1a; white-space: nowrap; animation: capIn 2.2s ease-out forwards; z-index: 7; }
@keyframes capIn { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 20% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.mini-item.dodge-on { background: #c5f6fa; border-radius: 6px; animation: dodgePulse 1.6s ease-in-out infinite; }
@keyframes dodgePulse { 50% { box-shadow: 0 0 0 3px rgba(59, 201, 219, .45); } }
@media (prefers-reduced-motion: reduce) { .c67-num.c67-final, .meme-caption, .mini-item.dodge-on { animation: none; } }
.mini-item.status { cursor: help; }
.mini-item.debuff { background: #ffe3e3; border-radius: 6px; }
.land-status { background: #fff4e6; border-radius: 8px; padding: 6px 10px; font-size: 13px; }

/* ---------- 股市・大樂透 ---------- */
.op-btn.market { grid-column: 1 / -1; background: #e7f5ff; color: #1c4f82; box-shadow: 0 4px 0 #74c0fc; }
.op-btn.market small { color: #1971c2; font-weight: 700; }
.op-btn.market.can-trade { background: #d0ebff; }
.op-btn.market.flash { animation: mkFlash 1.2s ease-out 2; }
@keyframes mkFlash { 50% { box-shadow: 0 4px 0 #74c0fc, 0 0 0 5px rgba(51, 154, 240, .45); } }
.market-panel {
  position: absolute; left: 10px; top: 60px; z-index: 4; width: 340px; max-height: calc(100% - 60px - 250px); min-height: 0;
  display: flex; flex-direction: column; background: #f8fbff; color: #1f2d3d; border-radius: 16px;
  box-shadow: 0 5px 0 #74c0fc, inset 0 0 0 3px #fff;
}
.market-panel[hidden] { display: none; }
.mk-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px 6px; border-bottom: 2px dashed #d0ebff; }
.mk-head .tabs { flex: 1; display: flex; gap: 4px; }
.mk-head .tab { border: 0; border-radius: 10px; padding: 4px 10px; font: inherit; font-weight: 800; font-size: 13px; background: #e7f5ff; color: #1c4f82; cursor: pointer; }
.mk-head .tab.active { background: #339af0; color: #fff; }
.mk-btn { border: 0; background: #e7f5ff; color: #1c4f82; border-radius: 8px; width: 30px; height: 28px; font-weight: 900; cursor: pointer; }
.mk-body { overflow-y: auto; padding: 6px 10px 10px; font-size: 13px; min-height: 0; }
.market-panel.folded .mk-body { display: none; }
.mk-status { margin: 0 0 6px; padding: 6px 8px; border-radius: 10px; background: #fff; line-height: 1.45; }
.mk-sub { margin: 0 0 6px; color: #495057; font-size: 12px; }
.mk-stock { background: #fff; border-radius: 12px; padding: 6px 8px; margin-bottom: 6px; box-shadow: inset 0 0 0 2px #e7f5ff; }
.mk-r1 { display: flex; align-items: center; gap: 6px; }
.mk-icon { font-size: 18px; }
.mk-name { flex: 1; }
.mk-price { font-weight: 900; font-size: 16px; }
.mk-chg { font-size: 12px; font-weight: 800; color: #868e96; min-width: 4.6em; text-align: right; }
.mk-chg.up { color: #e03131; } .mk-chg.down { color: #2f9e44; }   /* 台灣慣例：紅漲綠跌 */
.mk-r2 { display: flex; align-items: center; gap: 8px; }
.mk-spark { width: 116px; height: 30px; flex: none; }
.mk-spark polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mk-spark.up polyline { stroke: #e03131; } .mk-spark.down polyline { stroke: #2f9e44; }
.mk-spark .flat { stroke: #adb5bd; stroke-dasharray: 3 3; }
.mk-hold { margin: 2px 0 4px; font-size: 12px; }
.mk-hold .pos, .market-panel .pos, .trade-quote .pos { color: #e03131; } .mk-hold .neg, .market-panel .neg, .trade-quote .neg { color: #2f9e44; }
.mk-act { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.mk-rules { font-size: 12px; } .mk-rules ul { margin: 4px 0; padding-left: 18px; } .mk-rules summary { cursor: pointer; font-weight: 800; }
.qty-row { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.qty-row input { width: 5em; font: inherit; font-size: 18px; padding: 4px 6px; border-radius: 8px; border: 2px solid #ced4da; text-align: center; }
.trade-quote .neg { color: var(--loss); font-weight: 800; }
.lt-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 4px; }
.lt-rules { background: #fff9db; border-radius: 10px; padding: 6px 8px; font-size: 12px; line-height: 1.5; }
.market-panel h4 { margin: 8px 0 4px; font-size: 13px; }
.lt-mine { display: flex; flex-direction: column; gap: 4px; }
.lt-ball { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 3px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffd43b 45%, #f59f00); color: #3b2f00; font-weight: 900; box-shadow: 0 2px 0 #c77700; }
.lt-ball.sm { width: 22px; height: 22px; font-size: 12px; }
.lt-ball.hit { background: radial-gradient(circle at 35% 30%, #fff, #ff8787 45%, #e03131); color: #fff; box-shadow: 0 2px 0 #a61e1e; }
.lt-nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 6px; }
.lt-num { border: 0; border-radius: 10px; padding: 7px 0; font: inherit; font-weight: 900; background: #fff; box-shadow: inset 0 0 0 2px #ffe066; cursor: pointer; }
.lt-num.on { background: #ffd43b; box-shadow: 0 3px 0 #f08c00; }
.lt-num:disabled { opacity: .5; cursor: not-allowed; }
.lt-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lt-hist li { background: #fff; border-radius: 10px; padding: 4px 8px; }
/* 開獎動畫：上方中央的小看板，不擋操作（點不到） */
.lotto-draw {
  position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  min-width: 250px; padding: 10px 16px; border-radius: 16px; text-align: center; background: rgba(43, 38, 69, .92); color: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .3); animation: pop .25s ease-out; transition: opacity .45s;
}
.lotto-draw.out { opacity: 0; }
.lotto-draw.win { box-shadow: 0 6px 0 rgba(0, 0, 0, .3), 0 0 0 4px #ffd43b; }
.ld-title { font-weight: 900; font-size: 15px; }
.ld-balls { min-height: 46px; display: flex; justify-content: center; gap: 8px; margin: 8px 0 4px; }
.ld-balls .lt-ball { width: 42px; height: 42px; font-size: 20px; }
.lt-ball.pop { animation: ballPop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ballPop { 0% { transform: translateY(-24px) scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ld-result { min-height: 1.3em; font-weight: 800; color: #ffe066; }
.toast-stock { border-color: #339af0; }
#log .log-stock { color: #1971c2; }
@media (prefers-reduced-motion: reduce) { .lt-ball.pop, .op-btn.market.flash { animation: none; } }
@media (max-height: 760px) and (min-width: 901px) { .market-panel { max-height: calc(100% - 60px - 200px); } }
@media (max-width: 1180px) and (min-width: 901px) { .market-panel { width: 300px; } }
/* 手機與平板：排在操作面板下方（不疊在棋盤上），可收合成只剩標題列 */
@media (max-width: 900px) {
  .market-panel { position: static; order: 2; width: auto; max-height: 70vh; }
  .g-players { order: 3; }
  .g-chat { order: 4; }
  .lotto-draw { top: 50px; min-width: 0; width: min(320px, calc(100% - 24px)); }
}

/* ---------- 長暱稱：純文字顯示，過長時省略或換行；點一下（被截斷時）看完整名字 ---------- */
.pname { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.pname[data-fullname] { cursor: help; }
.pc-name { min-width: 0; }
.pc-name b { display: block; min-width: 0; }
.pc-head { min-width: 0; }
.c3-name b { min-width: 0; }
.c3-name .pname { display: block; }
.turn-info .turn-name { max-width: min(16em, 40vw); }
.meme-who .pname { max-width: 10em; }
.chat-list .who { max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; cursor: help; }
.ec-who { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name { max-width: 14em; }
.rank-name .pname { max-width: calc(100% - 2em); }
.banner { max-width: 92%; white-space: normal; overflow-wrap: anywhere; text-align: center; max-height: 3.4em; overflow: hidden; }
.banner .bn-name { display: inline-block; max-width: min(12em, 60vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* 系統訊息（紀錄、提示、橫幅、選單）裡的長名字：可在任何地方換行，太長的提示最多顯示幾行 */
#log li, .toast, .modal-card, .chat-list li, .ec-changes, .lt-hist li { overflow-wrap: anywhere; }
#log li { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.toast { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.modal-buttons .btn { max-width: 100%; overflow-wrap: anywhere; }
.full-name { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; font-size: 18px; font-weight: 800; }
/* 格線裡的玩家卡不要被長名字撐寬 */
.player-list .pcard { min-width: 0; }
@media (max-width: 900px) { .g-players .player-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .g-players .player-list { grid-template-columns: minmax(0, 1fr); } }
/* 股市・大樂透：可以交易時，入口按鈕輕輕提示；大樂透「可購買」與「開獎」分開顯示 */
.op-btn.market.nudge { animation: pulse 1.6s infinite; }
.lt-state { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.lt-chip { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; }
.lt-chip.on { background: #d3f9d8; color: #2b8a3e; }
.lt-chip.off { background: #f1f3f5; color: #495057; }
.lt-chip.draw { background: #fff3bf; color: #8a6d00; }
@media (prefers-reduced-motion: reduce) { .op-btn.market.nudge { animation: none; } }
/* 玩家頭像：3D 模型畫出的頭像，底色是玩家顏色 */
.avatar { overflow: hidden; }
.avatar img { width: 118%; height: 118%; object-fit: cover; object-position: 50% 18%; pointer-events: none; }
.wd-skill { white-space: pre-line; }

/* ---------- 小地圖（和 3D 同方向；點一下鏡頭移過去） ---------- */
.minimap { position: absolute; right: 320px; bottom: 10px; z-index: 3; width: 190px; height: 128px; padding: 4px; border-radius: 14px; background: rgba(43, 38, 69, .78); box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.minimap[hidden] { display: none; }
.minimap canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
@media (max-width: 1180px) and (min-width: 901px) { .minimap { right: 290px; width: 160px; height: 110px; } }
@media (max-width: 900px) { .minimap { right: auto; left: 8px; bottom: auto; top: calc(54vh - 118px); width: 140px; height: 96px; } }

/* ---------- 伺服器重啟後恢復的對局：暫停列 ---------- */
.pause-bar { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 14px; background: #2b2645; color: #fff; font-weight: 800; box-shadow: 0 5px 0 rgba(0, 0, 0, .3); }
.pause-bar[hidden] { display: none; }
.pause-bar span { overflow-wrap: anywhere; }
@media (max-width: 900px) { .pause-bar { top: 50px; font-size: 13px; } }

/* ---------- 掛機與託管：倒數條、剩 10 秒提醒、託管按鈕與標示 ---------- */
.g-ops-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.auto-btn { border: 0; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; font-weight: 800; background: #e9ecef; color: #495057; cursor: pointer; }
.auto-btn.on { background: #ffd43b; color: #5a3a0a; animation: pulse 1.6s infinite; }
.auto-btn[hidden] { display: none; }
.auto-btn:disabled { opacity: .6; cursor: wait; }
.auto-note { margin: 0; padding: 6px 8px; border-radius: 10px; background: #fff3bf; color: #5a3a0a; font-size: 12px; font-weight: 700; text-align: center; }
.auto-note[hidden] { display: none; }
.turn-countdown { align-self: stretch; font-size: 13px; font-weight: 800; color: #8a6d3b; text-align: center; }
.turn-countdown[hidden] { display: none; }
.tc-bar { height: 6px; margin-top: 3px; border-radius: 999px; background: #f1e3c4; overflow: hidden; }
.tc-fill { height: 100%; width: 100%; border-radius: 999px; background: #20c997; transition: width .25s linear; }
.turn-countdown.urgent { color: #e03131; animation: pulse 0.8s infinite; }
.turn-countdown.urgent .tc-fill { background: #fa5252; }
.g-ops.urgent { box-shadow: 0 5px 0 #e0a42a, inset 0 0 0 3px #ff8787; }
.badge.auto { background: #ffd43b; color: #5a3a0a; }
@media (prefers-reduced-motion: reduce) { .turn-countdown.urgent, .auto-btn.on { animation: none; } }