/* =========================================================
   CREA TU PROPIO LULU  ·  hoja de estilos del minijuego
   ---------------------------------------------------------
   TODAS las reglas cuelgan de .lulu-app. No hay ni una sola
   regla global (nada de html, body, button o img sueltos),
   así que este archivo no puede afectar a la Home, al menú
   ni al resto de la web aunque se cargue en todas ellas.
   Reutiliza los tokens de color de styles.css cuando existen,
   con un valor de reserva por si se usa suelto.
========================================================= */

.lulu-app{
  --lu-orange:var(--orange,#F5943B);
  --lu-orange-dark:#C96A16;
  --lu-ink:var(--ink,#5A3320);
  --lu-ink-soft:var(--ink-soft,#8A6449);
  --lu-sky:#B8FAFF;
  --lu-font:var(--font-display,"Baloo 2",system-ui,sans-serif);
}

/* =========================================================
   DISPOSICIÓN
   Escritorio: lienzo a la izquierda, panel a la derecha.
   Tablet vertical y móvil: panel debajo, en bandeja.
========================================================= */
.lulu-app .lu-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:22px;
  align-items:start;
  margin-top:8px;
}

/* ---------- Lienzo ---------- */
.lulu-app .lu-stage-wrap{min-width:0}
.lulu-app .lu-stage{
  position:relative;
  width:100%;
  max-width:520px;
  margin:0 auto;
  aspect-ratio:1;                  /* el cuadrado es lo que se exporta */
  border-radius:30px;
  border:4px solid #fff;
  box-shadow:0 10px 0 rgba(42,83,102,.18);
  overflow:hidden;
  background:var(--lu-sky);
  touch-action:none;               /* arrastrar no hace scroll */
}
.lulu-app #luluCanvas{
  display:block;
  width:100%;
  height:100%;
}
.lulu-app .lu-hint{
  position:absolute;
  left:50%;bottom:10px;
  transform:translateX(-50%);
  margin:0;
  padding:7px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:var(--lu-ink-soft);
  font-size:.8rem;
  max-width:92%;
  text-align:center;
  pointer-events:none;
  transition:opacity .3s ease;
}
.lulu-app .lu-hint.gone{opacity:0}

/* ---------- Botonera ---------- */
.lulu-app .lu-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:16px auto 0;
  max-width:520px;
}
.lulu-app .lu-icon-btn{
  width:52px;height:52px;          /* muy por encima del mínimo táctil */
  display:grid;place-items:center;
  padding:0;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--lu-ink);
  color:var(--lu-ink);
  box-shadow:0 5px 0 rgba(90,51,32,.2);
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, opacity .2s;
}
.lulu-app .lu-icon-btn svg{width:25px;height:25px}
.lulu-app .lu-icon-btn:hover:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 rgba(90,51,32,.2)}
.lulu-app .lu-icon-btn:disabled{opacity:.35;cursor:default}

.lulu-app .lu-save{
  display:inline-flex;
  align-items:center;
  gap:11px;
  min-height:56px;
  padding:11px 24px 11px 13px;
  border-radius:999px;
  border:4px solid var(--lu-ink);
  background:var(--lu-orange);
  color:#fff;
  font-family:var(--lu-font);
  font-weight:800;
  font-size:1.06rem;
  cursor:pointer;
  text-shadow:0 2px 0 rgba(90,51,32,.28);
  box-shadow:0 6px 0 var(--lu-orange-dark);
  transition:transform .14s ease, box-shadow .14s ease;
}
.lulu-app .lu-save:hover{transform:translateY(4px);box-shadow:0 2px 0 var(--lu-orange-dark)}
.lulu-app .lu-save-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--lu-orange);
}
.lulu-app .lu-save-icon svg{width:20px;height:20px}

/* =========================================================
   PANEL
========================================================= */
.lulu-app .lu-panel{
  background:#FFF8EC;
  border:3px solid var(--lu-ink);
  border-radius:28px;
  box-shadow:0 8px 0 rgba(90,51,32,.16);
  padding:14px;
}
.lulu-app .lu-tabs{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  margin-bottom:12px;
}
.lulu-app .lu-tab{
  min-height:62px;
  padding:7px 3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:16px;
  border:3px solid var(--lu-ink);
  background:#fff;
  color:var(--lu-ink);
  font-family:var(--lu-font);
  font-weight:800;
  font-size:.72rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 0 rgba(90,51,32,.18);
  transition:background-color .16s ease, color .16s ease, transform .14s ease;
}
.lulu-app .lu-tab svg{width:22px;height:22px}
.lulu-app .lu-tab[aria-selected="true"]{
  background:var(--lu-orange);
  color:#fff;
  box-shadow:0 4px 0 var(--lu-orange-dark);
}
.lulu-app .lu-tab:hover{transform:translateY(2px)}

.lulu-app .lu-options{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(76px,1fr));
  gap:9px;
  max-height:340px;
  overflow-y:auto;
  padding:2px;
}
.lulu-app .lu-opt{
  aspect-ratio:1;
  min-width:48px;min-height:48px;
  display:grid;place-items:center;
  padding:6px;
  border-radius:18px;
  border:3px solid var(--lu-ink);
  background:#fff;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 4px 0 rgba(90,51,32,.16);
  transition:transform .14s ease, box-shadow .14s ease;
}
.lulu-app .lu-opt:hover{transform:translateY(3px);box-shadow:0 1px 0 rgba(90,51,32,.16)}
.lulu-app .lu-opt[aria-pressed="true"]{
  border-color:var(--lu-orange-dark);
  box-shadow:0 0 0 4px var(--lu-orange), 0 4px 0 rgba(90,51,32,.16);
}
.lulu-app .lu-opt img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}
.lulu-app .lu-opt.lu-swatch{padding:0;border-radius:50%}
.lulu-app .lu-opt.lu-none{
  font-family:var(--lu-font);
  font-size:.72rem;
  color:var(--lu-ink-soft);
}

/* =========================================================
   TABLET VERTICAL Y MÓVIL
   El panel baja y las opciones se deslizan en horizontal.
   El personaje siempre queda visible por encima.
========================================================= */
@media (max-width:900px){
  .lulu-app .lu-layout{grid-template-columns:1fr;gap:16px}
  .lulu-app .lu-stage{max-width:min(64vh,460px)}
  .lulu-app .lu-options{
    display:flex;
    gap:9px;
    overflow-x:auto;
    overflow-y:hidden;
    max-height:none;
    padding-bottom:6px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .lulu-app .lu-options::-webkit-scrollbar{display:none}
  .lulu-app .lu-opt{flex:0 0 76px;width:76px}
}
@media (max-width:600px){
  .lulu-app .lu-stage{max-width:min(56vh,380px)}
  .lulu-app .lu-tab{min-height:56px;font-size:.65rem}
  .lulu-app .lu-tab svg{width:19px;height:19px}
  .lulu-app .lu-opt{flex:0 0 68px;width:68px}
  .lulu-app .lu-icon-btn{width:48px;height:48px}
  .lulu-app .lu-save{font-size:.98rem;min-height:52px}
}

/* =========================================================
   DIÁLOGO Y CELEBRACIÓN
========================================================= */
.lulu-app .lu-dialog,
.lulu-app .lu-cheer{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(58,33,19,.42);
}
.lulu-app .lu-dialog[hidden],
.lulu-app .lu-cheer[hidden]{display:none}

.lulu-app .lu-dialog-box,
.lulu-app .lu-cheer-box{
  background:#fff;
  border:4px solid var(--lu-ink);
  border-radius:32px;
  box-shadow:0 12px 0 rgba(58,33,19,.3);
  padding:26px 24px;
  text-align:center;
  max-width:min(420px,100%);
}
.lulu-app .lu-dialog-box h2{
  margin:0 0 18px;
  font-family:var(--lu-font);
  font-weight:800;
  font-size:clamp(1.15rem,3vw,1.5rem);
  color:var(--lu-ink);
}
.lulu-app .lu-dialog-actions{
  display:flex;gap:11px;justify-content:center;flex-wrap:wrap;
}
.lulu-app .lu-btn{
  min-height:52px;
  padding:12px 22px;
  border-radius:999px;
  border:3px solid var(--lu-ink);
  font-family:var(--lu-font);
  font-weight:800;
  font-size:1rem;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease;
}
.lulu-app .lu-btn-accent{
  background:var(--lu-orange);color:#fff;
  box-shadow:0 5px 0 var(--lu-orange-dark);
  text-shadow:0 2px 0 rgba(90,51,32,.28);
}
.lulu-app .lu-btn-ghost{
  background:#FFF8EC;color:var(--lu-ink);
  box-shadow:0 5px 0 #D8C4A4;
}
.lulu-app .lu-btn:hover{transform:translateY(3px)}

.lulu-app .lu-cheer-box{padding:16px 16px 22px}
.lulu-app #luConfetti{width:100%;height:auto;display:block}
.lulu-app .lu-cheer-text{
  margin:8px 0 0;
  font-family:var(--lu-font);
  font-weight:800;
  font-size:clamp(1.2rem,3.4vw,1.7rem);
  color:var(--lu-orange);
  text-shadow:0 3px 0 rgba(90,51,32,.18);
}

/* =========================================================
   MENOS MOVIMIENTO
========================================================= */
@media (prefers-reduced-motion:reduce){
  .lulu-app *{animation:none !important;transition:none !important}
}

/* =========================================================
   SOLO MÓVIL  ·  el lienzo dentro de la pantalla
   ---------------------------------------------------------
   El cuadrado tomaba su tamaño del ancho disponible, pero
   dentro de la tarjeta del juego ese ancho ya venía con los
   márgenes de la página, así que en vertical sobresalía por
   abajo. Aquí se le da como límite el ALTO libre de la
   pantalla, no el ancho, y se centra.
   Solo afecta a teléfonos: escritorio y tablet no cambian.
========================================================= */
@media (max-width:700px){
  .lulu-app{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .lulu-app .game-head,
  .lulu-app > .intro{
    align-self:stretch;
    text-align:center;
    justify-content:center;
  }

  .lulu-app .lu-layout{
    width:100%;
    justify-items:center;
  }

  /* el cuadrado nunca es mayor que el ancho útil ni que
     el alto que queda libre en la pantalla */
  .lulu-app .lu-stage{
    width:min(100%, 62vh);
    max-width:min(100%, 62vh);
    margin-inline:auto;
  }

  .lulu-app .lu-stage-wrap,
  .lulu-app .lu-panel{
    width:100%;
    max-width:100%;
  }

  .lulu-app .lu-actions{
    max-width:100%;
    justify-content:center;
    gap:9px;
  }
  .lulu-app .lu-save{flex:0 0 auto}

  /* nada puede empujar la página a lo ancho */
  .lulu-app,
  .lulu-app .lu-layout,
  .lulu-app .lu-panel{overflow-x:hidden}
}

/* pantallas muy bajas: el lienzo cede altura antes que el panel */
@media (max-width:700px) and (max-height:700px){
  .lulu-app .lu-stage{width:min(100%, 54vh);max-width:min(100%, 54vh)}
}

/* =========================================================
   CREA TU LULU · alineación visual con la colección UGA GAMES
   Mecánica y canvas intactos; solo cambia la presentación.
========================================================= */
.lulu-game-card{min-height:590px;background:rgba(255,252,240,.96)}
.lulu-game-card .lu-layout{align-items:center;gap:28px;margin:0}
.lulu-game-card .lu-stage{border:0;border-radius:34px;background:var(--lu-sky);box-shadow:0 10px 0 rgba(90,51,32,.11)}
.lulu-game-card .lu-panel{border:0;border-radius:32px;background:#fff8ec;box-shadow:0 10px 0 rgba(90,51,32,.1);padding:16px}
.lulu-game-card .lu-tab{border:0;border-radius:18px;background:#fff;color:var(--lu-ink);box-shadow:0 4px 0 rgba(90,51,32,.11)}
.lulu-game-card .lu-tab[aria-selected="true"]{background:var(--lu-orange);color:var(--lu-ink);box-shadow:0 4px 0 rgba(201,106,22,.5)}
.lulu-game-card .lu-opt{border:0;border-radius:20px;background:#fff;box-shadow:0 4px 0 rgba(90,51,32,.1)}
.lulu-game-card .lu-opt[aria-pressed="true"]{box-shadow:0 0 0 5px rgba(245,148,59,.45),0 4px 0 rgba(90,51,32,.1)}
.lulu-game-card .lu-opt.lu-swatch{border-radius:50%}
.lulu-game-card .lu-icon-btn{border:0;background:#fff;box-shadow:0 5px 0 rgba(90,51,32,.12)}
.lulu-game-card .lu-save{border:0;background:var(--lu-orange);color:var(--lu-ink);text-shadow:none;box-shadow:0 6px 0 rgba(201,106,22,.55)}
.lulu-game-card .lu-save-icon{color:var(--lu-ink)}
.lulu-game-card .lu-dialog-box,.lulu-game-card .lu-cheer-box{border:0;background:#fffaf0;box-shadow:0 12px 0 rgba(58,33,19,.2)}
.lulu-game-card .lu-btn{border:0}.lulu-game-card .lu-btn-accent{color:var(--lu-ink);text-shadow:none}

@media(max-width:900px){
  .lulu-game-card{min-height:720px}.lulu-game-card .lu-layout{gap:18px}
  .lulu-game-card .lu-panel{border-radius:26px}
}
@media(max-width:520px){
  .lulu-game-card{min-height:650px}.lulu-game-card .lu-stage{border-radius:26px}
  .lulu-game-card .lu-panel{padding:11px;border-radius:22px}.lulu-game-card .lu-tabs{gap:5px}
}

/* =========================================================
   CREA TU LULU · centrado en móvil
   ---------------------------------------------------------
   El juego se movió dentro de la tarjeta compartida
   .uga-game-card, y las reglas de centrado apuntaban al
   contenedor antiguo. `.lulu-game-card .lu-layout` se declara
   más abajo en el archivo que el bloque móvil y, al tener la
   misma especificidad, ganaba: recuperaba `margin:0` y perdía
   el centrado.

   Aquí se centra el contenido dentro de la tarjeta, con
   reglas colocadas al final para que sean las últimas en
   aplicarse. Solo afecta a teléfonos.
========================================================= */
@media (max-width:760px){
  .lulu-game-card{
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .lulu-game-card .lu-layout{
    width:100%;
    margin-inline:auto;
    justify-items:center;      /* centra cada fila de la rejilla */
    justify-content:center;
  }

  /* el lienzo, centrado y nunca más ancho que la pantalla */
  .lulu-game-card .lu-stage-wrap{
    width:100%;
    display:flex;
    justify-content:center;
  }
  .lulu-game-card .lu-stage{
    width:min(100%, 62vh);
    max-width:min(100%, 62vh);
    margin-inline:auto;
  }

  /* el panel de opciones ocupa el ancho y centra sus pestañas */
  .lulu-game-card .lu-panel{
    width:100%;
    max-width:100%;
    margin-inline:auto;
  }
  .lulu-game-card .lu-tabs{justify-content:center}
  .lulu-game-card .lu-actions{justify-content:center}

  /* la tira de opciones sí empieza a la izquierda: se desliza */
  .lulu-game-card .lu-options{justify-content:flex-start}
}

/* pantallas bajas: el lienzo cede altura antes que el panel */
@media (max-width:760px) and (max-height:720px){
  .lulu-game-card .lu-stage{width:min(100%, 52vh);max-width:min(100%, 52vh)}
}

/* =========================================================
   CREA TU LULU · lienzo más grande en móvil
   ---------------------------------------------------------
   Medido antes de tocar nada: en cualquier teléfono actual el
   lienzo NO estaba limitado por el alto sino por el ancho, es
   decir, ya ocupaba todo lo que le dejaban. Recortar márgenes
   daba solo un 3 %, que no se nota.

   Así que en móvil el lienzo pasa a ocupar el ANCHO COMPLETO
   de la tarjeta: la tarjeta pierde su relleno y son el panel
   y los botones los que llevan el suyo. El cuadrado gana en
   torno a un 10 % y, sobre todo, deja de verse como una
   miniatura con marco.
========================================================= */
@media (max-width:760px){
  .uga-game-wrap:has(.lulu-game-card){width:min(100% - 8px, 560px)}

  /* la tarjeta ya no separa: separan sus hijos */
  .lulu-game-card{padding:0;overflow:hidden}
  .lulu-game-card .lu-layout{gap:0;margin:0}

  /* el lienzo, de borde a borde y sin esquinas dobles */
  .lulu-game-card .lu-stage-wrap{width:100%}
  .lulu-game-card .lu-stage{
    width:100%;
    max-width:min(100%, 78vh);
    margin:0;
    border-radius:26px 26px 0 0;
    box-shadow:none;
  }

  /* el panel recupera el aire que ha soltado la tarjeta */
  .lulu-game-card .lu-panel{
    width:100%;
    max-width:100%;
    margin:0;
    padding:12px 11px 14px;
    border-radius:0 0 26px 26px;
    box-shadow:none;
  }
  .lulu-game-card .lu-tabs{justify-content:center}
  .lulu-game-card .lu-actions{justify-content:center;padding-inline:2px}
}

/* Solo en pantallas de verdad bajas —apaisado— el lienzo cede
   altura para que el panel siga siendo usable. */
@media (max-width:760px) and (max-height:620px){
  .lulu-game-card .lu-stage{max-width:min(100%, 58vh)}
}

/* =========================================================
   CREA TU LULU · orden en móvil
   ---------------------------------------------------------
   El orden pedido es: lienzo grande, debajo el menú de piezas
   y abajo del todo los botones. En el HTML los botones están
   dentro del bloque del lienzo, así que en el móvil salían
   entre medias.

   En lugar de tocar el marcado —lo que afectaría también al
   escritorio— se usa `display:contents` en ese bloque: sus
   hijos pasan a comportarse como hijos directos de la
   columna, y desde ahí se les puede dar orden.
========================================================= */
@media (max-width:760px){
  .lulu-game-card .lu-layout{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .lulu-game-card .lu-stage-wrap{display:contents}

  .lulu-game-card .lu-stage{order:1}
  .lulu-game-card .lu-panel{order:2}
  .lulu-game-card .lu-actions{order:3}

  /* el menú de piezas: pestañas centradas y opciones grandes */
  .lulu-game-card .lu-panel{
    border-radius:0;
    padding:13px 11px 15px;
  }
  .lulu-game-card .lu-tabs{
    justify-content:center;
    gap:6px;
    margin-bottom:11px;
  }
  .lulu-game-card .lu-opt{flex:0 0 74px;width:74px}

  /* los botones, en su propia franja al final */
  .lulu-game-card .lu-actions{
    width:100%;
    margin:0;
    padding:12px 11px 14px;
    justify-content:center;
    gap:10px;
    background:#fff8ec;
    border-radius:0 0 26px 26px;
  }
  .lulu-game-card .lu-icon-btn{width:52px;height:52px}
  .lulu-game-card .lu-save{flex:1 1 auto;max-width:230px;min-height:54px}
}