/* styles.css — 大字、亮色、適合 10-12 歲 */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
  background: linear-gradient(160deg, #ffe6f0, #e6f0ff);
  color: #2b2b40;
}
header { text-align: center; padding: 18px 12px 4px; }
header h1 { margin: 0; font-size: 2rem; color: #7c3aed; }
header .sub { margin: 4px 0 0; color: #6b7280; }
#app { max-width: 720px; margin: 0 auto; padding: 16px; }

.map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.level-card {
  background: #fff; border-radius: 18px; padding: 16px;
  box-shadow: 0 4px 0 #d1c4f0; cursor: pointer; text-align: center;
  border: 3px solid #c4b5fd; transition: transform .08s;
}
.level-card:hover { transform: translateY(-2px); }
.level-card.locked { opacity: .5; cursor: not-allowed; filter: grayscale(0.6); }
.level-card .num { font-size: 1.4rem; font-weight: bold; color: #7c3aed; }
.level-card .skill { font-size: 1rem; margin: 6px 0; }
.level-card .badge { font-size: 1.6rem; }

.panel { background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 6px 0 #d1c4f0; }
.panel h2 { color: #7c3aed; margin-top: 0; }
.example { background: #f5f3ff; border-radius: 12px; padding: 12px; white-space: pre-wrap; font-size: 1.05rem; }
.task { font-weight: bold; margin: 14px 0 8px; }
textarea, input[type="text"] {
  width: 100%; font-size: 1.1rem; padding: 10px; border-radius: 12px;
  border: 2px solid #c4b5fd; font-family: inherit;
}
textarea { min-height: 90px; }
.options button { display: block; width: 100%; margin: 6px 0; }
button {
  font-family: inherit; font-size: 1.05rem; padding: 10px 16px;
  border: none; border-radius: 12px; background: #7c3aed; color: #fff;
  cursor: pointer; box-shadow: 0 3px 0 #5b21b6;
}
button.secondary { background: #e5e7eb; color: #374151; box-shadow: 0 3px 0 #b8bcc4; }
.feedback { margin-top: 14px; padding: 12px; border-radius: 12px; font-size: 1.05rem; }
.feedback.good { background: #dcfce7; color: #166534; }
.feedback.try { background: #fef9c3; color: #854d0e; }
.checklist { margin: 10px 0; }
.checklist label { display: block; margin: 4px 0; }
.row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }