/* game.css — estilos de la parte jugable. Se carga DESPUÉS de styles.css */
:root { --act: #dbe7ff; --sel: #a9c4ff; --okfg: #1a1a1a; }
/* @media (prefers-color-scheme: dark) {
  :root { --act: #2b3a57; --sel: #3d5a94; }
} */

#grid .c:not(.k) { color: var(--fg); cursor: pointer; user-select: none; -webkit-user-select: none; }
#grid .c .l { pointer-events: none; }
#grid .c.act { background: var(--act); }
#grid .c.ok  { background: var(--real); color: var(--okfg); }
#grid .c.sel { background: var(--sel); box-shadow: inset 0 0 0 2px var(--fg); }
#grid .c.ok.sel { background: var(--real); }

.clues li { cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.clues li.act { background: var(--act); }
.clues li.done { color: var(--muted); text-decoration: line-through; }
.clues li.done::after { content: "✓"; margin-left: auto; text-decoration: none; color: #9ad8a8; font-weight: 700; }

.progress { margin-top: 10px; font-size: .9rem; font-weight: 600; }
.progress.win { color: #9ad8a8; }

/* ---- Pista ---- */
#grid.hint-armed { outline: 2px dashed #e0a100; outline-offset: 2px; }
#grid.hint-armed .c:not(.k) { cursor: crosshair; }
#grid .hinted::after { content: ""; position: absolute; right: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--btnfg);  }
button:disabled { opacity: .45; cursor: default; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .5); }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--card); color: var(--fg); border-radius: 12px; padding: 20px; width: 100%; max-width: 360px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.modal h3 { margin: 0 0 8px; font-size: 1.05rem; }
.modal p { margin: 0 0 16px; font-size: .92rem; color: var(--muted); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }