:root {
  --okami: #C23A3A; --kuu: #5B8C3E; --stella: #E5A83B; --aity: #26A8D6;
  --bg: #1b1a1f; --panel: #26252c; --ink: #eee; --tile: #e9e4da; --cut: #101014;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* 決策 31：Huninn 自己帶單色的 emoji（🐦 變成小黑圓）：U+1F000 以後的 emoji 先用系統的彩色 emoji 字型（★ 等符號不在範圍內，照舊） */
@font-face { font-family: "ColorEmoji"; src: local("Segoe UI Emoji"), local("Apple Color Emoji"), local("Noto Color Emoji"); unicode-range: U+1F000-1FAFF; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "ColorEmoji", "Microsoft JhengHei", "PingFang TC", sans-serif; }
#app { max-width: 640px; margin: 0 auto; padding: 8px 4px 16px; }
button { font: inherit; padding: 8px 14px; border-radius: 6px; border: 0; background: #444; color: #fff; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
input { font: inherit; padding: 8px; border-radius: 6px; border: 1px solid #555; background: #111; color: #fff; }
.row { display: flex; gap: 8px; margin-top: 12px; }
#home { display: grid; gap: 12px; justify-items: start; padding: 24px 12px; }
#home h1 { font-size: 36px; margin: 0 0 8px; }

/* 大廳 */
#char-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#char-grid button { display: grid; justify-items: center; gap: 2px; background: var(--panel); border: 2px solid transparent; }
#char-grid button.mine { border-color: var(--c); }
#char-grid img { height: 56px; image-rendering: pixelated; }

/* 玩家列 */
#players-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.chip { display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: 4px; padding: 3px 5px; background: var(--panel); border-radius: 6px; border-left: 4px solid var(--c); font-size: 12px; }
.chip img { width: 28px; image-rendering: pixelated; grid-row: span 2; }
.chip.now { outline: 2px solid var(--c); }
.chip.off { opacity: .5; }
.chip .m { width: 18px; }

/* 棋盤 */
#board-wrap { position: relative; }
#board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(7, 1fr); gap: 2px; width: 100%; aspect-ratio: 1; }
.tile { position: relative; background: var(--tile); color: #111; border-radius: 4px; overflow: hidden; font-size: clamp(9px, 2.4vw, 13px); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 1px 1px; cursor: pointer; line-height: 1.1; }
.tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--side, transparent); }
.tile.corner { background: #2f2d36; color: #fff; }
.tile.owned { background: color-mix(in srgb, var(--owner) 25%, var(--tile)); }
.tile .ic { font-size: clamp(13px, 3.8vw, 22px); }
.tile .price { font-size: .85em; }
/* 決策 26：看的人身上有衰神 → 別人的地顯示加倍後的過路費（紅字）＋右上角一顆 🖤（小角標，不撐寬牌子） */
.tile .price.jinx { position: relative; color: #b3123a !important; }
.tile .price .jx { position: absolute; right: -7px; top: -9px; font-size: .85em; line-height: 1; pointer-events: none; }
.tile .stars { position: absolute; top: 3px; right: 2px; color: #b8860b; font-size: 8px; }
.tile.glow { animation: glow 3s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: inset 0 0 12px var(--side); } }
.tokens { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; pointer-events: none; }
.tokens img { width: 72%; image-rendering: pixelated; }
.tokens.many { align-content: center; }
.tokens.many img { width: 46%; border: 1px solid var(--c); border-radius: 50%; background: #0006; }
#center { grid-area: 2 / 2 / 7 / 7; position: relative; border-radius: 8px; overflow: hidden; background: #111; }
#center .bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(70%) brightness(70%) contrast(95%); transition: background-image .5s; }
#center::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(27,26,31,.1) 25%, rgba(27,26,31,.65) 95%); }
#center .info { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; text-align: center; color: #fff; }
#center .dice { font-size: 64px; line-height: 1; }
/* 預設外觀：格子的 .hd/.art/.ft 分段不產生方框；中間平常只顯示輪數，擲骰時只顯示骰子 */
.tile .hd, .tile .art, .tile .ft { display: contents; }
#center .turn, #center .dice small, #center .info:not(.rolling) .dice, #center .info.rolling .round { display: none; }

/* 按鈕區 */
#actions { min-height: 92px; margin-top: 76px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; text-align: center; }
#actions p { width: 100%; margin: 0; }
#actions .cd { color: #aaa; margin-left: 6px; }
#actions .why { display: block; font-size: 13px; opacity: .8; margin-top: 2px; }
#actions .busy { opacity: .7; }

/* 切入橫幅（spec 6.3）：浮在畫面上、可點擊穿透 */
#cutin { position: absolute; top: 100%; left: 0; right: 0; height: 68px; pointer-events: none; z-index: 50; }
.cut { position: absolute; inset: 0; animation: slide .25s ease-out; }
.cut .bg { position: absolute; inset: 0; clip-path: polygon(0 14%, 100% 0, 100% 86%, 0 100%); background: repeating-linear-gradient(115deg, transparent 0 6px, rgba(255,255,255,.06) 6px 8px), var(--cut); box-shadow: inset 0 2px 0 var(--c); }
.cut .side { position: absolute; bottom: 0; display: flex; align-items: flex-end; gap: 6px; max-width: 50%; }
.cut .side.l { left: 6px; }
.cut .side.r { right: 6px; flex-direction: row-reverse; text-align: right; }
.cut.solo .side.l { max-width: 100%; }
.cut .pt { height: 120px; width: auto; background: var(--cut); border: 2px solid var(--c); border-radius: 6px; }
.cut .say { margin-bottom: 8px; font-size: 12px; }
.cut .say b { display: inline-block; background: var(--c); padding: 0 6px; border-radius: 3px; margin-bottom: 2px; white-space: nowrap; color: #fff; }
.cut .say span { display: inline-block; color: #fff; line-break: strict; }
.cut .say small { display: inline-block; color: #fff; opacity: .85; font-size: 11px; margin-top: 2px; }
/* 台詞照字斷行，strict 讓標點不落到行首（keep-all 只在標點斷，會把「，」單獨斷成一行）；手機上黑羽電視、菸猴相框縮小 */
.cut .say { min-width: 0; }
.cut .say span, .cut .say small { overflow-wrap: anywhere; }
@media (max-width: 480px) { .cut .tv, .cut .photo { height: 72px; } }
.cut .amt { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font-weight: bold; font-size: 14px; white-space: nowrap; background: rgba(0,0,0,.75); padding: 2px 8px; border-radius: 10px; z-index: 2; }
@media (max-width: 480px) { .cut .amt { top: -34px; } } /* 手機：橫幅窄，金額標籤移到兩張立繪中間的上方，不蓋住台詞 */
/* 決策 28：上局宿敵開場的標題（同 .amt 的位置，金色、會脈動） */
.cut .vs { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font-weight: bold; font-size: 15px; white-space: nowrap; color: #ffd76a; background: rgba(0,0,0,.8); padding: 2px 12px; border-radius: 10px; border: 1px solid #ffd76a; z-index: 2; animation: vs-pulse .6s ease-in-out infinite alternate; }
@media (max-width: 480px) { .cut .vs { top: -52px; font-size: 13px; } } /* 手機：放到兩張立繪上方，不蓋名字 */
@keyframes vs-pulse { to { box-shadow: 0 0 10px #ffd76a; } }
.neg { color: #ff6b6b; } .pos { color: #7bd88f; }
/* 決策 33：原本從 -100% 滑進來，動畫中途的畫面（手機慢、截圖）字的左半邊在畫面外（AI 對打第 9 回 B：「…一回合前收的過路費 ×2」）。改成只滑一小段＋淡入 */
@keyframes slide { from { transform: translateX(-24px); opacity: 0; } }

/* 黑羽的復古電視框（只用 CSS） */
.tv { height: 100px; aspect-ratio: 4 / 3; background: linear-gradient(145deg, #3d342d, #1c1815); border: 3px solid #14110f; border-radius: 14px; padding: 6px; position: relative; flex: none; }
.tv .scr { width: 100%; height: 100%; border-radius: 9px; overflow: hidden; background: #151a15; position: relative; }
.tv img { width: 100%; height: 100%; object-fit: contain; }
.tv .scr::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 2px); }
.tv .lamp { position: absolute; top: 8px; right: 10px; z-index: 2; font-size: 9px; color: #ff3b30; text-shadow: 0 0 4px #ff3b30; }

/* 菸猴的相框（只用 CSS，仿 .tv 但白底照片裝進暗框） */
.photo { height: 100px; aspect-ratio: 4 / 3; background: linear-gradient(145deg, #4a3a28, #1f1712); border: 3px solid #14110f; border-radius: 8px; padding: 8px 8px 16px; position: relative; flex: none; box-shadow: 0 2px 6px #0008; }
.photo .mat { width: 100%; height: 100%; background: #ece6d8; padding: 4px; border-radius: 2px; box-shadow: inset 0 0 6px #0006; }
.photo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.photo .plate { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); font-size: 8px; color: #d8c9a3; background: #14110f; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }

/* 格子詳情、提示、結算 */
#inspector { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; background: var(--panel); padding: 12px 16px; border-radius: 10px; box-shadow: 0 6px 20px #000a; min-width: 220px; }
#notice { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 70; background: #333; padding: 10px 16px; border-radius: 8px; max-width: 90vw; }
#notice a { color: #9cf; }
#ranking li { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
#ranking img { height: 120px; background: var(--cut); border: 2px solid var(--c); border-radius: 6px; }
#ranking .st { display: block; font-size: 13px; opacity: .85; margin-top: 2px; }
#ranking q { display: block; margin-top: 4px; font-style: italic; }
/* 立繪裁切檔（192×240）超出原圖的地方補了黑：頂端最多 21px（Okami），底部最多 15px（okami/smug_1、smug_2；aity/happy_2 7px）。
   所有立繪用同一個視窗（第 21～225 列）：框 192:204，cover 時上下共裁 36px，上裁 21／下裁 15（58.3%）。臉的位置每張都一樣，也看不到黑邊 */
.cut .pt, #ranking img { aspect-ratio: 192 / 204; object-fit: cover; object-position: 50% 58.3%; }
/* 籤、菸猴沒有地價：價格條放短標籤（抽籤／交易），不加 $ 或金幣 */
.tile .price.lbl::before { content: none !important; }
/* 設定齒輪、戰況紀錄、玩家詳情只在可愛主題（themes/c-base.css）顯示；a / b / classic 維持原樣 */
#gear, #settings, #log, #log-btn, .chip .more { display: none; }

/* ===== 主題骨架：網址有 ?theme=x 時才生效 =====
   index.html 會設 <html data-theme="x"> 並在本檔之後載入 themes/x.css。
   這裡只管「版面」（格子分段、棋子站台、中間區、電腦三欄、手機大按鈕），
   顏色、字型、裝飾全部交給 themes/x.css —— 新增主題 = 新增一個 CSS 檔。 */
[data-theme] .screen:not(#game) { max-width: 640px; margin: 0 auto; }
[data-theme] #board { container-type: inline-size; gap: 3px; }
[data-theme] .tile { padding: 0; align-items: stretch; justify-content: flex-start; font-size: clamp(9px, 2.9cqw, 17px); line-height: 1.15; }
[data-theme] .tile::before { content: none; }
[data-theme] .tile .hd { display: flex; align-items: center; justify-content: center; gap: 1px; flex: none; height: 1.35em; padding: 0 2px; overflow: hidden; white-space: nowrap; font-weight: 700; }
[data-theme] .tile .nm { overflow: hidden; }
[data-theme] .tile .stars { position: static; flex: none; font-size: .8em; letter-spacing: -1px; }
[data-theme] .tile .art { display: grid; place-items: center; position: relative; flex: 1; min-height: 0; overflow: hidden; }
[data-theme] .tile .ic { font-size: clamp(12px, 4.6cqw, 36px); line-height: 1; }
[data-theme] .tile .art:has(.tokens img) .ic { opacity: .25; }
/* 棋子站台：只佔 .art，永遠不蓋格名和價格；2 人並排，3～4 人 2×2 */
[data-theme] .tile .tokens { inset: 1px; align-items: center; flex-wrap: nowrap; gap: 1px; }
[data-theme] .tile .tokens img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
[data-theme] .tile .tokens.many img { height: 86%; max-width: 48%; aspect-ratio: 1; object-fit: cover; object-position: 50% 12%; border-width: 1.5px; }
[data-theme] .tile .tokens.many:has(> :nth-child(3)) { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, minmax(0, 1fr)); place-content: center; place-items: center; }
[data-theme] .tile .tokens.many:has(> :nth-child(3)) img { height: 100%; max-width: none; }
[data-theme] .tile .ft { display: grid; place-items: center; flex: none; height: 1.25em; }
[data-theme] .tile .price { font-size: 1em; }
[data-theme] .tile.corner .ft { display: none; }
[data-theme] .tile.corner .hd { order: 2; height: 1.9em; font-size: 1.1em; }
[data-theme] .tile.corner .ic { font-size: clamp(18px, 6.5cqw, 46px); }
/* 中間：輪數徽章、骰子、目前玩家 */
[data-theme] #center .info { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 5cqw 4cqw; }
[data-theme] #center .info .round { display: block; font-size: clamp(11px, 3.2cqw, 20px); padding: .3em 1.2em; }
[data-theme] #center .info .dice { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3cqw; font-size: clamp(34px, 11cqw, 76px); min-height: 1.2em; }
[data-theme] #center .dice small { display: block; width: 100%; font-size: clamp(10px, 2.8cqw, 17px); }
[data-theme] #center .turn { display: flex; align-items: center; gap: .5em; font-size: clamp(11px, 3cqw, 18px); padding: .35em 1em; }
[data-theme] #center .turn i { width: .7em; height: .7em; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
/* 手機：大按鈕 */
[data-theme] #actions button { flex: 1 1 40%; min-height: 52px; font-size: 18px; font-weight: 700; }
[data-theme] #actions p { font-size: 15px; }
/* 賣地選項（可能好幾塊）：字小一點；手機一塊一排，窄欄也不會把「拿回 $X」斷開 */
#actions button.sell, html[data-theme] #actions button.sell { min-height: 40px; font-size: 15px; padding: 6px 8px; }
@media (max-width: 1023px) { #actions button.sell, html[data-theme] #actions button.sell { flex: 1 1 100%; font-size: 14px; } }

/* 電腦（≥1024px）：左玩家、中棋盤（盡量高，不捲動）、右按鈕＋格子資訊 */
@media (min-width: 1024px) {
  [data-theme] #app { max-width: none; height: 100vh; padding: 12px 16px; }
  [data-theme] #game { --bs: min(calc(100vh - 100px), calc(100vw - 580px)); display: grid; grid-template-columns: minmax(220px, 1fr) var(--bs) minmax(260px, 1fr); grid-template-rows: auto 1fr; gap: 14px 24px; height: 100%; }
  [data-theme] #players-bar { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 10px; margin: 0; align-self: start; }
  [data-theme] .chip { grid-template-columns: 56px 1fr; column-gap: 10px; padding: 10px 12px; font-size: 16px; }
  [data-theme] .chip img { width: 56px; }
  [data-theme] .chip .m { width: 24px; vertical-align: middle; }
  /* 棋盤下方留 68px 給切入橫幅（#cutin top:100%），橫幅不推版面也不跑出畫面 */
  [data-theme] #board-wrap { grid-column: 2; grid-row: 1 / 3; width: var(--bs); align-self: start; }
  [data-theme] #actions { grid-column: 3; grid-row: 1; margin: 0; min-height: 0; flex-direction: column; align-items: stretch; padding: 14px; }
  [data-theme] #actions button { flex: none; }
  [data-theme] #inspector { grid-column: 3; grid-row: 2; position: static; left: auto; transform: none; align-self: start; min-width: 0; box-shadow: none; font-size: 16px; line-height: 1.7; }
}
/* 有地主的格子：價格條改顯示目前過路費，前面標「過路」（ID 選擇器壓過各主題的 $／金幣前綴） */
#board .tile .price.rent::before { content: '過路$'; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; color: inherit; font-size: .72em; margin-right: 1px; }

/* ===== 第一批擴充（決策 16），所有主題共用 ===== */
/* 比骰／送衰神：對手按鈕用他的代表色（!important 壓過各主題「第一顆按鈕」的強調色） */
html #actions button.who { background: var(--pc) !important; color: #fff !important; text-shadow: 0 1px 2px #0009 !important; border-color: #ffffff99 !important; }
/* 剛買下／搶下、這一輪別人不能搶：格名旁 🔒 */
.tile .lock { position: absolute; top: 2px; left: 2px; font-size: 8px; line-height: 1; }
[data-theme] .tile .lock { position: static; flex: none; font-size: .75em; margin-left: 1px; }
.tile .lock:empty { display: none; }
/* 玩家卡：🐦 小烏鴉罩你、下次搭計程車 */
.chip .ud, .chip .taxi { font-style: normal; white-space: nowrap; }
.more .ud { color: #2b4a6b; } /* 決策 31：🐦 小烏鴉罩你（取代欠菸猴） */
/* 黑羽審判：輪數徽章變紅、微微發光 */
html #center .info.judge .round { display: block; background: linear-gradient(180deg, #e3343f, #8e0f18) !important; color: #fff !important; border: 2px solid #ffc2c2 !important;
  border-radius: 999px; padding: .2em .9em; text-shadow: 0 1px 2px #000; font-weight: 900; animation: judge 1.6s ease-in-out infinite; }
html #center .info.judge .round::before { content: '⚖ '; }
@keyframes judge { 0%, 100% { box-shadow: 0 0 6px #ff304080; } 50% { box-shadow: 0 0 22px #ff3040e0; } }
/* 手機：輪到自己做選擇時（擲骰只在手上有牌時），按鈕區釘在畫面底部，所有選項不用捲動就看得到。
   按鈕兩個一排、小字；頁面底部同時留出面板高度（panels.js 設 #app padding-bottom），棋盤仍可捲上來看。 */
@media (max-width: 1023px) {
  html #actions.decide { position: fixed; left: 6px; right: 6px; bottom: 6px; z-index: 55; margin: 0; padding: 6px 8px 8px; min-height: 0; max-height: calc(100svh - 12px); overflow-y: auto;
    display: flex; flex-flow: row wrap; align-items: stretch; gap: 5px; background: var(--panel); border-radius: 16px; box-shadow: 0 -4px 18px #0006; clip-path: none; }
  html #actions.decide p { margin: 0; font-size: 13.5px; line-height: 1.3; }
  html #actions.decide .why { font-size: 12px; line-height: 1.3; }
  html #actions.decide button { flex: 1 1 calc(50% - 5px) !important; width: auto !important; min-width: 0 !important; min-height: 36px !important; margin: 0 !important; padding: 4px 6px !important; font-size: 13.5px !important; line-height: 1.2 !important; letter-spacing: 0 !important; }
  /* 擲骰前有手牌（panels.js .roll-cards）：左邊小一號的擲骰圓鈕，右邊上面提示、下面手牌小鈕兩個一排（🎯 遙控骰＋一行效果）；只有一張就佔滿右邊。
     小字說明省略（小鈕上已寫效果），面板矮一點、少蓋到棋盤 */
  html #actions.decide.many button { flex-basis: calc(33.3% - 6px) !important; min-height: 32px !important; }
  html #actions.decide.roll-cards { display: grid; grid-template-columns: auto 1fr 1fr; align-items: stretch; padding: 6px 8px 8px; }
  html #actions.roll-cards p { grid-column: 2 / -1; text-align: left; }
  html #actions.roll-cards .why { display: none; }
  html #actions.decide.roll-cards button[data-c="roll"] { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 80px !important; height: 80px; min-height: 0 !important; margin: 6px 10px 12px 6px !important; padding: 0 !important; font-size: 21px !important; }
  html #actions.decide:not(.roll-cards) button[data-c="roll"] { flex: 0 0 auto !important; width: 92px !important; height: 92px; margin: 2px auto 6px !important; padding: 0 !important; font-size: 23px !important; } /* 沒牌的擲骰：釘在底部、圓鈕置中 */
  html #actions.roll-cards button:nth-of-type(2):last-child { grid-column: 2 / -1; }
  html #actions.roll-cards .long { display: none; }
  html #actions.roll-cards .mini { display: block; font-size: 15px; }
  html #actions.roll-cards .mini small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; opacity: .85; }
}
#actions .mini { display: none; }

/* ===== 「怎麼玩」規則頁（src/ui/howto.js）：原生 <dialog>，所有主題共用；可愛主題的外觀在 themes/c-base.css ===== */
#help { position: fixed; top: 8px; right: 8px; z-index: 80; width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 20px; font-weight: 700; line-height: 1; }
[data-theme] #help { right: 54px; } /* 可愛主題：⚙ 在最右邊，? 排在它左邊 */
@media (max-width: 700px) { body:has(#game:not([hidden])) #help { display: none; } } /* 手機遊戲中玩家卡排滿上方，? 會蓋住卡片：遊戲中藏起來，首頁的「📖 怎麼玩」照樣能開 */
#howto-dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100svh - 32px); padding: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; border: 0; border-radius: 16px; background: var(--panel); color: var(--ink); }
#howto-dlg::backdrop { background: #0008; }
#howto-dlg .in { position: relative; padding: 18px 18px 22px; font-size: 15px; line-height: 1.6; }
#howto-dlg .x { position: sticky; top: 0; float: right; width: 34px; height: 34px; padding: 0; border-radius: 50%; }
#howto-dlg h2 { margin: 0 0 4px; text-align: center; font-size: 24px; }
#howto-dlg h3 { margin: 18px 0 6px; font-size: 18px; }
#howto-dlg p { margin: 6px 0; }
#howto-dlg .crew { display: flex; justify-content: center; gap: 6px; } #howto-dlg .crew img { height: 48px; image-rendering: pixelated; }
#howto-dlg .em { padding: 8px 12px; border-radius: 12px; background: #8881; text-align: center; font-weight: 700; }
#howto-dlg .em small { font-weight: 400; opacity: .8; }
#howto-dlg .steps { margin: 6px 0; padding-left: 1.6em; }
#howto-dlg .tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#howto-dlg .tiles > li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 12px; background: #8881; }
#howto-dlg .tiles .ic { width: 52px; height: 52px; object-fit: contain; }
#howto-dlg .tiles p { margin: 2px 0; font-size: 14px; }
#howto-dlg .ms { display: flex; gap: 8px; align-items: center; } #howto-dlg .ms img { width: 34px; height: 34px; object-fit: contain; flex: none; }
#howto-dlg .ms span > b:first-child { display: block; }
#howto-dlg h2:focus { outline: none; } /* showModal 把焦點放在標題，不要一打開 ✕ 就有焦點框 */
#howto-dlg .pic { text-align: center; } #howto-dlg .pic .smoke { height: 90px; border-radius: 8px; }
#howto-dlg .judge { display: flex; gap: 10px; align-items: center; } #howto-dlg .judge img { width: 84px; height: 84px; object-fit: cover; object-position: 50% 10%; border-radius: 12px; flex: none; background: #151a15; }
/* 烏鴉手牌（決策 18）：玩家卡上的小卡（自己的看得到圖示，別人的只看到卡背＝張數）、雙倍收租／護盾標記 */
.chip .hand, .more .hand, .chip .buff { font-style: normal; white-space: nowrap; }
.chip .hand, .more .hand { display: inline-flex; gap: 2px; vertical-align: middle; }
.chip .hand i, .more .hand i { display: inline-grid; place-items: center; width: 15px; height: 20px; font-style: normal; font-size: 11px; line-height: 1; background: #fff; border: 1.5px solid #c9a24a; border-radius: 3px; box-shadow: 0 1px 0 #0003; cursor: help; }
.chip .hand i.back, .more .hand i.back { background: repeating-linear-gradient(45deg, #2b2b3a 0 3px, #44445c 3px 6px); border-color: #e8c76a; cursor: default; }
.chip .buff { font-size: .8em; }
.more .cards { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.more .cards i { font-style: normal; font-size: 12px; font-weight: 700; color: #6b4a2b; padding: 1px 7px; border-radius: 999px; background: #fffaf0; border: 1.5px solid #c9a24a; cursor: help; }
.more .cards small { display: none; }
#sheet .more .cards { display: grid; gap: 6px; }
#sheet .more .cards i { border-radius: 12px; padding: 6px 10px; font-size: 15px; }
#sheet .more .cards small { display: block; font-weight: 400; font-size: 13px; line-height: 1.4; }
@media (min-width: 1024px) { [data-theme] .chip .more .cards { grid-column: 1 / -1; } }
#howto-dlg .cards .cd { display: grid; place-items: center; width: 42px; height: 54px; justify-self: center; font-size: 24px; background: #fff; border: 2px solid #c9a24a; border-radius: 8px; box-shadow: 0 2px 0 #0002; }
/* 決策 32：30 秒規則（一打開就看得到）＋遇到再看的折疊段；決定面板的「怎麼算」 */
#howto-dlg .quick { padding: 2px 12px 6px; border-radius: 14px; background: #8881; }
#howto-dlg .quick h3 { margin-top: 8px; }
#howto-dlg .nnote { font-size: 13px; opacity: .75; text-align: center; }
#howto-dlg details { margin: 8px 0; padding: 6px 12px; border-radius: 12px; border: 2px solid #8883; }
#howto-dlg summary { cursor: pointer; font-weight: 700; font-size: 17px; }
#howto-dlg summary small { display: block; margin-left: 1.1em; font-size: 13px; font-weight: 400; opacity: .75; }
#howto-dlg details[open] summary { margin-bottom: 6px; }
#actions .how { width: 100%; margin: 0; font-size: 12px; opacity: .8; text-align: center; }
#actions .how summary { cursor: pointer; display: inline; text-decoration: underline dotted; }
#actions .how[open] { text-align: left; }

/* 鍵盤數字提示（決策 20，ui/keys.js）：只在有滑鼠的電腦版顯示 */
#actions kbd.key { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  #actions button[data-key] { position: relative; }
  #actions kbd.key { display: block; position: absolute; left: -6px; top: -7px; z-index: 1; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
    font: 700 11px/18px system-ui, sans-serif; letter-spacing: 0; text-shadow: none; color: #fff; background: #000a; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
}

/* 提案 8：審判前 2 輪，輪數徽章下面的倒數小字 */
#center .round .soon { display: block; font-size: .72em; font-weight: 700; opacity: .9; }
/* 提案 9：第一名換人的小橫幅（2 秒，不擋點擊） */
.lead-toast { position: fixed; left: 50%; top: 10px; z-index: 65; transform: translateX(-50%); pointer-events: none; max-width: calc(100vw - 32px);
  padding: 6px 14px; border-radius: 999px; background: #222d; color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 2px solid var(--c, #fc0); box-shadow: 0 4px 12px #0006; animation: lead-toast 2.2s ease both; }
.lead-toast small { font-weight: 400; opacity: .85; margin-left: .4em; }
@keyframes lead-toast { 0% { opacity: 0; transform: translate(-50%, -12px); } 12%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }

/* 升級建築（board.js 的 .bld）：預設外觀只看 ★；有主題時 ★1 起建築取代格子圖示，★ 照樣留在格名旁邊 */
.tile .bld { display: none; }
[data-theme] .tile .bld:not([hidden]) { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 90%; }
[data-theme] .tile .art:has(.bld:not([hidden])) .ic { display: none; }
[data-theme] .tile .art:has(.tokens img) .bld { opacity: .45; }
[data-theme] .tile.pop .bld { animation: bld-pop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bld-pop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } }
/* 拆★：一團白煙（幾個圓疊起來）往上散開 */
[data-theme] .tile.puff .art::after { content: ''; position: absolute; inset: 15% 0 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 28% 62%, #fff 0 17%, #fff0 18%), radial-gradient(circle at 55% 42%, #fff 0 21%, #fff0 22%),
    radial-gradient(circle at 76% 66%, #fff 0 16%, #fff0 17%), radial-gradient(circle at 48% 76%, #fff 0 19%, #fff0 20%);
  filter: drop-shadow(0 1px 2px #0004); animation: bld-puff .7s ease-out forwards; }
@keyframes bld-puff { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.5) translateY(-20%); opacity: 0; } }
#inspector .bld { float: right; width: 84px; height: 84px; object-fit: contain; margin: -4px -6px 4px 8px; }
@media (prefers-reduced-motion: reduce) {
  [data-theme] .tile.pop .bld { animation: none; }
  [data-theme] .tile.puff .art::after { display: none; }
}

/* ===== 決策 23：再來一局＋本房戰績、結算稱號／名場面／戰報、快捷表情 ===== */
.record { margin: 10px 0; padding: 6px 12px; border-radius: 12px; background: #8882; font-weight: 700; font-size: 14px; }
.record::before { content: '🏆 '; }
#lobby .hint { margin: 6px 0 0; font-size: 13px; opacity: .75; }
#lobby .hint:empty { display: none; }
#scene { margin: 6px 0 10px; padding: 8px 12px; border-radius: 12px; background: #ffd54f33; border: 2px solid #ffd54f; font-weight: 700; font-size: 15px; }
/* P5：名場面＋招牌地產／最痛踩雷／復仇焦點，一行一項；招牌地產升級過就放建築圖 */
#scene > span { display: block; }
#scene > span + span { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #ffd54f; }
#scene .bld { width: 40px; height: 40px; object-fit: contain; vertical-align: middle; margin: -6px 4px -6px 0; }
.record .feud { display: block; margin-top: 2px; }
#ranking .title { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; color: #fff; background: var(--c); vertical-align: 1px; }
.result-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.result-btns button { min-height: 44px; font-weight: 700; }
#report { display: block; width: 100%; margin: 0 0 10px; font: 14px/1.5 inherit; padding: 8px; border-radius: 8px; }
[data-theme] .record { background: #fff; color: var(--pink-d); border: 2px solid #ffd6e4; }
[data-theme] #scene { background: #fff8dc; color: #6b4a2b; }
[data-theme] .result-btns button { border-radius: 16px; background: #fff; color: var(--pink-d); border: 2px solid #ffd6e4; box-shadow: 0 3px 0 #ffd6e4; }
/* AI 對打第 8 回（1280×720）：結算要捲才按得到回首頁。按鈕區釘在結算卡底部（頁面再長也看得到）；
   電腦再把名場面兩欄、名次 2×2，4 人局 1280×720／1366×768 整張不用捲 */
.result-foot { position: sticky; bottom: 0; z-index: 2; padding: 8px 0 10px; background: var(--panel); }
.result-foot .result-btns { margin: 0 0 8px; }
html[data-theme] #result.screen { --px: 16px; padding-bottom: 0; }
[data-theme] .result-foot { margin: 0 calc(-1 * var(--px)); padding: 10px var(--px) 14px; background: #fffffff5; border-radius: 0 0 25px 25px; box-shadow: 0 -8px 12px -10px #c0708a55; }
@media (max-width: 1023px) { [data-theme] #again { min-height: 44px; font-size: 17px; } }
@media (min-width: 1024px) {
  html[data-theme] #result.screen { --px: 18px; max-width: min(900px, calc(100vw - 300px)); margin: 16px auto; padding: 14px var(--px) 0; } /* 右上角留給 ⚙ ? 💬 */
  html[data-theme] #result h2 { margin-bottom: 8px; }
  html[data-theme] #scene { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 0 0 10px; padding: 6px 12px; font-size: 14px; }
  html[data-theme] #scene > span + span { margin: 0; padding: 0; border: 0; }
  html[data-theme] #scene .bld { width: 32px; height: 32px; }
  html[data-theme] #ranking { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
  html[data-theme] #ranking li { margin: 0; align-items: flex-start; }
  html[data-theme] #ranking img { height: 84px; }
  html[data-theme] #ranking b { font-size: 17px; }
  html[data-theme] #result .record { margin: 10px 0 0; }
}

/* 💬 快捷表情：右上角 ⚙／? 下面（手機遊戲中玩家卡右邊留給 ⚙ 的那一欄），電腦版排在 ? 左邊 */
#emote-btn { display: none; position: fixed; top: 52px; right: 8px; z-index: 79; width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 19px; line-height: 1; }
body:has(#lobby:not([hidden]), #game:not([hidden]), #result:not([hidden])) #emote-btn { display: grid; place-items: center; }
#emote-pick { position: fixed; top: 96px; right: 8px; z-index: 82; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: min(300px, calc(100vw - 16px)); padding: 10px;
  border-radius: 16px; background: var(--panel); box-shadow: 0 6px 20px #0008; }
#emote-pick button { padding: 7px 6px; font-size: 13px; text-align: left; border-radius: 10px; }
#emote-pick label { grid-column: 1 / -1; font-size: 12px; opacity: .8; }
.emote-bubble { position: fixed; z-index: 66; transform: translateX(-50%); pointer-events: none; width: max-content; max-width: 180px; /* max-content：放在靠右的位置時不會被右邊剩下的寬度擠到換行 */ padding: 5px 11px; border-radius: 14px;
  background: #fff; color: #333; font-weight: 700; font-size: 14px; border: 2.5px solid var(--c, #888); box-shadow: 0 3px 10px #0005; animation: emote-pop 2.5s ease both; }
/* 尾巴：.below 朝上指卡片；.inside（泡泡在自己那一塊的右邊）朝左指向自己的頭像／名字；.over（手機疊在立繪上）朝下指名字 */
.emote-bubble.below::before { content: ''; position: absolute; left: 50%; top: -8px; margin-left: -6px; border: 6px solid transparent; border-top: 0; border-bottom: 8px solid var(--c, #888); }
.emote-bubble.over::before { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top: 8px solid var(--c, #888); }
.emote-bubble.inside::before { content: ''; position: absolute; left: -9px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left: 0; border-right: 8px solid var(--c, #888); }
.emote-bubble small { display: block; font-size: 10px; font-weight: 400; color: #777; }
.emote-bubble.pic.over { padding: 4px 7px; font-size: 13px; line-height: 1.35; text-align: center; } /* 決策 26：疊在頭像上，縮到頭像寬 */
.emote-bubble.pic small { display: none; }
.emote-bubble.pic.tight { padding: 3px 4px; font-size: 12px; line-height: 1.25; }
@keyframes emote-pop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); } 10%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; } }
[data-theme] #emote-btn { color: var(--pink-d); background: #fff; border: 2px solid #ffd6e4; box-shadow: 0 3px 0 var(--line), 0 6px 14px #e8588a33; }
[data-theme] #emote-pick { background: #fff; border: 3px solid #ffd6e4; }
[data-theme] #emote-pick button { background: #fff0f5; color: #6b3a4d; border: 1.5px solid #ffd6e4; }
[data-theme] #emote-pick label { color: #6b3a4d; }
/* 決策 25：手機的大廳／結算沒有玩家卡那一欄，💬 排在 ? 左邊同一列（原本在 ⚙ 下面，壓到白色面板的右上角） */
@media (max-width: 1023px) {
  body:has(#lobby:not([hidden]), #result:not([hidden])) #emote-btn { top: 8px; right: 54px; }
  [data-theme] body:has(#lobby:not([hidden]), #result:not([hidden])) #emote-btn { right: 100px; }
  body:has(#lobby:not([hidden]), #result:not([hidden])) #emote-pick { top: 54px; }
}
@media (min-width: 1024px) {
  [data-theme] #emote-btn { top: 12px; right: 100px; }
  [data-theme] #emote-pick { top: 58px; right: 60px; }
}

/* ===== 黑羽招商熱區（決策 27，P6；board.js .hot／.fz）：那一邊的地掛小燈籠＋金色虛線框，中間輪數下面一條小橫幅；有人拿走就全部拿掉 ===== */
.tile .fz { display: none; }
#board .tile.hot .fz { display: block; position: absolute; left: 2px; top: 2px; z-index: 4; font-size: max(12px, 1.35em); line-height: 1; pointer-events: none;
  filter: drop-shadow(0 1px 1px #0007); transform-origin: 50% 0; animation: fz-sway 2.8s ease-in-out infinite; }
#board .tile.hot { outline: 2px dashed #f0a83a; outline-offset: -3px; background-image: linear-gradient(180deg, #ffd45a55, #ff9f2a33); }
#board .tile.hot .nm { box-shadow: 0 0 0 2px #ffbf3c, 0 0 10px 3px #ffc95acc; } /* 鯨魚城的格子幾乎透明，格名膠囊發金光才看得出來 */
@keyframes fz-sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
#center .round .fz { display: block; width: max-content; margin: .35em auto 0; padding: .15em .8em; border-radius: 999px; font-size: .72em; font-weight: 800; white-space: nowrap;
  background: linear-gradient(180deg, #ffd780, #ee962f); color: #4a2300; border: 1px solid #fff6; box-shadow: 0 1px 4px #0004; text-shadow: none; }
@media (prefers-reduced-motion: reduce) { #board .tile.hot .fz { animation: none; } }
/* 有短字的按鈕（決策 27 闖出去；決策 28 特許施工、做假帳、59，panels.js miniOf）：手機做選擇時按鈕兩個一排，長字換成短字 */
@media (max-width: 1023px) {
  html #actions.decide button .long { display: none; }
  html #actions.decide button .mini { display: block; }
  html #actions.decide button .mini small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; opacity: .85; }
}

/* 決策 33：第一次看到的說明泡泡（src/ui/coach.js）。不吃點擊，點任何地方就收起 */
#coach { position: absolute; z-index: 90; max-width: min(300px, calc(100vw - 16px)); padding: 7px 11px; border-radius: 12px; background: #2b2233; color: #fff; font-size: 13px; line-height: 1.45;
  box-shadow: 0 4px 14px #0006; pointer-events: none; animation: coach-in .2s ease-out; }
#coach::before { content: ''; position: absolute; left: calc(var(--ax) - 7px); border: 7px solid transparent; }
#coach.below::before { bottom: 100%; border-bottom-color: #2b2233; }
#coach.above::before { top: 100%; border-top-color: #2b2233; }
@keyframes coach-in { from { opacity: 0; transform: translateY(4px); } }
.chip .ud, .chip .judge, #center .round .soon, #center .round .fz, .tile .lock { cursor: help; }
/* 決策 33：手機輪到自己時，釘底面板（z 55）蓋住棋盤下緣的切入橫幅的下半（雙倍收租的說明那一行）。橫幅疊到面板上面（不吃點擊） */
@media (max-width: 1023px) { #cutin { z-index: 56; } }
/* 決策 33：手機上方是玩家卡和 ⚙（z 80），小橫幅一行放不下（菸猴「第一名不跟你玩w」被切掉）：改放棋盤中間、兩行 */
@media (max-width: 700px) {
  .lead-toast { top: 32svh; white-space: normal; text-align: center; border-radius: 16px; width: max-content; }
  .lead-toast small { display: block; margin: 2px 0 0; }
}
/* 決策 34（第 5 輪 P4／P5）：棋盤上的落點預覽、要賣的地：粗虛線外框＋小牌子（字，不只靠顏色）；選了的實線 */
#board .tile.aim { outline: 3px dashed #1f6feb; outline-offset: -3px; }
#board .tile.aim-on { outline: 3px solid #d0302c; }
#board .tile .aimtag { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 6; padding: 1px 4px; border-radius: 6px; background: #1f2a44; color: #fff;
  font-size: max(10px, .8em); font-weight: 700; line-height: 1.2; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 3px #0007; }
#board .tile.aim-on .aimtag { background: #b3261e; }
/* 控骰的點數鈕：大字點數＋一行小字預覽；選了的壓下去 */
#actions button.aimv small { display: block; font-size: 12px; font-weight: 400; opacity: .9; margin-top: 1px; }
#actions button.aimv.on, #actions button.sell.on { box-shadow: inset 0 0 0 3px #d0302c !important; transform: translateY(1px); }
html #actions button.go { font-weight: 900; background: #d0302c !important; color: #fff !important; border-color: #fff !important; }
#actions button:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { #actions button.aimv.on, #actions button.sell.on { transform: none; } }