/*
 * UltraDarts native/mobile experience
 * Final-loaded product guardrails for Play, Professional, Liga and Events.
 * Gameplay layouts intentionally do not load this file.
 */

:root{
    --ud-native-safe-left:max(0px,env(safe-area-inset-left));
    --ud-native-safe-right:max(0px,env(safe-area-inset-right));
    --ud-native-safe-bottom:max(0px,env(safe-area-inset-bottom));
}

/* Native Play navigation: retain the painted shell while the next document loads. */
html.ud-native-navigation .bb-main-inner{view-transition-name:ud-play-content}
html.ud-native-navigation .bb-mobile-header{view-transition-name:ud-play-header}
html.ud-native-navigation .bb-bottom-nav{view-transition-name:ud-play-navigation}
html.ud-native-navigation .bb-sidebar{view-transition-name:ud-play-sidebar}

html.ud-native-navigation .ud-native-link-pending{
    cursor:progress;
}

html.ud-native-navigation.ud-native-navigating::after{
    content:"";
    position:fixed;
    z-index:2147483646;
    inset:0 0 auto;
    height:3px;
    background:linear-gradient(90deg,transparent,#efb20b 40%,#ffd567 60%,transparent);
    pointer-events:none;
    animation:ud-native-progress 1.1s ease-in-out infinite;
}

@keyframes ud-native-progress{
    from{transform:translateX(-100%)}
    to{transform:translateX(100%)}
}

/* The browser retains the previous paint until the destination is ready.
 * Swap the captured pages at full opacity, including the browser's default
 * header/navigation snapshots, without dimming or cross-fading any content. */
html.ud-native-navigation::view-transition-group(*){
    animation:none;
}
html.ud-native-navigation::view-transition-old(*){
    animation:none;
    display:none;
}
html.ud-native-navigation::view-transition-new(*){
    animation:none;
    opacity:1;
    mix-blend-mode:normal;
}

@media(prefers-reduced-motion:reduce){
    html.ud-native-navigation.ud-native-navigating::after{animation:none}
}

html.ud-native-app,
html.ud-native-app body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

html.ud-native-app body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,[contenteditable=true]){
    max-width:100%!important;
    font-size:16px!important;
}

html.ud-native-app.ud-native-writing .bb-bottom-nav,
html.ud-native-app.ud-native-writing .portal-bottom-nav{
    display:none!important;
}

html.ud-native-app.ud-native-writing .ud-app-play .bb-main-inner{
    padding-bottom:calc(16px + var(--ud-native-safe-bottom))!important;
}

html.ud-native-app.ud-native-writing .ud-social-reply:not([hidden]){
    bottom:0!important;
}

@media(max-width:1100px){
    html.ud-native-app body:not(.ud-counter-body):not(.terminal-counter-body){
        font-size:15px;
        line-height:1.45;
    }

    html.ud-native-app body:not(.ud-counter-body):not(.terminal-counter-body) :is(
        .bb-app-shell,.bb-workspace,.bb-main,.bb-main-inner,
        .udp-shell,.udp-workspace,.udp-main,
        .udl-shell,.udl-main,
        .ude-shell,.ude-workspace,.ude-main,
        .ud-auth-shell,.ud-social-page,.ud-social-detail,.ud-public-community,.ud-public-detail
    ){
        min-width:0!important;
        max-width:100%!important;
    }

    html.ud-native-app body:not(.ud-counter-body):not(.terminal-counter-body) :is(h1,.ud-play-workspace-head h1,.udp-pagehead h1,.udp-page-head h1,.udl-main h1,.ude-main h1){
        font-size:clamp(26px,7.2vw,32px)!important;
        line-height:1.04!important;
        letter-spacing:-.035em!important;
    }

    html.ud-native-app body:not(.ud-counter-body):not(.terminal-counter-body) h2{
        font-size:clamp(19px,5.2vw,23px)!important;
        line-height:1.12!important;
    }

    html.ud-native-app body:not(.ud-counter-body):not(.terminal-counter-body) h3{
        font-size:17px!important;
        line-height:1.2!important;
    }

    html.ud-native-app body:not(.ud-counter-body):not(.terminal-counter-body) :is(p,li){
        font-size:15px;
        line-height:1.48;
    }

    html.ud-native-app body:not(.ud-counter-body):not(.terminal-counter-body) :is(button,.button,[role=button]){
        font-size:14px;
    }

    html.ud-native-app .ud-app-play .bb-main-inner{
        padding:12px max(10px,var(--ud-native-safe-right)) calc(78px + var(--ud-native-safe-bottom)) max(10px,var(--ud-native-safe-left))!important;
    }

    html.ud-native-app .ud-app-play .bb-mobile-header{
        min-height:54px;
        grid-template-columns:42px minmax(0,1fr) 42px;
        padding-inline:max(8px,var(--ud-native-safe-left));
    }

    html.ud-native-app .ud-app-play .bb-mobile-header :is([data-bb-sidebar-open],.bb-mobile-avatar){
        width:42px;
        height:42px;
    }

    html.ud-native-app .ud-app-play .bb-bottom-nav{
        height:calc(62px + var(--ud-native-safe-bottom));
    }

    html.ud-native-app .ud-app-play .bb-bottom-nav span{font-size:15px}
    html.ud-native-app .ud-app-play .bb-bottom-nav small{font-size:9px}

    html.ud-native-app .ud-app-play .ud-play-workspace-page,
    html.ud-native-app .ud-app-play .ud-comms-page{
        padding-bottom:66px!important;
    }

    html.ud-native-app .ud-app-play .ud-play-workspace-head{
        gap:9px!important;
        min-height:0!important;
        margin-bottom:10px!important;
        padding:0 0 11px!important;
    }

    html.ud-native-app .ud-app-play .ud-play-workspace-head p{
        font-size:14px!important;
        line-height:1.4!important;
    }

    html.ud-native-app .ud-app-play .ud-play-workspace-page :is(
        .ud-start-card,.qp-card,.ud-location-card,.stats-context-shell,.stats-card,.ud-info-card,.ud-comms-panel
    ){
        padding:13px!important;
        border-radius:10px!important;
    }

    html.ud-native-app .ud-app-play :is(.ud-start-actions,.ud-start-overview,.qp-form,.ud-location-grid,.stats-grid,.ud-info-grid){
        gap:9px!important;
    }

    html.ud-native-app .ud-social-page,
    html.ud-native-app .ud-social-detail,
    html.ud-native-app .ud-public-community,
    html.ud-native-app .ud-public-detail{
        width:100%!important;
        padding:6px 4px calc(72px + var(--ud-native-safe-bottom))!important;
        overflow-x:hidden!important;
    }

    html.ud-native-app .ud-social-nav,
    html.ud-native-app .ud-social-nav-portal{
        width:calc(100% + 8px);
        max-width:calc(100% + 8px);
        margin-right:-4px;
        margin-left:-4px;
    }

    html.ud-native-app .ud-social-nav span{font-size:9px!important}

    html.ud-native-app .ud-public-compose,
    html.ud-native-app .ud-social-dialog,
    html.ud-native-app .ud-public-posts,
    html.ud-native-app .ud-public-post,
    html.ud-native-app .ud-public-reply{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
    }

    html.ud-native-app .ud-public-compose{
        grid-template-columns:1fr!important;
        gap:10px!important;
        margin:8px 0!important;
        padding:12px 10px!important;
    }

    html.ud-native-app .ud-public-compose>*,
    html.ud-native-app .ud-public-compose>label:last-of-type,
    html.ud-native-app .ud-public-compose>.ud-public-compose-body{
        grid-column:1!important;
    }

    html.ud-native-app .ud-public-detail-head h1{font-size:26px!important}
    html.ud-native-app .ud-public-detail .ud-public-posts{margin-top:8px}
    html.ud-native-app .ud-public-detail .ud-public-post,
    html.ud-native-app .ud-public-detail .ud-public-post.is-root,
    html.ud-native-app .ud-public-detail .ud-public-comments .ud-public-post{padding:11px 7px!important}
    html.ud-native-app .ud-public-detail .ud-public-post>header>i{width:36px;height:36px;flex-basis:36px}
    html.ud-native-app .ud-public-detail .ud-public-post>header strong{font-size:15px!important}
    html.ud-native-app .ud-public-detail .ud-public-post>header span{font-size:11px!important}
    html.ud-native-app .ud-public-detail .ud-public-post>[data-post-display],
    html.ud-native-app .ud-public-detail .ud-public-post>footer{margin-left:0!important}
    html.ud-native-app .ud-public-detail .ud-public-post-body{font-size:16px!important;line-height:1.5!important}
    html.ud-native-app .ud-public-detail .ud-public-comments{margin-left:0!important;padding-left:0!important;border-left:0!important}

    html.ud-native-app .udp-body .udp-main,
    html.ud-native-app .udl-body .udl-main,
    html.ud-native-app .ude-body .ude-main{
        padding:14px max(10px,var(--ud-native-safe-right)) calc(24px + var(--ud-native-safe-bottom)) max(10px,var(--ud-native-safe-left))!important;
    }

    html.ud-native-app :is(.udp-panel,.udp-card,.udp-form-section,.udl-panel,.udl-card,.ude-panel,.ude-card){
        padding:13px!important;
        border-radius:10px!important;
    }
}

@media(max-width:700px){
    html,
    body:not(.ud-counter-body):not(.terminal-counter-body){
        width:100%;
        max-width:100%;
        overflow-x:hidden!important;
        overscroll-behavior-x:none;
    }

    body:not(.ud-counter-body):not(.terminal-counter-body) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,[contenteditable=true]){
        max-width:100%!important;
        font-size:16px!important;
    }

    body:not(.ud-counter-body):not(.terminal-counter-body) :is(.bb-workspace,.bb-main,.bb-main-inner,.udp-workspace,.udp-main,.udl-main,.ude-workspace,.ude-main,.ud-auth-shell){
        min-width:0!important;
        max-width:100%!important;
    }

    .ud-app-play :is(.bb-page-header,.pagehead,.ops-head,.context-header,.profile-head,.stats-header,.ms-header,.location-command-head) h1,
    .ud-app-play .ud-play-workspace-head h1,
    .udp-body :is(.udp-pagehead,.udp-page-head) h1,
    .udl-body .udl-main h1,
    .ude-body .ude-main h1{
        font-size:clamp(27px,8vw,34px)!important;
        line-height:1.04!important;
    }

    .ud-auth-body .ud-auth-form-panel{
        padding:10px!important;
    }

    .ud-auth-body .ud-auth-card{
        padding:20px 16px!important;
        border-radius:14px!important;
    }

    .ud-auth-body .ud-auth-mobile-logo{
        width:154px!important;
        margin-bottom:20px!important;
    }

    .ud-auth-body .ud-auth-card h2{
        margin:8px 0 10px!important;
        font-size:clamp(25px,7.2vw,29px)!important;
        line-height:1.06!important;
        letter-spacing:-.035em!important;
    }

    .ud-auth-body .ud-auth-intro{
        margin-bottom:20px!important;
        font-size:14px!important;
        line-height:1.48!important;
    }

    .ud-auth-body .ud-auth-form{
        gap:14px!important;
    }
}

/* Web OAuth requires a separate native browser/session handoff in the apps. */
html.ud-native-app [data-ud-web-social-auth]{display:none!important}