/* Themes: simple (default white) | cn (中國風) | jp (日本風) — structure unchanged */
:root,
html[data-theme="simple"] {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel2: #f0f2f5;
  --panel3: #e4e7ec;
  --ink: #1a1d23;
  --muted: #6b7280;
  --gold: #2563eb;
  --gold-dim: #93c5fd;
  --accent: #2563eb;
  --accent-hi: #3b82f6;
  --danger: #dc2626;
  --line: #e5e7eb;
  --ok: #16a34a;
  --pane-border: #d1d5db;
  --log-bg: #fafbfc;
  --shell-bg: #eef0f3;
  --topbar-bg: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  --topbar-active: linear-gradient(180deg, #eff6ff, #dbeafe);
  --pane-head-bg: linear-gradient(180deg, #ffffff, #f3f4f6);
  --right-bg: linear-gradient(180deg, #f8f9fb, #eef0f3);
  --input-bg: #ffffff;
  --selected-bg: #eff6ff;
  --brand-ico-bg: #eef2ff;
  --event-bg: linear-gradient(90deg, #fff7ed, #ffedd5);
  --tutorial-bg: #ecfdf5;
  --log-checks-bg: #f3f4f6;
  --log-time: #9ca3af;
  --trade: #b45309;
  --travel: #0f766e;
  --event-c: #c2410c;
  --encounter: #b91c1c;
  --stat-c: #0369a1;
  --system-c: #3f6212;
  --warn-c: #dc2626;
  --ui-c: #6b7280;
  --chat-sys: #4d7c0f;
  --chat-world: #374151;
  --chat-local: #1d4ed8;
  --map-bg0: #e8eef5;
  --map-bg1: #dce4ee;
  --map-label: #6b7280;
  --botbar-bg: #f3f4f6;
  --toast-bg: #ffffff;
  --modal-scrim: rgba(15, 23, 42, 0.45);
  --shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --buy: #047857;
  --radius: 8px;
  --gap: 0.65rem;
  --font: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --side-w: 320px;
  --bot-h: 32px;
  color-scheme: light;
}

/* 中國風：暖木／絹／金邊商賈 */
html[data-theme="cn"] {
  --font: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PingFang TC", serif;
  --bg: #100c09;
  --panel: #1c1611;
  --panel2: #2a2118;
  --panel3: #342a1f;
  --ink: #f0e6d2;
  --muted: #a89274;
  --gold: #d4a84b;
  --gold-dim: #8a6a2e;
  --accent: #3d6b5a;
  --accent-hi: #4f8a73;
  --danger: #a0453a;
  --line: #3a3026;
  --ok: #6a9a5a;
  --pane-border: #5a4a32;
  --log-bg: #0a0806;
  --shell-bg: #14100c;
  --topbar-bg: linear-gradient(180deg, #2e261c 0%, #1e1812 100%);
  --topbar-active: linear-gradient(180deg, #3a3020, #2a2214);
  --pane-head-bg: linear-gradient(180deg, #2a2218, #1c1611);
  --right-bg: linear-gradient(180deg, #1a1610, #14110d);
  --input-bg: #0d0a08;
  --selected-bg: #2a2214;
  --brand-ico-bg: #0d0a08;
  --event-bg: linear-gradient(90deg, #3a2410, #4a3018);
  --tutorial-bg: #1a2a22;
  --log-checks-bg: #181410;
  --log-time: #7a6a55;
  --trade: #e0c070;
  --travel: #8ec4b0;
  --event-c: #e0a060;
  --encounter: #e08880;
  --stat-c: #8ab0c4;
  --system-c: #c8d4b8;
  --warn-c: #ff8a80;
  --ui-c: #8a7a68;
  --chat-sys: #9aaa88;
  --chat-world: #d4c4a0;
  --chat-local: #a0b0c4;
  --map-bg0: #1a241c;
  --map-bg1: #121810;
  --map-label: #8a7a58;
  --botbar-bg: #16120e;
  --toast-bg: #2a2214;
  --modal-scrim: rgba(0, 0, 0, 0.65);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --buy: #b8e0c8;
  color-scheme: dark;
}

/* 日本風：和紙淺色＋朱红／紺青 */
html[data-theme="jp"] {
  --bg: #f3efe6;
  --panel: #fffdf8;
  --panel2: #f0ebe1;
  --panel3: #e6e0d4;
  --ink: #1c1917;
  --muted: #78716c;
  --gold: #c23a2b;
  --gold-dim: #9a3428;
  --accent: #1e3a5f;
  --accent-hi: #2c4a6e;
  --danger: #b91c1c;
  --line: #d6d0c4;
  --ok: #3f6212;
  --pane-border: #c4b8a4;
  --log-bg: #faf7f0;
  --shell-bg: #ebe6db;
  --topbar-bg: linear-gradient(180deg, #fffdf8 0%, #f0ebe1 100%);
  --topbar-active: linear-gradient(180deg, #fce8e6, #f5d5d1);
  --pane-head-bg: linear-gradient(180deg, #fffdf8, #f0ebe1);
  --right-bg: linear-gradient(180deg, #faf7f0, #ebe6db);
  --input-bg: #fffdf8;
  --selected-bg: #fce8e6;
  --brand-ico-bg: #f5ebe0;
  --event-bg: linear-gradient(90deg, #fce8e6, #f5d5d1);
  --tutorial-bg: #e8eef5;
  --log-checks-bg: #f0ebe1;
  --log-time: #a8a29e;
  --trade: #9a3412;
  --travel: #1e3a5f;
  --event-c: #c23a2b;
  --encounter: #b91c1c;
  --stat-c: #1e3a5f;
  --system-c: #3f6212;
  --warn-c: #dc2626;
  --ui-c: #78716c;
  --chat-sys: #3f6212;
  --chat-world: #44403c;
  --chat-local: #1e3a5f;
  --map-bg0: #e8e4da;
  --map-bg1: #ddd6c8;
  --map-label: #78716c;
  --botbar-bg: #ebe6db;
  --toast-bg: #fffdf8;
  --modal-scrim: rgba(28, 25, 23, 0.5);
  --shadow: 0 8px 28px rgba(28, 25, 23, 0.1);
  --shadow-sm: 0 2px 8px rgba(28, 25, 23, 0.08);
  --buy: #1e3a5f;
  --font: "Hiragino Sans", "PingFang TC", "Noto Sans JP", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  color-scheme: light;
}

:root {
  --radius: 8px;
  --gap: 0.65rem;
  --side-w: 320px;
  --bot-h: 32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); }
body { min-height: 100%; }
body.page-auth #app { min-height: 100vh; min-height: 100dvh; }
body.page-auth #screen-auth { align-items: center; }
#app { min-height: 100%; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; align-items: stretch; justify-content: center; padding: 12px; }
.hidden { display: none !important; }

/* v1.1.2 boot splash — visible until showScreen / redirect */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--bg, #f4f5f7);
  color: var(--ink, #1a1a1a);
  text-align: center;
}
.boot-splash.hidden { display: none !important; }
.boot-splash .boot-title { margin: 0; font-size: 1.15rem; font-weight: 600; }
.boot-splash .hint { margin: 0; opacity: 0.75; font-size: 0.9rem; }
.boot-splash a { color: var(--accent, #2b6cb0); }
.boot-splash .boot-err { color: #b91c1c; margin: 0; max-width: 28rem; }
.boot-noscript { z-index: 10001; }

/* —— v1.5.3：boot／載入動畫 —— */
.boot-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.35rem;
}
.boot-ring {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 3px solid var(--line, #d0d4dc);
  border-top-color: var(--gold, #b45309);
  border-right-color: var(--accent, #2b6cb0);
  animation: boot-spin 0.85s linear infinite;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}
html[data-theme="cn"] .boot-ring {
  border-color: #3a3026;
  border-top-color: #d4a84b;
  border-right-color: #4f8a73;
  box-shadow: 0 0 12px rgba(212,168,75,.18);
}
html[data-theme="jp"] .boot-ring {
  border-color: #e8dfd0;
  border-top-color: #c45c4a;
  border-right-color: #3d5a80;
}
@keyframes boot-spin {
  to { transform: rotate(360deg); }
}
.boot-dots {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  height: 0.55rem;
}
.boot-dots span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--gold, #b45309);
  opacity: 0.35;
  animation: boot-bounce 1.05s ease-in-out infinite;
}
.boot-dots span:nth-child(2) { animation-delay: 0.15s; }
.boot-dots span:nth-child(3) { animation-delay: 0.3s; }
html[data-theme="cn"] .boot-dots span { background: #d4a84b; }
html[data-theme="jp"] .boot-dots span { background: #c45c4a; }
@keyframes boot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
  40% { transform: translateY(-0.35rem); opacity: 1; }
}
/* 內嵌列表用輕量 spinner */
.gs-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  opacity: 0.85;
}
.gs-loading::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 2px solid var(--line, #ccc);
  border-top-color: var(--gold, #b45309);
  animation: boot-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .boot-ring, .boot-dots span, .gs-loading::before {
    animation: none !important;
  }
  .boot-ring { border-top-color: var(--gold, #b45309); opacity: 0.85; }
  .boot-dots span { opacity: 0.7; }
}

/* Create / select vs game: hard isolation even if a class slips */
body.mode-create #screen-game,
body.mode-create #modal-mail,
body.mode-create #modal-trade,
body.mode-select #screen-game,
body.mode-select #modal-mail,
body.mode-select #modal-trade { display: none !important; }
body.mode-game #screen-create,
body.mode-game #screen-select { display: none !important; }
body.mode-create #screen-select,
body.mode-select #screen-create { display: none !important; }
body.mode-create,
body.mode-select {
  overflow: auto;
}
body.mode-create #app,
body.mode-select #app {
  min-height: 100vh;
  min-height: 100dvh;
}
body.mode-create #screen-create,
body.mode-select #screen-select {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0.75rem 12px 1rem;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  box-sizing: border-box;
}
.create-title {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: .12em;
  text-align: center;
}
.class-fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .55rem .7rem .7rem;
  margin: .5rem 0 1rem;
}
.class-fieldset legend {
  padding: 0 .35rem;
  color: var(--muted);
  font-size: .8rem;
}
.class-empty { margin: .4rem 0 0; text-align: center; }
.class-list:empty { min-height: 0; }
.class-list:not(:empty) + .class-empty { display: none !important; }


.panel {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
  width: min(420px, 100%);
  align-self: center;
}
.brand-block { text-align: center; margin-bottom: 1rem; }
.brand-block h1 { margin: .4rem 0 0; font-size: 1.8rem; letter-spacing: .3em; color: var(--gold); }
.brand-block .sub { margin: .2rem 0 0; color: var(--muted); font-size: .85rem; }
.brand-ico { image-rendering: pixelated; border-radius: 8px; border: 1px solid var(--gold-dim); background: var(--brand-ico-bg); }
.tabs { display: flex; gap: 6px; margin-bottom: 1rem; }
.tab {
  flex: 1; background: transparent; border: 1px solid var(--line); color: var(--muted);
  padding: .5rem; border-radius: 6px; cursor: pointer; font: inherit;
}
.tab.active { background: var(--gold-dim); color: var(--ink); border-color: var(--gold); }
.auth-form label { display: block; margin-bottom: .75rem; font-size: .85rem; color: var(--muted); }
.auth-form input, .create-panel input {
  display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem;
  background: var(--input-bg); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
  padding: .55rem 1rem; border-radius: 6px; cursor: pointer; font: inherit; width: 100%;
}
.btn.primary { background: var(--accent); border-color: var(--accent-hi); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
.btn.danger:hover { filter: brightness(1.08); }
.btn.primary:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { margin-top: .6rem; background: transparent; color: var(--muted); font-size: .85rem; }
.btn.tiny { width: auto; padding: .2rem .55rem; font-size: .75rem; }
.msg { min-height: 1.2em; color: var(--gold); font-size: .85rem; margin: .6rem 0 0; }
.msg.err { color: #e08880; }
.hint { color: var(--muted); font-size: .85rem; }
.class-list { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0 1rem; }
.class-opt {
  display: block; border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem;
  cursor: pointer; background: var(--input-bg);
}
.class-opt.selected { border-color: var(--gold); background: var(--selected-bg); }
.class-opt input { margin-right: .5rem; }
.class-opt strong { color: var(--gold); }
.class-opt small { display: block; color: var(--muted); margin-top: .25rem; margin-left: 1.3rem; }
.class-opt .class-tip { line-height: 1.35; }
.class-pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .6rem;
  margin: .4rem 0 0 1.3rem;
  font-size: .82rem;
  line-height: 1.35;
}
.class-pc ul { margin: .15rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.class-pc .pc-label {
  display: inline-block;
  font-weight: 700;
  font-size: .75rem;
  padding: .05rem .35rem;
  border-radius: .25rem;
}
.class-pros .pc-label { background: rgba(46,160,80,.2); color: #2ea050; }
.class-cons .pc-label { background: rgba(200,70,70,.18); color: #c84646; }
@media (max-width: 520px) {
  .class-pc { grid-template-columns: 1fr; margin-left: 0; }
}

/* ---- Multi-char select ---- */
.select-panel { width: min(440px, 100%); }
.char-slot-list { display: flex; flex-direction: column; gap: .55rem; margin: .75rem 0 1rem; }
.char-slot {
  display: flex; flex-direction: column; gap: .2rem; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; padding: .75rem .85rem;
  background: var(--input-bg); cursor: pointer; font: inherit; color: inherit; width: 100%;
}
.char-slot:hover, .char-slot:focus-visible { border-color: var(--gold); background: var(--selected-bg); outline: none; }
.char-slot.active-slot { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-dim, var(--gold)); }
.char-slot .slot-name { font-weight: 700; color: var(--gold); font-size: 1rem; }
.char-slot .slot-meta { color: var(--muted); font-size: .8rem; }
.char-slot.slot-empty {
  border-style: dashed; align-items: center; justify-content: center;
  min-height: 3.2rem; color: var(--muted); font-weight: 600;
}
.char-slot.slot-empty:hover { color: var(--ink); }
.char-slot-wrap {
  display: flex; align-items: stretch; gap: .45rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--input-bg); padding: .15rem .15rem .15rem 0;
}
.char-slot-wrap.active-slot {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-dim, var(--gold));
}
.char-slot-wrap .char-slot {
  border: none; box-shadow: none; background: transparent;
  flex: 1 1 auto; min-width: 0; padding: .65rem .7rem;
}
.char-slot-wrap .char-slot:hover,
.char-slot-wrap .char-slot:focus-visible {
  background: var(--selected-bg);
}
.char-slot-wrap .char-slot-del {
  flex: 0 0 auto; align-self: center; margin-right: .35rem;
  width: auto; min-width: 3.2rem;
}
.btn.danger, .char-slot-del {
  color: #fff; background: #a33; border-color: #812;
}
.btn.danger:hover, .char-slot-del:hover {
  background: #c44; border-color: #a33;
}


/* ---- Create: sticky confirm bar (mobile-safe) ---- */
.create-panel-sticky {
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
  overflow: hidden;
  align-self: center;
}
.create-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.1rem 1.25rem 0.5rem;
  overscroll-behavior: contain;
}
.create-scroll-pad {
  height: 0.5rem;
}
.create-sticky-bar {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, var(--panel) 28%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 16px rgba(0,0,0,.06);
}
.create-sticky-bar .btn.primary {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
}
.create-sticky-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.35rem;
}
.create-sticky-row .btn.ghost {
  margin-top: 0;
  width: auto;
  flex: 1;
  font-size: 0.8rem;
  min-height: 36px;
}
@media (max-width: 699px) {
  body.mode-create #screen-create,
  body.mode-select #screen-select {
    padding: 0.5rem 8px 0.5rem;
    max-width: 100%;
  }
  .create-panel-sticky {
    width: 100%;
    max-height: 100dvh;
    border-radius: 12px;
  }
  .create-scroll {
    padding: 0.9rem 0.95rem 0.35rem;
  }
  /* Extra bottom pad inside scroll so last class option clears the sticky bar */
  .create-scroll-pad {
    height: 5.5rem;
  }
  .create-sticky-bar {
    padding: 0.55rem 0.85rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  }
  .create-sticky-bar .btn.primary {
    min-height: 46px;
  }
  .jp-logo svg { width: 56px; height: 56px; }
  .cn-logo svg { width: 120px; height: auto; }
  .brand-block h1, .jp-title, .cn-title { font-size: 1.45rem; letter-spacing: .2em; }
  .class-opt { padding: .6rem .7rem; }
}

/* ===== Game shell: top menu | left log+chat | right status+map+quick ===== */
body.page-game { overflow: hidden; height: 100%; }
body.page-game #app { height: 100%; min-height: 100dvh; }
#screen-game {
  flex-direction: column;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  max-width: none;
  margin: 0;
  overflow: hidden;
}

#topbar {
  display: flex; align-items: stretch; gap: 0;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--pane-border);
  flex-shrink: 0; z-index: 30;
  box-shadow: var(--shadow-sm);
}
.topbar-brand {
  display: flex; align-items: center; gap: .45rem;
  padding: .4rem .75rem;
  border-right: 1px solid var(--line);
  flex-shrink: 0;
  min-width: 140px;
}
.brand-mini {
  image-rendering: pixelated; border-radius: 4px;
  border: 1px solid var(--gold-dim); background: var(--brand-ico-bg);
}
.top-title {
  font-size: .88rem; font-weight: 600; color: var(--gold);
  letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.top-tabs {
  display: flex; flex-wrap: nowrap; gap: 4px;
  padding: .4rem .55rem; overflow-x: auto; flex: 1;
  align-items: center;
  scrollbar-width: thin;
}
.top-tab {
  position: relative;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: .4rem .75rem; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: .8rem; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.top-tab:hover:not(:disabled) { color: var(--ink); background: rgba(212,168,75,.08); border-color: var(--line); }
.top-tab.active {
  background: var(--topbar-active);
  color: var(--gold); border-color: var(--gold);
  font-weight: 600;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent) inset;
}
.top-tab.disabled, .top-tab:disabled {
  opacity: .4; cursor: not-allowed; font-style: italic;
}
.top-tab .dot {
  position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: #e05555; border: 1px solid #200;
}

.event-banner {
  background: var(--event-bg);
  border-bottom: 1px solid var(--gold-dim);
  color: var(--gold); padding: .4rem .75rem; font-size: .82rem; text-align: center;
  flex-shrink: 0;
}
.tutorial {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: var(--tutorial-bg); border-bottom: 1px solid var(--accent); padding: .4rem .75rem; font-size: .82rem;
  flex-shrink: 0;
}

.game-shell {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-w);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  position: relative;
  background: var(--shell-bg);
}
.game-shell > .game-left { grid-column: 1; grid-row: 1; }
.game-shell > .game-right { grid-column: 2; grid-row: 1; }
.game-shell > .pane-views { grid-column: 1; grid-row: 1; }


/* Left column */
.game-left {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--shell-bg);
  padding: 6px;
  gap: 6px;
}
.pane {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--pane-border);
  background: var(--log-bg);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.pane-log { flex: 1.55; min-height: 140px; }
.pane-chat { flex: 0.9; min-height: 130px; max-height: 38%; }

.pane-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  flex-wrap: wrap;
  padding: .4rem .6rem;
  background: var(--pane-head-bg);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.pane-head h3 {
  margin: 0; font-size: .82rem; color: var(--gold); letter-spacing: .08em; font-weight: 600;
}
.log-filters, .chat-filters { display: flex; flex-wrap: wrap; gap: 3px; }
.log-f, .chat-f {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: .18rem .45rem; border-radius: 4px; cursor: pointer; font: inherit; font-size: .72rem;
}
.log-f:hover, .chat-f:hover { color: var(--ink); }
.log-f.active, .chat-f.active {
  background: var(--selected-bg); color: var(--gold); border-color: var(--gold-dim);
}

.log-checks {
  display: flex; flex-wrap: wrap; gap: .35rem .7rem;
  padding: .28rem .6rem; background: var(--log-checks-bg); border-bottom: 1px solid var(--line);
  font-size: .7rem; color: var(--muted); flex-shrink: 0;
}
.log-checks label { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; }
.log-checks input { accent-color: var(--gold); }

.log-list {
  flex: 1; overflow-y: auto; padding: .45rem .6rem .55rem;
  display: flex; flex-direction: column; gap: .12rem;
  scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent;
  font-size: 13px; line-height: 1.45;
}
.log-entry { word-break: break-word; padding: .08rem 0; }
.log-entry .log-time {
  display: inline; color: var(--log-time); font-size: .85em;
  font-variant-numeric: tabular-nums; margin-right: .35rem;
}
.log-entry .log-time::before { content: "["; }
.log-entry .log-time::after { content: "]"; }
.log-entry.type-trade { color: var(--trade); }
.log-entry.type-travel { color: var(--travel); }
.log-entry.type-event { color: var(--event-c); }
.log-entry.type-encounter { color: var(--encounter); }
.log-entry.type-stat { color: var(--stat-c); }
.log-entry.type-system { color: var(--system-c); }
.log-entry.type-error, .log-entry.type-warn { color: var(--warn-c); }
.log-entry.type-ui { color: var(--ui-c); }
.log-empty { color: var(--muted); font-size: .8rem; text-align: center; padding: 1.2rem .5rem; }

.log-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem;
  padding: .3rem .55rem; background: var(--panel); border-top: 1px solid var(--line);
  font-size: .72rem; color: var(--muted); flex-shrink: 0;
}
.log-tools .tool { display: inline-flex; align-items: center; gap: .25rem; }
.log-tools select {
  background: var(--input-bg); border: 1px solid var(--line); color: var(--ink);
  border-radius: 3px; font: inherit; font-size: .72rem; padding: .1rem .25rem;
}

.chat-list {
  flex: 1; overflow-y: auto; padding: .35rem .55rem;
  font-size: .78rem; line-height: 1.4;
  scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent;
}
.chat-line { margin: .15rem 0; word-break: break-word; }
.chat-line .ct { color: var(--log-time); margin-right: .3rem; font-variant-numeric: tabular-nums; }
.chat-line .ct::before { content: "["; }
.chat-line .ct::after { content: "]"; }
.chat-line.ch-system { color: var(--chat-sys); }
.chat-line.ch-world { color: var(--chat-world); }
.chat-line.ch-local { color: var(--chat-local); }
.chat-line .ctag { color: var(--gold-dim); margin-right: .25rem; }
.chat-empty { color: var(--muted); font-size: .75rem; padding: .5rem; text-align: center; }

.chat-input-row {
  display: flex; gap: .35rem; padding: .4rem .5rem;
  border-top: 1px solid var(--line); background: var(--panel); flex-shrink: 0;
}
.chat-input-row select {
  background: var(--input-bg); border: 1px solid var(--line); color: var(--ink);
  border-radius: 4px; font: inherit; font-size: .75rem; padding: .3rem;
}
.chat-input-row input {
  flex: 1; min-width: 0; background: var(--input-bg); border: 1px solid var(--line);
  color: var(--ink); border-radius: 4px; font: inherit; font-size: .8rem; padding: .35rem .5rem;
}
.chat-send { width: auto; padding: .35rem .7rem; font-size: .8rem; }

/* Right column */
.game-right {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px; overflow-y: auto; background: var(--right-bg);
  min-height: 0;
  scrollbar-width: thin;
}
.side-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .65rem .7rem;
  box-shadow: var(--shadow-sm);
}
.side-block-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .4rem;
  margin-bottom: .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--pane-border) 70%, transparent);
}
.side-block-head h4 {
  margin: 0; font-size: .8rem; color: var(--gold);
  letter-spacing: .1em; font-weight: 700;
}
.side-sub { color: var(--muted); font-weight: 400; font-size: .7rem; }
.side-hero { display: flex; gap: .6rem; align-items: center; margin-bottom: .5rem; }
#hud-portrait {
  image-rendering: pixelated; border-radius: 6px; border: 1px solid var(--gold-dim); flex-shrink: 0;
  background: var(--brand-ico-bg);
}
.side-name { font-size: 1rem; }
.side-class { color: var(--muted); font-size: .75rem; margin-top: .1rem; }
.bar-row {
  display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .35rem; align-items: center;
  margin: .3rem 0; font-size: .72rem;
}
.bar-lab { color: var(--muted); }
.bar-val { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .68rem; }
.silver-bar strong { color: var(--gold); font-size: .95rem; font-variant-numeric: tabular-nums; }
.meter {
  height: 10px; background: var(--input-bg); border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
}
.meter-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); width: 0%; transition: width .25s; }
.meter-fill.exp { background: linear-gradient(90deg, #8a6a2e, var(--gold)); }
.points-alert { margin: .4rem 0 .2rem; color: var(--encounter); font-size: .72rem; }
.status-dl { margin: .45rem 0 0; display: flex; flex-direction: column; gap: .22rem; }
.status-dl.compact { padding-top: .4rem; border-top: 1px dashed color-mix(in srgb, var(--pane-border) 80%, transparent); }
.status-dl > div { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; }
.status-dl dt { color: var(--muted); margin: 0; }
.status-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.side-map-wrap {
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: var(--map-bg1);
}
#asia-map { width: 100%; display: block; cursor: crosshair; }
#asia-map .city-hit { cursor: pointer; }
.map-desc { margin: .4rem 0 .2rem; color: var(--muted); font-size: .72rem; text-align: center; min-height: 1.6em; }
.map-here { margin: .15rem 0 0; font-size: .78rem; text-align: center; }
.side-line { margin: 0; font-size: .8rem; }

.quick-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.qbtn {
  width: 100%; padding: .45rem .4rem; font-size: .78rem;
  border-radius: 6px;
}
.qbtn.ghost-q { background: transparent; color: var(--muted); }
.quick-char-panel {
  margin-top: .45rem;
  padding: .45rem .5rem .5rem;
  border: 1px solid color-mix(in srgb, var(--pane-border) 85%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--shell-bg) 92%, var(--gold) 8%);
}
.quick-char-panel.hidden { display: none !important; }
.quick-char-head {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  margin-bottom: .35rem; font-size: .72rem; color: var(--muted); font-weight: 600;
}
.quick-char-list { display: flex; flex-direction: column; gap: .3rem; }
.quick-char-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  width: 100%; text-align: left;
  padding: .4rem .5rem; border-radius: 6px;
  border: 1px solid var(--pane-border);
  background: var(--shell-bg); color: var(--ink);
  font-size: .78rem; cursor: pointer;
  min-height: 44px;
}
.quick-char-item:hover, .quick-char-item:focus-visible {
  border-color: var(--gold); outline: none;
}
.quick-char-item.is-active {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-dim, var(--gold));
  cursor: default; opacity: .92;
}
.quick-char-item:disabled, .quick-char-item.is-active {
  pointer-events: none;
}
.quick-char-item .qc-name { font-weight: 700; color: var(--gold); font-size: .82rem; }
.quick-char-item .qc-meta { color: var(--muted); font-size: .68rem; line-height: 1.25; }
.quick-char-panel .tiny-hint { margin: .35rem 0 0; font-size: .68rem; }
#btn-quick-char[aria-expanded="true"] {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-dim, var(--gold));
}
.idle-btn { grid-column: 1 / -1; letter-spacing: .04em; }
.idle-note { margin: .35rem 0 .2rem; text-align: center; color: var(--muted); font-size: .68rem; }
.side-stats-mini {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem;
  margin-top: .45rem; padding-top: .4rem; border-top: 1px dashed color-mix(in srgb, var(--pane-border) 80%, transparent);
  font-size: .68rem; color: var(--muted);
}
.side-stats-mini strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Overlay views over left column */
.pane-views {
  position: absolute;
  top: 6px; left: 6px; bottom: 6px;
  right: calc(var(--side-w) + 6px);
  z-index: 25;
  background: var(--shell-bg);
  border: 1px solid var(--pane-border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pane-views.hidden { display: none !important; }
.overlay-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .7rem;
  background: var(--pane-head-bg);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.overlay-head h3 { margin: 0; font-size: .9rem; color: var(--gold); letter-spacing: .06em; }
.pane-views #views { flex: 1; overflow: auto; padding: .85rem; min-height: 0; }

/* Bottom bar */
#botbar {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  flex-wrap: wrap;
  min-height: var(--bot-h); padding: .22rem .6rem;
  background: var(--botbar-bg); border-top: 1px solid var(--pane-border);
  font-size: .74rem; flex-shrink: 0;
}
.bot-left { color: var(--muted); }
.bot-left strong { color: var(--ink); }
.bot-right { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.bot-pill {
  background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
  padding: .12rem .4rem; border-radius: 3px; font: inherit; font-size: .7rem; cursor: default;
}
.bot-pill.inline { display: inline; padding: .05rem .35rem; }
button.bot-pill { cursor: pointer; }
button.bot-pill:hover { border-color: var(--gold-dim); color: var(--ink); }
.bot-pill.connected { color: var(--ok); }
.bot-pill.dim { opacity: .7; }
.conn-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); margin-right: .15rem; vertical-align: middle;
}

.view-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; margin-bottom: .85rem; flex-wrap: wrap;
}
.view-head h3 { margin: 0; font-size: 1.05rem; letter-spacing: .04em; }
.tick-info { color: var(--muted); font-size: .75rem; }
.help-body { font-size: .85rem; line-height: 1.55; color: var(--ink); }
.help-body ul { padding-left: 1.2rem; color: var(--muted); }

.goods-list { display: flex; flex-direction: column; gap: .5rem; }
.good-row {
  display: grid; grid-template-columns: 44px 1fr auto auto; gap: .65rem; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .75rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.good-row:hover { border-color: var(--pane-border); background: var(--panel2); }
.good-row img { width: 36px; height: 36px; image-rendering: pixelated; border-radius: 4px; }
.good-row .gname { font-weight: 600; }
.good-row .gmeta { color: var(--muted); font-size: .75rem; margin-top: .1rem; }
.good-row .price {
  color: var(--gold); font-variant-numeric: tabular-nums; min-width: 4.8rem;
  text-align: right; font-weight: 600;
}
.good-row .actions { display: flex; gap: .35rem; }
.good-row .actions button {
  border: 1px solid var(--line); background: var(--panel3); color: var(--ink);
  border-radius: 6px; padding: .35rem .6rem; cursor: pointer; font: inherit; font-size: .8rem;
  min-width: 2.4rem;
}
.good-row .actions button.buy { border-color: var(--accent-hi); color: var(--buy); }
.good-row .actions button.sell { border-color: var(--gold-dim); color: var(--gold); }
.good-row .actions button:disabled { opacity: .35; cursor: not-allowed; }
.good-row .actions button:not(:disabled):hover { filter: brightness(1.1); }

.travel-layout { display: grid; grid-template-columns: 1fr 200px; gap: .85rem; }
.city-list { display: flex; flex-direction: column; gap: .45rem; max-height: 420px; overflow: auto; }
.city-opt {
  text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 10px; padding: .65rem .8rem; cursor: pointer; font: inherit;
}
.city-opt:hover { border-color: var(--pane-border); }
.city-opt.selected { border-color: var(--gold); background: var(--selected-bg); }
.city-opt .reg { color: var(--muted); font-size: .75rem; margin-left: .35rem; }
.travel-side {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .75rem;
  display: flex; flex-direction: column; gap: .55rem; height: fit-content;
}
.travel-status {
  margin-top: .9rem; padding: .85rem; background: var(--tutorial-bg); border: 1px solid var(--accent);
  border-radius: 10px; text-align: center; line-height: 1.5;
}

.equip-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.equip-item {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: .55rem; width: 76px; font-size: .7rem; color: var(--muted); text-align: center;
}
.equip-item img { width: 32px; height: 32px; image-rendering: pixelated; }
.char-card {
  display: flex; gap: 1rem; align-items: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 1rem; margin-bottom: .9rem;
}
.stat-list { display: flex; flex-direction: column; gap: .45rem; }
.stat-row {
  display: flex; align-items: center; gap: .65rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem;
}
.stat-row .sname { width: 3.5rem; color: var(--gold); font-weight: 600; }
.stat-row .sval { flex: 1; font-variant-numeric: tabular-nums; }
.stat-row button {
  border: 1px solid var(--accent-hi); background: var(--accent); color: #fff;
  border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font: inherit; font-weight: 700;
}
.stat-row button:disabled { opacity: .35; cursor: not-allowed; }
.stat-row .stat-main { display: flex; align-items: center; gap: .5rem; width: 100%; }
.stat-row .stat-tip {
  margin: .15rem 0 0; font-size: .72rem; line-height: 1.35;
  color: var(--muted, #8a8070); opacity: .92;
}

.icon-btn {
  position: relative; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--ink); cursor: pointer; font-size: 1rem;
}
.icon-btn:hover { border-color: var(--gold-dim); }
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #e05555; border: 1px solid #200;
}

.modal {
  position: fixed; inset: 0; background: var(--modal-scrim); display: flex;
  align-items: center; justify-content: center; z-index: 50; padding: 1rem;
}
.modal-card {
  background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 12px;
  width: min(420px, 100%); max-height: 80vh; overflow: auto; padding: 1rem;
}
.modal-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.modal-card h2 { margin: 0; font-size: 1.1rem; color: var(--gold); }
#mail-list { list-style: none; margin: 0; padding: 0; }
#mail-list li {
  border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; margin-bottom: .45rem;
  cursor: pointer; background: var(--input-bg);
}
#mail-list li.unread { border-color: var(--gold-dim); }
#mail-list .msub { font-weight: 600; }
#mail-list .mfrom { color: var(--muted); font-size: .75rem; }
#mail-list .mbody { margin-top: .4rem; font-size: .85rem; color: var(--ink); display: none; white-space: pre-wrap; }
#mail-list li.open .mbody { display: block; }
.toast {
  position: fixed; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  background: var(--toast-bg); border: 1px solid var(--gold); color: var(--ink);
  padding: .55rem 1rem; border-radius: 999px; z-index: 60; font-size: .9rem;
  box-shadow: var(--shadow); max-width: calc(100vw - 2rem);
}
.qty-row { display: flex; align-items: center; gap: .5rem; margin: .8rem 0; }
.qty-row input {
  width: 5rem; padding: .4rem; background: var(--input-bg); border: 1px solid var(--line);
  color: var(--ink); border-radius: 6px; font: inherit; text-align: center;
}

/* ≥700px desktop: keep left | right columns (narrower side on mid widths) */
@media (max-width: 1100px) and (min-width: 700px) {
  :root { --side-w: 280px; }
}
@media (max-width: 900px) and (min-width: 700px) {
  :root { --side-w: 260px; }
  .topbar-brand { min-width: auto; max-width: 120px; }
  .top-title { max-width: 90px; font-size: .78rem; }
}

/* Mobile dock / mobile-only chrome — hidden on desktop */
.mobile-dock { display: none; }
.mobile-log-preview { display: none; }

/* ===== Mobile web (≤699px): separate vertical / tab experience =====
   CRITICAL: reset explicit grid-column:2 so browsers do NOT invent a
   squeezed second column (was causing vertical 玩家紀錄 strip on iPhone). */
@media (max-width: 699px) {
  :root {
    --mobile-dock-h: 56px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
  }

  body.page-game {
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
  }
  body.page-game.mode-game { overflow: hidden; }
  body.page-game.mode-game #app,
  body.page-game.mode-game #screen-game {
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  #topbar {
    padding-top: var(--safe-t);
    flex-wrap: nowrap;
  }
  .topbar-brand {
    min-width: auto;
    max-width: 96px;
    padding: .35rem .5rem;
  }
  .top-title { max-width: 64px; font-size: .72rem; letter-spacing: 0; }
  .top-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .35rem .4rem;
    gap: 6px;
  }
  .top-tabs::-webkit-scrollbar { display: none; }
  .top-tab {
    font-size: .8rem;
    padding: .55rem .7rem;
    min-height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .event-banner,
  .tutorial {
    width: 100%;
    box-sizing: border-box;
    font-size: .78rem;
    padding: .45rem .65rem;
    z-index: 5;
  }
  .tutorial { flex-wrap: wrap; }
  .tutorial .btn.tiny {
    min-height: 36px;
    min-width: 52px;
    padding: .35rem .7rem;
  }

  /* Single column flex — NEVER two implicit grid tracks */
  .game-shell {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
  }
  .game-shell > .game-left,
  .game-shell > .game-right,
  .game-shell > .pane-views {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100%;
    max-width: 100%;
  }

  .game-left,
  .game-right {
    border-right: none;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  /* Default panel: 主控 = status / map / quick */
  .game-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 8px calc(8px + var(--mobile-dock-h) + var(--safe-b));
    gap: 8px;
    border-bottom: none;
  }
  .game-left {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 6px 6px calc(6px + var(--mobile-dock-h) + var(--safe-b));
    gap: 6px;
  }

  /* Mobile dock tab panels */
  body.is-mobile[data-mdock="main"] .game-right { display: flex; }
  body.is-mobile[data-mdock="main"] .game-left { display: none !important; }

  body.is-mobile[data-mdock="log"] .game-right { display: none !important; }
  body.is-mobile[data-mdock="log"] .game-left { display: flex !important; }
  body.is-mobile[data-mdock="log"] .pane-log {
    display: flex !important;
    flex: 1;
    min-height: 0;
    max-height: none;
  }
  body.is-mobile[data-mdock="log"] .pane-chat { display: none !important; }

  body.is-mobile[data-mdock="chat"] .game-right { display: none !important; }
  body.is-mobile[data-mdock="chat"] .game-left { display: flex !important; }
  body.is-mobile[data-mdock="chat"] .pane-log { display: none !important; }
  body.is-mobile[data-mdock="chat"] .pane-chat {
    display: flex !important;
    flex: 1;
    min-height: 0;
    max-height: none;
  }

  /* Log: full-width horizontal filters — never vertical squeeze */
  .pane-head {
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
  }
  .pane-head h3 { font-size: .85rem; }
  .log-filters, .chat-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .log-f, .chat-f {
    min-height: 36px;
    padding: .4rem .65rem;
    font-size: .78rem;
    border: 1px solid var(--line);
    border-radius: 999px;
  }
  .log-checks {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .65rem;
    writing-mode: horizontal-tb;
  }
  .log-checks label {
    min-height: 32px;
    white-space: nowrap;
  }
  .log-list {
    font-size: 14px;
    writing-mode: horizontal-tb;
  }
  .log-tools { gap: .5rem; }

  /* Chat input sticky above dock + Safari bottom bar */
  .pane-chat {
    position: relative;
  }
  .chat-input-row {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding: .5rem;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
    gap: .4rem;
  }
  .chat-input-row select,
  .chat-input-row input,
  .chat-send {
    min-height: 44px;
    font-size: .9rem;
  }
  .chat-send { padding: .45rem .85rem; }

  /* Main-tab log preview (mobile only; desktop hides via .mobile-log-preview) */
  .mobile-log-preview {
    display: none;
    flex-direction: column;
    gap: .35rem;
    order: 99;
    flex: 0 0 auto;
    max-height: none;
  }
  body.is-mobile[data-mdock="main"] .mobile-log-preview {
    display: flex !important;
  }
  .mobile-log-preview .side-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
  }
  .mobile-log-preview .side-block-head h4 { margin: 0; }
  .log-preview-list {
    max-height: 11.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .15rem 0;
    writing-mode: horizontal-tb !important;
  }
  .log-preview-list .log-entry {
    font-size: .78rem;
    line-height: 1.35;
    padding: .28rem .35rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--input-bg) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
  .log-preview-list .log-time {
    display: inline-block;
    min-width: 4.6em;
    margin-right: .35rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .log-preview-list .log-empty {
    color: var(--muted);
    font-size: .78rem;
    padding: .4rem .2rem;
  }
  #btn-log-more {
    flex-shrink: 0;
    min-height: 32px;
    font-size: .72rem;
    white-space: nowrap;
  }

  /* Dock unread badge */
  .mdock-btn { position: relative; }
  .mdock-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 22px);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e05555;
    border: 1.5px solid var(--topbar-bg, #fff);
    box-shadow: 0 0 0 1px rgba(224, 85, 85, .35);
    pointer-events: none;
  }
  .mdock-badge.hidden { display: none !important; }
  .mdock-badge[data-count]::after {
    content: none;
  }

  /* Status / map / quick — touch friendly */
  .side-block { padding: .75rem .8rem; }
  .quick-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .qbtn {
    min-height: 48px;
    font-size: .9rem;
    padding: .65rem .5rem;
    font-weight: 600;
  }
  .qbtn.primary { font-size: .95rem; }
  .quick-char-item { min-height: 48px; font-size: .85rem; padding: .55rem .6rem; }
  .quick-char-item .qc-name { font-size: .9rem; }
  .quick-char-item .qc-meta { font-size: .74rem; }
  .idle-btn { min-height: 48px; }
  .theme-pill { min-height: 40px; font-size: .78rem; }
  #asia-map { max-height: 42vw; min-height: 140px; }

  /* Overlay views full-bleed over shell */
  .pane-views {
    position: absolute;
    inset: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    height: auto;
    border-radius: 0;
    z-index: 28;
    padding-bottom: calc(var(--mobile-dock-h) + var(--safe-b));
  }
  .overlay-head { min-height: 48px; }
  .icon-btn { width: 44px; height: 44px; }
  .travel-layout { grid-template-columns: 1fr; }
  .city-opt { min-height: 48px; padding: .75rem .85rem; }
  .good-row {
    grid-template-columns: 36px 1fr auto;
    grid-template-areas: "ico name price" "ico name actions";
  }
  .good-row img { grid-area: ico; }
  .good-row > div:nth-child(2) { grid-area: name; }
  .good-row .price { grid-area: price; align-self: end; }
  .good-row .actions { grid-area: actions; justify-self: end; }
  .good-row .actions button {
    min-height: 40px;
    min-width: 44px;
    padding: .45rem .7rem;
  }

  /* Bottom mobile dock */
  .mobile-dock {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    min-height: calc(var(--mobile-dock-h) + var(--safe-b));
    padding: 4px 6px calc(4px + var(--safe-b));
    background: var(--topbar-bg);
    border-top: 1px solid var(--pane-border);
    box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.08);
    gap: 4px;
  }
  .mobile-dock[hidden] { display: none !important; }
  .mdock-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .72rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mdock-btn .mdock-ico { font-size: 1rem; line-height: 1; }
  .mdock-btn.active {
    color: var(--gold);
    background: var(--selected-bg);
    border-color: var(--gold-dim);
    font-weight: 700;
  }

  /* Compact botbar above dock */
  #botbar {
    position: relative;
    z-index: 35;
    font-size: .68rem;
    padding: .2rem .55rem;
    padding-bottom: .2rem;
    margin-bottom: 0;
    /* sits above fixed dock via screen flex; hide to save space when dock present */
    display: none;
  }

  /* Landscape phone: keep single-column tabs, shrink map */
  @media (orientation: landscape) {
    #asia-map { max-height: 28vh; min-height: 96px; }
    .side-hero #hud-portrait { width: 40px; height: 40px; }
    .game-right { padding-bottom: calc(8px + var(--mobile-dock-h) + var(--safe-b)); }
  }
}

/* Desktop: never show mobile dock / mobile-only chrome; keep 3-pane grid intact */
@media (min-width: 700px) {
  .mobile-dock { display: none !important; }
  .mobile-log-preview { display: none !important; }
}


/* ===== Theme picker ===== */
.theme-row {
  margin-top: .55rem; padding-top: .5rem;
  border-top: 1px dashed color-mix(in srgb, var(--pane-border) 80%, transparent);
}
.theme-row-label {
  display: block; font-size: .72rem; color: var(--muted);
  margin-bottom: .35rem; letter-spacing: .06em;
}
.theme-pills {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px;
}
.theme-pill {
  width: 100%; padding: .4rem .2rem; font-size: .72rem;
  border-radius: 6px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--muted);
  cursor: pointer; font: inherit; line-height: 1.2;
}
.theme-pill:hover { color: var(--ink); border-color: var(--pane-border); }
.theme-pill.active {
  border-color: var(--gold); color: var(--gold); background: var(--selected-bg);
  font-weight: 600;
}
.theme-help {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem;
}
.auth-theme {
  margin-top: .85rem; padding-top: .7rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.auth-theme .theme-row-label { margin-bottom: .4rem; }
.auth-theme .theme-pills { max-width: 280px; margin: 0 auto; }


/* —— v0.2 shop / idle / rank —— */
.shop-status { font-size: .78rem; color: var(--text); }
.shop-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.shop-actions .btn { flex: 1 1 auto; min-width: 4.5rem; }
.idle-note { margin: .35rem 0 .2rem; text-align: center; color: var(--muted); font-size: .68rem; }
.idle-btn.active-idle { box-shadow: 0 0 0 2px var(--accent, #c9a227); }
.idle-form fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .65rem .75rem .75rem;
  margin: 0 0 .75rem;
  background: var(--panel-2, var(--panel));
}
.idle-form legend { padding: 0 .35rem; font-size: .78rem; color: var(--gold); }
.idle-route-list, .idle-prefer { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.check-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .5rem; border: 1px solid var(--border); border-radius: 999px;
  font-size: .75rem; background: var(--bg); cursor: pointer;
}
.check-pill input { margin: 0; }
.radio-row { display: flex; align-items: center; gap: .4rem; margin: .25rem 0; font-size: .82rem; }
.idle-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.idle-btns .btn { min-width: 6rem; }
.rank-list { overflow: auto; }
.rank-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rank-table th, .rank-table td { padding: .4rem .45rem; border-bottom: 1px solid var(--border); text-align: left; }
.rank-table th { color: var(--muted); font-weight: 600; font-size: .72rem; }
.rank-table tr.rank-me { background: color-mix(in srgb, var(--accent, #c9a227) 18%, transparent); font-weight: 600; }
@media (max-width: 699px) {
  .shop-actions .btn { min-height: 44px; }
  .idle-btns .btn { min-height: 44px; flex: 1 1 40%; }
  .rank-table { font-size: .75rem; }
}


/* ——— v0.3 warehouse / history / routes / privacy ——— */
.subtabs { display:flex; gap:.35rem; margin:.5rem 0 .75rem; flex-wrap:wrap; }
.subtab {
  border:1px solid var(--border, #d0d4dc); background:var(--panel, #fff);
  color:var(--text, #222); border-radius:999px; padding:.35rem .85rem;
  font-size:.85rem; cursor:pointer;
}
.subtab.active { background:var(--accent, #2b6cb0); color:#fff; border-color:transparent; }
.good-row.expanded { /* grid parent; hist spans full width below */ }
.good-row .gname-btn { cursor:pointer; text-decoration:underline dotted; }
.price-hist {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: .45rem .15rem .15rem;
  margin-top: .15rem;
  border-top: 1px dashed var(--border, #dde);
  color: var(--muted, #666);
  font-size: .75rem;
  line-height: 1.45;
}
.spark { color:var(--accent, #2b6cb0); vertical-align:middle; flex: 0 0 auto; }
.spark.up { color:#2f9e44; }
.spark.down { color:#e03131; }
.spark-meta { margin-left: .15rem; flex: 0 1 auto; white-space: nowrap; }
.hist-list {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}
.char-extra { margin-top:1rem; display:flex; flex-direction:column; gap:.75rem; }
.char-extra fieldset {
  border:1px solid var(--border, #d0d4dc); border-radius:10px; padding:.6rem .75rem;
}
.class-change-list { display:flex; flex-direction:column; gap:.55rem; margin-top:.4rem; }
.class-change-card {
  border: 1px solid var(--border, #444);
  border-radius: .5rem;
  padding: .55rem .65rem;
  background: var(--card-bg, transparent);
}
.class-change-card.is-current { border-color: var(--gold); }
.class-change-card .cc-head { display:flex; align-items:center; gap:.4rem; margin-bottom:.15rem; }
.class-change-card .cc-badge {
  font-size: .72rem; padding: .05rem .35rem; border-radius: .25rem;
  background: rgba(212,175,55,.2); color: var(--gold);
}
.class-change-card .class-tip { display:block; color: var(--muted); margin-bottom:.25rem; }
.class-change-card .class-pc { margin-left: 0; margin-bottom: .45rem; }
.class-change-card .btn { margin-top: .15rem; }
.btn.current-class { opacity:.7; }
.privacy-pills { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem; }
.privacy-pills .theme-pill.active,
#privacy-pills .theme-pill[aria-pressed="true"] {
  background:var(--accent, #2b6cb0); color:#fff; border-color:transparent;
}
.saved-routes-list { display:flex; flex-direction:column; gap:.4rem; margin-top:.4rem; }
.saved-route-row {
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  padding:.45rem .55rem; border:1px solid var(--border, #dde); border-radius:8px;
  background:var(--panel-2, rgba(0,0,0,.02));
}
.saved-route-row .actions { display:flex; gap:.3rem; flex-shrink:0; }
.wh-dep, .wh-wd { font-size:.8rem; }


/* v0.4.0 combat */
.meter-fill.hp { background: linear-gradient(90deg, #e85d5d, #f0a0a0); }
.combat-stats { margin: .35rem 0 .2rem; }
.rest-alert { background: #fff3cd; color: #7a5b00; }
.equip-slots { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .5rem; }
.equip-slot-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.equip-slot-row .slot-lab { min-width: 2.5rem; font-size: .8rem; opacity: .75; }
.equip-slot-row .slot-empty { opacity: .45; font-size: .85rem; }
.equip-slot-row .slot-name small { opacity: .65; margin-left: .25rem; }
.equip-item { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.equip-item small { display: block; opacity: .65; font-size: .75rem; }
.equip-item.on { outline: 1px solid var(--accent, #6a8); border-radius: 6px; padding: 2px 4px; }
.equip-shop-list { display: flex; flex-direction: column; gap: .4rem; }
.equip-shop-row { display: grid; grid-template-columns: 1fr auto auto; gap: .4rem; align-items: center; }
.log-line.combat .log-type, .log-type-combat { color: #c44; }


/* ——— v0.5.0 公告／成就／確認 ——— */
.announce-banner {
  background: linear-gradient(90deg, #1e3a5f, #2a5080);
  color: #f5f7fa;
  padding: .45rem .85rem;
  font-size: .88rem;
  line-height: 1.35;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
[data-theme="simple"] .announce-banner {
  background: #e8f0fe;
  color: #1a3a6b;
  border-bottom: 1px solid #c5d4ef;
}
[data-theme="cn"] .announce-banner {
  background: linear-gradient(90deg, #5c1a1a, #8b2e2e);
  color: #f8e6c8;
}
[data-theme="jp"] .announce-banner {
  background: linear-gradient(90deg, #2c2c2c, #4a4a4a);
  color: #f5f0e8;
}
.mute-note { margin: .35rem 0 0; font-size: .78rem; opacity: .85; }
.achievements-list {
  display: grid;
  gap: .4rem;
  margin: .35rem 0;
}
.ach-item {
  padding: .45rem .55rem;
  border-radius: 6px;
  border: 1px solid var(--border, #d0d4dc);
  background: var(--panel-2, rgba(0,0,0,.03));
  font-size: .86rem;
}
.ach-item.unlocked { border-color: #3a8f5a; background: rgba(58,143,90,.08); }
.ach-item.locked { opacity: .72; }
.ach-ok { color: #2d7a4a; font-size: .78rem; }
.ach-lock { color: var(--muted, #888); font-size: .78rem; }
.achievements-help h4 { margin: .8rem 0 .35rem; font-size: .95rem; }
.confirm-card .confirm-body {
  margin: .4rem 0 1rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.confirm-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}
@media (max-width: 699px) {
  .announce-banner { font-size: .82rem; padding: .4rem .65rem; }
}


/* v0.6 mail / report */
.mail-hint { margin: 0 0 8px; padding: 0 4px; }
.mail-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0 4px;
}
.mail-toolbar .btn.tiny { font-size: .78rem; }
#mail-list li { position: relative; }
#mail-list .mail-actions { display: none; margin-top: 8px; }
#mail-list li.open .mail-actions { display: block; }
#mail-list .mail-del { float: right; }
.report-box {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  background: var(--panel-bg, #fafafa);
}
.report-box h4 { margin: 0 0 6px; font-size: 14px; }
.report-form textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 72px;
  margin: 6px 0 8px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border, #ccc);
  background: var(--input-bg, #fff);
  color: inherit;
  font: inherit;
}
.report-form .btn { width: 100%; }

.v1-note {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent, #c45c26);
  background: var(--panel-bg, #f7f7f7);
  border-radius: 0 8px 8px 0;
}
.v1-note h4 { margin: 0 0 4px; font-size: 14px; }
.v1-note p { margin: 0; font-size: 13px; line-height: 1.45; opacity: 0.9; }

/* —— v1.1.1：日本風品牌／行情板／運力／裝備等級 —— */
.brand-jp .jp-logo { display:flex; justify-content:center; margin-bottom:.35rem; }
.brand-jp .jp-title {
  margin: .25rem 0 0;
  font-size: 1.95rem;
  letter-spacing: .18em;
  font-weight: 700;
  color: #2b2a28;
  font-family: "Hiragino Mincho ProN", "Noto Serif JP", "Songti TC", "PingFang TC", serif;
}
.brand-jp .jp-sub { letter-spacing: .12em; opacity: .85; }
html[data-theme="jp"] .brand-jp .jp-title { color: #3d2c29; }
html[data-theme="cn"] .brand-jp .jp-title { color: var(--gold, #b45309); }
.topbar-brand .top-title {
  font-family: "Hiragino Mincho ProN", "Noto Serif JP", "Songti TC", serif;
  letter-spacing: .12em;
}

.board-controls {
  display: flex; flex-wrap: wrap; gap: .6rem .9rem;
  align-items: flex-end; margin: .5rem 0 .75rem;
}
.board-controls label { display:flex; flex-direction:column; gap:.2rem; font-size:.78rem; opacity:.85; }
.board-controls select, .board-controls input {
  min-width: 8rem; padding: .35rem .5rem; border-radius: 6px;
  border: 1px solid var(--border, #d0d4dc); background: var(--panel, #fff); color: inherit;
}
.board-wrap { overflow: auto; max-height: min(55vh, 480px); border: 1px solid var(--border, #d0d4dc); border-radius: 8px; }
.board-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.board-table th, .board-table td { padding: .4rem .55rem; text-align: left; border-bottom: 1px solid var(--border, #eceef2); white-space: nowrap; }
.board-table th { position: sticky; top: 0; background: var(--panel-2, #f7f8fa); z-index: 1; font-weight: 600; }
.board-table .pct-up { color: #0a7a3e; font-weight: 600; }
.board-table .pct-down { color: #b42318; font-weight: 600; }
.board-table .chg-up { color: #0a7a3e; }
.board-table .chg-down { color: #b42318; }
.board-table tr:hover td { background: rgba(127,127,127,.06); }

.cargo-bar-wrap { margin-bottom: .75rem; }
.cargo-bar {
  height: 10px; border-radius: 999px; background: rgba(127,127,127,.15); overflow: hidden;
}
.cargo-bar > span {
  display:block; height:100%; width:0%; background: linear-gradient(90deg, #3b82f6, #06b6d4);
  transition: width .25s ease;
}
.cargo-bar.over > span { background: linear-gradient(90deg, #ef4444, #f97316); }
.transport-card {
  border: 1px solid var(--border, #d0d4dc); border-radius: 10px; padding: .85rem 1rem;
  background: var(--panel-2, #f7f8fa); margin-bottom: .75rem;
}
.transport-card dl { display:grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; margin:0; font-size:.9rem; }
.transport-card dt { opacity:.7; }
.transport-card dd { margin:0; font-weight:600; }
.transport-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem; }

.equip-item.locked, .equip-shop-row.locked { opacity: .55; }
.equip-item .need-lv, .equip-shop-row .need-lv {
  display:inline-block; margin-left:.35rem; padding:.05rem .35rem; border-radius:4px;
  background: rgba(180,35,24,.12); color:#b42318; font-size:.72rem;
}
.equip-shop-row .rarity-legendary { color:#c9a227; }
.equip-shop-row .rarity-epic { color:#a855f7; }
.equip-shop-row .rarity-rare { color:#3b82f6; }
.equip-shop-row .rarity-uncommon { color:#16a34a; }


/* v1.2 location list */
.loc-list { margin-top: .45rem; max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: .35rem; }
.loc-group { border: 1px solid var(--pane-border, #c9d4e0); border-radius: 8px; background: var(--pane, #fff); }
.loc-group-head {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; padding: .45rem .55rem; border: 0; background: transparent; cursor: pointer;
  font: inherit; color: inherit; font-weight: 600;
}
.loc-group-head .chev { color: var(--muted); font-size: .75rem; }
.loc-group.open .chev { transform: rotate(90deg); display: inline-block; }
.loc-group-body { display: none; padding: 0 .35rem .4rem; }
.loc-group.open .loc-group-body { display: flex; flex-direction: column; gap: .25rem; }
.loc-opt {
  width: 100%; text-align: left; border: 1px solid transparent; border-radius: 6px;
  background: var(--chip-bg, rgba(0,0,0,.03)); padding: .4rem .5rem; cursor: pointer; font: inherit; color: inherit;
}
.loc-opt:hover { border-color: var(--pane-border); }
.loc-opt.selected { border-color: var(--gold, #d4a84b); background: var(--selected-bg, rgba(212,168,75,.15)); }
.loc-opt.here { opacity: .65; }
.loc-opt .kind {
  display: inline-block; font-size: .65rem; padding: .05rem .3rem; border-radius: 4px;
  margin-right: .25rem; background: var(--chip-bg, #e8eef5); color: var(--muted);
}
.loc-opt .kind.cave { background: #3a2a45; color: #e8d0ff; }
.loc-opt .kind.hub { background: #2a3d55; color: #cfe0ff; }
.loc-opt .danger { float: right; font-size: .68rem; color: var(--warn, #c45c26); }
.city-list.loc-list { max-height: 480px; }
.toast-combat { border-color: var(--gold, #d4a84b) !important; font-weight: 600; }
@media (max-width: 720px) {
  .loc-list { max-height: 200px; }
  .loc-opt { min-height: 44px; }
}

/* v1.2.5 hide appear UI */
.appear-fieldset, .appear-editor, .appear-preview, .appear-preview-wrap, .appear-actions, #brand-appear, #hud-portrait, #create-appear, #char-appear-editor, #char-appear-preview { display: none !important; }

/* v1.2.4 layered ornate appearance (unused in UI) */
.appear-fieldset { margin: .75rem 0; }
.appear-editor { display: flex; flex-direction: column; gap: .65rem; }
.appear-preview {
  position: relative; width: 72px; height: 96px; border-radius: 10px;
  border: 1px solid var(--pane-border, #c9d4e0); background: #0e0e14; overflow: hidden;
  flex-shrink: 0; image-rendering: pixelated; image-rendering: crisp-edges;
}
.appear-preview-inline { margin-bottom: .25rem; width: 96px; height: 128px; }
.appear-preview-wrap { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.appear-preview-wrap .appear-preview { width: 96px; height: 128px; }
.appear-preview-hud {
  width: 52px; height: 69px; border-radius: 8px; border: 1px solid var(--pane-border, #c9d4e0);
}
.appear-preview-mini {
  width: 28px; height: 37px; border-radius: 6px; border: 1px solid transparent; background: #0e0e14;
}
.ap-layer.ap-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  image-rendering: pixelated; image-rendering: crisp-edges;
  left: 0; transform: none; border-radius: 0; pointer-events: none;
  z-index: 1;
}
.ap-body { z-index: 1 !important; }
.ap-pants { z-index: 2 !important; }
.ap-shirt { z-index: 3 !important; }
.ap-head { z-index: 4 !important; }
.ap-hair { z-index: 5 !important; }
.ap-belt { z-index: 6 !important; }
.ap-bag { z-index: 7 !important; }
.ap-badge {
  position: absolute; right: 3px; bottom: 3px; z-index: 10;
  font-size: .65rem; background: rgba(0,0,0,.5); color: #fff; padding: .02rem .25rem; border-radius: 4px;
  line-height: 1.2;
}
.appear-preview-mini .ap-badge,
.appear-preview-hud .ap-badge { display: none; }
.appear-rows { display: flex; flex-direction: column; gap: .45rem; }
.appear-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.appear-lab { min-width: 2.5rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
.appear-pills { display: flex; flex-wrap: wrap; gap: .3rem; }
.appear-pill {
  display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .4rem;
  border: 1px solid var(--pane-border); border-radius: 999px; cursor: pointer; font-size: .75rem;
  background: var(--chip-bg, rgba(0,0,0,.03)); position: relative;
}
.appear-pill-thumb {
  border-radius: 8px; padding: .2rem .35rem .15rem; flex-direction: column; min-width: 40px;
}
.appear-pill:has(input:checked) {
  border-color: var(--gold, #d4a84b); background: var(--selected-bg, rgba(212,168,75,.15));
}
.appear-pill input { position: absolute; opacity: 0; pointer-events: none; }
.appear-pill .swatch {
  width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25);
}
.appear-pill .swatch-img {
  width: 36px; height: 48px; border-radius: 6px; overflow: hidden; background: #12121a;
  border: 1px solid rgba(255,255,255,.08); display: block; image-rendering: pixelated;
}
.appear-pill .swatch-img img {
  width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  image-rendering: pixelated; image-rendering: crisp-edges; display: block;
}
.appear-pill .swatch-none {
  width: 36px; height: 48px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: #1a1a22; color: #888; font-size: .9rem; border: 1px dashed rgba(255,255,255,.15);
}
.appear-pill .plab { font-size: .68rem; color: var(--muted); }
.appear-actions { margin-top: .5rem; }
.side-hero .appear-preview-hud { flex-shrink: 0; }
.topbar-brand .appear-preview-mini { flex-shrink: 0; }
.loc-specs { display: block; font-size: .68rem; color: var(--muted); margin-top: .15rem; }
.spec-badge {
  display: inline-block; margin-left: .25rem; padding: .05rem .3rem; border-radius: 4px;
  font-size: .65rem; background: rgba(212,168,75,.2); color: var(--gold, #b8860b); vertical-align: middle;
}
.char-card .char-idle { opacity: .35; }
@media (max-width: 720px) {
  .appear-pill { min-height: 36px; }
}


/* v1.2.1 map list + walk/sail tags */
.side-map-wrap.hidden, #asia-map.hidden { display: none !important; }
#side-map-block .loc-list { max-height: min(52vh, 420px); margin-top: .35rem; }
.loc-opt .mode {
  float: right; margin-right: .35rem; font-size: .65rem; padding: .05rem .28rem;
  border-radius: 4px; font-weight: 600;
}
.loc-opt .mode.walk { background: #2d4a3e; color: #b8e0c8; }
.loc-opt .mode.sail { background: #1e3a5f; color: #9ec5ff; }
.loc-opt .danger { margin-left: .25rem; }


/* v1.2.3 recommendLv + under-level warn */
.loc-opt .pop {
  float: right; clear: right; margin-left: .35rem;
  font-size: .68rem; font-weight: 600;
  color: var(--gold, #d4a84b);
}
.loc-opt .pop.zero { color: var(--muted, #8a8070); font-weight: 500; }
.loc-opt .rec-lv {
  margin-left: .3rem; font-size: .65rem; padding: .05rem .28rem;
  border-radius: 4px; background: #3a3a28; color: #e8d48b; font-weight: 600;
}
.loc-opt.under-lv {
  border-color: #c47a2a !important;
  background: rgba(196, 122, 42, 0.12);
}
.loc-opt.under-lv .rec-lv {
  background: #6b3a10; color: #ffd089;
}
.loc-opt.under-lv.selected {
  box-shadow: 0 0 0 1px rgba(255, 170, 60, 0.55);
}
.transport-actions { display: flex; flex-wrap: wrap; gap: .4rem; }


/* v1.2.6 / 1.2.7 equip shop page */
.equip-shop-filters { display: flex; flex-direction: column; gap: .55rem; margin: .5rem 0 .75rem; }
.equip-shop-filters .filter-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.equip-shop-filters .filter-label { font-size: .8rem; opacity: .75; min-width: 2.2rem; }
.equip-shop-filters .pill-row { display: flex; flex-wrap: wrap; gap: .3rem; }
.equip-shop-filters .theme-pill { font-size: .78rem; padding: .2rem .55rem; }
.equip-shop-row { grid-template-columns: 1fr auto auto auto; }
.equip-cat-pill .equip-cat-ico {
  display: inline-block; min-width: 1.1em; font-weight: 700; opacity: .85;
}
.equip-item { gap: .35rem; }
.equip-item img, .equip-shop-row > img, .equip-slot-row > img { display: none !important; }
.equip-shop-row .owned-badge {
  font-size: .72rem; padding: .1rem .35rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #c9a227) 18%, transparent);
  color: var(--accent, #c9a227); white-space: nowrap;
}
.equip-shop-row .owned-badge.empty { opacity: .35; background: transparent; color: inherit; }


/* —— v1.4.0：登入頁中國風牌匾＋玩家寄賣／開舖 —— */
.brand-cn .cn-logo { display:flex; justify-content:center; margin-bottom:.35rem; }
.brand-cn .cn-title {
  margin: .35rem 0 0;
  font-size: 2.05rem;
  letter-spacing: .28em;
  font-weight: 700;
  color: #d4a84b;
  font-family: "Ma Shan Zheng", "Noto Serif TC", "Source Han Serif TC", "Songti TC", "STKaiti", serif;
  text-shadow: 0 1px 0 #2c140a, 0 0 18px rgba(212,168,75,.25);
}
.brand-cn .cn-sub {
  letter-spacing: .18em;
  opacity: .9;
  font-family: "Noto Serif TC", "Songti TC", serif;
  color: var(--muted, #a89274);
}
.page-auth .brand-cn .cn-title { color: #b45309; }
html[data-theme="cn"] .page-auth .brand-cn .cn-title { color: #d4a84b; }
html[data-theme="jp"] .page-auth .brand-cn .cn-title { color: #8b3a2a; }
html[data-theme="simple"] .page-auth .brand-cn .cn-title { color: #9a5b12; }
.page-auth .auth-panel {
  /* 輕量筆墨感框，唔強改主題 */
}
.page-auth .brand-cn + .tabs { margin-top: .25rem; }
.page-auth .brand-jp + .tabs { margin-top: .25rem; }
.page-auth .brand-jp .jp-title { color: #b45309; }
html[data-theme="cn"] .page-auth .brand-jp .jp-title { color: #d4a84b; }
html[data-theme="jp"] .page-auth .brand-jp .jp-title { color: #8b3a2a; }
html[data-theme="simple"] .page-auth .brand-jp .jp-title { color: #9a5b12; }

/* —— v1.11.4：選角／創角中文牌匾尺寸 —— */
.select-panel .brand-cn .cn-title,
.create-panel .brand-cn .cn-title {
  font-size: 1.7rem;
  letter-spacing: .22em;
}
.select-panel .brand-cn .cn-logo svg,
.create-panel .brand-cn .cn-logo svg {
  width: 140px;
  height: auto;
  max-width: 70vw;
}
body.page-game .brand-cn .cn-title { color: #b45309; }
html[data-theme="cn"] body.page-game .brand-cn .cn-title { color: #d4a84b; }
html[data-theme="jp"] body.page-game .brand-cn .cn-title { color: #8b3a2a; }
html[data-theme="simple"] body.page-game .brand-cn .cn-title { color: #9a5b12; }


.my-listings-wrap { margin-top: .65rem; border-top: 1px dashed var(--line, #3a3026); padding-top: .45rem; }
.my-listings-wrap .side-block-head.tight { display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-bottom:.25rem; }
.my-listings-wrap .side-block-head.tight h4 { margin:0; font-size:.82rem; }
.tiny-hint { font-size:.72rem; margin:.15rem 0 .35rem; }
.ps-list { display:flex; flex-direction:column; gap:.4rem; max-height: 220px; overflow:auto; }
.ps-list.compact { max-height: 180px; }
.ps-card {
  border: 1px solid var(--line, #d0d4dc); border-radius: 8px;
  padding: .45rem .55rem; background: var(--panel2, var(--panel, #fff));
  font-size: .78rem;
}
.ps-card .ps-title { font-weight: 600; color: var(--gold, #b45309); }
.ps-card .ps-meta { opacity: .85; margin: .15rem 0; }
.ps-card .ps-actions { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.3rem; }
.ps-card.mine { border-color: var(--gold-dim, #8a6a2e); }
.ps-card.disabled-buy .btn-buy { opacity: .45; cursor: not-allowed; }
.ps-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; margin:.4rem 0 .6rem; }
.ps-toolbar label { display:flex; flex-direction:column; gap:.15rem; font-size:.75rem; opacity:.9; }
.ps-toolbar select, .ps-list-card select, .ps-list-card input[type=number] {
  min-width: 8rem; padding: .3rem .45rem; border-radius: 6px;
  border: 1px solid var(--line, #d0d4dc); background: var(--input-bg, var(--panel, #fff)); color: inherit; font: inherit;
}
.ps-board { display:flex; flex-direction:column; gap:.75rem; }
.ps-shop {
  border: 1px solid var(--line, #d0d4dc); border-radius: 10px;
  padding: .55rem .7rem; background: var(--panel2, var(--panel, #fff));
}
.ps-shop-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.35rem; align-items:baseline; }
.ps-shop-head strong { color: var(--gold, #b45309); }
.ps-shop-items { margin: .35rem 0 0; padding: 0; list-style: none; font-size: .78rem; }
.ps-shop-items li { display:flex; flex-wrap:wrap; gap:.35rem .6rem; align-items:center; padding: .25rem 0; border-top: 1px dashed var(--line, #ccc); }
.ps-shop-items li:first-child { border-top: 0; }
.ps-empty { opacity: .7; font-size: .85rem; padding: .75rem 0; }
.modal-card.ps-list-card { max-width: 420px; }
.modal-card .modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.modal-card .modal-head h3 { margin:0; font-size:1.05rem; color: var(--gold); }
.modal-card .modal-body label { display:block; margin: .45rem 0; font-size:.82rem; }
.modal-card .modal-body input, .modal-card .modal-body select { width:100%; margin-top:.2rem; }
.modal-card .modal-foot { display:flex; justify-content:flex-end; gap:.45rem; margin-top:.75rem; }


/* —— v1.5.3：離線結算／舖頭營業 —— */
.offline-card { max-width: 28rem; }
.offline-card .off-sec { margin: .65rem 0 .35rem; font-weight: 600; font-size: .85rem; color: var(--accent, #b8860b); }
.offline-card .off-list { margin: 0; padding-left: 1.1rem; font-size: .82rem; line-height: 1.45; }
.offline-card .off-list li { margin: .15rem 0; }
.offline-card .off-total { font-size: .95rem; font-weight: 700; margin: .4rem 0; }
.offline-card .off-meta { font-size: .75rem; color: var(--muted, #888); margin-bottom: .5rem; }
.shop-status .shop-badge {
  display: inline-block; padding: .12rem .45rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; margin-left: .25rem;
}
.shop-status .shop-badge.open { background: rgba(46, 160, 80, .18); color: #1a7a3a; }
.shop-status .shop-badge.closed { background: rgba(120, 120, 120, .18); color: #666; }
.shop-travel-lock { font-size: .75rem; color: #b45309; margin-top: .35rem; }

/* —— v1.5.3 戰鬥技能 —— */
.skills-list { display: flex; flex-direction: column; gap: .45rem; margin-top: .4rem; }
.skill-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
  padding: .45rem .55rem; border-radius: 8px; background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06); font-size: .82rem;
}
.skill-row.learned { border-color: rgba(46,160,80,.35); background: rgba(46,160,80,.08); }
.skill-row .sk-meta { flex: 1; }
.skill-row .sk-name { font-weight: 650; }
.skill-row .sk-desc { color: var(--muted, #777); font-size: .75rem; margin-top: .15rem; }
.skill-row .sk-cost { font-size: .72rem; color: var(--muted, #888); }


/* v1.6.0 party / employees */
.party-list, .party-hire-list { display:flex; flex-direction:column; gap:.55rem; }
.party-card, .party-hire-card {
  border: 1px solid var(--border, #d0d4dc); border-radius: 10px; padding: .7rem .85rem;
  background: var(--panel-2, #f7f8fa);
}
.party-card header, .party-hire-card header {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.35rem;
}
.party-card h5, .party-hire-card h5 { margin:0; font-size:.95rem; }
.party-meta { font-size:.82rem; opacity:.85; line-height:1.45; }
.party-actions { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.party-hire-card.locked { opacity:.55; }
.party-slot-empty {
  border: 1px dashed var(--border, #c5cad3); border-radius: 10px; padding: .85rem;
  text-align:center; opacity:.7; font-size:.9rem;
}
.party-badge {
  display:inline-block; padding:.05rem .4rem; border-radius:4px; font-size:.72rem;
  background: rgba(59,130,246,.12); color:#1d4ed8;
}


/* v1.6.2 cave special + hot + auto equip */
.spec-badge.cave {
  background: rgba(120, 80, 180, .28); color: #d4b8ff;
}
.spec-badge.hot {
  background: rgba(220, 80, 60, .3); color: #ffb4a8; font-weight: 700;
}
.loc-specs .hot-tag, .hot-tag {
  color: #ff8a7a; font-weight: 600;
}
.equip-auto-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .4rem;
}
.good-row.hot-good { box-shadow: inset 3px 0 0 #e07060; }

/* v1.7 guild + city donate */
.guild-panel .row-actions, .cd-mine + .row-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:.4rem 0; }
.guild-panel input[type=text], .guild-panel input[type=number], .guild-panel select,
#cd-amount, #guild-chat-input, #guild-create-name { flex:1; min-width:120px; padding:.35rem .5rem; }
.guild-list, .guild-members, .guild-warehouse, .guild-quests, .guild-apps { display:flex; flex-direction:column; gap:6px; }
.guild-card, .guild-member, .guild-wh-row, .guild-quest, .guild-app-row, .cd-rank-row, .cd-tier-row {
  border:1px solid var(--border,#ddd); border-radius:8px; padding:8px 10px; background:var(--panel-bg,#fafafa);
}
.guild-card .actions, .guild-member .actions, .guild-app-row .actions { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; }
.guild-notice { white-space:pre-wrap; margin:.2rem 0 .6rem; padding:8px; background:rgba(0,0,0,.04); border-radius:6px; }
.guild-chat-list, .guild-logs { list-style:none; margin:0; padding:0; max-height:240px; overflow:auto; }
.guild-chat-list li, .guild-logs li { padding:4px 2px; border-bottom:1px solid var(--border,#eee); font-size:.85rem; }
.guild-chat-list .gc-name { font-weight:600; margin-right:4px; }
.gpanel { margin-top:8px; }
.cd-mine { padding:10px; border:1px solid var(--gold-dim,#c9a227); border-radius:8px; margin-bottom:8px; }
.cd-intel { margin-top:8px; padding:8px; border-radius:8px; background:rgba(80,120,200,.08); }
.cd-intel li { margin:.2rem 0; }
.cd-tiers { display:flex; flex-direction:column; gap:4px; max-height:280px; overflow:auto; }
.cd-tier-row.current { background:rgba(201,162,39,.12); }
.online-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#3c3; margin-right:4px; }
.online-dot.off { background:#bbb; }

/* v1.7.5 交易紀錄 */
.tl-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: .4rem 0 .6rem; align-items: center; }
.tl-list { list-style: none; margin: 0; padding: 0; max-height: min(62vh, 560px); overflow: auto; }
.tl-list .tl-row {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border, #eee);
  font-size: .88rem;
}
.tl-list .tl-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.tl-list .tl-tag {
  font-size: .72rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--chip-bg, #eef1f5);
  color: var(--muted, #666);
}
.tl-list .tl-sell .tl-tag { background: #e8f6ec; color: #1a7a3a; }
.tl-list .tl-buy .tl-tag { background: #f4ebe4; color: #8a4b1a; }
.tl-list .tl-shop .tl-tag { border: 1px solid var(--gold-dim, #c9a227); }
.tl-list .tl-time { color: var(--muted, #888); font-size: .75rem; white-space: nowrap; }
.tl-list .tl-main { color: var(--ink, #222); }
.tl-list .tl-money { color: var(--muted, #555); font-size: .82rem; margin-top: 2px; }

.skill-row.locked { opacity: .78; }
.skill-row .sk-type {
  display: inline-block; margin-left: .35rem; padding: .05rem .35rem;
  font-size: .65rem; font-weight: 600; border-radius: 999px;
  background: rgba(120,120,160,.15); color: var(--muted, #666); vertical-align: middle;
}
.skill-row .sk-lock { color: #b45309; }


/* v1.8.2 Lv fold groups (equip shop / skills / inventory) */
.lv-fold-list { display: flex; flex-direction: column; gap: .4rem; }
.lv-fold {
  border: 1px solid var(--pane-border, #c9d4e0);
  border-radius: 8px;
  background: var(--pane, #fff);
  overflow: hidden;
}
.lv-fold-head {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; padding: .5rem .65rem; border: 0; background: rgba(0,0,0,.02);
  cursor: pointer; font: inherit; color: inherit; font-weight: 650;
  min-height: 2.4rem; /* touch-friendly */
}
.lv-fold-head:hover { background: rgba(0,0,0,.045); }
.lv-fold-head .lv-fold-lab small { font-weight: 500; opacity: .7; margin-left: .15rem; }
.lv-fold-head .chev {
  color: var(--muted, #888); font-size: .72rem; flex-shrink: 0;
  transition: transform .15s ease; display: inline-block;
}
.lv-fold.open .chev { transform: rotate(90deg); }
.lv-fold-body { display: none; padding: .15rem .45rem .5rem; flex-direction: column; gap: .35rem; }
.lv-fold.open .lv-fold-body { display: flex; }
.lv-fold-body .equip-shop-row,
.lv-fold-body .skill-row,
.lv-fold-body .equip-item {
  margin: 0;
}
.skills-list.lv-fold-list { margin-top: .4rem; }
.equip-shop-list.lv-fold-list { gap: .4rem; }
.equip-row.lv-fold-list { display: flex; flex-direction: column; gap: .4rem; }
.goods-list.lv-fold-list { gap: .4rem; }
.lv-fold-body .good-row { margin: 0; }
#board-list.lv-fold-list,
.board-wrap.lv-fold-list { display: flex; flex-direction: column; gap: .4rem; }
.board-cat-table { width: 100%; margin: 0; font-size: .85rem; }
.board-cat-table th, .board-cat-table td { padding: .35rem .4rem; }
@media (max-width: 720px) {
  .board-cat-table { font-size: .78rem; }
  .board-cat-table th, .board-cat-table td { padding: .3rem .28rem; }
  #board-list .lv-fold-head { min-height: 44px; }
  #market-list .lv-fold-head { min-height: 44px; }
}
@media (max-width: 520px) {
  .lv-fold-head { padding: .55rem .6rem; font-size: .92rem; }
  .lv-fold-body { padding: .2rem .35rem .45rem; }
}

/* v1.9.1 眼力行情提示 */
.insight-hint {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .35rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
}
.insight-hint.hi { background: rgba(180, 40, 40, .12); color: #a02828; }
.insight-hint.lo { background: rgba(20, 120, 70, .12); color: #0a7a3e; }
.theme-cn .insight-hint.hi { color: #8b1a1a; }
.theme-jp .insight-hint.lo { color: #1b6b45; }


/* v1.9.3 裝備非攻防特效 */
.eq-fx {
  display: block;
  font-size: .72rem;
  color: #c9a227;
  opacity: .95;
  line-height: 1.25;
  margin-top: .1rem;
}
.equip-shop-row .eq-fx { margin-top: .15rem; }
.equip-slot-row .eq-fx { font-weight: 500; }


/* —— 錢莊 v1.10 —— */
.bank-status { margin: .6rem 0; }
.bank-card {
  background: var(--panel-bg, #f7f4ef);
  border: 1px solid var(--border, #d9d0c3);
  border-radius: 10px;
  padding: .75rem 1rem;
}
.bank-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .28rem 0;
  border-bottom: 1px dashed rgba(0,0,0,.06);
  font-size: .92rem;
}
.bank-row:last-of-type { border-bottom: 0; }
.bank-row span { color: var(--muted, #6b6358); }
.bank-actions { flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.bank-hist { list-style: none; padding: 0; margin: .4rem 0 0; }
.bank-hist li { padding: .35rem 0; border-bottom: 1px solid rgba(0,0,0,.05); font-size: .88rem; }
.bank-hist .muted { color: var(--muted, #8a8074); font-size: .8rem; }


/* v1.11 topbar「更多」+ death + price trade hint */
.top-more-wrap { position: relative; flex-shrink: 0; display: none; }
.top-more-btn { font-weight: 600; }
.top-more-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 9.5rem; max-height: 70vh; overflow-y: auto;
  background: var(--panel, #fff); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: .35rem;
}
.top-more-menu button.top-more-item {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--text);
  padding: .55rem .7rem; border-radius: 8px; font-size: .9rem; cursor: pointer;
}
.top-more-menu button.top-more-item:hover,
.top-more-menu button.top-more-item.active { background: var(--topbar-active, #dbeafe); }
.top-more-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 190;
  background: rgba(15, 23, 42, .28);
  -webkit-tap-highlight-color: transparent;
}
.insight-hint.trade-hi { color: #b45309; font-weight: 600; }
.insight-hint.trade-lo { color: #047857; font-weight: 600; }
.death-box {
  margin: .55rem 0 .75rem; padding: .65rem .75rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2, var(--input-bg, #f8fafc));
  font-size: .88rem;
}
.death-box .death-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
@media (max-width: 899px) {
  .top-more-wrap { display: block; }
  .top-tabs .top-tab-sec { display: none !important; }
  .top-tabs .top-tab-sec.top-tab-pinned { display: inline-flex !important; }
  /* Escape .top-tabs overflow-x:auto clipping — fixed panel in viewport */
  .top-more-menu {
    position: fixed;
    right: max(8px, env(safe-area-inset-right, 0px));
    left: auto;
    top: 0; /* JS sets from button rect */
    z-index: 200;
    min-width: min(12.5rem, calc(100vw - 24px));
    max-width: calc(100vw - 16px);
    max-height: min(62vh, calc(100dvh - 72px - env(safe-area-inset-bottom, 0px)));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
  }
  .top-more-backdrop:not(.hidden) { display: block; }
  .top-more-menu button.top-more-item {
    padding: .7rem .85rem;
    min-height: 44px;
    font-size: .95rem;
  }
}


/* v1.12.2 party wounded */
.party-wounded { color: #b45309; font-weight: 600; }

/* ===== 好友／私聊 v1.13 ===== */
.friends-add.row-flex { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.4rem 0; }
.friends-add input { flex:1 1 8rem; min-width:6rem; }
.friends-search-results { margin:.3rem 0 .6rem; }
.friends-search-results .fs-item {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.35rem .5rem; border:1px solid var(--border, #e5e7eb); border-radius:6px; margin-bottom:.3rem;
}
.friends-list { list-style:none; margin:0; padding:0; }
.friends-list li {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem;
  padding:.45rem .55rem; border-bottom:1px solid var(--border, #e5e7eb);
}
.friends-list .fn { font-weight:600; }
.friends-list .fmeta { font-size:.85rem; color:var(--muted, #6b7280); }
.friends-list .fonline { color:#059669; font-weight:600; }
.friends-list .foffline { color:#9ca3af; }
.friends-list .factions { display:flex; flex-wrap:wrap; gap:.3rem; }
.friends-subh { margin:.7rem 0 .3rem; font-size:.95rem; }
.mini-badge {
  display:inline-block; min-width:1.1rem; padding:0 .3rem; margin-left:.25rem;
  border-radius:999px; background:#dc2626; color:#fff; font-size:.7rem; line-height:1.2rem; text-align:center;
}
.friends-pm-head { display:flex; gap:.4rem; align-items:center; margin:.4rem 0; }
.friends-pm-head select { flex:1; }
.friends-pm-list {
  height:min(42vh, 280px); overflow:auto; border:1px solid var(--border, #e5e7eb);
  border-radius:8px; padding:.5rem; background:var(--panel-bg, #fafafa); margin-bottom:.4rem;
}
.friends-pm-list .pm-line { margin:.2rem 0; font-size:.9rem; word-break:break-word; }
.friends-pm-list .pm-mine { text-align:right; color:var(--accent, #1d4ed8); }
.friends-pm-list .pm-time { font-size:.75rem; color:#9ca3af; margin-right:.3rem; }
.friends-pm-form { display:flex; gap:.35rem; }
.friends-pm-form input { flex:1; }
#tab-friends .dot, #friends-dot.dot {
  display:inline-block; width:.45rem; height:.45rem; margin-left:.2rem;
  border-radius:50%; background:#dc2626; vertical-align:super;
}
#tab-friends .dot.hidden, #friends-dot.dot.hidden { display:none; }
@media (max-width: 699px) {
  .friends-pm-list { height:min(36vh, 220px); }
}


/* ===== auth v1.14.3 ===== */
/* marketCategories v1.14.4 */
.auth-form .hint { font-size: .8rem; color: var(--muted); margin: 0 0 .6rem; line-height: 1.4; }
.auth-form .hint a { color: var(--gold); }
#form-forgot .btn.ghost, #reg-step2 .btn.ghost { margin-top: .35rem; }

/* ===== workshops v1.15.0 ===== */
.ws-build { margin: .35rem 0 .6rem; }
.ws-type-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.ws-list { display: flex; flex-direction: column; gap: .65rem; }
.ws-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: .55rem .7rem;
  background: var(--panel-bg, #fafafa);
}
.ws-card.ws-stopped { opacity: .85; border-style: dashed; }
.ws-card-head { font-size: .92rem; margin-bottom: .25rem; }
.ws-card-meta { margin: .15rem 0; }
.ws-card-meta select.ws-recipe { max-width: 11rem; font-size: .8rem; }
.ws-card-stock { font-size: .82rem; margin: .25rem 0; line-height: 1.4; }
.ws-card-need { margin-bottom: .35rem; }
.ws-card-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.ws-elsewhere { color: var(--muted, #888); font-size: .8rem; }
.ws-card .ok { color: #1a7a3a; }
.ws-card .warn { color: #b45309; }


/* 城政／城主 v1.16 */
.cr-status { margin: .5rem 0; }
.cr-card { padding: .45rem .6rem; margin: .25rem 0; border: 1px solid var(--line, #444); border-radius: 6px; background: var(--panel-2, rgba(0,0,0,.15)); }
.cr-card.mayor { border-color: var(--gold-dim, #c9a227); }
.cr-log { max-height: 220px; overflow: auto; font-size: .85rem; }
.cr-log-row { padding: .25rem 0; border-bottom: 1px dashed var(--line, #333); opacity: .9; }
.cd-mayor { margin-bottom: .4rem; }

/* v1.17 market windows */
.market-windows-info { display: inline-block; margin-top: 0.2rem; opacity: 0.9; font-size: 0.92em; }
.stock-out { color: #c45c26; font-weight: 600; }

/* v1.18 route reputation */
.route-rep-box{margin:.4rem 0;padding:.5rem.6rem;background:rgba(0,0,0,.04);border-radius:6px}
.route-rep-list{margin:.3rem 0;padding-left:1.2rem;font-size:.92em}
.route-rep-list li{margin:.15rem 0}


/* v1.19 路線風險選擇 */
.route-risk-box {
  margin: .55rem 0 .65rem;
  padding: .45rem .55rem .5rem;
  border: 1px solid rgba(200,170,90,.35);
  border-radius: 8px;
  background: rgba(30,24,14,.35);
}
.route-risk-box legend {
  font-size: .78rem;
  color: var(--gold, #d4b56a);
  padding: 0 .25rem;
}
.route-risk-preview {
  margin: .35rem 0 0;
  line-height: 1.35;
  font-size: .72rem;
  color: var(--muted, #a89a78);
}
.travel-side .route-risk-box .radio-row {
  font-size: .78rem;
}