/* ═══════════════════════════════════════════════════════
   RAM RAM · Atrapa las bolas
   Reutiliza las variables de css/estilos.css (mismo :root)
   ═══════════════════════════════════════════════════════ */

.pagina-juego{
  min-height:100svh;
  display:flex;flex-direction:column;
  background:var(--nori);
  overscroll-behavior:none;
}

/* ── barra superior ── */
.barra-juego{
  display:flex;align-items:center;gap:1rem;
  padding:.9rem 1.25rem;
  color:var(--crema);
  border-bottom:1px solid rgba(247,235,218,.14);
}
.barra-juego__marca{
  display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;color:inherit;
  font-family:var(--display);
  font-variation-settings:"wdth" 100,"wght" 800;
  font-size:1rem;letter-spacing:-.01em;
}
.barra-juego__punto{width:6px;height:6px;border-radius:50%;background:var(--coral);display:inline-block;margin:0 .1em}
.barra-juego__flecha{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.75;transition:transform .2s,opacity .2s}
.barra-juego__marca:hover .barra-juego__flecha{opacity:1;transform:translateX(-2px)}

.barra-juego__mute{
  background:transparent;border:1px solid rgba(247,235,218,.22);border-radius:999px;
  width:34px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--crema);
  transition:border-color .2s,background-color .2s;
}
.barra-juego__mute:hover{border-color:rgba(247,235,218,.5)}
.icono-sonido{width:17px;height:17px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icono-sonido__onda{fill:none}
.icono-sonido__tache{fill:none;stroke:var(--coral);opacity:0;transition:opacity .15s}
.barra-juego__mute[aria-pressed="true"] .icono-sonido__onda{opacity:.25}
.barra-juego__mute[aria-pressed="true"] .icono-sonido__tache{opacity:1}
.barra-juego__titulo{
  margin:0 auto;font-family:var(--display);
  font-variation-settings:"wdth" 82,"wght" 700;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,235,218,.6);
}
@media(max-width:480px){.barra-juego__titulo{font-size:.68rem;letter-spacing:.14em}}

/* ── tablero ── */
.tablero-envoltura{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.25rem;gap:.8rem;
}
/* El tablero es la barra de despacho de la cocina de Ram Ram: cortina
   noren con olas seigaiha arriba, mostrador nori con filo coral abajo,
   y el cielo durazno de siempre en medio. Todo en capas de fondo para
   no tocar el canvas, que solo dibuja lo que se mueve. */
.tablero{
  position:relative;
  width:min(520px,100%);
  aspect-ratio:9/14;
  max-height:min(78svh,760px);
  border-radius:14px;
  overflow:hidden;
  background-color:var(--durazno-hondo);
  background-image:
    repeating-radial-gradient(circle at 16px 9px, rgba(247,235,218,.16) 0 6px, transparent 6px 8px),
    linear-gradient(180deg, var(--nori) 0%, var(--nori) 100%),
    linear-gradient(180deg, var(--nori) 0%, var(--nori) 100%),
    linear-gradient(180deg, var(--coral) 0%, var(--coral) 100%),
    linear-gradient(180deg, var(--durazno) 0%, var(--durazno-hondo) 100%);
  background-size:
    32px 34px,
    100% 26px,
    100% 44px,
    100% 3px,
    100% 100%;
  background-position:
    top left,
    top,
    bottom,
    bottom 44px left,
    center;
  background-repeat:
    repeat-x,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(247,235,218,.08);
  touch-action:none;
}
.tablero__lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}

/* ── guirnalda: farolitos japoneses alternados con chiles rojos ──
   La fusión "japomexa" de Ram Ram, literal y decorativa, colgando
   arriba del tablero como en un changarro de verdad. */
.guirnalda{
  position:absolute;top:6px;left:0;right:0;z-index:2;
  display:flex;justify-content:space-evenly;padding:0 6%;
  pointer-events:none;
}
.guirnalda__foco{
  position:relative;
  width:11px;height:15px;border-radius:3px 3px 6px 6px;
  box-shadow:0 -5px 0 -3px rgba(247,235,218,.5);
  animation:mecer 3.4s ease-in-out infinite;
}
.guirnalda__foco::before{
  content:"";position:absolute;top:-5px;left:50%;width:1px;height:5px;
  background:rgba(247,235,218,.4);transform:translateX(-50%);
}
.guirnalda__foco--farol{
  background:radial-gradient(circle at 50% 35%, #FFE9C7, var(--durazno-hondo) 75%);
  box-shadow:0 0 6px 1px rgba(249,201,166,.55);
}
.guirnalda__foco--chile{
  width:8px;height:16px;border-radius:2px 2px 8px 8px;
  background:linear-gradient(180deg, #E8503A, #C13A28);
  box-shadow:0 0 4px 0 rgba(200,60,40,.4);
}
.guirnalda__foco:nth-child(odd){animation-delay:0s}
.guirnalda__foco:nth-child(even){animation-delay:1.2s}
@keyframes mecer{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.guirnalda__foco{animation:none}}
@media(max-width:380px){.guirnalda{padding:0 3%}.guirnalda__foco:nth-child(n+6){display:none}}

/* ── vaho de la barra ──
   Tres nubes que suben despacio detrás del juego: "se hace al momento,
   sale calientito", el mismo gancho que usa la página principal. */
.vaho{
  position:absolute;bottom:44px;z-index:1;
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle, rgba(247,235,218,.5), transparent 70%);
  filter:blur(2px);
  animation:subir-vaho 6s ease-in infinite;
}
.vaho--1{left:18%;animation-delay:0s}
.vaho--2{left:52%;width:26px;height:26px;animation-delay:2s}
.vaho--3{left:78%;width:30px;height:30px;animation-delay:4s}
@keyframes subir-vaho{
  0%{transform:translateY(0) scale(.8);opacity:0}
  20%{opacity:.55}
  100%{transform:translateY(-220px) scale(1.3);opacity:0}
}
@media(prefers-reduced-motion:reduce){.vaho{animation:none;display:none}}
.tablero__nota{
  font-size:.72rem;color:rgba(247,235,218,.4);text-align:center;max-width:520px;margin:0;
  line-height:1.7;
}
.tablero__credito{
  color:rgba(247,235,218,.62);text-decoration:none;
  border-bottom:1px solid rgba(247,235,218,.28);
  transition:color .2s,border-color .2s;
}
.tablero__credito:hover{color:var(--durazno);border-color:var(--durazno)}

/* ── marcador en juego ──
   Empieza más abajo que el borde del tablero a propósito: la guirnalda
   de farolitos vive justo arriba (top:6px + su propio alto), y si el
   marcador arranca en top:0 se encima con las lucecitas. Bajándolo,
   los dos elementos conviven sin pisarse. */
.marcador{
  position:absolute;top:38px;left:0;right:0;z-index:5;
  display:flex;align-items:center;gap:1rem;
  padding:.6rem 1rem;
  background:linear-gradient(180deg, rgba(20,17,14,.45), transparent);
  color:var(--arroz);
}
.marcador[hidden]{display:none}
.marcador__dato{display:flex;flex-direction:column;line-height:1.1}
.marcador__dato--tiempo{margin-left:auto;align-items:flex-end}
.marcador__etiqueta{
  font-family:var(--display);font-variation-settings:"wdth" 78,"wght" 700;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;opacity:.7;
}
.marcador__valor{
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 900;
  font-size:1.4rem;font-variant-numeric:tabular-nums;
}
/* Las vidas son el sprite real de la bola de arroz, en miniatura y sin
   suavizar — la misma pieza que cae del cielo, no un punto genérico. */
.marcador__vidas{display:flex;gap:.4rem}
.marcador__vidas span{
  width:18px;height:18px;
  background-image:url("../img/obj-bola.png");
  background-size:contain;background-repeat:no-repeat;background-position:center;
  image-rendering:pixelated;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.35));
  transition:opacity .2s,filter .2s;
}
.marcador__vidas span[data-perdida="si"]{opacity:.22;filter:grayscale(1)}

/* Combo: aparece solo cuando hay racha, con un pequeño golpe de escala
   cada vez que sube, para que se sienta un logro y no un dato más. */
.marcador__combo{
  font-family:var(--display);font-variation-settings:"wdth" 90,"wght" 800;
  font-size:.78rem;letter-spacing:.02em;color:var(--coral);
  background:rgba(238,127,95,.14);border:1px solid rgba(238,127,95,.4);
  padding:.25rem .6rem;border-radius:999px;
  animation:combo-pop .3s ease-out;
}
@keyframes combo-pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}

/* ── paneles (inicio / fin) ── */
.panel{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  justify-content:safe center;
  gap:1.1rem;text-align:center;padding:1.75rem 1.5rem;
  overflow-y:auto;
  background:
    repeating-radial-gradient(circle at 20px 12px, rgba(247,235,218,.05) 0 8px, transparent 8px 10px),
    linear-gradient(180deg, rgba(20,17,14,.86), rgba(20,17,14,.94));
  color:var(--crema);
  backdrop-filter:blur(2px);
}
/* El atributo hidden debe ganarle a .panel{display:flex}; sin esto,
   la especificidad empata con la hoja del navegador y ambos paneles
   quedan visibles encimados aunque JS les ponga [hidden]. */
.panel[hidden]{display:none}
.panel__arco{
  position:absolute;top:1.1rem;left:50%;transform:translateX(-50%);
  width:min(280px,72%);color:rgba(249,201,166,.45);pointer-events:none;
}
.panel__ceja{
  font-family:var(--display);font-variation-settings:"wdth" 78,"wght" 700;
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--coral);margin:0;
}
.panel__titulo{
  font-variation-settings:"wdth" 118,"wght" 900;
  font-size:clamp(1.9rem,8vw,2.6rem);letter-spacing:-.02em;margin:0;
}
.panel__titulo--chico{font-size:clamp(1.5rem,6vw,2rem)}
.panel__texto{max-width:26rem;font-size:.92rem;color:rgba(247,235,218,.78);margin:0}

/* elegir personaje — colores de la portada (durazno/coral), no un
   esquema aparte: esta pantalla debe sentirse parte del mismo sitio. */
.elige-personaje{display:flex;flex-direction:column;gap:.6rem;align-items:center}
.elige-personaje__etiqueta{
  font-family:var(--display);font-variation-settings:"wdth" 82,"wght" 700;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,235,218,.55);margin:0;
}
.elige-personaje__opciones{display:flex;gap:.9rem}
.tarjeta-personaje{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  background:rgba(249,201,166,.94);border:2px solid rgba(20,17,14,.15);border-radius:12px;
  padding:.7rem .9rem;cursor:pointer;color:var(--nori);
  font-family:var(--display);font-variation-settings:"wdth" 90,"wght" 700;font-size:.85rem;
  transition:border-color .2s,transform .2s,background-color .2s;
}
.tarjeta-personaje:hover{transform:translateY(-2px)}
/* Antes cada quien tenía su color (coral/matcha); ahora los dos usan
   el acento de la portada al seleccionarse, para que esta pantalla se
   vea como parte del mismo sitio, no como una sección aparte. */
.tarjeta-personaje[aria-checked="true"]{
  border-color:var(--coral);background:var(--durazno-hondo);
}
.tarjeta-personaje__sprite{
  width:64px;height:auto;display:block;image-rendering:pixelated;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.3));
}
.tarjeta-personaje small{
  font-family:var(--texto);font-variation-settings:normal;
  font-size:.66rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:rgba(247,235,218,.5);
}

/* Récord en este teléfono: antes era una línea chica y apagada: se
   perdía. Ahora el número tiene el mismo tratamiento visual que el
   resto de las cifras importantes del juego. */
.panel__record{
  font-size:.85rem;color:rgba(247,235,218,.65);margin:0;
  display:flex;align-items:baseline;gap:.4rem;justify-content:center;flex-wrap:wrap;
}
.panel__record strong{
  font-family:var(--display);font-variation-settings:"wdth" 105,"wght" 900;
  font-size:1.3rem;color:var(--durazno);
}
.panel__controles{
  display:flex;gap:1.3rem;flex-wrap:wrap;justify-content:center;
  font-size:.72rem;color:rgba(247,235,218,.5);margin:0;
}
.panel__controles-item{display:inline-flex;align-items:center;gap:.4rem}
.panel__controles-item svg{
  width:16px;height:16px;flex:none;
  fill:none;stroke:var(--durazno);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.panel__acciones{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}

/* Crédito de MyA Systems al cerrar la partida: es el punto de mayor
   intención de toda la página — acaban de comprobar el diferenciador. */
.panel__firma{
  margin:0;font-size:.76rem;color:rgba(247,235,218,.5);max-width:24rem;line-height:1.6;
}
.panel__firma a{
  color:var(--durazno);text-decoration:none;font-weight:700;
  border-bottom:1px solid rgba(242,177,135,.4);
  transition:border-color .2s;
}
.panel__firma a:hover{border-color:var(--durazno)}

.resultado{display:flex;gap:1.5rem;align-items:baseline}
.resultado__item{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.resultado__item[hidden]{display:none}
.resultado__valor{
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 900;
  font-size:2.6rem;color:var(--durazno);line-height:1;
}
.resultado__valor--chico{font-size:1.6rem;color:#8FC9AE}
.resultado__medalla{
  width:34px;height:34px;
  fill:rgba(238,127,95,.16);stroke:var(--coral);stroke-width:1.4;
  stroke-linejoin:round;
  filter:drop-shadow(0 2px 4px rgba(238,127,95,.35));
}
.resultado__etiqueta{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,235,218,.6);
}

@media(prefers-reduced-motion:reduce){
  .tarjeta-personaje{transition:none}
}