/* ============================================================
   WORDTECA — Opción A · marco vertical · v1.5.0
   Se carga DESPUÉS de app.css y de wordteca-frames.css.
   No reemplaza app.css: solo redefine el layout de juego.
   ============================================================ */

/* ---------- 1. Marco vertical ----------
   El juego vive dentro de un rectángulo 9:16 centrado. En celular ocupa
   toda la pantalla; en escritorio queda centrado y los costados los
   rellena el fondo del mundo difuminado. */

:root {
  --frame-w: min(100vw, calc(100dvh * 0.5625));
  --gold: #E6B93D;
  --gold-lite: #F7D66B;
  --cream: #F2E3C0;
  --ink: #4A3520;
}

html, body { overscroll-behavior: none; }

body {
  background: #071B11;
  overflow: hidden;
}

.wt-frame-fill {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--world-bg, none) center / cover no-repeat, #0B1F13;
  filter: blur(44px) saturate(0.75) brightness(0.42);
  transform: scale(1.18);
  pointer-events: none;
}

.app-shell {
  width: var(--frame-w);
  margin-inline: auto;
  container-type: inline-size;
  container-name: shell;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  padding:
    calc(var(--safe-top, 0px) + 6px)
    calc(var(--safe-right, 0px) + 8px)
    calc(var(--safe-bottom, 0px) + 6px)
    calc(var(--safe-left, 0px) + 8px);
}

/* El fondo del mundo dentro del marco mantiene su nitidez. */
.scene-bg { border-radius: 0; }

/* ---------- 2. Rejilla de la pantalla de juego (Opción A) ----------
   filas: barra de nivel · objetivos · TABLERO · power-ups
   El tablero se lleva todo el espacio sobrante. */

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 6px;
  min-height: 0;
}

.board-host {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: visible;
}

.hud-hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 3. Barra superior ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  border-width: 20px 24px;
  padding: 0 4px;
}

.hud-wallet { display: flex; gap: 5px; min-width: 0; flex-wrap: nowrap; }

.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px 3px 4px;
  border: 1px solid rgba(230, 185, 61, 0.5);
  border-radius: 999px;
  background: rgba(6, 24, 14, 0.62);
  color: var(--cream);
  font-size: clamp(10px, 3cqw, 13px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.hud-chip small { font-size: 8px; opacity: 0.7; margin-left: 2px; }
.hud-chip .wt-icon { width: 1.5em; height: 1.5em; vertical-align: -0.4em; }

.hud-actions { display: flex; gap: 4px; align-items: center; }

.hud-btn {
  display: grid;
  place-items: center;
  width: clamp(30px, 8.4cqw, 38px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 224, 131, 0.6);
  border-radius: 50%;
  background: linear-gradient(#18764B, #0D5235);
  color: #FFEBAD;
  font-size: clamp(13px, 3.8cqw, 17px);
  cursor: pointer;
  position: relative;
}
.hud-btn:active { transform: translateY(1px); }

.hud-lang {
  height: clamp(30px, 8.4cqw, 38px);
  padding: 0 4px;
  border: 1px solid rgba(255, 224, 131, 0.6);
  border-radius: 9px;
  background: rgba(6, 24, 14, 0.8);
  color: var(--cream);
  font-size: 11px;
  font-weight: 700;
}

/* ---------- 4. Barra de nivel ---------- */

.level-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-width: 16px 20px;
  padding: 0 4px;
  min-height: 0;
}

.level-bar__id { min-width: 0; }
.level-bar__id .control-label {
  display: block;
  margin: 0;
  color: var(--gold-lite);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.level-name {
  display: block;
  color: var(--cream);
  font-size: clamp(11px, 3.4cqw, 15px);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.level-number {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: linear-gradient(#18764B, #0D5235);
  color: var(--gold-lite);
  font-size: 13px;
  font-weight: 900;
}

.level-bar__limits { display: flex; gap: 5px; }
.limit-box {
  display: grid;
  justify-items: center;
  padding: 2px 7px;
  border: 1px solid rgba(230, 185, 61, 0.42);
  border-radius: 8px;
  background: rgba(6, 24, 14, 0.55);
  line-height: 1.1;
}
.limit-box span { color: rgba(242, 227, 192, 0.65); font-size: 7px; letter-spacing: 0.08em; }
.limit-box strong { color: var(--cream); font-size: 13px; }

.combo-pill { grid-column: 1 / -1; display: none; }
.combo-pill[data-active="true"] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(230, 185, 61, 0.16);
  color: var(--gold-lite);
  font-size: 10px;
  font-weight: 900;
}
.combo-pill__timer { flex: 1; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.combo-pill__timer b { display: block; height: 100%; background: var(--gold-lite); }

/* ---------- 5. Panel de objetivos ---------- */

.objective-panel {
  border-width: 14px 16px;
  padding: 2px 6px 4px;
  color: var(--ink);
  min-height: 0;
}

.objective-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.objective-panel__head .control-label {
  grid-column: 1;
  margin: 0;
  color: #7A5B2E;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.objective-title {
  grid-column: 1;
  margin: 0;
  color: var(--ink);
  font-size: clamp(10px, 3cqw, 13px);
  font-weight: 800;
  line-height: 1.15;
}
.progress-orb {
  grid-row: 1 / 3;
  grid-column: 2;
  display: grid;
  place-items: center;
  min-width: 42px;
  padding: 4px 8px;
  border: 1.5px solid #C39B4A;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

/* Rejilla de palabras objetivo: 2 columnas, con hueco para el ícono.
   El ícono lo pinta app.js dentro de .target-word; si no hay, se ve solo
   el texto y la maquetación no se rompe. */
.target-words {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  margin-top: 4px;
}

.target-word {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid rgba(122, 91, 46, 0.28);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.34);
  color: var(--ink);
  font-size: clamp(8px, 2.6cqw, 11px);
  font-weight: 800;
  letter-spacing: 0.04em;
  min-width: 0;
}
.target-word span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.target-word__status {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 13px; height: 13px;
  border: 1.5px solid #B08B41;
  border-radius: 50%;
  font-size: 9px;
  color: transparent;
}
.target-word.is-found { background: rgba(99, 153, 34, 0.24); border-color: #639922; }
.target-word.is-found .target-word__status {
  background: #639922;
  border-color: #3B6D11;
  color: #fff;
}

.objective-list { display: grid; gap: 2px; margin-top: 3px; }
.objective-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.26);
  color: var(--ink);
  font-size: 8px;
  font-weight: 700;
}

.progress-track {
  height: 5px;
  margin-top: 4px;
  border-radius: 3px;
  background: rgba(74, 53, 32, 0.22);
  overflow: hidden;
}
.progress-track__fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #639922, #97C459);
  transition: width 220ms ease;
}

.crazy-hud { display: none; margin-top: 4px; }
.crazy-hud[data-active="true"] { display: block; }
.crazy-hud__head {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #9E3A0F;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.crazy-hud__head strong { margin-left: auto; }
.crazy-track { height: 4px; margin-top: 2px; border-radius: 2px; background: rgba(74, 53, 32, 0.22); overflow: hidden; }
.crazy-track__fill { height: 100%; width: 0; background: linear-gradient(90deg, #EF9F27, #E24B4A); }

/* ---------- 6. Barra inferior de power-ups ---------- */

.power-bar { display: grid; gap: 5px; min-height: 0; }

.word-preview {
  min-height: 26px;
  display: grid;
  place-items: center;
  padding: 3px 10px;
  border: 1.5px solid rgba(230, 185, 61, 0.55);
  border-radius: 999px;
  background: rgba(6, 24, 14, 0.7);
  color: var(--gold-lite);
  font-size: clamp(13px, 4.4cqw, 19px);
  font-weight: 900;
  letter-spacing: 0.18em;
}

.powerup-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.powerup-btn {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 4px 2px 3px;
  border: 1.5px solid rgba(230, 185, 61, 0.55);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(41, 90, 55, 0.92), rgba(12, 40, 24, 0.94));
  color: var(--cream);
  font-size: clamp(7px, 2.3cqw, 9px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  min-width: 0;
}
.powerup-btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.powerup-btn__icon {
  width: clamp(24px, 7.6cqw, 34px);
  height: clamp(24px, 7.6cqw, 34px);
  object-fit: contain;
}
.powerup-btn b {
  position: absolute;
  top: -5px; right: -3px;
  min-width: 17px;
  padding: 1px 4px;
  border: 1.5px solid #7A1F1F;
  border-radius: 999px;
  background: #E24B4A;
  color: #fff;
  font-size: 9px;
  line-height: 1.3;
}
.powerup-btn[data-empty="true"] { filter: grayscale(0.75) brightness(0.7); }
.powerup-btn[data-active="true"] {
  border-color: var(--gold-lite);
  box-shadow: 0 0 0 2px rgba(247, 214, 107, 0.45), 0 0 16px rgba(247, 214, 107, 0.4);
}
.powerup-btn:active { transform: translateY(1px); }

/* ---------- 7. Container queries ----------
   Reemplazan a las @media (orientation: portrait) de app.css: ahora el
   layout compacto responde al ANCHO DEL MARCO, no al del viewport, así
   que en escritorio se comporta igual que en celular. */

@container shell (max-width: 420px) {
  .target-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level-bar__limits .limit-box span { display: none; }
}

@container shell (max-width: 340px) {
  .hud-chip--stars { display: none; }
  .powerup-btn span { display: none; }
  .objective-panel { border-width: 12px 14px; }
}

@container shell (min-width: 460px) {
  .target-words { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Marcos más finos cuando el marco es angosto, para no comerse el tablero. */
@container shell (max-width: 380px) {
  .topbar { border-width: 17px 20px; }
  .level-bar { border-width: 14px 17px; }
}

/* ---------- 8. Ajustes de accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {
  .progress-track__fill, .powerup-btn, .hud-btn { transition: none !important; }
}

.app-shell[data-large-text="true"] .target-word { font-size: 12px; }
.app-shell[data-high-contrast="true"] .objective-panel { color: #2A1D0E; }

/* ============================================================
   9. CORRECCIONES v1.5.1 — tras la primera prueba en navegador
   ============================================================ */

/* ---- 9.1 Marcos más finos ----
   El 9-slice a 20/24px hacía que la greca dominara la pantalla y
   robaba altura al tablero. El slice NO se toca, solo el width. */
.topbar { border-width: 13px 16px; padding: 0 2px; }
.level-bar { border-width: 11px 14px; }
.objective-panel { border-width: 10px 12px; padding: 2px 4px 3px; }

/* ---- 9.2 Legibilidad sobre pergamino ----
   app.css define .objective-row y .target-word más abajo en el archivo
   pensando en fondo OSCURO: texto crema y dorado. Sobre el pergamino
   claro quedaban invisibles. Se fuerza tinta oscura dentro del panel. */
.objective-panel .target-word {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(122, 91, 46, 0.28);
  padding: 3px 6px;
  gap: 4px;
  font-size: clamp(8px, 2.5cqw, 11px);
}
.objective-panel .target-word.is-found {
  color: #2F4A12;
  background: rgba(99, 153, 34, 0.26);
  border-color: #639922;
}
.objective-panel .target-word__status { width: 13px; height: 13px; color: transparent; }
.objective-panel .target-word.is-found .target-word__status { background: #639922; color: #fff; }

.objective-panel .objective-row {
  border: 1px solid rgba(122, 91, 46, 0.22);
  background: rgba(255, 255, 255, 0.26);
  padding: 2px 6px;
  gap: 4px;
  grid-template-columns: 13px minmax(0, 1fr) auto;
}
.objective-panel .objective-row i,
.objective-panel .objective-row span { color: #6B4E24; font-size: 8px; }
.objective-panel .objective-row strong { color: var(--ink); font-size: 9px; }
.objective-panel .objective-row.is-complete {
  background: rgba(99, 153, 34, 0.24);
  border-color: rgba(99, 153, 34, 0.5);
}
.objective-panel .objective-row.is-complete i,
.objective-panel .objective-row.is-complete strong { color: #2F4A12; }

/* ---- 9.3 Altura tope del panel de objetivos ----
   Un nivel 9x9 con 7 palabras hacía crecer el panel hasta ~265px y
   asfixiaba el tablero. Ahora tiene techo y las palabras hacen scroll
   dentro de su propia caja; la cabecera y la barra siempre se ven. */
.objective-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(190px, 24dvh);
  min-height: 0;
}
.objective-panel .target-words {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  margin: 3px 0 0;
  padding-right: 2px;
}
.objective-panel .target-words::-webkit-scrollbar { width: 4px; }
.objective-panel .target-words::-webkit-scrollbar-thumb {
  background: rgba(122, 91, 46, 0.4);
  border-radius: 2px;
}
/* Las 3 filas de objetivo duplican lo que ya dice el contador 0/7.
   Se compactan a una línea; para ocultarlas del todo, display:none. */
.objective-panel .objective-list {
  display: flex;
  gap: 3px;
  margin-top: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}
.objective-panel .objective-list .objective-row { flex: 0 0 auto; }

/* ---- 9.4 La palabra en curso no ocupa sitio cuando está vacía ---- */
.word-preview {
  min-height: 0;
  height: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 120ms ease, opacity 120ms ease;
}
.word-preview.has-word {
  height: 30px;
  padding: 3px 10px;
  border-width: 1.5px;
  opacity: 1;
  background: rgba(6, 24, 14, 0.72);
  color: var(--gold-lite);
}

/* ---- 9.5 Los iconos de power-up se perdían sobre el botón oscuro ---- */
.powerup-btn__icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) brightness(1.18) saturate(1.1);
}
.powerup-btn::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(28px, 8.6cqw, 38px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 214, 107, 0.22), transparent 68%);
  pointer-events: none;
}

/* ---- 9.6 El mapa ocupa TODO el marco, no solo el hueco del tablero ----
   Vive dentro de #boardHost, que en la Opción A es pequeño; se estaba
   renderizando apretado y con doble barra de scroll. */
#worldMap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--frame-w);
  z-index: 40;
  padding:
    calc(var(--safe-top, 0px) + 8px)
    10px
    calc(var(--safe-bottom, 0px) + 8px);
}
#worldMap[hidden] { display: none !important; }
.world-map__shell { max-height: 100%; }

/* ---- 9.7 Barra superior más limpia ----
   Siete botones no caben en un marco de 540px. Publicar es herramienta
   de desarrollo y ya está duplicada en la tarjeta del mapa. */
#releaseOpen { display: none; }
.hud-actions { flex-wrap: nowrap; }
.hud-lang { padding: 0 2px; font-size: 10px; }

@container shell (max-width: 400px) {
  #cloudOpen { display: none; }
  .hud-chip { padding: 2px 5px 2px 3px; font-size: 10px; }
}

/* ---- 9.8 Icono dentro de cada palabra objetivo ---- */
.objective-panel .target-word__icon {
  flex: 0 0 auto;
  width: clamp(15px, 4.4cqw, 20px);
  height: clamp(15px, 4.4cqw, 20px);
  object-fit: contain;
}
.objective-panel .target-word.is-found .target-word__icon { opacity: 0.55; }