@media (min-width: 680px) {
  .app-shell {
    padding: 28px;
  }

  .profile-grid,
  .action-grid,
  .badge-grid,
  .kid-metrics,
  .topic-picks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cave-map {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .practice-view {
    display: grid;
    grid-template-rows: auto 1fr;
  }

  .question-zone {
    max-width: 760px;
    width: 100%;
    justify-self: center;
  }

  .profile-hero {
    padding: 22px 24px;
  }
}

@media (min-width: 960px) {
  .profile-view .profile-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .action-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .big-action {
    min-height: 180px;
  }

  .choice-grid button,
  .number-pad button {
    min-height: 104px;
  }

  .parent-view .panel {
    max-width: 820px;
    margin: 0 auto;
  }

  .cave-node {
    min-height: 160px;
  }
}

@media (max-width: 768px) {
  .app-shell {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }

  .top-band,
  .kid-status,
  .practice-status,
  .mini-nav {
    gap: 8px;
  }

  .kid-status,
  .practice-status {
    justify-content: center;
    flex-wrap: wrap;
  }

  .practice-view {
    gap: 6px;
  }

  .practice-status {
    margin-bottom: 8px;
  }

  .practice-status-compact .blob {
    width: 46px;
    height: 46px;
    font-size: 1.45rem;
  }

  .top-band {
    padding: 8px 0 14px;
  }

  .top-band h1 {
    font-size: 1.95rem;
    line-height: 1;
  }

  .brand-mark,
  .kid-avatar,
  .icon-button {
    width: 50px;
    min-width: 50px;
    height: 50px;
    min-height: 50px;
    border-radius: 14px;
  }

  .brand-mark,
  .kid-avatar {
    font-size: 1.65rem;
  }

  .icon-button {
    padding: 6px 8px 5px;
  }

  .icon-button::before {
    font-size: 1.1rem;
  }

  .icon-button::after {
    font-size: 0.7rem;
    margin-top: 2px;
  }

  .icon-button.icon-only {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
  }

  .icon-button.icon-only::before {
    font-size: 1.18rem;
  }

  .profile-hero,
  .home-hero,
  .panel {
    border-radius: 22px;
  }

  .storybook-logo {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .storybook-stage {
    grid-template-columns: 1fr;
  }

  .storybook-mascot {
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    text-align: left;
  }

  .mascot-figure {
    font-size: 3.8rem;
  }

  .storybook-center-card {
    padding: 18px 16px;
  }

  .storybook-cta {
    min-width: 0;
    width: 100%;
  }

  .kid-status .stat-pill {
    min-width: 0;
    padding: 0 12px;
    font-size: 0.9rem;
  }

  .profile-grid,
  .action-grid,
  .topic-picks,
  .badge-grid {
    gap: 10px;
  }

  .topic-toggle {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 14px;
  }

  .topic-pick {
    min-height: 142px;
  }

  .topic-toggle-copy strong {
    font-size: 1rem;
  }

  .topic-toggle-copy small {
    font-size: 0.88rem;
  }

  .profile-tools,
  .profile-section {
    margin-bottom: 14px;
  }

  .profile-filter-row {
    gap: 8px;
    margin-bottom: 10px;
  }

  .profile-search {
    min-width: 100%;
    flex-basis: 100%;
  }

  .profile-search span {
    font-size: 0.82rem;
  }

  .profile-search input {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 0.92rem;
  }

  .settings-shortcuts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .settings-shortcuts .icon-button {
    min-height: 60px;
    border-radius: 16px;
  }

  .range-pill {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 0.88rem;
  }

  .profile-tile {
    min-height: 138px;
    padding: 12px 10px;
    border-radius: 22px;
  }

  .profile-tile .avatar {
    width: 68px;
    height: 68px;
    font-size: 2.2rem;
  }

  .storybook-tile {
    min-height: 154px;
  }

  .profile-name {
    margin-top: 8px;
    font-size: 1.08rem;
    line-height: 1.05;
  }

  .profile-meta {
    margin-top: 2px;
    font-size: 0.86rem;
    line-height: 1.15;
  }

  .profile-tile.add {
    min-height: 138px;
  }

  .timer-meter-track {
    height: 14px;
  }

  .timer-meter-label {
    font-size: 0.8rem;
  }

  .practice-meta {
    margin-bottom: 4px;
  }

  .practice-chip,
  .stage-chip {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 0.84rem;
  }

  .round-progress {
    height: 10px;
    margin: -2px 0 8px;
  }

  .question-zone {
    min-height: auto;
    gap: 14px;
    padding: 16px 14px 18px;
    border-radius: 24px;
  }

  .question-text {
    padding: 4px;
    font-size: clamp(2.7rem, 15vw, 4.6rem);
    line-height: 1;
  }

  .stage-note {
    font-size: 0.92rem;
  }

  .input-display {
    min-height: 72px;
    border-radius: 18px;
    font-size: 2.7rem;
  }

  .number-pad {
    gap: 10px;
  }

  .choice-btn,
  .choice-grid button,
  .number-pad button {
    min-height: 74px;
    border-radius: 16px;
    font-size: clamp(1.7rem, 9vw, 3rem);
  }

  .number-pad .confirm {
    font-size: 2rem;
  }

  .result-summary-badges {
    grid-template-columns: 1fr;
  }

  .daily-reward-card,
  .reward-toast {
    flex-direction: column;
    align-items: stretch;
  }

  .daily-reward-card button,
  .reward-toast button {
    width: 100%;
  }

  .spotlight-stats {
    grid-template-columns: 1fr;
  }

  .spotlight-card {
    padding: 14px;
  }

  .spotlight-head {
    gap: 10px;
  }

  .spotlight-avatar {
    width: 54px;
    height: 54px;
    font-size: 1.6rem;
  }

  .reward-progress-meta,
  .reward-group-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .reward-badge-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .app-shell {
    padding: 10px;
  }

  .top-band h1 {
    font-size: 1.75rem;
  }

  .brand-mark,
  .kid-avatar,
  .icon-button {
    width: 52px;
    min-width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.5rem;
  }

  .big-action {
    min-height: 132px;
  }

  .settings-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .question-text {
    font-size: 2.7rem;
  }

  .storybook-title-wrap h1 {
    font-size: 2rem;
  }

  .storybook-plaque {
    width: 74px;
    height: 74px;
    font-size: 2rem;
  }

  .hero-spark {
    font-size: 1.6rem;
  }

  .home-hero-stats {
    grid-template-columns: 1fr;
  }

  .profile-grid,
  .cave-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-grid,
  .topic-picks,
  .shop-grid {
    grid-template-columns: 1fr;
  }

  .result-actions {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }

  .result-actions button {
    width: 100%;
  }

  .result-actions .result-action-icon {
    width: 72px;
    min-width: 72px;
    height: 72px;
    min-height: 72px;
  }

  .kid-status .stat-pill {
    flex: 1 1 calc(50% - 8px);
  }

  .practice-status {
    gap: 6px;
  }

  .practice-status .stat-pill {
    min-width: 72px;
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.82rem;
  }

  .practice-status .icon-button.icon-only {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .practice-status-compact .blob {
    width: 42px;
    height: 42px;
    font-size: 1.25rem;
  }

  .question-zone {
    gap: 12px;
    padding: 14px 12px 16px;
  }

  .question-text {
    font-size: clamp(2.3rem, 14vw, 3.5rem);
  }

  .input-display {
    min-height: 66px;
    font-size: 2.35rem;
  }

  .choice-btn,
  .choice-grid button,
  .number-pad button {
    min-height: 68px;
    font-size: clamp(1.5rem, 8vw, 2.4rem);
  }

  .number-pad .confirm {
    font-size: 1.7rem;
  }

  .profile-tile {
    min-height: 128px;
    padding: 10px 8px;
  }

  .storybook-tile {
    min-height: 142px;
  }

  .profile-tile .avatar {
    width: 58px;
    height: 58px;
    font-size: 1.95rem;
  }

  .profile-name {
    font-size: 0.98rem;
  }

  .profile-meta {
    font-size: 0.78rem;
  }

  .range-pill {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.8rem;
  }
}

@media (max-height: 760px) and (max-width: 768px) {
  .practice-status {
    margin-bottom: 4px;
  }

  .practice-meta {
    gap: 6px;
  }

  .practice-chip,
  .stage-chip {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.78rem;
  }

  .timer-meter {
    gap: 6px;
    margin: 0 0 6px;
  }

  .timer-meter-track {
    height: 12px;
  }

  .timer-meter-label {
    font-size: 0.76rem;
  }

  .round-progress {
    height: 8px;
    margin: 0 0 6px;
  }

  .question-zone {
    gap: 10px;
    padding: 14px 12px 14px;
  }

  .stage-note {
    font-size: 0.86rem;
  }

  .input-display {
    min-height: 62px;
    font-size: 2.1rem;
  }

  .choice-btn,
  .choice-grid button,
  .number-pad button {
    min-height: 62px;
    font-size: clamp(1.4rem, 7vw, 2.2rem);
  }

  .feedback {
    min-height: 138px;
    font-size: clamp(2rem, 10vw, 3.5rem);
  }
}

@media (max-height: 680px) and (max-width: 430px) {
  .practice-status {
    gap: 4px;
  }

  .practice-status .stat-pill {
    min-width: 64px;
    min-height: 34px;
    padding: 0 8px;
    font-size: 0.76rem;
  }

  .practice-status-compact .blob,
  .practice-status .icon-button.icon-only {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .practice-status-compact .blob {
    font-size: 1.05rem;
  }

  .question-text {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .input-display {
    min-height: 58px;
    font-size: 1.95rem;
  }

  .choice-btn,
  .choice-grid button,
  .number-pad button {
    min-height: 56px;
    border-radius: 14px;
    font-size: clamp(1.3rem, 7vw, 2rem);
  }

  .number-pad {
    gap: 8px;
  }

  .number-pad .confirm {
    font-size: 1.5rem;
  }
}