/* Programar · motor Programar (v1.56, sesión de los motores). Mismo aire que Trazar, Recta y Preguntas.
   Sin scroll de página (regla de Franco): el tablero se achica y el panel entra entero; en el teléfono acostado, al costado. */
.pg {
  --pg-noche: #1B2A5C; --pg-noche-2: #121c40; --pg-oro: #F5C542; --pg-crema: #fff8e8; --pg-tinta: #2b2140; --pg-mal: #ff7a6b; --pg-agua: #38c6b4;
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0;
  background: radial-gradient(120% 80% at 50% 0%, #26397a 0%, var(--pg-noche-2) 70%); color: #fff;
  font-family: "Baloo 2", "Nunito", system-ui, sans-serif; overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.pg * { box-sizing: border-box; }
.pg button { font-family: inherit; }
.pg [hidden] { display: none !important; }
.pg button:focus-visible { outline: 3px solid var(--pg-oro); outline-offset: 2px; }

.pg-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--pg-noche); border-bottom: 1px solid rgba(245,197,66,.25); min-height: 72px; flex: 0 0 auto; }
.sj-hay-casa .pg-top { padding-left: 80px; }
.pg-casa { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 18px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 26px; cursor: pointer; }
.pg-globo { flex: 1; min-width: 0; background: var(--pg-crema); color: var(--pg-tinta); border-radius: 18px; padding: 6px 12px; min-height: 56px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.pg-globo-txt { font-weight: 800; font-size: clamp(18px, 4.4vw, 24px); line-height: 1.15; }
.pg-globo-sub { font-size: clamp(15px, 1.8vw, 18px); font-weight: 600; opacity: .8; line-height: 1.2; }
.pg-redondo { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 20px; cursor: pointer; }
.pg-contador { flex: 0 0 auto; font-weight: 800; color: var(--pg-oro); min-width: 34px; text-align: center; font-size: 16px; }

.pg-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
.pg-mesa { flex: 1; min-height: 120px; position: relative; }
.pg-lienzo { display: block; width: 100%; height: 100%; }
.pg-panel { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }

/* La tira: las órdenes del niño */
.pg-tira { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 62px; max-height: 128px; overflow-y: auto; padding: 6px; border-radius: 16px;
  background: rgba(255,248,232,.1); border: 2px dashed rgba(255,255,255,.22); }
.pg-vacia { opacity: .7; font-weight: 700; font-size: 16px; padding: 0 6px; }
.pg-chip { min-width: 48px; height: 48px; padding: 0 8px; border-radius: 12px; border: 0; background: var(--pg-crema); color: var(--pg-tinta); font-size: 24px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.pg-chip.rep { background: #cfe9ff; font-size: 18px; }
.pg-chip.cerrar { background: #7be0a1; }
.pg-chip.prendida, .pg-grupo.prendida > .pg-chip.rep { background: var(--pg-oro); transform: translateY(-2px); box-shadow: 0 0 0 3px #fff, 0 3px 0 rgba(0,0,0,.25); }
.pg-chip.falla { background: var(--pg-mal); animation: pg-parpadea .3s ease 4 alternate; }
.pg-grupo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 4px 3px 3px; border-radius: 14px; background: rgba(207,233,255,.18); border: 2px solid #cfe9ff; }
.pg-grupo.abierto { border-style: dashed; background: rgba(207,233,255,.3); }
.pg-x { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; font-size: 18px; cursor: pointer; }

/* Las fichas para tocar y los botones */
.pg-paleta, .pg-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pg-ficha { width: 60px; height: 56px; border-radius: 16px; border: 0; background: var(--pg-crema); color: var(--pg-tinta); font-size: 28px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.pg-ficha.f-repetir { background: #cfe9ff; } .pg-ficha.f-si { background: #d8f5e4; font-size: 22px; }
.pg-ficha:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.pg-boton { min-width: 56px; height: 52px; padding: 0 14px; border-radius: 16px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 22px; font-weight: 800; cursor: pointer; }
.pg-boton.oro { min-width: 96px; background: var(--pg-oro); border-color: var(--pg-oro); color: var(--pg-tinta); box-shadow: 0 4px 0 #b88a00; font-size: 26px; }
.pg button:disabled { opacity: .45; cursor: default; box-shadow: none; }

.pg-fin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(18,28,64,.82); z-index: 5; }
.pg-fin-caja { background: var(--pg-crema); color: var(--pg-tinta); border-radius: 24px; padding: 22px 26px; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.pg-fin-caja h2 { margin: 0 0 4px; font-size: 30px; color: #b07a00; }
.pg-fin-caja p { margin: 0; font-size: 18px; font-weight: 700; }

@keyframes pg-parpadea { from { opacity: 1; } to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pg-chip.falla { animation: none; } }
/* Compu y tablet acostada: el tablero a la izquierda, el panel a la derecha */
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) {
  .pg-cuerpo { flex-direction: row; }
  .pg-panel { width: min(46%, 440px); justify-content: center; }
  .pg-tira { max-height: none; flex: 0 1 auto; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .pg-top { min-height: 56px; padding: 4px 8px; }
  .pg-globo { min-height: 46px; padding: 3px 10px; }
  .pg-ficha { width: 52px; height: 48px; font-size: 24px; }
  .pg-boton { height: 48px; }
  .pg-tira { max-height: 120px; }
}
/* v0.2 · arrastrar para ordenar y el «si hay piedra» */
.pg-tira .pg-chip, .pg-tira .pg-grupo { touch-action: none; }
.pg-tira .arrastra { opacity: .35; }
.pg-fantasma { position: fixed; z-index: 60; pointer-events: none; margin: 0; transform: scale(1.08) rotate(-3deg); opacity: .92; box-shadow: 0 10px 18px rgba(0,0,0,.35); }
.pg-antes { box-shadow: -5px 0 0 0 var(--pg-oro) !important; }
.pg-despues { box-shadow: 5px 0 0 0 var(--pg-oro) !important; }
.pg-grupo.piedra { background: rgba(200,200,215,.18); border-color: #c9c9d6; }
.pg-chip.sp { background: #e2e2ea; font-size: 20px; }
.pg-chip.giro { background: #ffe9a8; }
.pg-grupo.piedra.prendida > .pg-chip.sp { background: var(--pg-oro); transform: translateY(-2px); box-shadow: 0 0 0 3px #fff, 0 3px 0 rgba(0,0,0,.25); }
.pg-grupo.falla { border-color: var(--pg-mal); animation: pg-parpadea .3s ease 4 alternate; }
@media (prefers-reduced-motion: reduce) { .pg-fantasma { transform: none; } .pg-grupo.falla { animation: none; } }
.pg-ficha.f-si_piedra { background: #e2e2ea; font-size: 22px; }