/* =========================================
   SPINORA UI V2
   Premium graphite / restrained gold
   ========================================= */

:root {
  --gold: #d9b45a;
  --gold-light: #f0d58b;
  --gold-dark: #816523;
  --surface: #101116;
  --surface-2: #15161c;
  --border: rgba(255,255,255,.075);
}

/* BACKGROUND */

html,
body {
  background:
    radial-gradient(
      circle at 50% -15%,
      rgba(188,145,48,.10),
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 43%,
      rgba(255,255,255,.025),
      transparent 35%
    ),
    #07080b !important;
}

.app {
  padding-left: 16px !important;
  padding-right: 16px !important;
}


/* HEADER */

.header {
  margin-bottom: 12px !important;
}

.brand {
  font-size: 21px !important;
  letter-spacing: 4px !important;
  background:
    linear-gradient(
      180deg,
      #fff3c4,
      #cda74f 70%,
      #9e7829
    ) !important;

  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.balance {
  padding: 7px 11px !important;
  border-radius: 13px !important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.02)
    ) !important;

  border:
    1px solid rgba(215,178,88,.24) !important;

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

.balance-label {
  font-size: 8px !important;
  letter-spacing: 1.5px !important;
}

.balance-value {
  font-size: 15px !important;
}


/* DAILY */

.daily {
  min-height: 65px;
  padding: 10px 12px !important;
  margin-bottom: 13px !important;
  border-radius: 15px !important;

  background:
    linear-gradient(
      110deg,
      rgba(207,166,67,.09),
      rgba(255,255,255,.025)
    ) !important;

  border:
    1px solid rgba(211,173,79,.15) !important;
}

.daily-title {
  font-size: 12px !important;
}

.daily-sub {
  font-size: 10px !important;
}

.daily-btn {
  padding: 8px 12px !important;
  font-size: 11px;
  border-radius: 10px !important;
  background:
    linear-gradient(
      180deg,
      #ead083,
      #b88d35
    ) !important;
}


/* WHEEL AREA */

.wheel-zone {
  max-width: 340px !important;
  margin-top: 0 !important;
  margin-bottom: 13px !important;
}

.glow {
  width: 80% !important;
  height: 80% !important;
  opacity: .65;
  filter: blur(42px) !important;
}


/* POINTER */

.pointer {
  top: 0 !important;

  border-left-width: 12px !important;
  border-right-width: 12px !important;
  border-top-width: 26px !important;

  border-top-color:
    var(--gold-light) !important;

  filter:
    drop-shadow(
      0 3px 5px rgba(213,171,66,.35)
    ) !important;
}


/* OUTER WHEEL */

.wheel-shell {
  width: 89% !important;
  height: 89% !important;
  padding: 7px !important;

  background:
    linear-gradient(
      145deg,
      #f0d17c,
      #72571e 28%,
      #bb9236 53%,
      #5e481a 75%,
      #e4c368
    ) !important;

  box-shadow:
    0 0 0 2px #27200f,
    0 22px 60px rgba(0,0,0,.72),
    0 0 30px rgba(195,150,42,.10) !important;
}


/* WHEEL */

.wheel {
  background:
    conic-gradient(
      #17181d 0deg 45deg,
      #6b5221 45deg 90deg,
      #1c1d22 90deg 135deg,
      #3d321d 135deg 180deg,
      #17181d 180deg 225deg,
      #785c22 225deg 270deg,
      #1c1d22 270deg 315deg,
      #44361d 315deg 360deg
    ) !important;

  border:
    3px solid #090a0d !important;

  box-shadow:
    inset 0 0 38px rgba(0,0,0,.32);

  transition:
    transform 5.2s
    cubic-bezier(.10,.68,.08,1) !important;
}


/* subtle metallic reflection */

.wheel::before {
  content: "";
  position: absolute;
  inset: 7%;
  z-index: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.055);
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.025);
  pointer-events: none;
}


/* LABELS */

.label {
  z-index: 3;
  font-size: 12px !important;
  color: #f6f3ea;
  text-shadow:
    0 2px 5px rgba(0,0,0,.95) !important;
}


/* CENTER */

.hub {
  width: 26% !important;
  height: 26% !important;

  background:
    radial-gradient(
      circle at 35% 27%,
      #302b1d,
      #111216 48%,
      #08090c 75%
    ) !important;

  border:
    3px solid #c49a40 !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.75),
    inset 0 1px 2px rgba(255,255,255,.13),
    inset 0 -8px 20px rgba(0,0,0,.45) !important;
}

.hub span {
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  color: #e0bb62 !important;
}


/* RESULT */

.result {
  position: relative;
  min-height: 30px !important;
  margin: 0 0 10px !important;

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

  font-size: 13px !important;
  letter-spacing: .2px;

  transition:
    transform .25s ease,
    opacity .25s ease;
}

.result.win {
  animation:
    spinoraResult .55s ease;
}

@keyframes spinoraResult {
  0% {
    transform: scale(.92);
    opacity: .25;
  }

  55% {
    transform: scale(1.07);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}


/* BET SELECTOR */

.section-title {
  font-size: 9px !important;
  color: #73747d !important;
  margin-bottom: 8px !important;
}

.bets {
  gap: 7px !important;
  margin-bottom: 10px !important;
}

.bet {
  padding: 10px 3px !important;
  border-radius: 12px !important;

  background:
    linear-gradient(
      180deg,
      #14151a,
      #101116
    ) !important;

  border:
    1px solid var(--border) !important;

  font-size: 13px !important;
}

.bet.active {
  color: #ead083 !important;

  border-color:
    rgba(203,158,55,.65) !important;

  background:
    linear-gradient(
      180deg,
      rgba(111,84,28,.28),
      rgba(35,29,17,.55)
    ) !important;

  box-shadow:
    inset 0 0 18px
    rgba(213,167,57,.055) !important;
}


/* MAIN SPIN BUTTON */

.spin {
  position: relative;
  overflow: hidden;

  padding: 15px !important;
  border-radius: 15px !important;

  font-size: 16px !important;

  background:
    linear-gradient(
      180deg,
      #efd787 0%,
      #cda342 55%,
      #b3882e 100%
    ) !important;

  box-shadow:
    0 9px 27px rgba(180,134,32,.15),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}

.spin::after {
  content: "";
  position: absolute;

  top: -80%;
  left: -40%;

  width: 30%;
  height: 250%;

  transform: rotate(22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.25),
      transparent
    );

  animation:
    spinoraShine 4s infinite;
}

@keyframes spinoraShine {
  0%, 65% {
    left: -45%;
  }

  100% {
    left: 135%;
  }
}


/* BONUS */

.bonus {
  margin-top: 13px !important;
  padding: 11px 12px !important;
  border-radius: 14px !important;

  background:
    rgba(255,255,255,.022) !important;

  border:
    1px solid rgba(255,255,255,.055) !important;
}

.bonus-row {
  font-size: 10px !important;
  margin-bottom: 7px !important;
}

.track {
  height: 5px !important;
  background: #222329 !important;
}


/* BOTTOM NAV */

.nav {
  background:
    rgba(7,8,11,.96) !important;

  border-top:
    1px solid rgba(255,255,255,.055) !important;
}

.nav-item {
  color: #62636b !important;
}

.nav-item.active {
  color: #d7b45c !important;
}


/* smaller iPhones */

@media (max-height: 750px) {

  .daily {
    margin-bottom: 8px !important;
  }

  .wheel-zone {
    max-width: 300px !important;
    margin-bottom: 5px !important;
  }

  .bonus {
    margin-top: 8px !important;
  }
}