:root{--bg:#090909;--panel:#151515;--gold:#f4c24f;--gold2:#9d6d16;--red:#9e1830;--red2:#d41f42;--text:#fff;--muted:#bbb}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top,#34100f 0,#110707 34%,#050505 75%);color:var(--text)}
.wrap{max-width:1000px;margin:auto;padding:18px}.hero{border:2px solid var(--gold2);border-radius:22px;padding:28px 18px;text-align:center;background:linear-gradient(180deg,#111,#050505);box-shadow:0 0 30px #000 inset,0 0 20px #6e400055}
.hero h1{margin:0;font-size:clamp(34px,7vw,82px);line-height:.95;color:#f3c055;text-shadow:0 3px 0 #5b3500,0 0 14px #f5a90066}.hero h1 span{display:block;color:#d91d4a}.hero h2{font-size:clamp(20px,4vw,42px);margin:18px 0 8px}.hero .big{font-size:clamp(30px,6vw,64px);font-weight:900;color:#ffd25f}.hero .cta{font-weight:900;color:#ffd86b;margin-top:12px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0}.tabs button{background:#751321;color:#fff;border:1px solid #bd4253;border-radius:8px;padding:10px 14px;font-weight:800;cursor:pointer}.tabs button.active{background:linear-gradient(#dc3150,#941124);box-shadow:0 0 12px #ef395e55}
.card{background:linear-gradient(180deg,#191919,#0f0f0f);border:1px solid #8d6a25;border-radius:16px;margin:16px 0;padding:18px;box-shadow:0 10px 30px #0008}.card h3{margin:0 0 14px;color:#ffd76a;text-align:center;font-size:25px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:700px){.grid{grid-template-columns:1fr}}
input{width:100%;padding:13px;border-radius:9px;border:1px solid #6f5323;background:#080808;color:#fff;font-size:16px;margin-top:7px}label{font-weight:800;color:#ffe18b}.btn{width:100%;padding:13px;border-radius:10px;border:0;background:linear-gradient(#ffcf58,#a56c08);font-weight:900;font-size:17px;cursor:pointer;margin-top:12px;color:#221300}.btn.red{background:linear-gradient(#ef3758,#8d1127);color:#fff}.msg{margin-top:10px;padding:10px;border-radius:8px;background:#0008;color:#ddd;min-height:40px}

/* ===== SPIN WHEEL HD NEW YEARS 2027 ===== */
.wheelStage{
  position:relative;
  max-width:700px;
  margin:14px auto 8px;
  padding:36px 16px 26px;
  border:1px solid #8e6317;
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,196,57,.14),transparent 38%),
    radial-gradient(circle at 18% 18%,rgba(255,54,94,.13),transparent 20%),
    radial-gradient(circle at 82% 15%,rgba(33,106,255,.12),transparent 20%),
    linear-gradient(180deg,#14070b,#080808 72%);
  box-shadow:inset 0 0 45px #000,0 12px 35px #0008;
}
.wheelStage:before,.wheelStage:after{
  content:"✦";
  position:absolute;
  top:22px;
  color:#ffe07a;
  font-size:34px;
  text-shadow:0 0 14px #ffbf00,0 0 28px #ff5b35;
}
.wheelStage:before{left:24px}
.wheelStage:after{right:24px}

.nyTitle{
  text-align:center;
  margin:0 0 6px;
  font-size:clamp(23px,4.6vw,38px);
  font-weight:1000;
  letter-spacing:1px;
  color:#ffd968;
  text-shadow:0 2px 0 #6f3500,0 0 14px #ffbd3a80;
}
.nySub{
  text-align:center;
  margin:0 0 14px;
  color:#fff0b2;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.8px;
}

.pointerWrap{height:34px;position:relative;z-index:20}
.pointer{
  position:absolute;
  left:50%;
  top:-6px;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:25px solid transparent;
  border-right:25px solid transparent;
  border-top:48px solid #ffd34f;
  filter:drop-shadow(0 4px 2px #000) drop-shadow(0 0 9px #ffbf25);
}
.pointer:after{
  content:"";
  position:absolute;
  left:-13px;top:-42px;
  width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff8c8 0 15%,#ffd84e 34%,#a96200 75%);
  box-shadow:0 0 0 3px #6f3e00,0 0 12px #ffd75a;
}

.wheelBox{display:flex;align-items:center;justify-content:center;padding:8px;position:relative}
.wheelShell{
  position:relative;
  width:min(90vw,590px);
  aspect-ratio:1;
  border-radius:50%;
  padding:18px;
  background:
    radial-gradient(circle,#fff5b1 0 1%,#e8aa20 3%,#7d4300 7%,#ffd86a 10%,#9f5d00 13%,#2b1700 16%,#efbc35 18%,#5a3100 20%);
  box-shadow:
    0 0 0 3px #3b2100,
    0 0 0 7px #d99c1e,
    0 0 26px #ffc84099,
    0 0 65px #ff9d0038;
}
.wheelShell:before{
  content:"";
  position:absolute; inset:5px;
  border-radius:50%;
  pointer-events:none;
  background:repeating-conic-gradient(from 0deg,#fff6b8 0 1.5deg,transparent 1.5deg 11deg);
  -webkit-mask:radial-gradient(circle,transparent 0 86%,#000 86% 93%,transparent 93%);
  mask:radial-gradient(circle,transparent 0 86%,#000 86% 93%,transparent 93%);
  filter:drop-shadow(0 0 5px #fff0a0);
  z-index:5;
}

.wheel{
  width:100%;height:100%;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  background:conic-gradient(from -20deg,
    #c51d2b 0 40deg,
    #1f4b9a 40deg 80deg,
    #d99018 80deg 120deg,
    #8f1731 120deg 160deg,
    #147a66 160deg 200deg,
    #6c2f91 200deg 240deg,
    #d7b12e 240deg 280deg,
    #0b5b77 280deg 320deg,
    #b51f62 320deg 360deg
  );
  transition:transform 4.4s cubic-bezier(.12,.74,.12,1);
  box-shadow:inset 0 0 35px #0008,0 0 0 4px #f5cf5d;
}
.wheel:before{
  content:"";
  position:absolute;inset:0;border-radius:50%;
  background:
    repeating-conic-gradient(from -20deg,transparent 0 39.35deg,rgba(255,225,112,.98) 39.35deg 40deg),
    radial-gradient(circle at 50% 50%,transparent 0 62%,rgba(255,255,255,.05) 63%,transparent 70%);
  z-index:1;pointer-events:none;
}

/* Each .slice is a full-wheel overlay rotated to the center of its segment. */
.slice{
  position:absolute;
  inset:0;
  transform-origin:50% 50%;
  z-index:3;
  pointer-events:none;
}
.sliceText{
  position:absolute;
  left:50%;
  top:8.4%;
  transform:translateX(-50%);
  min-width:92px;
  text-align:center;
  font-weight:1000;
  font-size:clamp(16px,3vw,25px);
  line-height:1;
  letter-spacing:.1px;
  color:#fff8d0;
  text-shadow:0 2px 2px #000,0 0 7px #000;
  white-space:nowrap;
}
.sliceText.flip{transform:translateX(-50%) rotate(180deg)}
.sliceText .num{
  display:inline-block;
  margin-right:4px;
  font-size:1.14em;
  color:#ffe16b;
}
.sliceText .unit{
  font-size:.72em;
  font-weight:1000;
}
.sliceText .miniSpark{
  display:block;
  margin-top:6px;
  font-size:.65em;
  color:#ffe687;
  text-shadow:0 0 8px #ffcf42;
}

/* HD center medallion using uploaded SKCK logo */
.center{
  position:absolute;
  inset:35%;
  border-radius:50%;
  z-index:10;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#080808;
  border:5px solid #f4cd58;
  box-shadow:0 0 0 5px #7b3e08,0 0 0 8px #ffdc73,0 0 24px #ffc63a99;
}
.center img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  transform:scale(1.10);
}

.spinRibbon{
  margin:14px auto 2px;
  max-width:560px;
  text-align:center;
  padding:11px 15px;
  border-radius:10px;
  background:linear-gradient(180deg,#b31d30,#68101d);
  border:2px solid #e7b447;
  color:#ffe078;
  font-weight:1000;
  letter-spacing:1.5px;
  box-shadow:0 7px 20px #0009,inset 0 0 12px #ffad2450;
}
.spinCaption{
  max-width:560px;
  margin:13px auto 0;
  padding:11px 15px;
  text-align:center;
  border-top:1px solid #9d6d16;
  border-bottom:1px solid #9d6d16;
  color:#ffe7a0;
  font-weight:900;
  font-size:14px;
  line-height:1.45;
}

@media(max-width:560px){
  .wheelStage{padding:30px 7px 20px}
  .wheelShell{width:min(94vw,520px);padding:14px}
  .sliceText{top:7.5%;min-width:72px;font-size:clamp(12px,4vw,18px)}
  .center{inset:34%}
}

table{width:100%;border-collapse:collapse}th,td{padding:12px 9px;border-bottom:1px solid #4d3b1c;text-align:left}th{color:#ffd76a}.rank{font-weight:900;color:#ffd76a}.prize{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:12px;border-bottom:1px solid #443416}.prize b{color:#ffd765}.hidden{display:none}.footer{text-align:center;color:#999;padding:24px}.tag{display:inline-block;background:#6e101e;border:1px solid #b93a50;border-radius:99px;padding:6px 10px;margin:3px;color:#fff}

select{width:100%;padding:13px;border-radius:9px;border:1px solid #6f5323;background:#080808;color:#fff;font-size:16px;margin-top:7px}
.siteRow{margin-top:14px}
.siteBadge{display:inline-block;padding:5px 9px;border-radius:999px;border:1px solid #9c6f20;background:#261907;color:#ffd86b;font-weight:900;font-size:12px}
.resultWin{margin-top:12px;padding:16px;border:1px solid #d4a029;border-radius:12px;background:linear-gradient(180deg,#34120d,#110908);text-align:center;box-shadow:0 0 18px #ffbf2d25}
.resultWin .bigResult{font-size:clamp(26px,5vw,42px);font-weight:1000;color:#ffd85d;text-shadow:0 2px #6a3900,0 0 12px #ffb00055}
.resultWin .smallResult{color:#ffe9a8;margin-top:5px;font-weight:800}


/* ===== NEW YEARS 2027 REFINEMENT ===== */
.nyTitle{
  max-width:620px;
  margin:0 auto 7px;
  padding:4px 16px;
  font-family:"Arial Black","Trebuchet MS",system-ui,sans-serif;
  font-size:clamp(24px,5.2vw,42px);
  font-weight:1000;
  line-height:1.08;
  letter-spacing:1.6px;
  color:#ffe27a;
  text-transform:uppercase;
  text-shadow:
    0 2px 0 #793d00,
    0 0 8px #ffbd28,
    0 0 22px rgba(255,155,32,.55);
}
.nyTitle .titleSpark{
  color:#fff1a4;
  font-size:.8em;
  animation:titleTwinkle 1.4s ease-in-out infinite alternate;
}
@keyframes titleTwinkle{
  from{opacity:.45;filter:drop-shadow(0 0 2px #ffc64b)}
  to{opacity:1;filter:drop-shadow(0 0 12px #fff0a0)}
}
.nySub{
  margin:0 auto 14px;
  max-width:600px;
  font-family:"Trebuchet MS",system-ui,sans-serif;
  font-size:clamp(10px,2.25vw,14px);
  font-weight:900;
  letter-spacing:2.4px;
  line-height:1.4;
  color:#fff4c9;
  text-transform:uppercase;
  text-shadow:0 1px 2px #000,0 0 9px rgba(255,208,85,.55);
}

/* 18 hadiah: masing-masing nominal muncul 2x */
.wheel{
  background:conic-gradient(from -10deg,
    #c51c34 0 20deg,
    #1e4ea1 20deg 40deg,
    #e49a12 40deg 60deg,
    #8b1952 60deg 80deg,
    #148676 80deg 100deg,
    #703399 100deg 120deg,
    #d6ad22 120deg 140deg,
    #08718c 140deg 160deg,
    #bd2469 160deg 180deg,
    #b91b2d 180deg 200deg,
    #2258ad 200deg 220deg,
    #f0a114 220deg 240deg,
    #7d1b56 240deg 260deg,
    #118572 260deg 280deg,
    #673292 280deg 300deg,
    #d9b32e 300deg 320deg,
    #076d88 320deg 340deg,
    #b91f62 340deg 360deg
  );
}
.wheel:before{
  background:
    repeating-conic-gradient(from -10deg,
      transparent 0 19.35deg,
      rgba(255,231,132,.98) 19.35deg 20deg),
    radial-gradient(circle at 50% 50%,
      transparent 0 62%,rgba(255,255,255,.05) 63%,transparent 70%);
}
.sliceText{
  top:5.2%;
  min-width:66px;
  font-family:"Arial Black","Trebuchet MS",system-ui,sans-serif;
  font-size:clamp(10px,2.05vw,15px);
  line-height:.94;
  letter-spacing:0;
  text-shadow:0 2px 2px #000,0 0 6px #000;
}
.sliceText .num{
  margin-right:2px;
  font-size:1.06em;
}
.sliceText .unit{
  font-size:.58em;
  letter-spacing:.2px;
}
.sliceText .miniSpark{
  margin-top:4px;
  font-size:.5em;
}
@media(max-width:560px){
  .sliceText{
    top:4.5%;
    min-width:50px;
    font-size:clamp(8px,2.8vw,12px);
  }
  .sliceText .miniSpark{display:none}
}

/* ===== POPUP HASIL SPIN LINGKARAN + PETASAN ===== */
.spinResultOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(7px);
}
.spinResultOverlay.show{display:flex;animation:overlayIn .25s ease both}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}

.resultCircleWrap{
  position:relative;
  width:min(82vw,430px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  animation:resultPop .58s cubic-bezier(.18,.9,.22,1.25) both;
}
@keyframes resultPop{
  0%{transform:scale(.25) rotate(-8deg);opacity:0}
  70%{transform:scale(1.08) rotate(2deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.resultCircle{
  position:relative;
  z-index:5;
  width:78%;
  aspect-ratio:1;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:36px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,239,145,.18),transparent 25%),
    radial-gradient(circle at 50% 50%,#51101f 0 42%,#230912 65%,#08080d 100%);
  border:7px solid #f4c94d;
  box-shadow:
    0 0 0 5px #7f3e09,
    0 0 0 10px #ffd960,
    0 0 36px #ffbb2f,
    0 0 85px rgba(255,64,92,.52),
    inset 0 0 34px #000;
}
.resultCircle:before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:2px dashed rgba(255,232,137,.7);
  animation:ringSpin 10s linear infinite;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.resultCircle .resultTop{
  position:relative;z-index:2;
  font-family:"Trebuchet MS",system-ui,sans-serif;
  color:#fff2bd;
  font-weight:900;
  letter-spacing:1.5px;
  font-size:clamp(12px,2.8vw,17px);
}
.resultCircle .resultAmount{
  position:relative;z-index:2;
  margin:8px 0 9px;
  font-family:"Arial Black","Trebuchet MS",system-ui,sans-serif;
  font-size:clamp(35px,9vw,62px);
  line-height:.92;
  color:#ffd85d;
  text-shadow:0 3px 0 #8a4100,0 0 18px #ffb31d;
}
.resultCircle .resultMember,
.resultCircle .resultTotal{
  position:relative;z-index:2;
  color:#fff;
  font-family:"Trebuchet MS",system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(11px,2.7vw,16px);
  line-height:1.4;
}
.resultCircle .resultTotal{
  color:#ffe785;
  margin-top:5px;
}
.resultClose{
  position:absolute;
  z-index:20;
  right:5%;
  top:6%;
  width:38px;height:38px;
  border:2px solid #ffe28a;
  border-radius:50%;
  background:#6d1424;
  color:#fff;
  font-weight:1000;
  font-size:20px;
  cursor:pointer;
  box-shadow:0 0 12px #ffbf35;
}

/* Petasan / kembang api mengelilingi popup */
.firework{
  --x:0px;
  --y:0px;
  position:absolute;
  z-index:2;
  left:50%;top:50%;
  width:9px;height:9px;
  margin:-4px;
  border-radius:50%;
  background:#ffe368;
  box-shadow:
    0 -38px #ffdb3f,
    27px -27px #ff4268,
    38px 0 #55d7ff,
    27px 27px #8cff72,
    0 38px #ff7d32,
    -27px 27px #e45cff,
    -38px 0 #fff29d,
    -27px -27px #ff375f;
  transform:translate(var(--x),var(--y)) scale(.1);
  opacity:0;
  animation:fireworkBurst 1.25s ease-out infinite;
}
.firework.f1{--x:-145px;--y:-140px;animation-delay:.05s}
.firework.f2{--x:150px;--y:-125px;animation-delay:.28s}
.firework.f3{--x:-150px;--y:125px;animation-delay:.55s}
.firework.f4{--x:148px;--y:132px;animation-delay:.8s}
.firework.f5{--x:0px;--y:-195px;animation-delay:.95s}
@keyframes fireworkBurst{
  0%{transform:translate(var(--x),var(--y)) scale(.05);opacity:0}
  18%{opacity:1}
  60%{transform:translate(var(--x),var(--y)) scale(1);opacity:1}
  100%{transform:translate(var(--x),var(--y)) scale(1.35);opacity:0}
}

/* Extracted inline helpers */
.tableScroll{overflow:auto}
.historyItem{padding:8px;border-bottom:1px solid #333}