/* ============================================================
   PlayMente — chasis compartido
   Estructura, navegación y componentes comunes a todos los juegos.
   El "skin" (colores, fuente, fondo, ilustración) lo define cada
   juego sobrescribiendo las variables de :root en su propio <style>.
   No depende de ningún CDN: funciona sin internet.
   ============================================================ */

/* ---------- Variables que cada juego puede sobrescribir ---------- */
:root{
  /* Identidad del juego */
  --pm-accent:        #7c5cff;
  --pm-accent-soft:   #efeaff;
  --pm-accent-ink:    #4a35b8;

  /* Superficies */
  --pm-bg:            #f6f4ff;
  --pm-bg-image:      none;
  --pm-surface:       #ffffff;
  --pm-surface-2:     #fbfaff;
  --pm-border:        #e8e3f7;

  /* Texto */
  --pm-ink:           #2c2545;
  --pm-ink-soft:      #6f6788;

  /* Semántica: verde tranquilo / ámbar en vez de rojo agresivo */
  --pm-ok:            #2f9e6e;
  --pm-ok-soft:       #e6f6ee;
  --pm-oops:          #c9743f;
  --pm-oops-soft:     #fdf0e6;

  /* Forma y ritmo */
  --pm-radius:        24px;
  --pm-radius-sm:     14px;
  --pm-gap:           20px;
  --pm-shadow:        0 10px 34px rgba(60,40,120,.09);
  --pm-shadow-sm:     0 3px 12px rgba(60,40,120,.07);

  /* Tipografía */
  --pm-font:          'Nunito', ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pm-font-display:  var(--pm-font);
  --pm-size:          18px;   /* cuerpo grande a propósito */

  /* Alto mínimo de zona táctil */
  --pm-tap:           56px;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100dvh;
  font-family:var(--pm-font);
  font-size:var(--pm-size);
  line-height:1.55;
  color:var(--pm-ink);
  background-color:var(--pm-bg);
  background-image:var(--pm-bg-image);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--pm-font-display); line-height:1.2; margin:0 0 .4em; }
h1{ font-size:2rem; font-weight:900; letter-spacing:-.02em; }
h2{ font-size:1.35rem; font-weight:800; }
h3{ font-size:1.05rem; font-weight:800; }
p{ margin:0 0 .8em; }
:focus-visible{ outline:3px solid var(--pm-accent); outline-offset:3px; border-radius:6px; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible{ outline:none; }

/* ---------- Estructura ---------- */
.pm-app{
  max-width:820px;
  margin:0 auto;
  padding:16px 16px 48px;
  display:flex; flex-direction:column; gap:var(--pm-gap);
  min-height:100dvh;
}

/* ---------- Barra superior: común a TODOS los juegos ---------- */
.pm-bar{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  background:var(--pm-surface);
  border:1px solid var(--pm-border);
  border-radius:var(--pm-radius-sm);
  box-shadow:var(--pm-shadow-sm);
  position:sticky; top:8px; z-index:40;
}
/* En móvil los tres botones no caben con sus rótulos: se quedan los
   iconos, que siguen siendo zona táctil de sobra. */
@media (max-width:470px){
  .pm-bar__title{ display:none; }
  .pm-bar{ justify-content:space-between; gap:8px; }
  .pm-iconbtn{ padding:0 12px; }
  [data-voz-texto], [data-ayuda-texto]{ display:none; }
  .pm-btn-voz[aria-pressed="false"]{ text-decoration:none; }
  .pm-btn-voz[aria-pressed="false"] [aria-hidden="true"]{ opacity:.55; }
}
.pm-bar__title{
  flex:1; min-width:0;
  font-weight:800; font-size:.95rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--pm-ink-soft);
}
.pm-iconbtn{
  flex:none;
  min-height:44px; min-width:44px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:0 12px;
  font:inherit; font-weight:800; font-size:.9rem;
  color:var(--pm-ink); text-decoration:none;
  background:var(--pm-surface-2);
  border:1px solid var(--pm-border);
  border-radius:12px;
  cursor:pointer;
  transition:background .15s, transform .15s, border-color .15s;
}
.pm-iconbtn:hover{ background:var(--pm-accent-soft); border-color:var(--pm-accent); }
.pm-iconbtn:active{ transform:scale(.97); }
.pm-iconbtn[aria-pressed="true"]{ background:var(--pm-accent); color:#fff; border-color:var(--pm-accent); }
/* Estado apagado bien visible: si no, se silencia sin querer y parece
   que la voz "dejó de funcionar". */
.pm-btn-voz[aria-pressed="false"]{
  background:var(--pm-surface-2); color:var(--pm-ink-soft);
  border-color:var(--pm-border); text-decoration:line-through;
  text-decoration-thickness:1.5px;
}

/* ---------- Tarjeta ---------- */
.pm-card{
  background:var(--pm-surface);
  border:1px solid var(--pm-border);
  border-radius:var(--pm-radius);
  box-shadow:var(--pm-shadow);
  padding:26px;
}
@media (max-width:520px){ .pm-card{ padding:20px 18px; } }

.pm-hero{ text-align:center; }
.pm-hero__icon{ font-size:3.2rem; line-height:1; margin-bottom:6px; }
.pm-hero__sub{ color:var(--pm-accent-ink); font-weight:800; margin:0 0 1.2em; }

/* ---------- Pantallas ---------- */
[data-screen]{ display:none; }
[data-screen].is-active{ display:block; animation:pm-in .28s ease both; }
@keyframes pm-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* ---------- Botones ---------- */
.pm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:var(--pm-tap);
  padding:0 22px;
  font:inherit; font-weight:900; font-size:1.05rem;
  text-decoration:none;
  color:#fff; background:var(--pm-accent);
  border:none; border-radius:16px;
  cursor:pointer;
  box-shadow:0 6px 18px -6px var(--pm-accent);
  transition:transform .15s, filter .15s;
}
.pm-btn:hover{ filter:brightness(1.06); }
.pm-btn:active{ transform:scale(.985); }
.pm-btn--ghost{
  color:var(--pm-ink); background:var(--pm-surface-2);
  border:2px solid var(--pm-border); box-shadow:none;
}
.pm-btn--ghost:hover{ border-color:var(--pm-accent); background:var(--pm-accent-soft); }
.pm-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Bloque de anticipación (qué hago / cuánto dura / cómo termino) ---------- */
.pm-brief{
  background:var(--pm-accent-soft);
  border:1px solid var(--pm-border);
  border-radius:var(--pm-radius-sm);
  padding:18px 20px;
  margin-bottom:var(--pm-gap);
  text-align:left;
}
.pm-brief__label{
  display:block; font-size:.72rem; font-weight:900;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--pm-accent-ink); margin-bottom:6px;
}
.pm-brief p{ margin:0 0 .7em; }
.pm-brief p:last-child{ margin-bottom:0; }
.pm-facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pm-fact{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pm-surface); border:1px solid var(--pm-border);
  border-radius:999px; padding:5px 13px;
  font-size:.85rem; font-weight:700; color:var(--pm-ink-soft);
}

/* ---------- Selector de nivel y de reloj ---------- */
.pm-choice{ margin-bottom:var(--pm-gap); text-align:left; }
.pm-choice__label{
  display:block; font-size:.72rem; font-weight:900;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--pm-ink-soft); margin-bottom:8px;
}
.pm-options{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:420px){ .pm-options{ grid-template-columns:1fr; } }
.pm-option{
  min-height:var(--pm-tap);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 8px;
  font:inherit; text-align:center; cursor:pointer;
  background:var(--pm-surface); color:var(--pm-ink);
  border:2px solid var(--pm-border); border-radius:var(--pm-radius-sm);
  transition:border-color .15s, background .15s, transform .15s;
}
.pm-option:hover{ border-color:var(--pm-accent); }
.pm-option strong{ font-weight:900; font-size:.98rem; }
.pm-option span{ font-size:.75rem; color:var(--pm-ink-soft); font-weight:700; }
.pm-option[aria-checked="true"]{
  border-color:var(--pm-accent); background:var(--pm-accent-soft);
  transform:translateY(-2px);
}
.pm-option[aria-checked="true"] span{ color:var(--pm-accent-ink); }

/* Selector de voz: fila de un desplegable y su botón de prueba */
.pm-voz-fila{ display:flex; gap:10px; align-items:stretch; }
.pm-select{
  flex:1; min-height:var(--pm-tap);
  font:inherit; font-size:1rem; color:var(--pm-ink);
  background:var(--pm-surface); border:2px solid var(--pm-border);
  border-radius:var(--pm-radius-sm); padding:0 14px; cursor:pointer;
}
.pm-select:hover{ border-color:var(--pm-accent); }
.pm-btn--mini{ width:auto; flex:none; padding:0 18px; font-size:.95rem; }

/* ---------- HUD del juego ---------- */
.pm-hud{
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
}
.pm-hud__item{
  flex:1;
  background:var(--pm-surface); border:1px solid var(--pm-border);
  border-radius:var(--pm-radius-sm); padding:6px 12px; text-align:center;
}
.pm-hud__label{
  display:block; font-size:.65rem; font-weight:900;
  letter-spacing:.08em; text-transform:uppercase; color:var(--pm-ink-soft);
}
.pm-hud__value{ font-weight:900; font-size:1.15rem; color:var(--pm-accent-ink); }

/* Reloj: barra suave, nunca roja, nunca parpadeante */
.pm-clock{ height:8px; background:var(--pm-border); border-radius:999px; overflow:hidden; margin-bottom:var(--pm-gap); }
.pm-clock__fill{ height:100%; width:100%; background:var(--pm-accent); border-radius:999px; }
.pm-clock[hidden]{ display:none; }

/* Aviso de cierre: "te quedan 2 rondas" */
/* ---------- Tablero: cabe en pantalla, sin scroll ----------
   Un tablero cuadrado limitado SOLO por el ancho crece con la
   pantalla hasta obligar a hacer scroll en escritorio. Aquí se
   limita también por el alto disponible. Lo usan detective, y más
   adelante rubik, radar y cualquier juego con cuadrícula.        */
/* La pantalla de juego ocupa el alto disponible y el tablero toma
   lo que sobra: así no hay que adivinar cuánto miden la barra, el HUD
   y el enunciado, y funciona igual en cualquier pantalla. */
.pm-app > main{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
[data-screen].is-active.pm-pantalla--tablero{
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
}
.pm-tablero-zona{
  flex:1 1 0; min-height:120px;
  position:relative;            /* el tablero se ancla aquí y no empuja el layout */
  margin-bottom:12px;
}
.pm-tablero{
  container-type: inline-size;
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  display:grid;
  /* el lado lo fija core.js midiendo la zona: las alturas en % no
     resuelven dentro de flex y el tablero se colapsaba */
}
/* El texto de cada casilla se escala con el tablero, no con la ventana */
.pm-tablero > *{ font-size: clamp(.8rem, calc(46cqw / var(--pm-cols, 6)), 2.4rem); }

/* ---------- Retroalimentación ---------- */
/* Franja de alto FIJO bajo el tablero. Dentro se turnan el mensaje y
   el botón de "no encuentro más": como el alto no cambia nunca, el
   tablero conserva su tamaño pase lo que pase. Y como se turnan en el
   mismo sitio, nada se superpone a nada. */
.pm-zona-mensaje{ position:relative; height:56px; margin-top:12px; }
.pm-zona-mensaje > *{ position:absolute; inset:0; margin:0 !important; }

.pm-feedback{
  height:56px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:6px 16px;
  font-size:.95rem; line-height:1.25;
  border-radius:var(--pm-radius-sm);
  font-weight:800; text-align:center;
  background:var(--pm-surface-2); color:var(--pm-ink-soft);
  border:1px solid var(--pm-border);
}
.pm-feedback.is-ok{ background:var(--pm-ok-soft); color:var(--pm-ok); border-color:transparent; }
.pm-feedback.is-oops{ background:var(--pm-oops-soft); color:var(--pm-oops); border-color:transparent; }
.pm-feedback.is-aviso{ background:var(--pm-accent-soft); color:var(--pm-accent-ink); border-color:var(--pm-accent); font-weight:900; }

/* ---------- Resultados ---------- */
.pm-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:var(--pm-gap) 0; }
.pm-stat{
  background:var(--pm-surface-2); border:1px solid var(--pm-border);
  border-radius:var(--pm-radius-sm); padding:14px 8px; text-align:center;
}
.pm-stat__value{ display:block; font-size:1.6rem; font-weight:900; line-height:1.1; }
.pm-stat__label{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--pm-ink-soft); }
.pm-stat--ok .pm-stat__value{ color:var(--pm-ok); }
.pm-stat--oops .pm-stat__value{ color:var(--pm-oops); }
.pm-stat--miss .pm-stat__value{ color:var(--pm-ink-soft); }

.pm-actions{ display:flex; flex-direction:column; gap:10px; margin-top:var(--pm-gap); }

/* ---------- Orientador (chatbot de tips) ---------- */
.pm-orient{
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:min(360px, calc(100vw - 32px));
  display:flex; flex-direction:column; align-items:flex-end;
}
/* Aviso de "tengo una pista" sobre el botón Ayuda de la barra superior */
.pm-iconbtn[data-pista="1"]{
  border-color:var(--pm-accent);
  background:var(--pm-accent-soft);
  animation:pm-llamada 1.6s ease-in-out 3;
}
.pm-iconbtn[data-pista="1"]::after{
  content:'1';
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; margin-left:1px;
  font-size:.68rem; font-weight:900;
  color:#fff; background:var(--pm-accent); border-radius:50%;
}
@keyframes pm-llamada{ 0%,100%{transform:none} 30%{transform:translateY(-4px)} 60%{transform:none} }

.pm-orient__panel{
  width:100%;
  background:var(--pm-surface);
  border:1px solid var(--pm-border);
  border-radius:var(--pm-radius);
  box-shadow:0 18px 50px rgba(40,25,90,.18);
  overflow:hidden;
  display:flex; flex-direction:column;
  max-height:min(70dvh, 520px);
}
.pm-orient__panel[hidden]{ display:none; }
.pm-orient__head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:var(--pm-accent-soft);
  border-bottom:1px solid var(--pm-border);
}
.pm-orient__avatar{ font-size:1.5rem; }
.pm-orient__name{ font-weight:900; font-size:.95rem; color:var(--pm-accent-ink); flex:1; }
.pm-orient__close{
  border:none; background:transparent; cursor:pointer;
  font:inherit; font-size:1.3rem; line-height:1; color:var(--pm-ink-soft);
  min-width:36px; min-height:36px; border-radius:10px;
}
.pm-orient__close:hover{ background:var(--pm-surface); }

.pm-orient__log{
  flex:1; overflow-y:auto; padding:14px;
  display:flex; flex-direction:column; gap:10px;
  font-size:.95rem;
}
.pm-msg{ max-width:92%; padding:10px 14px; border-radius:16px; }
.pm-msg--bot{
  align-self:flex-start;
  background:var(--pm-surface-2); border:1px solid var(--pm-border);
  border-bottom-left-radius:5px;
}
.pm-msg--me{
  align-self:flex-end;
  background:var(--pm-accent); color:#fff; font-weight:700;
  border-bottom-right-radius:5px;
}
.pm-msg__speak{
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:6px; border:none; background:transparent; cursor:pointer;
  font-size:.95rem; opacity:.55;
}
.pm-msg__speak:hover{ opacity:1; }
.pm-msg__speak.is-speaking{ opacity:1; color:var(--pm-accent); animation:pm-sonando 1.1s ease-in-out infinite; }
@keyframes pm-sonando{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

.pm-orient__asks{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:12px 14px; border-top:1px solid var(--pm-border);
  background:var(--pm-surface-2);
}
.pm-ask{
  font:inherit; font-size:.86rem; font-weight:800;
  padding:9px 14px; min-height:40px;
  color:var(--pm-accent-ink); background:var(--pm-surface);
  border:1px solid var(--pm-border); border-radius:999px; cursor:pointer;
}
.pm-ask:hover{ border-color:var(--pm-accent); background:var(--pm-accent-soft); }

/* ---------- Utilidades ---------- */
/* Oculta un elemento SIN sacarlo del flujo: así aparecer y desaparecer
   no mueve el resto de la pantalla. */
.pm-reservado{ visibility:hidden; opacity:0; pointer-events:none; }

.pm-muted{ color:var(--pm-ink-soft); }
.pm-center{ text-align:center; }
.pm-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* Nota que sustituye al antiguo selector de voz de cada juego: la voz
   se elige una sola vez en la portada y vale para los doce. */
.pm-nota-voz{
  margin:0 0 var(--pm-gap); padding:11px 14px;
  border-radius:var(--pm-radius-sm);
  background:var(--pm-surface-2); border:1px solid var(--pm-border);
  font-size:.85rem; line-height:1.5; color:var(--pm-ink-soft); text-align:left;
}
.pm-nota-voz a{ color:var(--pm-accent-ink); font-weight:800; }