.pagina-juego .barra{position:sticky}
.volver{font:400 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--oro);text-decoration:none}
.juego-pagina{max-width:1180px;margin:0 auto;padding:2.4rem clamp(12px,3vw,40px) 4rem}
.juego-cabeza{text-align:center}
.juego-cabeza .antetitulo{justify-content:center}.juego-cabeza .antetitulo::before{display:none}
.juego-cabeza .titulo{font-size:clamp(2.2rem,5vw,3.6rem)}

.escenario{position:relative;width:100%;aspect-ratio:16/9;max-height:78vh;margin:0 auto;border:1px solid var(--linea);background:#060504;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.escenario canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.escenario::after{content:"";position:absolute;inset:6px;border:1px solid rgba(216,195,154,.1);pointer-events:none}

.hud{position:absolute;inset:0 0 auto 0;background:linear-gradient(180deg,rgba(6,5,4,.78),rgba(6,5,4,.45) 65%,transparent);padding-bottom:22px!important;display:flex;justify-content:space-between;align-items:flex-start;padding:14px 18px;pointer-events:none;z-index:2}
.hud-anio span{display:block;font:300 clamp(2.4rem,6vw,4rem)/.9 var(--serif);background:var(--grad-oro);-webkit-background-clip:text;background-clip:text;color:transparent}
.hud-anio small{font:500 .62rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--tenue)}
.hud-der{text-align:right}
.hud-vidas{display:block;font-size:1.1rem;letter-spacing:.2em;color:var(--marfil)}
.hud-vidas i{font-style:normal;opacity:.22}
.hud-pts{font:400 1.6rem/1.2 var(--serif);color:var(--oro)}

.hito-toast{position:absolute;left:50%;bottom:9%;transform:translate(-50%,20px);max-width:min(560px,86%);background:rgba(11,10,8,.88);border:1px solid var(--oro);padding:.8rem 1.2rem;text-align:center;font:400 clamp(.85rem,1.6vw,1rem)/1.45 var(--sans);color:var(--texto);opacity:0;transition:opacity .4s,transform .4s;pointer-events:none;z-index:3;backdrop-filter:blur(4px)}
.hito-toast b{display:block;font:500 1.35rem/1.1 var(--serif);color:var(--oro);margin-bottom:.2rem}
.hito-toast.ver{opacity:1;transform:translate(-50%,0)}

.sonido{position:absolute;right:14px;bottom:12px;z-index:4;width:38px;height:38px;border:1px solid var(--linea);background:rgba(11,10,8,.6);color:var(--oro);font-size:1rem;cursor:pointer}
.sonido.mudo{opacity:.45;text-decoration:line-through}

.capa{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(11,10,8,.9),rgba(11,10,8,.97));padding:16px;overflow-y:auto}
.capa.oculta{display:none}
.capa-caja{max-width:520px;text-align:center}
.capa-caja .antetitulo{justify-content:center}.capa-caja .antetitulo::before{display:none}
.capa-emblema{font:300 clamp(1.6rem,4vw,2.6rem)/1 var(--serif);color:var(--oro);letter-spacing:.06em;margin-bottom:.8rem}
.capa-emblema i{font-style:normal;color:var(--tenue);font-size:.7em;margin:0 .3em}
.capa h2{font:400 clamp(1.5rem,3.4vw,2.3rem)/1.15 var(--serif);color:var(--marfil);margin:0 0 .9rem}
.capa p{font-size:clamp(.85rem,1.6vw,.98rem);line-height:1.6;color:var(--texto);margin:0 0 .9rem}
.instr{color:var(--tenue)!important}
kbd{font:500 .8em var(--sans);border:1px solid var(--linea);padding:.1em .45em;color:var(--oro)}
.mejor{color:var(--tenue)!important;font-size:.82rem!important;margin-top:1rem!important}
.fin-num span{font:300 clamp(3.2rem,9vw,5.4rem)/1 var(--serif);background:var(--grad-oro);-webkit-background-clip:text;background-clip:text;color:transparent}
.fin-num small{display:block;font:500 .66rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--tenue);margin:.3rem 0 .8rem}
.fin-detalle{color:var(--tenue)!important}
.fin-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem;margin:.6rem 0 .4rem}
.fin-form input,.fin-form select{font:400 .95rem/1.4 var(--sans);color:var(--marfil);background:var(--negro);border:1px solid var(--linea);padding:.7rem .8rem;border-radius:0;width:100%}
.fin-form input:focus,.fin-form select:focus{outline:none;border-color:var(--oro)}
.fin-form .boton,.fin-estado{grid-column:1/-1}
.fin-estado{margin:0!important;min-height:1.3em;font-size:.86rem!important}
.fin-estado.ok{color:#b9dab4}.fin-estado.error{color:#eaa59e}
.fin-botones{margin-top:.6rem}

.ranking{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,4vw,3rem);margin-top:3rem}
.ranking .titulo-chico{margin:0 0 1rem}
.nota-r{font-size:.85rem;color:var(--tenue);margin:-.4rem 0 1rem}
.tabla{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea);counter-reset:pos}
.tabla li{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;align-items:baseline;gap:.6rem;padding:.75rem .2rem;border-bottom:1px solid var(--linea);counter-increment:pos}
.tabla li::before{content:counter(pos);font:400 1.3rem/1 var(--serif);color:var(--oro)}
.tabla li:nth-child(1)::before{color:var(--oro-claro);font-weight:600}
.tabla .n{color:var(--marfil);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabla .n small{display:block;font-size:.76rem;color:var(--tenue)}
.tabla .p{font:400 1.25rem/1 var(--serif);color:var(--oro)}
.tabla li.vacio{display:block;color:var(--tenue);font-size:.9rem}
.tabla li.vacio::before{content:none}
.tabla li.yo{background:rgba(216,195,154,.07)}

@media (max-width:760px){
  .escenario{aspect-ratio:3/4;max-height:76vh}
  .ranking{grid-template-columns:minmax(0,1fr)}
  .fin-form{grid-template-columns:minmax(0,1fr)}
  .volver{font-size:.62rem;letter-spacing:.14em}
  .hito-toast{font-size:.8rem;padding:.6rem .8rem;bottom:13%}
  .hito-toast b{font-size:1.1rem}
}