/* Limbo: a huge cyan result number that counts up, a horizontal "altitude" bar whose pin lands on the result. */
.play-limbo::before { background: linear-gradient(135deg, rgba(34, 211, 238, 0.7), rgba(34, 211, 238, 0) 35%, rgba(139, 92, 255, 0) 65%, rgba(139, 92, 255, 0.55)); }
.limbo-screen { align-content: center; gap: 12px; background: radial-gradient(120% 90% at 50% 0%, rgba(34, 211, 238, 0.16), transparent 60%), linear-gradient(180deg, #0d1026, #0a0819); }
.limbo-stage { display: grid; justify-items: center; gap: 10px; width: 100%; padding: 10px 0 4px; }
.limbo-num { font-size: clamp(60px, 7vw, 112px); color: #c8f6ff; text-shadow: 0 0 30px rgba(34, 211, 238, 0.35); }
.limbo-num.is-idle { color: #2f3a66; text-shadow: none; }
.limbo-num.is-rolling { color: #d9f6ff; }
.limbo-num.is-win { color: var(--win); text-shadow: 0 0 22px rgba(31, 224, 138, 0.7), 0 0 60px rgba(31, 224, 138, 0.35); }
.limbo-num.is-lose { color: var(--lose); text-shadow: 0 0 22px rgba(255, 61, 110, 0.6); }
.limbo-bar {
  --target: 50%; --result: 0%;
  position: relative; width: min(100%, 420px); height: 14px; border-radius: 999px; margin-top: 8px;
  background: linear-gradient(90deg, rgba(255, 61, 110, 0.55), rgba(255, 61, 110, 0.25) var(--target), rgba(31, 224, 138, 0.3) var(--target), rgba(31, 224, 138, 0.6));
  box-shadow: 0 0 0 1px var(--line-2) inset;
}
.limbo-bar::before { content: ""; position: absolute; top: -5px; bottom: -5px; left: var(--target); width: 2px; background: #fff; box-shadow: 0 0 10px #fff; transform: translateX(-1px); }
.limbo-fill { position: absolute; inset: 3px auto 3px 3px; width: calc(var(--result) - 3px); border-radius: 999px; background: linear-gradient(90deg, #22d3ee, #b18cff); transition: width 120ms linear; }
.limbo-pin {
  position: absolute; top: 50%; left: var(--result); width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff, #22d3ee 60%, #0e7490); box-shadow: 0 0 0 3px #0b0920, 0 0 18px rgba(34, 211, 238, 0.9);
  transition: left 120ms linear;
}
.limbo-screen .outcome { min-height: 34px; }
.target-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, auto); gap: 8px; align-items: stretch; }
.target-row input { font-size: 1.2rem; font-weight: 800; color: #c8f6ff; }
.chance-out {
  display: grid; place-items: center; min-height: 46px; padding: 0 14px; border-radius: var(--r-sm); font: 800 1.05rem/1 var(--display);
  color: #22d3ee; background: rgba(34, 211, 238, 0.08); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35) inset; white-space: nowrap;
}
.play-limbo .field-profit .readonly { color: var(--gold); background: rgba(255, 201, 64, 0.07); box-shadow: 0 0 0 1px rgba(255, 201, 64, 0.3) inset; }
.play-limbo .action-btn { color: #04283a; background: linear-gradient(180deg, #7ff0ff, #0fb5d6); box-shadow: 0 6px 0 #086a80, 0 14px 30px -8px rgba(34, 211, 238, 0.75); }
.play-limbo .action-btn:active:not([aria-disabled="true"]) { box-shadow: 0 2px 0 #086a80, 0 6px 16px -8px rgba(34, 211, 238, 0.75); }
@media (prefers-reduced-motion: reduce) { .limbo-fill, .limbo-pin { transition: none; } }
@media (max-width: 560px) {
  .limbo-num { font-size: clamp(52px, 16vw, 76px); }
  .target-row { grid-template-columns: minmax(0, 1fr) 90px; }
}