:root{color-scheme:dark;font-family:"Helvetica Neue",Arial,sans-serif;background:#171523;color:#fff7ec}*{box-sizing:border-box}body{margin:0}header,main{width:min(800px,94vw);margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid #554557}header strong{font-size:24px;letter-spacing:-1px}header span{color:#ffc466}small{color:#dccde0}main{padding:20px 0 60px}section:not(:empty){padding:18px 0}h1{font-size:clamp(34px,7vw,74px);line-height:1.02;letter-spacing:-.04em;margin:12px 0}h2{margin:10px 0}p,summary{line-height:1.5}button,input{font:inherit;border-radius:12px;padding:12px 15px;margin:4px 4px 4px 0}button{background:#ffc466;color:#211721;border:0;font-weight:bold;cursor:pointer}button.alt{background:#463850;color:white}input{background:#282235;color:white;border:1px solid #86758c;max-width:100%}img{width:min(215px,50vw);border-radius:8px}.item{padding:10px 0;border-bottom:1px solid #494152}summary{cursor:pointer}.tv main{width:min(1400px,94vw);text-align:center}.tv h1{font-size:clamp(52px,7vw,120px)}.tv p,.tv .item{font-size:clamp(20px,3vw,48px)}#playerBox{aspect-ratio:16/9;background:#000}iframe{width:100%;height:100%;border:0}.tv.playing header,.tv.playing #stage{display:none}.tv.playing main{padding:0;width:100vw}.tv.playing #playerBox{width:100vw;height:100vh}#notice:not(:empty){position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);padding:14px;background:#533955;border-radius:10px}.tv #notice{display:none}button:focus-visible,input:focus-visible{outline:3px solid white}.stars button{font-size:1.45rem}a{color:#ffc466}

.wordmark {font-weight:900;font-style:italic;letter-spacing:-.06em}
.wordmark span {color:var(--spark,#ffc466);margin:0 .12em;font-style:normal;font-size:.75em}
.tv[data-theme] {
 --paper:#fff1c9;--ink:#471433;--spark:#c53916;--sprite:0%;
 min-height:100vh;background:var(--paper);color:var(--ink);
}
.tv[data-theme=disco] {--paper:#11167b;--ink:#fff;--spark:#d7fa22;--sprite:50%}
.tv[data-theme=ajolote] {--paper:#ffce44;--ink:#162665;--spark:#aa1648;--sprite:100%}
.tv[data-theme] header {width:88%;border-color:currentColor}
.tv[data-theme] header strong {font-size:clamp(28px,4vw,64px)}
.tv[data-theme] small {color:inherit}
.tv[data-theme] main {width:88%;padding:0}
.tv[data-theme] #stage {position:relative;box-sizing:border-box;text-align:left;padding:4vh 43% 4vh 0;min-height:72vh;align-content:center;overflow-wrap:anywhere}
.tv[data-theme] #stage::after {content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:42%;aspect-ratio:1;background:url('/personajes.webp') var(--sprite) center/300% 100% no-repeat;pointer-events:none}
.tv[data-theme] h1 {font-size:clamp(32px,5.6vw,100px);color:var(--ink)}
.tv[data-theme] #stage p {font-size:clamp(18px,2vw,36px);margin:.5em 0}
.tv[data-theme] #stage img {width:clamp(120px,14vw,220px)}
@media (orientation:portrait) {
 .tv[data-theme] #stage {padding-right:0;min-height:auto}
 .tv[data-theme] #stage::after {position:static;display:block;width:min(50%,220px);transform:none;margin:1rem auto}
}

.guest {--paper:#fff1c9;--ink:#471433;--accent:#bf361e;--sprite:0%;background:#191521;min-height:100vh}
.guest[data-theme=disco] {--paper:#222888;--ink:white;--accent:#d7fa22;--sprite:50%}
.guest[data-theme=ajolote] {--paper:#ffcf54;--ink:#162665;--accent:#a11955;--sprite:100%}
.guest header,.guest main {width:min(94%,32rem)}
.guest header {padding:16px 4px}.guest .wordmark {font-size:29px}
.guest main {padding-top:14px}
.guest #stage {background:var(--paper);color:var(--ink);padding:20px;border-radius:22px;overflow-wrap:anywhere}
.guest-card {display:grid;grid-template-columns:minmax(0,1fr) 31%;align-items:center;gap:8px}
.guest-card .mascot {aspect-ratio:1;background:url('/personajes.webp') var(--sprite) center/300% 100% no-repeat}
.guest-card h1 {font-size:clamp(30px,8vw,43px);margin:0}
.guest-card p {margin:.55em 0;font-weight:550}
.guest #stage button:not(.alt):not([data-op=vote]) {background:var(--ink);color:var(--paper)}
.guest .rating {display:grid;grid-template-columns:repeat(5,1fr);margin:16px 0 0;background:var(--ink);border-radius:14px;padding:4px}
.guest .rating button {background:transparent;color:var(--paper);margin:0;padding:3px;font-size:clamp(28px,8vw,40px);min-height:48px}
.guest .rating .lit {color:var(--paper)}
.guest .my-place {border-top:1px dashed currentColor;margin-top:16px;padding-top:10px}
.guest .my-place p {margin:2px 0}.guest .my-place p:first-child {font-weight:750}
.guest #entry,.guest #find {display:grid;gap:8px;margin-top:12px}
.guest #entry input,.guest #find input {width:100%;margin:0}
.guest .item {overflow-wrap:anywhere}.guest #songs .item {display:flex;align-items:center;justify-content:space-between;gap:10px}
.guest #requests details {margin:12px 0}.guest button:focus-visible {outline:3px solid currentColor;outline-offset:-4px}
#ranking {color:#fff4df;background:#30223a;border:1px solid #826575;border-radius:22px;padding:clamp(18px,4vw,36px);width:min(90vw,560px);max-height:80vh;overflow:auto}
#ranking::backdrop {background:#151022cf}
#ranking h1 {font-size:clamp(28px,5vw,46px)}
#ranking::before {content:'★';display:block;color:#ffc466;font-size:3rem;transform-origin:left center}
@media (prefers-reduced-motion:no-preference){
 #ranking[open]::before {animation:star-arrives .5s ease-out both}
 @keyframes star-arrives {from{opacity:0;transform:rotate(-20deg) scale(.55)}to{opacity:1;transform:none}}
}

.tv.awards {background:radial-gradient(ellipse at 50% 100%,#593565,#20182f 76%);color:#fff4df;min-height:100vh}
.tv.awards header,.tv.awards main {width:92%;max-width:1600px}
.tv.awards #stage {padding:2vh 0;text-align:center;min-height:0}
.tv.awards #stage::after {display:none}
.tv.awards #stage h1 {color:#fff4df;font-size:clamp(32px,4.6vw,84px)}
.places {display:flex;gap:2vw;justify-content:center;align-items:flex-end;margin:3vh auto}
.place {flex:1 1 0;min-width:0;max-width:28em;padding:1.5vh 1vw 3vh;border-radius:24px;color:#231a2b;background:var(--metal);overflow-wrap:anywhere;animation:award-reveal .65s var(--delay) both}
.place-1 {--metal:#ffd260;--character:0%;order:2}
.place-2 {--metal:#c6d9ff;--character:50%;order:1}
.place-3 {--metal:#f0ae89;--character:100%;order:3}
.place i {display:block;width:min(13vw,20vh);aspect-ratio:1;margin:auto;background:url('/personajes.webp') var(--character) center/300% 100%}
.place-1 i {width:min(17vw,28vh)}
.place h3 {margin:.4em 0;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(12px,1.45vw,26px)}
.place h2 {font-size:clamp(22px,3.4vw,64px);margin:.1em 0;line-height:1.1}
.tv.awards #stage .winner p,.winner strong {font-size:clamp(16px,1.7vw,34px);margin:.3em 0}
.winner + .winner {border-top:1px solid #0004;margin-top:.7em;padding-top:.55em}
@keyframes award-reveal {from{opacity:0;transform:translateY(28px) scale(.95)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.place{animation:none}}
@media(prefers-reduced-motion:reduce){
 .tv.awards .place {animation:award-appear 1ms steps(1,end) var(--delay) both}
 @keyframes award-appear {from{opacity:0}to{opacity:1}}
}

.guest #songs .song-option {display:grid;grid-template-columns:clamp(60px,18vw,96px) minmax(0,1fr) auto}
.song-photo {aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#26233a}
.song-photo img {display:block;width:100%;height:100%;object-fit:cover}
.song-option small {display:block;margin-top:.25em;font-weight:normal;opacity:.8}

.tv.idle[data-theme] #stage img {width:min(44vw,53vh,680px);image-rendering:pixelated}
.quiz-label {font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.quiz-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:1rem 0}
.quiz-grid .quiz-choice {display:flex;align-items:center;gap:.6em;margin:0;text-align:left;color:white;border-radius:14px;padding:.8em;font-size:inherit;font-weight:700;overflow-wrap:anywhere}
.quiz-choice b {border:1px solid currentColor;border-radius:50%;padding:.15em .45em}
.choice-0 {background:#9c315a}.choice-1 {background:#254694}.choice-2 {background:#336450}.choice-3 {background:#744821}
.quiz-grid .selected,.quiz-grid .correct {outline:3px solid currentColor;outline-offset:-5px}
.quiz-choice:disabled {cursor:default;opacity:1}
.tv .quiz-grid {font-size:clamp(20px,2.6vw,44px)}
.tv.question h1,.tv.reveal h1 {font-size:clamp(32px,4.5vw,80px)}
.quiz-ranking {padding:0;max-width:45rem;margin:1em auto;list-style:none}
.quiz-ranking li {display:flex;gap:.8em;align-items:center;border-bottom:1px solid currentColor;padding:.6em 0}
.quiz-ranking strong {margin-left:auto}
.tv .quiz-ranking {font-size:clamp(22px,2.6vw,46px)}
@media(max-width:480px){.quiz-grid {grid-template-columns:1fr}}

.cheer-actions {display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.guest .cheer-actions button {background:#341934;color:white;border-radius:99px;padding:12px 18px}
#liveBar:not([hidden]) {height:clamp(44px,7vh,78px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:3vw;padding:0 3vw;background:#271626;color:#fff3d4;border-bottom:3px solid #ffc466;font-size:clamp(17px,2.1vw,40px)}
#liveSinger {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#liveCheers {display:flex;gap:.6em}
#liveCheers span {border-radius:2em;background:#502b43;padding:.12em .55em}
.tv.playing #playerBox {height:calc(100vh - clamp(44px,7vh,78px))}
@media(prefers-reduced-motion:no-preference){#liveCheers span {animation:cheer-pop .3s ease-out,cheer-fade .4s 3s forwards}}
@keyframes cheer-pop {from {transform:scale(.75)} 65% {transform:scale(1.1)}}
@keyframes cheer-fade {to {opacity:0}}

#liveCheers {align-items:center}
.clapping-axolotl {position:relative;display:block;height:clamp(39px,6.4vh,72px);aspect-ratio:1.22;overflow:hidden;border-radius:50% 50% 25% 25%;background:radial-gradient(ellipse at bottom,#ffd18c,#fff2ba)}
.clapping-axolotl::before {content:"";position:absolute;inset:0;background:url('/personajes.webp') 99% 8% / 368% auto no-repeat}
.clapping-axolotl .paw {position:absolute;z-index:1;bottom:3%;width:28%;height:31%;border:2px solid #94204c;border-radius:65% 55% 45% 60%;background:#ff7897}
.clapping-axolotl .left {left:26%;transform:rotate(-32deg)}
.clapping-axolotl .right {right:26%;transform:rotate(32deg)}
@media(prefers-reduced-motion:no-preference){
 .clapping-axolotl .left {animation:clap-left .46s ease-in-out infinite alternate}
 .clapping-axolotl .right {animation:clap-right .46s ease-in-out infinite alternate}
}
@keyframes clap-left {from {transform:translateX(-40%) rotate(-40deg)} to {transform:translateX(12%) rotate(-18deg)}}
@keyframes clap-right {from {transform:translateX(40%) rotate(40deg)} to {transform:translateX(-12%) rotate(18deg)}}
#quiz-clock {display:flex;gap:.8em;align-items:center;margin:.75em 0;font-variant-numeric:tabular-nums}
#quiz-clock i {flex:1;height:.75em;background:#403448;border-radius:1em;overflow:hidden}
#quiz-clock em {display:block;height:100%;background:var(--color);transform:scaleX(var(--fill));transform-origin:left;border-radius:inherit}
#quiz-clock b {min-width:4ch;text-align:right}
.tv #quiz-clock {font-size:clamp(20px,2.3vw,38px)}
.tv .quiz-label.celebrating {display:flex;align-items:center;justify-content:center;gap:.75em;color:#ffd47c}
.celebrating i {display:inline-block;width:clamp(58px,8vh,94px);aspect-ratio:1;background:url('/personajes.webp') 100% center/300% 100% no-repeat}
@media(prefers-reduced-motion:no-preference){
 .celebrating i {animation:quiz-hop .55s ease-in-out 3 alternate}
}
@keyframes quiz-hop {0%,100% {transform:translateY(0) rotate(-5deg)} 50% {transform:translateY(-12%) rotate(8deg)}}