/* ============================================================
   Pasapalabra — mismo panel de tinta que el Ahorcado (oscuro en los dos
   temas), rosco en anillo con la letra en juego en oro, verde sobrio para
   los aciertos y rojo óxido para los fallos.
   ============================================================ */
.pp {
  --pp-bg: #17130F; --pp-bg-2: #221C16;
  --pp-ink: #EFE6D4; --pp-ink-2: rgba(239, 230, 212, .7); --pp-ink-3: rgba(239, 230, 212, .42);
  --pp-gold: #CDAE6E; --pp-ok: #4E8A5E; --pp-ok-2: #7FBF8E; --pp-ko: #A5483D; --pp-ko-2: #D07A6E;
  --pp-line: rgba(239, 230, 212, .14);
  position: relative; isolation: isolate; width: 100%;
  display: grid; grid-template-columns: minmax(240px, 400px) minmax(0, 1fr); gap: clamp(18px, 3.4vw, 44px); align-items: center;
  padding: clamp(16px, 3vw, 34px); border-radius: var(--r-xl); color: var(--pp-ink);
  background:
    radial-gradient(70% 90% at 15% 10%, rgba(205, 174, 110, .12) 0%, transparent 60%),
    linear-gradient(160deg, var(--pp-bg-2) 0%, var(--pp-bg) 70%);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(205, 174, 110, .18);
}
.pp-host { display: block; padding: 2px 0 8px; }

/* ---------- rosco ---------- */
.pp-ringbox { width: 100%; max-width: 400px; justify-self: center; }
.pp-ring { display: block; width: 100%; height: auto; overflow: visible; }
.pp-track { fill: none; stroke: var(--pp-line); stroke-width: 1; }
.pp-dot circle { fill: rgba(239, 230, 212, .06); stroke: rgba(205, 174, 110, .55); stroke-width: 1.4;
  transition: fill .35s ease, stroke .35s ease; }
.pp-dot text { font-family: var(--font-display); font-size: 14px; font-weight: 600; fill: var(--pp-ink);
  text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.pp-dot[data-state="pass"] circle { stroke-dasharray: 3 3; stroke: var(--pp-gold); }
.pp-dot[data-state="ok"] circle { fill: var(--pp-ok); stroke: var(--pp-ok-2); }
.pp-dot[data-state="ko"] circle { fill: var(--pp-ko); stroke: var(--pp-ko-2); }
.pp-dot.is-cur circle { fill: var(--pp-gold); stroke: #F1DDAE; stroke-width: 2; }
.pp-dot.is-cur text { fill: #241A10; }
.pp-dot { transform-box: fill-box; transform-origin: center; }
.pp-dot.is-pulse { animation: pp-pulse .5s ease-out; }
@keyframes pp-pulse { 40% { transform: scale(1.18); } }
.pp-c-n { font-family: var(--font-display); font-size: 54px; font-weight: 500; fill: var(--pp-ink); text-anchor: middle; dominant-baseline: central; }
.pp-c-l { font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: .22em; fill: var(--pp-gold); text-anchor: middle; }
.pp-c-s { font-family: var(--font-ui); font-size: 11px; fill: var(--pp-ink-3); text-anchor: middle; }

/* ---------- tarjeta de la letra ---------- */
.pp-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-kind { margin: 0; display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--pp-line); }
.pp-kind-l { font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pp-gold); }
.pp-kind-x { font-family: var(--font-display); font-size: 2.4rem; font-weight: 500; line-height: 1; }
.pp-clue { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 2.3vw, 1.6rem); line-height: 1.3; color: var(--pp-ink); min-height: 2.6em; }
.pp-hint { margin: -4px 0 0; font-size: .9rem; color: var(--pp-gold); }
.pp-form { display: flex; flex-direction: column; gap: 10px; }
.pp-input {
  width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px;
  border: 1px solid rgba(205, 174, 110, .35); border-radius: var(--r-md);
  background: rgba(0, 0, 0, .25); color: var(--pp-ink);
  font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .06em; text-transform: uppercase;
}
.pp-input::placeholder { color: var(--pp-ink-3); text-transform: none; letter-spacing: 0; font-family: var(--font-ui); font-size: 1rem; }
.pp-input:focus { outline: 2px solid var(--pp-gold); outline-offset: 1px; border-color: transparent; }
.pp-input.is-nudge { animation: pp-nudge .3s ease-in-out; }
@keyframes pp-nudge { 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }
.pp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-btns .btn { height: 46px; }
.pp .pp-pass { color: var(--pp-ink); border-color: rgba(205, 174, 110, .45); background: transparent; }
.pp .pp-pass:hover { background: rgba(205, 174, 110, .1); }
.pp-fb { margin: 0; min-height: 1.4em; font-size: .95rem; color: var(--pp-ink-2); }
.pp-fb.is-ok { color: var(--pp-ok-2); }
.pp-fb.is-ko { color: var(--pp-ko-2); }
.pp-fb.is-pass { color: var(--pp-gold); }

/* ---------- resumen final ---------- */
.pp-sum-h { margin: 0 0 8px; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pp-gold); }
.pp-sum-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; max-height: 340px; overflow: auto; }
.pp-sum-i { display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--pp-line); }
.pp-sum-l { grid-row: span 2; font-family: var(--font-display); font-weight: 600; color: var(--pp-ink-3); }
.pp-sum-w { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .03em; }
.pp-sum-g { font-size: .75rem; color: var(--pp-ink-3); }
.pp-sum-i.is-ok .pp-sum-l { color: var(--pp-ok-2); }
.pp-sum-i.is-ko .pp-sum-l, .pp-sum-i.is-ko .pp-sum-w { color: var(--pp-ko-2); }
.pp-help-note { margin: 10px 0 0; font-size: var(--t-sm); color: var(--muted); }

@media (max-width: 760px) {
  .pp { grid-template-columns: minmax(0, 1fr); gap: 14px; border-radius: var(--r-lg); padding: 14px; }
  .pp-ringbox { max-width: 270px; }
  .pp-kind-x { font-size: 2rem; }
  .pp-clue { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-dot.is-pulse, .pp-input.is-nudge { animation: none; }
  .pp-dot circle { transition: none; }
}