/* FinQuiz! — personajes y ranking como un momento de juego. */
.fq-avatar{display:block;width:64px;height:64px;object-fit:contain;flex:none}
#ingreso .figuritas{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-bottom:16px}
#ingreso .fig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;max-height:none;min-height:70px;opacity:1}
#ingreso .fig .fq-avatar{width:48px;height:48px}
.avatar-nombre{font:800 10px/1.2 var(--f);color:#193d50}
#ingreso .fig[aria-pressed=true]{outline:3px solid #146ead;outline-offset:3px;transform:translateY(-3px) rotate(-3deg)}
#ingreso .fig:hover .fq-avatar{transform:rotate(-8deg) translateY(-3px)}
.fq-ranking{position:relative;display:flex!important;flex-direction:column;gap:12px;width:100%;isolation:isolate;overflow:visible}
.fq-row{position:relative;display:grid;grid-template-columns:42px 70px minmax(0,1fr) auto auto;align-items:center;gap:14px;min-height:90px;padding:13px 20px;border:2px solid #b8cbd2;border-radius:17px 10px 20px 12px;background:#fffefb;box-shadow:3px 5px 0 #e0e9eb;color:#193d50}
.fq-row.fq-leader{background:#fff0b5;border-color:#d4a53b;box-shadow:3px 5px 0 #e6c777}
.fq-row.fq-own{outline:3px solid #146ead;outline-offset:3px}
.fq-place{position:relative;font:900 26px/1 var(--f);text-align:center}
.fq-crown{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%) rotate(-8deg);font-size:24px;color:#a3690b}
.fq-identity{min-width:0;text-align:left}
.fq-identity>strong{display:block;font:900 clamp(19px,2vw,28px)/1.2 var(--f);overflow-wrap:anywhere}
.fq-identity strong small{display:inline-block;font-size:12px;vertical-align:middle;background:#146ead;color:#fff;padding:3px 7px;border-radius:6px}
.fq-move{display:block;color:#526e7c;font:700 13px/1.3 var(--f);margin-top:5px}
.fq-move.fq-up{color:#217454}
.fq-move.fq-down{color:#a63d24}   /* las bajadas también se notan: es parte del show */
.fq-prize{display:block;font:800 14px/1.35 var(--f);color:#835d16;margin-top:6px;overflow-wrap:anywhere}
.fq-score{text-align:right;min-width:64px}
/* Subió / bajó: columna propia, grande, a la izquierda del puntaje. */
.fq-mov{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:66px;padding:8px 10px;
  border-radius:12px;font:900 clamp(20px,2.3vw,30px)/1 var(--f);font-variant-numeric:tabular-nums}
.fq-mov b{font-size:.72em}
.fq-mov-up{background:#d8f1e3;color:#1c6b44;border:2px solid #8fd1ad}
.fq-mov-down{background:#fde3db;color:#a63d24;border:2px solid #f1a891}
.fq-mov-igual{background:#eef3f5;color:#7a929d;border:2px solid #dbe5e9}
.fq-mov-nada{min-width:0;padding:0;border:0}
.fq-score b{display:block;font:900 clamp(22px,2.7vw,34px)/1.1 var(--f);font-variant-numeric:tabular-nums;color:#193d50}
.fq-score small{display:block;font:700 12px/1.2 var(--f);color:#526e7c;margin-top:3px}
.fq-tomi-festejo{display:flex;align-items:center;justify-content:center;position:relative;flex:none}
.fq-tomi-festejo>img{display:block;width:170px;height:170px;object-fit:contain;transform-origin:50% 90%}
.fq-tomi-festejo>span{position:relative;max-width:170px;background:#edf7fb;border:2px solid #a4c5d3;padding:12px 16px;border-radius:18px 18px 18px 2px;font:700 25px/1 var(--mano);color:#146ead;transform:rotate(-3deg)}
.fq-ranking-hero{display:flex;align-items:center;gap:35px;width:100%;max-width:1000px;margin:0 auto 20px}
.fq-ranking-hero .fq-tomi-festejo>span{display:none}
.fq-ranking-hero .fq-tomi-festejo>img{width:170px;height:170px}
.fq-eyebrow{font:900 13px/1.2 var(--f);letter-spacing:.14em;color:#257c6c;margin:0 0 9px}
.trivia-host .fq-ranking-hero .marcador-titulo{font-size:clamp(28px,3.7vw,48px);line-height:1.1;margin:0 0 10px;text-align:left}
.fq-ranking-caption{font:600 18px/1.4 var(--f);color:#526e7c}
.trivia-host #v-marcador{justify-content:flex-start;padding:16px 0 24px}
.trivia-host #tabla-xl{width:min(1000px,100%)}
html:has(.trivia-host #v-marcador.on){height:auto;overflow-y:auto;overflow-x:clip}
.trivia-host:has(#v-marcador.on){height:auto;min-height:100dvh;overflow:visible}
.trivia-host:has(#v-marcador.on) .escena{height:auto;min-height:calc(100dvh - 68px);overflow:visible}
#espera:has(#marcador:not([hidden])) .espera-centro{max-width:820px;gap:14px}
#espera:has(#marcador:not([hidden])) .espera-ilustrada{width:150px;margin:-24px auto -18px}
#espera:has(#marcador:not([hidden])) .espera-gente,#espera:has(#marcador:not([hidden])) .espera-sala{display:none}
#espera:has(#marcador:not([hidden])) #espera-titulo{font-size:clamp(28px,4vw,40px)}
#marcador-yo{font:800 19px/1.4 var(--f);margin:0 0 18px;color:#146ead}
#marcador-tabla{display:flex;max-height:none;overflow:visible}
#final.on{max-width:940px;justify-content:flex-start;gap:14px}
#final .fq-tomi-festejo{margin:-12px 0 -5px}
#final .puntazo{font-size:clamp(46px,9vw,76px);color:#146ead}
#final #fin-podio{max-width:820px;margin:12px auto 20px}
#final .fq-final .fq-row{min-height:94px}
.fq-final .fq-leader{background:#ffe58a;border-color:#193d50;box-shadow:4px 6px 0 #193d50}
.fq-final .fq-row:nth-child(2){background:#e6f5fc}.fq-final .fq-row:nth-child(3){background:#ffede4}
.fq-confetti{position:absolute;inset:-80px -5px 0;pointer-events:none;overflow:hidden;z-index:3}
.fq-confetti i{position:absolute;left:var(--x);top:-20px;width:9px;height:16px;border-radius:3px;background:var(--color);animation:fq-confetti 3.6s var(--delay) ease-out both}
.jug-chip .fq-avatar{width:32px;height:32px}.jug-chip{display:inline-flex;align-items:center;gap:6px}
.ranking-dialog .fila .fq-avatar{width:46px;height:46px}
@media(prefers-reduced-motion:no-preference){
 .fq-row{animation:fq-enter .75s var(--delay) cubic-bezier(.2,.8,.2,1) both}
 .fq-leader .fq-avatar{animation:fq-cheer 2.8s 1s ease-in-out infinite}
 .fq-tomi-festejo>img{animation:fq-tomi 3.4s ease-in-out infinite}
 .fq-tomi-festejo>span{animation:fq-bubble 4s ease-in-out infinite}
 .fig[aria-pressed=true] .fq-avatar{animation:fq-cheer 2.8s ease-in-out infinite}
 @keyframes fq-enter{from{opacity:0;transform:translateY(var(--travel)) scale(.97)}to{opacity:1;transform:none}}
 @keyframes fq-cheer{0%,65%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-6px) rotate(-7deg)}35%{transform:translateY(0) rotate(5deg)}45%{transform:translateY(-3px) rotate(-3deg)}}
 @keyframes fq-tomi{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-5px)}}
 @keyframes fq-bubble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(1deg)}}
 @keyframes fq-confetti{0%{opacity:0;transform:translateY(0) rotate(0)}8%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(620px) rotate(var(--spin))}}
}
body.motion-pausado .fq-row,body.motion-oculto .fq-row{animation:none!important;opacity:1;transform:none}
body.motion-pausado .fq-confetti{display:none}
@media(max-width:600px){
 #ingreso .figuritas{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #ingreso .fig{min-height:62px;padding:3px;flex-direction:row;gap:2px}
 #ingreso .fig .fq-avatar{width:36px;height:40px}.avatar-nombre{font-size:10px}
 .fq-row{grid-template-columns:22px 46px minmax(0,1fr) auto auto;gap:7px;padding:12px 10px;min-height:78px;border-radius:13px 8px 14px 8px}
 .fq-avatar{width:46px;height:46px}.fq-place{font-size:20px}.fq-crown{font-size:19px}
 .fq-identity>strong{font-size:16px;line-height:1.25}.fq-identity strong small{font-size:10px;padding:2px 4px}
 .fq-score{min-width:44px}.fq-score b{font-size:20px}.fq-score small{font-size:10px}
 .fq-move{font-size:11px}.fq-prize{font-size:12px}
 .fq-mov{min-width:44px;padding:6px 7px;font-size:17px;border-radius:9px}
 .fq-ranking-hero{gap:12px;margin-bottom:18px}
 .fq-ranking-hero .fq-tomi-festejo>img{width:92px;height:110px}
 .fq-ranking-caption{font-size:14px}.fq-eyebrow{font-size:10px;letter-spacing:.1em}
 .trivia-host .fq-ranking-hero .marcador-titulo{font-size:27px}
 #final .fq-tomi-festejo>img{width:130px;height:130px}
 .fq-tomi-festejo>span{font-size:22px;max-width:150px;padding:10px}
 #final .fq-final .fq-row{min-height:78px}
 #espera:has(#marcador:not([hidden])) .espera-ilustrada{width:120px}
 .ranking-dialog .fila{gap:7px;padding:10px}.ranking-dialog .fila .fq-avatar{width:36px;height:36px}
 .ranking-dialog .fila span,.ranking-dialog .fila em{font-size:14px}
}
@media(max-width:600px) and (max-height:650px){
 #ingreso.on{padding-top:58px;padding-bottom:18px;gap:7px}
 #ingreso .ingreso-intro .bienvenida-categoria{display:none}
 #ingreso .entrada-panel{padding:12px 15px}
 #ingreso .figuritas{gap:6px;margin-bottom:12px}#ingreso .fig{min-height:52px}
 #ingreso .modo-aviso{margin-bottom:10px}#ingreso .rotulo{margin-bottom:6px}
}
@media(prefers-reduced-motion:reduce){.fq-confetti{display:none}.fq-row,.fq-avatar,.fq-tomi-festejo>*{animation:none!important}}
@media(min-width:761px) and (max-height:850px){
 .trivia-host #v-marcador{padding-top:4px;padding-bottom:12px}
 .trivia-host .fq-ranking-hero{margin-bottom:14px;gap:25px}
 .trivia-host .fq-ranking-hero .fq-tomi-festejo>img{width:110px;height:110px}
 .trivia-host .fq-row{min-height:70px;padding:8px 16px;grid-template-columns:34px 56px minmax(0,1fr) auto auto;gap:12px}
 .trivia-host .fq-avatar{width:54px;height:54px}
 .trivia-host .fq-identity>strong{font-size:23px}.trivia-host .fq-score b{font-size:28px}
 .trivia-host .fq-ranking{gap:10px}
}
@media(min-width:761px){
 .fq-final:has(.fq-row:nth-child(3)){display:grid!important;grid-template-columns:1fr 1.12fr 1fr;align-items:end;gap:14px;padding-top:20px}
 .fq-final:has(.fq-row:nth-child(3)) .fq-row:nth-child(-n+3){grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:16px;min-height:220px;text-align:center}
 .fq-final:has(.fq-row:nth-child(3)) .fq-row:first-child{grid-column:2;min-height:250px}
 .fq-final:has(.fq-row:nth-child(3)) .fq-row:nth-child(2){grid-column:1}
 .fq-final:has(.fq-row:nth-child(3)) .fq-row:nth-child(3){grid-column:3;min-height:205px}
 .fq-final:has(.fq-row:nth-child(3)) .fq-row:nth-child(n+4){grid-column:1/-1}
 .fq-final:has(.fq-row:nth-child(3)) .fq-row:nth-child(-n+3) .fq-avatar{width:72px;height:72px}
 .fq-final:has(.fq-row:nth-child(3)) .fq-row:nth-child(-n+3) .fq-identity,.fq-final:has(.fq-row:nth-child(3)) .fq-row:nth-child(-n+3) .fq-score{text-align:center}
 .fq-final:has(.fq-row:nth-child(3)) .fq-row:nth-child(-n+3) .fq-move{display:none}
 .fq-final .fq-mov-nada{display:none}
 .fq-final:has(.fq-row:nth-child(3)) .fq-row:nth-child(-n+3) .fq-crown{bottom:calc(100% + 0px)}
}
@media(max-width:600px){#ingreso .fig{flex-direction:column;gap:0}#ingreso .fig .fq-avatar{width:44px;height:44px}.avatar-nombre{font-size:11px;line-height:1.2}}

#espera #marcador{max-width:820px}

/* A dedicated celebration pose gives the finale its own identity. */
#final .fq-tomi-festejo{gap:18px;margin:0}
#final .fq-tomi-festejo>img{width:210px;height:210px}
#final.on{gap:12px;padding-bottom:28px}
#final .logo{margin:0}
#final .puntazo{margin:0;line-height:1}
#final .sub{margin:0}
#final #fin-podio{margin:8px auto 12px}
@media(max-width:600px){
 #final .fq-tomi-festejo{gap:8px}
 #final .fq-tomi-festejo>img{width:155px;height:155px}
 #final .fq-tomi-festejo>span{max-width:135px;font-size:22px}
}

/* En el ranking parcial el subtítulo dice DÓNDE estamos ("Después de la pregunta 3 de 10"). */
#espera:has(#marcador:not([hidden])) .espera-sub{margin:-4px 0 6px;font-size:15px;font-weight:700;color:#607a86}