/* El Crucigrama · la grilla del diario sobre el escritorio; fichas que encajan con un clic; al completar una palabra, su
   dibujito aparece al costado (CLÁSICOS IC v0.1) */
.cl-el-crucigrama {
  --cl-fondo: #1f3b4a; --cl-acento: #ffd166; --cl-acento-sombra: #b98b1e; --cl-papel: #fbf7ee; --cl-tinta: #1c1c1c;
  --cl-suave: rgba(255,255,255,.1); --cl-borde: rgba(255,255,255,.28); --cl-titulo-color: #fbf7ee; --cl-titulo: Georgia, "Times New Roman", serif;
}
.cl-el-crucigrama .cl-fondo {
  background:
    radial-gradient(80% 60% at 50% 10%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, #24475a, #1f3b4a 60%, #172d39);
}
.cl-el-crucigrama .cl-logo { background-image: url('../arte/grilla.webp'); }   /* arte de Franco (19 oct); logo.svg queda para la galería */
.cl-el-crucigrama .cl-nombre { font-weight: 700; letter-spacing: .02em; text-shadow: 0 3px 0 #0f2029; }
.cl-el-crucigrama .cr { background: transparent; }
.cl-el-crucigrama .cr-top { background: rgba(10,25,33,.5); border-bottom-color: rgba(255,209,102,.25); }
.cl-el-crucigrama .cr-globo { background: #fbf7ee; color: #1c1c1c; }
/* la grilla: papel de diario, casillas pegadas con borde de lápiz, letra de imprenta */
.cl-el-crucigrama .cr-tablero { gap: 0; padding: 6px; background: #fbf7ee; border: 3px solid #1c1c1c; border-radius: 6px; box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.3); }
.cl-el-crucigrama .cr-vacia { visibility: visible; background: repeating-linear-gradient(45deg, rgba(28,28,28,.06) 0 3px, transparent 3px 7px); }
.cl-el-crucigrama .cr-casilla { border-radius: 0; background: #fff; color: #1c1c1c; box-shadow: inset 0 0 0 1.5px #2b2b2b; font-family: Georgia, "Times New Roman", serif; }
.cl-el-crucigrama .cr-casilla.sel { background: #fff2bf; box-shadow: inset 0 0 0 1.5px #2b2b2b, inset 0 0 0 4px #ffd166; }
.cl-el-crucigrama .cr-casilla.bien { background: #e6f5e9; }
.cl-el-crucigrama .cr-casilla.bien .cr-letra { color: #1f6b3a; }
.cl-el-crucigrama .cr-casilla.no { background: #fde2dc; color: #1c1c1c; }
.cl-el-crucigrama .cr-casilla.fija .cr-letra { color: #5b6b8a; }
.cl-el-crucigrama .cr-num { font-family: Georgia, serif; color: #1c1c1c; opacity: .75; }
.cl-el-crucigrama .cr-letra.cl-encaja { animation: cl-cr-encaja .22s cubic-bezier(.3,1.6,.5,1); }
@keyframes cl-cr-encaja { from { transform: translateY(-10px) scale(1.25); opacity: .4; } to { transform: none; opacity: 1; } }
/* la pista, en un papelito; las fichas, de madera clara */
.cl-el-crucigrama .cr-pista { background: #fbf7ee; color: #1c1c1c; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.cl-el-crucigrama .cr-pista-cab { color: #8a5a00; font-family: Georgia, serif; }
.cl-el-crucigrama .cr-oir { background: rgba(28,28,28,.06); border-color: rgba(28,28,28,.2); color: #1c1c1c; }
.cl-el-crucigrama .cr-ficha { background: linear-gradient(160deg, #fff7df, #f0d9a2); color: #2b1f0e; font-family: Georgia, serif; box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(150,110,40,.35), 0 4px 0 rgba(0,0,0,.35); transition: transform .1s ease; }
.cl-el-crucigrama .cr-ficha:active { transform: translateY(3px); }
.cl-el-crucigrama .cr-n { background: rgba(255,255,255,.1); }
.cl-el-crucigrama .cr-n.bien { background: #2f8a54; }
/* el dibujito que aparece al costado de la palabra y vuela a su número */
.cl-cr-pega { position: fixed; z-index: 20; font-size: 64px; line-height: 1; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
  background: #fbf7ee; border-radius: 18px; padding: 6px 10px; border: 3px solid #1c1c1c; transform: rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .cl-el-crucigrama .cr-letra.cl-encaja { animation: none; } .cl-el-crucigrama .cr-ficha { transition: none; } }

/* CLÁSICOS IC v0.2 · la taza de café que humea al lado del diario */
.cl-el-crucigrama .cl-fondo { overflow: hidden; }
.cl-cr-taza { position: absolute; right: 2%; bottom: 3%; width: clamp(70px, 13vmin, 130px); height: auto; opacity: .9; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.cl-jugando .cl-cr-taza { display: none; }   /* en el juego, solo en pantallas anchas (no tapa los botones) */
@media (min-width: 1100px) and (min-height: 700px) { .cl-jugando .cl-cr-taza { display: block; } }
.cl-cr-taza .vapor { animation: cl-cr-vapor 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.cl-cr-taza .v2 { animation-delay: -1.7s; }
@keyframes cl-cr-vapor { 0% { opacity: 0; transform: translateY(8px) scaleY(.7); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px) scaleY(1.1); } }
/* la palabra acertada se pinta de su color */
.cl-el-crucigrama .cr-casilla.cl-cr-pintada { background: var(--cl-cr-color, #e6f5e9); animation: cl-cr-pinta .45s ease both; }
.cl-el-crucigrama .cr-casilla.cl-cr-pintada .cr-letra { color: #1c1c1c; }
@keyframes cl-cr-pinta { from { background: #fff; transform: scale(.92); } 60% { transform: scale(1.06); } to { transform: none; } }
/* la tarjeta del final */
.cl-cr-tarjeta { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; padding: 8px; box-sizing: border-box;
  background: #fbf7ee repeating-linear-gradient(0deg, rgba(28,28,28,.05) 0 1px, transparent 1px 12px); border: 3px solid #1c1c1c; }
.cl-cr-tarjeta span { font-size: clamp(30px, 6vh, 44px); line-height: 1; background: #fff; border: 2px solid #1c1c1c; border-radius: 12px; padding: 3px 6px; transform: rotate(var(--r));
  animation: cl-cr-pegar .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes cl-cr-pegar { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: rotate(var(--r)); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cl-cr-taza .vapor, .cl-el-crucigrama .cr-casilla.cl-cr-pintada, .cl-cr-tarjeta span { animation: none; } }