@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300&family=Share+Tech+Mono&display=swap');

:root {
  --gold:#c9a84c;--gold-light:#e8c96a;--gold-dark:#8b6914;
  --bg-deep:#0a0c0f;--bg-panel:#111318;--bg-card:#161b24;--bg-hover:#1e2535;
  --text-primary:#e8dcc8;--text-muted:#7a8090;
  --green:#4caf7a;--red:#e05050;--blue:#5090c9;--purple:#9b59b6;
  --border:rgba(201,168,76,.18);--border-light:rgba(201,168,76,.08);
  --shadow:0 4px 24px rgba(0,0,0,.6);--radius:8px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg-deep);color:var(--text-primary);font-family:'Crimson Pro',serif;font-size:15px;min-height:100vh;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 20% 10%,rgba(201,168,76,.04) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(80,144,201,.03) 0%,transparent 50%);pointer-events:none;z-index:0;}

/* HEADER */
#header{position:sticky;top:0;z-index:100;background:rgba(10,12,15,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 16px;display:flex;align-items:center;gap:10px;height:56px;}
#header h1{font-family:'Cinzel',serif;font-size:20px;font-weight:900;color:var(--gold);letter-spacing:3px;text-shadow:0 0 20px rgba(201,168,76,.4);white-space:nowrap;}
.era-badge{background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:#000;font-family:'Cinzel',serif;font-size:10px;font-weight:600;letter-spacing:1px;padding:3px 9px;border-radius:20px;white-space:nowrap;}
.stat-bar{display:flex;gap:7px;flex:1;justify-content:flex-end;align-items:center;flex-wrap:wrap;}
.stat-chip{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:4px 10px;display:flex;align-items:center;gap:5px;font-size:12px;white-space:nowrap;}
.stat-chip .label{color:var(--text-muted);font-size:10px;}
.stat-chip .val{font-family:'Share Tech Mono',monospace;color:var(--gold-light);font-weight:600;}
.stat-chip.positive .val{color:var(--green);}
.hdr-btn{border:none;color:#fff;font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:1px;padding:6px 12px;border-radius:6px;cursor:pointer;transition:all .2s;white-space:nowrap;}
.hdr-btn.primary{background:linear-gradient(135deg,#7b2ff7,#c9a84c);}
.hdr-btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(123,47,247,.5);}
.hdr-btn.secondary{background:rgba(255,255,255,.07);border:1px solid var(--border);font-size:11px;}
.hdr-btn.secondary:hover{background:rgba(255,255,255,.12);}
#sync-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;transition:background .3s;}
#sync-dot.syncing{background:var(--gold);animation:pulse .8s infinite;}
#sync-dot.error{background:var(--red);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* LAYOUT */
#app{display:grid;grid-template-columns:248px 1fr 288px;min-height:calc(100vh - 56px);position:relative;z-index:1;}

/* LEFT PANEL */
#left-panel{background:var(--bg-panel);border-right:1px solid var(--border);padding:13px;display:flex;flex-direction:column;gap:11px;overflow-y:auto;max-height:calc(100vh - 56px);}
.panel-title{font-family:'Cinzel',serif;font-size:10px;font-weight:600;letter-spacing:2px;color:var(--gold-dark);text-transform:uppercase;border-bottom:1px solid var(--border);padding-bottom:5px;margin-bottom:1px;}
.city-name-display{font-family:'Cinzel',serif;font-size:16px;color:var(--gold-light);text-align:center;letter-spacing:2px;}
.city-score{text-align:center;font-size:11px;color:var(--text-muted);}
.city-score span{color:var(--gold);font-family:'Share Tech Mono',monospace;font-size:14px;}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.metric-box{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);padding:8px;text-align:center;}
.metric-box .m-label{font-size:10px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;}
.metric-box .m-value{font-family:'Share Tech Mono',monospace;font-size:14px;color:var(--text-primary);margin-top:2px;}
.m-value.good{color:var(--green);}.m-value.warn{color:#e0a050;}.m-value.bad{color:var(--red);}
.progress-row{display:flex;flex-direction:column;gap:4px;}
.progress-item{display:flex;flex-direction:column;gap:2px;}
.progress-label{display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);}
.progress-label span:last-child{color:var(--text-primary);font-family:'Share Tech Mono',monospace;font-size:9px;}
.progress-bar{height:4px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;}
.progress-fill{height:100%;border-radius:3px;transition:width .5s;}
.fill-green{background:linear-gradient(90deg,#2d8a52,var(--green));}
.fill-gold{background:linear-gradient(90deg,var(--gold-dark),var(--gold));}
.fill-blue{background:linear-gradient(90deg,#2060a0,var(--blue));}
.fill-red{background:linear-gradient(90deg,#8b1a1a,var(--red));}
.fill-purple{background:linear-gradient(90deg,#5b2d8e,var(--purple));}
.owned-list{display:flex;flex-direction:column;gap:3px;max-height:220px;overflow-y:auto;}
.owned-item{background:var(--bg-card);border:1px solid var(--border-light);border-radius:5px;padding:5px 8px;display:flex;justify-content:space-between;align-items:center;font-size:11px;}
.owned-item .o-count{background:rgba(201,168,76,.15);color:var(--gold);font-family:'Share Tech Mono',monospace;font-size:10px;padding:2px 6px;border-radius:10px;}
hr.sep{border:none;border-top:1px solid var(--border-light);margin:2px 0;}

/* CENTER */
#center-panel{background:var(--bg-deep);padding:16px;overflow-y:auto;max-height:calc(100vh - 56px);}
.shop-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:7px;}
.shop-filters{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;}
.filter-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;padding:4px 9px;border-radius:4px;cursor:pointer;transition:all .15s;}
.filter-btn:hover,.filter-btn.active{background:rgba(201,168,76,.15);border-color:var(--gold);color:var(--gold);}
.qty-selector{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);}
.qty-selector select{background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);padding:3px 6px;border-radius:4px;font-size:12px;}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;}
.building-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);padding:12px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}
.building-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .2s;}
.building-card:hover{background:var(--bg-hover);border-color:var(--border);transform:translateY(-1px);box-shadow:var(--shadow);}
.building-card:hover::before{opacity:1;}
.building-card.locked{opacity:.4;cursor:not-allowed;}
.building-card.locked:hover{transform:none;box-shadow:none;}
.building-card.affordable{border-color:rgba(76,175,122,.3);}
.card-icon{font-size:24px;margin-bottom:4px;line-height:1;}
.card-name{font-family:'Cinzel',serif;font-size:11px;font-weight:600;color:var(--text-primary);margin-bottom:2px;}
.card-category{font-size:9px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}
.card-stats{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.card-stat{display:flex;justify-content:space-between;font-size:10px;}
.card-stat .s-label{color:var(--text-muted);}
.card-stat .s-val{font-family:'Share Tech Mono',monospace;font-size:9px;}
.s-val.green{color:var(--green);}.s-val.gold{color:var(--gold);}.s-val.blue{color:var(--blue);}.s-val.red{color:var(--red);}
.card-lock-msg{font-size:9px;color:var(--text-muted);font-style:italic;margin-bottom:6px;}
.buy-btn{width:100%;background:linear-gradient(135deg,rgba(201,168,76,.15),rgba(201,168,76,.08));border:1px solid var(--gold-dark);color:var(--gold-light);font-family:'Cinzel',serif;font-size:10px;font-weight:600;letter-spacing:1px;padding:6px;border-radius:4px;cursor:pointer;transition:all .15s;}
.buy-btn:hover{background:rgba(201,168,76,.25);border-color:var(--gold);}
.buy-btn:disabled{opacity:.35;cursor:not-allowed;}
.buy-btn.loading{opacity:.6;cursor:wait;}
.buy-btn.locked-btn{border-color:#333;color:var(--text-muted);cursor:not-allowed;}
.demolish-btn{width:100%;background:rgba(220,50,50,.08);border:1px solid rgba(220,50,50,.35);color:#e07070;font-family:'Cinzel',serif;font-size:9px;font-weight:600;letter-spacing:1px;padding:4px;border-radius:4px;cursor:pointer;transition:all .15s;margin-top:3px;}
.demolish-btn:hover{background:rgba(220,50,50,.2);border-color:#e07070;color:#ffaaaa;}
.demolish-btn:disabled{opacity:.35;cursor:not-allowed;}
.owned-badge{position:absolute;top:7px;right:7px;background:rgba(201,168,76,.2);border:1px solid var(--gold-dark);color:var(--gold);font-family:'Share Tech Mono',monospace;font-size:9px;padding:2px 5px;border-radius:10px;}

/* RIGHT PANEL */
#right-panel{background:var(--bg-panel);border-left:1px solid var(--border);padding:13px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:calc(100vh - 56px);}
.tabs{display:flex;gap:3px;margin-bottom:8px;}
.tab-btn{flex:1;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;padding:5px;border-radius:4px;cursor:pointer;transition:all .15s;text-align:center;}
.tab-btn.active{background:rgba(201,168,76,.15);border-color:var(--gold);color:var(--gold);}
.news-feed{display:flex;flex-direction:column;gap:4px;max-height:170px;overflow-y:auto;}
.news-item{background:var(--bg-card);border-left:3px solid var(--gold-dark);padding:5px 8px;font-size:11px;border-radius:0 4px 4px 0;animation:slideIn .3s ease;}
.news-item.good{border-color:var(--green);}.news-item.bad{border-color:var(--red);}.news-item.info{border-color:var(--blue);}
.news-item .n-time{font-size:9px;color:var(--text-muted);font-family:'Share Tech Mono',monospace;}
@keyframes slideIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:translateX(0)}}
.milestone-list{display:flex;flex-direction:column;gap:4px;}
.milestone{background:var(--bg-card);border:1px solid var(--border-light);border-radius:6px;padding:8px;display:flex;gap:7px;align-items:flex-start;}
.milestone.done{border-color:rgba(76,175,122,.3);}
.milestone .m-icon{font-size:15px;}
.milestone .m-info{flex:1;}
.milestone .m-title{font-family:'Cinzel',serif;font-size:10px;color:var(--text-primary);}
.milestone .m-desc{font-size:9px;color:var(--text-muted);margin-top:1px;}
.milestone .m-prog{font-size:9px;color:var(--gold);font-family:'Share Tech Mono',monospace;margin-top:2px;}
.milestone.done .m-title{color:var(--green);}
.upgrade-list{display:flex;flex-direction:column;gap:6px;}
.upgrade-card{background:linear-gradient(135deg,rgba(123,47,247,.1),rgba(201,168,76,.04));border:1px solid rgba(123,47,247,.3);border-radius:var(--radius);padding:10px;}
.upgrade-card .u-name{font-family:'Cinzel',serif;font-size:10px;color:#c090ff;margin-bottom:2px;}
.upgrade-card .u-desc{font-size:10px;color:var(--text-muted);margin-bottom:6px;}
.upgrade-card .u-price{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--gold);margin-bottom:4px;}
.upgrade-btn{width:100%;background:linear-gradient(135deg,#7b2ff7,#4a1b9e);border:none;color:#fff;font-family:'Cinzel',serif;font-size:9px;font-weight:600;letter-spacing:1px;padding:6px;border-radius:4px;cursor:pointer;transition:all .15s;}
.upgrade-btn:hover{box-shadow:0 2px 12px rgba(123,47,247,.4);}
.upgrade-btn.owned{background:rgba(76,175,122,.2);border:1px solid var(--green);color:var(--green);cursor:default;}
.lb-entry{background:var(--bg-card);border:1px solid var(--border-light);border-radius:5px;padding:6px 9px;display:flex;align-items:center;gap:7px;margin-bottom:3px;}
.lb-rank{font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--gold);width:22px;text-align:center;}
.lb-info{flex:1;}
.lb-city{font-family:'Cinzel',serif;font-size:10px;color:var(--text-primary);}
.lb-mayor{font-size:9px;color:var(--text-muted);}
.lb-score{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--gold);}
.advisor-panel{background:linear-gradient(135deg,rgba(123,47,247,.08),rgba(201,168,76,.04));border:1px solid rgba(123,47,247,.25);border-radius:var(--radius);padding:10px;}
.advisor-panel .a-title{font-family:'Cinzel',serif;font-size:9px;color:#c090ff;margin-bottom:5px;letter-spacing:1px;}
.advisor-panel textarea{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--border);color:var(--text-primary);font-family:'Crimson Pro',serif;font-size:12px;padding:6px;border-radius:4px;resize:none;height:55px;margin-bottom:5px;}
.advisor-btn{width:100%;background:linear-gradient(135deg,#7b2ff7,#4a1b9e);border:none;color:#fff;font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;padding:6px;border-radius:4px;cursor:pointer;}
.advisor-btn:disabled{opacity:.5;cursor:wait;}
.advisor-response{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:4px;padding:7px;font-size:11px;color:var(--text-primary);margin-top:6px;line-height:1.5;}
.advisor-recs{margin-top:4px;display:flex;flex-wrap:wrap;gap:3px;}
.advisor-rec-tag{background:rgba(123,47,247,.2);border:1px solid rgba(123,47,247,.4);color:#c090ff;font-size:9px;padding:2px 6px;border-radius:10px;}
.community-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:6px;padding:8px;margin-bottom:4px;}
.community-card-name{font-family:'Cinzel',serif;font-size:10px;color:var(--text-primary);margin-bottom:2px;}
.community-card-meta{font-size:9px;color:var(--text-muted);display:flex;justify-content:space-between;}
.inspire-btn{background:rgba(201,168,76,.1);border:1px solid var(--gold-dark);color:var(--gold);font-size:9px;padding:2px 7px;border-radius:3px;cursor:pointer;transition:all .15s;margin-top:4px;}
.inspire-btn:hover{background:rgba(201,168,76,.2);}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease;}
.modal-overlay.hidden{display:none;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:26px;max-width:450px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.8);}
.modal h2{font-family:'Cinzel',serif;font-size:17px;color:var(--gold);margin-bottom:6px;}
.modal p{color:var(--text-muted);font-size:13px;margin-bottom:14px;}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.modal-opt{background:var(--bg-card);border:2px solid var(--border);border-radius:8px;padding:13px;cursor:pointer;text-align:center;transition:all .15s;}
.modal-opt:hover,.modal-opt.selected{border-color:var(--gold);background:rgba(201,168,76,.1);}
.modal-opt .opt-icon{font-size:24px;margin-bottom:4px;}
.modal-opt .opt-name{font-family:'Cinzel',serif;font-size:10px;color:var(--text-primary);}
.modal input{width:100%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);font-family:'Crimson Pro',serif;font-size:14px;padding:9px 11px;border-radius:6px;margin-bottom:10px;outline:none;}
.modal input:focus{border-color:var(--gold);}
.modal-start-btn{width:100%;background:linear-gradient(135deg,var(--gold-dark),var(--gold));border:none;color:#000;font-family:'Cinzel',serif;font-size:12px;font-weight:900;letter-spacing:2px;padding:12px;border-radius:8px;cursor:pointer;transition:all .2s;}
.modal-start-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(201,168,76,.4);}
.modal-start-btn:disabled{opacity:.5;cursor:wait;}
.modal-tabs{display:flex;gap:5px;margin-bottom:14px;}
.modal-tab{flex:1;padding:7px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;border-radius:5px;cursor:pointer;text-align:center;transition:all .15s;}
.modal-tab.active{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.1);}
.modal-err{color:var(--red);font-size:11px;margin-bottom:7px;text-align:center;}
.auth-toggle{text-align:center;margin-top:10px;font-size:12px;color:var(--text-muted);}
.auth-toggle a{color:var(--gold);cursor:pointer;text-decoration:underline;}

/* TOAST */
.toast{position:fixed;bottom:26px;right:22px;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:9px 15px;font-size:12px;color:var(--text-primary);z-index:9999;animation:toastIn .3s ease;box-shadow:var(--shadow);}
.toast.good{border-color:var(--green);color:var(--green);}
.toast.bad{border-color:var(--red);color:var(--red);}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* TICKER */
#ticker{position:fixed;bottom:0;left:0;right:0;background:rgba(10,12,15,.95);border-top:1px solid var(--border);height:25px;overflow:hidden;z-index:50;display:flex;align-items:center;}
.ticker-inner{display:flex;gap:60px;animation:tickerScroll 80s linear infinite;white-space:nowrap;font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--text-muted);padding:0 14px;}
.ticker-inner span{color:var(--gold);}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:rgba(201,168,76,.2);border-radius:3px;}
@media(max-width:1100px){#app{grid-template-columns:220px 1fr}#right-panel{display:none}}
@media(max-width:720px){#app{grid-template-columns:1fr}#left-panel{max-height:none}#center-panel{max-height:none}}

/* THEME PICKER */
.theme-picker-panel{position:fixed;top:60px;right:10px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:8px;z-index:500;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:3px;min-width:155px;}
.theme-picker-panel.hidden{display:none;}
.theme-picker-label{font-family:'Cinzel',serif;font-size:8px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;padding:2px 6px 5px;border-bottom:1px solid var(--border-light);margin-bottom:2px;}
.theme-opt{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;color:var(--text-primary);font-family:'Cinzel',serif;font-size:10px;letter-spacing:1px;padding:6px 8px;border-radius:4px;cursor:pointer;text-align:left;transition:all .15s;width:100%;}
.theme-opt:hover{background:var(--bg-hover);border-color:var(--border);}
.theme-opt.active{border-color:var(--gold);color:var(--gold);}
.theme-swatch{width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,255,255,.25);flex-shrink:0;}

/* PRESTIGE */
body.prestige .city-name-display{text-shadow:0 0 12px #f5c842,0 0 24px #f5c842;color:#f5c842;}
body.prestige #header{box-shadow:0 2px 20px rgba(245,200,66,.25);}
body.prestige .panel-title{color:#f5c842;}