/* Kids Zone global layer
   This file is intentionally small and app-agnostic.
   New Kids Zone apps should include this after their app CSS. */

.kids-zone-app {
  --kids-btn-radius: 999px;
  --kids-btn-min-height: 42px;
  --kids-focus-ring: 0 0 0 4px rgba(111, 63, 212, 0.16);
}

.kids-zone-app .hero-actions,
.kids-zone-app .controls,
.kids-zone-app .actions,
.kids-zone-app .mode-tabs,
.kids-zone-app .kids-rules-actions {
  gap: 10px;
}

.kids-zone-app .back-link,
.kids-zone-app .primary-btn,
.kids-zone-app .secondary-btn,
.kids-zone-app .listen-btn,
.kids-zone-app .mode-tab,
.kids-zone-app .option-btn,
.kids-zone-app .answer-btn,
.kids-zone-app .card-btn,
.kids-zone-app .rules-back-top,
.kids-zone-app .kids-check-rules-link,
.kids-zone-app .kids-start-practice-link,
.kids-zone-app .kids-back-zone-link {
  min-height: var(--kids-btn-min-height);
  border-radius: var(--kids-btn-radius);
  font-weight: 950;
  line-height: 1.1;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  touch-action: manipulation;
}

.kids-zone-app .back-link:hover,
.kids-zone-app .primary-btn:hover,
.kids-zone-app .secondary-btn:hover,
.kids-zone-app .listen-btn:hover,
.kids-zone-app .mode-tab:hover,
.kids-zone-app .option-btn:hover,
.kids-zone-app .answer-btn:hover,
.kids-zone-app .card-btn:hover,
.kids-zone-app .rules-back-top:hover {
  transform: translateY(-1px);
}

.kids-zone-app .back-link:focus-visible,
.kids-zone-app .primary-btn:focus-visible,
.kids-zone-app .secondary-btn:focus-visible,
.kids-zone-app .listen-btn:focus-visible,
.kids-zone-app .mode-tab:focus-visible,
.kids-zone-app .option-btn:focus-visible,
.kids-zone-app .answer-btn:focus-visible,
.kids-zone-app .card-btn:focus-visible,
.kids-zone-app input:focus-visible,
.kids-zone-app select:focus-visible,
.kids-zone-app textarea:focus-visible {
  outline: none;
  box-shadow: var(--kids-focus-ring);
}

.kids-zone-app .kids-check-rules-link {
  background: #f8fbff;
  border-color: rgba(123, 69, 223, .22);
  color: #5b3ea6;
}

.kids-zone-app .kids-start-practice-link {
  background: linear-gradient(135deg, var(--primary, #6f3fd4), var(--pink, #ff7bc0));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 26px rgba(123, 69, 223, .20);
}

.kids-zone-app .kids-back-zone-link {
  background: #fff;
}

.kids-zone-app .kids-rules-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  width: 100%;
}

.kids-zone-app .rules-back-top {
  background: #fff;
  border-color: rgba(123, 69, 223, .22);
  color: #5b3ea6;
  box-shadow: 0 10px 22px rgba(80, 62, 130, .10);
}

.kids-zone-app .game-card,
.kids-zone-app .rule-card,
.kids-zone-app .branch-card,
.kids-zone-app .picture-card,
.kids-zone-app .question-area,
.kids-zone-app .task-area,
.kids-zone-app .summary,
.kids-zone-app .teacher-note {
  border-color: var(--soft-border, rgba(87, 66, 102, .13));
}

.kids-zone-app .feedback:empty,
.kids-zone-app .instruction:empty,
.kids-zone-app .tiny-help:empty {
  display: none;
}

@media (max-width: 760px) {
  .kids-zone-app .hero-actions,
  .kids-zone-app .controls,
  .kids-zone-app .actions,
  .kids-zone-app .mode-tabs {
    width: 100%;
    flex-wrap: wrap;
  }

  .kids-zone-app .hero-actions > *,
  .kids-zone-app .controls > *,
  .kids-zone-app .actions > * {
    flex: 1 1 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kids-zone-app *,
  .kids-zone-app *::before,
  .kids-zone-app *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


/* Kids Zone shared compact practice layout (Plural / Alphabet / Numbers style) */
body[data-kids-compact-practice="true"] .game-card .mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 12px;
}
body[data-kids-compact-practice="true"] .game-card .mode-tab {
  border: 1px solid var(--soft-border);
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  color: #5a4865;
  cursor: pointer;
  box-shadow: var(--soft-shadow);
}
body[data-kids-compact-practice="true"] .game-card .mode-tab.active {
  background: linear-gradient(135deg, #fff4c2, #ffe4ea);
  border-color: rgba(143, 83, 160, .28);
  color: var(--primary);
}
body[data-kids-compact-practice="true"] .kids-task-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
body[data-kids-compact-practice="true"] .kids-task-panel.is-plain {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}
body[data-kids-compact-practice="true"] .kids-display-card {
  min-height: 342px;
}
@media (max-width: 820px) {
  body[data-kids-compact-practice="true"] .game-card .mode-tabs {
    gap: 8px;
    margin-bottom: 10px;
  }
  body[data-kids-compact-practice="true"] .game-card .mode-tab {
    padding: 10px 13px;
  }
}


body[data-kids-compact-practice="true"] .kids-main-title {
  margin: 0 0 12px;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.055em;
  font-weight: 900;
}
body[data-kids-compact-practice="true"] .compact-feedback {
  min-height: 0;
  padding: 9px 12px;
  border-radius: 14px;
  margin: 0 0 10px;
  line-height: 1.35;
  font-size: .95rem;
  font-weight: 800;
}
body[data-kids-compact-practice="true"] .compact-feedback.good {
  background:#ecfdf3;
  border-color:rgba(22,163,74,.28);
  color:#166534;
}
body[data-kids-compact-practice="true"] .compact-feedback.bad {
  background:#fff7ed;
  border-color:rgba(249,115,22,.28);
  color:#9a3412;
}
body[data-kids-compact-practice="true"] .compact-feedback.info {
  background:#fff7fb;
  border-color:rgba(87, 66, 102, 0.10);
  color:#5a4865;
}
body[data-kids-compact-practice="true"] .compact-feedback strong {
  color: var(--ink);
}