/* ===== 成語填字 — style ===== */

.wc-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* --- 成語顯示區 --- */
.wc-idiom-display {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
  perspective: 600px;
}

.wc-slot {
  width: 72px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 800;
  border-radius: 14px;
  transition: transform 0.25s, background 0.3s, box-shadow 0.3s;
  user-select: none;
}

.wc-slot.known {
  background: var(--surface);
  color: var(--text-primary);
  border: 2px solid var(--border);
}

.wc-slot.blank {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 2px dashed var(--primary);
  font-size: 2rem;
  opacity: 0.7;
}

.wc-slot.blank.active {
  opacity: 1;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(212, 56, 13, 0.15);
  animation: slot-pulse 1.2s ease-in-out infinite;
}

.wc-slot.filled {
  background: #52c41a;
  color: #fff;
  border: 2px solid #52c41a;
  animation: pop-in 0.3s ease;
}

/* 全部填完的成功動畫 */
.wc-idiom-display.success .wc-slot {
  animation: slot-celebrate 0.6s ease;
}
.wc-idiom-display.success .wc-slot:nth-child(1) { animation-delay: 0s; }
.wc-idiom-display.success .wc-slot:nth-child(2) { animation-delay: 0.08s; }
.wc-idiom-display.success .wc-slot:nth-child(3) { animation-delay: 0.16s; }
.wc-idiom-display.success .wc-slot:nth-child(4) { animation-delay: 0.24s; }

/* --- 候選字格 --- */
.wc-char-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 340px;
  margin: 0 auto;
}

.wc-char-btn {
  width: 100%;
  aspect-ratio: 1;
  font-size: 1.8rem;
  font-weight: 700;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wc-char-btn:hover {
  border-color: var(--primary);
  background: var(--bg-secondary);
  transform: scale(1.06);
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}

.wc-char-btn:active {
  transform: scale(0.95);
}

.wc-char-btn.correct {
  background: #52c41a;
  color: #fff;
  border-color: #52c41a;
  animation: pop-in 0.3s ease;
  pointer-events: none;
}

.wc-char-btn.wrong {
  background: #ff4d4f;
  color: #fff;
  border-color: #ff4d4f;
  animation: shake 0.35s;
}

.wc-char-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* 提示閃爍 */
.wc-char-btn.hint-flash {
  animation: hint-glow 0.4s ease 3;
  border-color: #faad14;
  box-shadow: 0 0 16px rgba(250, 173, 20, 0.5);
}

/* --- 計時器危急 --- */
.danger {
  color: #ff4d4f !important;
  animation: timer-blink 0.5s ease-in-out infinite;
}

/* --- 動畫 --- */
@keyframes pop-in {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

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

@keyframes slot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(212, 56, 13, 0.12); }
  50% { box-shadow: 0 0 0 8px rgba(212, 56, 13, 0.25); }
}

@keyframes slot-celebrate {
  0% { transform: scale(1); }
  30% { transform: scale(1.15) rotate(-3deg); }
  60% { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes hint-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(250, 173, 20, 0.3); }
  50% { box-shadow: 0 0 20px rgba(250, 173, 20, 0.7); background: rgba(250, 173, 20, 0.15); }
}

@keyframes timer-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* --- 新紀錄 --- */
.new-record-text {
  font-size: 1.3rem;
  color: #fa8c16;
  font-weight: 700;
  animation: pop-in 0.5s ease;
}

/* --- RWD --- */
@media (max-width: 400px) {
  .wc-slot {
    width: 60px;
    height: 70px;
    font-size: 2rem;
  }
  .wc-char-btn {
    font-size: 1.5rem;
  }
  .wc-char-grid {
    max-width: 280px;
    gap: 8px;
  }
}

@media (min-width: 600px) {
  .wc-slot {
    width: 84px;
    height: 94px;
    font-size: 2.8rem;
  }
  .wc-char-btn {
    font-size: 2rem;
  }
}