/* MOBILE-ALIGNMENT-140: shared mobile rhythm; existing game and form selectors stay intact. */
.arena-mobile-brand { display: none; }
@media (max-width: 720px) {
    html body.robo-arena-page {
        --arena-space-small: 8px;
        --arena-space: 16px;
        --arena-space-large: 24px;
        --arena-body-font: "Teacher Inter", "Segoe UI", Arial, sans-serif;
        --arena-title-font: "Fredoka", "Arial Rounded MT Bold", sans-serif;
        font-family: var(--arena-body-font) !important;
        -webkit-text-size-adjust: 100%;
    }
    html body.robo-arena-page :is(h1,h2,h3) {
        font-family: var(--arena-title-font) !important;
        line-height: 1.2 !important;
        overflow-wrap: break-word;
    }
    html body.robo-arena-page h1 { font-size: clamp(26px, 7vw, 32px) !important; }
    html body.robo-arena-page h2 { font-size: clamp(22px, 5.8vw, 26px) !important; }
    html body.robo-arena-page h3 { font-size: 20px !important; }
    html body.robo-arena-page :is(p,label,select,textarea,input,button,.btn) {
        font-family: var(--arena-body-font) !important;
    }
    html body.robo-arena-page:not(.ra-game-page):not(.flow-child-id-page) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) {
        font-size: 16px !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    html body.robo-arena-page :is(p,.form-message) { line-height: 1.5; }
    html body.robo-arena-page :is(.hero-actions,.nav-actions,.teacher-page-heading) { flex-wrap: wrap; gap: 12px; }
    html body.robo-arena-page :is(.teacher-button,.teacher-filter,.btn,.auth-submit) { min-height: 44px; }
    html body.robo-arena-page :is(.parent-login-v2-panel,.parent-register-v2-panel,.teacher-register-reference-panel,.teacher-signin-reference-panel) {
        padding: 20px 16px !important;
    }
    html body.robo-arena-page :is(.parent-login-v2-form,.parent-register-v2-form,.teacher-register-reference-form,.teacher-signin-reference-form) { gap: 16px !important; }
    html body.robo-arena-page :is(.parent-login-v2-heading p,.parent-register-v2-heading p,.teacher-register-reference-heading p,.teacher-signin-reference-heading p) {
        font-family: var(--arena-body-font) !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    html body.robo-arena-page :is(.parent-register-v2-check,.teacher-register-reference-check) {
        align-items: flex-start;
        gap: 10px;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    html body.robo-arena-page :is(.parent-register-v2-check,.teacher-register-reference-check) input { flex: 0 0 auto; }
    html body.robo-arena-page .arena-google-choice { margin-bottom: 16px; }
    html body.robo-arena-page .arena-google-button { min-height: 52px; font-size: 16px !important; }
    html body.robo-arena-page .arena-mobile-brand {
        display: flex; justify-content: center; position: relative;
        width: min(44vw, 170px); margin: 16px auto; z-index: 2;
    }
    html body.robo-arena-page .arena-mobile-brand img { display: block; width: 100%; height: auto; object-fit: contain; }
    html body.robo-arena-page :is(.teacher-content,.teacher-panel,.parent-page,.app-page) { min-width: 0; }
    html body.robo-arena-page :is(.teacher-panel,.parent-premium .panel) { padding: 16px; }
    html body.robo-arena-page :is(.teacher-class-grid,.teacher-dashboard-footer-grid,.parent-action-grid,.parent-children-grid,.summary-grid) { gap: 16px; }
    html body.robo-arena-page :is(.teacher-page-heading,.panel-heading) { gap: 12px; }
    html body.robo-arena-page :is(.teacher-page-heading p,.teacher-empty-state p,.parent-page .panel p) { font-size: 16px; }
    html body.robo-arena-page :is(.teacher-table-wrap,.table-wrap,.table-responsive) { max-width: 100%; overflow-x: auto; }
    html body.robo-arena-page .teacher-app-header__logo { max-width: 180px; object-fit: contain; }
    html body.robo-arena-page .parent-brand-logo { max-width: 180px; object-fit: contain; }
    html body.robo-arena-page .ra-secondary-topbar { flex-wrap: wrap; row-gap: 12px; }
    html body.robo-arena-page .parent-login-v2-logo { object-fit: contain !important; }
    html body.robo-arena-page .parent-register-v2-logo { object-fit: contain !important; }
    html body.robo-arena-page :is(.parent-login-v2-benefits,.parent-register-v2-benefits) {
        grid-template-columns: minmax(0,1fr) !important;
        gap: 16px !important;
    }
    html body.robo-arena-page :is(.parent-login-v2-benefits,.parent-register-v2-benefits) article { min-width: 0; padding: 20px 16px; }
    html body.robo-arena-page :is(.parent-login-v2-benefits,.parent-register-v2-benefits) p { font-size: 15px !important; }
    html body.robo-arena-page .parent-onboarding-hero {
        display: flex; flex-direction: column; align-items: center; gap: 16px;
        padding-top: 16px;
    }
    html body.robo-arena-page .parent-onboarding-logo {
        position: static !important; order: -1; width: min(52vw,200px) !important;
        height: auto !important; margin: 0 auto; transform: none !important;
    }
    html body.robo-arena-page .parent-onboarding-hero > div { text-align: center; padding: 0; }
}
@media (max-width: 720px) {
    html body.parent-profile-reference-page .parent-reference-chart {
        overflow-x: auto;
        padding-bottom: 36px;
        height: 196px;
        -webkit-overflow-scrolling: touch;
    }
    html body.ra-profile-page .child-profile-topbar .child-profile-topbar-button {
        width: 56px !important; min-width: 56px !important;
        height: 56px !important; min-height: 56px !important;
    }
    html body.ra-game-page .robo-arena .game-setup::before { display: none !important; content: none !important; }
}
/* PARENT-ONBOARDING-REDESIGN-247: final override for supplied light onboarding pack. */
html body.parent-onboarding-page .parent-topbar {
    display: none !important;
}

html body.parent-onboarding-page .parent-onboarding-hero,
html body.parent-onboarding-page.robo-arena-page .parent-onboarding-hero {
    position: relative !important;
    display: block !important;
    width: min(calc(100% + 28px), 430px) !important;
    min-height: 174px !important;
    height: 174px !important;
    margin: 0 -14px -20px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 10% 40%, rgba(255, 220, 44, .74) 0 12px, transparent 13px),
        radial-gradient(circle at 48% 5%, rgba(255, 255, 255, .78) 0 24px, transparent 25px),
        linear-gradient(180deg, #c9f1ff, #e9fbff) !important;
    box-shadow: none !important;
}

html body.parent-onboarding-page .parent-onboarding-logo,
html body.parent-onboarding-page.robo-arena-page .parent-onboarding-logo {
    position: absolute !important;
    top: 12px !important;
    left: 24px !important;
    z-index: 2 !important;
    display: block !important;
    width: 205px !important;
    height: 132px !important;
    object-fit: contain !important;
    transform: none !important;
}

html body.parent-onboarding-page .parent-onboarding-mentor,
html body.parent-onboarding-page.robo-arena-page .parent-onboarding-mentor {
    position: absolute !important;
    right: -8px !important;
    bottom: -10px !important;
    z-index: 2 !important;
    display: block !important;
    width: 190px !important;
    height: 178px !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: right bottom !important;
}

html body.parent-onboarding-page .parent-onboarding-hero > div,
html body.parent-onboarding-page .parent-onboarding-hero .parent-add-child-back,
html body.parent-onboarding-page .parent-onboarding-hero .parent-add-step-counter {
    display: none !important;
}

html body.parent-onboarding-page .parent-add-submit,
html body.parent-onboarding-page .parent-main-cta,
html body.parent-onboarding-page .parent-onboarding-finish-reference {
    border: 2px solid #f3bc00 !important;
    background: linear-gradient(180deg, #ffe95a, #ffd314) !important;
    color: #071853 !important;
    box-shadow: 0 8px 0 #efa900, 0 16px 22px rgba(236, 158, 0, .2) !important;
}

@media (min-width: 760px) {
    html body.parent-onboarding-page .parent-onboarding-hero,
    html body.parent-onboarding-page.robo-arena-page .parent-onboarding-hero {
        width: min(92vw, 920px) !important;
        min-height: 310px !important;
        height: 310px !important;
        margin: 0 auto -36px !important;
    }

    html body.parent-onboarding-page .parent-onboarding-logo,
    html body.parent-onboarding-page.robo-arena-page .parent-onboarding-logo {
        top: 22px !important;
        left: 90px !important;
        width: 340px !important;
        height: 220px !important;
    }

    html body.parent-onboarding-page .parent-onboarding-mentor,
    html body.parent-onboarding-page.robo-arena-page .parent-onboarding-mentor {
        right: 70px !important;
        width: 390px !important;
        height: 330px !important;
    }
}