bash


#game-area:has(#wordsearch-loading),
#game-area:has(#wordsearch-container) {
  overflow:       hidden  !important;
  padding:        0.5rem  !important;
  display:        flex;
  flex-direction: column;
  width:          100%;
  max-width:      100%;
  box-sizing:     border-box;
}

/* ── .hidden sigue funcionando a pesar del display explícito ─ */
#wordsearch-loading.hidden   { display: none !important; }
#wordsearch-container.hidden { display: none !important; }

/* ── Loading ────────────────────────────────────────────────── */
#wordsearch-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(147, 197, 253, 0.6);
  letter-spacing: 0.02em;
}

/* ── Contenedor principal ───────────────────────────────────── */
/*
  MÓVIL   → columna: grid encima (1fr) + sidebar abajo (≤42%)
  DESKTOP → fila:    grid a la izquierda (1fr) + sidebar fijo (260px)
  CSS Grid en lugar de flex-basis% porque 1fr siempre resuelve
  correctamente, incluso cuando la altura viene de flex-grow.
*/
#wordsearch-container {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;

  display: grid;
  grid-template-rows:    1fr minmax(min-content, 42%);
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  #wordsearch-container {
    grid-template-rows:    1fr;
    grid-template-columns: 1fr 260px;   /* sidebar más ancho en desktop */
    gap: 1rem;
  }
}

/* ── Grid wrapper (container-size para min(cqw,cqh)) ────────── */
#wordsearch-grid-wrapper {
  min-height: 0;
  min-width:  0;
  overflow:   hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;   /* permite min(100cqw,100cqh) en el hijo */
}

/* ── La cuadrícula ──────────────────────────────────────────── */
#wordsearch-grid {
  display: grid;
  box-sizing: border-box;
  padding: 0.4rem;
  gap: 2px;

  /*
    Cuadrado más grande posible que cabe en el wrapper.
    cqw / cqh provienen del container-type:size del wrapper.
    Fallback: aspect-ratio + max para browsers sin CQ support.
  */
  width:      min(100cqw, 100cqh);
  height:     min(100cqw, 100cqh);
  max-width:  100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;

  /* Context para font-size cqmin de las celdas */
  container-type: size;

  /* — Tema — */
  background: linear-gradient(135deg, #111827 0%, #172554 40%, #0f172a 100%);
  border: 1px solid rgba(96, 165, 250, .25);
  border-radius: 1rem;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, .08),
    0 0 18px rgba(37,  99, 235, .12),
    0 4px 18px rgba(0,   0,   0, .35),
    inset 0 1px 0 rgba(96, 165, 250, .07);
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* ── Celdas de letras ───────────────────────────────────────── */
.letter-cell {
  width:      100% !important;
  height:     100% !important;
  min-width:  0   !important;
  min-height: 0   !important;
  padding:    0   !important;
  margin:     0   !important;
  box-sizing: border-box;

  display:         flex    !important;
  align-items:     center  !important;
  justify-content: center  !important;

  /* Escala con el grid real; fallback vmin para browsers sin CQ */
  font-size: clamp(0.44rem, 3.8vmin,  1.8rem)  !important;
  font-size: clamp(0.40rem, 4.5cqmin, 2.5rem)  !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;

  color:         rgba(148, 163, 184, 0.78) !important;
  background:    rgba(10,  17,  35,  0.55) !important;
  border:        1px solid rgba(96, 165, 250, 0.06) !important;
  border-radius: 3px !important;

  cursor:       pointer;
  user-select:  none;
  touch-action: none;

  transition:
    background   .10s ease,
    color        .10s ease,
    border-color .10s ease,
    transform    .10s ease,
    box-shadow   .10s ease !important;
}

.letter-cell:hover:not(.found):not(.selecting) {
  background:   rgba(37, 99, 235, 0.22) !important;
  color:        rgba(147, 197, 253, 0.95) !important;
  border-color: rgba(96, 165, 250, 0.30) !important;
  transform:    scale(1.1) !important;
  box-shadow:   0 0 8px rgba(59, 130, 246, 0.28) !important;
}

.letter-cell.selecting {
  background:   rgba(59, 130, 246, 0.40) !important;
  color:        #fff !important;
  border-color: rgba(96, 165, 250, 0.75) !important;
  transform:    scale(1.12) !important;
  box-shadow:   0 0 12px rgba(59, 130, 246, 0.55) !important;
  z-index: 1;
}

.letter-cell.found {
  color:        #fff        !important;
  transform:    scale(1.05) !important;
  border-color: transparent !important;
}

/* 8 colores rotativos por palabra encontrada */
.letter-cell.found-0 { background:linear-gradient(135deg,#1e40af,#3b82f6)!important; box-shadow:0 0 10px rgba(59,130,246,.60)!important; }
.letter-cell.found-1 { background:linear-gradient(135deg,#0e7490,#06b6d4)!important; box-shadow:0 0 10px rgba(6,182,212,.60)!important;  }
.letter-cell.found-2 { background:linear-gradient(135deg,#5b21b6,#8b5cf6)!important; box-shadow:0 0 10px rgba(139,92,246,.60)!important; }
.letter-cell.found-3 { background:linear-gradient(135deg,#065f46,#10b981)!important; box-shadow:0 0 10px rgba(16,185,129,.60)!important; }
.letter-cell.found-4 { background:linear-gradient(135deg,#9d174d,#ec4899)!important; box-shadow:0 0 10px rgba(236,72,153,.60)!important;  }
.letter-cell.found-5 { background:linear-gradient(135deg,#92400e,#f59e0b)!important; box-shadow:0 0 10px rgba(245,158,11,.55)!important;  }
.letter-cell.found-6 { background:linear-gradient(135deg,#14532d,#22c55e)!important; box-shadow:0 0 10px rgba(34,197,94,.60)!important;   }
.letter-cell.found-7 { background:linear-gradient(135deg,#7c2d12,#f97316)!important; box-shadow:0 0 10px rgba(249,115,22,.55)!important;  }

/* ── Sidebar ────────────────────────────────────────────────── */
#wordsearch-sidebar {
  min-height: 0;
  min-width:  0;
  overflow:   hidden;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* ── Progreso ───────────────────────────────────────────────── */
#wordsearch-progress {
  flex-shrink: 0;
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 0.67rem;
  color: rgba(147, 197, 253, 0.70);
  text-align: center;
  padding: 0.25rem 0.5rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 7px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ── Lista de palabras ──────────────────────────────────────── */
#wordsearch-word-list {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 0.3rem;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  /* Móvil: 2 columnas  |  Desktop: 1 columna */
  grid-template-columns: repeat(2, 1fr);
}
#wordsearch-word-list::-webkit-scrollbar { display: none; }

@media (min-width: 640px) {
  #wordsearch-word-list {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
}

/* ── Items de palabras ──────────────────────────────────────── */
/*
  Layout COLUMN en todos los tamaños:
  · Móvil:   compacto, 2 columnas, EN arriba, ES abajo
  · Desktop: más espacioso, 1 columna, EN arriba, ES abajo
  Esto evita el row layout apretado que causaba el overflow visual.
*/
.word-item {
  display:         flex       !important;
  flex-direction:  column     !important;
  align-items:     flex-start !important;
  justify-content: center     !important;
  gap:             0.06rem    !important;

  padding:       0.28rem 0.42rem !important;
  margin-bottom: 0              !important;
  min-width:     0              !important;
  overflow:      hidden         !important;
  box-sizing:    border-box;

  background: linear-gradient(
    135deg,
    rgba(17, 24, 39, 0.80) 0%,
    rgba(23, 37, 84, 0.35) 100%
  ) !important;
  border:        1px solid rgba(96, 165, 250, 0.10)   !important;
  border-left:   2.5px solid rgba(96, 165, 250, 0.22) !important;
  border-radius: 7px !important;

  transition:
    background   .25s ease,
    border-color .25s ease,
    opacity      .30s ease !important;
}

@media (min-width: 640px) {
  .word-item {
    padding:      0.4rem 0.65rem !important;
    gap:          0.1rem         !important;
    border-radius: 9px           !important;
    border-left-width: 3px       !important;
  }
}

.word-item.found {
  border-left-color: rgba(34, 197, 94, 0.55) !important;
  background: linear-gradient(
    135deg,
    rgba(5,  46, 35, 0.40) 0%,
    rgba(6,  78, 59, 0.20) 100%
  ) !important;
  opacity: 0.62 !important;
}

/* ── Etiquetas EN / ES ──────────────────────────────────────── */
.word-en-ws {
  display:         block                     !important;
  min-width:       0                         !important;
  width:           100%                      !important;
  font-size:       0.60rem                   !important;
  font-weight:     700;
  color:           rgba(147, 197, 253, 0.92) !important;
  text-transform:  uppercase;
  letter-spacing:  0.04em;
  line-height:     1.25;
  text-decoration: none                      !important;
  overflow:        hidden;
  text-overflow:   ellipsis;
  white-space:     nowrap;
}

@media (min-width: 640px) {
  .word-en-ws { font-size: 0.72rem !important; }
}

.word-item.found .word-en-ws {
  color:           rgba(100, 140, 180, 0.50) !important;
  text-decoration: line-through              !important;
}

.word-es-ws {
  display:       block                    !important;
  min-width:     0                        !important;
  width:         100%                     !important;
  font-size:     0.56rem                  !important;
  color:         rgba(96, 165, 250, 0.65) !important;
  font-style:    italic;
  line-height:   1.2;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

@media (min-width: 640px) {
  .word-es-ws { font-size: 0.65rem !important; }
}

.word-item.found .word-es-ws {
  color: rgba(70, 100, 140, 0.45) !important;
}

/* ── Partes de frases ───────────────────────────────────────── */
.phrase-part {
  display:       inline                            !important;
  padding:       0 2px                             !important;
  margin-right:  1px                               !important;
  background:    rgba(10, 18, 40, 0.65)            !important;
  border:        1px solid rgba(96, 165, 250, 0.10) !important;
  border-radius: 3px                               !important;
  font-size:     inherit;
  transition: all .2s ease;
}

.phrase-part.part-found {
  background:      rgba(5, 150, 105, 0.25)    !important;
  color:           rgba(110, 231, 183, 0.85)  !important;
  border-color:    rgba(16, 185, 129, 0.35)   !important;
  text-decoration: line-through               !important;
}