@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');


body {
    min-height: 100vh;
    cursor: auto;
    margin: 0;
}

.home-h1-cs {
    font-style: italic;
    text-transform: uppercase;
    background-color: #F07819;
    margin: -.3rem -.6rem .5rem;
    padding: .4rem .8rem;
    overflow: hidden;
    color: white !important;
    margin-top: -10px;
    font-size: 22px;
}

/*--------------------*/
.update-section {
    margin-top: 20px;
    margin-left: 50px;
    display: flex;
    width: 750px;
    align-items: center;
    margin-bottom: 2.5rem;
    background-color: #ffffffc9;
    border: 1px solid #000;
    padding: 1rem;
    font-family: 'arial'
}

.carousel-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    justify-content: center;
}

.carousel-btn {
    padding: 6px 10px;
    color: #F07819;
    font-size: 18px;
    border: none;
    cursor: pointer;
    border: 1px solid black;
}

.update-section.bg {
    margin-top: 10px;
}

.update-input {
    width: 260px;
    padding: 4px;
    border-radius: 5px;
    background: #222;
    border: 1px solid #555;
    color: #fff;
}

.update-input:focus {
    border-color: #000000;
    outline: none;
}

.update-buttonavatar {
    padding: 5px 10px;
    cursor: pointer;
    border: none;
    background: #F07819;
    color: #fff;
    font-weight: 700;
    transition: .2s;
    margin-left: 550px;
}

.update-buttonbackground {
    padding: 5px 10px;
    cursor: pointer;
    border: none;
    background: #F07819;
    color: #fff;
    font-weight: 700;
    transition: .2s;
    margin-left: 480px;
}

.update-buttonavatar:hover, .update-buttonbackground:hover {
    background: #000000;
    transform: scale(1.05)
}


.gallery-formbackground {
    display: flex;
    align-items: center;
    margin-bottom: 2.5rem;
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 1px;
    top: 175px;
    left: 200px;
    position: absolute;
    height: 30px;
    width: 445px;
    font-size: 16px;
}


.gallery-formavatar {
    display: flex;
    align-items: center;
    margin-bottom: 2.5rem;
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 1px;
    top: 75px;
    left: 160px;
    position: absolute;
    height: 30px;
    width: 485px;
    font-size: 16px;
}


.update-button {
    padding: 5px 10px;
    cursor: pointer;
    border: none;
    background: #F07819;
    color: #fff;
    font-weight: bold;
    transition: .2s;
}

.update-button:hover {
    background: #8F3A08;
    transform: scale(1.05);
}

.gallery-wrapper {
    margin-top: 30px;
    text-align: center;
}

.gallery-title {
    font-family: "Bebas Neue";
    color: rgb(240, 120, 25);
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: bold;
}

.gallery-box {
    width: 750px;
    height: 180px;
    margin: auto;
    border: 1px solid #F07819;
    padding: 10px;
    overflow-y: auto;
}

.gallery-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery-item {
    cursor: pointer;
    border: 1px solid #000000;
    transition: .2s;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.preview-content {
    background: #ffffff;
    padding: 20px;
    text-align: center;
    border: 1px solid #F07819;
}

.preview-image {
    width: 75px;
    margin-bottom: 10px;
    border: 1px solid rgb(0, 0, 0);
    object-fit: contain;
}


.preview-avatar {
    width: 75px;
    height: 75px;
}

.preview-background {
    width: 1223px;
    height: 661px;
    border-radius: 6px;
}

.preview-navigation button {
    margin: 0px 8px;
    padding: 5px 12px;
}

.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.preview-navigation {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.max .avatar-form label {
    font-size: 14px;
}

.preview-navigation button {
    background: #F07819;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    transition: .2s;
}

.preview-navigation button:hover {
    background: #8F3A08;
    transform: scale(1.07);
}

.use-galery-btn,
.remove-galery-btn,
.close-galery-btn {
    padding: 7px 14px;
    cursor: pointer;
    border: none;
    margin: 5px;
    font-weight: bold;
    transition: .25s;
}


.use-galery-btn {
    background: #F07819;
    color: white;
}

.use-galery-btn:hover {
    background: #8F3A08;
    transform: scale(1.05);
}


.remove-galery-btn {
    background: #F07819;
    color: white;
}

.remove-galery-btn:hover {
    background: #8F3A08;
    transform: scale(1.05);
}


.close-galery-btn {
    background: #444;
    color: white;
    border: 1px solid #aaa;
}

.close-galery-btn:hover {
    background: #666;
    transform: scale(1.07);
}
/*--------------------*/
#csbox {
    font-family: Trebuchet MS,verdana,sans-serif;
    font-size: 11px;
    color: #000;
    padding: 10px;
    background-color: #ffffffc9;
    border: 1px solid #000;
    display: inline-block;
    margin-top: 9px;
}

.pirate-change-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem;
    margin-top: 9px;
}

.pirate-change-box h3 {
    background-color: #F07819;
    font-family: Trebuchet MS,verdana,sans-serif;
    font-style: italic;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    padding: .75rem 1rem;
    font-size: 1rem;
    font-weight: 600
}

.shop-box5 {
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem
}



.howtocoin {
    font-size: 14px;
    text-align: center;
    display: flex;
    margin-top: 5px;
    margin-bottom: 5px;
    justify-content: center;
}



.normalshopcontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
}



h6,
h6 a:active,
h6 a:hover,
h6 a:link,
h6 a:visited {
    display: inline;
    font: normal normal 700 11px/normal Trebuchet MS, arial, verdana, sans-serif;
    color: #F07819 !important
}

.clipper-change-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem;
    margin-top: 10px;
}

.slicer-change-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem;
    width: 950px;
    margin-left: 290px;
    margin-top: 50px;
}

#containerm {
    width: 100%;
    line-height: 16px;
    float: left;
}


.missiondiv {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}


.missiondiv {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#clanprofilecontent {
    margin-top: 10px;
}

.missiondiv>.floatleft {
    flex: 1 1 200px;
    /* flexible, min 200px wide */
    box-sizing: border-box;
}


.missionbracer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar-change-box0 {
    background-color: #ffffffc9;
    border-top: 1px solid #000;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem
}

.normalshopcontainer .lucide-coins,
.packs-container .lucide-coins {
    filter: brightness(0)
}

.packs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 10px;
}

.vote-bar {
    width: 100%;
    height: 10px;
    background-color: #ffffff;
    border-radius: 1px;

    margin-top: 5px;
    margin-bottom: 4px;
}

.vote-bar-fill {
    height: 100%;
    background-color: #F07819;
    transition: width 0.3s ease;
}

.block {
    display: block;
}


.inline {
    display: inline;
}

.mission-tophic {
    display: inline-block;
    width: 280px;
    padding-bottom: 20px;
}

.page-button {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.page-button.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.avatar-change-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem;
}

.battle-pass-change-box {
    position: relative;
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    right: -100px;
    top: 50px;
    width: 880px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.grand-line-change-box {
    position: relative;
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    right: -100px;
    top: 50px;
    width: 880px;
    overflow: hidden;
    margin-bottom: 1rem;
}


.reedem-change-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem;
}

#clanregister {
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 11px;
    color: #000;
    padding: 10px;
    background-color: #ffffffc9;
    border: 1px solid #000;
}

/*------------------------*/

/* --- COSMETIC SHOP BASE --- */

.cosmetic-shop-card {
    height: 210px;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px 8px;
    background: radial-gradient(circle at center, #ffffff 0%, #ffffff00 100%);
    border: 1px solid black;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.cosmetic-shop-card:hover {
    transform: scale(1.05);
}

.cosmetic-shop-card.owned {
    opacity: 0.5;
}

.normalshopcontainer {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    /* <-- aqui define o espaço entre os cards */
    justify-content: center;
}

/* --- IMAGEM --- */

.cosmetic-shop-image-box {
    width: 75px;
    height: 75px;
}

.cosmetic-shop-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Apenas skins têm borda vermelha */
.cosmetic-shop-card.skin .cosmetic-shop-image {
    border: 1px solid #F07819;
}

.cosmetic-shop-card.border .cosmetic-shop-image,
.cosmetic-shop-card.rank .cosmetic-shop-image {
    border: none;
}

/* --- TEXTO E COST --- */

.cosmetic-shop-item-id {
    font-size: 14px;
    font-weight: bold;
    color: #F07819;
    text-align: center;
    margin-top: 5px;
}

.cosmetic-shop-cost {
    font-size: 12px;
    color: #F07819;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* --- BOTÃO --- */

.cosmetic-shop-buy-btn {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 12px;
    background-color: #F07819;
    color: white;
    border: none;
    cursor: pointer;
    width: 80%;
    font-weight: bold;
    box-shadow: 0 0 6px #F07819;
    transition: all 0.2s ease-in-out;
}

.cosmetic-shop-buy-btn:hover {
    background-color: #8F3A08;
    transform: scale(1.05);
}

/* --- TÍTULO --- */

.cosmetic-shop-title {
    color: #F07819;
    text-align: center;
    margin-bottom: 10px;
    font-family: "Bebas Neue";
    font-size: 35px;
    margin-top: 30px;
}

.chars-encyclopedia {
    min-height: 100vh;
    padding: 2rem;
    font-family: sans-serif;
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/fz-Kzbzf-d47b5f99f8.png");
    background-size: cover;
    background-position: center;
    color: #F07819ff;
}

.search-section {
    margin-bottom: 2rem;
    text-align: center;

}

.search-input {
    padding: 0.5rem 1rem;
    font-size: 16px;
    text-align: center;
    width: 300px;
    border: 2px solid #F07819ff;
    outline: none;
    color: #F07819ff;
    background-color: #fff;
}

.era-filter {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 20px;
    border: 2px solid #F07819ff;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 1rem;
    margin-bottom: 1rem;
    max-width: 800px;
    margin-inline: auto;
}

.tags-filter {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 2px solid #F07819ff;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 1rem;
    margin-bottom: 1rem;
    max-width: 800px;
    margin-inline: auto;
}

.filter-label {
    font-weight: bold;
}

.classes-filter {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    border: 2px solid #F07819ff;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 1rem;
    margin-bottom: 1rem;
    max-width: 800px;
    margin-inline: auto;
}

.class-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 14px;
}

.tag-box {
    width: 25px;
    height: 25px;
    cursor: pointer;
    border: 2px solid #000;
    transition: transform 0.2s;
}

.tag-box.selected {
    border: 3px solid #000;
}

.characters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    border: 3px solid #F07819ff;
    background-color: rgba(255, 255, 255, 0.85);
}

.character-card {
    cursor: pointer;
    text-align: center;
    padding: 0.5rem;
    transition: transform 0.2s ease;
}

.character-card:hover {
    transform: scale(1.05);
}

.character-img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border: 1px solid #000000
}

.character-name {
    font-size: 14px;
    margin-top: 6px;
}


/* Popup */
.char-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.char-popup {
    background-color: #fff;
    padding: 2rem;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    width: 500px;
    color: #F07819;
}

.char-popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.popup-main-img {
    width: 75px;
    height: 75px;
    order: 1px solid #000000;
    object-fit: cover;
}

.popup-description {
    display: flex;
    align-items: center;
    gap: 6px;
}

.copied-text {
    font-size: 12px;
    color: green;
}

.popup-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.popup-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* espaço entre os itens */
}

.image-with-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.image-with-copy img {
    width: 75px;
    border: 1px solid #000000;
    /* ajuste o tamanho da imagem */
    height: 75px;
    object-fit: cover;
}

.image-with-copy button {
    margin-top: 5px;
    padding: 5px 10px;
    background-color: #F07819;
    /* azul parecido com sua imagem */
    color: white;
    border: none;
    cursor: pointer;
    font-size: 12px;
}

.image-with-copy button:hover {
    background-color: #F07819;
}

.popup-close {
    margin-top: 1rem;
    text-align: right;
}

.popup-close button {
    background-color: #F07819;
    color: #fff;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
}



/*------------------------*/


.avatar-change-box h3 {
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-style: italic;
    text-transform: uppercase;
    color: white;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.battle-pass-change-box h3 {
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-style: italic;
    text-transform: uppercase;
    color: white;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.grand-line-change-box h3 {
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-style: italic;
    text-transform: uppercase;
    color: white;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.reedem-change-box {
    margin-top: 10px;
    margin-left: -100px;
}

.container-view-battle-pass {
    display: flex;
    width: 680px;
    left: 80px;
    height: 400px;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 60px;
    padding: 15px;
    border: 2px solid #F07819;
    position: relative;
}

.render-battle-pass-view {
    width: 385px;
    height: 485px;
    flex: 0 0 385px;
    margin: -52px 0 -15px -48px;
    background-image: url("https://NAOrigins.b-cdn.net/assets/ui/sakura__naruto_mobile__render_by_doeyduey_dk3foqz-pre.png");
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}


.battle-pass-info {
    flex: 1;
}

.battle-pass-text {
    color: #000000;
    color: #000;
    font-family: 'Arial';
    font-size: 16px;
    line-height: 1.4;
}

.patreon-link {
    color: #F07819;
    font-weight: bold;
    text-decoration: underline;
    margin-left: 5px;
}

.patreon-link:hover {
    color: #F07819;
    text-shadow: 0 0 6px rgba(255, 90, 90, 0.6);
}

.battle-pass-stats {
    margin-top: 10px;
    text-align: left;
    font-family: 'Arial';
    font-size: 16px;
    padding: 10px 12px;
    color: #000000;
    max-width: 400px;
}

.battle-pass-timer {
    color: #F07819;
    font-family: 'Merriweather', serif;
    font-weight: bold;
    left: 10px;
    margin-top: 25px;
    margin-bottom: 5px;
    font-size: 25px;
    display: flex;
    align-items: center;
}

.timer-text {
    font-size: 25px;
    font-family: 'Merriweather', serif;
}

.battle-pass-exp,
.battle-pass-tier {
    margin-top: 4px;
    color: #000000;
}


/*--------------------*/
.container-view-archivements {
    display: flex;
    width: calc(100% - 32px);
    max-width: 650px;
    min-height: 400px;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin: 60px auto 44px;
    padding: 18px 20px;
    border: 2px solid #F07819;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.pa-shop-page {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem;
    color: #000;
}

.pa-shop-page h3 {
    font-style: italic;
    text-transform: uppercase;
    background-color: #F07819;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: .75rem 1rem;
}

.pa-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

.pa-shop-balances {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-family: Trebuchet MS, verdana, sans-serif;
}

.pa-shop-balances span {
    border: 1px solid #F07819;
    background: #fff;
    color: #F07819;
    padding: 7px 10px;
    font-weight: 700;
}

.pa-shop-balances b {
    color: #000;
    margin-right: 4px;
}

.pa-shop-search {
    max-width: 260px;
    min-width: 220px;
}

.pa-shop-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.pa-shop-tabs button {
    border: 1px solid #F07819;
    background: #fff;
    color: #F07819;
    padding: 8px 12px;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-weight: 700;
    cursor: pointer;
}

.pa-shop-tabs button.active,
.pa-shop-tabs button:hover {
    background: #F07819;
    color: #fff;
}

.pa-shop-status {
    color: #000;
    margin: 8px 0 14px;
    text-align: center;
}

.pa-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.pa-shop-card {
    min-height: 224px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .74);
    display: grid;
    grid-template-rows: 86px minmax(36px, auto) 34px 38px;
    align-items: center;
    justify-items: center;
    padding: 10px;
    font-family: Trebuchet MS, verdana, sans-serif;
    box-sizing: border-box;
}

.pa-shop-card-hats {
    min-height: 264px;
    grid-template-rows: 124px minmax(36px, auto) 34px 38px;
}

.pa-shop-card.owned {
    background: rgba(255, 255, 255, .56);
}

.pa-shop-card.equipped {
    box-shadow: inset 0 0 0 3px rgba(240, 120, 25, .22);
}

.pa-shop-preview {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    overflow: hidden;
}

.pa-shop-card:has(.pa-profile-theme-preview) {
    grid-template-rows: 86px minmax(36px, auto) 34px 38px;
}

.pa-profile-theme-preview {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: rgba(255, 255, 255, .7);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    box-shadow: inset 0 -26px 0 var(--theme-color, #F07819);
    color: #fff;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 11px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.05;
    padding: 0 4px 7px;
    text-align: center;
    text-transform: uppercase;
    box-sizing: border-box;
}

.pa-shop-preview img {
    max-width: 76px;
    max-height: 76px;
    object-fit: contain;
    display: block;
}

.pa-shop-layer-preview {
    position: relative;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    overflow: visible;
}

.pa-shop-layer-preview img {
    position: absolute;
    inset: 0;
    width: 78px;
    height: 78px;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

.pa-shop-layer-preview .pa-shop-preview-base {
    z-index: 1;
}

.pa-shop-layer-preview .pa-shop-preview-overlay {
    z-index: 2;
    pointer-events: none;
}

.pa-shop-frame-preview .pa-shop-preview-base {
    inset: 5px;
    width: 68px;
    height: 68px;
}

.pa-shop-frame-preview .pa-shop-preview-overlay {
    inset: 0;
    width: 78px;
    height: 78px;
}

.pa-shop-hat-preview .pa-shop-preview-base {
    top: 14px;
    left: 28px;
    width: 42px;
    height: 42px;
}

.pa-shop-hat-preview .pa-shop-preview-overlay {
    top: 0;
    left: 0;
    width: 78px;
    height: 78px;
}

.pa-shop-name {
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.pa-shop-price {
    color: #000;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
}

.pa-shop-actions {
    width: 100%;
    min-height: 34px;
    display: grid;
    place-items: center;
}

.pa-shop-actions button {
    width: 100%;
    min-height: 34px;
    border: 0;
    background: #F07819;
    color: #fff;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.pa-shop-actions button:hover {
    filter: brightness(.94);
}

.pa-shop-actions span {
    color: #F07819;
    font-size: 12px;
    font-weight: 700;
}

.pa-shop-title-preview {
    color: #F07819;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 1.15;
    padding: 4px;
}

.pa-shop-empty {
    grid-column: 1 / -1;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .74);
    color: #000;
    padding: 18px;
    text-align: center;
    font-family: Trebuchet MS, verdana, sans-serif;
}

.pa-shop-subpage-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 0 0 16px;
    padding: 0 16px;
    border: 1px solid #F07819;
    background: #F07819;
    color: #fff !important;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

.pa-shop-subpage-link:hover {
    filter: brightness(.94);
}

.pa-profile-themes-page .pa-shop-subpage-link {
    margin: 0;
}

.pa-styled-name {
    display: inline-block;
    color: inherit;
    background-size: 220% 220%;
    background-position: center;
}

.pa-styled-name.gradient,
.pa-styled-name.flag,
.pa-styled-name.rainbow {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pa-styled-name.flag {
    background-size: cover;
    background-position: center;
}

.pa-styled-name.rainbow {
    background-image: linear-gradient(90deg, #F07819, #ffb000, #ffe600, #3fd85b, #31a8ff, #7957ff, #ff3fb4, #F07819);
    animation: pa-name-rainbow 2.2s linear infinite;
}

@keyframes pa-name-rainbow {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 200% 50%;
    }
}

.pa-customize-name-page .pa-shop-subpage-link {
    margin: 0;
}

.pa-name-preview-panel {
    min-height: 132px;
    margin-bottom: 16px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .72);
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 18px;
    box-sizing: border-box;
    text-align: center;
}

.pa-name-preview-panel > span:first-child {
    color: #F07819;
    font-size: 12px;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
}

.pa-name-preview-text {
    color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}

.pa-name-preview-panel img {
    width: 38px;
    height: 25px;
    border: 1px solid #000;
    object-fit: cover;
}

.pa-name-effect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.pa-name-effect-card {
    min-height: 92px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .78);
    color: #000;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 12px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
}

.pa-name-effect-card strong {
    color: #F07819;
    font-size: 15px;
    font-style: italic;
    text-transform: uppercase;
}

.pa-name-effect-card span {
    font-size: 12px;
    line-height: 1.25;
}

.pa-name-effect-card.active,
.pa-name-effect-card:hover {
    background: #F07819;
    color: #fff;
}

.pa-name-effect-card.active strong,
.pa-name-effect-card:hover strong {
    color: #fff;
}

.pa-name-form {
    border: 1px solid #000;
    background: rgba(255, 255, 255, .64);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
    box-sizing: border-box;
}

.pa-name-form label {
    color: #000;
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.pa-name-form input[type="color"] {
    width: 100%;
    height: 42px;
    border: 1px solid #000;
    background: #fff;
    padding: 4px;
    box-sizing: border-box;
}

.pa-name-form-wide,
.pa-name-actions {
    grid-column: 1 / -1;
}

.pa-name-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 12px;
}

.pa-name-actions button {
    min-height: 38px;
    border: 0;
    background: #F07819;
    color: #fff;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.pa-name-actions button:hover {
    filter: brightness(.94);
}

.pa-name-actions button:disabled {
    opacity: .65;
    cursor: wait;
}

.pa-profile-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.pa-profile-theme-card {
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .72);
    box-sizing: border-box;
    overflow: hidden;
}

.pa-profile-theme-card.owned {
    background: rgba(255, 255, 255, .58);
}

.pa-profile-theme-card.equipped {
    box-shadow: inset 0 0 0 4px rgba(240, 120, 25, .28);
}

.pa-profile-theme-showcase {
    --theme-color: #F07819;
    min-height: 300px;
    border-bottom: 1px solid #F07819;
    background: rgba(255, 255, 255, .5);
    color: #000;
    font-family: Trebuchet MS, verdana, sans-serif;
}

.pa-profile-theme-showcase-top {
    min-height: 118px;
    position: relative;
    display: grid;
    grid-template-columns: 78px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid #000;
    background-color: rgba(255, 255, 255, .4);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
}

.pa-profile-theme-showcase-top::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .38);
}

.pa-profile-theme-showcase-top > * {
    position: relative;
    z-index: 1;
}

.pa-profile-theme-avatar {
    position: relative;
    width: 70px;
    height: 70px;
}

.pa-profile-theme-avatar .user-avatar {
    width: 70px;
    height: 70px;
    display: block;
    border: 1px solid var(--theme-color);
    object-fit: cover;
}

.pa-profile-theme-avatar .pa-avatar-frame {
    inset: -7px;
    width: calc(100% + 14px);
    height: calc(100% + 14px);
}

.pa-profile-theme-user {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
}

.pa-profile-theme-rank {
    width: max-content;
    max-width: 100%;
    padding: 3px 8px;
    background: var(--theme-color);
    color: #fff;
    font-size: 12px;
    font-style: italic;
    font-weight: 700;
}

.pa-profile-theme-user strong {
    color: var(--theme-color);
    font-size: 26px;
    line-height: 1;
}

.pa-profile-theme-user span:last-child {
    color: var(--theme-color);
    font-size: 13px;
}

.pa-profile-theme-status {
    align-self: end;
    padding: 7px 10px;
    background: var(--theme-color);
    color: #fff;
    font-size: 12px;
    font-style: italic;
    font-weight: 700;
}

.pa-profile-theme-showcase-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
}

.pa-profile-theme-panel,
.pa-profile-theme-wide {
    min-height: 70px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .62);
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 10px 12px;
    box-sizing: border-box;
}

.pa-profile-theme-panel b,
.pa-profile-theme-wide b {
    margin: -10px -12px 6px;
    padding: 8px 10px;
    background: var(--theme-color);
    color: #fff;
    font-size: 13px;
    font-style: italic;
    text-transform: uppercase;
}

.pa-profile-theme-panel span,
.pa-profile-theme-wide span {
    font-size: 12px;
    line-height: 1.25;
}

.pa-profile-theme-wide {
    grid-column: 1 / -1;
}

.pa-profile-theme-card-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    font-family: Trebuchet MS, verdana, sans-serif;
}

.pa-profile-theme-card-footer > div:first-child {
    display: grid;
    gap: 4px;
}

.pa-profile-theme-card-footer strong {
    color: #F07819;
    font-size: 16px;
}

.pa-profile-theme-card-footer span {
    color: #000;
    font-size: 12px;
}

.pa-profile-theme-card-footer .pa-shop-actions {
    min-height: 36px;
}

.pa-profile-theme-card-footer .pa-shop-actions span {
    color: #F07819;
}

.pa-profile-theme-showcase[data-theme="admiral"] {
    --theme-color: #F07819;
}

.pa-profile-theme-showcase[data-theme="yonko"] {
    --theme-color: #202020;
}

.pa-profile-theme-showcase[data-theme="king"] {
    --theme-color: #F07819;
}

.render-archivements-view {
    width: 315px;
    height: 430px;
    flex: 0 0 315px;
    align-self: flex-end;
    margin: 0 0 -18px -12px;
    background-image: url("https://NAOrigins.b-cdn.net/assets/ui/naruto__minato_s_kunai__render__slugfest__by_maxiuchiha22_deirobg-414w-2x.png");
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.archivements-info {
    flex: 1;
    min-width: 0;
}

.archivements-text {
    color: #000;
    display: block;
    font-family: 'Arial';
    font-size: 16px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.patreon-link {
    color: #F07819;
    font-weight: bold;
    text-decoration: underline;
    margin-left: 5px;
}

.patreon-link:hover {
    color: #F07819;
    text-shadow: 0 0 6px rgba(255, 90, 90, 0.6);
}

.archivements-stats {
    margin-top: 10px;
    text-align: left;
    font-size: 15px;
    font-family: 'Merriweather', serif;
    padding: 10px 12px;
    color: #000000;
    max-width: 400px;
}

.claim-btn {
    background-color: #F07819;
    color: white;
    border: none;
    margin-left: 50px;
    padding: 8px 20px;
    font-weight: bold;
    font-family: 'Merriweather', serif;
    transition: 0.2s ease;
    cursor: pointer;
    opacity: 1;
}

.claim-btn:hover {
    background-color: #F07819;
}

.claim-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* Estado desativado: visível mas sem ação */
.claim-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
    /* impede clique */
    cursor: default;
}

/*---*/
.go-btn {
    margin-top: auto;
    padding: 6px 16px;
    font-size: 14px;
    width: 70px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(90deg, #F07819, #e9e9e9, #F07819);
    background-size: 300% 300%;
    border: none;
    cursor: pointer;
    animation: shine 2s infinite
}

.go-btn:hover {
    filter: brightness(1.2);
}

@keyframes shine {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/*--------------------*/
.container-view-ninja-missions {
    display: flex;
    margin-bottom: 50px;
    width: 620px;
    left: 22px;
    height: 400px;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 60px;
    padding: 15px;
    border: 1px solid #F07819;
    position: relative;
    flex-direction: row-reverse;
}

.container-view-grand-line {
    display: flex;
    width: 620px;
    left: 150px;
    height: 400px;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 60px;
    padding: 15px;
    border: 2px solid #F07819;
    position: relative;
}

.render-ninja-missions-view {
    width: 323px;
    margin-left: 232px;
    height: 100%;
    margin-top: 29px;
    background-image: url(https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/pvivi-dee83c2168.png);

    background-size: 440px;
    background-position: 40% -20%;
    background-repeat: no-repeat;

}

.render-grand-line-view {
    width: 300px;
    margin-left: -0px;
    height: 450px;
    margin-top: -19px;
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/DM3S9Yp-e14d31f87f.png");
    background-size: 300px;
    background-position: 40% -20%;
    background-repeat: no-repeat;

}


.ninja-missions-info {
    flex: 1 1;
    position: absolute;
    left: 30px;
    width: 300px !important;
}


.ninja-missions-text {
    color: #000;
    font-size: 18px;
    line-height: 1.2
}

.patreon-link {
    color: #F07819;
    font-weight: bold;
    text-decoration: underline;
    margin-left: 5px;
}

.patreon-link:hover {
    color: #F07819;
    text-shadow: 0 0 6px rgba(255, 90, 90, 0.6);
}

.ninja-missions-stats {
    margin-top: 10px;
    text-align: left;
    font-size: 15px;
    font-family: 'Merriweather', serif;
    padding: 10px 12px;
    color: #000000;
    max-width: 400px;
}


.ninja-missions-exp,
.ninja-missions-tier {
    margin-top: 4px;
    color: #000000;
}

.reedem-change-box h3 {
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-style: italic;
    text-transform: uppercase;
    color: white;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.mission-change-box {
    background-color: #ffffff00;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 3px;
}

.mission-change-box2 {
    background-color: #ffffff00;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid black;
}


.mission-change-box h3 {
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-style: italic;
    text-transform: uppercase;
    color: white;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.clan-info a {
    color: #F07819 !important;
}

.manual-change-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem;
}

.manual-change-box h3 {
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-style: italic;
    text-transform: uppercase;
    color: white;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.pa-manual-page {
    color: #000;
}

.pa-manual-content {
    padding: 14px;
}

.pa-manual-top-image {
    display: block;
    width: min(100%, 650px);
    height: auto;
    margin: 0 auto 14px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .78);
    object-fit: contain;
}

.pa-manual-intro {
    margin-bottom: 16px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .78);
}

.pa-manual-intro h1 {
    margin: 0;
    padding: 16px 12px 10px;
    color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 48px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, .85), 4px 4px 0 rgba(0, 0, 0, .16);
}

.pa-manual-intro p {
    margin: 0;
    padding: 12px 22px 14px;
    background: #F07819;
    color: #fff;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.75;
    text-align: center;
}

.pa-manual-section {
    margin: 0 0 16px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .78);
    box-shadow: 3px 3px 0 rgba(240, 120, 25, .45);
}

.pa-manual-section h4 {
    margin: 0;
    padding: 9px 12px;
    background: #F07819;
    color: #fff;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
}

.pa-manual-section-body {
    padding: 12px;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.pa-manual-section-body p {
    margin: 0 0 10px;
    padding: 0;
}

.pa-manual-image {
    display: block;
    width: 100%;
    max-width: 650px;
    height: auto;
    margin: 0 auto 12px;
    border: 1px solid #000;
    background: #fff;
}

.pa-manual-image-small {
    max-width: 520px;
}

.pa-manual-notes {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.pa-manual-notes li {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
    border: 1px solid rgba(240, 120, 25, .45);
    background: rgba(255, 255, 255, .72);
}

.pa-manual-notes strong,
.pa-term-card strong,
.pa-class-group strong {
    color: #F07819;
}

.pa-energy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 12px;
}

.pa-energy-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    border: 1px solid rgba(240, 120, 25, .45);
    background: rgba(255, 255, 255, .72);
    font-weight: 700;
}

.pa-energy-item img {
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
}

.pa-term-grid,
.pa-class-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 10px;
}

.pa-term-card,
.pa-class-group {
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(240, 120, 25, .45);
    background: rgba(255, 255, 255, .72);
}

.pa-term-card strong {
    display: block;
    margin-bottom: 4px;
}

.pa-class-group h5 {
    display: block;
    margin: 0 0 8px;
    padding: 0 0 5px;
    border: 0;
    border-bottom: 1px solid rgba(240, 120, 25, .45);
    color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 15px;
}

.pa-class-group p {
    margin-bottom: 8px;
}

@media (max-width: 760px) {
    .pa-manual-intro h1 {
        font-size: 36px;
    }

    .pa-manual-notes li,
    .pa-term-grid,
    .pa-class-groups,
    .pa-energy-grid {
        grid-template-columns: 1fr;
    }
}

.mission-change-box {
    font-family: Trebuchet MS, verdana, sans-serif;
    background-color: #ffffff00;
    border-radius: 0;
    overflow: hidden;
}

.mission-change-box h3 {
    background-color: #F07819;
    font-style: italic;
    text-transform: uppercase;
    color: white;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.clan-change-box {
    margin-left: -70px;
    margin-top: -40px;
    width: 800px;
    background-color: #1a2730;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem;
}

.clan-change-box h3 {
    background-color: #F07819;
    font-style: italic;
    text-transform: uppercase;
    color: white;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}


.fundation-change-box {
    font-style: italic;
    text-transform: uppercase;
    margin-left: -70px;
    margin-top: 0px;
    width: 800px;
    background-color: #1a2730;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem;
}

.fundation-change-box h3 {
    background-color: #F07819;
    color: white;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}


.shop-change-box {
    width: 600px;
    height: 600px;
    margin-top: 10px;
    margin-right: 100px;
    border: 1px solid #000000;
    background-color: #1a2730;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem;
}

.ahop-change-box h3 {
    background-color: #F07819;
    font-style: italic;
    text-transform: uppercase;
    color: white;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.avatar-content {
    padding: 1.5rem;
    color: white;
}

.current-avatar {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

.current-avatar img {
    width: 75px;
    height: 75px;
    border: 1px solid #F07819;
    padding: 2px;
}

.avatar-form {
    display: flex;
    align-items: center;
    margin-bottom: 2.5rem;
    background-color: #ffffffc9;
    border: 1px solid #000;
    padding: 1rem;
    border-radius: 2px
}

.gender-form {
    display: flex;
    align-items: center;
    margin-bottom: 2.5rem;
    background-color: #ffffffc9;
    border: 1px solid #000;
    padding: 1rem;
    border-radius: 2px
}

.avatar-form label {
    color: #000000;
    min-width: 60px
}

.avatar-form input {
    flex: 1 1;
    padding: .5rem;
    margin: 0 1rem;
    background-color: #ffffffc9;
    border: 1px solid #000;
    color: #000000
}

.change-btn {
    background-color: #F07819;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    border-radius: 2px;
}

.change-btn:hover {
    background-color: #F07819;
    filter: opacity(70%);
}

.predefined-avatars h4 {
    color: #000000;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: normal;
    text-align: center;
}

.avatar-help {
    color: #000000;
    font-style: italic;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    text-align: center;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    justify-items: center;
}

.avatar-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.avatar-option img {
    width: 75px;
    height: 75px;
    border: 1px solid #F07819;
    transition: border-color 0.2s ease;
}

.avatar-option:hover img {
    border-color: #F07819;
}

.avatar-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.pagination {
    text-align: center;
}

.pagination select {
    background-color: #ffffffc9;
    border: 1px solid #000;
    color: #000000;
    padding: .5rem 2rem;
    cursor: pointer;
    border-radius: 2px;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right .5rem center
}

.pagination select:hover {
    border-color: #F07819;
}

.winrate-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    justify-content: center;
    margin: 20px;
}


.winrate-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    width: 100%;
    max-width: 120px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.winrate-item img {
    width: 70px;
    height: auto;

}

.countdown-text {
    font-size: 1.2em;
    color: rgb(255, 255, 255);
    margin-top: 15px;
}

.borda {
    border: 1px solid #F07819;
}

.pageborda {
    border: 1px solid #000;
}

.max {
    width: 100%;
}

.min {
    width: auto;
}

.half {
    width: 50%;
}


.main-content {
    flex-grow: 1;
    min-width: 500px;
    max-width: 620px;
    /* Ajuste conforme necessário */
    margin: 0 auto;
    /* Centraliza */
}

.mission-card h2 {
    font-size: 25px !important;
    margin: 0 auto !important;
    color: #F07819 !important;
}

.mission-card .anime-overlay>div:last-child {
    font-size: 20px !important;
    margin: 0 auto !important;
    color: #ffffff !important;
    background-color: #F07819 !important;
    border-radius: 0 !important;
    border: 1px solid black;
}


.mission-card {
    border: 1px solid #F07819 !important;
}

.anime-mission-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

/* Link wrapper */
.mission-card-link {
    text-decoration: none;
    color: inherit;
    width: 80%;
}

/* Card principal */
.mission-card {
    position: relative;
    height: 200px;
    width: 100%;
    border: 1px solid #F07819;
    margin: 0 auto 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: filter 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.mission-card:hover {
    transform: scale(1.03);
}

/* Fundo da imagem */
.anime-bg {
    height: 100%;
    width: 100%;
    opacity: 0.5;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: filter 0.3s ease;
}

/* Camada escura que aparece ao hover */
.dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1;
}

/* Camada com texto e botão */
.anime-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    box-sizing: border-box;
    z-index: 2;
}

/* Título do anime */
.anime-title {
    color: #F07819;
    font-size: 20px;
    margin: 0;
    font-family: 'Merriweather', serif;
}

/* Botão fixo na base */
.anime-btn {
    display: inline-block;
    color: #000;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: bold;
    align-self: flex-start;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
    font-family: 'Merriweather', serif;
    transition: all 0.3s ease;
}

.anime-btn:hover {
    background-color: #F07819;
    color: #fff;
}

.anime-description {
    color: #fff;
    font-size: 15px;
    text-align: center;
    line-height: 1.4;
    margin-left: 40px;
    max-width: 80%;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

.main-content1 {
    flex-grow: 1;
    min-width: 750px;
    max-width: 850px;
}

.update-header {
    color: #000000;
    margin-right: 1px;
    font-size: 1.5rem;
    font-style: italic;
    margin-bottom: -15px;
}

.update-header h2 {
    color: black;
    margin: 20px;
    font-size: 1.5rem;
    font-style: italic;
}

.news h2 {
    width: 467px !important;
    background: #F07819 !important;
    margin-top: -18px !important;
    border: 1px solid #000;
    margin-left: -25px !important;
}

.newsimage {
    margin-left: -25px;
    transition: 0.2s;
}

.newsimage:hover {
    opacity: 0.7;
}

.main-content {
    display: none;
}

.news p {
    color: black !important;
}

.update-meta {
    color: #999;
    font-size: 0.rem;
}

.custom-border-page {
    position: absolute;
    margin-left: -8px;
    margin-top: -9px;
    width: 93px;
}

/*----- login */
.logged-in-content {
    padding: 1rem;
    color: white;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.avatar-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    /* Ajuste para borda */
    height: 80px;
}

.user-avatar {
    width: 64px;
    height: 64px;
    border: 1px solid #F07819 !important;
    object-fit: cover;
}

.pa-avatar-frame {
    position: absolute;
    inset: -7px;
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
    border: 0 !important;
    margin: 0 !important;
}

.profile-avatar-container .pa-avatar-frame,
.profile-avatar-border {
    pointer-events: none;
}

.pa-control-avatar-frame,
.pa-current-avatar-frame,
.pa-player-avatar-frame-wrap {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.pa-control-avatar-frame {
    width: 75px;
    height: 75px;
}

.pa-control-avatar-frame .user-avatar,
.pa-current-avatar-frame .user-avatar {
    width: 75px;
    height: 75px;
    display: block;
}

.pa-current-avatar-frame .pa-avatar-frame,
.pa-control-avatar-frame .pa-avatar-frame {
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
}

.pa-player-avatar-frame-wrap .pa-avatar-frame {
    inset: -9px;
    width: calc(100% + 18px);
    height: calc(100% + 18px);
}

.pa-player-card-avatar {
    width: 70px;
    height: 70px;
    margin-top: -15px;
    border: 1px solid #F07819;
    object-fit: cover;
}

.avatar-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    /* Evita que a borda interfira no clique */
}

.user-info {
    flex-grow: 1;
}

.welcome-text {
    color: black;
    font-size: 0.9rem;
    margin: 0;
}

.username {
    display: block;
    color: black;
    margin: 0.2rem 0;
}

.country-wrapper {
    position: relative;
}

/* Botão principal */
.country-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: #fff;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    font-weight: 500;
}

.country-name {
    color: #000;
}

/* Flags */
.country-flag {
    border-radius: 4px;
}

.country-item-flag {
    border-radius: 3px;
}

/* Popup */
.country-popup {
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    border: 1px solid #000;
    padding: 0.5rem;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 160px;
    border-radius: 6px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
    max-height: 220px;
    overflow-y: auto;
}

.gender-switch-btn {
    all: unset;
    color: #000;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
}

.gender-switch-btn:hover {
    opacity: 0.7;
}


.country-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
    cursor: pointer;
    border-radius: 4px;
    background: transparent;
    transition: background 0.2s;
}

.country-item:hover {
    background: #e5e5e5;
}

.country-item.active {
    background: #e5e5e5;
}

.country-item-name {
    color: #000;
}

.user-title {
    color: #F07819;
    font-size: 0.9rem;
}

.profile-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
}

.bio-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
    overflow: hidden;
}

.bio-box:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0px rgb(240 120 25);
}

.bio-header {
    background-color: #F07819;
    /* azul vibrante */
    color: white;
    padding: 10px 15px;
    font-style: italic;
    font-weight: bold;
    font-size: 14px;
}

.website-link {
    color: #F07819;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.website-link:hover {
    color: #F07819;
}

.discord-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.discord-icon {
    width: 16px;
    height: 16px;
}

.bio-content {
    background-color: #ffffff00;
    padding: 15px 20px
}

.bio-title {
    color: #F07819;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}

.bio-text {
    color: #000000;
    font-size: 13px;
    margin: 0;
    white-space: pre-line
}

div[style*="display:flex"][style*="flex-wrap:wrap"] {
    width: 580px;
    height: 800px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.force-width-gallery {
    width: 920px !important;
    height: auto !important;
}

/*to plyaer card*/
.player-card {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 170px;
    margin-top: 20px;
    border: 1px solid #F07819;
    overflow: hidden;
    margin-left: 96px;
    margin-bottom: 15px;
    box-shadow: 0 0 10px #000;
}


.player-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/Bn-Qi-R5Y-2a5167bce6.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(0px) brightness(0.5);
}

.player-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 15px;
}

.player-card-box {
    height: 100px;
    width: 220px;
    display: flex;
    background-color: rgba(0, 0, 0, 0.65);
    border: 1px solid #F07819;
    padding: 10px 16px;
    box-shadow: 0 0 5px #000;

}

.rank-team {
    height: 50px;
    width: 150px;
    margin-left: 10px;
    margin-top: 78px;
}

.char1,
.char2,
.char3 {
    width: 40px;
    display: inline-block;
    height: 40px;
    margin-top: 5px;
    margin-left: 7px;
    background-color: rgba(0, 0, 0, 0.65);
    border: 1px solid #F07819;
}

.char1 img,
.char2 img,
.char3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* cobre sem distorcer */
}

.player-avatar img {
    width: 70px;
    height: 70px;
    margin-top: -15px;
    border: 1px solid #F07819;
}

.player-info {
    margin-left: 12px;
    left: 15px;
    width: 2000px;
    color: #ffffff;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.player-info2 {
    margin-left: 12px;
    left: 15px;
    width: 100px;

    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.player-info2 a {
    margin-left: 10px;



    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.player-avatar-container {
    width: 100px;
    /* ou qualquer tamanho fixo desejado */
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;

}



.xp-bar {
    width: 70px;
    /* ou um valor como 90% se quiser margem */
    height: 17px;
    border: 1px solid #F07819;
    background-color: #1e2a33;
    overflow: hidden;
    margin-left: -72px;
    margin-top: 80px;
    /* use margin-top para espaçamento */
}

.xp-bar-fill {
    width: 70px;
    /* ou um valor como 90% se quiser margem */
    height: 20px;
    background: linear-gradient(to right, #F07819, #F07819);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: width 0.3s ease;
}

.xp-level {
    color: white;
    font-weight: bold;
    z-index: 1;
    margin-left: 19px;
}

.player-info p {
    margin: 2px 0;
}

.player-info-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-left: 12px;
}

.username {
    font-weight: 700;
    color: #F07819;
    font-size: 19px;
    text-transform: uppercase;
    flex-direction: column;
    /* margin-bottom: 4px; */
}

.player-card-preview {
    margin-top: 30px;
    background-color: #1a2730;
    color: #F07819;
    padding: 30px;
    border: 1px solid #F07819;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    font-size: 18px;
}

.classic-player-card-page {
    padding: 28px 18px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.classic-player-card-stage {
    width: 100%;
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .42);
    box-sizing: border-box;
}

.classic-player-card-profile-wrap {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

.classic-player-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 396px;
    max-width: 100%;
    min-height: 156px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid rgba(126, 255, 255, 0.55);
    border-radius: 6px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.34), transparent 28%),
        linear-gradient(145deg, #05090d 0%, #17252a 44%, #020506 100%);
    box-shadow:
        0 0 0 1px #1f0d04,
        0 12px 22px rgba(0, 0, 0, 0.36),
        0 0 22px rgba(0, 193, 255, 0.22);
    box-sizing: border-box;
    color: #f7ffff;
    font-size: 11px;
    line-height: 1;
    text-align: center;
}

.classic-player-card > span {
    display: block;
    width: 100%;
}

.classic-player-card .playercard-canvas {
    display: block;
    width: 370px;
    height: 130px;
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 3px;
}

.classic-player-card-actions {
    width: 100%;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .58);
    box-sizing: border-box;
}

.classic-player-card-primary-actions,
.classic-player-card-visibility {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 12px;
    width: 100%;
}

.classic-player-card-actions .change-btn {
    width: 100%;
    min-height: 38px;
    border: 0;
    background: #F07819;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
}

.classic-player-card-actions .change-btn:hover,
.classic-player-card-actions .change-btn.active {
    filter: brightness(.94);
}

.classic-player-card-actions .change-btn:disabled {
    opacity: .65;
    cursor: wait;
}

.classic-player-card-status {
    color: #000;
    margin: 0;
    text-align: center;
}

.profile-box h3 {
    font-style: italic;
    text-transform: uppercase;
    background-color: #F07819;
    color: white;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.profile-box:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0px rgb(240 120 25);
}

.profile-content {
    padding: 0.75rem 1rem;
    color: white;
}

/* Profile header with avatar */
.profile-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0;
}

.profile-avatar-container {
    position: relative;
    width: 75px;
    height: 75px;
}

.profile-avatar {
    width: 75px;
    height: 75px;
    border: 1px solid #F07819;
    object-fit: cover;
}

.no-border {
    border: none;
}

.profile-avatar-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 89px;
    height: 90px;
    top: -6px;
    left: -7px;
    pointer-events: none;
}

.profile-border {
    width: 100px;
    height: 100px;
    border: 1pix;
    flex-shrink: 0;
}

.result svg:hover {
    opacity: 1;
}

.winner {
    color: #F07819;
}

.winner svg {
    color: #F07819;
}

/* Add styling for losses */
.loser {
    color: rgb(224, 224, 224);
}

.loser svg {
    color: rgb(224, 224, 224);
}


.clan-info {
    flex: 1;
}

.clan-avatar {
    width: 75px;
    height: 75px;
    border: 1px solid #F07819;
    margin-left: auto;
}

.info-section {
    margin-bottom: 0;
}

.info-row {
    display: flex;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    line-height: 1.5;
    gap: 0.5rem;
}

.info-row:last-child {
    border-bottom: none;
}

.profile-country-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

.profile-country-value img {
    width: 24px;
    height: 16px;
    border: 0;
    box-shadow: none;
    object-fit: cover;
}

#containerprofile {
    width: 100%;
    max-width: 900px;
    line-height: 16px;
    float: left;
    margin-left: 69px;
    margin-top: 40px;
    min-height: 1800px
}


.profile-boxusername {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    max-height: 155px;
    min-height: 155px;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.profile-boxusername:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0px rgb(240 120 25);
}

.coloronline {
    background-color: #F07819;
    color: #fff;
    position: absolute;
    margin-left: 702px;
    margin-top: 100px;
    font-family: Trebuchet MS;
    font-weight: 700;
    font-style: italic;
    font-size: 12px;
    padding: 5px;
}


.colorlastseen {
    background-color: #F07819;
    position: absolute;
    font-family: Trebuchet MS;
    font-weight: 700;
    font-style: italic;
    color: white;
    font-size: 13px;
    min-width: 280px;
}

.profile-boxclan {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    max-width: 435px;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.profile-boxclan:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0px rgb(240 120 25);
}

.profile-boxclan h3 {
    font-style: italic;
    text-transform: uppercase;
    background-color: #F07819;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: .75rem 1rem;
}


.profile-boxpersonal {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    max-width: 435px;
    min-width: 435px;
    margin-top: -232px;
    margin-left: 443px;
    position: absolute;
    max-height: 214px;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.profile-boxpersonal:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0px rgb(240 120 25);
}

.profile-boxpersonal h3 {
    font-style: italic;
    text-transform: uppercase;
    background-color: #F07819;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: .75rem 1rem;
}

.info-rowclan {
    display: flex;
    color: #fff;
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    position: absolute;
    width: auto;
    padding: 3px 5px 3px 3px
}

.profile-boxladder {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    background-image: none;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 762px 404px;
    min-height: 500px;
    max-height: 500px;
    position: relative;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.profile-boxladder::before {
    display: none;
    content: "";
    position: absolute;
    top: 58px;
    left: 50%;
    width: 762px;
    height: 404px;
    background: url('https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/profile-ladder-bg-orange-fruit-20260822-1.png') center/contain no-repeat;
    transform: translateX(-50%);
    z-index: 1;
}

.profile-ladder-sections {
    position: absolute;
    top: 58px;
    left: 50%;
    width: 762px;
    height: 404px;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}

.profile-boxladder .profile-content,
.admiral-profile-boxladder .profile-content,
.yonko-profile-boxladder .profile-content,
.king-profile-boxladder .profile-content {
    position: relative;
    z-index: 2;
}

.profile-boxladder h3 {
    position: relative;
    z-index: 3;
}



.profile-boxladder h3 {
    font-style: italic;
    text-transform: uppercase;
    background-color: #F07819;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: .75rem 1rem
}


.info-sectionladder {
    position: absolute;
    top: 30px;
    left: 50%;
    width: 762px;
    height: 404px;
    transform: translateX(-50%);
    z-index: 2;
}



.info-rowlevel {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 130px;
    margin-top: 30px;
    text-align: center;
    position: absolute;
    max-width: 30px;
    min-width: 30px;
    justify-content: center;
}

.info-rowgamerank {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 322px;
    margin-top: 30px;
    text-align: center;
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    justify-content: center;
}

.info-rowtitle {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 600px;
    margin-top: 30px;
    text-align: center;
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    justify-content: center;
}

.info-rowexp {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 44px;
    margin-top: 117px;
    text-align: center;
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    justify-content: center;
}

.info-rowladderrank {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 322px;
    margin-top: 117px;
    text-align: center;
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    justify-content: center;
}


.info-rowwinrate {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 600px;
    margin-top: 117px;
    text-align: center;
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    justify-content: center;
}


.info-rowwins {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 130px;
    margin-top: 290px;
    text-align: center;
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    justify-content: center;
}


.info-rowlosses {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 520px;
    margin-top: 290px;
    text-align: center;
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    justify-content: center;
}

.info-rowstreak {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 40px;
    margin-top: 206px;
    text-align: center;
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    justify-content: center;
}

.info-rowhighstreak {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 320px;
    margin-top: 206px;
    text-align: center;
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    justify-content: center;
}

.info-rowhighlevel {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 600px;
    margin-top: 206px;
    text-align: center;
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    justify-content: center;
}

.info-rowpoints {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 130px;
    margin-top: 370px;
    text-align: center;
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    justify-content: center;
}

.info-rowpass {
    display: flex;
    padding: .25rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    font-size: .9rem;
    line-height: 1.5;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: #F07819;
    left: 520px;
    margin-top: 370px;
    text-align: center;
    position: absolute;
    max-width: 200px;
    min-width: 200px;
    justify-content: center;
}

.profile-boxladder .profile-content {
    position: absolute;
    top: 58px;
    left: 50%;
    width: 762px;
    height: 404px;
    padding: 0;
    transform: translateX(-50%);
    z-index: 2;
}

.info-sectionladder {
    position: absolute;
    inset: 0;
    width: 762px;
    height: 404px;
    transform: none;
}

.info-sectionladder > div[class^="info-row"] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-width: 0;
    max-width: none;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0 8px;
    border: 0;
    box-sizing: border-box;
    color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    text-align: center;
    gap: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-rowlevel,
.info-rowexp,
.info-rowstreak {
    left: 0;
    width: 210px;
}

.info-rowgamerank,
.info-rowladderrank,
.info-rowhighstreak {
    left: 275px;
    width: 210px;
}

.info-rowtitle,
.info-rowwinrate,
.info-rowhighlevel {
    left: 552px;
    width: 210px;
}

.info-rowlevel,
.info-rowgamerank,
.info-rowtitle {
    top: 40px;
}

.info-rowexp,
.info-rowladderrank,
.info-rowwinrate {
    top: 126px;
}

.info-rowstreak,
.info-rowhighstreak,
.info-rowhighlevel {
    top: 216px;
}

.info-rowwins,
.info-rowpoints {
    left: 0;
    width: 381px;
}

.info-rowlosses,
.info-rowpass {
    left: 388px;
    width: 374px;
}

.info-rowwins,
.info-rowlosses {
    top: 298px;
}

.info-rowpoints,
.info-rowpass {
    top: 379px;
}

.pa-fame-points-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
}

.pa-fame-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.pa-fame-number {
    line-height: 1;
}

.pa-fame-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
}

.pa-fame-stars img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    display: block;
}

.pa-give-fame-button {
    appearance: none;
    border: 1px solid #F07819;
    background: #F07819;
    color: #fff;
    cursor: pointer;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    padding: 4px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.pa-give-fame-button:hover:not(:disabled) {
    background: #111;
    border-color: #111;
}

.pa-give-fame-button:disabled {
    cursor: wait;
    opacity: .7;
}

.pa-prestige-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
}

.pa-prestige-value img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

#contentladder {
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 14px;
    color: #000;
    padding: 10px;
    background-color: #ffffffc9;
    border: 1px solid #000;
    margin: 0 auto 1rem;
    color: #000;
    margin-top: 10px;
}

.label {
    color: black;
    width: 120px;
    flex-shrink: 0;
}

.value {
    color: black;
    display: flex;
    align-items: center;
    gap: .5rem
}

.value img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Adjust spacing for clan info */
.clan-info .info-row {
    margin-bottom: 0.15rem;
}

.clan-info .info-row:last-child {
    margin-bottom: 0;
}

#clanrecruit {
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 11px;
    color: #000;
    padding: 10px;
    background-color: #ffffffc9;
    border: 1px solid #000;
    display: inline-block;
}


.clan-input {
    background-color: #fff;
    color: #000;
    border: 1px solid #2e3b45;
    padding: 5px 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box
}

.color2 td span {
    padding: 0 4px 1px;
    margin: 1px 0;
    font-size: 13px;
    color: #000
}

.home-input3 {
    background-color: #fff;
    color: #000;
    border: 1px solid #2e3b45;
    padding: 5px 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    width: 97%;
    box-sizing: border-box
}


/* Games section styling */
.games-section {
    margin-bottom: 1.5rem;
}

.games-section h4 {
    color: #000000;
    font-size: .9rem;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}

.game-row {
    display: grid;
    grid-template-columns: minmax(210px, 31%) minmax(220px, 1fr) minmax(210px, 31%);
    align-items: center;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    min-height: 32px;
    background-image: url('https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/profile-game-row-bg-orange-fruit-20260822-1.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 0 4px;
    padding: 0;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.game-list {
    width: 100%;
}

.game-row:hover {
    transform: translate(2px, 2px);
}


.initial-chars-grid label {
    background-color: #58585800 !important;
    border: 1px solid black;
}

.initial-chars-grid div {
    color: black !important;
}

.initial-chars-grid img {
    border: 1px solid black !Important;
}

.avatar-form button {
    color: white !important;
}

.match {
    color: #000;
    text-align: center;
    min-width: 0;
    padding: 4px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.date {
    color: #fff;
    text-align: center;
    min-width: 0;
    padding: 4px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}






.result {
    position: relative;
    text-align: center;
    min-width: 0;
    padding: 4px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block !important
}



.winner {
    color: #ffffff;
}

/* Add styling for losses */
.loser {
    color: #ffffff;
}

@media (max-width: 760px) {
    .game-row {
        grid-template-columns: 1fr;
        background-image: none;
        background-color: rgba(255, 255, 255, .82);
        border: 1px solid #F07819;
        min-height: 0;
        padding: 6px 8px;
    }

    .game-row .date,
    .game-row .match,
    .game-row .result {
        color: #000;
        padding: 2px 0;
        text-align: left;
        white-space: normal;
    }

    .game-row .result {
        color: #F07819;
    }
}

/* Main content area */
.main-content {
    flex: 1;
    min-width: 0;
    /* Prevents flex item from overflowing */
    background-color: #ffffffc9;
    border: 1px solid #000;
}

/*--------------Admiral theme*/

.admiral-profile-content2 {
    color: #fff;
    padding: .75rem 1rem;
    background-image: url(https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/image_1769570599871-1f328e7aa7.png);
    background-repeat: no-repeat;
    background-position: 100% 0;
    min-height: 155px
}

.admiral-profile-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
}

.admiral-profile-box:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0 #F07819
}

.admiral-profile-box h3 {
    font-style: italic;
    text-transform: uppercase;
    background-color: #F07819;
    color: #fff;
    margin: 0;
    padding: .75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    transition: all .2s cubic-bezier(.25, .8, .25, 1)
}

.admiral-game-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    font-size: 18px;
    font-weight: 700;
    padding: 10px;
    width: 850px;
    max-width: 850px;
    height: 42px;
    background-image: url(https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/image_1769571640973-dfa5a46b96.png);
    margin-bottom: -15px;
    background-repeat: no-repeat;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.admiral-game-row:hover {
    transform: translate(2px, 2px);
}

.admiral-profile-boxusername:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0 #F07819
}

.admiral-colorlastseen {
    background-color: #F07819;
    color: #fff;
    position: absolute;
    font-family: Trebuchet MS;
    font-weight: 700;
    font-size: 13px;
    min-width: 280px;
    font-style: italic
}

.admiral-coloronline {
    position: absolute;
    padding: 5px;
    margin-left: 702px;
    margin-top: 100px;
    background-color: #F07819;
    color: #fff;
    position: absolute;
    font-family: Trebuchet MS;
    font-weight: 700;
    font-style: italic;
    font-weight: 700;
    font-style: italic;
    font-size: 12px;
    padding: 5px;
}

.admiral-profile-boxusername {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    max-height: 155px;
    min-height: 155px;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.admiral-valueusername {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-weight: 700;
    font-size: 28px;
    position: relative;
    color: #F07819;
    top: 33px;
    position: relative;
    margin-left: 5px
}

.admiral-valuesiterank {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-weight: 700;
    margin-top: -44px;
    position: relative;
    font-size: 17px;
    font-style: italic;
    color: #F07819;
    margin-left: 5px
}

.admiral-valuenonenone {
    color: #F07819;
}

.admiral-bio-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
    overflow: hidden;
}


.admiral-bio-box:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0 #F07819
}

.admiral-bio-header {
    background-color: #F07819;
    color: #fff;
    padding: 10px 15px;
    font-style: italic;
    font-weight: 700;
    font-size: 14px
}

.admiral-bio-title {
    color: #F07819;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px
}


.admiral-info-rowposts {
    display: flex;
    color: #ffffff;
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    padding: 3px;
    margin-top: 20px;
    position: absolute;
    width: auto;
    padding-right: 5px;
}

.admiral-info-rowberries {
    display: flex;
    color: #fff;
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-weight: 700;
    font-style: italic;
    position: absolute;
    font-size: 14px;
    padding: 3px;
    margin-top: 50px;
    margin-left: 310px;
    width: auto;
    padding-right: 5px;
}

.admiral-info-rowregistered {
    display: flex;
    font-size: .9rem;
    color: #ffffff;
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    padding: 3px;
    margin-top: 50px;
    position: absolute;
    padding-right: 60px;
    min-width: 220px;
}


.admiral-info-rowsubs {
    display: flex;
    color: #fff;
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-weight: 700;
    font-style: italic;
    position: absolute;
    font-size: 14px;
    padding: 3px;
    margin-top: 50px;
    margin-left: 475px;
    width: auto;
    padding-right: 5px;
}

.admiral-profile-boxpersonal {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    max-width: 435px;
    min-width: 435px;
    margin-top: -228px;
    margin-left: 443px;
    position: absolute;
    max-height: 214px;
    height: 210px;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.admiral-profile-boxpersonal:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0 #F07819
}

.admiral-profile-boxpersonal h3 {
    font-style: italic;
    background-color: #F07819;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: .75rem 1rem;
}

.admiral-profile-boxclan {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    max-width: 435px;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.admiral-profile-boxclan:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0 #F07819
}

.admiral-profile-boxclan h3 {
    font-style: italic;
    text-transform: uppercase;
    background-color: #F07819;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: .75rem 1rem
}

.admiral-clan-info {
    flex: 1;
    margin-bottom: 0;
    margin-bottom: 0.15rem;
}

.admiral-clan-info a {
    color: #F07819 !important;
}

.admiral-clan-avatar {
    width: 75px;
    height: 75px;
    border: #F07819 1px solid !important;
    margin-left: auto;
}

.admiral-website-link {
    color: #F07819;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.admiral-website-link:hover {
    color: #F07819;
}

.admiral-profile-boxladder {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    background-image: url(https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/Adimral.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 762px 325;
    min-height: 500px;
    max-height: 500px;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.admiral-profile-boxladder:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0px #F07819
}

.admiral-profile-boxladder h3 {
    font-style: italic;
    text-transform: uppercase;
    background-color: #F07819;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: .75rem 1rem
}



/**------------------admiral theme*/


/*Younkou Theme*/
.yonko-profile-content2 {
    color: #fff;
    padding: .75rem 1rem;
    background-image: url(https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/image_1769573936624-f9c340ef20.png);
    background-repeat: no-repeat;
    background-position: 100% 0;
    min-height: 155px
}

.yonko-profile-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
}

.yonko-profile-box:hover {
    transform: translate(2px, 2px);
    border-color:#202020;
    box-shadow: 3px 3px 0 #202020;
}

.yonko-profile-box h3 {
    font-style: italic;
    text-transform: uppercase;
    background-color:#202020;
    color: #fff;
    margin: 0;
    padding: .75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    transition: all .2s cubic-bezier(.25, .8, .25, 1)
}

.yonko-game-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    font-size: 18px;
    font-weight: 700;
    padding: 10px;
    width: 850px;
    max-width: 850px;
    height: 42px;
    background-image: url(https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/image_1769573955846-b784e3e94a.png);
    margin-bottom: -15px;
    background-repeat: no-repeat;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.yonko-game-row:hover {
    transform: translate(2px, 2px);
}

.yonko-profile-boxusername:hover {
    transform: translate(2px, 2px);
    border-color:#202020;
    box-shadow: 3px 3px 0 #202020;
}

.yonko-colorlastseen {
    background-color: #202020;
    color: #fff;
    position: absolute;
    font-family: Trebuchet MS;
    font-weight: 700;
    font-size: 13px;
    min-width: 280px;
    font-style: italic
}

.yonko-coloronline {
    position: absolute;
    padding: 5px;
    margin-left: 702px;
    margin-top: 100px;
    background-color: #202020;
    color: #fff;
    position: absolute;
    font-family: Trebuchet MS;
    font-weight: 700;
    font-style: italic;
    font-weight: 700;
    font-style: italic;
    font-size: 12px;
    padding: 5px;
}

.yonko-profile-boxusername {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    max-height: 155px;
    min-height: 155px;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.yonko-valueusername {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-weight: 700;
    font-size: 28px;
    position: relative;
    color: #202020;
    top: 33px;
    position: relative;
    margin-left: 5px
}

.yonko-valuesiterank {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-weight: 700;
    margin-top: -44px;
    position: relative;
    font-size: 17px;
    font-style: italic;
    color: #202020;
    margin-left: 5px
}

.yonko-valuenonenone {
    color: #202020;
}

.yonko-bio-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
    overflow: hidden;
}


.yonko-bio-box:hover {
    transform: translate(2px, 2px);
    border-color: #202020;
    box-shadow: 3px 3px 0 #202020;
}

.yonko-bio-header {
    background-color: #202020;
    color: #fff;
    padding: 10px 15px;
    font-style: italic;
    font-weight: 700;
    font-size: 14px
}

.yonko-bio-title {
    color: #202020;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px
}


.yonko-info-rowposts {
    display: flex;
    color: #ffffff;
    background-color: #202020;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    padding: 3px;
    margin-top: 20px;
    position: absolute;
    width: auto;
    padding-right: 5px;
}

.yonko-info-rowberries {
    display: flex;
    color: #fff;
    background-color: #202020;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-weight: 700;
    font-style: italic;
    position: absolute;
    font-size: 14px;
    padding: 3px;
    margin-top: 50px;
    margin-left: 310px;
    width: auto;
    padding-right: 5px;
}

.yonko-info-rowregistered {
    display: flex;
    font-size: .9rem;
    color: #ffffff;
    background-color: #202020;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    padding: 3px;
    margin-top: 50px;
    position: absolute;
    padding-right: 60px;
    min-width: 220px;
}


.yonko-info-rowsubs {
    display: flex;
    color: #fff;
    background-color: #202020;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-weight: 700;
    font-style: italic;
    position: absolute;
    font-size: 14px;
    padding: 3px;
    margin-top: 50px;
    margin-left: 475px;
    width: auto;
    padding-right: 5px;
}

.yonko-profile-boxpersonal {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    max-width: 435px;
    min-width: 435px;
    margin-top: -228px;
    margin-left: 443px;
    position: absolute;
    max-height: 214px;
    height: 210px;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.yonko-profile-boxpersonal:hover {
    transform: translate(2px, 2px);
    border-color: #202020;
    box-shadow: 3px 3px 0 #202020;
}

.yonko-profile-boxpersonal h3 {
    font-style: italic;
    background-color: #202020;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: .75rem 1rem;
}

.yonko-profile-boxclan {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    max-width: 435px;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.yonko-profile-boxclan:hover {
    transform: translate(2px, 2px);
    border-color: #202020;
    box-shadow: 3px 3px 0 #202020;
}

.yonko-profile-boxclan h3 {
    font-style: italic;
    text-transform: uppercase;
    background-color: #202020;;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: .75rem 1rem
}

.yonko-clan-info {
    flex: 1;
    margin-bottom: 0;
    margin-bottom: 0.15rem;
}

.yonko-clan-info a {
    color: #202020 !important;
}

.yonko-clan-avatar {
    width: 75px;
    height: 75px;
    border: #202020 1px solid !important;
    margin-left: auto;
}

.yonko-website-link {
    color: #202020;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.yonko-website-link:hover {
    color: #202020;;
}

.yonko-profile-boxladder {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    background-image: url(https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/Yonko.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 762px 325;
    min-height: 500px;
    max-height: 500px;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.yonko-profile-boxladder:hover {
    transform: translate(2px, 2px);
    border-color: #202020;
    box-shadow: 3px 3px 0px #202020;
}

.yonko-profile-boxladder h3 {
    font-style: italic;
    text-transform: uppercase;
    background-color: #202020;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: .75rem 1rem
}
/*---*/

.king-profile-boxladder {
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    background-image: url(https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/Pirate%20King.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 762px 325;
    min-height: 500px;
    max-height: 500px;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.king-profile-boxladder:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0px rgb(240 120 25);
}

.king-profile-boxladder h3 {
    font-style: italic;
    text-transform: uppercase;
    background-color: #F07819;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    padding: .75rem 1rem
}

.king-profile-boxladder:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0px rgb(240 120 25);
}

.admiral-game-row,
.yonko-game-row {
    display: grid;
    grid-template-columns: minmax(210px, 31%) minmax(220px, 1fr) minmax(210px, 31%);
    align-items: center;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    min-height: 32px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 0 4px;
    padding: 0;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

/* Responsive layout */
@media (max-width: 768px) {
    .content {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        margin-bottom: 1rem;
    }

    .main-content {
        width: 100%;
    }

}

#buddycontainer {
    width: 100%;
    max-width: 700px;
    line-height: 16px;
    float: left;
    margin-top: 9px;
    min-height: 1800px;
}

/* Content layout */
.content {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    gap: 1rem;
}

.sidebar {
    width: 300px;
    flex-shrink: 0;
}

.account-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-links li {
    margin-bottom: 0.5rem;
}

.account-links a {
    color: white !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: .5rem;
    transition: all .3s ease;
    background-color: #F07819;
}

.account-links a:hover {
    color: black !important;
    background-color: rgba(240, 120, 25, 0.1);
}

.account-links i {
    width: 20px;
    margin-right: 15px !important;
    text-align: center;
    font-size: 20px !important;
}

.new-feature {
    background-color: rgba(60, 255, 58, 0.1);
    position: relative;
}

.new-badge {
    position: absolute;
    right: 1230px;
    margin-top: 20px;
    transform: translateY(-50%);
    background-color: white;
    color: #1a2730;
    padding: 0.2rem 0.4rem;
    border-radius: 2px;
    font-size: 0.7rem;
    font-weight: bold;
}

.logout {
    color: white !important;
}

.logout:hover {
    background-color: rgba(255, 71, 87, 0.1) !important;
}

/*----- login */

.nb {
    border: 0;
    border-spacing: 0px;
    _border-collapse: collapse;
}

.nowrap {
    white-space: nowrap;
}

#advertisement {
    background-color: #252525;
}

#rightlay {
    background-color: #F07819;
}

/*-----------------*/
/* Hamburger menu styles */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    margin-right: 20px;
    position: relative;
    outline: none;
}

.hamburger-line {
    width: 30px;
    height: 3px;
    background: white;
    transition: all 0.3s linear;
    position: relative;
    border-radius: 2px;
    transform-origin: center;
}

.hamburger-menu.open .hamburger-line:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger-menu.open .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.open .hamburger-line:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Mobile menu styles */
.nav-links {
    transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
    .hamburger-menu {
        display: flex;
    }

    .nav-links {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: #F07819;
        width: 100%;
        text-align: center;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
        margin: 0;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .nav-links.nav-links-open {
        left: 0;
    }

    .nav-links li {
        margin: 1rem 0;
    }

    .nav-links li:not(:last-child)::after {
        display: none;
    }

    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Mobile menu item styles */
    .nav-links a {
        display: block;
        padding: 1rem;
        font-size: 1.1rem;
        color: white;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }

    .nav-links a:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .nav-links a::before {
        display: none;
    }

    .start-playing-btn {
        margin-top: 1rem;
        background: linear-gradient(to bottom, #fff, #f5f5f5);
        color: #F07819 !important;
        padding: 0.75rem 2rem;
        font-weight: bold;
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
        display: inline-block;
    }
}

.main-nav {
    background: linear-gradient(to bottom, #F07819, #F07819);
    padding: 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.1);
}


.main-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: repeat;
    opacity: 0.3;
    pointer-events: none;

    animation: slidePattern 20s linear infinite;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}


.nav-links {
    font-family: Trebuchet MS, verdana, sans-serif;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.nav-links li {
    position: relative;
}


.nav-links li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
}


.nav-links a,
.nav-links .main-navigate-label {

    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.nav-links .main-navigate-label {
    display: inline-block;
}


.nav-links a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: white;
    transform: scaleX(0);
    transition: transform 0.3s;
    z-index: 2;
}


.nav-links a:hover::before {
    transform: scaleX(1);
}


.nav-links a.active {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}


.start-playing-btn {
    background: linear-gradient(to bottom, #fff, #f5f5f5);
    color: #F07819 !important;
    padding: 0.5rem 1.5rem;
    font-weight: bold;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}


.start-playing-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(to bottom, #fff, #fff);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}


@keyframes slidePattern {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100px 100px;
    }
}

@media screen and (max-width: 768px) {
    .hamburger-menu {
        display: flex;
    }

    .nav-links {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: #F07819;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
        margin: 0;
    }

    .nav-links.nav-links-open {
        left: 0;
    }

    .nav-links li {
        margin: 1rem 0;
    }

    .nav-links li:not(:last-child)::after {
        display: none;
    }

    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

@media screen and (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0;
    }

    .hero {
        height: 400px;
    }

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

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

    .update-header h2 {
        font-size: 1.5rem;
    }

    .login-box,
    .screenshot-box,
    .newsimages-box,
    .new-player-box,
    .ranking-box {
        margin-bottom: 1rem;
    }
}

#sidebar {
    width: 300px;
    margin-top: 40px;
    margin-left: -20px;
    flex-shrink: 0;
}

.screenshot-box,
.newsimages-box,
.new-player-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    width: 250px;
    margin: 0 auto 1rem;
    padding: .8rem;
    color: #000;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.screenshot-box:hover,
.newsimages-box:hover,
.new-player-box:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0px rgb(240 120 25);
}

#mailcontainer {
    width: 900px;
    line-height: 16px;
    float: left;
    margin-top: 10px
}

.pm-preview {
    width: 842px;
}

.pmbutton2 {
    height: 40px;
    padding: 0 0 1px;
    background-color: #F07819;
    color: #fff;
    font-size: 14px;
    _padding: 0 .25em 0 .25em;
    _width: auto;
    _overflow: visible;
    width: 70px;
    margin-top: -120px;
    left: 620px;
    position: relative;
    border: 1px solid #2e3b45;
}

.login-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    width: 250px;
    margin: 0 auto 1rem;
    padding: .8rem;
    color: #000;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.login-box:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0px rgb(240 120 25);
}

.login-box h3,
.screenshot-box h3,
.newsimages-box h3,
.new-player-box h3 {
    color: white;
    font-style: italic;
    text-transform: uppercase;
    background-color: #F07819;
    margin: -0.8rem -0.8rem 0.8rem -0.8rem;
    padding: 0.4rem 0.8rem;
}

.new-player-box p {
    color: black;
}

.pa-support-discord-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 2px;
    line-height: 0;
}

.pa-support-discord-button img {
    display: block;
    max-width: 150px;
    height: auto;
    border: 0;
}

.pa-partner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 10px;
}

.pa-partner-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    min-height: 32px;
    padding: 0 12px;
    background: #F07819;
    color: #fff !important;
    border: 1px solid #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

.pa-partner-button:hover {
    background: #fff;
    color: #F07819 !important;
}

.latest-forum-posts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.latest-forum-post {
    display: block;
    border: 1px solid rgba(240, 120, 25, .65);
    background: rgba(255, 255, 255, .72);
    color: #111;
    padding: 8px;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.latest-forum-post:hover {
    transform: translateX(2px);
    background: rgba(255, 255, 255, .95);
    border-color: #F07819;
}

.latest-forum-title {
    display: block;
    color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
}

.latest-forum-meta {
    display: block;
    margin-top: 3px;
    color: #111;
    font-size: 12px;
    font-weight: 700;
}

.latest-forum-excerpt {
    display: -webkit-box;
    margin-top: 5px;
    color: #111;
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.latest-forum-empty {
    margin: 0;
    color: #111;
    font-size: 13px;
    font-style: italic;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 90%;
    max-width: 200px;
    padding: 0.4rem;
    margin-bottom: 0.5rem;
    border: 1px solid #000000;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
}

.disabled-link {
    pointer-events: none;
    /* impede clique */
    color: gray !important;
    /* texto cinza */
    opacity: 0.6;
    /* deixa tudo apagado */
    cursor: default;
    /* cursor padrão */
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    color: white;
}

.login-options button {
    background-color: #F07819;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}


.login-options .register-btn {
    background-color: #F07819;
    color: white;
    border: none;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    margin-right: 0px;
}

.register-btn {
    padding: 7px !important;
    margin-right: 0;
    font-family: sans-serif !important;
    color: white !important;
    font-size: 15px !important;
}

.login-options label {
    color: #999;
}

@media (max-width: 760px) {
    .admiral-game-row,
    .yonko-game-row {
        grid-template-columns: 1fr;
        background-image: none;
        background-color: rgba(255, 255, 255, .82);
        border: 1px solid currentColor;
        min-height: 0;
        padding: 6px 8px;
    }

    .admiral-game-row .date,
    .admiral-game-row .match,
    .admiral-game-row .result,
    .yonko-game-row .date,
    .yonko-game-row .match,
    .yonko-game-row .result {
        color: #000;
        padding: 2px 0;
        text-align: left;
        white-space: normal;
    }

    .admiral-game-row .result {
        color: #F07819;
    }

    .yonko-game-row .result {
        color: #202020;
    }
}

.login-status {
    color: #F07819;
    font-size: 12px;
    font-weight: bold;
    margin: 4px 0 8px;
}

.forgot-link {
    color: #F07819;
    text-decoration: none;
    font-size: 0.9rem;
}


.hero-background {
    position: absolute;
    top: 0;
    left: 850px;
    right: 0;
    bottom: 0;
    opacity: 1;
    pointer-events: none;
    width: 320px;
    height: 320px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;

}

.hero-background.hero-background-wide-icon {
    top: 72px;
    left: calc(56% + 54px);
    right: auto;
    bottom: auto;
    width: 560px;
    height: 170px;
    transform: translateX(-50%);
    background-position: center center;
}

.hero-background.hero-background-leaf-icon {
    top: -55px;
}

.hero-background.hero-background-akatsuki-cloud {
    top: -40px;
}

.hero {
    position: relative;
    width: 1687px;
    margin-top: 88px;
    margin-left: -490px;
    height: 360px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1
}

.hero-content {
    position: absolute;
    top: 85%;
    left: 60%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 2;
    padding: 20px;
    width: max-content;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 8px;
    margin-bottom: 1.5rem;
    /* font-style: italic; */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .3);
    font-family: 'Bebas Neue', sans-serif;
}


.hero-subtitle {
    font-size: 1.2rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    margin-top: -25px;
}

.blue {
    color: #F07819;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    font-family: Arial, sans-serif;
    background-color: #252525;
    background-image: url("https://NAOrigins.b-cdn.net/assets/ui/naruto_uzumaki_hidden_leaf_view_by_arthency_dlvlzyt-pre.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.screenshot-box img {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.screenshot-box img:hover {
    transform: scale(1.02);
}

.newsimages-box img {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.newsimages-box img:hover {
    transform: scale(1.02);
}

.pa-top-fame-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pa-top-fame-row {
    display: grid;
    grid-template-columns: 34px 42px 1fr;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px;
    border: 1px solid rgba(240, 120, 25, .55);
    background: rgba(255, 255, 255, .72);
    color: #111;
    text-decoration: none;
}

.pa-top-fame-row:hover {
    background: rgba(255, 255, 255, .94);
    border-color: #F07819;
    transform: translateX(2px);
}

.pa-top-fame-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F07819;
    color: #fff;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.pa-top-fame-avatar {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
}

.newsimages-box.pa-top-fame-box .pa-top-fame-avatar-img,
.newsimages-box.pa-top-fame-box .pa-top-fame-frame {
    position: absolute;
    display: block;
    width: 38px;
    height: 38px;
    cursor: default;
    transition: none;
}

.newsimages-box.pa-top-fame-box .pa-top-fame-avatar-img {
    inset: 0;
    object-fit: cover;
    border: 1px solid #111;
    z-index: 1;
}

.newsimages-box.pa-top-fame-box .pa-top-fame-frame {
    top: -5px;
    left: -5px;
    width: 48px;
    height: 48px;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

.newsimages-box.pa-top-fame-box .pa-top-fame-avatar-img:hover,
.newsimages-box.pa-top-fame-box .pa-top-fame-frame:hover {
    transform: none;
}

.pa-top-fame-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pa-top-fame-name {
    overflow: hidden;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pa-top-fame-score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #F07819;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.pa-top-fame-score .pa-fame-points-value,
.pa-top-fame-score .pa-fame-display {
    gap: 3px;
}

.pa-top-fame-score .pa-fame-stars img {
    width: 12px;
    height: 12px;
}


/* Add lightbox styles */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    cursor: pointer;
}

.lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.lightbox img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border: 2px solid #F07819;
    box-shadow: 0 0 20px rgba(240, 120, 25, 0.3);
}


.right-sidebar {
    position: absolute;
    width: 350px;
    height: 400px;
    margin-left: 790px;
    margin-top: 48px;
    flex-shrink: 0;
}

/*-----------------*/
.tournament-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.tournament-box:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0px rgb(240 120 25);
}

.tournament-box h3 {
    background: linear-gradient(to right, #F07819, #F07819);
    color: white;
    padding: 0.8rem 1rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.tournament-heading {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    background: linear-gradient(to right, #F07819, #F07819);
    min-height: 48px;
}

.tournament-heading h3 {
    margin: 0;
    padding: .78rem .25rem;
    text-align: center;
    background: transparent;
}

.scroll-btn {
    appearance: none;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 3px;
}

.scroll-btn:hover {
    color: #F07819;
}

.event-carousel {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 10px 14px 14px;
    box-sizing: border-box;
}

.event-card {
    flex: 0 0 100%;
    min-width: 0;
    width: 100%;
    padding: .75rem 0;
    border-bottom: 1px solid #2a3740;
    box-sizing: border-box;
    white-space: normal;
    overflow: hidden;
}

.event-card:last-child {
    border-bottom: none;
}

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 8px;
    min-width: 0;
}

.event-header h4 {
    color: black;
    font-size: 1.1rem;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.event-tag {
    background-color: #F07819;
    color: #fff;
    padding: .2rem .5rem;
    font-size: 11px !important;
    border-radius: 2px;
    flex: 0 0 auto;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-tag.wars {
    background-color: #F07819;
}

.event-date {
    color: #F07819;
    font-size: 13px !important;
    font-weight: bold;
    margin-bottom: .5rem
}

.event-description {
    color: #000;
    font-size: 15px !important;
    line-height: 1.4;
    margin-bottom: 1rem;
    overflow-wrap: anywhere;
}

.event-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.event-images img {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border: 1px solid #F07819ff;
    box-sizing: border-box;
}

.event-button {
    display: inline-block;
    background: linear-gradient(to right, #F07819, #F07819);
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.event-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(240, 120, 25, 0.2);
}

/*----SECTIONS -------*/
.rankings-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ranking-box:hover {
    transform: translate(2px, 2px);
    border-color: #F07819;
    box-shadow: 3px 3px 0px rgb(240 120 25);
}

.ranking-box {
    background-color: #ffffffc9;
    border: 1px solid #000;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
    /* For the gradient border effect */
}

.ranking-box h3 {
    background: linear-gradient(to right, #F07819, #F07819);
    color: white;
    padding: 0.8rem 1rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.ranking-list {
    list-style: none;
    padding: 1rem;
}

.ranking-list li a {
    color: black !important;
}

span[style*="color:#ccc"] {
    color: black !important;
}

/*------- PASSE DE BATALHA -------*/
.battle-pass-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
    min-height: 1000px;
}

/* TRACK */
.progress-track {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    background: #F07819;
    border-radius: 10px;
    z-index: 1;
    top: auto;
}

/* FILL */
.progress-fill {
    position: absolute;
    top: 0;
    width: 100%;
    background: #F07819;
    border-radius: 10px;
    transition: height 0.35s ease;
}

.reward-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 20px;
}

.reward-row {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.reward-card {
    width: 140px;
    height: 205px;
    background-color: #f3f3f3;
    border: 1px solid #F07819;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5px;
    position: relative;
    transition: all .3s ease
}

.reward-card.owned {
    opacity: 0.5;
    transform: scale(1.05);
}

.reward-card.locked-pass {
    /*opacity: 0.4;*/
    opacity: 0.9;
    cursor: not-allowed;
}

.reward-card-empty {
    width: 140px;
    visibility: hidden;
    /* ocupa o espaço mas não aparece */
    height: 205px;
}

.locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.reward-image2 {
    width: 75px;
    height: auto;
    display: block;
    margin: 0 auto
}

.reward-icon {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    color: #0f1c23;
    border: 1px solid #000000;
    margin-top: 5px;
}

    .reward-name {
        margin-top: 4px !important;
        font-size: 22px !important;
        font-weight: 600 !important;
        color: #000000 !important;
        text-align: center !important;
        word-wrap: break-word !important;
        line-height: 25px !important;
    }

.reward-status {
    font-size: 16px;
    text-align: center;
    margin-top: -15px;
    color: #F07819;
    font-weight: bold;
}

.reward-button {
    margin-top: 5px;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.reward-button.rank {
    background-color: #F07819;
    color: #0f1c23;
}

.reward-button.coins {
    background-color: #F07819;
    color: white;
}

.reward-button.NameTitle  {
     background-color: #F07819;
     color: white;
 }

.reward-button.border,
.reward-button.skin {
    background-color: #F07819;
    color: white;
}

.reward-price {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    color: #000;
    font-weight: 700;
    margin-top: 45px;
    font-size: 15px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #F07819;
    box-shadow: 0 0 6px rgba(255,0,0,.4);
    transition: all .2s ease
}

.reward-title {}





.reward-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 40px 0;
}



.reward-container {
    position: relative;
    z-index: 2;
}


/*------- PASSE DE BATALHA -------*/

/*----ARchivements*/

.archivement-container {
    margin: 0 auto 0;
    width: calc(100% - 28px);
    padding: 0 0 20px;
    color: #ddd;
    box-sizing: border-box;
}

.section-switcher {
    display: flex;

    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.section-switcher button {
    padding: 6px 20px;
    font-family: 'Arial';
    background: #222;
    border: 1px solid #000000;
    color: white;
    cursor: pointer;
    transition: 0.2s;
}

.section-switcher button:hover {
    background: #e2e2e2;
}

.section-switcher .active-section {
    font-family: 'Arial';
    background: #F07819;
}

.archivement-container h3 {
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 22px;
    text-align: left;
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.3);
}

.archivement-card {
    display: flex;
    align-items: center;
    border: 1px solid #F07819;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    transition: all 0.25s ease;
    box-sizing: border-box;

}

.archivement-card.locked {
    filter: grayscale(1);
    opacity: .52;
    background: rgba(190, 190, 190, .22);
    border-color: #999;
}

.archivement-card.locked:hover {
    border-left: 1px solid #999;
    transform: none;
}

.archivement-card.ready {
    background: rgba(255, 255, 255, .42);
    border-color: #F07819;
    box-shadow: 0 0 0 1px rgba(240, 120, 25, .32), 0 0 14px rgba(240, 120, 25, .3);
    animation: achievementReadyPulse 1.6s ease-in-out infinite;
}

.archivement-card.claimed {
    background: rgba(255, 255, 255, .34);
    border-color: #F07819;
}

.archivement-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-left: 4px solid #F07819;
    transform: scale(1.01);
}

.archivement-badge {
    width: 64px;
    height: 64px;
    margin-right: 15px;
    border-radius: 8px;
    border: 1px solid #666;
    object-fit: cover;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}

.archivement-info h4 {
    color: #F07819;
    font-family: 'Merriweather', serif;
    margin: 0;
    font-size: 18px;
}

.archivement-info p {
    margin: 4px 0;
    font-size: 14px;
    font-family: 'Merriweather', serif;
    color: #F07819
}

.archivement-reward {
    font-size: 13px;
    color: #000000;
    width: auto;
    font-family: 'Merriweather', serif;
    margin-top: 5px;
}

.archivement-progress {
    font-size: 13px;
    font-family: 'Merriweather', serif;
    margin-top: 5px;
    color: #272727;
}

.archivement-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.archivement-info {
    flex: 1;
    min-width: 0;
}

.archivement-claim {
    width: 150px;
    margin-left: 140px;
}


.claim-btn.claimed {
    background-color: #707070;
    color: white;
    cursor: default;
    opacity: 0.8;
}

.achievement-progress-track {
    width: min(260px, 100%);
    height: 8px;
    margin-top: 8px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .68);
    overflow: hidden;
}

.achievement-progress-track span {
    display: block;
    height: 100%;
    background: #F07819;
}

.achievement-claim-button {
    margin-left: auto;
    min-width: 96px;
    border: 1px solid #000;
    background: linear-gradient(90deg, #F07819, #F07819, #F07819);
    background-size: 240% 100%;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .22);
    animation: claimButtonShine 1.4s linear infinite;
}

.achievement-claim-button:hover {
    background-color: #F07819;
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
}

.achievement-claimed-label {
    margin-left: auto;
    min-width: 96px;
    padding: 8px 14px;
    border: 1px solid #000;
    background: #707070;
    color: #fff;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    text-align: center;
}

.achievement-claim-status {
    color: #000;
    margin: 0 0 12px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid #F07819;
}

@keyframes achievementReadyPulse {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(240, 120, 25, .25), 0 0 10px rgba(240, 120, 25, .18);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(240, 120, 25, .65), 0 0 18px rgba(240, 120, 25, .5);
    }
}

@keyframes claimButtonShine {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 240% 50%;
    }
}


/*----ARchivements*/

/*----grand line...*/
.grandline-treasure-wrapper {
    margin-top: 40px;
}

.treasure-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
}

.treasure-box {
    width: 648px;
    padding: 15px;
    /* border: 1px solid #8F3A08; */
    background: hsla(0, 100%, 98%, 0)
}

.treasure-grid {
    display: grid;
    grid-template-columns: repeat(4, 75px);
    grid-template-rows: repeat(2, 75px);
    gap: 10px;
    justify-content: center;
}

.treasure-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.treasure-slot img {
    border: 1px solid #8F3A08;
    width: 75px;
    height: 75px;
}

.treasure-reward-under {
    font-size: 13px;
    font-family: 'Merriweather', serif;
    color: #F07819;
    text-align: center;
}

.empty-slot {
    font-size: 12px;
    color: #999;
}

.treasure-rewards {
    margin-top: 20px;
}

.treasure-reward-item {
    color: #d1d1d1;
    margin: 3px 0;
}

.no-rewards {
    color: #777;
    margin-top: 5px;
}

.grandline-board-custom {
    position: relative;
    /* Necessário para o ponteiro se posicionar dentro */
    display: grid;
    grid-template-columns: repeat(5, 80px);
    grid-gap: 10px;
    justify-content: center;
}

.grandline-pointer {
    width: 40px;
    border: 1px solid #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    height: 40px;
    position: absolute;
    pointer-events: none;
}


.cell {
    width: 75px;
    height: 75px;
    margin-top: 15px;
    height: 80px;
    background: #bd5415;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000000;
    font-family: 'Merriweather', serif;
    color: white;
    font-weight: bold;
}

.cell.empty {
    background: transparent;
    border: none;
}

.cell.start {
    background: #F07819;
    font-family: 'Merriweather', serif;
}

.cell.finish {
    background: #F07819;
    font-family: 'Merriweather', serif;
}

.grandline-missions-wrapper {
    margin-top: 40px;
    width: 90%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.mission-progress {

    position: relative;
    left: 490px;
    top: 19px;
    font-size: 14px;
    font-weight: bold;
    color: #8F3A08;
    font-family: 'Merriweather', serif;
}

.missions-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #F07819;
    text-transform: uppercase;
    padding-bottom: 5px;
}

.mission-card {
    margin-top: 10px;
    background: #f8f8f880;
    cursor: default;
    height: 150px;
    border: 1px solid #d4b15f;
    margin-bottom: 15px;
}

.mission-name {
    font-size: 18px;
    margin-left: 10px;
    font-family: 'Merriweather', serif;
    margin-top: 5px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #F07819;
}

.mission-description {
    font-size: 14px;
    margin-left: 10px;
    font-family: 'Merriweather', serif;
    line-height: 1.4;
    color: #F07819;
    opacity: 0.9;
}

.mission-completed {
    margin-left: 490px;
    font-family: 'Merriweather', serif;
    position: relative;
    top: 20px;
    color: #F07819;
    font-weight: bold;
    font-size: 13px;
    margin-top: 4px;
}

/* Special styling for #1 rank */
.ranking-list li:first-child {
    background: linear-gradient(to right, rgba(240, 120, 25, 0.1), transparent);
    margin: -1rem;
    margin-bottom: 0.5rem;
    padding: 1rem;
    border-left: 4px solid #F07819;
    font-weight: bold;
}

.ranking-list li:first-child .rank {
    color: #F07819;
    font-size: 1.2em;
    text-shadow: 0 0 10px rgba(240, 120, 25, 0.5);
}

.ranking-list li:first-child .score,
.ranking-list li:first-child .wins,
.ranking-list li:first-child .streak {
    color: white;
    padding: 0.3rem 0.8rem;

    font-weight: bold;
}

.ranking-list li:first-child .rank-type {
    color: #F07819;
    font-weight: bold;
}

/* Update list items to properly align content */
.ranking-list li {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    margin: 0 -1rem;
    transition: all 0.3s ease;
    gap: 6px;
}

.profile-content2 {
    color: #fff;
    padding: .75rem 1rem;
    background-image: url(https://i.imgur.com/MntVWmj.png);
    background-repeat: no-repeat;
    background-position: right top;
    min-height: 155px;
}

.nal-supreme-player-top-3-player-profile-content2 {
    color: #fff;
    padding: .75rem 1rem;
    background-image: url(https://i.imgur.com/3Sd8HQM.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 155px;
    min-height: 155px;
}

.king-profile-content2 {
        color: #fff;
        padding: .75rem 1rem;
        background-image: url(https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/image_1769575590838-b43170cb31.png);
        background-repeat: no-repeat;
        background-position: right top;
        min-height: 155px;
}

.valueusername {
    color: #000;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 28px;
    font-weight: 700;
    top: 33px;
    position: relative;
    color: #F07819;
    margin-left: 5px;
}

.valuesiterank {
    color: #F07819;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 17px;
    font-weight: 700;
    margin-top: -44px;
    position: relative;
    font-style: italic;
    margin-left: 5px;
}

.info-rowposts {
    display: flex;
    color: #ffffff;
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    padding: 3px;
    margin-top: 20px;
    position: absolute;
    width: auto;
    padding-right: 5px;
}

.info-rowberries {
    display: flex;
    color: #fff;
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-weight: 700;
    font-style: italic;
    position: absolute;
    font-size: 14px;
    padding: 3px;
    margin-top: 20px;
    margin-left: 330px;
    width: auto;
    padding-right: 5px;
}

.info-rowsubs {
    display: flex;
    color: #fff;
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-weight: 700;
    font-style: italic;
    position: absolute;
    font-size: 14px;
    padding: 3px;
    margin-top: 50px;
    margin-left: 310px;
    width: auto;
    padding-right: 5px;
}

.info-rowregistered {
    display: flex;
    font-size: .9rem;
    color: #ffffff;
    background-color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    padding: 3px;
    margin-top: 50px;
    position: absolute;
    padding-right: 60px;
    min-width: 220px;
}

.ranking-list li:hover {
    background-color: rgba(240, 120, 25, 0.1);
}

.ranking-player {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.ranking-player a {
    color: black !important;
    display: block;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.wins,
.streak {
    color: #F07819;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.leaderboard-avatar {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    margin-left: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaderboard-avatar-border {
    position: absolute;
    inset: 0;
    border: 1px solid #F07819;
    box-sizing: border-box;
    z-index: 2;
    pointer-events: none;
}

.leaderboard-avatar img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

/*----LIST --------*/

/* Rank numbers styling */
.rank {
    color: #F07819;
    font-weight: bold;
    min-width: 2rem;
    font-family: Arial, sans-serif;
}

.source-rank-icon-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.source-rank-icon {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.source-war-rank-label {
    color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}


.score {
    margin-left: auto;
    background-color: #d9d9d9;
    width: 100px;
    height: 20px;
    margin-top: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
}


.score span {
    position: relative;
    z-index: 1;
    color: black;
    font-size: 0.9rem;
    text-align: center;
}


.score::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--lvl-width);
    background: linear-gradient(to right, #F07819, #F07819);
    transition: width 0.3s ease;
}


.ranking-list li:first-child .score::before {
    background: linear-gradient(to right, #F07819, #F07819);
    box-shadow: 0 0 10px rgba(240, 120, 25, 0.3);
}

.rank-type {
    margin-left: auto;
    color: #999;
}

/*-------------------*/
#layoutcont {
    width: 1000px;
}


#layout {
    float: left;
    width: 1170px;
    height: auto;
    text-align: left;
    background-attachment: scroll;
    background-color: transparent;
}




.balance_text {
    margin-bottom: 5px;
    width: 350px;
}



#mainnavigation {
    width: 187px;
    margin: 10px 10px 3px 0px;
}

#mainnavigation a {
    display: block;
    cursor: pointer;
    height: 34px;
}

/*#header {
        border-left: 1px solid #000000;
        border-right: 1px solid #000000;
        float: left;
    }

        #headerimg {
            width: 394px;
            height: 73px;
    background-image: url(https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/Vitoq-RK-6fda168280.png);
            background-repeat: no-repeat;
        }

        #randomheader {
            width: 394px;
            height: 143px;
            border-top: 1px solid #000000;
            background-repeat: no-repeat;
        }*/



#sitenavigation1 {
    clear: left;
    width: 200px;
    display: flex;
    justify-content: space-between;
    /* Garante que cada sidebar fique no seu lugar */
    align-items: flex-start;
    margin-left: -10px;
    background-repeat: no-repeat;
    background-position: top right;
    float: left;
    margin-left: 1px;
}

#sitenavigation2 {
    clear: left;
    width: 200px;
    margin-left: -10px;
    background-repeat: no-repeat;
    background-position: top right;
    float: left;
    margin-left: 1px;
}



.board-title {
    font: italic normal bold 16px/normal Trebuchet MS, arial, verdana, sans-serif;
    text-decoration: underline;
    color: black;
    margin: 0;
}

.board-title.block {
    height: 26px;
}

div.nav {
    font-family: Trebuchet MS, verdana, sans-serif;
    color: #FFFFFF;
    padding: 10px;
}



.font-fix {
    font-family: Trebuchet MS, verdana, sans-serif;
}

div.nav a:link,
div.nav a:visited,
div.nav a:active {
    color: black;
    cursor: pointer;
    text-decoration: none;
}

div.nav a:hover {
    color: black;
}


div.nav a.aff:link,
div.nav a.aff:visited,
div.nav a.aff:active,
div.nav a.aff:hover {
    display: block;
    font-weight: bold;
}

.winnertext {
    text-decoration: none;
    color: black;
}

a.con:link,
a.con:visited,
a.con:active,
a.con:hover {
    text-decoration: none;
    color: #280092;
}

div.contentp p {
    padding-top: 10px;
}

div.contentp div.title {
    padding-top: 15px;
}



div.brspacerm {
    padding-top: 13px;
}

div.brspacer2 {
    padding-top: 200px;
}

div.cbrspacer {
    clear: both;
    padding-top: 6px;
}



.home-input {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #2e3b45;
    padding: 5px 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box
}

.home-input:focus {
    outline: none;
    border-color: #F07819;
    /* borda azul ao focar */
}

label.font-fix {
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 13px
}

.brspacer[style*="color:white"] {
    color: black !important;
}

.home-input.radio {
    height: 16px;
    width: 12px;
    border: 0px;
}

.main-navigate-discord {
    border-radius: 5px;
    border: 1px solid #000;
}

.home-input[type="checkbox"] {
    margin-top: 4px;
}

.home-input.button {
    height: 40px;
    padding: 0 0 1px;
    background-color: #F07819;
    color: #ffffff;
    font-size: 17px;
    _padding: 0 .25em 0 .25em;
    _width: auto;
    _overflow: visible
}

.thumbimage {
    transition: all ease 0.2s;
    width: 100%;
}

.thumbimage:hover {
    transform: scale(1.02);
}




.home-input {
    margin: 0px 3px 3px 0px;
}

.home-input.box {
    background-color: #FFFFFF;
}


.home-input.boxnav {
    border-top: 1px inset #4a1d04;
    border-bottom: 1px outset #4a1d04;
    border-right: 1px outset #4a1d04;
    border-left: 1px inset #4a1d04;
    background-color: #FFFFFF;
}

.label-input {
    vertical-align: top;
    height: 17px;
}

div.leftlaymargin {
    margin-left: 10px;
}



#rightlay {
    width: 180px;
    border: 1px solid #000000;
    margin-left: 820px;
    /* width: 180px;
            background-image: url('https://web.archive.org/web/20200322180144im_/https://web.archive.org/web/20180505173700im_/http://www.soul-arena.com/images/layout/leftrightbg.gif');
            background-repeat: repeat-x;
            background-color: #001c37;
            border: 1px solid #000000;
            float: left; */
}

ul.ladder {
    list-style-type: none;
    margin: 0px 0px 0px -5px;
    padding: 0px;
}

ul.ladder li {
    clear: left;
    margin: 0px;
    padding: 0px;
}

ul.ladder li span {
    display: block;
    font-weight: bold;
    width: 22px;
    text-align: right;
    padding: 1px 0px 1px 0px;
    float: left;
}

ul.ladder li span.ladder1 {
    width: 24px;
    text-align: left;
    font-size: 17px;
    font-style: italic;
    color: #aad9f7;
    margin: 4px 0px 0px 3px;
}

ul.ladder li div.player {
    padding: 1px 0px 1px 4px;
    float: left;
}

ul.ladder a:link,
ul.ladder a:visited,
ul.ladder a:active,
ul.ladder a:hover {
    text-decoration: underline;
}

div.levelBackground {
    height: 14px;
    width: 75px;
    background-color: #393939;
    border: 1px solid black;
    clear: all;
}

div.levelFill {
    height: 14px;
    position: absolute;
    background-repeat: repeat-x;
    background-image: url('https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/op-KG6k-H-942c1794a7.gif');
    clear: all;
}

div.levelNumber {
    color: white;
    position: absolute;
    width: 75px;
    text-align: center;
    font-size: 11px;
    font-family: Arial;
    font-weight: bold;
    clear: all;
}


#container1 {
    width: 490px;
    line-height: 16px;
    float: left;
    margin-left: 85px;
    margin-top: 19px;
    min-height: 1800px
}

.main-content {
    flex: 1;
    min-width: 0;
    /* Prevents flex item from overflowing */
}

#container2 {
    width: 100%;
}

#container2 {
    width: 100%;
    max-width: 700px;
    line-height: 16px;
    float: left;
    margin-left: 90px;
    margin-top: 40px;
    min-height: 1800px
}

#container3 {
    width: 100%;
}

#container3 {
    max-width: 700px;
    line-height: 16px;
    float: left;
    margin-left: 100px;
    margin-top: 0px;
    min-height: 1800px;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.buy-button-animation {
    animation: fadeOut 0.5s forwards;
}

.price-animation {
    animation: fadeOut 0.5s forwards;
}


#content {
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 11px;
    color: #000000;
    padding: 10px;
}

div.clear {
    clear: both;
}

a.newsh:link,
a.newsh:visited,
a.newsh:active,
a.newsh:hover {
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 10px;
    color: #280092;
    text-decoration: none;
}

div.news {
    padding: 3px 0px 3px 0px;
    margin-left: 10px;
    margin-top: 9px;
}

div.news p {
    padding-top: 10px;
    font-size: 13px
}

.news ul {
    list-style-type: none;
    padding: 6px 0px 6px 3px;
}

#contentcharactergallery {
    font-family: Trebuchet MS,verdana,sans-serif;
    font-size: 11px;
    color: #000;
    padding: 10px;
margin-left: -30px;
}

div.news ul li {
    line-height: 17px;
    background-image: url('https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/Nec4rb-O-6a94013548.gif');
    background-position: 0px 3px;
    padding-left: 15px;
    background-repeat: no-repeat;
}

a.newsp:link,
a.newsp:visited,
a.newsp:active,
a.newsp:hover {
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 10px;
    color: #280092;
    text-decoration: none;
}

.newsp {
    font: normal normal bold 10px/normal Trebuchet MS, arial, verdana, sans-serif;
    color: #280092;
}

div.newsarchive {
    padding-top: 20px;
    width: 370px;
}

.home-info {
    font: normal normal normal 10px/normal Arial, Verdana, Helvetica, sans-serif;
    color: #808080;
}

div.home-info {
    text-align: center;
}

img.pre {
    margin-top: -6px;
    border: 0px none black;
}

img.pre2 {
    margin-top: -6px;
    border: 0px none black;
}

div.dots {
    height: 1px;
    font-size: 1px;
    background-image: url(https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/Ma-Awq-PF-194e69da1b.gif);
    background-position: top left;
    background-repeat: repeat-x;
}

td.dots {
    height: 2px;
    font-size: 1px;
    background-image: url(https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/Ma-Awq-PF-194e69da1b.gif);
    background-position: top left;
    background-repeat: repeat-x;
}

.home-h1 {
    display: inline;
    font: normal normal normal 18px/normal Trebuchet MS, arial, verdana, sans-serif;
    color: #F07819;
    font-size: 20px;
}

.home-h2 {
    display: inline;
    font: normal normal bold 14px/normal Trebuchet MS, arial, verdana, sans-serif;
    color: #F07819;
    text-decoration: none;
}

ul.newst {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.arrow {
    list-style-type: none;
    padding: 6px 0px 6px 3px;
}

ul.arrow li {
    line-height: 17px;
    background-image: url('https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/Nec4rb-O-6a94013548.gif');
    background-position: 0px 3px;
    padding-left: 15px;
    background-repeat: no-repeat;
}

ul.newst li {
    clear: left;
    margin-bottom: 1px;
}

ul.newst li div {
    float: left;
}

ul.newst li {
    list-style-type: none;
    /* line-height: 17px; */
    background-position: 0px 3px;
    padding: 0x;
    background-repeat: no-repeat;
}

#pagepath a:link,
#pagepath a:visited,
#pagepath a:active,
#pagepath a:hover {
    display: none;
}

#pagepath a:link,
#pagepath a:visited,
#pagepath a:active,
#pagepath a:hover {
    display: none;
}

#pagepath h2 {
    display: inline;
    font: normal normal bold 14px/normal Trebuchet MS, arial, verdana, sans-serif;
    color: #f9a420;
}

table {
    font: normal normal normal 11px/normal Trebuchet MS, Arial, Verdana, sans-serif;
    color: #4a1d04;
}

table.none {
    border-spacing: 0px;
    border-collapse: collapse;
}

table.maxnb {
    width: 100%;
    border-spacing: 0px;
    _border-collapse: collapse;
}

td {
    text-align: left;
}

td.padding {
    padding: 3px 0px 3px 0px;
}

td.padding2 {
    padding: 5px;
}

td.padding3 {
    padding: 15px 15px 0px 0px;
}

td.right {
    text-align: right;
}

td.center {
    text-align: center;
}

.changeavatar {
    width: 75px;
    height: 75px;
    padding-left: 230px;
    padding-bottom: 10px;
}

.color1 {
    background-color: #f0f0f000;
}

.color1 td {
    padding: 0 4px 1px;
    margin: 1px 0;
    border: 1px solid #000;
}

.color1 td input,
select {
    margin: 1px 0px 0px 0px;
}

.color2 {
    background-color: #00000000;

}

h5,
h5 a:link,
h5 a:visited,
h5 a:active,
h5 a:hover {
    display: inline;
    font: normal normal 700 11px/normal Trebuchet MS, arial, verdana, sans-serif;
    color: #F07819;
    font-weight: 700;
    font-size: 15px;
    border: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
}

.color2 td {
    padding: 0px 4px 1px 4px;
    margin: 1px 0px 1px 0px;
    font-size: 13px;
    color: black;
}

.color2 td input,
select {
    margin: 1px 0px 0px 0px;
}

.title {
    height: 17px;
    font-weight: bold;
    text-align: left;
    color: #F07819;
    font-family: Merriweather, serif;
    font-size: 13px;

    background-position: bottom left;
    background-repeat: repeat-x;
}

.title a {
    color: #F07819;
    font-family: Merriweather, serif;
    font-size: 13px;
}

.title select,
input {
    margin: 0px 3px 3px 0px;
}

.grey {
    color: #808080;
}

div.padding {
    padding: 3px 0px 3px 0px;
}


div.requirements {
    width: 267px;
    ;
    margin-bottom: 10px
}

.red {
    color: #F07819
}

.green {
    color: #00bf00
}

.originalgreen {
    color: #0e970e
}

.nothing {
    color: #808080;
    font-style: italic;
}

div.bg1 {
    height: 100%;

    background-position: top left;
    background-repeat: repeat-y;
    text-align: left;
}

div.bg2 {
    height: 100%;

    background-position: top right;
    background-repeat: repeat-y;
    padding: 5px;
}

div.bg2nb {
    height: 100%;
    
    background-position: top right;
    background-repeat: repeat-y;
}

div.bg2 td {
    padding: 5px;
    vertical-align: top;
}

div.bg2 img {
    margin-top: 3px;
}

div.centerp {
    text-align: center;
    padding-top: 6px;
}

div.centerp2 {
    text-align: center;
    padding: 6px;
}

div.centerp3 {
    text-align: center;
    padding-top: 6px;
    padding-right: 20px;
}

.sidebar-partners {
    display: block;
    font-weight: bold;
}

.error {
    color: #F07819;
}

.bgmsg {
    padding-left: 190px;
}

.bgmsg200 {
    padding-left: 200px;
}

.highgreen {
    color: #03cf1e;
}

table.avatarmax {
    width: 100%;
    margin-left: 20px;
}

td.home-avatar {
    vertical-align: middle;
    padding-left: 10px;
}

.available {
    text-decoration: none;
}


.p-h6,
.p-h6 a:link,
.p-h6 a:visited,
.p-h6 a:active,
.p-h6 a:hover {
    display: inline;
    font: normal normal bold 11px/normal Trebuchet MS, arial, verdana, sans-serif;
}

div.minfo {
    float: left;
    padding: 5px
}

div.minfo2 {
    float: left;
    padding: 5px
}

div.chardescr {
    min-height: 69px;
    padding: 3px;
    background-color: #F0781900;
    font-size: 12px;
}

div.chardescr img {
    margin: 2px 5px 2px 0;
    width: 65px;
    height: 65px;
}


div.charskill {
    width: 47%;
    margin: 30px 0px 10px 6px;
    float: left;
}

div.skilldescr {
    min-height: 80px;
    padding: 3px;
    background-color: #fafafa00;
    font-family: 'Arial';
    font-size: 12px;
    line-height: 17px;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}

div.skilldescr img {
    margin: 2px 5px 2px 0px;
}

a.subjlink:active,
a.subjlink:hover,
a.subjlink:link,
a.subjlink:visited {
    font: normal normal 700 11px/normal Trebuchet MS, arial, verdana, sans-serif;
    color: #F07819;
    text-decoration: none;
    font-size: 13px;
}

div.right {
    float: right;
    text-align: right;
}

div.pagedescription {
    margin-top: 10px;
    text-align: center
}

.search-input2 {
    padding: 6px 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    border: 1px solid #000000;
    width: 260px;
    margin-left: 200px;
}

div.pagedescription h2 {
    color: #fdfdfd;
    background-color: #F07819;
    font-size: 16px;
    padding: 5px;
}

.fright img{
    top: 1px;
    left: -1px;
    position: relative;
}


.characterpage {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


.chardescr:hover .font-fix3 {
    display: inline !important;
}

div.descrheader {
    width: 100%;
    height: 18px;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
    color: #f9a420;

    background-position: bottom left;
    background-repeat: repeat-x;
}

div.descrheader a {
    position: relative;
    top: -1px;
    text-decoration: none;
}

div.descrtext {
    width: 75%;
    float: left;
}

div.descrcontent {
    height: 48px;
    background-color: #FAFAFA;
    padding: 5px;
}

div.descrimg {
    width: 24%;
    padding: 12px 0px 0px 0px;
    float: right;
}



div.infolink {
    float: right;
    padding-right: 3px;
    text-decoration: none;
}

div.infolink a {
    text-decoration: none;
}

.news a {
    text-decoration: none;
}

div.chardescr {
    min-height: 69px;
    padding: 3px;
    background-color: #F0781900
}

div.chardescr img {
    margin: 2px 5px 2px 0px;
}

div.charskill {
    width: 47%;
    text-align: left;
    float: left;
        border: 1px solid black;
    padding: 5px;
}

div.fleft {
    float: left;
            font-family: 'Arial';
    font-size: 12px !important;
    margin-top: 3px;
}

.insidecooldown-label {
    margin-top: 1px;
    margin-left: 3px;
    position: absolute
}

div.fright {
    float: right;
    margin-top: 3px;
}

div.goals {
    text-decoration-style: none;
    margin-top: 4px;
}

div.goals li {
    list-style-type: none;
    margin-left: -37px;
}

div.floatleft {
    float: none;
    flex: 0 0 calc(33.333% - 20px);
    box-sizing: border-box;
    margin-top: 20px;
}

.brspacerm2>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}


div.mleft {
    float: left;
    padding: 0px 5px 5px 20px;
    margin-top: -15px;
}

.page-energy {
    margin-left: 3px;
}

.pageinfo {
        padding: 3px 0px 3px 5px;
    margin-top: 5px;
    margin-left: -5px;
    background-color: #F07819;
    color: white !important;
    width: 324px;
        font-family: 'Arial';
    font-size: 12px !important;
}

.imagemanual {
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/Ywp-JCz-E-1bf6c02d4d.png");
    background-repeat: repeat-y;
    width: 685px;
    height: 90px;
    margin-left: -3px;
    margin-top: 10px;
}

.imagemanual2 {
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/pa-O030v-70b9395683.png");
    background-repeat: repeat-y;
    width: 685px;
    height: 90px;
    margin-left: -3px;
    margin-top: 10px;
}

.imagemanual3 {
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/INu-Je-Ck-b8d31522bb.png");
    background-repeat: repeat-y;
    width: 685px;
    height: 90px;
    margin-left: -3px;
    margin-top: 10px;
}

.font-fix3 {
    display: none !important;
    position: absolute;
    z-index: 2;
    background-color: #ffffffe6;
    border: 1px solid black;
    width: 110px;
    padding: 5px 5px;

}

.font-fix3::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent rgb(0 0 0) transparent transparent;
}



div.floatright {
    float: right;
    width: 48%;
    padding: 5px;
}

div.charskill h2 {
    display: inline;
    font: 'Arial';
    color: #ffffff;
    padding: 3px 0px 3px 8px;
    margin-top: -5px;
    margin-left: 37px;
    background-color: #F07819;
    width: 279px;
    position: absolute;
    font-size: 16px;
}

.insideskill-label {
    display: inline;
    font: normal normal 700 14px/normal Trebuchet MS,arial,verdana,sans-serif;
    color: #ffffff;
    padding: 3px 0px 3px 6px;
    margin-top: -5px;
    margin-left: -5px;
    background-color: #F07819;
    position:absolute
}

.charskill .skilldescr {
    margin-top: 17px;
}

div.skilldescr {
    min-height: 80px;
    padding: 3px;
    background-color: #fafafa00;
    font-family: 'Arial';
    font-size: 12px;
    line-height: 17px;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}

div.skilldescr img {
    margin: 2px 5px 2px 0px;
}

.pa-mission-grid {
    display: grid;
    gap: 35px;
    padding: 10px;
}

.pa-mission-card-link {
    text-decoration: none;
}

.pa-mission-card {
    position: relative;
    height: 220px;
    overflow: hidden;
    border: 1px solid black;
    background: #111;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pa-mission-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.pa-mission-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.55);
    transition: filter 0.35s ease;
}

.pa-mission-card:hover .pa-mission-bg {
    filter: brightness(0.75) blur(2px);
}

.pa-mission-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px 25px;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0.1));
    color: #fff;
}

.pa-mission-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.pa-mission-description {
    font-size: 14px;
    opacity: 0;
    max-width: 75%;
    margin: 0;
    line-height: 1.4;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}


div.goals li {
    list-style-type: none;
    margin-left: -37px;
}

div.floatleft {
    float: none;
    flex: 0 0 calc(33.333% - 20px);
    box-sizing: border-box;
    margin-top: 20px;
}

.brspacerm2>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}


div.mleft {
    float: left;
    padding: 0px 5px 5px 20px;
    margin-top: -15px;
}

.page-energy {
    margin-left: 3px;
}

.pageinfo {
        padding: 3px 0px 3px 5px;
    margin-top: 5px;
    margin-left: -5px;
    background-color: #F07819;
    color: white !important;
    width: 324px;
        font-family: 'Arial';
    font-size: 12px !important;
}

.imagemanual {
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/Ywp-JCz-E-1bf6c02d4d.png");
    background-repeat: repeat-y;
    width: 685px;
    height: 90px;
    margin-left: -3px;
    margin-top: 10px;
}

.imagemanual2 {
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/pa-O030v-70b9395683.png");
    background-repeat: repeat-y;
    width: 685px;
    height: 90px;
    margin-left: -3px;
    margin-top: 10px;
}

.imagemanual3 {
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/INu-Je-Ck-b8d31522bb.png");
    background-repeat: repeat-y;
    width: 685px;
    height: 90px;
    margin-left: -3px;
    margin-top: 10px;
}

.font-fix3 {
    display: none !important;
    position: absolute;
    z-index: 2;
    background-color: #ffffffe6;
    border: 1px solid black;
    width: 110px;
    padding: 5px 5px;

}

.font-fix3::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent rgb(0 0 0) transparent transparent;
}



div.floatright {
    float: right;
    width: 48%;
    padding: 5px;
}

div.charskill h2 {
    display: inline;
    font: 'Arial';
    color: #ffffff;
    padding: 3px 0px 3px 8px;
    margin-top: -5px;
    margin-left: 37px;
    background-color: #F07819;
    width: 279px;
    position: absolute;
    font-size: 16px;
}

div.skilldescr {
    min-height: 80px;
    padding: 3px;
    background-color: #fafafa00;
    font-family: 'Arial';
    font-size: 12px;
    line-height: 17px;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}

div.skilldescr img {
    margin: 2px 5px 2px 0px;
}

.pa-mission-grid {
    display: grid;
    gap: 35px;
    padding: 10px;
}

.pa-mission-card-link {
    text-decoration: none;
}

.pa-mission-card {
    position: relative;
    height: 220px;
    overflow: hidden;
    border: 1px solid black;
    background: #111;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pa-mission-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.pa-mission-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.55);
    transition: filter 0.35s ease;
}

.pa-mission-card:hover .pa-mission-bg {
    filter: brightness(0.75) blur(2px);
}

.pa-mission-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px 25px;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0.1));
    color: #fff;
}

.pa-mission-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.pa-mission-description {
    font-size: 14px;
    opacity: 0;
    max-width: 75%;
    margin: 0;
    line-height: 1.4;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.pa-mission-card:hover .pa-mission-description {
    opacity: 1;
    transform: translateY(0);
}

.pa-mission-button {
    margin-top: 14px;
    display: inline-block;
    padding: 8px 16px;
    font-weight: 600;
    color: #fff;
    width: fit-content;
    transition: background 0.2s ease;
    font-size: 16px;
}

.pa-mission-button:hover {
    background: #F07819;
}

/* --- MISSION CATEGORY REDESIGN --- */

.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
    padding: 20px 40px;
    width: 100%;
    box-sizing: border-box;
}

.mission-card {
    background: #fff;
    border: 1px solid #1a1a1a !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
    position: relative;
    height: 100%;
}

.mission-card:hover {
    transform: translate(-2px, -2px);
    border-color: #F07819
}

.mission-card-header {
    background: #1a1a1a;
    color: #fff;
    padding: 12px;
    text-align: center;
    font-family: 'Merriweather', serif;
    border-bottom: 2px solid #1a1a1a;
    transition: background 0.2s;
}

.mission-card:hover .mission-card-header {
    background: #F07819;
    border-color: #F07819 !important;
}

.mission-card-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: #fff !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: Bebas Neue, sans-serif;
    font-size: 20px;
    border: none;
}

.mission-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    background: #fff;
}

.mission-section-label {
    font-size: 13px;
    text-transform: uppercase;
    color: #4d4d4d;
    margin-bottom: 15px;
    letter-spacing: 1px;
    font-weight: 700
}

.mission-image-container {
    width: 225px;
    height: 150px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    background: #f0f0f0
}

.mission-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mission-card:hover .mission-image-container img {
    transform: scale(0.9)
}

.mission-requirements {
    width: 100%;
    font-size: 16px;
    color: #444;
    text-align: left;
    border-top: 1px solid #eee;
    padding-top: 15px;
    line-height: 1.6
}

.mission-req-item {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.mission-req-label {
    font-weight: 900;
    margin-right: 6px;
    color: #F07819;
    text-transform: uppercase;
    font-size: 16px
}

.mission-action-btn {
    margin-top: auto;
    width: 100%;
    padding: 12px;
    background: #fff;
    color: #1a1a1a;
    text-align: center;
    text-decoration: none;
    font-family: Bebas Neue, sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    border: 1px solid #1a1a1a;
    transition: all .2s ease;
    display: block;
    box-sizing: border-box;
    cursor: pointer
}

.mission-action-btn:hover {
    background: #1a1a1a;
    color: #fff;
}

.mission-action-btn.disabled {
    background: #f5f5f5;
    border-color: #ddd;
    color: #aaa;
    cursor: not-allowed;
}

.mission-action-btn.completed {
    background: #F07819;
    border-color: #F07819;
    color: #fff;
}

/* Search Bar Styling */
.mission-search-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    padding: 20px;
    background: #fff;
    border: 1px solid #1a1a1a;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto
}

.mission-search-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    color: #1a1a1a;
}

.mission-search-input {
    padding: 12px 15px;
    font-size: 17px;
    border: 1px solid #1a1a1a;
    width: 300px;
    outline: none;
    transition: all .2s;
    background: #f9f9f9
}

.mission-search-input:focus {
    border-color: #F07819;
    background: #fff;
    box-shadow: 2px 2px 0px rgba(240, 120, 25, 0.2);
}

.mission-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.mission-checkbox-text {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a
}

/* Custom Checkbox */
.mission-custom-checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    background: #fff
}

.mission-checkbox-wrapper input:checked+.mission-custom-checkbox {
    background: #F07819;
    border-color: #F07819;
}

.mission-custom-checkbox i {
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
}

.mission-checkbox-wrapper input:checked+.mission-custom-checkbox i {
    opacity: 1;
    transform: scale(1);
}

.mission-checkbox-wrapper input {
    display: none;
}

.mission-types-page {
    width: min(940px, calc(100% - 28px));
    margin: 0 auto 34px;
    font-family: Trebuchet MS, verdana, sans-serif;
    color: #000;
}

.mission-types-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px;
    padding: 20px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .86);
    box-sizing: border-box;
}

.mission-types-hero #pagepath {
    margin: 0 0 8px;
    color: #000;
    font-size: 12px;
}

.mission-types-hero #pagepath a {
    color: #F07819;
    font-weight: 900;
}

.mission-types-hero h1 {
    margin: 0;
    color: #F07819;
    font-size: 44px;
    font-style: italic;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.mission-types-hero p {
    max-width: 610px;
    margin: 10px 0 0;
    color: #000;
    font-size: 15px;
    line-height: 1.45;
}

.mission-types-summary {
    display: grid;
    grid-template-columns: repeat(3, 105px);
    gap: 8px;
}

.mission-types-summary span {
    display: grid;
    gap: 2px;
    min-height: 64px;
    padding: 9px 8px;
    border: 1px solid #000;
    background: #F07819;
    color: #fff;
    box-sizing: border-box;
    text-align: center;
}

.mission-types-summary b {
    font-size: 18px;
    line-height: 1.1;
}

.mission-types-summary small {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.mission-type-list {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.mission-type-card,
.mission-type-card:active,
.mission-type-card:hover,
.mission-type-card:link,
.mission-type-card:visited {
    display: grid;
    grid-template-columns: 54px 190px minmax(0, 1fr) 175px;
    align-items: stretch;
    min-height: 154px;
    color: #000;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 6px 0 rgba(240, 120, 25, .28);
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
}

.mission-type-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 0 rgba(240, 120, 25, .34);
}

.mission-type-number {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F07819;
    color: #fff;
    font-size: 22px;
    font-style: italic;
    font-weight: 900;
}

.mission-type-images {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 12px;
    border-right: 1px solid #000;
    background: rgba(0, 0, 0, .08);
    box-sizing: border-box;
}

.mission-type-images img {
    width: 100%;
    height: 62px;
    border: 1px solid #000;
    background: #fff;
    object-fit: cover;
    transform: rotate(var(--tilt));
}

.mission-type-copy {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
    padding: 16px 18px;
    box-sizing: border-box;
}

.mission-type-kicker {
    width: fit-content;
    padding: 4px 8px;
    background: #F07819;
    color: #fff;
    font-size: 11px;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
}

.mission-type-copy strong {
    color: #F07819;
    font-size: 26px;
    font-style: italic;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
}

.mission-type-copy > span:not(.mission-type-kicker):not(.mission-type-unlocks) {
    color: #000;
    font-size: 13px;
    line-height: 1.35;
}

.mission-type-unlocks {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mission-type-unlocks em {
    padding: 3px 6px;
    border: 1px solid rgba(240, 120, 25, .45);
    color: #F07819;
    background: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.mission-type-meta {
    display: grid;
    align-content: stretch;
    border-left: 1px solid #000;
}

.mission-type-meta span {
    display: grid;
    place-content: center;
    gap: 3px;
    min-height: 50px;
    padding: 8px;
    border-bottom: 1px solid #000;
    text-align: center;
}

.mission-type-meta b {
    color: #000;
    font-size: 17px;
}

.mission-type-meta small {
    color: #F07819;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.mission-type-meta i {
    display: grid;
    place-items: center;
    padding: 8px;
    background: #F07819;
    color: #fff;
    font-size: 12px;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
}

.mission-selected-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 11px 20px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background: #F07819;
    box-sizing: border-box;
}

.mission-selected-bar h4 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .35);
}

.mission-back-link {
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    text-decoration: underline;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .35);
}

.mission-change-box .mission-search-wrapper {
    width: calc(100% - 40px);
    max-width: none;
    margin: 20px;
    box-sizing: border-box;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.mission-change-box .mission-search-label,
.mission-change-box .mission-checkbox-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

.mission-change-box .mission-search-input {
    flex: 1 1 280px;
    max-width: 420px;
    box-sizing: border-box;
}

.mission-change-box .mission-grid {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    padding: 20px;
    gap: 28px;
}

.mission-change-box .mission-card {
    min-width: 0;
}

.mission-change-box .mission-card-body {
    min-width: 0;
}

.mission-change-box .mission-description {
    width: 100%;
    margin: 0 0 10px;
    color: #F07819;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
}

.mission-change-box .mission-req-item {
    gap: 4px;
}

.mission-change-box .mission-req-item span:last-child {
    min-width: 0;
}

@media (max-width: 900px) {
    .mission-types-hero {
        grid-template-columns: 1fr;
    }

    .mission-types-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mission-type-card,
    .mission-type-card:active,
    .mission-type-card:hover,
    .mission-type-card:link,
    .mission-type-card:visited {
        grid-template-columns: 46px 150px minmax(0, 1fr);
    }

    .mission-type-meta {
        grid-column: 2 / 4;
        grid-template-columns: repeat(3, 1fr);
        border-top: 1px solid #000;
        border-left: 0;
    }

    .mission-type-meta span {
        border-right: 1px solid #000;
        border-bottom: 0;
    }
}

@media (max-width: 720px) {
    .mission-types-page {
        width: calc(100% - 16px);
    }

    .mission-types-hero {
        padding: 14px;
    }

    .mission-types-hero h1 {
        font-size: 34px;
    }

    .mission-types-summary {
        grid-template-columns: 1fr;
    }

    .mission-type-card,
    .mission-type-card:active,
    .mission-type-card:hover,
    .mission-type-card:link,
    .mission-type-card:visited {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .mission-type-images {
        grid-column: 2;
        grid-row: 1;
        grid-template-columns: repeat(4, 1fr);
        border-right: 0;
        border-bottom: 1px solid #000;
    }

    .mission-type-images img {
        height: 54px;
    }

    .mission-type-copy {
        grid-column: 1 / 3;
        padding: 14px;
    }

    .mission-type-meta {
        grid-column: 1 / 3;
    }

    .mission-selected-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .mission-change-box .mission-search-wrapper {
        align-items: stretch;
        margin: 14px;
        width: calc(100% - 28px);
    }

    .mission-change-box .mission-search-input {
        flex-basis: 100%;
        max-width: none;
        width: 100%;
    }

    .mission-change-box .mission-grid {
        grid-template-columns: 1fr;
        padding: 14px;
    }
}

.resourceimage0 {
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/ccimage-2d391b9946.png");
    background-repeat: repeat-y;
    width: 685px;
    height: 90px;
    margin-left: -3px;
    margin-top: 10px;
}

.resourceimage00 {
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/characterrr-1dd112686e.png");
    background-repeat: repeat-y;
    width: 685px;
    height: 90px;
    margin-left: -3px;
    margin-top: 10px;
}

.resourceimage1 {
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/ingamefacepicturelinkimage-c325e4bc58.png");
    background-repeat: repeat-y;
    width: 685px;
    height: 90px;
    margin-left: -3px;
    margin-top: 10px;
}

.resourceimage2 {
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/selection-linkimage-5e4a6bb332.png");
    background-repeat: repeat-y;
    width: 685px;
    height: 90px;
    margin-left: -3px;
    margin-top: 10px;
}

.resourceimage3 {
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/source-assets/INGAMEPOPUP-fae68d3d11.png");
    background-repeat: repeat-y;
    width: 685px;
    height: 90px;
    margin-left: -3px;
    margin-top: 10px;
}

/* Premium Character View Redesign */
.pr-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

.pa-character-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 20px;
}

.pa-character-toolbar span {
    color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.pr-char-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background-color: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pr-char-card.has-border {
    border: 1px solid #000;
}

.pr-char-card.no-border {
        border: 1px solid #000;
}

.pr-char-card:hover {
    transform: scale(1.15);
    z-index: 100;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    border-color: #F07819;
}

.pr-char-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pr-char-skill-count {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 1px solid #000;
    background: #F07819;
    color: #fff;
    box-sizing: border-box;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 10px;
    font-weight: 900;
    line-height: 15px;
    text-align: center;
}

.pr-char-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 10px;
    padding: 3px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.pr-char-card:hover .pr-char-name-overlay {
    opacity: 1;
}

.pa-character-empty {
    margin: 12px 20px 24px;
    padding: 12px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .82);
    color: #F07819;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.pa-char-detail-hero {
    display: flex;
    gap: 14px;
    margin: 0 20px;
    padding: 12px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .72);
    box-sizing: border-box;
}

.pa-char-detail-face,
.pa-char-detail-img {
    width: 75px;
    height: 75px;
    flex: 0 0 auto;
    object-fit: cover;
}

.pa-char-detail-copy {
    min-width: 0;
    text-align: left;
}

.pa-char-detail-copy h2 {
    margin: 0 0 6px;
    color: #F07819;
    font-size: 20px;
}

.pa-char-detail-copy p {
    margin: 0 0 8px;
    line-height: 1.4;
}

.pa-char-skill-list {
    display: grid;
    gap: 12px;
    margin: 0 20px 20px;
}

.pa-char-skill-card {
    border: 1px solid #000;
    background: rgba(255, 255, 255, .78);
}

.pa-char-skill-title {
    padding: 8px 10px;
    background: #F07819;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}

.pa-char-skill-body {
    display: flex;
    gap: 10px;
    padding: 10px;
}

.pa-char-skill-img {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    object-fit: cover;
}

.pa-char-skill-copy {
    min-width: 0;
    text-align: left;
}

.pa-char-skill-copy p {
    margin: 0 0 8px;
    line-height: 1.35;
}

.pa-char-skill-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 13px;
}

.pa-character-energy {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
}

.pa-character-energy-pip {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid #001f26;
    background: #111;
}

.pa-character-energy-pip.taijutsu {
    background: #39c363;
}

.pa-character-energy-pip.ninjutsu {
    background: #F07819;
}

.pa-character-energy-pip.bloodline {
    background: #F07819;
}

.pa-character-energy-pip.genjutsu {
    background: #d86bff;
}

.pa-character-energy-pip.random {
    background: #d7d7d7;
}

@media (max-width: 640px) {
    .pa-char-detail-hero,
    .pa-char-skill-body {
        flex-direction: column;
    }
}

.source-ranking-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.source-leaderboard-title {
    position: relative;
    min-height: 48px;
    margin: 0 0 10px;
    padding: 0.8rem 34px;
    background: linear-gradient(to right, #F07819, #F07819);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
}

.source-leaderboard-title span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.source-streak-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 30px;
    cursor: pointer;
    padding: 0 0 3px;
}

.source-streak-arrow:first-child {
    left: 8px;
}

.source-streak-arrow:last-child {
    right: 8px;
}

.source-streak-arrow:hover {
    color: #F07819;
}

.pa-season-countdown {
    margin: 12px 0 0;
    padding: 8px 10px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .72);
    color: #111;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 8px;
    font-family: Trebuchet MS, verdana, sans-serif;
}

.pa-season-countdown span {
    color: #F07819;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.pa-season-countdown strong {
    color: #F07819;
    font-size: 15px;
    font-style: italic;
    text-align: right;
}

.pa-season-countdown small {
    grid-column: 1 / -1;
    color: #000;
    font-size: 11px;
    text-transform: uppercase;
}

.source-ranking-empty {
    min-height: 42px;
    justify-content: center;
    color: #F07819;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.source-ranking-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.source-ranking-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.source-ranking-avatar {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    flex: 0 0 45px;
}

.source-ranking-border {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 55px;
    height: 55px;
    pointer-events: none;
    z-index: 2;
}

.source-ranking-border-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px;
    border: 1px solid #F07819;
    box-sizing: border-box;
    z-index: 2;
}

.source-ranking-avatar-img,
.source-clan-avatar {
    width: 45px;
    height: 45px;
    object-fit: cover;
    z-index: 1;
}

.source-clan-avatar {
    border: 1px solid #F07819;
    margin-left: 73px;
    flex: 0 0 45px;
}

#clanprofilecontent {
    width: 100%;
    box-sizing: border-box;
}

#clanprofilecontent .clan-banner {
    background-color: #F07819;
    padding: 10px;
    margin-bottom: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid black;
}

#clanprofilecontent .clan-title {
    font-size: 30px;
    font-weight: bold;
    margin-left: 10px;
}

#clanprofilecontent .clan-subtitle {
    font-size: 18px;
    opacity: 0.9;
}

#clanprofilecontent .info-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

#clanprofilecontent .clan-info,
#clanprofilecontent .clan-ladder {
    background-color: rgba(255, 255, 255, 0.78);
    padding: 20px;
    color: #000000;
    border: 1px solid black;
}

#clanprofilecontent .section-title {
    font-size: 24px;
    margin-bottom: 15px;
    color: #F07819;
}

#clanprofilecontent .info-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

#clanprofilecontent .member-section {
    margin-top: 20px;
    background-color: rgba(255,255,255,0.78);
    padding: 20px;
    color: #000000;
    border: 1px solid black;
}

#clanprofilecontent .clan-seasonal-ladder {
    margin-top: 20px;
}

#clanprofilecontent .member-header,
#clanprofilecontent .member-row {
    display: grid;
    grid-template-columns: 50px 2fr 1fr 1fr;
    gap: 20px;
    align-items: center;
}

#clanprofilecontent .member-header {
    padding: 10px 0;
    border-bottom: 2px solid #F07819;
    font-weight: bold;
    margin-bottom: 10px;
}

#clanprofilecontent .member-row {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

#clanprofilecontent .rank-badge {
    background-color: #F07819;
    color: #ffffff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

#clanprofilecontent .leader-badge {
    background-color: #F07819;
    color: #fff;
    padding: 2px 8px;
    border-radius: 15px;
    font-size: 13px;
    display: inline-block;
    margin-left: 8px;
}

#clanprofilecontent .clan-avatar {
    width: 75px;
    height: 75px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 1);
}

.avatar-change-box0 {
    background-color: #ffffffc9;
    border-top: 1px solid #000;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 1rem;
}

.avatar-change-box0 .preview-thumb {
    width: 75px;
    height: 75px;
    object-fit: cover;
}

#content .clan-panel-source {
    position: relative !important;
    z-index: 1 !important;
    width: 620px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font: normal normal 400 11px/16px "Trebuchet MS", Arial, Verdana, sans-serif !important;
    text-align: left !important;
    text-transform: none !important;
}

#content .clan-panel-source *,
#content .clan-panel-source *::before,
#content .clan-panel-source *::after {
    box-sizing: border-box !important;
    letter-spacing: 0 !important;
}

#content .clan-panel-source .clan-page-heading {
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: #000 !important;
}

#content .clan-panel-source .clan-page-heading .home-h1 {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #280092 !important;
    font: normal normal 400 18px/18px "Trebuchet MS", Arial, Verdana, sans-serif !important;
    text-align: left !important;
    text-shadow: none !important;
    text-transform: none !important;
}

#content .clan-panel-source .clan-page-heading #pagepath {
    margin-top: 3px !important;
    color: #000 !important;
    font: normal normal 400 11px/13px "Trebuchet MS", Arial, Verdana, sans-serif !important;
    text-align: left !important;
}

#content .clan-panel-source .clan-page-heading #pagepath h2 {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #f9a420 !important;
    font: normal normal 700 14px/14px "Trebuchet MS", Arial, Verdana, sans-serif !important;
}

#content .clan-panel-source .clan-page-heading #pagepath a,
#content .clan-panel-source .clan-page-heading #pagepath a:active,
#content .clan-panel-source .clan-page-heading #pagepath a:hover,
#content .clan-panel-source .clan-page-heading #pagepath a:link,
#content .clan-panel-source .clan-page-heading #pagepath a:visited {
    color: #4a1d04 !important;
    text-decoration: none !important;
    font: normal normal 400 10px/13px Arial, Verdana, Helvetica, sans-serif !important;
}

#content .clan-panel-source .clan-summary-classic {
    position: relative !important;
    left: 40% !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    width: auto !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    color: #000 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font: normal normal 400 11px/16px "Trebuchet MS", Arial, Verdana, sans-serif !important;
    text-align: left !important;
}

#content .clan-panel-source .clan-avatar-box {
    position: relative !important;
    width: 77px !important;
    height: 77px !important;
    border: 1px solid rgb(177, 177, 177) !important;
    background: #fff !important;
    overflow: visible !important;
}

#content .clan-panel-source #clan-panel-avatar {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 75px !important;
    height: 75px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    background: #fff !important;
}

#content .clan-panel-source #clan-panel-avatar-frame-overlay {
    position: absolute !important;
    z-index: 3 !important;
    left: -10px !important;
    top: -10px !important;
    display: none !important;
    width: 95px !important;
    height: 95px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#content .clan-panel-source #clan-panel-avatar-frame-overlay.has-frame {
    display: block !important;
}

#content .clan-panel-source .clan-summary-copy {
    width: 170px !important;
    padding-left: 10px !important;
    color: #000 !important;
    font: normal normal 400 11px/16px "Trebuchet MS", Arial, Verdana, sans-serif !important;
}

#content .clan-panel-source #clan-panel-name {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #280092 !important;
    font: normal normal 400 18px/20px "Trebuchet MS", Arial, Verdana, sans-serif !important;
    text-transform: none !important;
}

#content .clan-panel-source #clan-panel-rank {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #f89700 !important;
    font: normal normal 700 14px/18px "Trebuchet MS", Arial, Verdana, sans-serif !important;
    text-decoration: none !important;
    text-transform: none !important;
}

#content .clan-panel-source .clan-dots {
    width: 600px !important;
    max-width: 100% !important;
    height: 1px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border-top: 1px dotted #777 !important;
    font-size: 1px !important;
    line-height: 1px !important;
}

#content .clan-panel-source .clan-panel-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    width: 580px !important;
    max-width: 100% !important;
    min-height: 330px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#content .clan-panel-source .panel-block {
    width: 250px !important;
    height: 90px !important;
    margin: 10px 10px 0 !important;
    padding: 0 !important;
    color: #7a7979 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font: normal normal 400 11px/14px "Trebuchet MS", Arial, Verdana, sans-serif !important;
    text-align: center !important;
    text-transform: none !important;
}

#content .clan-panel-source .panel-block p {
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #7a7979 !important;
    font: normal normal 400 11px/14px "Trebuchet MS", Arial, Verdana, sans-serif !important;
    text-align: center !important;
}

#content .clan-panel-source .button-clan,
#content .clan-panel-source .panel-block button {
    width: 126px !important;
    min-width: 100px !important;
    height: 26px !important;
    margin: 7px 0 0 !important;
    padding: 5px 6px !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font: normal normal 400 11px/14px "Trebuchet MS", Arial, Verdana, sans-serif !important;
    text-align: center !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

#content .clan-panel-source .panel-block button:disabled {
    color: #777 !important;
    cursor: default !important;
    background: #eee !important;
}

#content .clan-panel-source .panel-block a {
    display: inline-block !important;
    text-decoration: none !important;
}

@media (max-width: 720px) {
    #content .clan-panel-source {
        width: 100% !important;
    }

    #content .clan-panel-source .clan-summary-classic {
        left: 0 !important;
        margin-left: 0 !important;
    }

    #content .clan-panel-source .panel-block {
        width: calc(50% - 20px) !important;
    }
}

#content .clan-dashboard-source {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#content .clan-dashboard-source > header {
    display: none !important;
}

#content .clan-dashboard-source > .text {
    width: 428px !important;
    max-width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

#content .clan-dashboard-source .nao-badge-dashboard {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px !important;
    border: 1px solid rgba(240, 120, 25, 0.42) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 24%),
        radial-gradient(circle at 16% 0%, rgba(240, 59, 152, 0.2), transparent 28%),
        radial-gradient(circle at 86% 4%, rgba(250, 209, 72, 0.16), transparent 27%),
        linear-gradient(180deg, #1d0e07 0%, #301509 48%, #1a0a04 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 16px 28px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(240, 120, 25, 0.18) !important;
    box-sizing: border-box !important;
    color: #f1feff !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
}

#content .clan-dashboard-source .nao-badge-dashboard *,
#content .clan-dashboard-source .nao-badge-dashboard *::before,
#content .clan-dashboard-source .nao-badge-dashboard *::after {
    box-sizing: border-box !important;
}

#content .clan-dashboard-source .nao-clan-console-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

#content .clan-dashboard-source .nao-clan-console-head img {
    width: 54px !important;
    height: 54px !important;
    border: 1px solid #F07819 !important;
    background: #1f0d04 !important;
    object-fit: cover !important;
}

#content .clan-dashboard-source .nao-clan-console-head strong {
    display: block !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 20px !important;
    text-shadow: 0 1px 1px #1f0d04 !important;
}

#content .clan-dashboard-source .nao-clan-console-head small {
    display: block !important;
    margin-top: 2px !important;
    color: #fff4ea !important;
    font-size: 11px !important;
}

#content .clan-dashboard-source .nao-clan-panel-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 9px !important;
    border: 1px solid rgba(240, 120, 25, 0.36) !important;
    border-radius: 7px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(45, 22, 5, 0.94), rgba(29, 12, 3, 0.94)) !important;
}

#content .clan-dashboard-source .nao-clan-panel-card img {
    flex: 0 0 auto !important;
    width: 52px !important;
    height: 52px !important;
    border: 1px solid #F07819 !important;
    background: #1f0d04 !important;
    object-fit: cover !important;
}

#content .clan-dashboard-source .nao-clan-panel-card h3 {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    color: #fff !important;
    font: 800 18px/20px Arial, sans-serif !important;
    font-variant: normal !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 1px #1f0d04 !important;
}

#content .clan-dashboard-source .nao-clan-panel-card h3::before {
    content: "" !important;
    flex: 0 0 auto !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #F07819 !important;
    box-shadow: 0 0 7px rgba(240, 120, 25, 0.95) !important;
}

#content .clan-dashboard-source .nao-clan-panel-card p {
    margin: 3px 0 0 !important;
    color: #fff4ea !important;
    font: 700 11px/14px Arial, sans-serif !important;
}

#content .clan-dashboard-source .nao-badge-action-rail {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
}

#content .clan-dashboard-source .nao-galaxy-button {
    display: block !important;
    min-width: 0 !important;
}

#content .clan-dashboard-source .nao-galaxy-button a {
    display: block !important;
    text-decoration: none !important;
}

#content .clan-dashboard-source .nao-galaxy-button button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    padding: .78em .9em !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 14px !important;
    background:
        radial-gradient(120% 120% at 126% 126%, rgba(240, 120, 25, 0.28) 40%, transparent 50%),
        linear-gradient(180deg, #8F3A08, #4a1d04) !important;
    box-shadow:
        0 0 0 1px rgba(240, 120, 25, .22) inset,
        0 7px 15px rgba(0, 0, 0, .26) !important;
    color: #fff !important;
    cursor: pointer !important;
    font: 700 11px/1.16 "Segoe UI", Arial, sans-serif !important;
    text-align: center !important;
    text-shadow: 0 1px 1px rgba(74, 29, 4, .88) !important;
}

#content .clan-dashboard-source .nao-galaxy-button.is-primary button {
    background:
        radial-gradient(120% 120% at 126% 126%, rgba(240, 120, 25, .38) 40%, transparent 50%),
        linear-gradient(180deg, #8F3A08, #5a2506) !important;
}

.pa-clan-panel {
    color: #000;
}

.pa-clan-panel #content.pa-clan-content {
    padding: 14px;
}

.pa-clan-hero {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 120px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #000;
    background:
        linear-gradient(90deg, rgba(240, 120, 25, .94), rgba(240, 120, 25, .66)),
        rgba(255, 255, 255, .65);
}

.pa-clan-avatar-wrap {
    width: 82px;
    height: 82px;
    padding: 3px;
    border: 1px solid #000;
    background: #fff;
}

.pa-clan-avatar {
    display: block;
    width: 75px;
    height: 75px;
    object-fit: cover;
    border: 1px solid #F07819;
}

.pa-clan-summary {
    min-width: 0;
    color: #fff;
    text-align: left;
    font-family: Trebuchet MS, verdana, sans-serif;
}

.pa-clan-kicker {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.pa-clan-summary h1 {
    margin: 0;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
}

.pa-clan-summary p {
    margin: 6px 0 0;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.pa-clan-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
    gap: 14px;
}

.pa-clan-card {
    border: 1px solid #000;
    background: rgba(255, 255, 255, .78);
    box-shadow: 3px 3px 0 rgba(240, 120, 25, .55);
    min-width: 0;
}

.pa-clan-card-title {
    background: #F07819;
    color: #fff;
    padding: 9px 12px;
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 15px;
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
}

.pa-clan-stat-list {
    padding: 10px 12px;
}

.pa-clan-stat-row {
    display: grid;
    grid-template-columns: minmax(125px, .9fr) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 28px;
    border-bottom: 1px solid rgba(240, 120, 25, .32);
    font-family: Trebuchet MS, verdana, sans-serif;
    font-size: 13px;
}

.pa-clan-stat-row:last-child {
    border-bottom: 0;
}

.pa-clan-stat-row span {
    color: #F07819;
    font-weight: 700;
}

.pa-clan-stat-row strong {
    color: #000;
    font-weight: 700;
    text-align: right;
}

.pa-clan-actions {
    display: grid;
    gap: 9px;
    padding: 10px;
}

.pa-clan-action,
.pa-clan-action:link,
.pa-clan-action:visited,
.pa-clan-action:active,
.pa-clan-action:hover {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 7px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .72);
    color: #000;
    text-decoration: none;
    font-family: Trebuchet MS, verdana, sans-serif;
}

.pa-clan-action:hover {
    background: rgba(255, 249, 244, .92);
}

.pa-clan-action img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 1px solid #F07819;
}

.pa-clan-action strong {
    display: block;
    color: #F07819;
    font-size: 15px;
    line-height: 1.1;
}

.pa-clan-action small {
    display: block;
    margin-top: 4px;
    color: #000;
    font-size: 11px;
    line-height: 1.25;
}

@media (max-width: 760px) {
    .pa-clan-grid {
        grid-template-columns: 1fr;
    }
}

.home-news-post h2 {
    background: #F07819 !important;
    color: #fff !important;
}

.pa-announcements-panel {
    width: 475px;
    margin-left: 0;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.pa-announcement-heading {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    background: #F07819;
    border: 1px solid #000;
    border-radius: 2px;
    margin: 0 0 20px;
}

.pa-announcement-heading h3 {
    color: #fff;
    margin: 0;
    padding: 10px 12px;
    font-size: 24px;
    font-style: italic;
    text-transform: uppercase;
    text-align: center;
}

.pa-announcement-heading button {
    height: 100%;
    min-height: 44px;
    border: 0;
    background: #F07819;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    cursor: pointer;
}

.pa-announcement-heading button:hover {
    background: #8F3A08;
}

.pa-home-event-panels {
    width: calc(250px + 1.6rem + 2px);
    max-width: 100%;
    margin: 0 auto 1rem;
    display: flex;
    flex-direction: column;
    clear: both;
}

.pa-home-event-panels .tournament-box {
    width: 100%;
    margin: 0 0 14px;
}

.pa-home-event-panels .tournament-box:last-child {
    margin-bottom: 0;
}

.pa-announcement-card {
    border: 1px solid #000;
    background: rgba(255, 255, 255, .82);
}

.pa-announcement-date {
    background: #F07819;
    color: #fff;
    border-bottom: 1px solid #000;
    padding: 8px 16px;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pa-announcement-date small {
    font-size: 12px;
    font-weight: 800;
}

.pa-announcement-body {
    padding: 12px 14px;
    background: rgba(255, 255, 255, .92);
}

.pa-announcement-body h4 {
    margin: 0 0 8px;
    color: #111;
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
}

.pa-announcement-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #F07819;
    font-size: 13px;
    font-weight: 700;
}

.pa-announcement-author img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 1px solid #F07819;
    background: #fff;
}

.pa-announcement-message {
    padding-right: 6px;
}

.pa-announcement-message p {
    margin: 0 0 8px;
    color: #000 !important;
    font-size: 15px;
    line-height: 1.35;
}

.pa-announcement-message p:last-child {
    margin-bottom: 0;
}

.pa-announcement-message img {
    max-width: 120px;
    max-height: 80px;
    object-fit: cover;
    border: 1px solid #000;
}

.pa-announcement-changes {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.pa-announcement-change-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 68px;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(240, 120, 25, .8);
    border-left: 5px solid #F07819;
    background: linear-gradient(135deg, rgba(18, 18, 18, .96) 0, rgba(18, 18, 18, .96) 108px, rgba(255, 255, 255, .96) 109px, rgba(255, 249, 244, .9) 100%);
    padding: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pa-announcement-change-row:hover {
    transform: translateY(-3px);
    border-color: #F07819;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.pa-announcement-change-media {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pa-announcement-character-image,
.pa-announcement-skill-image-wrap {
    width: 48px;
    height: 48px;
    border: 1px solid #F07819;
    background: #050505;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
}

.pa-announcement-character-image,
.pa-announcement-skill-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pa-announcement-skill-image-wrap {
    position: relative;
    overflow: hidden;
}

.pa-announcement-skill-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 30% 20%, #3a3a3a, #111 62%, #F07819);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .5px;
}

.pa-announcement-skill-image {
    position: relative;
    z-index: 1;
}

.pa-announcement-change-copy {
    min-width: 0;
}

.pa-announcement-change-copy div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.pa-announcement-character-badge,
.pa-announcement-skill-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.pa-announcement-character-badge {
    background: #F07819;
    border: 1px solid #9f1919;
    color: #fff;
}

.pa-announcement-skill-badge {
    background: #111;
    border: 1px solid #111;
    color: #fff;
}

.pa-announcement-change-copy p {
    margin: 7px 0 0;
    color: #000 !important;
    font-size: 13px;
    line-height: 1.3;
}

.pa-announcement-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    border: 1px solid #F07819;
    color: #fff;
    background: #F07819;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    align-self: stretch;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22);
}

.pa-announcement-badge.buff {
    background: #F07819;
    border-color: #F07819;
}

.pa-announcement-badge.nerf {
    background: #8F3A08;
    border-color: #8F3A08;
}

.pa-announcement-badge.fix {
    background: #111;
    border-color: #111;
}

.pa-announcement-status {
    padding: 14px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .82);
    color: #000 !important;
}

.pa-news-card {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .9);
    border-radius: 2px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.pa-news-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    background:
        linear-gradient(90deg, rgba(240, 120, 25, .98) 0%, rgba(240, 120, 25, .95) 62%, rgba(73, 31, 10, .98) 100%),
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .18), transparent 34%);
    color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .85);
    border-radius: 1px 1px 0 0;
    padding: 9px 12px 10px;
}

.pa-news-date {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
}

.pa-news-card-top h4 {
    margin: 5px 0 0;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.03;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.pa-news-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 2px;
    background: rgba(0, 0, 0, .22);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
}

.pa-news-author-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(240, 120, 25, .22);
    background: rgba(255, 255, 255, .98);
}

.pa-news-author {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pa-news-author img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border: 1px solid #F07819;
    border-radius: 2px;
    background: #fff;
}

.pa-news-author span,
.pa-news-type {
    color: #F07819;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pa-news-author strong {
    display: block;
    color: #111;
    font-size: 11.5px;
    line-height: 1.15;
}

.pa-news-type {
    border: 1px solid #F07819;
    border-radius: 2px;
    padding: 5px 7px;
    background: #fff;
    white-space: nowrap;
}

.pa-news-message {
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr);
    gap: 10px;
    padding: 11px 12px 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .88)),
        radial-gradient(circle at 100% 0%, rgba(240, 120, 25, .08), transparent 36%);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.pa-news-message-rule {
    border-radius: 2px;
    background: linear-gradient(180deg, #F07819, #111);
}

.pa-news-message p {
    margin: 0 0 7px;
    color: #000 !important;
    font-size: 12.5px;
    line-height: 1.42;
    letter-spacing: 0;
}

.pa-news-message strong {
    color: #111;
    font-weight: 800;
}

.pa-news-message p:last-child {
    margin-bottom: 0;
}

.pa-news-message img {
    max-width: 120px;
    max-height: 80px;
    object-fit: cover;
    border: 1px solid #000;
    border-radius: 2px;
}

.pa-news-change-section {
    margin: 0 14px 14px;
    border: 1px solid #000;
    border-radius: 2px;
    background: rgba(255, 255, 255, .78);
}

.pa-news-change-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #111;
    color: #fff;
    padding: 8px 10px;
    text-transform: uppercase;
    font-weight: 900;
    border-radius: 1px 1px 0 0;
}

.pa-news-change-title small {
    color: #fff;
    font-size: 11px;
}

.pa-news-change-list {
    display: grid;
    gap: 10px;
    padding: 10px;
}

.pa-news-change-card {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 78px;
    align-items: stretch;
    gap: 8px;
    min-height: 88px;
    overflow: hidden;
    border: 1px solid rgba(240, 120, 25, .75);
    border-radius: 2px;
    background: linear-gradient(135deg, #111 0, #111 118px, rgba(255, 255, 255, .98) 119px);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pa-news-change-card:hover {
    transform: translateY(-3px);
    border-color: #F07819;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
}

.pa-news-change-images {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0 9px 9px;
}

.pa-news-portrait-wrap,
.pa-news-skill-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    border: 1px solid #F07819;
    border-radius: 2px;
    background: #050505;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
    overflow: hidden;
}

.pa-news-portrait-wrap img,
.pa-news-skill-wrap img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pa-news-skill-wrap span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 25% 20%, #3a3a3a, #111 58%, #F07819);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.pa-news-change-main {
    min-width: 0;
    padding: 10px 0;
}

.pa-news-change-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pa-news-character-name,
.pa-news-skill-name {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    border-radius: 2px;
}

.pa-news-character-name {
    background: #F07819;
    border: 1px solid #9f1919;
}

.pa-news-skill-name {
    background: #111;
    border: 1px solid #111;
}

.pa-news-change-entry {
    margin-top: 8px;
}

.pa-news-change-entry:first-of-type {
    margin-top: 8px;
}

.pa-news-change-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pa-news-change-entry-type {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 3px 6px;
    background: #F07819;
    border: 1px solid #9f1919;
    border-radius: 2px;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.pa-news-change-entry-type.nerf {
    background: #8F3A08;
}

.pa-news-change-entry-type.fix {
    background: #111;
    border-color: #111;
}

.pa-news-change-entry-type.adjustment {
    background: #B5174D;
}

.pa-news-change-entry-type.boost {
    background: #F07819;
}

.pa-news-change-main p {
    margin: 5px 0 0;
    color: #000 !important;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.38;
}

.pa-news-change-type {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F07819;
    color: #fff;
    min-width: 0;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    border-radius: 0 1px 1px 0;
    word-break: break-word;
}

.pa-news-change-type.buff {
    background: #F07819;
}

.pa-news-change-type.nerf {
    background: #8F3A08;
}

.pa-news-change-type.fix {
    background: #111;
}

.pa-news-change-type.adjustment,
.pa-news-change-type.changes {
    background: #B5174D;
}

.pa-news-change-type.boost {
    background: #F07819;
}

.event-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 10px 20px;
    scrollbar-width: none;
}

.event-carousel .event-card {
    min-width: 320px;
    max-width: 320px;
    flex: 0 0 auto;
    scroll-snap-align: center;
    border: none;
}

.pa-home-event-panels .event-carousel {
    display: block;
    width: 100%;
    overflow: hidden;
    overflow-x: hidden;
    scroll-snap-type: none;
    gap: 0;
    padding: 10px 14px 14px;
    box-sizing: border-box;
}

.pa-home-event-panels .event-carousel .event-card {
    min-width: 0;
    max-width: none;
    width: 100%;
    flex: none;
    padding: .75rem 0;
    border: 0;
    box-sizing: border-box;
    scroll-snap-align: none;
    overflow: hidden;
}

.go-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    min-height: 36px;
    margin-top: auto;
    border: 0;
    background: linear-gradient(90deg, #F07819, #F07819, #F07819);
    background-size: 300% 300%;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    animation: shine 2s infinite;
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
    border-radius: 2px;
}

.go-btn:hover {
    filter: brightness(1.12);
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #F07819;
}

.control-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.control-panel-card {
    min-height: 92px;
    padding: 12px;
    background: rgba(255,255,255,.86);
    border: 1px solid #F07819;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px;
    line-height: 1.35;
}

.pa-control-page #content {
    padding: 22px 18px 26px;
    color: #000;
}

.pa-profile-form,
.pa-redeem-form {
    width: 100%;
    box-sizing: border-box;
}

.pa-profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pa-profile-form label,
.pa-redeem-form label,
.pa-bio-editor-grid label {
    display: grid;
    gap: 6px;
    color: #000;
    font-size: 13px;
    font-weight: 700;
}

.pa-profile-form .home-input,
.pa-redeem-form .home-input,
.pa-bio-editor-grid .home-input {
    width: 100%;
    min-height: 32px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .9);
    box-sizing: border-box;
}

.pa-profile-form-wide,
.pa-bio-editor-grid,
.pa-profile-form-actions {
    grid-column: 1 / -1;
}

.pa-country-select-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.pa-country-select-row img,
.pa-country-empty-flag {
    width: 28px;
    height: 18px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .85);
    object-fit: cover;
}

.pa-profile-form-actions {
    margin-top: 18px;
}

.pa-profile-form-actions button,
.pa-redeem-form button {
    width: 100%;
    min-height: 40px;
    border: 0;
    background: #F07819;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}

.pa-profile-form-actions button:hover,
.pa-redeem-form button:hover {
    filter: brightness(.94);
}

.pa-profile-form-actions button:disabled,
.pa-redeem-form button:disabled {
    opacity: .65;
    cursor: wait;
}

.pa-bbcode-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.pa-bbcode-toolbar button {
    min-width: 46px;
    min-height: 30px;
    border: 1px solid #F07819;
    background: #fff;
    color: #F07819;
    font-weight: 900;
    cursor: pointer;
}

.pa-bbcode-toolbar button:hover {
    background: #F07819;
    color: #fff;
}

.pa-bio-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
    gap: 14px;
}

.pa-bio-editor-grid textarea.home-input {
    min-height: 236px;
    resize: vertical;
}

.pa-bio-preview {
    min-height: 236px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .72);
    padding: 12px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.pa-bio-preview > strong {
    display: block;
    color: #F07819;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.pa-bio-preview blockquote {
    margin: 8px 0;
    padding: 8px 10px;
    border-left: 4px solid #F07819;
    background: rgba(240, 120, 25, .08);
}

.pa-bio-preview img {
    max-width: 100%;
    height: auto;
}

.pa-redeem-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.pa-redeem-summary span {
    min-height: 56px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .78);
    display: grid;
    place-content: center;
    gap: 2px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
}

.pa-redeem-summary b {
    color: #F07819;
    font-size: 18px;
}

.pa-redeem-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: end;
    gap: 12px;
    padding: 16px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .7);
}

.pa-redeem-reward,
.pa-redeem-history {
    margin-top: 16px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .74);
    padding: 14px;
    box-sizing: border-box;
    color: #000;
}

.pa-redeem-reward {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pa-redeem-reward strong {
    grid-column: 1 / -1;
    color: #F07819;
    font-size: 16px;
}

.pa-redeem-history strong {
    display: block;
    color: #F07819;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.pa-redeem-history div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pa-redeem-history span {
    padding: 5px 8px;
    border: 1px solid #F07819;
    background: #fff;
    color: #F07819;
    font-weight: 900;
}

@media (max-width: 760px) {
    .pa-profile-form-grid,
    .pa-bio-editor-grid,
    .pa-redeem-summary,
    .pa-redeem-form,
    .pa-redeem-reward {
        grid-template-columns: 1fr;
    }
}

.source-template-link {
    display: inline-block;
    padding: 8px 10px;
    border: 1px solid #F07819;
    background: #fff;
    color: #F07819;
    text-decoration: none;
    font-weight: 700;
}

.pa-hidden-file {
    display: none !important;
}

.pa-avatar-page .avatar-content {
    color: #000;
    padding: 22px 18px 26px;
}

.pa-avatar-page .current-avatar {
    position: relative;
    display: grid !important;
    place-items: center;
    width: 75px;
    height: 75px;
    margin: 0 auto 38px !important;
}

.pa-avatar-page .current-avatar .user-avatar {
    width: 75px;
    height: 75px;
    object-fit: cover;
    display: block;
}

.pa-avatar-page .current-avatar .pa-avatar-frame {
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    object-fit: contain;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.pa-avatar-page .avatar-form {
    max-width: 610px;
    margin: 0 auto 30px;
}

.pa-avatar-page .avatar-form label {
    min-width: 82px;
}

.pa-avatar-page .avatar-form .centerp {
    display: flex;
    gap: 8px;
    margin: 0;
}

.pa-avatar-page .avatar-grid {
    grid-template-columns: repeat(5, 86px);
    gap: 20px 24px;
    align-items: start;
    justify-content: center;
}

.pa-avatar-page .choose-avatar-avatars {
    width: 86px;
    min-height: 104px;
}

.pa-avatar-page .choose-avatar-avatars button {
    display: block;
    width: 86px;
    height: 86px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.pa-avatar-page .choose-avatar-avatars img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border: 1px solid #F07819;
    padding: 2px;
    background: #fff;
}

.pa-avatar-page .choose-avatar-avatars input[type="radio"] {
    margin-top: 4px;
}

.pa-avatar-page .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.pa-avatar-page .pagination .home-input {
    display: none;
}

.pa-background-page .avatar-content {
    color: #000;
}

.pa-background-size-note {
    width: fit-content;
    margin: 8px auto 18px;
    padding: 10px 14px;
    background: #F07819;
    color: #fff;
    font: italic 700 16px/18px Arial, Helvetica, sans-serif;
    text-align: center;
}

.pa-background-page .avatar-form {
    max-width: none;
    margin: 0 8px 28px;
}

.pa-background-page .avatar-form label {
    min-width: 118px;
}

.pa-background-page .avatar-form .home-input {
    min-width: 0;
}

.pa-background-page .centerp3 {
    margin: 0;
}

.pa-background-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    justify-content: center;
    gap: 14px;
    padding: 16px;
}

.pa-background-current {
    display: flex;
    justify-content: center;
    padding: 16px;
}

.pa-background-current-card {
    width: min(100%, 520px);
    margin: 0 auto;
}

.pa-background-current-card img {
    width: 100%;
    aspect-ratio: 770 / 560;
    object-fit: cover;
    border: 1px solid #000;
    background: #fff;
}

.pa-background-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .82);
    color: #000;
    cursor: pointer;
    font: 700 12px/14px Arial, Helvetica, sans-serif;
}

.pa-background-option img {
    width: 150px;
    aspect-ratio: 770 / 560;
    height: auto;
    object-fit: cover;
    border: 1px solid #000;
    background: #fff;
}

.pa-background-empty {
    color: #000;
    margin: 0;
    padding: 16px;
    grid-column: 1 / -1;
}

.pa-reset-account-page #content {
    padding: 24px 28px 28px;
    color: #000;
}

.pa-reset-summary {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    max-width: 650px;
    margin: 0 auto 22px;
}

.pa-reset-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 75px;
    height: 75px;
    margin: 0 auto;
}

.pa-reset-avatar .user-avatar {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border: 1px solid #F07819;
    padding: 2px;
    background: #fff;
}

.pa-reset-avatar .pa-avatar-frame {
    position: absolute;
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    object-fit: contain;
    border: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
}

.pa-reset-kicker {
    display: block;
    color: #F07819;
    font: italic 700 14px/18px Arial, Helvetica, sans-serif;
    margin-bottom: 3px;
}

.pa-reset-summary strong {
    display: block;
    color: #F07819;
    font: 700 24px/26px Arial, Helvetica, sans-serif;
}

.pa-reset-summary p {
    margin: 6px 0 0;
    font: 13px/19px Arial, Helvetica, sans-serif;
}

.pa-reset-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 650px;
    margin: 0 auto 24px;
}

.pa-reset-stat {
    border: 1px solid #000;
    background: rgba(255, 255, 255, .78);
    min-height: 62px;
    display: grid;
    grid-template-rows: 28px 1fr;
    text-align: center;
}

.pa-reset-stat span {
    display: grid;
    place-items: center;
    background: #F07819;
    color: #fff;
    font: italic 700 14px/16px Arial, Helvetica, sans-serif;
}

.pa-reset-stat strong {
    display: grid;
    place-items: center;
    color: #F07819;
    font: italic 700 18px/20px Arial, Helvetica, sans-serif;
    min-width: 0;
}

.pa-reset-form {
    max-width: 650px;
    margin: 0 auto;
}

.pa-reset-form .avatar-form {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 0 0 12px;
    padding: 12px;
}

.pa-reset-form .avatar-form label {
    min-width: 0;
    font: 13px/16px Arial, Helvetica, sans-serif;
}

.pa-reset-form .avatar-form input {
    margin: 0;
    width: 100%;
}

.pa-reset-form .centerp {
    margin-top: 18px;
}

.pa-reset-form .change-btn {
    min-width: 220px;
}

.pa-reset-form .change-btn:disabled {
    opacity: .65;
    cursor: default;
}

.pa-reset-status {
    color: #000;
    text-align: center;
    margin: 14px 0 0;
}

#mailcontainer .pm-grid {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

#mailcontainer .pm-sidebar,
#mailcontainer .pm-list,
#mailcontainer .pm-preview {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
}

#mailcontainer .pm-sidebar {
    background: #f6f8fa;
}

#mailcontainer .pm-folder {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 6px;
    color: #111827;
}

#mailcontainer .pm-folder.active {
    background: #fff;
    border-color: #e5e7eb;
}

#mailcontainer .pm-message-row {
    display: grid;
    grid-template-columns: minmax(110px, .9fr) minmax(160px, 1.5fr) minmax(120px, .9fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #ececec;
    color: #111;
    font-size: 12px;
}

#mailcontainer .pm-message-row div:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#mailcontainer .pm-message-row p {
    margin: 0;
}

#mailcontainer .pm-message-row time {
    color: #6b7280;
}

.pmbutton2 {
    padding: 4px 8px;
    border: 1px solid #F07819;
    background: #F07819;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
}

#compose label {
    display: block;
    margin-top: 8px;
    color: #111;
    font-weight: 700;
}

#compose textarea.home-input {
    min-height: 90px;
    resize: vertical;
}

#buddycontainer .buddy-list {
    width: 100%;
    font-size: 12px;
    background-color: #fff;
    border-top: 2px solid #F07819;
    border-bottom: 2px solid #F07819;
}

#buddycontainer .buddy-list-header,
#buddycontainer .buddy-list-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr .7fr;
    gap: 8px;
    align-items: center;
}

#buddycontainer .buddy-list-header {
    background-color: #F07819;
    color: #fff;
    padding: 8px 10px;
    font-weight: 700;
}

#buddycontainer .buddy-list-row {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(215,51,50,.25);
}

#buddycontainer .clan-memberlist-td9 {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #000;
}

#buddycontainer .clan-memberlist-td9 img {
    max-width: 18px;
    max-height: 18px;
}

#buddycontainer .buddy-options {
    justify-content: center;
}

.resource-links {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.resource-links a {
    display: block;
    width: min(100%, 460px);
}

.ladder-rank-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.ladder-rank-list li {
    margin: 10px 0;
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: stretch;
}

.ladder-rank-range {
    background: #F07819;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 22px;
    text-shadow: 0 1px 0 #fff;
}

.ladder-rank-name {
    background: linear-gradient(90deg,#F07819,#F07819);
    color: #fff;
    padding: 14px 20px;
    border-left: 2px solid #000;
    font-size: 25px;
}

.ladder-directory-section {
    margin: 24px 0;
    border: 1px solid #000;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.ladder-directory-section h3 {
    margin: 0;
    padding: 12px 18px;
    background: #F07819;
    color: #fff;
    font-size: 20px;
    font-style: italic;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.ladder-directory-list {
    list-style: none;
    margin: 0;
    padding: 12px;
}

.ladder-directory-row {
    display: grid;
    grid-template-columns: 44px 48px minmax(0, 1fr) 104px;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid rgba(240, 120, 25, 0.35);
    background: rgba(255, 255, 255, 0.74);
}

.ladder-directory-row + .ladder-directory-row {
    margin-top: 8px;
}

.ladder-directory-rank {
    color: #F07819;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
}

.ladder-directory-avatar {
    width: 42px;
    height: 42px;
    border: 1px solid #F07819;
    object-fit: cover;
    background: #fff;
}

.ladder-directory-main {
    min-width: 0;
}

.ladder-directory-main a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    color: #000;
    font-weight: 900;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ladder-directory-main a:hover {
    color: #F07819;
}

.ladder-directory-main span {
    display: block;
    color: #F07819;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.ladder-directory-progress {
    position: relative;
    width: min(100%, 170px);
    height: 18px;
    margin-top: 4px;
    border: 1px solid #000;
    background: #e1e1e1;
    overflow: hidden;
}

.ladder-directory-progress::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--ladder-progress, 6%);
    background: #F07819;
}

.ladder-directory-progress span {
    position: relative;
    z-index: 1;
    color: #000;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    text-transform: none;
}

.ladder-directory-meta {
    color: #000;
    font-size: 12px;
    text-align: right;
}

.ladder-directory-meta span {
    display: block;
    color: #F07819;
    font-weight: 900;
}

.ladder-directory-meta strong {
    display: block;
    font-weight: 900;
}

.ladder-directory-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid rgba(240, 120, 25, 0.35);
    color: #000;
    font-weight: 900;
}

.ladder-directory-pager button {
    border: 1px solid #000;
    background: #F07819;
    color: #fff;
    cursor: pointer;
    font-weight: 900;
    padding: 6px 12px;
}

.ladder-directory-pager button:disabled {
    cursor: default;
    opacity: 0.45;
}

.ladder-directory-empty {
    padding: 14px;
    color: #F07819;
    font-weight: 900;
    text-align: center;
}

#clanrecruit .pageborda {
    border: 1px solid #000;
    display: block;
    margin: 0 auto 10px;
}

.home-input3 {
    border: 1px solid #F07819;
    padding: 6px;
    max-width: 100%;
}

.centerp3 {
    text-align: center;
    padding: 12px 0;
}

@media (max-width: 760px) {
    .control-panel-grid,
    #mailcontainer .pm-grid {
        grid-template-columns: 1fr;
    }

    #mailcontainer .pm-message-row {
        grid-template-columns: 1fr;
    }

    .ladder-rank-list li {
        grid-template-columns: 1fr;
    }

    .ladder-directory-row {
        grid-template-columns: 36px 42px minmax(0, 1fr);
    }

    .ladder-directory-meta {
        grid-column: 3;
        text-align: left;
    }

    .ladder-directory-pager {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }
}

.pa-clan-page,
.pa-community-gfx-page {
    color: #000;
}

.pa-clan-page #content.pa-clan-content,
.pa-clan-panel #content.pa-clan-content,
.pa-community-gfx-page #content {
    padding: 14px;
}

.pa-clan-avatar-wrap {
    position: relative;
    display: grid;
    place-items: center;
    overflow: visible;
}

.pa-clan-avatar-wrap .pa-avatar-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.pa-clan-avatar {
    position: relative;
    z-index: 1;
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: 1px solid #F07819;
}

.pa-clan-avatar-large {
    width: 96px;
    height: 96px;
    margin: 0 auto 14px;
}

.pa-clan-profile-avatar {
    position: relative;
    width: 75px;
    height: 75px;
    padding: 0;
    overflow: visible;
}

.pa-clan-profile-avatar-img,
.pa-clan-profile-avatar .pa-avatar-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pa-clan-profile-avatar .pa-avatar-frame {
    z-index: 2;
    object-fit: fill;
    pointer-events: none;
}

.pa-clan-action-icon {
    width: 50px;
    height: 50px;
    padding: 7px;
    border: 1px solid #F07819;
    background: #fff;
    fill: none;
    stroke: #F07819;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pa-clan-card-copy,
.pa-clan-status,
.pa-clan-empty,
.pa-clan-danger {
    margin: 0;
    padding: 14px;
    font-family: Trebuchet MS, verdana, sans-serif;
}

.pa-clan-empty,
.pa-clan-danger {
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .74);
    text-align: center;
}

.pa-clan-empty strong,
.pa-clan-danger strong {
    display: block;
    color: #F07819;
    font-size: 22px;
    margin-bottom: 6px;
}

.pa-red-button,
.pa-red-button:link,
.pa-red-button:visited {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 36px;
    margin-top: 8px;
    padding: 0 18px;
    background: #F07819;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.pa-clan-form,
.pa-clan-avatar-editor,
.pa-clan-inline-form {
    border: 1px solid #000;
    background: rgba(255, 255, 255, .78);
    padding: 14px;
}

.pa-clan-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pa-clan-form label,
.pa-clan-inline-form label {
    display: grid;
    gap: 5px;
    color: #F07819;
    font: 700 13px/1.3 Trebuchet MS, verdana, sans-serif;
}

.pa-clan-form label span {
    min-height: 32px;
    padding: 7px;
    border: 1px solid rgba(240, 120, 25, .45);
    background: rgba(255, 255, 255, .86);
    color: #000;
    font-weight: 400;
}

.pa-clan-full {
    grid-column: 1 / -1;
}

.pa-clan-form textarea.home-input {
    width: 100%;
    min-height: 150px;
    resize: vertical;
}

.pa-clan-inline-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.pa-clan-member-list,
.pa-clan-invite-list {
    display: grid;
    gap: 10px;
}

.pa-clan-member-row,
.pa-clan-invite-row {
    display: grid;
    grid-template-columns: 52px minmax(90px, 1fr) minmax(100px, 1fr) minmax(120px, .8fr) minmax(120px, .8fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .76);
    font-family: Trebuchet MS, verdana, sans-serif;
}

.pa-clan-member-row img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border: 1px solid #F07819;
}

.pa-clan-invite-row {
    grid-template-columns: minmax(120px, 1fr) minmax(160px, 1fr) auto;
}

.pa-clan-frame-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 12px;
}

.pa-clan-frame-card {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 210px;
    padding: 12px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .76);
    text-align: center;
    font-family: Trebuchet MS, verdana, sans-serif;
}

.pa-clan-frame-card .pa-clan-avatar-wrap {
    width: 80px;
    height: 80px;
}

.pa-community-gfx-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .78);
}

.pa-community-gfx-hero h1 {
    margin: 0;
    color: #F07819;
    font: italic 700 34px/1 Trebuchet MS, verdana, sans-serif;
    text-transform: uppercase;
}

.pa-community-gfx-hero p {
    max-width: 620px;
    margin: 0;
    color: #000;
    font-size: 14px;
    line-height: 1.4;
}

.pa-gfx-submit {
    display: grid;
    grid-template-columns: minmax(150px, .35fr) minmax(240px, 1fr) auto;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .8);
}

.pa-gfx-section {
    margin-bottom: 16px;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .72);
}

.pa-gfx-section-title {
    background: #F07819;
    color: #fff;
    padding: 10px 14px;
    font: italic 700 18px/1 Trebuchet MS, verdana, sans-serif;
    text-transform: uppercase;
}

.pa-gfx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    padding: 14px;
    align-items: start;
}

.pa-gfx-card {
    display: grid;
    gap: 8px;
    padding: 8px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .82);
}

.pa-gfx-preview {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .66);
    cursor: pointer;
    overflow: hidden;
}

.pa-gfx-preview img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.pa-gfx-card[data-gfx-category="avatars"] .pa-gfx-preview {
    width: 82px;
    height: 82px;
    aspect-ratio: 1;
    justify-self: center;
    background: rgba(255, 255, 255, .82);
}

.pa-gfx-card[data-gfx-category="avatars"] .pa-gfx-preview img {
    max-width: 80px;
    max-height: 80px;
}

.pa-gfx-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #000;
    font: 12px/1.2 Trebuchet MS, verdana, sans-serif;
}

.pa-gfx-meta strong {
    color: #F07819;
}

.pa-gfx-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.pa-gfx-actions .change-btn {
    width: 100%;
    min-width: 0;
}

.pa-gfx-remove {
    background: #111 !important;
}

.pa-gfx-empty {
    min-height: 90px;
    display: grid;
    place-items: center;
    border: 1px dashed #F07819;
    color: #000;
    font: 700 13px/1 Trebuchet MS, verdana, sans-serif;
}

@media (max-width: 760px) {
    .pa-clan-form-grid,
    .pa-clan-inline-form,
    .pa-gfx-submit,
    .pa-clan-member-row,
    .pa-clan-invite-row {
        grid-template-columns: 1fr;
    }

    .pa-community-gfx-hero h1 {
        font-size: 26px;
    }
}

.pa-clan-actions .pa-clan-action,
.pa-clan-actions .pa-clan-action:link,
.pa-clan-actions .pa-clan-action:visited,
.pa-clan-actions .pa-clan-action:active,
.pa-clan-actions .pa-clan-action:hover {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 72px;
    padding: 8px;
    overflow: hidden;
}

.pa-clan-actions .pa-clan-action-icon {
    width: 40px;
    height: 40px;
    padding: 5px;
    box-sizing: border-box;
}

.pa-clan-actions .pa-clan-action > span {
    display: block;
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.pa-clan-actions .pa-clan-action strong,
.pa-clan-actions .pa-clan-action small {
    position: static;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    margin-left: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.pa-clan-actions .pa-clan-action strong {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.1;
}

.pa-clan-actions .pa-clan-action small {
    margin-top: 0;
    font-size: 11px;
    line-height: 1.2;
}

#clanprofilecontent .clan-ladder .info-row,
#clanprofilecontent .clan-info .info-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(90px, auto);
    align-items: center;
    gap: 12px;
    min-height: 30px;
    margin-bottom: 6px;
    white-space: nowrap;
}

#clanprofilecontent .clan-ladder .info-row > span:first-child,
#clanprofilecontent .clan-info .info-row > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#clanprofilecontent .clan-ladder .info-row > span:last-child,
#clanprofilecontent .clan-info .info-row > span:last-child {
    min-width: 0;
    text-align: right;
}

#clanprofilecontent .clan-level-row {
    margin-bottom: 3px;
}

.pa-clan-level-bar,
.pa-member-level-bar {
    position: relative;
    height: 9px;
    overflow: hidden;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .82);
}

.pa-clan-level-bar {
    margin: 0 0 10px;
}

.pa-clan-level-bar span,
.pa-member-level-bar span {
    display: block;
    height: 100%;
    min-width: 4px;
    max-width: 100%;
    background: #F07819;
}

#clanprofilecontent .member-section {
    overflow: hidden;
}

#clanprofilecontent .member-header,
#clanprofilecontent .member-row {
    grid-template-columns: 44px minmax(130px, 1.1fr) minmax(135px, .95fr) minmax(120px, .8fr) 86px;
    gap: 12px;
    min-width: 0;
}

#clanprofilecontent .member-header {
    padding: 10px 8px;
}

#clanprofilecontent .member-rank-section {
    margin: 14px 0 0;
    border: 1px solid rgba(240, 120, 25, .55);
    background: rgba(255, 255, 255, .28);
}

#clanprofilecontent .member-rank-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 10px;
    background: #F07819;
    color: #fff;
    font-family: Trebuchet MS, verdana, sans-serif;
}

#clanprofilecontent .member-rank-title strong {
    font-size: 15px;
}

#clanprofilecontent .member-rank-title span {
    font-size: 12px;
    font-weight: 700;
}

#clanprofilecontent .member-rank-section .member-row {
    padding: 9px 8px;
    border-bottom: 1px solid rgba(240, 120, 25, .28);
}

#clanprofilecontent .member-rank-section .member-row:last-child {
    border-bottom: 0;
}

#clanprofilecontent .member-name-cell,
#clanprofilecontent .member-level-cell {
    min-width: 0;
}

#clanprofilecontent .member-name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

#clanprofilecontent .member-list-avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    object-fit: cover;
    border: 1px solid #F07819;
    background: #fff;
}

#clanprofilecontent .member-name-cell a {
    color: #000;
    text-decoration: none;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#clanprofilecontent .member-level-cell {
    display: grid;
    gap: 4px;
}

#clanprofilecontent .member-level-cell > span {
    color: #F07819;
    font-weight: 700;
    line-height: 1;
}

#clanprofilecontent .member-level-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#clanprofilecontent .member-rank-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 14px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}

#clanprofilecontent .member-view-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 74px;
    min-height: 28px;
    background: #F07819;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.source-clan-ranking-row {
    cursor: pointer;
}

.source-clan-ranking-row:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

.admiral-profile-boxladder,
.yonko-profile-boxladder,
.king-profile-boxladder {
    position: relative;
    background-image: none;
    background-color: #ffffffc9;
    border: 1px solid #000;
    border-radius: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    min-height: 500px;
    max-height: 500px;
}

.admiral-profile-boxladder .profile-content,
.yonko-profile-boxladder .profile-content,
.king-profile-boxladder .profile-content {
    position: absolute;
    top: 58px;
    left: 50%;
    width: 762px;
    height: 404px;
    padding: 0;
    transform: translateX(-50%);
    z-index: 2;
}

.admiral-profile-boxladder h3,
.yonko-profile-boxladder h3,
.king-profile-boxladder h3 {
    position: relative;
    z-index: 3;
}

.admiral-profile-boxladder .profile-ladder-sections,
.yonko-profile-boxladder .profile-ladder-sections,
.king-profile-boxladder .profile-ladder-sections {
    position: absolute;
    top: 58px;
    left: 50%;
    width: 762px;
    height: 404px;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 760px) {
    #clanprofilecontent .member-header {
        display: none;
    }

    #clanprofilecontent .member-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    #clanprofilecontent .member-row > div:nth-child(n+3) {
        grid-column: 2;
    }
}

/* Page polish: shops, control pages, player card, reset/prestige. */
.pa-shop-page,
.pa-control-page,
.pa-reset-account-page,
.avatar-change-box:has(.classic-player-card-page) {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .68)),
        radial-gradient(circle at 15% 0%, rgba(240, 120, 25, .18), transparent 32%);
    box-shadow: 5px 5px 0 rgba(240, 120, 25, .3);
}

.pa-shop-page > h3,
.pa-control-page > h3,
.pa-reset-account-page > h3,
.avatar-change-box:has(.classic-player-card-page) > h3 {
    letter-spacing: .2px;
    background: linear-gradient(90deg, #F07819 0%, #F07819 72%, #F07819 100%);
}

.pa-shop-page #content,
.pa-control-page #content {
    padding: 18px 22px 24px;
}

.pa-shop-toolbar {
    padding: 10px;
    border: 1px solid rgba(240, 120, 25, .35);
    background: rgba(255, 255, 255, .55);
}

.pa-shop-balances span {
    min-width: 104px;
    text-align: center;
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .72));
}

.pa-shop-tabs {
    justify-content: center;
}

.pa-shop-tabs button {
    min-width: 78px;
    border-radius: 2px;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}

.pa-shop-tabs button:hover,
.pa-shop-tabs button.active {
    transform: translateY(-1px);
}

.pa-shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.pa-shop-card {
    min-height: 244px;
    grid-template-rows: 96px minmax(38px, auto) 38px 38px;
    padding: 13px 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .62));
    box-shadow: 3px 3px 0 rgba(240, 120, 25, .2);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.pa-shop-card-hats {
    min-height: 282px;
    grid-template-rows: 132px minmax(38px, auto) 38px 38px;
}

.pa-shop-card:hover {
    transform: translateY(-2px);
    box-shadow: 5px 5px 0 rgba(240, 120, 25, .28);
    background: rgba(255, 255, 255, .92);
}

.pa-shop-preview {
    width: 88px;
    height: 88px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.pa-shop-preview img {
    max-width: 84px;
    max-height: 84px;
}

.pa-shop-preview .pa-shop-layer-preview {
    width: 88px;
    height: 88px;
}

.pa-shop-preview .pa-shop-layer-preview img {
    width: 88px;
    height: 88px;
    max-width: none;
    max-height: none;
}

.pa-shop-preview .pa-shop-frame-preview .pa-shop-preview-base {
    inset: 6px;
    width: 76px;
    height: 76px;
}

.pa-shop-preview .pa-shop-frame-preview .pa-shop-preview-overlay {
    inset: 0;
    width: 88px;
    height: 88px;
}

.pa-shop-preview .pa-shop-hat-preview .pa-shop-preview-base {
    top: 20px;
    left: 40px;
    width: 60px;
    height: 60px;
}

.pa-shop-preview .pa-shop-hat-preview .pa-shop-preview-overlay {
    top: 0;
    left: 0;
    width: 112px;
    height: 112px;
}

.pa-shop-card-hats .pa-shop-preview {
    width: 112px;
    height: 112px;
    overflow: visible;
}

.pa-shop-card-hats .pa-shop-layer-preview {
    width: 112px;
    height: 112px;
}

.pa-shop-name {
    font-size: 13px;
}

.pa-shop-price {
    color: #202020;
    font-weight: 700;
}

.pa-shop-actions button,
.pa-profile-form-actions button,
.pa-redeem-form button,
.classic-player-card-actions .change-btn,
.pa-reset-form .change-btn {
    border-radius: 2px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14);
    transition: transform .15s ease, filter .15s ease;
}

.pa-shop-actions button:hover,
.pa-profile-form-actions button:hover,
.pa-redeem-form button:hover,
.classic-player-card-actions .change-btn:hover,
.pa-reset-form .change-btn:hover {
    transform: translateY(-1px);
}

.classic-player-card-page {
    padding: 28px 22px 24px;
}

.classic-player-card-stage {
    min-height: 188px;
    border-color: rgba(0, 0, 0, .92);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .38)),
        repeating-linear-gradient(-45deg, rgba(240, 120, 25, .07) 0 8px, transparent 8px 16px);
}

.classic-player-card {
    transform: scale(1.03);
}

.classic-player-card-actions {
    border-color: rgba(0, 0, 0, .92);
    background: rgba(255, 255, 255, .72);
}

.pa-profile-form-grid {
    gap: 16px 14px;
}

.pa-profile-form label,
.pa-bio-editor-grid label {
    font-family: Trebuchet MS, verdana, sans-serif;
}

.pa-profile-form .home-input,
.pa-bio-editor-grid .home-input {
    min-height: 34px;
    padding: 7px 9px;
    background: rgba(255, 255, 255, .92);
}

.pa-country-select-row {
    grid-template-columns: 34px minmax(0, 1fr);
}

.pa-bio-editor-grid {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .78fr);
}

.pa-bbcode-toolbar {
    padding: 10px;
    border: 1px solid rgba(240, 120, 25, .3);
    background: rgba(255, 255, 255, .56);
}

.pa-bbcode-toolbar button {
    border-radius: 2px;
}

.pa-bio-preview {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .68));
    box-shadow: 3px 3px 0 rgba(240, 120, 25, .18);
}

.pa-reset-account-page #content {
    padding: 24px 28px 30px;
}

.pa-reset-stats {
    max-width: 720px;
}

.pa-prestige-panel {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 130px;
    gap: 16px;
    align-items: center;
    max-width: 720px;
    margin: 0 auto 20px;
    padding: 14px;
    border: 1px solid #000;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .62)),
        linear-gradient(90deg, rgba(240, 120, 25, .14), transparent);
    box-shadow: 3px 3px 0 rgba(240, 120, 25, .22);
}

.pa-prestige-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 1px solid #F07819;
    background: #fff;
}

.pa-prestige-icon img {
    max-width: 62px;
    max-height: 62px;
    object-fit: contain;
}

.pa-prestige-copy strong {
    display: block;
    color: #F07819;
    font: italic 900 18px/21px Trebuchet MS, verdana, sans-serif;
}

.pa-prestige-copy p {
    margin: 6px 0 0;
    font: 13px/18px Arial, Helvetica, sans-serif;
}

.pa-prestige-requirement {
    min-height: 70px;
    border: 1px solid #F07819;
    background: rgba(255, 255, 255, .78);
    display: grid;
    place-items: center;
    text-align: center;
}

.pa-prestige-requirement span {
    color: #F07819;
    font: 900 11px/12px Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

.pa-prestige-requirement strong {
    color: #000;
    font: italic 900 22px/24px Trebuchet MS, verdana, sans-serif;
}

.pa-reset-form .centerp {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.pa-prestige-button {
    background: #111 !important;
}

.profile-boxseasonladder,
.admiral-profile-boxladder.profile-boxseasonladder,
.yonko-profile-boxladder.profile-boxseasonladder,
.king-profile-boxladder.profile-boxseasonladder {
    min-height: 345px;
    max-height: 345px;
}

.profile-boxseasonladder .profile-ladder-sections,
.profile-boxseasonladder .profile-content {
    height: 250px;
}

.profile-boxseasonladder .info-sectionladder {
    height: 250px;
}

.profile-boxseasonladder .info-sectionladder > div[class^="info-row"] {
    height: 26px;
}

.profile-boxseasonladder .profile-ladder-sections {
    object-fit: cover;
    object-position: top center;
}

.profile-boxseasonladder .profile-content {
    overflow: hidden;
}

.nal-supreme-player-top-3-player-profile-boxusername,
.nal-supreme-player-top-3-player-profile-box,
.nal-supreme-player-top-3-player-bio-box,
.nal-supreme-player-top-3-player-profile-boxclan,
.nal-supreme-player-top-3-player-profile-boxpersonal,
.nal-supreme-player-top-3-player-profile-boxladder {
    border-color: #7e173a !important;
}

.nal-supreme-player-top-3-player-profile-boxusername:hover,
.nal-supreme-player-top-3-player-profile-box:hover,
.nal-supreme-player-top-3-player-bio-box:hover,
.nal-supreme-player-top-3-player-profile-boxclan:hover,
.nal-supreme-player-top-3-player-profile-boxpersonal:hover,
.nal-supreme-player-top-3-player-profile-boxladder:hover {
    border-color: #aa1b42 !important;
    box-shadow: 3px 3px 0 #aa1b42 !important;
}

.nal-supreme-player-top-3-player-profile-box h3,
.nal-supreme-player-top-3-player-bio-header,
.nal-supreme-player-top-3-player-profile-boxclan h3,
.nal-supreme-player-top-3-player-profile-boxpersonal h3,
.nal-supreme-player-top-3-player-profile-boxladder h3,
.nal-supreme-player-top-3-player-coloronline,
.nal-supreme-player-top-3-player-colorlastseen,
.nal-supreme-player-top-3-player-info-rowposts,
.nal-supreme-player-top-3-player-info-rowberries,
.nal-supreme-player-top-3-player-info-rowregistered,
.nal-supreme-player-top-3-player-info-rowsubs,
.nal-supreme-player-top-3-player-game-row {
    background-color: #a81941 !important;
}

.nal-supreme-player-top-3-player-game-row {
    background-image: url("https://NAOrigins.b-cdn.net/Pirate%20Arena/assets/images/pirate-arena/profile-game-row-bg-nal-supreme-player-top3-red.png") !important;
}

.nal-supreme-player-top-3-player-valueusername,
.nal-supreme-player-top-3-player-valuesiterank,
.nal-supreme-player-top-3-player-valuenonenone,
.nal-supreme-player-top-3-player-bio-title,
.nal-supreme-player-top-3-player-website-link,
.nal-supreme-player-top-3-player-website-link:hover {
    color: #a81941 !important;
}

.pa-client-theme {
    --pa-client-accent: #F07819;
    --pa-client-accent-rgb: 240, 120, 25;
    --pa-client-accent-hover: #F07819;
    --pa-client-accent-dark: #F07819;
}

.pa-profile-theme-showcase[data-theme="nal-supreme-player-top-3-player"] {
    --theme-color: #a81941;
}

.pa-client-theme .main-nav,
.pa-client-theme .dropdown-menu,
.pa-client-theme .nav-links.nav-links-open,
.pa-client-theme .pa-shop-tabs button.active,
.pa-client-theme .pa-shop-tabs button:hover,
.pa-client-theme .pa-shop-page > h3,
.pa-client-theme .pa-control-page > h3,
.pa-client-theme .pa-reset-account-page > h3,
.pa-client-theme .avatar-change-box:has(.classic-player-card-page) > h3,
.pa-client-theme .archivement-header,
.pa-client-theme .mission-card-header,
.pa-client-theme .mission-selected-bar,
.pa-client-theme .account-links a,
.pa-client-theme .pa-shop-actions button,
.pa-client-theme .pa-profile-form-actions button,
.pa-client-theme .pa-redeem-form button,
.pa-client-theme .classic-player-card-actions .change-btn,
.pa-client-theme .pa-reset-form .change-btn,
.pa-client-theme .pa-shop-subpage-link,
.pa-client-theme .pa-partner-button,
.pa-client-theme .new-badge,
.pa-client-theme #clanprofilecontent .member-view-button {
    background: var(--pa-client-accent) !important;
    background-color: var(--pa-client-accent) !important;
    color: #fff !important;
}

.pa-client-theme .start-playing-btn,
.pa-client-theme .hero .blue,
.pa-client-theme .username,
.pa-client-theme .user-title,
.pa-client-theme .pa-shop-name,
.pa-client-theme .pa-shop-card-footer strong,
.pa-client-theme .pa-profile-theme-card-footer .pa-shop-actions span,
.pa-client-theme .winner,
.pa-client-theme .winner svg {
    color: var(--pa-client-accent) !important;
}

.pa-client-theme .pa-shop-tabs button,
.pa-client-theme .pa-shop-card,
.pa-client-theme .pa-shop-toolbar,
.pa-client-theme .pa-shop-empty,
.pa-client-theme .classic-player-card-stage,
.pa-client-theme .classic-player-card-actions {
    border-color: var(--pa-client-accent) !important;
}

.pa-client-theme .pa-shop-page,
.pa-client-theme .pa-control-page,
.pa-client-theme .pa-reset-account-page,
.pa-client-theme .avatar-change-box:has(.classic-player-card-page) {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .68)),
        radial-gradient(circle at 15% 0%, rgba(var(--pa-client-accent-rgb), .18), transparent 32%) !important;
    box-shadow: 5px 5px 0 rgba(var(--pa-client-accent-rgb), .3) !important;
}

.pa-client-theme .pa-shop-card {
    box-shadow: 3px 3px 0 rgba(var(--pa-client-accent-rgb), .2) !important;
}

.pa-client-theme .pa-shop-card:hover {
    box-shadow: 5px 5px 0 rgba(var(--pa-client-accent-rgb), .28) !important;
}

.pa-client-theme .ranking-box:hover,
.pa-client-theme .tournament-box:hover {
    border-color: var(--pa-client-accent) !important;
    box-shadow: 3px 3px 0 var(--pa-client-accent) !important;
}

.pa-client-theme .ranking-box,
.pa-client-theme .tournament-box,
.pa-client-theme .pa-top-fame-row,
.pa-client-theme .battle-pass-change-box,
.pa-client-theme .container-view-battle-pass {
    border-color: var(--pa-client-accent) !important;
    box-shadow: 3px 3px 0 rgba(var(--pa-client-accent-rgb), .24) !important;
}

.pa-client-theme .screenshot-box,
.pa-client-theme .newsimages-box,
.pa-client-theme .new-player-box,
.pa-client-theme .login-box {
    border-color: #000 !important;
    box-shadow: none !important;
    transition:
        transform .2s cubic-bezier(.25, .8, .25, 1),
        border-color .2s cubic-bezier(.25, .8, .25, 1),
        box-shadow .2s cubic-bezier(.25, .8, .25, 1) !important;
}

.pa-client-theme .screenshot-box:hover,
.pa-client-theme .newsimages-box:hover,
.pa-client-theme .new-player-box:hover,
.pa-client-theme .login-box:hover {
    border-color: #000 !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 3px 3px 0 var(--pa-client-accent) !important;
}

.pa-client-theme .account-links a {
    box-shadow: none !important;
    transition:
        transform .2s cubic-bezier(.25, .8, .25, 1),
        background-color .2s cubic-bezier(.25, .8, .25, 1),
        color .2s cubic-bezier(.25, .8, .25, 1),
        box-shadow .2s cubic-bezier(.25, .8, .25, 1) !important;
}

.pa-client-theme .account-links a:hover {
    background: rgba(var(--pa-client-accent-rgb), .12) !important;
    background-color: rgba(var(--pa-client-accent-rgb), .12) !important;
    color: #000 !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 3px 3px 0 var(--pa-client-accent) !important;
}

.pa-client-theme .pa-top-fame-row:hover,
.pa-client-theme .battle-pass-change-box:hover {
    border-color: var(--pa-client-accent) !important;
    box-shadow: 3px 3px 0 var(--pa-client-accent) !important;
}

.pa-client-theme .archivement-card .archivement-header {
    background: transparent !important;
    background-color: transparent !important;
    color: #000 !important;
}

.pa-client-theme .ranking-box h3,
.pa-client-theme .tournament-box h3,
.pa-client-theme .tournament-heading,
.pa-client-theme .login-box h3,
.pa-client-theme .screenshot-box h3,
.pa-client-theme .newsimages-box h3,
.pa-client-theme .new-player-box h3,
.pa-client-theme .source-leaderboard-title,
.pa-client-theme .event-tag,
.pa-client-theme .event-button,
.pa-client-theme .pa-top-fame-rank,
.pa-client-theme .progress-track,
.pa-client-theme .progress-fill,
.pa-client-theme .score::before,
.pa-client-theme .ranking-list li:first-child .score::before,
.pa-client-theme .ladder-directory-progress::before {
    background: var(--pa-client-accent) !important;
    background-color: var(--pa-client-accent) !important;
}

.pa-client-theme .ranking-list li:first-child {
    background: linear-gradient(to right, rgba(var(--pa-client-accent-rgb), .1), transparent) !important;
    border-left-color: var(--pa-client-accent) !important;
}

.pa-client-theme .ranking-list li:hover {
    background-color: rgba(var(--pa-client-accent-rgb), .1) !important;
}

.pa-client-theme .rank,
.pa-client-theme .ranking-list li:first-child .rank,
.pa-client-theme .ranking-list li:first-child .rank-type,
.pa-client-theme .source-war-rank-label,
.pa-client-theme .source-ranking-empty,
.pa-client-theme .wins,
.pa-client-theme .streak,
.pa-client-theme .pa-top-fame-score,
.pa-client-theme .event-date,
.pa-client-theme .scroll-btn:hover,
.pa-client-theme .source-streak-arrow:hover,
.pa-client-theme .ladder-directory-main a:hover,
.pa-client-theme .ladder-directory-main span {
    color: var(--pa-client-accent) !important;
}

.pa-client-theme .ranking-list li:first-child .rank {
    text-shadow: 0 0 10px rgba(var(--pa-client-accent-rgb), .5) !important;
}

.pa-client-theme .ranking-list li:first-child .score::before {
    box-shadow: 0 0 10px rgba(var(--pa-client-accent-rgb), .3) !important;
}

.pa-client-theme .source-ranking-border-fallback,
.pa-client-theme .source-clan-avatar,
.pa-client-theme .leaderboard-avatar-border,
.pa-client-theme .reward-card,
.pa-client-theme .pa-season-countdown,
.pa-client-theme .event-images img,
.pa-client-theme .pa-top-fame-row:hover {
    border-color: var(--pa-client-accent) !important;
}

.pa-client-theme .event-button:hover {
    box-shadow: 0 2px 8px rgba(var(--pa-client-accent-rgb), .28) !important;
}

.pa-viewed-profile-theme {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.pa-viewed-profile-theme .profile-boxusername,
.pa-viewed-profile-theme .profile-boxladder,
.pa-viewed-profile-theme .bio-box,
.pa-viewed-profile-theme .profile-box {
    grid-column: 1 / -1;
}

.pa-viewed-profile-theme .profile-boxclan,
.pa-viewed-profile-theme .admiral-profile-boxclan,
.pa-viewed-profile-theme .yonko-profile-boxclan,
.pa-viewed-profile-theme .profile-boxpersonal,
.pa-viewed-profile-theme .admiral-profile-boxpersonal,
.pa-viewed-profile-theme .yonko-profile-boxpersonal {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
}

.pa-viewed-profile-theme .profile-boxpersonal,
.pa-viewed-profile-theme .admiral-profile-boxpersonal,
.pa-viewed-profile-theme .yonko-profile-boxpersonal {
    position: static !important;
}

.pa-viewed-profile-theme .profile-boxusername,
.pa-viewed-profile-theme .profile-box,
.pa-viewed-profile-theme .bio-box,
.pa-viewed-profile-theme .profile-boxclan,
.pa-viewed-profile-theme .admiral-profile-boxclan,
.pa-viewed-profile-theme .yonko-profile-boxclan,
.pa-viewed-profile-theme .profile-boxpersonal,
.pa-viewed-profile-theme .admiral-profile-boxpersonal,
.pa-viewed-profile-theme .yonko-profile-boxpersonal,
.pa-viewed-profile-theme .profile-boxladder,
.pa-viewed-profile-theme .profile-boxseasonladder,
.pa-viewed-profile-theme .profile-boxwarmode,
.pa-viewed-profile-theme .profile-avatar,
.pa-viewed-profile-theme .clan-avatar {
    border-color: var(--pa-profile-accent-dark) !important;
}

.pa-viewed-profile-theme .profile-boxusername,
.pa-viewed-profile-theme .profile-box,
.pa-viewed-profile-theme .bio-box,
.pa-viewed-profile-theme .profile-boxclan,
.pa-viewed-profile-theme .admiral-profile-boxclan,
.pa-viewed-profile-theme .yonko-profile-boxclan,
.pa-viewed-profile-theme .profile-boxpersonal,
.pa-viewed-profile-theme .admiral-profile-boxpersonal,
.pa-viewed-profile-theme .yonko-profile-boxpersonal,
.pa-viewed-profile-theme .profile-boxladder,
.pa-viewed-profile-theme .profile-boxseasonladder,
.pa-viewed-profile-theme .profile-boxwarmode {
    box-shadow: none !important;
    transition:
        transform .2s cubic-bezier(.25, .8, .25, 1),
        border-color .2s cubic-bezier(.25, .8, .25, 1),
        box-shadow .2s cubic-bezier(.25, .8, .25, 1) !important;
}

.pa-viewed-profile-theme .profile-boxusername:hover,
.pa-viewed-profile-theme .profile-box:hover,
.pa-viewed-profile-theme .bio-box:hover,
.pa-viewed-profile-theme .profile-boxclan:hover,
.pa-viewed-profile-theme .admiral-profile-boxclan:hover,
.pa-viewed-profile-theme .yonko-profile-boxclan:hover,
.pa-viewed-profile-theme .profile-boxpersonal:hover,
.pa-viewed-profile-theme .admiral-profile-boxpersonal:hover,
.pa-viewed-profile-theme .yonko-profile-boxpersonal:hover,
.pa-viewed-profile-theme .profile-boxladder:hover,
.pa-viewed-profile-theme .profile-boxseasonladder:hover,
.pa-viewed-profile-theme .profile-boxwarmode:hover {
    transform: translate(2px, 2px) !important;
    border-color: var(--pa-profile-accent-hover) !important;
    box-shadow: 3px 3px 0 var(--pa-profile-accent-hover) !important;
}

.pa-viewed-profile-theme .profile-box h3,
.pa-viewed-profile-theme .bio-header,
.pa-viewed-profile-theme .profile-boxclan h3,
.pa-viewed-profile-theme .profile-boxpersonal h3,
.pa-viewed-profile-theme .profile-boxladder h3,
.pa-viewed-profile-theme .coloronline,
.pa-viewed-profile-theme .colorlastseen,
.pa-viewed-profile-theme .info-rowposts,
.pa-viewed-profile-theme .info-rowberries,
.pa-viewed-profile-theme .info-rowregistered,
.pa-viewed-profile-theme .info-rowsubs {
    background: var(--pa-profile-accent) !important;
    background-color: var(--pa-profile-accent) !important;
    color: #fff !important;
}

.pa-viewed-profile-theme .game-row {
    background-color: var(--pa-profile-accent) !important;
}

.pa-viewed-profile-theme .valueusername,
.pa-viewed-profile-theme .valuesiterank,
.pa-viewed-profile-theme .valuenonenone,
.pa-viewed-profile-theme .bio-title,
.pa-viewed-profile-theme .website-link,
.pa-viewed-profile-theme .website-link:hover,
.pa-viewed-profile-theme .winner,
.pa-viewed-profile-theme .winner svg,
.pa-viewed-profile-theme .info-sectionladder > div[class^="info-row"] {
    color: var(--pa-profile-accent) !important;
}

@media (max-width: 760px) {
    .pa-shop-toolbar,
    .pa-prestige-panel {
        grid-template-columns: 1fr;
        display: grid;
    }

    .classic-player-card-primary-actions,
    .classic-player-card-visibility,
    .pa-bio-editor-grid {
        grid-template-columns: 1fr;
    }
}