*{box-sizing:border-box;margin:0}
:root{--red:#c8102e;--green:#0b5d3b;--dgreen:#06321f;--gold:#f2c14e;--cream:#fff8e7}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:radial-gradient(circle at 20% 0%,#0f7a4d,var(--dgreen) 70%);color:var(--cream);min-height:100vh}
button{font:inherit;cursor:pointer;border:0;border-radius:14px;padding:14px 26px;font-weight:700;background:var(--gold);color:#3a2a00;box-shadow:0 4px 0 #b88c1f}
button:active{transform:translateY(3px);box-shadow:none}
button:disabled{opacity:.5}
input{font:inherit;padding:14px;border-radius:12px;border:2px solid var(--gold);width:100%;font-size:1.1rem}
[hidden]{display:none!important}
.card{background:rgba(0,0,0,.35);border:2px solid var(--gold);border-radius:20px;padding:28px;max-width:420px;margin:auto;display:flex;flex-direction:column;gap:14px;text-align:center}

/* opciones */
.opt{border-radius:14px;padding:18px 20px;font-weight:700;display:flex;align-items:center;gap:14px;color:#fff;font-size:1.15rem;text-align:left;width:100%;position:relative;transition:opacity .3s,transform .3s}
.opt .sh{font-size:1.5rem;width:1.8rem;text-align:center}
.c0{background:#e21b3c}.c1{background:#1368ce}.c2{background:#d89e00}.c3{background:#26890c}
.opt.dim{opacity:.3}
.opt.ok{outline:5px solid #fff;transform:scale(1.02)}
.opt .cnt{margin-left:auto;background:rgba(0,0,0,.3);border-radius:999px;padding:2px 12px;font-size:1rem}

/* HOST */
body.host{display:flex;flex-direction:column;height:100vh;overflow:hidden}
body.host header{display:flex;justify-content:space-between;align-items:center;padding:12px 28px;background:rgba(0,0,0,.35);border-bottom:3px solid var(--gold)}
body.host h1{font-size:1.6rem}
body.host main{flex:1;display:grid;grid-template-columns:1fr 340px;gap:20px;padding:20px;min-height:0}
#stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:0;overflow:auto}
.view{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
#qr{background:#fff;padding:14px;border-radius:16px}
#url{font-size:1.1rem;color:var(--gold);word-break:break-all}
#names{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-height:140px;overflow:auto;max-width:900px}
.chip{background:rgba(255,255,255,.15);padding:6px 14px;border-radius:999px;font-weight:600}
.bigbtn{font-size:1.4rem;padding:18px 40px}
#wheelwrap{position:relative;width:min(62vh,520px);aspect-ratio:1}
#wheel{width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 10px var(--gold),0 10px 40px rgba(0,0,0,.5)}
#pointer{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:44px solid #fff;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5));z-index:2}
#qtext{font-size:clamp(1.5rem,3.2vw,2.6rem);font-weight:800;max-width:1000px}
#opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:1000px}
#timer{width:100%;max-width:1000px;display:flex;align-items:center;gap:16px}
#tnum{font-size:3.2rem;font-weight:900;min-width:90px;color:var(--gold)}
#tnum.low{color:#ff5a5a}
#bar{flex:1;height:18px;background:rgba(0,0,0,.4);border-radius:99px;overflow:hidden}
#barin{height:100%;background:var(--gold);width:100%;transition:width .12s linear}
aside{background:rgba(0,0,0,.35);border:2px solid var(--gold);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;overflow:auto}
aside h2{text-align:center;color:var(--gold)}
.top{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;font-weight:800;font-size:1.2rem}
.top .m{font-size:2rem}.top .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top.p1{background:linear-gradient(90deg,#f2c14e,#b88c1f);color:#3a2a00}
.top.p2{background:linear-gradient(90deg,#d7dbe0,#8d949c);color:#222}
.top.p3{background:linear-gradient(90deg,#d99a63,#8a5528);color:#2a1500}
.rest{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:1rem}
.rest li{display:flex;justify-content:space-between;background:rgba(255,255,255,.08);padding:6px 12px;border-radius:8px}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:340px}
.pod{width:170px;border-radius:14px 14px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:10px;font-weight:800;text-align:center}
.pod .m{font-size:2.6rem}.pod .nm{font-size:1.3rem;padding:0 6px;word-break:break-word}.pod .sc{font-size:1.1rem}
.pod.p1{height:100%;background:linear-gradient(#f2c14e,#b88c1f);color:#3a2a00}
.pod.p2{height:75%;background:linear-gradient(#d7dbe0,#8d949c);color:#222}
.pod.p3{height:55%;background:linear-gradient(#d99a63,#8a5528);color:#2a1500}
#login{position:fixed;inset:0;background:var(--dgreen);display:flex;align-items:center;z-index:10;padding:20px}
.small{font-size:.9rem;opacity:.8}
@media(max-width:900px){body.host{height:auto;overflow:auto}body.host main{grid-template-columns:1fr}#opts{grid-template-columns:1fr}}

/* PLAYER */
body.player{display:flex;flex-direction:column;min-height:100vh}
.ptop{display:flex;justify-content:space-between;padding:12px 16px;background:rgba(0,0,0,.4);font-weight:700}
.pmain{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px;gap:16px;text-align:center}
.pmain h2{font-size:1.5rem}
.pmain .big{font-size:4rem}
.pq{font-size:1.35rem;font-weight:800}
.popts{display:grid;gap:12px}
.popts .opt{min-height:78px;font-size:1.2rem}
.popts .opt.sel{outline:5px solid #fff}
.ptimer{font-size:2.4rem;font-weight:900;color:var(--gold)}
.mini{background:rgba(0,0,0,.35);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:6px;text-align:left}

#v-spin h2{margin-bottom:34px;font-size:2rem}