/* v207 visual polish: turns the approved concept language into reusable, real UI. */
/* City directory: preserve geographic coordinates, move long labels off the map. */
.district-map .region-panel{display:block;padding:14px;min-height:130px}
.region-panel h2{margin:0 0 8px;font-size:1.1rem;color:#ffe291}
.region-panel p{margin:0 0 12px;line-height:1.5;color:#c6ded8}
.region-panel>button{width:100%;justify-content:center;margin-top:8px}
.district-map:not(.is-region-preview) .region-panel:has(>h2){position:absolute;z-index:7;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:auto;min-height:0;max-height:min(38dvh,240px);padding:12px 14px;overflow:auto;border:1px solid #e3bb58;border-radius:16px;background:linear-gradient(160deg,#27282eef,#0b0c10f5);box-shadow:0 10px 28px #000c;backdrop-filter:blur(10px)}
.district-map:not(.is-region-preview) .region-panel:has(>h2)>h2{margin:0 0 3px;color:#ffe291}.district-map:not(.is-region-preview) .region-panel:has(>h2)>p{margin:0;color:#eef3ef}.district-map:not(.is-region-preview) .region-panel:has(>h2)>button{min-height:48px;margin-top:8px;background:linear-gradient(#ffe291,#d6a530);color:#192329;font-weight:900}
.region-preview{display:flex;gap:12px}
.region-panel header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.region-panel header h2{margin:0}
.region-panel header>button{width:auto;flex:0 0 auto;padding-inline:14px}
.region-panel header>h2{flex:1;min-width:0;font-size:1rem}
.region-districts{display:grid;gap:8px}
.region-districts button{width:100%}
.district-map.is-region-preview .company-map-head,.district-map.is-region-preview .company-map-view,.district-map.is-region-preview .company-map-foot{display:none}
.district-map.is-region-preview .region-panel{position:absolute;inset:0;z-index:8;width:100%;min-height:0;padding:0;overflow:hidden;border:0;background:#05262c}
.district-map.is-region-preview .region-panel>header{position:absolute;z-index:4;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;margin:0;padding:6px;border:1px solid #ffe29188;border-radius:15px;background:#06383cf0;box-shadow:0 5px 15px #0008;backdrop-filter:blur(8px)}
.district-map.is-region-preview .region-panel>header h2{color:#fff3cd}
.region-map-preview{position:absolute;inset:0;width:100%;max-width:none;margin:0;overflow:hidden;border:0;border-radius:0;background:#082f35;box-shadow:none}
.region-map-preview{container-type:size;display:grid;place-items:center}.region-map-art{position:relative;width:min(100cqw,100cqh*16/9);aspect-ratio:16/9}.region-map-art>img{display:block;width:100%;height:100%;object-fit:cover}
.region-map-art>button{position:absolute;transform:translate(-50%,-50%);min-height:44px;max-width:112px;padding:7px 9px;border:2px solid #ffe291;border-radius:12px;background:#06383cf2;color:#fff3cd;box-shadow:0 3px 8px #000b;font:inherit}
.region-map-art>button b{font-size:.76rem;line-height:1.2}
.region-map-art>button[aria-pressed=true]{background:#b98622;color:#132c2f;box-shadow:0 0 0 4px #ffe29166,0 4px 10px #000b}
.region-destination{position:absolute;z-index:4;left:10px;right:10px;bottom:max(12px,env(safe-area-inset-bottom));max-width:none;margin:0;padding:12px;border:1px solid #c89a2e;border-radius:16px;background:#fffdf7f5;color:#4a3306;box-shadow:0 -6px 20px #4a330633;backdrop-filter:blur(8px)}
.region-destination h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:#4a3306}
.region-destination p{margin:0 0 10px}
.region-destination button{width:100%;min-height:48px;justify-content:center}
@media(max-height:700px){.region-destination{padding:9px}.region-destination p{font-size:.78rem}.region-map-art>button{min-height:40px;padding:5px 7px}}
dialog.district-map .district-pin.region-pin{width:96px;min-height:64px;height:auto}
dialog.district-map .district-pin.region-pin i,dialog.district-map .region-pin img.district-badge{width:44px;height:44px}
dialog.district-map .region-pin span{max-width:108px;white-space:normal;text-align:center;font-size:11px;line-height:1.2}
dialog.district-map .region-pin[aria-pressed=true]{z-index:3;filter:drop-shadow(0 0 6px #ffe291)}
/* 全城導覽隱藏徽章，只保留可點選的區名；分區清單仍保留美術。 */
/* 分區與導覽清單也只顯示名稱，保留圖檔供日後使用。 */
dialog.district-map img.district-badge{display:none!important}
dialog.district-map .district-pin.region-pin i{display:none}
dialog.district-map .district-pin.region-pin{min-height:44px}
dialog.district-map .district-pin.region-pin span{display:grid;place-items:center;min-height:44px;box-sizing:border-box;padding:8px;border-radius:12px;background:linear-gradient(160deg,#292a2fef,#090a0eef);border:1px solid #ffe291;color:#fff0bd;font-size:12px;box-shadow:0 4px 9px #0009}
dialog.district-map .company-map-head{flex:0 0 auto;gap:8px;padding:10px 12px;flex-wrap:wrap}
dialog.district-map .company-map-head b{font-size:1rem;flex:1}
dialog.district-map .company-map-head>span{order:4;flex-basis:100%;font-size:.75rem;color:#bbd5cf}
dialog.district-map .company-map-head button{min-height:44px;min-width:44px}
dialog.district-map .company-map-view{flex:0 0 auto;min-height:0;display:flex;justify-content:center;align-items:flex-start;padding:4px 10px 8px;container-type:normal}
dialog.district-map .district-map-art{width:min(100%,48dvh);aspect-ratio:16/9;flex-shrink:0}
dialog.district-map .district-pin{width:36px;height:36px;min-width:36px;min-height:36px;z-index:1}
dialog.district-map .district-pin i{width:34px;height:34px;border:0;background:transparent;box-shadow:0 2px 5px #0008}
dialog.district-map img.district-badge{display:block;width:34px;height:34px;object-fit:contain;border-radius:50%;flex-shrink:0}
.district-detail-title{display:flex;align-items:center;gap:8px}
.district-quick-list .district-badge{pointer-events:none}
dialog.district-map .district-pin:focus-visible{outline:3px solid #fff;border-radius:50%;z-index:2}
.district-quick-list{flex:1 1 auto;min-height:88px;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:8px;padding:8px 12px 12px;border-top:1px solid #88b7ac55}
.district-quick-list button{display:flex;align-items:center;gap:6px;min-height:48px;min-width:0;padding:8px;border:1px solid #8bb5a866;border-radius:12px;background:#0b3a40;color:#fff3cd;text-align:left;font:inherit}
.district-quick-list small{display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:50%;background:#f3cf67;color:#183337;font-weight:800}
.district-quick-list b{flex:1;min-width:0;overflow-wrap:anywhere;font-size:.8rem}
.district-quick-list button:focus-visible{outline:3px solid #ffe291;outline-offset:-3px}
dialog.district-map .company-map-foot{flex:0 0 auto;padding:6px 12px;max-height:35dvh;overflow-y:auto}
dialog.district-map .company-map-info{margin:0;font-size:.72rem;color:#bbd5cf}
@media(min-width:700px){.district-quick-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){
  dialog.district-map:not(.is-region-preview){display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:radial-gradient(circle at 28% 44%,#153238,#101419 58%,#090b0e)}
  dialog.district-map:not(.is-region-preview) .company-map-view{min-height:0;padding:10px min(34vw,440px) 10px 20px;align-items:center;justify-content:center;overflow:hidden}
  dialog.district-map:not(.is-region-preview) .district-map-art{width:min(78dvh,680px,calc(66vw - 40px));max-height:calc(100dvh - 132px)}
  dialog.district-map:not(.is-region-preview) .region-panel:has(>h2){top:116px;right:24px;bottom:auto;left:auto;width:min(31vw,410px);max-height:calc(100dvh - 164px);padding:20px;border-radius:20px}
  dialog.district-map:not(.is-region-preview) .region-panel:has(>h2)>h2{font-size:1.45rem}
  dialog.district-map:not(.is-region-preview) .region-panel:has(>h2)>p{font-size:1rem;line-height:1.7}
  dialog.district-map:not(.is-region-preview) .region-panel:has(>h2)>button{min-height:56px;font-size:1rem}
  dialog.district-map:not(.is-region-preview) .company-map-foot{position:absolute;right:24px;bottom:18px;width:min(31vw,410px);padding:0;border:0;background:transparent}
  .city-map-avatar{width:44px;height:60px}
}
@media(max-width:899px) and (max-height:600px){dialog.district-map .district-map-art{width:min(100%,38dvh)}dialog.district-map .company-map-head>span{display:none}}
.gear-item-art{width:64px;height:64px;object-fit:contain;flex-shrink:0;border-radius:10px;background:#123c42}
.sheet-environment{position:relative;flex:0 0 clamp(140px,30dvh,300px);min-height:0;overflow:hidden;background:#092c31}
.sheet-environment img{width:100%;height:100%;object-fit:cover;object-position:center 34%;display:block}
.player-sheet.has-environment{border-radius:16px 16px 0 0}
.player-sheet.has-environment .sheet-handle{display:none}
.player-sheet.has-environment .sheet-head{flex-shrink:0;border-radius:22px 22px 0 0;background:#07383e;position:relative;margin-top:-16px;z-index:1}
.player-sheet.has-environment .sheet-scroll{min-height:0;flex:1;overflow-y:auto}
.player-sheet.has-environment .inv-scene{display:none}
.player-sheet[data-scene-panel="report"] .sheet-environment img{object-position:center 12%}
.player-sheet[data-scene-panel="bank"] .sheet-environment img{object-position:center 48%}
@media(max-height:650px){.sheet-environment{flex-basis:24dvh}.player-sheet.has-environment .sheet-head{min-height:44px}}
:root{
  --v207-deep:#032f35;
  --v207-deeper:#021e24;
  --v207-card:#073b41e8;
  --v207-card-solid:#07363c;
  --v207-line:#7bb6aa80;
  --v207-gold:#f3cf67;
  --v207-gold-2:#c9962e;
  --v207-cream:#fff3c9;
  --v207-text:#f4f7f1;
  --v207-muted:#bed0cc;
  --v207-red:#ff7162;
}

/* Shared mobile surface and typography. */
.panel-home{background:#061f25;color:var(--v207-text)}
.panel-home button,.panel-home input,.panel-home select{font-family:inherit}
.panel-home .btn{border-radius:13px;font-weight:800}
.panel-home .btn.primary{
  border:1px solid #ffe89d;
  background:linear-gradient(180deg,#ffe185,#e8b943 72%,#c89528);
  color:#211a08;
  box-shadow:inset 0 1px #fff9,0 4px 12px #0005;
}
.panel-home .btn.secondary{border:1px solid var(--v207-line);background:#0a4147;color:var(--v207-text)}
.panel-home meter{accent-color:var(--v207-gold)}

/* Top HUD: one compact information card, with reliable wrapping on 360px screens. */
.panel-home .game-hud{
  top:8px;left:8px;right:8px;width:auto;max-width:none;
  padding:7px 10px;gap:8px;border:1px solid #f3cf678c;border-radius:18px;
  background:linear-gradient(110deg,#06363df5,#04292ff2);
  box-shadow:0 7px 22px #00171ea8,inset 0 0 0 1px #74d7cd1c;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.panel-home .hud-avatar{border:2px solid var(--v207-gold);box-shadow:0 0 0 2px #062b31,0 3px 9px #0008}
.panel-home .hud-level{border-radius:999px;background:var(--v207-gold);color:#153035;padding:1px 7px}
.panel-home .hud-name{color:var(--v207-cream)}
.panel-home .hud-xp,.panel-home .hud-energy{border-radius:999px;overflow:hidden}
.game-hud .hud-wallet{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0;flex-wrap:wrap}
.game-hud .hud-cash,.game-hud .hud-s{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border:1px solid #fff7;border-radius:999px;font-size:.72rem;font-weight:900;line-height:1;white-space:nowrap;box-shadow:inset 0 1px #fff8,0 3px 8px #00171e88}
.game-hud .hud-cash{background:linear-gradient(135deg,#ffdf62,#e69b21);color:#3d2600}
.game-hud .hud-s{background:linear-gradient(135deg,#72e8ff,#3089e8 58%,#775be8);color:#fff;text-shadow:0 1px 2px #174477}
.game-hud .hud-debt{flex-basis:100%;text-align:right}

/* Bottom sheet: the same dark-teal glass used in the approved mockups. */
.player-sheet{
  border-color:#93ccc1;border-radius:25px 25px 0 0;
  background:
    radial-gradient(circle at 12% 0,#1a676c55,transparent 34%),
    linear-gradient(155deg,#075159f7,#032b31fa 68%);
  box-shadow:0 -12px 34px #00151eb8,inset 0 1px #ffffff20;
}
.sheet-handle{width:54px;height:6px;border-radius:6px;background:#91c9c5b8}
.sheet-head{min-height:57px;padding-inline:16px;border-bottom:1px solid #7db6ae3d}
.sheet-head h2{color:var(--v207-cream);font-size:1.12rem;letter-spacing:.02em}
.sheet-head button{color:var(--v207-cream)}
.sheet-scroll{padding:12px 14px 18px}
.sheet-scroll>section>h2,.sheet-scroll>section>h3{color:var(--v207-cream)}
.player-dock{
  background:linear-gradient(180deg,#062c31fa,#031f24fd);
  border-top-color:#6f989033;box-shadow:0 -5px 14px #00151d70;
}
.player-dock button{position:relative;color:#dce8e5;font-weight:700}
.player-dock button .pd-art{font-size:0}
.player-dock button[aria-pressed=true]{color:#ffe17b;background:radial-gradient(circle at 50% 38%,#ffe38248,#8e681c18 58%,transparent 72%)}
.player-dock button[aria-pressed=true]:after{content:"";position:absolute;right:25%;bottom:3px;left:25%;height:2px;background:#ffe47b;box-shadow:0 0 8px #ffd557}

/* Overview and reusable cards. */
.sheet-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.sheet-menu button{
  min-height:74px;display:grid;grid-template-columns:42px 1fr;justify-items:start;text-align:left;
  border-color:#75a8a1;background:linear-gradient(135deg,#145158,#0a3c42);color:var(--v207-cream);
  box-shadow:inset 0 1px #ffffff16;
}
.sheet-menu button span{font-size:30px;grid-row:1/3}
.sheet-menu button b{font-size:.92rem}
.staff-overview{margin:0;border:1px solid #6f9e9766;border-radius:12px;background:#062e34cc}
.staff-overview>summary{min-height:42px;display:flex;align-items:center;padding:8px 12px;color:#ffe08a;font-weight:800;cursor:pointer}
.staff-overview>summary::after{content:"＋";margin-left:auto}.staff-overview[open]>summary::after{content:"−"}
.staff-overview>summary::-webkit-details-marker{display:none}.staff-overview>p{margin:0 10px 10px}
.staff-quick-nav{position:sticky;z-index:7;top:-12px;display:flex;gap:6px;margin:0 -4px 8px;padding:8px 4px;overflow-x:auto;scrollbar-width:none;background:linear-gradient(#05383df5 72%,transparent)}
.staff-quick-nav::-webkit-scrollbar{display:none}.staff-quick-nav button{flex:0 0 auto;min-height:40px;padding:7px 12px;border:1px solid #d5b75888;border-radius:999px;background:#17282d;color:#ffe18a;font:700 .78rem inherit;white-space:nowrap}
.staff-section[data-staff-section]{scroll-margin-top:58px}
.qc-card,.sk-row,.gear-slot,.line-card,.bank-panel,.company-life-panel,.channel-price-panel{
  border-color:var(--v207-line)!important;background:linear-gradient(145deg,#10474df0,#092f35f2)!important;
  box-shadow:inset 0 1px #ffffff14,0 5px 15px #00191e55;
}
.qc-tabs,.inv-tabs,.sk-tabs{padding:3px;border:1px solid #6ca09966;border-radius:13px;background:#062a30}
.qc-tabs button,.inv-tabs button,.sk-tabs button{min-height:42px;border:0;border-radius:10px;background:transparent;color:#d5e2df}
.qc-tabs button[aria-selected=true],.inv-tabs button[aria-selected=true],.sk-tabs button[aria-selected=true]{background:linear-gradient(#ffe085,#dbae3d);color:#1c200f;box-shadow:0 2px 8px #0005}

/* Skills: calm three-row hierarchy like the approved training view. */
.sk-list{gap:9px}.sk-row{grid-template-columns:48px minmax(0,1fr) auto;padding:11px;border-radius:14px}
.sk-ico{width:48px;height:48px;border:1px solid #d9bd6c8a;border-radius:50%;background:linear-gradient(145deg,#705a2c,#243b3c);color:#ffe28c}
.sk-main p b{font-size:.94rem}.sk-main small{color:var(--v207-muted)}
.sk-add{min-height:40px;border-color:#cda945;background:#173f42;color:#ffe190}

/* Tasks: image-led card, readable materials, clear primary route. */
.qc-card{border-radius:16px;padding:14px}
.qc-card h3{font-size:1rem;color:#ffe18a}.qc-prog meter{height:14px}
.task-list,.quest-list{gap:10px}
.task-list article,.quest-list article{border-radius:16px;border-color:var(--v207-line);background:#0b4147e8}

/* Inventory: real material art stays dominant, quantities remain readable. */
.inv-scene{height:clamp(125px,22dvh,185px);border:1px solid #dfbf675c;box-shadow:inset 0 -30px 35px #032a31aa}
.inventory-grid{gap:8px}
.inventory-grid>*{border-color:#72a29b;background:linear-gradient(150deg,#10484e,#082f35);border-radius:13px}
.inv-slot{box-shadow:inset 0 1px #ffffff1c}.inv-slot b{color:var(--v207-cream)}
.gear-slot{border-radius:15px}.gear-slot h4{color:#ffe17b}

/* Factory and line management: emphasize the active machine, mute locked bays. */
.factory-management,.line-center{display:grid;gap:10px}
.facility-bay,.facility-blueprint,.line-card{border-radius:15px!important}
.facility-bay:not(.unbuilt),.line-card[data-status="running"]{border-color:#efc85f!important;box-shadow:0 0 0 1px #efc85f55,0 7px 18px #00191e77}
.facility-bay.unbuilt,.line-card.is-locked{filter:saturate(.55);opacity:.68}
.factory-management progress,.line-card progress{height:13px;accent-color:var(--v207-gold)}

/* Finance cards and full-screen finance center. */
.finance-center{background:linear-gradient(170deg,#073d43,#031f25 68%);color:var(--v207-text)}
.finance-center>header{border-bottom:1px solid #d8ba665f;background:#052f35e8;backdrop-filter:blur(8px)}
.finance-center>header b{color:var(--v207-cream)}
.finance-center-summary,.finance-center-body>section{border:1px solid var(--v207-line);border-radius:16px;background:linear-gradient(145deg,#10494f,#082f35);box-shadow:inset 0 1px #ffffff16}
.finance-center-body button{border-radius:12px}
.bank-panel-head h2{color:var(--v207-cream)}

/* Merchant interior: dialogue drawer feels native, not a long webpage. */
.merchant-drawer{border-color:#9bcec5;background:linear-gradient(160deg,#075159f8,#032a31fc);box-shadow:0 -10px 30px #00131dbb}
.merchant-drawer-top{border-bottom:1px solid #7eb1a93d}
.merchant-card{border-color:#dfc27470;background:#0a3c42}
.merchant-tabs{padding:3px;border:1px solid #77a8a166;border-radius:13px;background:#052a30}
.merchant-tabs button[aria-selected=true]{background:linear-gradient(#ffe184,#d7a936);color:#191b0d}
.merchant-dialogue,.merchant-goods{border-color:#73a39c;background:#0b3940}
.merchant-free-time{background:linear-gradient(#ffe184,#d8aa38);color:#201b0a}

/* All merchant categories share one layout, including long names and contract shops. */
.merchant-scene{top:var(--topbar-h,68px);overflow-x:hidden;overscroll-behavior:contain}
.merchant-scene .merchant-drawer{padding:16px 12px max(16px,env(safe-area-inset-bottom));isolation:isolate}
.merchant-scene .merchant-drawer-top{position:sticky;top:0;z-index:8;background:#06373d;gap:12px;border-radius:10px}
.merchant-scene .merchant-drawer-top button{min-height:44px;padding:8px 10px;white-space:normal}
.merchant-scene .merchant-card{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:10px;border:1px solid var(--v207-line);border-radius:14px}
.merchant-scene .merchant-card-face{width:64px;height:64px;border-width:2px}
.merchant-scene .merchant-card b{font-family:inherit;font-size:1rem;line-height:1.4;letter-spacing:.02em;overflow-wrap:anywhere}
.merchant-scene .merchant-card small{font-size:.8rem;line-height:1.5;overflow-wrap:anywhere}
.merchant-scene .merchant-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px}
.merchant-scene .merchant-tabs button{min-width:0;min-height:48px;padding:8px 3px;border-radius:9px;border:0;letter-spacing:0;font-family:inherit;font-size:.82rem;flex-wrap:wrap;gap:4px;overflow-wrap:anywhere}
.merchant-scene .merchant-tabs button.active{margin:0;box-shadow:none}
.merchant-scene .merchant-tab-panel{padding:12px 10px;border-radius:12px;margin-top:8px;border-color:var(--v207-line)}
.merchant-scene .merchant-tab-panel:after{display:none}
.merchant-scene .merchant-bubble-row{grid-template-columns:44px minmax(0,1fr);gap:10px}
.merchant-scene .merchant-bubble-face{width:44px;height:44px}
.merchant-scene .merchant-greeting{font-family:inherit;font-size:.88rem;line-height:1.6;overflow-wrap:anywhere}
.merchant-scene .merchant-tab-panel .merchant-controls button,
.merchant-scene .merchant-real-location a,
.merchant-scene .merchant-rest-row #merchant-free-time{width:100%;margin-right:0;min-height:48px;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere}
.merchant-scene .merchant-controls button:disabled{opacity:1;color:#b4c2bf;background:#253b3c;border-style:dashed}
.merchant-scene .merchant-goods{display:grid;gap:10px;border:0;padding:0;background:transparent}
.merchant-scene .merchant-goods>p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin:0;font-size:.82rem;line-height:1.5}
.merchant-scene .merchant-goods>button{display:grid;grid-template-columns:48px minmax(0,1fr);gap:5px 10px;align-items:center;width:100%;min-width:0;padding:12px;border:1px solid var(--v207-line);border-radius:13px;background:#10464c;color:#f4f7f1;text-align:left;white-space:normal}
.merchant-scene .merchant-goods>button>i{grid-row:1/3;width:48px;height:48px;position:relative;font-style:normal}
.merchant-scene .merchant-goods>button>i img{width:100%;height:100%;object-fit:contain}
.merchant-scene .merchant-goods>button>span{min-width:0;overflow-wrap:anywhere}
.merchant-scene .merchant-goods>button b{display:block;font-size:.95rem;line-height:1.4}
.merchant-scene .merchant-goods>button small{display:block;font-size:.8rem;line-height:1.5;color:#c6d9d4}
.merchant-scene .merchant-goods>button>em{grid-column:2;font-style:normal;font-size:.85rem;color:#ffe08a;white-space:normal}
.merchant-scene .merchant-goods>button:disabled{opacity:1;background:#24393c;border-style:dashed;color:#c5cecb}
.merchant-scene .merchant-goods>button[data-sport]>i{overflow:hidden;border:1px solid #d8bb68;border-radius:12px;background:#092f34}
.merchant-scene .merchant-goods>button[data-sport]>i img{width:100%;height:100%;object-fit:cover}
.merchant-scene .merchant-shop-world.sport-scene{background-position:center;background-size:cover}
.merchant-scene .merchant-shop-world.sport-scene .merchant-npc-sprite,.merchant-scene .merchant-shop-world.sport-scene .merchant-npc-name{display:none}
.merchant-scene .merchant-shop-world.sport-scene .merchant-player{left:50%;bottom:24%;transform:translateX(-50%)}
.merchant-scene .street-mission{border-radius:16px;background:#06373d;border-color:var(--v207-gold);overflow-wrap:anywhere}
.merchant-scene .street-mission-head{grid-template-columns:36px minmax(0,1fr) 44px}
.merchant-scene .street-mission-head>button{width:44px;height:44px}
.merchant-scene .street-answers button{font-size:.88rem;line-height:1.5;min-height:48px}
.merchant-scene button:focus-visible,.merchant-scene a:focus-visible{outline:3px solid #8fe7e5;outline-offset:2px}
@media(max-height:650px){.merchant-scene .merchant-shop-world{height:34dvh}.merchant-scene .merchant-card{grid-template-columns:48px minmax(0,1fr)}.merchant-scene .merchant-card-face{width:48px;height:48px}}

/* Combat: preserve real state and animation; compress chrome so the arena remains visible. */
.player-sheet.expanded.is-combat{height:min(62%,560px);inset:auto 0 0;border-radius:25px 25px 0 0}
.player-sheet.is-combat .sheet-head{min-height:44px;padding:3px 12px}
.player-sheet.is-combat .sheet-scroll{padding:6px 10px max(8px,var(--safe-b))}
.ex-panel.is-combat{gap:5px}.ex-cb-monster{border-color:#8c719b;background:#171b2aeb}
.ex-cb-warn{border-color:#ff5f4f;background:#4b1010;color:#ffe0d6;box-shadow:0 0 12px #ff473d35}
.ex-panel.is-combat .cs-stage{height:clamp(128px,22dvh,190px);border-radius:14px;border:1px solid #d4b75c66;overflow:hidden}
.ex-cb-weapon{border-color:#73a39c;background:#0a343a;color:#d9e5e2}
.ex-cb-four{gap:7px}.ex-cb-big{min-height:64px;border-color:#73aaa2;background:linear-gradient(#0e4850,#083239);color:#f5f7f3}
.ex-cb-big.is-primary{border-color:#fff0ad;background:linear-gradient(#ffe27f,#dfae35);color:#201907;box-shadow:0 0 14px #eabb4566}
.ex-cb-big.is-primary span{font-size:.94rem}.ex-cb-big b{font-size:1.35rem}
.ex-cb-grid{gap:7px}.ex-cb-act.ability-button{border-color:#8066e5;background:linear-gradient(145deg,#2d2259,#1c173e)}
.ex-win{border-color:#e8c9668a;background:linear-gradient(160deg,#0b4a50,#052b31);box-shadow:0 8px 22px #00171e88}
.ex-win-title{color:#ffe17b}.ex-win-list li{border-color:#75a9a166;background:#062e34}
.ex-win-actions .btn{min-height:56px}

@media(max-width:430px){
  .panel-home .game-hud{grid-template-columns:34px minmax(0,1fr) auto;padding:4px 6px 4px 3px;gap:5px;border-radius:14px}
  .panel-home .hud-avatar{width:34px;height:34px}
  .panel-home .hud-name{gap:4px;font-size:12px}
  .panel-home .hud-level{padding-inline:4px;font-size:10px}
  .panel-home .hud-xp small{font-size:9px}
  .panel-home .hud-energy small{font-size:10px}
  .game-hud .hud-wallet{gap:3px;max-width:138px}
  .game-hud .hud-cash,.game-hud .hud-s{min-height:23px;padding:3px 6px;font-size:.58rem}
  .panel-home .character-home-shortcuts{left:8px;right:8px;gap:5px}
  .panel-home .character-home-action{min-width:0;padding-inline:2px;font-size:11px;white-space:normal;line-height:1.25}
  .panel-home .line-dock{right:12px;top:58px;max-width:min(190px,48%)}
  .line-dock-fab{min-width:0;min-height:42px;padding:5px 9px}
  .sheet-scroll{padding-inline:11px}
  .sheet-scroll table{display:block;width:100%;max-width:100%;overflow-x:auto}
  .sheet-scroll img{max-width:100%}
  .sheet-scroll button{max-width:100%;overflow-wrap:anywhere}
  .player-sheet{border-radius:22px 22px 0 0}
  .sheet-menu button{grid-template-columns:35px 1fr;min-height:68px;padding:9px}
  .sheet-menu button span{font-size:25px}
  .player-sheet.expanded.is-combat{height:64%}
}

@media(max-width:370px){
  .game-hud .hud-wallet{max-width:118px}
  .game-hud .hud-cash,.game-hud .hud-s{padding-inline:5px;font-size:.54rem}
  .panel-home .game-clock{width:46px!important;min-width:46px!important;padding-inline:2px!important}
  .panel-home .character-home-action{font-size:10px}
  .sheet-head{padding-inline:10px}
  .sheet-menu{gap:7px}
  .sk-row{grid-template-columns:42px minmax(0,1fr)}
  .sk-ico{width:42px;height:42px}.sk-add{grid-column:1/-1;width:100%}
  .ex-cb-four{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .ex-cb-big{min-height:60px;padding-inline:1px}.ex-cb-big span{font-size:.76rem}
}

@media(prefers-reduced-motion:reduce){
  .panel-home *{scroll-behavior:auto!important}
}

/* Preserve the live combat sprites at a readable size, with scrollable actions. */
.player-sheet.expanded.is-combat{inset:0 0 0;height:auto;max-height:none}
.player-sheet.is-combat .sheet-scroll{overflow-y:auto;min-height:0}
.ex-panel.is-combat .cs-stage{height:clamp(210px,34dvh,370px);min-height:210px;flex-shrink:0}
.finance-center:before{content:"";display:block;height:clamp(150px,30dvh,300px);background:url('../img/scenes/bank-consultation-scene-land-v1.webp') center 48%/cover no-repeat}
.finance-center>header{position:sticky;top:0;z-index:3;background:#07383e;border-radius:20px 20px 0 0}
@media(max-height:650px){.ex-panel.is-combat .cs-stage{height:180px;min-height:180px}.finance-center:before{height:24dvh}}
/* 10-04 地區預覽面板 z-index 8 蓋住分區介紹（z 5），按「前往」看似沒反應→介紹層提到最上 */
dialog.district-map .district-detail{z-index:9}

/* v360 老闆 10-05：錢移到 HUD 第二排；戰鬥小條收成右側小卡 */
.panel-home .game-hud,.game-hud{grid-template-columns:34px minmax(0,1fr)!important;row-gap:4px}
.game-hud .hud-wallet{grid-column:1/-1;grid-row:2;justify-content:flex-start;margin-left:0;max-width:none!important}
.combat-chip{right:8px;left:auto;bottom:calc(150px + var(--safe-b));width:150px;height:auto;min-height:42px;flex-wrap:wrap;padding:6px 6px 6px 10px;border-radius:14px;row-gap:2px}
.combat-chip>b{flex:1 1 auto}
.combat-chip>span{flex:1 1 100%;order:3;white-space:normal;font-size:10px;line-height:1.25}
@media(min-width:800px){.combat-chip{right:24px;bottom:150px;width:170px}}
.combat-chip-stop{flex:0 0 auto;min-height:30px;padding:0 8px;border:1px solid #e85b42;border-radius:15px;background:#3a1714;color:#ffd9d2;font-size:11px;font-weight:900;cursor:pointer}
/* v362 老闆 10-05：右側戰鬥小卡縮小（真機太大） */
.combat-chip{width:118px;min-height:0;padding:4px 5px 4px 8px;gap:4px;border-radius:12px;row-gap:1px}
.combat-chip>b{font-size:10px}
.combat-chip>span{font-size:9px;line-height:1.2}
.combat-chip-return{flex:0 0 24px;width:24px;height:24px;min-width:24px;min-height:24px;font-size:14px}
.combat-chip-stop{min-height:22px;padding:0 6px;font-size:10px;border-radius:11px}
@media(min-width:800px){.combat-chip{width:140px}}
/* v362 老闆 10-05：戰鬥小卡出現時，產線清單縮短停在小卡上方，收合鈕不被擋 */
.panel-home:has(.combat-chip:not([hidden])) .line-dock:not(.mission-rail>.line-dock){max-height:calc(100% - 58px - 230px - var(--safe-b))}
/* 10-09 v467 老闆：簽到／採集中之後自動生產不見——產線清單已併進右側工具列，上面那條不能再套在它身上（算出來是 0 高）；工具列裡展開的清單高度改看螢幕高 */
.panel-home .line-dock-bar{position:sticky;top:0;z-index:2}
/* v362c 老闆 10-05：自動戰鬥時下方 ICON 照常顯示；戰鬥小卡貼在 ICON 列右上方，不擠右側小卡 */
.combat-chip{bottom:calc(92px + var(--safe-b))}
@media(min-width:800px){.combat-chip{right:24px;bottom:96px;width:128px}}

/* 大地圖玩家標記：比區名牌高一層，黑金底座加強「這是玩家」的辨識。 */
dialog.district-map .city-map-avatar,dialog.district-map .region-map-avatar{z-index:6;width:46px;height:63px;filter:drop-shadow(0 5px 4px #000d)}
dialog.district-map .city-map-avatar:after,dialog.district-map .region-map-avatar:after{width:40px;height:15px;border-color:#ffe291;background:radial-gradient(ellipse,#d9a928aa,#111820cc 68%);box-shadow:0 0 0 2px #111820aa,0 0 14px #ffd85c99}
@media(min-width:900px){dialog.district-map .city-map-avatar,dialog.district-map .region-map-avatar{width:52px;height:71px}}

/* 10-06 電腦首頁只縮介面層，地圖繼續滿版；預留 HUD、底列與右側狀態安全區。 */
@media(min-width:800px){
  .panel-home .avatar-2d-stage{inset:18% 0 170px}
  .panel-home.has-character-orbit .avatar-3d-model{scale:.94;transform-origin:50% 72%}
  .panel-home .home-pet{top:25%;width:24%;max-width:128px}
  .panel-home .home-pet.is-second{top:37%;width:17%;max-width:90px}
  body:has(.panel-home)>.app-shell>.topbar{min-height:58px;padding:4px 12px}
  body:has(.panel-home)>.app-shell>.topbar .brand-stack{flex:0 0 112px;max-width:112px}
  body:has(.panel-home)>.app-shell>.topbar .brand-stack b{font-size:11px}
  body:has(.panel-home)>.app-shell>.topbar .brand-stack span{font-size:18px}
  .panel-home .signin-card{top:76px;left:16px}
  .panel-home .game-hud{max-width:360px}
  .mission-rail{right:14px;top:76px;gap:6px}
  .mission-rail button[data-mission-rail],.panel-home .mission-rail>.line-dock.is-collapsed .line-dock-fab{width:54px;height:58px;min-width:54px;min-height:58px;border-radius:15px}
  .mission-rail-art,.mission-rail-art img{width:40px;height:40px}
  .quick-bar{--qb-height:82px;left:3%;right:3%;padding:3px 10px calc(5px + var(--safe-b))}
  .qb-track{align-items:end;gap:8px}
  .qb-track button{flex-basis:68px;width:68px;min-width:68px;height:72px;min-height:72px;grid-template-rows:50px 16px;align-content:end}
  .qb-art,.qb-art img{width:46px;height:46px}
  .quick-bar .qb-track button b{position:static!important;width:66px!important;height:14px!important;overflow:hidden!important;clip:auto!important;clip-path:none!important;color:#fff1bd;font:800 10px/14px "Noto Sans TC",sans-serif;text-align:center;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 3px #000}
  .panel-home.has-quick-bar .character-home-shortcuts{bottom:calc(88px + var(--safe-b));max-width:360px;gap:7px}
  .panel-home.has-quick-bar .character-home-shortcuts .character-home-action{flex-basis:53px;min-width:53px;width:53px;height:53px;min-height:53px}
  .panel-home.has-quick-bar .character-home-shortcuts .character-home-action img{width:47px;height:47px}
  .character-orbit{bottom:calc(170px + var(--safe-b));width:366px;height:151px}
}

/* 10-06 電腦版材料探險：場景與狀態分欄，不再把手機直式場景拉成全寬超長頁。 */
@media(min-width:800px){
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running{width:min(100%,1180px);margin:0 auto}
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running .ex-run{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.8fr);align-items:start;gap:9px 18px}
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running .ex-run>.ex-scene.material-level-scene{grid-column:1;grid-row:1/span 12;position:sticky;top:0;width:100%;aspect-ratio:4/3;max-height:calc(100dvh - 112px);margin:0}
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running .ex-run>.ex-scene.material-level-scene.is-land{aspect-ratio:16/9}
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running .ex-run>h3,
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running .ex-run>p,
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running .ex-run>.ex-boss-bar,
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running .ex-run>.ex-win,
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running .ex-run>.cs-stage,
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running .ex-run>.ex-gather-bar,
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running .ex-run>.ex-actions{grid-column:2;min-width:0;margin-top:0}
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running .ex-boss-bar{padding:10px 12px}
  .panel-home .player-sheet:not(.is-combat) .ex-panel.is-running .ex-run-actions{grid-template-columns:1fr}
}
/* 10-10 v541 分區改橫式街景卡：地圖不動、每區一顆進入 */
dialog.district-map.is-region-preview .region-panel{display:flex;flex-direction:column;gap:8px}
.region-scenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;min-height:0;overflow:auto;padding:2px 2px 8px}
.region-scene{display:flex;flex-direction:column;gap:5px;padding:8px;border:1px solid #c89a2e;border-radius:14px;background:#fffdf7;color:#4a3306;box-shadow:0 3px 10px #4a33061f}
.region-scene>img{display:block;width:100%;aspect-ratio:3/1;object-fit:cover;border-radius:10px;background:#f3ead4}
.region-scene-empty{display:grid;place-items:center;aspect-ratio:3/1;border-radius:10px;background:#f3ead4;font-size:2rem}
.region-scene h3{display:flex;align-items:center;gap:6px;margin:0;font-size:.95rem;color:#4a3306}
.region-scene p{flex:1;margin:0;font-size:.76rem;line-height:1.35;color:#5c4512}
.region-scene .btn{width:100%;min-height:40px;justify-content:center}
/* 10-10 v541 高登市地圖車流：車貼在路上走，不擋點擊 */
.district-map-art .city-traffic{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:12px}
.district-map-art .city-traffic img{position:absolute;width:3%;height:auto;transform:translate(-50%,-62%);object-fit:contain;border-radius:0;filter:drop-shadow(0 1px 1px #0006)}
dialog.district-map.is-region-preview .region-scenes{padding-top:max(80px,calc(env(safe-area-inset-top) + 76px));align-content:start}
/* 10-11 v546 地圖上的船與飛機（比車大；飛機在最上層、影子落在地上） */
.district-map-art .city-traffic img.flip{transform:translate(-50%,-62%) scaleX(-1)}
.district-map-art .city-traffic img.sea-ship{width:8.5%;transform:translate(-50%,-70%);filter:drop-shadow(0 2px 2px #0005)}
.district-map-art .city-traffic img.sea-ship[data-kind="ship-feeder"]{width:6%}
.district-map-art .city-traffic img.sky-plane{width:10%;z-index:2;transform:translate(-50%,-50%);filter:drop-shadow(10px 26px 3px #0004)}
/* v557 百貨專櫃：橫式全景與右側可捲動專櫃表。 */
dialog.district-map .district-detail:has(.mall-counters){background:#f4e8d2}
dialog.district-map .district-detail:has(.mall-counters) .district-detail-art{margin-right:36%}
dialog.district-map .district-detail:has(.mall-counters) .district-detail-body{left:auto;right:10px;top:56px;bottom:10px;width:34%;overflow-y:auto;align-content:start;background:#fff8e8;color:#49331c;border:1px solid #b58a27}
.mall-counters{display:grid;gap:10px}
.mall-counters section{padding:8px;border:1px solid #d4ba88;border-radius:9px;background:#f4e8d2}
.mall-counters h3{margin:0 0 6px;font-size:14px;color:#49331c}
.mall-counters .district-shops{display:grid;gap:6px}
.mall-counters .btn{white-space:normal;text-align:left;min-height:44px;background:#fff8e8;color:#49331c;border-color:#b58a27}
.mall-counters .btn:hover,.mall-counters .btn:focus-visible{background:#edc45b;color:#49331c}
.mall-counters small{display:block;font-size:11px}
.walk25d-in .walk25d-hint{top:auto;bottom:8px}
.walk25d-in .walk25d-top b{flex:0 1 220px;margin:0 auto 0 0}