*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  color:#fff;
  background:#070b14;
  min-height:100vh;
}
.bg{
  position:fixed;inset:0;
  background:
    radial-gradient(circle at top, rgba(54,119,255,.25), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(0,255,170,.14), transparent 25%),
    radial-gradient(circle at 50% 100%, rgba(255,196,0,.10), transparent 30%);
  z-index:-1;
}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 24px;
}
.logo{font-weight:800;letter-spacing:1px}
.wrap{max-width:1200px;margin:0 auto;padding:20px}
.hero h1{font-size:46px;margin:0}
.hero p{color:#aab3c5}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:20px}
.panel{
  background:rgba(12,18,32,.85);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:20px;
  backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.roulette-head{display:flex;justify-content:space-between;color:#b7c1d6}
.wheel-wrap{position:relative;width:300px;height:300px;margin:24px auto}
.pointer{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:22px solid #fff;z-index:3;
}
.wheel{
  width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative;
  border:10px solid rgba(255,255,255,.08);
  transition:transform 5s cubic-bezier(.1,.7,.1,1);
}
.slice{
  position:absolute;width:50%;height:50%;transform-origin:100% 100%;
  display:flex;align-items:flex-start;justify-content:flex-end;padding:18px;font-weight:700
}
.blue{background:linear-gradient(135deg,#246bff,#62a1ff);clip-path:polygon(100% 100%,0 0,100% 0)}
.green{background:linear-gradient(135deg,#10c070,#62f0aa);transform:rotate(120deg);clip-path:polygon(100% 100%,0 0,100% 0);color:#051d12}
.gold{background:linear-gradient(135deg,#c89100,#ffd86b);transform:rotate(240deg);clip-path:polygon(100% 100%,0 0,100% 0);color:#2c2100}
.result{text-align:center;font-size:22px;font-weight:700;margin:14px 0}
.bet-buttons{display:grid;gap:10px}
.bet,.btn,.ghost,.link{
  width:100%;border:none;border-radius:14px;padding:14px 16px;font-size:16px;cursor:pointer
}
.bet.blue{background:linear-gradient(135deg,#246bff,#62a1ff);color:#fff}
.bet.green{background:linear-gradient(135deg,#10c070,#62f0aa);color:#fff}
.bet.gold{background:linear-gradient(135deg,#c89100,#ffd86b);color:#231800}
.btn{background:#1a2440;color:#fff}
.btn.primary{background:linear-gradient(135deg,#4d7cff,#6f5bff)}
.ghost,.link{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.14)}
.row{display:flex;gap:10px}
.history{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tag{padding:8px 12px;border-radius:999px;background:#131d33}
.tag.blue{border:1px solid #2a6bff}
.tag.green{border:1px solid #18ce78}
.tag.gold{border:1px solid #d8a100}
.auth-popup,.profile-drawer{
  position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;justify-content:flex-end;z-index:10
}
.panel.drawer,.auth-popup .panel{
  width:min(420px,100%);height:100%;border-radius:0;padding:20px
}
.drawer-head{display:flex;justify-content:space-between;align-items:center}
input{
  width:100%;margin:8px 0;padding:14px 16px;border-radius:14px;border:none;background:#111a2e;color:#fff
}
.msg{margin-top:10px;color:#9ec1ff}
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .wheel-wrap{width:240px;height:240px}
}