/* =========================================================
   PREMIUM CROSSWORD THEME (CLEAN + CONSOLIDATED)
   ========================================================= */

:root {
  --cw-bg: #0b0f16;
  --cw-panel: rgba(255,255,255,0.045);
  --cw-border: rgba(255,255,255,0.14);
  --cw-border-soft: rgba(255,255,255,0.08);

  --cw-text: #f2f4f8;
  --cw-muted: rgba(242,244,248,0.65);

  --cw-gold: #e8c97a;
  --cw-focus: #7c5cff;
  --cw-correct: #2ee59d;
  --cw-wrong: #ff5c7a;

  --cw-cell: 44px;
  --cw-radius: 18px;
  --cw-cell-radius: 12px;

  --cw-shadow: 0 18px 45px rgba(0,0,0,0.45);
  --cw-shadow-soft: 0 10px 28px rgba(0,0,0,0.35);
}

/* ---------- Root ---------- */
.crossword {
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(700px 420px at 110% 10%, rgba(232,201,122,.10), transparent 55%),
    var(--cw-bg);
  border: 1px solid var(--cw-border-soft);
  border-radius: var(--cw-radius);
  box-shadow: var(--cw-shadow);
  padding: 18px;
  color: var(--cw-text);
}

/* ---------- Header ---------- */
.crossword__title {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cw-muted);
}

.crossword__status {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--cw-border-soft);
  color: var(--cw-muted);
}

/* ---------- Layout ---------- */
.crossword__layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,360px);
  gap: 18px;
}

@media (max-width: 900px) {
  .crossword__layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Grid Shell ---------- */
.crossword__gridShell {
  background: var(--cw-panel);
  border: 1px solid var(--cw-border-soft);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--cw-shadow-soft);
}

/* ---------- Grid ---------- */
#crosswordGrid {
  display: grid;
  gap: 8px;
  justify-content: start;
}

/* ---------- Cell ---------- */
.cw-cell {
  position: relative;
  width: var(--cw-cell);
  height: var(--cw-cell);
  border-radius: var(--cw-cell-radius);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.04)
  );
  border: 1px solid var(--cw-border-soft);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}

.cw-cell:hover {
  transform: translateY(-1px);
  border-color: var(--cw-border);
}

/* ---------- Input ---------- */
.cw-cell input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--cw-gold);
  text-transform: uppercase;
  caret-color: var(--cw-focus);
}

.cw-cell input:focus {
  outline: none;
}

/* ---------- Blocked ---------- */
.cw-cell.blocked {
  background: linear-gradient(180deg, #0a0c12, #05070b);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.cw-cell.blocked input {
  display: none;
}

/* ---------- Prefill ---------- */
.cw-prefill {
  box-shadow: inset 0 0 0 2px rgba(232,201,122,0.35);
}

/* ---------- Active / Focus ---------- */
.cw-cell.active,
.cw-cell input:focus-visible {
  border-color: var(--cw-focus);
  box-shadow:
    0 0 0 3px rgba(124,92,255,0.25),
    0 12px 26px rgba(0,0,0,0.45);
}

/* ---------- Correct / Wrong ---------- */
.cw-cell.correct {
  background: linear-gradient(
    180deg,
    rgba(46,229,157,0.22),
    rgba(255,255,255,0.05)
  );
  border-color: rgba(46,229,157,0.55);
}

.cw-cell.wrong {
  background: linear-gradient(
    180deg,
    rgba(255,92,122,0.22),
    rgba(255,255,255,0.05)
  );
  border-color: rgba(255,92,122,0.55);
}

/* ---------- Clues Panel ---------- */
.crossword__clues {
  background: var(--cw-panel);
  border: 1px solid var(--cw-border-soft);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--cw-shadow-soft);
  max-height: 520px;
  overflow-y: auto;
}

.cw-clueGroupTitle {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cw-muted);
  margin: 10px 6px;
}

.cw-clue {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--cw-text);
  transition: background .12s ease, border-color .12s ease;
}

.cw-clue:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--cw-border-soft);
}

.cw-clue__num {
  font-weight: 800;
  color: var(--cw-muted);
  text-align: right;
}

.cw-clue__text {
  font-size: 13px;
  line-height: 1.35;
  color: var(--cw-text);
}

/* ---------- Active Clue ---------- */
.cw-clue--active {
  background: linear-gradient(
    180deg,
    rgba(124,92,255,0.22),
    rgba(255,255,255,0.04)
  );
  border-color: rgba(124,92,255,0.45);
}

.cw-clue--active .cw-clue__num {
  color: var(--cw-focus);
}

/* ---------- Next Button ---------- */
#nextCrosswordBtn {
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  color: #1b1b1b;
  background: linear-gradient(135deg, #e8c97a, #cfa44a);
  box-shadow: 0 10px 28px rgba(232,201,122,0.35);
}

#nextCrosswordBtn:hover {
  transform: translateY(-1px);
}

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
  :root {
    --cw-cell: 38px;
  }
}
/* =========================================================
   PREMIUM WORD COMPLETION GLOW
   ========================================================= */

/* Soft golden pulse for a completed word */
@keyframes cwWordGlow {
  0% {
    box-shadow:
      0 0 0 0 rgba(232,201,122,0.0),
      0 8px 18px rgba(0,0,0,0.35);
    transform: scale(1);
  }
  40% {
    box-shadow:
      0 0 0 6px rgba(232,201,122,0.18),
      0 14px 32px rgba(0,0,0,0.45);
    transform: scale(1.03);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(232,201,122,0.0),
      0 8px 18px rgba(0,0,0,0.35);
    transform: scale(1);
  }
}

/* Applied to each cell in the completed word */
.cw-cell.word-complete {
  animation: cwWordGl