:root {
    --bg:#08141d; --panel:rgba(12,28,39,.95); --panel2:rgba(17,39,52,.97);
    --line:rgba(150,194,211,.22); --line2:rgba(150,194,211,.38);
    --text:#edf7fb; --muted:#9bb8c5; --teal:#61d7cd; --blue:#62b8ff;
    --gold:#ffd27a; --good:#6ee7a2; --bad:#ff827c; --shadow:0 14px 38px rgba(0,0,0,.34);
    --radius:14px;
  }
  * { box-sizing:border-box; }
  html,body { margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--text);
    font:14px/1.45 "Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif; }
  body:before { content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(ellipse at 16% 8%,rgba(41,126,155,.12),transparent 42%),radial-gradient(ellipse at 90% 76%,rgba(28,130,115,.08),transparent 44%); }
  canvas#c { display:block; touch-action:none; cursor:grab; }
  canvas#c:active { cursor:grabbing; }
  .panel { position:fixed; z-index:2; color:var(--text); background:var(--panel); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
  button,input { font:inherit; }
  button { color:var(--text); background:#183647; border:1px solid var(--line2); border-radius:9px; padding:7px 11px; cursor:pointer;
    transition:background .15s,border-color .15s,transform .15s,opacity .15s; }
  button:hover:not(:disabled) { background:#245368; border-color:rgba(97,215,205,.72); }
  button:active:not(:disabled) { transform:translateY(1px); }
  button:disabled { opacity:.45; cursor:not-allowed; }
  button:focus-visible,input:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
  button.on,button.primary { color:#062128; background:linear-gradient(135deg,#72e5d4,#55bfc9); border-color:transparent; font-weight:800; }
  button.danger { color:#ffd9d7; background:rgba(160,49,49,.18); border-color:rgba(255,130,124,.35); }
  button.danger:hover:not(:disabled) { background:rgba(184,54,54,.34); border-color:var(--bad); }
  #hud { top:12px; left:12px; right:12px; min-height:52px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:8px 10px;
    max-width:none; font-variant-numeric:tabular-nums; }
  #hud>span { display:flex; align-items:center; gap:7px; padding:6px 9px; white-space:nowrap; border:1px solid rgba(150,194,211,.10);
    border-radius:9px; background:rgba(255,255,255,.035); }
  #hud>span:first-child { background:rgba(255,210,122,.08); border-color:rgba(255,210,122,.2); }
  #hud span { color:var(--muted); font-size:12px; }
  #hud b { color:var(--text); font-size:14px; font-weight:800; margin:0; }
  #hud .rate.neg b { color:var(--bad); } #hud .rate.pos b { color:var(--good); }
  #hud button { padding:6px 10px; }
  #palette { left:12px; right:324px; bottom:12px; padding:10px 12px 11px; min-height:126px; }
  #paletteHeader { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; min-height:30px; }
  .palette-heading { display:flex; align-items:baseline; gap:9px; min-width:0; }
  .palette-heading strong { color:var(--teal); font-size:13px; letter-spacing:.02em; white-space:nowrap; }
  .palette-heading small { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #paletteCollapseToggle { flex:0 0 auto; padding:5px 10px; font-size:11px; min-width:70px; }
  #paletteContents { min-width:0; }
  #palette.palette-collapsed { right:auto; width:min(224px,calc(100% - 24px)); min-height:0; padding:7px 9px; }
  #palette.palette-collapsed #paletteHeader { margin:0; }
  #palette.palette-collapsed .palette-heading { align-items:center; }
  #palette.palette-collapsed .palette-heading small { display:none; }
  #palette.palette-collapsed #paletteContents { display:none; }
  #palette.palette-collapsed #paletteCollapseToggle { min-width:76px; }
  #tabs { display:flex; gap:6px; margin-bottom:9px; flex-wrap:wrap; }
  #tabs button { padding:7px 11px; color:var(--muted); background:rgba(255,255,255,.035); border-color:transparent; border-radius:8px; font-size:12px; }
  #tabs button.on { background:rgba(97,215,205,.16); border-color:rgba(97,215,205,.42); color:#c6fff5; }
  #items { display:flex; gap:8px; overflow-x:auto; padding:0 0 4px; scrollbar-color:#34596a transparent; scrollbar-width:thin; }
  .item { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; min-width:88px; max-width:110px; min-height:78px;
    padding:7px 8px 6px; color:var(--text); background:rgba(255,255,255,.035); border-color:rgba(150,194,211,.14); border-radius:10px; }
  .item canvas { width:48px; height:auto; image-rendering:auto; }
  .item small { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
  .item.on { background:rgba(97,215,205,.14); border-color:var(--teal); box-shadow:inset 0 0 0 1px rgba(97,215,205,.2); }
  .item.on small { color:#cbfff6; }
  .item.locked { opacity:.36; filter:grayscale(1); cursor:not-allowed; }
  button.poor { border-color:rgba(255,130,124,.5); }
  #diplo { top:12px; right:12px; width:290px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
  .req { position:relative; pointer-events:auto; padding:12px; background:var(--panel2); border:1px solid var(--line); border-left:4px solid var(--gold);
    border-radius:12px; box-shadow:var(--shadow); }
  .req p { margin:0 0 9px; } .req button { margin-right:6px; } .req button.yes { color:#052724; background:var(--teal); border-color:var(--teal); }
  #eventBar { position:fixed; top:82px; left:50%; transform:translateX(-50%); z-index:6; display:none; max-width:min(720px,calc(100% - 24px));
    padding:8px 16px; border:1px solid rgba(255,255,255,.16); border-radius:12px; font-weight:700; color:#fff; box-shadow:var(--shadow); backdrop-filter:blur(10px); }
  #eventBar.good { background:rgba(24,115,94,.93); } #eventBar.bad { background:rgba(151,56,52,.95); }
  #toast { position:fixed; z-index:50; top:94px; left:50%; max-width:calc(100% - 24px); transform:translateX(-50%); padding:10px 16px;
    border:1px solid rgba(255,255,255,.13); border-radius:12px; background:#102e3d; color:#f4fbff; opacity:0; transition:opacity .2s; pointer-events:none; box-shadow:var(--shadow); }
  #toast.bad { background:#642b31; border-color:rgba(255,130,124,.5); }
  #tip { position:fixed; z-index:8; display:none; pointer-events:none; padding:5px 9px; border:1px solid var(--line); border-radius:8px; background:#071720; color:#fff; font-size:12px; white-space:nowrap; }
  .ahead { font-weight:800; padding-bottom:6px; }
  .arow { padding:7px 2px; border-bottom:1px solid var(--line); }
  .arow b { display:block; } .arow small { color:var(--muted); }
  .arow.done b { color:var(--good); }
  #dlg { left:50%; top:38%; transform:translate(-50%,-50%); z-index:20; width:min(360px,calc(100% - 28px)); padding:20px; display:none; }
  #dlg label { display:block; font-weight:800; margin-bottom:9px; }
  #dlg input { width:100%; padding:10px 12px; border:1px solid var(--line2); border-radius:9px; background:#081a24; color:var(--text); margin-bottom:12px; }
  #minimap { left:12px; top:78px; width:190px; height:190px; cursor:pointer; background:#071720; border-radius:13px; }
  #quests { left:12px; top:280px; width:190px; padding:12px; }
  #quests h4 { margin:0 0 7px; font-size:12px; letter-spacing:.04em; color:var(--teal); }
  #quests h4:not(:first-child) { margin-top:12px; }
  #quests ul { margin:0; padding:0; list-style:none; }
  #quests li { padding:4px 0; font-size:12px; color:var(--muted); }
  #quests li.next { color:var(--text); font-weight:800; }
  #quests li.done { color:var(--good); text-decoration:line-through; }
  #advisor { margin:0; font-size:12px; line-height:1.55; color:#d8e9ef; }
  #info { right:12px; bottom:324px; width:290px; padding:12px 14px; display:none; }
  #info h4 { margin:0 0 8px; font-size:14px; }
  .irow { display:flex; justify-content:space-between; gap:12px; font-size:12px; padding:3px 0; }
  .irow span { color:var(--muted); }
  #social { right:12px; bottom:12px; width:290px; height:300px; display:flex; flex-direction:column; padding:10px; }
  #social .tabs2 { display:flex; gap:5px; margin-bottom:8px; }
  #social .tabs2 button { flex:1; padding:7px 6px; font-size:12px; }
  #chatPane, #boardPane, #achPane { flex:1; min-height:0; display:flex; flex-direction:column; }
  #chatLog, #boardList, #achList { flex:1; min-height:0; overflow-y:auto; font-size:12px; background:rgba(4,17,25,.36); border:1px solid var(--line); border-radius:10px; padding:8px; scrollbar-width:thin; scrollbar-color:#34596a transparent; }
  #chatLog { margin-bottom:7px; }
  .msg { word-break:break-word; } .msg.sys { color:var(--muted); font-style:italic; }
  #chatIn { width:100%; padding:8px 10px; border:1px solid var(--line2); border-radius:9px; background:#081a24; color:var(--text); }
  .brow { padding:7px 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
  .btop { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .bname { flex:1; min-width:60px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .brow small { color:var(--muted); }
  .brow button { padding:4px 8px; font-size:11px; }
  .brow i { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; }
  .brow.off { opacity:.65; }
  #authScreen { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
    background:linear-gradient(135deg,rgba(8,22,30,.97),rgba(20,54,66,.96)); }
  #authCard { width:min(100%,390px); padding:26px; border:1px solid var(--line2); border-radius:18px; background:rgba(12,28,39,.98); color:var(--text); box-shadow:0 20px 70px #0009; }
  #authCard h1 { margin:0 0 7px; font-size:25px; letter-spacing:-.02em; }
  #authCard p { margin:0 0 18px; color:var(--muted); }
  #authCard label { display:block; margin:12px 0 5px; font-weight:700; }
  #authCard input { width:100%; padding:10px 12px; border:1px solid var(--line2); border-radius:9px; background:#081a24; color:var(--text); font:inherit; }
  #authActions { display:flex; gap:8px; margin-top:18px; } #authActions button { flex:1; padding:10px; }
  #authActions .primary { background:linear-gradient(135deg,#72e5d4,#55bfc9); color:#062128; border-color:transparent; }
  #authError { min-height:22px; margin-top:10px; color:var(--bad); font-size:13px; }
  #net { position:fixed; top:0; left:0; right:0; z-index:100; padding:7px; text-align:center; background:#9c313b; color:#fff; display:none; }
  @media (max-width:960px) {
    #social,#minimap,#quests { display:none; }
    #palette { left:10px; right:10px; bottom:10px; padding:8px; }
    #paletteHeader { gap:6px; margin-bottom:7px; }
    .palette-heading { gap:6px; }
    .palette-heading strong { font-size:12px; }
    .palette-heading small { font-size:10px; }
    #palette.palette-collapsed { left:10px; right:auto; width:min(210px,calc(100% - 20px)); bottom:10px; padding:7px 8px; }
    #hud { left:10px; right:10px; top:10px; gap:4px; padding:6px; max-height:24vh; overflow-y:auto; }
    #hud>span { padding:4px 6px; gap:4px; }
    #hud b { font-size:12px; }
    #hud span { font-size:11px; }
    #hud button { padding:5px 7px; }
    #eventBar { top:calc(24vh + 12px); }
    #toast { top:calc(24vh + 54px); }
    #info { left:10px; right:10px; bottom:150px; width:auto; max-height:28vh; overflow:auto; }
  }
  @media (max-width:540px) {
    #hud>span { white-space:normal; }
    #tabs { gap:4px; }
    #tabs button { padding:6px 8px; font-size:11px; }
    .item { min-width:78px; }
    #dlg { top:42%; }
  }
  @media (prefers-reduced-motion:reduce) { #toast,button { transition:none; } }


/* GitHub Pages setup notice: shown when the static frontend has no backend URL configured. */
#ghPagesNotice { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; overflow:auto; padding:22px; background:radial-gradient(circle at top,rgba(29,83,91,.96),rgba(5,15,22,.99) 70%); color:var(--text); }
.ghPagesCard { width:min(100%,720px); padding:clamp(24px,5vw,44px); border:1px solid var(--line2); border-radius:22px; background:rgba(11,28,39,.97); box-shadow:0 28px 90px #0009; }
.ghPagesIcon { font-size:46px; margin-bottom:12px; }
.ghPagesCard h1 { margin:0 0 16px; line-height:1.25; font-size:clamp(24px,4vw,34px); }
.ghPagesCard p { color:var(--muted); line-height:1.75; }
.ghPagesCard code { color:#9ef3e4; overflow-wrap:anywhere; }
.ghPagesCard .ghPagesError { color:#ffd58a; font-weight:700; }
.ghPagesHint { margin-top:24px; padding-top:14px; border-top:1px solid var(--line); }


/* City MMO vNext: selectable game modes, local visual themes and content groups */
#modePanel { display:none; position:fixed; z-index:25; top:82px; right:320px; width:min(420px,calc(100% - 24px)); max-height:calc(100vh - 110px); overflow:auto; padding:14px; }
.mode-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mode-head h3 { margin:0; font-size:16px; }
.mode-hint { color:var(--muted); font-size:12px; line-height:1.5; margin:8px 0 12px; }
#modePanel h4 { color:var(--teal); margin:12px 0 7px; font-size:12px; }
#modeChoices,#themeChoices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.mode-choice,.theme-choice { display:flex; flex-direction:column; align-items:flex-start; text-align:left; min-width:0; padding:9px; gap:4px; background:rgba(255,255,255,.035); border-color:var(--line); }
.mode-choice b,.theme-choice b { font-size:12px; }
.mode-choice small,.theme-choice small { font-size:10px; line-height:1.45; color:var(--muted); white-space:normal; }
.mode-choice.on,.theme-choice.on { border-color:var(--teal); background:rgba(97,215,205,.14); }
#modeStatus { color:var(--muted); font-size:11px; min-height:14px; margin:8px 0 0; }
.item .tag { font-size:9px; border-radius:4px; padding:2px 4px; color:#b4fff4; background:rgba(97,215,205,.12); }
@media (max-width:960px) { #modePanel { left:10px; right:10px; top:calc(24vh + 12px); width:auto; max-height:calc(76vh - 160px); } }
@media (max-width:480px) { #modeChoices,#themeChoices { grid-template-columns:1fr; } .mode-choice,.theme-choice { flex-direction:row; align-items:center; justify-content:space-between; } .mode-choice small,.theme-choice small { max-width:62%; text-align:right; } }


/* City MMO v8: public transport panel */
#transitPanel { display:none; position:fixed; z-index:26; top:82px; right:320px; width:min(390px,calc(100% - 24px)); max-height:calc(100vh - 110px); overflow:auto; padding:14px; }
.transit-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.transit-head h3 { margin:0; font-size:16px; }
.transit-hint { margin:8px 0 10px; color:var(--muted); font-size:12px; line-height:1.55; }
.transit-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.transit-stat { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.035); font-size:12px; }
.transit-stat span { color:var(--muted); }
.transit-stat b { color:var(--teal); font-size:15px; }
.transit-status { margin:10px 0; padding:9px 10px; border-radius:8px; background:rgba(97,215,205,.07); color:#dceef3; font-size:12px; line-height:1.65; }
.transit-overlay-toggle { display:flex; align-items:center; gap:7px; padding:8px 0; font-size:12px; color:var(--text); }
.transit-overlay-toggle input { accent-color:var(--teal); }
.transit-guide { border-top:1px solid var(--line); margin-top:5px; padding-top:10px; font-size:12px; line-height:1.6; }
.transit-guide b { color:var(--teal); }
.transit-guide p { color:var(--muted); margin:3px 0 10px; }
.transit-building-hint { margin:10px 0 0; padding:8px; border-radius:8px; background:rgba(97,215,205,.08); color:#cbe9e7; font-size:12px; line-height:1.5; }
@media (max-width:960px) { #transitPanel { left:10px; right:10px; top:calc(24vh + 12px); width:auto; max-height:calc(76vh - 150px); } }

/* City MMO v9: player-configurable transit route editor */
#transitPanel { width:min(435px,calc(100% - 24px)); max-height:calc(100vh - 98px); }
.transit-editor, .transit-saved-section { border-top:1px solid var(--line); margin-top:10px; padding-top:10px; }
.transit-editor h4, .transit-saved-section h4 { margin:0 0 8px; font-size:13px; color:var(--teal); }
.transit-editor label { display:flex; flex-direction:column; gap:5px; min-width:0; color:var(--muted); font-size:11px; }
.transit-editor input:not([type=checkbox]), .transit-editor select { box-sizing:border-box; width:100%; min-width:0; border:1px solid var(--line); border-radius:7px; padding:8px 9px; background:#102a38; color:var(--text); font:inherit; outline:none; }
.transit-editor input:focus, .transit-editor select:focus { border-color:var(--teal); }
.transit-form-row { display:grid; grid-template-columns:1.2fr .85fr 1fr; gap:7px; margin-top:8px; }
.transit-enabled { flex-direction:row !important; align-items:center; margin:8px 0; color:var(--text) !important; }
.transit-enabled input { accent-color:var(--teal); }
.transit-stop-adder { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:end; margin-top:8px; }
.transit-stop-adder button { white-space:nowrap; min-height:34px; }
.transit-editor-note { color:var(--muted); font-size:11px; line-height:1.5; margin:7px 0; }
.transit-draft-stops { display:flex; flex-direction:column; gap:5px; list-style:none; padding:0; margin:8px 0; counter-reset:route-stop; }
.transit-draft-stops li { display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:6px; align-items:center; border:1px solid var(--line); border-radius:7px; padding:5px 6px; background:rgba(255,255,255,.025); font-size:11px; }
.transit-draft-stops li::before { counter-increment:route-stop; content:counter(route-stop); color:var(--teal); font-weight:800; text-align:center; }
.transit-draft-stops li.empty { display:block; text-align:center; color:var(--muted); padding:12px 8px; }
.transit-draft-stops li.empty::before { content:none; }
.transit-stop-name { overflow-wrap:anywhere; }
.transit-stop-actions { display:flex; gap:3px; }
.transit-stop-actions button { min-width:27px; min-height:26px; padding:3px 6px; font-size:11px; }
.transit-editor-actions { display:flex; flex-wrap:wrap; gap:7px; }
.transit-editor-actions button { flex:1; min-height:34px; }
.transit-editor-message { margin:6px 0 0; font-size:11px; line-height:1.4; color:var(--muted); }
.transit-editor-message.bad { color:#ff9797; }
.transit-editor-message.good { color:#77e0c8; }
.transit-route-card { border:1px solid var(--line); border-radius:9px; padding:8px; margin:7px 0; background:rgba(255,255,255,.025); }
.transit-route-card-head { display:flex; align-items:center; gap:7px; }
.transit-route-swatch { width:10px; height:10px; flex:0 0 10px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.04); }
.transit-route-title { min-width:0; flex:1; font-size:12px; font-weight:750; overflow-wrap:anywhere; }
.transit-route-meta { color:var(--muted); font-size:10px; margin:5px 0 7px; line-height:1.45; }
.transit-route-buttons { display:flex; flex-wrap:wrap; gap:5px; }
.transit-route-buttons button { min-height:27px; padding:4px 8px; font-size:10px; }
.transit-route-buttons button.route-toggle-off { border-color:#d18b64; color:#ffc49b; }
.transit-route-owner { font-size:10px; color:var(--muted); margin-left:auto; }
.transit-no-routes { color:var(--muted); font-size:11px; padding:8px 0; }
@media (max-width:960px) { #transitPanel { left:10px; right:10px; top:calc(14vh + 10px); width:auto; max-height:calc(86vh - 20px); } }


/* v11: 介面面板可單獨收合，也能一鍵收起所有介面，讓城市地圖有更多可視空間。 */
.ui-master-toggle {
  position:fixed; z-index:70; top:70px; right:12px; display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:7px 11px; color:#062128; font-size:12px; font-weight:900;
  background:linear-gradient(135deg,#82ead6,#58c6cd); border:1px solid rgba(255,255,255,.46);
  border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.36); white-space:nowrap;
}
.ui-master-toggle:hover { filter:brightness(1.06); }
.panel-restore-chip {
  display:none; position:fixed; z-index:35; align-items:center; justify-content:center; gap:5px;
  min-height:32px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800;
  color:var(--text); background:rgba(12,28,39,.94); border:1px solid var(--line2); box-shadow:var(--shadow);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); white-space:nowrap;
}
#hudRestoreChip { left:12px; top:12px; }
#minimapRestoreChip { left:12px; top:78px; }
#questsRestoreChip { left:12px; top:280px; }
#socialRestoreChip { right:12px; bottom:12px; }
.panel-fold-inline { flex:0 0 auto; min-width:28px; min-height:28px; padding:2px 7px!important; font-size:17px!important; font-weight:900; line-height:1; }
.mini-panel-fold { position:fixed; z-index:5; left:169px; top:83px; width:27px; height:27px; padding:0; display:flex; align-items:center; justify-content:center; font-weight:900; }
.mini-panel-fold-inline { flex:0 0 27px; min-width:27px; height:26px; padding:0 5px; font-size:16px; line-height:1; }
.quests-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.quests-head #questHead { margin:0; }
#info { padding-top:38px; }
.info-close { position:absolute; right:8px; top:7px; z-index:2; padding:4px 9px; font-size:11px; }
body.hud-collapsed #hud { display:none!important; }
body.hud-collapsed #hudRestoreChip { display:inline-flex; }
body.minimap-collapsed #minimap { display:none!important; }
body.minimap-collapsed #minimapCollapseToggle { display:none!important; }
body.minimap-collapsed #minimapRestoreChip { display:inline-flex; }
body.quests-collapsed #quests { display:none!important; }
body.quests-collapsed #questsRestoreChip { display:inline-flex; }
body.social-collapsed #social { display:none!important; }
body.social-collapsed #socialRestoreChip { display:inline-flex; }
#social .tabs2 #socialCollapseToggle { flex:0 0 30px; padding:4px 5px; font-size:17px; font-weight:900; }
body.ui-hidden #hud,
body.ui-hidden #palette,
body.ui-hidden #minimap,
body.ui-hidden #minimapCollapseToggle,
body.ui-hidden #quests,
body.ui-hidden #info,
body.ui-hidden #social,
body.ui-hidden #diplo,
body.ui-hidden #eventBar,
body.ui-hidden #modePanel,
body.ui-hidden #transitPanel,
body.ui-hidden #mobileSocialToggle,
body.ui-hidden .panel-restore-chip { display:none!important; }
body.ui-hidden #uiMasterToggle { top:12px; right:12px; }
@media (max-width:960px) {
  .ui-master-toggle { top:auto; right:10px; bottom:140px; min-height:34px; padding:6px 9px; }
  body.ui-hidden #uiMasterToggle { top:auto; bottom:12px; right:12px; }
  #hudRestoreChip { top:10px; left:10px; }
  #minimapCollapseToggle { display:none!important; }
  #minimapRestoreChip, #questsRestoreChip { display:none!important; }
  body.social-collapsed #socialRestoreChip { display:inline-flex; }
}


/* 新玩家选择与逐步高亮教学 */
#cityOnboardingChoice[hidden], #cityTutorial[hidden], #cityTourMapMarker[hidden] { display:none!important; }
#cityOnboardingChoice {
  position:fixed; inset:0; z-index:11000; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(3,10,16,.86); backdrop-filter:blur(8px); color:var(--text);
}
.city-onboarding-card {
  width:min(100%,470px); padding:28px; border:1px solid rgba(97,215,205,.35); border-radius:22px;
  background:linear-gradient(145deg,rgba(17,42,55,.99),rgba(8,21,31,.99));
  box-shadow:0 26px 90px #000b;
}
.city-onboarding-kicker { color:#83e9dc; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.city-onboarding-card h2 { margin:8px 0 10px; font-size:clamp(23px,4vw,30px); line-height:1.2; }
.city-onboarding-card p { color:var(--muted); line-height:1.65; margin:0 0 18px; }
.city-onboarding-options { display:grid; gap:10px; }
.city-onboarding-options button { min-height:52px; text-align:left; padding:12px 15px; font-weight:800; border-radius:12px; }
.city-onboarding-options button small { display:block; font-size:12px; font-weight:500; color:inherit; opacity:.78; margin-top:4px; }
#cityTourSkipChoice { border-color:rgba(97,215,205,.25); background:rgba(255,255,255,.035); }
#cityTutorial {
  position:fixed; inset:0; z-index:12000; color:var(--text); pointer-events:none;
}
.city-tour-mask {
  position:fixed; z-index:1; background:rgba(2,8,13,.79); pointer-events:auto;
  transition:all .16s ease-out;
}
#cityTourCard {
  position:fixed; z-index:3; width:min(410px,calc(100vw - 24px)); padding:18px 18px 14px;
  border:1px solid rgba(105,232,213,.62); border-radius:17px;
  background:linear-gradient(145deg,rgba(14,36,48,.99),rgba(5,18,27,.99));
  box-shadow:0 16px 54px #000b,0 0 0 1px rgba(105,232,213,.11);
  pointer-events:auto; max-height:calc(100vh - 24px); overflow:auto;
}
#cityTourCounter { font-size:11px; letter-spacing:.08em; color:#81e7db; font-weight:900; margin-bottom:8px; }
#cityTourCard h2 { font-size:20px; line-height:1.25; margin:0 0 9px; }
#cityTourText { color:#d1e0e8; line-height:1.65; font-size:14px; margin:0 0 15px; }
.city-tour-actions { display:flex; gap:8px; align-items:center; }
.city-tour-actions button { min-height:38px; }
#cityTourNext { flex:1; }
#cityTourSkipStep { flex:0 0 auto; }
#cityTourSkipStep[hidden] { display:none!important; }
#cityTourExit {
  display:block; margin:10px auto 0; padding:5px 9px; font-size:12px; color:var(--muted);
  background:transparent; border-color:transparent;
}
#cityTourNext:disabled { cursor:wait; opacity:.75; }
.city-tour-target {
  outline:3px solid #75f4df!important; outline-offset:4px!important;
  box-shadow:0 0 0 6px rgba(91,233,211,.18),0 0 24px rgba(91,233,211,.65)!important;
  border-radius:10px!important; animation:city-tour-pulse 1.6s ease-in-out infinite;
}
@keyframes city-tour-pulse { 0%,100% { outline-color:#75f4df; } 50% { outline-color:#fff; } }
#cityTourMapMarker {
  position:fixed; z-index:2; border:2px dashed #78f3df; border-radius:18px;
  background:rgba(74,214,194,.08); box-shadow:inset 0 0 0 2px rgba(3,13,20,.18),0 0 26px rgba(100,242,219,.19);
  pointer-events:none;
}
#cityTourMapMarker span {
  position:absolute; top:8px; left:8px; padding:6px 10px; border-radius:8px;
  color:#e8fffb; background:rgba(4,21,29,.92); border:1px solid rgba(120,243,223,.65);
  font-size:12px; font-weight:900; white-space:nowrap;
}
@media (max-width:600px) {
  .city-onboarding-card { padding:22px 18px; border-radius:17px; }
  #cityTourCard { padding:15px 14px 12px; }
  #cityTourCard h2 { font-size:18px; }
  #cityTourText { font-size:13px; }
  .city-tour-actions button { padding:8px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .city-tour-target { animation:none; }
  .city-tour-mask { transition:none; }
}


/* ── Atmospheric city presentation: glass panels, misty distance, warm city lights ── */
:root {
  --panel: rgba(12,29,41,.83);
  --panel2: rgba(16,39,52,.90);
  --line: rgba(179,215,230,.24);
  --line2: rgba(179,215,230,.40);
  --shadow: 0 18px 52px rgba(0,8,15,.38);
}
body:before {
  background:
    radial-gradient(ellipse at 12% 8%,rgba(133,192,209,.15),transparent 37%),
    radial-gradient(ellipse at 87% 18%,rgba(248,203,157,.10),transparent 32%),
    radial-gradient(ellipse at 75% 82%,rgba(82,157,151,.12),transparent 43%),
    linear-gradient(180deg,rgba(192,221,235,.035),transparent 40%,rgba(10,25,34,.07));
  mix-blend-mode:screen;
}
body:after {
  content:""; position:fixed; inset:-18%; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 27%,rgba(191,222,231,.09),transparent 27%),
    radial-gradient(ellipse at 62% 37%,rgba(176,210,222,.075),transparent 30%),
    radial-gradient(ellipse at 92% 60%,rgba(243,204,163,.055),transparent 26%),
    radial-gradient(ellipse at 44% 90%,rgba(149,198,198,.06),transparent 32%);
  filter:blur(24px); mix-blend-mode:screen; opacity:.88;
  animation:city-haze-drift 48s ease-in-out infinite alternate;
}
@keyframes city-haze-drift {
  0% { transform:translate3d(-1.4%,.6%,0) scale(1); opacity:.72; }
  50% { transform:translate3d(.8%,-.7%,0) scale(1.025); opacity:.9; }
  100% { transform:translate3d(1.5%,.8%,0) scale(1.04); opacity:.78; }
}
canvas#c { filter:saturate(1.08) contrast(1.025); }
.panel {
  background:linear-gradient(145deg,rgba(19,43,56,.84),rgba(8,22,32,.80));
  border-color:rgba(179,215,230,.26);
  box-shadow:0 18px 50px rgba(0,8,15,.33), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(20px) saturate(1.18);
  -webkit-backdrop-filter:blur(20px) saturate(1.18);
}
#hud { padding:9px 12px; gap:7px; }
#hud>span { background:linear-gradient(135deg,rgba(237,248,255,.055),rgba(237,248,255,.018)); }
#hud>span:first-child {
  background:linear-gradient(135deg,rgba(255,211,139,.13),rgba(255,211,139,.035));
  border-color:rgba(255,211,139,.24);
}
#palette {
  background:linear-gradient(145deg,rgba(19,43,57,.91),rgba(7,22,32,.90));
  border-color:rgba(151,211,222,.30);
  padding:12px 13px 11px;
}
#paletteHeader { margin-bottom:10px; }
.palette-heading strong { font-size:14px; letter-spacing:.04em; text-shadow:0 0 18px rgba(97,215,205,.18); }
#catalogToolbar {
  display:flex; align-items:center; gap:10px; margin:0 0 9px; min-width:0;
}
#buildingSearch {
  flex:1 1 260px; min-width:80px; max-width:420px; height:34px; padding:7px 11px;
  color:var(--text); background:linear-gradient(120deg,rgba(3,17,25,.78),rgba(19,43,56,.65));
  border:1px solid rgba(151,211,222,.26); border-radius:10px;
  outline:none; box-shadow:inset 0 1px 3px rgba(0,0,0,.18);
}
#buildingSearch::placeholder { color:#8eabb9; }
#buildingSearch:focus { border-color:rgba(113,229,212,.78); box-shadow:0 0 0 3px rgba(97,215,205,.1); }
#buildingCount { flex:0 0 auto; color:#92b8c6; font-size:11px; font-variant-numeric:tabular-nums; }
#tabs {
  display:flex; flex-wrap:nowrap; gap:7px; margin-bottom:9px;
  overflow-x:auto; overflow-y:hidden; padding:1px 1px 5px; scrollbar-width:thin;
}
#tabs button {
  flex:0 0 auto; padding:7px 11px; color:#abc4ce; white-space:nowrap;
  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid rgba(150,194,211,.13); border-radius:10px; font-size:12px;
}
#tabs button:hover:not(:disabled) { background:rgba(91,180,192,.13); }
#tabs button.on {
  color:#eafffb; background:linear-gradient(135deg,rgba(94,219,204,.24),rgba(61,140,164,.24));
  border-color:rgba(115,236,218,.64); box-shadow:0 0 0 1px rgba(93,221,204,.08),0 4px 20px rgba(67,179,181,.09);
}
#items { gap:9px; padding:1px 2px 6px; }
.item {
  position:relative; min-width:94px; max-width:122px; min-height:91px; padding:8px 9px 7px;
  background:linear-gradient(155deg,rgba(235,248,255,.075),rgba(229,245,255,.018));
  border-color:rgba(171,210,226,.17); border-radius:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.item canvas { width:54px; max-height:57px; object-fit:contain; filter:drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
.item span { font-size:11px; line-height:1.28; text-align:center; }
.item:hover:not(:disabled) {
  transform:translateY(-3px); border-color:rgba(113,229,212,.58);
  background:linear-gradient(155deg,rgba(72,166,175,.19),rgba(229,245,255,.035));
  box-shadow:0 8px 22px rgba(0,7,14,.22),0 0 0 1px rgba(113,229,212,.08);
}
.item.on {
  background:linear-gradient(155deg,rgba(82,221,200,.22),rgba(36,100,120,.22));
  border-color:#80f0df; box-shadow:0 0 0 1px rgba(128,240,223,.19),0 0 22px rgba(91,233,211,.12);
}
.item.locked { filter:grayscale(.75); }
.catalog-empty {
  display:flex; align-items:center; justify-content:center; min-width:100%; min-height:84px;
  border:1px dashed rgba(171,210,226,.2); border-radius:12px; color:var(--muted); font-size:12px;
  background:rgba(255,255,255,.018);
}
#quests, #social, #minimap { border-color:rgba(155,207,220,.28); }
#quests h4 { text-shadow:0 0 16px rgba(97,215,205,.15); }
button { backdrop-filter:saturate(1.1); }
button.primary { box-shadow:0 5px 18px rgba(83,201,192,.12); }
@media (max-width:960px) {
  #catalogToolbar { gap:7px; margin-bottom:7px; }
  #buildingSearch { height:32px; font-size:12px; }
  #buildingCount { font-size:10px; }
  #tabs { gap:5px; }
  #tabs button { padding:6px 9px; }
  .item { min-width:82px; min-height:80px; }
  .item canvas { width:44px; max-height:46px; }
}
@media (prefers-reduced-motion:reduce) {
  body:after { animation:none; }
  .item { transition:none; }
}