/* The bag room's readout.
   Every colour is a token from base.css, or one of those tokens at an alpha —
   the same thing menu.css does. No hex literals here.

   This is the one HUD in the game that is allowed to look like an instrument,
   and it leans into it: a plate of labelled numbers with bars under them, bolted
   to the side of the screen. Everywhere else the game tells you how a man is
   doing by the way he stands. There is nobody to be coy about in here. */

#bagroom{position:fixed;inset:0;z-index:20;pointer-events:none}
#bagroom.off{display:none}
/* The panel and the way out are the only things you can hit. The rest of the
   screen is the ring, and clicks have to fall through to it. */
#bagroom .nav-back,#bagroom .bag-panel{pointer-events:auto}

.bag-panel{
  position:absolute;right:clamp(10px,2vw,34px);top:50%;transform:translateY(-50%);
  width:min(300px,42vw);
  display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px);
  padding:clamp(14px,2.2vh,22px) clamp(14px,1.6vw,20px);
  border:1px solid rgba(232,225,211,.16);border-radius:2px;
  background:rgba(16,14,12,.80);
  box-shadow:0 10px 40px rgba(0,0,0,.55);
}
#bagroom.arriving .bag-panel{animation:footUp .5s ease-out both .12s}
#bagroom.arriving .nav-back{animation:footUp .5s ease-out both .3s}

.bag-kicker{
  margin:0;font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--amber);opacity:.8;
}

/* ---------- one number ---------- */
/* Label and value on one line, the bar under them, the caption under that.
   Grid rather than flex so every value in the column lands on the same right
   edge whatever it says — three readings that jitter sideways as they update
   are three readings nobody can compare at a glance. */
.bag-stat{display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:baseline}
.bag-lbl{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(232,225,211,.45);
}
.bag-val{
  grid-column:2;justify-self:end;
  font-family:var(--display);font-size:clamp(26px,4.4vh,40px);line-height:.9;
  letter-spacing:.02em;color:var(--bone);
  font-variant-numeric:tabular-nums;
}
/* A landed shot flashes its number rather than silently swapping it, because
   the value can be almost identical two punches running and a reading that
   never moves reads as a reading that has stopped working. */
.bag-val.struck{animation:bagStrike .3s ease-out}
@keyframes bagStrike{
  0%{color:var(--amber);transform:translateX(-4px)}
  100%{color:var(--bone);transform:translateX(0)}
}
/* Still counting: the guard clock while the hands are down. */
.bag-val.waiting{color:rgba(232,225,211,.42)}

.bag-track{
  grid-column:1 / -1;height:5px;border-radius:2px;overflow:hidden;
  background:rgba(232,225,211,.10);
}
.bag-track > i{
  display:block;height:100%;width:100%;border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  background:var(--amber);
  transition:transform .14s ease-out,background-color .14s;
}
/* Wind is spent, not earned, so it is the deduction colour the purse already
   uses for money going out. The guard clock is the same idea one step on: quick
   hands are green, slow hands drift to red as the number climbs. */
#bagCostBar{background:var(--coin-down)}

.bag-sub{
  grid-column:1 / -1;
  font-size:10px;letter-spacing:.06em;color:rgba(232,225,211,.34);
}

.bag-shot{
  margin:0;padding-top:clamp(6px,1.2vh,12px);
  border-top:1px solid rgba(232,225,211,.12);
  font-size:12px;line-height:1.6;color:rgba(232,225,211,.62);
}
.bag-shot b{color:var(--bone);font-weight:600}

.bag-keys{
  margin:0;font-size:10px;line-height:1.9;color:rgba(232,225,211,.32);
}
.bag-keys kbd{
  display:inline-block;padding:1px 5px;margin:0 1px;
  border:1px solid rgba(232,225,211,.22);border-radius:2px;
  font-family:var(--ui);font-size:9px;color:rgba(232,225,211,.52);
}

/* ---------- the door on the mode picker ---------- */
/* A size down, like the shop: it is a side room, not the fight. Bone rather
   than amber on hover — there is no money in there, and amber in this game
   means money. */
.big-btn.bag{padding:clamp(9px,1.6vh,17px) clamp(18px,4vw,44px)}
.big-btn.bag .bb-title{font-size:clamp(20px,min(3.8vw,4.6vh),40px)}
.big-btn.bag:hover{border-color:var(--rope);box-shadow:0 0 26px rgba(122,110,93,.42)}

/* Narrow screens: the panel goes along the bottom rather than beside the ring,
   so it never sits over the man doing the work. */
@media (max-width:760px),(max-height:520px){
  .bag-panel{
    right:8px;left:8px;top:auto;bottom:8px;transform:none;width:auto;
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px 12px;
  }
  .bag-kicker{grid-column:1 / -1}
  .bag-shot,.bag-keys{grid-column:1 / -1}
  .bag-val{font-size:clamp(20px,5vw,30px)}
}