/* style.css */
/* Basado en Rohit Nethi: Spin the wheel! – Rigged :contentReference[oaicite:1]{index=1} */

body {
  background: #f8f9fa;
}
#canvas-container {
  width: 90vw;
  max-width: 600px;
  margin: auto;
}
#wheelcanvas {
  width: 100% !important;  /* forza responsive */
  height: auto !important;
  display: block;
}
* { margin:0; padding:0; }
body {
  background:#eaeaea;
  font-family: 'Exo 2', sans-serif;
}
#wrapper {
  margin: 40px auto;
  width:266px;
  position:relative;
}
#counter, #winnings {
  color:#36454f;
  text-align:center;
  margin:1rem 0;
}
#wheel {
  width:250px; height:250px;
  border-radius:50%;
  position:relative; overflow:hidden;
  border:8px solid #fff;
  box-shadow: rgba(0,0,0,0.2) 0 0 10px,
              rgba(0,0,0,0.05) 0 3px 0;
}
#inner-wheel {
  width:100%; height:100%;
  transition: all 5s cubic-bezier(0,.99,.44,.99);
}
.sec {
  position:absolute; width:0; height:0;
  border-style: solid;
  border-width: 130px 75px 0;
  border-color: #16a085 transparent;
  transform-origin: 75px 129px;
  left:50px; top:-4px;
}
.sec span {
  position: absolute;
  top: -85px;
  left: -35px;
  width: 70px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  transform: rotate(-90deg);
}
#spin {
  width:68px; height:68px;
  position:absolute; top:50%; left:50%;
  margin:-34px 0 0 -34px;
  border-radius:50%; background:#fff;
  box-shadow: rgba(0,0,0,0.1) 0 3px 0;
  cursor:pointer; z-index:1000;
  user-select: none;
}
#inner-spin {
  width:54px; height:54px;
  position:absolute; top:50%; left:50%;
  margin:-27px 0 0 -27px;
  border-radius:50%;
  background: radial-gradient(ellipse at center, #fff 0%, #eaeaea 100%);
  z-index:999;
}
#spin:after {
  content:"SPIN";
  position:absolute; width:100%; height:100%;
  top:0; left:0;
  line-height:68px; text-align:center;
  color:#CCC; text-shadow: 0 2px 0 #fff;
}
#spin:before {
  content:""; position:absolute;
  width:0; height:0;
  border-style:solid;
  border-width:0 20px 28px 20px;
  border-color:transparent transparent #fff transparent;
  top:-12px; left:14px;
}
#shine {
  width:250px; height:250px;
  position:absolute; top:0; left:0;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  opacity:0.1;
}
/* efecto de clic */
@keyframes hh {
  0%,100% { transform: rotate(0deg); }
  50%    { transform: rotate(7deg); }
}
.spin {
  animation: hh 0.1s;
}
#spin.spin #inner-spin {
  box-shadow: rgba(0,0,0,0.4) 0 0 5px inset;
}