.child-app {
    --child-ink: #17324d;
    --child-sky: #e9f8ff;
    --child-sun: #fff1a8;
    --child-mint: #dff8e8;
    color: var(--child-ink);
    background: #fbfdff;
}

.child-header {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #cfe1ec;
    background: #fff;
    box-shadow: 0 .2rem 1rem rgb(23 50 77 / 6%);
}

.child-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 5.25rem;
}

.child-nav__links {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.child-nav__collapse {
    flex-grow: 0;
}

.child-header .navbar-toggler {
    min-width: 2.9rem;
    min-height: 2.75rem;
    border-color: #b7cfdd;
}

.child-nav__links > a:not(.btn) {
    padding: .8rem 1rem;
    border-radius: .8rem;
    color: var(--child-ink);
    font-weight: 700;
    text-decoration: none;
}

.child-nav__links > a:not(.btn):hover { background: var(--child-sky); }
.child-main { min-height: calc(100vh - 10rem); }
.child-footer { padding: 1.4rem 0; border-top: 1px solid #cfe1ec; background: #fff; color: #526579; text-align: center; }
.child-hero { background: linear-gradient(135deg, #fff8d6, var(--child-sky)); }
.child-hero h1 { max-width: 15ch; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1; }
.mascot-message { display: flex; align-items: center; gap: 1rem; max-width: 48rem; margin-top: 1.5rem; padding: 1rem 1.25rem; border: 2px solid #f2c94c; border-radius: 1rem; background: #fff; font-size: 1.1rem; }
.mascot-message span { display: grid; flex: 0 0 3rem; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; background: var(--child-sun); font-size: 1.5rem; }
.mascot-message p { margin: 0; }
.child-sections { display: grid; gap: 0.5rem; }
.child-section-title, .child-catalog-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.child-section-title .eyebrow { margin-bottom: .25rem; }
.child-game-card { overflow: hidden; display: flex; flex-direction: column;border: 1px solid #cfe1ec; border-radius: 1.1rem; background: #fff; box-shadow: 0 .5rem 1.4rem rgb(23 50 77 / 8%); }
.child-game-card__body { display: flex; flex-direction: column; align-items: flex-start; padding: 1.25rem; }
.child-game-card h3 { margin-top: 1rem; font-size: 1.35rem; }
.child-game-card p { color: #526579; }
.child-card-action { margin-top: auto; min-height: 2.8rem; }
.child-card-reason { padding-left: .7rem; border-left: 3px solid #f2c94c; font-weight: 600; }
.child-chip { display: inline-block; margin: 0 .25rem .25rem 0; padding: .3rem .65rem; border-radius: 99rem; background: var(--child-mint); color: #1d5936; font-size: .85rem; font-weight: 700; }
.child-chip--soft { background: #eef2ff; color: #3b4a91; }
.child-filter-list { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.4rem 0; }
.child-filter { display: inline-flex; align-items: center; min-height: 3rem; padding: .65rem 1rem; border: 2px solid #b7d8e8; border-radius: .85rem; background: #fff; color: var(--child-ink); font-weight: 700; text-decoration: none; }
.child-filter:hover, .child-filter.is-active { border-color: #3454d1; background: #eef2ff; }
.child-progress-card, .child-empty, .child-instructions, .child-catalog-cta { padding: 1.4rem; border: 1px solid #cfe1ec; border-radius: 1rem; background: #fff; }
.child-progress-card h3 { font-size: 1.15rem; }
.child-progress-card progress, .parent-path progress { width: 100%; height: 1rem; accent-color: #2f8f5b; }
.child-catalog-cta { background: linear-gradient(135deg, var(--child-mint), var(--child-sky)); }
.child-game-detail { max-width: 1120px; }
.child-game-detail h1 { margin-top: 1rem; }
.child-runtime { padding-bottom: 2rem; }
.child-runtime-page { max-width: 96rem; margin-inline: auto; padding-inline: clamp(.75rem, 2vw, 1.5rem); }
.child-runtime-layout { grid-template-columns: 1fr; }
.child-runtime .runtime-frame { width: 100%; max-width: 1280px; max-height: 720px; margin-inline: auto; scroll-margin-top: .5rem; }
.child-runtime-help { margin-top: 1rem; padding: 1rem 1.25rem; }
.child-runtime-help h2 { margin-bottom: .5rem; font-size: 1.2rem; }
.child-runtime-help > p { margin-bottom: .5rem; }
.runtime-admin-details { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--runtime-border); }
.runtime-admin-details summary { color: var(--runtime-muted); font-weight: 700; cursor: pointer; }
.runtime-pause-layer { position: absolute; z-index: 5; inset: 0; display: grid; width: 100%; height: 100%; padding: 1rem; place-items: center; background: rgb(3 11 24 / 72%); color: #fff; backdrop-filter: blur(3px); }
.runtime-pause-layer[hidden] { display: none; }
.runtime-pause-layer__card { display: grid; gap: .4rem; width: min(24rem, 90%); padding: 1.5rem; border: 2px solid #8fd9ff; border-radius: 1rem; background: rgb(16 33 58 / 94%); box-shadow: 0 1rem 3rem rgb(0 0 0 / 35%); text-align: center; }
.runtime-pause-layer__card strong { color: #fff; font-size: clamp(1.5rem, 4vw, 2.4rem); }
.runtime-pause-layer__card p { margin: 0; font-size: 1rem; }
.runtime-pause-layer__actions { display: flex; justify-content: center; gap: .75rem; margin-top: .8rem; }
.runtime-frame:fullscreen,
.runtime-frame:-webkit-full-screen { width: 100vw; max-width: none; height: 100vh; max-height: none; aspect-ratio: auto; border: 0; border-radius: 0; background: #030b18; }
.child-stat-grid, .parent-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.child-stat-grid article, .parent-stat-grid article { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid #cfe1ec; border-radius: 1rem; background: #fff; }
.child-stat-grid strong, .parent-stat-grid strong { color: #3454d1; font-size: 2rem; line-height: 1; }
.child-stat-grid span, .parent-stat-grid span { margin-top: .5rem; }
.parent-stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.child-activity-list { display: grid; gap: .75rem; }
.child-activity-list article { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid #cfe1ec; border-radius: .8rem; background: #fff; }
.child-activity-list h3 { margin: 0; font-size: 1.1rem; }
.child-activity-list p { margin: .25rem 0 0; }
.parent-path + .parent-path { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--edu-border); }

@media (max-width: 992px) {
    .child-nav { align-items: center; flex-direction: row; padding-block: .65rem; }
    .child-nav__collapse { flex-basis: 100%; width: 100%; }
    .child-nav__links { align-items: stretch; flex-direction: column; width: 100%; padding: 1rem 0 .35rem; border-top: 1px solid #cfe1ec; }
    .child-nav__links > a { width: 100%; }
    .parent-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .child-section-title, .child-catalog-cta { align-items: flex-start; flex-direction: column; }
    .child-stat-grid, .parent-stat-grid { grid-template-columns: 1fr; }
    .child-runtime-page { padding: .25rem !important; }
    .child-runtime { padding-bottom: .5rem; }
    .child-runtime .runtime-heading { gap: .5rem; margin-bottom: .6rem; padding: .25rem .35rem 0; }
    .child-runtime .runtime-heading h1 { margin-bottom: 0; font-size: clamp(1.35rem, 7vw, 1.8rem); }
    .child-runtime .runtime-heading .eyebrow { margin-bottom: 0; }
    .child-runtime .runtime-state-card { min-width: 0; padding: .45rem .7rem; }
    .child-runtime .runtime-frame { border-radius: .55rem; }
    .child-runtime .runtime-controls { margin-top: .6rem; padding: .65rem; }
    .child-runtime .runtime-control-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
    .child-runtime .runtime-control-group .btn { min-height: 2.55rem; padding-inline: .45rem; font-size: .86rem; }
    .child-runtime .runtime-feedback { margin-top: .65rem; padding: .65rem .75rem; font-size: .9rem; }
    .child-runtime-help { margin-top: .6rem; padding: .8rem; }
    .runtime-pause-layer__actions { flex-direction: column; }
    .runtime-overlay__card .btn { width: 100%; margin: .4rem 0 0 !important; }
}

@media (max-width: 420px) {
    .child-runtime .runtime-control-group { grid-template-columns: 1fr; }
}