/* ==========================================================================
   SHARED CHROME FOR THE CHILDREN'S GAMES
   Screens, top bar, score pill, chips, big buttons, settings panel and
   confetti — everything the four games in /Games/Kids/ have in common.

   The visual language is lifted from Words/word-adventures.html (cream page,
   purple ink, 18px radii, big tap targets) so the section reads as one family.
   Two deliberate differences from that file:

     * No Google Fonts link. word-adventures.html loads Nunito and the Papa's
       Games fork has to strip it; a system stack means this file ships to the
       app byte-for-byte with no delta at all.
     * The safe-area padding below is authored HERE, in the web copy, rather
       than added during the fork. env() resolves to 0 wherever there is no
       inset, so the desktop layout is unchanged and the app needs no patch.

   Card games' cardgames-common.css is NOT reused: it paints green baize on
   html/body and is a card-table skin, not neutral chrome.
   ========================================================================= */

:root {
  --kids-bg: #fff8f0;
  --kids-ink: #3c3489;
  --kids-ink-soft: #534ab7;
  --kids-muted: #5f5e5a;
  --kids-lilac: #7f77dd;
  --kids-lilac-pale: #f0edf8;
  --kids-border: #d7d3f5;
  --kids-green: #1d9e75;
  --kids-amber: #ba7517;
  --kids-amber-pale: #faeeda;
  --kids-red: #d94a3d;
  --kids-card: #ffffff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
  background: var(--kids-bg);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  justify-content: center;
  /* Clears the Android status bar and gesture pill in the app build; resolves
     to a flat 12px everywhere else. */
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px
           calc(env(safe-area-inset-bottom, 0px) + 12px);
}

#app {
  width: 100%;
  max-width: 520px;
}

/* ===================== Screens =====================
   Every game is several screens behind one URL. Exactly one carries .active;
   Kids.go() in kids-common.js does the swapping and reports the depth to the
   native host. */

.screen {
  display: none;
  flex-direction: column;
  min-height: 88vh;
  padding: 16px;
}

.screen.active {
  display: flex;
}

/* ===================== Menu screen ===================== */

.scr-menu {
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  position: relative;
}

.scr-menu h1 {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--kids-ink);
  line-height: 1.2;
}

.scr-menu p.menu-lead {
  color: var(--kids-muted);
  font-size: 1.05rem;
}

.menu-icon {
  font-size: 56px;
  line-height: 1;
}

/* The two corner buttons on a menu screen. Mirrors word-adventures.html, and
   the app fork changes only the games-btn href. */
.corner-btn {
  position: absolute;
  top: 0;
  background: var(--kids-lilac-pale);
  color: var(--kids-ink-soft);
  border: none;
  border-radius: 12px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

.corner-btn.left {
  left: 0;
}

.corner-btn.right {
  right: 0;
}

/* ===================== Big menu buttons ===================== */

.game-btn {
  width: 100%;
  max-width: 340px;
  border: none;
  border-radius: 18px;
  padding: 18px 22px;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  background: var(--kids-lilac);
  text-align: left;
}

.game-btn:active {
  transform: scale(0.96);
}

.game-btn .btn-icon {
  font-size: 2.1rem;
  flex-shrink: 0;
}

.game-btn .btn-label small {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0.88;
  margin-top: 2px;
}

/* ===================== Top bar on play screens ===================== */

.top-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.back-btn {
  background: var(--kids-lilac-pale);
  color: var(--kids-ink-soft);
  border: none;
  border-radius: 12px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}

.top-bar h2 {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--kids-ink);
  flex: 1;
}

.score-pill {
  background: var(--kids-amber-pale);
  border-radius: 24px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.score-pill span {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--kids-amber);
}

/* ===================== Difficulty chips ===================== */

.chip-block {
  margin: 4px 0 12px;
}

.chip-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--kids-ink-soft);
  margin: 0 0 6px;
}

.chips {
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}

.chip {
  border: 3px solid var(--kids-border);
  background: var(--kids-card);
  border-radius: 14px;
  padding: 7px 10px;
  min-width: 64px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  color: #8a86b8;
  cursor: pointer;
  line-height: 1.15;
  transition: transform 0.12s;
}

.chip .chip-emoji {
  display: block;
  font-size: 1.25rem;
}

.chip .chip-note {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  opacity: 0.75;
}

.chip.on {
  border-color: var(--kids-lilac);
  background: #eeecff;
  color: var(--kids-ink-soft);
}

.chip:active {
  transform: scale(0.95);
}

/* ===================== Shared play-screen pieces ===================== */

/* The question area takes up the slack between the header and the answers, so
   the answer buttons stay in the same place from one round to the next. They
   must not jump under a finger that is already on its way down. */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 170px;
}

.prompt-line {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--kids-ink);
  margin-bottom: 10px;
}

.speak-btn {
  background: #e6f1fb;
  color: #185fa5;
  border: none;
  border-radius: 12px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 12px;
}

.feedback {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 900;
  text-align: center;
  margin: 6px 0;
}

.feedback.good {
  color: var(--kids-green);
}

.feedback.bad {
  color: var(--kids-red);
}

/* Answer buttons — deliberately at least 72px so a four-year-old's whole
   fingertip lands inside one. */
.answer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 auto;
}

/* Four options wrap to 3 + 1 at full width, which looks like a mistake and
   leaves one button stranded. Narrowing the row forces an even 2 x 2. */
.answer-grid.of-four {
  max-width: 200px;
}

.answer-btn {
  min-width: 76px;
  min-height: 76px;
  border-radius: 18px;
  border: 3px solid var(--kids-border);
  background: var(--kids-card);
  font-family: inherit;
  font-size: 2rem;
  font-weight: 900;
  color: var(--kids-ink);
  cursor: pointer;
  padding: 8px 14px;
}

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

.answer-btn.right {
  border-color: var(--kids-green);
  background: #e4f6ef;
  color: var(--kids-green);
}

.answer-btn.wrong {
  border-color: var(--kids-red);
  background: #fdecea;
  color: var(--kids-red);
}

.answer-btn[disabled] {
  cursor: default;
}

.shake {
  animation: kids-shake 0.4s;
}

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

.pop {
  animation: kids-pop 0.35s;
}

@keyframes kids-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ===================== End-of-round panel ===================== */

.end-panel {
  text-align: center;
  margin-top: auto;
  padding-top: 12px;
}

.end-emoji {
  font-size: 3.4rem;
  line-height: 1;
}

.end-stars {
  font-size: 2rem;
  letter-spacing: 4px;
  margin: 6px 0;
}

.end-detail {
  color: var(--kids-muted);
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.big-btn {
  background: var(--kids-lilac);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 15px 22px;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  width: 100%;
  max-width: 340px;
}

.big-btn:active {
  transform: scale(0.97);
}

.big-btn.secondary {
  background: var(--kids-lilac-pale);
  color: var(--kids-ink-soft);
}

/* ===================== Settings panel =====================
   Rendered by Kids.settings.render(); a page only supplies the empty host
   element, so all four games get the identical panel. */

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 2px solid #f0ece4;
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row .row-label {
  font-weight: 800;
  color: var(--kids-ink);
  text-align: left;
}

.settings-row .row-label small {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kids-muted);
  margin-top: 2px;
}

.toggle {
  width: 48px;
  height: 28px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.toggle.on {
  background: var(--kids-lilac);
}

.toggle.off {
  background: #d3d1c7;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

.toggle.on::after {
  left: 24px;
}

.toggle.off::after {
  left: 4px;
}

/* ===================== Confetti =====================
   The overlay element is created by kids-fx.js on first use, so no page has to
   remember to include the markup. */

#kids-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
  display: none;
}

.kids-cp {
  position: absolute;
  top: -20px;
  border-radius: 3px;
  animation: kids-fall linear forwards;
}

@keyframes kids-fall {
  to {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}

/* ===================== Small phones ===================== */

@media (max-width: 380px) {
  .scr-menu h1 {
    font-size: 1.9rem;
  }

  .game-btn {
    padding: 15px 18px;
    font-size: 1.05rem;
  }

  .answer-btn {
    min-width: 66px;
    min-height: 66px;
    font-size: 1.7rem;
  }
}