/* =========================================================
   WHEEL OUT — PBX1 ELITE
   MOBILE UI
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  user-select: none;
  -webkit-user-select: none;

  -webkit-tap-highlight-color: transparent;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;

  overflow: hidden !important;

  background: #0d131d;

  color: #fff;
}

body.custom-game-shell {
  overflow: hidden !important;
}

/* =========================================================
   MAIN SHELL
========================================================= */

.wheelout-game-wrapper {
  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100dvh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #0d131d;
}

/* =========================================================
   HEADER (Cleaned - No Balance Display)
========================================================= */

.game-hdr {
  flex: 0 0 54px;

  height: 54px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 12px;

  background:
    linear-gradient(
      180deg,
      #172131 0%,
      #121b28 100%
    );

  border-bottom: 1px solid #273548;

  z-index: 100;
}

.gh-left {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}

.gh-btn-back {
  width: 38px;
  height: 38px;

  flex-shrink: 0;

  display: grid;
  place-items: center;

  border: 0;
  border-radius: 9px;

  background: #243247;

  color: #fff;

  font-size: 17px;
}

.gh-title {
  color: #fff;

  font-size: 18px;

  line-height: 1;

  font-weight: 950;

  letter-spacing: .2px;
}

.gh-title span {
  color: #f59e0b;
}

.gh-right {
  display: flex;
  align-items: center;

  gap: 7px;
}

.gh-btn-deposit {
  height: 34px;

  padding: 0 13px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  border-radius: 8px;

  background:
    linear-gradient(
      180deg,
      #31d866,
      #1cbd51
    );

  color: #fff;

  text-decoration: none;

  font-size: 11px;

  font-weight: 950;

  box-shadow:
    inset 0 1px rgba(255,255,255,.25);
}

.gh-btn-deposit i {
  font-size: 11px;
}

/* =========================================================
   GAME CANVAS
========================================================= */

.game-canvas-stage {
  position: relative;

  flex: 1;

  min-height: 0;

  overflow: hidden;

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      180deg,
      #65c1eb 0%,
      #8ed5ed 46%,
      #f8dc76 70%,
      #e48305 71%,
      #e48305 100%
    );
}

/* SKY */

.desert-sky {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(75,183,232,.3),
      rgba(255,255,255,.05)
    );

  z-index: 1;
}

/* SUN */

.desert-sun {
  position: absolute;

  top: 45px;
  right: 13%;

  width: 72px;
  height: 72px;

  border-radius: 50%;

  background: #fff29a;

  box-shadow:
    0 0 18px #ffe76b,
    0 0 35px rgba(255,229,90,.45);

  z-index: 2;
}

/* MOUNTAINS */

.desert-mountains {
  position: absolute;

  left: 0;
  bottom: 25%;

  width: 100%;
  height: 105px;

  background:
    linear-gradient(
      135deg,
      transparent 0 15%,
      #c17d2e 15% 24%,
      transparent 24% 32%,
      #a96824 32% 43%,
      transparent 43% 52%,
      #bc7827 52% 66%,
      transparent 66%
    );

  opacity: .75;

  z-index: 3;
}

/* GROUND */

.desert-ground {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 34%;

  background:
    linear-gradient(
      180deg,
      #e88b06 0%,
      #df7b00 100%
    );

  border-top:
    3px solid #c76b00;

  z-index: 4;
}

/* CACTUS */

.cactus {
  position: absolute;

  bottom: 28%;

  width: 18px;
  height: 69px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #158447,
      #19a052,
      #116b39
    );

  box-shadow:
    inset 2px 0 rgba(255,255,255,.15);

  z-index: 7;
}

.cactus-left {
  left: 25px;
}

.cactus-right {
  right: 25px;
}

/* =========================================================
   CURRENT MULTIPLIER
========================================================= */

.current-mult-badge {
  position: absolute;

  top: 15px;
  left: 50%;

  transform: translateX(-50%);

  min-width: 120px;

  padding: 7px 14px;

  border: 1px solid #3c4b61;

  border-radius: 13px;

  background:
    linear-gradient(
      180deg,
      #243348,
      #182537
    );

  text-align: center;

  box-shadow: 0 4px 10px rgba(0,0,0,.25);

  z-index: 30;
}

.badge-label {
  display: block;

  color: #9ba9bc;

  font-size: 8px;

  line-height: 9px;

  font-weight: 900;
}

.badge-value {
  display: block;

  margin-top: 1px;

  color: #fff;

  font-size: 20px;

  line-height: 21px;

  font-weight: 1000;
}

/* =========================================================
   ROUND RESULT
========================================================= */

.round-result-card {
  position: absolute;

  top: 15px;
  right: 10px;

  min-width: 160px;

  padding: 7px 10px;

  border: 1px solid #3c4b61;

  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      #243348,
      #182537
    );

  text-align: center;

  box-shadow: 0 4px 10px rgba(0,0,0,.25);

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(-5px)
    scale(.96);

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s ease;

  z-index: 30;
}

.round-result-card.show {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(0)
    scale(1);
}

.rr-label {
  display: inline-block;

  margin-right: 4px;

  color: #9ba9bc;

  font-size: 8px;

  font-weight: 900;
}

.rr-value {
  color: #f7a914;

  font-size: 16px;

  font-weight: 1000;
}

.rr-points {
  margin-left: 3px;

  color: #39dc6b;

  font-size: 10px;

  font-weight: 950;
}

/* =========================================================
   MENU
========================================================= */

.game-menu-btn {
  position: absolute;

  top: 14px;
  right: 10px;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.25);

  border-radius: 50%;

  background: rgba(16,28,43,.68);

  color: #fff;

  font-size: 14px;

  z-index: 35;
}

.round-result-card ~ .game-menu-btn {
  display: none;
}

/* =========================================================
   WHEEL ASSEMBLY (Modern Bike Tyre Wheel)
========================================================= */

.wheel-tyre-assembly {
  position: relative;

  width: 250px;
  height: 250px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 20px;

  z-index: 15;
}

/* POINTER ARROW */

.wheel-pointer-arrow {
  position: absolute;

  top: -12px;
  left: 50%;

  transform: translateX(-50%);

  width: 0;
  height: 0;

  border-left: 12px solid transparent;

  border-right: 12px solid transparent;

  border-top: 20px solid #ffffff;

  filter: drop-shadow(0 3px 5px rgba(0,0,0,.6));

  z-index: 30;
}

/* WHEEL DISC CONTAINER */

.wheel-disc-container {
  width: 100%;
  height: 100%;

  flex-shrink: 0;

  border-radius: 50%;

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    inset 0 0 15px rgba(0, 0, 0, 0.8);

  transition:
    transform
    3s
    cubic-bezier(.12,.8,.3,1);

  z-index: 16;
}

.wheel-svg {
  width: 100%;
  height: 100%;

  display: block;
}

/* WIN PILL BADGE */

.win-pill-badge {
  position: absolute;

  bottom: -15px;
  left: 50%;

  transform: translateX(-50%);

  min-width: 64px;

  padding: 4px 14px;

  border: 1px solid #34445a;

  border-radius: 15px;

  background: #111c2c;

  color: #39dc6b;

  text-align: center;

  font-size: 10px;

  font-weight: 1000;

  box-shadow: 0 4px 8px rgba(0,0,0,0.4);

  z-index: 25;
}

/* =========================================================
   JS HIDDEN COMPATIBILITY
========================================================= */

.js-compatibility {
  position: absolute;

  left: -10000px;
  top: -10000px;

  width: 1px;
  height: 1px;

  overflow: hidden;

  pointer-events: none;
}

.flywheel,
.rolling-tire {
  width: 1px;
  height: 1px;
}

/* =========================================================
   FLOATING POPUPS
========================================================= */

.floating-popups-layer {
  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

  z-index: 50;
}

.pop-mult {
  position: absolute;

  color: #fff34d;

  font-size: 25px;

  font-weight: 1000;

  text-shadow:
    0 2px 0 #623c00,
    0 0 10px rgba(255,214,0,.8);

  animation:
    wheelPopup
    .8s
    ease-out
    forwards;
}

@keyframes wheelPopup {
  0% {
    opacity: 0;

    transform:
      translateY(15px)
      scale(.7);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translateY(-45px)
      scale(1.1);
  }
}

/* =========================================================
   WIN BANNER
========================================================= */

.win-banner {
  position: absolute;

  left: 50%;
  top: 50%;

  min-width: 160px;

  padding: 12px 22px;

  border: 2px solid #bfffc9;

  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      #42e66b,
      #16a746
    );

  text-align: center;

  transform:
    translate(-50%,-50%)
    scale(0);

  opacity: 0;

  transition: .25s ease;

  z-index: 60;
}

.win-banner.active {
  transform:
    translate(-50%,-50%)
    scale(1);

  opacity: 1;
}

.wb-title {
  color: #073c19;

  font-size: 12px;

  font-weight: 1000;
}

.wb-amount {
  color: #fff;

  font-size: 23px;

  font-weight: 1000;
}

/* =========================================================
   LAST RESULTS
========================================================= */

.last-results-strip {
  flex: 0 0 50px;

  height: 50px;

  display: flex;
  align-items: center;

  gap: 8px;

  padding: 0 12px;

  background: #111a29;

  border-top: 1px solid #253246;

  border-bottom: 1px solid #253246;

  overflow: hidden;
}

.lr-label {
  flex-shrink: 0;

  color: #7f8da0;

  font-size: 8px;

  font-weight: 1000;
}

.lr-items {
  display: flex;

  align-items: center;

  gap: 6px;

  overflow-x: auto;

  scrollbar-width: none;
}

.lr-items::-webkit-scrollbar {
  display: none;
}

.lr-chip {
  flex-shrink: 0;

  padding: 6px 11px;

  border-radius: 8px;

  background: #202d41;

  color: #f5a913;

  font-size: 10px;

  font-weight: 950;
}

/* =========================================================
   CONTROL PANEL
========================================================= */

.control-panel {
  flex: 0 0 auto;

  padding:
    10px 12px
    calc(12px + env(safe-area-inset-bottom));

  display: flex;
  flex-direction: column;

  gap: 9px;

  background:
    linear-gradient(
      180deg,
      #172231 0%,
      #101923 100%
    );

  border-top: 1px solid #273548;

  z-index: 80;
}

/* =========================================================
   BALANCE
========================================================= */

.balance-card {
  min-height: 52px;

  padding: 8px 13px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 1px solid #29394e;

  border-radius: 11px;

  background:
    linear-gradient(
      180deg,
      #0e1723,
      #0b131e
    );

  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.balance-left {
  display: flex;
  align-items: center;

  gap: 9px;
}

.balance-left > i {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background: #1d2b3e;

  color: #5ce77d;

  font-size: 12px;
}

.balance-label {
  display: block;

  color: #a2afbf;

  font-size: 10px;

  font-weight: 900;
}

.balance-small {
  display: block;

  margin-top: 1px;

  color: #596879;

  font-size: 7px;

  font-weight: 700;
}

.balance-value {
  color: #32d867;

  font-size: 21px;

  font-weight: 1000;

  letter-spacing: -.4px;
}

/* =========================================================
   BET SELECTOR
========================================================= */

.bet-selector-card {
  min-height: 62px;

  padding: 7px 9px;

  display: flex;
  flex-direction: column;

  justify-content: center;

  border: 1px solid #29394e;

  border-radius: 11px;

  background: #0d1622;
}

.bet-selector-label {
  margin-bottom: 5px;

  color: #758396;

  font-size: 8px;

  font-weight: 950;
}

.bet-selector {
  display: grid;

  grid-template-columns:
    43px
    1fr
    43px;

  align-items: center;

  gap: 8px;
}

.bet-step-btn {
  height: 32px;

  display: grid;
  place-items: center;

  border: 1px solid #344359;

  border-radius: 8px;

  background: #263348;

  color: #fff;

  font-size: 11px;
}

.bet-step-btn:active {
  transform: scale(.94);

  background: #33435a;
}

.bet-number-wrap {
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background: #182435;

  border: 1px solid #2d3b50;
}

.bet-currency {
  color: #7f8da0;

  font-size: 12px;

  font-weight: 900;
}

.bet-number-wrap input {
  width: 72px;

  border: 0;
  outline: 0;

  background: transparent;

  color: #fff;

  text-align: center;

  font-size: 18px;

  font-weight: 1000;

  appearance: textfield;
}

.bet-number-wrap input::-webkit-inner-spin-button,
.bet-number-wrap input::-webkit-outer-spin-button {
  appearance: none;

  margin: 0;
}

/* =========================================================
   PLAY
========================================================= */

.btn-play-main {
  width: 100%;

  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  border: 1px solid #5df487;

  border-radius: 11px;

  background:
    linear-gradient(
      180deg,
      #31d967 0%,
      #20c653 100%
    );

  color: #fff;

  font-size: 18px;

  font-weight: 1000;

  box-shadow:
    0 4px 10px rgba(19,184,71,.22),
    inset 0 1px rgba(255,255,255,.25);
}

.btn-play-main i {
  font-size: 15px;
}

.btn-play-main:active {
  transform: scale(.985);
}

.btn-play-main:disabled {
  opacity: .5;
}

/* =========================================================
   SMALL HEIGHT DEVICES
========================================================= */

@media (max-height: 700px) {
  .game-hdr {
    flex-basis: 48px;
    height: 48px;
  }

  .gh-btn-back {
    width: 34px;
    height: 34px;
  }

  .gh-title {
    font-size: 16px;
  }

  .current-mult-badge {
    top: 9px;
  }

  .round-result-card {
    top: 9px;
  }

  .wheel-tyre-assembly {
    transform: scale(.86);

    margin-top: 10px;
  }

  .last-results-strip {
    flex-basis: 43px;
    height: 43px;
  }

  .balance-card {
    min-height: 45px;
  }

  .bet-selector-card {
    min-height: 55px;
  }

  .btn-play-main {
    height: 46px;
  }
}

/* =========================================================
   VERY SMALL WIDTH
========================================================= */

@media (max-width: 350px) {
  .gh-btn-deposit {
    padding: 0 9px;
  }

  .wheel-tyre-assembly {
    transform: scale(.88);
  }
}


/* =========================================================
   WHEEL OUT — PREMIUM 24-SEGMENT CASINO UPGRADE
   ========================================================= */

:root {
  --wo-bg: #080e17;
  --wo-panel: #0d1724;
  --wo-panel-2: #111d2d;
  --wo-line: rgba(255,255,255,.09);
  --wo-muted: #8290a4;
  --wo-gold: #ffc83d;
  --wo-gold-2: #f59e0b;
  --wo-green: #37df70;
}

.wheelout-game-wrapper {
  background:
    radial-gradient(circle at 50% 18%, rgba(245,158,11,.10), transparent 31%),
    linear-gradient(180deg, #07101b 0%, #0a111b 52%, #080e16 100%);
}

/* ---------- Header ---------- */

.game-hdr {
  height: 56px;
  flex-basis: 56px;
  padding: 0 11px;
  background:
    linear-gradient(180deg, rgba(22,34,51,.98), rgba(10,18,29,.98));
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
}

.gh-btn-back {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: #1a293c;
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

.gh-title {
  font-size: 18px;
  letter-spacing: .7px;
}

.gh-title span {
  color: var(--wo-gold);
}

.gh-btn-deposit {
  height: 35px;
  border-radius: 10px;
  padding: 0 13px;
  background: linear-gradient(180deg,#39e976,#1dbb50);
  box-shadow:
    0 6px 16px rgba(30,200,82,.15),
    inset 0 1px rgba(255,255,255,.28);
}

/* ---------- Game stage ---------- */

.game-canvas-stage {
  background:
    radial-gradient(circle at 50% 48%, rgba(255,198,60,.08), transparent 25%),
    linear-gradient(180deg,#0e1a29 0%,#0b1521 56%,#08101a 100%);
}

.desert-sky,
.desert-sun,
.desert-mountains,
.desert-ground,
.cactus {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Current result ---------- */

.current-mult-badge {
  top: 13px;
  min-width: 132px;
  padding: 8px 17px 9px;
  border: 1px solid rgba(255,200,61,.20);
  border-radius: 15px;
  background:
    linear-gradient(180deg,rgba(23,37,56,.96),rgba(11,20,32,.96));
  box-shadow:
    0 8px 24px rgba(0,0,0,.26),
    inset 0 1px rgba(255,255,255,.07);
}

.badge-label {
  color: #7f8da0;
  letter-spacing: 1.5px;
  font-size: 7px;
}

.badge-value {
  color: #fff;
  font-size: 23px;
  line-height: 25px;
  letter-spacing: .2px;
  text-shadow: 0 0 14px rgba(255,255,255,.12);
}

.round-result-card {
  top: 13px;
  right: 11px;
  min-width: 148px;
  padding: 8px 11px;
  border-color: rgba(255,255,255,.10);
  border-radius: 13px;
  background:
    linear-gradient(180deg,rgba(23,37,56,.96),rgba(11,20,32,.96));
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}

/* ---------- Wheel ---------- */

.wheel-tyre-assembly {
  width: min(78vw, 320px);
  height: min(78vw, 320px);
  margin-top: 22px;
  position: relative;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.38));
}

.wheel-topline {
  position: absolute;
  left: 50%;
  top: -25px;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 7px;
  color: #8492a5;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .9px;
  pointer-events: none;
}

.wheel-topline i {
  color: var(--wo-gold);
  margin-right: 4px;
}

.wheel-pointer-arrow {
  top: -5px;
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 21px solid #fff;
  filter:
    drop-shadow(0 2px 0 #1b2532)
    drop-shadow(0 4px 7px rgba(0,0,0,.72));
  z-index: 40;
}

.wheel-disc-container {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  will-change: transform;
  box-shadow:
    0 18px 34px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 25px rgba(0,0,0,.55);
}

.wheel-svg {
  overflow: visible;
}

.wheel-segment {
  stroke: #0b121d;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.seg-0,.seg-4,.seg-10,.seg-13,.seg-19 {
  fill: #202b3a;
}
.seg-1,.seg-6,.seg-11,.seg-15,.seg-21 {
  fill: #2b8c75;
}
.seg-2,.seg-8,.seg-17 {
  fill: #c88720;
}
.seg-3,.seg-9,.seg-16,.seg-23 {
  fill: #b66b16;
}
.seg-5,.seg-12,.seg-20 {
  fill: #b84231;
}
.seg-7 {
  fill: #a93835;
}
.seg-14 {
  fill: #7f3c91;
}
.seg-18 {
  fill: #4960b8;
}
.seg-22 {
  fill: #d39b24;
}

.wheel-label {
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: -.2px;
  paint-order: stroke;
  stroke: rgba(0,0,0,.48);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.label-7,
.label-14,
.label-18,
.label-22 {
  font-size: 8.7px;
}

.label-22 {
  fill: #fff4a3;
  text-shadow: 0 0 7px rgba(255,220,80,.55);
}

.hub-mini {
  fill: #1a2230;
  font-size: 5px;
  font-weight: 1000;
  letter-spacing: 1px;
}

.win-pill-badge {
  bottom: -14px;
  min-width: 72px;
  padding: 5px 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 99px;
  background: rgba(10,18,29,.94);
  color: #aeb9c8;
  box-shadow: 0 7px 16px rgba(0,0,0,.35);
  letter-spacing: .6px;
}

/* ---------- Multiplier rail ---------- */

.multiplier-rail {
  position: absolute;
  left: 50%;
  bottom: 11px;
  transform: translateX(-50%);
  width: min(94%, 440px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  background: rgba(7,14,23,.72);
  backdrop-filter: blur(9px);
  box-shadow: 0 7px 20px rgba(0,0,0,.20);
  z-index: 25;
}

.multiplier-rail span {
  min-width: 29px;
  padding: 4px 5px;
  border-radius: 6px;
  background: #182435;
  color: #aab5c4;
  text-align: center;
  font-size: 8px;
  font-weight: 950;
}

.multiplier-rail .mr-low {
  color: #ff7474;
}

.multiplier-rail .mr-hot {
  color: #ffd45c;
  background: #29251c;
}

.multiplier-rail .mr-jackpot {
  color: #fff0a0;
  background: linear-gradient(180deg,#493b19,#29200f);
  border: 1px solid rgba(255,207,67,.28);
}

/* ---------- Last results ---------- */

.last-results-strip {
  flex-basis: 52px;
  height: 52px;
  padding: 0 11px;
  background:
    linear-gradient(180deg,#101b29,#0c1521);
  border-color: rgba(255,255,255,.07);
}

.lr-label {
  color: #69788c;
  letter-spacing: .8px;
}

.lr-items {
  gap: 6px;
}

.lr-chip {
  min-width: 44px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: #172335;
  color: #d3a94a;
  text-align: center;
  font-size: 9px;
  font-weight: 950;
}

/* ---------- Control panel ---------- */

.control-panel {
  gap: 8px;
  padding:
    9px 11px
    calc(10px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg,#111c2a,#09121c);
  border-top: 1px solid rgba(255,255,255,.08);
}

.balance-card,
.bet-selector-card {
  border-color: rgba(255,255,255,.08);
  background:
    linear-gradient(180deg,#111d2c,#0b1520);
  box-shadow:
    0 6px 18px rgba(0,0,0,.12),
    inset 0 1px rgba(255,255,255,.025);
}

.balance-card {
  min-height: 50px;
  border-radius: 12px;
}

.balance-value {
  color: #49df76;
  font-size: 20px;
}

.bet-selector-card {
  min-height: 60px;
  border-radius: 12px;
}

.bet-step-btn {
  height: 34px;
  border-color: rgba(255,255,255,.10);
  background: #1b2a3e;
}

.bet-number-wrap {
  height: 35px;
  background: #0a1420;
  border-color: rgba(255,255,255,.09);
}

.bet-number-wrap input {
  font-size: 18px;
}

.btn-play-main {
  height: 54px;
  border-radius: 12px;
  background:
    linear-gradient(180deg,#39e875 0%,#1fbe50 100%);
  box-shadow:
    0 8px 20px rgba(24,190,78,.16),
    inset 0 1px rgba(255,255,255,.28);
  letter-spacing: .7px;
}

.btn-play-main:disabled {
  filter: saturate(.65);
}

/* ---------- Responsive ---------- */

@media (max-width: 390px) {
  .wheel-tyre-assembly {
    width: min(76vw, 294px);
    height: min(76vw, 294px);
  }

  .multiplier-rail {
    width: 96%;
    gap: 3px;
  }

  .multiplier-rail span {
    min-width: 26px;
    padding: 4px 3px;
    font-size: 7px;
  }

  .round-result-card {
    min-width: 130px;
  }
}

@media (max-height: 720px) {
  .game-hdr {
    height: 50px;
    flex-basis: 50px;
  }

  .wheel-tyre-assembly {
    width: min(65vw, 270px);
    height: min(65vw, 270px);
    margin-top: 17px;
  }

  .wheel-topline {
    top: -21px;
  }

  .multiplier-rail {
    bottom: 7px;
  }

  .last-results-strip {
    height: 45px;
    flex-basis: 45px;
  }

  .control-panel {
    padding-top: 7px;
    gap: 6px;
  }

  .balance-card {
    min-height: 43px;
  }

  .bet-selector-card {
    min-height: 52px;
  }

  .btn-play-main {
    height: 47px;
  }
}

@media (max-height: 620px) {
  .wheel-tyre-assembly {
    width: min(57vw, 235px);
    height: min(57vw, 235px);
    margin-top: 13px;
  }

  .current-mult-badge {
    top: 7px;
    padding: 5px 13px;
  }

  .badge-value {
    font-size: 19px;
    line-height: 20px;
  }

  .multiplier-rail {
    display: none;
  }
}