.district-hud{position:absolute;right:24px;top:calc(150px + var(--safe-top));width:152px;background:#102019e8;border:1px solid #b1c58f42;border-radius:6px;padding:8px;box-shadow:0 4px 18px #07110b36;color:#c2d1b7;text-align:center;pointer-events:none}
#district-sector{display:block;font:8px/1.4 monospace;letter-spacing:.4px;min-height:12px;margin-bottom:6px}
#district-map{display:block;width:100%;height:auto;border:1px solid #879b6a30;border-radius:3px}
.district-parts{display:flex;gap:5px;margin:6px 0;justify-content:center}
.district-parts b{min-width:29px;padding:3px 5px;font:10px monospace;background:#373521;border:1px solid #f4d38c57;border-radius:3px;color:#f4d38c}
.district-parts b.on{background:#203d2c;border-color:#8cbf9866;color:#b2e0b2}
#district-hint{display:block;font:7px/1.6 monospace;color:#ead69d}
.district-hud small{display:block;font:8px/1.6 monospace;color:#b0bca8;margin-top:4px}
.district-hud small i{display:inline-block;width:5px;height:5px;background:#c5f478;border-radius:50%;vertical-align:1px}
.district-hud small .ally-dot{background:#8fcce8}
.district .objective{border-color:#f4d38c40;color:#eadbb7;max-width:calc(100vw - 32px);white-space:normal;text-align:center;line-height:1.4}
.district .objective .status-dot{background:#f4d38c;flex-shrink:0}
.district .extraction-progress{width:220px}
.district .extraction-progress span{font-size:9px;letter-spacing:1px;color:#f4d38c}
.district .extraction-progress i{background:#f4d38c}
@media(max-width:680px){
 .district-hud{right:14px;top:calc(221px + var(--safe-top));width:128px;padding:6px}
 .cooperative .district-hud{top:calc(242px + var(--safe-top))}
 .district .objective{width:max-content;font-size:9px;padding:7px 10px}
 #district-sector{font-size:7px}
 #district-hint{font-size:6px}
 .district-hud small{font-size:7px}
}
@media(max-height:700px) and (orientation:portrait){
 .district-hud{width:106px;padding:5px;top:calc(218px + var(--safe-top))}
 .cooperative .district-hud{top:calc(239px + var(--safe-top))}
 #district-hint{display:none}
 .district-parts{margin:4px 0;gap:3px}
 .district-parts b{min-width:24px;padding:2px 3px;font-size:9px}
}
@media(max-height:500px) and (orientation:landscape){
 .district-hud,.cooperative .district-hud{right:16px;top:127px;width:112px;padding:5px}
 .district-hud small,#district-hint{display:none}
 #district-sector{font-size:7px;margin-bottom:3px}
 .district-parts{margin:3px 0 0}
 .district .objective{top:80px;max-width:55vw;font-size:8px}
}