/* GAMES-B · Plinko (one shared board) and Crash (one shared rocket), in the Party Night style.
   Prefixes: .plinko- .crash-  (plus the kit's .stage-well .stage-chip .hist .field .inp .quick .q inside them) */

/* ---------- both stages: the Party Night well, same height as Limbo ---------- */
.plinko-stage, .crash-stage {
  position: relative; height: 290px; border-radius: 24px; overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.plinko-cv, .crash-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* history chips: top-right, clear of the centre (the chute / the readout); only whole chips, the rest wrap out of view */
.plinko-stage .hist, .crash-stage .hist { z-index: 2; left: auto; max-width: calc(50% - 44px); height: 29px; flex-wrap: wrap; align-content: flex-start; }
.plinko-stage .stage-chip, .crash-stage .stage-chip { z-index: 3; }

/* ---------- Plinko ---------- */
.plinko-air {
  position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 11px 0 5px; border-radius: 999px; background: rgba(13, 10, 28, .74); border: 1px solid var(--line-2);
  font: 800 13px/1 var(--f-ui); color: var(--ink-2); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .25s var(--out);
}
.plinko-air.on { opacity: 1; transform: none; }
.plinko-air .mini-stack i { margin-left: -5px; }
.plinko-air .mini-stack i:first-child { margin-left: 0; }
/* when the board fills the width, the Chipper moves to the free top-left corner */
.plinko-stage.chip-top .stage-chip { top: 52px; bottom: auto; left: 12px; }
.plinko-stage.chip-top .stage-chip .chip { width: 50px; height: 50px; }

.plinko-risk {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; height: 56px; padding: 4px;
  border-radius: 16px; background: var(--night-0); border: 2px solid var(--line-2); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3);
}
.plinko-rk {
  appearance: none; border: 0; cursor: pointer; min-width: 0; padding: 0 4px; border-radius: 11px; background: transparent;
  display: grid; place-content: center; gap: 4px; text-align: center; color: var(--ink-3);
  transition: background .15s, box-shadow .15s, transform .09s var(--out); -webkit-tap-highlight-color: transparent;
}
.plinko-rk b { font: 800 15px/1 var(--f-ui); color: var(--ink-2); }
.plinko-rk small { font: 700 12.5px/1 var(--f-ui); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plinko-rk:hover b { color: var(--ink); }
.plinko-rk:active { transform: translateY(2px); }
.plinko-rk:focus-visible { outline: 2px solid var(--grape); outline-offset: -2px; }
.plinko-rk.on { background: var(--grape-soft); box-shadow: inset 0 -3px 0 var(--grape); }
.plinko-rk.on b { color: #fff; }
.plinko-rk.on small { color: var(--grape-ink); }
.plinko-risk.readonly { pointer-events: none; }
.plinko-risk.readonly .plinko-rk:not(.on) { opacity: .6; }
.plinko-risk.changed { animation: changed .8s var(--out); }

/* ---------- Crash ---------- */
.crash-riders { position: absolute; left: 14px; top: 12px; z-index: 2; display: grid; gap: 4px; justify-items: start; max-width: 200px; pointer-events: none; }
.crash-rh { margin: 2px 0 1px 3px; font: 800 11px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.crash-r {
  display: flex; align-items: center; gap: 7px; max-width: 100%; height: 28px; padding: 0 10px 0 3px; border-radius: 999px;
  background: rgba(13, 10, 28, .76); border: 1.5px solid var(--line); font: 700 13px/1 var(--f-ui); color: var(--ink-2);
  animation: feedIn .3s var(--out) both; transition: opacity .3s, border-color .2s;
}
.crash-r i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; }
.crash-r b { font-weight: 800; color: var(--ink); min-width: 0; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crash-r em { font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-3); }
.crash-r.s-riding em::before, .crash-r.s-in em::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--go); vertical-align: 1px;
}
.crash-r.s-riding { border-color: rgba(43, 216, 129, .45); }
.crash-r.s-riding em::before { animation: askPulse 1.1s infinite; }
.crash-r.s-in em::before { background: var(--grape); }
.crash-r.s-bailed em { color: var(--go); font-weight: 800; }
.crash-r.s-bust { opacity: .5; }
.crash-r.is-view { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, rgba(13, 10, 28, .86)); }

/* (fix) the live multiplier is always readable: it sits above the riding Chipper (z 4 > the chip's 3) */
.crash-mid {
  position: absolute; left: 50%; top: 46%; z-index: 4; width: min(88%, 460px); transform: translate(-50%, -50%);
  display: grid; justify-items: center; text-align: center; pointer-events: none;
}
.crash-l { min-height: 14px; font: 800 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.crash-num {
  margin: 6px 0 10px; font: 900 clamp(54px, 7vw, 96px)/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  color: var(--ink); text-shadow: 0 6px 34px rgba(13, 10, 28, .85); transition: color .15s, text-shadow .2s;
}
.crash-num.is-dim { color: var(--ink-2); }
.crash-num.is-moon { color: var(--gold); text-shadow: 0 0 46px rgba(255, 200, 61, .5); }
.crash-num.is-bust { color: var(--ink-3); animation: crashShake .45s var(--out); }
.crash-sub { min-height: 26px; padding: 5px 12px; border-radius: 999px; font: 700 15px/1.2 var(--f-ui); color: var(--ink-3); background: rgba(13, 10, 28, .55); }
.crash-sub:empty { visibility: hidden; }
.crash-sub.is-on { color: var(--ink); }
.crash-sub.is-win { color: var(--go); background: var(--go-soft); }
@keyframes crashShake { 20% { transform: translateX(-7px) rotate(-2deg); } 40% { transform: translateX(6px) rotate(1.5deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
/* AUTO BAIL: "Off" needs no × after it */
.crash-field .inp.crash-off .post { visibility: hidden; }
.crash-field .inp input::placeholder { color: var(--ink-3); opacity: 1; }
/* the viewed player's Chipper rides the rocket (moved every frame) */
.crash-stage .stage-chip.is-aboard { left: 0; top: 0; bottom: auto; transition: none; will-change: transform; }
.crash-stage .stage-chip.is-aboard .chip { width: 46px; height: 46px; }

@media (prefers-reduced-motion: reduce) {
  .crash-num.is-bust, .crash-r, .plinko-risk.changed { animation: none; }
}

/* ---------- big desktop stage (ADDENDUM §8d): the graph fills the stage and the multiplier is big ---------- */
@media (min-width: 1024px) and (min-height: 561px) {
  .gm-stage .crash-mid { top: 40%; width: min(86%, 560px); }
  .gm-stage .crash-num { font-size: clamp(88px, 9vw, 160px); margin: 8px 0 14px; }
  .gm-stage .crash-l { font-size: 13px; }
  .gm-stage .crash-sub { font-size: 17px; padding: 6px 14px; }
  .gm-stage .crash-stage .stage-chip.is-aboard .chip { width: 58px; height: 58px; }
  .gm-stage .crash-riders { max-width: 240px; }
  .gm-stage .crash-r { height: 32px; font-size: 14px; }
  .gm-stage .crash-r i { width: 26px; height: 26px; }
  .gm-stage .plinko-air { height: 34px; font-size: 14px; }
  /* crash-view.js raises the launch line 92px on the big stage (.is-big): your Chipper stands on it beside the rocket,
     and the chat corner (GAMEMODE's §8e overlay, Crash only) drops into the free band under it, so its pill never sits
     on the rocket waiting on the pad */
  .crash-stage.is-big .stage-chip:not(.is-aboard) { bottom: 89px; }
  .gm-stage-wrap:has(.crash-stage.is-big) { --cov-left: 16px; --cov-bottom: 16px; }
}

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .plinko-stage { height: 240px; border-radius: 18px; }
  .crash-stage { height: 210px; border-radius: 18px; }
  .plinko-stage .hist, .crash-stage .hist { top: 10px; right: 10px; max-width: calc(50% - 30px); gap: 4px; }
  .plinko-stage .hist span, .crash-stage .hist span { padding: 7px 7px; }
  .plinko-air { left: 10px; top: 10px; height: 28px; font-size: 13px; }
  .plinko-rk b { font-size: 15px; }
  .plinko-rk small { font-size: 13px; }
  .crash-riders { left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 44%; }
  .crash-rh { display: none; }
  .crash-r { width: 30px; height: 30px; padding: 0; justify-content: center; gap: 0; border-radius: 50%; border-width: 2px; }
  .crash-r b, .crash-r em { display: none; }
  .crash-r.s-riding { border-color: var(--go); }
  .crash-r.s-in { border-color: var(--grape); }
  .crash-r.s-bailed { border-color: rgba(43, 216, 129, .35); }
  .crash-mid { top: 44%; width: 92%; }
  .crash-num { margin: 3px 0 6px; font-size: 46px; }
  .crash-sub { min-height: 24px; padding: 4px 10px; font-size: 13px; }
  .crash-stage .stage-chip.is-aboard .chip { width: 36px; height: 36px; }
}
/* QA: the recent-results chips stay on one row (a wrapped second row dropped onto the Share pill under it) */
.plinko-stage .hist, .crash-stage .hist { overflow: hidden; }
/* Crash: the curve starts at the true bottom-left corner (founder). Waiting (not riding), your Chipper sits in the band
   under the launch line on the big stage; on smaller stages it only shows once you ride (it rides the rocket) */
.crash-stage.is-big .stage-chip:not(.is-aboard) { left: 16px; bottom: 12px; }
.crash-stage.is-big .stage-chip:not(.is-aboard) .chip { width: 52px; height: 52px; }
.crash-stage:not(.is-big) .stage-chip:not(.is-aboard) { display: none; }
/* Plinko on phones: the board runs edge to edge in the card (founder: "make plinko better for mobile") */
@media (max-width: 700px) {
  .gm-stage-wrap:has(.plinko-stage) { margin-inline: -8px; }
  /* exactly the board's true-proportion height at full width (square buckets, plinko-board.js), no dead band */
  .gm-stage .plinko-stage { height: min(calc(90vw - 22px), 360px); border-radius: 16px; }
}
/* tablets held upright (701–1023 wide): the board keeps its true shape (no sideways stretch), so the stage gets the
   height that shape needs at the card's width instead of the short 290px strip */
@media (min-width: 701px) and (max-width: 1023px) and (min-height: 700px) {
  .gm-stage .plinko-stage { height: clamp(290px, calc((100vw - 390px) * .9 + 6px), 420px); }
}