.sala { background: var(--azul-suave); background-image: radial-gradient(#ffffffb0 2px, #0000 2.5px); background-size: 26px 26px; }
.j-cabecera { display: flex; justify-content: space-between; align-items: center; padding-block: 1.1rem; }
.j-volver { text-decoration: none; display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; }
.j-volver .titular { font-size: 1.9rem; }
.j-volver em { font-style: normal; color: var(--rojo); }

.j-portada { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; padding: 1.5rem 0 2.5rem; }
.j-portada > .etiqueta { width: 100%; margin: 0; color: var(--azul); }
.j-portada h1 { font-size: clamp(4.4rem, 15vw, 10rem); text-shadow: 5px 5px 0 var(--rojo); }
.elige { background: var(--papel); border: var(--borde); border-radius: 18px; padding: 1rem 1.1rem 1.1rem; box-shadow: 5px 5px 0 var(--tinta); }
.elige .etiqueta { margin: 0 0 .7rem; color: var(--menta-fuerte); }
.elige__opciones { display: flex; gap: .6rem; }
.elige__opciones button { display: grid; justify-items: center; gap: .3rem; padding: .5rem .6rem; background: var(--fondo); border: 2px solid var(--linea); border-radius: 12px; font-weight: 800; font-size: .85rem; text-transform: uppercase; min-width: 84px; }
.elige__opciones img, .elige__opciones .ambos { width: 54px; height: 54px; border-radius: 50%; background: var(--menta); object-fit: cover; }
.elige__opciones .ambos { display: flex; }
.elige__opciones .ambos img { width: 34px; height: 34px; margin: 10px -6px 0 0; border: 2px solid var(--tinta); }
.elige__opciones button[aria-pressed=true] { background: var(--azul); color: #fff; border-color: var(--tinta); }

/* ---- Máquinas (tarjetas de juego) ---- */
.maquinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.6rem; padding-bottom: 5rem; }
.maquina {
  --c: var(--rojo-suave); position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
  background: var(--papel); border: var(--borde); border-radius: 22px; box-shadow: 6px 6px 0 var(--tinta); transition: transform .15s;
}
.maquina:hover { transform: translate(-3px, -3px) rotate(-.6deg); }
.maquina__pantalla { position: relative; height: 190px; background: var(--c); display: grid; place-items: center; overflow: hidden; border-bottom: var(--borde); }
.maquina__pantalla img { width: 120px; height: 120px; border-radius: 50%; border: var(--borde); background: var(--papel); object-fit: cover; position: relative; z-index: 1; }
.maquina__emoji { position: absolute; font-size: 3.4rem; z-index: 2; filter: drop-shadow(3px 3px 0 #22302b55); }
.maquina__cuerpo { display: block; padding: 1rem 1.2rem 1.3rem; }
.maquina h2 { margin: 0; font-weight: 900; font-stretch: 62%; font-size: 2.4rem; line-height: .95; text-transform: uppercase; }
.maquina p { margin: .4rem 0 .8rem; font-size: .92rem; color: var(--tinta-suave); }
.maquina__record { font: 700 .78rem var(--mono); color: var(--rojo); text-transform: uppercase; }
.maquina:nth-child(1) { --c: var(--menta); }
.maquina:nth-child(2) { --c: var(--rojo-suave); }
.maquina:nth-child(3) { --c: var(--amarillo); }
.maquina:nth-child(4) { --c: var(--rosa); }
.maquina:nth-child(1) .maquina__emoji { right: 18%; bottom: 18%; transform: rotate(-30deg); }
.maquina:nth-child(2) .maquina__emoji { left: 14%; top: 14%; }
.maquina:nth-child(3) .maquina__emoji { right: 14%; top: 14%; }
.maquina:nth-child(4) .maquina__emoji { left: 50%; top: 4%; transform: translateX(-50%); }
.maquina__pantalla::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, #0000 0 18px, #ffffff66 18px 30px); }

/* ---- Escenario ---- */
.escenario { position: fixed; inset: 0; z-index: 100; background: var(--fondo); display: flex; flex-direction: column; touch-action: none; }
.escenario__barra { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; padding-top: max(.7rem, env(safe-area-inset-top)); border-bottom: 1.5px solid var(--linea); background: var(--papel); }
.escenario__salir { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--papel); font-size: 1.2rem; flex: none; }
.escenario__titulo { font-size: 1.9rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.escenario__marcador { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--rojo); text-align: right; white-space: nowrap; }
.escenario__zona { flex: 1; position: relative; display: grid; place-items: center; overflow: hidden; padding: 1rem; }

/* Pantallas de inicio / fin dentro de un juego */
.panel-juego { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: #ffffffee; padding: 1.5rem; text-align: center; }
.panel-juego > div { max-width: 420px; display: grid; justify-items: center; gap: .8rem; }
.panel-juego img { width: 130px; height: 130px; border-radius: 50%; border: var(--borde); background: var(--menta); object-fit: cover; box-shadow: 5px 5px 0 var(--amarillo); }
.panel-juego h2 { margin: 0; font-weight: 900; font-stretch: 62%; font-size: clamp(2.8rem, 10vw, 4.2rem); line-height: .9; text-transform: uppercase; }
.panel-juego p { margin: 0; color: var(--tinta-suave); }
.panel-juego .grande { font: 700 3rem var(--mono); color: var(--rojo); }
.estrellas { font-size: 2.4rem; letter-spacing: .2em; color: #e0a800; }

.globo { position: absolute; pointer-events: none; font: 900 1.5rem var(--sans); font-stretch: 70%; text-transform: uppercase; color: var(--rojo); text-shadow: 2px 2px 0 #fff; animation: globo .8s forwards; z-index: 20; }
@keyframes globo { to { transform: translateY(-50px); opacity: 0; } }

/* ---- Afeitado ---- */
.afeitado canvas { touch-action: none; cursor: none; border-radius: 24px; background: var(--menta); border: var(--borde); box-shadow: 6px 6px 0 var(--tinta); max-height: 100%; }
.barra-tiempo { position: absolute; left: 1rem; right: 1rem; top: .6rem; height: 10px; background: var(--linea); border-radius: 99px; overflow: hidden; z-index: 5; }
.barra-tiempo i { display: block; height: 100%; background: var(--rojo); transition: width .1s linear; }

/* ---- Pilla al barbero ---- */
.pilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 3vw, 1.4rem); width: min(100%, 520px, 70vh); }
.sillon { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 20px 20px 10px 10px; background: var(--fondo-2); border: 1.5px solid var(--linea); cursor: pointer; }
.sillon__cara { position: absolute; left: 12%; width: 76%; aspect-ratio: 1; bottom: -80%; border-radius: 50%; object-fit: cover; background: var(--menta); border: 2px solid var(--tinta); transition: bottom .14s ease-out; display: grid; place-items: center; font-size: 3rem; }
.sillon.arriba .sillon__cara { bottom: 22%; }
.sillon.pillado .sillon__cara { filter: brightness(1.3) saturate(.4); transform: scale(.9) rotate(12deg); }
.sillon__respaldo { position: absolute; left: 6%; right: 6%; bottom: 0; height: 36%; background: var(--rojo); border: 2px solid var(--tinta); border-radius: 18px 18px 6px 6px; z-index: 2;
  background-image: repeating-linear-gradient(90deg, #0000 0 14px, #0001 14px 16px); }
.sillon:nth-child(3n+2) .sillon__respaldo { background-color: var(--menta); }
.sillon:nth-child(3n) .sillon__respaldo { background-color: var(--amarillo); }

/* ---- Memoria ---- */
.memoria { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.4rem, 2vw, .8rem); width: min(100%, 520px, 68vh); }
.carta { aspect-ratio: 1; perspective: 600px; background: none; border: 0; padding: 0; }
.carta__in { display: block; position: relative; width: 100%; height: 100%; transition: transform .35s; transform-style: preserve-3d; }
.carta.vuelta .carta__in, .carta.hecha .carta__in { transform: rotateY(180deg); }
.carta__cara, .carta__dorso { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; border: 2px solid var(--tinta); display: grid; place-items: center; }
.carta__dorso { background: repeating-linear-gradient(-45deg, var(--rojo) 0 10px, #fff 10px 16px, var(--azul) 16px 26px, #fff 26px 32px); box-shadow: inset 0 0 0 5px #fff; }
.carta__cara { transform: rotateY(180deg); background: var(--papel); font-size: clamp(1.8rem, 8vw, 2.8rem); overflow: hidden; }
.carta__cara img { width: 100%; height: 100%; object-fit: cover; background: var(--menta); }
.carta.hecha .carta__cara { background: var(--menta); animation: bien .4s; }
@keyframes bien { 50% { transform: rotateY(180deg) scale(1.12); } }

/* ---- Estilista ---- */
.estilista { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; width: min(100%, 900px); height: 100%; align-items: center; }
.lienzo { position: relative; aspect-ratio: 1; width: min(100%, 62vh); margin: auto; background: var(--menta); border: var(--borde); border-radius: 24px; overflow: hidden; touch-action: none;
  background-image: radial-gradient(#ffffff88 2px, #0000 2.5px); background-size: 20px 20px; box-shadow: 6px 6px 0 var(--tinta); }
.lienzo__cara { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; border-radius: 50%; object-fit: cover; pointer-events: none; }
.pegote { position: absolute; transform: translate(-50%, -50%); cursor: grab; touch-action: none; user-select: none; }
.pegote svg { width: 100%; height: auto; overflow: visible; pointer-events: none; }
.pegote.sel { outline: 2px dashed var(--tinta); outline-offset: 4px; border-radius: 6px; }
.cajon { background: var(--papel); border: 2px solid var(--linea); border-radius: 18px; padding: .8rem; display: grid; gap: .7rem; max-height: 100%; overflow: auto; }
.cajon__pestanas { display: flex; gap: .3rem; }
.cajon__pestanas button { flex: 1; padding: .45rem .3rem; border-radius: 10px; border: 2px solid var(--linea); background: none; font-weight: 800; font-size: .78rem; text-transform: uppercase; }
.cajon__pestanas button[aria-pressed=true] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.cajon__pegatinas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.cajon__pegatinas button { aspect-ratio: 1; background: var(--fondo); border: 2px solid var(--linea); border-radius: 12px; padding: 6px; display: grid; place-items: center; }
.cajon__pegatinas button:hover { border-color: var(--tinta); }
.cajon__pegatinas svg { width: 100%; height: 100%; }
.cajon__colores { display: flex; flex-wrap: wrap; gap: .35rem; }
.cajon__colores button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--tinta); }
.cajon__acciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.cajon__acciones button { flex: 1 0 40px; padding: .5rem; border-radius: 10px; border: 2px solid var(--linea); background: var(--fondo); font-weight: 800; }
.cajon .btn { width: 100%; }
@media (max-width: 760px) {
  .estilista { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; }
  .lienzo { width: min(100%, 46vh); }
  .cajon__pegatinas { grid-template-columns: repeat(6, 1fr); }
}