/* ── 1. Scoped reset ────────────────────────────────────────── */
.wsg *,
.wsg *::before,
.wsg *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── 2. Design tokens (matches the memory-game brand) ─────────── */
.wsg {
  --ws-ink-deep:    #120804;
  --ws-brown-dark:  #1E0D07;   /* wrapper background            */
  --ws-brown-card:  #3D2218;   /* tile back / dashboard chip    */
  --ws-brown-mid:   #5C3020;   /* empty-slot surface            */
  --ws-orange:      #D27D2D;   /* border accent                 */
  --ws-amber:       #E8A84C;   /* stat values, active accents   */
  --ws-gold:        #F0C472;   /* correct-word glow             */
  --ws-red-dim:     #C2543A;   /* incorrect-word flash          */
  --ws-cream:       #F5E6D3;   /* primary text                  */
  --ws-muted:       #B89878;   /* label / instructional text    */

  --ws-glow-good:   0 0 0 3px rgba(240, 192, 114, 0.30),
                    0 0 18px rgba(210, 125, 45, 0.25);
  --ws-glow-bad:    0 0 0 3px rgba(194, 84, 58, 0.35);

  --ws-radius:      8px;
  --ws-radius-lg:   14px;

  font-family: Georgia, 'Times New Roman', Times, serif;
  color: var(--ws-cream);
  -webkit-font-smoothing: antialiased;
}

/* ── 3. Wrapper shell — transparent, sits directly in the page.
   No fill/border here; the dashboard chip and tiles below carry
   their own cozy styling, same approach as the memory game.   */
.wsg {
  background: transparent;
  max-width: 560px;
  margin: 2rem auto;
  padding: 0 clamp(0.25rem, 1.5vw, 0.5rem);
}

/* ── 4. Stats dashboard ─────────────────────────────────────── */
.ws-dashboard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ws-brown-card);
  border: 1.5px solid var(--ws-orange);
  border-radius: var(--ws-radius);
  padding: 0.6rem 0.9rem;
  margin-bottom: clamp(0.6rem, 2vw, 1rem);
}

.ws-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  min-width: 46px;
}

.ws-stat-sep {
  width: 1px;
  height: 2rem;
  background: var(--ws-brown-mid);
  flex-shrink: 0;
}

.ws-stat-label {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ws-muted);
}

.ws-stat-value {
  font-family: 'Courier New', 'Lucida Console', Courier, monospace;
  font-size: clamp(0.95rem, 3vw, 1.25rem);
  font-weight: 700;
  color: var(--ws-amber);
  letter-spacing: 0.04em;
  min-width: 3ch;
  text-align: center;
}

/* ── 5. Reset button ────────────────────────────────────────── */
.ws-reset-btn {
  margin-left: auto;
  background: transparent;
  border: 1.5px solid var(--ws-orange);
  border-radius: 6px;
  color: var(--ws-orange);
  cursor: pointer;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.38rem 0.8rem;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
  white-space: nowrap;
  line-height: 1;
}

.ws-reset-btn:hover {
  background: var(--ws-orange);
  color: var(--ws-ink-deep);
  transform: translateY(-1px);
}

.ws-reset-btn:active { transform: translateY(0); }

.ws-reset-btn:focus-visible {
  outline: 2px solid var(--ws-amber);
  outline-offset: 3px;
}

/* ── 6. Progress dots ───────────────────────────────────────── */
.ws-progress {
  display: flex;
  justify-content: center;
  gap: 0.32rem;
  margin-bottom: clamp(0.9rem, 3vw, 1.4rem);
}

.ws-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ws-brown-mid);
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ws-dot.is-done {
  background: var(--ws-gold);
}

.ws-dot.is-current {
  background: var(--ws-brown-card);
  border-color: var(--ws-amber);
  transform: scale(1.35);
}

/* ── 7. Word stage ──────────────────────────────────────────── */
.ws-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 2.5vw, 1rem);
}

.ws-section-label {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ws-muted);
  text-align: center;
}

.ws-length-badge {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.7rem;
  color: var(--ws-muted);
  margin-top: -0.4rem;
}

/* ── 7b. Stage header row (label + hint button) ───────────────── */
.ws-stage-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  position: relative;
}

.ws-hint-btn {
  position: absolute;
  right: 0;
  background: transparent;
  border: 1.5px dashed var(--ws-muted);
  border-radius: 6px;
  color: var(--ws-amber);
  cursor: pointer;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.28rem 0.55rem;
  white-space: nowrap;
  line-height: 1;
  transition: border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.ws-hint-btn:hover:not(:disabled) {
  border-color: var(--ws-amber);
  color: var(--ws-gold);
}

.ws-hint-btn:focus-visible {
  outline: 2px solid var(--ws-amber);
  outline-offset: 2px;
}

.ws-hint-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── 7c. Hint-used flag (appears once a hint is taken) ─────────── */
.ws-hint-flag {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.68rem;
  color: var(--ws-muted);
  text-align: center;
  margin-top: -0.5rem;
  margin-bottom: clamp(0.5rem, 2vw, 0.85rem);
}

.ws-hint-flag[hidden] { display: none; }

/* ── 8. Answer row (filled by tapping tray tiles) ─────────────── */
.ws-answer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.3rem, 1.4vw, 0.45rem);
  min-height: clamp(2.4rem, 9vw, 3rem);
  padding: 0.5rem;
  border-radius: var(--ws-radius);
  transition: box-shadow 0.2s ease;
}

.ws-answer.is-correct { box-shadow: var(--ws-glow-good); }
.ws-answer.is-incorrect {
  box-shadow: var(--ws-glow-bad);
  animation: wsShake 0.42s ease;
}

@keyframes wsShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* ── 8b. Wrong-order feedback message ─────────────────────────── */
.ws-feedback {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ws-red-dim);
  text-align: center;
  margin-top: -0.3rem;
  animation: wsFadeIn 0.2s ease;
}

.ws-feedback[hidden] { display: none; }

@keyframes wsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 9. Shared tile/slot footprint ─────────────────────────────
   Both tray letters and answer slots use this base size so
   letters line up visually when tapped back and forth.        */
.ws-tile,
.ws-slot {
  width: clamp(2.15rem, 8.6vw, 2.65rem);
  height: clamp(2.15rem, 8.6vw, 2.65rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ws-radius);
  font-size: clamp(1rem, 4vw, 1.3rem);
  font-weight: 700;
  text-transform: uppercase;
  user-select: none;
  flex-shrink: 0;
}

/* Empty answer slot — dashed placeholder */
.ws-slot {
  border: 1.5px dashed var(--ws-brown-mid);
  background: rgba(92, 48, 32, 0.18);
  color: transparent;
}

/* Filled answer slot — looks like a tile, tap to undo */
.ws-slot.is-filled {
  border: 2px solid var(--ws-amber);
  background: var(--ws-brown-card);
  color: var(--ws-cream);
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease;
}

.ws-slot.is-filled:hover { border-color: var(--ws-gold); }
.ws-slot.is-filled:active { transform: scale(0.9); }

.ws-answer.is-correct .ws-slot.is-filled {
  border-color: var(--ws-gold);
  color: var(--ws-gold);
}

/* ── 10. Letter tray ────────────────────────────────────────── */
.ws-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.3rem, 1.4vw, 0.45rem);
  padding-top: clamp(0.3rem, 1vw, 0.5rem);
  border-top: 1px dashed var(--ws-brown-mid);
  width: 100%;
}

/* Tray tile — tappable letter */
.ws-tile {
  background: var(--ws-brown-card);
  background-image: radial-gradient(
    ellipse at 50% 35%,
    #4e2b1a 0%,
    var(--ws-brown-card) 70%
  );
  border: 2px solid var(--ws-orange);
  color: var(--ws-cream);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.ws-tile:hover { border-color: var(--ws-amber); }
.ws-tile:active { transform: scale(0.9); }

.ws-tile:focus-visible {
  outline: 2px solid var(--ws-amber);
  outline-offset: 2px;
}

/* Used tile — keeps its slot in the tray but goes invisible,
   so the remaining letters don't jump around                 */
.ws-tile.is-used {
  visibility: hidden;
  pointer-events: none;
}

/* Hinted tile — the hint button highlights this one, it doesn't
   place it for you. Pulses briefly then settles into a steady glow
   until tapped or the highlight times out.                      */
.ws-tile.is-hinted {
  border-color: var(--ws-gold);
  box-shadow: var(--ws-glow-good);
  animation: wsHintPulse 0.85s ease-in-out 2;
}

@keyframes wsHintPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* ── 11. Round-complete banner ──────────────────────────────── */
.ws-win-banner {
  margin-top: clamp(0.6rem, 2vw, 1rem);
  padding: 1rem 1.25rem;
  background: var(--ws-brown-card);
  border: 1.5px solid var(--ws-amber);
  border-radius: var(--ws-radius);
  text-align: center;
  animation: wsSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ws-win-banner[hidden] { display: none; }

.ws-win-icon {
  display: block;
  font-size: 1.9rem;
  margin-bottom: 0.3rem;
}

.ws-win-title {
  font-size: 1.05rem;
  color: var(--ws-cream);
  margin-bottom: 0.25rem;
}

.ws-win-time {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ws-amber);
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.ws-play-again-btn {
  background: var(--ws-orange);
  border: none;
  border-radius: 6px;
  color: var(--ws-ink-deep);
  cursor: pointer;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.55rem 1.2rem;
  transition: background 0.18s ease, transform 0.12s ease;
}

.ws-play-again-btn:hover {
  background: var(--ws-amber);
  transform: translateY(-1px);
}

.ws-play-again-btn:focus-visible {
  outline: 2px solid var(--ws-cream);
  outline-offset: 3px;
}

@keyframes wsSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 12. Reduced-motion safety ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ws-answer        { animation: none !important; }
  .ws-tile.is-hinted { animation: none !important; }
  .ws-feedback      { animation: none !important; }
  .ws-dot,
  .ws-tile,
  .ws-slot,
  .ws-reset-btn,
  .ws-hint-btn,
  .ws-play-again-btn { transition: none; }
  .ws-win-banner     { animation: none; }
}