@media(max-width:600px){
    .ra-cr-modal-box{
        padding:24px 18px;
    }

    .chrono-form-grid{
        grid-template-columns:1fr;
    }

    .chrono-modal-header h3{
        font-size:20px;
    }
}

@media(max-width:768px){
    .ra-footer-grid{
        grid-template-columns:1fr;
    }

    .ra-footer-bottom-container{
        flex-direction:column;
        text-align:center;
    }
}

@media(min-width:992px){

    .ra-desktop-menu{
        display:flex !important;
    }

    .ra-navbar-actions{
        display:flex;
    }

    .ra-mobile-toggle,
    .ra-mobile-menu,
    .ra-mobile-auth{
        display:none !important;
    }
}

@media(max-width:991px){

    .ra-desktop-menu,
    .ra-navbar-actions{
        display:none !important;
    }

    .ra-mobile-toggle{
        display:block;
        order:3;
    }

    .ra-mobile-menu{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        z-index:9998;

        width:100%;
        max-width:320px;
        height:100vh;

        padding:80px 24px 24px;

        background:rgba(5,5,8,.95);
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);

        border-left:1px solid rgba(255,255,255,.10);
        box-shadow:-25px 0 60px rgba(0,0,0,.65);

        overflow-y:auto;
    }

    .ra-mobile-menu.hidden{
        display:none !important;
    }

    .ra-mobile-links{
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .ra-mobile-links a,
    .ra-mobile-links button,
    .ra-mobile-dropdown-btn{
        width:100%;
        display:block;

        padding:12px;

        background:none;
        border:none;
        border-radius:6px;

        text-align:left;

        font-family:'Cinzel',serif !important;
        font-size:14px;
        font-weight:700;

        color:#e5e5e5 !important;

        text-transform:uppercase;
        letter-spacing:.08em;
        text-decoration:none !important;

        cursor:pointer;
    }

    .ra-mobile-links a:hover,
    .ra-mobile-links button:hover,
    .ra-mobile-dropdown-btn:hover{
        background:rgba(255,255,255,.05);
        color:#f59e0b !important;
    }

    .ra-mobile-dropdown{
        width:100%;
    }

    .ra-mobile-dropdown-content{
        display:none;
        padding-left:16px;
        margin-top:4px;
    }

    .ra-mobile-dropdown.active .ra-mobile-dropdown-content{
        display:block;
    }

    .ra-mobile-dropdown-content a{
        display:block;
        padding:10px 12px;
        color:#bdbdc7 !important;
        text-decoration:none !important;
    }

    .ra-mobile-dropdown-content a:hover{
        color:#f59e0b !important;
    }

    .ra-mobile-auth{
        display:flex;
        flex-direction:column;
        gap:12px;

        margin-top:32px;
        padding-top:24px;

        border-top:1px solid rgba(255,255,255,.05);
    }

    .ra-mobile-auth .ra-btn-outline,
    .ra-mobile-auth .ra-btn-gold{
        width:100%;
        text-align:center;
        padding:12px 16px;
    }
}

@media (max-width: 767px){

    main{
        padding-top:110px !important;
        padding-left:14px !important;
        padding-right:14px !important;
        padding-bottom:60px !important;
    }

    main > div:first-of-type{
        gap:14px !important;
        margin-bottom:18px !important;
    }

    main h1{
        font-size:24px !important;
        line-height:1.15 !important;
    }

    main h1 span{
        display:block !important;
        margin-top:5px !important;
        font-size:11px !important;
    }

    #top-bar-credits{
        font-size:12px !important;
    }

    .nav-tab-button{
        width:100% !important;
        justify-content:center !important;
        padding:10px 12px !important;
        font-size:11px !important;
    }

    .nav-tab-button span{
        display:inline-block !important;
    }

    .bg-\[\#0a0a0f\].border.border-white\/10.rounded-xl.p-2.mb-8.shadow-2xl > div{
        display:grid !important;
        grid-template-columns:1fr !important;
    }

    .bg-\[\#0a0a0f\].border.border-white\/10.rounded-xl.p-2.mb-8.shadow-2xl .flex.flex-wrap{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        overflow:visible !important;
    }

    .bg-\[\#0a0a0f\].border.border-white\/10.rounded-xl.p-2.mb-8.shadow-2xl button[onclick*="Store"]{
        width:100% !important;
        justify-content:center !important;
    }

    .lg\:col-span-4,
    .lg\:col-span-8{
        width:100% !important;
    }

    #characters-container-list > div{
        padding:14px !important;
        gap:14px !important;
    }

    #characters-container-list > div > div:first-child{
        width:100% !important;
        align-items:center !important;
    }

    #characters-container-list > div > div:last-child{
        width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;
    }

    #characters-container-list .flex.items-center.gap-2.font-mono{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        width:100% !important;
        gap:8px !important;
    }

    #characters-container-list .flex.items-center.gap-2.font-mono span:last-child{
        grid-column:1 / -1 !important;
        text-align:center !important;
    }

    #characters-container-list .flex.items-center.gap-1{
        justify-content:center !important;
        width:100% !important;
    }

    #storage-search-input{
        width:100% !important;
        min-width:0 !important;
    }

    table{
        min-width:760px !important;
    }

    #prefs-modal,
    #confirm-reset-look-modal,
    #confirm-teleport-modal{
        padding:16px !important;
    }

    #prefs-modal > div,
    #confirm-reset-look-modal > div,
    #confirm-teleport-modal > div{
        width:100% !important;
        max-width:100% !important;
    }
}

@media (max-width: 420px){
    .bg-\[\#0a0a0f\].border.border-white\/10.rounded-xl.p-2.mb-8.shadow-2xl .flex.flex-wrap{
        grid-template-columns:1fr !important;
    }

    main h1{
        font-size:21px !important;
    }
}

@media (max-width:639px){

    #paperdoll-anchor-container{
        display:none !important;
    }

    #paperdoll-mobile-grid{
        display:grid !important;
    }
}

@media (min-width:640px){

    #paperdoll-anchor-container{
        display:block !important;
    }

    #paperdoll-mobile-grid{
        display:none !important;
    }
}

@media (max-width:767px){

    .chrono-filter-card{
        padding:18px;
    }

    .chrono-filter-form{
        display:grid;
        grid-template-columns:1fr;
    }

    .chrono-field{
        min-width:0;
    }

    .chrono-filter-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .chrono-btn{
        width:100%;
    }

    .chrono-ranking-page{
        padding:120px 14px 48px;
    }

    .chrono-ranking-head{
        padding:20px;
        border-radius:18px;
    }

    .chrono-ranking-title{
        font-size:21px;
    }

    .chrono-table-wrap{
        display:none;
    }

    .chrono-mobile-list{
        display:grid;
    }

    .chrono-card-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 640px) {
  .ci-wrap,
  .mw {
    margin: 0 !important;
    padding: 0 0 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .ci-wrap main,
  .mw main {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 24px !important;
  }

  .ci-wrap h1,
  .mw h1 {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    letter-spacing: .04em !important;
    word-break: break-word !important;
  }

  .ci-wrap h1 span,
  .mw h1 span {
    display: block !important;
    margin-top: 4px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  .ci-wrap section,
  .mw section {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .ci-wrap .text-left.md\:text-right {
    text-align: left !important;
  }

  #ci-search,
  #mw-search {
    width: 100% !important;
    font-size: 13px !important;
    min-height: 46px !important;
    padding-left: 40px !important;
    padding-right: 36px !important;
  }

  #ci-search-form button[type="submit"],
  #mw-form button[type="submit"] {
    width: 100% !important;
    min-height: 44px !important;
  }

  #ci-type-chips,
  #ci-loc-chips,
  #mw-form .scrollbar-none {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 7px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #ci-type-chips button,
  #ci-loc-chips button,
  #mw-form .scrollbar-none button,
  #mw-form .scrollbar-none a {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  #ci-adv-panel,
  #mw-adv {
    padding: 12px !important;
  }

  #ci-adv-panel .grid,
  #mw-adv .grid {
    grid-template-columns: 1fr !important;
  }

  #ci-adv-panel .flex.justify-end,
  #mw-adv .flex.justify-end {
    justify-content: stretch !important;
    flex-direction: column !important;
  }

  #ci-adv-panel .flex.justify-end button,
  #mw-adv .flex.justify-end button {
    width: 100% !important;
  }

  #ci-col-drop,
  #mw-col-drop {
    right: auto !important;
    left: 0 !important;
    width: min(88vw, 14rem) !important;
  }

  #ci-table-wrap,
  #mw-table-wrap {
    border-radius: 14px !important;
    max-width: 100% !important;
  }

  #ci-table-wrap table,
  #mw-table-wrap table {
    min-width: 760px !important;
  }

  #ci-grid-wrap,
  #mw-grid-wrap {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #ci-recent-list {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #ci-recent-list button {
    flex: 0 0 auto !important;
    max-width: 220px !important;
  }

  #ci-modal,
  #mw-modal {
    align-items: flex-start !important;
    padding: 72px 10px 10px !important;
  }

  #ci-modal-box,
  #mw-modal-box {
    width: 100% !important;
    max-width: none !important;
    padding: 16px !important;
    border-radius: 16px !important;
    max-height: calc(100vh - 86px) !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #ci-modal-content,
  #mw-modal-content {
    font-size: 12px !important;
  }

  #ci-modal-content h2,
  #mw-modal-content h2 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }

  #ci-modal-content .grid-cols-2.md\:grid-cols-4,
  #mw-modal-content .grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #ci-modal-content .grid-cols-6,
  #mw-modal-content .grid-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #ci-modal-content table,
  #mw-modal-content table {
    min-width: 500px !important;
  }

  #ci-modal-content .overflow-x-auto,
  #mw-modal-content .overflow-x-auto {
    -webkit-overflow-scrolling: touch !important;
  }

  .ci-pager-sort,
  .mw-pager {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ci-pager-sort .pages,
  .mw-pager .pages {
    justify-content: center !important;
  }
}

@media (max-width: 380px) {
  .ci-wrap main,
  .mw main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #ci-table-wrap table,
  #mw-table-wrap table {
    min-width: 700px !important;
  }

  #ci-modal-content .grid-cols-2.md\:grid-cols-4,
  #mw-modal-content .grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}


@media (max-width: 640px) {
  .chrono-serverinfo main {
    padding-top: 6.5rem !important;
    padding-bottom: 4rem !important;
  }

  .chrono-serverinfo .rounded-full {
    border-radius: 1rem;
  }

  .chrono-serverinfo table {
    min-width: 560px;
  }
}