:root{
  --wheel-gold:#f3bd45;
  --wheel-gold2:#ffd66c;
  --wheel-red:#9f1f1f;
  --wheel-cream:#e8d4a0;
  --wheel-bg:#0c0f14;
  --wheel-card:#111720;
  --wheel-line:rgba(255,208,92,.18);
  --wheel-muted:#a8adb8;
}
main.wheel-page{
  padding:18px 0 34px;
  background:radial-gradient(circle at 50% 24%,rgba(214,156,45,.06),transparent 42%);
}
.wheel-redesign{
  display:grid;
  grid-template-columns:minmax(250px,270px) minmax(0,1fr) minmax(250px,270px);
  gap:18px;
  align-items:start;
}
.wheel-left,.wheel-right{display:grid;gap:14px;align-content:start}
.wheel-card,.wheel-stage-card,.rule-card{
  border:1px solid var(--wheel-line);
  background:linear-gradient(180deg,rgba(19,24,33,.96),rgba(10,14,20,.98));
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.wheel-card{padding:17px}
.card-title{font-size:13px;font-weight:900;color:var(--wheel-gold2);letter-spacing:.35px;margin-bottom:13px}
.daily-card{min-height:160px}
.daily-row{display:flex;align-items:center;gap:16px}
.daily-icon{
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;font-size:28px;
  background:radial-gradient(circle at 35% 30%,#8a6727,#171a21 63%);
  border:2px solid var(--wheel-gold);
}
.daily-count{display:flex;align-items:flex-end;gap:8px}
.daily-count b{font-family:"Barlow Condensed",Arial,sans-serif;font-size:50px;line-height:.82;color:#fff}
.daily-count span{font-weight:900;font-size:19px}
.daily-card p{margin:14px 0 0;color:#d3d6df;font-size:14px;line-height:1.5}
.countdown-card{min-height:108px}
.timer-row{display:flex;align-items:center;gap:12px}
.timer-icon{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;border:3px solid var(--wheel-gold);color:var(--wheel-gold2);font-size:25px;
}
.timer-row strong{font-family:"Barlow Condensed",Arial,sans-serif;font-size:38px;letter-spacing:1px;line-height:1}
.timer-labels{display:flex;gap:12px;margin-left:56px;color:#8f96a3;font-size:11px}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.panel-title-row h3{margin:0;font-family:"Barlow Condensed",Arial,sans-serif;font-size:24px;line-height:1;color:#fff}
.panel-title-row span{color:var(--wheel-gold2);font-weight:900;font-size:12px}
.winner-list{display:grid;gap:7px;max-height:390px;overflow:auto;padding-right:3px}
.winner-list::-webkit-scrollbar{width:5px}.winner-list::-webkit-scrollbar-thumb{background:rgba(255,205,86,.35);border-radius:20px}
.winner-row{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;min-height:37px;padding:6px 8px;border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.045)}
.winner-icon{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#3a2b15;border:1px solid rgba(255,205,86,.35);color:var(--wheel-gold2);font-size:13px}
.winner-user{display:block;font-size:12px;font-weight:900;color:#fff;line-height:1.05}
.winner-prize{display:block;font-size:11px;font-weight:800;color:var(--wheel-gold2);line-height:1.05;margin-top:2px}
.winner-time{font-size:10px;color:#c4c9d4;background:#252b38;border-radius:999px;padding:5px 7px;white-space:nowrap}

/* CENTER */
.wheel-stage-card{
  position:relative;
  min-height:560px;
  padding:22px 22px 16px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(247,189,69,.10),transparent 33%),
    linear-gradient(180deg,#101722,#0b0f15);
}
.stage-confetti{
  position:absolute;inset:0;pointer-events:none;opacity:.72;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,202,82,.8) 0 2px,transparent 3px),
    radial-gradient(circle at 84% 15%,rgba(255,202,82,.75) 0 2px,transparent 3px),
    radial-gradient(circle at 20% 70%,rgba(255,202,82,.7) 0 2px,transparent 3px),
    radial-gradient(circle at 77% 76%,rgba(255,202,82,.65) 0 2px,transparent 3px);
}
.wheel-title{
  position:relative;z-index:2;margin:4px 0 6px;
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:35px;letter-spacing:.6px;color:var(--wheel-gold2);
  text-shadow:0 3px 18px rgba(0,0,0,.45);
}
.fortune-wheel{
  --wheel-size:440px;
  position:relative;
  width:var(--wheel-size);height:var(--wheel-size);
  margin:10px auto 12px;
  display:grid;place-items:center;
}
.fortune-wheel:before{
  content:"";position:absolute;inset:-28px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,203,82,.08) 0 7deg,transparent 7deg 14deg);
  opacity:.25;
}
.wheel-disc{
  position:absolute;inset:0;border-radius:50%;
  transition:transform 5.1s cubic-bezier(.12,.88,.16,1);
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.42));
}
.wheel-svg{width:100%;height:100%;display:block;overflow:visible}
.wheel-pointer{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  z-index:7;width:52px;height:82px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));
}
.wheel-pointer:before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:36px;height:24px;border-radius:12px 12px 10px 10px;
  background:linear-gradient(180deg,#b43a32,#761919);border:2px solid #ffcf69;
}
.wheel-pointer:after{content:"";position:absolute;left:50%;top:24px;transform:translateX(-50%);width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:0;border-top:58px solid #f2bf4a;}
.wheel-pointer i{position:absolute;left:50%;top:7px;transform:translateX(-50%);z-index:3;width:12px;height:12px;border-radius:50%;background:#5f2412;border:3px solid #ffe396;box-shadow:0 1px 0 rgba(0,0,0,.15) inset}
.wheel-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:6;width:84px;height:84px;border-radius:50%;border:0;
  background:radial-gradient(circle at 35% 28%,#fff2a8,#ebb947 50%,#8e5315 78%);
  box-shadow:0 0 0 7px #f8e7b1,0 0 0 13px #a61e1e,0 12px 22px rgba(0,0,0,.32),inset 0 -7px 18px rgba(83,42,11,.32);
  font-family:"Barlow Condensed",Arial,sans-serif;font-size:40px;font-weight:900;font-style:italic;color:#0b4c73;cursor:pointer;
}
.spin-actions{position:relative;z-index:4;display:flex;justify-content:center;gap:16px;margin-top:4px}
.spin-main,.spin-ghost{height:56px;border-radius:14px;padding:0 34px;font-weight:900;font-size:17px;cursor:pointer}
.spin-main{border:0;color:#111;background:linear-gradient(180deg,#ffcf69,#bd7c25);box-shadow:0 13px 26px rgba(202,134,35,.26)}
.spin-ghost{border:1px solid rgba(255,196,82,.42);background:#111821;color:#fff}
.spin-main span,.spin-ghost span{margin-right:8px}
.wheel-note{margin:10px 0 0;color:#aeb4c0;font-size:13px}
.prize-panel{height:100%;display:flex;flex-direction:column;gap:10px}
.prize-list{display:grid;gap:9px;flex:1;align-content:start}
.prize-item{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:11px;min-height:58px;padding:8px 11px;border-radius:13px;background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.055)}
.prize-item.active{border-color:rgba(255,209,91,.85);box-shadow:0 0 0 1px rgba(255,209,91,.22) inset}
.prize-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#3a2f1b;border:1px solid rgba(255,207,96,.35);color:var(--wheel-gold2);font-size:20px}
.prize-item b{font-size:15px}.prize-arrow{color:#aab0bc;font-size:22px}.mini-note{margin:12px 0 0;color:#8f96a3;font-size:12px;text-align:left}
.wheel-bottom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.rule-card{padding:18px}.rule-card h3{font-family:"Barlow Condensed",Arial,sans-serif;font-size:25px;margin:0 0 8px}.rule-card ul{margin:0;padding-left:18px;color:#c6cbd5;line-height:1.65}.last-prize strong{display:block;font-size:30px;color:var(--wheel-gold2);font-family:"Barlow Condensed",Arial,sans-serif}

/* SVG wheel */
.wedge{stroke:#f7e4ad;stroke-width:2.6;stroke-linejoin:round}
.rim-outer{fill:none;stroke:#b1721d;stroke-width:22}
.rim-gold{fill:none;stroke:#f8d775;stroke-width:9}
.rim-dark{fill:none;stroke:#6b4518;stroke-width:3}
.slice-icon-bg{fill:rgba(61,42,18,.55);stroke:#f7d16b;stroke-width:1.45}
.slice-label{
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-weight:800;fill:#2a1705;
  text-anchor:middle;dominant-baseline:middle;
}
.slice-label.big{font-size:25px}.slice-label.small{font-size:21px}
.slice-icon{font-size:19px;text-anchor:middle;dominant-baseline:middle}

/* result modal */
.wheel-result-modal{position:fixed;inset:0;z-index:160;display:none;align-items:center;justify-content:center;padding:20px}.wheel-result-modal.open{display:flex}.wheel-result-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(5px)}.wheel-result-box{position:relative;width:min(440px,calc(100% - 20px));margin:0 auto;background:linear-gradient(180deg,#19120b,#14161c);border:1px solid rgba(220,165,60,.22);border-radius:24px;padding:26px 24px 24px;box-shadow:0 28px 60px rgba(0,0,0,.45);text-align:center}.wheel-result-close{position:absolute;right:14px;top:14px;width:38px;height:38px;border:0;border-radius:50%;background:#2d3038;color:#fff;font-size:22px}.result-glow{width:76px;height:76px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;font-size:34px;background:radial-gradient(circle,#f9e8a4,#c2832d);box-shadow:0 0 25px rgba(220,165,60,.35)}.wheel-result-box small{color:#d5c8ac;font-weight:800;letter-spacing:1px}.wheel-result-box h2{margin:8px 0 12px;font-family:"Barlow Condensed",Inter,sans-serif;font-size:42px}.wheel-result-box strong{display:block;font-size:32px;color:var(--wheel-gold2);font-family:"Barlow Condensed",Inter,sans-serif;margin-bottom:10px}.wheel-result-box p{margin:0;color:#d0cbc4;line-height:1.65}.claim-btn{margin-top:18px;height:52px;padding:0 26px;border:0;border-radius:999px;background:linear-gradient(180deg,var(--wheel-gold2),var(--wheel-gold));color:#111;font-size:18px;font-weight:900}



@media(max-width:1280px){
  .wheel-redesign{grid-template-columns:minmax(235px,255px) minmax(0,1fr) minmax(235px,255px)}
  .fortune-wheel{--wheel-size:438px}
}
@media(max-width:1100px){
  .wheel-redesign{grid-template-columns:1fr}
  .wheel-left,.wheel-right{grid-template-columns:1fr 1fr}
  .winners-card,.wheel-right{grid-column:1/-1}
  .wheel-stage-card{min-height:auto}
  .fortune-wheel{--wheel-size:min(74vw,470px)}
  .wheel-bottom-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  main.wheel-page{padding:10px 0 90px}
  .wheel-redesign{gap:12px}
  .wheel-left,.wheel-right{grid-template-columns:1fr}
  .wheel-card,.wheel-stage-card,.rule-card{border-radius:14px}
  .wheel-card{padding:14px}
  .daily-card{min-height:auto}.daily-icon{width:54px;height:54px;font-size:24px}.daily-count b{font-size:42px}
  .winner-list{max-height:310px}
  .wheel-stage-card{padding:16px 10px 14px}
  .wheel-title{font-size:24px;margin-bottom:4px}
  .fortune-wheel{--wheel-size:min(88vw,330px);margin-top:14px}
  .wheel-pointer{top:-11px;transform:translateX(-50%) scale(.74)}
  .wheel-hub{width:66px;height:66px;font-size:32px;box-shadow:0 0 0 5px #f8e7b1,0 0 0 9px #a61e1e,0 10px 20px rgba(0,0,0,.3)}
  .spin-actions{flex-direction:column;gap:10px}
  .spin-main,.spin-ghost{width:100%;height:48px;font-size:15px}
  .slice-label.big{font-size:22px}.slice-label.small{font-size:18px}.slice-icon{font-size:16px}
  .prize-item{min-height:52px}.prize-icon{width:36px;height:36px;font-size:19px}
}





/* --- compact wheel page v5 --- */
.wheel-page.shell{
  width:min(1280px,calc(100% - 28px));
}
.wheel-redesign{
  grid-template-columns:220px minmax(0,640px) 220px !important;
  gap:12px !important;
  justify-content:center;
  align-items:start !important;
}
.wheel-card{
  padding:12px !important;
  border-radius:14px !important;
}
.card-title{
  font-size:11px !important;
  margin-bottom:9px !important;
}
.daily-card{
  min-height:auto !important;
}
.daily-row{
  gap:10px !important;
}
.daily-icon{
  width:44px !important;
  height:44px !important;
  font-size:20px !important;
}
.daily-count b{
  font-size:40px !important;
}
.daily-count span{
  font-size:16px !important;
}
.daily-card p{
  margin-top:10px !important;
  font-size:12px !important;
  line-height:1.45 !important;
}
.countdown-card{
  min-height:auto !important;
}
.timer-row{
  gap:9px !important;
}
.timer-icon{
  width:34px !important;
  height:34px !important;
  font-size:19px !important;
  border-width:2px !important;
}
.timer-row strong{
  font-size:31px !important;
}
.timer-labels{
  margin-left:43px !important;
  gap:9px !important;
  font-size:10px !important;
}
.panel-title-row{
  margin-bottom:9px !important;
}
.panel-title-row h3{
  font-size:21px !important;
}
.panel-title-row span{
  font-size:10px !important;
}
.winner-list{
  max-height:260px !important;
  gap:5px !important;
}
.winner-row{
  grid-template-columns:24px 1fr auto !important;
  gap:6px !important;
  min-height:31px !important;
  padding:5px 6px !important;
  border-radius:9px !important;
}
.winner-icon{
  width:22px !important;
  height:22px !important;
  font-size:11px !important;
}
.winner-user{
  font-size:10px !important;
}
.winner-prize{
  font-size:9px !important;
}
.winner-time{
  font-size:9px !important;
  padding:4px 6px !important;
}
.wheel-stage-card{
  min-height:auto !important;
  padding:16px 16px 14px !important;
  border-radius:16px !important;
}
.wheel-title{
  font-size:29px !important;
  margin:2px 0 2px !important;
}
.fortune-wheel{
  --wheel-size:390px !important;
  margin:8px auto 12px !important;
}
.fortune-wheel:before{
  inset:-20px !important;
  opacity:.18 !important;
}
.wheel-pointer{
  top:-13px !important;
  transform:translateX(-50%) scale(.88) !important;
}
.wheel-hub{
  width:72px !important;
  height:72px !important;
  font-size:34px !important;
  box-shadow:0 0 0 6px #f8e7b1,0 0 0 10px #a61e1e,0 10px 18px rgba(0,0,0,.30),inset 0 -6px 14px rgba(83,42,11,.28) !important;
}
.spin-actions{
  gap:10px !important;
  margin-top:2px !important;
}
.spin-main,.spin-ghost{
  height:48px !important;
  border-radius:12px !important;
  padding:0 26px !important;
  font-size:15px !important;
}
.wheel-note{
  margin-top:8px !important;
  font-size:11px !important;
}
.prize-panel{
  height:auto !important;
  min-height:0 !important;
  display:block !important;
}
.prize-list{
  gap:6px !important;
}
.prize-item{
  grid-template-columns:32px 1fr auto !important;
  min-height:43px !important;
  gap:8px !important;
  padding:6px 8px !important;
  border-radius:10px !important;
}
.prize-icon{
  width:28px !important;
  height:28px !important;
  font-size:15px !important;
}
.prize-item b{
  font-size:12px !important;
}
.prize-arrow{
  font-size:17px !important;
}
.prize-extra{
  display:none !important;
}
.mini-note{
  margin-top:8px !important;
  font-size:10px !important;
}
.wheel-bottom-grid{
  width:min(1080px,100%);
  margin:12px auto 0 !important;
  gap:10px !important;
}
.rule-card{
  padding:12px !important;
  border-radius:13px !important;
}
.rule-card h3{
  font-size:19px !important;
  margin-bottom:5px !important;
}
.rule-card ul,.rule-card p{
  font-size:12px !important;
  line-height:1.45 !important;
}
.last-prize strong{
  font-size:23px !important;
}
@media(max-width:1280px){
  .wheel-redesign{
    grid-template-columns:205px minmax(0,600px) 205px !important;
  }
  .fortune-wheel{
    --wheel-size:365px !important;
  }
}
@media(max-width:1100px){
  .wheel-page.shell{
    width:calc(100% - 18px);
  }
  .wheel-redesign{
    grid-template-columns:1fr !important;
  }
  .wheel-left,.wheel-right{
    grid-template-columns:1fr 1fr !important;
  }
  .winners-card,.wheel-right{
    grid-column:1/-1;
  }
  .fortune-wheel{
    --wheel-size:min(76vw,390px) !important;
  }
}
@media(max-width:720px){
  .wheel-left,.wheel-right{
    grid-template-columns:1fr !important;
  }
  .fortune-wheel{
    --wheel-size:min(86vw,315px) !important;
  }
  .wheel-title{
    font-size:23px !important;
  }
  .spin-actions{
    flex-direction:column !important;
  }
  .spin-main,.spin-ghost{
    width:100% !important;
  }
  .wheel-bottom-grid{
    grid-template-columns:1fr !important;
  }
}