/* ===========================================================
   KangarooKiddo — kid UI custom layer
   The brand is expressed via Tailwind utility classes (config in index.html).
   This file is for things Tailwind doesn't cover cleanly:
   - The screen-router (one section visible at a time)
   - Body background wash
   - JS-toggled state classes (.correct / .wrong on choices, .shake on cards)
   =========================================================== */

/* Subtle warm wash on the page so cloud isn't a flat slab */
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(249,115,22,0.06) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(249,115,22,0.05) 0%, transparent 50%),
    #FAFAF8;
}

/* ===== Screen router (one section visible at a time) ===== */
.screen { display: none; animation: fadeIn 0.35s ease; }
.screen[data-active] { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ===== JS-toggled animation hooks on the item card ===== */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.shake { animation: shake 0.4s ease; }
.pop   { animation: pop 0.4s ease; }

/* ===== Tabs / chip / kid card / skill card / choice classes ===========
   Hand-shaped bits the JS targets directly via class names. Each one is
   styled with brand tokens so it stays in sync if the config changes.
   =========================================================== */

/* Tab buttons (welcome screen) */
.tab-btn.active {
  background: #ffffff;
  color: #1C0F07;
  box-shadow: 0 1px 3px rgba(249,115,22,0.08);
}

/* Subject chips (skill picker) */
.chip.active {
  background: #1C0F07;
  color: #FAFAF8;
  border-color: #1C0F07;
}

/* Kid cards (kid picker) — hover lift + amber accent */
.kid-card {
  background: #ffffff;
  border: 2px solid #E7E5E4;
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(249,115,22,0.08);
  transition: transform 120ms, border-color 150ms, box-shadow 150ms;
}
.kid-card:hover {
  transform: translateY(-3px);
  border-color: #FB923C;
  box-shadow: 0 4px 16px rgba(249,115,22,0.12);
}
.kid-card .name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1C0F07;
}
.kid-card .meta {
  color: #78716C;
  font-size: 13px;
  margin-top: 4px;
}
.kid-card .avatar {
  width: 60px; height: 60px;
  background: #FFF7ED;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #EA580C;
}

/* Skill cards (skill picker) — hover slide right */
.skill-card {
  background: #ffffff;
  border: 2px solid #E7E5E4;
  border-radius: 16px;
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(249,115,22,0.08);
  transition: transform 120ms, border-color 150ms, box-shadow 150ms;
}
.skill-card:hover {
  transform: translateX(4px);
  border-color: #FB923C;
  box-shadow: 0 4px 16px rgba(249,115,22,0.12);
}
.skill-card .skill-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1C0F07;
}
.skill-card .skill-meta {
  color: #78716C;
  font-size: 13px;
  margin-top: 2px;
  font-family: 'Fira Code', monospace;
}
.skill-card .skill-arrow {
  font-size: 28px;
  color: #F97316;
  flex-shrink: 0;
}

/* Multiple-choice answer buttons */
.choices { display: grid; gap: 10px; }
.choice {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  background: #ffffff;
  color: #1C0F07;
  border: 2px solid #E7E5E4;
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: transform 80ms, border-color 150ms, background 150ms;
  display: flex;
  align-items: center;
  gap: 12px;
}
.choice .choice-text { flex: 1; }
.choice .choice-speaker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #FFF7ED;
  color: #EA580C;
  font-size: 18px;
  flex-shrink: 0;
  transition: background 150ms;
}
.choice .choice-speaker:hover {
  background: #FB923C;
  color: white;
}
/* Tier-3 doesn't usually need TTS; hide the per-choice speaker visually but
   keep it accessible (kids who tap will still see the question button). */
body[data-tier="3"] .choice .choice-speaker { display: none; }
.choice:hover { border-color: #FB923C; }
.choice:active { transform: translateY(1px); }
.choice.correct {
  border-color: #15803D;
  background: rgba(21, 128, 61, 0.10);
}
.choice.wrong {
  border-color: #E11D48;
  background: rgba(225, 29, 72, 0.10);
}
.choice:disabled { cursor: default; }

/* Short-answer input row */
.short-answer { display: flex; gap: 10px; }
.short-answer input {
  flex: 1;
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 700;
  padding: 14px 18px;
  border: 2px solid #E7E5E4;
  border-radius: 12px;
  outline: none;
  color: #1C0F07;
  background: #ffffff;
  transition: border-color 150ms, box-shadow 150ms;
}
.short-answer input:focus {
  border-color: #F97316;
  box-shadow: 0 0 0 4px rgba(249,115,22,0.15);
}

/* Empty state on the skill list */
.empty-state {
  background: #ffffff;
  border: 1px solid #E7E5E4;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(249,115,22,0.08);
}
.empty-state p { margin: 4px 0; }
.empty-state .muted { color: #78716C; }

/* Feedback panel state colors */
.feedback.correct {
  background: rgba(21, 128, 61, 0.06);
  border-color: rgba(21, 128, 61, 0.25);
}
.feedback.wrong {
  background: rgba(225, 29, 72, 0.06);
  border-color: rgba(225, 29, 72, 0.25);
}

/* ===== PIN keypad ===== */
.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 2px solid #E7E5E4;
  background: #ffffff;
  transition: background 120ms, border-color 120ms;
}
.pin-dot.filled {
  background: #F97316;
  border-color: #F97316;
}
#pin-display.shake { animation: shake 0.4s ease; }

.keypad-btn {
  font-family: 'Manrope', sans-serif;
  font-size: 28px;
  font-weight: 700;
  background: #ffffff;
  color: #1C0F07;
  border: 2px solid #E7E5E4;
  border-radius: 16px;
  padding: 18px 0;
  cursor: pointer;
  transition: transform 80ms, background 120ms, border-color 120ms;
  font-variant-numeric: tabular-nums;
}
.keypad-btn:hover { border-color: #FB923C; }
.keypad-btn:active { transform: translateY(2px); background: #FFF7ED; }
.keypad-btn.action {
  font-size: 22px;
  color: #78716C;
}
.keypad-btn.placeholder {
  visibility: hidden;
}

/* ===========================================================
   Tier 3 (ages 10–12) overrides — sleeker, less playful.
   CLAUDE.md §7.3: minimal mascot, no kiddie elements, modern feel.
   =========================================================== */
body[data-tier="3"] .welcome-mascot {
  width: 88px;
  height: 88px;
  animation: none;
  opacity: 0.85;
}
body[data-tier="3"] .done-mascot {
  width: 88px;
  height: 88px;
  animation: none;
  opacity: 0.9;
}
/* Smaller hero text, tighter rhythm */
body[data-tier="3"] #screen-welcome .hero,
body[data-tier="3"] #screen-done .hero {
  padding-top: 12px;
  padding-bottom: 8px;
}
body[data-tier="3"] #welcome-headline,
body[data-tier="3"] #done-headline {
  font-size: 32px;
  letter-spacing: -0.025em;
}

/* Tighter item card — less padding, smaller body */
body[data-tier="3"] #item-card {
  padding: 22px 22px;
  border-radius: 14px;
}
body[data-tier="3"] .difficulty-tag,
body[data-tier="3"] #item-difficulty {
  background: transparent;
  color: #4A3728;
  border: 1px solid #E7E5E4;
  padding: 2px 8px;
  font-size: 10px;
}
body[data-tier="3"] #item-body {
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  font-weight: 600;
}

/* Choice buttons: thinner, less rounded */
body[data-tier="3"] .choice {
  font-size: 16px;
  font-weight: 500;
  padding: 12px 16px;
  border-width: 1px;
  border-radius: 10px;
}

/* Pouch chip: drop the kangaroo emoji at Tier 3 */
body[data-tier="3"] #pouch span[aria-hidden="true"]:first-child {
  display: none;
}
body[data-tier="3"] #pouch {
  background: white;
  border-color: #E7E5E4;
}
body[data-tier="3"] #pouch-balance {
  color: #1C0F07;
}

/* Feedback: smaller, less padding, no big icon */
body[data-tier="3"] .feedback {
  padding: 14px 18px;
  border-radius: 12px;
}
body[data-tier="3"] #feedback-icon {
  font-size: 1rem;
  font-weight: 700;
  color: #15803D;
}
body[data-tier="3"] .feedback.wrong #feedback-icon {
  color: #E11D48;
}
body[data-tier="3"] #feedback-text {
  font-size: 16px;
  font-weight: 600;
}
body[data-tier="3"] #feedback-explanation {
  font-size: 14px;
}

/* Done screen: less dramatic */
body[data-tier="3"] #screen-done .big-stats,
body[data-tier="3"] #screen-done [class*="text-[72px]"] {
  font-size: 48px !important;
}
body[data-tier="3"] #screen-done .text-[44px] {
  font-size: 32px !important;
}