/* Sopa de letras a dos: tablilla de madera con pinza, hoja cuadriculada, cápsulas de color por jugador. */
.sp { --cel: max(24px, min(54px, calc((100vw - 720px) / var(--n)), calc((100vh - 320px) / var(--n))));
      display: grid; grid-template-columns: minmax(200px, 260px) auto minmax(200px, 260px); gap: 22px; align-items: start; justify-content: center; width: 100%; }
.sp-centro { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* reloj de arena */
.sp-reloj { position: relative; display: flex; align-items: center; gap: 10px; width: calc(var(--cel) * var(--n) + 44px); max-width: 100%;
            background: #fff; border: 3px solid var(--cq-ink); border-radius: 16px; padding: 6px 12px 6px 6px; box-shadow: 3px 3px 0 var(--cq-ink); }
.sp-arena { line-height: 0; flex: none; }
.sp-arena.gira { animation: sp-gira .6s steps(4); }
.sp-barra { position: relative; flex: 1; height: 20px; border: 3px solid var(--cq-ink); border-radius: 999px; background: #efe8da; overflow: hidden; }
.sp-barra i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--cq-mint); transition: width .25s linear, background .3s;
              background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 6px, transparent 6px 12px); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.12); }
.sp-reloj.medio .sp-barra i { background-color: var(--cq-yellow); }
.sp-reloj.poco .sp-barra i { background-color: var(--cq-coral); }
.sp-reloj.poco .sp-tiempo { color: var(--cq-coral-d); animation: dos-late 1s ease-in-out infinite; }
.sp-tiempo { font: 800 22px/1 var(--cq-head); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.sp-bonus { position: absolute; right: 70px; top: -14px; font: 800 18px/1 var(--cq-head); color: var(--cq-mint-d); background: var(--cq-mint-l);
            border: 3px solid var(--cq-ink); border-radius: 999px; padding: 3px 9px; opacity: 0; pointer-events: none; }
.sp-bonus.on { animation: sp-bonus 1.4s ease-out forwards; }

/* tablilla + hoja */
.sp-tabla { position: relative; padding: 26px 16px 16px; background: #a8703d; border: 3px solid var(--cq-ink); border-radius: 18px;
            box-shadow: 6px 6px 0 var(--cq-ink), inset 0 0 0 3px #c98a4e, inset 0 -6px 0 #7e4f27;
            background-image: repeating-linear-gradient(176deg, rgba(255,255,255,.05) 0 3px, transparent 3px 11px, rgba(60,30,10,.08) 11px 13px, transparent 13px 22px); }
.sp-pinza { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); line-height: 0; z-index: 3; filter: drop-shadow(0 3px 0 rgba(31,34,64,.3)); }
.sp-papel { position: relative; width: calc(var(--cel) * var(--n)); height: calc(var(--cel) * var(--n)); background-color: #fffdf6;
            background-image: linear-gradient(#dfe8f7 1px, transparent 1px), linear-gradient(90deg, #dfe8f7 1px, transparent 1px);
            background-size: var(--cel) var(--cel); background-position: -1px -1px; border-radius: 4px; outline: 3px solid var(--cq-ink); outline-offset: 3px;
            box-shadow: 0 0 0 3px #fffdf6, 3px 5px 0 6px rgba(60,30,10,.35); touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.sp-papel:focus-visible { outline-color: var(--cq-blue); outline-width: 4px; }
.sp.espera .sp-papel { cursor: default; }
.sp-caps, .sp-sel, .sp-letras { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-caps, .sp-sel { overflow: visible; pointer-events: none; }
.sp-letras { display: grid; grid-template-columns: repeat(var(--n), 1fr); pointer-events: none; }
.sp-letras span { display: grid; place-items: center; font: 800 calc(var(--cel) * .54)/1 var(--cq-head); color: var(--cq-ink); }
.sp-cap-b { stroke: var(--cq-ink); stroke-width: .84; stroke-linecap: round; }
.sp-cap-f { stroke-width: .66; stroke-linecap: round; }
.sp-c1 .sp-cap-f { stroke: #ffc4b2; } .sp-c2 .sp-cap-f { stroke: #b9cdff; }
.sp-c1 .sp-cap-b { stroke: var(--cq-coral-d); } .sp-c2 .sp-cap-b { stroke: var(--cq-blue-d); }
.sp-cap.nueva { animation: sp-sale .45s cubic-bezier(.3,1.6,.5,1) both; transform-box: fill-box; transform-origin: center; }
.sp-cap.fiesta { animation: sp-fiesta .5s steps(2) var(--d) 3; transform-box: fill-box; transform-origin: center; }
.sp-falta .sp-cap-b { stroke: var(--cq-ink2); stroke-dasharray: .18 .12; stroke-width: .8; }
.sp-falta .sp-cap-f { stroke: #fff3cf; stroke-width: .62; }
.sp-s-b { stroke: var(--cq-ink); stroke-width: .86; stroke-linecap: round; opacity: .85; }
.sp-s { stroke: var(--cq-yellow); stroke-width: .7; stroke-linecap: round; }
.sp-s-ini { animation: sp-parpadea .8s steps(2) infinite; }
.sp-cursor { position: absolute; left: calc(var(--x, 0) * var(--cel)); top: calc(var(--y, 0) * var(--cel)); width: var(--cel); height: var(--cel);
             border: 3px solid var(--cq-blue); border-radius: 8px; box-shadow: 0 0 0 2px #fff; display: none; pointer-events: none; }
.sp-cursor.on { display: block; }

/* listas de palabras */
.sp-lista { background: #fff; border: 3px solid var(--cq-ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--j-d); overflow: hidden; }
.sp-lista header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--j-l); border-bottom: 3px solid var(--cq-ink); }
.sp-lista-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; background: #fff; border: 3px solid var(--cq-ink); border-radius: 12px; line-height: 0; }
.sp-lista header div { display: flex; flex-direction: column; min-width: 0; }
.sp-lista header b { font: 800 19px/1.1 var(--cq-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-lista header small { font-weight: 700; color: var(--j-d); font-size: 14px; }
.sp-cuenta { margin-left: auto; font: 800 18px/1 var(--cq-head); background: var(--cq-yellow); border: 3px solid var(--cq-ink); border-radius: 10px; padding: 6px 8px; }
.sp-lista.completa .sp-cuenta { background: var(--cq-mint); color: #fff; }
.sp-lista ul { list-style: none; margin: 0; padding: 10px; display: grid; gap: 6px; }
.sp-lista li { display: flex; align-items: center; gap: 8px; font: 700 18px/1.2 var(--cq-body); padding: 6px 10px; border-radius: 10px; border: 2px dashed var(--cq-line2); background: #fffdf6; }
.sp-ok { width: 16px; height: 16px; line-height: 0; flex: none; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .2s; }
.sp-lista li.si { background: var(--j-l); border: 2px solid var(--j-d); }
.sp-lista li.si .sp-w { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--j-d); color: var(--cq-ink2); }
.sp-lista li.si .sp-ok { opacity: 1; transform: none; }
.sp-lista li.ayuda::after { content: "ayuda"; margin-left: auto; font: 800 11.5px/1 var(--cq-body); text-transform: uppercase; letter-spacing: .5px;
                            background: #fff; border: 2px solid var(--cq-ink); border-radius: 999px; padding: 3px 6px; }
.sp-lista li.falta { border: 2px dashed var(--cq-ink2); background: var(--cq-yellow-l); }
.sp-lista li.pop { animation: sp-pop .5s cubic-bezier(.3,1.6,.5,1); }
.sp-ayuda { margin: 0 10px 10px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14.5px; background: var(--cq-mint-l);
            border: 2px solid var(--cq-mint-d); border-radius: 10px; color: var(--cq-mint-d); }

/* preparación */
.sp-prep { width: min(1060px, 100%); background: #fff; border: 3px solid var(--cq-ink); border-radius: var(--cq-r-lg); box-shadow: var(--cq-sh-lg); padding: 24px 26px; }
.sp-prep-cab { display: flex; gap: 18px; align-items: center; }
.sp-prep-arte { flex: none; background: var(--cq-cyan-l); border: 3px solid var(--cq-ink); border-radius: 16px; padding: 8px; line-height: 0; box-shadow: 3px 3px 0 var(--cq-ink); }
.sp-prep-cab p { margin: 6px 0 0; color: var(--cq-ink2); font-size: 17px; }
.sp-niveles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.sp-nivel { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; text-align: left; align-items: center; font: inherit; color: var(--cq-ink);
            background: var(--cq-bg); border: 3px solid var(--cq-ink); border-radius: 16px; padding: 10px 12px; cursor: pointer; box-shadow: 3px 3px 0 var(--cq-ink); transition: transform .12s, box-shadow .12s; }
.sp-nivel:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--cq-ink); }
.sp-nivel.sel { background: var(--cq-yellow-l); box-shadow: 5px 5px 0 var(--cq-yellow-d); outline: 3px solid var(--cq-yellow); outline-offset: -7px; }
.sp-nivel b { font: 800 20px/1.1 var(--cq-head); }
.sp-nivel small { font-size: 14px; color: var(--cq-ink2); font-weight: 600; grid-column: 2; }
.sp-mini { grid-row: 1 / span 3; display: grid; grid-template-columns: repeat(var(--m), 1fr); gap: 2px; width: 50px; height: 50px; padding: 4px; background: #fffdf6;
           border: 3px solid var(--cq-ink); border-radius: 8px; }
.sp-mini i { background: #dfe8f7; border-radius: 1px; }
.sp-mini i:nth-child(5n+2) { background: var(--cq-coral); } .sp-mini i:nth-child(7n+4) { background: var(--cq-blue); }
.sp-elige-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sp-elige { border: 3px solid var(--cq-ink); border-radius: 18px; background: var(--j-l); padding: 12px 14px 14px; box-shadow: 4px 4px 0 var(--j-d); }
.sp-elige h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 800 21px/1.1 var(--cq-head); }
.sp-elige h3 em { font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--j-d); }
.sp-elige h3 .dos-tu { background: var(--j); color: var(--j-ink); padding: 1px 8px; border-radius: 999px; border: 2px solid var(--cq-ink); }
.sp-temas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sp-tema { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 6px; min-height: 72px; font: 700 13.5px/1.1 var(--cq-body); color: var(--cq-ink);
           background: #fff; border: 3px solid var(--cq-ink); border-radius: 12px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.sp-tema:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 3px 0 var(--cq-ink); }
.sp-tema.sel { background: var(--j); color: var(--j-ink); box-shadow: 0 4px 0 var(--cq-ink); transform: translateY(-2px); }
.sp-tema.sel svg { filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff); }
.sp-tema:disabled { cursor: default; opacity: .5; }
.sp-tema.sel:disabled { opacity: 1; }
.sp-tema:focus-visible, .sp-nivel:focus-visible { outline: 3px solid var(--cq-blue); outline-offset: 2px; }
.sp-listo-p { margin: 12px 0 0; display: flex; justify-content: center; }
.sp-listo[aria-pressed="true"] { background: var(--cq-mint-l); }
.sp-espera-otro { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--cq-ink2); min-height: 48px; }
.sp-espera-otro.si { color: var(--cq-mint-d); }
.sp-record { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700; color: var(--cq-ink2); margin: 14px 0 0; }
.sp-estrellas { display: inline-flex; gap: 2px; vertical-align: middle; line-height: 0; }

/* reglas y final */
.sp-reglas { display: grid; gap: 12px; }
.sp-reglas figure { display: flex; gap: 14px; align-items: center; margin: 0; background: var(--cq-bg); border: 3px solid var(--cq-ink); border-radius: 14px; padding: 8px 12px; }
.sp-reglas figure .cq-px { flex: none; line-height: 0; }
.sp-reglas figcaption { font-size: 16px; }
.sp-fin { margin: 6px 0 4px; }
.sp-fin .sp-estrellas { gap: 6px; }
.sp-fin .sp-estrellas svg:nth-child(2) { transform: translateY(-8px); }
.sp-fin-t { display: flex; justify-content: center; align-items: center; gap: 6px; font-weight: 700; color: var(--cq-ink2); margin: 8px 0; }
.sp-fin-rec { display: inline-flex; gap: 6px; align-items: center; font: 800 18px/1 var(--cq-head); background: var(--cq-yellow); border: 3px solid var(--cq-ink);
              border-radius: 999px; padding: 6px 12px; margin: 2px 0 8px; }

@keyframes sp-sale { from { transform: scale(.2); opacity: 0; } }
@keyframes sp-fiesta { 50% { transform: scale(1.08); } }
@keyframes sp-pop { 40% { transform: scale(1.08); } }
@keyframes sp-parpadea { 50% { opacity: .35; } }
@keyframes sp-gira { to { transform: rotate(180deg); } }
@keyframes sp-bonus { 0% { opacity: 0; transform: translateY(8px) scale(.7); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }

@media (max-width: 1080px) {
  .sp { --cel: max(22px, min(50px, calc((100vw - 64px) / var(--n)), calc((100vh - 360px) / var(--n))));
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .sp-centro { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 760px) {
  .sp { --cel: max(22px, min(46px, calc((100vw - 64px) / var(--n)))); gap: 10px; }
  .sp-tabla { padding: 20px 10px 10px; border-radius: 14px; box-shadow: 4px 4px 0 var(--cq-ink), inset 0 0 0 2px #c98a4e, inset 0 -4px 0 #7e4f27; }
  .sp-pinza svg { width: 96px; height: auto; }
  .sp-pinza { top: -14px; }
  .sp-reloj { width: 100%; }
  .sp-tiempo { font-size: 19px; }
  .sp-lista header { padding: 7px 8px; gap: 7px; }
  .sp-lista-ico { width: 36px; height: 36px; border-radius: 9px; }
  .sp-lista-ico svg { width: 24px; height: 24px; }
  .sp-lista header b { font-size: 16px; }
  .sp-lista header small { font-size: 12.5px; }
  .sp-cuenta { font-size: 14px; padding: 4px 5px; border-width: 2px; }
  .sp-lista ul { padding: 7px; gap: 4px; }
  .sp-lista li { font-size: 15px; padding: 5px 7px; gap: 5px; }
  .sp-lista li.ayuda::after { display: none; }
  .sp-prep { padding: 16px 12px; }
  .sp-prep-cab { flex-direction: column; text-align: center; gap: 8px; }
  .sp-prep-cab p { font-size: 15.5px; }
  .sp-niveles { gap: 8px; margin: 14px 0; }
  .sp-nivel { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 8px 4px; row-gap: 2px; }
  .sp-nivel .sp-mini { grid-row: auto; width: 40px; height: 40px; }
  .sp-nivel b { font-size: 17px; }
  .sp-nivel small { grid-column: 1; font-size: 12px; }
  .sp-nivel small + small { display: none; }
  .sp-elige.mia { order: -1; }
  .sp-elige-2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sp-temas { gap: 6px; }
  .sp-tema { min-height: 64px; font-size: 12px; padding: 6px 2px 5px; }
  .sp-reglas figure { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-cap.nueva, .sp-cap.fiesta, .sp-lista li.pop, .sp-s-ini, .sp-arena.gira, .sp-reloj.poco .sp-tiempo { animation: none !important; }
  .sp-bonus.on { animation: none; opacity: 0; }
  .sp-barra i, .sp-ok { transition: none; }
}