/* Distribute the home viewport between the hero and all controls. */
html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-body {
    position: absolute !important;
    inset: 0 0 var(--home-menu-reserve, 88px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 44fr) minmax(0, 11fr) minmax(0, 33fr) minmax(0, 12fr) !important;
    gap: clamp(6px, calc(.9 * var(--home-unit, 7px)), 10px) !important;
    padding: 0 16px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-hero-full {
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    margin: 0 -16px !important;
}
html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-levelcard.free {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 10px 14px !important;
    grid-template-columns: clamp(28px, calc(5 * var(--home-unit, 7px)), 56px) minmax(0, 1fr) auto 14px !important;
    gap: clamp(6px, calc(1.1 * var(--home-unit, 7px)), 11px) !important;
    box-sizing: border-box !important;
}
html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-level-avatar {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
}
html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-levelcard b {
    font-size: clamp(14px, calc(2.3 * var(--home-unit, 7px)), 22px) !important;
}
html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-levelcard small {
    font-size: clamp(8px, calc(1.25 * var(--home-unit, 7px)), 12px) !important;
}
html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-tiles {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: clamp(6px, calc(.9 * var(--home-unit, 7px)), 10px) !important;
    margin: 0 !important;
}
html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-tile {
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px !important;
    gap: 3px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
}
html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-tile .m-tile-icon {
    flex: 0 1 auto !important;
    width: clamp(24px, calc(8 * var(--home-unit, 7px)), 68px) !important;
    height: clamp(24px, calc(8 * var(--home-unit, 7px)), 68px) !important;
    max-height: 54% !important;
    min-height: 0 !important;
}
html[data-mobile][data-mtheme="light"] #mRoot[id][data-mpage="home"] .m-tile .m-tile-icon {
    width: min(94%, clamp(38px, calc(12.8 * var(--home-unit, 7px)), 109px)) !important;
}
html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-tile b {
    font-size: clamp(10px, calc(1.8 * var(--home-unit, 7px)), 16px) !important;
    line-height: 1.1 !important;
    text-align: center !important;
    max-width: 100% !important;
}
html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-quote-card {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
}
html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-quote-banner {
    height: 100% !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: fill !important;
}
@media (min-aspect-ratio: 13/10) {
    html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-body {
        grid-template-columns: minmax(0, 44fr) minmax(0, 56fr) !important;
        grid-template-rows: minmax(0, 22fr) minmax(0, 54fr) minmax(0, 24fr) !important;
        padding-top: 56px !important;
    }
    html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-hero-full { grid-column: 1; grid-row: 1 / -1; margin-right: 0 !important; }
    html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-levelcard { grid-column: 2; grid-row: 1; }
    html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-tiles { grid-column: 2; grid-row: 2; }
    html[data-mobile][data-mtheme] #mRoot[id][data-mpage="home"] .m-quote-card { grid-column: 2; grid-row: 3; }
}