html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
:root { --ink:#304b38; --muted:#8a9583; --green:#3d6146; --line:#e2e7d8; --cream:#fafbf3; --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px); --hotbar-bottom:12px; --hotbar-h:82px; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:#edf0e7; color:var(--ink); font:14px/1.5 "Segoe UI","Microsoft YaHei",sans-serif; overflow:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button { border:0; font:inherit; cursor:pointer; color:inherit; touch-action:manipulation; }
button:focus-visible,a:focus-visible { outline:3px solid #bd9b50; outline-offset:4px; }
button:disabled { cursor:default; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; pointer-events:none; }
#scene { position:fixed; inset:0; touch-action:none; }
#scene canvas { display:block; width:100%; height:100%; }
.vignette { pointer-events:none; position:fixed; inset:0; background:radial-gradient(ellipse at 50% 45%,transparent 47%,#e9eee333 80%,#e9eee388); }
.topbar { position:absolute; inset:0 0 auto; height:calc(60px + var(--safe-top)); padding:var(--safe-top) calc(20px + var(--safe-right)) 0 calc(20px + var(--safe-left)); display:flex; align-items:center; gap:18px; pointer-events:none; z-index:3; background:linear-gradient(#eff2e8ee,#eff2e833); }
.topbar>* { pointer-events:auto; }
.brand { padding:0; background:transparent; text-align:left; display:flex; align-items:center; gap:7px; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand-symbol { width:29px; height:31px; display:grid; place-items:center; border:1px solid #84977555; border-radius:10px 10px 10px 2px; }
.brand-symbol svg { width:20px; height:20px; }
.brand>span:nth-child(2) { font-size:16px; font-weight:700; letter-spacing:2px; }
.brand small { display:block; font-size:6px; letter-spacing:2px; font-weight:500; margin-top:-1px; }
.season { display:flex; align-items:center; gap:7px; }
.season>span:first-child { color:#b99b50; }
.season svg { width:19px; height:19px; }
.season b { font-size:11px; letter-spacing:.5px; font-weight:600; }
.season small { display:block; font-size:8px; color:var(--muted); }
.season-tag { background:#e6ebdc; font-size:9px; padding:2px 5px; border-radius:5px; margin-left:2px; }
.wallet { display:flex; align-items:center; gap:5px; border-left:1px solid #d5decb; padding-left:16px; }
.wallet svg { width:18px; height:18px; }
.wallet>span { color:#bd984c; }
.wallet b { font-size:18px; font-weight:600; letter-spacing:.5px; }
.wallet small { font-size:10px; color:#9ba78f; }
.header-actions { display:flex; gap:6px; }
.icon-button { width:34px; height:34px; display:grid; place-items:center; border:1px solid #bac9ac66; background:#f9faf3a8; border-radius:50%; transition:.2s; flex-shrink:0; }
.icon-button:hover { background:#fff; color:#3c7347; }
.icon-button svg { width:16px; height:16px; }
.topbar .icon-button,.view-controls .icon-button,#land-toggle { width:30px; height:30px; }
.topbar .icon-button svg,.view-controls .icon-button svg,#land-toggle svg { width:14px; height:14px; }
.view-controls { position:absolute; right:calc(20px + var(--safe-right)); top:calc(80px + var(--safe-top)); display:flex; flex-direction:column; gap:6px; }
.view-controls .icon-button { background:#fbfcf1bd; border-color:#fff9; }
.land-navigation { position:fixed; top:calc(224px + var(--safe-top)); right:calc(20px + var(--safe-right)); z-index:5; }
#land-toggle { background:#fbfcf1e6; border-color:#fff9; box-shadow:0 3px 12px #304b380c; }
#land-toggle[aria-expanded="true"] { background:#3f6547; color:#fff9df; border-color:#3f6547; }
.land-focus { position:fixed; width:224px; max-width:calc(100vw - 24px); display:flex; flex-direction:column; padding:14px; border:1px solid #fff; border-radius:16px; background:#fbfcf5f5; box-shadow:0 10px 35px #304b3820; backdrop-filter:blur(18px); }
.land-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; padding-bottom:10px; }
.land-heading small { font-size:8px; letter-spacing:1.8px; color:#97a18b; }
.land-heading h2 { font-size:13px; font-weight:600; margin:2px 0 0; }
.land-heading .icon-button { width:26px; height:26px; background:#edf1e6; border:0; }
.land-list { overflow-y:auto; min-height:0; padding:3px; display:flex; flex-direction:column; gap:5px; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:thin; }
.land-option { display:flex; align-items:center; gap:9px; width:100%; flex-shrink:0; min-height:44px; padding:8px 10px; background:transparent; border:1px solid transparent; border-radius:10px; text-align:left; }
.land-option:hover { background:#edf1e5; }
.land-option[aria-current="location"] { background:#e7eedc; border-color:#d8e3c9; }
.land-option>svg { width:18px; height:18px; color:#7c9465; flex-shrink:0; }
.land-option span { flex:1; font-size:11px; }
.land-option small { display:block; font-size:9px; color:#97a18b; margin-top:2px; }
.land-option .land-check { flex:0 0 13px; width:13px; height:13px; visibility:hidden; }
.land-check svg { width:13px; height:13px; }
.land-option[aria-current="location"] .land-check { visibility:visible; }
.land-option:focus-visible { outline-offset:-2px; }
.building-benefits { padding:9px 11px; margin:0 0 12px; background:#edf1e4; border-radius:8px; color:#81916e; font-size:10px; line-height:1.9; }
.action-menu { position:fixed; z-index:8; display:flex; flex-direction:column; width:280px; max-width:calc(100vw - 24px); padding:16px; border:1px solid #fff; border-radius:16px; background:#fbfcf5f7; box-shadow:0 12px 45px #2a442329; backdrop-filter:blur(18px); transform-origin:top left; }
.menu-content { flex-shrink:0; display:flow-root; }
.menu-heading { flex-shrink:0; padding-bottom:3px; }
.menu-heading>div { min-width:0; }
.menu-heading h2 { overflow-wrap:anywhere; }
.menu-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.menu-heading small { font-size:9px; color:#9aa587; letter-spacing:.8px; }
.menu-heading h2 { font-size:15px; font-weight:600; margin:3px 0 0; }
.menu-heading .icon-button { width:26px; height:26px; border:0; background:#edf1e6; }
.menu-heading .icon-button svg { width:13px; height:13px; }
#menu-description { font-size:11px; color:#8a977e; margin:10px 0 13px; line-height:1.7; }
#menu-buttons { display:flex; flex-direction:column; gap:7px; }
.action-menu.multi-actions #menu-buttons { display:grid; grid-template-columns:repeat(var(--menu-columns,2),minmax(0,1fr)); }
.action-menu.multi-actions .menu-action { display:grid; grid-template-columns:23px minmax(0,1fr); gap:2px 7px; }
.action-menu.multi-actions .menu-action>svg,.action-menu.multi-actions .menu-action>.emoji { justify-self:center; }
.action-menu.multi-actions .menu-action small { grid-column:2; margin-left:0; white-space:normal; }
/* 最后一行只剩一个按钮时让它占满，避免出现半格的空洞。 */
.action-menu[data-columns="2"] #menu-buttons>.menu-action:last-child:nth-child(odd),
.action-menu[data-columns="3"] #menu-buttons>.menu-action:last-child:nth-child(3n+1),
.action-menu[data-columns="4"] #menu-buttons>.menu-action:last-child:nth-child(4n+1) { grid-column:1/-1; }
@media(max-height:550px) {
 .action-menu.multi-actions #menu-buttons { gap:5px; }
 .action-menu.multi-actions .menu-action { min-height:34px; padding:5px 7px; gap:0 5px; }
 .action-menu.multi-actions #menu-description { margin:6px 0 8px; }
 .action-menu.multi-actions #menu-worker { margin-top:8px; padding-top:6px; }
}
.menu-action { min-height:41px; width:100%; background:#eaf0df; border:1px solid #dfe8cf; border-radius:9px; display:flex; align-items:center; gap:10px; padding:8px 11px; font-size:12px; text-align:left; }
.menu-action:hover { background:#e0e9cf; }
.menu-action.main { background:#3f6547; border-color:#3f6547; color:#fffbeb; }
.menu-action.main:hover { background:#527752; }
.menu-action:disabled { opacity:.45; }
.menu-action svg { width:19px; height:19px; flex:none; }
.menu-action small { font-size:9px; margin-left:auto; opacity:.7; white-space:nowrap; }
.menu-action .emoji { font-size:20px; width:23px; text-align:center; }
.menu-action.secondary { background:transparent; border-color:#e4e8dc; color:#8d9a80; min-height:33px; font-size:10px; justify-content:center; }
.menu-action.discard { min-height:36px; background:transparent; border-color:#e8c3bb; color:#a8635a; }
.menu-action.discard:hover { background:#fae8e3; }
.menu-action.discard:disabled { opacity:.45; }
#menu-worker { display:flex; align-items:center; gap:6px; margin-top:13px; padding-top:10px; border-top:1px solid var(--line); font-size:9px; color:#9aa587; }
#menu-worker svg { width:15px; height:15px; }
.menu-pointer { position:absolute; top:calc(100% - 1px); left:var(--pointer-x,50%); width:13px; height:13px; background:#fbfcf5; border-right:1px solid #fff; border-bottom:1px solid #fff; transform:translate(-50%,-50%) rotate(45deg); }
.action-menu.below .menu-pointer { top:0; transform:translate(-50%,-50%) rotate(225deg); }
.action-menu.unanchored .menu-pointer { display:none; }
.place-confirm { position:fixed; z-index:9; display:flex; gap:9px; }
.place-confirm[hidden] { display:none; }
.place-confirm-button { width:42px; height:42px; border-radius:50%; border:1px solid #dfe8cf; background:#fbfcf5f5; color:#6d7f61; display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 20px #2a44232e; backdrop-filter:blur(10px); }
.place-confirm-button svg { width:21px; height:21px; }
.place-confirm-button:hover { background:#eaf0df; }
.place-confirm-button.accept { background:#3f6547; border-color:#3f6547; color:#fffbeb; }
.place-confirm-button.accept:hover { background:#527752; }
.place-confirm-button.accept:disabled { opacity:.4; cursor:default; }
.place-confirm-button.cancel { color:#a8635a; border-color:#e8c3bb; }
.place-confirm-button.cancel:hover { background:#fae8e3; }
.meter-label { display:flex; justify-content:space-between; font-size:9px; color:#91a07f; margin-top:9px; }
.meter-track { height:4px; background:#e4e9da; border-radius:4px; margin:5px 0 10px; overflow:hidden; }
.meter-track i { height:100%; display:block; border-radius:4px; background:#91ab6b; }
.meter-track.water i { background:#89afb5; }
.quest-mini { display:flex; align-items:center; gap:7px; font-size:10px; margin:8px 0; color:#8a977e; }
.quest-mini.done { color:#52774b; }
.quest-mini svg { width:13px; height:13px; }
.bottom-hud { position:fixed; bottom:calc(16px + var(--safe-bottom)); left:calc(20px + var(--safe-left)); right:calc(20px + var(--safe-right)); display:flex; align-items:flex-end; justify-content:space-between; gap:12px; pointer-events:none; transition:bottom .18s ease,opacity .16s ease; }
/* 编辑态快捷栏贴底，底部这一排整体抬到快捷栏之上，不再和它抢同一条线。 */
body.building .bottom-hud { bottom:calc(var(--hotbar-bottom) + var(--hotbar-h) + 12px + var(--safe-bottom)); }
/* 编辑时存档提示让位，「完成编辑」落回右下角，不再悬在快捷栏正上方中间。 */
body.building .save-hint { display:none; }
/* 选物件的面板铺下来时会盖住这排按钮，干脆让位。 */
body.picking .bottom-hud { opacity:0; pointer-events:none; }
.worker-pill,.evolution-pill,.market-pill { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid #fff9; border-radius:11px; background:#fbfcf2e8; box-shadow:0 3px 12px #304b3809; backdrop-filter:blur(8px); pointer-events:auto; transition:background .2s; }
.worker-pill svg { width:21px; height:21px; }
.worker-pill:hover,.evolution-pill:hover,.market-pill:hover { background:#fff; }
.worker-pill[aria-expanded="true"] { background:#e0e9d4; border-color:#adbf95; }
.worker-pill { color:#728b58; }
.market-pill { color:#728b58; }
.market-pill svg { width:19px; height:19px; }
#market-dialog { width:720px; padding:28px; scrollbar-width:thin; scrollbar-color:#bbc8aa transparent; }
#market-dialog h2 { margin:12px 0 6px; font-size:23px; }
.market-result-dialog>p { color:var(--ink); font-size:15px; overflow-wrap:anywhere; }
#market-status { margin:0 0 18px; font-size:11px; }
#market-body { min-width:0; font-size:12px; }
#market-body h3 { margin:0 0 14px; font-size:15px; font-weight:600; }
#market-body h3 small { display:block; margin-top:4px; color:var(--muted); font-size:10px; font-weight:400; }
#market-body p { line-height:1.8; overflow-wrap:anywhere; }
.market-tabs { display:flex; gap:4px; padding:4px; margin-bottom:18px; background:#e9eedf; border-radius:12px; }
.market-tab { flex:1; padding:9px 4px; border-radius:9px; background:transparent; color:#7c8d70; font-size:11px; }
.market-tab.active { background:var(--cream); color:var(--green); box-shadow:0 2px 7px #304b380a; }
.market-tab:hover,.market-chip:hover { color:var(--green); background:#f5f7ee; }
.market-card { padding:18px; border:1px solid var(--line); border-radius:15px; background:#fffdf8; }
.market-card .primary-button { margin:18px 0; width:100%; }
.market-empty { padding:16px 0; color:var(--muted); text-align:center; font-size:11px; }
.market-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:12px 0; border-block:1px solid var(--line); }
.market-grid small { display:block; color:var(--muted); font-size:10px; }
.market-grid b { display:block; margin-top:4px; font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.market-chart { display:block; width:100%; height:auto; margin:14px 0 6px; border-radius:9px; background:#f5f7ef; stroke:none; pointer-events:auto; }
.market-chart-controls { display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px; margin-top:16px; }
.market-chart-controls>div { display:flex; flex-wrap:wrap; gap:4px; }
.market-chart-caption { margin:0 0 12px; color:var(--muted); font-size:9px; }
.market-ma5 { color:#b8860b; }
.market-ma10 { color:#728b58; }
.market-chart { touch-action:pan-y; }
.market-chart:focus-visible { outline:2px solid #728b58; outline-offset:2px; }
.market-chart-window { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; color:var(--muted); font-size:10px; }
.market-chart-window input { min-width:80px; flex:1; accent-color:#728b58; }
.market-chart-readout { display:block; min-height:30px; padding:5px 0; color:var(--green); font-size:10px; font-variant-numeric:tabular-nums; }
.market-overview { margin-bottom:14px; padding:15px; border:1px solid var(--line); border-radius:13px; background:#f5f7ef; }
.market-index { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; }
.market-index b { font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
.market-index strong { font-size:12px; }
.market-overview p,.market-budget { color:var(--muted); font-size:10px; }
.market-ranking summary { cursor:pointer; padding:8px 0; color:var(--green); font-size:11px; }
.market-ranking>div { display:flex; flex-direction:column; }
.market-sector-row { display:flex; justify-content:space-between; gap:10px; width:100%; padding:9px 4px; background:transparent; border-bottom:1px solid var(--line); color:var(--green); font-size:11px; }
.market-sector-row:hover { background:#e9efdf; }
.market-arbitrage { padding:10px; border-radius:9px; background:#eef3e5; color:var(--green); font-size:11px; }
.market-review { flex-basis:100%; margin:0; color:var(--muted); }
.market-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:16px; }
.market-actions label { display:flex; align-items:center; gap:8px; min-width:0; font-size:11px; }
.market-actions input { width:100%; min-width:0; min-height:36px; padding:7px 9px; border:1px solid #dce3ce; border-radius:9px; background:var(--cream); color:var(--ink); font:inherit; }
.market-actions label input { flex:1; width:60px; }
.market-actions small { color:var(--muted); }
.market-actions button { min-height:36px; padding:7px 14px; border:1px solid #cdd9bf; border-radius:9px; background:#e9efdf; color:var(--green); font-size:11px; }
.market-actions button:hover { background:#dce7cd; }
.market-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.market-chip { padding:6px 9px; border:1px solid var(--line); border-radius:8px; background:transparent; color:#7c8d70; font-size:10px; }
.market-chip.active { border-color:#aebe99; background:#e7eedc; color:var(--green); }
.market-list { max-height:32vh; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#bbc8aa transparent; }
.market-quotes-list { max-height:none; overflow:visible; }
.market-row { display:grid; grid-template-columns:minmax(0,1fr) 72px 66px 50px; align-items:center; gap:8px; width:100%; padding:11px 9px; border-bottom:1px solid var(--line); background:transparent; text-align:left; font-size:11px; }
.market-row:hover,.market-row.active { background:#edf2e5; }
.market-code { color:var(--muted); font-size:10px; }
.market-name small { display:block; color:var(--muted); font-size:9px; }
.market-price,.market-change { text-align:right; font-variant-numeric:tabular-nums; }
.market-held { grid-column:1 / -1; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.market-held:empty { display:none; }
.market-details-button { min-height:32px; padding:5px 6px; border:1px solid #ccd9bd; border-radius:8px; background:#eef3e5; color:var(--green); font-size:10px; }
.market-details-button:hover,.market-back:hover { background:#dfe9d2; }
.market-detail-nav { margin-bottom:12px; }
.market-position { margin:16px 0; padding:14px; border:1px solid var(--line); border-radius:10px; background:#eef3e5; }
.market-position h4 { margin:0 0 12px; font-size:12px; color:var(--green); }
.market-position .market-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:0; }
.market-position .market-grid>div { min-width:0; }
.market-position .market-grid b { overflow-wrap:anywhere; }
.market-position .market-position-note { margin:10px 0 0; font-size:10px; line-height:1.6; color:var(--muted); }
.market-back { min-height:34px; padding:7px 11px; border:1px solid var(--line); border-radius:9px; background:#e9eedf; color:var(--green); font-size:11px; }
.market-banner { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 14px; margin-bottom:14px; border:1px solid var(--line); border-radius:11px; background:#eef3e5; }
.market-banner small { font-size:10px; }
.market-log { display:flex; flex-wrap:wrap; gap:6px 12px; padding:11px 4px; border-bottom:1px solid var(--line); font-size:10px; }
@media(max-width:760px) { #market-dialog { padding:23px; } }
@media(max-width:400px) { #market-dialog { padding:20px 14px; } .market-card { padding:12px; } .market-grid { gap:7px; } .market-grid b { font-size:13px; } .market-row { grid-template-columns:minmax(0,1fr) 48px 50px 44px; gap:5px; padding:10px 4px; } }
.save-hint { display:flex; align-items:center; gap:6px; font-size:8px; color:#9ba68e; padding-bottom:5px; }
.save-hint i { width:4px; height:4px; background:#91aa74; border-radius:50%; }
.save-error { color:#b56145!important; }
#toast { position:fixed; inset:auto; margin:0; border:0; top:calc(66px + var(--safe-top)); left:50%; transform:translate(-50%,-15px); opacity:0; background:#344f3bf0; color:#f8f8eb; padding:11px 20px; border-radius:30px; font-size:12px; pointer-events:none; transition:.25s; z-index:20; box-shadow:0 5px 25px #19361c20; max-width:90vw; text-align:center; }
#toast.visible { opacity:1; transform:translate(-50%,0); }
.primary-button { background:var(--green); color:#fff; border:1px solid var(--green); border-radius:9px; min-height:39px; padding:9px 14px; display:flex; align-items:center; justify-content:center; gap:15px; font-size:11px; }
.primary-button:hover { background:#547651; }
.primary-button svg { width:16px; height:16px; }
.secondary-button { background:#e6ebdd; border-radius:9px; font-size:11px; }
.eyebrow { font-size:9px; letter-spacing:2.1px; color:#89977b; }
.dialog-close { position:absolute; right:16px; top:16px; }
.dialog-actions { display:flex; gap:10px; margin-top:20px; }
.dialog-actions>button { flex:1; }
.reset-link { background:none; display:block; margin:18px auto 0; font-size:10px; color:#a3aa96; text-decoration:underline; text-underline-offset:3px; }
.pause-leaf { display:block; color:#8aa56b; margin-top:23px; }
.pause-leaf svg { height:55px; width:55px; }
#pause-dialog { text-align:center; }
.help-steps { margin-top:23px; }
.help-steps>div { padding-left:36px; position:relative; margin-top:19px; }
.help-steps>div>span { position:absolute; left:0; top:0; color:#9cae86; font-size:12px; }
.help-steps b { font-size:12px; font-weight:500; }
.help-steps p { font-size:11px; line-height:1.8; color:#8a987e; margin:5px 0; }
.help-keys { font-size:9px!important; line-height:2!important; border-top:1px solid var(--line); padding-top:16px; }
body:has(dialog[open]) .action-menu { visibility:hidden; }
.dialog-actions>button { min-height:39px; }
#loading { position:fixed; inset:0; z-index:100; background:#edf0e7; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:17px; transition:opacity .5s; }
#loading>span { color:#6d8a57; }
#loading svg { width:50px; height:50px; }
#loading b { font-weight:500; font-size:26px; letter-spacing:5px; }
#loading small { font-size:11px; color:#8a987e; }
#loading.dismissed { opacity:0; pointer-events:none; }
#scene canvas { cursor:grab; }
#scene canvas:active { cursor:grabbing; }
dialog { inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); border:1px solid #fff; background:#fbfcf3; color:var(--ink); border-radius:23px; padding:36px; width:420px; max-width:calc(100% - 30px - var(--safe-left) - var(--safe-right)); max-height:calc(100vh - 30px - var(--safe-top) - var(--safe-bottom)); max-height:calc(100dvh - 30px - var(--safe-top) - var(--safe-bottom)); box-shadow:0 20px 100px #1d36232e; }
dialog::backdrop { background:#344e3b60; backdrop-filter:blur(5px); }
dialog h2 { font-weight:500; font-size:25px; letter-spacing:1px; margin:17px 0; }
dialog>p { font-size:12px; color:#8a987e; line-height:1.9; }
dialog>.primary-button { width:100%; margin-top:22px; }
@media(max-width:760px) {
 .topbar { height:calc(54px + var(--safe-top)); padding:var(--safe-top) calc(14px + var(--safe-right)) 0 calc(14px + var(--safe-left)); gap:10px; }
 .brand { gap:7px; }
 .brand-symbol { width:25px; height:27px; border-radius:10px 10px 10px 2px; }
 .brand-symbol svg { width:18px; height:18px; }
 .brand>span:nth-child(2) { font-size:14px; letter-spacing:1px; }
 .brand small { font-size:5px; letter-spacing:1.4px; }
 .season { gap:6px; }
 .season svg { width:17px; height:17px; }
 .season b { font-size:10px; }
 .season small { font-size:8px; }
 .season-tag { display:none; }
 .wallet { padding-left:10px; gap:5px; }
 .wallet svg { width:17px; height:17px; }
 .wallet b { font-size:16px; }
 .wallet small { display:none; }
 .header-actions { position:absolute; top:calc(64px + var(--safe-top)); right:calc(13px + var(--safe-right)); gap:5px; }
 .icon-button { width:30px; height:30px; }
 .view-controls { top:calc(105px + var(--safe-top)); right:calc(13px + var(--safe-right)); gap:6px; }
 .land-navigation { top:calc(249px + var(--safe-top)); right:calc(13px + var(--safe-right)); }
 .action-menu { width:235px; padding:13px; border-radius:14px; }
 .menu-heading h2 { font-size:13px; }
 #menu-description { font-size:10px; margin:8px 0 11px; }
 .menu-action { min-height:40px; font-size:11px; padding:8px; }
 .menu-action small { font-size:8px; }
 .bottom-hud { left:calc(14px + var(--safe-left)); right:calc(14px + var(--safe-right)); bottom:calc(16px + var(--safe-bottom)); gap:10px; justify-content:space-between; }
 .save-hint { display:none; }
 #toast { font-size:10px; top:calc(58px + var(--safe-top)); width:max-content; }
 dialog { padding:26px; }
 dialog h2 { font-size:22px; }
 dialog>p { font-size:11px; }
 .help-steps>div { margin-top:13px; }
 .help-steps p { font-size:10px; }
 .help-keys { font-size:8px!important; }
}
@media(max-height:550px) { .topbar { padding-right:calc(156px + var(--safe-right)); } .bottom-hud { bottom:calc(10px + var(--safe-bottom)); } .header-actions { position:absolute; top:calc(12px + var(--safe-top)); right:calc(14px + var(--safe-right)); } .view-controls { top:calc(66px + var(--safe-top)); right:calc(50px + var(--safe-right)); flex-direction:row; gap:6px; } .land-navigation { top:calc(66px + var(--safe-top)); right:calc(14px + var(--safe-right)); } .action-menu { padding:12px; } .save-hint { display:none; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }
/* 伙伴与农场阶段竖向贴在左侧，竖向空间够，也不再横着占掉底部一条。 */
.hud-group { display:flex; flex-direction:column; gap:6px; align-items:flex-start; pointer-events:none; }
.evolution-pill { color:var(--era-color); }
.evolution-pill svg { width:19px; height:19px; }
#evolution-dialog { width:640px; padding:30px; overflow-y:auto; overscroll-behavior:contain; }
#evolution-stats { padding-bottom:14px; border-bottom:1px solid var(--line); }
#evolution-roadmap { display:grid; gap:12px; }
.era-card { position:relative; padding:17px; border:1px solid #e0e6d6; background:#f1f3e9; border-radius:14px; }
.era-card.current { background:#e8eedb; border-color:#9eaf80; }
.era-heading { display:flex; align-items:center; gap:12px; }
.era-heading>div { flex:1; }
.era-heading h3 { margin:0; font-size:15px; font-weight:600; }
.era-heading small { color:#8b9880; font-size:10px; }
.era-logo { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:11px; background:#fafbf3; color:var(--era-color); }
.era-logo svg { width:24px; height:24px; }
[data-tier="0"] { --era-color:#718a50; }
[data-tier="1"] { --era-color:#a58b50; }
[data-tier="2"] { --era-color:#aa7853; }
[data-tier="3"] { --era-color:#5e9190; }
[data-tier="4"] { --era-color:#737fa4; }
.era-current { font-size:9px; color:#567249; background:#d6e1c4; padding:4px 9px; border-radius:20px; }
.era-card p { font-size:11px; margin:12px 0 8px; color:#6e8260; }
.era-conditions { display:flex; flex-wrap:wrap; gap:5px 12px; }
.era-conditions span { font-size:10px; color:#9a9f8f; }
.era-conditions .met { color:#5b7b4b; }
.era-cost { margin-top:10px; font-size:10px; color:#a28d59; }
.era-card .primary-button { margin-top:12px; width:100%; min-height:40px; }
.primary-button:disabled { opacity:.45; cursor:default; }
@media(max-width:760px) { .worker-pill,.evolution-pill,.market-pill { width:32px; height:32px; border-radius:10px; } #evolution-dialog { padding:23px; } }

#evolution-dialog .dialog-close { position:sticky; top:0; float:right; margin:-10px -10px 0 8px; z-index:2; background:#fbfcf3; box-shadow:0 0 0 6px #fbfcf3; }


/* Browse models and place them directly on the live map. */
.ground-edit-hint{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:#829472;background:#f9fbefcc;padding:7px 10px;border-radius:10px;border:1px solid #dae3ca;font-family:inherit;cursor:pointer;pointer-events:auto}
.ground-edit-hint svg{width:15px;height:15px}.ground-edit-hint[aria-pressed=true]{background:#4f7052;color:#fff4d6;border-color:#4f7052}
#build-hotbar[hidden]{display:none}
#build-hotbar{position:fixed;left:50%;bottom:calc(var(--hotbar-bottom) + var(--safe-bottom));transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:7px;padding:9px 11px;background:linear-gradient(#fdfef8f7,#f6f9ecf2);border:1px solid #e4ebd7;border-radius:18px;box-shadow:0 12px 34px -14px #38512f40,0 2px 6px #38512f14;backdrop-filter:blur(12px);max-width:calc(100vw - 24px - var(--safe-left) - var(--safe-right))}
.build-hotbar-row{display:flex;align-items:stretch;gap:6px;max-width:100%}
#build-slots{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;flex:1;min-width:0}#build-slots::-webkit-scrollbar{display:none}
.build-slot{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:62px;height:62px;border:2px solid #dce5cf;border-radius:12px;background:#fcfdf7;color:#4a634e;font:inherit;cursor:pointer;padding:3px;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}
.build-slot-model{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}
.build-slot:hover:not(:disabled){border-color:#9fb585;background:#f4f8ec;transform:translateY(-1px)}
.build-slot.selected{border-color:#5b8055;background:linear-gradient(#f2f8e6,#e4efd3);box-shadow:inset 0 0 0 1px #5b8055,0 4px 12px -6px #4f705266}
.build-slot:disabled{cursor:default;background:#eff2e7;color:#aab39f}
.build-slot.empty{border-style:dashed;border-color:#d3ddc9;color:#a8b79c;background:#f8faf2}
.build-slot.empty .build-slot-icon{width:20px;height:20px;opacity:.8}
.build-slot.empty .build-slot-icon svg{width:17px;height:17px}
.build-slot.reassign{border-style:dashed;border-color:#c9a14f;background:#fbf4e2}
/* 更换时选中了一半的那一格：实线加高亮，和「待更换」的虚线区分开。 */
.build-slot.linked{border-style:solid;border-color:#b28a3a;background:linear-gradient(#fdf4de,#f7e7c4);box-shadow:inset 0 0 0 1px #b28a3a,0 4px 12px -6px #b28a3a66;color:#7b5d20}
.build-slot-icon{width:24px;height:24px;display:grid;place-items:center;color:#7a9662}.build-slot-icon svg{width:20px;height:20px}
.build-slot-name{font-size:10px;line-height:1.1;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.build-slot-cost{font-size:9px;color:#907c4e;line-height:1}
.build-slot-lock{position:absolute;inset:0;display:grid;place-items:center;background:#5c6b5622;border-radius:9px;color:#7c8a72}.build-slot-lock svg{width:18px;height:18px}
.build-slot-tool{border-color:#dfe6d5;background:#f1f4ea;color:#6b7e5f}
.build-slot-tool:hover:not(:disabled){border-color:#adbe96;background:#eef3e5}
.build-slot-tool[aria-pressed=true]{border-color:#b28a3a;background:#f7ecd2;color:#8a6a2a}
.build-slot-exit{border-color:#e8c3bb;color:#b26a5e;background:#fdf3f0}
.build-slot-exit:hover:not(:disabled){border-color:#d99a90;background:#fae8e3}
/* 常驻说明文字会白白占掉横屏宝贵的高度，改成只在真的需要提醒时浮出的小胶囊。 */
#build-message{position:absolute;left:50%;bottom:calc(100% + 7px);transform:translate(-50%,4px);margin:0;padding:5px 11px;border-radius:999px;border:1px solid #e7edda;background:#fbfcf2f5;box-shadow:0 5px 16px #3f593c26;font-size:11px;line-height:1.3;color:#6b7f60;white-space:nowrap;max-width:min(78vw,420px);overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
#build-message.shown{opacity:1;transform:translate(-50%,0)}
#build-palette[hidden]{display:none}
#build-palette{position:fixed;left:50%;bottom:calc(var(--hotbar-bottom) + var(--hotbar-h) + 14px + var(--safe-bottom));transform:translateX(-50%);z-index:8;width:680px;max-width:calc(100vw - 24px - var(--safe-left) - var(--safe-right));max-height:calc(100dvh - var(--hotbar-bottom) - var(--hotbar-h) - 34px - var(--safe-top) - var(--safe-bottom));display:flex;flex-direction:column;gap:10px;padding:14px;background:#fbfcf2f8;border:1px solid #fff;border-radius:18px;box-shadow:0 14px 55px #3f593c26;backdrop-filter:blur(12px)}
.build-palette-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}.build-palette-heading small{color:#889c76;font-size:11px}.build-palette-heading h2{margin:3px 0 0;font-size:18px}.build-palette-heading .icon-button{width:30px;height:30px;flex-shrink:0}
#build-palette-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;flex:none}#build-palette-tabs button{font:inherit;border:0;border-radius:9px;padding:7px 2px;background:#e9efde;color:#819474;font-size:13px;cursor:pointer}#build-palette-tabs [aria-selected=true]{background:#4f7052;color:#faf7e8}
#build-palette-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow-y:auto;min-height:0;align-content:start;padding:2px}
.build-palette-body{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:10px;min-height:0;flex:1}
.build-palette-detail{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;min-height:0;padding:10px;border:1px solid #e3ead7;border-radius:13px;background:#f5f8eb}
.palette-preview{position:relative;height:132px;border-radius:10px;background:linear-gradient(150deg,#f8f5e6,#e3edda);overflow:hidden}
#build-unit-canvas{width:100%;height:100%;display:block}
.palette-preview-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#93a184}
.palette-detail-text{min-height:0;overflow-y:auto}
.palette-detail-text b{display:block;font-size:14px;font-weight:600;color:#3c5644}
.palette-detail-text p{margin:4px 0 9px;font-size:11px;line-height:1.55;color:#6d7f60}
#palette-detail-stats{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;margin:0;font-size:11px}
#palette-detail-stats dt{color:#8d997e}
#palette-detail-stats dd{margin:0;text-align:right;font-weight:600;color:#3f5a45}
#palette-detail-stats dd.warn{color:#bd6a45}
.palette-pick{font:inherit;border:0;border-radius:10px;padding:9px 10px;background:#4f7052;color:#faf7e8;font-size:12px;font-weight:600;cursor:pointer}
.palette-pick:hover:not(:disabled){background:#44644a}
.palette-pick:disabled{background:#dfe5d4;color:#98a48b;cursor:default}
.palette-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 9px;border:1px solid #dce5cf;border-radius:11px;background:#fcfdf7;color:#4a634e;font:inherit;text-align:left;cursor:pointer;min-width:0}
.palette-tile-model{width:100%;height:54px;object-fit:contain;pointer-events:none;display:block;background:linear-gradient(140deg,#f8f5e6,#e3edda);border-radius:8px}
.palette-tile:hover{border-color:#9fb585;background:#f4f8ec}
.palette-tile.selected{border-color:#4f7052;background:#eef5e5;box-shadow:inset 0 0 0 1px #4f7052}
/* 更换时已被选中、等着点快捷格的物件。 */
.palette-tile.linked{border-color:#b28a3a;background:linear-gradient(#fdf4de,#f7e7c4);box-shadow:inset 0 0 0 1px #b28a3a}
.palette-tile.linked b{color:#7b5d20}
.palette-tile b{font-size:12px;font-weight:600;line-height:1.25}
.palette-tile small{font-size:9px;color:#8d997e}
.palette-tile.locked{background:#eff2e7}
.palette-tile.locked b{color:#8d997e}
.palette-tile-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#5c6b5622;border-radius:11px;color:#7c8a72;pointer-events:none}.palette-tile-lock svg{width:18px;height:18px}
@media(max-width:640px){/* 窄屏改成「列表在上、详情在下」：列表那一行必须是弹性的，否则它按内容撑到全高，把详情顶到面板外面去。 */.build-palette-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}.build-palette-detail{grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto;align-items:start}.palette-preview{width:104px;height:104px;grid-row:span 2}.palette-detail-text{max-height:104px}.palette-pick{grid-column:2}.palette-tile-model{height:44px}}
@media(max-width:400px){.build-palette-detail{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}.palette-preview{width:auto;height:96px;grid-row:auto}}
@media(max-width:549px){#build-hotbar{gap:6px;padding:7px 9px;border-radius:15px}.build-slot{width:54px;height:54px;border-radius:10px}.build-slot-name{font-size:9px;max-width:50px}.build-slot-cost{font-size:8px}#build-message{font-size:10px}#build-palette{width:calc(100vw - 24px - var(--safe-left) - var(--safe-right));padding:12px;border-radius:15px}#build-palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.palette-tile{padding:9px 7px}.palette-tile b{font-size:12px}#build-palette-tabs button{padding:6px 2px;font-size:12px}}
@media(max-height:550px){#build-hotbar{gap:4px;padding:5px 8px;border-radius:13px}.build-slot{width:48px;height:48px;border-radius:9px}.build-slot-icon{width:18px;height:18px}.build-slot-icon svg{width:16px;height:16px}.build-slot-name{font-size:8px;max-width:44px}.build-slot-cost{font-size:7px}#build-message{font-size:9px}#build-palette{padding:8px;gap:6px;border-radius:12px}.palette-tile{padding:5px 6px}.palette-tile b{font-size:11px}.palette-tile small{font-size:8px}#build-palette-tabs button{padding:3px 2px;font-size:11px}.palette-preview{height:84px}.palette-detail-text p{margin:3px 0 6px}}
/* 横屏：屏幕很矮，物件面板收窄成「列表 + 紧凑详情」，不再顶到天花板、也不用滚动。 */
@media(max-height:560px) and (min-aspect-ratio:4/3){
 #build-hotbar{gap:0;padding:6px 9px;border-radius:14px}
 #build-palette{width:min(536px,calc(100vw - 240px - var(--safe-left) - var(--safe-right)));padding:7px 10px;gap:5px;border-radius:14px}
 /* 竖排的两个圆钮在矮屏上收一点，给地图留出视野。 */
 .worker-pill,.evolution-pill,.market-pill{width:30px;height:30px;border-radius:9px}
 .hud-group{gap:5px}
 .build-palette-heading small{display:none}
 .build-palette-heading h2{font-size:15px;margin:0}
 .build-palette-heading .icon-button{width:26px;height:26px}
 #build-palette-tabs button{padding:3px 2px;font-size:11px}
 .build-palette-body{grid-template-columns:minmax(0,1fr) 170px;grid-template-rows:minmax(0,1fr);gap:8px}
 #build-palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .palette-tile{padding:4px 5px;gap:1px}
 .palette-tile-model{height:32px}
 .palette-tile b{font-size:10px}
 .palette-tile small{font-size:8px}
 /* 横屏高度紧张：列表格子本身已有缩略图，详情里的大预览让位给占地与造价。
    预览 display:none 之后详情只剩「文字 + 按钮」两项，行模板也得跟着改成两行，
    否则按钮会掉进那个 1fr 里被拉满整列。 */
 .build-palette-detail{padding:7px;gap:5px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
 .palette-preview{display:none}
 .palette-detail-text b{font-size:12px}
 .palette-detail-text p{display:none}
 .palette-pick{grid-column:1}
 #palette-detail-stats{font-size:9px;line-height:1.3;gap:2px 6px}
 /* 分类已经由上方标签页表明，横屏省掉「类别」这一行，但要连它的值一起去掉，否则会错行。 */
 #palette-detail-stats>dt:first-child,#palette-detail-stats>dt:first-child+dd{display:none}
 .palette-pick{padding:5px 8px;font-size:11px}
}
/* 横屏且偏窄（常见的 640–700 逻辑像素）：底部这排已经抬到快捷栏上方，快捷栏可以用满宽度，格子放大一点。 */
@media(max-height:560px) and (max-width:700px){
 .build-slot{width:46px;height:48px}
 .build-slot-name,.build-slot-cost{display:none}
 .build-slot-icon{width:16px;height:16px}
 .build-slot-icon svg{width:15px;height:15px}
 .build-palette-body{grid-template-columns:minmax(0,1fr) 148px}
 #build-palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .palette-tile b{font-size:9.5px}
 /* 更窄更矮时详情只留占地与造价；锁定时「选用」按钮本身会写明所需阶段。 */
 #palette-detail-stats>dt:nth-child(7),#palette-detail-stats>dt:nth-child(7)+dd{display:none}
}
/* 横屏够宽（平板、大手机横放）：贴底后两侧还有余量，把格子放大，快捷栏更饱满好点。 */
@media(max-height:560px) and (min-aspect-ratio:4/3) and (min-width:720px){
 .build-slot{width:54px;height:56px;border-radius:12px}
 .build-slot-icon{width:22px;height:22px}
 .build-slot-icon svg{width:19px;height:19px}
 .build-slot-name{font-size:9.5px;max-width:50px}
}
/* ---------- 竖屏手机：面板改成「列表在上、详情在下」，一行三格，名称最多两行 ---------- */
/* 竖屏纵向空间多、横向窄，和横屏是相反的问题：不需要压高度，需要的是别让 4 列把名字挤换行，
   也别让列表按内容撑高把详情顶出面板。横屏的规则都带 min-aspect-ratio:4/3，不会和这里打架。 */
@media(orientation:portrait) and (max-width:760px){
 #build-hotbar{padding:7px 9px;border-radius:15px;gap:6px}
 #build-palette{width:calc(100vw - 20px - var(--safe-left) - var(--safe-right));max-height:calc(100dvh - var(--hotbar-bottom) - var(--hotbar-h) - 26px - var(--safe-top) - var(--safe-bottom));padding:12px;gap:9px;border-radius:16px}
 .build-palette-heading h2{font-size:16px}
 .build-palette-heading small{font-size:10px}
 #build-palette-tabs button{padding:7px 2px;font-size:12.5px}
 .build-palette-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:9px}
 #build-palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:1px;overscroll-behavior:contain}
 .palette-tile{padding:7px 7px 6px;gap:3px;border-radius:10px}
 .palette-tile-model{height:46px}
 .palette-tile b{font-size:11.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
 .palette-tile small{font-size:8.5px}
 .build-palette-detail{grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto;align-items:start;padding:9px;gap:8px}
 .palette-preview{width:88px;height:88px;grid-row:span 2}
 .palette-detail-text{max-height:none}
 .palette-detail-text b{font-size:13px}
 .palette-detail-text p{font-size:10.5px;margin:3px 0 7px}
 #palette-detail-stats{font-size:10.5px;gap:3px 7px}
 .palette-pick{grid-column:2;min-height:34px;padding:7px 10px;font-size:11.5px}
}
/* 超窄竖屏（老机型）：格子本身已有缩略图，详情就不必再占一块预览，腾出的高度全留给列表。 */
@media(orientation:portrait) and (max-width:360px){
 .build-palette-detail{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
 .palette-preview{display:none}
 .palette-pick{grid-column:1}
 #build-palette-grid{gap:6px}
 .palette-tile{padding:6px 6px 5px}
 .palette-tile-model{height:40px}
 .palette-tile b{font-size:10.5px}
}

/* Receipt review stays inside the farm so the device credential follows this save. */
.support-heading{padding-bottom:12px}.support-heading .eyebrow{margin-bottom:6px}
.support-content p{margin:0;line-height:1.65;overflow-wrap:anywhere}.support-intro{margin:0 0 18px!important;font-size:13px;color:#63745d}
.support-layout{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center}
.support-payment{margin:0;text-align:center}.support-payment img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:12px}.support-payment p{margin-top:8px;font-size:12px}.support-payment small{display:block;color:var(--muted);font-size:10px}
.support-content form{display:grid;gap:10px;min-width:0;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fffdf8}.support-content label{font-size:14px;font-weight:600}
.support-content input[type=file]{box-sizing:border-box;width:100%;min-width:0;padding:6px;border:1px solid #d5dec9;border-radius:9px;background:#fff;color:#63745d;font-family:inherit;font-size:11px;line-height:1.6}
.support-content input[type=file]::file-selector-button{min-height:34px;margin-right:8px;padding:6px 10px;border:0;border-radius:6px;background:#e9eedf;color:var(--green);font:inherit;cursor:pointer}
.support-proof-preview{display:block;max-width:100%;width:100%;height:100px;object-fit:contain;border-radius:8px;background:#edf1e7}
.support-content button{cursor:pointer;min-height:44px}.support-content button:disabled{opacity:.5;cursor:default}.support-content .primary-button{width:100%;margin:0}
.support-note{font-size:11px;color:#63745d}.support-history{margin-top:18px;border-top:1px solid #cbd3c1;padding-top:12px}.support-review-heading{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between}.support-review-heading h3{margin:0;font-size:14px;font-weight:600}.support-review-heading button{padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:#e9eedf;font-size:11px}
.support-history #support-status{margin-top:6px;font-size:12px}.support-history ul:empty{display:none}.support-history ul{margin:8px 0;padding-left:18px}.support-history li{font-size:12px;margin:6px 0;overflow-wrap:anywhere}.support-identity{margin-top:8px;font-size:10px;color:var(--muted)}.support-identity summary{cursor:pointer;padding:5px 0}.support-identity code{display:block;overflow-wrap:anywhere;font-size:10px}.support-footer{margin-top:12px!important}
@media(max-width:650px){.support-layout{grid-template-columns:1fr;gap:12px}.support-payment{width:144px;max-width:100%;justify-self:center}.support-payment p{margin-top:4px}.support-content form{padding:14px}.support-intro{margin-bottom:12px!important}.support-heading .eyebrow{font-size:8px;letter-spacing:1.3px}}
@media(orientation:landscape) and (max-height:500px){.support-heading{padding-bottom:6px}.support-intro{margin-bottom:10px!important;font-size:12px}.support-layout{grid-template-columns:clamp(112px,30dvh,150px) minmax(0,1fr);gap:16px;align-items:start}.support-payment{width:100%}.support-content form{padding:12px;gap:8px}.support-history{margin-top:12px}.support-proof-preview{height:72px}}

#leaderboard-dialog{width:800px;height: min(880px,90dvh);max-width:calc(100vw - 24px - var(--safe-left) - var(--safe-right));max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));padding:0;overflow:hidden;color:#433b2b}
#leaderboard-dialog[open]{display:flex;flex-direction:column}
.ranking-heading{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 64px 24px 28px;flex-shrink:0;background:radial-gradient(ellipse at 85% 0,#edcc7970,transparent 65%),linear-gradient(115deg,#fbf4df,#f4e8c5);border-bottom:1px solid #c9b789}
.ranking-eyebrow{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:750;letter-spacing:2px;color:#8b733b}.ranking-eyebrow>span{width:6px;height:6px;background:#aa8638;transform:rotate(45deg)}
.ranking-heading h2{font-size:30px;letter-spacing:2px;margin:10px 0 6px;color:#3f4935}.ranking-heading p{margin:0;font-size:12px;color:#8a7955;letter-spacing:1px}
.ranking-my-position{display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:4px 10px;border:1px solid #c8b47e;border-radius:6px;background:#fff6d988;font-size:10px;color:#8a7955}.ranking-my-position b{font-size:12px;color:#4e6444;font-variant-numeric:tabular-nums}.ranking-heading>div:first-child{min-width:0}.ranking-eyebrow{letter-spacing:1.4px}
.ranking-crest{width:90px;height:90px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:#ad8531;border:1px solid #b9984c66;border-radius:50%;outline:1px solid #b9984c33;outline-offset:5px;background:#fff9e333;transform:rotate(-8deg)}.ranking-crest svg{width:42px;height:42px;stroke-width:1.2}.ranking-crest span{font-size:6px;letter-spacing:1.5px}.ranking-close{position:absolute;top:18px;right:18px;width:28px;height:28px;font-size:18px}
.ranking-goal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:14px 28px 12px;background:#f0eddc;border-bottom:1px solid #ded4b9;flex-shrink:0}.ranking-goal>div:first-child{flex:1;min-width:0}.ranking-goal b{display:block;font-size:12px;color:#526447}.ranking-goal div>span{display:block;font-size:10px;color:#8c8167;margin-top:4px}.ranking-goal-amount{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:#586343}.ranking-progress{height:3px;width:100%;background:#dbd6bd;border-radius:4px;overflow:hidden}.ranking-progress i{display:block;height:100%;background:linear-gradient(90deg,#9fae7f,#b68c34);border-radius:4px}
.ranking-tabs{display:flex;gap:4px;padding:4px;background:#ede6d1;border:1px solid #d9ccaa;border-radius:10px;margin:18px 28px 0;flex-shrink:0}.ranking-tabs button{flex:1;min-height:36px;padding:7px 10px;font-size:12px;font-weight:700;border-radius:7px;background:transparent;color:#8a7b59;transition:background .15s}.ranking-tabs button[aria-selected="true"]{background:#435f46;color:#fff5d8;box-shadow:0 2px 4px #33442520}
.ranking-caption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:10px 28px 12px;font-size:10px;color:#8d8064;flex-shrink:0}.ranking-caption p{margin:0}.ranking-caption>span{white-space:nowrap;color:#9c8d6a}
.ranking-scroll{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:0 28px 16px;scrollbar-width:thin;scrollbar-color:#c7b88f transparent}
#ranking-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:0}
.ranking-card{grid-column:1/-1;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:4px 12px;align-items:center;min-width:0;padding:14px 12px;border:1px solid #ded3b9;border-radius:9px;background:#fffaf0}
.ranking-rank{grid-column:1;grid-row:1/4;align-self:center;text-align:center;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:#aa9b7a}.ranking-rank svg{display:none}.ranking-identity{grid-column:2;min-width:0}.ranking-identity strong{display:block;min-width:0;overflow-wrap:anywhere;font-size:13px;font-weight:750;line-height:1.4}.ranking-honor{display:none;font-size:9px;letter-spacing:1px}
.ranking-wealth{grid-column:3;grid-row:1/3;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:#5c633f}.ranking-wealth>small{display:block;font-size:9px;color:#9d8b5b;margin-bottom:1px}.ranking-wealth>b{font-size:24px;line-height:1.15;letter-spacing:-.6px}.ranking-wealth>span{font-size:11px;font-weight:600;margin-left:4px}
.ranking-details{grid-column:2;display:flex;flex-wrap:wrap;gap:2px 12px;font-size:10px;color:#8d8268}.ranking-details>span{display:flex;gap:5px;align-items:baseline}.ranking-details b{font-size:10px;font-weight:600;color:#75674b}.ranking-details small{font-size:9px}.ranking-updated{grid-column:2/-1;font-size:9px;color:#ab9f83}
.ranking-top{grid-column:span 2;display:flex;position:relative;flex-direction:column;align-items:center;gap:7px;padding:18px 10px 12px;text-align:center;background:linear-gradient(145deg,#fcf8e9,#efe6cd);border-color:#d5c49d;overflow:hidden}.ranking-top .ranking-rank{display:flex;align-items:center;gap:4px;font-size:11px;color:#9a8b6b}.ranking-top .ranking-rank svg{display:block;width:22px;height:22px;stroke-width:1.4}.ranking-top .ranking-honor{display:block;color:#9b8552;margin-bottom:5px}.ranking-top .ranking-identity strong{font-size:14px}.ranking-top .ranking-wealth{text-align:center;margin:4px 0}.ranking-top .ranking-wealth>b{font-size:30px}.ranking-top .ranking-details{justify-content:center;padding-top:8px;border-top:1px solid #b29b6230;width:100%;gap:4px 10px}.ranking-top .ranking-details>span{flex-direction:column;align-items:center;gap:0}.ranking-top .ranking-updated{font-size:8px;color:#9c9074}
.ranking-top-1{background:radial-gradient(ellipse at 50% 0,#647955aa,transparent 70%),linear-gradient(150deg,#354f3e,#243c31);border-color:#b49b5b;box-shadow:inset 0 0 0 3px #dec68b18;color:#fff1c9}.ranking-top-1:before{content:'';position:absolute;top:-50px;right:-60px;width:180px;height:180px;border:1px solid #ddbf7320;border-radius:50%;pointer-events:none}.ranking-top-1 .ranking-rank,.ranking-top-1 .ranking-honor{color:#e4c778}.ranking-top-1 .ranking-rank svg{width:28px;height:28px}.ranking-top-1 .ranking-wealth{color:#f0d28c}.ranking-top-1 .ranking-wealth>small,.ranking-top-1 .ranking-updated{color:#a8b69b}.ranking-top-1 .ranking-details{border-top-color:#e4c77830;color:#a8b69b}.ranking-top-1 .ranking-details b{color:#e9dfb9}
.ranking-top-2 .ranking-rank{color:#8f9993}.ranking-top-3 .ranking-rank{color:#af8055}
.ranking-identity strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ranking-origin{display:flex;flex-wrap:wrap;align-items:center;gap:3px 5px;margin-top:3px;min-height:24px;font-size:9px;color:#8b8065}.ranking-planet{display:inline-grid;place-items:center;width:28px;height:28px;flex-shrink:0;border:1px solid #bdab7d40;border-radius:50%;padding:0;background:#fff7e833}.ranking-planet .planet-icon{width:25px;height:25px}.ranking-top .ranking-origin{justify-content:center}.ranking-top-1 .ranking-origin{color:#d7d8bb}.profile-planets{border:0;border-top:1px solid var(--line);padding:16px 0 0;margin:18px 0 0}.profile-planets legend{padding:0 8px 0 0;font-size:12px;color:#74684e}.planet-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.planet-options button{display:grid;place-items:center;min-width:0;min-height:44px;padding:3px;border:1px solid #d5c9ab;border-radius:10px;background:#fff9ec;transition:background .15s,border-color .15s}.planet-options button:hover{background:#f3e7c9}.planet-options button[aria-pressed="true"]{background:#e0e8cc;border:2px solid #658151;box-shadow:0 0 0 2px #65815115}.planet-options button:disabled{opacity:.6}.planet-options .planet-icon{width:36px;height:36px}.planet-icon{stroke-linejoin:round;stroke-linecap:round}#profile-planet-name{font-size:12px;color:#63764e;margin:10px 0 0;min-height:18px}
@media(max-width:580px){.planet-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.planet-options .planet-icon{width:32px;height:32px}.ranking-top-1 .ranking-origin{justify-content:flex-start}}
.planet-options button{position:relative}.planet-options button[aria-pressed="true"]:after{content:attr(title);position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);z-index:1;padding:0 4px;white-space:nowrap;font-size:9px;line-height:13px;color:#4b6940;background:#edf3df;border:1px solid #94a77b;border-radius:5px}
#ranking-status{text-align:center;font-size:11px;color:#948463;padding:12px 4px;margin:0}#ranking-more{display:block;margin:0 auto;padding:9px 24px;border:1px solid #d4c39a;border-radius:20px;background:#f3ead3;color:#75623a;font-size:11px}
.profile-edit{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.profile-edit input{min-width:0;flex:1;width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;background:#fff}.profile-edit button{flex-shrink:0}#profile-current{overflow-wrap:anywhere}
@media(max-width:580px){#leaderboard-dialog{height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom))}.ranking-heading{padding:22px 48px 20px 18px;gap:8px}.ranking-heading h2{font-size:25px;letter-spacing:1px}.ranking-heading p{font-size:10px;letter-spacing:.2px}.ranking-eyebrow{font-size:8px;letter-spacing:1.5px}.ranking-crest{width:54px;height:54px;outline-offset:3px}.ranking-crest svg{width:27px;height:27px}.ranking-crest span{display:none}.ranking-close{top:12px;right:12px}.ranking-goal{padding:12px 18px 10px;gap:7px}.ranking-goal b{font-size:11px}.ranking-goal div>span{font-size:9px}.ranking-goal-amount{font-size:12px}.ranking-tabs{margin:12px 16px 0}.ranking-caption{margin:8px 18px 10px;flex-wrap:wrap;gap:2px;font-size:9px}.ranking-caption>span{font-size:8px}.ranking-scroll{padding:0 16px 12px}#ranking-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ranking-top{grid-column:span 1;padding:12px 8px 10px;gap:5px}.ranking-top-1{grid-column:1/-1;display:grid;grid-template-columns:40px minmax(0,1fr) auto;padding:18px 14px;gap:8px 10px;text-align:left}.ranking-top-1 .ranking-rank{grid-column:1;grid-row:1/3;flex-direction:column}.ranking-top-1 .ranking-identity{grid-column:2}.ranking-top-1 .ranking-wealth{grid-column:3;grid-row:1/3;margin:0;text-align:right}.ranking-top-1 .ranking-details{grid-column:2/-1;justify-content:flex-start;padding-top:8px}.ranking-top-1 .ranking-details>span{flex-direction:row;gap:6px}.ranking-top-1 .ranking-updated{grid-column:2/-1}.ranking-top .ranking-wealth>b{font-size:28px}.ranking-top-1 .ranking-wealth>b{font-size:34px}.ranking-card:not(.ranking-top){grid-template-columns:24px minmax(0,1fr) auto;padding:12px 8px;gap:4px 8px}.ranking-card:not(.ranking-top) .ranking-wealth>b{font-size:21px}.ranking-identity strong{font-size:12px}.ranking-details{gap:2px 8px}.ranking-top .ranking-identity strong{font-size:12px}}
@media(max-height:550px){.ranking-heading{padding-top:12px;padding-bottom:10px}.ranking-heading h2{font-size:21px;margin:5px 0}.ranking-heading p,.ranking-crest,.ranking-progress{display:none}.ranking-goal{padding-top:7px;padding-bottom:7px}.ranking-tabs{margin-top:8px}.ranking-caption{margin-top:6px;margin-bottom:6px}}
#settings-dialog{width:860px;height:580px;max-width:calc(100vw - 24px - var(--safe-left) - var(--safe-right));max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));padding:0;overflow:hidden}
#settings-dialog[open]{display:flex;flex-direction:column}
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
.settings-heading h2{margin:3px 0 0;font-size:22px}.settings-heading .icon-button{width:44px;height:44px}
.settings-layout{display:grid;grid-template-columns:148px minmax(0,1fr);min-height:0;flex:1}
.settings-tabs{display:flex;flex-direction:column;gap:8px;padding:20px 12px;border-right:1px solid var(--line);background:#eef2e6}
.settings-tabs button{min-height:46px;padding:10px 16px;border:1px solid transparent;border-radius:10px;background:transparent;text-align:left;font-size:14px}
.settings-tabs button:hover{background:#e2e9d8}.settings-tabs button[aria-selected=true]{color:#fff9e9;background:var(--green);border-color:var(--green)}
.settings-tabs button:focus-visible{outline-offset:-3px}
.settings-content{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:26px;scrollbar-width:thin}
.settings-content [role=tabpanel]{min-width:0;outline-offset:-2px}
.settings-content h3{font-size:22px;font-weight:500;margin:0 0 8px;line-height:1.35}.settings-content h4{font-size:14px;margin:0 0 8px;font-weight:600}
.settings-description{color:#718269;margin:0 0 24px}.settings-card{padding:18px;border:1px solid var(--line);border-radius:14px;background:#fffdf8;margin-top:16px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.settings-row b{font-weight:500;color:#718269}
#settings-language{max-width:100%;min-height:44px;padding:8px 32px 8px 12px;border:1px solid #cbd6bf;border-radius:9px;color:var(--ink);background:#f4f7ee;font:inherit;font-size:16px}
.settings-hint{font-size:12px;color:#718269;line-height:1.8}.settings-card .settings-hint{margin:12px 0 0}
#settings-about>p{line-height:1.9;margin:20px 0}#settings-about .settings-card p{line-height:1.9;margin:0;color:#718269}
.settings-about-mark{display:grid;place-items:center;width:60px;height:60px;border-radius:20px;background:#e6eddb;color:#6d8a57;margin-bottom:18px}.settings-about-mark svg{width:34px;height:34px}
@media(max-width:580px){.settings-layout{grid-template-columns:88px minmax(0,1fr)}.settings-tabs{padding:14px 8px;gap:6px}.settings-tabs button{padding:10px 8px;font-size:13px}.settings-heading{padding:14px 16px}.settings-heading h2{font-size:20px}.settings-content{padding:20px 16px}.settings-card{padding:14px}.settings-row{gap:10px}.settings-content h3{font-size:20px}.settings-description{margin-bottom:18px}}
@media(orientation:landscape) and (max-height:500px){.settings-heading{padding:10px 18px}.settings-heading h2{font-size:18px}.settings-heading .eyebrow{font-size:8px}.settings-heading .icon-button{width:40px;height:40px}.settings-content{padding:18px 22px}.settings-tabs{padding-top:14px}.settings-layout{grid-template-columns:120px minmax(0,1fr)}}
/* 平板与手机的横屏：竖向空间本来就紧，再把「标题 / 目标 / Tab / 说明」一层层堆上去，
   名次卡片就只剩一条缝。改成左侧一栏（Tab 竖排 + 目标进度）、右侧内容，列表拿回整块高度。
   竖屏维持原来的上下结构，那里高度够用。.ranking-side 只是给横屏分栏用的外壳，
   竖屏用 display:contents 让它等于不存在，子元素照旧排在弹窗里。 */
.ranking-side{display:contents}
@media (orientation:landscape) and (pointer:coarse) and (min-width:640px), (orientation:landscape) and (max-height:560px) and (min-width:700px){
  #leaderboard-dialog{height:calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom))}
  #leaderboard-dialog[open]{display:grid;grid-template-columns:minmax(132px,20%) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"head head" "side caption" "side body"}
  /* 标题栏压成一条：小标签、标题、我的排名排在同一行，副标题和徽章在横屏里直接不显示。
     原来那一坨占了 180px，把名次挤到屏幕外面去了。 */
  .ranking-heading{grid-area:head;padding:9px 54px 9px 22px;gap:10px;align-items:center}
  .ranking-heading>div:first-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
  .ranking-eyebrow{display:none}
  .ranking-heading h2{font-size:19px;letter-spacing:.6px;margin:0}
  .ranking-heading p{display:none}
  .ranking-my-position{margin:0 0 0 auto;flex-shrink:0}
  .ranking-crest{display:none}
  .ranking-close{top:50%;right:14px;transform:translateY(-50%)}
  .ranking-side{grid-area:side;display:flex;flex-direction:column;align-self:start;gap:10px;margin:14px 14px 0 22px}
  /* Tab 竖着排：左栏比一整条横条省得多，也不会把宽度锁死在两列。 */
  .ranking-tabs{order:1;flex-direction:column;gap:6px;margin:0}
  .ranking-tabs button{flex:0 0 auto;width:100%}
  /* 目标进度跟排行列表不是一回事，挪到左栏底部，右栏整块留给名次。 */
  .ranking-goal{order:2;flex-direction:column;align-items:flex-start;gap:3px;margin:0;padding:10px 12px;border:1px solid #ded4b9;border-radius:10px}
  .ranking-goal-amount{font-size:13px}
  .ranking-caption{grid-area:caption;margin:7px 22px 9px}
  .ranking-scroll{grid-area:body;padding:0 22px 12px}
  /* 横屏高度本来就少，前三名的卡片按竖屏那套尺寸会占满整屏，压一档，让名次直接露出来。 */
  .ranking-top{padding:10px 8px 9px;gap:4px}
  .ranking-top .ranking-honor{font-size:8px;margin-bottom:2px}
  .ranking-top .ranking-rank svg{width:17px;height:17px}
  .ranking-top .ranking-origin{min-height:18px;margin-top:0}
  .ranking-top .ranking-wealth{margin:1px 0}.ranking-top .ranking-wealth>b{font-size:23px}
  .ranking-top .ranking-details{padding-top:5px}
  /* 前三名的快照时间在横屏里最不重要，省下的高度留给名次本身。 */
  .ranking-top .ranking-updated{display:none}
}