.wheelWrap{
  width:100%;
  max-width:760px;
  margin:18px auto;
  overflow:hidden;
}

.wheel{
  position:relative;
  padding:14px;
  border-radius:20px;
  background:#FFFFFF;
  border:1px solid rgba(35,47,62,.12);
  overflow:hidden;
  transform:translateZ(0);
  box-shadow:
    0 12px 28px rgba(19,25,33,.10),
    0 4px 10px rgba(19,25,33,.06);
}

.wheel__dots{
  display:none;
}

.wheel__frame{
  position:absolute;
  inset:14px;
  border-radius:16px;
  border:1px solid rgba(35,47,62,.10);
  pointer-events:none;
  z-index:3;
}

.wheel__track{
  position:relative;
  height:84px;
  border-radius:16px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);
  border:1px solid rgba(35,47,62,.10);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:0 10px;
  z-index:2;
}

.wheel__centerLine{
  position:absolute;
  top:14px;
  bottom:14px;
  left:50%;
  width:2px;
  transform:translateX(-1px);
  background:#146EB4;
  z-index:5;
}

.wheel__centerLine::before{
  content:"";
  position:absolute;
  left:50%;
  top:-6px;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:10px solid #146EB4;
}

.wheel__strip{
  display:flex;
  align-items:center;
  height:100%;
  padding:0 10px;
  transform:translate3d(0,0,0);
  will-change:transform;
}

.tile{
  --cut:14px;
  --cutOff:7px;
  --bcol:rgba(35,47,62,.16);
  position:relative;
  flex:0 0 auto;
  width:186px;
  height:60px;
  margin:0 10px;
  padding:0 14px;
  border-radius:14px;
  border:1px dashed var(--bcol);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:800;
  color:#232F3E;
  white-space:nowrap;
  overflow:visible;
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F7F8 100%);
}

.tile::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  height:0;
  border-top:1px dashed rgba(35,47,62,.08);
  transform:translateY(-50%);
  opacity:.55;
  pointer-events:none;
  z-index:1;
}

.tile::before,
.tile .tile-cut-r{
  content:"";
  position:absolute;
  top:50%;
  width:var(--cut);
  height:var(--cut);
  border-radius:50%;
  transform:translateY(-50%);
  background:#FFFFFF;
  pointer-events:none;
  z-index:6;
}

.tile::before{
  left:calc(-1 * var(--cutOff));
  box-shadow:0 0 0 6px #FFFFFF;
  background:
    radial-gradient(circle,#FFFFFF 63%,#FFFFFF 63%),
    linear-gradient(to right,var(--bcol) 50%,transparent 50%);
}

.tile .tile-cut-r{
  right:calc(-1 * var(--cutOff));
  box-shadow:0 0 0 6px #FFFFFF;
  background:
    radial-gradient(circle,#FFFFFF 63%,#FFFFFF 63%),
    linear-gradient(to left,var(--bcol) 50%,transparent 50%);
}

.tile__ico,
.tile__label{
  position:relative;
  z-index:10;
}

.tile__ico{
  width:14px;
  height:14px;
  flex:0 0 14px;
  display:inline-block;
  color:currentColor;
  fill:currentColor;
  opacity:.9;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.55));
}

.tile__label{
  display:block;
  min-width:0;
  max-width:calc(100% - 28px);
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  line-height:1;
  opacity:.96;
}

.tile--win{
  --bcol:rgba(34,197,94,.32);
  border:1px dashed rgba(255,255,255,.72);
  color:#1F9D55;
  background:linear-gradient(180deg,#ECFDF5 0%,#DDF8EA 50%,#CCF2DF 100%);
}

.tile--retry{
  --bcol:rgba(255,153,0,.34);
  border:1px dashed rgba(255,255,255,.72);
  color:#B96D00;
  background:linear-gradient(180deg,#FFF8D9 0%,#FFEAA1 50%,#FFDF73 100%);
}

.tile--lose{
  --bcol:rgba(239,68,68,.28);
  border:1px dashed rgba(255,255,255,.72);
  color:#C83B3B;
  background:linear-gradient(180deg,#FFF0F1 0%,#FFDCDD 50%,#FFCACC 100%);
}

.tile.is-hit{
  animation:tilePulseScale .9s ease-in-out infinite !important;
  transform-origin:center center;
  will-change:transform;
  z-index:20;
  box-shadow:none !important;
}

@keyframes tilePulseScale{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}

@media (max-width:560px){
  .wheel{
    padding:12px;
    border-radius:18px;
  }

  .wheel__frame{
    inset:12px;
    border-radius:14px;
  }

  .wheel__track{
    height:74px;
    border-radius:14px;
  }

  .tile{
    --cut:12px;
    --cutOff:6px;
    width:164px;
    height:54px;
    margin:0 8px;
    border-radius:12px;
    padding:0 12px;
    gap:8px;
  }

  .tile__ico{
    width:13px;
    height:13px;
    flex:0 0 13px;
  }

  .tile__label{
    max-width:calc(100% - 26px);
    font-size:11px;
  }

  .tile::after{
    left:10px;
    right:10px;
  }

  .tile::before{
    box-shadow:0 0 0 5px #FFFFFF;
  }

  .tile .tile-cut-r{
    box-shadow:0 0 0 5px #FFFFFF;
  }
}