/* Accesibilidad (foco de teclado) y diálogos modales */

/* foco visible solo al navegar con teclado */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; transform: translateY(-7px); }
.cell:focus-visible { outline: 2px solid var(--cream); outline-offset: -3px; z-index: 3; }

.srOnly {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* diálogos (<dialog>) — confirmar, exportar e importar niveles */
#dialog {
  margin: auto; /* el reset global (* { margin: 0 }) lo sacaba del centro */
  border: none; border-radius: 20px; padding: 0; color: var(--ink);
  background-image: var(--grain); background-color: var(--cream);
  width: min(520px, 92vw); box-shadow: 0 30px 70px rgba(10,25,10,.35);
}
#dialog::backdrop { background: rgba(20,40,20,.5); backdrop-filter: blur(4px); }
#dialog[open] { animation: winPop .25s var(--ease-out); }
.dlgBox { padding: 24px 26px 20px; display: flex; flex-direction: column; gap: 12px; }
.dlgBox h3 { font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.dlgBox p { font-size: 14.5px; line-height: 1.45; }
.dlgBox .dlgHint { font-size: 12.5px; color: var(--ink-soft); }
.dlgBox textarea {
  width: 100%; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px;
  background: #fff; color: var(--ink); border: 1px solid var(--cream-line); border-radius: 12px; padding: 10px; resize: vertical;
}
.dlgFile { font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dlgBtns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
/* confirmaciones: todo centrado */
.dlgBox.center { text-align: center; align-items: center; padding: 28px 30px 24px; }
.dlgBox.center p { max-width: 34ch; color: var(--ink-soft); }
.dlgBox.center .dlgBtns { justify-content: center; margin-top: 10px; }
#dialog:has(.dlgBox.center) { width: min(420px, 92vw); }
.dlgBtns button:last-child { --b-bg: var(--ink); --b-fg: var(--cream); --b-line: var(--ink); }
.dlgBtns button.danger:last-child { --b-bg: var(--accent-deep); --b-line: var(--accent-deep); --b-fg: var(--cream); }

/* campos de texto del creador y del debug */
#edName, #dbgSeed {
  width: 150px; background: #fff; color: var(--ink); border: 1px solid var(--cream-line);
  border-radius: 999px; padding: 3px 10px; font-size: 12.5px;
}
#dbgSeed { width: 110px; text-align: right; }

/* pantallas estrechas (móvil): editor y paneles */
@media (max-width: 640px) {
  .mContent { width: 100%; }
  #edLayout { flex-direction: column; }
  #edPanel, #edPanelL { width: 100%; max-height: none; }
  #debugPanel { width: 100%; }
}

/* títulos semánticos (<h1>) con la misma métrica que el <div> original */