/* Word Scramble puzzle-specific styles — builds on unified-2d-game.css + newspaper-theme.css */

:root {
  --ws-cell-surface: var(--news-ink);
  --ws-cell-text: var(--news-paper);
  --ws-slot-bg: var(--news-paper);
  --ws-slot-border: var(--news-rule-light);
  --ws-correct-bg: rgba(46,125,50,0.15);
  --ws-correct-border: var(--news-correct);
  --ws-correct-text: var(--news-correct);
  --ws-incorrect-bg: rgba(198,40,40,0.15);
  --ws-incorrect-border: var(--news-incorrect);
  --ws-incorrect-text: var(--news-incorrect);
  --ws-hinted-bg: rgba(46,125,50,0.2);
  --ws-hinted-border: var(--news-correct);
  --ws-hinted-text: var(--news-correct);
}

html[data-theme='dark'] {
  --ws-correct-bg: rgba(76,175,80,0.2);
  --ws-correct-border: var(--news-correct);
  --ws-correct-text: var(--news-correct);
  --ws-incorrect-bg: rgba(239,83,80,0.2);
  --ws-incorrect-border: var(--news-incorrect);
  --ws-incorrect-text: var(--news-incorrect);
  --ws-hinted-bg: rgba(76,175,80,0.25);
  --ws-hinted-border: var(--news-correct);
  --ws-hinted-text: var(--news-correct);
}

.puzzle-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: var(--news-paper);
  border: 2px solid var(--news-ink);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.08);
}

.scramble-section-label {
  font-family: var(--news-font-display);
  font-size: 0.85rem;
  color: var(--news-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.scramble-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.scramble-tile {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ws-cell-surface);
  border: 1px solid var(--ws-cell-surface);
  color: var(--ws-cell-text);
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--news-font-display);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  -webkit-user-select: none;
  user-select: none;
  text-transform: uppercase;
}

.scramble-tile:hover {
  background: var(--news-accent);
  border-color: var(--news-accent);
  color: var(--news-paper);
}

.scramble-tile:active {
  transform: translateY(0);
}

.scramble-tile.used {
  opacity: 0.25;
  pointer-events: none;
  transform: scale(0.9);
}

.answer-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.answer-slot {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ws-slot-bg);
  border: 2px dashed var(--ws-slot-border);
  color: var(--news-ink);
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--news-font-display);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-transform: uppercase;
}

.answer-slot.filled {
  border-style: solid;
  border-color: var(--news-ink);
  background: var(--news-paper);
}

.answer-slot.correct {
  border-color: var(--ws-correct-border);
  background: var(--ws-correct-bg);
  color: var(--ws-correct-text);
}

.answer-slot.incorrect {
  border-color: var(--ws-incorrect-border);
  background: var(--ws-incorrect-bg);
  color: var(--ws-incorrect-text);
  animation: shake 0.3s ease-in-out;
}

.answer-slot.hinted {
  border-color: var(--ws-hinted-border);
  background: var(--ws-hinted-bg);
  color: var(--ws-hinted-text);
  pointer-events: none;
}

.answer-slot:hover:not(.hinted) {
  border-color: var(--news-ink);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.word-info {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  color: var(--news-ink-light);
  font-family: var(--news-font-body);
  font-size: 0.85rem;
}

.word-info span {
  background: var(--news-paper);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--news-rule-light);
}

@media (max-width: 768px) {
  .classic-grid-section {
    width: 100%;
    max-width: 100%;
  }

  .classic-progress-bar {
    display: none;
  }

  .puzzle-display {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    align-items: stretch;
  }

  .scramble-tiles,
  .answer-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
    justify-items: stretch;
    align-items: stretch;
    width: 100%;
    gap: 0.5rem;
  }

  .scramble-tile,
  .answer-slot {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    min-width: 0;
    font-size: 0.95rem;
  }
}

/* ── Victory overlay celebration (mirrors the logic2D completion overlay) ── */

/* Confetti sits behind the overlay card and rains down across the viewport. */
.classic-overlay .confetti-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Keep the overlay card above the confetti layer. */
.classic-overlay .classic-overlay-content {
  position: relative;
  z-index: 1;
}

.confetti {
  position: absolute;
  top: -10vh;
  opacity: 0.9;
  border-radius: 1px;
  will-change: transform, opacity;
  animation-name: ws-confetti-fall;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes ws-confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}

/* Respect users who prefer reduced motion — skip the animation. */
@media (prefers-reduced-motion: reduce) {
  .confetti {
    animation: none;
    display: none;
  }
}