/* -----------------------------------------------------
   created with https://www.codeandweb.com/texturepacker
   -----------------------------------------------------
   $TexturePacker:SmartUpdate:c2b130f3075338c0d6d990ac8e976cc7:6fb533208288e61fc218326b44cb0a6e:a67b8966d394ec9678dd6aec2b2a9c89$
   -----------------------------------------------------

   usage: <span class="{-spritename-} sprite"></span>

   replace {-spritename-} with the sprite you like to use

*/

/* Skin selection sprites - scoped to #skinPanel to avoid conflicts */
#skinPanel .sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(../images/1920/ui/skin_selection_web.webp);}

#skinPanel .button_available_idle {width:203px; height:252px; background-position: -1px -1px}
#skinPanel .button_available_pressed {width:203px; height:252px; background-position: -1px -255px}
#skinPanel .button_equipped_idle {width:203px; height:252px; background-position: -206px -103px}
#skinPanel .button_equipped_pressed {width:203px; height:252px; background-position: -258px -495px}
#skinPanel .button_idle {width:247px; height:100px; background-position: -206px -1px}
#skinPanel .button_pressed {width:255px; height:105px; background-position: -1px -509px}
#skinPanel .candy_01 {width:145px; height:143px; background-position: -455px -1px}
#skinPanel .candy_02 {width:140px; height:133px; background-position: -257px -749px}
#skinPanel .candy_03 {width:127px; height:148px; background-position: -399px -749px}
#skinPanel .candy_04 {width:137px; height:152px; background-position: -1px -773px}
#skinPanel .candy_05 {width:152px; height:136px; background-position: -206px -357px}
#skinPanel .candy_06 {width:133px; height:137px; background-position: -744px -269px}
#skinPanel .candy_07 {width:140px; height:139px; background-position: -411px -285px}
#skinPanel .candy_08 {width:136px; height:139px; background-position: -602px -1px}
#skinPanel .candy_09 {width:127px; height:138px; background-position: -134px -1071px}
#skinPanel .candy_10 {width:135px; height:142px; background-position: -1px -927px}
#skinPanel .candy_11 {width:134px; height:155px; background-position: -1px -616px}
#skinPanel .candy_12 {width:125px; height:137px; background-position: -533px -828px}
#skinPanel .candy_13 {width:126px; height:148px; background-position: -140px -884px}
#skinPanel .candy_14 {width:145px; height:137px; background-position: -411px -146px}
#skinPanel .candy_15 {width:124px; height:124px; background-position: -636px -1212px}
#skinPanel .candy_16 {width:119px; height:120px; background-position: -876px -408px}
#skinPanel .candy_17 {width:114px; height:131px; background-position: -665px -955px}
#skinPanel .candy_18 {width:113px; height:122px; background-position: -883px -1215px}
#skinPanel .candy_19 {width:116px; height:120px; background-position: -884px -1080px}
#skinPanel .candy_20 {width:125px; height:122px; background-position: -636px -1088px}
#skinPanel .candy_21 {width:119px; height:122px; background-position: -879px -269px}
#skinPanel .candy_22 {width:119px; height:121px; background-position: -762px -1215px}
#skinPanel .candy_23 {width:123px; height:126px; background-position: -511px -1085px}
#skinPanel .candy_24 {width:117px; height:111px; background-position: -376px -1300px}
#skinPanel .candy_25 {width:130px; height:116px; background-position: -533px -967px}
#skinPanel .candy_26 {width:118px; height:137px; background-position: -137px -616px}
#skinPanel .candy_27 {width:120px; height:120px; background-position: -866px -530px}
#skinPanel .candy_28 {width:110px; height:126px; background-position: -140px -755px}
#skinPanel .candy_29 {width:128px; height:125px; background-position: -660px -828px}
#skinPanel .candy_30 {width:123px; height:123px; background-position: -781px -955px}
#skinPanel .candy_31 {width:111px; height:121px; background-position: -906px -921px}
#skinPanel .candy_32 {width:121px; height:139px; background-position: -268px -884px}
#skinPanel .candy_33 {width:131px; height:123px; background-position: -605px -544px}
#skinPanel .candy_34 {width:120px; height:134px; background-position: -263px -1164px}
#skinPanel .candy_35 {width:118px; height:132px; background-position: -1px -1214px}
#skinPanel .candy_36 {width:122px; height:123px; background-position: -797px -671px}
#skinPanel .candy_37 {width:126px; height:125px; background-position: -738px -544px}
#skinPanel .candy_38 {width:132px; height:128px; background-position: -882px -1px}
#skinPanel .candy_39 {width:123px; height:121px; background-position: -790px -798px}
#skinPanel .candy_40 {width:110px; height:126px; background-position: -385px -1172px}
#skinPanel .candy_41 {width:116px; height:137px; background-position: -268px -1025px}
#skinPanel .candy_42 {width:122px; height:124px; background-position: -497px -1213px}
#skinPanel .candy_43 {width:119px; height:117px; background-position: -255px -1300px}
#skinPanel .candy_44 {width:119px; height:134px; background-position: -134px -1211px}
#skinPanel .candy_45 {width:119px; height:125px; background-position: -763px -1088px}
#skinPanel .candy_46 {width:127px; height:120px; background-position: -747px -408px}
#skinPanel .candy_47 {width:103px; height:120px; background-position: -915px -796px}
#skinPanel .candy_48 {width:123px; height:137px; background-position: -386px -1033px}
#skinPanel .candy_49 {width:125px; height:125px; background-position: -670px -671px}
#skinPanel .candy_50 {width:131px; height:141px; background-position: -1px -1071px}
#skinPanel .candy_51 {width:119px; height:122px; background-position: -886px -131px}
#skinPanel .rope01 {width:140px; height:132px; background-position: -463px -426px}
#skinPanel .rope02 {width:140px; height:132px; background-position: -602px -142px}
#skinPanel .rope03 {width:140px; height:132px; background-position: -740px -1px}
#skinPanel .rope04 {width:140px; height:132px; background-position: -558px -276px}
#skinPanel .rope05 {width:140px; height:132px; background-position: -463px -560px}
#skinPanel .rope06 {width:140px; height:132px; background-position: -391px -899px}
#skinPanel .rope07 {width:140px; height:132px; background-position: -528px -694px}
#skinPanel .rope08 {width:140px; height:132px; background-position: -605px -410px}
#skinPanel .rope09 {width:140px; height:132px; background-position: -744px -135px}

/* Skin panel layout */
#skinPanel {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Skin panel backgrounds for different resolutions */
.ui-1920 #skinPanel {
    background: url(../images/1920/ui/skin_bg.webp);
    background-size: cover;
}

.ui-1024 #skinPanel {
    background: url(../images/1024/ui/skin_bg.webp);
    background-size: cover;
}

.ui-768 #skinPanel {
    background: url(../images/768/ui/skin_bg.webp);
    background-size: cover;
}

#skinTabs {
    margin-top: 60px;
    margin-bottom: 20px;
}

#skinTabs .sBtn {
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;
}

#skinTabs .sBtn img {
    position: relative;
    pointer-events: none;
}

/* Active state for tabs - ui-1024 */
.ui-1024 #skinTabs .sBtn.active {
    background-position: left -66px;
}

/* Active state for tabs - ui-768 */
.ui-768 #skinTabs .sBtn.active {
    background-position: left -50px;
}

/* Active state for tabs - ui-1920 */
.ui-1920 #skinTabs .sBtn.active {
    background-position: left -124px;
}

.skin-tab {
    display: inline-block;
    margin: 0 10px;
    width: 247px;
    height: 100px;
    position: relative;
    cursor: url(../cursors/handcursor.cur), url(../cursors/handcursor.png), auto;
}

.skin-tab-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 247px;
    height: 100px;
    z-index: 1;
}

.skin-tab:active .skin-tab-bg {
    background-position: -1px -509px !important;
    width: 255px;
    height: 105px;
}

.skin-tab img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}

#skinGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    max-width: 892px;
    margin: 0 auto;
}

/* Skin navigation arrows */
.ui-1024 #skinNavBack,
.ui-1024 #skinNavForward {
    position: absolute;
    top: 256px;
    left: 205px;
    cursor: url(../cursors/handcursor.cur), url(../cursors/handcursor.png), auto;
}

.ui-1024 #skinNavBack div,
.ui-1024 #skinNavForward div {
    width: 59px;
    height: 71px;
    background-image: url(../images/1024/ui/box_nav_menu.webp);
    background-repeat: no-repeat;
}

.ui-1024 #skinNavBack.disabled {
    cursor: url(../cursors/cursor.cur), url(../cursors/cursor.png), auto;
    opacity: 0.25;
    pointer-events: none;
}

.ui-1024 #skinNavBack.disabled div {
    background-position: left -71px;
}

.ui-1024 #skinNavForward {
    left: 773px;
}

.ui-1024 #skinNavForward div {
    background-position: -59px top;
}

.ui-1024 #skinNavForward.disabled {
    cursor: url(../cursors/cursor.cur), url(../cursors/cursor.png), auto;
    opacity: 0.25;
    pointer-events: none;
}

.ui-1024 #skinNavForward.disabled div {
    background-position: -59px -71px;
}

.ui-768 #skinNavBack,
.ui-768 #skinNavForward {
    position: absolute;
    top: 192px;
    left: 154px;
    cursor: url(../cursors/handcursor.cur), url(../cursors/handcursor.png), auto;
}

.ui-768 #skinNavBack div,
.ui-768 #skinNavForward div {
    width: 44px;
    height: 53px;
    background-image: url(../images/768/ui/box_nav_menu.webp);
    background-repeat: no-repeat;
}

.ui-768 #skinNavBack.disabled {
    cursor: url(../cursors/cursor.cur), url(../cursors/cursor.png), auto;
    opacity: 0.25;
    pointer-events: none;
}

.ui-768 #skinNavBack.disabled div {
    background-position: left -53px;
}

.ui-768 #skinNavForward {
    left: 580px;
}

.ui-768 #skinNavForward div {
    background-position: -44px top;
}

.ui-768 #skinNavForward.disabled {
    cursor: url(../cursors/cursor.cur), url(../cursors/cursor.png), auto;
    opacity: 0.25;
    pointer-events: none;
}

.ui-768 #skinNavForward.disabled div {
    background-position: -44px -53px;
}

.ui-1920 #skinNavBack,
.ui-1920 #skinNavForward {
    position: absolute;
    top: 480px;
    left: 384px;
    cursor: url(../cursors/handcursor.cur), url(../cursors/handcursor.png), auto;
}

.ui-1920 #skinNavBack div,
.ui-1920 #skinNavForward div {
    width: 111px;
    height: 133px;
    background-image: url(../images/1920/ui/box_nav_menu.webp);
    background-repeat: no-repeat;
}

.ui-1920 #skinNavBack.disabled {
    cursor: url(../cursors/cursor.cur), url(../cursors/cursor.png), auto;
    opacity: 0.25;
    pointer-events: none;
}

.ui-1920 #skinNavBack.disabled div {
    background-position: left -133px;
}

.ui-1920 #skinNavForward {
    left: 1423px;
}

.ui-1920 #skinNavForward div {
    background-position: -111px top;
}

.ui-1920 #skinNavForward.disabled {
    cursor: url(../cursors/cursor.cur), url(../cursors/cursor.png), auto;
    opacity: 0.25;
    pointer-events: none;
}

.ui-1920 #skinNavForward.disabled div {
    background-position: -111px -133px;
}

.skin-slot {
    position: relative;
    width: 203px;
    height: 252px;
}

.skin-slot-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 203px;
    height: 252px;
}

.skin-slot:hover .skin-slot-bg {
    background-position: -1px -255px !important;
}

.skin-slot.equipped:hover .skin-slot-bg {
    background-position: -258px -495px !important;
}

.skin-icon {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}