@media (max-width: 1100px){
    .hero-grid,
    .grid-3,
    .grid-2{
        grid-template-columns:1fr;
    }
}

@media (max-width: 1235px){
    .navbar{
        position:relative;
        min-height:auto;
        padding:16px 0;
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
        gap:14px;
    }

    .brand{
        min-width:0;
        position:relative;
        z-index:1001;
    }

    .menu-toggle{
        display:flex;
        position:relative;
        z-index:1001;
    }

    .nav-overlay{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(8, 6, 6, 0.48);
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .25s ease, visibility .25s ease;
        z-index:1000;
    }

    .nav-overlay.active{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .nav-panel{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        margin-top:12px;
        display:none;
        width:100%;
        padding:14px;
        border-radius:18px;
        background:linear-gradient(180deg, rgba(30,22,19,.98), rgba(21,15,13,.98));
        border:1px solid rgba(198,154,87,.12);
        box-shadow:var(--shadow);
        flex-direction:column;
        align-items:stretch;
        z-index:1003;
        overflow:visible;
    }

    .navbar.menu-open .nav-panel{
        display:flex;
    }

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

    .nav-actions{
        order:-1;
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:10px;
        margin-top:0;
        margin-bottom:12px;
    }

    .nav-links{
        order:2;
        width:100%;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
    }

    .nav-link{
        width:100%;
        padding:13px 14px;
        border-radius:12px;
    }

    .nav-actions form,
    .nav-account-slot,
    .nav-login-button,
    .nav-account-loading,
    .nav-account-unavailable,
    .lang-dropdown,
    .account-dropdown{
        width:100%;
        min-width:0;
        flex-basis:auto;
    }

    .lang-dropdown{
        order:-2;
        position:relative;
    }

    .account-dropdown{
        order:2;
        position:relative;
    }

    .lang-trigger,
    .account-trigger{
        width:100%;
        justify-content:space-between;
    }

    .lang-menu,
    .account-menu{
        position:absolute;
        top:calc(100% + 8px);
        left:0;
        right:0;
        margin-top:0;
        min-width:100%;
        width:100%;
        max-width:none;
        box-sizing:border-box;
        z-index:1015;
        max-height:min(320px, 50dvh);
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
    }

    .lang-option{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
    }

    .lang-option-main{
        display:flex;
        align-items:center;
        gap:10px;
        width:100%;
    }

    .lang-name{
        margin-left:30px;
        text-align:left;
        white-space:normal;
        line-height:1.2;
        font-size:12px;
    }

    .navbar.menu-open .menu-toggle span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    .navbar.menu-open .menu-toggle span:nth-child(2){
        opacity:0;
    }

    .navbar.menu-open .menu-toggle span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    .account-stats-grid,
    .account-characters-grid,
    .account-panels-grid,
    .shop-premium-steps,
    .shop-premium-benefits-featured ul,
    .shop-premium-intro-grid{
        grid-template-columns:1fr;
    }

    .presentation-topbar .presentation-navbar{
        min-height:72px;
        padding:8px 12px;
        display:flex;
        justify-content:space-between;
        gap:10px;
    }

    .presentation-topbar .presentation-mobile-categories{
        flex:1 1 auto;
        max-width:none;
        min-height:38px;
    }

    .presentation-topbar .presentation-mobile-link{
        min-width:112px;
        max-width:170px;
        padding:8px 12px;
        font-size:12px;
    }

    .presentation-topbar .menu-toggle{
        margin-left:auto;
        flex:0 0 auto;
    }
}

@media (max-width: 820px){
    .hero-copy,
    .hero-side{
        padding:22px;
    }

    .hero-side{
        height:auto;
        min-height:auto;
        max-height:520px;
    }

    .hero-stats{
        grid-template-columns:1fr;
    }

    .download-card .card-body{
        padding:20px;
    }

    .section-head h2{
        font-size:21px;
    }

    .btn-download{
        width:100%;
        min-width:unset;
    }

    .news-comparison{
        padding:16px 16px 0;
    }

    .comparison-handle{
        width:48px;
        height:48px;
    }

    .event-widget{
        padding:16px;
    }

    .event-calendar-dropdown{
        top:72px;
        left:16px;
        right:16px;
    }

    .event-item{
        grid-template-columns:52px 1fr;
        gap:12px;
    }

    .event-item-icon{
        width:52px;
        height:52px;
        border-radius:100%;
    }

    .account-card-body{
        padding:20px;
    }

    .account-overview,
    .account-section-head{
        flex-direction:column;
        align-items:stretch;
    }

    .account-badges,
    .account-summary-pills{
        justify-content:flex-start;
    }

    .shop-character-grid{
        grid-template-columns:1fr;
    }

    .shop-premium-package-summary{
        align-items:stretch;
        flex-direction:column;
    }

    .shop-premium-flow-actions .btn,
    .shop-premium-package-summary .btn{
        width:100%;
    }

    .account-tab-nav{
        display:grid;
        grid-template-columns:1fr;
    }

    .account-tab-link{
        width:100%;
    }

    .account-purchase-table{
        min-width:0;
    }

    .account-purchase-table thead{
        display:none;
    }

    .account-purchase-table,
    .account-purchase-table tbody,
    .account-purchase-table tr,
    .account-purchase-table td{
        display:block;
        width:100%;
    }

    .account-purchase-table tr{
        padding:14px 16px;
        border-bottom:1px solid rgba(255,255,255,.06);
    }

    .account-purchase-table tr:last-child{
        border-bottom:0;
    }

    .account-purchase-table td{
        display:flex;
        justify-content:space-between;
        gap:16px;
        padding:8px 0;
        border-bottom:0;
        text-align:right;
    }

    .account-purchase-table td::before{
        content:attr(data-label);
        color:var(--muted);
        font-size:12px;
        font-weight:800;
        text-align:left;
        text-transform:uppercase;
    }
}

@media (max-width: 560px){
    .hero-side{
        height:auto;
        min-height:auto;
        max-height:500px;
    }

    .news-comparison-toolbar{
        gap:10px;
    }

    .comparison-nav{
        width:40px;
        height:40px;
    }

    .comparison-nav--overlay{
        top:12px;
        width:36px;
        height:36px;
    }

    .comparison-nav--overlay-left{
        left:12px;
    }

    .comparison-nav--overlay-right{
        right:12px;
    }

    .event-widget{
        padding:14px;
    }

    .event-toolbar{
        grid-template-columns:40px 1fr 40px;
        gap:10px;
    }

    .event-day-nav,
    .event-date-button{
        min-height:40px;
    }

    .event-date-label{
        font-size:14px;
    }

    .event-calendar-dropdown{
        top:66px;
        left:14px;
        right:14px;
        padding:14px;
    }

    .event-calendar-weekdays,
    .event-calendar-grid{
        gap:6px;
    }

    .event-calendar-day{
        min-height:36px;
        border-radius:12px;
        font-size:13px;
    }

    .event-item{
        padding:12px;
    }

    .event-item h4{
        font-size:16px;
    }

    .event-item-line{
        font-size:13px;
    }

    .account-profile{
        align-items:flex-start;
    }

    .account-avatar{
        width:60px;
        height:60px;
        border-radius:18px;
        font-size:24px;
    }

    .account-profile-copy h2{
        font-size:24px;
    }

    .account-stat-card,
    .character-card{
        padding:18px;
    }

    .account-stat-value{
        font-size:26px;
    }

    .character-card-top,
    .character-stats-grid{
        grid-template-columns:1fr;
    }

    .character-card-top{
        display:grid;
    }

    .auth-inline-actions{
        grid-template-columns:1fr;
        gap:10px;
    }
}

@media (max-width: 820px){
    .login-inline-row{
        grid-template-columns:1fr;
    }
}