:root{
  --edge:#0ea5e9;
  --shadow:0 10px 25px rgba(0,0,0,.22);
}

.wheel-card{ position:relative; overflow:visible; }
.wheel-wrap{ position:relative; width:min(92vw,560px); margin:20px auto 10px; user-select:none; }

.wheel-plate{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:50%;
  border:12px solid var(--edge); box-shadow:var(--shadow);
  transform-origin:50% 50%; overflow:hidden;
}

.wheel-plate .slices{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 56%, #000 56.1%);
          mask: radial-gradient(circle at 50% 50%, transparent 0 56%, #000 56.1%);
}

/* icon */
.wheel-plate .icons{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.wheel-plate .icons .sector-img{
  position:absolute; left:50%; top:50%; width:92px; height:92px;
  transform-origin:0 0; display:flex; align-items:center; justify-content:center;
}
.wheel-plate .icons .sector-img img{
  max-width:86px; max-height:86px; border-radius:10px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* highlight mới (SVG wedge) */
.winner-wedge{ z-index:3; pointer-events:none; }
@keyframes blink { from{opacity:1; filter:brightness(1)} to{opacity:.28; filter:brightness(1.55)} }

/* kim 12h */
.needle{
  position:absolute; left:50%; top:-30px; transform:translateX(-50%);
  width:0; height:0; z-index:6;
  border-left:16px solid transparent; border-right:16px solid transparent; border-top:32px solid #ef4444;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.needle::after{ content:''; position:absolute; left:-4px; top:32px; width:8px; height:14px; background:#ef4444; border-radius:0 0 4px 4px; }

/* trục & nút */
.axle{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:86px; height:86px; border-radius:50%; background:#fff; border:8px solid var(--edge); z-index:4; box-shadow:var(--shadow);
}
#spin-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:5; padding:14px 28px; border:none; border-radius:999px; cursor:pointer;
  background:#10b981; color:#fff; font-weight:800; font-size:16px; box-shadow:0 8px 18px rgba(16,185,129,.35);
}
#spin-btn:hover{ filter:brightness(1.05) }
#spin-btn:active{ transform:translate(-50%,-50%) scale(.98) }
#spin-btn:disabled{ opacity:.6; cursor:not-allowed }

.wheel-plate.spinning{ filter:saturate(1.05) }

/* overlay khoá */
.wheel-disabled{ position:relative; }
.wheel-disabled .wheel-wrap{ filter:grayscale(.3) opacity(.85); pointer-events:none; }
.wheel-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
  background:rgba(11,18,32,.35); text-align:center; z-index:10;
}

/* modal */
#win-modal{
  border:none; border-radius:16px; padding:18px 20px; max-width:92vw;
  box-shadow:var(--shadow); background:#0f172a; color:#e5e7eb; z-index:3000;
}
#win-modal::backdrop{ background:rgba(0,0,0,.35) }
#win-modal header{ font-size:20px; font-weight:800; margin-bottom:10px; text-align:center }
#win-modal img{ width:160px; height:auto; margin:8px auto; display:block; border-radius:12px }
#win-modal .ok{ display:block; margin:10px auto 0; padding:10px 18px; border:none; border-radius:8px; background:#0ea5e9; color:#001; font-weight:700 }

/* fireworks */
.fireworks-canvas{ position:fixed; inset:0; pointer-events:none; z-index:3500 }

/* mobile */
@media (max-width:520px){
  .wheel-wrap{ width:100%; max-width:420px; margin:12px auto }
  .wheel-plate{ border-width:8px }
  .needle{ top:-22px; border-left-width:12px; border-right-width:12px; border-top-width:24px }
  .axle{ width:64px; height:64px; border-width:6px }
  #spin-btn{ padding:10px 18px; font-size:14px }
  .wheel-plate .icons .sector-img{ width:72px; height:72px }
  .wheel-plate .icons .sector-img img{ max-width:68px; max-height:68px }
}