/* ============================================================
   LAYOUT — the three fixed bands (HUD / stage / inventory)
   plus the container-view shell that covers them.
============================================================ */

/* ---------- HUD ---------- */
/* THE NOTCH USED TO EAT THIS ROW.

   height was a flat 56px and the safe-area inset was padding INSIDE it, so on
   any phone with a status bar to clear (~47-59px) the content box was down to
   single digits: the room name, the counter and the buttons beside them were
   all shoved against the top of the screen and spilled out of the band
   into the stage. The inset is now ADDITIVE — the band grows to clear the
   status bar and still has its full 64px for the row — plus real padding on
   both sides of the content so nothing is glued to the clock above it or the
   room below it. Anything that has to position itself under the HUD repeats
   this same sum — see the note in css/base.css. */
#hud{
  height:calc(var(--hud-h) + env(safe-area-inset-top, 0px));flex:0 0 auto;
  display:flex;align-items:center;gap:9px;
  padding:6px 12px 10px;
  padding-top:calc(env(safe-area-inset-top, 0px) + 6px);
}
/* min-width:0 because a flex item defaults to min-width:auto and refuses to
   shrink below its text. On a 320px phone that pushed the whole row wide and
   carried #gearBtn clean off the right edge — unreachable on every screen,
   which is the one thing the gear is not allowed to be.

   nowrap + ellipsis with it, on both lines: shrinking alone just lets the name
   wrap to three lines and spill out of the fixed-height band into the stage. */
#roomName{
  font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  /* Tracking was .14em/.2em, which cost "OBSERVATORY" and "SWIPE THROUGH
     DOORS" about 25px between them — enough that both ellipsised on a 390pt
     phone while five fixed-width controls sat to the right of them with room
     to spare. This is the widest thing in the row and the only one that can
     lose characters, so it is the one that gets the tracking trimmed. */
}
#roomName small{
  display:block;font-size:10px;letter-spacing:.12em;color:var(--ink-dim);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#roomName.done{color:var(--gold);text-shadow:0 0 14px rgba(245,197,66,.85);animation:donepulse 2.4s ease-in-out infinite}
#roomName.done small{color:var(--gold);opacity:.85}
@keyframes donepulse{50%{text-shadow:0 0 4px rgba(245,197,66,.4)}}
#remaining{
  margin-left:auto;font-size:13px;font-weight:700;color:var(--ink-dim);
  background:var(--panel);padding:6px 11px;border-radius:999px;white-space:nowrap;
  flex:0 0 auto;
}
/* 38px drawn, 46px tappable. Apple asks for 44pt and these sit at the very
   edge of the screen, where the miss rate is worst — but a 46px disc of
   panel colour would crowd the row and read as heavy. So the visible chip
   stays 38 and an invisible ::after carries the target out past it. It has to
   be a child rather than padding on the button, because padding would grow
   the chip too. */
.hudbtn{
  width:38px;height:38px;border-radius:999px;border:0;background:var(--panel);
  color:var(--ink-dim);font-size:16px;font-weight:700;flex:0 0 auto;cursor:pointer;
  position:relative;
}
.hudbtn::after{
  content:"";position:absolute;inset:-4px;border-radius:inherit;
}
/* SETTINGS IS ALWAYS REACHABLE.

   The rest of the HUD sits behind the overlays (which are z-index 120 and
   paint over everything), so on the title screen, the job board or the win
   screen the gear was unreachable and you had to start a level to change the
   volume. #hud is a plain flex band and creates no stacking context, so this
   competes directly with the overlays and wins, WITHOUT taking the button out
   of the HUD's layout. */
#gearBtn{position:relative;z-index:130}
/* The one exception: the talent draft is a forced pick-one-of-three with no
   close button and no outside tap on purpose, and a gear floating over it is
   a back door out of the only choice the game ever insists on. */
body.drafting #gearBtn{display:none}

/* DEBUG: the talent bench. A plain .hudbtn — NOT the gear's z-index 130 —
   because it is hidden by an overlay for the same reason ⭐ and 🧰 are, and a
   debug button floating over the win screen (where the run is still `active`)
   would be the one thing on that screen you did not put there.

   It lived under the inventory first, which was wrong twice: the bottom edge of
   the viewport is where a phone's home indicator, a desktop taskbar and the
   browser's own chrome all land, and the HUD already does the arithmetic to
   clear the notch at the other end.

   Ringed in gold rather than filled, so a screenshot with it on is obviously a
   screenshot with a debug tool on. Same signal the debug drawer's summary uses
   (css/overlays.css). */
#benchBtn{
  color:var(--gold);
  box-shadow:inset 0 0 0 2px rgba(245,197,66,.45);
}

/* THE ROW HAS TO SURVIVE 320px WITH EVERYTHING IN IT.

   The band is a fixed-width control every time something is added to it, and
   two things have been: 🧰 when the holdall shipped, and ✨ with the bench. At
   320px with the holdall taken, #roomName was already squeezed to ZERO and
   #gearBtn's right edge landed at 326 on a 320px screen — off the edge, which
   is the one thing the gear is not allowed to be (see the note above). The
   bench added another 47px to a row that had already run out.

   So the whole row tightens on a narrow phone rather than any one control
   being hidden: smaller discs, tighter gaps, less pill padding. Nothing
   reflows and nothing disappears — a HUD that rearranges itself by width is a
   HUD you have to re-learn on every device. 32px is under Apple's 44pt, which
   .hudbtn's invisible ::after target already carries past the drawn edge. */
@media (max-width:400px){
  #hud{gap:5px;padding-left:8px;padding-right:8px}
  .hudbtn{width:32px;height:32px;font-size:14px}
  .hudbtn::after{inset:-7px}
  #remaining{font-size:11px;padding:4px 8px}
  #shopBtn,#bagBtn{font-size:12px;padding:0 7px!important}
  #roomName{font-size:13px}
  #roomName small{font-size:9px}
}

/* AND THE BENCH PAYS FOR ITS OWN SEAT. #roomName is the only thing in the row
   that can lose characters, so a sixth control comes out of the room name and
   nothing else — at 414 with the holdall taken it went from "THE RE…" to "T…".
   Rather than tighten the row for every phone in a change that is about a debug
   button, the row tightens only while that button is on screen, which claws
   back about what the button costs. Set by syncBenchBtn(), so it is on exactly
   when #benchBtn is.

   Bounded to min-width:401px so it cannot fight the block above. A media query
   adds no specificity, so `body.benched .hudbtn` (0,2,1) would quietly win over
   the narrow query's `.hudbtn` (0,1,0) whatever order they are written in — the
   phone would get the 34px discs meant for the roomy case. Below 401px the
   narrow rules already tighten everything this does, harder. */
@media (min-width:401px){
  body.benched #hud{gap:6px}
  body.benched .hudbtn{width:34px;height:34px;font-size:15px}
  body.benched .hudbtn::after{inset:-6px}
  body.benched #shopBtn,
  body.benched #bagBtn{padding:0 7px!important}
}

/* ---------- STAGE ---------- */
#stage{
  flex:1 1 auto;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:10px 0 6px;
}
#roomHost{
  position:relative;
  width:min(96vw, 760px);
  height:100%;
  touch-action:none;
}
/* The camera. Owns zoom and pan ONLY; the .room inside owns the slide and
   bounce animations. They shared a single transform in v3, which is why
   bounce() had to re-apply the camera afterwards and why zoom reset on every
   door. */
.cam{
  position:absolute;inset:0;
  transform-origin:center center;
  will-change:transform;
}
.cam.smooth{transition:transform .2s ease}

/* ---------- INVENTORY BAR ---------- */
#invBar{
  height:var(--inv-h);flex:0 0 auto;position:relative;z-index:70;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding-bottom:env(safe-area-inset-bottom);
  touch-action:none;
}
#handLabel{
  position:absolute;top:2px;left:50%;transform:translateX(-50%);
  font-size:13px;font-weight:700;color:var(--gold);
  letter-spacing:.06em;white-space:nowrap;pointer-events:none;height:18px;
}

/* ---------- CONTAINER VIEW SHELL ---------- */
#contView{
  position:fixed;left:0;right:0;top:0;bottom:var(--inv-h);
  z-index:50;display:none;
  background:rgba(15,11,6,.78);
  backdrop-filter:blur(3px);
  align-items:center;justify-content:center;flex-direction:column;gap:12px;
}
#contView.open{display:flex}
#contPanel{
  background:linear-gradient(#7a5533,#5e4126);
  border:4px solid #4e351d;border-radius:16px;
  padding:12px;box-shadow:0 24px 60px rgba(0,0,0,.6);
}
#contTitle{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-align:center;margin-bottom:8px;font-weight:700;opacity:.85}
#contClose{
  border:0;background:var(--panel);color:var(--ink);
  font-size:14px;font-weight:700;letter-spacing:.1em;
  padding:10px 22px;border-radius:999px;cursor:pointer;
}

/* ---------- THE HOLDALL ----------
   Deliberately the container panel's clothes, not the inventory bar's: it IS a
   container — you open it, move things in and out, and close it — and dressing
   it as a second row of hand slots would promise it works as fast as your
   hands. It does not, and that friction is the balance. */
#bagView{
  position:fixed;left:0;right:0;top:0;bottom:var(--inv-h);
  z-index:50;display:none;
  background:rgba(15,11,6,.78);
  backdrop-filter:blur(3px);
  align-items:center;justify-content:center;flex-direction:column;gap:12px;
}
#bagView.open{display:flex}
#bagPanel{
  background:linear-gradient(#4a5a6e,#33404f);
  border:4px solid #26303b;border-radius:16px;
  padding:12px;box-shadow:0 24px 60px rgba(0,0,0,.6);
}
#bagTitle{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  text-align:center;margin-bottom:8px;font-weight:700;opacity:.85;
}
#bagGrid{display:grid;grid-auto-flow:column;gap:6px}
.bagslot{
  width:56px;height:56px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;line-height:1;cursor:pointer;
  background:rgba(0,0,0,.22);
  border:2px solid rgba(255,255,255,.10);
}
.bagslot.full{ background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22) }
.bagslot:active{ transform:scale(.94) }
/* Dragging one slot onto another to reorder, and dragging out of a hand slot
   onto the panel. The same two signals the container grid uses (.cell.hot,
   .furn.drophot), because they are the same two gestures. */
.bagslot.hot{ box-shadow:0 0 0 3px rgba(245,197,66,.85) }
#bagPanel.drophot{ box-shadow:0 0 0 3px rgba(245,197,66,.8), 0 24px 60px rgba(0,0,0,.6) }
#bagClose{
  border:0;background:var(--panel);color:var(--ink);
  font-size:14px;font-weight:700;letter-spacing:.1em;
  padding:10px 22px;border-radius:999px;cursor:pointer;
}