/* Finger trail */
.trail-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}
.colour-dot {
  width: 52px;
  height: 52px;
  border: 5px solid var(--surface-solid);
  border-radius: 50%;
  background: var(--dot-colour);
  box-shadow: 0 0 0 2px var(--line), var(--shadow-small);
}
.colour-dot.is-selected { box-shadow: 0 0 0 4px var(--ink), var(--shadow-small); }
.colour-blue { --dot-colour: #348de3; }
.colour-green { --dot-colour: #2aa98f; }
.colour-yellow { --dot-colour: #e2a900; }
.colour-pink { --dot-colour: #df5f97; }
.trail-canvas {
  display: block;
  width: 100%;
  height: clamp(260px, 48vw, 430px);
  border: 3px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 28%, rgba(52, 141, 227, 0.08), transparent 14rem),
    radial-gradient(circle at 70% 70%, rgba(130, 112, 213, 0.08), transparent 14rem),
    var(--surface-solid);
  box-shadow: inset 0 0 30px rgba(29, 61, 105, 0.06);
  touch-action: none;
}

/* Learning cards */
.learning-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.learning-card {
  display: flex;
  flex-direction: column;
  min-height: 218px;
  padding: 20px;
  border: 3px solid var(--line);
  border-radius: 24px;
  background: var(--surface-solid);
  box-shadow: var(--shadow-small);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.learning-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.learning-card.numbers { border-top-color: var(--yellow); }
.learning-card.alphabet { border-top-color: var(--blue); }
.learning-card.shapes { border-top-color: var(--green); }
.learning-emoji {
  display: grid;
  place-items: center;
  min-height: 72px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: var(--page);
  font-size: 1.55rem;
  font-weight: 1000;
}
.learning-card strong { font-size: 1.18rem; }
.learning-card small { margin-top: 6px; color: var(--muted); font-weight: 760; line-height: 1.4; }
.open-label { margin-top: auto; padding-top: 18px; color: var(--blue-dark); font-weight: 950; }

/* Grown-up notes */
.grown-up-card {
  margin-bottom: 22px;
  border: 2px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
}
.grown-up-card summary {
  min-height: 62px;
  padding: 19px 22px;
  font-weight: 950;
}
.grown-up-content {
  padding: 0 22px 22px;
  color: var(--soft-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
.grown-up-content p { margin-bottom: 12px; }
.grown-up-content ul { padding-left: 21px; }
.grown-up-content li { margin-bottom: 8px; }
.reset-settings {
  min-height: 50px;
  padding: 11px 16px;
  border: 2px solid var(--line);
  border-radius: 15px;
  background: var(--surface-solid);
  color: var(--ink);
  font-weight: 850;
}

footer {
  padding: 24px 0 max(32px, env(safe-area-inset-bottom));
  border-top: 2px solid var(--line);
  background: var(--surface);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
}
.footer-inner strong { color: var(--ink); }

@keyframes charge-shine {
  0%, 35% { transform: translateX(-120%); }
  72%, 100% { transform: translateX(120%); }
}
@keyframes happy-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes zzz-rise {
  0%, 100% { transform: translateY(8px); opacity: 0; }
  35%, 70% { opacity: 1; }
  80% { transform: translateY(-16px); opacity: 0; }
}
@keyframes breath-ring {
  from { transform: scale(0.86); opacity: 0.62; }
  to { transform: scale(1.18); opacity: 0; }
}
@keyframes gentle-nudge {
  0%, 100% { transform: translateX(0); }
  33% { transform: translateX(-5px); }
  66% { transform: translateX(5px); }
}

@media (max-width: 780px) {
  .home-status { display: none; }
  .battery-grid { grid-template-columns: 1fr; }
  .character-stage { min-height: 306px; }
  .feeling-grid { grid-template-columns: repeat(2, 1fr); }
  .learning-grid { grid-template-columns: 1fr; }
  .learning-card { min-height: 178px; }
  .game-controls.three { grid-template-columns: 1fr 1fr; }
  .game-controls.three .primary { grid-column: 1 / -1; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  .site-shell { width: min(100% - 20px, 1180px); }
  header { padding-bottom: 6px; }
  .brand-mark { width: 44px; height: 44px; border-radius: 15px; }
  .sensory-toolbar-wrap { padding-top: 4px; }
  .hero-copy { padding: 15px 8px 20px; }
  .hero-copy p { font-size: 0.98rem; }
  .section-card { padding: 17px 14px; border-radius: 24px; }
  .section-heading { gap: 9px; }
  .section-icon { width: 45px; height: 45px; border-radius: 15px; font-size: 1.3rem; }
  .character-stage { min-height: 280px; padding-inline: 7px; }
  .battery-character { width: min(230px, 76vw); transform: scale(0.96); }
  .battery-character.is-sleeping { transform: translateY(38px) rotate(8deg) scale(0.86); }
  .routine-actions { grid-template-columns: 1fr; }
  .feeling-button { min-height: 124px; }
  .activity-panel { min-height: 340px; padding: 16px 10px; }
  .activity-tab { min-width: 105px; }
  .dash-lane { height: 145px; }
  .charge-dock { width: 70px; height: 84px; right: 8px; }
  .bubble-grid { grid-template-columns: repeat(3, 1fr); gap: 11px; padding: 13px; }
  .bubble { width: min(88px, 23vw); }
  .game-controls.three { grid-template-columns: 1fr; }
  .game-controls.three .primary { grid-column: auto; }
  .pattern-shape,
  .pattern-choice { width: 58px; height: 58px; min-width: 58px; min-height: 58px; font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}