.play-field{max-width:950px;margin:auto;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper)}.play-field canvas{display:block;width:100%;height:clamp(280px,45vw,420px);touch-action:pan-y /* SE PUEDE SALIR DE AQUI DESLIZANDO. Gonzalo: «si estoy
  al lado tratando de hacer scroll para pasar la pelota, me quedo atrapado
  dentro de la seccion». Con `none` el navegador no hace NADA con el gesto, asi
  que el dedo no podia desplazar la pagina sobre el juego: para seguir leyendo
  habia que apuntar fuera del lienzo. Con `pan-y` el desplazamiento vertical
  sigue siendo del navegador y el horizontal del juego, que es el eje que mueve
  la paleta. */;cursor:crosshair}.play-field canvas:focus-visible{outline:3px solid white;outline-offset:-6px}.play-field__bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;font-size:16px}.play-field__bar button{min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:8px;background:var(--cream);color:var(--ink);font:600 16px 'Source Sans 3',sans-serif;cursor:pointer}.play-field-note{font-size:15px;color:var(--muted);max-width:65ch;margin:16px auto}.play-field__bar [hidden]{display:none!important}
.field-comparison{display:flex;gap:8px;padding:10px;background:var(--cream)}.field-comparison button{flex:1;min-height:48px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);font:600 16px 'Source Sans 3',sans-serif;cursor:pointer}.field-comparison button[aria-pressed=true]{background:var(--accent);color:white;border-color:var(--accent)}.field-observation{padding:0 20px 18px;margin:0;font-size:17px;line-height:1.5}.field-lesson{padding-block:32px 50px;max-width:850px}.field-lesson h3{font-size:30px}.field-lesson p{font-size:18px;line-height:1.6}.field-comparison button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

@media(max-width:600px){#touch-field{padding-block:22px}.portfolio-home #touch-field .bh{margin-bottom:12px}.portfolio-home #touch-field .bh h2{font-size:28px;line-height:1.12;margin:8px 0}.portfolio-home #touch-field .bh p{margin:6px 0}.play-field canvas{height:clamp(210px,34dvh,280px)}.play-field__bar{padding:8px 12px;gap:8px}.field-observation{font-size:14px;line-height:1.35;padding:0 12px 10px}.field-comparison{padding:8px}.play-field-note{font-size:14px}.field-lesson{padding-block:14px}}

/* LA BARRA CON CUATRO RITMOS. Con tres cabían en una línea; al añadir
   «Imposible» se rompió: cada botón acabó en su propio renglón y el marcador
   partido en tres. Medido a 390px. En un teléfono los ritmos van en dos filas
   de dos, y el marcador ocupa su propia línea entera. */
@media(max-width:600px){
  .play-field__bar{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  /* El rótulo se va de la vista, no del lector de pantalla: el grupo ya se
     llama «Ritmo» por su aria-label. */
  .play-field__bar .ritmo__etq{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .play-field__bar .ritmo{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;
  }
  .play-field__bar .ritmo button{width:100%;padding:0 8px;font-size:14px;min-height:42px}
  .play-field__bar output{display:block;text-align:center;font-variant-numeric:tabular-nums}
  .play-field__bar>button{width:100%;min-height:44px}
}

/* LOS MANDOS SON OPACOS, Y NO ES UN CAPRICHO.
   El bucle de QA lo cazó recién desplegado: «Sin detalles» daba 3,36:1 cuando
   hacen falta 4,5. Los colores eran correctos —#eaf1ff sobre #0b1f3a— pero el
   fondo llevaba 55% de opacidad, y DETRÁS pasan las líneas claras del campo:
   el fondo compuesto sube a un azul medio y el texto se cae.
   Es la misma lección que los sobres metálicos: un control translúcido sobre
   algo que cambia no tiene un contraste, tiene un rango. Y el rango incluye el
   peor caso. */

/* ---- LOS MANDOS, DENTRO DE LA PANTALLA DEL JUEGO ----
   Gonzalo: «los controles se pierden porque están afuera de la pantalla del
   juego; se me estaba haciendo difícil ver que podía cambiar la velocidad».
   Tenía razón: la barra vivía DEBAJO del lienzo, así que para cambiar el ritmo
   había que dejar de mirar el juego. Ahora van encima del propio lienzo, que
   es donde están los ojos. */
.play-field{position:relative}
.play-field__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;flex-direction:column;gap:8px;align-items:stretch;
  padding:10px 10px 12px;margin:0;
  background:linear-gradient(180deg,#02081500,#020815cc 38%,#020815ee);
  border:0;
}
.play-field__bar .ritmo{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;
}
.play-field__bar .ritmo__etq{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.play-field__bar .ritmo button{
  width:100%;min-height:40px;padding:0 6px;
  border:1px solid #ffffff3d;border-radius:10px;
  background:#0b1f3aed;color:#eaf1ff;
  font:600 13px/1.1 "Source Sans 3",sans-serif;
}
.play-field__bar .ritmo button[aria-pressed="true"]{
  background:#1d4ed8;border-color:#1d4ed8;color:#fff;
}
.play-field__bar output{
  display:block;text-align:center;color:#eaf1ff;
  font:700 14px/1.2 "Source Sans 3",sans-serif;font-variant-numeric:tabular-nums;
}
.play-field__bar>button{
  width:100%;min-height:42px;border:1px solid #ffffff3d;border-radius:10px;
  background:#0b1f3aed;color:#eaf1ff;
  font:600 14px/1.2 "Source Sans 3",sans-serif;
}
/* LOS MANDOS DE ARRIBA SE VAN A LOS LADOS. Gonzalo: «los controles están
   tapando el arco del juego y no puedo ver nada, me distraen; ponlos a los
   lados, que en los lados no necesitan ver nada, pequeños, tipo liquid glass,
   que no bloqueen».
   Tenía razón y era culpa mía: el arco está ARRIBA, que es exactamente donde
   los puse. Los de abajo se quedan, que esos sí le gustan.
   El cristal tiene un límite y no es de gusto: al 69% de opacidad el texto da
   5,30:1 contra el peor fondo posible, y por debajo de ahí deja de leerse.
   Se escoge el valor MÁS transparente que aún se lee, no el más bonito. */
.play-field .field-comparison{
  position:absolute;left:8px;right:auto;top:50%;translate:0 -50%;z-index:3;
  display:flex;flex-direction:column;gap:6px;width:82px;
  background:none;border:0;padding:0;
}
.play-field .field-comparison button{
  min-height:40px;padding:6px 4px;border:1px solid #ffffff42;border-radius:12px;
  background:#0b1f3ab0;color:#eaf1ff;
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  font:600 12px/1.15 "Source Sans 3",sans-serif;
}
.play-field .field-comparison button[aria-pressed="true"]{background:#1d4ed8;border-color:#1d4ed8;color:#fff}

/* EL LIENZO MANDA. Antes medía 230-360px de alto con una barra debajo; ahora
   es el elemento, y los mandos flotan encima. */
.play-field canvas{display:block;height:clamp(420px,72vh,620px);width:100%}

/* El botón de pantalla completa, al otro lado y a la misma altura. */
.play-field__foco{
  position:absolute;right:8px;left:auto;top:50%;translate:0 -50%;z-index:4;
  width:82px;min-height:40px;padding:6px 4px;border:1px solid #ffffff42;border-radius:12px;
  background:#0b1f3ab0;color:#eaf1ff;cursor:pointer;
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  font:600 12px/1.15 "Source Sans 3",sans-serif;
}

/* NO SE SELECCIONA NADA AL JUGAR. Gonzalo: «lo puedo seleccionar todo sin
   querer y me quedo atrapado». Arrastrar el dedo sobre el juego es el gesto
   principal, y el navegador lo entiende como seleccionar texto: sale el menú
   de copiar y ya no puedes jugar hasta tocar fuera. */
.play-field{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html[data-sin-seleccion],html[data-sin-seleccion] *{-webkit-user-select:none!important;user-select:none!important}
.play-field__foco:focus-visible,.play-field__bar button:focus-visible,
.play-field .field-comparison button:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---- A PANTALLA COMPLETA ----
   No se duplica el juego en otro sitio: es el MISMO lienzo, que crece. Un
   juego duplicado son dos juegos que se desincronizan. */
.play-field[data-foco]{
  position:fixed;inset:8px;z-index:70;margin:0;max-width:none;
  border-radius:16px;overflow:hidden;background:#030711;
  box-shadow:0 30px 80px #00000073;
}
.play-field[data-foco] canvas{height:100%}
html[data-foco-juego]{overflow:hidden}
html[data-foco-juego] .rail-bottomnav{display:none}

@media(max-width:600px){
  .play-field canvas{height:clamp(380px,64vh,520px)}
  .play-field__bar .ritmo button{font-size:12.5px;min-height:38px}
  /* OJO: esta regla lo devolvia ARRIBA, encima del arco, mucho despues de que
     la regla de base lo mandara al lado. Una media query que sobreescribe solo
     una propiedad deshace el arreglo sin tocarlo. */
  .play-field .field-comparison,.play-field .field-comparison button,
  .play-field__foco{font-size:11.5px}
  .play-field .field-comparison{width:74px}
  .play-field__foco{width:74px;padding:6px 3px}
}

/* LA NOTA DEBAJO DEL JUEGO, LEGIBLE Y CON AIRE (21-sep).
   Gonzalo, con la captura: «este texto abajo del pong está demasiado cerca y
   pequeño, casi ni lo leo».
   Las dos cosas tienen la misma causa. El <p> nace DENTRO de la caja oscura y
   `play-field.js` lo saca fuera (`insertBefore(nota, box.nextSibling)`), pero
   su relleno seguía siendo el de cuando estaba dentro: `padding:0 20px 18px`,
   cero por arriba. Fuera de la caja, ese cero es lo que lo deja pegado al borde
   negro. Y encima el teléfono lo bajaba a 14px, que es tamaño de pie de foto
   para una frase que es la conclusión del juego.
   Es la nota la que explica para qué sirve todo lo de arriba: si no se lee, el
   juego es un adorno. */
.field-observation{margin:18px auto 0;padding:0;font-size:clamp(17px,1.7vw,19px);
  line-height:1.55;max-width:62ch;color:var(--ink)}
@media(max-width:600px){
  .field-observation{font-size:17px;line-height:1.5;margin-top:16px;padding:0 4px}
}