/* Money on the line: what a rung costs on the ladder, the stake beside STEP IN,
   and the two figures the result card grew when a fight stopped being free.

   One file for three places because they are one feature — a wager, from the
   screen you make it on to the screen you find out on. Every colour is a token
   from base.css or one of those tokens at an alpha, the same rule menu.css and
   bagroom.css follow. No hex literals here.

   The deliberate restraint: this is a ladder that grew a price list, not a
   casino. The prices are set in the same bone the rest of the card is written
   in and only go amber where the eye actually needs them — the selected stake,
   the bill on the button. The casino is the spin room, and it is a different
   room on purpose. */

/* ---------- what a rung costs ---------- */
/* Between the pips and the tick, so a row reads left to right as: which number,
   who, how hard, how much, did you beat him. A fixed minimum width and a right
   edge, so ten prices of wildly different lengths still line up in a column you
   can run your eye down — the point of showing all ten is the comparison. */
.rung-fee{
  flex:0 0 auto;min-width:5.4em;display:flex;align-items:center;justify-content:flex-end;gap:5px;
  font-family:var(--display);font-size:clamp(12px,1.6vh,17px);letter-spacing:.04em;
  color:rgba(232,225,211,.62);white-space:nowrap;
}
.rung-fee .coin{width:8px;height:8px}
/* Waived: the never-locked-out rule, said out loud. Green rather than amber —
   it is the one price on the card that is good news, and it has to be
   unmistakably different from a number you have to find. */
.rung-fee.waived{
  font-family:var(--ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coin-up);
}
/* A locked man's price is drawn faintly along with the rest of his row — you
   can see what is coming, which is the same job the pips do. */
.rung.locked .rung-fee{color:rgba(232,225,211,.45)}
.rung.beaten .rung-fee{color:rgba(232,225,211,.45)}

/* Too dear. Not locked — he has earned this fight and it is still open to him —
   so the row keeps its name and its pips and only the price says no. The strike
   through the figure is what stops it reading as merely dim. */
.rung.broke{opacity:.52}
.rung.broke .rung-fee{color:var(--coin-down);text-decoration:line-through;text-decoration-thickness:1px}
.rung.broke .rung-fee .coin{background:var(--coin-down);opacity:.7}
.rung.broke:hover{border-color:rgba(232,80,63,.34);background:rgba(232,80,63,.05)}

/* ---------- the stake ---------- */
/* Under the card and over the button, because it is the second half of the same
   decision. Sized in vh like the ladder above it: ten rungs, a wager and two
   buttons all have to be on one screen without a scrollbar. */
.wager{
  width:min(720px,92vw);display:flex;flex-direction:column;align-items:center;
  gap:clamp(4px,.7vh,8px);
}
.wager-kicker{
  margin:0;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(232,225,211,.42);
}
.wager-picks{display:flex;gap:clamp(4px,.8vw,9px);width:100%}

/* Four slabs, equal width, in the ladder's own visual language: a bordered
   plate that lifts on hover and presses on click. Deliberately a size down from
   .big-btn — this is a dial, not a decision to commit to. */
.wager-pick{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:clamp(4px,.8vh,9px) 6px;
  border:1px solid rgba(232,225,211,.16);border-radius:2px;
  background:var(--dark2);color:var(--bone);
  transition:transform .12s,border-color .12s,background-color .12s,color .12s;
}
.wp-lbl{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(232,225,211,.52);white-space:nowrap;
}
.wp-amt{
  display:flex;align-items:center;gap:5px;
  font-family:var(--display);font-size:clamp(13px,1.8vh,19px);letter-spacing:.04em;
  color:rgba(232,225,211,.75);white-space:nowrap;
}
.wp-amt .coin{width:8px;height:8px}
.wager-pick:hover{border-color:rgba(232,225,211,.38);background:rgba(232,225,211,.06);transform:translateY(-2px)}
.wager-pick:active{transform:translateY(1px)}
/* The pressed one is the only amber thing in the group, because amber in this
   game means money and exactly one of these is where the money is going. */
.wager-pick.on{
  border-color:var(--coin);background:rgba(242,179,61,.10);
}
.wager-pick.on .wp-lbl{color:var(--coin);opacity:.85}
.wager-pick.on .wp-amt{color:var(--coin)}
/* Nothing behind it. Flat, like a locked rung, and it shoves when pressed. */
.wager-pick.broke{opacity:.34}
.wager-pick.broke:hover{border-color:rgba(232,225,211,.16);background:var(--dark2);transform:none}
.wager-pick.refused{animation:rungRefuse .3s cubic-bezier(.36,.07,.19,.97)}

/* The one sentence. Plain words, the width of the card, and it is the thing
   that has to be true — it is computed through the same selfOdds() that pays. */
.wager-line{
  margin:0;min-height:1.6em;max-width:62ch;text-align:center;
  font-size:11.5px;line-height:1.6;letter-spacing:.04em;
  color:rgba(232,225,211,.55);
}

/* ---------- the bill on the button ---------- */
/* STEP IN's sub-line is the last thing read before committing, so it carries
   the number. The name stays in the bone the sub-line always was and the money
   goes amber beside it: two facts, one line, and you can find either. */
#campFightSub{display:flex;align-items:center;justify-content:center;gap:7px}
.bb-who{color:rgba(232,225,211,.40)}
.bb-bill{
  display:flex;align-items:center;gap:5px;
  font-family:var(--display);font-size:15px;letter-spacing:.06em;
  text-transform:none;color:var(--coin);
}
.bb-bill .coin{width:9px;height:9px}
/* Cannot pay for the fight it is offering. It still presses — and still refuses
   out loud — because a disabled button on a menu is a button that reads as
   broken. */
.big-btn.broke .bb-bill{color:var(--coin-down)}
.big-btn.broke .bb-bill .coin{background:var(--coin-down)}
.big-btn.broke:hover{border-color:rgba(232,80,63,.5);box-shadow:0 0 26px rgba(232,80,63,.22)}

#campaign.arriving .wager{animation:footUp .5s ease-out both .24s}

/* ---------- what he handed over, on the card ---------- */
/* Above the breakdown and under the kicker: the sentence the whole card is read
   against. Small and quiet — it is not news, he watched it leave. */
.purse-staked{
  margin:0 0 6px;width:100%;text-align:center;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(232,225,211,.42);
}
.purse-staked:empty{display:none}

/* And the answer, under the total. The only figure on this card that can be
   negative, which is exactly why it is here: a night can be a good purse and a
   bad night, and nothing else on the card could tell you that. */
.purse-net{
  margin:5px 0 0;width:100%;text-align:right;
  font-family:var(--display);font-size:clamp(13px,1.8vw,17px);letter-spacing:.06em;
  color:var(--coin-up);
}
.purse-net:empty{display:none}
.purse-net.down{color:var(--coin-down)}

/* ---------- the badge, going down ---------- */
/* The balance already kicks when it goes up. Handing money over is the opposite
   gesture: it drops, briefly wearing the deduction colour, and settles. It runs
   while the walk-in is still on screen — match.js keeps the badge up until the
   round actually starts — which is most of what makes a wager feel like one. */
#wallet.spend,#shopWallet.spend{animation:coinSpend .5s cubic-bezier(.3,1.1,.4,1)}
@keyframes coinSpend{
  0%{transform:translateY(-4px);color:var(--coin-down)}
  45%{transform:translateY(3px);color:var(--coin-down)}
  100%{transform:translateY(0);color:var(--coin)}
}

/* ---------- narrow ---------- */
/* The four stakes go two by two rather than shrinking to nothing, and the row
   prices lose their minimum width so a rung can still fit a name. */
@media (max-width:760px),(max-height:560px){
  .wager-picks{flex-wrap:wrap}
  .wager-pick{flex:1 1 44%}
  .rung-fee{min-width:0}
  .wager-line{font-size:10.5px}
}