/* ============================================================
   WORDTECA — marcos 9-slice
   Valores de slice medidos sobre los PNG reales, no estimados.
   Pegar en app.css (o enlazar antes de app.css).
   ============================================================ */

:root {
  --frame-stone: url("../assets/frames/frame_stone.png");
  --frame-wood: url("../assets/frames/frame_wood.png");
  --frame-parchment: url("../assets/frames/frame_parchment.png");
  --btn-green: url("../assets/frames/btn_green.png");
  --btn-gold: url("../assets/frames/btn_gold.png");
}

/* ---------- Panel de piedra (paneles grandes, modales, HUD) ---------- */
.wt-panel-stone {
  border-style: solid;
  border-width: 34px;
  border-image: var(--frame-stone) 96 fill stretch;
  padding: 4px 10px 10px;
  min-height: 90px;
}

/* ---------- Cintillo de madera (títulos, cabeceras) ---------- */
.wt-panel-wood {
  border-style: solid;
  border-width: 22px;
  border-image: var(--frame-wood) 72 fill stretch;
  padding: 2px 8px;
  min-height: 60px;
}

/* ---------- Pergamino (áreas de contenido y texto) ----------
   El borde rasgado es irregular, así que se estira en vez de repetirse:
   en una textura suave como esta el estiramiento no se nota, y repetir
   sí dejaría un patrón visible. */
.wt-panel-parchment {
  border-style: solid;
  border-width: 16px;
  border-image: var(--frame-parchment) 40 fill stretch;
  padding: 6px 12px;
  color: #4A3520;
}

/* ---------- Botones ---------- */
.wt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-style: solid;
  border-width: 20px 24px;
  padding: 0 6px;
  min-height: 52px;
  background: none;
  color: #FFF6D8;
  font-weight: 700;
  font-size: clamp(13px, 3.6cqw, 17px);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 90ms ease, filter 90ms ease;
}

.wt-btn--green { border-image: var(--btn-green) 60 fill stretch; }
.wt-btn--gold {
  border-image: var(--btn-gold) 67 fill stretch;
  color: #4A3308;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
}

.wt-btn:active { transform: translateY(2px) scale(0.985); }
.wt-btn:disabled { filter: grayscale(0.7) brightness(0.75); cursor: default; }
.wt-btn:focus-visible { outline: 3px solid #F7D66B; outline-offset: 3px; }

/* ---------- Decoraciones ----------
   Se posicionan sobre los marcos. Reutiliza las mismas 5 piezas
   rotadas y escaladas; no hacen falta más assets. */
.wt-decorated { position: relative; }
.wt-decorated::before,
.wt-decorated::after {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  background: no-repeat center / contain;
  pointer-events: none;
  z-index: 2;
}
.wt-decorated::before {
  top: -16px;
  left: -12px;
  background-image: url("../assets/decor/leaf.png");
  transform: rotate(-18deg);
}
.wt-decorated::after {
  right: -14px;
  bottom: -14px;
  background-image: url("../assets/decor/hibiscus.png");
  transform: rotate(12deg) scale(0.82);
}

/* ---------- Iconos de interfaz ----------
   Sustituyen a los emoji del index.html actual (🪙 💎 ❤️ ★ 🎁 ⚙️). */
.wt-icon {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.32em;
  background: no-repeat center / contain;
}
.wt-icon--coin { background-image: url("../assets/ui/coin.png"); }
.wt-icon--gem { background-image: url("../assets/ui/gem.png"); }
.wt-icon--heart { background-image: url("../assets/ui/heart.png"); }
.wt-icon--star { background-image: url("../assets/ui/star.png"); }
.wt-icon--chest { background-image: url("../assets/ui/chest.png"); }
.wt-icon--lock { background-image: url("../assets/ui/lock.png"); }
.wt-icon--trophy { background-image: url("../assets/ui/trophy.png"); }
.wt-icon--gear { background-image: url("../assets/ui/gear.png"); }
.wt-icon--star-empty { background-image: url("../assets/ui/star_empty.png"); }
.wt-icon--heart-empty { background-image: url("../assets/ui/heart_empty.png"); }

/* ---------- Marco vertical + container queries ----------
   Esto es lo que hace que en escritorio se vea como app de celular:
   el juego vive dentro de un marco 9:16 centrado, y el resto de la
   pantalla lo rellena el fondo del mundo difuminado. */
:root { --frame-w: min(100vw, calc(100dvh * 0.5625)); }

.wt-frame-fill {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--world-bg, #0F2A1D) center / cover;
  filter: blur(40px) saturate(0.8) brightness(0.45);
  transform: scale(1.15);
  pointer-events: none;
}

.app-shell {
  width: var(--frame-w);
  margin-inline: auto;
  container-type: inline-size;
}

/* A partir de aquí, las media queries de app.css que hoy dicen
   @media (orientation: portrait), (max-width: 860px)
   deben pasar a
   @container (max-width: 860px)
   para que el layout compacto se active dentro del marco y no según
   el viewport. Ojo con las unidades vw dentro del marco: hay que
   cambiarlas a cqw. */