:root {
  --bg: #f6f5f1; --fg: #1f1f1f; --muted: #6b6b66; --card: #fff; --line: #dfdfdf;
  --black: #22252b; --real: #9ad8a8; --btn: #1f1f1f; --btnfg: #fff;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 16px; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 100vw; margin: 0 auto; padding: 0 20px; }
h1 { font-size: 1.25rem; margin: 0 0 4px; }
.sub { color: var(--muted); font-size: .85rem; margin: 0 0 14px; }

.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
button { font: inherit; border: 0; border-radius: 8px; padding: 9px 14px;
  background: var(--btn); color: var(--btnfg); cursor: pointer; }
button.alt { background: var(--btnfg); color: var(--fg); border: 1px solid var(--line); }

.layout { 
  display: grid; 
  grid-template-columns: auto 450px; /* Fija un ancho más estrecho para la columna de pistas */
  gap: 40px; 
  align-items: start; /* Centra verticalmente el crucigrama y las pistas */
  justify-content: center; /* Centra todo el bloque en la pantalla */
}
@media (max-width: 720px) { .layout { grid-template-columns: 1fr; } }

/* --n (columnas) lo fija app.js según el tamaño de la grilla */
#grid { --n: 11; --cs: min(calc((100vw - 20vw) / var(--n)), 67px);
  display: grid; grid-template-columns: repeat(var(--n), var(--cs)); gap: 2px;
  background: var(--line); padding: 2px; border-radius: 6px; width: max-content; max-width: 100%; }
.c { width: var(--cs); height: var(--cs); position: relative; display: flex;
  align-items: center; justify-content: center; font-weight: 700;
  font-size: calc(var(--cs) * .5); background: var(--card); color: #1a1a1a; }
.c.k { background: var(--black); }
.c:not(.k):not(.on) { color: transparent; }
.c.on { background: var(--real); }
.n { position: absolute; top: 1px; left: 3px; font-size: calc(var(--cs) * .22);
  font-weight: 600; color: var(--muted); line-height: 1; }
.c.on .n { color: #333; }

.clues h2 { font-size: 1.1rem; margin: 0 0 8px; }
.clues ul { list-style: none; margin: 0 0 16px; padding: 0; font-size: 1rem; /* Letra más grande en las pistas */ }
.clues li { display: flex; gap: 8px; padding: 4px 0; align-items: baseline; line-height: 1.3; }
.clues b { min-width: 1.8em; }

.ans { margin-left: auto; font-weight: 600; font-size: .8rem; letter-spacing: .04em; }
.stats { font-size: .82rem; color: var(--muted); margin-top: 10px; }