/* The spin room's panel.

   Every colour is a token from base.css or one of those tokens at an alpha, the
   same rule menu.css, bagroom.css and wager.css follow. No hex literals here.

   The room next door on the mode picker is an instrument panel; this one is
   deliberately not. The wheel is the thing worth looking at and the chips are
   on the felt, so what is left here is the bets, what is on the table, and the
   button — parked against one edge where they are never over the wheel. */

#spinroom{position:fixed;inset:0;z-index:20;pointer-events:none}
#spinroom.off{display:none}
/* The panel and the way out are the only things you can hit. Everything else
   has to fall through to the canvas — the chips on the table are picked with a
   raycast against the main camera, and a full-screen div would swallow every
   click before it ever reached one. */
#spinroom .nav-back,#spinroom .spin-panel{pointer-events:auto}

.spin-panel{
  position:absolute;right:clamp(10px,2vw,34px);top:50%;transform:translateY(-50%);
  width:min(292px,34vw);max-height:calc(100vh - 24px);overflow:auto;
  display:flex;flex-direction:column;gap:clamp(6px,1.1vh,12px);
  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);
}
#spinroom.arriving .spin-panel{animation:footUp .5s ease-out both .12s}
#spinroom.arriving .nav-back{animation:footUp .5s ease-out both .3s}

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

/* ---------- what he is on ---------- */
/* One cell per bet, name on the left and what it pays on the right, with the
   pocket count under both. The count is there because it is the *reason* for
   the multiplier beside it — a player who can see "2 of 38" next to "18.00x"
   has been shown the whole of how this room works in one glance.

   Two columns rather than eight rows. A real layout offers a lot of bets and
   the panel has to stay something you read while standing up — paired off, the
   colours sit next to each other, the two parities sit next to each other, and
   the three dozens read as a group. */
.spin-bets{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.spin-bet{
  display:grid;grid-template-columns:1fr auto;gap:0 6px;width:100%;min-width:0;
  padding:clamp(3px,.6vh,7px) 7px;text-align:left;
  border:1px solid transparent;border-left:3px solid rgba(232,225,211,.12);
  border-radius:2px;background:var(--dark2);color:var(--bone);
  transition:transform .12s,border-color .12s,background-color .12s;
}
.sb-name{
  font-family:var(--display);font-size:clamp(12px,1.6vh,16px);letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-odds{
  justify-self:end;font-family:var(--display);font-size:clamp(12px,1.6vh,16px);
  letter-spacing:.04em;color:rgba(232,225,211,.62);white-space:nowrap;
}
.sb-note{
  grid-column:1 / -1;font-size:9px;letter-spacing:.04em;line-height:1.25;
  color:rgba(232,225,211,.34);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.spin-bet:hover{border-color:rgba(232,225,211,.3);background:rgba(232,225,211,.06)}
.spin-bet:active{transform:translateY(1px)}
/* The one he is on. Amber, because amber in this game means money and exactly
   one of these is where his money is going. */
.spin-bet.on{border-left-color:var(--coin);background:rgba(242,179,61,.10)}
.spin-bet.on .sb-name,.spin-bet.on .sb-odds{color:var(--coin)}
.spin-bet.refused{animation:rungRefuse .3s cubic-bezier(.36,.07,.19,.97)}
/* While the wheel is turning the bet cannot be moved, and the list says so by
   going flat rather than by refusing four separate clicks silently. */
.spin-bets.live{opacity:.38;filter:saturate(.4)}
.spin-bets.live .spin-bet:hover{border-color:transparent;background:var(--dark2)}

/* ---------- what is on the table ---------- */
.spin-stake{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-top:clamp(5px,1vh,9px);border-top:1px solid rgba(232,225,211,.12);
}
.spin-lbl{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(232,225,211,.45);
}
.spin-val{
  display:flex;align-items:center;gap:7px;
  font-family:var(--display);font-size:clamp(22px,3.4vh,32px);line-height:.9;
  letter-spacing:.02em;color:var(--coin);font-variant-numeric:tabular-nums;
}
.spin-val .coin{width:11px;height:11px}
.spin-val i{font-style:normal}
.spin-pays{
  margin:0;font-size:10.5px;line-height:1.5;letter-spacing:.04em;
  color:rgba(232,225,211,.46);
}

/* ---------- the buttons ---------- */
.spin-btns{display:flex;gap:6px}
.spin-small{
  flex:1 1 0;padding:6px 8px;
  border:1px solid rgba(232,225,211,.18);border-radius:2px;
  background:var(--dark2);color:rgba(232,225,211,.68);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  transition:transform .12s,border-color .12s,background-color .12s,color .12s;
}
.spin-small:hover{border-color:var(--bone);color:var(--bone);background:rgba(232,225,211,.07)}
.spin-small:active{transform:translateY(1px)}
.spin-small.refused{animation:rungRefuse .3s cubic-bezier(.36,.07,.19,.97)}

/* SPIN. The one big thing on the panel, because it is the only irreversible
   press in the room — the stake goes the instant it lands. */
.spin-go{
  width:100%;padding:clamp(8px,1.6vh,14px) 10px;
  border:2px solid var(--coin);border-radius:2px;
  background:rgba(242,179,61,.10);color:var(--coin);
  font-family:var(--display);font-size:clamp(20px,3vh,28px);
  letter-spacing:.1em;text-transform:uppercase;
  transition:transform .12s,border-color .12s,background-color .12s,color .12s;
}
.spin-go:hover{background:rgba(242,179,61,.18);box-shadow:0 0 22px rgba(242,179,61,.3)}
.spin-go:active{transform:translateY(1px)}
.spin-go.committed{animation:btnCommit .42s cubic-bezier(.2,1.2,.35,1) forwards}
.spin-go.refused{animation:rungRefuse .3s cubic-bezier(.36,.07,.19,.97)}
/* Turning. Not disabled — a disabled button on a menu reads as a broken one —
   but unmistakably not the thing to press. */
.spin-go.live{
  border-color:rgba(232,225,211,.22);background:transparent;
  color:rgba(232,225,211,.40);box-shadow:none;
}
.spin-go.live:hover{background:transparent;box-shadow:none}

/* ---------- what the wheel did ---------- */
.spin-result{
  margin:0;padding-top:clamp(5px,1vh,9px);
  border-top:1px solid rgba(232,225,211,.12);
  font-size:11.5px;line-height:1.6;color:rgba(232,225,211,.58);
}
.spin-result.won{color:var(--coin-up)}
/* It flashes rather than silently swapping, because two losing spins in a row
   can read almost identically and a line that never visibly moves reads as one
   that has stopped. The same beat the bag room's readings use. */
.spin-result.struck{animation:bagStrike .3s ease-out}

/* ---------- the door on the mode picker ---------- */
/* A size down, like the shop and the bag room: it is a side room, not the
   fight. Amber on hover, because there is money in there and amber in this game
   means money — which is exactly the thing the bag room's door is not. */
.big-btn.spin{padding:clamp(9px,1.6vh,17px) clamp(18px,4vw,44px)}
.big-btn.spin .bb-title{font-size:clamp(20px,min(3.8vw,4.6vh),40px)}
.big-btn.spin:hover{border-color:var(--coin);box-shadow:0 0 26px rgba(242,179,61,.38)}

/* ---------- narrow ---------- */
/* The panel goes along the bottom rather than beside the wheel, so it is never
   over the thing the room is about. */
@media (max-width:760px),(max-height:560px){
  .spin-panel{
    right:8px;left:8px;top:auto;bottom:8px;transform:none;width:auto;
    display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;
  }
  .spin-kicker{display:none}
  .spin-bets{grid-column:1 / -1;grid-template-columns:repeat(4,1fr)}
  .sb-note{display:none}
  .spin-result{grid-column:1 / -1}
  .spin-val{font-size:clamp(18px,5vw,26px)}
}