/*
 * AxisCult 1.1 responsive layer.
 * Desktop page styles remain the source of truth; these rules only adapt them
 * when the available viewport can no longer support the desktop composition.
 */

@media (max-width:1199px){
    .navbar{
        width:min(1100px, calc(100vw - 32px));
        padding-inline:20px;
    }

    .navbar-menu,
    .navbar-links{
        gap:clamp(15px, 2.2vw, 28px);
    }

    #temple{
        padding-inline:clamp(24px, 4vw, 42px);
    }
}

@media (max-width:899px){
    :root{
        --page-gutter: clamp(14px, 3vw, 24px);
    }

    .navbar{
        top:max(12px, env(safe-area-inset-top));
        width:calc(100% - max(24px, env(safe-area-inset-left) + env(safe-area-inset-right)));
        min-height:60px;
        padding:8px 10px 8px 14px;
        border-radius:16px;
    }

    .navbar-logo img{
        width:44px;
    }

    .navbar-menu-toggle{
        position:relative;
        z-index:2;
        display:grid;
        width:46px;
        height:46px;
        padding:11px;
        place-content:center;
        gap:5px;
        border:1px solid rgba(255,255,255,.12);
        border-radius:12px;
        background:rgba(2,11,22,.48);
        cursor:pointer;
    }

    .navbar-menu-toggle span{
        display:block;
        width:22px;
        height:2px;
        border-radius:999px;
        background:var(--text);
        transition:transform .2s, opacity .2s;
    }

    .navbar--menu-open .navbar-menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .navbar--menu-open .navbar-menu-toggle span:nth-child(2){ opacity:0; }
    .navbar--menu-open .navbar-menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    .navbar-menu{
        position:absolute;
        top:calc(100% + 8px);
        left:0;
        right:0;
        display:flex;
        max-height:calc(100dvh - 94px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y:auto;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        padding:12px 12px max(12px, env(safe-area-inset-bottom));
        border:1px solid rgba(255,255,255,.1);
        border-radius:16px;
        background:rgba(5,20,36,.97);
        box-shadow:0 22px 50px rgba(0,0,0,.5);
        opacity:0;
        transform:translateY(-8px);
        visibility:hidden;
        pointer-events:none;
        transition:opacity .2s, transform .2s, visibility .2s;
    }

    .navbar--menu-open .navbar-menu{
        opacity:1;
        transform:none;
        visibility:visible;
        pointer-events:auto;
    }

    .navbar-links{
        display:grid;
        width:100%;
        gap:3px;
    }

    .navbar-mobile-only,
    .navbar-label-mobile{
        display:initial;
    }

    .navbar-label-desktop{
        display:none;
    }

    .navbar-links a,
    .navbar-login{
        width:100%;
        min-height:44px;
        padding:11px 14px;
        border-radius:10px;
        text-align:left;
    }

    .navbar-links a:hover,
    .navbar-links a:focus-visible{
        background:rgba(255,255,255,.06);
    }

    .navbar-login{
        text-align:center;
    }

    .profile-menu{
        top:calc(max(12px, env(safe-area-inset-top)) + 68px);
        right:max(12px, env(safe-area-inset-right));
        left:max(12px, env(safe-area-inset-left));
        width:auto;
        max-height:calc(100dvh - 100px);
        overflow-y:auto;
    }

    .worship-banner{
        gap:24px;
        padding:34px;
    }

    .worship-banner h2,
    .teachings-header h2{
        font-size:clamp(2rem, 5vw, 2.65rem);
    }

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

    .legal-footer{
        padding:60px max(24px, env(safe-area-inset-left)) max(60px, env(safe-area-inset-bottom));
    }
}

@media (max-width:599px){
    body{
        min-height:100dvh;
    }

    #background[data-background="landing"]{
        background-position:58% center;
    }

    #background[data-background="temple"]{
        background-position:55% center;
    }

    #background[data-background="saints"]{
        background-position:60% center;
    }

    #background[data-background="confessional"]{
        background-position:58% center;
    }

    #home{
        min-height:100svh;
        padding:calc(98px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    }

    .hero{
        gap:clamp(14px, 3.2vh, 21px);
    }

    .hero-logo img{
        width:clamp(132px, 43vw, 190px);
    }

    .hero-title{
        font-size:clamp(2.35rem, 13vw, 3.55rem);
        letter-spacing:clamp(3px, 1.8vw, 7px);
    }

    .hero-subtitle{
        font-size:clamp(1.25rem, 6.2vw, 1.7rem);
    }

    .hero-text{
        font-size:clamp(.94rem, 4vw, 1.05rem);
    }

    .hero-button{
        width:min(100%, 300px);
        min-height:50px;
        margin-top:5px;
        padding:14px 26px;
        font-size:1rem;
    }

    #temple{
        padding:calc(108px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(52px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    .temple-hero{
        margin-bottom:36px;
    }

    .temple-hero h1{
        margin-bottom:10px;
        font-size:clamp(2.6rem, 14vw, 3.7rem);
    }

    .temple-hero p,
    .worship-banner p,
    .teachings-header p{
        font-size:.98rem;
    }

    .worship-banner{
        align-items:flex-start;
        flex-direction:column;
        gap:20px;
        margin-bottom:24px;
        padding:26px 22px;
        border-radius:20px;
    }

    .worship-banner h2,
    .teachings-header h2{
        margin-bottom:10px;
        font-size:clamp(1.65rem, 8vw, 2.15rem);
    }

    .worship-banner p{
        line-height:1.65;
    }

    .worship-arrow{
        font-size:1rem;
    }

    .temple-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .temple-card{
        min-height:44px;
        padding:24px 21px;
        border-radius:18px;
    }

    .temple-card p{
        margin-bottom:20px;
    }

    .sacred-teachings{
        margin-top:58px;
    }

    .teachings-header{
        margin-bottom:26px;
    }

    .sacred-teachings details{
        padding:19px 18px;
    }

    .sacred-teachings summary{
        font-size:1.03rem;
    }

    .final-prayer{
        margin-top:46px;
        padding:34px 18px;
    }

    .final-prayer h3{
        font-size:1.65rem;
    }

    .final-prayer blockquote{
        font-size:clamp(1.35rem, 7vw, 1.8rem);
    }

    .axisdle-page,
    .daily-blessing-page,
    .achievements-page,
    .profile-page,
    .saints-page,
    .confessional-page,
    .privacy-page{
        padding-top:calc(96px + env(safe-area-inset-top));
        padding-right:max(10px, env(safe-area-inset-right));
        padding-bottom:calc(42px + env(safe-area-inset-bottom));
        padding-left:max(10px, env(safe-area-inset-left));
    }

    .axisdle-game-header{
        margin-bottom:20px;
    }

    .axisdle-game-header h1,
    .blessing-content h1,
    .achievements-header h1,
    .profile-header h1,
    .saints-header h1,
    .confessional-content h1,
    .privacy-policy h1{
        font-size:clamp(2rem, 11vw, 3rem);
        overflow-wrap:anywhere;
    }

    .confessional-content h1{
        font-size:clamp(1.9rem, 8.6vw, 2.7rem);
        overflow-wrap:normal;
    }

    .axisdle-board{
        width:min(290px, calc(100vw - 48px));
        gap:6px;
        margin-bottom:20px;
    }

    .axisdle-row{
        gap:6px;
    }

    .axisdle-cell{
        font-size:clamp(1.05rem, 6vw, 1.35rem);
    }

    .axisdle-keyboard{
        width:100%;
        gap:6px;
    }

    .axisdle-keyboard-row{
        gap:3px;
    }

    .axisdle-key{
        min-height:46px;
        border-radius:6px;
        font-size:clamp(.62rem, 2.8vw, .72rem);
    }

    .axisdle-stat-grid{
        gap:6px;
    }

    .axisdle-stat-grid strong{
        font-size:1.08rem;
    }

    .axisdle-stat-grid span{
        font-size:.62rem;
    }

    .blessing-content{
        padding:32px 19px;
    }

    .blessing-record{
        grid-template-columns:1fr;
    }

    .blessing-record div{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        text-align:left;
    }

    .blessing-record dd{
        margin:0;
    }

    .blessing-receive{
        width:100%;
        min-height:48px;
    }

    .achievement-card{
        gap:13px;
        padding:18px 15px;
    }

    .achievement-icon{
        flex-basis:42px;
        height:42px;
    }

    .achievement-copy h2{
        font-size:1.05rem;
        overflow-wrap:anywhere;
    }

    .profile-rank-card,
    .profile-blessing-card,
    .profile-section,
    .profile-achievement-summary{
        padding:20px 16px;
    }

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

    .profile-account-danger button{
        width:100%;
        min-height:44px;
    }

    .saints-podium{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        align-items:stretch;
        min-height:0;
    }

    .saints-podium-place,
    .saints-podium-place--1{
        grid-column:auto;
        min-height:200px;
    }

    .saints-podium-place--1{
        grid-column:1 / -1;
        grid-row:1;
        min-height:240px;
    }

    .saints-podium-place--2{ grid-column:1; }
    .saints-podium-place--3{ grid-column:2; }

    .saints-ranking-row{
        grid-template-columns:38px minmax(0, 1fr) auto;
        min-height:58px;
        padding:10px 7px;
    }

    .saints-ranking-time{
        max-width:82px;
        overflow-wrap:anywhere;
    }

    .confessional-water-glow{
        width:min(520px, 145vw);
    }

    .confessional-content{
        padding:30px 18px;
    }

    .confessional-quota{
        width:auto;
        margin-top:-12px;
        border-radius:14px;
        line-height:1.45;
    }

    .confessional-result blockquote{
        padding:22px 8px;
    }

    .privacy-policy{
        padding:26px 18px;
    }

    .privacy-policy ul{
        padding-left:20px;
    }

    .legal-footer{
        padding:48px max(18px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    }

    .legal-container{
        width:100%;
    }

    .legal-container h3{
        margin-bottom:22px;
        font-size:1.15rem;
    }

    .legal-container p{
        line-height:1.65;
    }

    .legal-footer-link{
        min-height:44px;
        padding:10px 8px;
    }

    .copyright{
        margin-top:32px;
    }

    .login-overlay,
    .username-onboarding,
    .delete-account-overlay{
        align-items:start;
        overflow-y:auto;
        padding:calc(12px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    .login-modal,
    .username-onboarding-card,
    .delete-account-modal{
        max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y:auto;
        margin:auto;
    }

    .login-modal{
        width:100%;
        padding:28px 20px;
    }

    .login-logo{
        width:70px;
        margin-bottom:16px;
    }

    .login-modal p{
        margin-bottom:24px;
    }

    .login-google{
        min-height:48px;
    }

    .login-privacy-content{
        max-height:none;
    }

    .username-onboarding-card,
    .delete-account-modal{
        padding:27px 20px;
    }

    input,
    textarea{
        font-size:16px;
    }
}

.worship-mobile-navigation{
    display:none;
}

@media (max-width:899px){
    .worship-mobile-navigation{
        display:block;
    }
}

@media (max-width:599px){

    #worship{
        height:100dvh;
        min-height:420px;
    }

    .worship-background{
        background-position:55% center;
        transform:scale(1.035);
    }

    .worship-aqua{
        left:55%;
        width:min(760px, 128vw);
        max-width:none;
        max-height:78dvh;
        opacity:.9;
    }

    .worship-glow{
        width:145vw;
        height:145vw;
        filter:blur(38px);
    }

    .worship-stats{
        bottom:calc(20px + env(safe-area-inset-bottom));
        width:calc(100% - 28px - env(safe-area-inset-left) - env(safe-area-inset-right));
        gap:16px;
        padding:14px;
        border:1px solid rgba(255,255,255,.1);
        border-radius:16px;
        background:rgba(2,11,22,.58);
        backdrop-filter:blur(10px);
    }

    .worship-stats strong{
        font-size:clamp(1.35rem, 7vw, 1.8rem);
    }

    .worship-stats span,
    .worship-stats small{
        font-size:.76rem;
    }
}

@media (max-width:390px){
    .axisdle-panel,
    .achievements-panel,
    .profile-panel,
    .saints-panel{
        padding-inline:14px;
    }

    .axisdle-board{
        width:min(270px, calc(100vw - 44px));
    }

    .axisdle-key{
        font-size:.6rem;
    }

    .axisdle-key--wide{
        font-size:.52rem;
    }

    .profile-distribution ol{
        grid-template-columns:repeat(2, 1fr);
    }

    .saints-panel{
        padding-inline:10px;
    }

    .saints-ranking-position,
    .saints-ranking-time{
        font-size:.68rem;
    }
}

@media (max-height:500px) and (orientation:landscape){
    .navbar{
        top:6px;
    }

    .navbar-menu{
        max-height:calc(100dvh - 74px);
    }

    #home{
        padding-top:78px;
        padding-bottom:22px;
    }

    .hero{
        display:grid;
        grid-template-columns:auto minmax(0, 1fr);
        gap:8px 24px;
        text-align:left;
    }

    .hero-logo{
        grid-row:1 / span 4;
    }

    .hero-logo img{
        width:130px;
    }

    .hero-title{
        font-size:2.5rem;
    }

    .hero-subtitle{
        font-size:1.25rem;
    }

    .hero-button{
        width:max-content;
        margin-top:2px;
        padding:11px 24px;
    }

    .worship-aqua{
        left:50%;
        width:min(600px, 72vw);
        max-height:94dvh;
    }

    .worship-stats{
        bottom:10px;
        width:calc(100% - 24px);
        padding:9px 13px;
    }

    .worship-stats strong{
        font-size:1.25rem;
    }
}

@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}