:root{
  --yt-red:#ff0033; --stroke:#e5e7eb; --txt:#0f172a; --muted:#64748b;
  --bg:#ffffff; --chip1:#dbeafe; --chip2:#ffe4e6; --chip3:#dcfce7;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--txt);background:var(--bg)}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(800px 800px at 8% 8%,#ffdcdc 0%,transparent 60%),
  radial-gradient(700px 700px at 92% 12%,#d9f99d 0%,transparent 60%),
  radial-gradient(600px 600px at 18% 86%,#bfdbfe 0%,transparent 60%),
  radial-gradient(600px 600px at 82% 88%,#fef08a 0%,transparent 60%);
opacity:.55;filter:saturate(120%)}

.wrap{max-width:1200px;margin:0 auto;padding:18px}
h1{margin:8px 0 14px;font-weight:900;font-size:clamp(22px,3.6vw,38px)}

.info{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.badge{display:inline-flex;align-items:center}
.badge>span{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--stroke);background:linear-gradient(135deg,var(--chip1),#fff);font-weight:800}
.badge .credits{background:linear-gradient(135deg,var(--chip2),#fff)}

.grid{display:grid;grid-template-columns:1fr 460px;gap:22px}
@media (max-width:1024px){.grid{grid-template-columns:1fr}}

.panel{position:relative;background:#fff;border:1px solid var(--stroke);border-radius:22px;padding:18px;box-shadow:0 10px 30px rgba(2,8,23,.06)}

.wheel-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding-top:24px}
@media (max-width:480px){.wheel-wrap{padding-top:18px}}

.panel canvas#wheel{
  width: min(92vw, 560px);     /* luôn fit màn nhỏ */
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 50%;
  background:#0b1220;
  border:1px solid rgba(2,8,23,.06);
  box-shadow: inset 0 0 0 10px #fff, 0 6px 18px rgba(2,8,23,.06);
}
@media (max-width:480px){
  .wheel-wrap{min-height:0; padding-top:24px;} /* bỏ chiều cao cố định gây tràn */
}


/* MŨI NHỌN – vị trí tính bằng JS, chĩa vào trong */
.pin{
  position:absolute;width:0;height:0;z-index:3;
  border-left:12px solid transparent; border-right:12px solid transparent;
  border-top:18px solid #f59e0b; /* hình tam giác */
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.28));
}

#btnSpin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:112px;height:112px;border:0;border-radius:999px;cursor:pointer;
  font-weight:900;font-size:18px;color:#fff;
  background:radial-gradient(120px 120px at 30% 30%,#ff7290,#ff0033 65%,#c9002a);
  box-shadow:0 14px 30px rgba(255,0,51,.35),inset 0 6px 14px rgba(255,255,255,.35);
}
#btnSpin:disabled{filter:grayscale(1) opacity(.5);cursor:not-allowed}

.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:10px 12px;border-bottom:1px solid #f1f5f9;text-align:left;white-space:nowrap}
.table th{color:#334155}

/* Toast + Confetti */
.toast{
  position:fixed;left:50%;top:18px;transform:translate(-50%,-12px) scale(.96);
  opacity:0;transition:.28s ease, transform .28s ease;
  color:#fff;padding:12px 16px;border-radius:14px;font-weight:800;letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 26px rgba(0,0,0,.25), inset 0 0 0 9999px rgba(255,255,255,.06);
  backdrop-filter: blur(6px); z-index:9999;
}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.toast.--jackpot{background:linear-gradient(135deg,#f59e0b,#f97316 50%,#ef4444);box-shadow:0 10px 30px rgba(249,115,22,.45),0 0 0 2px rgba(255,255,255,.08) inset}
.toast.--big{background:linear-gradient(135deg,#22c55e,#06b6d4);box-shadow:0 10px 26px rgba(34,197,94,.35),0 0 0 2px rgba(255,255,255,.06) inset}
.toast.--win{background:linear-gradient(135deg,#3b82f6,#8b5cf6);box-shadow:0 10px 26px rgba(59,130,246,.32),0 0 0 2px rgba(255,255,255,.05) inset}
.toast.--miss{background:linear-gradient(135deg,#111827,#374151);box-shadow:0 10px 24px rgba(17,24,39,.35),0 0 0 2px rgba(255,255,255,.05) inset}

/* Confetti canvas phủ full màn */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:9998}