* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #11151c;      /* 更深、更冷：讓上面每一層都讀成「被照亮的」 */
  --panel: #212a34;   /* 側欄 */
  --panel2: #313d42;  /* 卡片：偏青綠，打破單一色相（原本四色色相跨度只有 2°）*/
  --line: #4e6069;    /* 邊框提亮，讓面板交界真的存在 */
  --text: #f1f5f8;
  --dim: #a2b0b8;
  --accent: #ffb648;  /* 店的品牌橘：只當填色、不當文字色 */
  --green: #5ecb7b;
  --red: #ff6b6b;
  --blue: #6db3ff;
}
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  display: flex; flex-direction: column;
  overflow: hidden;
  user-select: none;
}
#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 10px;
  background: var(--panel);
  border-bottom: none;
  flex-wrap: wrap;
  position: relative;
}
/* 頂欄下緣＝門楣招牌的識別帶：跟場景用同一套品牌語言 */
#topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background: linear-gradient(to bottom, #008061 0 4px, #f37021 4px 7px);
}
.brand { font-size: 18px; font-weight: 700; color: var(--accent); margin-right: 6px; }
.stat {
  background: var(--panel2); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 8px; font-size: 14px;
  display: flex; gap: 6px; align-items: center; white-space: nowrap;
}
.stat .ico { opacity: .9; }
.spacer { flex: 1; }
button {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 12px; font-size: 14px; cursor: pointer;
  font-family: inherit;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #1d1608; font-weight: 700; border-color: var(--accent); }
button.primary:hover { filter: brightness(1.08); }
button.danger { background: #5b2b2b; border-color: #7c3b3b; }
button:disabled { opacity: .45; cursor: not-allowed; }
select {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 6px; font-size: 12px; font-family: inherit;
}
#speed-controls { display: flex; gap: 4px; }
.spd { padding: 6px 10px; }
.spd.active { background: var(--blue); color: #10233a; font-weight: 700; border-color: var(--blue); }

main { flex: 1; display: flex; min-height: 0; }
#canvas-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: auto; padding: 12px;
}
canvas { border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.45); image-rendering: auto; }
#phase-banner {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  background: rgba(20,24,32,.85); border: 1px solid var(--line);
  padding: 5px 16px; border-radius: 999px; font-size: 13px; color: var(--dim);
  pointer-events: none;
}
#sidebar {
  width: 340px; background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
#tabs { display: flex; border-bottom: 1px solid var(--line); }
.tab {
  flex: 1; border: none; border-radius: 0; background: transparent;
  padding: 10px 4px; font-size: 14px; color: var(--dim);
  border-bottom: 2px solid transparent;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); background: var(--panel2); }
#tab-content { flex: 1; overflow-y: auto; padding: 12px; }

.section-title { font-size: 13px; color: var(--dim); margin: 12px 0 6px; letter-spacing: 1px; }
.section-title:first-child { margin-top: 0; }

.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pal-item {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; cursor: pointer; text-align: center; font-size: 13px;
}
.pal-item:hover { border-color: var(--accent); }
.pal-item.selected { border-color: var(--accent); background: #4a4030; }
.pal-item.locked { opacity: .4; cursor: not-allowed; }
.pal-item .big { font-size: 24px; display: block; }
.pal-item .cost { color: var(--accent); font-size: 12px; }

.row {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; margin-bottom: 6px; font-size: 13px;
}
.row .grow { flex: 1; min-width: 0; }
.row .name { font-weight: 600; }
.row .sub { color: var(--dim); font-size: 12px; }
.row button { padding: 3px 8px; font-size: 12px; }
.mini { padding: 2px 7px; font-size: 12px; }

.pricebox { display: flex; align-items: center; gap: 4px; }
.pricebox .val { min-width: 38px; text-align: center; font-weight: 700; color: var(--accent); }

table.report { width: 100%; border-collapse: collapse; font-size: 12px; }
table.report th, table.report td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: right; }
table.report th { color: var(--dim); font-weight: 500; }
table.report td:first-child, table.report th:first-child { text-align: left; }
.pos { color: var(--green); } .neg { color: var(--red); }

#toasts { position: fixed; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; pointer-events: none; }
.toast {
  background: rgba(30,36,48,.95); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 8px 14px; border-radius: 8px; font-size: 13px;
  animation: slidein .2s ease-out;
  max-width: 340px;
}
.toast.bad { border-left-color: var(--red); }
.toast.good { border-left-color: var(--green); }
@keyframes slidein { from { transform: translateX(-20px); opacity: 0; } to { transform: none; opacity: 1; } }

#modal-overlay {
  position: fixed; inset: 0; background: rgba(10,12,18,.7);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
#modal-overlay.hidden { display: none; }
#modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 26px; min-width: 380px; max-width: 560px; max-height: 82vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
#modal h2 { font-size: 19px; margin-bottom: 12px; color: var(--accent); }
#modal h3 { font-size: 14px; margin: 12px 0 6px; color: var(--dim); }
#modal p { font-size: 14px; line-height: 1.7; margin-bottom: 8px; }
#modal .settle-table { width: 100%; font-size: 14px; border-collapse: collapse; margin: 8px 0; }
#modal .settle-table td { padding: 5px 4px; border-bottom: 1px dashed var(--line); }
#modal .settle-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
#modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.hint { font-size: 12px; color: var(--dim); line-height: 1.6; margin-top: 8px; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11px; background: var(--panel); border: 1px solid var(--line); color: var(--dim); }

.event-card {
  display: flex; gap: 10px; align-items: center;
  background: linear-gradient(135deg, #3a3320, #2f3446);
  border: 1px solid var(--accent); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px;
}
.event-card.compact { padding: 7px 10px; margin: 8px 0; }
.event-card .ev-emoji { font-size: 26px; flex-shrink: 0; }
.event-card .ev-name { font-weight: 700; color: var(--accent); font-size: 14px; }
.event-card .ev-desc { font-size: 12px; color: var(--dim); line-height: 1.5; margin-top: 2px; }

.hidden { display: none !important; }
.lock-teaser {
  background: var(--panel2); border: 1px dashed var(--line); border-radius: 10px;
  padding: 14px; text-align: center; color: var(--dim); font-size: 13px; margin-bottom: 8px;
}
.lock-teaser .big { font-size: 24px; display: block; margin-bottom: 4px; }

/* 成就徽章：底座圖 + emoji 疊加 */
.ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 10px; }
.ach { text-align: center; }
.ach .badge-wrap { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.ach .badge-wrap img { width: 64px; height: 64px; display: block; }
.ach .badge-wrap .sym {
  position: absolute; left: 0; top: 1px; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.ach.locked .badge-wrap { filter: grayscale(0.72) brightness(0.5); }
.ach.locked .badge-wrap .sym::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,250,240,.28); z-index: -1;
}
.ach .badge-wrap .sym { z-index: 1; }
.ach .badge-wrap { z-index: 0; }
/* 永久強化列表：稀有度左邊框 */
.row.rar-common { border-left: 3px solid #8a93a5; }
.row.rar-rare   { border-left: 3px solid #6db3ff; }
.row.rar-epic   { border-left: 3px solid #b07df0; }
.ach .ach-name { font-size: 12px; margin-top: 4px; font-weight: 600; }
.ach.locked .ach-name { color: var(--dim); font-weight: 400; }
.ach .ach-desc { font-size: 10px; color: var(--dim); line-height: 1.4; }

/* 轉生強化卡 */
.perk-cards { display: flex; gap: 12px; justify-content: center; margin: 14px 0; }
.perk-card {
  position: relative; width: 120px; height: 160px; cursor: pointer;
  transition: transform .15s;
}
.perk-card:hover { transform: translateY(-6px) scale(1.04); }
.perk-card img { position: absolute; inset: 0; width: 120px; height: 160px; }
.perk-card .pc-icon { position: absolute; left: 13px; top: 13px; width: 94px; height: 78px; display: flex; align-items: center; justify-content: center; font-size: 42px; }
.perk-card .pc-text { position: absolute; left: 13px; top: 104px; width: 94px; height: 42px; font-size: 11px; text-align: center; line-height: 1.35; color: #e8edf5; font-weight: 600; overflow: hidden; }
#chain-map { border-radius: 10px; display: block; margin: 8px auto; }

/* 待補貨面板與庫存狀態標示 */
.refill-panel {
  background: linear-gradient(135deg, #3a2f20, #33384a);
  border: 1px solid var(--accent); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px;
}
.refill-panel .rp-title { font-weight: 700; color: var(--accent); font-size: 13px; margin-bottom: 6px; }
.refill-panel .rp-item { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); padding: 2px 0; }
.refill-panel .rp-item .rp-cost { color: var(--text); font-variant-numeric: tabular-nums; }
.refill-panel .rp-all { width: 100%; margin-top: 8px; }
.refill-ok { background: var(--panel2); border: 1px solid var(--green); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; color: var(--green); }
.row.stock-empty { border-left: 3px solid var(--red); }
.row.stock-low { border-left: 3px solid var(--accent); }

/* 商品 row：兩行佈局（上資訊、下控制 flex-wrap），避免側欄擠爆跑版 */
.goods-row {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; margin-bottom: 6px;
}
.goods-row.stock-empty { border-left: 3px solid var(--red); }
.goods-row.stock-low { border-left: 3px solid var(--accent); }
.goods-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.goods-top .name { font-weight: 600; white-space: nowrap; }
.goods-top .sub { color: var(--dim); font-size: 11px; text-align: right; line-height: 1.4; }
.goods-ctrl { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ctrl-grp { display: flex; align-items: center; gap: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px 5px; }
.ctrl-lbl { font-size: 11px; color: var(--dim); }
.ctrl-val { min-width: 34px; text-align: center; font-weight: 700; font-size: 12px; color: var(--accent); }
.goods-ctrl .mini { padding: 1px 7px; }

/* 招牌風格選擇 */
.brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brand-item {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px; cursor: pointer; text-align: center; font-size: 12px;
}
.brand-item:hover { border-color: var(--accent); }
.brand-item.selected { border-color: var(--accent); background: #4a4030; }
.brand-bars { display: flex; height: 14px; border-radius: 4px; overflow: hidden; margin-bottom: 5px; border: 1px solid rgba(0,0,0,.3); }
.brand-bars span { flex: 1; }

/* 商品小圖示（SVG）：20px 才能脫離辨識門檻 */
.pico { width: 20px; height: 20px; vertical-align: -4px; }
.ach .badge-wrap img.sym { width: 30px; height: 30px; position: absolute; left: 17px; top: 18px; }

/* 快速模式：每日行動卡 */
.act-cards { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.act-card {
  flex: 1 1 96px; min-width: 96px;
  background: var(--panel2); border: 1px solid var(--line); border-left-width: 3px;
  border-radius: 10px; padding: 9px 8px; cursor: pointer; text-align: center;
  transition: transform .12s, border-color .12s;
}
.act-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.act-card.rar-common { border-left-color: #8a93a5; }
.act-card.rar-rare   { border-left-color: var(--blue); }
.act-card.rar-epic   { border-left-color: #b07df0; }
.act-card.picked { opacity: .4; cursor: default; transform: none; }
.act-card .ac-emoji { font-size: 26px; display: block; margin-bottom: 3px; }
.act-card .ac-name { font-weight: 700; font-size: 13px; }
.act-card .ac-desc { font-size: 11px; color: var(--dim); line-height: 1.4; margin: 3px 0 5px; }
.act-card .ac-cost { font-size: 12px; font-weight: 700; color: var(--accent); }
.act-card .ac-cost.free { color: var(--green); }
.card-done { background: var(--panel2); border: 1px solid var(--green); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--green); margin-bottom: 10px; }

/* 逼近破產：頂部現金欄閃爍警示，不只是數字變紅 */
.stat.danger-pulse { border-color: var(--red); animation: dangerPulse 1.1s ease-in-out infinite; }
@keyframes dangerPulse {
  0%, 100% { background: var(--panel2); box-shadow: none; }
  50% { background: #4a2226; box-shadow: 0 0 10px rgba(255,107,107,.55); }
}

/* 破關評價 */
.goal-rank { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; }
.gr-tier {
  width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: #1d1608; flex-shrink: 0;
}
.gr-S { background: linear-gradient(135deg, #ffd75e, #ff9f43); box-shadow: 0 0 18px rgba(255,184,72,.5); }
.gr-A { background: linear-gradient(135deg, #b9e7ff, #6db3ff); }
.gr-B { background: linear-gradient(135deg, #cfd8dc, #90a4ae); }
.gr-C { background: linear-gradient(135deg, #d7ccc8, #a1887f); }
.gr-name { font-size: 17px; font-weight: 700; color: var(--accent); }
.gr-desc { font-size: 12px; color: var(--dim); margin-top: 2px; }

/* 員工 row：沿用商品 row 的兩行佈局（上資訊、下控制 flex-wrap）。
   舊版把「姓名＋徽章／班別下拉／崗位下拉／解僱鈕」四個元素塞進同一列 flex，
   在 340px 側欄裡必然跑版：<select> 不會縮到比自己的選項文字窄，
   被擠掉的是 .grow，於是徽章換行、整列被撐高、下拉互相黏死。 */
.staff-row {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 8px; margin-bottom: 6px;
}
.staff-row.st-bad  { border-left: 3px solid var(--red); }
.staff-row.st-warn { border-left: 3px solid var(--accent); }
.staff-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.staff-top .grow { flex: 1; min-width: 0; }
.staff-top .name { font-weight: 600; font-size: 13px; }
.staff-top .sub { color: var(--dim); font-size: 11px; margin-top: 2px; }
.staff-top .mini { flex-shrink: 0; }
.staff-ctrl { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.staff-ctrl .ctrl-grp { flex: 1 1 130px; min-width: 0; }
.staff-ctrl select { flex: 1; min-width: 0; }
.ctrl-grp.static { flex: 1 1 100%; color: var(--dim); font-size: 11px; justify-content: center; }
/* 員工狀態改用顏色編碼：紅＝完全不產生價值、黃＝有在工作但打折、無標＝正常。
   「說明堆在卡片下方沒人會讀」——所以卡片上只留 2~4 個字的狀態晶片，完整後果放 title。
   **不只靠顏色**：每一級都有自己的圖示（⛔／⚠️）與文字，色盲玩家一樣分得出來。 */
.st-chip {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  padding: 2px 7px; border-radius: 99px; font-size: 11px; font-weight: 700;
  white-space: nowrap; cursor: help;
}
.st-chip.st-bad  { background: rgba(255,107,107,.16); color: var(--red);    border: 1px solid rgba(255,107,107,.45); }
.st-chip.st-warn { background: rgba(255,182,72,.14);  color: var(--accent); border: 1px solid rgba(255,182,72,.42); }
.st-chip.st-info { background: rgba(109,179,255,.14); color: var(--blue);   border: 1px solid rgba(109,179,255,.42); }
/* 分頁頂端的摘要：卡片一多，逐張掃也很慢。有問題才出現。 */
.staff-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.staff-summary .st-chip { cursor: default; font-size: 12px; padding: 3px 9px; }

/* 成就徽章的素材 fallback：SVG 載不到時，底座用純 CSS 的金屬圓盤、符號退回 emoji。
   契約要求「每個素材使用點都要有 fallback」，這兩個 <img> 原本是漏網的。 */
.ach .badge-wrap .badge-disc {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.25);
}
.ach .badge-wrap .badge-disc.tier-bronze { background: radial-gradient(circle at 34% 28%, #e0a172, #a4632f 62%, #6d3d18); }
.ach .badge-wrap .badge-disc.tier-silver { background: radial-gradient(circle at 34% 28%, #f2f6fa, #b3bfc9 62%, #74838f); }
.ach .badge-wrap .badge-disc.tier-gold   { background: radial-gradient(circle at 34% 28%, #ffe6a0, #e8b23c 62%, #9c6f14); }

/* 音訊控制：🔊（一鍵靜音）與 ▾（展開音量面板）做成一組分節控制。
   盲測時被讀成「兩顆不相干的按鈕」——原因是兩顆各自有邊框、中間沒有共用容器。
   改成外層一個框包住兩顆、內層按鈕透明、中間只留一條分隔線。 */
#audio-ctl {
  position: relative; display: flex;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
}
#audio-ctl:hover { border-color: var(--accent); }
#audio-ctl > button { background: transparent; border: none; border-radius: 0; }
#audio-ctl > button:hover { background: rgba(255,255,255,.07); }
#audio-ctl #btn-sound { border-right: 1px solid var(--line); }
#audio-ctl #btn-audio-more { padding: 6px 7px; font-size: 11px; color: var(--dim); }
#audio-ctl #btn-audio-more[aria-expanded="true"] { background: var(--line); color: var(--text); }
#audio-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 244px; padding: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
}
#audio-panel.is-muted .vol-row { opacity: .4; }
.vol-row { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.vol-row .vol-ico { font-size: 14px; }
.vol-row .vol-lbl { font-size: 12px; color: var(--dim); width: 30px; flex-shrink: 0; }
.vol-row .vol-val {
  font-size: 11px; color: var(--dim); width: 34px; text-align: right;
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.vol-row input[type=range] {
  flex: 1; min-width: 0; height: 4px; -webkit-appearance: none; appearance: none;
  background: var(--line); border-radius: 99px; cursor: pointer;
}
.vol-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: none; cursor: pointer;
}
.vol-row input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: none; cursor: pointer;
}
#vol-unmute { width: 100%; font-size: 12px; padding: 5px 8px; margin-bottom: 8px; }
.vol-hint { font-size: 11px; color: var(--dim); line-height: 1.5; }

/* 次要動作：有邊框的按鈕會跟「開始營業」爭視線，但這顆必須看得見
   （它是玩家卡住時唯一的出路）。所以留文字、去掉底色與邊框。 */
button.ghost {
  background: transparent; border-color: transparent;
  color: var(--dim); padding: 6px 8px; font-size: 13px;
}
button.ghost:hover { color: var(--text); border-color: var(--line); }

/* 總部支援的臨時店員：唯讀卡片。用虛線邊框＋藍色左緣跟玩家自己僱的人區隔——
   他不是你的員工，是借來的，第 3 天會走。 */
.staff-row.staff-temp {
  border-style: dashed; border-left: 3px solid var(--blue); border-left-style: solid;
}