/* Royal, flashy, mobile-first, 200+ colors vibes */
:root{
  --gold:#f5d769;
  --bg1:#0b0f1a;
  --bg2:#1b1240;
  --bg3:#300d4f;
  --txt:#fff;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji", sans-serif;
  color:var(--txt);
  background:
    radial-gradient(1200px 600px at 10% -10%, #4200ff22, #0000),
    radial-gradient(900px 700px at 90% 0%, #ff006622, #0000),
    linear-gradient(135deg, var(--bg1), var(--bg2) 40%, var(--bg3));
  min-height:100%;
}

.header{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px clamp(12px, 4vw, 32px);
  border-bottom:1px solid #ffffff22;
  background:linear-gradient(180deg,#ffffff05,#0000);
  backdrop-filter: blur(6px);
  position:sticky; top:0; z-index:3;
}
.brand{display:flex; align-items:center; gap:12px}
.crown{font-size:28px; filter: drop-shadow(0 2px 8px #000)}
.title{
  font-family:Jockey One, Montserrat, sans-serif;
  font-size: clamp(22px, 4.5vw, 40px);
  letter-spacing:.5px;
  text-transform:uppercase;
  background: linear-gradient(90deg, #ffd25a, #fff6d3, #ffd25a);
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
  text-shadow: 0 2px 12px rgba(255, 210, 90, .25);
}

.hashbox{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; background:#ffffff10; padding:6px 10px; border-radius:12px; box-shadow:var(--shadow);
}
.hashbox code{font-size:12px; background:#00000044; padding:4px 6px; border-radius:8px}

.main{padding: clamp(12px, 2.5vw, 28px)}

.wheel-wrap{
  position:relative; margin:20px auto; width:min(100%, 920px);
  height:220px; border-radius:16px; padding:14px;
  background:
    conic-gradient(from 0deg, #ffbf0040, #fff0b340 25%, #ffbf0040 50%, #fff0b340 75%, #ffbf0040),
    linear-gradient(180deg,#ffffff14,#0000);
  box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 0 0 2px #ffffff1a, inset 0 0 6px #000;
  overflow:hidden;
}
.pointer{
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  font-size:22px; color:#fff; text-shadow:0 3px 8px #000;
  z-index:2;
}
.wheel{
  position:absolute; inset:14px; display:flex; gap:10px;
  align-items:center; will-change: transform;
}
.item{
  flex:0 0 120px; height: 160px;
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size: clamp(20px, 5vw, 34px);
  letter-spacing:.5px; text-shadow:0 3px 8px rgba(0,0,0,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 -6px 12px #00000055;
  border: 2px solid #ffffff20;
  transform: translateZ(0);
  user-select:none;
}

.controls{margin:18px auto; max-width:980px}
.controls .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:8px 0}
.controls .fine{opacity:.9; font-size:12px}
.hint{opacity:.7}
.btn{
  background:#ffffff14; color:#fff; border:1px solid #ffffff22;
  padding:10px 14px; border-radius:12px; cursor:pointer;
  font-weight:700; box-shadow:var(--shadow);
}
.btn:hover{background:#ffffff22}
.btn-primary{
  background:linear-gradient(180deg,#ffd25a,#caa33a); color:#3b2a00;
  border:1px solid #fff3; text-shadow:0 1px 0 #fff7; box-shadow: 0 8px 26px rgba(255,210,90,.45);
}
.btn-mini{padding:6px 8px; font-size:12px}

.legend{
  margin:26px auto; max-width:900px; background:#ffffff0e; padding:16px 18px; border-radius:14px; border:1px solid #ffffff22;
  box-shadow:var(--shadow);
}
.legend h2{margin:0 0 8px 0}
.legend ol{margin:0 0 0 18px}

.overlay{
  position:fixed; inset:0; display:grid; place-items:center; background:linear-gradient(180deg,#00000088,#000000cc);
  z-index:999; backdrop-filter: blur(3px);
}
.overlay.hidden{display:none}
.overlay-card{
  width:min(92vw, 560px); background:#110a26; border:1px solid #ffffff3a; border-radius:18px; padding:20px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6);
}
.overlay-title{font-size:28px; font-weight:900; margin-bottom:8px; color:#ffd25a}

.footer{padding:18px; text-align:center; opacity:.9}

.sparkle{filter: drop-shadow(0 0 8px #fff)}
/* Generate 200+ color tiles dynamically via JS; but add gradient variety for richness */