/* ==========================================================================
   /build/ — the tank builder as its own app.
   Everything here is a delta on site.css: the app bar, and the few places the
   shared build-mode rules assume a marketing page underneath them.
   ========================================================================== */

:root{ --appbar-h:52px }

/* ---------- app bar ---------- */
.appbar{
  position:fixed; top:0; left:0; right:0; height:var(--appbar-h); z-index:calc(var(--z-nav) + 25);
  display:flex; align-items:center; gap:12px; padding:0 clamp(10px,2vw,16px);
  background:rgba(10,26,29,.72); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.ab-brand{display:inline-flex; align-items:center; gap:9px; text-decoration:none; flex:none}
.ab-word{font-family:"Yunofish Brand", Nunito, system-ui, sans-serif; font-weight:900; font-size:15px; letter-spacing:.024em;
  color:var(--ink); white-space:nowrap}

/* the tank you are working on. It is a button because naming and saving are the same modal. */
.ab-name{
  font:inherit; font-size:14px; font-weight:500; color:var(--ink-2); background:none; border:0; cursor:pointer;
  margin:0 auto; max-width:min(42vw, 320px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:6px 12px; border-radius:9px; transition:color .18s var(--ease-out), background-color .18s var(--ease-out);
}
.ab-name:hover{color:var(--ink); background:rgba(255,255,255,.07)}

.ab-acts{display:flex; align-items:center; gap:12px; flex:none; margin-left:auto}
.ab-save{
  font:inherit; font-size:13px; font-weight:600; color:var(--on-lime); background:var(--lime); border:0;
  border-radius:999px; height:32px; padding:0 17px; cursor:pointer;
  transition:background-color .18s var(--ease-out), transform .14s var(--ease-out);
}
.ab-save:hover{background:var(--lime-deep)}
.ab-save:active{transform:scale(.96)}

/* the account cluster is permanent chrome here, not something that fades in on scroll */
.app .nav-acct{opacity:1; transform:none; pointer-events:auto}
@media (max-width:820px){ .app .nav-acct{display:flex} }

/* the live inventory, parked under the status HUD. The Layers panel claims the same corner when
   it opens, so the inventory steps aside rather than stacking two panels on one another. */
.app .hero-right{top:calc(var(--appbar-h) + 62px); max-height:calc(100dvh - var(--appbar-h) - 230px);
  overflow:auto; transition:opacity .2s var(--ease-out)}
.app .hero:has(.layers.on) .hero-right{opacity:0; pointer-events:none}
@media (max-width:900px){ .app .hero-right{display:none} }

/* ---------- the tank sits under the bar, not behind it ---------- */
.app.building .hero{top:var(--appbar-h)}
.app .tankhud{top:calc(var(--appbar-h) + 10px)}

@media (max-width:600px){
  :root{ --appbar-h:48px }
  .ab-word{font-size:14px}
  .ab-name{font-size:13px; max-width:38vw}
  .ab-save{height:30px; padding:0 14px}
}