/* 無中生城 — 遊戲殼 (階段 C0, docs/CC-C0遊戲殼.md, look per docs/ui/index.html 「UI 憲法」).
   One frame (.px), one button (.btn), one chip, one icon set, one scene frame. No border-radius, no soft shadows,
   no gradients. Colours: the 14 UI tokens below (the city itself uses DB32). */

@font-face { font-family: "Fusion Pixel 12"; src: url("/fonts/fusion-pixel-12px-zh_hant.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("/fonts/silkscreen.woff2") format("woff2"); font-display: swap; }

:root {
  --night: #16152a;     /* page / letterbox */
  --panel: #2a2942;     /* panel fill */
  --panel-hi: #3f3f74;  /* top bevel, hover */
  --panel-lo: #1f1e33;  /* bottom bevel */
  --edge: #0b0a16;      /* outer pixel outline */
  --rim: #847e87;       /* dividers */
  --text: #f2efff;
  --dim: #a9a6c6;
  --paper: #eec39a;     /* notes, letters, posted paper */
  --paper-ink: #45283c;
  --gold: #fbf236;      /* money, the one main action */
  --good: #6abe30;
  --warn: #df7126;
  --bad: #d95763;
  --info: #5fcde4;
  --f-pixel: "Fusion Pixel 12", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --f-num: "Silkscreen", "Fusion Pixel 12", ui-monospace, monospace;
  --f-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --px: 3px;
  --tap: 44px; /* minimum touch target */
  --hud: rgba(22, 21, 42, 0.86);
  /* older names, used inside the scenes */
  --bg: var(--panel-lo);
  --panel-2: var(--panel-lo);
  --line: var(--rim);
  --muted: var(--dim);
  --accent: var(--gold);
  --accent-soft: rgba(251, 242, 54, 0.12);
  color-scheme: dark;
}
* { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; min-height: 100%; background: var(--night); color: var(--text); font: 15px/1.6 var(--f-body); -webkit-text-size-adjust: 100%; }
/* no text highlight while tapping / dragging around the game (Tommy 2026-10-31); typing fields still select */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, canvas { -webkit-user-drag: none; }
h1, h2, h3 { font-family: var(--f-pixel); font-weight: 400; letter-spacing: 0.02em; }
.num { font-family: var(--f-num); font-weight: 400; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.error { color: var(--bad); min-height: 1.2em; margin: 6px 0 0; }
.muted, .dim { color: var(--dim); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.label { font: 12px var(--f-pixel); letter-spacing: 0.06em; color: var(--dim); }
.small-text { font-size: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- 元件 ---------- */
/* .px: the one panel. 3px pixel outline (corners notch by themselves), top light bevel, bottom dark bevel. */
.px {
  position: relative; background: var(--panel);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge),
    inset 0 var(--px) 0 0 var(--panel-hi), inset 0 calc(-1 * var(--px)) 0 0 var(--panel-lo);
}
.px.paper {
  background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge),
    inset 0 var(--px) 0 0 #f6dcbf, inset 0 calc(-1 * var(--px)) 0 0 #d9a066;
}
/* .btn (and every plain <button>): normal / hover / pressed sinks 2px. .gold = the one main action on a screen. */
button, .btn {
  font: 18px/1.2 var(--f-pixel); color: var(--text); background: var(--panel-hi); border: 0; cursor: pointer; min-height: 36px; padding: 6px 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; margin: 3px; touch-action: manipulation;
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 0 3px 0 0 #5b6ee1, inset 0 -5px 0 0 #2a2a58;
}
@media (hover: hover) { button:not(:disabled):hover, .btn:not(:disabled):hover { background: #4c4c8a; } }
button:not(:disabled):active, .btn.is-down {
  transform: translateY(2px); background: #35356a;
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 0 3px 0 0 #2a2a58, inset 0 -1px 0 0 #2a2a58;
}
button:focus-visible, .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
button:disabled { opacity: 0.5; cursor: default; }
button.gold, .btn.gold, button.primary {
  background: #d9a066; color: var(--paper-ink);
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 0 3px 0 0 #eec39a, inset 0 -5px 0 0 #8f563b;
}
@media (hover: hover) { button.gold:not(:disabled):hover, button.primary:not(:disabled):hover { background: #e3ad78; } }
button.small, .btn.small { min-height: 30px; padding: 3px 10px; font-size: 12px; }
button.danger, button.confirm.danger { color: var(--bad); }
button.ghost { background: transparent; box-shadow: none; }
/* chip: effects and states, always icon + number; colour by meaning */
.chip { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--f-pixel); padding: 2px 8px; background: var(--panel-lo); color: var(--dim); box-shadow: 0 0 0 2px var(--edge); }
.chip.good { color: var(--good); } .chip.bad { color: var(--bad); } .chip.warn { color: var(--warn); } .chip.info { color: var(--info); } .chip.gold { color: var(--gold); }
canvas.ico { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
canvas.ico.s { width: 18px; height: 18px; }
input, select, textarea { font: 15px var(--f-body); background: var(--panel-lo); color: var(--text); border: 0; padding: 8px 10px; min-height: 40px; box-shadow: inset 0 0 0 2px var(--edge), inset 0 3px 0 0 #0f0e1e; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; background: var(--bad); color: #fff; font: 11px/18px var(--f-num); text-align: center; margin-left: 4px; box-shadow: 0 0 0 2px var(--edge); }
.dot { position: absolute; right: 2px; top: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--bad); color: #fff; font: 11px/16px var(--f-num); text-align: center; box-shadow: 0 0 0 2px var(--edge); }
.dot:empty { min-width: 10px; width: 10px; height: 10px; padding: 0; }
.shake { animation: shake 2.4s infinite; }
@keyframes shake { 0%, 82%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 88% { transform: rotate(10deg); } 91% { transform: rotate(-8deg); } 94% { transform: rotate(5deg); } }
/* money: the number counts up (0.6 s) and "+$60" floats up from it */
.float { position: absolute; font: 20px var(--f-num); color: var(--gold); text-shadow: 2px 2px 0 var(--edge); pointer-events: none; white-space: nowrap; animation: floatup 1.4s ease-out forwards; z-index: 5; }
.float.bad { color: var(--bad); }
@keyframes floatup { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-46px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .shake, .float { animation: none; } .float { display: none; } }

/* ---------- auth ---------- */
#auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 16px; background: var(--night); }
.auth-box { padding: 24px; width: 100%; max-width: 380px; margin: var(--px); }
.auth-box h1 { margin: 0; font-size: 36px; letter-spacing: 0.1em; color: var(--gold); }
.tagline { color: var(--dim); margin: 4px 0 20px; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs button { flex: 1; min-height: var(--tap); }
.tabs button.active { background: #d9a066; color: var(--paper-ink); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font: 12px var(--f-pixel); color: var(--dim); }
.auth-form input { width: 100%; min-height: var(--tap); font-size: 16px; }
.auth-form button { min-height: var(--tap); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font: 12px var(--f-pixel); color: var(--dim); }
.radio-row { display: flex; gap: 10px; }
.radio-row label { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font: 15px var(--f-body); min-height: var(--tap); padding: 0 14px; background: var(--panel-lo); box-shadow: inset 0 0 0 2px var(--edge); flex: 1; }
.radio-row input { min-height: 0; width: 18px; height: 18px; box-shadow: none; }
.hint { font-size: 12px; color: var(--dim); margin-top: 16px; }

/* ---------- the game: the city is the floor ---------- */
#game { position: fixed; inset: 0; overflow: hidden; }
#map-layer { position: absolute; inset: 0; }
.city { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--night); touch-action: none; }
.city-canvas { display: block; image-rendering: pixelated; cursor: grab; }
.city-canvas:active { cursor: grabbing; }
.city-labels { position: absolute; inset: 0; pointer-events: none; }
/* map tags: a name on a dark plate with a 2px outline (UI 憲法 .tag); yours in gold */
.city-label { position: absolute; transform: translate(-50%, -50%); font: 12px/1.3 var(--f-pixel); padding: 1px 7px; background: rgba(11, 10, 22, 0.78); color: #fff; white-space: nowrap; box-shadow: 0 0 0 2px var(--edge); }
.city-label.decor { color: var(--dim); }
.city-label.construction { color: var(--paper); }
.city-label.small { font-size: 12px; padding: 0 4px; }
.city-label.mine { background: var(--gold); color: var(--paper-ink); }
.city-label.parcel { color: #f6b26b; }
.city-zoom { position: absolute; right: 16px; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.city-zoom button { min-width: var(--tap); min-height: var(--tap); padding: 0; font: 12px var(--f-num); }
.city-zoom button.on { background: #d9a066; color: var(--paper-ink); }
.city-loading { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); font: 12px var(--f-pixel); padding: 3px 10px; background: var(--hud); color: var(--dim); pointer-events: none; box-shadow: 0 0 0 2px var(--edge); }
.city-loading.hidden { display: none; }

/* ---------- HUD (floats over the map, the four corners) ---------- */
.hud { position: absolute; z-index: 20; display: flex; gap: 6px; }
.hud-tl { left: 16px; top: 14px; align-items: stretch; flex-wrap: wrap; right: 120px; }
.hud-tr { right: 16px; top: 14px; }
.hud-cell {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; background: var(--hud); margin: 3px;
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 0 3px 0 0 rgba(91, 110, 225, 0.55);
}
.hud-cell > div { position: relative; }
.hud-cell b { display: block; font: 18px/1.15 var(--f-num); color: var(--text); white-space: nowrap; }
.hud-cell small { display: block; font: 12px/1 var(--f-pixel); color: var(--dim); white-space: nowrap; }
.hud-cell .money { color: var(--gold); }
.hud-cell .money.neg { color: var(--bad); }
.hbar { width: 84px; height: 10px; background: var(--edge); position: relative; margin-top: 4px; }
.hbar i { position: absolute; top: 2px; bottom: 2px; left: 2px; background: var(--good); }
.hbar i.hot { background: var(--gold); }
.perf-num { display: none !important; }
.icon-btn {
  width: 52px; height: 52px; min-width: 52px; padding: 0; display: grid; place-items: center; background: var(--hud); position: relative;
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 0 3px 0 0 rgba(91, 110, 225, 0.55);
}
.icon-btn canvas { width: 30px; height: 30px; image-rendering: pixelated; }
.me-btn {
  position: absolute; z-index: 20; left: 16px; bottom: 16px; justify-content: flex-start; gap: 10px; padding: 6px 14px 6px 6px; background: rgba(22, 21, 42, 0.9); max-width: min(300px, calc(50vw - 24px));
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 0 3px 0 0 rgba(91, 110, 225, 0.55);
}
.avatar { width: 44px; height: 44px; flex: none; background: #5b6ee1 url(/img/ui/worker1.png) center 4px / 40px auto no-repeat; box-shadow: 0 0 0 2px var(--edge); image-rendering: pixelated; }
.avatar.big { width: 56px; height: 56px; background-size: 52px auto; }
.me-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.me-text b { font: 18px/1.2 var(--f-pixel); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.me-text small { font: 12px/1.3 var(--f-body); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chat-pill {
  position: absolute; z-index: 20; right: 16px; bottom: 16px; justify-content: flex-start; gap: 10px; width: 330px; max-width: calc(50vw - 24px); padding: 8px 12px; background: rgba(22, 21, 42, 0.9);
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge);
}
.chat-preview { font: 13px var(--f-body); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-align: left; }
.chat-preview b { color: var(--info); font-weight: 500; margin-right: 6px; }

/* ---------- the scene frame: 640×360 view + its lists; one at a time ---------- */
.scene {
  position: absolute; z-index: 30; left: 50%; top: 84px; transform: translateX(-50%); width: min(686px, calc(100vw - 32px));
  max-height: calc(100vh - 84px - 90px); max-height: calc(100dvh - 84px - 90px); display: flex; flex-direction: column; margin: 0;
}
.scene .grab { display: none; }
.scene-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 6px 8px; flex: none; }
.scene-bar .btn.back { min-height: 34px; padding: 2px 10px; font-size: 18px; flex: none; }
.scene-bar h3 { font-size: 18px; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-bar .sub { margin-left: auto; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#content { flex: 1; min-height: 0; overflow: auto; padding: 4px 20px 16px; overscroll-behavior: contain; }
#content h2 { margin: 0 0 12px; font-size: 18px; }
#content h3 { margin: 18px 0 8px; font-size: 18px; color: var(--dim); }
.scene.wide { width: min(980px, calc(100vw - 32px)); }

/* ---------- drawers: 「我」 (left) and chat (right) ---------- */
.drawer { position: absolute; z-index: 35; padding: 14px; display: flex; flex-direction: column; margin: 0; }
.drawer-left { left: 16px; bottom: 90px; width: 300px; max-height: calc(100vh - 84px - 100px); max-height: calc(100dvh - 84px - 100px); overflow-y: auto; transform: translateX(calc(-100% - 40px)); transition: transform 0.18s; }
.drawer-right { right: 16px; bottom: 90px; width: 360px; height: min(520px, calc(100vh - 84px - 100px)); height: min(520px, calc(100dvh - 84px - 100px)); transform: translateX(calc(100% + 40px)); transition: transform 0.18s; }
body.open-me #me-drawer, body.open-chat #chat-drawer { transform: none; }
#drawer-shade { position: absolute; inset: 0; z-index: 34; background: transparent; }
/* desktop: the 「我」 and chat buttons stay above the shade, so clicking one again closes its drawer (a phone's drawer covers them and has 關閉) */
@media (min-width: 900px) { body.open-me .me-btn, body.open-chat .chat-pill { z-index: 36; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.me-card { display: flex; gap: 10px; align-items: center; padding: 6px 0 12px; border-bottom: 2px solid var(--panel-lo); margin-bottom: 8px; }
.me-card .big { font: 18px var(--f-pixel); }
.me-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; font-size: 13px; }
.me-facts dt { color: var(--dim); font: 12px var(--f-pixel); padding-top: 2px; }
.me-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.me-nav { display: flex; flex-direction: column; }
.me-nav .nav { justify-content: flex-start; width: calc(100% - 6px); min-height: var(--tap); }
.me-nav .nav.active { background: #d9a066; color: var(--paper-ink); }
.help { font-size: 12px; color: var(--dim); margin-top: 14px; line-height: 1.5; }
#devtools { margin-top: 14px; font-size: 13px; }
#devtools summary { color: var(--dim); cursor: pointer; min-height: 32px; display: flex; align-items: center; font: 12px var(--f-pixel); }
.dev-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* chat */
.chat-tabs { display: flex; gap: 6px; }
.chip-tab { font: 18px var(--f-pixel); min-height: 36px; padding: 2px 12px; }
.chip-tab[aria-selected="true"] { background: #d9a066; color: var(--paper-ink); }
#chat-log { flex: 1; overflow-y: auto; font-size: 14px; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; min-height: 0; padding: 8px; background: var(--panel-lo); box-shadow: inset 0 0 0 2px var(--edge); }
.msg { overflow-wrap: anywhere; }
.msg .who-name { color: var(--info); font-weight: 600; }
.msg .time { color: var(--dim); font-size: 11px; margin-left: 6px; }
#chat-form { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
#chat-input { flex: 1; min-width: 0; }

/* ---------- modals: event, confirm, name card ---------- */
.modal { position: fixed; inset: 0; background: rgba(11, 10, 22, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal-box { padding: 20px; width: 100%; max-width: 460px; max-height: 100%; overflow-y: auto; margin: var(--px); }
.modal-kind { font: 12px var(--f-pixel); color: var(--info); letter-spacing: 0.1em; }
.modal-kind.hot { color: var(--bad); }
.ev-text { font: 18px/1.5 var(--f-pixel); margin: 6px 0 14px; }
#ev-options { display: flex; flex-direction: column; gap: 4px; }
.ev-opt { justify-content: space-between; text-align: left; gap: 10px; padding: 8px 12px; min-height: 52px; background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); font-size: 14px; flex-wrap: wrap; }
@media (hover: hover) { .ev-opt:not(:disabled):hover { background: var(--panel-hi); } }
.ev-opt .hint { color: var(--dim); font: 12px var(--f-body); margin: 0; }
.ev-opt:disabled { opacity: 0.45; }
.ev-footer { margin-top: 10px; font: 12px var(--f-pixel); color: var(--dim); display: flex; justify-content: space-between; gap: 8px; }
.ev-status { color: var(--gold); }
.modal.confirm-modal { z-index: 60; }
.confirm-box { max-width: 400px; text-align: center; }
.confirm-text { font: 18px/1.6 var(--f-pixel); margin: 0 0 18px; white-space: pre-line; overflow-wrap: anywhere; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-actions button { flex: 1; max-width: 170px; min-height: var(--tap); }
.confirm-actions .confirm-ok.danger { background: var(--bad); color: #fff; box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 0 3px 0 0 #e88a93, inset 0 -5px 0 0 #8a2f3c; }
body.confirm-open, body.card-open { overflow: hidden; }
.modal.card-modal { z-index: 55; }
.card-box { max-width: 360px; }
.card-kicker { font: 12px var(--f-pixel); letter-spacing: 0.15em; color: var(--dim); }
.card-name { margin: 2px 0 12px; font-size: 24px; overflow-wrap: anywhere; }
.card-rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0 0 16px; }
.card-rows dt { color: var(--dim); font: 12px var(--f-pixel); padding-top: 3px; }
.card-rows dd { margin: 0; overflow-wrap: anywhere; }
.card-rows dd.empty { color: var(--dim); }
.card-actions { display: flex; justify-content: flex-end; }
.card-actions button { min-height: var(--tap); min-width: 96px; }
.name-link { background: none; box-shadow: none; padding: 2px 4px; margin: 0; color: var(--info); text-decoration: underline; text-underline-offset: 3px; font: 15px var(--f-body); font-weight: 600; min-height: 0; }
@media (hover: hover) { .name-link:not(:disabled):hover { color: var(--text); background: none; } }
.name-link:active { transform: none; background: none; box-shadow: none; }

/* toasts: one at a time (no stacks); errors red */
/* desktop: top centre, between the HUD's left and right groups, clear of the scene frame */
#toasts { position: fixed; left: 50%; transform: translateX(-50%); top: 14px; z-index: 65; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.toast { padding: 10px 14px; font-size: 14px; background: var(--panel); margin: var(--px);
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 4px 0 0 0 var(--info); }
.toast.good { box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 4px 0 0 0 var(--good); }
.toast.bad { box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 4px 0 0 0 var(--bad); }

.conn-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 70; background: var(--bad); color: #fff; text-align: center; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); font: 18px var(--f-pixel); box-shadow: 0 3px 0 0 var(--edge); }

/* 要注意: a note posted at your door (rent), 緊急: someone in the scene says it */
.door-note { display: block; width: calc(100% - 6px); text-align: left; padding: 12px 14px; font: 18px/1.55 var(--f-pixel); transform: rotate(-1deg); margin: 6px 3px 14px; cursor: pointer; }
.door-note small { display: block; font: 12px var(--f-body); margin-top: 6px; opacity: 0.8; }
.speech { position: relative; padding: 12px 12px 10px; margin: 6px 3px 18px; }
.speech::after { content: ""; position: absolute; left: 40px; bottom: -15px; width: 12px; height: 12px; background: var(--panel); box-shadow: 3px 3px 0 0 var(--edge); transform: skewX(-35deg); }
.speech .who { font: 12px var(--f-pixel); color: var(--info); }
.speech .q { font: 18px/1.45 var(--f-pixel); margin: 2px 0 0; }
.mail-pinned { margin-bottom: 10px; }

/* ---------- inside the scenes (older screens, restyled to the new parts) ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.card { background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); padding: 10px 12px; min-width: 0; margin: 2px; }
.card .k { font: 12px var(--f-pixel); color: var(--dim); }
.card .v { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.bar { height: 10px; background: var(--edge); overflow: hidden; margin-top: 6px; padding: 2px; }
.bar > div { height: 100%; background: var(--good); }
.bar.big { height: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--panel-lo); vertical-align: top; }
th { color: var(--dim); font: 12px var(--f-pixel); }
td.num { white-space: nowrap; text-align: right; font-family: var(--f-body); }
th.num { text-align: right; }
.pos-block { margin-bottom: 16px; }
.pos-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.pos-head .name { font: 18px var(--f-pixel); }
.seats { display: flex; flex-wrap: wrap; gap: 6px; }
.seat { background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); padding: 4px 8px; font-size: 13px; display: flex; gap: 6px; align-items: center; margin: 2px; }
.seat.player { box-shadow: 0 0 0 2px var(--info); }
.seat.me { box-shadow: 0 0 0 2px var(--gold); background: var(--accent-soft); }
.seat .perf { color: var(--dim); font-size: 12px; }
.tag { font: 12px var(--f-pixel); padding: 1px 7px; background: var(--panel-lo); color: var(--text); white-space: nowrap; box-shadow: 0 0 0 2px var(--edge); }
.tag.target { background: var(--gold); color: var(--paper-ink); }
.floors { display: flex; flex-direction: column; gap: 4px; }
.floor { display: grid; grid-template-columns: 34px repeat(var(--n, 4), minmax(0, 56px)); gap: 4px; align-items: center; }
.floor .fl { font: 12px var(--f-num); color: var(--dim); text-align: right; padding-right: 4px; }
.unit { font: 12px var(--f-num); padding: 2px 4px; min-height: 32px; margin: 2px; }
.unit.occupied { opacity: 0.35; }
.unit.mine { background: var(--gold); color: var(--paper-ink); opacity: 1; }
.unit.lay-0 { box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 4px 0 0 0 #6fa8dc; }
.unit.lay-1 { box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 4px 0 0 0 #f6b26b; }
.unit.lay-2 { box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 4px 0 0 0 #93c47d; }
.layout-lines p { margin: 2px 0; display: flex; gap: 6px; align-items: baseline; }
.layout-lines .lay-swatch { display: inline-block; width: 10px; height: 10px; flex: none; background: #6fa8dc; box-shadow: 0 0 0 1px var(--edge); }
.layout-lines .lay-1 .lay-swatch { background: #f6b26b; }
.layout-lines .lay-2 .lay-swatch { background: #93c47d; }
.tower-pick { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.tower-pick .chip { min-height: var(--tap); padding: 4px 14px; font-size: 14px; }
.tower-pick .chip.active { background: #d9a066; color: var(--paper-ink); }
.floor.houses { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.floor.houses .unit { min-height: 44px; }
.accrued-line { font-size: 13px; margin-top: 4px; }
.accrued { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.goal-box { background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); padding: 12px; display: flex; flex-direction: column; gap: 8px; margin: 2px; }
.goal-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: baseline; font-size: 14px; }
.goal-row .k { font: 12px var(--f-pixel); color: var(--dim); }
.goal-progress { display: flex; flex-direction: column; gap: 4px; }
.goal-caption { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.goal-box p { margin: 0; }
.target-select { max-width: 100%; }
.more-row { margin-top: 18px; }
.notice-inline { background: var(--panel-lo); padding: 8px 10px; box-shadow: 0 0 0 2px var(--edge), inset 4px 0 0 0 var(--gold); margin: 2px; }
.parcel-facts p { margin: 4px 0; }
.parcel-price { font: 24px var(--f-num); color: var(--gold); }
.shop-list { display: flex; flex-direction: column; gap: 4px; }
.shop-pick { min-height: var(--tap); justify-content: flex-start; }
/* 施工外快 */
.site-job { background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); padding: 4px 14px 10px; margin: 12px 2px; }
.site-progress { display: flex; align-items: center; gap: 10px; }
.site-progress .bar { flex: 1; height: 12px; }
.site-progress .fill { height: 100%; background: var(--paper); }
.sitegame { display: flex; flex-direction: column; align-items: center; gap: 10px; touch-action: none; user-select: none; }
.sg-head { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.sg-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sg-stats { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.sg-stats .k { color: var(--dim); font: 12px var(--f-pixel); margin-right: 4px; }
.sg-stats b { font: 18px var(--f-num); }
.sg-streak { color: var(--gold); }
.sg-board-wrap { position: relative; }
.sg-board { display: block; box-shadow: 0 0 0 3px var(--edge); image-rendering: pixelated; touch-action: none; }
.sg-tray { display: flex; gap: 10px; justify-content: center; width: 100%; }
.sg-tray .sg-slot { flex: 1; max-width: 140px; min-height: 96px; padding: 6px; touch-action: none; background: var(--panel-lo); }
.sg-tray .sg-slot.on { background: var(--panel-hi); }
.sg-tray .sg-slot.empty { opacity: 0.25; }
.sg-tray .sg-slot.nofit canvas { opacity: 0.4; }
.sg-tray canvas { image-rendering: pixelated; pointer-events: none; }
.sg-foot { width: 100%; text-align: center; }
.sg-foot .row { justify-content: center; gap: 10px; }
.sg-float { position: fixed; z-index: 40; pointer-events: none; image-rendering: pixelated; opacity: 0.92; }
.sg-float.hidden, .sg-over.hidden { display: none; }
.sg-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(11, 10, 22, 0.7); }
.sg-result { padding: 16px 18px; max-width: 92%; text-align: center; background: var(--panel); box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 0 3px 0 0 var(--panel-hi); }
.sg-result h3 { margin: 0 0 6px; }
.sg-result .sg-big { font: 26px var(--f-num); color: var(--gold); margin: 4px 0; }
.sg-result .row { justify-content: center; gap: 10px; flex-wrap: wrap; }
.sitegame.sg-done .sg-tray { opacity: 0.35; pointer-events: none; }
button.danger-soft { color: var(--bad); }
/* 信箱 */
.mail-list { display: flex; flex-direction: column; gap: 2px; }
.mail-item { width: calc(100% - 6px); justify-content: flex-start; text-align: left; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 12px; min-height: 56px; background: var(--panel-lo); }
.mail-item .mail-top { display: flex; justify-content: space-between; gap: 8px; font: 12px var(--f-body); color: var(--dim); }
.mail-item .mail-subject { font: 15px var(--f-body); }
.mail-item.unread .mail-subject { font-weight: 700; }
.mail-item.unread .mail-subject::before { content: '● '; color: var(--bad); }
.mail-body { white-space: pre-wrap; background: var(--paper); color: var(--paper-ink); padding: 12px; margin: 4px 3px 4px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; box-shadow: 0 0 0 3px var(--edge), inset 0 3px 0 0 #f6dcbf, inset 0 -3px 0 0 #d9a066; }
/* 屋內 */
.house-sub { margin: -6px 0 10px; }
.people { display: flex; flex-wrap: wrap; gap: 6px; }
.person { background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); padding: 2px 6px 2px 8px; display: flex; gap: 6px; align-items: center; min-height: 40px; margin: 2px; }
.person.me { box-shadow: 0 0 0 2px var(--gold); }
.person .role { font: 12px var(--f-pixel); color: var(--dim); }
.doors { display: flex; flex-wrap: wrap; gap: 4px; }
.doors button { min-height: var(--tap); }
.slot-list { display: flex; flex-direction: column; gap: 4px; }
.slot-row { background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 2px; }
.slot-row .shape { font: 12px var(--f-pixel); color: var(--dim); min-width: 120px; }
.slot-row .what { flex: 1; min-width: 120px; overflow-wrap: anywhere; }
.slot-row .what.empty { color: var(--dim); }
.slot-row .acts { display: flex; flex-wrap: wrap; gap: 4px; }
.room-chat { background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); padding: 8px 10px; margin: 2px; }
.room-chat-log { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: 14px; min-height: 40px; }
.room-chat form { display: flex; gap: 6px; margin-top: 8px; }
.room-chat input { flex: 1; min-width: 0; }
.visit-list { display: flex; flex-direction: column; gap: 4px; }
.visit-row { background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; margin: 2px; }
.visit-row .who { margin: 0; font-weight: 600; display: flex; gap: 6px; align-items: center; white-space: normal; }
.visit-row .info { grid-column: 1; font-size: 12px; color: var(--dim); }
.visit-row button { grid-column: 2; grid-row: 1 / span 2; min-height: var(--tap); }
.visit-row.mine { box-shadow: 0 0 0 2px var(--gold); }
.online-dot { width: 8px; height: 8px; background: var(--good); display: inline-block; box-shadow: 0 0 0 1px var(--edge); }
.online-dot.off { background: var(--rim); }
.owner-line { background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); padding: 8px 10px; margin: 8px 2px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.owner-line .intro { flex: 1; min-width: 140px; overflow-wrap: anywhere; }
.intro-form { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.intro-form .row { flex-wrap: nowrap; }
.intro-form input { flex: 1; min-width: 0; }
/* 圖像屋內: only 0.5× / 1× / 2×, never fractional */
.room-view { margin: 4px 0 12px; }
.room-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.room-bar button { min-height: var(--tap); }
.room-bar button.on { background: #d9a066; color: var(--paper-ink); }
.room-hint { flex-basis: 100%; }
.room-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; background: var(--edge); box-shadow: 0 0 0 3px var(--edge); }
.room-stage { position: relative; }
.room-window { position: relative; width: fit-content; max-width: 100%; }
.room-band { display: block; image-rendering: pixelated; }
.room-feed { position: absolute; left: 8px; max-width: min(60%, 360px); display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.feed-line { font-size: 13px; line-height: 1.35; padding: 2px 8px; background: rgba(11, 10, 22, 0.78); color: #fff; overflow-wrap: anywhere; animation: feed-fade 15s linear forwards; box-shadow: 0 0 0 2px var(--edge); }
.feed-name { color: var(--gold); margin-right: 6px; }
@keyframes feed-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
.room-view.half .feed-line { font-size: 11px; padding: 1px 6px; }
.room-say { display: flex; gap: 6px; margin: 4px 0 8px; align-items: center; }
.room-say input { flex: 1; min-width: 0; min-height: var(--tap); }
.room-say button { min-height: var(--tap); }
.chat-history { margin-bottom: 8px; }
.chat-history summary, .text-arrange summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--dim); font: 18px var(--f-pixel); }
.room-canvas { display: block; image-rendering: pixelated; touch-action: pan-x pan-y; cursor: pointer; }
.room-labels { position: absolute; inset: 0; pointer-events: none; }
.room-name { position: absolute; transform: translate(-50%, -100%); font: 12px/1.2 var(--f-pixel); padding: 0 4px; background: rgba(11, 10, 22, 0.78); color: var(--text); white-space: nowrap; margin-top: -2px; box-shadow: 0 0 0 2px var(--edge); }
.room-name.me { color: var(--gold); }
.room-bubble { position: absolute; transform: translate(-50%, -100%); margin-top: -18px; width: max-content; max-width: 180px; font: 12px/1.3 var(--f-pixel); padding: 4px 8px; background: #fff; color: var(--paper-ink); box-shadow: 0 0 0 2px var(--edge); overflow-wrap: anywhere; }
.room-bubble.intro { background: var(--paper); }
.room-view.half .room-name { font-size: 12px; }
.room-view.half .room-bubble { font-size: 12px; max-width: 140px; }
.room-tray { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.tray-item { min-height: var(--tap); touch-action: none; }
.tray-item.on { background: var(--good); color: var(--edge); }
.room-ghost { position: fixed; z-index: 80; pointer-events: none; padding: 4px 8px; background: var(--gold); color: var(--paper-ink); font: 12px var(--f-pixel); box-shadow: 0 0 0 2px var(--edge); }
.room-card { position: relative; margin: 8px 3px 3px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--panel);
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 0 3px 0 0 var(--panel-hi); }
.room-card .card-pic { image-rendering: pixelated; max-width: 192px; box-shadow: 0 0 0 2px var(--edge); }
.room-card .card-title { font: 18px var(--f-pixel); }
.room-card button { min-height: var(--tap); }
.room-card .card-rows { width: 100%; margin: 4px 0 0; font-size: 13px; }
/* desktop 2× full screen */
.room-view.full { position: fixed; inset: 0; z-index: 75; margin: 0; padding: 0; background: rgba(11, 10, 22, 0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.room-view.full .room-scroll { max-width: none; box-shadow: none; }
.room-view.full .room-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; margin: 0; padding: 6px 10px; background: rgba(11, 10, 22, 0.85); }
.room-view.full .room-hint { display: none; }
.room-view.full .room-say { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(1280px, 100%); z-index: 2; margin: 0; padding: 6px 10px; background: rgba(11, 10, 22, 0.85); }
.room-view.full .room-tray { position: absolute; left: 10px; right: 10px; bottom: 64px; z-index: 2; margin: 0; padding: 4px 8px; background: rgba(11, 10, 22, 0.85); }
.room-view.full .room-card { position: absolute; top: 64px; right: 12px; z-index: 3; max-width: min(420px, calc(100% - 24px)); }
/* 畫室 / 畫廊 / 審核 */
.painter-box { background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); padding: 10px; margin: 8px 2px; }
.painter-level { font: 18px var(--f-pixel); }
.paint-current { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.paint-thumb, .art-pic, .review-pic { image-rendering: pixelated; background: repeating-conic-gradient(#3f3f74 0 25%, #2a2942 0 50%) 0 0 / 8px 8px; box-shadow: 0 0 0 2px var(--edge); }
.paint-info { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 4px; }
.paint-progress { display: flex; align-items: center; gap: 8px; }
.paint-progress .bar { flex: 1; height: 10px; }
.paint-progress .fill { height: 100%; width: 0; background: var(--gold); }
.canvas-pick[disabled] { opacity: 0.5; cursor: not-allowed; }
.gallery-pic .art-pic { height: 96px; width: auto; display: block; }
.row-buttons { display: flex; gap: 4px; flex-wrap: wrap; }
.row-buttons button { min-height: var(--tap); }
.gallery-market { font-family: var(--f-num); color: var(--gold); }
.gallery-list, .review-list { display: flex; flex-direction: column; gap: 4px; }
.gallery-row, .review-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); padding: 10px; margin: 2px; }
.gallery-meta, .review-meta { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 4px; }
.gallery-row .shop-buy { width: auto; min-width: 140px; margin: 3px; }
.badge-mp { margin-left: 6px; padding: 1px 6px; background: var(--gold); color: var(--paper-ink); font: 12px var(--f-pixel); }
.review-entry { width: calc(100% - 6px); min-height: var(--tap); margin-bottom: 12px; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-start; text-align: left; }
.review-entry-title { font: 18px var(--f-pixel); }
.review-entry.has .review-entry-title { color: var(--gold); }
.review-page button { min-height: var(--tap); }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.review-grid .review-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.review-pic-box { height: 100px; display: flex; align-items: center; justify-content: center; background: var(--edge); overflow: hidden; }
.review-pic-box .review-pic { max-width: 100%; height: auto; }
.review-grid .row-buttons button { flex: 1; }
.review-state { font: 12px var(--f-pixel); }
.review-tag { font: 12px var(--f-pixel); }
.review-tag.pending { color: var(--warn); }
.review-tag.confiscated { color: var(--bad); }
.review-state.painting { color: var(--gold); }
.review-state.finished { color: var(--good); }
.review-row .approve { color: var(--good); }
.review-row .confiscate { color: var(--bad); }
/* 家具店 */
.shop-group { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.shop-group .none { color: var(--dim); opacity: 0.7; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.shop-card { background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); padding: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin: 2px; }
.shop-pic-box { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; background: var(--edge); }
.shop-pic { image-rendering: pixelated; }
.shop-name { font: 18px var(--f-pixel); }
.shop-buy { width: calc(100% - 6px); min-height: var(--tap); margin-top: 4px; }
.shop-buy[disabled] { opacity: 0.55; cursor: not-allowed; }
/* 工作室 */
.studio h3 { margin-top: 14px; }
.canvas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.canvas-pick { flex-direction: column; align-items: flex-start; gap: 2px; min-height: var(--tap); text-align: left; }
.canvas-pick .name { font-weight: 600; }
.draft-list { display: flex; flex-direction: column; gap: 4px; }
.draft-row { display: flex; gap: 8px; align-items: center; }
.draft-open { flex: 1; justify-content: flex-start; gap: 10px; text-align: left; min-height: 56px; padding: 6px 10px; min-width: 0; }
.draft-open .thumb { image-rendering: pixelated; flex-shrink: 0; max-width: 192px; }
.draft-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.studio-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.studio-title { font: 18px var(--f-pixel); }
.studio-head .save { margin-left: auto; min-height: var(--tap); }
.tools, .zooms { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; align-items: center; }
.tool { min-height: var(--tap); min-width: var(--tap); padding: 4px 10px; }
.tool[aria-pressed="true"] { background: #d9a066; color: var(--paper-ink); }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tap), 1fr)); gap: 4px; margin: 6px 0; }
.swatch { min-height: var(--tap); min-width: var(--tap); padding: 0; margin: 2px; box-shadow: 0 0 0 2px var(--edge); }
.swatch.clear { background: repeating-conic-gradient(#3f3f74 0% 25%, #2a2942 0% 50%) 50% / 12px 12px; }
.swatch.on { outline: 3px solid var(--gold); outline-offset: 1px; }
.pixel-view { position: relative; overflow: hidden; touch-action: none; height: min(52vh, 420px); background: var(--edge); box-shadow: 0 0 0 2px var(--edge); }
.pixel-view .pixels { position: absolute; left: 0; top: 0; image-rendering: pixelated; cursor: crosshair; }
.preview-wrap { overflow: hidden; }
.preview { display: block; width: 640px; max-width: 100%; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--edge); }

/* ---------- 彈卡 ---------- */
.modal.pop-modal { z-index: 56; }
.pop-box { max-width: 380px; }
.pop-box.wide { max-width: 720px; }
.pop-pic { display: flex; justify-content: center; padding: 8px; margin: 0 0 12px; background: var(--edge); }
.pop-pic img, .pop-pic canvas { max-width: 100%; image-rendering: pixelated; }
.card-actions { gap: 4px; flex-wrap: wrap; }

/* ---------- 公司 (樣板場景): the office in layers, the people at their desks, the event in a speech bubble ---------- */
.office-wrap { position: relative; margin: 3px 0 10px; }
.office, .shop-view { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--edge); image-rendering: pixelated; box-shadow: 0 0 0 3px var(--edge); }
.office .layer, .shop-view .layer { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.office .spr { position: absolute; transform: translateX(-50%); image-rendering: pixelated; height: auto; pointer-events: none; }
.office .spr.me { outline: 2px solid var(--gold); outline-offset: 2px; }
.office .who-tag { position: absolute; transform: translate(-50%, -100%); font: 12px/1.3 var(--f-pixel); padding: 0 4px; background: rgba(11, 10, 22, 0.78); color: #fff; box-shadow: 0 0 0 2px var(--edge); white-space: nowrap; pointer-events: none; }
.office .who-tag.me { background: var(--gold); color: var(--paper-ink); }
.office .who-tag.talking { color: var(--info); }
/* the whiteboard is the 組織圖: a frame shows on hover, its name in a corner */
.org-board, .org-board:active { position: absolute; min-height: 0; min-width: 0; padding: 0; margin: 0; transform: none; background: transparent; box-shadow: none; align-items: flex-end; justify-content: flex-end; }
.org-board span { font: 12px var(--f-pixel); padding: 0 4px; margin: 2px; background: var(--paper); color: var(--paper-ink); box-shadow: 0 0 0 2px var(--edge); }
@media (hover: hover) { .org-board:not(:disabled):hover { background: rgba(251, 242, 54, 0.12); outline: 3px solid var(--gold); } }
.bubble { position: absolute; left: var(--bx, 48%); top: 8px; width: 49.4%; padding: 12px 12px 10px; margin: 0; z-index: 3; max-height: calc(100% - 16px); overflow-y: auto; }
.bubble::after { content: ""; position: absolute; left: var(--tail, 80%); bottom: -15px; width: 12px; height: 12px; background: var(--panel); box-shadow: 3px 3px 0 0 var(--edge); transform: skewX(-35deg); }
.bubble .who { font: 12px var(--f-pixel); color: var(--info); }
.bubble .q { font: 18px/1.4 var(--f-pixel); margin: 2px 0 8px; }
.bubble .chip { margin: 4px 0 2px; }
.opt { display: flex; flex-direction: column; gap: 2px; }
.opt .ev-opt { width: calc(100% - 4px); margin: 2px; min-height: var(--tap); flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 8px; background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); }
@media (hover: hover) { .opt .ev-opt:not(:disabled):hover { background: var(--panel-hi); } }
.opt .ev-opt .lbl { font: 18px var(--f-pixel); }
.opt .ev-opt .hint { font: 12px/1.4 var(--f-body); color: var(--dim); text-align: left; }
.bubble .timer { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; font: 12px var(--f-pixel); color: var(--dim); }
.bubble .timer .ev-status { color: var(--gold); }

/* ---------- 住宅大廈 (樣板場景): the building's face ---------- */
.facade { display: grid; grid-template-columns: 30px repeat(var(--n, 4), 44px); gap: 4px; padding: 10px; width: fit-content; max-width: 100%; margin: 6px 3px 12px; background: #d9c4a6; box-shadow: 0 0 0 3px var(--edge); }
.facade .fl { font: 12px var(--f-num); color: var(--paper-ink); align-self: center; text-align: right; padding-right: 2px; white-space: nowrap; }
.facade .win, .facade .win:active { position: relative; min-width: 0; min-height: 0; width: 44px; height: 55px; padding: 0; margin: 0; transform: none; background: #2c3550; box-shadow: inset 0 0 0 2px #8a7a62; }
.facade .win.lit { background: #f2d36b; }
.facade .win.me { background: var(--gold); box-shadow: inset 0 0 0 2px var(--paper-ink), 0 0 0 2px var(--gold); opacity: 1; }
.facade .win.occupied { opacity: 1; }
@media (hover: hover) { .facade .win:not(:disabled):hover { outline: 2px solid var(--info); background: #3a4668; } .facade .win.lit:hover { background: #f7df8c; } }
.facade .win .lay { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 3px; }
.facade .win.blank { visibility: hidden; }
.facade.building .win { background: #4a4538; box-shadow: inset 0 0 0 2px #6e6450; }
.facade.houses { grid-template-columns: repeat(var(--n, 3), auto); gap: 10px; }
.facade .house-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ---------- 家具店 (樣板場景): the shop picture, pieces on its shelves and platforms ---------- */
.shop-scene { margin: 6px 0 10px; }
.ware-spot, .ware-spot:active { position: absolute; display: block; padding: 0; margin: 0; min-width: 0; min-height: 0; transform: none; background: transparent; box-shadow: none; }
.ware-spot canvas { width: 100% !important; height: 100% !important; image-rendering: pixelated; display: block; }
@media (hover: hover) { button.ware-spot:not(:disabled):hover { background: transparent; outline: 2px solid var(--gold); outline-offset: 1px; } }
.shop-pagers { justify-content: space-between; margin-top: 6px; }
.shop-pager { display: flex; align-items: center; gap: 4px; }
.shop-pager.floor { margin-left: auto; }
.ware-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ware, .ware:active { flex-direction: column; justify-content: flex-end; gap: 4px; padding: 4px; margin: 2px; transform: none; min-width: 72px; background: var(--panel-lo); box-shadow: 0 0 0 2px var(--edge); }
@media (hover: hover) { .ware:not(:disabled):hover { background: var(--panel-hi); } }
.ware .ware-pic { display: flex; align-items: flex-end; justify-content: center; min-height: 32px; max-width: 96px; }
.ware .ware-pic canvas, .ware .ware-pic img { max-width: 96px; max-height: 48px; width: auto !important; height: auto !important; image-rendering: pixelated; }

/* ---------- touch screens: every tap target at least 44px (原則 6) ---------- */
@media (pointer: coarse) {
  button, .btn, select, summary, input:not([type="radio"]):not([type="checkbox"]):not([type="range"]) { min-height: var(--tap); }
  button, .btn { min-width: var(--tap); }
  .unit { min-height: var(--tap); }
  .name-link { min-height: var(--tap); }
  .scene-bar .btn.back, .chip-tab, #chat-form button, #devtools summary { min-height: var(--tap); }
}

/* ---------- phone: the map on top, the scene a sheet from the bottom; no tab bar ---------- */
@media (max-width: 899px) {
  html, body { font-size: 15px; }
  button, .btn, button.small, .btn.small { min-height: var(--tap); }
  input, select { min-height: var(--tap); font-size: 16px; } /* 16px stops iOS zoom on focus */
  .hud-tl { left: 8px; top: calc(8px + env(safe-area-inset-top)); gap: 0; right: 72px; }
  .hud-tr { right: 8px; top: calc(8px + env(safe-area-inset-top)); }
  .hud-cell { padding: 4px 8px; gap: 5px; margin: 3px; }
  .hud-cell small { display: none; }
  .hud-cell b { font-size: 14px; }
  .hud-cell canvas.ico { width: 18px; height: 18px; }
  #hud-perf b.perf-num { display: block !important; }
  .hbar { width: 56px; height: 8px; margin-top: 2px; }
  .icon-btn { width: 48px; height: 48px; min-width: 48px; }
  .city-zoom { right: 8px; top: calc(68px + env(safe-area-inset-top)); }
  .me-btn { left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-width: calc(60vw - 16px); padding: 4px 10px 4px 4px; }
  .me-btn .avatar { width: 40px; height: 40px; background-size: 36px auto; }
  .chat-pill { right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-width: calc(40vw - 16px); min-height: 52px; padding: 6px 10px; }
  .chat-pill .chat-preview { display: none; }
  /* the scene: a sheet from the bottom, about 60% high; the map stays visible above it */
  .scene { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; height: 62dvh; max-height: none;
    box-shadow: 0 -3px 0 0 var(--edge), inset 0 3px 0 0 var(--panel-hi); padding-bottom: env(safe-area-inset-bottom); }
  .scene.tall { height: calc(100dvh - 60px - env(safe-area-inset-top)); }
  .scene.wide { width: 100%; }
  .scene .grab { display: block; width: 44px; height: 5px; background: var(--rim); margin: 6px auto 0; flex: none; }
  .scene-bar { padding: 4px 10px 4px 8px; }
  .scene-bar .btn.back, .chip-tab, #chat-form button, #devtools summary { min-height: var(--tap); }
  .scene-bar h3 { font-size: 18px; }
  .scene-bar .sub { display: none; }
  #content { padding: 4px 12px 16px; }
  body.scene-open .me-btn, body.scene-open .chat-pill { display: none; }
  /* drawers: full height from the side */
  .drawer-left, .drawer-right { top: 0; bottom: 0; width: min(88vw, 360px); max-height: none; height: auto; padding-top: calc(14px + env(safe-area-inset-top)); }
  .drawer-left { left: 0; transform: translateX(-105%); overflow-y: auto; }
  .drawer-right { right: 0; transform: translateX(105%); }
  #drawer-shade { background: rgba(11, 10, 22, 0.5); }
  #me-close, #chat-close { display: inline-flex; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card .v { font-size: 17px; }
  table { font-size: 13px; }
  th, td { padding: 6px 4px; }
  td.detail { font-size: 12px; }
  .floor { grid-template-columns: 30px repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; }
  .unit { min-height: var(--tap); font-size: 13px; }
  .target-select { width: 100%; }
  .modal { align-items: flex-end; padding: 0; }
  .modal-box { max-width: none; margin: 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 90dvh; box-shadow: 0 -3px 0 0 var(--edge), inset 0 3px 0 0 var(--panel-hi); }
  .modal.confirm-modal, .modal.card-modal, .modal.pop-modal { align-items: center; padding: 16px; }
  .confirm-box, .card-box, .pop-box { margin: var(--px); box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge), -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge), inset 0 3px 0 0 var(--panel-hi); }
  /* phone: above the 「我」 / chat buttons on the map; under the HUD when a scene sheet or an event is up */
  #toasts { top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.scene-open #toasts, body.modal-open #toasts { top: calc(env(safe-area-inset-top) + 64px); bottom: auto; }
  .toast { font-size: 13px; padding: 8px 10px; }
  .slot-row .shape { min-width: 0; width: 100%; }
  .room-chat-log { max-height: 180px; }
  .palette { grid-auto-flow: column; grid-template-rows: repeat(2, var(--tap)); grid-template-columns: none; grid-auto-columns: var(--tap); overflow-x: auto; padding-bottom: 4px; }
  .pixel-view { height: min(40vh, 340px); }
  .canvas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the office on a phone: the picture on top, the speech bubble under it (UI 憲法 phone mock) */
  .bubble { position: relative; left: auto; top: auto; width: auto; max-height: none; margin: 18px 3px 3px; }
  .bubble::after { left: var(--tail, 50%); top: -15px; bottom: auto; transform: skewX(35deg) scaleY(-1); box-shadow: 3px -3px 0 0 var(--edge); }
  .facade { grid-template-columns: 30px repeat(var(--n, 4), 44px); padding: 8px; gap: 4px; }
}
@media (min-width: 900px) {
  #me-close, #chat-close { display: none; }
}