/* ═══ Рулетка ═════════════════════════════════════════════════════ */

.rl-wheel-wrap { position: relative; width: 220px; height: 220px; margin: 4px auto 14px; }
.rl-wheel { width: 100%; height: 100%; transition: transform 5s cubic-bezier(.16, .84, .22, 1);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5)); }
.rl-pin { position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 22px; z-index: 2; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6)); }
.rl-result {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  font-size: 25px; font-weight: 800; color: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .25);
  transition: background .4s;
}
.rl-result.red { background: linear-gradient(160deg, #e04b3f, #a51f14); }
.rl-result.black { background: linear-gradient(160deg, #3a4048, #14181f); }
.rl-result.green { background: linear-gradient(160deg, #35a06a, #14603c); }

.rl-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rl-zero { grid-column: span 3; }
.rl-cell {
  padding: 11px 0; border: 0; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: #fff; position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.rl-cell.red { background: linear-gradient(160deg, #d0463b, #96201a); }
.rl-cell.black { background: linear-gradient(160deg, #333940, #14181f); }
.rl-cell.green { background: linear-gradient(160deg, #2f9463, #14603c); }
.rl-cell:active { transform: scale(.94); }
.rl-cell.hit { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(240, 180, 41, .7); }
.rl-cell .chip {
  position: absolute; right: -3px; top: -5px; min-width: 20px; height: 20px;
  border-radius: 999px; font-size: 10px; font-weight: 800; color: #10131a;
  display: grid; place-items: center; padding: 0 4px;
  background: linear-gradient(160deg, #ffd76e, var(--gold));
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
}

.rl-outside { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 6px; }
.rl-outside .rl-cell { font-size: 12.5px; }
.rl-thirds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }

.rl-strip { display: flex; gap: 5px; overflow-x: auto; padding: 2px 0 6px; }
.rl-strip span { flex: none; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 750; color: #fff; }

/* ═══ Ракета ══════════════════════════════════════════════════════ */

.cr-sky {
  position: relative; height: 230px; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, #101a2e 0%, #1b2b4a 55%, #26406b 100%);
  box-shadow: inset 0 0 0 1px var(--edge), 0 10px 26px rgba(0, 0, 0, .4);
}
.cr-stars { position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
                    radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent),
                    radial-gradient(1px 1px at 45% 65%, #fff, transparent),
                    radial-gradient(1.5px 1.5px at 85% 55%, #fff, transparent),
                    radial-gradient(1px 1px at 15% 80%, #fff, transparent); }
.cr-mult {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-size: 52px; font-weight: 820; letter-spacing: -.03em; color: #eef4ff;
  font-variant-numeric: tabular-nums; text-shadow: 0 4px 20px rgba(0, 0, 0, .6);
  transition: color .3s, transform .3s var(--ease-spring);
}
.cr-mult.boom { color: #ff6b5e; transform: scale(1.12); }
.cr-mult small { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: rgba(255, 255, 255, .65); margin-top: 6px; }
.cr-rocket { position: absolute; font-size: 34px; transition: left .12s linear, bottom .12s linear;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.cr-rocket.dead { animation: crBoom .5s var(--ease-spring) forwards; }
@keyframes crBoom { to { transform: scale(1.9) rotate(25deg); opacity: 0 } }

.cr-history { display: flex; gap: 5px; overflow-x: auto; padding: 8px 0 2px; }
.cr-history span { flex: none; padding: 4px 9px; border-radius: 999px; font-size: 11.5px;
  font-weight: 750; font-variant-numeric: tabular-nums;
  box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light); }
.cr-history span.low { color: #ff8d84; }
.cr-history span.mid { color: var(--text); }
.cr-history span.high { color: var(--green); }

.cr-players { max-height: 168px; overflow-y: auto; }
.cr-player { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; }
.cr-player + .cr-player { box-shadow: inset 0 1px 0 var(--edge); }
.cr-player .grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.cr-player .out { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-player .wait { color: var(--text-dim); font-variant-numeric: tabular-nums; }