@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans+Deva:wght@100..800&display=swap');
/* CSS Document */
.playpen-sans-deva {
  font-family: "Playpen Sans Deva", cursive;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: 'ninja_naruto';
    src: url(../_img/ui/fonts/NarutoPt_br-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'ninja_naruto';
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* text-shadow: 1px 1px 1px rgba(0,0,0,1); */

    --tai-color: #00FF00;
    --nin-color: #0000FF;
    --gen-color: #a200ff;
    --intel-color: #ff0000;
    --buki-color: #ffe600;
}

html {
    font-size: 16px;
}

body {
    color: #BBBBBB;
    background: url(../_img/ui/backgrounds/charadetail_bg.png);
    background-size: 100%;
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
    font-family: "Playpen Sans Deva", cursive;
    animation: bounceBackground 6s ease-in-out infinite
}

@keyframes bounceBackground {
  0%   { background-position: center 0px; }
  50%  { background-position: center 10px; } /* desce um pouco */
  100% { background-position: center 0px; }  /* volta ao topo */
}

@keyframes bounce {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(5px); } /* desce um pouco */
  100% { transform: translateY(0px); }  /* volta ao topo */
}


/* < ------START------> CAIXAS DE LAYOUT */
#main-banner {
    position: relative;
    width: 100%;
    height: 180px;
    padding: 0;
    margin: 0;
    background: url(../_img/ui/backgrounds/main_banner_21-9-transparent-shadows.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(25%);
}

#top-main {
    display: none;
    position: absolute;
    top: -54px;
    left: -12px;
    width: 105%;
    height: 96px;
    background: url(../_img/ui/backgrounds/topo-info3.png) no-repeat;
    background-size: 100%;
    filter: saturate(95%);
    transform: rotate(180deg);
    box-shadow: 0px -5px 5px rgba(0,0,0,1);
}

main, #rodape {
    width: 80%;
    max-width: 1080px;
}

main {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1rem;
    padding: 2rem 1rem 2rem;
    margin: 0 auto;
    background: url(../_img/ui/backgrounds/bg_arvore.jpg);
    filter: saturate(45%);
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    box-shadow: 0px 0px 10px rgba(0,0,0,1);
    z-index: 2;
    /* animation: bounceBackground 6s ease-in-out infinite */
}
.half-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: calc(50% - 2rem);
}

.full-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    width: 100%;

    @media (max-width: 720px) {
        width: 95%;
    }
}

#rodape {
    position: relative;
    margin: 0 auto;
    height: 54px;
    background: url(../_img/ui/backgrounds/rodape-fim.png) no-repeat;
    background-size: cover;
    filter: saturate(25%);
    margin-bottom: 6rem;
    z-index: 1;
}

.box_top {
    position: relative;
    background: url(../_img/ui/box_top.jpg) no-repeat center;
    line-height: 35px;
    height: 35px;
    padding-left: 40px;
    font-weight: bold;
    text-align: left;
    width: 100%;
}

.box_middle {
    position: relative;
    background: url(../_img/ui/box_middle.jpg) repeat-y center;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 1px;
    text-align: justify;
    width: 100%;
}

.box_bottom {
    position: relative;
    background: url(../_img/ui/box_bottom.jpg) no-repeat bottom;
    height: 15px;
    width: 100%;
}

.box2_top {
    background: url(../_img/box/box2_top.jpg) no-repeat center;
    line-height: 35px;
    height: 35px;
    padding-left: 40px;
    font-weight: bold;
    text-align: left;
}

.box2_middle {
    background: url(../_img/box/box2_middle.jpg) repeat-y center;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 1px;
    text-align: left;
}

.box2_bottom {
    background: url(../_img/box/box2_bottom.jpg) no-repeat bottom;
    height: 10px;
}

.box3_top {
    height: 50px;
    padding-left: 55px;
    font-weight: bold;
    text-align: left;
}

.sep {
    background: url(../_img/ui/sep.jpg) repeat-x center;
    height: 6px;
    position: relative;
    width: 100%;
}

fieldset {
    border: 1px dotted #888888;
    padding: 1rem;
}

legend {
    color: #c1c1c1;
    font-size: 1.5rem;
    font-weight: 400;
    padding-left: 5px;
    padding-right: 5px;
}

.hunt-mission-rank {
    position: absolute;
    width: 64px;
    height: 64px;
    bottom: 10px;
    right: 10px;
}

@keyframes rankBounce {
    0% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(-10deg);
    }
}

.enemy-info-rank {
    position: absolute;
    top: 10px;
    right: 10px;
    animation: rankBounce 6s ease-in-out infinite;

    @media (max-width: 720px) {
        top: 42px;
    }
}

table {
    width: 95%;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
    background: rgba(17, 17, 17, 0.8);
}

th,
td {
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-align: left;
    vertical-align: middle;
    color: #fff;
}
td {
    font-family: Playpen Sans Deva;
}

thead th {
    background: rgba(68, 0, 0, 0.8);
    color: #fff;
    font-weight: bold;
}

#ranking tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
}

#ranking th:nth-child(2),
#ranking td:nth-child(2) {
    width: 38%;
    min-width: 220px;
}

#ranking th:nth-child(1),
#ranking td:nth-child(1) {
    width: 8%;
    text-align: center;
}

#ranking th:nth-child(3),
#ranking td:nth-child(3),
#ranking th:nth-child(4),
#ranking td:nth-child(4),
#ranking th:nth-child(5),
#ranking td:nth-child(5),
#ranking th:nth-child(6),
#ranking td:nth-child(6) {
    width: 12%;
}

.jutsu-image {
    width: 168px;
    height: 168px;

    @media (max-width: 720px) {
        width: 64px;
        height: 64px;
    }
}

/* < ------END------> TABLES */


/* < ------END------> CAIXAS DE LAYOUT */






/* < ------START------> FORMULARIOS */
form {
    margin: 0;
    padding: 0;
}

input,
select,
option,
textarea {
    background: #333333;
    border: 1px solid #666666;
    color: #BBBBBB;
    font-weight: bold;
    font-size: 1rem;
    font-family: 'playpen-sans-deva';
}

input[type="text"]:focus, input[type="password"]:focus, select:focus, option:focus, textarea:focus {
    background-color: #440000;
    cursor: auto;
}

.input {
    background: #222222;
    border: 1px solid #BBBBBB;
}

input[type="radio"] {
    display: none;
}

.radio-label-container {
    position: relative;
    width: 100px; 
    height: 100px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    gap: .5rem;
    align-items: center;
}

.radio-label {
    cursor: pointer;
    filter: saturate(0%);
    object-fit: contain;
    width: 96px;
    height: 64px;

    &.checked {
        filter: saturate(200%);
    }
    &.checked::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../_img/ui/trial_complete_stamp.png) no-repeat;
        background-position: center;
        background-size: contain;
    }
}
.radio-label:hover {
    background: url(../_img/ui/trial_complete_stamp.png) no-repeat;
    background-position: center;
    background-size: contain;
    filter: saturate(60%);
}

.radio-label-checked {
    background: url(../_img/ui/trial_complete_stamp.png) no-repeat;
    background-position: center;
    background-size: contain;
    filter: saturate(200%);
}

.botao {
    background: url(../_img/ui/fire_button.png) no-repeat;
    background-size: contain;
    background-position: center;
    padding: .5rem;
    border: unset;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1rem;
    transition: .3s;
    font-family: 'ninja_naruto';
    font-weight: 400;
    filter: saturate(50%);
}
.botao:hover {
    filter: saturate(100%);
}
.botao:disabled {
    cursor: not-allowed;
    filter: grayscale(100%) opacity(50%);
}

.botao2 {
    background: url(../_img/ui/painted_button.png) no-repeat;
    background-size: contain;
    background-position: center;
    padding: 1rem 1.5rem;
    border: unset;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1rem;
}

.botao3 {
    background: url(../_img/ui/action.jpg) no-repeat;
    background-size: contain;
    background-position: center;
    padding: .5rem 1rem;
    border: unset;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1rem;
    transition: .3s;
    font-family: 'ninja_naruto';
    font-weight: 400;
    filter: saturate(50%);
}

.float-button {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    filter: saturate(50%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 6;
    transition: all 0.3s ease;
    animation: bounce 1.5s ease-in-out infinite;

    @media screen and (max-width: 768px) {
        top: 60px;
        right: calc(100vw - 120px);
    }
}
.float-button:hover {
    filter: saturate(100%);
    animation: none;
}
#float-daily-btn {
    top: 90vh;
    right: 50px;
    @media screen and (max-width: 768px) {
        top: 60px;
        right: calc(100vw - 120px);
    }
}
#float-rank-btn {
    top: calc(90vh - 60px - 1.5rem);
    right: 50px;
    @media screen and (max-width: 768px) {
        top: calc(60px + 60px + 1.5rem);
        right: calc(100vw - 120px);
    }
}

/* < ------START------> FORMULARIOS */





/* < ------START------> TIPOGRAFIA */
.section-title {
    font-family: 'ninja_naruto';
    font-size: 2rem; 
    font-weight: 400;
    color: #ff9100; 
    text-shadow: 
        2px 2px 0 #000,   
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        4px 4px 6px rgba(0,0,0,0.5); 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    background: url(../_img/ui/title_background_1.png);
    background-size: 100% 100%;
    padding: .5rem 1rem;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(80%);

    @media (max-width: 720px) {
        font-size: 1.5rem;
    }
}


a {
    color: #EEEEEE;
    font-weight: 400;
    text-decoration: none;
    font-size: 1.2rem;
    margin: 0 .5rem;

    @media (max-width: 720px) {
        font-size: 1rem;
    }
}

a:hover {
    text-decoration: none;
    background: url(../_img/ui/painted_button.png) no-repeat center;
    background-size: 100% 100%;
}
p {
    font-family: 'playpen-sans-deva';
    font-size: 1rem;

    @media (max-width: 720px) {
        font-size: 0.8rem;
    }
}

.aviso {
    background: url(../_img/alert.png) no-repeat left top #440000;
    border: 1px dotted #FFFF99;
    color: #FFFF99;
    padding: .5rem 1rem;
    text-align: left;
    font-family: 'playpen-sans-deva';

    .sub2:hover {
        cursor: pointer;
        color: #FFFF99;
    }

    .accordion-title {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .5rem;
        cursor: pointer;
        /* font-size: 1.2rem; */
    }

    .accordion-content {
        height: 0;
        overflow: hidden;
    }

    .active {
        margin-top: 1rem;
        height: unset!important;
    }
}

.apresentacao {
    background: #440000;
    border: 1px dotted #FFFF99;
    color: #FFFF99;
    padding: 3px;
    text-align: center;
    font-family: 'playpen-sans-deva';
}

.action {
    background: url(../_img/action.jpg) no-repeat center;
    text-align: center;
    line-height: 40px;
    height: 42px;
    margin-top: 4px;
    font-size: 11px;
}

.destaque {
    font-weight: bold;
    color: #FFFFFF;
    font-family: 'playpen-sans-deva';
}
.destaque-naruto {
    font-weight: bold;
    color: #FFFFFF;
    font-family: 'ninja_naruto';
}

.sub {
    font-size: 1rem;
    color: #999999;
    font-family: 'playpen-sans-deva';

    @media (max-width: 720px) {
        font-size: 0.8rem;
    }
}

.sub2 {
    font-size: 1.5rem;
    color: #999999;
    font-weight: 900;
    font-family: 'playpen-sans-deva';

    @media (max-width: 720px) {
        font-size: 1rem;
    }
}

.tooltip {
    background: #222222;
    border: 1px solid #DDDDDD;
    padding: 3px;
    font-weight: normal;
    font-family: 'playpen-sans-deva';
}

.campo {
    border: 1px solid #BBBBBB;
    font-family: 'playpen-sans-deva';
}

.clear {
    clear: both;
}

/* < ------END------> TIPOGRAFIA */


/* < ------START------> TABLES */
table {
    display: table;
    box-sizing: border-box;
    border-collapse: separate;
    text-indent: initial;
    unicode-bidi: isolate;
    border-spacing: 2px;
    background-image: url(../_img/ui/background.jpg);
}

tbody {
    display: table-row-group;
    vertical-align: top;
    unicode-bidi: isolate;
    border-color: inherit;
    padding: 0;
}

th, td {
    padding: 12px 15px;
    text-align: left;
}

thead {
    box-shadow: 0px 0px 10px rgba(0,0,0,1);
    margin: 0;
}

th {
    color: #ffffff;
}

tr {
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: inherit;
}

tr:nth-child(even) {
    background-color: #f3f3f35e;
}

/* tbody tr:hover {
    background-color: #440000;
} */

/* < ------END------> TABLES */

/* < ------START------> MODAL */

#ajax-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: none;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 10;
}
#ajax-close-button {
    position: absolute;
    top: 10vh;
    right: 15%;
}

.modal-container {
    position: relative;
    display: block;
    /* top: calc(50% - 127px);
    left: calc(50% - 250px); */
    width: 500px;
    /* height: 254px; */
    padding: 1rem;
    background-color: #440000;
    border: 1px dashed #FFFF99;
    color: #FFFF99;
    z-index: 3;
}

.image-trait {
    width: 64px;
}

/* < ------END------> MODAL */







/* < ------START------> CITY DIV */
.city_div {
    border: 1px solid #AAAAAA;
    margin-top: 5px;
    background: #EEEEEE;
    color: #444444;
    text-align: center;
    padding: 3px;
}

/* < ------END------> CITY DIV */







/* < ------START------> AVATARS */
.avatar_chain {
    object-fit: contain;
    width: 124px;
    height: 64px;
}


/* < ------END------> AVATARS */


/* < ------START------> COMBAT */
.attribute-label {
    position: relative;
    /* width: 24px;
    height: 24px; */
    cursor: pointer;
}
.attribute-label:hover::before {
    content: attr(data-attribute-label);
    position: absolute;
    top: 0;
    left: -50%;
    background: rgba(0,0,0,0.5);
    font-family: playpen-sans-deva, sans-serif;
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    padding: 0.5rem;
    border-radius: 0.5rem;
    z-index: 99;
}

.icon-rate {
    position: relative;
    /* width: 24px;
    height: 24px; */
    cursor: pointer;
}
.icon-rate::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    transform: translate(75%, -100%);
    background: url(../_img/ui/attributes/rate.png);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #000;
}
/* < ------END------> COMBAT */







@media (max-width: 720px) {
  body {
    font-size: 10px; /* exemplo: reduzir fonte */
    background-size: cover; /* ajustar fundo */
  }

  .border_left,
  .border_right {
    width: 10px; /* diminuir largura das bordas */
  }

  #main-banner {
    background-repeat: no-repeat;
    background-position: right center;
  }

  main {
    padding: 4rem 0rem 2rem 0rem;
  }
  main .half-container {
    width: 100%;
    align-items: center;
  }

  main, #rodape {
    width: calc(100% - 20px);
  }
  #top-main {
    display: block;
  }
}