:root{--bg-deep: #171310;--bg-panel: #241c15;--paper: #e9dcc0;--paper-dim: #d8c79e;--red: #8c1f1f;--red-bright: #b3372f;--gold: #c9a24b;--gold-bright: #e6c878;--divider: #5a4630;--topbar-h: 44px;--bottombar-h: 54px;--panel-w: 264px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:Songti SC,STSong,SimSun,serif;background:var(--bg-deep);color:var(--paper);overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}.topbar{height:var(--topbar-h);flex:0 0 var(--topbar-h);display:flex;align-items:center;gap:16px;padding:0 12px;background:linear-gradient(#2b2119,var(--bg-panel));border-bottom:1px solid var(--gold)}.topbar-title{font-size:19px;font-weight:700;color:var(--gold-bright);letter-spacing:4px;white-space:nowrap}.topbar-resources{display:flex;gap:6px;flex:1;justify-content:center;min-width:0;overflow:hidden}.resource{display:flex;align-items:center;gap:5px;padding:3px 9px;border:1px solid var(--divider);border-radius:3px;background:#00000059;white-space:nowrap;font-size:13px}.resource-icon{width:18px;height:18px;border-radius:50%;border:1px solid var(--gold);color:var(--gold-bright);display:inline-flex;align-items:center;justify-content:center;font-size:11px}.resource-label{color:var(--paper-dim)}.resource-value{color:var(--paper);min-width:22px;text-align:right;font-variant-numeric:tabular-nums}.map-area{position:relative;flex:1;min-height:0;background:radial-gradient(ellipse at 50% 35%,rgba(201,162,75,.1),transparent 60%),linear-gradient(160deg,#3a2f22,#2a2119 45%,#1d1712);overflow:hidden}.map-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}.map-title{font-size:44px;letter-spacing:14px;color:#e9dcc0d9;font-weight:700}.map-note{font-size:14px;color:#d8c79ea6;letter-spacing:2px}.compass-btn{position:absolute;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;font:inherit;font-size:14px;cursor:pointer;color:var(--gold-bright);background:#171310d9;border:1px solid var(--gold)}.compass-btn:hover{background:#241c15f2}.panel{position:absolute;top:10px;bottom:10px;width:var(--panel-w);background:#241c15f7;border:1px solid var(--gold);border-radius:4px;padding:10px 12px;overflow-y:auto;transition:transform .22s ease,opacity .22s ease;opacity:0;pointer-events:none;z-index:5}.panel-left{left:10px;transform:translate(-16px)}.panel-right{right:10px;transform:translate(16px)}.panel.open{opacity:1;pointer-events:auto;transform:translate(0)}.panel-head{display:flex;align-items:center;justify-content:space-between;background:var(--red);border:1px solid var(--gold);border-radius:3px;padding:5px 10px;margin-bottom:10px}.panel-title{font-size:16px;letter-spacing:3px;color:var(--paper)}.panel-close{font:inherit;font-size:16px;line-height:1;cursor:pointer;color:var(--paper);background:transparent;border:none;padding:2px 4px}.city-thumb{height:92px;border:1px solid var(--divider);border-radius:3px;display:flex;align-items:center;justify-content:center;color:var(--paper-dim);font-size:13px;background:linear-gradient(150deg,#4a3826,#2b2119);margin-bottom:10px}.field-list{display:flex;flex-direction:column}.field-row{display:flex;justify-content:space-between;align-items:center;padding:7px 2px;border-bottom:1px solid rgba(90,70,48,.55);font-size:14px}.field-name{color:var(--paper-dim)}.field-value{color:var(--paper)}.section-title{font-size:13px;letter-spacing:2px;color:var(--gold-bright);border-bottom:1px solid var(--divider);padding:8px 0 5px;margin-bottom:8px}.section-title:first-child{padding-top:0}.panel-body{display:flex;flex-direction:column}.list-row{display:flex;align-items:center;gap:10px;border:1px solid rgba(90,70,48,.7);border-radius:3px;background:#00000047;padding:7px 9px;margin-bottom:8px}.row-icon{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1px solid var(--gold);color:var(--gold-bright);display:flex;align-items:center;justify-content:center;font-size:16px;background:radial-gradient(circle at 35% 30%,#4a3826,#241c15)}.row-texts{flex:1;min-width:0}.row-name{font-size:15px;color:var(--paper)}.row-desc{font-size:12px;color:var(--paper-dim);margin-top:2px}.row-value{color:var(--paper);font-variant-numeric:tabular-nums}.attr-line{font-size:13px;color:var(--paper-dim);padding:2px 0 6px}.empty-note{font-size:12px;line-height:1.7;color:var(--paper-dim);border:1px dashed var(--divider);border-radius:3px;padding:8px 10px;margin-bottom:8px}.bottomnav{height:var(--bottombar-h);flex:0 0 var(--bottombar-h);display:flex;align-items:stretch;justify-content:center;gap:4px;padding:5px 10px;background:linear-gradient(var(--bg-panel),#1d1712);border-top:1px solid var(--gold)}.nav-btn{font:inherit;cursor:pointer;display:flex;align-items:center;gap:7px;padding:4px 16px;color:var(--paper-dim);background:transparent;border:1px solid transparent;border-radius:4px}.nav-btn:hover{color:var(--paper);border-color:var(--divider)}.nav-btn.active{color:var(--gold-bright);border-color:var(--gold);background:#00000059}.nav-icon{width:26px;height:26px;border-radius:50%;border:1px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:13px}.nav-label{font-size:15px;letter-spacing:2px}@media(max-width:900px){.resource-label{display:none}.nav-btn{padding:4px 8px}.nav-label{font-size:13px}.topbar-title{letter-spacing:2px;font-size:16px}}.af-start{max-width:1100px;margin:0 auto;padding:24px 16px 48px}.af-title{font-size:34px;margin:8px 0 4px;letter-spacing:4px}.af-subtitle{color:#a89f8d;margin:0 0 14px;line-height:1.6}.af-start-controls{display:flex;gap:18px;margin-bottom:16px;color:#d8d2c4}.af-input{background:#2a241c;color:#ece7db;border:1px solid #57493a;border-radius:4px;padding:4px 8px}.af-faction-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}.af-faction-card{text-align:left;background:#241f18;border:1px solid #453a2e;border-top:4px solid #888;border-radius:8px;padding:12px 14px;color:#ece7db;cursor:pointer}.af-faction-card:hover{border-color:#c9a24b}.af-faction-name{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}.af-chip{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}.af-faction-line{color:#bdb4a0;font-size:13px;margin-top:5px;line-height:1.5}.af-faction-foot{display:flex;gap:10px;align-items:baseline;margin-top:8px}.af-diff{font-weight:700;font-size:13px;padding:1px 8px;border-radius:10px;background:#3a3f35;color:#cfd8c3}.af-diff-hard{background:#54432a;color:#ecd9ae}.af-diff-hell{background:#5c2a26;color:#f0c0b8}.af-faction-reason{color:#98917f;font-size:12px}.af-warn{color:#d8a24a}.af-game{display:flex;flex-direction:column;height:100vh}.af-topbar{display:flex;align-items:center;gap:16px;padding:8px 14px;background:#1d1913;border-bottom:1px solid #453a2e;flex-wrap:wrap}.af-game-title{font-size:19px;font-weight:700;letter-spacing:3px}.af-date{color:#d8c690;font-weight:600}.af-player{color:#bdb4a0}.af-resbar{padding:5px 14px;background:#26211a;color:#cfc7b4;font-size:13px;border-bottom:1px solid #3a3226}.af-notice{padding:5px 14px;background:#2e3a2a;color:#cfe0bd;font-size:13px}.af-notice-error{background:#46291f;color:#f0c4ae}.af-main{display:flex;flex:1;min-height:0}.af-map-wrap{flex:1.6;overflow:auto;padding:8px;background:#171410}.af-map{width:100%;height:auto;min-width:720px}.af-hex{stroke:#14100c;stroke-width:1.2;cursor:pointer;opacity:.92}.af-hex:hover{opacity:1;stroke:#e8e2d2}.af-hex-selected{stroke:#fff;stroke-width:3;opacity:1}.af-hex-reach{stroke:#7ec850;stroke-width:2.6}.af-hex-attack{stroke:#e0483a;stroke-width:2.6}.af-hex-label{fill:#f2ecdd;font-size:10.5px;text-anchor:middle;pointer-events:none;text-shadow:0 1px 2px #000}.af-hex-badge{fill:#ffe9a8;font-size:10px;text-anchor:middle;pointer-events:none}.af-legend{color:#98917f;font-size:12px;padding:4px 2px}.af-side{flex:1;min-width:330px;max-width:470px;display:flex;flex-direction:column;background:#221d16;border-left:1px solid #453a2e}.af-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px 8px 0}.af-tab{background:#2e2820;color:#cfc7b4;border:1px solid #4a3f30;border-bottom:none;border-radius:6px 6px 0 0;padding:6px 12px;cursor:pointer}.af-tab-active{background:#c9a24b;color:#241c15;font-weight:700}.af-panel{flex:1;overflow-y:auto;padding:12px 14px 24px}.af-panel-title{margin:2px 0 8px;font-size:17px}.af-panel-sub{margin:14px 0 6px;font-size:14px;color:#d8c690}.af-line{color:#cfc7b4;font-size:13px;margin:4px 0;line-height:1.55}.af-dim{color:#7d7666}.af-empty{color:#98917f}.af-btn{display:block;width:100%;text-align:left;background:#33291d;color:#ece7db;border:1px solid #57493a;border-radius:6px;padding:7px 10px;margin:5px 0;cursor:pointer;font-size:13px}.af-btn:hover:not(:disabled){border-color:#c9a24b}.af-btn:disabled{opacity:.45;cursor:not-allowed}.af-btn-small{display:inline-block;width:auto;padding:3px 10px;margin:2px 3px 2px 0}.af-btn-active{background:#c9a24b;color:#241c15;font-weight:700}.af-btn-attack{border-color:#8a4438;background:#3d2620}.af-btn-end{display:inline-block;width:auto;background:#8c1f1f;border-color:#b03a30;font-weight:700;padding:7px 18px}.af-div-row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:5px;color:#e6e0d0;font-size:13px}.af-div-row:hover{background:#2b251c}.af-div-selected{background:#3a3222;outline:1px solid #7ec850}.af-div-row .af-btn{margin-left:auto}.af-mode-row{display:flex;flex-wrap:wrap;gap:2px}.af-dip-head{margin-top:12px;color:#e6e0d0;font-size:13px;display:flex;gap:8px;align-items:center}.af-dip-actions{display:flex;flex-wrap:wrap;gap:2px;margin:3px 0 6px}.af-done{color:#9ec97e;margin-left:auto}.af-log{font-size:12.5px}.af-log-line{color:#bdb4a0;padding:3px 0;border-bottom:1px dashed #38312a;line-height:1.5}.af-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0806b8;display:flex;align-items:center;justify-content:center;z-index:40}.af-overlay-card{background:#262019;border:1px solid #c9a24b;border-radius:10px;padding:28px 34px;max-width:520px;text-align:center;color:#ece7db}