/* =========================================================
   Maggie Games - zona de juego v2 (sep 2026)
   Fondo profundo y saturado por juego, cartas blancas encima.
   Los ajustes de una sola vez (sonido, voz, palabras, tamano)
   viven en un <dialog> detras del engranaje; el nivel queda visible.
   Se carga DESPUES de site.css y pisa .play / .ctrl de ahi.
   ========================================================= */

.play {
  --play-bg:     #173a56;
  --play-bg2:    #14607d;
  --play-ink:    #ffffff;
  --play-line:   rgba(255,255,255,.32);
  --play-accent: #ffc857;
  --card-shadow: rgba(4,18,34,.45);
  --line:        #12233a;

  position: relative;
  background: linear-gradient(160deg, var(--play-bg) 0%, var(--play-bg2) 100%);
  color: var(--play-ink);
  border: 0;
  border-radius: var(--radius-lg);
  padding: clamp(12px, 2vw, 22px);
  box-shadow: 0 12px 34px rgba(18,35,58,.28);
}
.play.theme-word     { --play-bg: #3b1d4b; --play-bg2: #6b3f7e; --play-accent: #ffd166; }
.play.theme-feelings { --play-bg: #6f2f16; --play-bg2: #b3562b; --play-accent: #ffd166; }
.play.theme-ttt      { --play-bg: #14472f; --play-bg2: #2b7a52; --play-accent: #ffc857; }
.play.theme-cause    { --play-bg: #23255c; --play-bg2: #4a4dad; --play-accent: #ffc857; }
.play.theme-sensory  { --play-bg: #12172e; --play-bg2: #262c5a; --play-accent: #ffc857; }

/* foco visible sobre fondo oscuro: anillo blanco, no azul */
.play :focus-visible { outline: 5px solid #fff; outline-offset: 3px; border-radius: 12px; }

/* ---------- barra superior: nivel a la izquierda, iconos a la derecha ---------- */
.play .topbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.play .topbar .grow { flex: 1 1 40px; }

.play .ctrl {
  font: inherit; font-weight: 800; font-size: .95rem; color: #fff;
  background: rgba(255,255,255,.14); border: 2px solid var(--play-line); border-radius: 999px;
  padding: 9px 15px; min-height: 48px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: none;
  transition: transform .1s, background .15s;
}
.play .ctrl:hover  { background: rgba(255,255,255,.24); }
.play .ctrl:active { transform: translateY(2px); }
.play .ctrl[aria-pressed="false"] { background: transparent; color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.22); }
.play .ctrl[aria-pressed="true"]  { background: #fff; color: var(--ink); border-color: #fff; }
/* el nivel es el unico control que el adulto cambia en la sesion: solido y blanco */
.play .ctrl.lvl { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 4px 0 var(--card-shadow); }
.play .ctrl.lvl:hover { background: #fff6e0; }
.play .ctrl.primary { background: var(--play-accent); border-color: var(--play-accent); color: #3a2405; }

/* iconos redondos (reiniciar, pantalla completa, engranaje, ayuda) */
.play .ictrl {
  font: inherit; font-size: 1.25rem; line-height: 1; color: #fff; cursor: pointer; flex: none;
  width: 48px; height: 48px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.14); border: 2px solid var(--play-line);
  display: inline-grid; place-items: center;
  transition: transform .1s, background .15s;
}
.play .ictrl:hover  { background: rgba(255,255,255,.26); }
.play .ictrl:active { transform: translateY(2px); }

/* grupo segmentado (tic-tac-toe: 2 players / gentle / tough) */
.play .seg { display: inline-flex; border: 2px solid var(--play-line); border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.1); flex: none; max-width: 100%; }
.play .seg button {
  font: inherit; font-weight: 800; font-size: .92rem; color: #fff;
  background: transparent; border: 0; border-right: 2px solid var(--play-line);
  padding: 10px 14px; min-height: 48px; cursor: pointer; white-space: nowrap;
}
.play .seg button:last-child { border-right: 0; }
.play .seg button.on { background: #fff; color: var(--ink); }
.play .seg button:hover:not(.on) { background: rgba(255,255,255,.18); }

/* ---------- progreso: una barra que se llena, no 20 circulitos ---------- */
.play .prog { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-weight: 800; font-size: .92rem; }
.play .prog strong { flex: none; white-space: nowrap; }
.play .stars { flex: 1 1 80px; display: flex; gap: 2px; height: 12px; }
.play .stars i { flex: 1 1 0; min-width: 0; display: block; background: rgba(255,255,255,.22); border-radius: 3px; transition: background .2s; }
.play .stars i.on { background: var(--play-accent); }

/* ---------- Maggie: avatar chico + globo de una linea que repite al tocarlo ---------- */
.play .guide { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.play .guide img { height: 64px; width: auto; flex: none; }
.play .guide img.cheer { animation: cheer calc(.6s * var(--speed)) ease; }
@keyframes cheer {
  0%,100% { transform: translateY(0) rotate(0); }
  30%     { transform: translateY(-10px) rotate(-6deg); }
  60%     { transform: translateY(-4px) rotate(4deg); }
}
.play .bubble {
  position: relative; flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 52px;
  display: flex; align-items: center; gap: 12px; text-align: left;
  font: inherit; font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: var(--ink);
  background: #fff; border: 0; border-radius: 16px; padding: 10px 14px;
  box-shadow: 0 4px 0 var(--card-shadow); cursor: pointer;
  transition: transform .1s;
}
.play .bubble:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--card-shadow); }
.play .bubble::before {
  content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
  border: 9px solid transparent; border-left: 0; border-right-color: #fff;
}
/* pista de que el globo se toca: icono de repetir a la derecha */
.play .bubble::after { content: "🔁"; margin-left: 4px; font-size: .85rem; opacity: .5; flex: none; }
.play .bubble.win { color: var(--success); }
.play .bubble.win::after { content: "🎉"; opacity: 1; }
@media (min-width: 701px) {
  .play .guide img { height: 84px; }
  .play .bubble { font-size: 1.15rem; }
}
body.big-mode .play .bubble { font-size: 1.3rem; }

/* ---------- escenario y cartas ---------- */
.play .stage {
  background: #fff; border: 0; border-radius: 20px;
  box-shadow: 0 6px 0 var(--card-shadow);
}
.play .stage.solved { background: var(--success-soft); box-shadow: 0 0 0 5px var(--success), 0 6px 0 var(--card-shadow); }

.play .choices { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; }
.play .choices[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.play .choices[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.play .choice, .play .card {
  font: inherit; color: var(--ink); cursor: pointer; min-width: 0;
  background: #fff; border: 0; border-radius: 18px;
  padding: 10px 8px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 6px 0 var(--card-shadow);
  transition: transform calc(.14s * var(--speed)), box-shadow .14s, background .2s, opacity .3s;
}
/* tres tintes en rotacion para que tres cartas no parezcan tres casilleros vacios */
.play .choice:nth-child(3n+1), .play .card:nth-child(3n+1) { background: #fff6e0; }
.play .choice:nth-child(3n+2), .play .card:nth-child(3n+2) { background: #e6f7ec; }
.play .choice:nth-child(3n+3), .play .card:nth-child(3n+3) { background: #e7f0fb; }
.play .choice img, .play .card img { width: 100%; aspect-ratio: 1/1; object-fit: contain; pointer-events: none; }
.play .cname { font-weight: 900; font-size: 1.05rem; text-transform: capitalize; pointer-events: none; }
.play .choice:hover:not(:disabled), .play .card:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 10px 0 var(--card-shadow); }
.play .choice:active:not(:disabled), .play .card:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--card-shadow); }
.play .choice:disabled { cursor: default; }
.play .choice.wrong { opacity: .3; filter: grayscale(1); box-shadow: none; transform: none; }
.play .choice.right, .play .card.picked { background: var(--success-soft); box-shadow: 0 0 0 5px var(--success), 0 6px 0 var(--card-shadow); }
.play .choice.shake { animation: shake calc(.45s * var(--speed)) ease; }
.play .choice.hintme { animation: hintpulse calc(1s * var(--speed)) ease infinite; }
@keyframes shake {
  0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); }
  40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); }
}
@keyframes hintpulse {
  0%,100% { box-shadow: 0 6px 0 var(--card-shadow), 0 0 0 0 rgba(255,200,87,.9); }
  50%     { box-shadow: 0 6px 0 var(--card-shadow), 0 0 0 16px rgba(255,200,87,0); }
}

/* ---------- pantalla completa ---------- */
.play:fullscreen {
  border-radius: 0; padding: clamp(12px, 2vw, 28px);
  display: flex; flex-direction: column; justify-content: center;
  overflow: auto; background-attachment: fixed;
}
.play:fullscreen > * { flex: none; }

/* ---------- dialogo de ajustes ---------- */
.play-dialog {
  border: 0; border-radius: 24px; padding: 0;
  width: min(92vw, 420px); color: var(--ink); background: var(--surface);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.play-dialog::backdrop { background: rgba(18,35,58,.62); }
.play-dialog form { padding: 22px; margin: 0; }
.play-dialog h2 { font-size: 1.3rem; margin: 0 0 14px; }
.play-dialog .opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: inherit; font-weight: 800; font-size: 1.05rem; color: var(--ink); text-align: left;
  background: var(--surface-alt); border: 0; border-radius: 14px;
  padding: 12px 14px; min-height: 58px; cursor: pointer; margin-bottom: 8px;
}
.play-dialog .opt:hover { background: #dbe7f2; }
.play-dialog .opt .sw {
  width: 52px; height: 30px; border-radius: 15px; background: #aebbcb; position: relative; flex: none;
  transition: background .2s;
}
.play-dialog .opt .sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s;
}
.play-dialog .opt[aria-pressed="true"] .sw { background: var(--success); }
.play-dialog .opt[aria-pressed="true"] .sw::after { transform: translateX(22px); }
.play-dialog .opt:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.play-dialog .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; }
.play-dialog .actions .btn { min-height: 48px; }
.play-dialog .actions .btn.ghost { margin-right: auto; }

@media (max-width: 700px) {
  .play .ctrl { font-size: .9rem; padding: 8px 12px; min-height: 46px; }
  .play .ictrl { width: 46px; height: 46px; }
  /* base 0 del espaciador: con 40px la fila de nivel + 3 iconos se partia en 390px */
  .play .topbar .grow { flex-basis: 0; }
  .play .prog { margin-bottom: 10px; }
  .play .guide { margin-bottom: 10px; }
  .play .choices { gap: 10px; }
}
@media (max-width: 400px) {
  .play .ictrl { width: 42px; height: 42px; font-size: 1.15rem; }
}