/* 介面：政策島的奶油卡片 + GROW 的下方物品列 */
:root { --ink: #211d1d; --cream: #fff8f4; --coral: #db6a41; --yellow: #fcea8b; --line: #e9ded2; --shadow: 0 2px 8px #4a2a1414, 0 8px 24px #4a2a1410;
  /* 物品列的高度：一排 = 上 10 + 格 72 + 下 16；手機兩排見下面 ≤ 660 */
  --slots-h: 98px; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
button { font: inherit; color: var(--ink); min-height: 44px; border-radius: 9px; border: 0; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
button.primary { background: var(--ink); color: #fff; padding: 0 22px; font-weight: 700; }

.topbar { position: fixed; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { background: var(--cream); border-radius: 18px; padding: 10px 16px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: center; }
.brand b { color: var(--coral); font-size: 26px; line-height: .95; font-weight: 900; letter-spacing: -.02em; }
.brand span { font-weight: 700; font-size: 14px; }
.tools { display: flex; gap: 8px; }
.tools button { background: var(--cream); box-shadow: var(--shadow); padding: 0 14px; font-weight: 700; min-width: 44px; }
/* R51 靜音鍵（使用者 2026-11-08）：只有喇叭圖示的 44 px 方鍵，窄手機也不縮（.tools .mute 比下面 ≤ 420 的 .tools button 具體） */
.tools .mute { padding: 0; width: 44px; display: grid; place-items: center; }
.tools .mute svg { width: 26px; height: 26px; }
/* 重玩迴圈（計畫 12）：遊戲結束後 RESET 珊瑚底白字、每 1.6 s 輕輕放大一次；reduced-motion 不動 */
.tools button.glow { background: var(--coral); color: #fff; animation: reset-glow 1.6s ease-in-out infinite; }
@keyframes reset-glow { 0%, 70%, 100% { transform: scale(1); } 35% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .tools button.glow { animation: none; } }

.slots { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(8, 64px) 44px; gap: 6px; row-gap: 8px;
  background: #fff8f4e0; backdrop-filter: blur(10px); padding: 10px 12px 16px; border-radius: 18px; box-shadow: var(--shadow); }
/* 結束後隱藏選單（使用者 2026-11-06）：收起往下滑出畫面，邊緣一顆 44px 圓鍵叫回來；reduced-motion 不滑 */
.slots.sliding { transition: transform .3s; }   /* 只在收合／展開時帶 transition（R46，使用者 2026-11-06） */
.slots.collapsed { transform: translate(-50%, calc(100% + 40px)); }
.menu-tab { position: fixed; width: 44px; height: 44px; padding: 0; border-radius: 22px; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: #fff8f4e0; box-shadow: var(--shadow); display: none; }
.menu-tab.on { display: grid; place-items: center; }
.menu-tab svg { width: 26px; height: 26px; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .slots.sliding { transition: none; } }
.slot { position: relative; width: 64px; height: 72px; padding: 6px 4px 4px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 2px; }
.slot svg { width: 34px; height: 34px; }
.slot .name { font-size: 12px; font-weight: 700; }
.slot .lv { position: absolute; bottom: -9px; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: var(--coral); border-radius: 6px; padding: 1px 6px; }
.slot .lv:empty { display: none; }
/* 使用者 2026-11-06：放置順序圓牌（左上角，1–8），空的不顯示 */
.slot .n { position: absolute; top: -6px; left: -6px; width: 18px; height: 18px; border-radius: 9px; background: var(--ink); color: #fff; font: 900 11px/18px sans-serif; text-align: center; font-style: normal; }
.slot .n:empty { display: none; }
.slot.max .lv { background: var(--yellow); color: var(--ink); }
.slot:disabled { cursor: default; }
/* 放過的格只淡化圖示與名稱：順序圓牌與 Lv 標籤保持全亮（整批審查 2026-11-06：整格 opacity 會把圓牌一起變灰） */
.slot.placed svg, .slot.placed .name { opacity: .55; }
.slots.busy .slot:not(.placed) { opacity: .8; }
/* 跳過鍵（修正批次 max-skip §C）：物品列最後一格窄格，只有 Skip 圖示；一直在、不跳版面。沒有演出時停用（淡），
   演出中啟用：珊瑚底白圖示（正好跟演出中停用的物品格相反）。
   寬度（修正輪 1）：桌機 8 × 64 + 44 + 8 × 6 + 24 = 628，手機斷點 660 = 628 + 左右各 16（間距 8 時 644 寬、斷點 640，641–643 寬溢出） */
.skip { width: 44px; height: 72px; padding: 0; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line);
  display: flex; align-items: center; justify-content: center; }
.skip svg { width: 28px; height: 28px; }
.skip:disabled { opacity: .45; cursor: default; }
.skip:not(:disabled) { background: var(--coral); box-shadow: none; }
.skip:not(:disabled) svg { stroke: #fff; fill: #fff; }
/* 隱藏選單鍵改奶油色（使用者 2026-11-06）：不跟發光的 RESET 搶珊瑚色 */
.skip.hide:not(:disabled) { background: var(--cream); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.skip.hide:not(:disabled) svg { stroke: #211d1d; fill: #211d1d; }
@media (max-width: 660px) {
  :root { --slots-h: 178px; }   /* 兩排：10 + 72 + 8 + 72 + 16（列距照舊 8：.slots 的 gap 6 只是欄距、row-gap 8） */
  .slots { grid-template-columns: repeat(4, 64px) 44px; }
  .skip { grid-column: 5; grid-row: 1 / span 2; height: auto; }   /* 第 5 欄跨兩排 */
  .brand b { font-size: 20px; }
}
/* 窄手機：物品格 58、跳過欄 36——360 寬時整條 4 × 58 + 36 + 4 × 6 + 24 = 316 ≤ 328（左右各 16 px 邊距）；
   381 寬起是 4 × 64 + 44 + 4 × 6 + 24 = 348，邊距 ≥ 16.5 */
@media (max-width: 380px) {
  .slots { grid-template-columns: repeat(4, 58px) 36px; }
  .slot { width: 58px; }
  .skip { width: 36px; }
  .skip svg { width: 24px; height: 24px; }
}
/* 窄手機：頂欄（品牌卡＋?＋喇叭＋RESET）工具鍵縮左右邊距，高度照舊 44。
   R51 加了 44 px 喇叭鍵後，headless Chrome（沒有網頁字型、退回 sans-serif）量品牌卡與工具之間：320 寬 0（品牌卡被擠成「台北成長」直排）、
   360 寬 2.8、375 寬 17.8、390 寬 32.8 px（2026-11-08 R51 終審實測）——真手機字型較寬或放大字級時 360 寬就會擠到品牌卡（使用者拒絕過）。
   所以 ≤ 380 再收品牌卡的 padding／gap 與工具鍵距、RESET 邊距（每顆鍵仍 ≥ 44 × 44、RESET 的 glow 照舊），台北成長不折行；
   ≤ 340 品牌字與邊距再縮一級（寫在圖鑑那段的 ≤ 340 @media 裡）。收完同一套量法：320 寬 12.2、340 寬 32.2、360 寬 22.8、375 寬 37.8 px（381–420 照舊，390 寬 32.8）。
   （修正輪 1 前跳過鍵也在頂欄時，審稿量到 390 寬 24.7 px、375 寬 9.7、360 寬 0 並折行、320 寬品牌卡直排——所以跳過鍵移出頂欄，
   修正批次 max-skip 再放進物品列） */
@media (max-width: 420px) {
  .tools { gap: 6px; }
  .tools button { padding: 0 10px; }
}
@media (max-width: 380px) {
  .brand { padding: 8px 12px; gap: 8px; }
  .brand span { white-space: nowrap; }
  .tools { gap: 4px; }
  .tools button { padding: 0 8px; }
}

.card { box-sizing: border-box; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 32px)); background: var(--cream); border-radius: 22px; box-shadow: var(--shadow); padding: 22px 24px; text-align: center; }
.card h2 { margin: 4px 0 10px; color: var(--coral); font-size: 26px; font-weight: 900; }
.card ol { text-align: left; margin: 0 0 16px; padding-left: 1.3em; line-height: 1.9; font-weight: 700; }
.card .eyebrow { margin: 0; font: 700 10px ui-monospace, monospace; letter-spacing: 2px; color: #7a6f68; }
.card .line { margin: 0 0 14px; }

/* hover 只給滑鼠（觸控點過會黏住黃底） */
@media (hover: hover) {
  button.primary:hover { background: #3a3333; }
  .tools button:hover { background: var(--yellow); }
  .skip:hover:not(:disabled) { background: #c45a34; }
  .tools button.glow:hover { background: #c45a34; }
  .slot:hover:not(:disabled) { background: var(--yellow); }
}

/* 表演層（CSS2D 標籤）：外層只負責被 CSS2DRenderer 用 inline transform 定位，不能有 transform 動畫；動畫一律放內層 span */
/* GROW 風格的頭頂泡泡：符號或圖框；字級跟視窗高度走（§13.5：字 2vh、圖框 3vh，各有上下限） */
.bubble { pointer-events: none; }
.bubble span { display: inline-block; background: #fff; color: var(--ink); border-radius: 10px; padding: 2px 8px; font: 900 clamp(18px, 2vh, 36px) ui-monospace, monospace; box-shadow: 0 1px 4px #4a2a1440; white-space: nowrap; animation: bubble-pop .25s cubic-bezier(.3,1.6,.5,1); }
.bubble .icon { padding: 4px; line-height: 0; }
.bubble .icon svg { width: clamp(28px, 3vh, 52px); height: clamp(28px, 3vh, 52px); }
@keyframes bubble-pop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
/* 升級的那個東西上方 1 秒的 LEVEL UP：黃字墨線描邊往上升；掉級灰字往下掉 */
.levelup { pointer-events: none; }
/* 字型：粗黑體斜體（使用者 2026-10-26 選 D；Arial Black 全平台都有），不用等寬字；大小跟著視窗高度走，4K 螢幕上才看得到 */
.levelup span { display: block; font: italic 900 clamp(26px, 2.4vh, 44px)/1 "Arial Black", Impact, "Noto Sans TC", sans-serif; letter-spacing: .05em; color: #fcea8b; -webkit-text-stroke: 1.5px #211d1d;
  text-shadow: 1px 0 0 #211d1d, -1px 0 0 #211d1d, 0 1px 0 #211d1d, 0 -1px 0 #211d1d; white-space: nowrap; animation: levelup-rise 1s ease-out forwards; }
.levelup span.down { color: #7a6f68; animation-name: levelup-fall; }
/* 跳級：一個大一號的 LEVEL UP（2026-11-04 取代彈兩次） */
.levelup span.big { font-size: clamp(34px, 3.1vh, 57px); }
.levelup span.cjk { font-style: normal; letter-spacing: 0; -webkit-text-stroke-width: 1px; }
@keyframes levelup-rise { 0% { transform: translateY(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-24px); opacity: 0; } }
@keyframes levelup-fall { 0% { transform: translateY(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(24px); opacity: 0; } }

/* 手機橫放（使用者 2026-11-06 的截圖：底部物品列蓋掉四分之一的島）：物品列改成右側直排側欄，兩欄 48px、只留圖示，跳過鍵橫跨兩欄放最下面。
   放在寬度查詢之後才贏得過去；top 多 28px 讓出頂端工具列。 */
@media (orientation: landscape) and (max-height: 520px) {
  .slots { right: max(12px, env(safe-area-inset-right)); left: auto; bottom: auto; top: calc(50% + 28px); transform: translateY(-50%);
    grid-template-columns: repeat(2, 48px); gap: 6px; padding: 10px; }
  .slot { width: 48px; height: 48px; padding: 4px; }
  .slot svg { width: 28px; height: 28px; }
  .slot .name { display: none; }
  .slot .n { width: 16px; height: 16px; border-radius: 8px; font-size: 10px; line-height: 16px; }
  /* Lv 標籤收進格子裡（同 340 那一階）：掛在 bottom −9px 會壓到下一列，被下一列的順序圓牌蓋住「L」（整批審查 2026-11-06，land-end 截圖） */
  .slot .lv { bottom: 1px; font-size: 9px; padding: 0 3px; line-height: 11px; }
  .skip { grid-column: 1 / span 2; grid-row: 5; width: auto; height: 40px; }
  .skip.hide svg { transform: rotate(-90deg); }   /* 隱藏圖示朝下 → 朝右（把側欄推向右邊）；跳過圖示本來就朝右 */
  .slots.collapsed { transform: translate(calc(100% + 40px + env(safe-area-inset-right)), -50%); }
  .menu-tab { right: max(12px, env(safe-area-inset-right)); left: auto; bottom: auto; top: 50%; transform: translateY(-50%); }
  .menu-tab svg { transform: rotate(90deg); }   /* 朝左（向內拉出側欄） */
}

/* 矮視窗（使用者 2026-11-06）：瀏覽器裡橫放的視窗只有 ~280–332 px 高（狀態列＋網址列），360 的側欄（≈276 px、置中偏下 28）會蓋到 ?/RESET、底下一格被切掉。
   再縮一階：側欄貼在頂列（約 54 px）下方 top 62px、不置中；格 36×36、圖示 22、gap 4、padding 8、跳過／隱藏鍵 30 高，Lv 標籤收進格子裡（不再掛在底下）。
   高度 = 4×36 + 4×4（五列之間 4 個 gap）+ 30 + 2×8 = 206 ≤ 280 − 62 − 8（視窗最矮 280 時下緣仍留 12 px、至少 8 px）。 */
@media (orientation: landscape) and (max-height: 340px) {
  .slots { top: 62px; transform: none; grid-template-columns: repeat(2, 36px); gap: 4px; padding: 8px; }
  .slot { width: 36px; height: 36px; padding: 0; }   /* 這裡沒有 border-box：padding 0 才剛好 36 */
  .slot svg { width: 22px; height: 22px; margin-top: 3px; }
  .slot .n { width: 14px; height: 14px; border-radius: 7px; font-size: 9px; line-height: 14px; top: -5px; left: -5px; }
  .slot .lv { bottom: 1px; font-size: 8px; padding: 0 2px; line-height: 10px; }
  .slot, .skip { min-height: 0; }   /* 全域 button 有 min-height 44，不蓋掉就縮不下去 */
  .skip { height: 30px; }
  .slots.collapsed { transform: translate(calc(100% + 40px + env(safe-area-inset-right)), 0); }
  .menu-tab { top: 62px; transform: none; }
}
/* R45 結局圖鑑（使用者 2026-11-06）：怎麼玩卡片下方，4 欄結局磚；看過的點亮、沒看過灰磚問號、真結局黃框。卡片太高（矮手機）就在卡片裡捲 */
/* 先 vh 再 dvh：不支援 dvh 的瀏覽器用前者；手機網址列算進去時用後者 */
.card { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
.endings { border-top: 1.5px solid var(--line); padding-top: 12px; margin-bottom: 14px; }
.endings .eyebrow { text-align: right; margin-bottom: 8px; }
.endings .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ending { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.ending .icon { display: block; line-height: 0; }
.ending svg { width: 32px; height: 32px; }
/* 名稱一行不換行：最長六個字（賽博龐克台北、珍奶攤被吹走）在 360 寬手機的磚裡剛好放得下 10 px（11 px 會折成兩行） */
.ending .title { font-size: 10px; font-weight: 700; min-height: 1.4em; line-height: 1.4; white-space: nowrap; letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* 320 寬手機：六個字的名稱 10 px 也放不下，再縮一階；還是超出就省略號 */
@media (max-width: 340px) {
  .endings .grid { gap: 4px; }
  .ending .title { font-size: 9px; }
  /* 頂欄 ≤ 340 那一級（R51 終審，說明見頂欄窄手機那段註解；併在這一個 @media 裡） */
  .brand { padding: 8px 10px; gap: 6px; }
  .brand b { font-size: 16px; }
  .brand span { font-size: 12px; }
  .tools button { padding: 0 6px; }
}
.ending.unknown { background: #f1e9e2; }
.ending.true { box-shadow: inset 0 0 0 2px var(--yellow); }