.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(11,13,20,.55),rgba(11,13,20,.92));z-index:20}
.panel{width:min(92vw,380px);background:rgba(20,24,36,.94);border:1px solid rgba(139,92,246,.45);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 0 40px rgba(139,92,246,.25)}
.panel h1{margin:0;font-size:32px;letter-spacing:2px;text-align:center;background:linear-gradient(90deg,var(--g),var(--v));-webkit-background-clip:text;background-clip:text;color:transparent}
.panel h1 span{font-weight:400}
.panel h2,.panel h3{margin:0;text-align:center}
.panel h3{color:var(--g)}
.panel p{margin:0;text-align:center;line-height:1.5}
.sub{color:var(--mut);font-size:14px}.small{font-size:12px}
.panel button{padding:13px;border-radius:10px;border:1px solid rgba(139,92,246,.5);background:#1c2133;font-weight:600;transition:.15s}
.panel button:hover:not(:disabled){background:#262c44;transform:translateY(-1px)}
.panel button:disabled{opacity:.4;cursor:default}
.panel button.primary{background:linear-gradient(90deg,var(--g),var(--v));color:#06110c;border:0}
.panel button.danger{border-color:#ef4444;color:#fca5a5}
.panel label{display:flex;gap:10px;align-items:center;padding:6px 2px}
#dialog{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:min(94vw,680px);background:rgba(20,24,36,.95);border:2px solid var(--v);border-radius:14px;padding:14px 18px;z-index:15;box-shadow:0 0 30px rgba(139,92,246,.35);cursor:pointer}
#dialog-who{color:var(--g);font-weight:700;margin-bottom:4px}
#dialog-text{line-height:1.45;min-height:2.9em}
#dialog .hint{text-align:right;color:var(--mut);font-size:12px;margin-top:6px}
#dialog-portrait{float:left;width:80px;height:80px;margin:0 14px 6px 0;image-rendering:pixelated;background:#292d3a;border-radius:8px}
#dialog.with-portrait:after{content:'';display:block;clear:both}
#shop-portrait{align-self:center;width:80px;height:80px;image-rendering:pixelated;background:#292d3a;border-radius:8px}
.cast-art{display:flex;align-items:center;justify-content:center;background:#292d3a;border-radius:8px;gap:4px;overflow:hidden}
.cast-portrait{width:80px;height:80px;image-rendering:pixelated;flex:0 0 80px}
.cast-sprite{width:128px;height:112px;image-rendering:pixelated;flex:0 1 128px;min-width:0}
.cast-select{flex:1;min-width:0;padding:8px;background:#1c2133;color:#fff;border:1px solid var(--v);border-radius:8px;font:inherit}
.civil-cast{width:100%;height:auto;image-rendering:pixelated;background:#292d3a;border-radius:8px}
.weapon-row-icon{width:64px;height:48px;flex:0 0 64px;image-rendering:pixelated;background:#222735;border-radius:6px}
.weapon-hud-icon{width:48px;height:36px;flex:0 0 48px;image-rendering:pixelated;background:#10131d;border:1px solid #8b5cf6;border-radius:8px}
.row:has(.weapon-row-icon)>div:first-of-type{flex:1;min-width:0}
@media(max-width:520px){.weapon-row-icon{width:48px;height:36px;flex-basis:48px}.row:has(.weapon-row-icon){gap:6px;padding:7px}.row:has(.weapon-row-icon) .r button{min-width:74px;padding:8px}}
.row:has(.weapon-row-icon) b{overflow-wrap:anywhere}
#objective,#minimap{top:calc(var(--hud-height,32px) + 20px)}
@media(max-width:520px){#minimap{width:110px;height:78px}#objective{max-width:calc(100vw - 140px)}}

.panel.wide{width:min(94vw,640px);max-height:92vh;overflow:auto}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.panel .tabs button{padding:8px 14px;flex:1}
.panel .tabs button.active{background:linear-gradient(90deg,var(--g),var(--v));color:#06110c;border:0}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(139,92,246,.3);border-radius:10px;margin:4px 0;background:#10131d;text-align:left}
.row small{display:block;color:var(--mut);margin-top:2px}
.row .r{display:flex;align-items:center;gap:8px;white-space:nowrap}
.row .price{color:var(--g);font-weight:700}
.panel .row button{padding:8px 12px;min-width:92px}
.sec{margin:8px 0 2px;color:var(--g);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:1px}
.wardrobe-preview{display:block;width:100%;max-width:420px;height:auto;margin:8px auto;image-rendering:pixelated;border-radius:10px}
.wardrobe-captions{display:flex;justify-content:space-around;max-width:420px;margin:0 auto 10px;font-size:13px}
.faction-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.faction-card{border:1px solid #4e426b;border-radius:10px;background:#10131d;padding:12px;display:flex;flex-direction:column;gap:8px}
.faction-card h3{display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px}
.faction-card b{font-size:13px;text-align:center}
.faction-preview{width:100%;height:auto;image-rendering:pixelated;border-radius:8px}
.faction-card .sub{font-size:12px}
#wardrobe-category{flex:1;min-width:0;padding:10px;background:#1c2133;color:#fff;border:1px solid var(--v);border-radius:8px;font:inherit}
#bigmap{width:100%;border:2px solid var(--v);border-radius:10px;background:#000}

#bigmap{display:block;aspect-ratio:1.41;width:100%;height:auto;max-height:58vh;object-fit:contain;image-rendering:auto;touch-action:manipulation;cursor:crosshair}
#map-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--mut)}
#map-tools button{padding:7px 10px;flex:0 0 auto}
#map-selection{flex:1;min-width:150px;color:#e5e7eb}
@media(max-width:520px){.panel.wide{width:96vw;padding:16px 12px;max-height:94vh}#bigmap{max-height:48vh}#map-tools{font-size:12px}}
@media(max-width:520px){#info-tabs button{flex:1 1 45%}.panel.wide{touch-action:pan-y}}
@media(max-width:520px){.faction-grid{grid-template-columns:1fr}}