@media (min-width: 577px) and (max-width: 768px) {

    html {
        font-size: 16px;
    }

    .page main {
        padding-top: 1rem;
    }

    div.mobile-header-actions nav {
        gap: 12px;
    }

    .hb-button {
        box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    }


    /* -----------------CHARACTER PAGE -----------------577------768----*/
    header div.min-w-0 p:first-child {
        line-height: 1.6;
        font-size: 16px;
        font-weight: 800;
    }

    header div.flex.flex-col {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    header div.flex.flex-col>a:first-child {
        flex: 1;
        min-width: min-content;
    }

    header div.flex.flex-col>a:first-child div.relative {
        scale: 1.1;
    }

    header div.flex.flex-col div.min-w-0 {
        font-weight: 600;
        text-align: center;
        flex: 1;
    }

    header div.flex.flex-col div.min-w-0 p.text-base {
        display: none;
        /* font-size: 0.6rem; */
    }

    header .header-hero-inline .stat-pill {
        display: flex;
        flex-direction: column;
        gap: 2px;
        justify-content: center;
        align-items: center;
    }

    header .header-hero-inline .stat-pill>span:first-child {
        font-size: 0.7rem;
    }

    /* Hero card section*/
    .bulga-hero-card__meta #hero-territory {
        font-size: 0.6rem;
    }

    div.bulga-hero-card__stats {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }


    div.bulga-hero-card__stats>* {
        max-width: 100%;
    }

    /* Inventory section */
    .inventory-card__media {
        padding: 5px;
    }

    .inventory-section div.inventory-group__items>* {
        max-width: 100%;

    }

    .inventory-section div.inventory-group__items {
        font-size: 0.8rem;
    }

    .inventory-section div.inventory-group__items * {
        font-size: inherit;
        line-height: 1.4;
    }

    .inventory-section div.inventory-group__items span,
    .inventory-section div.inventory-group__items p,
    .inventory-section div.inventory-group__items button {
        font-size: 0.7rem;
    }

    .inventory-section div.inventory-group__items {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        gap: 10px;
    }


    .inventory-section .inventory-group__items .inventory-card {
        display: flex;
        flex-direction: row;
        height: min-content;
        flex: 1;
        width: 100%;
        gap: 10px;
        position: relative;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__media {
        width: 70px;
        height: 70px;
        /* align-self: center; */
    }

    .inventory-section div.inventory-group__items .inventory-card__media img {
        padding: 5px;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body {
        flex-wrap: wrap;
        align-items: center;
        flex: 1;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__rarity {
        flex: 1;
        width: 100%;
        flex-basis: 100%;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__name {
        flex: 1;
        margin-bottom: 0;
        width: 100%;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__detail {
        position: absolute;
        left: 15px;
        bottom: 0;
        max-width: 65px;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__actions {
        width: 100%;
        margin-top: 10px;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__actions .hb-button {
        flex: 1;
        width: 0;
    }


    /* Refferal section */

    .bulga-section--referral .bulga-panel-header__copy,
    .bulga-section--referral p.mt-2,
    .bulga-section--referral ul.mt-3,
    .bulga-section--referral p.mt-3 {
        line-height: 1.7;
    }

    .bulga-section--referral .bulga-section__body .bulga-section__column:nth-child(2) .hb-button {
        font-size: 0.6rem;
    }

    .bulga-section--referral .bulga-section__body .bulga-section__column:nth-child(2) .stat-pill span {
        font-size: 0.7rem;
    }

    #referral-copy-button {
        width: 130px;
        height: 34px;
    }

    .bulga-section--referral-changelog .bulga-section__body,
    .bulga-section--referral-changelog .bulga-section__body p {
        line-height: 1.6rem;
    }

    .bulga-section--referral-changelog .bulga-section__body ul {
        margin-bottom: 10px;
    }

    /* --------------BATTLE PAGE--577--768----------------- */


    .bulga-section--battle {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 14px;

    }

    .bulga-section--battle .bulga-section__body {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin-top: 2px;
    }

    .bulga-section--battle .bulga-section__body .bulga-card {
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 10px;
        flex-wrap: wrap;
        gap: 7px;
        justify-content: center;
        align-items: center;
    }

    .bulga-section--battle .bulga-section__body .bulga-card span.badge {
        display: flex;
        flex-direction: column;
        font-size: 0.8rem;
        gap: 0;

    }

    .bulga-section--battle .bulga-section__body .bulga-card div.flex.flex-col.gap-4 {
        width: 100%;
        padding: 0 5px;
    }

    .bulga-section--battle .bulga-section__body .bulga-card div.flex.flex-col.gap-4:nth-child(1) {
        text-align: center;
    }


    #world-boss-status {
        font-size: 0.9rem;
    }

    .bulga-section--battle div.mt-4.grid.gap-6 {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
    }

    .bulga-section--battle div.mt-4.grid.gap-6 div.grid.gap-3 {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Leaderboard */
    #world-boss-leaderboard-body tr:nth-child(1),
    #world-boss-leaderboard-body tr:nth-child(2),
    #world-boss-leaderboard-body tr:nth-child(3) {
        font-weight: 900;

    }

    #world-boss-leaderboard-body tr:nth-child(3) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Zones */

    .bulga-section__body .bulga-card .battle-actions {
        flex-wrap: nowrap;
        width: 100%;
        flex: 1;
        justify-content: space-between;
        gap: 25px;
        margin: 5px 0;
    }

    #battle-potion-button {

        padding: 10px 15px;
        flex: 0.5;
        white-space: nowrap;
        width: 0;
    }

    #battle-potion-button span {
        font-size: 0.8rem;
    }

    #battle-potion-button .battle-potion__icon {
        display: none;
    }

    #heal-button {
        font-size: 0.8rem;
        padding: 10px 15px;
        flex: 0.5;
        width: 0;
    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 {
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        max-width: max-content;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        align-items: stretch;
    }

    /* Zone cards */
    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2>button {
        display: flex;
        justify-content: center;
        align-items: center;
        /* width: 140px; */
        flex: 1 1 calc(48% - 10px);
        overflow: hidden;
        text-align: center;
        flex-direction: column;
        gap: 7px;

    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 button:last-of-type {

        height: auto;

    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 button:last-of-type img {
        height: 300px;
        object-position: top;
        margin: 0 auto;
        padding: 0;
    }

    button.hb-card.bulga-card.battle-territory span:nth-of-type(1) {
        font-size: 0.8rem;
    }

    button.hb-card.bulga-card.battle-territory span:nth-of-type(2) {
        font-size: 1.1rem;
        /* display: none; */
    }

    .mobile-core-actions__bar>a {
        font-size: 0.7rem;
    }

    .mobile-core-actions__bar span.mobile-core-actions__label {
        font-size: 0.7rem;
    }

    /* footer */
    .brand-footer>p {
        text-align: center;
    }

    .brand-footer__links {
        justify-content: center;
    }

    /*-------RANKING PAGE-------577---768*/
    main:has(.ranking-table) {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }

    .ranking-table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        min-width: 0;
        margin-left: 0;
        margin-right: auto;
        width: auto;
    }

    .ranking-table th,
    .ranking-table td {
        width: 33.33%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 5px;
        font-size: 14px;
        text-align: left;
        white-space: normal;
        /* padding: 12px 20px; */
    }

    .ranking-hero__image {
        height: clamp(200px, 100vh, 300px);
        width: clamp(280px, 100vw, 320px);
        object-fit: cover;
    }
}


@media (min-width: 461px) and (max-width: 578px) {

    html {
        font-size: 16px;
    }

    .page main {
        padding-top: 1rem;
    }

    div.mobile-header-actions nav {
        gap: 12px;
    }

    .hb-button {
        box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    }


    /* ----------CHARACTER PAGE----------461-----576------------ */
    header div.min-w-0 p:first-child {
        line-height: 1.6;
        font-size: 16px;
        font-weight: 800;
    }

    header div.flex.flex-col {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    header div.flex.flex-col>a:first-child {
        flex: 1;
        min-width: min-content;
    }

    header div.flex.flex-col>a:first-child div.relative {
        scale: 1.1;
    }

    header div.flex.flex-col div.min-w-0 {
        font-weight: 600;
        text-align: center;
        flex: 1;
    }

    header div.flex.flex-col div.min-w-0 p.text-base {
        display: none;
        /* font-size: 0.6rem; */
    }

    header .header-hero-inline .stat-pill {
        display: flex;
        flex-direction: column;
        gap: 2px;
        justify-content: center;
        align-items: center;
    }

    header .header-hero-inline .stat-pill>span:first-child {
        font-size: 0.7rem;
    }

    /* Hero card section*/
    .bulga-hero-card__meta #hero-territory {
        font-size: 0.6rem;
    }

    div.bulga-hero-card__stats {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }


    div.bulga-hero-card__stats>* {
        max-width: 100%;
    }

    /* Inventory section */
    .inventory-card__media {
        padding: 5px;
    }

    .inventory-section div.inventory-group__items>* {
        max-width: 100%;

    }

    .inventory-section div.inventory-group__items {
        font-size: 0.8rem;
    }

    .inventory-section div.inventory-group__items * {
        font-size: inherit;
        line-height: 1.4;
    }

    .inventory-section div.inventory-group__items span,
    .inventory-section div.inventory-group__items p,
    .inventory-section div.inventory-group__items button {
        font-size: 0.7rem;
    }

    .inventory-section div.inventory-group__items {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        gap: 10px;
    }


    .inventory-section .inventory-group__items .inventory-card {
        display: flex;
        flex-direction: row;
        height: min-content;
        flex: 1;
        width: 100%;
        gap: 10px;
        position: relative;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__media {
        width: 70px;
        height: 70px;
        /* align-self: center; */
    }

    .inventory-section div.inventory-group__items .inventory-card__media img {
        padding: 5px;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body {
        flex-wrap: wrap;
        align-items: center;
        flex: 1;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__rarity {
        flex: 1;
        width: 100%;
        flex-basis: 100%;
        padding-bottom: 0;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__name {
        flex: 1;
        margin-bottom: 0;
        width: 100%;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__detail {
        position: absolute;
        left: 15px;
        bottom: 0;
        max-width: 65px;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__actions {
        width: 100%;
        margin-top: 10px;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__actions .hb-button {
        flex: 1;
        width: 0;
    }


    /* Refferal section */

    .bulga-section--referral .bulga-panel-header__copy,
    .bulga-section--referral p.mt-2,
    .bulga-section--referral ul.mt-3,
    .bulga-section--referral p.mt-3 {
        line-height: 1.7;
    }

    .bulga-section--referral .bulga-section__body .bulga-section__column:nth-child(2) .hb-button {
        font-size: 0.6rem;
    }

    .bulga-section--referral .bulga-section__body .bulga-section__column:nth-child(2) .stat-pill span {
        font-size: 0.7rem;
    }

    #referral-copy-button {
        width: 130px;
        height: 34px;
    }

    .bulga-section--referral-changelog .bulga-section__body,
    .bulga-section--referral-changelog .bulga-section__body p {
        line-height: 1.6rem;
    }

    .bulga-section--referral-changelog .bulga-section__body ul {
        margin-bottom: 10px;
    }

    /* --------------BATTLE PAGE--461--576----------------- */


    .bulga-section--battle {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 14px;

    }

    .bulga-section--battle .bulga-section__body {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin-top: 2px;
    }

    .bulga-section--battle .bulga-section__body .bulga-card {
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 10px;
        flex-wrap: wrap;
        gap: 7px;
        justify-content: center;
        align-items: center;
    }

    .bulga-section--battle .bulga-section__body .bulga-card span.badge {
        display: flex;
        flex-direction: column;
        font-size: 0.8rem;
        gap: 0;

    }

    .bulga-section--battle .bulga-section__body .bulga-card div.flex.flex-col.gap-4 {
        width: 100%;
        padding: 0 5px;
    }

    .bulga-section--battle .bulga-section__body .bulga-card div.flex.flex-col.gap-4:nth-child(1) {
        text-align: center;
    }


    #world-boss-status {
        font-size: 0.9rem;
    }

    .bulga-section--battle div.mt-4.grid.gap-6 {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
    }

    .bulga-section--battle div.mt-4.grid.gap-6 div.grid.gap-3 {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Leaderboard */
    #world-boss-leaderboard-body tr:nth-child(1),
    #world-boss-leaderboard-body tr:nth-child(2),
    #world-boss-leaderboard-body tr:nth-child(3) {
        font-weight: 900;

    }

    #world-boss-leaderboard-body tr:nth-child(3) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Zones */

    .bulga-section__body .bulga-card .battle-actions {
        flex-wrap: nowrap;
        width: 100%;
        flex: 1;
        justify-content: space-between;
        gap: 25px;
        margin: 5px 0;
    }

    #battle-potion-button {

        padding: 10px 15px;
        flex: 0.5;
        white-space: nowrap;
        width: 0;
    }

    #battle-potion-button span {
        font-size: 0.8rem;
    }

    #battle-potion-button .battle-potion__icon {
        display: none;
    }

    #heal-button {
        font-size: 0.8rem;
        padding: 10px 15px;
        flex: 0.5;
        width: 0;
    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 {
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        max-width: max-content;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        align-items: stretch;
    }

    /* Zone cards */
    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2>button {
        display: flex;
        justify-content: center;
        align-items: center;
        /* width: 140px; */
        flex: 1 1 calc(48% - 10px);
        overflow: hidden;
        text-align: center;
        flex-direction: column;
        gap: 7px;

    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 button:last-of-type {

        height: auto;

    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 button:not(:last-child) img {
        width: clamp(50px, 100vw, 148px);
        height: 150px;
    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 button:last-of-type img {
        height: 320px;
        width: clamp(50px, 100vw, 280px);
        object-position: 0% 9%;
        margin: 0 auto;
        padding: 0;
    }

    button.hb-card.bulga-card.battle-territory span:nth-of-type(1) {
        font-size: 0.8rem;
    }

    button.hb-card.bulga-card.battle-territory span:nth-of-type(2) {
        font-size: 1.1rem;
        /* display: none; */
    }

    .mobile-core-actions__bar>a {
        font-size: 0.7rem;
    }

    .mobile-core-actions__bar span.mobile-core-actions__label {
        font-size: 0.7rem;
    }

    /* footer */
    .brand-footer>p {
        text-align: center;
    }

    .brand-footer__links {
        justify-content: center;
    }

    /*-------RANKING PAGE-------461---576*/
    main:has(.ranking-table) {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }

    .ranking-table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        min-width: 0;
        margin-left: 0;
        margin-right: auto;
        width: auto;
    }

    .ranking-table th,
    .ranking-table td {
        width: 33.33%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 5px;
        font-size: 14px;
        text-align: left;
        white-space: normal;
        /* padding: 12px 20px; */
    }

    .ranking-hero__image {
        height: clamp(200px, 100vh, 300px);
        width: clamp(280px, 100vw, 320px);
    }
}





@media (min-width: 361px) and (max-width: 462px) {

    /* Global */
    html {
        font-size: 12px;
    }

    .page main {
        padding-top: 1rem;
    }

    div.mobile-header-actions nav {
        gap: 12px;
    }

    .hb-button {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }


    /*------------CHARACTER PAGE--------361----462 */
    header div.min-w-0 p:first-child {
        line-height: 1.6;
        font-size: 16px;
        font-weight: 800;
    }

    header div.flex.flex-col {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    header div.flex.flex-col>a:first-child {
        flex: 1;
        min-width: min-content;
    }

    header div.flex.flex-col>a:first-child div.relative {
        scale: 1.1;
    }

    header div.flex.flex-col div.min-w-0 {
        font-weight: 600;
        text-align: center;
        flex: 1;
    }

    header div.flex.flex-col div.min-w-0 p.text-base {
        display: none;
        /* font-size: 0.6rem; */
    }

    header .header-hero-inline .stat-pill {
        display: flex;
        flex-direction: column;
        gap: 2px;
        justify-content: center;
        align-items: center;
    }

    header .header-hero-inline .stat-pill>span:first-child {
        font-size: 0.7rem;
    }

    /* Hero card section*/
    .bulga-hero-card__meta #hero-territory {
        font-size: 0.6rem;
    }

    div.bulga-hero-card__stats {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }


    div.bulga-hero-card__stats>* {
        max-width: 100%;
    }

    /* Inventory section */
    .inventory-card__media {
        padding: 5px;
    }

    .inventory-section div.inventory-group__items>* {
        max-width: 100%;

    }

    .inventory-section div.inventory-group__items {
        font-size: 0.8rem;
    }

    .inventory-section div.inventory-group__items * {
        font-size: inherit;
        line-height: 1.4;
    }

    .inventory-section div.inventory-group__items span,
    .inventory-section div.inventory-group__items p,
    .inventory-section div.inventory-group__items button {
        font-size: 0.7rem;
    }

    .inventory-section div.inventory-group__items {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        gap: 10px;
    }


    .inventory-section .inventory-group__items .inventory-card {
        display: flex;
        flex-direction: row;
        height: min-content;
        flex: 1;
        width: 100%;
        gap: 10px;
        position: relative;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__media {
        width: 70px;
        height: 70px;
        /* align-self: center; */
    }

    .inventory-section div.inventory-group__items .inventory-card__media img {
        padding: 5px;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body {
        flex-wrap: wrap;
        align-items: center;
        flex: 1;
    }

    .inventory-card .inventory-card__body p,
    .inventory-card .inventory-card__body span,
    .inventory-card .inventory-card__body h4 {
        font-size: 0.8rem;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__rarity {
        flex: 1;
        width: 100%;
        flex-basis: 100%;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__name {
        flex: 1;
        margin-bottom: 0;
        width: 100%;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__detail {
        position: absolute;
        left: 15px;
        bottom: 0;
        max-width: 65px;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__actions {
        width: 100%;
        margin-top: 10px;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__actions .hb-button {
        flex: 1;
        width: 0;
    }


    /* Refferal section */

    .bulga-section--referral .bulga-panel-header__copy,
    .bulga-section--referral p.mt-2,
    .bulga-section--referral ul.mt-3,
    .bulga-section--referral p.mt-3 {
        line-height: 1.7;
    }

    .bulga-section--referral .bulga-section__body .bulga-section__column:nth-child(2) .hb-button {
        font-size: 0.6rem;
    }

    .bulga-section--referral .bulga-section__body .bulga-section__column:nth-child(2) .stat-pill span {
        font-size: 0.7rem;
    }

    #referral-copy-button {
        width: 130px;
        height: 34px;
    }

    .bulga-section--referral-changelog .bulga-section__body,
    .bulga-section--referral-changelog .bulga-section__body p {
        line-height: 1.6rem;
    }

    .bulga-section--referral-changelog .bulga-section__body ul {
        margin-bottom: 10px;
    }

    /* --------------BATTLE PAGE----361---460--------------- */

    .bulga-section--battle {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 14px;

    }

    .bulga-section--battle .bulga-section__body {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin-top: 2px;
    }

    .bulga-section--battle .bulga-section__body .bulga-card {
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 10px;
        flex-wrap: wrap;
        gap: 7px;
        justify-content: center;
        align-items: center;
    }

    .bulga-section--battle .bulga-section__body .bulga-card span.badge {
        display: flex;
        flex-direction: column;
        font-size: 0.8rem;
        gap: 0;

    }

    .bulga-section--battle .bulga-section__body .bulga-card div.flex.flex-col.gap-4 {
        width: 100%;
        padding: 0 5px;
    }

    .bulga-section--battle .bulga-section__body .bulga-card div.flex.flex-col.gap-4:nth-child(1) {
        text-align: center;
    }


    #world-boss-status {
        font-size: 0.9rem;
    }

    .bulga-section--battle div.mt-4.grid.gap-6 {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
    }

    .bulga-section--battle div.mt-4.grid.gap-6 div.grid.gap-3 {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Leaderboard */
    #world-boss-leaderboard-body tr:nth-child(1),
    #world-boss-leaderboard-body tr:nth-child(2),
    #world-boss-leaderboard-body tr:nth-child(3) {
        font-weight: 900;

    }

    #world-boss-leaderboard-body tr:nth-child(3) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Zones */

    .bulga-section__body .bulga-card .battle-actions {
        flex-wrap: nowrap;
        width: 100%;
        flex: 1;
        justify-content: space-between;
        gap: 25px;
        margin: 5px 0;
    }

    #battle-potion-button {

        padding: 10px 15px;
        flex: 0.5;
        white-space: nowrap;
        width: 0;
    }

    #battle-potion-button span {
        font-size: 0.8rem;
    }

    #battle-potion-button .battle-potion__icon {
        display: none;
    }

    #heal-button {
        font-size: 0.8rem;
        padding: 10px 15px;
        flex: 0.5;
        width: 0;
    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 {
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        max-width: max-content;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        align-items: stretch;
    }

    /* Zone cards */
    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2>button {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1 1 calc(48% - 10px);
        overflow: hidden;
        text-align: center;
        flex-direction: column;
        gap: 7px;

    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 button:last-of-type {

        height: auto;

    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 button:not(:last-child) img {
        width: clamp(50px, 50vw, 128px);
        height: 130px;
    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 button:last-of-type img {
        height: 360px;
        width: clamp(50px, 100vw, 315px);
        object-position: 0% 9%;
        margin: 0 auto;
        padding: 0;
    }

    button.hb-card.bulga-card.battle-territory span:nth-of-type(1) {
        font-size: 0.8rem;
    }

    button.hb-card.bulga-card.battle-territory span:nth-of-type(2) {
        font-size: 1.1rem;
        /* display: none; */
    }

    .mobile-core-actions__bar>a {
        font-size: 0.7rem;
    }

    .mobile-core-actions__bar span.mobile-core-actions__label {
        font-size: 0.7rem;
    }

    /* footer */
    .brand-footer>p {
        text-align: center;
    }

    .brand-footer__links {
        justify-content: center;
    }

    /*-------RANKING PAGE-------361---460*/
    main:has(.ranking-table) {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }

    .ranking-table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        min-width: 0;
        margin-left: 0;
        margin-right: auto;
        width: auto;
    }

    .ranking-table th,
    .ranking-table td {
        width: 33.33%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 5px;
        font-size: 14px;
        text-align: left;
        white-space: normal;
        /* padding: 12px 20px; */
    }

    .ranking-hero__image {
        height: clamp(200px, 100vh, 300px);
        width: clamp(280px, 100vw, 320px);
    }
}


@media (min-width: 320px) and (max-width: 362px) {

    /* Global */
    html {
        font-size: 12px;
    }

    .page main {
        padding-top: 1rem;
        padding: 10px;
    }

    div.mobile-header-actions nav {
        gap: 12px;
    }

    .hb-button {
        box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    }

    .page main>section {
        padding: 10px;
    }

    .page main>section>section {
        padding: 10px;
    }

    a.bulga-header__brand div:nth-child(2)>p:nth-child(1) {
        font-size: 10px;
    }

    /* --------------CHARACTER PAGE--320---360----------------- */

    header div.min-w-0 p:first-child {
        line-height: 1.6;
        font-size: 12px;
        font-weight: 800;
    }

    header div.flex.flex-col {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    header div.flex.flex-col>a:first-child {
        flex: 1;
        min-width: min-content;
    }

    header div.flex.flex-col>a:first-child div.relative {
        scale: 1.1;
    }

    header div.flex.flex-col div.min-w-0 {
        font-weight: 600;
        text-align: center;
        flex: 1;
    }

    header div.flex.flex-col div.min-w-0 p.text-base {
        display: none;
        /* font-size: 0.6rem; */
    }

    header .header-hero-inline .stat-pill {
        display: flex;
        flex-direction: column;
        gap: 2px;
        justify-content: center;
        align-items: center;
    }

    header .header-hero-inline .stat-pill>span:first-child {
        font-size: 0.7rem;
    }

    /* Hero card section*/
    .bulga-hero-card__meta #hero-territory {
        font-size: 0.6rem;
    }

    div.bulga-hero-card__stats {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }


    div.bulga-hero-card__stats>* {
        max-width: 100%;
    }

    /* Inventory section */
    .inventory-card__media {
        padding: 5px;
    }

    .inventory-section div.inventory-group__items>* {
        max-width: 100%;

    }

    .inventory-section div.inventory-group__items {
        font-size: 0.8rem;
    }

    .inventory-section div.inventory-group__items * {
        font-size: inherit;
        line-height: 1.4;
    }

    .inventory-section div.inventory-group__items span,
    .inventory-section div.inventory-group__items p,
    .inventory-section div.inventory-group__items button {
        font-size: 0.7rem;
    }

    .inventory-section div.inventory-group__items {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        gap: 10px;
    }


    .inventory-section .inventory-group__items .inventory-card {
        display: flex;
        flex-direction: row;
        height: min-content;
        flex: 1;
        width: 100%;
        gap: 10px;
        position: relative;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__media {
        width: 70px;
        height: 70px;
        /* align-self: center; */
    }

    .inventory-section div.inventory-group__items .inventory-card__media img {
        padding: 5px;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body {
        flex-wrap: wrap;
        align-items: center;
        flex: 1;
    }

    .inventory-card .inventory-card__body p,
    .inventory-card .inventory-card__body span,
    .inventory-card .inventory-card__body h4 {
        font-size: 0.8rem;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__rarity {
        flex: 1;
        width: 100%;
        flex-basis: 100%;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__name {
        flex: 1;
        margin-bottom: 0;
        width: 100%;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__detail {
        position: absolute;
        left: 15px;
        bottom: 0;
        max-width: 65px;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__actions {
        width: 100%;
        margin-top: 10px;
    }

    .inventory-section .inventory-group__items .inventory-card .inventory-card__body .inventory-card__actions .hb-button {
        flex: 1;
        width: 0;
    }

    .bulga-section--inventory,
    .bulga-section--inventory .bulga-section__header {
        padding: 8px;

    }

    .inventory-section--other {
        padding: 10px;
    }

    .bulga-section--inventory .bulga-section__body .inventory-group__items {
        margin-top: 0;
    }

    div.inventory-card__body p.inventory-card__detail {
        bottom: -4px;
    }


    /* Refferal section */

    .bulga-section--referral .bulga-panel-header__copy,
    .bulga-section--referral p.mt-2,
    .bulga-section--referral ul.mt-3,
    .bulga-section--referral p.mt-3 {
        line-height: 1.7;
    }

    .bulga-section--referral .bulga-section__body .bulga-section__column:nth-child(2) .hb-button {
        font-size: 0.6rem;
    }

    .bulga-section--referral .bulga-section__body .bulga-section__column:nth-child(2) .stat-pill span {
        font-size: 0.7rem;
    }

    #referral-copy-button {
        width: 130px;
        height: 34px;
    }

    .bulga-section--referral-changelog .bulga-section__body,
    .bulga-section--referral-changelog .bulga-section__body p {
        line-height: 1.6rem;
    }

    .bulga-section--referral-changelog .bulga-section__body ul {
        margin-bottom: 10px;
    }

    .bulga-section--referral {
        display: flex;
        flex-direction: column;
        padding: 12px;
        width: 100%;
        align-items: center;
    }

    #referral-copy-button {
        width: 114px;
        height: 33px;
    }

    .bulga-section--referral-changelog {
        padding: 12px;
    }

    /* --------------BATTLE PAGE--320--360----------------- */


    .bulga-section--battle {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 14px;

    }

    .bulga-section--battle .bulga-section__body {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin-top: 2px;
    }

    .bulga-section--battle .bulga-section__body .bulga-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        padding: 15px;
    }

    .bulga-section--battle .bulga-section__body .bulga-card span.badge {
        display: flex;
        flex-direction: column;
        font-size: 0.8rem;
        gap: 0;

    }

    #world-boss-status {
        font-size: 0.9rem;
    }

    .bulga-section--battle div.mt-4.grid.gap-6 {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
    }

    .bulga-section--battle div.mt-4.grid.gap-6 div.grid.gap-3 {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Leaderboard */
    #world-boss-leaderboard-body tr:nth-child(1),
    #world-boss-leaderboard-body tr:nth-child(2),
    #world-boss-leaderboard-body tr:nth-child(3) {
        font-weight: 900;

    }

    #world-boss-leaderboard-body tr:nth-child(3) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Zones */

    .bulga-section__body .bulga-card .battle-actions {
        flex-wrap: nowrap;
        width: 100%;
        flex: 1;
        justify-content: space-between;
        gap: 15px;
        margin: 5px 0;
    }

    #battle-potion-button {

        padding: 8px 15px;
        flex: 0.5;
        white-space: nowrap;
        width: 0;
    }

    #battle-potion-button span {
        font-size: 0.8rem;
    }

    #battle-potion-button .battle-potion__icon {
        display: none;
    }

    #heal-button {
        font-size: 0.8rem;
        padding: 8px 15px;
        flex: 0.5;
        width: 0;
    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: max-content;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: center;
    }

    .bulga-section--battle .bulga-section__body .bulga-card div.flex.flex-col.gap-4 {
        width: 100%;
        padding: 0 5px;
    }

    .bulga-section--battle .bulga-section__body .bulga-card div.flex.flex-col.gap-4:nth-child(1) {
        text-align: center;
    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 button {
        align-items: center;
    }

    .mobile-core-actions__bar>a {
        font-size: 0.7rem;
    }

    .mobile-core-actions__bar span.mobile-core-actions__label {
        font-size: 0.7rem;
    }

    .bulga-section__body .bulga-card div.mt-4.grid.grid-cols-2 button img {
        width: clamp(50px, 50vw, 127px);
        height: 130px;
    }

    button.hb-card.bulga-card.battle-territory span:nth-of-type(1) {
        font-size: 0.8rem;
    }

    button.hb-card.bulga-card.battle-territory span:nth-of-type(2) {
        font-size: 1.1rem;
        /* display: none; */
    }

    .mobile-core-actions__bar>a {
        font-size: 0.7rem;
    }

    .mobile-core-actions__bar span.mobile-core-actions__label {
        font-size: 0.7rem;
    }

    /* footer */
    .brand-footer>p {
        text-align: center;
    }

    .brand-footer__links {
        justify-content: center;
    }

    /*-------RANKING PAGE-------320---360*/
    main:has(.ranking-table) {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }

    .ranking-table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        min-width: 0;
        margin-left: 0;
        margin-right: auto;
        width: auto;
    }

    .ranking-table th,
    .ranking-table td {
        width: 33.33%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 5px;
        font-size: 12px;
        text-align: left;
        white-space: normal;
        /* padding: 12px 20px; */
    }

    .ranking-hero__image {
        height: clamp(200px, 100vh, 300px);

    }


}