/* qfadesign — jueguitos con la estética del sitio sobre fondo NEGRO.
   Se carga DESPUÉS del CSS propio de cada juego (por eso usa !important en lo que pisa). */
:root{--bg:#000;--blue:#0b75f4;--az-f:#0a5cc0;--muted:rgba(255,255,255,.74);--line:rgba(255,255,255,.3);--key:rgba(255,255,255,.1);--wrong:rgba(255,255,255,.04)}
html{overflow-x:clip;background:#000!important}
html,body{background:#000!important;color:#fff;font-family:var(--f)!important}
body{display:block!important;margin:0;min-height:100vh;line-height:1.4}
button,input{font-family:var(--f)!important}
a{color:inherit;text-decoration:none}

/* volver: "Volver a" + el sticker "Jueguitos" de la barra (versión con borde blanco para fondo negro), chiquito */
.vol-wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:clamp(16px,2.4vw,26px) 20px 0}
.volver{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-weight:900;font-style:italic;font-size:clamp(14px,1.2vw,16px);line-height:1;color:#fff}
.volver img{display:block;width:clamp(76px,7.5vw,92px);height:auto;transition:rotate .25s ease,scale .25s ease}
.volver:hover img,.volver:focus-visible img{rotate:-4deg;scale:1.1}
.volver:active img{scale:.95}
.volver:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:10px}
@media(prefers-reduced-motion:reduce){.volver img{transition:none}}

/* contenedores: el pie va pegado al contenido */
.app,.game{position:relative;z-index:1;margin:0 auto!important;min-height:0!important;padding-top:clamp(10px,2vw,22px)!important;padding-bottom:clamp(28px,4vw,48px)!important}
footer{position:relative;z-index:1}

/* títulos: igual que el resto del sitio (heavy cursiva + palabra con contorno) */
header,.header{text-align:center;margin-bottom:clamp(22px,3vw,34px)!important}
/* títulos como los stickers del sitio: chapita crema con letra azul heavy cursiva, apenas torcida.
   Todo el título lleva el mismo tratamiento (nada de media palabra con contorno). */
header h1,.header h1,h1.big-title{font-family:var(--fh)!important;font-weight:900!important;font-style:italic;color:var(--az-f)!important;line-height:1!important;letter-spacing:-.02em!important;margin:0 auto;display:inline-block;max-width:100%;box-sizing:border-box;background:var(--crema);padding:.14em .42em .2em;border-radius:.3em;rotate:-1.5deg;box-shadow:inset 0 1px 0 #fff,0 18px 44px rgba(0,0,0,.6)}
header h1,.header h1{font-size:clamp(32px,6.2vw,72px)!important}
h1.big-title{font-size:clamp(32px,6vw,68px)!important;margin-bottom:22px}
h2.big-title{font-family:var(--fh)!important;font-weight:900!important;font-style:italic;color:#fff!important;line-height:.98!important;letter-spacing:-.02em!important;margin:0 0 14px;font-size:clamp(34px,6vw,64px)!important}
.hueco{color:inherit!important;-webkit-text-stroke:0}
header p,.subtitle{font-size:clamp(16px,1.6vw,20px)!important;color:var(--muted)!important;margin:20px auto 0!important;max-width:560px;line-height:1.4;font-weight:400}

/* etiquetas chiquitas = pastillas como los filtros del portfolio */
.eyebrow,.label,.target-label,.start-label,.final-label{display:inline-block;font-family:var(--fp)!important;font-weight:400!important;font-size:12px!important;letter-spacing:.05em!important;text-transform:uppercase;color:#fff!important;border:2px solid #fff;border-radius:99px;padding:7px 16px;margin-bottom:16px!important}

/* tarjetas: vidrio oscuro */
.card,.start,.end,.gameplay,.game-card{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:28px!important;box-shadow:0 24px 60px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.28)!important;-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.intro h2,.result h2,.final-score h2,.start-title,.final-title{font-family:var(--fh)!important;font-weight:900!important;font-style:italic;color:#fff!important;letter-spacing:-.01em!important;font-size:clamp(28px,4vw,40px)!important;line-height:1!important}
.intro p,.start-copy,.final-copy,.result p,.final-score p,.how-to p,.hint,.message,.hex,.feedback,.progress,.score,.top-info,.lives{color:var(--muted)!important;font-family:var(--f)}
.intro p,.start-copy,.final-copy{font-size:clamp(15px,1.3vw,17px)!important;line-height:1.55!important}
.how-to p,.hint,.message,.hex,.feedback,.progress,.top-info,.lives{font-size:13px!important}
.how-to{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:18px!important}
.how-to strong,.difficulty-title{font-weight:700;font-style:italic;font-size:15px!important;color:#fff}
.score strong,.top-info strong,.score-info strong{font-family:var(--fh);font-weight:900;font-style:italic;color:#fff!important}
.round-info,.score-info{font-family:var(--fp)!important;font-weight:400!important;font-size:12px!important;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)!important}
.score-info strong{font-size:20px!important}
.top-info .score{font-family:var(--fh);font-weight:900;font-style:italic;color:#fff!important}

/* números grandes */
#finalScore,.similarity{font-family:var(--fh)!important;font-weight:900!important;font-style:italic;color:#fff!important;letter-spacing:-.02em!important;font-size:clamp(56px,10vw,96px)!important;line-height:1!important}

/* botones principales = .btn del sitio */
.primary,.play-again{min-height:0!important;font-family:var(--fh)!important;font-weight:900!important;font-style:italic;text-transform:none;font-size:17px!important;letter-spacing:0;padding:14px 30px 15px!important;border-radius:18px!important;border:1px solid rgba(255,255,255,.55)!important;background:rgba(249,251,242,.8)!important;-webkit-backdrop-filter:var(--v-blur);backdrop-filter:var(--v-blur);color:var(--az-f)!important;box-shadow:var(--v-btn)!important;position:relative;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .25s,color .25s,transform .18s ease-out,scale .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.primary:hover:not(:disabled),.play-again:hover{background:rgba(11,117,244,.82)!important;color:var(--crema)!important;scale:1.06;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 30px rgba(0,30,100,.4)!important}
.primary:active:not(:disabled),.play-again:active{scale:.94;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 8px rgba(0,0,0,.3)!important;transition-duration:.25s,.25s,.08s,.12s,.2s,.35s}
.primary:disabled{opacity:.4;cursor:not-allowed}


/* color: cajas, timer, inputs, sliders */
.target-color{border-radius:22px!important;border:1px solid rgba(255,255,255,.3)!important}
.copy-placeholder{background:transparent!important;border:1px dashed rgba(255,255,255,.4)!important}
.color-preview{border-radius:18px!important;border:1px solid rgba(255,255,255,.3)!important}
.preview-block small{color:var(--muted)!important;font-family:var(--fp);font-weight:400!important;letter-spacing:.05em}
.timer{background:transparent;border-color:var(--blue)!important;color:#fff!important;font-family:var(--fh);font-weight:900;font-style:italic;box-shadow:none!important}
.rgb-panel{border-top-color:rgba(255,255,255,.25)!important}
.r-label,.g-label,.b-label,.rgb-row label{color:#fff!important;font-family:var(--fh);font-weight:900;font-style:italic;font-size:15px!important}
.rgb-value,.form input{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important;border-radius:14px!important}
.rgb-value:focus,.form input:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(11,117,244,.35)!important}
.form input::placeholder{color:rgba(255,255,255,.5)}

/* tipografía: opciones y barra */
.timer-number{font-family:var(--fh);font-weight:900!important;font-style:italic;color:#fff!important}
.timer .timer-fill,.timer-fill{background:var(--blue)}
.timer-wrap .timer,.timer-bar{background:rgba(255,255,255,.18)!important}
.answer{min-height:58px;font-family:var(--f)!important;font-weight:700!important;font-style:italic;font-size:16px!important;color:#fff!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.4)!important;border-radius:18px!important;box-shadow:none!important}
.answer:hover:not(:disabled){background:#fff!important;color:var(--az-f)!important;border-color:#fff!important}
.answer.correct{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
.answer.wrong{background:rgba(255,255,255,.03)!important;border-color:rgba(255,255,255,.18)!important;color:rgba(255,255,255,.45)!important;text-decoration:line-through}
.feedback.ok{color:#fff!important;font-weight:700}.feedback.bad{color:rgba(255,255,255,.6)!important}
.rank h3{font-family:var(--fp);font-weight:400!important;letter-spacing:.06em;color:var(--muted)!important}
.rank-row{border-color:rgba(255,255,255,.22)!important;color:var(--muted)!important}.rank-row strong{color:#fff!important}

/* ahorcado: teclas, letras, vidas */
.key{border:1px solid rgba(255,255,255,.28)!important;border-radius:10px!important;font-family:var(--fh)!important;font-weight:900!important;font-style:italic;color:#fff!important;background:var(--key)!important}
.key:hover:not(:disabled){background:#fff!important;color:var(--az-f)!important}
.key.correct{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
.key.wrong{background:var(--wrong)!important;border-color:rgba(255,255,255,.12)!important;color:rgba(255,255,255,.35)!important;text-decoration:line-through}
.letter{font-family:var(--fh);font-weight:900;font-style:italic;color:#fff}
.letter.revealed{color:#fff!important;border-bottom-color:var(--blue)!important}
.message.success{color:#fff!important}.message.error{color:rgba(255,255,255,.6)!important}
.hearts{color:var(--blue)}.hearts .lost{color:rgba(255,255,255,.25)!important}
.head{background:#000!important}

@media(max-width:600px){
 .card,.start,.end,.gameplay,.game-card{border-radius:22px!important}
 .primary,.play-again{width:100%}
}

/* imagen de resultado para compartir (js/resultado.js) */
.share-box{width:100%;display:flex;flex-direction:column;align-items:center;margin:6px 0 10px}
.resultado-img[hidden]{display:none}
.res-abrir{margin:6px 0 0}
.resultado-img{width:100%;max-width:340px;margin:18px auto 6px;display:flex;flex-direction:column;align-items:center;gap:14px}
.resultado-prev{width:100%;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.3);box-shadow:0 18px 44px rgba(0,0,0,.6);line-height:0}
.resultado-prev img{width:100%;height:auto;display:block}
.resultado-acc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}
.resultado-acc button{margin:0}
.res-bajar{min-height:0;font-family:var(--fp)!important;font-weight:400!important;text-transform:uppercase;font-size:14px;letter-spacing:.03em;padding:13px 24px;border-radius:14px;border:1px solid var(--v-borde)!important;background:var(--v-fondo);-webkit-backdrop-filter:var(--v-blur);backdrop-filter:var(--v-blur);box-shadow:var(--v-luz);color:#fff;transition:background .25s,color .25s}
.res-bajar:hover{background:#fff;color:var(--az-f)}
.resultado-msg{min-height:18px;font-size:13px;color:var(--muted);text-align:center;line-height:1.4}
@media(max-width:600px){.resultado-acc button{width:100%}}

/* RANKING (js/ranking.js) */
.rank-box{width:100%;max-width:420px;margin:18px auto 6px;padding:18px 18px 14px;border-radius:22px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);color:#fff;text-align:left;box-sizing:border-box}
.rank-cab{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:12px}
.rank-tag{display:inline-block;padding:4px 11px;border-radius:99px;background:#f9fbf2;color:#0a5cc0;rotate:-2deg;font-family:var(--fh);font-weight:900;font-style:italic;font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.rank-tit{font-family:var(--fh);font-weight:900;font-style:italic;font-size:17px;line-height:1.1}
.rank-msg{margin:0 0 10px;font-size:14px;line-height:1.4;opacity:.92}
.rank-error{color:#ffd7d7;opacity:1}
.rank-yo{margin:0 0 10px;font-size:14px;line-height:1.35}
.rank-form{display:flex;gap:8px;margin:4px 0 10px}
.rank-form input{flex:1;min-width:0;padding:11px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:16px}
.rank-form input:focus-visible{outline:3px solid #fff;outline-offset:2px}
.rank-guardar{padding:11px 18px;border-radius:14px;border:0;background:#f9fbf2;color:#0a5cc0;font-family:var(--fh);font-weight:900;font-style:italic;font-size:15px;cursor:pointer}
.rank-guardar:disabled{opacity:.6;cursor:default}
.rank-link{display:block;margin:6px 0 0;padding:4px 0;border:0;background:none;color:#fff;font:inherit;font-size:13px;text-decoration:underline;opacity:.8;cursor:pointer}
.rank-link:hover,.rank-link:focus-visible{opacity:1}
.rank-lista{list-style:none;margin:0;padding:0;counter-reset:r}
.rank-lista li{counter-increment:r;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;font-size:14px}
.rank-lista li::before{content:counter(r);flex:none;width:1.4em;text-align:center;font-family:var(--fh);font-weight:900;font-style:italic;opacity:.75}
.rank-lista li:nth-child(odd){background:rgba(255,255,255,.07)}
.rank-lista .rank-yo-fila{background:rgba(11,117,244,.55)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.rank-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-pts{flex:none;font-family:var(--fh);font-weight:900;font-style:italic}

/* PANTALLAS DE INICIO: todo centrado sobre el fondo negro (sin tarjeta); el top 3 queda al costado. */
.eyebrow,.label,.start-label{display:block;width:fit-content;margin-inline:auto}
#introScreen.card,#startScreen.start{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;min-height:0!important;width:min(100%,1240px)!important;max-width:none!important}
.game-card:has(#startScreen:not([hidden])){background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;max-width:1240px!important}
div.app,main.app{max-width:1240px}
.game{max-width:1240px!important}
.game .gameplay,.game .end{max-width:720px;align-self:center}
.inicio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px) minmax(0,1fr);column-gap:clamp(24px,3.5vw,48px);align-items:center;width:100%}
.inicio-reglas{grid-column:2;min-width:0;text-align:center}
.inicio-reglas h2,.inicio-reglas .start-title{margin:0 0 14px!important;text-align:center}
.inicio-reglas p,.inicio-reglas .start-copy,.inicio-reglas .intro{max-width:46ch;margin:0 auto 14px!important;text-align:center}
.inicio-reglas .actions,.inicio-reglas .actions-inicio{display:flex;justify-content:center;margin-top:26px}
.inicio-reglas>.primary{margin-top:12px}
/* "cómo se juega": texto suelto, sin recuadro */
.how-to{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;max-width:46ch;margin:0 auto 6px!important;text-align:center!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.how-to strong{display:block;margin-bottom:6px}
.how-to p{margin:0!important;font-size:clamp(15px,1.3vw,17px)!important;line-height:1.55!important}

/* top 3 (js/ranking.js), al costado derecho */
.rank-top{grid-column:3;justify-self:start;width:100%;max-width:360px;min-width:0;text-align:left}
.rank-top .rank-msg{margin:16px 0 0}
.rank-podio{list-style:none;margin:18px 0 0;padding:0}
.rank-podio li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.rank-podio li:first-child{border-top:1px solid rgba(255,255,255,.22)}
.rank-podio .pos{font-family:var(--fh);font-weight:900;font-style:italic;font-size:clamp(34px,4.4vw,52px);line-height:.9;min-width:.7em}
.rank-podio li:first-child .pos{color:#8fc2ff}
.rank-podio .nom{min-width:0;overflow-wrap:anywhere;line-height:1.2;font-weight:700;font-style:italic;font-size:clamp(15px,1.4vw,18px)}
.rank-podio .pts{font-family:var(--fh);font-weight:900;font-style:italic;font-size:15px;color:var(--muted)}
.rank-podio .rank-yo-fila .nom{color:#8fc2ff}
.inicio.sin-rank{grid-template-columns:minmax(0,560px);justify-content:center}
.inicio.sin-rank .inicio-reglas{grid-column:1}
/* pantallas angostas: el top 3 baja y queda centrado debajo */
@media(max-width:1180px){
 .inicio,.inicio.sin-rank{grid-template-columns:minmax(0,560px);justify-content:center;row-gap:38px}
 .inicio-reglas,.rank-top{grid-column:1}
 .rank-top{justify-self:center;max-width:520px}
}

/* TÍTULOS = stickers ilustrados (img/stickers/juego-*.svg). Pisan la chapita de texto. */
header h1.h1-st,.header h1.h1-st,h1.big-title.h1-st{display:block;background:none;padding:0;border-radius:0;box-shadow:none;rotate:none;margin:0 auto;font-size:0!important;line-height:0!important}
.h1-st img{display:block;width:clamp(220px,40vw,400px);height:auto;margin-inline:auto;transition:width .35s ease}
.inicio-reglas .h1-st{margin:0 auto 18px!important}
.inicio-reglas .h1-st img{width:clamp(230px,34vw,380px)}
/* ya jugando, el sticker se achica para dejar lugar al juego */
.app:has(#introScreen.hidden) header .h1-st img,.app:has(#startScreen[hidden]) header .h1-st img{width:clamp(130px,17vw,190px)}
@media(prefers-reduced-motion:reduce){.h1-st img{transition:none}}

/* top 3 estirable: "Ver ranking completo" */
.rank-top:not(.abierto) .rank-extra{display:none}
.rank-top.abierto .rank-podio{max-height:min(58vh,520px);overflow-y:auto;overscroll-behavior:contain;padding-right:6px}
.rank-podio .rank-extra .pos{font-size:22px;min-width:1.4em;text-align:left}
.rank-podio .rank-extra{padding:10px 0}
.rank-ver{margin-top:12px;font-family:var(--fh);font-weight:900;font-style:italic;font-size:15px;opacity:1}
/* ranking del final: nombres largos completos */
.rank-box{max-width:480px}
.rank-nom{overflow-wrap:anywhere;white-space:normal;line-height:1.2}

/* ranking: apodo + código de 4 números (y recuperar nombre) */
.rank-form{flex-wrap:wrap}
.rank-form input{flex:1 1 140px}
.rank-form .rank-pin{flex:0 1 112px;text-align:center;letter-spacing:.12em}

/* ranking: caja con los datos para copiar al guardar el código */
.rank-datos{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 14px;padding:14px;border-radius:16px;border:2px dashed currentColor;text-align:center}
.rank-datos .rank-msg{margin:0}
.rank-datos-txt{margin:0;font-weight:900;font-size:1.15em;letter-spacing:.02em;word-break:break-word}