/* ============================================================================
 *  mas-juegos.css — lo propio de los juegos de "Más juegos"
 * ============================================================================
 *  Se carga después de style.css y juegos.css. Misma paleta y mismos botones;
 *  aquí solo va lo que esos juegos tienen y los de música no: selector de
 *  dificultad, lienzos a pantalla completa y deslizadores.
 *
 *  Móvil primero. Todo lo que se toca mide al menos 44 px y nada provoca
 *  scroll horizontal (probado a 320 px de ancho).
 * ========================================================================== */

/* ------------------------------------------------------ memoria de color */
.color-juego { max-width: 30rem; }
.color-muestras {
  position: relative; display: grid; grid-template-columns: 1fr; gap: .6rem;
  margin-bottom: 1rem;
}
.color-muestras.lado-a-lado { grid-template-columns: 1fr 1fr; }
.color-muestra {
  position: relative; aspect-ratio: 16 / 10; border-radius: 1.1rem;
  border: 1px solid var(--line); background: var(--panel);
  transition: background-color .15s;
}
/* En móvil bajo la muestra no puede comerse los deslizadores. */
@media (max-height: 700px) { .color-muestra { aspect-ratio: 16 / 7; } }
.color-muestras.lado-a-lado .color-muestra { aspect-ratio: 1; }
.color-muestra.vacia { background-image: repeating-linear-gradient(45deg, transparent 0 12px, rgb(255 255 255 / .03) 12px 24px); }
.color-toca { display: none; }
.color-muestra.vacia { cursor: pointer; display: flex; align-items: center; justify-content: center; }
.color-muestra.vacia .color-toca { display: block; color: var(--muted, #9aa); font-weight: 800; font-size: 1.05rem; }
.color-muestra:not(.vacia) { cursor: default; }
.color-cuenta {
  position: absolute; inset: auto 0 0 0; padding: .5rem .8rem .7rem;
  text-align: right; color: #fff; font-weight: 800; font-size: 1.3rem;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgb(0 0 0 / .6);
}
.color-cuenta i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 0 0 1.1rem 1.1rem;
  background: #fff; transform-origin: left; opacity: .85;
}
.color-fase { animation: pop .18s ease-out; }
.color-titulo { margin: 0 0 .25rem; text-align: center; font-size: 1.35rem; }
.color-fase .carta-sub { text-align: center; margin-bottom: 1rem; }
.color-fase .carta-sub.bien { color: var(--hit); font-weight: 700; }
.color-fase .carta-sub.mal { color: var(--near); font-weight: 700; }

.color-deslizador { display: block; margin-bottom: 1rem; }
.color-deslizador > span { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); margin-bottom: .35rem; }
.color-deslizador output { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.color-deslizador input[type=range] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 0;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  /* El dedo arrastra el control, no la página. */
  touch-action: pan-y; cursor: pointer;
}
.color-deslizador input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 3px solid var(--bg); box-shadow: 0 1px 4px rgb(0 0 0 / .5);
}
.color-deslizador input[type=range]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 3px solid var(--bg); box-shadow: 0 1px 4px rgb(0 0 0 / .5);
}
.color-deslizador input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.color-nota { margin: 0; text-align: center; font-variant-numeric: tabular-nums; }
.color-nota strong { font-size: 3rem; line-height: 1; }
.color-nota span { color: var(--muted); font-size: 1.1rem; }
.color-valores {
  display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem;
  margin: 0 auto 1rem; max-width: 18rem; font-size: .88rem;
}
.color-valores dt { color: var(--muted); }
.color-valores dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- rebote */
.rebote-juego { max-width: 34rem; }
.rebote-juego .marcador-barra { margin-bottom: .6rem; }
.rebote-tablero {
  position: relative; display: flex; justify-content: center;
}
#lienzo {
  display: block; border-radius: 1rem; border: 1px solid var(--line);
  background: radial-gradient(120% 80% at 50% 0%, #1a1c28, var(--bg));
  /* El arrastre apunta, no hace scroll ni zoom. */
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.rebote-pausado, .rebote-fin {
  position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content;
}
.rebote-pausado { padding: .8rem 1.2rem; border-radius: 999px; font-weight: 700; }
.rebote-fin {
  text-align: center; padding: 1.2rem 1.4rem; border-radius: 1rem;
  background: rgb(14 15 19 / .85); border: 1px solid var(--line);
}
.rebote-fin p { margin: 0 0 .8rem; font-size: 1.3rem; font-weight: 800; }
.rebote-controles {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: .6rem;
}
.rebote-controles button { min-width: 48px; min-height: 44px; font-weight: 800; }
.rebote-controles .fine { margin: 0; text-align: center; font-size: .78rem; }
.rebote-fin .primary { background: var(--accent); border-color: var(--accent); font-weight: 800; min-height: 44px; }

/* ----------------------------------------------------------- cuántos hay */
.vaso-juego { max-width: 32rem; }
.vaso-juego .nivel { cursor: default; }
.vaso-inicio { text-align: center; padding: 2rem 0 1rem; }
.vaso-inicio .carta-sub { margin-bottom: 1rem; }
.vaso-vacio {
  display: flex; align-items: center; justify-content: center; width: min(15rem, 70%); aspect-ratio: 4 / 5;
  margin: 0 auto; border: 3px solid var(--line); border-top: 0; border-radius: 0 0 2.2rem 2.2rem;
  background: linear-gradient(180deg, transparent, rgb(255 255 255 / .05)); color: var(--muted, #9aa);
  font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer;
}
.vaso {
  position: relative; width: 100%;
  /* Alto que cabe en un móvil dejando sitio al número debajo. */
  height: min(58vh, 30rem); height: min(58dvh, 30rem);
}
.vaso canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.vaso-pista { position: absolute; left: 0; right: 0; bottom: .2rem; margin: 0; text-align: center; font-size: .75rem; color: var(--muted); pointer-events: none; }
.vaso-estimar { margin-top: .8rem; animation: pop .18s ease-out; }
.vaso-estimar label { display: block; font-weight: 800; margin-bottom: .5rem; text-align: center; }
.vaso-fila { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.vaso-fila input {
  width: min(15rem, 100%); min-width: 0; min-height: 52px; padding: 0 1rem; border-radius: .8rem;
  border: 1.5px solid var(--line); background: var(--panel); color: var(--text);
  /* 16 px o más: por debajo, Safari de iPhone hace zoom al enfocar. */
  font: inherit; font-size: 1.25rem; font-weight: 800; text-align: center;
}
/* Sin las flechitas del campo numérico: empujan la cifra a un lado y no la dejan centrada. */
.vaso-fila input { -moz-appearance: textfield; appearance: textfield; }
.vaso-fila input::-webkit-outer-spin-button, .vaso-fila input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vaso-fila input:focus { outline: none; border-color: var(--accent); }
.vaso-fila .primary { width: min(15rem, 100%); min-height: 48px; font-weight: 800; background: var(--accent); border-color: var(--accent); }
.vaso-estimar .fine { text-align: center; }
.vaso-resultado { margin-top: .8rem; text-align: center; animation: pop .18s ease-out; }
.vaso-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .6rem; }
.vaso-cifras div { background: var(--panel); border: 1px solid var(--line); border-radius: .8rem; padding: .6rem .3rem; }
.vaso-cifras span { display: block; font-size: .72rem; color: var(--muted); }
.vaso-cifras strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.vaso-cifras div:last-child strong { color: var(--accent); }
.vaso-resultado .primary-ancho { margin: .4rem 0 .8rem; }

/* ------------------------------------------------------------- fronteras */
.fronteras-juego { max-width: 34rem; }
.fronteras-ruta {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem;
  margin-bottom: .6rem; text-align: center;
}
.fronteras-ruta > div:not(.fronteras-entre) {
  background: var(--panel); border: 1.5px solid var(--accent); border-radius: .8rem; padding: .4rem .5rem; min-width: 0;
}
.fronteras-ruta span { display: block; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fronteras-ruta b { display: block; font-size: .98rem; line-height: 1.2; overflow-wrap: anywhere; }
.fronteras-entre strong { display: block; font-size: 1.4rem; line-height: 1; }
.fronteras-globo {
  position: relative; width: 100%;
  height: min(50vh, 26rem); height: min(50dvh, 26rem);
}
#globo { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#globo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1rem; }
.fronteras-cargando { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); }
.fronteras-cargando[hidden] { display: none; }
.fronteras-zoom { position: absolute; right: 0; bottom: .3rem; display: grid; gap: .35rem; }
.fronteras-zoom button { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 1.2rem; font-weight: 800; background: rgb(23 25 34 / .9); }
.fronteras-entrada { position: relative; display: flex; gap: .5rem; margin-top: .6rem; }
.fronteras-entrada input {
  flex: 1; min-width: 0; min-height: 50px; padding: 0 .9rem; border-radius: .8rem;
  border: 1.5px solid var(--line); background: var(--panel); color: var(--text);
  font: inherit; font-size: 16px;   /* 16 px: Safari de iPhone no hace zoom al enfocar */
}
.fronteras-entrada input:focus { outline: none; border-color: var(--accent); }
.fronteras-entrada .primary { font-weight: 800; background: var(--accent); border-color: var(--accent); min-width: 5.5rem; }
/* Las sugerencias se abren HACIA ARRIBA: abajo las taparía el teclado del móvil. */
.sugerencias {
  position: absolute; left: 0; right: 0; bottom: calc(100% + .35rem); z-index: 5;
  display: grid; background: var(--panel); border: 1px solid var(--line); border-radius: .8rem; overflow: hidden;
  box-shadow: 0 -8px 24px rgb(0 0 0 / .4);
}
.sugerencias[hidden] { display: none; }
.sugerencia { border: 0; border-radius: 0; text-align: left; min-height: 44px; padding: .5rem .9rem; border-bottom: 1px solid var(--line); }
.sugerencia:last-child { border-bottom: 0; }
.fronteras-pie { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; color: var(--muted); font-size: .9rem; }
.fronteras-pie strong { color: var(--text); }
.fronteras-pie .link { min-height: 44px; }
.fronteras-lista { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.intento { display: flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; font-size: .88rem; font-weight: 700; border: 1.5px solid var(--line); animation: pop .18s ease-out; }
.intento.bien { border-color: var(--hit); background: color-mix(in srgb, var(--hit) 18%, var(--panel)); }
.intento.desvio { border-color: var(--near); background: color-mix(in srgb, var(--near) 18%, var(--panel)); }
.intento.fuera { border-color: #8a4646; background: color-mix(in srgb, #8a4646 18%, var(--panel)); }
.fronteras-fin { text-align: center; margin-top: .6rem; animation: pop .18s ease-out; }
.fronteras-fin h2 { margin: 0 0 .25rem; }
.fronteras-fin .actions { display: flex; gap: .5rem; justify-content: center; margin: .8rem 0; }
.fronteras-fin .actions button { min-height: 46px; font-weight: 800; }
.fronteras-fin .primary { background: var(--accent); border-color: var(--accent); }

/* Móvil en horizontal: el tablero es vertical y no cabe. Mejor decirlo que
   dejar media partida fuera de la pantalla. */
.rebote-girar { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rebote-girar {
    display: grid; place-items: center; position: absolute; inset: 0; margin: 0; z-index: 3;
    background: rgb(14 15 19 / .92); border-radius: 1rem; font-weight: 800; text-align: center; padding: 1rem;
  }
}

/* Los botones anchos no se pegan al control de encima (el pulgar del
   deslizador sobresale unos píxeles de su pista). */
.color-fase .primary-ancho { margin-top: 1.6rem; }
.color-deslizador:last-of-type { margin-bottom: 0; }

/* --------------------------------------------- "GIF" de Cómo se juega (juegos-demo.js) */
.demo-anim[data-demo="color"]      { height: 214px; }
.demo-anim[data-demo="rebote"]     { height: 224px; }
.demo-anim[data-demo="vaso"]       { height: 248px; }
.demo-anim[data-demo="fronteras"]  { height: 190px; }

/* color */
.d-col-par { display: flex; gap: .7rem; width: 100%; }
.d-col-lado { flex: 1; display: grid; gap: .2rem; text-align: center; }
.d-col-lado small { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.d-col-caja {
  position: relative; height: 66px; border-radius: .8rem; border: 1px solid var(--line);
  display: grid; place-items: center; transition: background-color .45s;
}
.d-col-caja.vacia, .d-col-caja.oculto { background-color: var(--panel) !important; background-image: repeating-linear-gradient(45deg, var(--panel) 0 10px, var(--bg) 10px 20px) !important; }
.d-col-cuenta { font-size: 1.8rem; color: #fff; text-shadow: 0 1px 4px rgb(0 0 0 / .6); }
.d-sliders { display: grid; gap: .35rem; width: 100%; }
.d-barra { display: grid; grid-template-columns: 5.2rem 1fr; align-items: center; gap: .5rem; }
.d-barra small { font-size: .68rem; color: var(--muted); font-weight: 700; }
.d-pista { position: relative; height: 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.d-pulgar {
  position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 3px solid var(--bg); box-shadow: 0 1px 4px rgb(0 0 0 / .5); transform: translate(-50%, -50%);
  transition: left .5s cubic-bezier(.3,.7,.3,1);
}

/* rebote */
.d-reb { position: relative; width: 100%; height: 170px; border-radius: .8rem; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.d-bloque {
  position: absolute; top: 10px; width: 28%; height: 34px; border-radius: .5rem; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 800; transition: transform .12s, opacity .3s;
}
.d-bloque:nth-child(1) { left: 5%; } .d-bloque:nth-child(2) { left: 36%; } .d-bloque:nth-child(3) { left: 67%; }
.d-bloque.d-golpe { transform: scale(.88); filter: brightness(1.5); }
.d-bloque.roto { opacity: 0; }
.d-bola { position: absolute; left: calc(50% - 8px); bottom: 12px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .45s cubic-bezier(.4,0,.8,.6); }
.d-linea {
  position: absolute; left: calc(50% - 1px); bottom: 20px; width: 2px; height: 0; transform-origin: bottom center; opacity: 0;
  background: repeating-linear-gradient(to top, rgb(255 255 255 / .85) 0 5px, transparent 5px 11px);
}
.d-linea.visible { opacity: 1; }

/* vaso */
.d-vaso {
  position: relative; width: 112px; height: 88px; flex: none; border: 2px solid rgb(255 255 255 / .55); border-top: 0;
  border-radius: 0 0 1rem 1rem; background: rgb(207 227 255 / .08);
}
.d-pieza {
  position: absolute; width: 12px; height: 12px; border-radius: 3px; background: #e6b56a;
  opacity: 0; transform: translateY(-70px); transition: transform .35s cubic-bezier(.5,0,1,.6), opacity .1s;
}
.d-pieza.cae { opacity: 1; transform: none; }

/* fronteras */
.d-ruta { display: flex; align-items: center; justify-content: center; gap: .3rem; width: 100%; }
.d-pais {
  flex: 1; min-width: 0; text-align: center; padding: .55rem .2rem; border-radius: .6rem; font-size: .78rem; font-weight: 800;
  border: 1.5px solid var(--accent); background: var(--panel); overflow: hidden; text-overflow: ellipsis;
}
.d-pais.vacio { border-style: dashed; border-color: var(--muted); color: var(--muted); }
.d-pais.bien { border-color: var(--hit); background: color-mix(in srgb, var(--hit) 22%, var(--panel)); color: var(--text); }
.d-flecha { color: var(--muted); font-style: normal; font-weight: 800; }
.fronteras-progreso { margin: .7rem 0 0; font-size: .85rem; line-height: 1.4; color: var(--muted); }
.fronteras-progreso[hidden] { display: none; }

/* ¿Cuántos hay?: el camino de hoy (Fácil → Imposible), solo para mirar. */
.niveles.progreso .nivel {
  display: inline-flex; align-items: center; cursor: default;
  border: 1.5px solid var(--line); background: var(--panel);
}
.niveles.progreso .nivel.hecho:not(.activo) { color: var(--hit); border-color: color-mix(in srgb, var(--hit) 45%, var(--line)); }
.vaso-resultado #siguiente-btn { margin: .6rem 0; }
.vaso-resultado #siguiente-btn[hidden] { display: none; }
.niveles.progreso { gap: .3rem; }
.niveles.progreso .nivel { padding: .2rem .55rem; min-height: 32px; font-size: .76rem; }

/* El nivel sube solo: los chips quedan ocultos (el juego los sigue calculando). */
.niveles[hidden] { display: none !important; }