/* 复古游戏菜单；插画角色与界面独立渲染。 */
:root {
  --console-panel: #182650;
  --console-panel-light: #344c80;
  --console-edge: #c9d3e5;
  --console-ink: #080e22;
  --console-focus: #ffe7a0;
  --display: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif;
  --ui-font-scale: 1;
}
.pixel-header,.tab-bar,.music-bar {
  background: var(--console-panel);
  color: #fff7df;
  border: 3px solid var(--console-edge);
  border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--console-ink), inset 0 0 0 4px var(--console-panel-light), 0 3px 0 var(--console-ink);
}
.pixel-header { border-bottom-color: var(--console-edge); }
.music-bar { margin-top: 5px; min-height: 56px; }
.brand-kicker { font-size: 11px; letter-spacing: .04em; }
.coin-badge,.streak-badge { font-size: 12px; line-height: 1.3; }
button:is(.tab-btn,.scene-pill,.music-btn,.hud-btn,.action-btn,.pixel-btn-sm,.pixel-btn-primary,.pixel-btn-secondary,.review-btn,.audio-toggle,.user-pill,.close-btn,.press-start-btn) {
  min-height: 44px;
  border: 2px solid var(--console-edge);
  border-radius: 0;
  background: var(--console-panel);
  color: #fff7df;
  box-shadow: inset 2px 2px 0 #526b9a, inset -2px -2px 0 #0c1431, 2px 2px 0 var(--console-ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
  text-shadow: 1px 1px 0 var(--console-ink);
  padding: 9px 12px;
  cursor: pointer;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  font-style: normal;
  font-kerning: none;
}
button:is(.audio-toggle,.close-btn) { width:44px; min-width:44px; padding:6px; }
button:is(.tab-btn,.scene-pill).active,
button:is(.tab-btn,.scene-pill,.music-btn,.hud-btn,.action-btn,.pixel-btn-sm,.pixel-btn-primary,.pixel-btn-secondary,.review-btn,.audio-toggle,.user-pill,.close-btn,.press-start-btn):hover {
  color: var(--console-focus);
  background: #304777;
  border-color: var(--console-focus);
}
button:is(.tab-btn,.scene-pill).active { box-shadow: inset 4px 0 0 var(--console-focus), inset -2px -2px 0 #0c1431, 2px 2px 0 var(--console-ink); }
button:disabled { opacity:.55; cursor:not-allowed; }
button:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid #f3a848; outline-offset:3px; }
.tab-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:10px; }
.tab-btn { min-width:0; }
.tab-btn,.scene-pill,.music-btn,.hud-btn,.action-btn,.pixel-btn-sm,.pixel-btn-primary,.pixel-btn-secondary,.review-btn,.audio-toggle,.user-pill,.close-btn,.press-start-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  vertical-align:middle;
}
.music-controls { align-items:stretch; gap:8px; }
.music-title-scroll { font-size:13px; line-height:1.4; }
.map-tools output { min-width:42px; color:var(--console-focus); font-weight:800; }
.map-tools label { white-space:nowrap; font-weight:800; }
body { font-size:calc(16px * var(--ui-font-scale)); }
.user-pill { min-width:0; }
.modal-drawer { border:4px double var(--console-panel-light); border-radius:0; box-shadow:0 0 0 2px var(--console-edge),0 8px 0 var(--console-ink); }
.modal-header { border-bottom:3px double var(--console-panel-light); align-items:center; }
.scene-switch-row { position:relative; inset:auto; max-width:none; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; padding:12px; background:var(--console-panel); overflow:visible; }
.scene-pill { min-width:0; white-space:normal; text-align:center; }
.scene-select { min-width:0; display:flex; align-items:center; gap:6px; color:#fff7df; font-size:12px; font-weight:700; }
.scene-select select { width:100%; min-width:0; padding:7px 8px; border:2px solid var(--console-edge); border-radius:0; background:#304777; color:#fff7df; box-shadow:inset 2px 2px 0 #526b9a, inset -2px -2px 0 #0c1431; }
.office-viewport { overflow:visible; aspect-ratio:auto; height:auto !important; }
#officeCanvas { height:auto; image-rendering:auto; touch-action:pan-y; }
.office-hud-left { top:12px; left:12px; font-size:13px; max-width:calc(100% - 110px); }
.office-world-meta { top:52px; left:12px; font-size:11px; max-width:calc(100% - 24px); }
.office-hud-right { top:12px; right:12px; }
.post-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.post-actions .action-btn { min-width:88px; }
select,input,textarea { max-width:100%; font-size:16px; }
select { min-height:44px; }
@media(max-width:600px) {
  .pixel-header { position:relative; display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:64px; padding:7px 8px; }
  .header-left { display:flex; align-items:center; flex-wrap:nowrap; gap:6px; min-width:0; }
  .brand-lockup { min-width:0; }
  .brand { max-width:180px; overflow:hidden; font-size:14px; white-space:nowrap; text-overflow:ellipsis; }
  .brand-kicker,.streak-badge { display:none; }
  .user-stats-row { gap:4px; }
  .coin-badge { padding:4px 6px; font-size:10px; }
  .header-right { display:flex; align-items:center; justify-content:flex-end; width:auto; gap:4px; }
  .user-pill { width:44px; min-width:44px; padding:4px; }
  .user-pill > span:nth-child(2),.user-pill .role-badge { display:none; }
  .music-bar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px; min-height:48px; margin-top:3px; padding:5px 7px; }
  .music-title-scroll { min-width:0; overflow:hidden; font-size:11px; white-space:nowrap; text-overflow:ellipsis; }
  .music-controls { display:flex; gap:4px; width:auto; }
  .music-controls .music-btn { min-width:40px; min-height:40px; padding:5px; }
  .music-controls .music-playlist-btn { min-width:72px; }
  .tab-bar { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:9px; }
  .scene-switch-row { grid-template-columns:repeat(3,minmax(0,1fr)); padding:10px; }
  .scene-select { grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; }
  .office-hud-left,.office-world-meta,.office-hud-right { display:none; }
  .modal-drawer { max-height:calc(100dvh - 32px); }
}
@media(prefers-reduced-motion:reduce) { button { transition:none !important; } }
.map-scroll { width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; background:#171b28; }
.map-scroll #officeCanvas { max-width:none; touch-action:pan-x pan-y; cursor:default; }
.map-tools { display:flex; align-items:center; gap:12px; background:var(--console-panel); color:var(--paper); padding:8px 12px; font-size:13px; }
.map-tools input { width:130px; min-height:32px; accent-color:var(--console-focus); }
.map-tools span { margin-left:auto; }
.character-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.character-options label { min-width:0; display:grid; align-content:start; gap:6px; line-height:1.25; }
.character-options select { width:100%; line-height:1.25; }
#characterPreview { display:block; width:200px; height:300px; margin:12px auto; background:var(--paper-warm); }
.character-workshop-card>label { display:block; margin-top:20px; }
@media(max-width:600px) {
  .map-tools { gap:5px; flex-wrap:wrap; padding:6px 8px; font-size:11px; }
  .map-tools input[type="range"] { width:82px; min-height:26px; }
  .map-tools output { min-width:34px; font-size:10px; }
  .map-tools span { margin-left:0; font-size:10px; }
  .scene-switch-row { gap:6px; padding:8px; }
  button.scene-pill { padding:6px; font-size:12px; }
}
.leader-group-name-settings { display: grid; gap: 5px; }
.leader-group-name-row { display: flex; gap: 8px; align-items: stretch; }
.leader-group-name-row .pixel-input { flex: 1; min-width: 0; }
@media (max-width: 600px) { .leader-group-name-row { flex-direction: column; } .leader-group-name-row button { width: 100%; } }