/* Self-hosted fonts — no Google tracking */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/plus-jakarta-sans.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/plus-jakarta-sans.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/plus-jakarta-sans.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/plus-jakarta-sans.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-mono-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root {
/* surfaces — obsidian, near-black with purple undertone */
--bg: #09080f;
--bg2: #100e1c;
--bg3: #17152a;
--bg4: #201d38;
/* primary accent — soft violet */
--gold: #a07ce0;
--gold-l: #c0a0f8;
--gold-d: #6848b8;
/* status */
--red: #5a1818; --red-l: #d06b62;
--green: #122a1e; --green-l: #54b478;
/* warm orange — age-up, pops against the cool purple bg */
--warm: #e07030;
/* text — lavender-white hierarchy */
--txt: #e8e0f8; --txt2: #8878b0; --txt3: #4a4268;
/* structure */
--border: #2a2440;
--border2: #3a3058;
--r: 8px; --r-sm: 5px;
--a-dim: rgba(160,124,224,.08); --a-bdr: rgba(160,124,224,.32);
--a-glow: rgba(160,124,224,.12);
--a-step: rgba(160,124,224,.10); --a-step-bdr: rgba(160,124,224,.38);
--accent: var(--gold);
--glass-bg: #09080f;
--shadow: 0 12px 40px rgba(0,0,0,.85);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--txt);font-family:'Plus Jakarta Sans',system-ui,sans-serif;min-height:100vh;font-size:14px;-webkit-font-smoothing:antialiased}
/* ─── APP BAR ─────────────────────────────────────────────── */
.app-bar{background:var(--bg2);border-bottom:1px solid var(--border);box-shadow:0 2px 24px rgba(0,0,0,.55);display:flex;align-items:stretch;padding:0 20px;height:52px;position:sticky;top:0;z-index:50}
.app-logo{font-family:'Space Mono',monospace;font-size:.72rem;font-weight:700;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;margin-right:32px;flex-shrink:0;display:flex;align-items:center}
.app-logo span{color:var(--txt3);font-weight:400;letter-spacing:.06em}
.app-nav{display:flex;align-items:stretch;flex:1;overflow-x:auto}
.nav-tab{padding:0 15px;cursor:pointer;font-size:.77rem;font-weight:600;color:var(--txt2);border:none;background:none;font-family:inherit;transition:color .15s,border-color .15s;white-space:nowrap;display:flex;align-items:center;gap:5px;border-bottom:2px solid transparent;position:relative}
.nav-tab:hover{color:var(--txt)}
.nav-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.nav-beta{font-size:.52rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--gold);padding:2px 5px;border-radius:3px;line-height:1;align-self:center;opacity:.85}
.app-badge{font-family:'Space Mono',monospace;font-size:.6rem;color:var(--txt2);background:var(--bg3);border:1px solid var(--border2);padding:4px 10px;border-radius:4px;white-space:nowrap;flex-shrink:0;margin-left:12px;align-self:center;letter-spacing:.08em}
/* ─── LAYOUT ──────────────────────────────────────────────── */
main{max-width:1380px;margin:0 auto;padding:28px 20px}
.tab-panel{display:none}.tab-panel.active{display:block}
.sec-title{font-size:1rem;font-weight:700;color:var(--gold);margin-bottom:4px;letter-spacing:.01em}
.sec-sub{font-size:.79rem;color:var(--txt2);margin-bottom:20px}
/* ─── FILTER PILLS ────────────────────────────────────────── */
.filters{display:flex;gap:5px;margin-bottom:20px;flex-wrap:wrap}
.filter-btn{padding:5px 13px;border:1px solid var(--border);background:transparent;color:var(--txt2);cursor:pointer;border-radius:20px;font-size:.73rem;font-weight:500;font-family:inherit;transition:all .15s}
.filter-btn:hover{border-color:var(--txt3);color:var(--txt)}
.filter-btn.active{border-color:var(--a-bdr);color:var(--gold);background:var(--a-dim)}
/* ─── CIV GRID ────────────────────────────────────────────── */
.civ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.civ-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s;overflow:hidden;display:flex;flex-direction:column}
.civ-card:hover{border-color:var(--a-bdr);transform:translateY(-2px);box-shadow:0 8px 32px var(--a-glow),0 2px 8px rgba(0,0,0,.6)}
.civ-banner{height:74px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--bg4) 0%,var(--bg3) 60%,#0e0c1a 100%);border-bottom:1px solid var(--border);overflow:hidden;flex-shrink:0}
.civ-banner img{height:52px;width:auto;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.civ-body{padding:11px 13px;flex:1;display:flex;flex-direction:column}
.civ-card-top-row{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:7px}
.civ-name{font-size:.86rem;font-weight:700;color:var(--txt);line-height:1.3}
.civ-arch{font-size:.68rem;color:var(--txt2);margin-top:2px}
.civ-desc{font-size:.72rem;color:var(--txt2);line-height:1.55;flex:1}
.civ-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:.64rem;padding:2px 7px;border-radius:20px;background:var(--bg4);color:var(--txt3);border:1px solid var(--border)}
.dlc-pip{font-size:.56rem;font-weight:700;padding:2px 6px;border-radius:3px;letter-spacing:.05em;white-space:nowrap;flex-shrink:0;margin-top:1px}
.dlc-base{background:#0d1e0d;color:#54b478;border:1px solid #1e4228}
.dlc-free{background:#0a1828;color:#5fa0e8;border:1px solid #1a3468}
.dlc-sultans{background:#281208;color:#d07838;border:1px solid rgba(208,120,56,.3)}
.dlc-dynasties{background:#14082a;color:#9878e8;border:1px solid rgba(152,120,232,.3)}
.dlc-yuefei{background:#200808;color:#c86868;border:1px solid rgba(200,104,104,.3)}
.dlc-templar{background:#0f1420;color:#a0b8d8;border:1px solid rgba(160,184,216,.3)}
.dlc-variant{background:var(--bg4);color:var(--txt3);border:1px solid var(--border)}
.civ-icon img,.modal-icon img{width:100%;height:100%;object-fit:contain}
/* ─── MODAL ───────────────────────────────────────────────── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:100;padding:20px;overflow-y:auto}
.overlay.active{display:flex;align-items:flex-start;justify-content:center}
.modal{background:var(--bg2);border:1px solid var(--border);border-top:2px solid var(--gold);border-radius:var(--r);max-width:800px;width:100%;margin:16px auto;position:relative;box-shadow:var(--shadow)}
.modal-hdr{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px}
.modal-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);flex-shrink:0;overflow:hidden}
.modal-title{font-size:1.15rem;font-weight:700;color:var(--txt)}
.modal-sub{font-size:.77rem;color:var(--txt2);margin-top:3px}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:1px solid var(--border);color:var(--txt2);width:28px;height:28px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);transition:all .15s}
.modal-close:hover{border-color:var(--a-bdr);color:var(--gold)}
.modal-body{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.modal-body{grid-template-columns:1fr}}
.info-lbl{font-size:.64rem;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.info-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.info-list li{font-size:.78rem;color:var(--txt2);padding-left:12px;position:relative;line-height:1.5}
.info-list li::before{content:'›';position:absolute;left:0;color:var(--txt3)}
.str-list li::before{color:var(--green-l)}
.wk-list li::before{color:var(--red-l)}
.tip-list li::before{content:'◆';color:var(--gold);font-size:.42rem;top:6px}
.counter-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.chip{font-size:.7rem;padding:3px 9px;border-radius:20px}
.chip-green{background:rgba(84,180,120,.1);border:1px solid rgba(84,180,120,.22);color:var(--green-l)}
.chip-red{background:rgba(208,107,98,.1);border:1px solid rgba(208,107,98,.22);color:var(--red-l)}
/* ─── FORMS ───────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:5px}
.form-lbl{font-size:.67rem;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.09em}
select{background:var(--bg3);border:1px solid var(--border);color:var(--txt);padding:8px 12px;border-radius:var(--r-sm);font-size:.82rem;width:100%;font-family:inherit}
select:focus{outline:none;border-color:var(--a-bdr)}
input[type=text]{background:var(--bg3);border:1px solid var(--border);color:var(--txt);padding:8px 12px;border-radius:var(--r-sm);font-size:.82rem;width:100%;outline:none;font-family:inherit;transition:border-color .15s}
input[type=text]:focus{border-color:var(--a-bdr)}
input[type=text]::placeholder{color:var(--txt3)}
/* ─── CIV PICKER ──────────────────────────────────────────── */
.civ-picker{position:relative;width:100%}
.civ-picker-btn{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;width:100%;transition:border-color .15s;min-height:38px}
.civ-picker-btn:hover,.civ-picker-btn.open{border-color:var(--a-bdr)}
.civ-picker-label{flex:1;font-size:.8rem;color:var(--txt);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.civ-picker-arrow{color:var(--txt3);font-size:.6rem;transition:transform .15s;flex-shrink:0}
.civ-picker-btn.open .civ-picker-arrow{transform:rotate(180deg)}
.civ-picker-panel{position:absolute;top:calc(100% + 3px);left:0;width:100%;min-width:220px;background:var(--bg3);border:1px solid var(--a-bdr);border-radius:var(--r-sm);z-index:300;max-height:260px;overflow-y:auto;display:none;box-shadow:var(--shadow)}
.civ-picker-panel.open{display:block}
.civ-picker-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;transition:background .1s}
.civ-picker-opt:hover{background:var(--bg4)}
.civ-picker-opt.active{background:var(--a-dim)}
.civ-picker-opt img{width:26px;height:19px;object-fit:contain;flex-shrink:0;border-radius:1px}
.civ-picker-opt-name{font-size:.78rem;color:var(--txt);font-weight:500}
/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn{padding:8px 16px;border-radius:var(--r-sm);font-size:.8rem;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:all .15s;letter-spacing:.02em}
.btn-sm{padding:4px 10px;font-size:.7rem;background:var(--bg3);border:1px solid var(--border);color:var(--txt2)}
.btn-sm:hover{border-color:var(--a-bdr);color:var(--txt)}
.btn-gold{background:var(--gold);color:#0c0820}
.btn-gold:hover{background:var(--gold-l)}
.btn-sm.btn-gold{border:none}
.btn-sec{background:var(--bg3);border:1px solid var(--border);color:var(--txt2)}
.btn-sec:hover{border-color:var(--a-bdr);color:var(--gold)}
/* ─── BUILD PASTE INPUT ───────────────────────────────────── */
/* ─── FEATURED BUILDS ────────────────────────────────────── */
.fb-hdr{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.fb-source{font-family:'Space Mono',monospace;font-size:.6rem;color:var(--txt3);border:1px solid var(--border);padding:2px 7px;border-radius:3px;letter-spacing:.06em}
.fb-filters{display:flex;gap:5px;margin-bottom:14px;flex-wrap:wrap}
.fb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:24px;min-height:60px}
.fb-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:13px 14px;cursor:pointer;transition:border-color .15s,background .15s;display:flex;flex-direction:column;gap:6px}
.fb-card:hover{border-color:var(--a-bdr);background:var(--bg3)}
.fb-card-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fb-civ{font-family:'Space Mono',monospace;font-size:.6rem;color:var(--txt3);letter-spacing:.06em;text-transform:uppercase}
.fb-card-title{font-size:.82rem;font-weight:600;color:var(--txt);line-height:1.3}
.fb-card-meta{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;color:var(--txt3);margin-top:2px}
.fb-card-meta-author{color:var(--txt2);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-card-likes{display:flex;align-items:center;gap:3px;flex-shrink:0}
.fb-loading,.fb-error,.fb-empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--txt3);font-size:.8rem}
.fb-loading::before{content:'';display:inline-block;width:14px;height:14px;border:2px solid var(--border2);border-top-color:var(--gold);border-radius:50%;animation:fb-spin .7s linear infinite;margin-right:8px;vertical-align:middle}
@keyframes fb-spin{to{transform:rotate(360deg)}}
.fb-filter-row2{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm)}
.fb-filter-group{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.fb-filter-lbl{font-size:.65rem;font-family:'Space Mono',monospace;color:var(--txt3);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;margin-right:2px}
.fb-count{font-size:.68rem;color:var(--txt3);font-family:'Space Mono',monospace;margin-left:auto}
.fb-pro-badge{font-size:.68rem;font-weight:600;color:#d4a840;background:rgba(212,168,64,.1);border:1px solid rgba(212,168,64,.25);padding:3px 9px;border-radius:3px;white-space:nowrap}
.fb-season-tag{font-family:'Space Mono',monospace;font-size:.58rem;color:var(--txt3);padding:1px 5px;border:1px solid var(--border);border-radius:2px}
.fb-card-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px}
.fb-copy-btn{background:var(--bg3);border:1px solid var(--border);color:var(--txt3);padding:3px 8px;border-radius:3px;font-size:.63rem;font-family:inherit;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}
.fb-copy-btn:hover{border-color:var(--border2);color:var(--txt2)}
.fb-copy-ok{border-color:var(--green-l)!important;color:var(--green-l)!important}
.fb-card-loading{opacity:.5;pointer-events:none}
.fb-paste-toggle{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;font-size:.77rem;color:var(--txt3);width:fit-content;user-select:none}
.fb-paste-toggle:hover{color:var(--txt2)}
.fb-paste-toggle .fb-caret{font-size:.65rem;transition:transform .2s}
.fb-paste-toggle.open .fb-caret{transform:rotate(90deg)}
.fb-paste-body{display:none}
.fb-paste-body.open{display:block}
.qt-badge{font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:3px;white-space:nowrap}
.qt-pro{background:rgba(212,168,64,.15);color:#d4a840;border:1px solid rgba(212,168,64,.3)}
.qt-pick{background:rgba(160,124,224,.12);color:var(--gold-l);border:1px solid var(--a-bdr)}
.qt-good{background:rgba(84,180,120,.1);color:#54b478;border:1px solid rgba(84,180,120,.25)}
.qt-green{background:rgba(84,180,120,.12);color:#54b478;border:1px solid rgba(84,180,120,.3)}
.qt-amber{background:rgba(233,162,52,.12);color:#e9a234;border:1px solid rgba(233,162,52,.3)}
.qt-red{background:rgba(208,107,98,.12);color:#d06b62;border:1px solid rgba(208,107,98,.3)}
.fb-civ-filter{display:flex;gap:5px;margin-bottom:14px;flex-wrap:wrap}
.tb-civ-btn{display:inline-flex!important;align-items:center;gap:5px}
.fb-card .fb-civ{display:inline-flex;align-items:center;gap:4px}
.fb-card-goal{font-size:.7rem;color:var(--gold-l);font-weight:600;font-family:'Space Mono',monospace}
.fb-card-desc{font-size:.65rem;color:var(--txt3);flex:1;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
/* ─── BUILD BROWSE — mode toggle + browse panel ───────────── */
.ag-mode-bar{display:flex;gap:3px;margin-bottom:20px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:3px;width:fit-content}
.ag-mode-btn{padding:7px 22px;border-radius:calc(var(--r) - 3px);border:none;background:none;color:var(--txt2);font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s;white-space:nowrap;letter-spacing:.01em}
.ag-mode-btn:hover{color:var(--txt)}
.ag-mode-btn.active{background:var(--gold-d);color:var(--txt);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ag-browse-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:14px}
.ag-disclaimer{font-size:.72rem;color:var(--txt3);line-height:1.55;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 14px;margin-bottom:14px;display:flex;align-items:flex-start;gap:8px}
.ag-disclaimer-icon{flex-shrink:0;opacity:.6;margin-top:1px}
.ag-disclaimer a{color:var(--gold);text-decoration:none}.ag-disclaimer a:hover{text-decoration:underline}
.ag-disclaimer strong{color:var(--txt2)}
.ag-status{font-size:.73rem;color:var(--txt3);margin-bottom:10px;min-height:18px;display:flex;align-items:center;gap:6px}
.ag-status.loading{color:var(--gold)}
.ag-status.loading::before{content:'';display:inline-block;width:10px;height:10px;border:2px solid var(--border2);border-top-color:var(--gold);border-radius:50%;animation:fb-spin .7s linear infinite;flex-shrink:0}
.ag-status.error{color:var(--red-l)}
.ag-count{font-size:.65rem;color:var(--txt3);font-family:'Space Mono',monospace;white-space:nowrap}
.ag-browse-card .fb-card-stats{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:.68rem;color:var(--txt3);flex-wrap:wrap}
.ag-browse-card .fb-card-stats .fb-copy-btn{margin-left:auto}
.ag-browse-card .fb-card-stats .ag-import-btn{margin-left:0}
.ag-browse-card .ag-likes{display:flex;align-items:center;gap:3px;color:var(--txt2)}
.ag-browse-card .ag-ext{flex-shrink:0;color:var(--txt)!important;border-color:var(--border2)!important}
.ag-browse-card .ag-ext:hover{color:#fff!important;border-color:var(--txt2)!important}
.ag-import-btn{color:var(--gold)!important;border-color:var(--gold)!important;opacity:.8}
.ag-import-btn:hover{opacity:1!important;background:rgba(198,160,76,.1)!important}
.build-paste-area{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.build-paste-field{background:var(--bg3);border:1px solid var(--border);color:var(--txt);padding:10px 12px;border-radius:var(--r-sm);font-size:.76rem;width:100%;outline:none;font-family:'Space Mono',monospace;letter-spacing:.01em;transition:border-color .15s;resize:vertical;min-height:72px;line-height:1.5}
.build-paste-field:focus{border-color:var(--a-bdr)}
.build-paste-field::placeholder{color:var(--txt3);font-size:.73rem}
.build-paste-row{display:flex;justify-content:flex-end;gap:10px;align-items:center}
.build-url-hint{font-size:.67rem;color:var(--txt3);font-family:'Space Mono',monospace;flex:1;line-height:1.5}
/* ─── TIMER ───────────────────────────────────────────────── */
.divider{border:none;border-top:1px solid var(--border);margin:16px 0}
.timer-wrap{display:grid;grid-template-columns:250px 1fr;gap:14px;height:calc(100vh - 130px)}
@media(max-width:860px){.timer-wrap{grid-template-columns:1fr;height:auto}}
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px;overflow-y:auto}
.timer-big{text-align:center;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.timer-num{font-family:'Space Mono',monospace;font-size:3.2rem;font-weight:700;color:var(--gold);line-height:1;letter-spacing:2px}
.timer-lbl{font-size:.58rem;color:var(--txt3);letter-spacing:.16em;text-transform:uppercase;margin-top:6px}
.timer-ctrls{display:flex;gap:6px;justify-content:center;margin-bottom:12px}
.stat-box{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px;text-align:center;margin-bottom:7px}
.stat-val{font-family:'Space Mono',monospace;font-size:1.7rem;color:var(--txt);font-weight:700;line-height:1.2}
.stat-lbl{font-size:.58rem;color:var(--txt3);letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px}
.res-box{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px;text-align:center}
.res-val{font-family:'Space Mono',monospace;font-size:1.1rem;font-weight:700;line-height:1}
.res-lbl{font-size:.6rem;color:var(--txt3);letter-spacing:.09em;text-transform:uppercase;margin-top:5px;display:flex;align-items:center;justify-content:center;gap:3px}
.res-lbl img{opacity:.75}
.timing-warn{background:rgba(180,100,20,.15);border:1px solid rgba(180,100,20,.35);border-radius:var(--r-sm);padding:7px 10px;font-size:.68rem;color:#d4813a;margin:6px 8px 4px;line-height:1.4}
.tip-icon{font-size:.7rem;color:var(--txt3);cursor:help;position:relative;display:inline-block;vertical-align:middle;margin-left:3px}
.tip-icon::after{content:attr(data-tip);white-space:pre-wrap;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1c1510;border:1px solid var(--border2);border-radius:4px;padding:7px 10px;font-size:.69rem;color:var(--txt2);max-width:240px;line-height:1.5;pointer-events:none;opacity:0;transition:opacity .15s;z-index:200;text-align:left;font-style:normal;font-weight:400}
.tip-icon:hover::after{opacity:1}
.food-c{color:#e07838}.wood-c{color:#54b478}.gold-c{color:#e9a234}.stone-c{color:#907e6a}
/* ─── STEPS ───────────────────────────────────────────────── */
.steps-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden}
.steps-hdr{padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.overlay-btn-hdr{padding:6px 14px;font-size:.74rem;font-weight:700;background:var(--a-dim);border:1px solid var(--gold);color:var(--gold);border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;font-family:inherit}
.overlay-btn-hdr:hover{background:var(--gold);color:#000}
.tts-tip-banner{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;background:rgba(212,162,58,.15);border-bottom:2px solid rgba(212,162,58,.5);border-left:4px solid var(--gold);flex-shrink:0;font-size:.78rem;color:var(--txt);line-height:1.5}
.tts-tip-banner strong{color:var(--gold)}
.tts-tip-icon{font-size:1rem;flex-shrink:0;margin-top:1px}
.steps-title{font-size:.86rem;font-weight:700;color:var(--txt)}
.steps-meta{font-size:.72rem;color:var(--txt2);margin-top:2px}
.steps-list{padding:7px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.step{display:flex;flex-direction:column;gap:4px;padding:9px 11px;border-radius:var(--r-sm);border:1px solid transparent;transition:all .15s;cursor:pointer}
.step:hover:not(.current){background:var(--bg3)}
.step.current{background:var(--a-step);border-color:var(--a-step-bdr);border-left:3px solid var(--gold)}
.step.done{opacity:.25}
.step-header{display:flex;align-items:center;gap:8px}
.step-time{font-family:'Space Mono',monospace;color:var(--txt2);font-size:.7rem;font-weight:600;display:flex;align-items:center;gap:3px}
.step-time img{opacity:.75;flex-shrink:0}
.step.current .step-time{color:var(--gold-l)}
.step.current .step-time img{opacity:1}
.step-pop{color:var(--txt2);font-size:.67rem;display:flex;align-items:center;gap:2px;margin-left:auto}
.step-pop img{opacity:.55}
.step-content .act{font-size:.9rem;color:var(--txt);line-height:1.85;margin-top:3px}
.step-content .act .act-text{display:block}
.step-content .act img{width:30px;height:30px;object-fit:contain;vertical-align:middle;margin:0 4px;opacity:1}
.step-content .note{font-size:.72rem;color:var(--txt2);font-style:italic;margin-top:5px;line-height:1.5}
.age-sep{display:flex;align-items:center;gap:8px;padding:10px 9px 6px;margin:6px 0 2px}
.age-sep::before,.age-sep::after{content:'';flex:1;height:1px;background:var(--border)}
.age-sep-label{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;white-space:nowrap;padding:0 6px}
.step.ageup{border-left:2px solid var(--warm);padding-left:7px}
.step.mil-tech{border-left:2px solid var(--red-l);padding-left:7px}
.step.eco-tech{border-left:2px solid var(--green-l);padding-left:7px}
.upg-badge{display:inline-block;font-size:.56rem;padding:1px 5px;border-radius:3px;margin-left:5px;vertical-align:middle;font-weight:700}
.ub-ageup{background:rgba(224,112,48,.15);color:var(--warm);border:1px solid rgba(224,112,48,.3)}
.ub-mil{background:rgba(208,107,98,.1);color:var(--red-l);border:1px solid rgba(208,107,98,.25)}
.ub-eco{background:rgba(84,180,120,.1);color:var(--green-l);border:1px solid rgba(84,180,120,.25)}
/* ─── QUALITY TIERS ───────────────────────────────────────── */
.qt-pro{background:rgba(160,124,224,.1);color:var(--gold-l);border:1px solid rgba(160,124,224,.28);font-size:.6rem;padding:2px 6px;border-radius:3px;font-weight:700;white-space:nowrap}
.qt-pick{background:rgba(84,180,120,.1);color:var(--green-l);border:1px solid rgba(84,180,120,.25);font-size:.6rem;padding:2px 6px;border-radius:3px;font-weight:700;white-space:nowrap}
.qt-good{background:var(--a-dim);color:var(--gold-l);border:1px solid var(--a-bdr);font-size:.6rem;padding:2px 6px;border-radius:3px;font-weight:700;white-space:nowrap}
.qt-warn{background:rgba(208,107,98,.1);color:var(--red-l);border:1px solid rgba(208,107,98,.25);font-size:.6rem;padding:2px 6px;border-radius:3px;font-weight:700;white-space:nowrap}
/* ─── SEASON BADGES ───────────────────────────────────────── */
.season-badge{display:inline-block;font-size:.6rem;padding:1px 5px;border-radius:3px;font-weight:700;margin-left:4px}
.s-current{background:rgba(84,180,120,.1);color:var(--green-l);border:1px solid rgba(84,180,120,.2)}
.s-prev{background:var(--a-dim);color:var(--gold-l);border:1px solid var(--a-bdr)}
.s-old{background:var(--bg3);color:var(--txt3);border:1px solid var(--border)}
/* ─── COMPLETENESS BAR ────────────────────────────────────── */
.completeness-row{display:flex;align-items:center;gap:8px;margin-top:8px;padding:7px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm)}
.cmp-lbl{font-size:.61rem;color:var(--txt3);white-space:nowrap;text-transform:uppercase;letter-spacing:.07em}
.cmp-bar{flex:1;height:3px;background:var(--bg4);border-radius:4px;overflow:hidden}
.cmp-fill{height:100%;border-radius:4px;transition:width .4s}
/* ─── MISC ────────────────────────────────────────────────── */
.ph{text-align:center;padding:48px 20px;color:var(--txt3)}
.ph-icon{font-size:2rem;margin-bottom:10px;opacity:.35}
.ph-text{font-size:.86rem;color:var(--txt2);font-weight:600}
.ph-sub{font-size:.75rem;margin-top:4px}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--txt3)}
.hidden{display:none!important}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.video-link{display:flex;align-items:center;justify-content:center;gap:5px;font-size:.77rem;font-weight:600;color:var(--red-l);text-decoration:none;padding:7px 10px;border:1px solid rgba(208,107,98,.25);border-radius:var(--r-sm);background:rgba(208,107,98,.06);transition:all .15s;width:100%;font-family:inherit}
.video-link:hover{border-color:var(--red-l);background:rgba(208,107,98,.13)}
.overlay-btn{width:100%;margin-top:8px;background:var(--bg3);border:1px solid var(--border);color:var(--txt2);display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
.overlay-btn:hover{border-color:var(--a-bdr);color:var(--gold);background:var(--a-dim)}
.overlay-btn.open{border-color:rgba(84,180,120,.3);color:var(--green-l);background:rgba(84,180,120,.07)}
/* ─── TIMER ROBUSTNESS ────────────────────────────────────── */
@keyframes step-flash{0%,100%{background:var(--a-step)}50%{background:var(--a-bdr)}}
.step.current.new-step{animation:step-flash .65s ease-out}
.countdown-wrap{margin-top:8px;padding:6px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);text-align:center;transition:border-color .3s,background .3s}
.countdown-wrap.warn{border-color:var(--a-bdr);background:var(--a-dim)}
.countdown-lbl{font-size:.56rem;color:var(--txt3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.countdown-val{font-family:'Space Mono',monospace;font-size:.78rem;color:var(--txt2);font-weight:700}
.countdown-val.warn{color:var(--gold)}
/* ─── TTS CONTROLS ────────────────────────────────────────── */
.tts-wrap{margin-top:8px;padding:7px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm)}
.tts-row{display:flex;align-items:center;gap:6px}
.tts-toggle{flex:1;padding:4px 6px;border:1px solid var(--border);background:transparent;color:var(--txt3);border-radius:var(--r-sm);font-size:.68rem;cursor:pointer;font-family:inherit;font-weight:700;letter-spacing:.04em;transition:all .15s;text-align:center}
.tts-toggle:hover{color:var(--txt);border-color:var(--txt3)}
.tts-toggle.active{background:var(--a-dim);border-color:var(--a-bdr);color:var(--gold)}
.tts-stop-btn{padding:4px 8px;border:1px solid var(--border);background:transparent;color:var(--txt3);border-radius:var(--r-sm);font-size:.64rem;cursor:pointer;font-family:inherit;font-weight:700;transition:all .15s;white-space:nowrap;flex-shrink:0}
.tts-stop-btn:hover{color:var(--red-l);border-color:var(--red-l)}
.tts-lbl{font-size:.56rem;color:var(--txt3);text-align:center;margin-top:4px;letter-spacing:.06em}
.tts-voice-row{display:flex;gap:5px;margin-top:5px;align-items:stretch}
.tts-voice-sel{flex:1;padding:4px 7px;border:1px solid var(--border);background:var(--bg4);color:var(--txt2);border-radius:var(--r-sm);font-size:.67rem;font-family:inherit;cursor:pointer}
.tts-voice-sel:focus{outline:1px solid var(--a-bdr);outline-offset:0}
.tts-voice-test-btn{padding:4px 8px;border:1px solid var(--border);background:var(--bg4);color:var(--txt2);border-radius:var(--r-sm);font-size:.65rem;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
.tts-voice-test-btn:hover{border-color:var(--a-bdr);color:var(--gold)}
.tts-voice-status{font-size:.65rem;margin-top:4px;min-height:14px;transition:color .2s}
.tts-voice-status.pass{color:var(--green-l)}
.tts-voice-status.fail{color:var(--red-l)}
.tts-scan-row{display:flex;gap:5px;margin-top:5px}
.tts-scan-btn{flex:1;padding:4px 8px;border:1px solid var(--border);background:transparent;color:var(--txt3);border-radius:var(--r-sm);font-size:.65rem;cursor:pointer;font-family:inherit;transition:all .15s;text-align:left}
.tts-scan-btn:hover{border-color:var(--a-bdr);color:var(--txt)}
.tts-scan-btn:disabled{opacity:.5;cursor:not-allowed}
.tts-scan-results{margin-top:6px;border:1px solid var(--border);border-radius:var(--r-sm);max-height:200px;overflow-y:auto;background:var(--bg4)}
.tts-sr-hdr{padding:5px 9px;font-size:.63rem;font-weight:700;color:var(--txt3);border-bottom:1px solid var(--border);letter-spacing:.03em;position:sticky;top:0;background:var(--bg4)}
.tts-sr-row{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:7px;padding:4px 9px;border-bottom:1px solid var(--border);font-size:.67rem}
.tts-sr-row:last-child{border-bottom:none}
.tts-sr-row.ok .tts-sr-icon{color:var(--green-l)}
.tts-sr-row.fail .tts-sr-icon{color:var(--red-l)}
.tts-sr-row.fail .tts-sr-name{color:var(--txt3)}
.tts-sr-name{color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tts-sr-status{font-size:.6rem;color:var(--txt3);white-space:nowrap}
.tts-sr-row.ok .tts-sr-status{color:var(--green-l)}
.tts-sr-row.fail .tts-sr-status{color:var(--red-l)}
.tts-sr-empty{padding:10px;font-size:.7rem;color:var(--txt3)}
.tts-vol-row{display:flex;align-items:center;gap:6px;margin-top:6px}
.tts-vol-icon{font-size:.72rem;color:var(--txt3);flex-shrink:0;width:14px;text-align:center;line-height:1}
.tts-vol-slider{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;background:var(--border);cursor:pointer;outline:none}
.tts-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--gold);cursor:pointer}
.tts-vol-slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--gold);cursor:pointer;border:none}
.tts-vol-val{font-size:.6rem;color:var(--txt3);min-width:24px;text-align:right;font-family:'Space Mono',monospace}
/* ─── CREATOR TAB ────────────────────────────────────────── */
/* shared inputs */
.cr-input{width:100%;padding:6px 9px;border:1px solid var(--border);background:var(--bg4);color:var(--txt);border-radius:var(--r-sm);font-size:.78rem;font-family:inherit;transition:border-color .15s}
.cr-input:focus{outline:none;border-color:var(--a-bdr)}
.cr-input::placeholder{color:var(--txt3)}
.cr-select{appearance:none;cursor:pointer}
.cr-label{font-size:.6rem;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:4px}
/* library view */
.cr-lib-view{max-width:860px}
.cr-lib-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cr-lib-title{font-size:1rem;font-weight:700;color:var(--txt)}
.cr-lib-actions{display:flex;gap:7px}
.cr-storage-notice{display:flex;align-items:flex-start;gap:12px;background:rgba(255,180,0,.07);border-left:4px solid #f5a623;border-radius:0 var(--r) var(--r) 0;padding:14px 18px;margin-bottom:20px}
.cr-storage-icon{font-size:1.15rem;line-height:1;flex-shrink:0;margin-top:1px}
.cr-storage-text{font-size:.8rem;color:var(--txt2);line-height:1.6}.cr-storage-text strong{color:var(--txt);font-weight:700}
.cr-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.cr-lib-empty{padding:52px 0;text-align:center;color:var(--txt3);font-size:.8rem;grid-column:1/-1}
.cr-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;transition:border-color .2s,transform .15s,box-shadow .15s}
.cr-card:hover{border-color:var(--a-bdr);transform:translateY(-1px);box-shadow:0 6px 24px var(--a-glow)}
.cr-card-name{font-size:.88rem;font-weight:700;color:var(--txt);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-card-meta{font-size:.67rem;color:var(--txt2);margin-bottom:10px}
.cr-card-civ{display:inline-block;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:3px;background:var(--a-dim);color:var(--gold);border:1px solid var(--a-bdr);margin-bottom:6px}
.cr-card-acts{display:flex;gap:5px}
/* editor view */
.cr-editor-view{max-width:860px}
.cr-ed-topbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.cr-back-btn{background:none;border:1px solid var(--border);color:var(--txt2);padding:5px 12px;border-radius:var(--r-sm);cursor:pointer;font-size:.73rem;font-family:inherit;transition:all .15s;white-space:nowrap;flex-shrink:0}
.cr-back-btn:hover{border-color:var(--a-bdr);color:var(--gold)}
.cr-ed-meta{display:flex;gap:8px;flex:1;flex-wrap:wrap;min-width:0}
.cr-ed-meta .cr-input{padding:5px 8px;font-size:.77rem}
.cr-ed-meta-name{flex:2;min-width:140px}
.cr-ed-meta-civ{flex:1.5;min-width:120px}
.cr-ed-meta-author{flex:1;min-width:90px}
.cr-ed-acts{display:flex;gap:6px;flex-shrink:0}
/* steps */
.cr-steps{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.cr-step-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .15s}
.cr-step-item.open{border-color:var(--a-bdr)}
.cr-step-header{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;user-select:none;transition:background .15s}
.cr-step-header:hover{background:var(--a-dim)}
.cr-step-item.open .cr-step-header{background:var(--a-dim);border-bottom:1px solid var(--a-bdr)}
.cr-step-num{font-size:.6rem;font-weight:700;color:var(--txt3);min-width:16px;text-align:center}
.cr-step-time{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--gold);min-width:38px}
.cr-step-agebadge{font-size:.58rem;font-weight:700;padding:2px 6px;border-radius:3px;flex-shrink:0}
.cr-step-agebadge.age-1{background:#0e1a0e;color:#54b478;border:1px solid #1e3a1e}
.cr-step-agebadge.age-2{background:#1a1200;color:#e0a030;border:1px solid #3a2a00}
.cr-step-agebadge.age-3{background:#0a0e1e;color:#6090e0;border:1px solid #1a2a50}
.cr-step-agebadge.age-4{background:#1a0a1e;color:#a070d0;border:1px solid #3a1a50}
.cr-step-pop{font-size:.65rem;color:var(--txt3);font-family:'Space Mono',monospace;flex-shrink:0}
.cr-step-prev{flex:1;font-size:.73rem;color:var(--txt2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;display:flex;align-items:center;gap:3px}
.cr-step-prev img{width:18px;height:18px;object-fit:contain;vertical-align:middle;flex-shrink:0}
.cr-step-del{background:none;border:1px solid transparent;color:var(--txt3);cursor:pointer;padding:2px 6px;font-size:.75rem;border-radius:3px;transition:all .15s;flex-shrink:0;line-height:1}
.cr-step-del:hover{border-color:var(--red-l);color:var(--red-l)}
/* inline editor (inside open step) */
.cr-step-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.cr-step-fields{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.cr-step-fields .cr-input{padding:5px 8px;font-size:.75rem}
.cr-field-time{width:72px;flex-shrink:0}
.cr-field-pop{width:64px;flex-shrink:0}
.cr-age-row{display:flex;gap:4px;flex-wrap:wrap}
.cr-age-btn{padding:4px 10px;border:1px solid var(--border);background:var(--bg4);color:var(--txt2);border-radius:var(--r-sm);font-size:.63rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.cr-age-btn:hover{border-color:var(--a-bdr);color:var(--txt)}
.cr-age-btn.active{background:var(--a-dim);border-color:var(--a-bdr);color:var(--gold)}
/* note lines */
.cr-note-lines{display:flex;flex-direction:column;gap:5px}
.cr-note-line{display:flex;flex-direction:column;gap:3px}
.cr-note-row{display:flex;gap:5px;align-items:center}
.cr-note-ce{flex:1;padding:5px 8px;border:1px solid var(--border);background:var(--bg3);color:var(--txt);border-radius:var(--r-sm);font-size:.76rem;font-family:inherit;transition:border-color .15s;min-height:34px;line-height:2;outline:none;cursor:text;word-break:break-word;white-space:pre-wrap}
.cr-note-ce:focus{border-color:var(--a-bdr)}
.cr-note-ce:empty::before{content:attr(data-placeholder);color:var(--txt3);pointer-events:none}
.cr-note-icon{width:26px;height:26px;object-fit:contain;vertical-align:middle;margin:0 2px;cursor:default;user-select:none;display:inline-block}
.cr-step-prev img{width:18px;height:18px;object-fit:contain;vertical-align:middle;margin:0 1px}
.cr-note-del{background:none;border:none;color:var(--txt3);cursor:pointer;padding:2px 5px;font-size:.72rem;transition:color .15s;flex-shrink:0}
.cr-note-del:hover{color:var(--red-l)}
.cr-ico-btn{background:none;border:1px solid var(--border);color:var(--txt3);cursor:pointer;padding:4px 7px;font-size:.7rem;border-radius:var(--r-sm);transition:all .15s;flex-shrink:0;white-space:nowrap}
.cr-ico-btn:hover{border-color:var(--a-bdr);color:var(--gold)}
/* icon picker */
.cr-picker{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px}
.cr-icon-cats{display:flex;gap:4px;margin-bottom:7px;flex-wrap:wrap}
.cr-icon-cat-btn{padding:3px 10px;border:1px solid var(--border);background:transparent;color:var(--txt2);cursor:pointer;border-radius:20px;font-size:.63rem;font-weight:500;font-family:inherit;transition:all .15s}
.cr-icon-cat-btn:hover{border-color:var(--txt3);color:var(--txt)}
.cr-icon-cat-btn.active{border-color:var(--a-bdr);color:var(--gold);background:var(--a-dim)}
.cr-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:3px;max-height:180px;overflow-y:auto}
.cr-icon-btn{width:36px;height:36px;border:1px solid var(--border);background:var(--bg4);border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;padding:0;flex-shrink:0}
.cr-icon-btn:hover{border-color:var(--a-bdr);background:var(--a-dim)}
.cr-icon-btn img{width:24px;height:24px;object-fit:contain}
/* bottom bar */
.cr-bottom-bar{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.cr-status{font-size:.68rem;display:flex;align-items:center;gap:6px}
.cr-status-ok{color:var(--green-l)}
.cr-status-err{color:var(--red-l)}
/* import modal */
.cr-import-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;display:none;align-items:center;justify-content:center}
.cr-import-modal.open{display:flex}
.cr-import-box{background:var(--bg2);border:1px solid var(--border);border-top:2px solid var(--gold);border-radius:var(--r);padding:20px;width:min(600px,90vw);box-shadow:var(--shadow)}
.cr-import-title{font-size:.88rem;font-weight:700;color:var(--txt);margin-bottom:10px}
.cr-import-ta{width:100%;min-height:180px;padding:8px 10px;border:1px solid var(--border);background:var(--bg4);color:var(--txt);border-radius:var(--r-sm);font-size:.72rem;font-family:'Space Mono',monospace;resize:vertical}
.cr-import-ta:focus{outline:1px solid var(--a-bdr)}
.cr-import-err{color:var(--red-l);font-size:.72rem;margin-top:5px;min-height:14px}
.cr-import-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
/* ─── CREATOR: STRUCTURED STEP ──────────────────────────── */
.cr-section{display:flex;flex-direction:column;gap:5px}
.cr-workers{display:flex;gap:8px;flex-wrap:wrap}
.cr-worker-item{display:flex;align-items:center;gap:4px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 8px;transition:border-color .15s}
.cr-worker-item:focus-within{border-color:var(--a-bdr)}
.cr-wk-icon{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.cr-wk-label{font-size:.65rem;font-weight:700;color:var(--txt2)}
.cr-cnt-btn{width:22px;height:22px;border:1px solid var(--border);background:var(--bg4);color:var(--txt);border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0;line-height:1;flex-shrink:0;font-family:inherit}
.cr-cnt-btn:hover{border-color:var(--a-bdr);background:var(--a-dim);color:var(--gold)}
.cr-wk-num{font-family:'Space Mono',monospace;font-size:.84rem;color:var(--txt);font-weight:700;min-width:22px;text-align:center}
.cr-actions-list{display:flex;flex-direction:column;gap:4px}
.cr-action-row{display:flex;align-items:center;gap:5px}
.cr-action-icon-btn{display:flex;align-items:center;gap:5px;flex:1;padding:4px 8px;border:1px solid var(--border);background:var(--bg3);border-radius:var(--r-sm);cursor:pointer;font-size:.72rem;color:var(--txt);transition:border-color .15s,background .15s;min-height:30px;font-family:inherit;text-align:left}
.cr-action-icon-btn:hover{border-color:var(--a-bdr);background:var(--a-dim)}
.cr-action-icon-btn.picking{border-color:var(--gold);background:var(--a-dim);box-shadow:0 0 0 1px var(--gold-d)}
.cr-action-lbl{font-size:.71rem;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.cr-tts-preview{background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--gold-d);border-radius:var(--r-sm);padding:7px 10px;font-size:.72rem;color:var(--txt2);display:flex;align-items:flex-start;gap:7px;line-height:1.5}
.cr-tts-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);flex-shrink:0;padding-top:1px}
.cr-step-prev-icon{width:16px;height:16px;object-fit:contain;vertical-align:middle;flex-shrink:0}
/* ─── HOW TO USE GUIDE ────────────────────────────────────── */
.guide-wrap{display:flex;gap:36px;align-items:flex-start}
.guide-sidebar{width:190px;flex-shrink:0;position:sticky;top:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 0}
.guide-nav-title{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);padding:0 16px 10px}
.guide-nav-item{display:block;padding:6px 16px;font-size:.78rem;color:var(--txt2);text-decoration:none;border-left:2px solid transparent;transition:color .15s,border-color .15s,background .15s}
.guide-nav-item:hover{color:var(--txt);background:var(--bg3)}
.guide-nav-item.active{color:var(--gold);border-left-color:var(--gold)}
.guide-nav-sub{padding-left:28px;font-size:.73rem;color:var(--txt3)}
.guide-nav-sub:hover{color:var(--txt2)}
#tab-guide{height:calc(100vh - 130px);overflow-y:auto;overflow-x:hidden}
.guide-content{flex:1;min-width:0;padding-bottom:80px;padding-right:8px}
.guide-section{margin-bottom:52px;padding-bottom:36px;border-bottom:1px solid var(--border)}
.guide-section:last-child{border-bottom:none}
.guide-h2{font-size:1.3rem;font-weight:700;color:var(--gold);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(212,162,58,.3)}
.guide-h3{font-size:.98rem;font-weight:700;color:var(--txt);margin:24px 0 8px}
.guide-p{font-size:.83rem;color:var(--txt2);line-height:1.7;margin-bottom:10px}
.guide-p-sm{font-size:.77rem;margin-top:4px;margin-bottom:0}
.guide-list{font-size:.83rem;color:var(--txt2);line-height:1.9;padding-left:20px;margin-bottom:14px}
.guide-list li{margin-bottom:2px}
.guide-list-ol{list-style:decimal}
.guide-link{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.guide-tip{font-size:.8rem;color:var(--txt2);line-height:1.6;background:rgba(212,162,58,.1);border-left:4px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:11px 16px;margin:14px 0}.guide-tip strong{color:var(--gold)}
.guide-tip-info{background:rgba(80,140,220,.1);border-left-color:#5a9fe0}.guide-tip-info strong{color:#7ab8f5}
.guide-shot-wrap{margin:16px 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:var(--bg3)}
.guide-shot{width:100%;display:block}
.guide-shot-ph{display:none;align-items:center;justify-content:center;min-height:160px;font-size:.8rem;color:var(--txt3);padding:24px;text-align:center;border:2px dashed var(--border);border-radius:var(--r)}
.guide-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
@media(max-width:700px){.guide-method-grid{grid-template-columns:1fr}}
.guide-method-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;gap:14px;align-items:flex-start}
.guide-method-num{width:28px;height:28px;border-radius:50%;background:var(--a-dim);border:1px solid var(--gold-d);color:var(--gold);font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* ── RIVALS TAB ──────────────────────────────────────────────────── */
.rv-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:24px}
.rv-search-wrap{position:relative;min-width:240px;flex:1;max-width:320px}
.rv-options{display:flex;flex-wrap:wrap;gap:10px;align-items:center;flex:1}
.rv-opt-group{display:flex;align-items:center;gap:5px}
.rv-opt-lbl{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);margin-right:2px;white-space:nowrap}
.rv-opt-btn,.rv-depth-btn{background:var(--bg2);border:1px solid var(--border);color:var(--txt2);padding:5px 11px;border-radius:var(--r-sm);font-family:inherit;font-size:.73rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.rv-opt-btn:hover,.rv-depth-btn:hover{border-color:var(--gold-d);color:var(--txt)}
.rv-opt-btn.active,.rv-depth-btn.active{background:var(--a-dim);border-color:var(--a-bdr);color:var(--gold-l)}
.rv-scan-btn{background:var(--gold);color:#0c0820;padding:10px 22px;border:none;border-radius:var(--r-sm);font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}
.rv-scan-btn:hover{background:var(--gold-l)}
.rv-scan-btn:disabled{opacity:.5;cursor:not-allowed}
.rv-progress{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px;margin-bottom:16px}
.rv-progress-lbl{font-size:.78rem;color:var(--txt2);margin-bottom:10px}
.rv-progress-bar{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.rv-progress-fill{height:100%;background:var(--gold);border-radius:3px;transition:width .3s ease}
.rv-summary{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.rv-summary-stat{font-size:.78rem;color:var(--txt2)}
.rv-summary-stat span{font-weight:700;color:var(--txt)}
.rv-filters{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.rv-filter-btn{background:var(--bg2);border:1px solid var(--border);color:var(--txt2);padding:5px 12px;border-radius:var(--r-sm);font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s}
.rv-filter-btn:hover{border-color:var(--gold-d)}
.rv-filter-btn.active{background:var(--a-dim);border-color:var(--a-bdr);color:var(--gold-l)}
.rv-sort-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.rv-sort-lbl{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3)}
.rv-sort-btn{background:none;border:none;color:var(--txt3);font-family:inherit;font-size:.72rem;cursor:pointer;padding:3px 6px;border-radius:var(--r-sm);transition:color .15s}
.rv-sort-btn:hover{color:var(--txt)}
.rv-sort-btn.active{color:var(--gold-l);font-weight:700}
.rv-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.rv-hl-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:12px}
.rv-hl-icon{font-size:1.4rem;flex-shrink:0}
.rv-hl-body{}
.rv-hl-lbl{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);margin-bottom:3px}
.rv-hl-name{font-size:.84rem;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.rv-hl-sub{font-size:.7rem;color:var(--txt3)}
.rv-list-hdr{display:grid;grid-template-columns:36px 1fr 90px 72px 80px 70px 80px;align-items:center;gap:10px;padding:6px 14px;font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--txt3);border-bottom:1px solid var(--border);margin-bottom:2px}
.rv-row-wrap{border-bottom:1px solid var(--border)}
.rv-row-wrap:last-child{border-bottom:none}
.rv-row{display:grid;grid-template-columns:36px 1fr 90px 72px 80px 70px 80px;align-items:center;gap:10px;padding:9px 14px;transition:background .12s;cursor:default}
.rv-row-wrap:hover .rv-row{background:var(--bg2)}
.rv-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:#0c0820;flex-shrink:0;overflow:hidden}
.rv-avatar-img{width:100%;height:100%;object-fit:cover}
.rv-name-wrap{min-width:0}
.rv-name{font-size:.82rem;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-country{font-size:.68rem;color:var(--txt3);font-family:'Space Mono',monospace}
.rv-record{font-size:.8rem;font-weight:700;font-family:'Space Mono',monospace}
.rv-record .w{color:#66bb6a}
.rv-record .l{color:#ef5350}
.rv-games{font-size:.78rem;color:var(--txt3);text-align:center}
.rv-civs{display:flex;align-items:center;gap:4px;font-size:.68rem;color:var(--txt3)}
.rv-civ-flag{width:20px;height:14px;object-fit:cover;border-radius:2px;background:var(--bg3)}
.rv-last{font-size:.72rem;color:var(--txt3)}
.rv-badges{display:flex;gap:4px;flex-wrap:wrap}
.rv-badge{font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:3px;white-space:nowrap}
.rv-badge.nemesis{background:rgba(239,83,80,.15);color:#ef5350;border:1px solid rgba(239,83,80,.3)}
.rv-badge.rival{background:rgba(201,168,76,.12);color:var(--gold-l);border:1px solid var(--a-bdr)}
.rv-badge.farmed{background:rgba(102,187,106,.12);color:#66bb6a;border:1px solid rgba(102,187,106,.3)}
.rv-expand-btn{background:none;border:none;cursor:pointer;color:var(--txt3);font-size:.7rem;padding:2px 5px;transition:color .15s;line-height:1;border-radius:3px}
.rv-expand-btn:hover{color:var(--txt);background:var(--bg3)}
.rv-hist-panel{padding:6px 14px 10px 60px;background:rgba(0,0,0,.12)}
.rv-hist-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);font-size:.75rem}
.rv-hist-row:last-child{border-bottom:none}
.rv-hist-result{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:3px;font-size:.65rem;font-weight:700;flex-shrink:0}
.rv-hist-result.win{background:rgba(102,187,106,.15);color:#66bb6a}
.rv-hist-result.loss{background:rgba(239,83,80,.15);color:#ef5350}
.rv-hist-civs{display:flex;align-items:center;gap:4px}
.rv-hist-arrow{color:var(--border2);font-size:.7rem}
.rv-hist-civ-ph{font-size:.7rem;color:var(--txt3);width:20px;text-align:center}
.rv-hist-date{color:var(--txt3);font-size:.7rem;margin-left:auto}
.rv-hist-empty{color:var(--txt3);font-size:.75rem;padding:8px 0}
.rv-error,.rv-empty{padding:40px 20px;text-align:center;color:var(--txt3);font-size:.85rem}
.rv-error{color:#ef5350}
@media(max-width:860px){.rv-highlights{grid-template-columns:1fr 1fr}.rv-list-hdr{display:none}.rv-row{grid-template-columns:36px 1fr auto;grid-template-rows:auto auto}.rv-civs,.rv-last,.rv-badges{display:none}.rv-hist-panel{padding:6px 10px 10px 46px}}
/* ── COMPARE TAB ─────────────────────────────────────────────────── */
.cmp-search-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cmp-player-search{position:relative;flex:1;min-width:200px}
.cmp-input-wrap{display:flex;gap:0}
.cmp-input{flex:1;background:var(--bg2);border:1px solid var(--border);border-right:none;color:var(--txt);padding:11px 14px;border-radius:var(--r-sm) 0 0 var(--r-sm);font-family:inherit;font-size:.85rem;transition:border-color .15s;box-sizing:border-box;min-width:0}
.cmp-input:focus{outline:none;border-color:var(--gold-d)}
.cmp-search-btn{background:var(--bg3);border:1px solid var(--border);color:var(--txt3);padding:0 13px;border-radius:0 var(--r-sm) var(--r-sm) 0;cursor:pointer;font-size:.9rem;transition:all .15s;flex-shrink:0}
.cmp-search-btn:hover{background:var(--a-dim);border-color:var(--gold-d);color:var(--gold)}
.cmp-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;z-index:50;display:none}
.cmp-drop.open{display:block}
.cmp-drop-row{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border)}
.cmp-drop-row:last-child{border-bottom:none}
.cmp-drop-row:hover{background:var(--bg3)}
.cmp-drop-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--bg3);flex-shrink:0}
.cmp-drop-name{font-size:.82rem;font-weight:600;color:var(--txt)}
.cmp-drop-rank{font-size:.71rem;color:var(--txt3);margin-left:auto;flex-shrink:0}
.cmp-vs-orb{width:40px;height:40px;border-radius:50%;background:var(--a-dim);border:1px solid var(--gold-d);color:var(--gold);font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cmp-go-btn{background:var(--gold);color:#0c0820;padding:11px 26px;border:none;border-radius:var(--r-sm);font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .15s;flex-shrink:0}
.cmp-go-btn:hover{background:var(--gold-l)}
.cmp-mode-strip{display:flex;gap:6px;margin-bottom:24px}
.cmp-mode-btn{background:var(--bg2);border:1px solid var(--border);color:var(--txt2);padding:6px 14px;border-radius:var(--r-sm);font-family:inherit;font-size:.74rem;font-weight:600;cursor:pointer;transition:all .15s}
.cmp-mode-btn:hover{border-color:var(--gold-d);color:var(--txt)}
.cmp-mode-btn.active{background:var(--a-dim);border-color:var(--a-bdr);color:var(--gold-l)}
.cmp-loading,.cmp-error{padding:60px 20px;text-align:center;color:var(--txt3);font-size:.9rem}
.cmp-error{color:#ef5350}
.cmp-no-mode-banner{background:rgba(239,83,80,.07);border:1px solid rgba(239,83,80,.25);color:var(--txt2);padding:14px 18px;border-radius:var(--r-sm);font-size:.82rem;margin-bottom:16px;text-align:center}
.cmp-no-mode-banner strong{color:#ef8a87}
/* ── UPPER HAND TAB ───────────────────────────────────────────────── */
/* Upper Hand — identity controls */
.uh-wrap{padding:16px 20px}
.uh-header{margin-bottom:16px}
.uh-beta-note{font-size:.75rem;color:var(--txt2);background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--r);padding:10px 14px;margin-top:10px;line-height:1.55}
.uh-identity{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.uh-id-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-bottom:7px}
.uh-id-row{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;position:relative}
.uh-scan-btn{background:var(--gold);color:#0c0820;border:none;border-radius:var(--r-sm);padding:9px 16px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.uh-scan-btn:hover{filter:brightness(1.1)}
.uh-scan-status{font-size:.73rem;color:var(--txt3);margin-top:7px}
.uh-scan-status.live{color:#54b478;font-weight:600}
.uh-scan-status.loading{color:var(--gold);animation:uh-pulse 1.2s ease-in-out infinite}
.uh-scan-status.err{color:#e05050}
@keyframes uh-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.uh-live-row{display:flex;align-items:center;gap:10px;background:rgba(84,180,120,.07);border:1px solid rgba(84,180,120,.25);border-radius:var(--r);padding:10px 14px;margin-bottom:12px;flex-wrap:wrap}
.uh-live-pill{display:flex;align-items:center;gap:7px;flex:1;min-width:180px;font-size:.85rem}
.uh-live-dot{width:7px;height:7px;border-radius:50%;background:#54b478;box-shadow:0 0 5px #54b478;flex-shrink:0;animation:uh-pulse 1.5s ease-in-out infinite}
.uh-live-you{font-weight:700;color:var(--txt)}
.uh-live-vs{color:var(--txt3);font-size:.75rem}
.uh-live-opp{font-weight:700;color:#e0a020}
.uh-live-civ{font-size:.75rem;color:var(--txt3)}
.uh-report-btn{background:var(--accent);color:#fff;border:none;border-radius:var(--r-sm);padding:8px 18px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.uh-report-btn:hover{filter:brightness(1.12)}
.uh-report-btn:disabled{opacity:.45;cursor:not-allowed}
.uh-test-btn{background:transparent;border:1px solid var(--border);color:var(--txt3);padding:6px 10px;border-radius:var(--r-sm);font-size:.75rem;cursor:pointer;white-space:nowrap}
.uh-test-btn:hover{border-color:var(--accent);color:var(--txt)}
.uh-loading,.uh-empty{padding:28px;text-align:center;color:var(--txt3);font-size:.85rem}
/* Report wrapper + view toggle */
.uh-rw{border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.uh-view-toggle{display:flex;background:var(--bg2);border-bottom:1px solid var(--border)}
.uh-vt-btn{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--txt3);padding:10px 20px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.02em;transition:color .15s,border-color .15s}
.uh-vt-btn:hover{color:var(--txt)}
.uh-vt-btn.active{color:var(--gold);border-bottom-color:var(--gold)}
/* Battle Plan view */
.uh-bp{padding:20px 22px;display:flex;flex-direction:column;gap:18px;background:var(--bg)}
.uh-bp-summary{font-size:.95rem;color:var(--txt2);line-height:1.6;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.uh-bp-summary strong{color:var(--txt)}
.uh-bp-form{display:flex;gap:3px}
.uh-bp-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.uh-bp-card{background:var(--bg2);border:1px solid var(--border);border-left:3px solid;border-radius:var(--r-sm);padding:13px 15px;display:flex;flex-direction:column;gap:6px}
.uh-bp-card--high{background:rgba(208,107,98,.07)}
.uh-bp-card--medium{background:rgba(224,144,64,.05)}
.uh-bp-card--low{background:rgba(77,148,214,.05)}
.uh-bp-card-top{display:flex;align-items:center;gap:8px}
.uh-bp-num{font-size:.62rem;font-weight:800;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--txt3);line-height:1}
.uh-bp-icon{font-size:.88rem;flex-shrink:0;line-height:1}
.uh-bp-title{font-size:.86rem;font-weight:700;color:var(--txt);line-height:1.3}
.uh-bp-detail{font-size:.76rem;color:var(--txt2);line-height:1.55;padding-left:26px}
.uh-bp-scout{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding-top:14px;border-top:1px solid var(--border)}
.uh-bp-scout-lbl{font-size:.72rem;font-weight:700;color:var(--txt3);white-space:nowrap;margin-right:2px}
.uh-bp-scout-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px 9px;font-size:.72rem;color:var(--txt2)}
/* Intel Brief view */
.ib-wrap{padding:20px 22px;display:flex;flex-direction:column;gap:18px;background:var(--bg)}
.ib-sec{display:flex;flex-direction:column;gap:8px}
.ib-sec-hdr{font-size:.62rem;font-weight:800;letter-spacing:.1em;color:var(--txt3);padding-bottom:6px;border-bottom:1px solid var(--border)}
/* Threat banner */
.ib-threat{border:1px solid;border-radius:var(--r-sm);padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.ib-tl-block{display:flex;flex-direction:column;gap:2px}
.ib-tl-lbl{font-size:.58rem;font-weight:800;letter-spacing:.1em;opacity:.8}
.ib-tl-name{font-size:1.5rem;font-weight:900;letter-spacing:.04em;line-height:1}
.ib-conf-block{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.ib-conf-lbl{font-size:.58rem;font-weight:700;color:var(--txt3);letter-spacing:.08em}
.ib-conf-bar{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;width:110px}
.ib-conf-fill{height:100%;border-radius:3px;transition:width .4s ease}
.ib-conf-val{font-size:.8rem;font-weight:700;color:var(--txt)}
.ib-identity-row{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.ib-army-badge{font-size:.7rem;font-weight:800;letter-spacing:.07em;border:1px solid;border-radius:var(--r-sm);padding:3px 10px;white-space:nowrap}
.ib-army-desc{font-size:.76rem;color:var(--txt2);line-height:1.4}
/* Gameplan assessment */
.ib-gp-list{display:flex;flex-direction:column;gap:7px}
.ib-gp-row{display:grid;grid-template-columns:140px 1fr 40px;align-items:center;gap:10px}
.ib-gp-name{font-size:.76rem;color:var(--txt3)}
.ib-gp-row--top .ib-gp-name{color:var(--txt);font-weight:600}
.ib-gp-track{height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.ib-gp-fill{height:100%;border-radius:3px;transition:width .4s ease}
.ib-gp-pct{font-size:.7rem;color:var(--txt3);text-align:right}
.ib-gp-pct--hi{font-weight:700}
/* Danger timeline */
.ib-timeline{display:flex;align-items:flex-start;gap:0;position:relative;padding:8px 0}
.ib-timeline::before{content:'';position:absolute;top:16px;left:8px;right:8px;height:1px;background:rgba(255,255,255,.08)}
.ib-tw-ev{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;position:relative;z-index:1}
.ib-tw-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0}
.ib-tw-time{font-size:.78rem;font-weight:800;line-height:1;text-align:center}
.ib-tw-lbl{font-size:.62rem;color:var(--txt3);text-align:center;white-space:nowrap}
/* Behavioral patterns */
.ib-pat-list{display:flex;flex-direction:column;gap:6px}
.ib-pat-row{display:grid;grid-template-columns:150px 1fr 44px 72px;align-items:center;gap:10px}
.ib-pat-lbl{font-size:.76rem;color:var(--txt2)}
.ib-pat-track{height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.ib-pat-fill{height:100%;border-radius:3px}
.ib-pat-n{font-size:.7rem;color:var(--txt3);text-align:right}
.ib-pat-freq{font-size:.6rem;font-weight:800;letter-spacing:.07em;text-align:right}
/* Tactical response stack */
.ib-tac-list{display:flex;flex-direction:column;gap:7px}
.ib-tac-row{display:flex;align-items:flex-start;gap:10px}
.ib-tac-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;flex-shrink:0;margin-top:1px}
.ib-tac-badge{font-size:.57rem;font-weight:800;letter-spacing:.08em;min-width:56px;padding-top:4px;flex-shrink:0}
.ib-tac-body{display:flex;flex-direction:column;gap:3px}
.ib-tac-title{font-size:.82rem;font-weight:700;color:var(--txt);line-height:1.3}
.ib-tac-detail{font-size:.72rem;color:var(--txt2);line-height:1.5}
/* Scout priority */
.ib-scout-list{display:flex;flex-direction:column;gap:6px}
.ib-scout-row{display:grid;grid-template-columns:20px 1fr 72px;align-items:center;gap:10px}
.ib-scout-n{font-size:.82rem;font-weight:800;text-align:center}
.ib-scout-body{display:flex;flex-direction:column;gap:2px}
.ib-scout-tgt{font-size:.78rem;font-weight:600;color:var(--txt)}
.ib-scout-why{font-size:.68rem;color:var(--txt3)}
.ib-scout-urg{font-size:.57rem;font-weight:800;letter-spacing:.07em;border:1px solid;border-radius:var(--r-sm);padding:2px 6px;text-align:center;white-space:nowrap}
/* Dashboard shell */
.uh-dash{display:flex;flex-direction:column;gap:0;background:var(--bg);overflow:hidden}
/* Banner */
.uh-banner{display:flex;align-items:center;gap:14px;background:var(--bg2);padding:14px 18px;border-bottom:1px solid var(--border)}
.uh-banner-flag{flex-shrink:0;line-height:0}
.uh-banner-info{min-width:0;max-width:200px}
.uh-banner-name{font-size:1.15rem;font-weight:800;color:var(--txt);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uh-banner-sub{font-size:.73rem;color:var(--txt3);margin-top:2px}
.uh-banner-center{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.uh-form-row{display:flex;gap:3px;align-items:center;flex-wrap:wrap;justify-content:center}
.uh-fb{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;font-size:.7rem;font-weight:800}
.uh-fb.w{background:rgba(84,180,120,.2);color:#54b478}
.uh-fb.l{background:rgba(224,80,80,.15);color:#e05050}
.uh-wr-txt{font-size:.72rem;color:var(--txt3)}
.uh-banner-badges{display:flex;align-items:center;gap:8px;flex-shrink:0}
.uh-style-pill{border:1px solid;border-radius:var(--r-sm);padding:4px 12px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.uh-stat-mini{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 9px;background:var(--bg3);border-radius:var(--r-sm);border:1px solid var(--border)}
.uh-stat-mini strong{font-size:.88rem;font-weight:800;color:var(--txt);line-height:1}
.uh-sml{font-size:.58rem;color:var(--txt3);text-transform:uppercase;letter-spacing:.05em;line-height:1}
/* Profile row: radar + tiles + chips */
.uh-profile{display:flex;gap:0;border-bottom:1px solid var(--border);align-items:stretch}
.uh-radar{flex:0 0 auto;padding:18px 12px 14px 18px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border)}
.uh-keys{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;padding:14px 16px;border-right:1px solid var(--border);align-content:start}
.uh-tile{padding:8px 10px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.04)}
.uh-tile:nth-child(3n){border-right:none}
.uh-tile:nth-last-child(-n+3){border-bottom:none}
.uh-tile-val{font-size:1.1rem;font-weight:800;color:var(--txt);line-height:1}
.uh-tile-lbl{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt2)}
.uh-tile-sub{font-size:.62rem;color:#e07030;font-weight:600;margin-top:1px}
.uh-tile--warn .uh-tile-val{color:#e07030}
.uh-chips{flex:1;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.uh-chips-lbl{font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);margin-bottom:4px}
.uh-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.06);font-size:.75rem}
.uh-chip-lbl{color:var(--txt2);flex:1}
.uh-chip-val{font-weight:700;color:var(--txt);white-space:nowrap;font-size:.72rem}
.uh-chip--active .uh-chip-lbl{color:var(--txt)}
.uh-chip--danger.uh-chip--active{border-color:rgba(208,107,98,.4);background:rgba(208,107,98,.08)}
.uh-chip--danger.uh-chip--active .uh-chip-lbl{color:#d06b62}
.uh-chip--mil.uh-chip--active{border-color:rgba(224,112,48,.35);background:rgba(224,112,48,.07)}
.uh-chip--mil.uh-chip--active .uh-chip-lbl{color:#e07030}
.uh-chip--eco.uh-chip--active{border-color:rgba(84,180,120,.35);background:rgba(84,180,120,.07)}
.uh-chip--eco.uh-chip--active .uh-chip-lbl{color:#54b478}
.uh-chip--def.uh-chip--active{border-color:rgba(74,144,128,.4);background:rgba(74,144,128,.08)}
.uh-chip--def.uh-chip--active .uh-chip-lbl{color:#4a9080}
.uh-chip-note{font-size:.72rem;color:var(--txt3);padding:2px 4px}
.uh-chip-note strong{color:var(--txt2)}
/* Sections */
.uh-section{padding:14px 18px;border-bottom:1px solid var(--border)}
.uh-section:last-of-type{border-bottom:none}
.uh-sec-lbl{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);margin-bottom:10px}
.uh-sec-sub{font-weight:400;letter-spacing:0;text-transform:none;opacity:.6;font-size:.6rem}
.uh-dim{font-size:.75rem;color:var(--txt3);padding:2px 0}
/* Bar charts */
.uh-bars{display:flex;flex-direction:column;gap:5px}
.uh-bar-row{display:grid;grid-template-columns:120px 1fr 36px;align-items:center;gap:10px}
.uh-bar-lbl{font-size:.78rem;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uh-bar-track{height:8px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.uh-bar-fill{height:100%;background:#4d94d6;border-radius:4px;transition:width .35s ease}
.uh-bar-cnt{font-size:.7rem;color:var(--txt2);text-align:right;font-variant-numeric:tabular-nums}
/* Civ pills */
.uh-civ-pills{display:flex;flex-wrap:wrap;gap:6px}
.uh-civ-pill{display:inline-flex;align-items:center;gap:5px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 9px;font-size:.76rem;color:var(--txt)}
.uh-civ-pill-n{color:var(--txt3);font-size:.7rem;margin-left:2px}
/* Intel category cards */
.uh-intel-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.uh-intel-cats{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.uh-intel-cats{grid-template-columns:1fr}}
.uh-ic{border-left:3px solid;border-radius:var(--r-sm);padding:10px 12px}
.uh-ic--threat{border-color:#d06b62;background:rgba(208,107,98,.08)}
.uh-ic--timing{border-color:#e09040;background:rgba(224,144,64,.06)}
.uh-ic--build{border-color:#4d94d6;background:rgba(77,148,214,.06)}
.uh-ic--eco{border-color:#54b478;background:rgba(84,180,120,.06)}
.uh-ic-hdr{font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.uh-ic--threat .uh-ic-hdr{color:#d06b62}
.uh-ic--timing .uh-ic-hdr{color:#e09040}
.uh-ic--build .uh-ic-hdr{color:#4d94d6}
.uh-ic--eco .uh-ic-hdr{color:#54b478}
/* Freq rows (threats) */
.uh-fr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.uh-fr:last-of-type{border-bottom:none}
.uh-fr-lbl{font-size:.76rem;color:var(--txt2);flex:1;min-width:0}
.uh-fr-sub{color:var(--txt3);font-size:.7rem}
.uh-fr--hi .uh-fr-lbl{color:#fff;font-weight:600}
.uh-fr-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.uh-fr-track{width:56px;height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.uh-fr-fill{height:100%;background:rgba(255,255,255,.3);border-radius:3px}
.uh-fr--hi .uh-fr-fill{background:#d06b62}
.uh-fr-n{font-size:.68rem;color:var(--txt3);width:24px;text-align:right;font-variant-numeric:tabular-nums}
.uh-fr--hi .uh-fr-n{color:#d06b62;font-weight:700}
.uh-fr-empty{font-size:.74rem;color:var(--txt3);padding:4px 0}
/* Val rows (timings / eco) */
.uh-vr{display:flex;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.uh-vr:last-of-type{border-bottom:none}
.uh-vr-val{font-size:.95rem;font-weight:800;color:var(--txt);line-height:1;white-space:nowrap;min-width:38px}
.uh-vr-lbl{font-size:.72rem;color:var(--txt2);line-height:1.3}
.uh-vr--warn .uh-vr-val{color:#e07030}
.uh-vr--warn .uh-vr-lbl{color:#e07030}
/* Notes */
.uh-ic-note{font-size:.73rem;color:var(--txt2);padding:5px 0 3px;border-top:1px solid rgba(255,255,255,.06);margin-top:4px}
.uh-ic-note.warn{color:#e09040;font-weight:600}
.uh-ic-note strong{color:var(--txt)}
/* Game history table */
.uh-table-wrap{overflow-x:auto}
.uh-pg-table{width:100%;border-collapse:collapse;font-size:.75rem}
.uh-pg-table thead tr{background:var(--bg2)}
.uh-pg-table th{padding:6px 10px;color:var(--txt3);font-weight:600;font-size:.63rem;letter-spacing:.07em;text-transform:uppercase;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border)}
.uh-pg-table td{padding:5px 10px;color:var(--txt2);border-bottom:1px solid rgba(255,255,255,.04);white-space:nowrap}
.uh-pg-table tbody tr:last-child td{border-bottom:none}
.uh-pg-table tbody tr:hover{background:rgba(255,255,255,.03)}
.uh-pg-result{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;font-size:.72rem;font-weight:800}
.uh-pg-result.w{background:rgba(84,180,120,.2);color:#54b478}
.uh-pg-result.l{background:rgba(224,80,80,.15);color:#e05050}
.uh-pg-style{font-size:.7rem;font-weight:700}
.uh-pg-map{color:var(--txt3);max-width:120px;overflow:hidden;text-overflow:ellipsis}
.uh-footer{font-size:.67rem;color:var(--txt3);text-align:center;padding:10px 18px;border-top:1px solid var(--border)}
/* Analysis tab */
.an-wrap{padding:18px 20px}
.an-url-row{display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.an-url-input{flex:1;min-width:200px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--txt);font-size:.85rem;padding:8px 12px;outline:none}
.an-url-input:focus{border-color:var(--accent)}
.an-url-btn{background:var(--accent);color:#fff;border:none;border-radius:var(--r-sm);padding:8px 18px;font-size:.85rem;cursor:pointer;white-space:nowrap}
.an-url-btn:hover{filter:brightness(1.1)}
.an-paste-toggle{background:var(--bg3);color:var(--txt2);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 14px;font-size:.82rem;cursor:pointer;white-space:nowrap}
.an-paste-toggle:hover{border-color:var(--accent);color:var(--txt)}
.an-paste-area{width:100%;height:180px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--txt);font-size:.75rem;padding:10px 12px;resize:vertical;outline:none;font-family:monospace;box-sizing:border-box;margin-bottom:8px}
.an-paste-area:focus{border-color:var(--accent)}
.an-hint{color:var(--txt3);font-size:.74rem;margin-bottom:16px}
/* Game card */
.an-game-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:4px}
.an-game-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px;align-items:center}
.an-game-map{font-weight:600;font-size:.9rem;color:var(--txt)}
.an-game-detail{font-size:.78rem;color:var(--txt2)}
/* Player cards */
.an-players{display:flex;flex-direction:column;gap:8px}
.an-player-card{display:flex;align-items:center;gap:12px;background:var(--bg3);border-radius:var(--r-sm);padding:10px 12px}
.an-player-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.an-civ-flag{width:28px;height:20px;object-fit:cover;border-radius:2px;flex-shrink:0}
.an-player-name{font-size:.88rem;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-player-civ{font-size:.74rem;color:var(--txt3)}
.an-result{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;border-radius:3px;font-size:.72rem;font-weight:700;flex-shrink:0}
.an-win{background:rgba(102,187,106,.15);color:#66bb6a}
.an-loss{background:rgba(239,83,80,.15);color:#ef5350}
.an-import-btn{background:var(--accent);color:#fff;border:none;border-radius:var(--r-sm);padding:6px 14px;font-size:.78rem;cursor:pointer;white-space:nowrap;flex-shrink:0}
.an-import-btn:hover{filter:brightness(1.12)}
.an-no-build{font-size:.74rem;color:var(--txt3);flex-shrink:0}
/* Raw JSON collapsible */
.an-json-wrap{border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.an-json-summary{padding:8px 14px;font-size:.78rem;color:var(--txt3);cursor:pointer;user-select:none;background:var(--bg2)}
.an-json-summary:hover{color:var(--txt)}
.an-json{background:var(--bg);padding:14px;font-size:.7rem;line-height:1.5;overflow:auto;max-height:500px;white-space:pre;color:var(--txt);margin:0}
.an-loading{padding:40px 20px;text-align:center;color:var(--txt3);font-size:.85rem}
.an-error{padding:16px;background:rgba(239,83,80,.07);border:1px solid rgba(239,83,80,.25);border-radius:var(--r-sm);color:#ef8a87;font-size:.82rem}
.an-api-notice{padding:14px 16px;background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.25);border-radius:var(--r-sm);color:var(--txt2);font-size:.8rem;line-height:1.6;margin-top:10px}
/* ─── TEAM GAME REPORT ───────────────────────────────────────────── */
.an-team-report{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.an-team{border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.an-team--win{border-top:2px solid var(--green-l)}
.an-team--loss{border-top:2px solid var(--red-l)}
.an-team-hdr{display:flex;align-items:center;gap:10px;background:var(--bg3);padding:7px 12px;border-bottom:1px solid var(--border)}
.an-team-size{font-size:.68rem;color:var(--txt3);font-weight:600;letter-spacing:.04em}
.an-team-hint{font-size:.64rem;color:var(--txt3);margin-left:auto;opacity:.6}
/* Player row — is a summary */
.an-tp-wrap{border-bottom:1px solid var(--border)}
.an-tp-wrap:last-child{border-bottom:none}
.an-tp-wrap[open] .an-tp-toggle{transform:rotate(90deg)}
.an-tp{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg2);cursor:pointer;list-style:none;user-select:none}
.an-tp::-webkit-details-marker{display:none}
.an-tp:hover{background:var(--bg3)}
.an-tp-toggle{font-size:.6rem;color:var(--txt3);transition:transform .15s;flex-shrink:0}
.an-tp-flag{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.an-tp-flag img{width:100%;height:100%;object-fit:contain}
.an-tp-id{min-width:110px;max-width:140px;display:flex;flex-direction:column}
.an-tp-name{font-size:.82rem;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-tp-civ{font-size:.68rem;color:var(--txt3);margin-top:1px}
.an-tp-stats{display:flex;gap:14px;flex:1;flex-wrap:wrap}
.an-ts{display:flex;flex-direction:column;align-items:center;min-width:42px}
.an-ts-v{font-size:.82rem;font-weight:700;color:var(--txt);font-family:'Space Mono',monospace}
.an-ts-l{font-size:.58rem;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;white-space:nowrap}
.an-tp-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;min-width:80px}
.an-tp-style{font-size:.62rem;font-weight:800;letter-spacing:.06em}
.an-tp-units{font-size:.65rem;color:var(--txt3);text-align:right;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-tp-rating{font-size:.72rem;color:var(--txt2);white-space:nowrap}
.an-gain{color:var(--green-l);font-weight:700}
.an-loss-r{color:var(--red-l);font-weight:700}
/* Expanded player stats */
.an-xp{padding:14px 16px;background:var(--bg);border-top:1px solid var(--border)}
.an-xp-cols{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:16px}
.an-xp-col{display:flex;flex-direction:column;gap:5px}
.an-xp-hdr{font-size:.58rem;font-weight:800;letter-spacing:.1em;color:var(--txt3);text-transform:uppercase;padding-bottom:5px;border-bottom:1px solid var(--border);margin-bottom:3px}
.an-xp-row{display:flex;justify-content:space-between;gap:8px}
.an-xp-lbl{font-size:.72rem;color:var(--txt3)}
.an-xp-val{font-size:.72rem;font-weight:700;color:var(--txt);font-family:'Space Mono',monospace}
.an-xp-lms{display:flex;flex-direction:column;gap:3px}
.an-xp-lm{font-size:.7rem;color:var(--txt2)}
.an-xp-dim{font-size:.7rem;color:var(--txt3)}
.an-xp-bar{display:grid;grid-template-columns:90px 1fr 28px;align-items:center;gap:7px}
.an-xp-bar-lbl{font-size:.7rem;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-xp-bar-track{height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.an-xp-bar-fill{height:100%;background:var(--gold);border-radius:3px}
.an-xp-bar-val{font-size:.68rem;color:var(--txt3);text-align:right}
@media(max-width:700px){.an-xp-cols{grid-template-columns:1fr 1fr}.an-xp-col--wide{grid-column:1/-1}}
@media(max-width:500px){.an-tp-stats{gap:8px}.an-tp-right{display:none}}
/* ── Why did I lose ── */
.wl-wrap{margin-top:10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px}
.wl-hdr{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--txt3);font-weight:700;margin-bottom:12px;font-family:'Space Mono',monospace}
.wl-primary{background:rgba(239,83,80,.06);border:1px solid rgba(239,83,80,.18);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:10px}
.wl-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.wl-cat{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--txt3)}
.wl-badge{margin-left:auto;display:inline-flex;padding:2px 8px;border-radius:3px;font-size:.62rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.wl-badge-h{background:rgba(239,83,80,.15);color:#ef8a87}
.wl-badge-m{background:rgba(255,167,38,.1);color:#ffb74d}
.wl-headline{font-size:.92rem;font-weight:700;color:var(--txt);margin-bottom:6px}
.wl-detail{font-size:.78rem;color:var(--txt2);line-height:1.65}
.wl-factors{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.wl-factor{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px}
.wl-f-headline{font-size:.82rem;font-weight:700;color:var(--txt);margin-bottom:4px}
.wl-f-detail{font-size:.74rem;color:var(--txt2);line-height:1.55}
.wl-empty{font-size:.8rem;color:var(--txt3);padding:4px 0}
/* ── Game Report Card (Visual Dashboard) ──────────────────────── */
.rc{margin-top:16px;display:flex;flex-direction:column;gap:10px}
/* player header */
.rc-header{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch}
@media(max-width:440px){.rc-header{grid-template-columns:1fr}.rc-vs{display:none}}
.rc-ph{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r)}
.rc-ph-r{flex-direction:row-reverse}
.rc-ph-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rc-ph-info{flex:1;min-width:0}.rc-ph-info-r{text-align:right}
.rc-ph-name{font-size:.88rem;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-ph-civ{font-size:.7rem;color:var(--txt3);margin-top:1px}
.rc-ph-res{font-family:'Space Mono',monospace;font-size:.62rem;font-weight:700;padding:3px 7px;border-radius:3px;flex-shrink:0;letter-spacing:.05em}
.rc-res-w{background:rgba(84,180,120,.15);color:#54b478}.rc-res-l{background:rgba(208,107,98,.1);color:#d06b62}
.rc-vs{display:flex;align-items:center;justify-content:center;width:34px;height:34px;align-self:center;border-radius:50%;background:var(--bg3);border:1px solid var(--border2);font-size:.62rem;font-weight:700;color:var(--txt3);font-family:'Space Mono',monospace;flex-shrink:0}
/* panels */
.rc-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px}
.rc-ptitle{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rc-ptitle-note{text-transform:none;letter-spacing:0;font-weight:400;font-size:.62rem;margin-left:auto;color:var(--txt3)}
.rc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.rc-grid2{grid-template-columns:1fr}}
/* timeline */
.rc-tl-svg{display:block;border-radius:4px;overflow:hidden}
/* age timings */
.rc-age-hdr{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-bottom:6px;font-size:.72rem;font-weight:700;color:var(--txt)}
.rc-age-hdr span:last-child{text-align:right}
.rc-age-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;padding:6px 0;border-top:1px solid var(--border)}
.rc-age-mid{font-size:.68rem;color:var(--txt3);text-align:center;align-self:center;white-space:nowrap}
.rc-age-cell{display:flex;flex-direction:column;gap:2px}
.rc-age-cell-r{align-items:flex-end;text-align:right}
.rc-age-t{font-family:'Space Mono',monospace;font-size:.82rem;font-weight:700;color:var(--txt);display:flex;align-items:center;gap:4px}
.rc-age-trophy{color:var(--gold);font-size:.7rem}
.rc-age-lm{font-size:.62rem;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
/* stat comparison cards */
.rc-sg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:380px){.rc-sg{grid-template-columns:1fr}}
.rc-sc{background:var(--bg3);border-radius:var(--r-sm);padding:8px 10px}
.rc-sc-lbl{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--txt3);margin-bottom:5px}
.rc-sc-body{display:flex;align-items:center;gap:6px}
.rc-sc-v{font-family:'Space Mono',monospace;font-size:.8rem;font-weight:700;color:var(--txt);min-width:34px;flex-shrink:0}
.rc-sc-vr{text-align:right}.rc-scw{font-weight:700!important}
.rc-sc-bars{flex:1;display:flex;flex-direction:column;gap:2px}
.rc-sc-t{height:4px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden}
.rc-sc-f{height:100%;border-radius:2px;transition:width .5s ease}
.rc-sc-f0{background:#a07ce0}.rc-sc-f1{background:#e07030}
/* sparklines */
.rc-spark-box{background:var(--bg3);border-radius:4px;padding:4px;height:56px;overflow:hidden}
.rc-spark-svg{display:block}
.rc-spark-legend{display:flex;align-items:center;gap:5px;margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400;font-size:.62rem;color:var(--txt2)}
.rc-sdot{display:inline-block;width:7px;height:7px;border-radius:50%}
.rc-spark-pl{font-size:.68rem;font-weight:600;margin-bottom:3px}
/* eco efficiency */
.rc-eff-row{display:flex;align-items:center;gap:10px}
.rc-eff-cell{flex:1;text-align:center}
.rc-eff-name{font-size:.7rem;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-eff-pct{font-family:'Space Mono',monospace;font-size:1.5rem;font-weight:700;line-height:1}
.rc-eff-sub{font-size:.6rem;color:var(--txt3);margin-top:2px}
.rc-eff-div{width:1px;height:56px;background:var(--border);flex-shrink:0}
/* idle bars (mirrored) */
.rc-ib-row{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;padding:4px 0;align-items:center}
.rc-ib-l,.rc-ib-r{display:flex;align-items:center;gap:4px}
.rc-ib-track{flex:1;height:5px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden;min-width:16px}
.rc-ib-tl{transform:scaleX(-1)}
.rc-ib-fill{height:100%;border-radius:2px;transition:width .5s ease}
.rc-ib-val{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--txt);flex-shrink:0}
.rc-ib-mid{font-size:.68rem;color:var(--txt3);text-align:center;white-space:nowrap}
.rc-ib-g{font-size:.65rem;font-weight:700;flex-shrink:0}
/* production float */
.rc-pf-row{display:flex;align-items:center;gap:8px}
.rc-pf-bars{flex:1;display:flex;flex-direction:column;gap:3px}
.rc-pf-t{height:5px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden}
.rc-pf-f{height:100%;border-radius:2px;transition:width .5s ease}
/* army / donut */
.rc-army{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rc-donut{flex-shrink:0}
.rc-leg{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.rc-leg-item{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-leg-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.rc-leg-pct{color:var(--txt3);font-size:.68rem;margin-left:auto;flex-shrink:0}
.rc-scout{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--border)}
.rc-prod-row{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}
.rc-scout-lbl{font-size:.62rem;color:var(--txt3);text-transform:uppercase;letter-spacing:.07em;flex-shrink:0}
.rc-bdg{font-size:.65rem;font-weight:700;font-family:'Space Mono',monospace;padding:2px 7px;border-radius:3px}
.rc-bdg-ok{background:rgba(84,180,120,.15);color:#54b478}
.rc-bdg-bad{background:rgba(208,107,98,.1);color:#d06b62}
.rc-bdg-n{background:rgba(255,255,255,.05);color:var(--txt3)}
.rc-dim{font-size:.7rem;color:var(--txt3)}
/* style badge in player header */
.rc-ph-meta{display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap}
.rc-ph-meta-r{justify-content:flex-end}
.rc-style-badge{font-family:'Space Mono',monospace;font-size:.58rem;font-weight:700;letter-spacing:.08em;padding:2px 6px;border-radius:3px;border:1px solid currentColor;opacity:.9;white-space:nowrap;flex-shrink:0}
/* decisive moment callout */
.rc-decisive{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid;border-radius:var(--r);overflow:hidden}
.rc-decisive-marker{width:3px;height:40px;border-radius:2px;flex-shrink:0}
.rc-decisive-body{flex:1;min-width:0}
.rc-decisive-title{font-family:'Space Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.06em;margin-bottom:3px}
.rc-decisive-desc{font-size:.78rem;color:var(--txt2);line-height:1.4}
.rc-decisive-desc strong{color:var(--txt);font-weight:700}
/* dual rate chart rows */
.rc-dc-grid{display:flex;flex-direction:column;gap:6px}
.rc-dc-row{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center}
.rc-dc-lbl{font-size:.62rem;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em;text-align:right}
.rc-dc-wrap{background:var(--bg3);border-radius:4px;padding:3px;height:60px;overflow:hidden;position:relative;cursor:crosshair}
/* age-up efficiency */
.rc-stock-section{display:flex;flex-direction:column;gap:0}
.rc-stock-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rc-stock-age{font-size:.68rem;font-weight:600;color:var(--txt2);min-width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-stock-pill{display:flex;align-items:center;gap:4px;background:var(--bg3);border-radius:4px;padding:4px 8px}
.rc-stock-lbl{font-size:.62rem;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.rc-stock-r{display:flex;gap:5px}
.rc-stock-f{font-family:'Space Mono',monospace;font-size:.65rem;color:#54b478}
.rc-stock-g{font-family:'Space Mono',monospace;font-size:.65rem;color:#e8c040}
.rc-stock-w{font-family:'Space Mono',monospace;font-size:.65rem;color:#c08040}
.rc-stock-grade{font-family:'Space Mono',monospace;font-size:.62rem;font-weight:700}
/* combat pressure chart */
.rc-pw-wrap{cursor:crosshair}
.rc-pressure-svg{display:block;border-radius:4px;overflow:hidden}
.rc-pressure-ticks{display:flex;justify-content:space-between;font-size:.58rem;color:var(--txt3);font-family:'Space Mono',monospace;margin-top:2px;padding:0 1px;overflow:hidden}
.rc-pressure-ticks span{flex:1;text-align:center;overflow:hidden;text-overflow:clip;white-space:nowrap}
/* combined resource chart */
.rc-dc-combined{background:var(--bg3);border-radius:4px;padding:3px;height:90px;overflow:hidden;position:relative;cursor:crosshair}
.rc-combined-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.rc-cleg-item{display:flex;align-items:center;gap:4px;font-size:.62rem;color:var(--txt2)}
.rc-cleg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rc-cleg-line{display:inline-block;width:18px;height:0;flex-shrink:0}
.rc-cleg-solid{border-top:2px solid currentColor}
.rc-cleg-sep{flex:1}
/* villager deaths totals row */
.rc-vd-header{display:flex;justify-content:space-between;font-family:'Space Mono',monospace;font-size:.65rem;font-weight:700;margin-bottom:5px;padding:0 2px}
/* chart cursor line & tooltip */
.rc-vcursor{position:absolute;top:3px;bottom:3px;width:1px;background:rgba(255,255,255,0.3);pointer-events:none;transform:translateX(-50%)}
.rc-tip{position:fixed;background:#16121f;border:1px solid #2e2550;border-radius:7px;padding:9px 13px;pointer-events:none;z-index:9999;min-width:130px;box-shadow:0 10px 28px rgba(0,0,0,.85);display:none}
.rc-tip-t{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--txt3);margin-bottom:6px}
.rc-tip-r{font-family:'Space Mono',monospace;font-size:.82rem;font-weight:700;line-height:1.6}
.rc-tip-u{font-size:.62rem;font-weight:400;color:var(--txt3);margin-left:1px}
.rc-tip-row{display:flex;align-items:center;gap:7px;padding:2px 0}
.rc-tip-res{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;min-width:32px}
.rc-tip-sep{font-size:.6rem;color:var(--txt3);flex:1;text-align:center}
/* donut segment hover */
.rc-donut circle{transition:stroke-opacity .12s,filter .12s}
.rc-donut circle:hover{stroke-opacity:1;filter:brightness(1.2)}
/* Hero cards */
.cmp-hero{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-bottom:20px}
.cmp-hero-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px;display:flex;align-items:center;gap:14px}
.cmp-hero-card.right{flex-direction:row-reverse;text-align:right}
.cmp-hero-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--border2);flex-shrink:0}
.cmp-hero-avatar-ph{width:56px;height:56px;border-radius:50%;background:var(--bg3);flex-shrink:0}
.cmp-hero-name{font-size:1rem;font-weight:700;color:var(--txt);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-hero-rank{font-size:.78rem;font-weight:600;margin-bottom:2px}
.cmp-hero-rating{font-size:1.25rem;font-weight:700;color:var(--txt);font-family:'Space Mono',monospace}
.cmp-hero-country{font-size:.68rem;color:var(--txt3);font-family:'Space Mono',monospace}
.cmp-hero-vs{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.cmp-hero-vs-orb{width:52px;height:52px;border-radius:50%;background:var(--a-dim);border:2px solid var(--gold-d);color:var(--gold);font-size:1.1rem;display:flex;align-items:center;justify-content:center}
.cmp-hero-vs-lbl{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
/* Duel bar */
.cmp-duel-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;margin-bottom:16px}
.cmp-duel-lbl{font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--txt3);margin-bottom:10px;text-align:center}
.cmp-duel-names{display:flex;justify-content:space-between;font-size:.78rem;font-weight:700;color:var(--txt);margin-bottom:6px}
.cmp-duel-bar{height:12px;border-radius:6px;background:var(--bg3);overflow:hidden;display:flex}
.cmp-duel-fill-a{height:100%;background:var(--gold);border-radius:6px 0 0 6px;transition:width .5s ease}
.cmp-duel-fill-b{height:100%;background:#5c9bd6;border-radius:0 6px 6px 0;transition:width .5s ease}
.cmp-duel-pcts{display:flex;justify-content:space-between;font-size:.72rem;color:var(--txt3);margin-top:5px}
.cmp-duel-edge{text-align:center;font-size:.72rem;color:var(--txt3);margin-top:6px}
.cmp-duel-edge span{color:var(--gold-l);font-weight:600}
/* Grid layout */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
/* Season chart */
.cmp-chart-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:16px}
.cmp-chart-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cmp-chart-title{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--txt3)}
.cmp-chart-legend{display:flex;gap:16px}
.cmp-legend-item{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--txt2)}
.cmp-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cmp-chart-svg{width:100%;overflow:visible;display:block}
.cmp-chart-tooltip{position:absolute;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:7px 11px;font-size:.74rem;color:var(--txt);pointer-events:none;opacity:0;transition:opacity .12s;z-index:40;white-space:nowrap}
.cmp-chart-container{position:relative}
/* Stats table */
.cmp-stats-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.cmp-stats-hdr{padding:10px 16px;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);border-bottom:1px solid var(--border)}
.cmp-stats-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:9px 16px;border-bottom:1px solid var(--border);gap:8px}
.cmp-stats-row:last-child{border-bottom:none}
.cmp-stat-val-a{font-size:.82rem;font-weight:700;color:var(--txt);text-align:left}
.cmp-stat-val-b{font-size:.82rem;font-weight:700;color:var(--txt);text-align:right}
.cmp-stat-val-a.winner,.cmp-stat-val-b.winner{color:var(--gold-l)}
.cmp-stat-lbl{font-size:.67rem;color:var(--txt3);text-align:center;white-space:nowrap}
/* Civ pool */
.cmp-civ-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.cmp-civ-hdr{padding:10px 16px;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);border-bottom:1px solid var(--border)}
.cmp-civ-row{display:grid;grid-template-columns:1fr 36px 130px 36px 1fr;align-items:center;gap:0;padding:7px 12px;border-bottom:1px solid var(--border)}
.cmp-civ-row:last-child{border-bottom:none}
.cmp-civ-flag{width:22px;height:15px;object-fit:cover;border-radius:2px;background:var(--bg3);flex-shrink:0}
.cmp-civ-bar-a{height:6px;background:var(--gold);border-radius:3px 0 0 3px;transition:width .4s ease;margin-left:auto}
.cmp-civ-bar-b{height:6px;background:#5c9bd6;border-radius:0 3px 3px 0;transition:width .4s ease}
.cmp-civ-bar-track-a{display:flex;justify-content:flex-end;align-items:center;padding-right:4px}
.cmp-civ-bar-track-b{display:flex;justify-content:flex-start;align-items:center;padding-left:4px}
.cmp-civ-pct{font-size:.68rem;color:var(--txt3);font-family:'Space Mono',monospace;text-align:center;padding:0 2px}
.cmp-civ-center{display:flex;align-items:center;justify-content:center;gap:5px;padding:0 4px}
.cmp-civ-name{font-size:.71rem;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
/* Form + H2H */
.cmp-form-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.cmp-form-hdr{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);margin-bottom:12px}
.cmp-form-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cmp-form-row:last-child{margin-bottom:0}
.cmp-form-name{font-size:.72rem;color:var(--txt2);width:80px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-form-dots{display:flex;gap:3px}
.cmp-form-dot{width:22px;height:22px;border-radius:4px;font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.cmp-form-dot.win{background:rgba(102,187,106,.14);color:#66bb6a;border:1px solid rgba(102,187,106,.3)}
.cmp-form-dot.loss{background:rgba(239,83,80,.1);color:#ef5350;border:1px solid rgba(239,83,80,.22)}
.cmp-h2h-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.cmp-h2h-hdr{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);margin-bottom:14px;width:100%;text-align:left}
.cmp-h2h-score{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.cmp-h2h-num{font-size:2.2rem;font-weight:700;font-family:'Space Mono',monospace;color:var(--txt)}
.cmp-h2h-num.leader{color:var(--gold-l)}
.cmp-h2h-dash{font-size:1.4rem;color:var(--txt3)}
.cmp-h2h-sub{font-size:.72rem;color:var(--txt3)}
.cmp-h2h-never{font-size:.82rem;color:var(--txt3);margin-top:8px}
@media(max-width:900px){.cmp-hero{grid-template-columns:1fr;gap:10px}.cmp-hero-vs{flex-direction:row}.cmp-grid{grid-template-columns:1fr}.cmp-hero-card.right{flex-direction:row;text-align:left}}
.guide-table{width:100%;border-collapse:collapse;font-size:.8rem;margin:12px 0}
.guide-table th{text-align:left;padding:8px 14px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--txt3);border-bottom:1px solid var(--border)}
.guide-table td{padding:9px 14px;border-bottom:1px solid var(--border);color:var(--txt2)}
.guide-table tr:last-child td{border-bottom:none}
.guide-table tr:hover td{background:var(--bg3)}
.guide-safe{color:#54b478!important;font-weight:600}
.guide-warn{color:#d06b62!important;font-weight:600}
kbd{display:inline-block;padding:2px 8px;font-size:.75rem;font-family:'Space Mono',monospace;background:var(--bg3);border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;color:var(--txt)}
/* guide mockup components */
.gm{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin:16px 0;user-select:none}
.gm img{width:100%;display:block;max-height:280px;object-fit:cover;object-position:top;background:var(--bg2);cursor:zoom-in;transition:opacity .15s}
.gm img:hover{opacity:.85}
.gm-bar{background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:stretch;padding:0 16px;height:44px;gap:0;flex-shrink:0}
.gm-logo{font-family:'Space Mono',monospace;font-size:.62rem;font-weight:700;color:var(--gold);display:flex;align-items:center;margin-right:22px;white-space:nowrap}
.gm-tab{padding:0 14px;display:flex;align-items:center;font-size:.72rem;color:var(--txt3);border-bottom:2px solid transparent;white-space:nowrap;cursor:default}
.gm-tab.on{color:var(--gold);border-bottom-color:var(--gold);font-weight:700}
.gm-btn{background:transparent;border:1px solid var(--border);color:var(--txt2);padding:5px 11px;border-radius:4px;font-size:.72rem;cursor:default;font-family:inherit;white-space:nowrap}
.gm-btn.gold{background:var(--a-dim);border-color:var(--gold);color:var(--gold);font-weight:700}
.gm-btn.green{background:#1a3320;border-color:#54b478;color:#54b478;font-weight:700}
.gm-btn.red{border-color:#c0392b;color:#e74c3c}
.gm-label{font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);text-align:center;margin-top:3px}
.gm-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.gm-row{display:flex;gap:8px;align-items:center}
.gm-col{display:flex;flex-direction:column;gap:6px}
.gm-2col{display:grid;grid-template-columns:220px 1fr;gap:12px}
.gm-panel{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:8px}
.gm-panel-hdr{font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:2px}
.gm-input{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:6px 10px;color:var(--txt2);font-size:.74rem;width:100%;box-sizing:border-box;resize:none}
.gm-select{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:5px 8px;color:var(--txt2);font-size:.74rem;flex:1}
.gm-timer{font-family:'Space Mono',monospace;font-size:2.8rem;font-weight:700;color:var(--gold);text-align:center;line-height:1;letter-spacing:2px;padding:10px 0}
.gm-stat{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:10px;text-align:center}
.gm-stat-val{font-size:1.5rem;font-weight:700;font-family:'Space Mono',monospace;color:var(--gold);line-height:1}
.gm-stat-lbl{font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);margin-top:3px}
.gm-res-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gm-res{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:7px;text-align:center}
.gm-res-val{font-size:.9rem;font-weight:700}
.gm-res-lbl{font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--txt3)}
.gm-steps-hdr{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg2)}
.gm-step{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px;border:1px solid transparent}
.gm-step.on{background:var(--a-dim);border-color:var(--gold-d)}
.gm-step-time{font-size:.66rem;color:var(--txt3);font-family:'Space Mono',monospace;width:30px;flex-shrink:0}
.gm-step-icon{width:18px;height:18px;background:var(--bg3);border:1px solid var(--border);border-radius:3px;flex-shrink:0}
.gm-step-txt{font-size:.75rem;color:var(--txt2);flex:1}
.gm-step.on .gm-step-txt{color:var(--txt)}
.gm-step-pop{font-size:.66rem;color:var(--txt3);margin-left:auto;flex-shrink:0}
.gm-age-hdr{text-align:center;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);padding:6px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:4px 0}
.gm-tts-row{display:flex;gap:6px;align-items:center}
.gm-tts-toggle{flex:1;padding:5px;font-size:.68rem;font-weight:700;letter-spacing:.04em;border:1px solid var(--gold);background:var(--a-dim);color:var(--gold);border-radius:4px;text-align:center;cursor:default}
.gm-rate-row{display:flex;gap:4px}
.gm-rate-btn{flex:1;padding:4px 6px;font-size:.66rem;border:1px solid var(--border);background:transparent;color:var(--txt3);border-radius:4px;cursor:default;text-align:center}
.gm-rate-btn.on{background:var(--a-dim);border-color:var(--gold-d);color:var(--gold)}
.gm-vol-row{display:flex;align-items:center;gap:8px}
.gm-vol-bar{flex:1;height:4px;background:var(--bg3);border-radius:2px;position:relative}
.gm-vol-fill{width:80%;height:100%;background:var(--gold);border-radius:2px}
.gm-overlay-win{background:#0a0c10;border:1px solid rgba(212,162,58,.4);border-radius:8px;padding:14px;min-width:260px}
.gm-ov-hdr{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:flex;justify-content:space-between}
.gm-ov-step{background:rgba(212,162,58,.08);border-left:3px solid var(--gold);padding:8px 12px;border-radius:0 4px 4px 0;font-size:.78rem;color:#e0e0e0;line-height:1.5;margin-bottom:8px}
.gm-ov-next{font-size:.7rem;color:#888;padding:4px 0 0 2px}
.gm-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.gm-card-name{font-size:.82rem;font-weight:700;color:var(--txt);margin-bottom:3px}
.gm-card-meta{font-size:.7rem;color:var(--txt3);margin-bottom:10px}
.gm-card-acts{display:flex;gap:6px}
.gm-icon-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;padding:10px}
.gm-icon-cell{width:100%;aspect-ratio:1;background:var(--bg3);border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--txt3)}
.gm-icon-cell.on{border-color:var(--gold);background:var(--a-dim)}
.gm-civ-tag{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px;font-size:.76rem;color:var(--txt2);text-align:center}
.gm-caption{font-size:.7rem;color:var(--txt3);padding:9px 14px;background:var(--bg2);border-top:1px solid var(--border);text-align:center;font-style:italic}
/* lightbox */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;animation:lb-in .15s ease}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb-overlay img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.7);cursor:default;user-select:none}
.lb-close{position:fixed;top:18px;right:22px;font-size:1.6rem;color:rgba(255,255,255,.7);cursor:pointer;line-height:1;background:none;border:none;padding:0}
.lb-close:hover{color:#fff}
.gm-ico{width:20px;height:20px;object-fit:contain;flex-shrink:0;vertical-align:middle}
.gm-arrow-label{font-size:.72rem;color:var(--gold);font-weight:700;display:flex;align-items:center;gap:6px}
.gm-highlight-box{border:2px dashed var(--gold);border-radius:6px;padding:4px;position:relative}
.gm-highlight-tag{position:absolute;top:-10px;right:8px;background:var(--gold);color:#000;font-size:.6rem;font-weight:700;padding:1px 7px;border-radius:10px}
/* ─── GLASS MODE ──────────────────────────────────────────── */
body.glass{background:var(--glass-bg)!important}
body.glass .app-bar,body.glass .panel,body.glass .steps-panel,body.glass .civ-card,body.glass .modal,body.glass .civ-picker-panel{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* ─── THEME PICKER ────────────────────────────────────────── */
.theme-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--txt2);height:30px;padding:0 10px;cursor:pointer;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:600;letter-spacing:.4px;transition:all .15s;flex-shrink:0;align-self:center;margin-left:8px}
.theme-btn:hover{border-color:var(--a-bdr);color:var(--gold);background:var(--a-dim)}
.theme-panel{position:fixed;top:58px;right:16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px;z-index:200;width:350px;box-shadow:var(--shadow);display:none}
.theme-panel.open{display:block}
.theme-panel-hdr{font-size:.63rem;font-weight:700;color:var(--txt3);text-transform:uppercase;letter-spacing:.13em;margin-bottom:10px}
.theme-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.theme-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s,box-shadow .15s;box-sizing:border-box}
.theme-swatch:hover{transform:scale(1.28);box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.theme-swatch.active{box-shadow:0 0 0 3px rgba(255,255,255,.85)!important;transform:scale(1.15)}
/* ─── INTRO TOUR ─────────────────────────────────────────── */
.intro-ov{position:fixed;inset:0;background:rgba(4,2,10,.9);z-index:900;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.intro-ov.hidden{display:none}
.intro-modal{background:var(--bg);border:1px solid var(--border2);border-radius:12px;width:100%;max-width:860px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 32px 100px rgba(0,0,0,.88);max-height:calc(100vh - 32px)}
.intro-pbar{height:3px;background:var(--bg3);flex-shrink:0}
.intro-pfill{height:100%;background:linear-gradient(90deg,var(--gold-d),var(--gold-l));transition:width .4s cubic-bezier(.4,0,.2,1)}
.intro-slides{flex:1;position:relative;overflow:hidden;min-height:430px}
.intro-sl{position:absolute;inset:0;display:flex;opacity:0;transform:translateX(30px);transition:opacity .32s ease,transform .32s cubic-bezier(.4,0,.2,1);pointer-events:none}
.intro-sl.active{opacity:1;transform:translateX(0);pointer-events:auto}
.intro-sl.exit{opacity:0;transform:translateX(-30px);transition:opacity .24s ease,transform .24s ease}
/* Text pane */
.intro-tp{width:290px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;padding:34px 28px;border-right:1px solid var(--border)}
.intro-sl-num{font-size:.6rem;letter-spacing:.18em;color:var(--gold-d);text-transform:uppercase;font-weight:700;margin-bottom:10px}
.intro-sl-h{font-size:1.3rem;font-weight:700;color:var(--gold-l);line-height:1.2;margin-bottom:12px}
.intro-sl-p{font-size:.81rem;color:var(--txt2);line-height:1.7;margin-bottom:14px}
.intro-blist{display:flex;flex-direction:column;gap:7px}
.intro-bli{display:flex;gap:8px;align-items:flex-start;font-size:.76rem;color:var(--txt2);line-height:1.4}
.intro-bli::before{content:'◈';color:var(--gold-d);flex-shrink:0;margin-top:1px}
/* Visual pane */
.intro-vis{flex:1;display:flex;align-items:center;justify-content:center;padding:22px 26px;background:var(--bg2);overflow:hidden}
/* Wide slides */
.intro-sl.wide .intro-tp{width:100%;max-width:100%;border-right:none;align-items:center;text-align:center;padding:52px 64px}
.intro-sl.wide .intro-vis{display:none}
.intro-w-logo{font-size:3rem;margin-bottom:16px;line-height:1}
.intro-logo-text{font-size:2rem;font-weight:700;letter-spacing:.04em;color:var(--gold-l);font-family:inherit}
.intro-logo-cc{color:var(--txt3);font-weight:400;font-size:1.4rem}
.intro-w-title{font-size:1.85rem;font-weight:700;color:var(--gold-l);letter-spacing:.01em;margin-bottom:10px}
.intro-w-sub{font-size:.87rem;color:var(--txt2);max-width:460px;line-height:1.65;margin-bottom:22px}
.intro-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.intro-pill{background:var(--bg3);border:1px solid var(--border);color:var(--txt2);font-size:.71rem;padding:5px 14px;border-radius:99px;font-weight:600}
.intro-pill b{color:var(--gold)}
/* Footer */
.intro-foot{padding:13px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--bg2)}
.intro-dots{display:flex;gap:5px;flex:1;align-items:center}
.i-dot{width:7px;height:7px;border-radius:50%;background:var(--border2);cursor:pointer;transition:all .22s;flex-shrink:0}
.i-dot.on{background:var(--gold);width:18px;border-radius:3px}
.ibtn{background:var(--bg3);border:1px solid var(--border);color:var(--txt2);padding:7px 18px;border-radius:4px;cursor:pointer;font-size:.82rem;font-weight:600;transition:all .15s;white-space:nowrap}
.ibtn:hover{border-color:var(--gold-d);color:var(--gold)}
.ibtn:disabled{opacity:.28;pointer-events:none}
.ibtn.finish{background:linear-gradient(135deg,var(--gold-d),var(--gold));color:#0c0820;border-color:transparent}
.ibtn.finish:hover{filter:brightness(1.08)}
.intro-skip{background:none;border:none;color:var(--txt3);font-size:.74rem;cursor:pointer;padding:4px 6px;transition:color .15s;white-space:nowrap}
.intro-skip:hover{color:var(--txt)}
/* Help button in nav */
.help-btn{background:var(--a-dim);border:1px solid var(--a-bdr);color:var(--gold-l);height:30px;padding:0 12px;width:auto;cursor:pointer;border-radius:var(--r-sm);display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;font-family:inherit;transition:all .15s;flex-shrink:0;align-self:center;margin-left:8px;letter-spacing:.01em}
.help-btn:hover{background:var(--a-glow);border-color:var(--gold-d);color:var(--gold-l);box-shadow:0 0 12px rgba(160,124,224,.18)}
/* Final slide */
.intro-final-h{font-size:1.75rem;font-weight:700;color:var(--gold-l);margin-bottom:12px}
.intro-final-p{font-size:.85rem;color:var(--txt2);max-width:420px;line-height:1.65;margin-bottom:26px}
.intro-final-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.intro-final-btn{background:var(--bg3);border:1px solid var(--border);color:var(--txt2);padding:10px 22px;border-radius:4px;cursor:pointer;font-size:.83rem;font-weight:600;transition:all .15s}
.intro-final-btn:hover{border-color:var(--gold-d);color:var(--gold)}
.intro-final-btn.g{background:linear-gradient(135deg,var(--gold-d),var(--gold));color:#0c0820;border-color:transparent}
.intro-final-btn.g:hover{filter:brightness(1.08)}
/* ── Mock UI components ── */
.mock{border-radius:6px;overflow:hidden;font-size:10px;user-select:none;box-shadow:0 6px 28px rgba(0,0,0,.55);width:100%}
.mock-bar{background:#080605;padding:5px 10px;display:flex;align-items:center;gap:6px;border-bottom:2px solid var(--border2)}
.mock-bar-logo{font-size:9px;font-weight:700;color:var(--gold-l);letter-spacing:.06em}
.mock-bar-badge{font-size:6.5px;color:var(--txt3);background:var(--bg3);padding:1px 5px;border-radius:2px;margin-left:auto}
.mock-navtabs{background:var(--bg2);border-bottom:1px solid var(--border);display:flex;padding:0 8px}
.mock-ntab{padding:5px 10px;font-size:8px;color:var(--txt3);cursor:default;border-bottom:2px solid transparent}
.mock-ntab.on{color:var(--gold);border-bottom-color:var(--gold)}
.mock-bg{background:var(--bg);padding:12px 14px}
.mock-sec-title{font-size:9px;font-weight:700;color:var(--gold);margin-bottom:3px}
.mock-sec-sub{font-size:7px;color:var(--txt2);margin-bottom:8px}
.mock-ta{background:var(--bg3);border:1px solid var(--border);border-radius:3px;padding:7px 8px;font-family:monospace;font-size:8px;color:var(--txt3);min-height:46px;margin-bottom:5px;line-height:1.55}
.mock-ta-row{display:flex;align-items:center;gap:5px}
.mock-ta-hint{font-size:7px;color:var(--txt3);flex:1}
.mock-btn-g{background:linear-gradient(135deg,var(--gold-d),var(--gold));color:#0c0820;border:none;padding:4px 10px;border-radius:3px;font-size:8px;font-weight:700;cursor:default;flex-shrink:0}
.mock-steps-hdr{background:var(--bg3);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:5px 10px}
.mock-steps-title{font-size:9px;font-weight:700;color:var(--gold-l)}
.mock-steps-sub{font-size:7px;color:var(--txt3);margin-top:1px}
.mock-step{display:flex;gap:6px;padding:4px 10px;border-bottom:1px solid rgba(58,42,20,.18);align-items:flex-start}
.mock-step.done{opacity:.2}
.mock-step.now{background:rgba(160,124,224,.09);border-left:3px solid var(--gold-l)}
.mock-st{font-size:8px;font-weight:700;font-family:monospace;color:var(--gold-d);min-width:28px;flex-shrink:0}
.mock-step.now .mock-st{color:var(--gold-l)}
.mock-sa{font-size:8px;color:var(--txt2);line-height:1.4}
.mock-step.now .mock-sa{color:var(--txt)}
.mock-timer-panel{background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.mock-clock-num{font-size:32px;font-weight:700;font-family:monospace;color:var(--gold-l);letter-spacing:3px;text-align:center;line-height:1}
.mock-clock-lbl{font-size:6.5px;color:var(--txt3);letter-spacing:2px;text-align:center;margin-top:2px}
.mock-ctrls{display:flex;gap:4px}
.mock-c-start{flex:2;background:linear-gradient(135deg,var(--gold-d),var(--gold));color:#0c0820;text-align:center;padding:5px;border-radius:3px;font-size:8px;font-weight:700}
.mock-c-sec{flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--txt2);text-align:center;padding:5px;border-radius:3px;font-size:11px}
.mock-speeds{display:flex;gap:3px}
.mock-spd{flex:1;text-align:center;padding:3px;border-radius:2px;font-size:8px;border:1px solid var(--border);color:var(--txt3);background:var(--bg3)}
.mock-spd.on{background:var(--a-dim);color:var(--gold);border-color:var(--gold-d)}
.mock-countdown{background:var(--bg3);border:1px solid var(--border);border-radius:3px;padding:5px 8px;display:flex;justify-content:space-between;align-items:center}
.mock-cd-lbl{font-size:7px;color:var(--txt3)}
.mock-cd-val{font-size:13px;font-weight:700;color:var(--gold);font-family:monospace}
.mock-voice-box{background:var(--bg3);border:1px solid var(--border);border-radius:3px;padding:6px 8px;display:flex;flex-direction:column;gap:4px}
.mock-von-row{display:flex;gap:3px;align-items:center}
.mock-von{background:linear-gradient(135deg,var(--gold-d),var(--gold));color:#0c0820;padding:3px 7px;border-radius:2px;font-size:7.5px;font-weight:700;white-space:nowrap}
.mock-vrate{flex:1;background:var(--bg2);border:1px solid var(--border);color:var(--txt3);padding:2px 4px;border-radius:2px;font-size:7px;text-align:center}
.mock-vrate.on{color:var(--gold);background:var(--a-dim);border-color:var(--gold-d)}
.mock-vsel{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--txt2);padding:3px 6px;border-radius:2px;font-size:8px}
.mock-vvol{display:flex;align-items:center;gap:4px}
.mock-vvol-bar{flex:1;height:2px;background:var(--border);border-radius:1px;overflow:hidden}
.mock-vvol-fill{height:100%;background:var(--gold);width:78%}
.mock-vvol-lbl{font-size:.65rem;color:var(--txt3);min-width:24px;text-align:right;font-family:monospace}
.mock-vb-lbl{font-size:6.5px;color:var(--txt3);letter-spacing:1.5px;text-align:center;margin-top:2px}
.mock-bubble{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:8.5px;color:var(--txt2);line-height:1.5;position:relative;margin-top:8px}
.mock-bubble::before{content:'';position:absolute;top:-6px;left:16px;border:5px solid transparent;border-bottom-color:var(--border);border-top:none}
.mock-bubble::after{content:'';position:absolute;top:-5px;left:16px;border:5px solid transparent;border-bottom-color:var(--bg);border-top:none}
.mock-bubble-text{font-style:italic;color:var(--gold-l)}
.mock-ov-scene{display:flex;align-items:flex-start;gap:12px;width:100%}
.intro-screenshot-wrap{width:100%;border-radius:6px;overflow:hidden;border:1px solid var(--border2);box-shadow:0 4px 24px rgba(0,0,0,.6)}
.intro-screenshot{width:100%;height:auto;display:block}
.mock-game-bg{flex:1;aspect-ratio:16/10;border-radius:5px;background:radial-gradient(ellipse at 40% 65%,#162010 0%,#0a0e08 55%,#08090a 100%);border:1px solid rgba(255,255,255,.07);overflow:hidden;position:relative;min-height:150px}
.mock-game-bg::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(255,255,255,.018) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(255,255,255,.018) 20px)}
.mock-game-units{position:absolute;bottom:28%;left:32%;display:flex;gap:5px;align-items:flex-end}
.mock-g-unit{width:7px;height:7px;border-radius:50%;background:rgba(90,200,90,.55);border:1px solid rgba(100,255,100,.35)}
.mock-g-bldg{width:11px;height:11px;background:rgba(180,140,60,.4);border:1px solid rgba(220,180,80,.3);border-radius:1px}
.mock-game-lbl{position:absolute;bottom:6px;right:8px;font-size:6px;color:rgba(255,255,255,.18);letter-spacing:.1em}
.mock-ov-win{width:172px;flex-shrink:0;background:#0c0820;border:1px solid rgba(160,124,224,.35);border-radius:5px;overflow:hidden;box-shadow:0 10px 32px rgba(0,0,0,.7)}
.mock-ov-top{background:#080605;border-bottom:1px solid rgba(58,42,20,.5);padding:3px 7px;display:flex;align-items:center;gap:4px}
.mock-ov-dot{width:5px;height:5px;border-radius:50%;background:#4a9a4a;animation:pulse 1.2s ease-in-out infinite;flex-shrink:0}
.mock-ov-ttl{font-size:6px;letter-spacing:1.5px;color:var(--gold-l);font-weight:700}
.mock-ov-bname{font-size:7px;color:var(--txt3);margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80px}
.mock-ov-trow{background:var(--bg2);border-bottom:1px solid rgba(58,42,20,.3);padding:4px 7px;display:flex;align-items:center;gap:5px}
.mock-ov-tnum{font-size:18px;font-weight:700;font-family:monospace;color:var(--gold-l);letter-spacing:1px;line-height:1;flex-shrink:0}
.mock-ov-prog{flex:1}
.mock-ov-ptxt{font-size:6px;color:var(--txt2);margin-bottom:2px}
.mock-ov-pbar{height:2px;background:rgba(30,20,60,.8);border-radius:1px;overflow:hidden}
.mock-ov-pfill{height:100%;background:linear-gradient(90deg,var(--gold-d),var(--gold));border-radius:1px}
.mock-ov-res{padding:3px 7px;background:var(--bg3);border-bottom:1px solid rgba(58,42,20,.3);display:flex;gap:5px;font-size:8.5px;font-weight:700;font-family:monospace;align-items:center}
.mock-ov-now{margin:4px;background:rgba(160,124,224,.11);border:1px solid var(--gold);border-left:3px solid var(--gold-l);border-radius:3px;padding:5px 6px}
.mock-ov-now-hdr{display:flex;gap:4px;align-items:center;margin-bottom:3px}
.mock-ov-pill{background:var(--gold);color:#0c0820;font-size:5.5px;font-weight:700;padding:1px 4px;border-radius:2px;letter-spacing:.5px}
.mock-ov-ntime{font-size:8px;font-weight:700;font-family:monospace;color:var(--gold-l)}
.mock-ov-ninst{font-size:7.5px;color:var(--txt);line-height:1.4}
.mock-ov-nexts{padding:2px 4px 4px}
.mock-ov-nr{display:flex;gap:4px;padding:2px 2px;border-bottom:1px solid rgba(58,42,20,.15);align-items:baseline}
.mock-ov-nr.d2{opacity:.65}.mock-ov-nr.d3{opacity:.42}.mock-ov-nr.d4{opacity:.26}.mock-ov-nr.d5{opacity:.16}
.mock-ov-nt{font-size:7.5px;color:var(--gold);font-weight:700;font-family:monospace;min-width:22px;flex-shrink:0}
.mock-ov-na{font-size:7.5px;color:var(--txt2)}
.mock-ov-ctrls{padding:4px 5px;border-top:1px solid var(--border2);display:flex;gap:3px;background:#080605}
.mock-ov-cb{flex:1;padding:4px 2px;background:var(--bg3);border:1px solid var(--border);color:var(--txt2);font-size:9px;border-radius:2px;text-align:center}
.mock-cr{background:var(--bg2);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.mock-cr-tb{background:var(--bg3);border-bottom:1px solid var(--border);padding:4px 8px;display:flex;gap:4px}
.mock-cr-tbb{background:var(--bg2);border:1px solid var(--border);color:var(--txt2);padding:2px 7px;border-radius:2px;font-size:7.5px}
.mock-cr-tbb.g{background:var(--a-dim);border-color:var(--a-bdr);color:var(--gold)}
.mock-cr-si{border-bottom:1px solid var(--border)}
.mock-cr-si-hdr{padding:5px 10px;display:flex;align-items:center;gap:6px;font-size:8.5px}
.mock-cr-t{color:var(--gold-d);font-family:monospace;font-weight:700;font-size:9px;flex-shrink:0}
.mock-cr-pv{color:var(--txt2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-cr-si-body{background:var(--bg);border-top:1px solid var(--border);padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.mock-cr-ar{display:flex;align-items:center;gap:4px;background:var(--bg2);border:1px solid var(--border);border-radius:3px;padding:4px 7px}
.mock-cr-isl{width:18px;height:18px;background:var(--bg3);border:1px solid var(--border);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.mock-cr-type{font-size:7px;color:var(--txt3);min-width:38px}
.mock-cr-qty{background:var(--bg);border:1px solid var(--border);color:var(--gold);padding:2px 4px;border-radius:2px;font-size:8px;font-family:monospace;width:20px;text-align:center}
.mock-cr-arrow{color:var(--txt3);font-size:9px;flex-shrink:0}
.mock-cr-isl2{width:18px;height:18px;background:var(--bg3);border:1px dashed var(--border2);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.mock-cr-notelbl{font-size:7.5px;color:var(--txt3);font-style:italic;padding:2px 0}
.mock-cr-add{display:flex;gap:4px;margin-top:2px}
.mock-cr-addb{background:var(--bg2);border:1px dashed var(--border2);color:var(--txt3);padding:2px 8px;border-radius:2px;font-size:7.5px}
/* ─── LANDING PAGE ────────────────────────────────────────── */
.lp{position:fixed;inset:0;z-index:2000;background:var(--bg);overflow-y:auto;display:flex;flex-direction:column;opacity:1;transition:opacity .4s ease}
.lp::before{content:'';position:fixed;inset:0;background:url('backgrounds/8a4f524a-489f-4861-9811-1b7cd57ecef3.png') center/cover no-repeat;opacity:.12;pointer-events:none;z-index:0}
.lp>*{position:relative;z-index:1}
body.glass .lp{background:var(--glass-bg)}
.lp.lp-out{opacity:0;pointer-events:none}
.lp-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 40px;border-bottom:1px solid var(--border);background:rgba(9,8,15,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;flex-shrink:0}
.lp-nav-logo{font-family:'Space Mono',monospace;font-size:.82rem;font-weight:700;color:var(--gold);letter-spacing:.14em;text-transform:uppercase}
.lp-nav-logo span{color:var(--txt3);font-weight:400}
.lp-nav-right{display:flex;align-items:center;gap:10px}
.lp-nav-skip{background:none;border:1px solid var(--border);color:var(--txt2);padding:7px 16px;border-radius:var(--r-sm);font-family:inherit;font-size:.77rem;cursor:pointer;transition:all .15s}
.lp-nav-skip:hover{border-color:var(--txt3);color:var(--txt)}
.lp-nav-enter{background:var(--gold);color:#0c0820;padding:7px 18px;border:none;border-radius:var(--r-sm);font-family:inherit;font-size:.77rem;font-weight:700;cursor:pointer;transition:all .15s}
.lp-nav-enter:hover{background:var(--gold-l)}
/* hero */
.lp-hero{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:center;padding:60px 40px 40px;max-width:1300px;margin:0 auto;width:100%}
.lp-eyebrow{font-family:'Space Mono',monospace;font-size:.65rem;color:var(--txt3);letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
/* ── Meta Tab ─────────────────────────────────────────────────────────────── */
.meta-wrap{padding:20px 22px;max-width:900px;margin:0 auto}
.meta-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.meta-patch-info{font-size:.7rem;color:var(--txt3);letter-spacing:.04em}
.meta-info-wrap{position:relative;display:flex;align-items:center}
.meta-info-icon{font-size:.8rem;color:var(--txt3);cursor:default;line-height:1;user-select:none;transition:color .15s}
.meta-info-wrap:hover .meta-info-icon{color:var(--gold)}
.meta-info-tip{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:120;width:300px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;font-size:.72rem;line-height:1.55;color:var(--txt2);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.meta-info-tip strong{color:var(--txt);font-size:.74rem}
.meta-info-tip code{font-family:'Space Mono',monospace;font-size:.65rem;background:var(--bg3,var(--bg));padding:1px 4px;border-radius:3px;color:var(--txt3)}
.meta-info-wrap:hover .meta-info-tip{display:block}
.meta-loading{padding:48px;text-align:center;color:var(--txt3);font-size:.85rem}
.meta-error{padding:48px;text-align:center;color:#d06b62;font-size:.85rem;display:flex;flex-direction:column;align-items:center;gap:12px}
.meta-retry-btn,.meta-refresh-btn{background:none;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--txt2);font-family:inherit;font-size:.74rem;padding:5px 12px;cursor:pointer;transition:all .15s}
.meta-retry-btn:hover,.meta-refresh-btn:hover{border-color:var(--txt3);color:var(--txt)}
.meta-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid var(--border);flex-wrap:wrap;gap:8px}
.meta-footer-note{font-size:.65rem;color:var(--txt3)}
/* filters */
.meta-filters{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px;padding:12px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r)}
.meta-filter-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.meta-filter-lbl{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-right:2px;white-space:nowrap}
.meta-filter-btn{background:none;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--txt2);font-family:inherit;font-size:.74rem;padding:4px 11px;cursor:pointer;transition:all .15s}
.meta-filter-btn:hover{border-color:var(--txt3);color:var(--txt)}
.meta-filter-btn.meta-filter-active{border-color:var(--gold);background:rgba(198,160,76,.12);color:var(--gold);font-weight:700}
/* tier list */
.meta-tier-list{display:flex;flex-direction:column;gap:6px}
.meta-tier-row{display:flex;align-items:flex-start;gap:10px;padding:6px 0}
.meta-tier-label{width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.82rem;flex-shrink:0;margin-top:3px}
.mt-s{background:rgba(76,175,118,.18);color:#4caf76;border:1px solid rgba(76,175,118,.3)}
.mt-a{background:rgba(129,185,110,.14);color:#81b96e;border:1px solid rgba(129,185,110,.24)}
.mt-b{background:rgba(224,144,64,.13);color:#e09040;border:1px solid rgba(224,144,64,.22)}
.mt-c{background:rgba(208,107,98,.12);color:#d06b62;border:1px solid rgba(208,107,98,.2)}
.mt-d{background:rgba(170,60,60,.13);color:#b85252;border:1px solid rgba(170,60,60,.22)}
.mt-f{background:rgba(110,40,40,.12);color:#963c3c;border:1px solid rgba(110,40,40,.2)}
.meta-tier-civs{display:flex;flex-wrap:wrap;gap:5px;flex:1}
/* civ chips — display only, no selection */
.meta-civ-chip{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 8px;display:flex;align-items:center;gap:5px;font-size:.73rem;color:var(--txt2);white-space:nowrap}
.meta-chip-flag{display:flex;align-items:center;flex-shrink:0}
.meta-chip-name{font-weight:600;color:var(--txt)}
.meta-chip-wr{font-size:.78rem;font-weight:700;color:var(--txt2);margin-left:4px;letter-spacing:.01em}
.lp-h1{font-size:2.9rem;font-weight:700;line-height:1.12;color:var(--txt);margin-bottom:18px;letter-spacing:-.01em}
.lp-h1 em{font-style:normal;color:var(--gold-l)}
.lp-tagline{font-size:1rem;color:var(--txt2);line-height:1.65;margin-bottom:32px;max-width:460px}
.lp-hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.lp-btn-primary{background:var(--gold);color:#0c0820;padding:13px 26px;border:none;border-radius:var(--r);font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;transition:all .18s;letter-spacing:.01em}
.lp-btn-primary:hover{background:var(--gold-l);transform:translateY(-1px);box-shadow:0 6px 20px rgba(160,124,224,.35)}
.lp-btn-secondary{background:transparent;color:var(--txt);padding:13px 26px;border:1px solid var(--border2);border-radius:var(--r);font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .18s}
.lp-btn-secondary:hover{border-color:var(--gold-d);color:var(--gold-l)}
.lp-compat-note{margin-top:16px;font-size:.72rem;color:rgba(255,255,255,.55);font-weight:500;max-width:420px;line-height:1.5}
.lp-compat-note strong{color:rgba(255,255,255,.8)}
.lp-hero-img{border-radius:10px;overflow:hidden;border:1px solid var(--border2);box-shadow:0 20px 60px rgba(0,0,0,.75);position:relative}
.lp-hero-img img{width:100%;height:auto;display:block}
.lp-hero-img-badge{position:absolute;top:10px;left:10px;background:rgba(9,8,15,.85);border:1px solid var(--border2);border-radius:4px;padding:4px 10px;font-size:.65rem;color:var(--gold);font-family:'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
/* feature strip */
.lp-features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:40px 40px;max-width:1300px;margin:0 auto;width:100%;border-top:1px solid var(--border)}
.lp-feat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:22px 20px;display:flex;flex-direction:column;gap:10px;transition:border-color .18s}
.lp-feat:hover{border-color:var(--a-bdr)}
.lp-feat-icon{width:34px;height:34px;background:var(--bg3);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lp-feat-icon img{width:20px;height:20px;object-fit:contain}
.lp-feat-h{font-size:.88rem;font-weight:700;color:var(--txt)}
.lp-feat-p{font-size:.77rem;color:var(--txt2);line-height:1.6}
/* bottom cta */
.lp-cta{padding:40px 40px 60px;text-align:center;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px}
.lp-cta-sub{font-size:.77rem;color:var(--txt3)}
.lp-cta-attribution{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;font-size:.7rem;color:var(--txt3);padding-top:6px;border-top:1px solid var(--border);width:100%;max-width:520px}
.lp-cta-attribution a{color:var(--txt3);text-decoration:none;transition:color .15s}.lp-cta-attribution a:hover{color:var(--txt2)}
.lp-cta-attribution-sep{opacity:.25}
.lp-btn-donate{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;font-size:.75rem;font-weight:600;border-radius:var(--r-sm);background:none;border:1px solid var(--border);color:var(--txt2);cursor:pointer;font-family:inherit;text-decoration:none;transition:all .15s;white-space:nowrap}.lp-btn-donate:hover{border-color:var(--gold);color:var(--gold);background:rgba(212,162,58,.07)}
.lp-btn-primary.lg{font-size:1rem;padding:16px 36px;border-radius:var(--r)}
.lp-nav-discord{display:flex;align-items:center;gap:7px;background:none;border:1px solid var(--border);color:var(--txt2);padding:7px 14px;border-radius:var(--r-sm);font-family:inherit;font-size:.77rem;font-weight:600;text-decoration:none;transition:all .15s;cursor:pointer}
.lp-nav-discord img{opacity:.85;flex-shrink:0}
.lp-nav-discord:hover{border-color:#5865F2;color:#fff;background:rgba(88,101,242,.15)}
.lp-nav-discord:hover img{opacity:1}
/* ─── STEAM LIVE PLAYER COUNT ─────────────────────────────── */
.slive{display:flex;align-items:center;gap:8px;background:rgba(84,180,120,.06);border:1px solid rgba(84,180,120,.18);color:var(--txt2);padding:6px 12px;border-radius:var(--r-sm);font-size:.77rem;font-weight:500;white-space:nowrap}
.slive-radar{position:relative;width:10px;height:10px;flex-shrink:0}
.slive-ring{position:absolute;inset:-3px;border:1.5px solid #54b478;border-radius:50%;animation:slive-ring 2.2s ease-out infinite;opacity:0}
.slive-dot{position:absolute;inset:1px;background:#54b478;border-radius:50%;box-shadow:0 0 5px rgba(84,180,120,.7)}
@keyframes slive-ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.slive-count{font-family:'Space Mono',monospace;font-size:.8rem;font-weight:700;color:#8cdfaa;min-width:3.5ch;letter-spacing:.02em}
.slive-txt{color:var(--txt3);font-size:.7rem}
@media(max-width:860px){
.lp-hero{grid-template-columns:1fr;padding:40px 24px 24px}
.lp-h1{font-size:2rem}
.lp-features{grid-template-columns:repeat(2,1fr);padding:24px}
.lp-nav{padding:14px 24px}
.lp-cta{padding:24px 24px 40px}
.slive-txt{display:none}
}
/* ─── LIGHT MODE OVERRIDES ────────────────────────────────────────────────── */
/* DLC pip badges — replace hardcoded dark backgrounds */
body.light-mode .dlc-base{background:#d8f0e0;color:#1a7040;border-color:#88c8a0}
body.light-mode .dlc-free{background:#d8e8fc;color:#1848b0;border-color:#88a8e8}
body.light-mode .dlc-sultans{background:#fce0c8;color:#903010;border-color:#d09060}
body.light-mode .dlc-dynasties{background:#ead8fc;color:#5028a8;border-color:#a878e0}
body.light-mode .dlc-yuefei{background:#fcd8d8;color:#982020;border-color:#e08888}
body.light-mode .dlc-templar{background:#d8e4f4;color:#284068;border-color:#88a0cc}
/* Civ card banner gradient — remove the hardcoded near-black endpoint */
body.light-mode .civ-banner{background:linear-gradient(150deg,var(--bg4) 0%,var(--bg3) 100%)}
/* Tooltip — hardcoded dark bg */
body.light-mode .tip-icon::after{background:var(--bg2);border-color:var(--border);color:var(--txt2)}
/* Civ card hover shadow — lighten for light bg */
body.light-mode .civ-card:hover{box-shadow:0 6px 24px var(--a-glow),0 2px 8px rgba(0,0,0,.1)}
/* Win/loss result badges */
body.light-mode .uh-pg-result.w{background:rgba(42,128,80,.15);color:#1a7040}
body.light-mode .uh-pg-result.l{background:rgba(192,53,37,.12);color:#c03525}
body.light-mode .uh-scan-status.live{color:#1a7040}
body.light-mode .uh-scan-status.err{color:#c03525}
body.light-mode .uh-fr--hi .uh-fr-lbl{color:var(--txt)}
body.light-mode .uh-fr-track{background:rgba(0,0,0,.1)}
body.light-mode .uh-fr-fill{background:rgba(0,0,0,.25)}
/* Inline rgba shadows that assume dark bg */
body.light-mode .modal{box-shadow:0 12px 40px rgba(0,0,0,.15)}
body.light-mode .overlay{background:rgba(0,0,0,.4)}