@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;800;900&family=Inter:wght@400;500;700;800&display=swap');*{box-sizing:border-box}body{margin:0;color:#f8f3ed;background:radial-gradient(ellipse at 50% 0%,#58080f 0%,#17050a 38%,#08080c 80%);font-family:Inter,Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}a{color:#ffce50}.top{max-width:1360px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;gap:20px}.brand{color:#ffce43;font-size:27px;font-weight:900;white-space:nowrap}.brand strong{color:white;font-family:'Barlow Condensed',sans-serif;font-size:32px;font-style:italic}.brand small{display:block;font-size:10px;letter-spacing:5px;text-align:right;color:#e4a52a}.top nav{display:flex;gap:8px;flex-wrap:wrap}.top nav button,.switch button{border:1px solid #6e2830;color:#e9c8c8;background:#230e15;border-radius:9px;padding:11px 17px;font-weight:700}.top nav button.active,.switch button.selected{color:#1b0c06;background:linear-gradient(#ffe26d,#ef9e16);border-color:#f9c53a}main{max-width:1360px;margin:auto;padding:0 24px 48px}.hero{text-align:center;padding:52px 18px 28px;position:relative}.eyebrow{display:inline-block;border:1px solid #e92b3d;background:#490a17;border-radius:50px;padding:9px 19px;color:#ffcc64;font-weight:800;font-size:13px;letter-spacing:2px}.hero h1{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(64px,10vw,134px);letter-spacing:-2px;line-height:.92;margin:18px 0 15px;text-shadow:0 7px 0 #310009,0 0 60px #e60b1b}.hero em{color:#ffcb35;font-style:normal}.hero p{color:#d6b6bd;font-size:17px}.notice{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:29px auto}.notice b{border:1px solid #845324;color:#ffe49c;background:#2b170f;border-radius:7px;padding:11px 14px;font-size:11px;letter-spacing:.5px}.tab{display:none}.tab.active{display:block}.columns{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,1fr);gap:22px}.panel{border:1px solid #7b2930;background:linear-gradient(145deg,#290e17,#100d14 65%);border-radius:19px;padding:25px;box-shadow:0 0 35px #0008, inset 0 1px #b53e3e55}.panel h2{font:900 32px 'Barlow Condensed',sans-serif;color:#ffd04a;letter-spacing:1px;margin:0 0 10px}.panel h3{font:800 22px 'Barlow Condensed',sans-serif;color:#ffdc74;margin:25px 0 12px}.muted{color:#c3a5a9;line-height:1.6}.tiny{font-size:12px}.switch{display:flex;justify-content:center;gap:10px;margin:24px 0}.wheelwrap{position:relative;width:min(100%,490px);aspect-ratio:1;margin:12px auto 24px;filter:drop-shadow(0 0 22px #d21c34a0)}canvas{display:block;width:100%;height:100%;border-radius:50%;border:9px solid #e9b643;background:#1a0710}.pointer{position:absolute;z-index:4;top:-18px;left:50%;transform:translateX(-50%);border-left:19px solid transparent;border-right:19px solid transparent;border-top:37px solid #ffdd3c;filter:drop-shadow(0 2px 4px #000)}.hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;border:5px solid #fff3b7;background:radial-gradient(#eab53d,#a51a21);display:grid;place-items:center;font:900 17px 'Barlow Condensed',sans-serif;box-shadow:0 0 20px #000;color:white}.primary,.subscribe{display:block;width:100%;text-align:center;border:0;border-radius:12px;padding:16px;background:linear-gradient(#ffe46a,#e79a16);color:#210c08;font:900 22px 'Barlow Condensed',sans-serif;letter-spacing:1px;box-shadow:0 6px 0 #855017;text-decoration:none}.primary:disabled{opacity:.6;cursor:wait}.result{text-align:center;margin:23px auto 4px;color:#ffdb74;font:900 28px 'Barlow Condensed',sans-serif;min-height:34px}.info{padding:20px;border:1px solid #925026;background:#311810;border-radius:12px;line-height:1.5}.info strong{color:#ffe27c}.champ-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.champ{min-width:0;text-align:center;font-size:11px;font-weight:700;color:#e7c5c5}.champ img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:2px solid #a12a37;margin-bottom:5px}.subscribe{background:linear-gradient(#f9404c,#bd061a);color:white;box-shadow:0 6px 0 #6a0714;margin-top:32px}label{display:block;margin:17px 0 8px;color:#f6d7d6;font-size:14px;font-weight:700}input:not([type=checkbox]),select{width:100%;padding:14px;border:1px solid #8c3944;border-radius:9px;background:#170e14;color:white;margin-top:8px}input:focus,select:focus{outline:2px solid #ffca4c}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.check{display:flex;gap:10px;align-items:center;font-size:13px;margin:20px 0}.check input{accent-color:#ffc632}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.stats div{text-align:center;border:1px solid #73333b;padding:24px;border-radius:12px;background:#260c13}.stats strong{display:block;color:#ffce40;font:900 54px 'Barlow Condensed',sans-serif}.stats span{color:#cda9a9;font-size:12px}.winners{line-height:1.9}.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.rules>div{border:1px solid #6b2934;background:#190f15;border-radius:12px;padding:8px 20px}.rules h3{margin:13px 0 4px}.rules p{line-height:1.6;color:#d0b4b5;font-size:14px}.actions{display:flex;gap:12px;flex-wrap:wrap}.secondary,.danger{background:#4e1c25;border:1px solid #b66a74;border-radius:9px;padding:13px;color:white;font-weight:800}.danger{background:#970d20;margin-top:10px}.separator{border-top:1px solid #74333a;margin:24px 0}footer{text-align:center;border-top:1px solid #60202c;padding:28px;color:#b28f97;font-size:12px}#predictMsg,#adminMsg{color:#ffdc77;line-height:1.5}@media(max-width:820px){.top{flex-direction:column}.columns{grid-template-columns:1fr}.hero{padding-top:22px}.rules{grid-template-columns:1fr}.panel{padding:18px}.top nav{justify-content:center}.top nav button{padding:9px}.hero h1{font-size:70px}}@media(max-width:390px){.champ-grid{grid-template-columns:repeat(4,1fr)}.hero h1{font-size:56px}}


/* V2 - ruletas visibles completas a ancho de navegador */
body{background:radial-gradient(ellipse at 50% 0%,#29101a 0%,#0a0d16 45%,#07080c 100%)}
.top{padding:8px 2vw;min-height:84px;background:rgba(5,7,13,.96);border-bottom:1px solid #a82933}
.brand{display:flex;align-items:center;gap:14px}.brand img{width:74px;height:74px;object-fit:cover;border-radius:50%;border:2px solid #ed2a40}.brand strong{font-size:1.1rem;color:#e7b85b}
main{max-width:none;width:100%;padding:14px 2vw}
.showhead{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 12px;background:#090b12;border:1px solid #8b2634;border-radius:12px;padding:10px 20px}
.showhead h2{font-size:clamp(1.4rem,2.4vw,2.5rem);margin:0;color:#fff}.showhead span{color:#e9b14c;font-weight:800}.showhead a{background:#b81024;color:#fff;text-decoration:none;padding:10px 16px;border-radius:7px;font-weight:800}.showhead small{font-size:.7em}
.wheel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;align-items:stretch}
.wheel-panel{min-width:0;padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;background:linear-gradient(165deg,#15101a,#090b12 75%);border:1px solid #ad3a31;border-radius:12px;box-shadow:inset 0 0 25px #0006}
.wheel-panel h2{align-self:stretch;font-size:clamp(.85rem,1.18vw,1.35rem);margin:0 0 4px}.wheel-panel .muted{align-self:stretch;margin:0 0 10px;font-size:.8rem}
.wheel-panel .wheelwrap{width:100%;max-width: min(100%, 390px);aspect-ratio:1;position:relative;margin:auto 0 12px}
.wheel-panel canvas{display:block;width:100%;height:100%;aspect-ratio:1}
.wheel-panel .pointer{position:absolute;z-index:4;top:-5px;left:50%;transform:translateX(-50%);border-left:16px solid transparent;border-right:16px solid transparent;border-top:29px solid #ffcf54;filter:drop-shadow(0 2px 3px #000)}
.wheel-panel .hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;width:20%;height:20%;display:grid;place-items:center;background:#080d18;color:#ffcc58;border:4px solid #d4a23b;font-weight:900;font-size:clamp(1rem,2vw,2rem);pointer-events:none}
.wheel-panel .primary{width:100%;margin:0;background:linear-gradient(#f3222b,#ae0b18);color:#fff}
.wheel-panel .result{min-height:2.2rem;text-align:center;font-size:1rem;padding:8px}
.show-bottom{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:12px;margin-top:12px}.show-bottom .panel{min-width:0}.show-bottom .panel h2{font-size:1.1rem}
@media(min-width:1450px){.wheel-panel .wheelwrap{max-width: min(100%, 440px)}}
@media(max-width:1050px){.wheel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.show-bottom{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.wheel-grid,.show-bottom{grid-template-columns:1fr}.showhead{flex-wrap:wrap}.wheel-panel .wheelwrap{max-width:440px}.brand strong{font-size:.8rem}}


/* V3: composición aprobada, misma paleta oscura de V2 */
.stage-grid{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(350px,1.28fr) minmax(270px,1.12fr);gap:12px;align-items:stretch}
.stage-grid>.panel{min-width:0;min-height:0}
.stage-grid .wheel-panel{display:flex;flex-direction:column}
.stage-grid .wheel-panel h2{font-size:clamp(1.1rem,1.7vw,1.75rem)}
.stage-grid .wheel-panel .wheelwrap{max-width:100%;width:100%;margin:10px auto 16px}
.stage-grid .role-panel .wheelwrap{max-width:390px}
.stage-grid .champion-panel .wheelwrap{max-width:510px}
.stage-grid .wheel-panel .primary{max-width:100%}
.champion-top{width:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.group-tabs{display:flex;gap:6px;flex-wrap:wrap}
.group-tabs button{background:#111824;border:1px solid #334051;color:#e8e6ed;padding:10px 12px;border-radius:7px;font-size:clamp(.66rem,.83vw,.85rem);font-weight:800}
.group-tabs button.selected{background:linear-gradient(#ee2636,#aa091a);border-color:#e43c45;color:#fff}
.winner-panel{padding:14px 12px;background:linear-gradient(165deg,#15101a,#090b12 75%);border:1px solid #ad3a31;display:flex;flex-direction:column}
.winner-panel h2{font-size:clamp(1.2rem,1.8vw,1.9rem);margin:0 0 12px;text-align:center}
.winner-display{position:relative;width:100%;flex:1;min-height:260px;max-height:490px;border:2px solid #b62831;border-radius:13px;overflow:hidden;background:radial-gradient(circle at center,#2a1420,#070a10 70%);display:grid;place-items:center;box-shadow:inset 0 0 32px #000,0 0 14px #9d101833}
.winner-display img{width:100%;height:100%;object-fit:cover;object-position:55% center;position:absolute;inset:0}
.winner-display:has(img)::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#08080bba)}
.winner-empty{text-align:center;padding:25px;color:#ffcf63}.winner-empty span{display:block;font-size:5rem;opacity:.45}.winner-empty strong{display:block;font-size:1.2rem}.winner-empty p{font-size:.9rem;color:#bba6a9}
.winner-name{font:900 clamp(1.8rem,3.1vw,3.4rem) 'Barlow Condensed',sans-serif;text-align:center;color:#f3c45c;text-shadow:0 3px 10px #000;margin-top:10px}
.winner-caption{text-align:center;font-size:.85rem;margin:0 0 6px}
.winner-appear{animation:winnerReveal .7s ease-out}@keyframes winnerReveal{0%{opacity:.35;transform:scale(.97)}100%{opacity:1;transform:scale(1)}}
@media(max-width:1050px){.stage-grid{grid-template-columns:minmax(200px,.8fr) minmax(350px,1.2fr)}.winner-panel{grid-column:1/-1}.winner-display{max-height:420px}.winner-display img{object-position:center 28%}}
@media(max-width:690px){.stage-grid{grid-template-columns:1fr}.stage-grid .role-panel .wheelwrap{max-width:330px}.stage-grid .champion-panel .wheelwrap{max-width:500px}.winner-panel{grid-column:auto}.winner-display{min-height:320px}.group-tabs{justify-content:center}.show-bottom{grid-template-columns:1fr}}

/* V4: panel educativo, sin modificar colores ni distribución */
.lore-info{margin-top:14px;padding:14px;border:1px solid #7c3234;background:linear-gradient(160deg,#1a1019,#0b0d15);border-radius:10px;color:#eee}
.lore-info[hidden]{display:none!important}.lore-region{font-weight:800;color:#efc05b;letter-spacing:.03em;font-size:.87rem}.lore-summary{font-size:.93rem;line-height:1.55;margin:12px 0;color:#e3dfe1}
.trivia{padding:12px;border:1px solid #4d313b;border-radius:9px;background:#0c111c}.trivia h3{color:#eec45f;font-size:1rem;margin:0 0 8px}.trivia p{margin:8px 0;font-size:.91rem}.trivia-options{display:grid;gap:7px}.trivia-options button{background:#1b2230;color:white;border:1px solid #74535b;padding:10px;text-align:left;border-radius:6px;cursor:pointer}.trivia-options button:hover:not(:disabled){border-color:#e5b954}.trivia-options button.correct{border-color:#35bd7a;background:#123e30}.trivia-options button.incorrect{border-color:#da5060;background:#491a27}.trivia-options button:disabled{cursor:default;opacity:.82}.lore-info a{display:block;color:#e9bd58;margin:12px 0 4px}.lore-note{display:block;font-size:.75rem;color:#a6a0a7}

/* V5: ficha de juego */
.game-guide{border:1px solid #8e2733;border-radius:12px;padding:15px;margin:15px 0;background:#16090e}.game-guide h3{color:#efbd65;margin:14px 0 8px}.skill-line{border-bottom:1px solid #3e2029;padding:8px 0}.skill-line strong{color:#fff}.skill-line p{margin:4px 0 6px;font-size:.9rem;color:#d7cbd0;line-height:1.5}#liveState{font-weight:bold;color:#f5c36a}