.city-page{background:#101410;color:#ece8d4;min-height:70vh}.city-hero{padding:2.6rem 0 2rem;background:linear-gradient(135deg,#263222,#11170f);border-bottom:1px solid #4b5942}.city-hero small{color:#aeb9a4}.city-toolbar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;padding:1rem;margin:1rem 0;background:#171c15;border:1px solid #3b4635;border-radius:7px}.city-toolbar input[type=search]{flex:1;min-width:230px;padding:.7rem;background:#0e120d;color:#fff;border:1px solid #505d48;border-radius:4px}.city-toolbar span{margin-left:auto;color:#b7c0ad}.city-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding-bottom:2rem}.city-card{position:relative;background:#171c16;border:1px solid #3a4435;border-top:4px solid #747b70;border-radius:7px;padding:1rem;box-shadow:0 10px 25px #0004;transition:.18s}.city-card:hover,.city-card:focus{transform:translateY(-2px);border-color:#9daf88;z-index:2;outline:none}.city-card.is-contested{border-top-color:#e14e4e;background:linear-gradient(180deg,#391b1b,#171c16 42%)}.city-card header{display:flex;justify-content:space-between;gap:.8rem}.city-card header>div:first-child{display:flex;gap:.7rem}.city-card h2{font-size:1.05rem;margin:0}.city-card small{color:#9da795}.city-flag{width:30px;height:20px;object-fit:cover;border:1px solid #ffffff55;border-radius:2px}.city-flag-neutral{display:inline-block;background:#667}.city-badges{display:flex;gap:.25rem;align-items:flex-start}.city-badges b{font-size:.67rem;padding:.2rem .36rem;border-radius:3px}.ao{background:#9f2626}.do{background:#1d5f9b}.contested{background:#df8d24;color:#111}.stable{background:#5d645c;color:#fff}.city-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.35rem;margin-top:1rem}.city-facts span{display:block;padding:.45rem;background:#0f130e;border:1px solid #30382d;font-size:.72rem;color:#adb6a5}.city-facts strong{display:block;color:#fff;margin-top:.2rem}.city-ownerbar{display:flex;height:12px;margin-top:.8rem;background:#222;overflow:hidden;border-radius:9px;border:1px solid #ffffff20}.bar-axis{background:#8f9296}.bar-allied{background:#3e79c7}.bar-stable{background:linear-gradient(90deg,#5d625c,#777d76)}.city-barlegend{display:flex;justify-content:space-between;gap:.5rem;margin-top:.35rem;font-size:.7rem;color:#b5bdb0}.city-popover{position:fixed;z-index:10000;max-height:min(620px,80vh);overflow:auto;background:linear-gradient(180deg,#111710,#080b08);border:1px solid #9aaa8b;border-radius:10px;padding:1rem;box-shadow:0 24px 80px #000e}.city-popover[hidden]{display:none}.city-popover-close{position:absolute;right:.55rem;top:.4rem;border:0;background:#252d23;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer}.city-popover-content>header{display:flex;justify-content:space-between;align-items:flex-start;padding-right:2.2rem}.city-popover-content>header>div{display:flex;gap:.7rem}.city-popover-content h3{margin:.1rem 0 0}.city-popover-content header span{padding:.25rem .45rem;border-radius:4px;font-size:.72rem;font-weight:700}.city-popover-content header .danger{background:#b73535}.city-popover-content header .quiet{background:#596158}.city-popover-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin:1rem 0}.city-popover-metrics span{padding:.55rem;background:#111710;border:1px solid #343e31;color:#aeb7a9;font-size:.74rem}.city-popover-metrics b{display:block;color:#fff;margin-top:.2rem}.city-popover-balance{display:flex;height:14px;border-radius:8px;overflow:hidden}.city-popover-balance .axis{background:#8f9296}.city-popover-balance .allied{background:#3e79c7}.city-popover-balance-label{display:flex;justify-content:space-between;font-size:.72rem;margin:.35rem 0 1rem}.city-popover-content ul{list-style:none;padding:0;margin:.5rem 0}.city-popover-content li{display:flex;gap:.55rem;align-items:center;padding:.45rem 0;border-bottom:1px solid #2d352a}.city-popover-content li .city-flag{width:24px;height:16px}.city-popover-content footer{color:#9da795;font-size:.75rem;margin-top:.8rem}@media(max-width:1100px){.city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.city-grid{grid-template-columns:1fr}.city-popover{left:10px!important;right:10px!important;top:auto!important;bottom:10px;width:auto!important}.city-popover-metrics{grid-template-columns:1fr}.city-toolbar span{margin-left:0;width:100%}}