*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html,body{min-height:100%;background:radial-gradient(circle at top,#273f8f,#061021 58%,#02040a);color:#fff}
.shell{min-height:100vh;padding-bottom:28px}
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;background:rgba(0,0,0,.45);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.1)}
.topbar h1{font-size:clamp(1.4rem,4vw,2.7rem);letter-spacing:.06em;text-transform:uppercase}
.topbar p{opacity:.72;margin-top:4px}
.top-btn,.spin-btn,.actions button{border:none;border-radius:999px;padding:12px 18px;font-weight:1000;cursor:pointer;color:#fff;background:rgba(255,255,255,.13);text-decoration:none}
.hud{width:min(980px,96vw);margin:14px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hud div{padding:12px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.hud span{display:block;opacity:.7;font-size:.78rem;text-transform:uppercase;font-weight:1000}
.hud strong{display:block;margin-top:5px;font-size:1.3rem}
.game-card{width:min(980px,96vw);margin:0 auto;padding:18px;border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 70px rgba(0,0,0,.45)}
.wheel-wrap{display:flex;justify-content:center;margin:10px 0 18px}
.wheel{position:relative;width:min(76vw,420px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:10px solid rgba(255,255,255,.16);box-shadow:0 0 40px rgba(126,255,200,.22),0 24px 60px rgba(0,0,0,.45);transition:transform 2.2s cubic-bezier(.15,.82,.25,1)}
.slice{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:1000;text-transform:uppercase;font-size:clamp(.7rem,2.4vw,1rem);color:#07111f;clip-path:polygon(50% 50%,50% 0,100% 0,100% 50%)}
.s1{background:#ffcc4d;transform:rotate(0deg)}
.s2{background:#7effc8;transform:rotate(60deg)}
.s3{background:#ff8e8e;transform:rotate(120deg)}
.s4{background:#91b7ff;transform:rotate(180deg)}
.s5{background:#d9a7ff;transform:rotate(240deg)}
.s6{background:#ffb86b;transform:rotate(300deg)}
.pointer{position:absolute;top:3px;left:50%;transform:translateX(-50%);z-index:4;color:#fff;font-size:2rem;text-shadow:0 4px 12px #000}
.wedge-bank{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px}
.wedge{min-height:44px;border-radius:14px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-weight:1000;border:1px solid rgba(255,255,255,.14);font-size:.75rem;text-align:center}
.wedge.earned{box-shadow:0 0 18px rgba(126,255,200,.55);transform:scale(1.04)}
.spin-btn{width:100%;min-height:58px;background:linear-gradient(180deg,#7effc8,#1fb487);color:#031b14;font-size:1.05rem}
.question-panel{margin-top:16px;padding:16px;border-radius:22px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1)}
.category-pill{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(126,255,200,.14);font-weight:1000;margin-bottom:12px}
.question-panel h2{font-size:clamp(1.15rem,4vw,2rem);line-height:1.25;margin-bottom:14px}
input{width:100%;min-height:58px;border:none;border-radius:18px;padding:14px 16px;font-size:1.05rem;font-weight:900;margin-bottom:12px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.actions button:first-child{background:linear-gradient(180deg,#7effc8,#1fb487);color:#031b14}
.result{margin-top:12px;padding:14px;border-radius:18px;background:rgba(255,255,255,.08);line-height:1.55;font-weight:800}
.hidden{display:none}
@media(max-width:700px){
.topbar{flex-direction:column;align-items:stretch;padding:10px}
.hud{grid-template-columns:repeat(3,1fr);width:98vw;gap:5px}
.hud div{padding:8px;border-radius:12px}
.hud span{font-size:.52rem}
.hud strong{font-size:.9rem}
.game-card{width:98vw;padding:12px;border-radius:20px}
.wheel{width:min(86vw,360px);border-width:7px}
.wedge-bank{gap:4px}
.wedge{min-height:36px;font-size:.52rem;border-radius:9px}
.actions{grid-template-columns:1fr}
}

.slice{
font-size:0;
}

.legend{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:8px;
margin:4px 0 14px;
}

.legend-item{
min-height:42px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
padding:8px;
font-weight:1000;
font-size:.72rem;
text-align:center;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.legend-item span{
width:14px;
height:14px;
border-radius:50%;
display:inline-block;
flex:0 0 auto;
}

.yellow span,.wedge.yellow,.category-pill.yellow{background:#ffcc4d;color:#171000}
.green span,.wedge.green,.category-pill.green{background:#7effc8;color:#031b14}
.red span,.wedge.red,.category-pill.red{background:#ff8e8e;color:#220606}
.blue span,.wedge.blue,.category-pill.blue{background:#91b7ff;color:#061326}
.purple span,.wedge.purple,.category-pill.purple{background:#d9a7ff;color:#16051f}
.orange span,.wedge.orange,.category-pill.orange{background:#ffb86b;color:#1f1000}

.legend-item.yellow span{background:#ffcc4d}
.legend-item.green span{background:#7effc8}
.legend-item.red span{background:#ff8e8e}
.legend-item.blue span{background:#91b7ff}
.legend-item.purple span{background:#d9a7ff}
.legend-item.orange span{background:#ffb86b}

.wedge{
color:#07111f;
opacity:.42;
}

.wedge.earned{
opacity:1;
box-shadow:0 0 20px rgba(255,255,255,.42);
}

.category-pill{
border:none;
}

@media(max-width:700px){
.legend{
grid-template-columns:repeat(3,1fr);
gap:6px;
}

.legend-item{
min-height:34px;
font-size:.58rem;
border-radius:10px;
padding:6px;
}

.legend-item span{
width:10px;
height:10px;
}

.wedge{
font-size:.48rem;
}
}

.wheel-stage{
position:relative;
display:flex;
justify-content:center;
align-items:center;
width:min(76vw,420px);
aspect-ratio:1;
}

.wheel-stage .wheel{
width:100%;
height:100%;
}

.pointer{
position:absolute;
top:-14px;
left:50%;
transform:translateX(-50%);
z-index:20;
color:#ffffff;
font-size:2.4rem;
line-height:1;
text-shadow:0 4px 14px rgba(0,0,0,.9);
filter:drop-shadow(0 0 10px rgba(255,255,255,.65));
pointer-events:none;
}

.s1{background:#7f1d1d!important}
.s2{background:#1e3a8a!important}
.s3{background:#581c87!important}
.s4{background:#166534!important}
.s5{background:#9a3412!important}
.s6{background:#9d174d!important}

.dark-red span,.wedge.dark-red,.category-pill.dark-red{background:#7f1d1d!important;color:#fff!important}
.dark-blue span,.wedge.dark-blue,.category-pill.dark-blue{background:#1e3a8a!important;color:#fff!important}
.dark-purple span,.wedge.dark-purple,.category-pill.dark-purple{background:#581c87!important;color:#fff!important}
.dark-green span,.wedge.dark-green,.category-pill.dark-green{background:#166534!important;color:#fff!important}
.dark-orange span,.wedge.dark-orange,.category-pill.dark-orange{background:#9a3412!important;color:#fff!important}
.dark-pink span,.wedge.dark-pink,.category-pill.dark-pink{background:#9d174d!important;color:#fff!important}

.legend-item.dark-red span{background:#7f1d1d!important}
.legend-item.dark-blue span{background:#1e3a8a!important}
.legend-item.dark-purple span{background:#581c87!important}
.legend-item.dark-green span{background:#166534!important}
.legend-item.dark-orange span{background:#9a3412!important}
.legend-item.dark-pink span{background:#9d174d!important}

.legend{
grid-template-columns:repeat(6,minmax(0,1fr));
}

@media(max-width:700px){
.wheel-stage{
width:min(86vw,360px);
}

.pointer{
top:-11px;
font-size:2rem;
}

.legend{
grid-template-columns:repeat(6,minmax(0,1fr));
gap:4px;
}

.legend-item{
font-size:.44rem;
padding:5px 2px;
gap:3px;
}

.legend-item span{
width:8px;
height:8px;
}
}