/* ==========================================================
   拼字 — 300 Caractères Chinois — design tokens
   ========================================================== */
:root {
  --pz-bg:        #f7f3e9;
  --pz-card:      #fffdf7;
  --pz-surface:   #f3ede2;
  --pz-ink:       #2e2a24;
  --pz-muted:     #7a6a5c;
  --pz-accent:    #b03a2e;
  --pz-accent2:   #1f5e3a;
  --pz-gold:      #c9a74b;
  --pz-border:    #e8ddcc;
  --pz-radius:    28px;
  --pz-shadow:    0 8px 18px rgba(0, 0, 0, 0.08);
  --pz-transition: 0.2s ease;
  --pz-font-serif: 'Noto Serif SC', 'KaiTi', 'STKaiti', 'Microsoft YaHei', serif;
}

/* --- Thème sombre ------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pz-bg:      #1c1a16;
    --pz-card:    #262320;
    --pz-surface: #2d2a25;
    --pz-ink:     #eee7da;
    --pz-muted:   #b4a794;
    --pz-border:  #3a3630;
  }
}
:root[data-theme="dark"] {
  --pz-bg:      #1c1a16;
  --pz-card:    #262320;
  --pz-surface: #2d2a25;
  --pz-ink:     #eee7da;
  --pz-muted:   #b4a794;
  --pz-border:  #3a3630;
}

/* --- Layout app principal ------------------------------------ */
.pz-app {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  background: var(--pz-card);
  border-radius: var(--pz-radius);
  box-shadow: var(--pz-shadow);
  padding: clamp(16px, 4vw, 32px) clamp(12px, 3vw, 20px) 32px;
  border: 1px solid var(--pz-border);
}

/* --- Zone A / header ------------------------------------------ */
.pz-title {
  font-family: var(--pz-font-serif);
  text-align: center;
  font-weight: 500;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  letter-spacing: 2px;
  color: var(--pz-ink);
  margin-bottom: 6px;
}

.pz-subtitle {
  text-align: center;
  color: var(--pz-muted);
  font-size: 0.9rem;
  letter-spacing: 1px;
  margin-bottom: 22px;
  font-style: italic;
}

.pz-score-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--pz-surface);
  padding: 10px 24px;
  border-radius: 40px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--pz-ink);
  flex-wrap: wrap;
  gap: 10px;
}

.pz-score-badge {
  background: var(--pz-card);
  padding: 5px 16px;
  border-radius: 30px;
  font-size: 1.2rem;
}

.pz-level-badge {
  background: var(--pz-gold);
  color: #2e2a24;
  padding: 5px 18px;
  border-radius: 30px;
  font-weight: 700;
  letter-spacing: 1px;
}

.pz-best-score {
  font-size: 0.85rem;
  color: var(--pz-muted);
}

/* --- Zone B / contenu principal --------------------------------- */
.pz-question-area {
  background: var(--pz-surface);
  border-radius: 48px;
  padding: 18px 16px;
  margin: 0 0 24px;
  text-align: center;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03), 0 4px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--pz-border);
}

.pz-question-label {
  font-size: 1rem;
  color: var(--pz-muted);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 10px;
}

.pz-target-char {
  font-family: var(--pz-font-serif);
  font-size: clamp(3.2rem, 12vw, 5.2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--pz-ink);
  background: var(--pz-card);
  display: inline-block;
  padding: 0 30px;
  border-radius: 60px;
  box-shadow: 0 6px 0 var(--pz-border);
  letter-spacing: 5px;
  cursor: pointer;
  user-select: none;
  border: none;
}

.pz-target-pinyin {
  font-size: 1.3rem;
  color: var(--pz-accent);
  margin-top: 6px;
  font-style: italic;
}

.pz-target-meaning {
  font-size: 1rem;
  color: var(--pz-muted);
  margin-top: 8px;
  font-style: italic;
  background: var(--pz-border);
  display: inline-block;
  padding: 4px 16px;
  border-radius: 30px;
}

.pz-level-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--pz-muted);
}

.pz-fragments-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0;
}

.pz-fragment-column {
  flex: 1 1 200px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--pz-card);
  border-radius: 36px;
  padding: 20px 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03), 0 0 0 1px var(--pz-border);
}

.pz-column-title {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--pz-muted);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.pz-fragment-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 0 6px;
}

/* --- Zone C / saisie / composition ---------------------------- */
.pz-assembly-area {
  background: var(--pz-surface);
  border-radius: 44px;
  padding: 20px 16px;
  margin: 18px 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border: 2px dashed var(--pz-border);
}

.pz-compose-slots {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 120px;
}

.pz-action-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* --- Composants génériques (boutons, slots, fragments) ---------- */
.pz-fragment-btn,
.pz-slot,
.pz-btn {
  font-family: inherit;
}

.pz-fragment-buttons > * {
  background: var(--pz-card);
  border: 2px solid var(--pz-border);
  border-radius: 22px;
  padding: 12px 14px;
  font-family: var(--pz-font-serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--pz-ink);
  cursor: pointer;
  transition: all var(--pz-transition);
  box-shadow: 0 4px 0 var(--pz-border);
  min-width: 70px;
  text-align: center;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pz-fragment-buttons .pz-pinyin-small {
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.65rem;
  color: var(--pz-accent);
  letter-spacing: 0.3px;
  font-style: italic;
}

.pz-fragment-buttons .pz-meaning-small {
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.6rem;
  color: var(--pz-muted);
  letter-spacing: 0.3px;
  font-style: italic;
  max-width: 80px;
}

.pz-fragment-buttons > *:hover {
  border-color: var(--pz-accent);
  transform: translateY(-2px);
}

.pz-fragment-buttons > *.pz-selected {
  background: var(--pz-gold);
  border-color: var(--pz-accent);
  box-shadow: 0 0 0 3px rgba(176, 58, 46, 0.25);
}

.pz-slot {
  background: var(--pz-card);
  width: 100px;
  min-height: 110px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--pz-font-serif);
  font-size: 3rem;
  color: var(--pz-ink);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.03), 0 4px 0 var(--pz-border);
  border: 2px solid var(--pz-border);
  cursor: pointer;
  user-select: none;
  padding: 6px;
}

.pz-slot .pz-slot-pinyin {
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.7rem;
  color: var(--pz-accent);
  font-style: italic;
  margin-top: 2px;
}

.pz-slot .pz-slot-meaning {
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.65rem;
  color: var(--pz-muted);
  font-style: italic;
  margin-top: 4px;
}

.pz-slot.pz-filled { border-color: var(--pz-accent2); background: var(--pz-surface); }
.pz-slot.pz-hint { border-style: dashed; color: var(--pz-muted); font-size: 1.5rem; }
.pz-slot.pz-hint .pz-slot-pinyin,
.pz-slot.pz-hint .pz-slot-meaning { display: none; }

.pz-btn {
  background: var(--pz-ink);
  border: none;
  color: var(--pz-bg);
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 0 #1f1a14;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pz-btn:hover { transform: translateY(-2px); }
.pz-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #1f1a14; }

.pz-btn-secondary {
  background: var(--pz-muted);
  box-shadow: 0 6px 0 #6a5c4c;
}

/* --- États --------------------------------------------------- */
.pz-feedback {
  min-height: 36px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 8px 0 4px;
  color: var(--pz-ink);
}

.pz-message-hint {
  font-size: 0.9rem;
  color: var(--pz-muted);
  text-align: center;
}

.pz-fragment-buttons > *:focus-visible,
.pz-slot:focus-visible,
.pz-btn:focus-visible,
.pz-target-char:focus-visible {
  outline: 2px solid var(--pz-accent);
  outline-offset: 2px;
}

/* --- Responsive ------------------------------------------------ */
@media (max-width: 600px) {
  .pz-fragments-grid { gap: 12px; }
  .pz-fragment-column { padding: 14px 6px; }
  .pz-compose-slots { gap: 10px; }
  .pz-slot { width: 84px; min-height: 96px; font-size: 2.3rem; }
  .pz-action-buttons { gap: 10px; }
}