:root{
  --gold:#f6c55a;
  --gold2:#ffd978;
  --dark:#05070a;
  --panel:rgba(10,12,16,.86);
  --line:rgba(246,197,90,.22);
  --text:#f7f3e8;
  --muted:rgba(247,243,232,.62);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  overflow:hidden;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 50% 18%,rgba(246,197,90,.11),transparent 62%),
    radial-gradient(900px 560px at 82% 72%,rgba(26,151,95,.07),transparent 68%),
    linear-gradient(180deg,#07090d,#020306);
}

.bg,.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.bg{
  background:
    radial-gradient(1px 1px at 12% 18%,rgba(255,218,130,.44),transparent 70%),
    radial-gradient(1px 1px at 76% 32%,rgba(255,218,130,.35),transparent 70%),
    radial-gradient(1px 1px at 42% 78%,rgba(255,218,130,.28),transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 119px,rgba(246,197,90,.035) 120px,transparent 121px),
    repeating-linear-gradient(0deg,transparent 0 119px,rgba(246,197,90,.025) 120px,transparent 121px);
  opacity:.54;
}

.noise{
  opacity:.045;
  background-image:
    radial-gradient(1px 1px at 22% 44%,#fff,transparent),
    radial-gradient(1px 1px at 73% 18%,#fff,transparent),
    radial-gradient(1px 1px at 51% 81%,#fff,transparent);
}

button,input{font:inherit}

.pressable{
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}
.pressable:hover{filter:brightness(1.05)}
.pressable:active{transform:translateY(1px) scale(.985)}

.app{
  width:min(1120px,calc(100% - 18px));
  height:100%;
  margin:8px auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.topbar{
  min-height:62px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px auto;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:18px;
  border:1px solid rgba(246,197,90,.18);
  background:linear-gradient(180deg,rgba(22,25,33,.92),rgba(8,10,15,.94));
  box-shadow:0 18px 48px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08);
}

.backBtn,.iconBtn{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(246,197,90,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  color:#fff;
  text-decoration:none;
  font-weight:1000;
}

.brandWrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.brandLogo{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(246,197,90,.22);
  background:radial-gradient(circle at 50% 24%,rgba(246,197,90,.22),rgba(255,255,255,.025));
}

.brandLogo svg{
  width:25px;
  height:25px;
}

.brandTitle{
  font-size:22px;
  line-height:1;
  font-weight:1000;
}
.brandSub{
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#26d47b;
  box-shadow:0 0 0 3px rgba(38,212,123,.14),0 0 16px rgba(38,212,123,.32);
}

.balancePill{
  height:42px;
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(246,197,90,.18);
  background:linear-gradient(180deg,rgba(35,38,48,.92),rgba(10,12,17,.96));
  font-size:18px;
  font-weight:1000;
  white-space:nowrap;
}

.screen{flex:1;min-height:0}
.card{
  height:100%;
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(246,197,90,.18);
  background:linear-gradient(180deg,rgba(16,18,25,.94),rgba(5,6,10,.96));
  box-shadow:0 30px 80px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.06);
}

.hero{
  padding:12px;
  display:grid;
  place-items:center;
}

.wheelWrap{
  width:min(820px,100%);
  min-height:462px;
  display:grid;
  place-items:center;
}

.wheelPanel{
  position:relative;
  width:100%;
  min-height:462px;
  overflow:hidden;
  border-radius:26px;
  border:1px solid var(--line);
  background:
    radial-gradient(420px 280px at 50% 45%,rgba(246,197,90,.18),transparent 65%),
    radial-gradient(360px 220px at 76% 72%,rgba(36,164,102,.08),transparent 68%),
    linear-gradient(180deg,rgba(13,16,23,.92),rgba(4,5,8,.96));
  box-shadow:
    0 26px 70px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(246,197,90,.055);
}

.wheelBackdrop{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 55%,rgba(246,197,90,.18),transparent 31%),
    repeating-conic-gradient(from 0deg at 50% 55%,rgba(246,197,90,.05) 0 1.5deg,transparent 1.5deg 18deg),
    repeating-linear-gradient(135deg,transparent 0 40px,rgba(246,197,90,.035) 40px 42px,transparent 42px 84px);
  opacity:.8;
}

.wheelCanvasShell{
  position:absolute;
  left:50%;
  top:44%;
  width:min(378px,52%);
  aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.62)) drop-shadow(0 0 22px rgba(246,197,90,.28));
}

#wheelCanvas{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  border-radius:50%;
  transform:rotate(0deg);
  transition:transform 4.6s cubic-bezier(.09,.72,.12,1);
  will-change:transform;
}

.wheelCanvasShell::before{
  content:"";
  position:absolute;
  inset:-16px;
  z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(246,197,90,.32),transparent 66%),
    conic-gradient(from 0deg,transparent,rgba(246,197,90,.22),transparent,rgba(41,190,112,.12),transparent);
  filter:blur(4px);
  opacity:.9;
}

.wheelCanvasShell::after{
  content:"";
  position:absolute;
  left:50%;
  top:-5px;
  z-index:2;
  width:3px;
  height:50%;
  translate:-50% 0;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,239,177,.98),rgba(246,197,90,.74) 42%,rgba(246,197,90,.08));
  box-shadow:0 0 16px rgba(246,197,90,.5),0 0 34px rgba(246,197,90,.2);
  pointer-events:none;
}

.wheelHub{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:112px;
  height:112px;
  translate:-50% -50%;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:50%;
  border:1px solid rgba(255,235,174,.58);
  background:
    radial-gradient(circle at 35% 25%,#fff0b4,#d99f42 54%,#5f340e);
  color:#140b03;
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 24px rgba(246,197,90,.34),inset 0 1px 0 rgba(255,255,255,.58);
}

.wheelHub b{
  display:block;
  font-size:24px;
  line-height:1;
  font-weight:1000;
}

.wheelHub small{
  display:block;
  margin-top:5px;
  color:rgba(20,11,3,.68);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.wheelPointer{
  position:absolute;
  left:50%;
  top:22px;
  z-index:5;
  width:0;
  height:0;
  translate:-50% 0;
  border-left:17px solid transparent;
  border-right:17px solid transparent;
  border-top:34px solid var(--gold2);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(246,197,90,.42));
}

.wheelSideStats{
  position:absolute;
  right:30px;
  top:44%;
  translate:0 -50%;
  width:142px;
  display:grid;
  gap:10px;
}

.wheelStat{
  min-height:66px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(246,197,90,.18);
  background:rgba(5,7,11,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}

.wheelStat span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
}

.wheelStat b{
  display:block;
  margin-top:5px;
  color:#ffe5a4;
  font-size:20px;
  line-height:1;
  font-weight:1000;
}

.wheelHistory{
  position:absolute;
  left:50%;
  bottom:24px;
  width:min(585px,calc(100% - 64px));
  min-height:48px;
  translate:-50% 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:18px;
  border:1px solid rgba(246,197,90,.16);
  background:rgba(5,7,11,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.histItem{
  position:relative;
  width:34px;
  height:30px;
  isolation:isolate;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid rgba(246,197,90,.16);
  background:linear-gradient(180deg,rgba(25,28,36,.94),rgba(8,10,15,.94));
  color:rgba(247,243,232,.72);
  font-size:11px;
  font-weight:1000;
}

.histItem::before{
  content:"";
  position:absolute;
  inset:3px;
  z-index:-1;
  border-radius:9px;
  background:linear-gradient(180deg,var(--hist, #d79b35),rgba(0,0,0,.2));
  opacity:.42;
}

.histItem.win{
  color:#d7ffb4;
  border-color:rgba(55,230,125,.42);
  box-shadow:0 0 14px rgba(55,230,125,.12);
}

.histItem.loss{
  color:#ffb5be;
  border-color:rgba(255,92,118,.34);
}

.wheelPanel.is-spinning .wheelPointer{
  animation:pointerTick .12s linear infinite;
}

.wheelPanel.is-win{
  box-shadow:0 26px 70px rgba(0,0,0,.56),0 0 42px rgba(73,230,126,.14),inset 0 0 0 1px rgba(74,230,126,.18);
}

.wheelPanel.is-loss{
  box-shadow:0 26px 70px rgba(0,0,0,.56),0 0 34px rgba(255,79,103,.12),inset 0 0 0 1px rgba(255,79,103,.14);
}

@keyframes pointerTick{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(3px)}
}

.nativeControls{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  pointer-events:none;
}

@media (max-width:760px){
  .app{width:min(100% - 14px,620px)}
  .wheelWrap{min-height:430px}
  .wheelPanel{min-height:430px}
  .wheelCanvasShell{
    width:min(310px,74%);
    top:45%;
  }
  .wheelSideStats{
    position:absolute;
    left:14px;
    right:14px;
    top:auto;
    bottom:76px;
    width:auto;
    translate:0 0;
    grid-template-columns:repeat(3,1fr);
  }
  .wheelStat{
    min-height:54px;
    padding:9px;
  }
  .wheelStat b{font-size:17px}
}