:root{
  color-scheme:dark;
  --bg:#070b1f;
  --bg-2:#0b1230;
  --surface:rgba(18,26,58,.82);
  --surface-strong:#121b3c;
  --surface-soft:rgba(255,255,255,.055);
  --line:rgba(143,167,255,.20);
  --line-strong:rgba(123,97,255,.38);
  --text:#f8fbff;
  --muted:#b9c4e5;
  --blue:#4d8dff;
  --cyan:#22d3ee;
  --purple:#8b5cff;
  --pink:#ff4d8d;
  --red:#ff4f6d;
  --gold:#ffd84d;
  --green:#3ee6a8;
  --shadow:0 22px 70px rgba(0,0,0,.35);
  --glow:0 0 28px rgba(77,141,255,.22),0 0 55px rgba(139,92,255,.14);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 12% 14%,rgba(34,211,238,.14),transparent 26%),
    radial-gradient(circle at 86% 12%,rgba(255,77,141,.14),transparent 28%),
    radial-gradient(circle at 72% 72%,rgba(139,92,255,.13),transparent 34%),
    linear-gradient(180deg,#080d24 0%,#070b1f 45%,#09112a 100%);
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.35;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 85%);
}

body::after{
  content:"";
  position:fixed;
  width:520px;
  height:520px;
  right:-180px;
  top:15%;
  pointer-events:none;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,255,.17),rgba(255,77,141,.06) 45%,transparent 72%);
  filter:blur(12px);
}

a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button,a,input,textarea{touch-action:manipulation}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:4px;
}

.site-header{
  max-width:1200px;
  margin:18px auto 0;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  gap:20px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:24px;
  background:rgba(8,14,38,.68);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 45px rgba(0,0,0,.24);
  position:relative;
  z-index:10;
}

.site-header::after{
  content:"";
  position:absolute;
  inset:auto 18px -1px 18px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--purple),var(--pink),transparent);
  opacity:.7;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:1px;
}

.brand strong{
  font-size:20px;
  letter-spacing:-.5px;
  background:linear-gradient(90deg,#fff 0%,#bcd0ff 55%,#ff9cc2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand-symbol{
  width:50px;
  height:50px;
  background:linear-gradient(135deg,var(--pink),var(--purple) 58%,var(--blue));
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:30px;
  transform:rotate(-7deg);
  box-shadow:0 10px 30px rgba(255,77,141,.32),0 0 28px rgba(139,92,255,.28);
}

.brand img{
  max-width:66px;
  max-height:66px;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

.red{color:var(--pink)}

nav{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:700;
}

nav>a:not(.button),
nav .link{
  padding:10px 12px;
  border-radius:10px;
  transition:.2s ease;
}

nav>a:not(.button):hover,
nav .link:hover{
  color:white;
  background:rgba(255,255,255,.06);
}

.button{
  border:1px solid transparent;
  background:linear-gradient(135deg,var(--pink),#ff6b6b 52%,#ff8a4c);
  color:white;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 24px;
  border-radius:14px;
  font-weight:800;
  line-height:1.35;
  min-height:50px;
  box-shadow:0 12px 28px rgba(255,77,141,.24),0 0 0 1px rgba(255,255,255,.05) inset;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.button:hover:not(:disabled){
  transform:translateY(-2px) scale(1.01);
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 16px 36px rgba(255,77,141,.35),0 0 28px rgba(255,138,76,.16);
}

.button.small{padding:10px 17px;min-height:42px}

.button.secondary{
  background:linear-gradient(135deg,rgba(77,141,255,.22),rgba(139,92,255,.24));
  border-color:rgba(143,167,255,.30);
  box-shadow:none;
}

.button.secondary:hover:not(:disabled){
  background:linear-gradient(135deg,rgba(77,141,255,.34),rgba(139,92,255,.35));
  border-color:rgba(120,174,255,.48);
}

.button.full{width:100%}
.link{border:0;background:none;color:var(--muted);padding:5px}

.demo-banner{
  text-align:center;
  margin:12px auto 0;
  max-width:1200px;
  background:linear-gradient(90deg,rgba(77,141,255,.16),rgba(139,92,255,.17),rgba(255,77,141,.15));
  border:1px solid rgba(132,154,255,.22);
  padding:9px 16px;
  color:#d7e1ff;
  font-size:12px;
  font-weight:750;
  letter-spacing:.85px;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}

main{
  max-width:1200px;
  margin:auto;
  padding:0 32px;
}

.hero{
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:66px;
  align-items:center;
  padding:86px 0 88px;
  position:relative;
}

.hero::before{
  content:"♫";
  position:absolute;
  left:-38px;
  top:28px;
  font-size:110px;
  color:rgba(77,141,255,.07);
  transform:rotate(-12deg);
  pointer-events:none;
}

.hero::after{
  content:"♪";
  position:absolute;
  right:-10px;
  bottom:28px;
  font-size:86px;
  color:rgba(255,77,141,.06);
  transform:rotate(12deg);
  pointer-events:none;
}

.eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:2.3px;
  color:#9ec4ff;
  margin:0 0 20px;
  text-transform:uppercase;
}

.live-dot{
  display:inline-block;
  height:8px;
  width:8px;
  background:var(--green);
  border-radius:50%;
  margin-right:8px;
  box-shadow:0 0 15px rgba(62,230,168,.9);
  animation:pulseDot 1.8s ease-in-out infinite;
}

h1{
  font-size:clamp(44px,5vw,70px);
  line-height:1.02;
  letter-spacing:-3px;
  margin:0 0 24px;
  font-weight:900;
}

h1 span{
  background:linear-gradient(90deg,var(--blue),var(--cyan) 40%,var(--purple) 74%,var(--pink));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(77,141,255,.16));
}

h2{
  font-size:30px;
  line-height:1.22;
  letter-spacing:-.9px;
  margin:0 0 16px;
}

h3{
  font-size:20px;
  line-height:1.35;
  margin:0 0 12px;
}

p{margin:0 0 18px}

.intro{
  color:var(--muted);
  font-size:18px;
  max-width:500px;
  line-height:1.85;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:24px;
  margin:30px 0 35px;
}

.text-link{
  font-size:14px;
  color:#d7e2ff;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-color:rgba(34,211,238,.45);
}

.facts{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  color:var(--muted);
  font-size:13px;
}

.facts span{
  display:flex;
  flex-direction:column;
  min-width:118px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.facts b{
  font-size:25px;
  color:white;
  line-height:1.3;
}

.hero-player{
  background:
    linear-gradient(145deg,rgba(20,35,83,.96),rgba(12,19,49,.96));
  border:1px solid rgba(120,159,255,.26);
  border-radius:30px;
  padding:26px;
  box-shadow:
    22px 24px 0 -14px rgba(37,78,165,.24),
    -16px -14px 0 -10px rgba(255,77,141,.12),
    0 30px 80px rgba(0,0,0,.35),
    0 0 55px rgba(77,141,255,.11);
  position:relative;
  overflow:hidden;
}

.hero-player::before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  right:-100px;
  top:-95px;
  background:radial-gradient(circle,rgba(255,77,141,.22),transparent 65%);
}

.hero-player::after{
  content:"";
  position:absolute;
  left:-80px;
  bottom:-110px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.16),transparent 68%);
}

.player-top,
.hero-play,
.wave,
.player-caption{
  position:relative;
  z-index:1;
}

.player-top{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.player-top .eyebrow{font-size:10px;margin:0}

.tag{
  font-size:10px;
  color:#c6d6ff;
  letter-spacing:1.4px;
}

.hero-play{
  width:235px;
  aspect-ratio:1;
  border:1px solid rgba(108,168,255,.56);
  border-radius:50%;
  margin:28px auto 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:
    radial-gradient(circle at 35% 30%,rgba(77,141,255,.22),transparent 36%),
    linear-gradient(145deg,#172b59,#111d42);
  box-shadow:
    0 0 0 12px rgba(77,141,255,.07),
    0 0 0 23px rgba(139,92,255,.045),
    0 0 46px rgba(77,141,255,.24),
    inset 0 0 34px rgba(139,92,255,.10);
  transition:transform .25s ease,box-shadow .25s ease;
}

.hero-play:hover{
  transform:scale(1.025);
  box-shadow:
    0 0 0 12px rgba(77,141,255,.10),
    0 0 0 23px rgba(255,77,141,.05),
    0 0 58px rgba(139,92,255,.30),
    inset 0 0 36px rgba(34,211,238,.08);
}

.hero-play>span{
  font-size:70px;
  line-height:1;
  background:linear-gradient(180deg,#fff,var(--pink) 50%,#ff7a64);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 8px 16px rgba(255,77,141,.35));
}

.hero-play small{
  font-size:10px;
  letter-spacing:2px;
  color:#d7e5ff;
}

.wave{
  height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:16px 0;
}

.wave i{
  display:block;
  width:5px;
  height:22%;
  border-radius:6px;
  background:linear-gradient(180deg,var(--cyan),var(--blue));
  box-shadow:0 0 12px rgba(34,211,238,.22);
  transform-origin:center;
  animation:equalizer 1.1s ease-in-out infinite alternate;
}

.wave i:nth-child(2n){animation-delay:.12s}
.wave i:nth-child(3n){
  height:72%;
  background:linear-gradient(180deg,var(--pink),var(--purple));
  animation-delay:.24s;
}
.wave i:nth-child(4n){height:96%;animation-delay:.36s}
.wave i:nth-child(5n){height:45%;animation-delay:.48s}
.wave i:nth-child(7n){height:60%;animation-delay:.18s}

.player-caption{
  padding-top:17px;
  border-top:1px solid rgba(145,171,255,.19);
  display:flex;
  flex-direction:column;
  text-align:center;
}

.player-caption span{
  color:var(--muted);
  font-size:13px;
}

.player-caption b{font-size:18px}

section[id]{scroll-margin-top:25px}

.section-heading{margin-bottom:28px}
.section-heading .eyebrow{margin-bottom:12px}

.steps,
.prize-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.steps article{
  padding:26px 24px 24px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(77,141,255,.09),rgba(139,92,255,.04)),
    rgba(255,255,255,.018);
  box-shadow:0 18px 45px rgba(0,0,0,.16);
  transition:.2s ease;
}

.steps article:hover{
  transform:translateY(-4px);
  border-color:rgba(104,158,255,.28);
  box-shadow:0 22px 55px rgba(0,0,0,.24),0 0 30px rgba(77,141,255,.08);
}

.step-num{
  font-size:14px;
  letter-spacing:2px;
  color:var(--pink);
  font-weight:850;
  display:block;
  margin-bottom:20px;
}

.steps p,
.prize-card p{
  color:var(--muted);
  font-size:15px;
}

.prizes-section{padding:60px 0 70px}

.prize-card{
  background:
    linear-gradient(155deg,rgba(23,34,75,.94),rgba(13,19,47,.96));
  border:1px solid rgba(125,150,255,.18);
  border-radius:22px;
  padding:28px;
  box-shadow:0 18px 52px rgba(0,0,0,.20);
  position:relative;
  overflow:hidden;
  transition:.2s ease;
}

.prize-card::after{
  content:"";
  position:absolute;
  inset:auto -35px -55px auto;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.11),transparent 65%);
}

.prize-card:hover{
  transform:translateY(-4px);
  border-color:rgba(104,158,255,.32);
}

.prize-threshold{
  font-size:42px;
  font-weight:900;
  line-height:1;
  display:block;
  color:#8cc0ff;
  margin-bottom:24px;
  text-shadow:0 0 22px rgba(77,141,255,.22);
}

.prize-threshold small{
  font-size:11px;
  letter-spacing:1px;
  font-weight:650;
}

.jackpot{
  border-color:rgba(255,216,77,.30);
  background:
    radial-gradient(circle at 85% 12%,rgba(255,216,77,.14),transparent 26%),
    linear-gradient(135deg,#332447,#171d37);
}

.jackpot .prize-threshold,
.jackpot .prize-value{
  color:var(--gold);
  text-shadow:0 0 22px rgba(255,216,77,.20);
}

.prize-image{
  width:100%;
  max-width:220px;
  height:120px;
  object-fit:contain;
  border-radius:14px;
  margin:0 auto 15px;
}

.prize-value{font-size:24px}

.panel{
  background:
    linear-gradient(145deg,rgba(21,31,70,.91),rgba(13,20,49,.93));
  border:1px solid rgba(125,150,255,.18);
  border-radius:22px;
  padding:30px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}

.auth-layout{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  gap:90px;
  padding:76px 0 96px;
  min-height:70vh;
}

.auth-layout h1{font-size:50px}
.auth-layout .wave{justify-content:start;margin-top:40px}

.auth-panel{
  position:relative;
  overflow:hidden;
}

.auth-panel::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  right:-90px;
  top:-100px;
  background:radial-gradient(circle,rgba(255,77,141,.14),transparent 68%);
  pointer-events:none;
}

.auth-panel h2{font-size:28px}
.muted{color:var(--muted)}

label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  font-weight:700;
  margin:16px 0;
}

input,
textarea{
  background:rgba(7,13,35,.82);
  border:1px solid rgba(124,151,221,.28);
  color:white;
  border-radius:12px;
  padding:13px 14px;
  width:100%;
  min-width:0;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

input:hover,
textarea:hover{border-color:rgba(131,169,255,.42)}

input:focus,
textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(77,141,255,.10),0 0 25px rgba(77,141,255,.08);
  background:#0a1430;
  outline:none;
}

textarea{
  min-height:110px;
  resize:vertical;
}

input[type=file]{font-size:13px}

input::file-selector-button{
  border:0;
  background:linear-gradient(135deg,#29467c,#3c57a3);
  color:white;
  padding:8px 10px;
  border-radius:7px;
  margin-right:8px;
}

.hint{font-size:13px;color:var(--muted)}

.form-message{
  color:#ffb5c9;
  margin-top:18px;
  font-size:14px;
  min-height:22px;
}

.auth-switch{
  text-align:center;
  margin:24px 0 0;
  color:var(--muted);
  font-size:14px;
}

.auth-switch a{color:#a7c7ff}

.game-layout{
  padding:54px 0 88px;
  max-width:960px;
  margin:auto;
  min-height:75vh;
}

.game-heading{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:28px;
}

.game-heading h1{
  font-size:38px;
  letter-spacing:-1.3px;
  margin:0;
}

.game-heading .eyebrow{margin-bottom:12px}

.balance-chip{
  display:flex;
  flex-direction:column;
  background:linear-gradient(135deg,rgba(77,141,255,.18),rgba(139,92,255,.20));
  border:1px solid rgba(125,154,255,.26);
  padding:11px 18px;
  border-radius:14px;
  font-size:12px;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(0,0,0,.15);
}

.balance-chip b{
  font-size:19px;
  color:#fff;
}

.game-panel{
  text-align:center;
  padding:36px;
  position:relative;
  overflow:hidden;
}

.game-panel::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  right:-130px;
  bottom:-140px;
  background:radial-gradient(circle,rgba(34,211,238,.12),transparent 68%);
  pointer-events:none;
}

.music-mark{
  width:86px;
  height:86px;
  display:grid;
  place-items:center;
  font-size:48px;
  color:white;
  border-radius:26px;
  background:linear-gradient(135deg,var(--pink),var(--purple),var(--blue));
  margin:5px auto 24px;
  box-shadow:0 18px 35px rgba(139,92,255,.28),0 0 35px rgba(255,77,141,.20);
  transform:rotate(-4deg);
}

.game-panel>.button{margin-top:20px}

.round-top{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  letter-spacing:1px;
  color:var(--muted);
  gap:15px;
  position:relative;
  z-index:1;
}

.round-top b{
  color:white;
  font-size:20px;
}

progress{
  width:100%;
  height:7px;
  border:0;
  background:#18264e;
  display:block;
  margin-top:16px;
  border-radius:8px;
  overflow:hidden;
}

progress::-webkit-progress-bar{
  background:#18264e;
  border-radius:8px;
}

progress::-webkit-progress-value{
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--purple),var(--pink));
  border-radius:8px;
  box-shadow:0 0 16px rgba(139,92,255,.42);
}

.round-player{
  display:flex;
  align-items:center;
  gap:25px;
  text-align:left;
  padding:40px 0 34px;
  position:relative;
  z-index:1;
}

.round-player .eyebrow{
  margin-bottom:10px;
  font-size:11px;
}

.round-player h2{
  font-size:27px;
  margin-bottom:8px;
}

.round-player p{margin:0}

.play-orb{
  flex:0 0 94px;
  height:94px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#172f61,#111f47);
  border:1px solid rgba(87,148,255,.46);
  border-radius:50%;
  font-size:42px;
  box-shadow:
    0 0 0 9px rgba(77,141,255,.06),
    0 0 32px rgba(77,141,255,.18);
}

.play-orb button{
  width:100%;
  height:100%;
  border-radius:50%;
  border:0;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:white;
  font-size:30px;
  box-shadow:inset 0 0 22px rgba(255,255,255,.10),0 0 26px rgba(255,77,141,.22);
}

.timer{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  text-align:center;
  min-width:82px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
}

.timer strong{
  font-size:46px;
  background:linear-gradient(180deg,#fff,#8fc2ff 58%,#8b5cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.2;
}

.timer span{
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted);
}

.options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  position:relative;
  z-index:1;
}

.option{
  display:flex;
  align-items:center;
  gap:15px;
  min-height:74px;
  text-align:left;
  background:
    linear-gradient(135deg,rgba(25,42,83,.94),rgba(17,28,62,.94));
  border:1px solid rgba(116,145,211,.25);
  color:white;
  padding:14px;
  border-radius:14px;
  font-weight:700;
  transition:.2s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.option span{
  background:linear-gradient(135deg,rgba(77,141,255,.22),rgba(139,92,255,.22));
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius:10px;
  color:#c9dcff;
  border:1px solid rgba(140,170,255,.18);
}

.option:hover:not(:disabled){
  border-color:rgba(98,183,255,.62);
  background:linear-gradient(135deg,rgba(35,62,120,.98),rgba(35,35,90,.96));
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.18),0 0 24px rgba(77,141,255,.10);
}

.option:disabled{filter:saturate(.7)}

.repeat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:24px;
  gap:20px;
  position:relative;
  z-index:1;
}

.repeat-row>span{
  font-size:12px;
  color:var(--muted);
  text-align:right;
}

.listening-note{
  padding:25px;
  background:linear-gradient(135deg,rgba(34,211,238,.07),rgba(139,92,255,.07));
  border:1px solid rgba(107,151,255,.16);
  border-radius:14px;
  color:var(--muted);
}

.game-foot{
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:var(--muted);
  font-size:12px;
}

.result-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:30px 0;
}

.result-grid div{
  padding:18px;
  background:linear-gradient(145deg,rgba(11,22,48,.96),rgba(17,26,61,.96));
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  display:flex;
  flex-direction:column;
}

.result-grid div:nth-child(1){box-shadow:inset 0 3px 0 rgba(62,230,168,.55)}
.result-grid div:nth-child(2){box-shadow:inset 0 3px 0 rgba(255,77,141,.55)}
.result-grid div:nth-child(3){box-shadow:inset 0 3px 0 rgba(255,216,77,.55)}

.result-grid b{font-size:34px}
.result-grid span{font-size:13px;color:var(--muted)}

.award{
  border:1px solid rgba(255,216,77,.28);
  background:
    radial-gradient(circle at 90% 20%,rgba(255,216,77,.12),transparent 28%),
    linear-gradient(135deg,#302a2f,#171d37);
  padding:26px;
  border-radius:17px;
  box-shadow:0 16px 38px rgba(0,0,0,.20);
}

.award>span{
  font-size:11px;
  letter-spacing:2px;
  color:var(--gold);
}

.award h3{
  margin-top:10px;
  font-size:26px;
}

.award p{margin:0}
.award strong{font-size:32px;color:var(--gold)}

.wallet-layout{
  max-width:850px;
  padding:60px 0 86px;
  margin:auto;
}

.wallet-layout h1{font-size:50px}

.wallet-card{margin:30px 0}

.wallet-card>strong{
  display:block;
  font-size:50px;
  margin:10px 0;
  background:linear-gradient(90deg,#fff,#8ec3ff,#c18bff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.notice{
  background:linear-gradient(135deg,rgba(26,49,85,.92),rgba(22,36,74,.92));
  border:1px solid rgba(79,134,194,.40);
  border-radius:14px;
  padding:18px;
  color:#d9e9ff;
  font-size:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}

.notice p{margin:8px 0 0}

.notice.error{
  background:linear-gradient(135deg,rgba(102,35,56,.72),rgba(69,27,47,.72));
  border-color:rgba(255,94,127,.36);
  color:#ffd1dc;
}

.table-wrap{
  overflow:auto;
  border:1px solid rgba(129,153,220,.18);
  border-radius:15px;
  margin:20px 0 32px;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
}

table{
  border-collapse:collapse;
  width:100%;
  font-size:14px;
  text-align:left;
}

th,td{
  padding:15px 18px;
  border-bottom:1px solid rgba(122,148,215,.14);
}

th{
  background:linear-gradient(90deg,#18294f,#1d2c59);
  color:#c4d5ff;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

td{background:rgba(13,24,53,.88)}
tr:nth-child(even) td{background:rgba(16,28,61,.88)}
tr:hover td{background:rgba(26,43,88,.92)}
tr:last-child td{border-bottom:0}

.admin-layout{
  padding:54px 0 88px;
}

.admin-layout h1{
  font-size:46px;
  margin-bottom:12px;
}

.admin-layout>h2{margin-top:42px}

.admin-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:30px 0;
}

.admin-stats .panel{
  display:flex;
  flex-direction:column;
  min-height:145px;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.admin-stats .panel::after{
  position:absolute;
  right:20px;
  top:14px;
  font-size:34px;
  opacity:.18;
}

.admin-stats .panel:nth-child(1)::after{content:"♫"}
.admin-stats .panel:nth-child(2)::after{content:"👥"}
.admin-stats .panel:nth-child(3)::after{content:"▶"}

.admin-stats .panel:nth-child(1){
  background:linear-gradient(135deg,rgba(77,141,255,.15),rgba(21,31,70,.92));
}
.admin-stats .panel:nth-child(2){
  background:linear-gradient(135deg,rgba(139,92,255,.16),rgba(21,31,70,.92));
}
.admin-stats .panel:nth-child(3){
  background:linear-gradient(135deg,rgba(255,77,141,.14),rgba(21,31,70,.92));
}

.admin-stats b{
  font-size:40px;
  background:linear-gradient(180deg,#fff,#8cc0ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.admin-stats span{
  font-size:14px;
  color:var(--muted);
}

.admin-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:22px;
  align-items:start;
}

.admin-layout .panel{padding:26px}

.form-cols{
  display:flex;
  align-items:end;
  gap:12px;
  flex-wrap:wrap;
}

.form-cols>label{
  flex:1;
  min-width:100px;
}

.form-cols>.button{margin-bottom:16px}
.demo-credit{margin-top:30px}

.song-edit{
  margin-top:12px;
  max-width:360px;
}

.song-edit summary{
  cursor:pointer;
  color:#b5ccff;
  font-size:13px;
}

.song-edit[open]{
  min-width:250px;
  padding-top:6px;
}

footer{
  max-width:1200px;
  margin:0 auto 22px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:24px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:12px;
  color:var(--muted);
  background:rgba(8,14,38,.48);
  backdrop-filter:blur(12px);
}

.footer-brand{
  font-weight:850;
  color:white;
  font-size:14px;
}

@keyframes equalizer{
  0%{transform:scaleY(.55);opacity:.72}
  100%{transform:scaleY(1.18);opacity:1}
}

@keyframes pulseDot{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.45);opacity:.65}
}

@media(max-width:900px){
  .hero{gap:34px}
  .hero-actions{align-items:start;flex-direction:column;gap:16px}
  .hero-player{padding:22px}
  .hero-play{width:210px}
  .auth-layout{gap:35px}
  .auth-layout h1{font-size:42px}
  .admin-grid{grid-template-columns:1fr}
  .prize-grid{gap:12px}
  .prize-card{padding:22px}
  .round-player{gap:16px}
  .play-orb{flex-basis:78px;height:78px}
  .round-player h2{font-size:22px}
}

@media(max-width:650px){
  .site-header{
    padding:15px 16px;
    min-height:80px;
    margin:10px 12px 0;
    border-radius:18px;
    flex-wrap:wrap;
  }

  .brand strong{font-size:17px}
  .brand-symbol{width:40px;height:40px;font-size:27px}
  .brand{font-size:12px}

  nav{
    gap:7px;
    font-size:12px;
    width:100%;
    justify-content:flex-end;
  }

  nav>a:not(.button),nav .link{padding:8px 9px}
  nav .button.small{padding:9px 11px;font-size:12px}

  .demo-banner{
    margin:10px 12px 0;
    border-radius:12px;
  }

  main{padding:0 20px}

  .hero{
    grid-template-columns:1fr;
    padding:48px 0 56px;
    gap:44px;
  }

  .hero::before,.hero::after{display:none}

  h1{
    font-size:48px;
    letter-spacing:-2.3px;
  }

  .hero-copy .eyebrow{font-size:10px}
  .intro{font-size:16px}

  .hero-actions{
    flex-direction:row;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
    margin:25px 0;
  }

  .hero-actions .button{font-size:14px}

  .facts{
    gap:10px;
  }

  .facts span{
    min-width:calc(50% - 5px);
  }

  .hero-player{
    max-width:420px;
    width:100%;
    margin:auto;
  }

  .hero-play{width:215px}

  .steps,.prize-grid{grid-template-columns:1fr}
  .steps{gap:10px}
  .steps article{padding:21px}
  .step-num{margin-bottom:10px}
  .section-heading h2{font-size:27px}
  .prizes-section{padding:42px 0}
  .prize-card{padding:24px}
  .prize-threshold{margin-bottom:15px}

  .auth-layout{
    grid-template-columns:1fr;
    padding:40px 0 55px;
    gap:24px;
  }

  .auth-layout>div:first-child h1{
    font-size:36px;
    letter-spacing:-1px;
  }

  .auth-layout>div:first-child .wave,
  .auth-layout>div:first-child .intro{
    display:none;
  }

  .panel{padding:23px}

  .game-layout{padding:34px 0 50px}

  .game-heading{
    align-items:start;
    gap:10px;
  }

  .game-heading h1{font-size:28px}
  .game-heading .eyebrow{font-size:10px;letter-spacing:1px}

  .balance-chip{padding:8px 12px}
  .balance-chip b{font-size:15px}

  .game-panel{padding:22px 16px}

  .round-top{
    font-size:10px;
    letter-spacing:.5px;
  }

  .round-player{
    flex-wrap:wrap;
    gap:15px;
    padding:26px 0;
  }

  .play-orb{
    flex-basis:68px;
    height:68px;
  }

  .round-player>div:nth-child(2){flex:1}
  .round-player h2{font-size:20px}
  .round-player .eyebrow{font-size:9px;letter-spacing:.8px}
  .round-player .muted{font-size:13px}

  .timer{
    width:100%;
    margin:0;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:10px;
  }

  .timer strong{font-size:34px}

  .options{
    grid-template-columns:1fr;
    gap:10px;
  }

  .option{min-height:62px}

  .repeat-row{
    flex-direction:column;
    gap:10px;
  }

  .repeat-row .button{
    width:100%;
    font-size:14px;
  }

  .repeat-row>span{text-align:center}

  .game-foot{
    flex-direction:column;
    gap:5px;
  }

  .result-grid{gap:6px}

  .result-grid div{
    padding:12px 6px;
  }

  .result-grid span{font-size:11px}
  .result-grid b{font-size:28px}
  .game-panel h2{font-size:25px}

  .wallet-layout{padding:38px 0 55px}
  .wallet-layout h1{font-size:38px;letter-spacing:-1px}

  .admin-layout h1{font-size:36px;letter-spacing:-1px}

  .admin-stats{gap:8px}

  .admin-stats .panel{
    padding:13px;
    min-height:115px;
  }

  .admin-stats b{font-size:30px}
  .admin-stats span{font-size:11px}
  .admin-layout .prize-grid{gap:18px}

  footer{
    margin:0 12px 12px;
    padding:22px 18px;
    flex-direction:column;
    align-items:start;
    gap:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}