.btn,.btn-menu,[role=button]{
    cursor:pointer
}
.box-partai,.box-quest,.btn,.btn-menu,.card-block,.footbar,.navbar,.text-center{
    text-align:center
}
.news-box table,table{
    border-collapse:collapse
}
html{
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
    display:block
}
audio,canvas,progress,video{
    display:inline-block;
    vertical-align:baseline
}
audio:not([controls]){
    display:none;
    height:0
}
hr,img,legend{
    border:0
}
legend,td,th{
    padding:0
}
body,figure{
    margin:0
}
.text-hide,a{
    background-color:transparent
}
[hidden],template{
    display:none
}
a{
    color:#337ab7;
    text-decoration:none
}
a:active,a:hover{
    outline:0
}
abbr[title]{
    border-bottom:none;
    text-decoration:underline;
    text-decoration:underline dotted
}
.box-quest,.btn,b,optgroup,strong{
    font-weight:700
}
dfn{
    font-style:italic
}
h1{
    font-size:2em;
    margin:.67em 0
}
mark{
    background:#ff0;
    color:#000
}
small{
    font-size:80%
}
sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
.btn,.btn-menu,.status-bar .exp,.table-petmon tr td,.table-user tr td,.table-wagon tr td,img{
    vertical-align:middle
}
sup{
    top:-.5em
}
sub{
    bottom:-.25em
}
svg:not(:root){
    overflow:hidden
}
hr{
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    height:0;
    margin-top:20px;
    margin-bottom:20px;
    border-top:1px solid #eee
}
pre,textarea{
    overflow:auto
}
code,kbd,pre,samp{
    font-family:monospace,monospace;
    font-size:1em
}
button,input,optgroup,select,textarea{
    color:inherit;
    font:inherit;
    margin:0
}
button{
    overflow:visible
}
button,select{
    text-transform:none
}
button,html input[type=button],input[type=reset],input[type=submit]{
    -webkit-appearance:button;
    cursor:pointer
}
button[disabled],html input[disabled]{
    cursor:default
}
button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}
input{
    line-height:normal
}
input[type=checkbox],input[type=radio]{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:0
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
    height:auto
}
input[type=search]{
    -webkit-appearance:textfield;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}
fieldset{
    border:1px solid silver;
    margin:0 2px;
    padding:.35em .625em .75em
}
table{
    border-spacing:0
}
*,:after,:before{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
html{
    font-size:10px;
    -webkit-tap-highlight-color:transparent
}
body{
    font-family:Lato,Helvetica,Arial,sans-serif;
    font-size:14px;
    line-height:1.42857143;
    color:#333;
    background-color:#51240f
}
button,input,select,textarea{
    font-family:inherit;
    font-size:inherit;
    line-height:inherit
}
a:focus,a:hover{
    color:#23527c;
    text-decoration:underline
}
a:focus{
    outline:-webkit-focus-ring-color auto 5px;
    outline-offset:-2px
}
.row{
    margin-right:-15px;
    margin-left:-15px
}
.row-no-gutters{
    margin-right:0;
    margin-left:0
}
.row-no-gutters [class*=col-]{
    padding-right:0;
    padding-left:0
}
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{
    position:relative;
    min-height:1px;
    padding-right:15px;
    padding-left:15px
}
.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{
    float:left
}
.col-xs-12,.news-box table.table,.table-footbar,.table-wagon{
    width:100%
}
.col-xs-11{
    width:91.66666667%
}
.col-xs-10{
    width:83.33333333%
}
.col-xs-9{
    width:75%
}
.col-xs-8{
    width:66.66666667%
}
.col-xs-7{
    width:58.33333333%
}
.col-xs-6{
    width:50%
}
.col-xs-5{
    width:41.66666667%
}
.col-xs-4{
    width:33.33333333%
}
.col-xs-3{
    width:25%
}
.col-xs-2{
    width:16.66666667%
}
.col-xs-1{
    width:8.33333333%
}
.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.nav:after,.nav:before,.row:after,.row:before{
    display:table;
    content:" "
}
.cf,.clearfix:after,.container-fluid:after,.container:after,.nav:after,.row:after{
    clear:both
}
.center-block{
    display:block;
    margin-right:auto;
    margin-left:auto
}
.container,.navbar a{
    margin:0 auto
}
.pull-right{
    float:right!important
}
.pull-left{
    float:left!important
}
.hidden,.hide{
    display:none!important
}
.show{
    display:block!important
}
.invisible{
    visibility:hidden
}
.text-hide{
    font:0/0 a;
    color:transparent;
    text-shadow:none;
    border:0
}
.card-block,.footbar{
    border-top:3px solid #fff480
}
.container{
    width:340px;
    max-width:100%;
    overflow-x:hidden
}
@media (max-width:285px){
    body{
        font-size:12px
    }
    .container .navbar .btn-menu{
        padding:2px 3px;
        font-size:12px
    }
    .container .navbar a.btn-menu{
        margin-right:0
    }
    .btn{
        padding:2px 6px!important
    }
    .container .navbar .btn-menu img{
        width:15px
    }
    img.mini-maps{
        max-width:35px!important
    }
    .box-chat img.avatar{
        height:35px
    }
    .table-footbar tr td a img{
        display:block;
        padding-bottom:2px;
        margin:0 auto
    }
}
.navbar {
    max-width: 300px;  /* Sekarang lebih ramping */
    width: 90%;        /* Agar fleksibel di layar kecil dan tidak terpotong */
    margin: 4px auto;  /* Ini yang bikin dia tetap di tengah */
    display: flex;
    justify-content: center;
    box-sizing: border-box; /* WAJIB: supaya border/padding tidak memotong kotak */
}
.footbar{
    padding:8px 10px;
    background-color:#302011;
    color:#fff
}
input.form-control,select.form-control,textarea.form-control{
    color:#333;
    padding:5px 4px;
    border-radius:5px;
    border:2.5px solid #62401a
}
.news-box .body,.table-footbar tr td{
    padding:5px 10px
}
.table-footbar tr td img{
    margin-right:5px;
    color:#fff;
    text-decoration:none
}
.table-footbar tr td a{
    color:#fff;
    text-decoration:none
}
.card{
    background-color:#62401a;
    color:#fff
}
.card-default{
    background-color:#8f5f38
}
.card-block{
    padding:10px;
    border-bottom:3px solid #fff480;
    background-color:#000
}
.card-border{
    border:2.5px solid #fff480
}
.card-body{
    padding:10px;
    background-color:#62401a
}
.card-forum,.card-quest,.card-settings{
    background-color:#281b0b
}
.card-quest{
    padding:10px 20px
}
.card-settings{
    padding:10px 25px
}
.card-forum{
    padding:10px
}
.card-forum .content{
    margin-bottom:10px;
    padding:10px;
    border:1px solid #fef1a9;
    border-radius:7px
}
.box,.box-quest{
    border:2.5px solid #fef1a9
}
.card-forum .content a{
    color:#e9a32a;
    text-decoration:none
}
.box-quest,.btn-disable.focus,.btn-disable:focus,.btn-disable:hover,.footbar a,.text-white,.text-white a,a.link{
    color:#fff!important
}
.profile{
    width:100%;
    margin:0;
    background-color:#936539
}
.profile table tr td{
    padding:3px 6px
}
.box{
    margin-bottom:7px
}
.box-heading{
    padding:4px 5px;
    background-color:#b16b26
}
.box-body{
    padding:4px 5px;
    background-color:#7c4413
}
.box-body h1,.box-body h2,.box-body h3,.box-body h4,.box-body h5,.box-body p{
    padding:0;
    margin:0
}
.box-quest{
    width:200px;
    margin:0 auto 7px;
    padding:7px 10px;
    background-color:#7b4512
}
img.mini-maps{
    float:left;
    margin-right:5px;
    width:100%;
    max-width:50px;
    height:100%
}
.card-body a{
    text-decoration:none
}
a.link:hover,a.white-link{
    color:#fff;
    text-decoration:underline
}
.news-box table.table-bordered tbody td,.news-box table.table-bordered tbody th{
    border:1px solid #fef1a9;
    padding:5px
}
.news-box h1,.news-box h2,.news-box h3,.news-box h4,.news-box h5,.news-box p{
    padding:0;
    margin:3px 0
}
.news-box{
    background-color:#7c4413;
    border-radius:5px
}
.news-box .header{
    border-radius:5px 5px 0 0;
    background-color:#b16b26;
    padding:10px;
    font-weight:700
}
.no-margin{
    margin:0!important
}
.no-padding{
    padding:0!important
}
.img-petmon{
    width:125px
}
.box-partai{
    display:block
}
.petmon-party{
    width:75px;
    margin:0 3px
}
.table-user{
    border:2px solid #fef1a9
}
.table-user tr td{
    padding:5px
}
.table-petmon tr td img,.table-user tr td img{
    margin-bottom:3px
}
.table-petmon,.table-petmon-box{
    border:2px solid #fff
}
.btn,.btn-menu{
    margin-bottom:0;
    white-space:nowrap;
    background-image:none;
    border:1px solid transparent;
    font-size:14px;
    line-height:1.42857143;
    user-select:none;
    display:inline-block
}
.table-petmon tr td{
    padding:5px 10px
}
.table-petmon-box tr td{
    padding:1px 5px;
    vertical-align:middle
}
.table-wagon tr td{
    padding:1px 2px
}
.btn{
    -ms-touch-action:manipulation;
    touch-action:manipulation;
    padding:6px 12px
}
.btn-sm{
    padding:3px 8px
}
.btn-xs{
    padding:0 6px
}
.btn-long{
    padding:2px 15px
}
.btn.focus,.btn:focus,.btn:hover{
    color:#333;
    text-decoration:none
}
.btn-menu{
    font-weight:400;
    -ms-touch-action:manipulation;
    touch-action:manipulation;
    padding:4px 8px
}
.btn-default{
    color:#fff;
    background-color:#90652b;
    border-top:3.5px solid #674112;
    border-left:3.5px solid #674112;
    border-right:3.5px solid #482700;
    border-bottom:3.5px solid #482700
}
.btn-default:hover{
    color:#fff;
    background-color:#90652b;
    text-decoration:none
}
.btn-success{
    color:#fff;
    background-color:#01691f;
    border-top:3.5px solid #eafc9a;
    border-left:3.5px solid #eafc9a;
    border-right:3.5px solid #82d414;
    border-bottom:3.5px solid #82d414
}
.btn-success.focus,.btn-success:focus{
    color:#fff;
    border:3.5px solid #82d414
}
.btn-success:hover{
    color:#fff;
    border-top:3.5px solid #82d414;
    border-left:3.5px solid #82d414;
    border-right:3.5px solid #eafc9a;
    border-bottom:3.5px solid #eafc9a
}
.btn-disable{
    color:#fff;
    background-color:#76757a;
    border-top:3.5px solid #cecdcc;
    border-left:3.5px solid #cecdcc;
    border-right:3.5px solid #302d27;
    border-bottom:3.5px solid #302d27
}
.btn-warning{
    color:#fff;
    background-color:#ff9412;
    border-top:3.5px solid #fae582;
    border-left:3.5px solid #fae582;
    border-right:3.5px solid #b98107;
    border-bottom:3.5px solid #b98107
}
.btn-warning.focus,.btn-warning:focus{
    color:#fff;
    border:3.5px solid #b98107
}
.btn-warning:hover{
    color:#fff;
    border-top:3.5px solid #b98107;
    border-left:3.5px solid #b98107;
    border-right:3.5px solid #fae582;
    border-bottom:3.5px solid #fae582
}
.btn-primary{
    color:#fff;
    background-color:#294aa2;
    border-top:3.5px solid #f6f38f;
    border-left:3.5px solid #f6f38f;
    border-right:3.5px solid #db8a17;
    border-bottom:3.5px solid #db8a17
}
.btn-primary.focus,.btn-primary:focus{
    color:#fff;
    background-color:#ec971f
}
.btn-primary:hover{
    color:#fff;
    background-color:#385fcc
}
.btn-danger{
    color:#fff;
    background-color:#f80100;
    border-top:3.5px solid #ffb2b2;
    border-left:3.5px solid #ffb2b2;
    border-right:3.5px solid #e66363;
    border-bottom:3.5px solid #e66363
}
.btn-danger.focus,.btn-danger:focus,.btn-danger:hover{
    color:#fff;
    background-color:#c40d0d
}
.mt-1{
    margin-top:5px
}
.mt-2{
    margin-top:10px
}
.mt-3{
    margin-top:15px
}
.mt-4{
    margin-top:20px
}
.mt-5{
    margin-top:25px
}
.mb-1{
    margin-bottom:5px
}
.mb-2{
    margin-bottom:10px
}
.mb-3{
    margin-bottom:15px
}
.mb-4{
    margin-bottom:20px
}
.mb-5{
    margin-bottom:25px
}
.mr-1{
    margin-right:5px
}
.mr-2{
    margin-right:10px
}
.mr-3{
    margin-right:15px
}
.ml-1{
    margin-left:5px
}
.ml-2{
    margin-left:10px
}
.ml-3{
    margin-left:15px
}
.text-success{
    color:#1eb810
}
.text-danger{
    color:#ef2a17
}
.box-chat a,.small a,.text-gold,.text-warning{
    color:#e9a32a
}
.text-muted{
    color:#bdb8b0
}
.bg-darkred{
    background-color:#953121!important
}
.bg-danger{
    background-color:#9c2d1c!important
}
.bg-success{
    background-color:#01691f!important
}
.bg-blue{
    background-color:#20398a!important
}
.bg-brown{
    background-color:#281b0b!important
}
.bg-lightbrown{
    background-color:#905722!important
}
.bg-yellow{
    background-color:#ffff9d!important;
    color:#333
}
.alert{
    padding:8px;
    border-top:3px solid #fef1a9;
    border-bottom:3px solid #fef1a9
}
.border-img{
    border:3px solid #fff2c0
}
.text-box{
    padding:8px;
    border:3px solid #d2ae57
}
.status-bar{
    width:100%;
    border-top:3px solid #fff480;
    background-color:#b5966a;
    height:34px
}
.status-bar .energy-bar{
    position:absolute;
    margin-top:4px;
    left:23%;
    width:30%;
    height:20px;
    background-image:linear-gradient(#2e2623,#4d423f,#2e2623);
    box-shadow:0 0 5px #000 inset;
    border:1px solid #855636;
    border-radius:1px
}
.status-bar .energy-bar .fill-bar{
    height:18px;
    background-image:linear-gradient(#ffbf05,#fff480,#ffbf05)
}
.status-bar .action-bar{
    position:absolute;
    margin-top:5px;
    left:54%;
    height:20px
}
.status-bar .action-bar .fill-bar{
    float:left;
    margin-right:3px;
    width:18px;
    height:90%;
    background-image:linear-gradient(#ec0c14,#f79b8d,#ec0c14);
    box-shadow:0 0 2px #730707 inset;
    border:1px solid #855636;
    border-radius:1px
}
.status-bar .action-bar .unfill-bar{
    float:left;
    margin-right:3px;
    width:18px;
    height:90%;
    background-image:linear-gradient(#2e2623,#4d423f,#2e2623);
    box-shadow:0 0 5px #000 inset;
    border:1px solid #855636;
    border-radius:1px
}
.status-bar .exp{
    position:relative;
    background-color:#b5966a;
    display:table-cell;
    padding:12px;
    margin-bottom:10px;
    border-radius:50%;
    box-shadow:0 2px 1px #36250c
}
.status-bar .exp .status-exp {
    background-color: #29251a;
    border: .8px solid #2e2623;
    box-shadow: 0 1px 1px 1px #e0bd8b;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: normal;
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto;
}
.status-bar .crystal-panel {
    position: absolute;
    width: 350px;
    height: 20px;
    margin: 0 auto;
    color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
}
.cell-bgLeft, .cell-bgRight {
    width: 8px;
    position: absolute;
    top: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: contain;
}
.cell-bgLeft {
    left: 0;
    background-image: url(img/cell_bg_left.png);
}
.cell-bgMiddle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6px;
    right: 7.5px;
    background-image: url(img/cell_bg_middle.png);
    background-repeat: repeat-x;
    background-size: contain;
}
.cell-bgRight {
    right: 0;
    background-image: url(img/cell_bg_right.png);
}
.info-bar{
    min-height:32px;
    background-color:#312730;
    width:90%;
    padding:4px 5px 4px 45px;
    float:right
}
.info-bar span{
    color:#8599ff;
    font-size:9pt;
    font-weight:700
}
.small{
    font-size:.9em
}
.box-chat{
    padding:5px;
    border:1px solid #fef1a9;
    border-radius:7px;
    background-color:#503212;
    margin-bottom:7px
}
.has-deleted{
    opacity:.5
}
.box-chat .delete-btn{
    float:right;
    font-size:.8em;
    text-align:right;
    font-weight:700;
    color:#b40e0e
}
.box-chat .restore-btn{
    float:right;
    font-size:.8em;
    text-align:right;
    font-weight:700;
    color:#0cad15
}
.date a{
    font-size:1em;
    font-weight:700;
    text-decoration:underline;
    color:#fff
}
.date{
    font-size:.825em;
    color:#777
}
.small-price,.small-title{
    margin:4px;
    font-weight:700;
    font-size:.8em
}
.list{
    background-color:#18120c;
    padding:8px;
    border-radius:5px;
    box-shadow:0 0 3px 0 rgba(255,255,255,.1)!important
}

.petmon-battle.row {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.petmon-battle .petmon {
    float: left;
    width: 33.3333333%;
    position: relative;
    min-height: 1px;
    padding-left: 1px !important;
    padding-right: 1px !important;
}

.petmon-battle .petmon img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* -webkit-filter: drop-shadow(0px 0px 3px #fff);
    filter: drop-shadow(0px 0px 3px #fff); */
}

.petmon-battle .enemy-monster img.enemy {
    width: 100%;
    min-width: 165px;
    max-width: 165px;
    height: auto;
    -webkit-filter: drop-shadow(0px 0px 6px #b50404);
    filter: drop-shadow(0px 0px 6px #b50404);
}

.petmon-battle .petmon img.petmon-member {
    width: 100%;
    min-width: 80px;
    max-width: 90px;
    margin-top: 10px;
    vertical-align: bottom;
    height: auto;
}

.petmon-battle .petmon img.petmon-leader {
    width: 100%;
    min-width: 90px;
    max-width: 105px;
    margin-bottom: 5px;
    height: auto;
}
.btn-logout {
    display: inline-block;
    padding: 6px 16px;
    background-color: #f80101; /* Warna utama merah */
    color: white !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    
    /* Efek Pinggiran Beda Warna (3D) */
    border-top: 3.5px solid #feb0b0;    /* Merah sangat terang (atas) */
    border-left: 3.5px solid #feb0b0;   /* Merah sangat terang (kiri) */
    border-right: 3.5px solid #ec5f60;  /* Merah gelap (kanan) */
    border-bottom: 3.5px solid #ec5f60; /* Merah gelap (bawah) */
    
    cursor: pointer;
}

.mini-maps { width: 35px; height: 35px; flex-shrink: 0; transition: all 0.3s; }
      .mini-maps.passed { opacity: 0.3; filter: grayscale(100%); }
      .mini-maps.current { border: 2px solid yellow; border-radius: 5px; transform: scale(1.2); z-index: 10; background: rgba(255,255,0,0.2); }
      #viewport-peta { width: 100%; overflow: hidden; position: relative; padding: 15px 0; }
      #wadah-peta { display: flex; gap: 10px; transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); padding-left: 50%; }