/* NUSA CITY — app.css : playful blue + Poppins, flat borders, pill accents */
:root{ --nusa:#2563eb; --ink:#0a1128; }
html,body{ height:100%; }
body{ font-family:'Poppins',system-ui,sans-serif; background:#070d20; }
#scene{ position:fixed; inset:0; }
#scene canvas{ display:block; }
.vignette{ position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(4,8,20,.55) 100%); }
.film-grain{ position:fixed; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay; }
.hud-card{ background:rgba(10,17,38,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14); }
.glass{ background:rgba(255,255,255,.06); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); }
.chip{ font-size:10px; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.2); }
.bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.15); overflow:hidden; }
.bar > div{ height:100%; border-radius:999px; transition:width .25s ease; }
.blink{ animation:blink 1s infinite; }
@keyframes blink{ 50%{ opacity:.35; } }
.beacon-pulse{ animation:beacon 1.4s ease-in-out infinite; }
@keyframes beacon{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.25); opacity:.6;} }
#minimap{ border-radius:1rem; border:1px solid rgba(255,255,255,.2); }
.joystick{ touch-action:none; user-select:none; -webkit-user-select:none; }
.tbtn{ min-width:56px; min-height:56px; }
input[type=range]{ accent-color:#2563eb; }
.cat-card{ transition:transform .2s ease, border-color .2s ease; }
.cat-card:hover{ transform:translateY(-3px); border-color:rgba(96,165,250,.6); }
.fbtn{ transition:all .2s; }
.fbtn.active{ background:#fff; color:#0a1128; border-color:#fff; }
.rule{ height:1px; background:linear-gradient(90deg,#2563eb,transparent); }
.scroll-thin::-webkit-scrollbar{ width:8px; height:8px; }
.scroll-thin::-webkit-scrollbar-thumb{ background:#2563eb; border-radius:99px; }
.scroll-thin::-webkit-scrollbar-track{ background:#0a1128; }
@media (max-width:640px){
  #minimap{ width:110px !important; height:110px !important; }
}
@media (prefers-reduced-motion: reduce){
  .beacon-pulse,.blink{ animation:none; }
}
:focus-visible{ outline:2px solid #60a5fa; outline-offset:2px; }