/* ===== Classic TH (referencia DLL / Gumbao.min.css) ===== */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,700;1,400&display=swap');

body.th,.th input {
    font-family: Emoji,Barlow,Verdana,sans-serif
}

.th #BrokerWindow,
body.th #BrokerWindow {
    border-image-source: url('/static/images/themes/classicTH/servers_frame.png?2');
    border-image-slice: 46 18 18 18;
    border-image-width: 46px 18px 18px 18px;
    border-image-outset: 2px;
    background-image: url(/static/images/themes/classicTH/servers_bg.webp?t3) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important
}

.th #BrokerLogout {
    right: 4px;
    bottom: 9px;
    width: 107px;
    height: 45px;
    background-position: -892.5px -227.5px;
    transform: scale(0.8)
}

.th #BrokerLogout.light_button:active {
    transform: translateY(1px) scale(0.8)
}

#BrokerLogout .ThButtonIcon {
    background-position: -939px -206.5px
}

.th #GuideServers {
    display: none
}

.th #BrokerPlayer {
    border: 0;
    box-shadow: none;
    background: rgba(20,20,40,0.3);
    padding-bottom: 3px
}

.th #MissionsBtnLobby {
    left: 581px;
    top: 14px
}

.TH {
    display: none
}

.th .TH {
    display: block
}

.th #roomsList {
    left: 24px;
    top: 79px
}

.th #room1,.th #room3,.th #room5,.th #room7 {
    left: 299px
}

.th #room2,.th #room3 {
    top: 60px
}

.th #room4,.th #room5 {
    top: 120px
}

.th #room6,.th #room7 {
    top: 180px
}

.th .roomNumber {
    left: 6px;
    top: 11px
}

.th .roomTitle {
    top: 9px
}

.th .numPlayers {
    left: 195px;
    top: 10px;
    text-shadow: none;
    color: white;
    font-size: 12px
}

.th .maxPlayers {
    left: 211px;
    top: 10px;
    text-shadow: none;
    color: white;
    font-size: 12px
}

.th .roomMap {
    left: 48px;
    top: 17px;
    transform: scale(0.5)
}

.th .gameMode {
    left: 188px;
    top: 21px
}

.th .Rooms #channelName {
    left: 188px;
    top: 367px
}

.th .Auto #channelName {
    left: 15px;
    top: 372px
}

.th #prixPoints {
    top: 375px
}

.th .roomExtraInfoSlot0,.th .roomExtraInfoSlot2,.th .roomExtraInfoSlot4,.th .roomExtraInfoSlot6 {
    left: 15px
}

.th .roomExtraInfoSlot1,.th .roomExtraInfoSlot3,.th .roomExtraInfoSlot5,.th .roomExtraInfoSlot7 {
    left: 121px
}

.th .roomExtraInfoSlot2,.th .roomExtraInfoSlot3 {
    top: 96px
}

.th .roomExtraInfoSlot4,.th .roomExtraInfoSlot5 {
    top: 128px
}

.th .roomExtraInfoSlot6,.th .roomExtraInfoSlot7 {
    top: 160px
}

.th .allowWatch {
    left: 176px;
    top: 10px
}

.th .room {
    background-position: -535.5px -1442px;
    width: 232px;
    height: 58px
}

.th .powerUserRoom {
    background-position-x: -768px
}

.th .roomExtraInfo {
    background-position: 0 -110px;
    width: 232px;
    height: 188px
}

.th .powerUserRoom.roomExtraInfo {
    background-position: -232.5px -110px
}

.th .status {
    top: 31px
}

.th #channel {
    left: 15px;
    top: 402px;
    width: 554px;
    height: 172px
}

.th #channelInput {
    width: 444px
}

.th .Rooms #channel .viewport {
    border-radius: 7px
}

.th #startGameButtonsContainer {
    top: 115px
}

.th .AlertBox {
    border: 2px solid #000 !important;
    border-radius: 14px !important;
    background: linear-gradient(#6bdbff 0 21px,#000 21px 24px,#008eef 24px 100%);
    box-shadow: 3px 3px 10px 0 #000,inset -1px -1px 2px 0 rgba(0,0,0,0.5),inset 2px 2px 2px 0 rgba(255,255,255,0.5) !important
}

.th .AlertBox::before {
    content: '';
    position: absolute;
    width: 100%;
    border-bottom: 3px solid #000;
    height: 21px;
    pointer-events: none
}

.th .AlertBoxTitle {
    left: 16px;
    top: 9px;
    padding: 3px 8px 5px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.4);
    border: 1px black solid;
    color: #fff;
    background: #003142;
    text-shadow: -1px -1px 1px #000,0 -1px 1px #000,1px -1px 1px #000,-1px 0 1px #000,1px 0 1px #000,-1px 1px 1px #000,0 1px 1px #000,1px 1px 1px #000;
    z-index: 1;
    font-family: Emoji,Verdana,sans-serif
}

.th .AlertBoxTitle::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    padding: inherit;
    color: transparent;
    background: linear-gradient(#ffea4a 0,#ffea4a 40%,#fff 48%,#fff 56%,#ffea4a 60%,#ffea4a 100%);
    background-clip: text;
    text-shadow: none;
    pointer-events: none
}

.th .chatDialogName {
    left: 76px
}

.th #filter_all {
    left: 8px;
    top: 320px
}

.th #filter_waiting {
    left: 55px;
    top: 320px
}

.th #filter_friends {
    left: 106px;
    top: 321px
}

.th #filter_guild {
    left: 153px;
    top: 321px
}

.th.HD #buttonRoomsListUp {
    left: 219px;
    top: 327px;
    background-position: -606.5px -261px;
    width: 47px;
    height: 30px
}

.th #roomsPage {
    left: 269px;
    top: 333px
}

.th.HD #buttonRoomsListDown {
    left: 312px;
    top: 327px;
    background-position: -655px -261px;
    width: 47px;
    height: 30px
}

.th #filter_normal {
    left: 372px;
    top: 329px;
}

.th #filter_boss {
    left: 401px;
    top: 329px;
}

.th #filter_same {
    left: 476px;
    top: 321px
}

.th #filter_score {
    left: 459px;
    top: 329px;
}

.th #itemDual {
    left: 28px;
    top: 65px
}

.th #itemDualP {
    left: 116px;
    top: 65px
}

.th #itemTeleport {
    left: 28px;
    top: 114px
}

.th #itemWindT,
.th #itemWind {
    left: 116px;
    top: 114px;
}

.th #itemsSelectText,.th.HD #room_item_buddy_tab1,.th.HD #room_item_buddy_tab2,.th.HD #room_item_buddy_tab3 {
    display: none
}

.th #gp_team_a,.th #gp_team_b,.th #gp_rate {
    display: none
}

.th #friendsListExtra,.th #guildRoomTabExtra {
    display: none !important
}

.th #container.Room #friendsList,.th #container.Room #guildMembersList,.th #container.Game #friendsList,.th #container.Game #guildMembersList,.th #container.Shop #friendsList,.th #container.Shop #guildMembersList {
    box-shadow: 0 0 0 1px #0af,0 0 0 2px #05a;
    border-radius: 5px
}

.th #itemsSelection {
    width: 215px
}

.th .itemNone {
    width: 71px;
    height: 34px;
    display: none
}

.th.HD .itemDual {
    background-position: -880px -1300px;
    width: 71px;
    height: 34px
}

.th.HD .itemDualP {
    background-position: -878px -1162.5px;
    width: 71px;
    height: 34px
}

.th.HD .itemTeleport {
    background-position: -878px -1197px;
    width: 71px;
    height: 34px
}

.th.HD .itemWindT {
    background-position: -878px -1231px;
    width: 71px;
    height: 34px
}

.th #ItemBtn {
    height: 31px
}

.th #itemSlot2 {
    left: 72px
}

.th #itemSlot4 {
    left: 144px
}

.th #buttonCreateRoom {
    left: -5px;
    top: 17px;
    width: 107.5px;
    height: 45px;
    background-position: -893px -227px;
    transform: scale(0.8)
}

.th #buttonCreateRoom.light_button:active,.th #buttonJoin.light_button:active,.th #buttonQuickJoin.light_button:active,.th #buttonMyInfo.light_button:active,.th #buttonShop.light_button:active {
    transform: translateY(1px) scale(0.8)
}

.th #buttonOptions.light_button:active,.th #buttonChannels.light_button:active {
    transform: translateY(1px) scale(0.7)
}

.ThButtonIcon {
    position: absolute;
    left: 13px;
    top: 12px;
    width: 19px;
    height: 20px
}

#buttonCreateRoom .ThButtonIcon {
    background-position: -939px -163.5px
}

.ThButtonText {
    position: absolute;
    left: 32px;
    top: 14px;
    font-weight: bold;
    font-size: 14px;
    background: linear-gradient(to bottom,#ffe34a 0,#fff 50%,#ffe34a 100%);
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0.5px 0 1px #0059a5) drop-shadow(-0.5px 0 0 #0059a5) drop-shadow(0 .5px 0 #0059a5) drop-shadow(0 0 1px #0059a5);
    -webkit-text-stroke: .6px #0059a5;
    width: 62px;
    text-align: center
}

.th #buttonJoin {
    left: 117px;
    top: 17px;
    width: 107.5px;
    height: 45px;
    background-position: -893px -227px;
    transform: scale(0.8)
}

#buttonJoin .ThButtonIcon {
    background-position: -959.5px -163.5px
}

.th #buttonQuickJoin {
    left: 235px;
    top: 17px;
    width: 107.5px;
    height: 45px;
    background-position: -893px -227px;
    transform: scale(0.8)
}

#buttonQuickJoin .ThButtonIcon {
    background-position: -980px -163.5px
}

.th #buttonMyInfo {
    left: 352px;
    top: 17px;
    width: 107.5px;
    height: 45px;
    background-position: -893px -227px;
    transform: scale(0.8)
}

#buttonMyInfo .ThButtonIcon {
    background-position: -939px -185px
}

.th #buttonShop {
    left: 468px;
    top: 17px;
    width: 107.5px;
    height: 45px;
    background-position: -893px -227px;
    transform: scale(0.8)
}

#buttonShop .ThButtonIcon {
    background-position: -959.5px -185px
}

.th #buttonShopFromRoom {
    left: 325px;
    width: 107.5px;
    height: 45px;
    background-position: -893px -227px;
    transform: none
}

.th #buttonShopFromRoom:active {
    transform: translateY(1px)
}

#buttonShopFromRoom .ThButtonIcon {
    background-position: -959.5px -185px
}

.th #buttonCharge2 {
    left: 578px;
    top: 533px
}

.th #facebook_post {
    left: 650px
}

.th #event_button {
    left: 722px
}

.th #buttonChannels {
    left: 707px;
    width: 107.5px;
    height: 45px;
    background-position: -893px -227px;
    transform: scale(0.7)
}

#buttonChannels .ThButtonIcon {
    left: 11px;
    background-position: -917.5px -206.5px;
    width: 20px;
    height: 20px
}

.th #team_search {
    left: 554px;
    top: 43px
}

.th #CancelWaiting2 {
    top: 260px
}

.th .weatherDiv3 {
    background-image: url(/static/images/sunforceTH-2.png)
}

.th .weatherDiv4 {
    background-image: url(/static/images/lightningTH-2.png)
}

.th .weatherDiv8 {
    background-image: url(/static/images/tornadoTH2.png)
}

.th #buttonOptions {
    left: 627px;
    top: 542px;
    width: 107.5px;
    height: 45px;
    background-position: -893px -227px;
    transform: scale(0.7)
}

#buttonOptions .ThButtonIcon {
    background-position: -939px -163.5px
}

.th #buttonOptionsRoom {
    left: 470px;
    width: 107.5px;
    height: 45px;
    background-position: -893px -227px
}

#buttonOptionsRoom .ThButtonIcon {
    background-position: -939px -163.5px
}

body:not(.th) #roomMobileSelect {
    background: rgba(0,30,50,0.75)
}

.th #roomMobileSelect {
    height: 555px
}

.th #roomMobileSelect .Spacer {
    margin-bottom: 38px
}

.th #roomTutorialBack {
    right: 649px
}

.th #roomTutorialStart {
    left: 289px;
    top: 174px
}

.th #roomNumber {
    left: 27px;
    top: 14px
}

.th #roomTitle {
    left: 65px;
    top: 11px;
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    line-height: 19px
}

.th #roomPass {
    display: block;
    position: absolute;
    left: 279px;
    top: 11px;
    width: 57px;
    line-height: 19px;
    overflow: hidden;
    white-space: nowrap
}

.th #room_change_title_button {
    left: 346px;
    top: 12px
}

.th #roomOwner {
    right: 24px;
    top: 14px
}

.th #room_game_mode {
    left: 317px;
    top: 54px
}

.th #room_map {
    left: 293px;
    top: 74px;
    transform: scaleX(0.9);
    cursor: pointer
}

.th #room_players {
    left: 376px;
    top: 54px
}

.th #room_options_button {
    left: 442px;
    top: 129px;
    background-position: -880.5px -657.5px
}

.th #dialog_room_options {
    border-radius: 14px;
    box-shadow: 3px 3px 10px 0 #000,inset -1px -1px 0 0 #000
}

.th #playerInfoDialog {
    border-radius: 14px
}

.th #RoomRandomTeams {
    left: 303px;
    top: 125px;
    font-weight: normal;
    text-align: left;
    color: #f99
}

.th #room_wind {
    left: 303px;
    top: 144px;
    font-weight: normal;
    text-align: left
}

.th #room_avatars {
    left: 303px;
    top: 161px;
    font-weight: normal;
    text-align: left
}

.th #room_turn_time {
    left: 303px;
    top: 180px;
    font-weight: normal;
    text-align: left
}

.th #RoomWatchers {
    right: 426px;
    bottom: 390px;
    z-index: 30
}

.th #RoomS1Disabled {
    left: 402px;
    top: 177px;
    z-index: 30
}

.th #roomButtonChangeTeam {
    left: 460px;
    top: 302px
}

.th #roomButtonMobile {
    left: 306px;
    top: 298px
}

.th .thSlot.visible {
    display: block
}

.th .roomPlayerMobile .thSlot {
    display: unset;
    left: -67px;
    top: -36px;
    z-index: 2
}

.th #itemsSelection.InRoom {
    left: 567px;
    top: 363px;
    width: 215px;
    height: 175px
}

.th #roomButtonStart,.th #roomButtonReady {
    left: 350px;
    top: 230px
}

.th #add_bot_button {
    left: 609px;
    top: 39px !important
}

.th #playerInRoom0,.th #playerInRoom4 {
    left: 17px
}

.th #playerInRoom2,.th #playerInRoom6 {
    left: 156px
}

.th #playerInRoom1,.th #playerInRoom5 {
    left: 517px
}

.th #playerInRoom3,.th #playerInRoom7 {
    left: 656px
}

.th #playerInRoom0,.th #playerInRoom1,.th #playerInRoom2,.th #playerInRoom3 {
    top: 61px
}

.th #playerInRoom4,.th #playerInRoom5,.th #playerInRoom6,.th #playerInRoom7 {
    top: 213px
}

.th .playerInRoom {
    width: 127px;
    height: 129px
}

.th .roomPlayerClip {
    width: 127px;
    height: 129px;
    overflow: hidden
}

.th .roomPlayerClipInner {
    left: 67px;
    top: 105px;
    transform: scaleX(0.9) scaleY(1.6)
}

.th .SideA .roomPlayerMobile {
    left: 67px;
    top: 93px
}

.th .SideB .roomPlayerMobile {
    left: 67px;
    top: 93px
}

.th .roomPlayerName {
    left: 2px;
    top: unset;
    height: unset;
    bottom: 4px;
    width: 125px;
    text-wrap: pretty
}

.th .roomBotRemove,.th .roomBotSelect {
    left: 42px
}

.th .roomPlayerReady,.th .roomPlayerNotReady {
    left: 104px;
    top: 49px
}

.th .roomPlayerShadow {
    display: none
}

.th .SideA .roomPlayerMyself {
    left: 0;
    top: 20px
}

.th .SideB .roomPlayerMyself {
    right: 0;
    top: 20px
}

.th.HD .roomPlayerReady {
    background-position: -920.5px -617px;
    width: 19px;
    height: 40px;
    z-index: 10
}

.th.HD .roomPlayerNotReady {
    background-position: -880.5px -617px;
    width: 19px;
    height: 40px;
    z-index: 10
}

.th.HD .roomPlayerMaster {
    background-position: -752px -761.5px;
    width: 22px;
    height: 13px;
    left: 100px;
    top: 89px;
    z-index: 99
}

.th .SideA .roomPlayerInfo {
    left: -7px;
    top: -5px;
    transform: scale(0.65) rotate(0)
}

.th .SideB .roomPlayerInfo {
    right: -7px;
    top: -5px;
    transform: scale(0.65) rotate(0)
}

.th .roomPlayerBalloon {
    bottom: 95px
}

.th .roomPlayerBalloonTip {
    bottom: 88px
}

.th #roomInput {
    left: 51px;
    top: 363px;
    width: 442px;
    z-index: 111
}

.th #roomChat {
    left: 8px;
    top: 387px;
    width: 529px;
    height: 151px
}

.th #roomBcm {
    left: 18px;
    top: 362px;
    transform: scaleX(-1)
}

/* Room TH: emoticones arriba-derecha del chat, voz, mic (no encima de turn time/S1) y mision movil arriba-derecha */
body.th #roomScreen,
.th #roomScreen {
    overflow: visible !important;
}
body.th #roomEmo,
.th #roomEmo {
    left: 502px !important;
    top: 358px !important;
    z-index: 120 !important;
}

body.th #roomEmoPanel,
.th #roomEmoPanel {
    left: 8px !important;
    top: 390px !important;
    z-index: 130 !important;
}

body.th #roomVoicePanel,
.th #roomVoicePanel {
    left: 298px !important;
    top: 123px !important;
}

body.th #roomVoiceBar,
.th #roomVoiceBar {
    left: 400px !important;
    top: 177px !important;
    width: 32px !important;
    height: 30px !important;
    z-index: 8 !important;
}

body.th #mobileMissionBox,
.th #mobileMissionBox {
    left: 808px !important;
    top: 358px !important;
    right: auto !important;
    width: 195px !important;
    box-sizing: border-box !important;
    z-index: 40 !important;
}

.th #buttonShopFromRoom,.th #buttonOptionsRoom,.th #roomButtonBack {
    bottom: 5px;
    top: unset
}

.th #roomButtonBack {
    left: 35px;
    right: unset;
    width: 107.5px;
    height: 45px;
    background-position: -893px -227px
}

#roomButtonBack .ThButtonIcon {
    background-position: -980px -185px
}

.th #itemsSelection.InRoom #MissionsBtnRoom {
    top: 185px;
    left: 0px;
}

.th #buttonBuddy {
    display: unset
}

#buttonBuddy .ThButtonIcon {
    background-position: -959.5px -206.5px
}

.th #wind_meter2 {
    top: 52px;
    transform-origin: 0 0
}

.th .DamageDigit {
    width: 11px;
    height: 17px
}

.th #gameui {
    left: 0;
    top: 0;
    width: 800px;
    height: 38px;
    overflow: visible
}

.th #btnEsc {
    left: 11px;
    top: 3px;
    width: 40px;
    height: 30px;
    background-position: -618px -1317px
}

.th #btnTag {
    width: 40px;
    height: 34px;
    left: -14px;
    top: 12px;
    background-position: -618px -1378px
}

.th #btnPass {
    left: 750px;
    top: 3px;
    width: 40px;
    height: 30px;
    background-position: -618px -1347.5px
}

.th #gameChat {
    top: 47px
}

.th #turn_timer {
    top: 38px
}

.th #gameItemSlot0 {
    left: 501px;
    top: 1px
}

.th #gameItemSlot1 {
    left: 537px;
    top: 1px
}

.th #gameItemSlot2 {
    left: 573px;
    top: 1px
}

.th #gameItemSlot3 {
    left: 609px;
    top: 1px
}

.th #gameItemSlot4 {
    left: 645px;
    top: 1px
}

.th #gameItemSlot5 {
    left: 681px;
    top: 1px
}

.th .UIGoldDigit {
    top: 6px;
    width: 19px;
    height: 24px
}

.th #UIGoldDigit0 {
    left: 430px
}

.th #UIGoldDigit1 {
    left: 410px
}

.th #UIGoldDigit2 {
    left: 390px
}

.th #UIGoldDigit3 {
    left: 370px
}

.th #UIGoldDigit4 {
    left: 350px
}

.th #weatherSlot0 {
    left: 102px;
    top: 9px
}

.th #weatherSlot1 {
    left: 141px;
    top: 9px
}

.th #weatherSlot2 {
    left: 180px;
    top: 9px;
    filter: none
}

.th #weatherSlot3 {
    left: 219px;
    top: 9px;
    filter: none
}

.th #weatherSlot4 {
    left: 258px;
    top: 9px;
    filter: none
}

.th #message_over_items {
    left: 500px;
    top: 0;
    width: 216px;
    height: 38px
}

.th #message_over_items.sudden_death {
    background-position: -658.5px -1355.5px
}

.th #message_over_items.items_locked {
    background-position: -658.5px -1317px
}

.th #gameUI2 {
    position: absolute;
    display: block;
    top: 556px;
    width: 800px;
    height: 44px;
    background-position: 0 -1271.5px
}

.th #btnShot1 {
    left: 6px;
    top: 562px;
    width: 35px;
    height: 35px
}

.th #btnShot2 {
    left: 47px;
    top: 562px;
    width: 35px;
    height: 35px
}

.th #btnShotSS {
    left: 88px;
    top: 562px;
    width: 35px;
    height: 35px
}

.th #slice_drag_button {
    left: 190px;
    top: 563px
}

.th #powerMarkArea {
    left: 244px;
    top: 561px
}

.th #last_power_mark {
    left: 247px;
    top: 569px;
    background-position: -275.5px -1379px;
    width: 1px;
    height: 22px;
    transition: none
}

.th #powerBar {
    left: 244px;
    top: 570px
}

.th #walkBar {
    left: 244px;
    top: 582px;
    background-position: 0 -1445px;
    height: 12px;
    display: none;
    z-index: 3;
}

.th #gameUIWalkBG {
    position: absolute;
    left: 169px;
    top: 573px;
    background-position: 0 -1457.5px;
    width: 485px;
    height: 26px;
    z-index: 2
}

.th #turns_list {
    bottom: 47px
}

.th .turn_line_now {
    box-shadow: inset 3px 0 0 #7dff7d;
    background-color: rgba(70, 140, 70, 0.35)
}

.th .turn_line_now.turn_line_me {
    background-color: rgba(90, 150, 90, 0.55)
}

.th .mya {
    left: 134px;
    top: 578px;
    opacity: 1;
    scale: 1;
    width: 34px;
    height: 18px
}

.th #all_chat,.th #team_chat {
    top: 524px
}

.th #gameBcm {
    left: 217px;
    top: 526px
}

.th #gameEmo {
    left: 212px;
    top: 494px;
    bottom: unset;
    z-index: 125
}

.th #game_dnd_btn {
    top: 492px
}

.th #GameWatchers {
    top: 500px;
    bottom: unset
}

.th #gameInput {
    top: 527px;
    bottom: unset
}

.th #score_panel {
    top: 500px
}

.th #scores_lose_a,.th #scores_lose_b,
body.th.HD #scores_lose_a,body.th.HD #scores_lose_b {
    width: 373px !important;
    height: 383px !important;
    top: 45px !important;
    background-image: url(/static/images/themes/classicTH/scores_TH.webp?t3) !important;
    background-position: 0 0 !important;
    background-size: 1046.5px 383px !important;
    background-repeat: no-repeat !important
}

.th #scores_lose_a.win,.th #scores_lose_b.win,
body.th.HD #scores_lose_a.win,body.th.HD #scores_lose_b.win {
    background-position: -374px 0 !important
}

.th #scores_lose_a,
body.th.HD #scores_lose_a {
    left: 25px !important
}

.th #scores_lose_b,
body.th.HD #scores_lose_b {
    left: 402px !important
}

.th #game_over,
body.th.HD #game_over {
    background-image: none !important;
    background-color: rgba(0,0,0,.35) !important;
    background-size: auto !important;
    z-index: 80 !important
}

.th .score,
body.th.HD .score,
.th .score_me,
body.th.HD .score_me {
    width: 299px !important;
    height: 47px !important;
    overflow: visible !important;
    background-image: url(/static/images/themes/classicTH/scores_TH.webp?t3) !important;
    background-position: -747.5px 0 !important;
    background-size: 1046.5px 383px !important;
    background-repeat: no-repeat !important
}

.th #score1,.th #score3,.th #score5,.th #score7,
body.th.HD #score1,body.th.HD #score3,body.th.HD #score5,body.th.HD #score7 {
    background-position: -747.5px -48px !important
}

.th #score0,.th #score2,.th #score4,.th #score6 {
    left: 62px !important
}

.th #score1,.th #score3,.th #score5,.th #score7 {
    left: 439px !important
}

.th #score0,.th #score1 {
    top: 148px !important
}

.th #score2,.th #score3 {
    top: 213px !important
}

.th #score4,.th #score5 {
    top: 278px !important
}

.th #score6,.th #score7 {
    top: 343px !important
}

.th .shop_item_event_points {
    top: 127px;
}

.th .scoreA {
    display: block;
    position: absolute;
    left: -9px;
    top: 7px;
    width: 33px;
    height: 33px;
    background-image: url(/static/images/themes/classicTH/scores_TH.webp?t3) !important;
    background-position: -747.5px -95.5px !important;
    background-size: 1046.5px 383px !important;
    background-repeat: no-repeat !important
}

.th .scoreB {
    display: block;
    position: absolute;
    left: -4px;
    top: 7px;
    width: 28px;
    height: 35px;
    background-image: url(/static/images/themes/classicTH/scores_TH.webp?t3) !important;
    background-position: -781px -95.5px !important;
    background-size: 1046.5px 383px !important;
    background-repeat: no-repeat !important
}

.th .score_name {
    top: 26px !important;
    left: 28px !important;
    right: 118px !important;
    width: auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: bold;
    color: white !important;
    font-size: 10px !important;
    z-index: 2
}

.th .score_gp {
    right: 10px !important;
    top: 12px !important;
    left: unset !important;
    font-size: 12px !important;
    z-index: 8 !important
}

.th .score_gold {
    right: 10px !important;
    top: 30px !important;
    left: unset !important;
    font-size: 12px !important;
    z-index: 8 !important
}

.th .score_bonus_gp,
body.th.HD .score_bonus_gp {
    left: auto !important;
    right: 68px !important;
    top: 12px !important;
    color: #ff5ec8 !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 9 !important;
    text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000 !important
}

.th .score_bonus_gp .score_bonus_pet_line {
    display: inline-flex;
    align-items: center;
    white-space: nowrap
}

.th .score_bonus_gp .score_bonus_pet_icon {
    width: 14px;
    height: 14px;
    margin-right: 2px
}

.th .score_bonus_gold,
body.th.HD .score_bonus_gold {
    left: auto !important;
    right: 68px !important;
    top: 30px !important;
    color: #ffb040 !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 12px !important;
    display: block !important;
    z-index: 9 !important;
    text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000 !important
}

.th .score_bonus_pet,
body.th.HD .score_bonus_pet {
    display: none !important
}

.th .score_bonus_ticket,
body.th.HD .score_bonus_ticket {
    display: none !important
}

.th .score_season_bonus {
    right: 100px;
    top: 27px;
    font-size: 9px;
    line-height: 11px;
}

.th .score_mvp,
.th .score_mvp.plus,
body.th.HD .score_mvp,
body.th.HD .score_mvp.plus {
    left: 120px !important;
    top: -16px !important;
    width: 61px !important;
    height: 25px !important;
    background-image: url(/static/images/mvp.png) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important
}

.th .score_me {
    display: none !important
}

.th .score_mine {
    box-shadow: 0 0 0 2px #ffd700,0 0 12px 2px rgba(255,215,0,0.8);
    border-radius: 4px
}

.th .score_master {
    left: 38px;
    top: 11px;
    width: 22px;
    height: 13px;
    background-position: -752px -761.5px;
    font-size: 0;
    text-shadow: none
}

.th .score_master::before {
    content: none
}

.th .score_state_computer {
    left: 70px !important;
    top: 6px !important;
    font-size: 33px !important
}

.th #buttonShopExit {
    left: -7px;
    width: 107.5px;
    height: 45px;
    background-position: -893px -227px;
    transform: scale(0.8)
}

#buttonShopExit .ThButtonIcon {
    background-position: -980px -185px
}

.th #buy_cancel_btn {
    left: 323px;
    top: 319px;
    height: 15px;
    transform: scale(1.5)
}

.th #buy_cancel_btn.light_button:active {
    transform: translateY(1px) scale(1.5)
}

.th #shop_items {
    position: absolute;
    left: 6px;
    top: 7px
}

.th #shop_my_items_number {
    left: 196px;
    top: 189px
}

.th .shop_item_cash {
    top: 115px
}

.th .shop_item_gold {
    top: 127px
}

.th .shop_item_timer {
    top: 26px
}

.th .ShopSetBtn.row2 {
    top: 40px
}

.th #shop_buy_dialog {
    border-radius: 14px
}

.th #GuideShop {
    left: 102px
}
/* ===== Fin ClassicTH ===== */



/* ===== ClassicTH slots extra ===== */
.thSlot {
    display: none;
    position: absolute
}

#thslot0,#thslot4 {
    left: 17px
}

#thslot2,#thslot6 {
    left: 156px
}

#thslot1,#thslot5 {
    left: 517px
}

#thslot3,#thslot7 {
    left: 656px
}

#thslot0,#thslot1,#thslot2,#thslot3 {
    top: 119px
}

#thslot4,#thslot5,#thslot6,#thslot7 {
    top: 271px
}

.SlotA {
    background-position: -752px -617px;
    width: 127px;
    height: 71px
}

.SlotB {
    background-position: -752px -689.5px;
    width: 127px;
    height: 71px
}
/* ===== Fin ClassicTH slots ===== */


/* ===== CLASSICTH FIX: layout real de botones + textos/iconos ===== */
body:not(.th) .ThButtonIcon,
body:not(.th) .ThButtonText {
    display: none !important;
}

body.th .ThButtonIcon,
body.th .ThButtonText {
    display: block !important;
    pointer-events: none !important;
}

body.th #buttonCreateRoom {
    position: absolute !important;
    left: -5px !important;
    top: 17px !important;
    width: 107.5px !important;
    height: 45px !important;
    background-position: -893px -227px !important;
    transform: scale(0.8) !important;
}
body.th #buttonJoin {
    position: absolute !important;
    left: 117px !important;
    top: 17px !important;
    width: 107.5px !important;
    height: 45px !important;
    background-position: -893px -227px !important;
    transform: scale(0.8) !important;
}
body.th #buttonQuickJoin {
    position: absolute !important;
    left: 235px !important;
    top: 17px !important;
    width: 107.5px !important;
    height: 45px !important;
    background-position: -893px -227px !important;
    transform: scale(0.8) !important;
}
body.th #buttonMyInfo {
    position: absolute !important;
    left: 352px !important;
    top: 17px !important;
    width: 107.5px !important;
    height: 45px !important;
    background-position: -893px -227px !important;
    transform: scale(0.8) !important;
}
body.th #buttonShop {
    position: absolute !important;
    left: 468px !important;
    top: 17px !important;
    width: 107.5px !important;
    height: 45px !important;
    background-position: -893px -227px !important;
    transform: scale(0.8) !important;
}
body.th #buttonCharge2 {
    position: absolute !important;
    left: 578px !important;
    top: 533px !important;
}
body.th #facebook_post {
    position: absolute !important;
    left: 650px !important;
    top: 7px !important;
}
body.th #event_button {
    position: absolute !important;
    left: 722px !important;
    top: 7px !important;
}
body.th #buttonOptions {
    position: absolute !important;
    left: 627px !important;
    top: 542px !important;
    width: 107.5px !important;
    height: 45px !important;
    background-position: -893px -227px !important;
    transform: scale(0.7) !important;
}
body.th #buttonChannels {
    position: absolute !important;
    left: 707px !important;
    top: 542px !important;
    width: 107.5px !important;
    height: 45px !important;
    background-position: -893px -227px !important;
    transform: scale(0.7) !important;
}
body.th #buttonShopFromRoom {
    position: absolute !important;
    left: 325px !important;
    width: 107.5px !important;
    height: 45px !important;
    background-position: -893px -227px !important;
    transform: none !important;
}
body.th #buttonOptionsRoom {
    position: absolute !important;
    left: 470px !important;
    width: 107.5px !important;
    height: 45px !important;
    background-position: -893px -227px !important;
    transform: none !important;
}
body.th #roomButtonBack {
    position: absolute !important;
    left: 690px !important;
    width: 107.5px !important;
    height: 45px !important;
    background-position: -893px -227px !important;
    transform: none !important;
}
body.th #buttonCreateRoom.light_button:active,
body.th #buttonJoin.light_button:active,
body.th #buttonQuickJoin.light_button:active,
body.th #buttonMyInfo.light_button:active,
body.th #buttonShop.light_button:active {
    transform: translateY(1px) scale(0.8) !important;
}
body.th #buttonOptions.light_button:active,
body.th #buttonChannels.light_button:active {
    transform: translateY(1px) scale(0.7) !important;
}
body.th #buttonShopFromRoom:active,
body.th #buttonOptionsRoom:active,
body.th #roomButtonBack:active {
    transform: translateY(1px) !important;
}
body.th .ThButtonIcon {
    position: absolute !important;
    left: 13px !important;
    top: 12px !important;
    width: 19px !important;
    height: 20px !important;
}
body.th .ThButtonText {
    position: absolute !important;
    left: 32px !important;
    top: 14px !important;
    width: 62px !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 14px !important;
    line-height: 14px !important;
    background: linear-gradient(to bottom,#ffe34a 0,#fff 50%,#ffe34a 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: .6px #0059a5 !important;
    filter: drop-shadow(0.5px 0 1px #0059a5) drop-shadow(-0.5px 0 0 #0059a5) drop-shadow(0 .5px 0 #0059a5) drop-shadow(0 0 1px #0059a5) !important;
}
body.th #buttonOptions .ThButtonText,
body.th #buttonOptionsRoom .ThButtonText {
    font-size: 13px !important;
}
body.th #buttonChannels .ThButtonText {
    font-size: 12px !important;
}
body.th #BrokerLogout .ThButtonText {
    font-size: 13px !important;
}
body.th .ThButtonIcon,
body.th .ThButtonText {
    display: none !important;
}

body.th #buttonCreateRoom,
body.th #buttonJoin,
body.th #buttonQuickJoin,
body.th #buttonMyInfo,
body.th #buttonShop,
body.th #buttonCharge2,
body.th #facebook_post,
body.th #event_button {
    position: absolute !important;
    top: 7px !important;
    width: 62px !important;
    height: 62px !important;
    transform: none !important;
}

body.th #buttonCreateRoom {
    left: 144px !important;
    background-position: -62.5px 0 !important;
}
body.th #buttonJoin {
    left: 226px !important;
    background-position: -125px 0 !important;
}
body.th #buttonQuickJoin {
    left: 308px !important;
    background-position: 0 0 !important;
}
body.th #buttonMyInfo {
    left: 390px !important;
    background-position: -187.5px 0 !important;
}
body.th #buttonShop {
    left: 472px !important;
    background-position: -250px 0 !important;
}
body.th #buttonCharge2 {
    left: 554px !important;
    background-position: -312.5px 0 !important;
}
body.th #facebook_post {
    left: 636px !important;
    background-position: -437.5px 0 !important;
}
body.th #event_button {
    left: 718px !important;
    background-position: -375px 0 !important;
}

body.th #buttonOptions,
body.th #buttonOptionsRoom,
body.th #buttonChannels {
    position: absolute !important;
    width: 55px !important;
    height: 51px !important;
    transform: none !important;
}
body.th #buttonOptions {
    left: 594px !important;
    top: 542px !important;
    background-position: -571.5px 0 !important;
}
body.th #buttonOptionsRoom {
    left: 733px !important;
    top: 547px !important;
    background-position: -571.5px 0 !important;
}
body.th #buttonChannels {
    left: 733px !important;
    top: 542px !important;
    background-position: -627px 0 !important;
}

body.th #buttonShopFromRoom {
    position: absolute !important;
    left: 500px !important;
    bottom: 1px !important;
    width: 62px !important;
    height: 62px !important;
    background-position: -250px 0 !important;
    border-radius: 5px !important;
    transform: scale(.83) !important;
    transform-origin: left bottom !important;
}

body.th #buttonCreateRoom.light_button:active,
body.th #buttonJoin.light_button:active,
body.th #buttonQuickJoin.light_button:active,
body.th #buttonMyInfo.light_button:active,
body.th #buttonShop.light_button:active,
body.th #buttonCharge2.light_button:active,
body.th #facebook_post.light_button:active,
body.th #event_button.light_button:active,
body.th #buttonOptions.light_button:active,
body.th #buttonOptionsRoom.light_button:active,
body.th #buttonChannels.light_button:active {
    transform: translateY(1px) !important;
}
body.th #buttonShopFromRoom.light_button:active {
    transform: translateY(1px) scale(.83) !important;
}

body.th #buttonCreateRoom,
body.th #buttonJoin,
body.th #buttonQuickJoin,
body.th #buttonMyInfo,
body.th #buttonShop,
body.th #buttonShopFromRoom,
body.th #buttonCharge2,
body.th #buttonOptions,
body.th #buttonOptionsRoom,
body.th #buttonChannels {
    background-image: url(/static/images/themes/classicHD/stuff_HD.avif?3) !important;
    background-repeat: no-repeat !important;
    background-size: 1000px 1500px !important;
}

/* Fila superior clasica */
body.th #buttonCreateRoom,
body.th #buttonJoin,
body.th #buttonQuickJoin,
body.th #buttonMyInfo,
body.th #buttonShop,
body.th #buttonCharge2,
body.th #facebook_post {
    position: absolute !important;
    top: 7px !important;
    width: 62px !important;
    height: 62px !important;
    transform: none !important;
}

body.th #buttonCreateRoom { left: 144px !important; background-position: -62.5px 0 !important; }
body.th #buttonJoin       { left: 226px !important; background-position: -125px 0 !important; }
body.th #buttonQuickJoin  { left: 308px !important; background-position: 0 0 !important; }
body.th #buttonMyInfo     { left: 390px !important; background-position: -187.5px 0 !important; }
body.th #buttonShop       { left: 472px !important; background-position: -250px 0 !important; }
body.th #buttonCharge2    { left: 554px !important; background-position: -312.5px 0 !important; }

/* Get CASH = mismos sprites y sitio que classicHD */
body.th #facebook_post,
body.th #event_button {
    position: absolute !important;
    top: 7px !important;
    width: 62px !important;
    height: 62px !important;
    transform: none !important;
    background-image: url(/static/images/themes/classicHD/stuff_HD.avif?3) !important;
    background-repeat: no-repeat !important;
    background-size: 1000px 1500px !important;
    color: #ffd273 !important;
    font-size: 9px !important;
    text-align: center !important;
    z-index: 20 !important
}
body.th #facebook_post {
    left: 636px !important;
    background-position: -437.5px 0 !important
}
body.th #event_button {
    left: 718px !important;
    background-position: -375px 0 !important
}

body.th #buttonOptions,
body.th #buttonOptionsRoom,
body.th #buttonChannels {
    position: absolute !important;
    width: 55px !important;
    height: 51px !important;
    transform: none !important;
}
body.th #buttonOptions     { left: 594px !important; top: 542px !important; background-position: -571.5px 0 !important; }
body.th #buttonOptionsRoom { 
    left: 640px !important;
    top: 547px !important;
	background-position: -571.5px 0 !important; }



body.th #buttonChannels    { left: 733px !important; top: 542px !important; background-position: -627px 0 !important; }

body.th #buttonShopFromRoom {
    position: absolute !important;
    left: 500px !important;
    bottom: 1px !important;
    width: 62px !important;
    height: 62px !important;
    background-position: -250px 0 !important;
    border-radius: 5px !important;
    transform: scale(.83) !important;
    transform-origin: left bottom !important;
}

body.th .ThButtonIcon,
body.th .ThButtonText {
    display: none !important;
}

body.th #buttonCreateRoom.light_button:active,
body.th #buttonJoin.light_button:active,
body.th #buttonQuickJoin.light_button:active,
body.th #buttonMyInfo.light_button:active,
body.th #buttonShop.light_button:active,
body.th #buttonCharge2.light_button:active,
body.th #facebook_post.light_button:active,
body.th #event_button.light_button:active,
body.th #buttonOptions.light_button:active,
body.th #buttonOptionsRoom.light_button:active,
body.th #buttonChannels.light_button:active {
    transform: translateY(1px) !important;
}
body.th #buttonShopFromRoom.light_button:active {
    transform: translateY(1px) scale(.83) !important;
}

body.th #facebook_post,
body.th #event_button {
    position: absolute !important;
    top: 7px !important;
    width: 62px !important;
    height: 62px !important;
    transform: none !important;
    background-image: url(/static/images/themes/classicHD/stuff_HD.avif?3) !important;
    background-repeat: no-repeat !important;
    background-size: 1000px 1500px !important;
    color: #ffd273 !important;
    font-size: 9px !important;
    text-align: center !important;
    z-index: 20 !important
}

/* Daily Free Cash — mismo recorte que classicHD */
body.th #facebook_post {
    left: 636px !important;
    background-position: -437.5px 0 !important
}

/* Free Gold / 4 Hours Cash — mismo recorte que classicHD */
body.th #event_button {
    left: 718px !important;
    background-position: -375px 0 !important
}

body.th #facebook_post .event_button_text,
body.th #event_button .event_button_text {
    position: absolute !important;
    bottom: 8px !important;
    left: 0 !important;
    width: 100% !important;
    font-size: 9px !important;
    line-height: 10px !important;
    color: #ffd273 !important;
    text-align: center !important;
    pointer-events: none !important
}

/* Misiones: ocupa el lugar central inferior donde antes quedaba mal el Free Gold */
body.th #MissionsBtnLobby {
    display: block !important;
    position: absolute !important;
    left: 664px !important;
    top: 542px !important;
    width: 55px !important;
    height: 51px !important;
    transform: none !important;
    background-image: url(/static/images/starBtn.png) !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    z-index: 22 !important;
}

body.th #MissionsBtnLobby.light_button:active,
body.th #MissionsBtnLobby:active {
    transform: translateY(1px) !important;
}

.mya {
    position: absolute !important;
    pointer-events: none;
}

body.th .mya,
.th .mya {
    left: 134px !important;
    top: 578px !important;
    opacity: 1 !important;
    scale: 1 !important;
    width: 34px !important;
    height: 18px !important;
    z-index: 6 !important;
    image-rendering: pixelated !important;
    image-rendering: crisp-edges !important;
}

.roomPlayerClip {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.roomPlayerClipInner {
    position: absolute !important;
    top: 88px;
    pointer-events: none;
}

.SideA .roomPlayerClipInner {
    left: 100px;
}

.SideB .roomPlayerClipInner {
    right: 100px;
}

/* Sala ClassicTH: slots y jugadores en posiciones originales */
body.th .thSlot,
.th .thSlot {
    position: absolute !important;
    display: none;
    z-index: 1;
    pointer-events: none;
}

body.th .thSlot.visible,
.th .thSlot.visible {
    display: block !important;
}

body.th #thslot0,body.th #thslot4,.th #thslot0,.th #thslot4 { left: 17px !important; }
body.th #thslot2,body.th #thslot6,.th #thslot2,.th #thslot6 { left: 156px !important; }
body.th #thslot1,body.th #thslot5,.th #thslot1,.th #thslot5 { left: 517px !important; }
body.th #thslot3,body.th #thslot7,.th #thslot3,.th #thslot7 { left: 656px !important; }
body.th #thslot0,body.th #thslot1,body.th #thslot2,body.th #thslot3,
.th #thslot0,.th #thslot1,.th #thslot2,.th #thslot3 { top: 119px !important; }
body.th #thslot4,body.th #thslot5,body.th #thslot6,body.th #thslot7,
.th #thslot4,.th #thslot5,.th #thslot6,.th #thslot7 { top: 271px !important; }

body.th #playerInRoom0,body.th #playerInRoom4,.th #playerInRoom0,.th #playerInRoom4 { left: 17px !important; }
body.th #playerInRoom2,body.th #playerInRoom6,.th #playerInRoom2,.th #playerInRoom6 { left: 156px !important; }
body.th #playerInRoom1,body.th #playerInRoom5,.th #playerInRoom1,.th #playerInRoom5 { left: 517px !important; }
body.th #playerInRoom3,body.th #playerInRoom7,.th #playerInRoom3,.th #playerInRoom7 { left: 656px !important; }
body.th #playerInRoom0,body.th #playerInRoom1,body.th #playerInRoom2,body.th #playerInRoom3,
.th #playerInRoom0,.th #playerInRoom1,.th #playerInRoom2,.th #playerInRoom3 { top: 61px !important; }
body.th #playerInRoom4,body.th #playerInRoom5,body.th #playerInRoom6,body.th #playerInRoom7,
.th #playerInRoom4,.th #playerInRoom5,.th #playerInRoom6,.th #playerInRoom7 { top: 213px !important; }

body.th .playerInRoom,
.th .playerInRoom {
    width: 127px !important;
    height: 129px !important;
    overflow: visible !important;
}

body.th .playerInRoom.occupied,
.th .playerInRoom.occupied {
    display: block !important;
}

body.th .roomPlayerClip,
.th .roomPlayerClip {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 127px !important;
    height: 129px !important;
    overflow: hidden !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body.th .roomPlayerClipInner,
.th .roomPlayerClipInner {
    position: absolute !important;
    left: 67px !important;
    right: auto !important;
    top: 105px !important;
    transform: scaleX(0.9) scaleY(1.6) !important;
    transform-origin: 0 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body.th .SideA .roomPlayerMobile,
body.th .SideB .roomPlayerMobile,
.th .SideA .roomPlayerMobile,
.th .SideB .roomPlayerMobile {
    position: absolute !important;
    left: 67px !important;
    right: auto !important;
    top: 93px !important;
    z-index: 3 !important;
}

body.th .roomPlayerName,
.th .roomPlayerName {
    position: absolute !important;
    left: 2px !important;
    right: auto !important;
    top: auto !important;
    bottom: 4px !important;
    width: 125px !important;
    height: auto !important;
    max-height: 32px !important;
    z-index: 25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: center !important;
}

/* Ocultar VIP/nyxcafe solamente dentro del lobby de sala TH */
body.th .roomPlayerName .nyxcafe2,
body.th .roomPlayerName .nyxcafe3,
body.th .roomPlayerName .nyxcafe4,
body.th .roomPlayerName .nyxcafe5,
body.th .roomPlayerName .nyxcafe6,
body.th .roomPlayerName .nyxcafe7,
body.th .roomPlayerName .nyxcafe8,
body.th .roomPlayerName .nyxcafe9,
body.th .roomPlayerName .nyxcafe10,
body.th .roomPlayerName .nyxcafe11,
body.th .roomPlayerName .nyxcafe12,
body.th .roomPlayerName .vipTag,
body.th .roomPlayerName .vipTagImage,
body.th .roomPlayerName .viptext,
.th .roomPlayerName .nyxcafe2,
.th .roomPlayerName .nyxcafe3,
.th .roomPlayerName .nyxcafe4,
.th .roomPlayerName .nyxcafe5,
.th .roomPlayerName .nyxcafe6,
.th .roomPlayerName .nyxcafe7,
.th .roomPlayerName .nyxcafe8,
.th .roomPlayerName .nyxcafe9,
.th .roomPlayerName .nyxcafe10,
.th .roomPlayerName .nyxcafe11,
.th .roomPlayerName .nyxcafe12,
.th .roomPlayerName .vipTag,
.th .roomPlayerName .vipTagImage,
.th .roomPlayerName .viptext {
    display: none !important;
}

body.th .roomPlayerName .vipMembershipInsignia,
.th .roomPlayerName .vipMembershipInsignia {
    display: inline-block !important;
    height: 15px !important;
    width: 25px !important;
    max-height: 15px !important;
    max-width: 25px !important;
    vertical-align: middle !important;
}

body.th .playerInRoom > .roomSlotCafeIconTH.myNyxcafeTeamBlue,
.th .playerInRoom > .roomSlotCafeIconTH.myNyxcafeTeamBlue {
    position: absolute !important;
    right: 4px !important;
    top: -16px !important;
    width: 25px !important;
    height: 15px !important;
    z-index: 60 !important;
    pointer-events: none !important;
}

body.th .roomPlayerReady,
body.th .roomPlayerNotReady,
.th .roomPlayerReady,
.th .roomPlayerNotReady {
    left: 104px !important;
    top: 49px !important;
    z-index: 10 !important;
}

body.th .roomPlayerShadow,
.th .roomPlayerShadow {
    display: none !important;
}

/* Panel inferior del game ClassicTH */
#gameUI2,
#gameUIWalkBG {
    display: none;
    pointer-events: none;
}

body.th #gameUI2,
.th #gameUI2 {
    position: absolute !important;
    display: block !important;
    left: 0 !important;
    top: 556px !important;
    width: 800px !important;
    height: 44px !important;
    background-position: 0 -1271.5px !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

body.th #gameUIWalkBG,
.th #gameUIWalkBG {
    position: absolute !important;
    left: 169px !important;
    top: 573px !important;
    width: 485px !important;
    height: 26px !important;
    background-position: 0 -1457.5px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

body.th #powerMarkArea,
body.th #powerBar,
body.th #walkBar,
body.th #last_power_mark,
body.th #btnShot1,
body.th #btnShot2,
body.th #btnShotSS,
body.th #slice_drag_button,
.th #powerMarkArea,
.th #powerBar,
.th #walkBar,
.th #last_power_mark,
.th #btnShot1,
.th #btnShot2,
.th #btnShotSS,
.th #slice_drag_button {
    z-index: 6 !important;
}

body.th #container.Game #btnShot1,
body.th #btnShot1,
.th #btnShot1 {
    left: 6px !important;
    top: 562px !important;
    width: 35px !important;
    height: 35px !important;
}

body.th #container.Game #btnShot2,
body.th #btnShot2,
.th #btnShot2 {
    left: 47px !important;
    top: 562px !important;
    width: 35px !important;
    height: 35px !important;
}

body.th #container.Game #btnShotSS,
body.th #btnShotSS,
.th #btnShotSS {
    left: 88px !important;
    top: 562px !important;
    width: 35px !important;
    height: 35px !important;
}

body.th #container.Game #slice_drag_button,
body.th #slice_drag_button,
.th #slice_drag_button {
    left: 190px !important;
    top: 563px !important;
}

body.th #container.Game #powerMarkArea,
body.th #powerMarkArea,
.th #powerMarkArea {
    left: 244px !important;
    top: 561px !important;
}

body.th #container.Game #powerBar,
body.th #powerBar,
.th #powerBar {
    left: 244px !important;
    top: 570px !important;
}

body.th #container.Game #gameUI2,
body.th #gameUI2,
.th #gameUI2 {
    left: 0 !important;
    top: 556px !important;
    width: 800px !important;
    height: 44px !important;
    background-position: 0 -1271.5px !important;
    display: block !important;
}

body.th #walkBar,
.th #walkBar {
    z-index: 7 !important;
}
body.th #thslot0, body.th #thslot1, body.th #thslot2, body.th #thslot3,
body.th #thslot4, body.th #thslot5, body.th #thslot6, body.th #thslot7,
.th #thslot0, .th #thslot1, .th #thslot2, .th #thslot3,
.th #thslot4, .th #thslot5, .th #thslot6, .th #thslot7 {
    display: none !important;
}

body.th .roomPlayerMobile > .thSlot,
.th .roomPlayerMobile > .thSlot {
    display: block !important;
    position: absolute !important;
    left: -67px !important;
    top: -36px !important;
    width: 127px !important;
    height: 71px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

body.th .playerInRoom:not(.occupied) .roomPlayerMobile > .thSlot,
.th .playerInRoom:not(.occupied) .roomPlayerMobile > .thSlot {
    display: none !important;
}

body.th .playerInRoom.occupied,
.th .playerInRoom.occupied {
    display: block !important;
}

body .th .score_tasa,
.th .score_tasa,
body.th.HD .score_tasa {
    left: 50px !important;
    top: -10px !important;
    width: 25px !important;
    height: 15px !important;
    background: url(/static/images/season2/cafe.png) no-repeat center / contain !important
}

body.th .roomPlayerName,
.th .roomPlayerName {
    bottom: 5px !important;
}

body.th.HD .roomPlayerMaster,
.th.HD .roomPlayerMaster,
body.th .roomPlayerMaster,
.th .roomPlayerMaster {
    top: 60px !important;
    left: 100px !important;
    z-index: 10 !important;
}

body.th #btnEsc,
body.th #btnPass,
.th #btnEsc,
.th #btnPass {
    z-index: 80 !important;
    pointer-events: auto !important;
}

body.th #btnShot1,
body.th #btnShot2,
body.th #btnShotSS,
.th #btnShot1,
.th #btnShot2,
.th #btnShotSS {
    pointer-events: auto !important;
}

/* HUD Classic TH en partida — huecos del stuff (Gumbao.min.css) */
body.th #container.Game #gameui,
.th #container.Game #gameui,
body.th #gameui,
.th #gameui {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 800px !important;
    height: 38px !important;
    overflow: visible !important;
    background-position: 0 -1231.5px !important;
}

body.th #container.Game #gameItemSlot0,
body.th #gameItemSlot0,
.th #container.Game #gameItemSlot0,
.th #gameItemSlot0 {
    position: absolute !important;
    left: 501px !important;
    top: 1px !important;
    width: 35px !important;
    height: 34px !important;
    pointer-events: auto !important;
    z-index: 40 !important;
}

body.th #container.Game #gameItemSlot1,
body.th #gameItemSlot1,
.th #container.Game #gameItemSlot1,
.th #gameItemSlot1 {
    position: absolute !important;
    left: 537px !important;
    top: 1px !important;
    width: 35px !important;
    height: 34px !important;
    pointer-events: auto !important;
    z-index: 40 !important;
}

body.th #container.Game #gameItemSlot2,
body.th #gameItemSlot2,
.th #container.Game #gameItemSlot2,
.th #gameItemSlot2 {
    position: absolute !important;
    left: 573px !important;
    top: 1px !important;
    width: 35px !important;
    height: 34px !important;
    pointer-events: auto !important;
    z-index: 40 !important;
}

body.th #container.Game #gameItemSlot3,
body.th #gameItemSlot3,
.th #container.Game #gameItemSlot3,
.th #gameItemSlot3 {
    position: absolute !important;
    left: 609px !important;
    top: 1px !important;
    width: 35px !important;
    height: 34px !important;
    pointer-events: auto !important;
    z-index: 40 !important;
}

body.th #container.Game #gameItemSlot4,
body.th #gameItemSlot4,
.th #container.Game #gameItemSlot4,
.th #gameItemSlot4 {
    position: absolute !important;
    left: 645px !important;
    top: 1px !important;
    width: 35px !important;
    height: 34px !important;
    pointer-events: auto !important;
    z-index: 40 !important;
}

body.th #container.Game #gameItemSlot5,
body.th #gameItemSlot5,
.th #container.Game #gameItemSlot5,
.th #gameItemSlot5 {
    position: absolute !important;
    left: 681px !important;
    top: 1px !important;
    width: 35px !important;
    height: 34px !important;
    pointer-events: auto !important;
    z-index: 40 !important;
}

body.th #container.Game #gameItemSlot0.big,
body.th #container.Game #gameItemSlot1.big,
body.th #container.Game #gameItemSlot2.big,
body.th #container.Game #gameItemSlot3.big,
body.th #container.Game #gameItemSlot4.big,
body.th #gameItemSlot0.big,
body.th #gameItemSlot1.big,
body.th #gameItemSlot2.big,
body.th #gameItemSlot3.big,
body.th #gameItemSlot4.big,
.th #container.Game #gameItemSlot0.big,
.th #container.Game #gameItemSlot1.big,
.th #container.Game #gameItemSlot2.big,
.th #container.Game #gameItemSlot3.big,
.th #container.Game #gameItemSlot4.big,
.th #gameItemSlot0.big,
.th #gameItemSlot1.big,
.th #gameItemSlot2.big,
.th #gameItemSlot3.big,
.th #gameItemSlot4.big {
    width: 71px !important;
    height: 34px !important;
}

body.th #container.Game #weatherSlot0,
body.th #weatherSlot0,
.th #weatherSlot0 {
    left: 102px !important;
    top: 9px !important;
}

body.th #container.Game #weatherSlot1,
body.th #weatherSlot1,
.th #weatherSlot1 {
    left: 141px !important;
    top: 9px !important;
}

body.th #container.Game #weatherSlot2,
body.th #weatherSlot2,
.th #weatherSlot2 {
    left: 180px !important;
    top: 9px !important;
}

body.th #container.Game #weatherSlot3,
body.th #weatherSlot3,
.th #weatherSlot3 {
    left: 219px !important;
    top: 9px !important;
}

body.th #container.Game #weatherSlot4,
body.th #weatherSlot4,
.th #weatherSlot4 {
    left: 258px !important;
    top: 9px !important;
}

body.th #container.Game #btnEsc,
body.th #btnEsc,
.th #btnEsc {
    left: 11px !important;
    top: 3px !important;
    z-index: 200 !important;
    pointer-events: auto !important;
}

body.th #OptionsDialog,
.th #OptionsDialog {
    z-index: 20000 !important;
}

body.th #OptionsLeave,
body.th #OptionsOK,
.th #OptionsLeave,
.th #OptionsOK {
    pointer-events: auto !important;
    z-index: 20001 !important;
}

body.th #container.Game #btnPass,
body.th #btnPass,
.th #btnPass {
    left: 750px !important;
    top: 3px !important;
}

body.th .DamageDigit,
.th .DamageDigit {
    width: 11px !important;
    height: 17px !important;
}

body.th #container.Game .UIGoldDigit,
body.th .UIGoldDigit,
.th .UIGoldDigit {
    top: 6px !important;
    width: 19px !important;
    height: 24px !important;
    background-position-x: -981px !important;
}

body.th #UIGoldDigit0, .th #UIGoldDigit0 { left: 430px !important; }
body.th #UIGoldDigit1, .th #UIGoldDigit1 { left: 410px !important; }
body.th #UIGoldDigit2, .th #UIGoldDigit2 { left: 390px !important; }
body.th #UIGoldDigit3, .th #UIGoldDigit3 { left: 370px !important; }
body.th #UIGoldDigit4, .th #UIGoldDigit4 { left: 350px !important; }

body.th #container.Game #gameBcm,
body.th #gameBcm,
.th #gameBcm {
    left: 217px !important;
    top: 526px !important;
}

body.th #container.Game #gameEmo,
body.th #gameEmo,
.th #gameEmo,
body.th #GameEmoticonBtn,
.th #GameEmoticonBtn {
    left: 212px !important;
    top: 494px !important;
    bottom: unset !important;
    z-index: 125 !important;
}

body.th #gameEmoPanel,
.th #gameEmoPanel,
body.th #GameEmoticonPicker,
.th #GameEmoticonPicker {
    left: 10px !important;
    top: unset !important;
    bottom: 110px !important;
    z-index: 130 !important;
}

body.th #wind_meter2,
.th #wind_meter2 {
    left: 334px !important;
    top: 52px !important;
    transform-origin: 0 0 !important;
    z-index: 35 !important;
    pointer-events: none !important;
}

body.th .WeatherFall,
.th .WeatherFall {
    top: 38px !important;
}

body.th .weatherDiv3,
.th .weatherDiv3 {
    background-image: url(/static/images/sunforceTH-2.png) !important;
}

body.th .weatherDiv4,
.th .weatherDiv4 {
    background-image: url(/static/images/lightningTH-2.png) !important;
}

body.th .weatherDiv8,
.th .weatherDiv8 {
    background-image: url(/static/images/tornadoTH2.png) !important;
}

#tht {
    position: absolute !important;
    left: 700px !important;
    top: 42px !important;
    display: none;
    z-index: 85 !important;
    pointer-events: none !important;
}
.thtDigit {
    position: absolute !important;
    background-image: url('/static/images/turn_timerTH.png') !important;
    background-repeat: no-repeat !important;
}
#thtDigit1 { width: 28px !important; height: 45px !important; }
#thtDigit2 { left: 30px !important; width: 28px !important; height: 45px !important; }
#thtDigitD { left: 60px !important; top: 39px !important; width: 6px !important; height: 6px !important; background-position: -180px -68px !important; }
#thtDigit3 { left: 68px !important; top: 17px !important; width: 17px !important; height: 28px !important; }
.thtB0 { background-position: 0 0 !important; }
.thtB1 { background-position: -29px 0 !important; }
.thtB2 { background-position: -58px 0 !important; }
.thtB3 { background-position: -87px 0 !important; }
.thtB4 { background-position: -116px 0 !important; }
.thtB5 { background-position: -145px 0 !important; }
.thtB6 { background-position: -174px 0 !important; }
.thtB7 { background-position: -203px 0 !important; }
.thtB8 { background-position: -232px 0 !important; }
.thtB9 { background-position: -261px 0 !important; }
.thtS0 { background-position: 0 -46px !important; }
.thtS1 { background-position: -18px -46px !important; }
.thtS2 { background-position: -36px -46px !important; }
.thtS3 { background-position: -54px -46px !important; }
.thtS4 { background-position: -72px -46px !important; }
.thtS5 { background-position: -90px -46px !important; }
.thtS6 { background-position: -108px -46px !important; }
.thtS7 { background-position: -126px -46px !important; }
.thtS8 { background-position: -144px -46px !important; }
.thtS9 { background-position: -162px -46px !important; }
body.th #turn_timer,
.th #turn_timer {
    display: none !important;
}

body.th #gameUIWalkBG,
.th #gameUIWalkBG {
    z-index: 9996 !important;
    pointer-events: none !important;
}

body.th.ClassicTHWalking #gameUIWalkBG,
body.th #container.ClassicTHWalking #gameUIWalkBG,
.th.ClassicTHWalking #gameUIWalkBG,
.th #container.ClassicTHWalking #gameUIWalkBG {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 169px !important;
    top: 573px !important;
    width: 485px !important;
    height: 26px !important;
    background-position: 0 -1457.5px !important;
    z-index: 9996 !important;
    pointer-events: none !important;
}

body.th #walkBar,
.th #walkBar {
    z-index: 9999 !important;
    pointer-events: none !important;
}

body.th.ClassicTHWalking #walkBar,
body.th #container.ClassicTHWalking #walkBar,
.th.ClassicTHWalking #walkBar,
.th #container.ClassicTHWalking #walkBar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 244px !important;
    top: 582px !important;
    height: 12px !important;
    min-width: 1px !important;
    background-color: #6b8cc6 !important;
    background-position: 0 -1445px !important;
    background-repeat: repeat-x !important;
    z-index: 9997 !important;
    pointer-events: none !important;
}

#classicTHWalkBarFix {
    display: none;
    pointer-events: none
}

body.th.ClassicTHWalking #classicTHWalkBarFix,
body.th #container.ClassicTHWalking #classicTHWalkBarFix,
.th.ClassicTHWalking #classicTHWalkBarFix,
.th #container.ClassicTHWalking #classicTHWalkBarFix {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 244px !important;
    top: 582px !important;
    height: 12px !important;
    min-width: 1px !important;
    background: linear-gradient(to bottom, #a9ffff 0%, #44e6ff 45%, #1299cc 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(0, 40, 80, .8) !important;
    border-radius: 1px !important;
    z-index: 10001 !important;
    pointer-events: none !important;
}

body.th #buttonAllBuddyList1,
body.th #buttonAllBuddyList2,
body.th #buttonAllBuddyList3,
.th #buttonAllBuddyList1,
.th #buttonAllBuddyList2,
.th #buttonAllBuddyList3 {
    position: absolute !important;
    top: 275px !important;
    height: 30px !important;
    background-image: url(/static/images/themes/classicHD/stuff_HD.avif?3) !important;
    background-repeat: no-repeat !important;
    background-size: 1000px 1500px !important;
    transform: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
}

body.th #buttonAllBuddyList1,
.th #buttonAllBuddyList1 {
    left: 582px !important;
    width: 64.5px !important;
    background-position: -785px 0 !important;
}
body.th #buttonAllBuddyList2,
.th #buttonAllBuddyList2,
body.th #buttonAllBuddyList2.BuddyList,
.th #buttonAllBuddyList2.BuddyList,
body.th #buttonAllBuddyList2.Guild,
.th #buttonAllBuddyList2.Guild,
body.th #buttonAllBuddyList2.buttonAllBuddyList2.Guild,
.th #buttonAllBuddyList2.buttonAllBuddyList2.Guild,
body.th #buttonAllBuddyList2.room_item_buddy_tab2.Guild,
.th #buttonAllBuddyList2.room_item_buddy_tab2.Guild {
    left: 646px !important;
    width: 82px !important;
}
body.th #buttonAllBuddyList3,
.th #buttonAllBuddyList3 {
    left: 727px !important;
    width: 70px !important;
}

body.th #buttonAllBuddyList1.BuddyList,
.th #buttonAllBuddyList1.BuddyList {
    width: 64.5px !important;
    background-position: -785px -30.5px !important;
}
body.th #buttonAllBuddyList2.BuddyList,
.th #buttonAllBuddyList2.BuddyList {
    width: 82px !important;
    background-position: -849px -30.5px !important;
}
body.th #buttonAllBuddyList3.BuddyList,
.th #buttonAllBuddyList3.BuddyList {
    width: 70px !important;
    background-position: -930px -30.5px !important;
}

body.th #buttonAllBuddyList1.Guild,
.th #buttonAllBuddyList1.Guild {
    width: 64.5px !important;
    background-position: -785px -61px !important;
}
body.th #buttonAllBuddyList2.Guild,
.th #buttonAllBuddyList2.Guild {
    width: 82px !important;
    background-position: -849px -61px !important;
}
body.th #buttonAllBuddyList3.Guild,
.th #buttonAllBuddyList3.Guild {
    width: 70px !important;
    background-position: -930px -61px !important;
}


body.th #buttonAllBuddyList1.room_item_buddy_tab1,
.th #buttonAllBuddyList1.room_item_buddy_tab1 {
    left: 582px !important;
    width: 64.5px !important;
    background-position: -785px -91.5px !important;
}
body.th #buttonAllBuddyList1.room_item_buddy_tab1.BuddyList,
.th #buttonAllBuddyList1.room_item_buddy_tab1.BuddyList {
    background-position: -785px -122px !important;
}
body.th #buttonAllBuddyList1.room_item_buddy_tab1.Guild,
.th #buttonAllBuddyList1.room_item_buddy_tab1.Guild {
    background-position: -785px -152.5px !important;
}

body.th #roomButtonBack,
body.th #roomButtonBack.light_button {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: auto !important;
    bottom: 5px !important;
    width: 57px !important;
    height: 54px !important;
    background-image: url(/static/images/themes/classicHD/stuff_HD.avif?3) !important;
    background-repeat: no-repeat !important;
    background-size: 1000px 1500px !important;
    background-position: -752px -561.5px !important;
    transform: none !important;
    border-radius: 0 !important;
    z-index: 25 !important;
}

body.th #roomButtonBack:hover,
body.th #roomButtonBack.light_button:hover {
    background-position: -810.5px -561.5px !important;
}

body.th #roomButtonBack:active,
body.th #roomButtonBack.light_button:active {
    background-position: -869px -561.5px !important;
    transform: translateY(1px) !important;
}

body.th #roomButtonBack .ThButtonIcon,
body.th #roomButtonBack .ThButtonText {
    display: none !important;
}


body.th #buttonShopExit,
body.th #buttonShopExit.shopButton,
body.th #buttonShopExit.light_button {
    position: absolute !important;
    left: 14px !important;
    top: 541px !important;
    width: 36px !important;
    height: 50px !important;
    background-image: url(/static/images/themes/classicHD/stuff_HD.avif?3) !important;
    background-repeat: no-repeat !important;
    background-size: 1000px 1500px !important;
    background-position: -747.5px -40.5px !important;
    transform: none !important;
    border-radius: 0 !important;
    z-index: 25 !important;
}

body.th #buttonShopExit:active,
body.th #buttonShopExit.shopButton:active,
body.th #buttonShopExit.light_button:active {
    transform: translateY(1px) !important;
}

body.th #buttonShopExit .ThButtonIcon,
body.th #buttonShopExit .ThButtonText {
    display: none !important;
}


body.th #thslot0.visible, body.th #thslot1.visible, body.th #thslot2.visible, body.th #thslot3.visible,
body.th #thslot4.visible, body.th #thslot5.visible, body.th #thslot6.visible, body.th #thslot7.visible,
.th #thslot0.visible, .th #thslot1.visible, .th #thslot2.visible, .th #thslot3.visible,
.th #thslot4.visible, .th #thslot5.visible, .th #thslot6.visible, .th #thslot7.visible {
    display: block !important;
    pointer-events: none !important;
}

/* Ranking de temporada en slots de sala TH — misma altura que el nick */
body.th .roomPlayerRank,
.th .roomPlayerRank {
    position: absolute !important;
    top: auto !important;
    bottom: 5px !important;
    left: 2px !important;
    right: auto !important;
    width: auto !important;
    max-width: 54px !important;
    height: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    z-index: 32 !important;
    overflow: visible !important;
    pointer-events: none !important;
}

body.th .roomPlayerRank .rank,
.th .roomPlayerRank .rank {
    position: relative !important;
    flex: 0 0 25px !important;
    width: 25px !important;
    height: 15px !important;
    display: inline-block !important;
    overflow: visible !important;
    vertical-align: middle !important;
    background-size: 1000px 1500px !important;
}

body.th .roomPlayerRank .seasonRankBadge,
.th .roomPlayerRank .seasonRankBadge {
    position: relative !important;
    flex: 0 0 25px !important;
    width: 25px !important;
    height: 15px !important;
    display: inline-block !important;
    overflow: visible !important;
    vertical-align: middle !important;
    background-size: 25px 15px !important;
}

body.th .roomPlayerName,
.th .roomPlayerName {
    top: auto !important;
    bottom: 5px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 15px !important;
    max-height: 15px !important;
    line-height: 15px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
    display: flex !important;
    align-items: flex-start !important;
    z-index: 31 !important;
    box-sizing: border-box !important;
}

body.th .playerInRoom:not(.hasSeasonRank) .roomPlayerName,
.th .playerInRoom:not(.hasSeasonRank) .roomPlayerName,
body.th .playerInRoom.SideB:not(.hasSeasonRank) .roomPlayerName,
.th .playerInRoom.SideB:not(.hasSeasonRank) .roomPlayerName {
    padding-left: 27px !important;
    padding-right: 3px !important;
}

body.th .playerInRoom.hasSeasonRank .roomPlayerName,
.th .playerInRoom.hasSeasonRank .roomPlayerName,
body.th .playerInRoom.SideB.hasSeasonRank .roomPlayerName,
.th .playerInRoom.SideB.hasSeasonRank .roomPlayerName {
    padding-left: 56px !important;
    padding-right: 3px !important;
}

body.th .SideB .roomPlayerName,
.th .SideB .roomPlayerName {
    text-align: left !important;
}

body.th .SideB .roomPlayerRank,
.th .SideB .roomPlayerRank {
    left: 2px !important;
    right: auto !important;
    justify-content: flex-start !important;
}

body.th .roomSeasonRank,
.th .roomSeasonRank {
    margin: 0 !important;
    top: 0 !important;
    left: auto !important;
    position: relative !important;
    align-self: center !important;
    width: 25px !important;
    height: 15px !important;
    background-size: 25px 15px !important;
    background-position: center center !important;
}

body.th #mySeasonRank,
.th #mySeasonRank {
    left: 619px !important;
    top: 97px !important;
    z-index: 35 !important;
    width: 25px !important;
    height: 15px !important;
}

/* Misma holgura de 2px entre ranks que el lobby: 25 + 2 + 25 */
body.th .playerListSeasonRank,
.th .playerListSeasonRank {
    left: 27px !important;
    top: 0 !important;
    width: 25px !important;
    height: 15px !important;
}

body.th #channelPlayersListHtml .playerListName,
.th #channelPlayersListHtml .playerListName {
    left: 27px !important;
}

body.th #channelPlayersListHtml .playerListItem.hasSeasonRank .playerListName,
.th #channelPlayersListHtml .playerListItem.hasSeasonRank .playerListName {
    left: 56px !important;
}

body.th .turnSeasonRank,
.th .turnSeasonRank {
    left: 40px !important;
    top: 0 !important;
    width: 25px !important;
    height: 15px !important;
}

body.th .turnHasSeasonRank .turn_line_name,
.th .turnHasSeasonRank .turn_line_name {
    left: 69px !important;
    width: 92px !important;
}

body.th #roomButtonStart,
body.th #roomButtonReady,
.th #roomButtonStart,
.th #roomButtonReady {
    width: 96px !important;
    height: 85px !important;
    z-index: 20 !important;
}


#shop_buy_dialog.eventBuy .buy_option {
    width: 93px;
}

#shop_buy_dialog.eventBuy #buy_cash_week {
    left: 87px;
    top: 234px;
}

#shop_buy_dialog.eventBuy #buy_cash_month {
    left: 183px;
    top: 234px;
}

#shop_buy_dialog.eventBuy #buy_cash_perm {
    left: 279px;
    top: 234px;
}

#shop_buy_dialog.eventBuy #buy_gold_week {
    left: 87px;
    top: 264px;
}

#shop_buy_dialog.eventBuy #buy_gold_month {
    left: 183px;
    top: 264px;
}

#shop_buy_dialog.eventBuy #buy_gold_perm {
    left: 279px;
    top: 264px;
}

.eventBuyBtn .Text {
    color: #8ef58e;
}

#shop_buy_dialog.eventBuy #buy_gold_perm.eventBuyBtn.buy_btn {
    border: 2px solid #555;
    border-radius: 4px;
    padding: 2px;
    background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
    width: 83px !important;
    transform: translateY(-50%);
    margin-top: 5px;
    line-height: 11px;
}

#buttonShopEvent .shotBtnText {
    bottom: -4px;
}

#shopScreen.eventShop #shop_my_event_points {
    display: block;
}

#shopScreen.eventShop #shop_my_cash {
    top: 141px;
}

#shopScreen.eventShop #shop_my_gold {
    top: 153px;
}

#shop_pack_card {
    box-shadow: inset 0 0 0 2px #ffd273;
    border-radius: 6px;
}

.shop_pack_icon {
    position: absolute;
    left: 0;
    right: 0;
    top: 34px;
    text-align: center;
    font-size: 42px;
    line-height: 46px;
}

.shop_pack_amount {
    position: absolute;
    left: 0;
    right: 0;
    top: 82px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #8ef58e;
    text-shadow: 1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
}

#shop_my_event_points {
    position: absolute;
    right: 612px;
    top: 170px;
    width: 160px;
    height: 12px;
    color: #8ef58e;
    text-align: right;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    display: none;
}

.shotBtnText {
    position: absolute;
    font-size: 10px;
    white-space: nowrap;
    transform: translateX(-50%);
}

#shop_buy_dialog.eventBuy #buy_gold_perm.eventBuyBtn.buy_btn:active {
    transform: translateY(-45%);
}

#shop_buy_dialog.eventBuy #buy_gold_perm.eventBuyBtn .Text {
    color: #8ef58e;
    font-size: 10px;
    line-height: 11px;
    white-space: normal;
}

#shop_buy_dialog.eventBuy #buy_gold_perm.eventBuyBtn .Alt {
    color: #8ef58e;
}


#buttonShopEvent {
    position: absolute;
    left: 662px;
    top: 542px;
    width: 57px;
    height: 31px;
    text-align: center;
    background-image: none !important;
    z-index: 20;
}

#buttonShopVip {
    position: absolute;
    left: 732px;
    top: 542px;
    width: 57px;
    height: 31px;
    text-align: center;
    background-image: none !important;
    z-index: 20;
    overflow: visible;
}

#buttonShopVip .AvNotif {
    right: 3px;
}

#buttonShopVip .shotBtnText {
    left: 50%;
    bottom: -4px;
}

.shopVipIcon {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    background: url(/static/images/insignia_vip.png) center / contain no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9));
}

#buttonShopEvent .AvNotif {
    right: 3px;
}

#buttonShopEvent .shotBtnText {
    left: 50%;
    bottom: -4px;
}

.shopEventIcon {
    font-size: 22px;
    text-align: center;
    line-height: 31px;
}

.shopButtonHidden {
    display: none !important;
}



#channelPlayersListHtml .playerListItem:hover,
#channelPlayersListHtml .playerListItem.playerListItemSelected {
    background-color: rgba(245, 245, 220, .35);
}

#tagHud {
    display: none;
    position: absolute;
    right: 11px;
    top: 12px;
    width: 106px;
    height: 50px;
    z-index: 40;
    pointer-events: auto
}

#btnTag {
    position: absolute;
    left: -9px;
    top: 7px;
    width: 39px;
    height: 36px;
    background-image: url(/static/images/tagS2.png);
    background-repeat: no-repeat;
    pointer-events: auto;
    touch-action: manipulation
}




#tagHudMobile {
    position: absolute;
    right: 4px;
    top: 2px;
    width: 54px;
    height: 36px;
    overflow: visible;
    pointer-events: none
}

#tagHudBar {
    position: absolute;
    right: 4px;
    top: 41px;
    width: 54px;
    height: 5px;
    background: #000;
    border: 1px solid #fff;
    font-size: 0;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none
}

#tagHudBarHP,
#tagHudBarShield {
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: top
}

#tagHudBarHP {
    background: #63b64a
}

#tagHudBarShield {
    background: #0060ff
}

.th #tagHud {
    top: 550px
}


#roomMobileSelect.circularMobilePicker,
.th #roomMobileSelect.circularMobilePicker {
    position: absolute;
    left: 124px;
    top: 5px;
    width: 551px;
    height: 560px;
    padding: 0;
    z-index: 150;
    display: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent !important;
    background-image: url(/static/images/themes/season3/ready_back2.png) !important;
    background-repeat: no-repeat !important;
    background-position: -424px 0 !important;
    box-sizing: border-box;
}

#roomMobileSelect.circularMobilePicker > .Spacer {
    display: none !important;
}

#roomMobilesList {
    position: absolute;
    left: 0;
    top: 0;
    width: 551px;
    height: 408px;
}

#roomMobileButton {
    position: absolute;
    top: 197px;
    left: 242px;
    width: 77px;
    height: 77px;
    z-index: 12;
}

#roomMobileButton .buttonRareMobile {
    position: absolute;
    left: 0;
    top: 0;
    width: 77px;
    height: 77px;
    display: none;
    cursor: pointer;
    background-image: url(/static/images/themes/season3/ready_back2.png) !important;
    background-repeat: no-repeat !important;
}

#buttonTypeBio {
    background-position: -976px -1px;
}
#buttonTypeBio:hover {
    background-position: -1054px -1px;
}
#buttonTypeBio:active {
    background-position: -1132px -1px;
}

#buttonTypeMech {
    background-position: -976px -79px;
}
#buttonTypeMech:hover {
    background-position: -1054px -79px;
}
#buttonTypeMech:active {
    background-position: -1132px -79px;
}

#buttonTypePush {
    background-position: -976px -157px;
}
#buttonTypePush:hover {
    background-position: -1054px -157px;
}
#buttonTypePush:active {
    background-position: -1132px -157px;
}

#buttonTypeRandom {
    background-position: -976px -235px;
}
#buttonTypeRandom:hover {
    background-position: -1054px -235px;
}
#buttonTypeRandom:active {
    background-position: -1132px -235px;
}

#buttonTypeShield {
    background-position: -976px -313px;
}
#buttonTypeShield:hover {
    background-position: -1054px -313px;
}
#buttonTypeShield:active {
    background-position: -1132px -313px;
}

#roomMobileCategoryLabel {
    position: absolute;
    left: -27px;
    top: 78px;
    width: 132px;
    color: #fff6b8;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000;
    pointer-events: none;
}

#roomMobileSelect.circularMobilePicker .mobile__selector-item {
    position: absolute;
    float: none;
    width: 65px;
    height: 60px;
    margin: 0;
    padding: 0;
    border: 2px solid rgba(181, 226, 220, .35);
    border-radius: 9px;
    box-sizing: border-box;
    overflow: visible;
    cursor: pointer;
    background: rgba(4, 31, 50, .38);
    box-shadow: inset 0 0 7px rgba(136, 232, 255, .16);
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

#roomMobileSelect.circularMobilePicker .mobile__selector-item:hover {
    z-index: 20;
    transform: scale(1.08);
    border-color: #fff59a;
    background: rgba(46, 68, 66, .64);
    box-shadow: 0 0 9px rgba(255, 244, 109, .75), inset 0 0 7px rgba(255, 255, 255, .3);
}

#roomMobileSelect.circularMobilePicker .mobile__selector-item.mobileSelectorSelected {
    z-index: 19;
    border-color: #7ff8ff;
    background: rgba(0, 92, 117, .68);
    box-shadow: 0 0 10px rgba(95, 237, 255, .95), inset 0 0 8px rgba(255, 255, 255, .35);
}

#roomMobileSelect.circularMobilePicker .mobile__selector-item.tagPicked1 {
    border-color: #3b8cff;
    background: rgba(0, 45, 95, .82);
    box-shadow: 0 0 10px rgba(46, 139, 255, .95);
}

#roomMobileSelect.circularMobilePicker .mobile__selector-item.tagPicked2 {
    border-color: #ff4b4b;
    background: rgba(95, 0, 0, .82);
    box-shadow: 0 0 10px rgba(255, 59, 59, .95);
}

#roomMobileSelect.circularMobilePicker .mobile__selector-item.tagPicked12 {
    border-color: #b66cff;
    background: rgba(54, 0, 82, .82);
    box-shadow: 0 0 10px rgba(174, 85, 255, .95);
}

#roomMobileSelect.circularMobilePicker .mobile__selector-item .AniObject {
    pointer-events: none;
}

#roomMobileSelect.circularMobilePicker .mobileName {
    position: absolute;
    left: -22px;
    top: 62px;
    width: 105px;
    height: 18px;
    overflow: hidden;
    color: #fff5a0;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

#roomMobileSelect.circularMobilePicker .mobile__selector-item .Alt {
    position: absolute;
    right: -5px;
    top: -6px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    background: rgba(0, 20, 35, .86);
    border: 1px solid rgba(255, 255, 255, .6);
    pointer-events: none;
}

.mobile___selector-item-0 {
    top: 89px;
    left: 242px;
}
.mobile___selector-item-1 {
    top: 118px;
    left: 334px;
}
.mobile___selector-item-2 {
    top: 156px;
    left: 424px;
}
.mobile___selector-item-3 {
    top: 252px;
    left: 424px;
}
.mobile___selector-item-4 {
    top: 289px;
    left: 334px;
}
.mobile___selector-item-5 {
    top: 320px;
    left: 242px;
}
.mobile___selector-item-6 {
    top: 289px;
    left: 151px;
}
.mobile___selector-item-7 {
    top: 252px;
    left: 60px;
}
.mobile___selector-item-8 {
    top: 156px;
    left: 60px;
}
.mobile___selector-item-9 {
    top: 118px;
    left: 151px;
}

#roomMobilePreview {
    position: absolute;
    left: 61px;
    bottom: 80px;
    scale: 1.2;
    width: 100px;
    height: 77px;
    overflow: visible;
    background: transparent !important;
}

#roomMobilePreview .AniObject {
    pointer-events: none;
}

#roomMobilePreviewName {
    display: none !important;
}

#roomMobileDescription {
    position: absolute;
    top: 404px;
    right: 50px;
    width: 286px;
    height: 54px;
    overflow: visible;
    box-sizing: border-box;
}

#roomMobileDescription .descriptionMobil {
    width: 100%;
    height: 100%;
    padding: 0;
    color: #e3fbf4;
    font-size: 13px;
    line-height: normal;
    text-align: left;
    box-sizing: border-box;
}

#roomMobileDescription .mobileDescriptionText {
    display: none !important;
}

/* DBLATINO - tarjeta compacta de progreso del carro seleccionado. */
#roomMobileDescription .mobileLevelCard {
    --ml-accent: #7edcff;
    --ml-accent2: #d8f7ff;
    position: relative;
    width: 100%;
    height: 50px;
    padding: 4px 8px 5px;
    overflow: hidden;
    box-sizing: border-box;

}

#roomMobileDescription .mobileLevelCard::before {
    content: "";
    position: absolute;
    left: -18%;
    top: -22px;
    width: 70%;
    height: 44px;
    pointer-events: none;
    transform: skewX(-28deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

#roomMobileDescription .mobileLevelCard::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--ml-accent), transparent);
    opacity: .86;
}

#roomMobileDescription .mobileLevelCardTop {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 19px;
}

#roomMobileDescription .mobileDescriptionName {
    min-width: 0;
    max-width: 172px;
    margin: 0;
    overflow: hidden;
    color: #fff5a0;
    font-size: 15px;
    font-weight: 800;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: -1px 0 2px #001525, 0 2px 2px #001525, 1px 0 2px #001525, 0 -1px 2px #001525;
}

#roomMobileDescription .mobileLevelTitle {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;

    border: 1px solid #8fd8ff;
    border-radius: 6px;

    background: linear-gradient(
        to bottom,
        #49b7ea,
        #2b8fd0
    );

    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 15px;

   text-shadow: -1px 0 2px #001525, 0 2px 2px #001525, 1px 0 2px #001525, 0 -1px 2px #001525;
}

#roomMobileDescription .mobileLevelCardScore {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 14px;
    margin-top: 0;
}

#roomMobileDescription .mobileLevelPoints {
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1px;
    text-shadow: -1px 0 2px #001525, 0 2px 2px #001525, 1px 0 2px #001525, 0 -1px 2px #001525;
}

#roomMobileDescription .mobileLevelPoints small {
    color: #d8f7ff;
    font-size: 10px;
    font-weight: 700;
}

#roomMobileDescription .mobileLevelPercent {
    min-width: 29px;
    color: var(--ml-accent2);
    font-size: 10px;
    font-weight: 800;
    text-align: right;
    text-shadow: -1px 0 2px #001525, 0 2px 2px #001525, 1px 0 2px #001525, 0 -1px 2px #001525;
}

#roomMobileDescription .mobileLevelProgress {
    position: relative;
    z-index: 2;
    height: 5px;
    margin-top: 1px;
    overflow: hidden;
    border: 1px solid rgba(176,226,255,.68);
    border-radius: 4px;
    background: rgba(0,24,59,.80);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.72), 0 1px 0 rgba(255,255,255,.12);
}

#roomMobileDescription .mobileLevelProgress i {
    position: relative;
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ml-accent), var(--ml-accent2));
    box-shadow: 0 0 7px var(--ml-accent), inset 0 1px 0 rgba(255,255,255,.52);
    transition: width .22s ease;
}

#roomMobileDescription .mobileLevelProgress i::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 45%;
    background: rgba(255,255,255,.28);
}

#roomMobileDescription .mobileLevelCard0 { --ml-accent:#7babc8; --ml-accent2:#e1f3ff; }
#roomMobileDescription .mobileLevelCard1 { --ml-accent:#e8f5ff; --ml-accent2:#ffffff; }
#roomMobileDescription .mobileLevelCard2 { --ml-accent:#ff8a24; --ml-accent2:#ffd28c; }
#roomMobileDescription .mobileLevelCard3 { --ml-accent:#35d766; --ml-accent2:#c9ffd8; }

#roomMobileDescription .mobileLevelCard5 { --ml-accent:#b64dff; --ml-accent2:#f0c9ff; }

#roomMobileDescription .mobileLevelCard4 .mobileLevelTitle {
    color:#fff2a0;
    background:linear-gradient(180deg, rgba(115,78,0,.98), rgba(45,35,0,.98));
}

#roomMobileDescription .mobileLevelCard5 .mobileLevelTitle {
    color:#f5dcff;
    background:linear-gradient(180deg, rgba(89,28,139,.98), rgba(38,10,72,.98));
}

#roomMobileDescription .mobileLevelCardRandom {
    --ml-accent:#69e9ff;
    --ml-accent2:#dffbff;
}

#roomMobileDescription .mobileLevelRandomBadge {
    display:inline-block;
    margin-left:8px;
    padding:2px 7px;
    border:1px solid rgba(225,251,255,.8);
    border-radius:8px;
    color:#eaffff;
    font-size:10px;
    font-weight:800;
    line-height:14px;
    background:rgba(0,37,62,.82);
}

#roomMobileDescription .mobileLevelRandomText {
    position:relative;
    z-index:2;
    margin-top:5px;
    color:#d9f7ff;
    font-size:11px;
    line-height:14px;
}

.th #roomMobileSelectOk,
.th #roomMobileSelectCancel,
#roomMobileSelect.circularMobilePicker #roomMobileSelectOk,
#roomMobileSelect.circularMobilePicker #roomMobileSelectCancel {
    position: absolute !important;
    top: 517px !important;
    bottom: auto !important;
    width: 84px !important;
    height: 26px !important;
    margin: 0 !important;
    transform: none !important;
    cursor: pointer;
    background-image: url(/static/images/themes/season3/ready_back2.png) !important;
    background-repeat: no-repeat !important;
}

.th #roomMobileSelectOk,
#roomMobileSelect.circularMobilePicker #roomMobileSelectOk {
    left: 343px !important;
    right: auto !important;
}

.th #roomMobileSelectCancel,
#roomMobileSelect.circularMobilePicker #roomMobileSelectCancel {
    left: 436px !important;
    right: auto !important;
}

.th .popup_mobile_ok,
#roomMobileSelect.circularMobilePicker .popup_mobile_ok {
    background-position: -1022px -619px !important;
}
.th .popup_mobile_ok:hover,
#roomMobileSelect.circularMobilePicker .popup_mobile_ok:hover {
    background-position: -1022px -646px !important;
}
.th .popup_mobile_ok:active,
#roomMobileSelect.circularMobilePicker .popup_mobile_ok:active {
    background-position: -1022px -673px !important;
}

.th .popup_mobile_cancel,
#roomMobileSelect.circularMobilePicker .popup_mobile_cancel {
    background-position: -1107px -619px !important;
}
.th .popup_mobile_cancel:hover,
#roomMobileSelect.circularMobilePicker .popup_mobile_cancel:hover {
    background-position: -1107px -646px !important;
}
.th .popup_mobile_cancel:active,
#roomMobileSelect.circularMobilePicker .popup_mobile_cancel:active {
    background-position: -1107px -673px !important;
}

#roomMobileSelect.circularMobilePicker #tagSlotHeader {
    top: 10px;
    left: 55px;
    width: 440px;
    z-index: 40;
}

#roomMobileSelect.circularMobilePicker #tagSlotHeader .tagSlotHint {
    margin-bottom: 3px;
    color: #ffe0e0;
    text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000;
}

#roomMobileSelect.circularMobilePicker #tagSlotHeader .tagSlotChip {
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 8px;
}

#roomMobileSelect.circularMobilePicker .mobileSelectBtn .tagSlotBadge {
    top: -8px;
    left: -8px;
}

.mobileSelectorEmpty {
    position: absolute;
    left: 90px;
    top: 195px;
    width: 371px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000;
}

.seasonRankBadge {
    display: none !important;
    position: relative;
    width: 25px;
    height: 15px;
    vertical-align: middle;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    background-color: transparent;
    z-index: 3
}



.seasonRankLoading {
    opacity: .42;
    background: transparent !important
}

.playerListSeasonRank {
    position: absolute;
    left: 27px;
    top: 0
}

#channelPlayersListHtml .playerListName {
    left: 27px;
    right: 0
}

#channelPlayersListHtml .playerListItem.hasSeasonRank .playerListName {
    left: 56px;
}

.roomSeasonRank {
    margin: 0;
    top: 0
}

.gameSeasonRank {
    position: absolute !important
}

.turnSeasonRank {
    position: absolute;
    left: 40px;
    top: 0
}

.turnHasSeasonRank .turn_line_name {
    left: 69px;
    width: 92px
}

#mySeasonRank {
    position: absolute;
    left: 619px;
    top: 97px;
    z-index: 35;
    width: 25px;
    height: 15px;
}

#mySeasonGP {
    position: absolute;
    right: 84px;
    top: 263px;
    color: white;
    font-size: 8px;
    font-weight: 700;
    z-index: 9;
}

#ranking_btn_season,
#ranking_btn_season_ranks,
#rankEventSeason {
    display: none !important;
}

#ranking_btn_season {
    background: lime
}

#ranking_btn_season.selected {
    background: lime;
}

.seasonRankingHeader {
    margin: 2px 4px 4px;
    padding: 5px;
    text-align: center;
    background: linear-gradient(180deg, rgba(0, 151, 180, .72), rgba(0, 74, 104, .78));
    border: 1px solid rgba(111, 236, 255, .9);
    border-radius: 4px;
    color: #fff
}

.seasonRankingHeader button {
    margin-top: 4px
}

.seasonHistory {
    padding: 6px
}

.seasonHistory h3 {
    margin: 2px 0 8px;
    text-align: center;
    color: white;
}

.seasonHistoryRow {
    position: relative;
    min-height: 38px;
    margin-bottom: 5px;
    padding: 5px 4px 5px 38px;
    background: rgba(0, 76, 105, .7);
    border: 1px solid rgba(99, 224, 255, .5);
    border-radius: 4px
}

.seasonHistoryRow > .seasonRankBadge {
    position: absolute;
    left: 6px;
    top: 10px
}

.seasonHistoryText {
    line-height: 16px
}

.seasonHistoryEmpty,
.seasonHistoryLoading {
    padding: 15px;
    text-align: center
}

#btnBackSeasonRanking {
    display: none !important;
    margin: 8px auto
}


#filter_score,
#filter_jewel,
#filter_tag {
    position: absolute;
    width: 44px;
    height: 41px
}

/* Sprites SD de los tres filtros. No mover left/top: eso es de style.css (tag 237, score 287). */
#filter_score {
    background-position: -168px -303px;
    filter: hue-rotate(165deg)
}

#filter_jewel {
    background-position: -258px -303px;
    filter: hue-rotate(280deg)
}

#filter_tag {
    background-position: -258px -303px;
    filter: hue-rotate(340deg) saturate(2.2)
}

/* Sprites HD de los tres filtros. */
.HD #filter_score {
    background-position: -302.5px -63.5px;
    width: 43px;
    height: 41px;
    filter: none
}

.HD #filter_jewel {
    background-position: -257.5px -63.5px;
    width: 43px;
    height: 41px;
    filter: hue-rotate(280deg)
}

.HD #filter_tag {
    background-position: -257.5px -63.5px;
    width: 43px;
    height: 41px;
    filter: hue-rotate(340deg) saturate(2.2)
}

/* Cajitas de modo: más chicas para que quepan las 7 con badges NEW */
body.th #filter_normal,
body.th #filter_boss,
body.th #filter_tag,
body.th #filter_score,
body.th #filter_battle_royale,
body.th #filter_jewel,
body.th #filter_survival,
.th #filter_normal,
.th #filter_boss,
.th #filter_tag,
.th #filter_score,
.th #filter_battle_royale,
.th #filter_jewel,
.th #filter_survival {
    display: block !important;
    position: absolute !important;
    top: 329px !important;
    width: 43px !important;
    height: 41px !important;
    transform: scale(0.68) !important;
    transform-origin: top left !important;
    z-index: 30 !important
}
body.th #filter_normal, .th #filter_normal { left: 372px !important; z-index: 30 !important; }
body.th #filter_boss, .th #filter_boss { left: 401px !important; z-index: 31 !important; }
body.th #filter_tag, .th #filter_tag { left: 430px !important; z-index: 32 !important; }
body.th #filter_score, .th #filter_score { left: 459px !important; z-index: 33 !important; }
body.th #filter_battle_royale, .th #filter_battle_royale { left: 488px !important; z-index: 34 !important; }
body.th #filter_jewel, .th #filter_jewel { left: 517px !important; z-index: 35 !important; }
body.th #filter_survival, .th #filter_survival { left: 546px !important; z-index: 36 !important; }

body.th #filter_normal.light_button:active,
body.th #filter_boss.light_button:active,
body.th #filter_tag.light_button:active,
body.th #filter_score.light_button:active,
body.th #filter_battle_royale.light_button:active,
body.th #filter_jewel.light_button:active,
body.th #filter_survival.light_button:active {
    transform: translateY(1px) scale(0.68) !important
}

.th .new-mode-badge,
body.th .new-mode-badge {
    display: none !important
}

#container.SpecialLobby .FilterNewBadge,
#container.SpecialLobby .new-mode-badge,
#container.SpecialLobby #filter_boss_new,
#container.SpecialLobby #filter_tag_new,
#container.SpecialLobby #filter_battle_royale_new,
#container.SpecialLobby #filter_jewel_new,
#container.SpecialLobby #filter_survival_new,
#container.SpecialLobby #roomsList,
#container.SpecialLobby .room,
#container.SpecialLobby .rooms8,
#container.SpecialLobby #roomsPage,
#container.SpecialLobby #buttonRoomsListUp,
#container.SpecialLobby #buttonRoomsListDown {
    display: none !important
}

body.th #filter_boss_new,
body.th #filter_tag_new,
body.th #filter_battle_royale_new,
body.th #filter_jewel_new,
body.th #filter_survival_new {
    display: block !important;
    top: 324px !important;
    font-size: 7px !important;
    padding: 1px 3px !important;
    z-index: 40 !important
}
body.th #filter_boss_new { left: 415px !important; }
body.th #filter_tag_new { left: 444px !important; }
body.th #filter_battle_royale_new { left: 502px !important; }
body.th #filter_jewel_new { left: 531px !important; }
body.th #filter_survival_new { left: 560px !important; }

/* Etiqueta roja NEW para Jewel y TAG. */
.FilterNewBadge {
    position: absolute;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: bold;
    line-height: 1;
    background: #ff2d2d;
    text-align: center;
    white-space: nowrap;
    border-radius: 6px;
    padding: 2px 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .7);
    transform: translateX(-50%);
    pointer-events: none !important;
    z-index: 20
}

.HD:not(.th) #filter_jewel_new {
    left: 409px !important;
    top: 71px !important;
    display: block !important;
    z-index: 21 !important
}

.HD:not(.th) #filter_tag_new {
    left: 259px !important;
    top: 71px !important;
    display: block !important;
    z-index: 21 !important
}

.th #filter_jewel_new {
    left: 531px !important;
    top: 324px !important;
    z-index: 40 !important
}

.th #filter_tag_new {
    left: 444px !important;
    top: 324px !important;
    z-index: 40 !important
}

/* Brillo amarillo cuando el filtro está seleccionado. */
#filter_score.selectedFilter {
    filter: hue-rotate(165deg) drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}

.HD #filter_score.selectedFilter {
    filter: drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}

#filter_jewel.selectedFilter,
.HD #filter_jewel.selectedFilter {
    filter: hue-rotate(280deg) drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}

#filter_tag.selectedFilter,
.HD #filter_tag.selectedFilter {
    filter: hue-rotate(340deg) saturate(2.2) drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}

/* Hover normal y hover seleccionado sin perder el tono del icono. */
#filter_score.light_button:hover {
    filter: brightness(1.3) hue-rotate(165deg)
}

.HD #filter_score.light_button:hover {
    filter: brightness(1.3)
}

#filter_jewel.light_button:hover,
.HD #filter_jewel.light_button:hover {
    filter: brightness(1.3) hue-rotate(280deg)
}

#filter_tag.light_button:hover,
.HD #filter_tag.light_button:hover {
    filter: brightness(1.3) hue-rotate(340deg) saturate(2.2)
}

#filter_score.selectedFilter.light_button:hover {
    filter: brightness(1.3) hue-rotate(165deg) drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}

.HD #filter_score.selectedFilter.light_button:hover {
    filter: brightness(1.3) drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}

#filter_jewel.selectedFilter.light_button:hover,
.HD #filter_jewel.selectedFilter.light_button:hover {
    filter: brightness(1.3) hue-rotate(280deg) drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}

#filter_tag.selectedFilter.light_button:hover,
.HD #filter_tag.selectedFilter.light_button:hover {
    filter: brightness(1.3) hue-rotate(340deg) saturate(2.2) drop-shadow(0 0 4px yellow) drop-shadow(0 0 4px yellow)
}


#filter_friends_count,
#filter_guild_count {
    right: 2px
}

.roomBuddy {
    left: 90px;
    top: 33px;
    width: 64px;
    height: 46px;
    pointer-events: none
}

.roomGuildMember {
    left: 112px;
    top: 33px;
    width: 63px;
    height: 46px;
    pointer-events: none
}

.HD .roomBuddy,
.HD .roomGuildMember {
    width: 44px;
    height: 41px
}

.th .roomBuddy,
.th .roomGuildMember {
    top: 23px
}

.roomExtraInfoFriend .playerListName {
    color: #ffd23f
}

.roomExtraInfoGuild .playerListName {
    color: #6ec6ff
}

.roomExtraInfoFriend.roomExtraInfoGuild .playerListName {
    color: #ffd23f;
    text-shadow: 0 0 3px #6ec6ff, 1px 1px 1px #000
}


#turn_line8 .turn_line_number,
#turn_line9 .turn_line_number {
    background-image: none;
}

#score8,
#score9 {
    top: 535px;
}

#score9 {
    left: 295px;
}

.HD #score8 {
    left: 126px;
}

.HD #score9 {
    left: 421px;
}

#game_over.ffaScoreMode {
    background-color: rgba(5, 8, 18, .91);
}

#game_over.ffaScoreMode .score {
    position: absolute;
    left: 82px !important;
    transform: scale(.72);
    transform-origin: top left;
    border: 2px solid transparent;
    border-radius: 10px;
    box-sizing: border-box;
}

#game_over.ffaScoreMode #score1,
#game_over.ffaScoreMode #score3,
#game_over.ffaScoreMode #score5,
#game_over.ffaScoreMode #score7,
#game_over.ffaScoreMode #score9 {
    left: 430px !important;
}





#game_over.ffaScoreMode #score0,
#game_over.ffaScoreMode #score1 {
    top: 158px !important;
}

#game_over.ffaScoreMode #score2,
#game_over.ffaScoreMode #score3 {
    top: 251px !important;
}

#game_over.ffaScoreMode #score4,
#game_over.ffaScoreMode #score5 {
    top: 344px !important;
}

#game_over.ffaScoreMode #score6,
#game_over.ffaScoreMode #score7 {
    top: 437px !important;
}

#game_over.ffaScoreMode #score8,
#game_over.ffaScoreMode #score9 {
    top: 530px !important;
}

.HD #game_over.ffaScoreMode .score {
    left: 112px !important;
    transform: scale(.9);
}

.HD #game_over.ffaScoreMode #score1,
.HD #game_over.ffaScoreMode #score3,
.HD #game_over.ffaScoreMode #score5,
.HD #game_over.ffaScoreMode #score7,
.HD #game_over.ffaScoreMode #score9 {
    left: 430px !important;
}

#game_over.ffaScoreMode .score.ffaWinner {
    filter: brightness(1.18);
}

#game_over.ffaScoreMode .score.ffaWinner::after {
    content: "GANADOR";
    position: absolute;
    top: -10px;
    left: 50px;
    padding: 2px 6px;
    border-radius: 7px;
    background: rgba(255, 215, 0, .92);
    color: #271b00;
    font: 700 10px Arial, sans-serif;
    text-shadow: none;
    z-index: 20;
}

#container.Auto #fastLobbyMsg {
    pointer-events: none;
}


.turn_line_number_ffa_foe {
    background-color: #ff6b6b
}

.turn_line_number_ffa_me {
    background-color: #6bb7ff
}

.turn_line_name_ffa_foe {
    color: #ff6b6b
}

.turn_line_name_ffa_me {
    color: #6bb7ff
}

.emoticonBtn {
    position: absolute;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transform: scale(.6)
}

.emoticonBtn:active {
    transform: scale(.8)
}

#RoomEmoticonBtn {
    left: 527px;
    top: 570.5px;
    z-index: 120
}

#GameEmoticonBtn {
    left: 217px;
    bottom: 106px
}

.emoticonPicker {
    position: absolute;
    display: none;
    z-index: 200;
    border-radius: 15px;
    background: rgba(0,30,50,.85);
    padding: 6px;
    overflow: hidden
}

#RoomEmoticonPicker {
    left: 63px;
    top: 462px
}

#GameEmoticonPicker {
    left: 14px;
    bottom: 136px
}

.emoticonCooldownBar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 0;
    background: rgba(210,40,40,.3)
}

.emoticonCell {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    float: left;
    margin: 6px;
    cursor: pointer;
    background: rgba(200,200,0,.05);
    border-radius: 5px
}

.emoticonCell:hover {
    background: rgba(200,200,200,.25)
}

.emoticonCell.grayscale {
    cursor: default
}

.emoticonCell.grayscale:hover {
    background: rgba(200,200,0,.05)
}

.emoticonRowBreak {
    clear: both
}


body.winter2026TH #roomNumber {
    left: 47px !important;
    top: 14px !important;
}
body.winter2026TH #roomTitle {
    left: 85px !important;
    top: 11px !important;
    width: 190px !important;
}


body.winter2026TH #roomVoicePanel {
left: 50px;
    top: 43px;
}


body.winter2026TH #roomPass {
    left: 299px !important;
    top: 11px !important;
    width: 57px !important;
}
body.winter2026TH #room_change_title_button {
    left: 366px !important;
    top: 12px !important;
}


body.winter2026TH #room_mode_line {
    display: flex !important;
    position: absolute !important;
    left: 339px !important;
    top: 54px !important;
    width: 118px !important;
    justify-content: space-evenly !important;
    align-items: baseline !important;
}
body.winter2026TH #room_mode_line #room_game_mode,
body.winter2026TH #room_mode_line #room_players {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    flex: none !important;
    white-space: nowrap !important;
}


body.winter2026TH #room_mode_line #room_game_mode,
body.winter2026TH #room_mode_line #room_players {
    left: auto !important;
    top: auto !important;
}
body.winter2026TH #room_map {
    left: 293px !important;
    top: 74px !important;
    transform: scaleX(.71) scaleY(.9) !important;
}
body.winter2026TH #room_options_button {
    left: 421px !important;
    top: 129px !important;
}
body.winter2026TH #RoomRandomTeams {
    left: 323px !important;
    top: 125px !important;
}
body.winter2026TH #room_wind {
    left: 323px !important;
    top: 144px !important;
}
body.winter2026TH #room_avatars {
    left: 323px !important;
    top: 161px !important;
}
body.winter2026TH #room_turn_time {
    left: 323px !important;
    top: 180px !important;
}
body.winter2026TH #RoomWatchers {
    right: auto !important;
    left: 323px !important;
    bottom: 390px !important;
}
body.winter2026TH #RoomEmoticonBtn {
    left: 476px !important;
    top: 354.5px !important;
    z-index: 2;
}
body.winter2026TH #RoomEmoticonPicker {
    left: 13px !important;
    top: 382px !important;
}
body.winter2026TH #RoomS1Disabled {
    left: 448px !important;
    top: 224px !important;
}
body.winter2026TH #roomButtonChangeTeam {
    left: 452px !important;
    top: 302px !important;
}
body.winter2026TH #readyHintTooltip {
    left: 305px !important;
    top: 173px !important;
}
body.winter2026TH #roomButtonMobile {
    left: 314px !important;
    top: 298px !important;
}


body.winter2026TH #itemsSelection.InRoom {
    left: 546px !important;
    top: 363px !important;
    width: 215px !important;
    height: 175px !important;
}


body.winter2026TH #thslot0,
body.winter2026TH #thslot4,
body.winter2026TH #playerInRoom0,
body.winter2026TH #playerInRoom4 {
    left: 37px !important;
}
body.winter2026TH #thslot2,
body.winter2026TH #thslot6,
body.winter2026TH #playerInRoom2,
body.winter2026TH #playerInRoom6 {
    left: 176px !important;
}
body.winter2026TH #thslot1,
body.winter2026TH #thslot5,
body.winter2026TH #playerInRoom1,
body.winter2026TH #playerInRoom5 {
    left: 496px !important;
}
body.winter2026TH #thslot3,
body.winter2026TH #thslot7,
body.winter2026TH #playerInRoom3,
body.winter2026TH #playerInRoom7 {
    left: 635px !important;
}
body.winter2026TH #playerInRoom0,
body.winter2026TH #playerInRoom1,
body.winter2026TH #playerInRoom2,
body.winter2026TH #playerInRoom3 {
    top: 61px !important;
}
body.winter2026TH #playerInRoom4,
body.winter2026TH #playerInRoom5,
body.winter2026TH #playerInRoom6,
body.winter2026TH #playerInRoom7 {
    top: 213px !important;
}
body.winter2026TH .roomPlayerClip {
    width: 127px !important;
    height: 129px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
}
body.winter2026TH .roomPlayerClipInner {
    left: 64px !important;
    right: auto !important;
    top: 109px !important;
    transform: scaleY(1.7) !important;
    transform-origin: 0 0 !important;
}
body.winter2026TH .SideA .roomPlayerMobile,
body.winter2026TH .SideB .roomPlayerMobile {
    left: 64px !important;
    right: auto !important;
    top: 93px !important;
}
body.winter2026TH.HD .roomPlayerMaster,
body.winter2026TH .HD .roomPlayerMaster {
    left: 101px !important;
    top: 96px !important;
}
body.winter2026TH .roomPlayerBalloon {
    bottom: 95px !important;
    left: 30px !important;
    width: max-content !important;
}
body.winter2026TH .roomPlayerBalloonTip {
    bottom: 88px !important;
    left: 50px !important;
}

body.winter2026TH #itemsSelection.InRoom #MissionsBtnRoom {
    top: 185px;
    left: 20px;
}
body.winter2026TH #roomInput {
    left: 71px !important;
    top: 363px !important;
    width: 431px !important;
}
body.winter2026TH #roomChat {
    left: 28px !important;
    top: 387px !important;
    width: 488px !important;
    height: 151px !important;
}
body.winter2026TH #roomBcm {
    left: 38px !important;
    top: 362px !important;
    transform: scaleX(-1) !important;
}
body.winter2026TH #roomChat .overview {
    width: 476px !important;
}

body.winter2026TH .roomPlayerMobile > .thSlot {
    display: block !important;
    position: absolute !important;
    left: -64px !important;
    top: -35px !important;
    width: 127px !important;
    height: 71px !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

body.winter2026TH .playerInRoom:not(.occupied) .roomPlayerMobile > .thSlot {
    display: none !important;
}


.emoticonName {
    position: absolute;
    left: -20px;
    top: 30px;
    width: 80px;
    text-align: center;
    font-size: 9px;
    color: #ff0
}

.emoticonCell .Alt {
    font-size: 10px
}

.th #RoomEmoticonBtn {
    left: 495px;
    top: 354.5px
}

.th #RoomEmoticonPicker {
    left: 13px;
    top: 382px
}

.th #GameEmoticonBtn {
    left: 212px;
    top: 494px;
    bottom: unset
}

.th #GameEmoticonPicker {
    top: 383px;
    bottom: unset
}




#RoomEmoticonBtn,
#GameEmoticonBtn {
    display: block;
    z-index: 220;
    overflow: visible;
    pointer-events: auto;
    color: #fff;
    text-align: center;
    font-family: "Segoe UI Emoji", Arial, sans-serif;
}

#RoomEmoticonPicker,
#GameEmoticonPicker {
    min-width: 520px;
    min-height: 104px;
    box-sizing: content-box;
    pointer-events: auto;
}

.emoticonBtnFallback {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    text-align: center;
    text-shadow: 0 1px 3px #000;
    pointer-events: none;
}

.emoticonAssetReady > .emoticonBtnFallback {
    display: none;
}

.emoticonCell .AniObject,
.emoticonBtn .AniObject {
    pointer-events: none;
}


.survivalEffectBadge{position:absolute;left:-52px;top:-24px;min-width:105px;z-index:8;text-align:center;white-space:nowrap;color:#7ef9ff;font:700 10px Arial,sans-serif;text-shadow:-1px -1px 1px #07102b,1px -1px 1px #07102b,-1px 1px 1px #07102b,1px 1px 1px #07102b,0 0 5px #18d9ff;pointer-events:none}

.survivalShieldAura{display:none;position:absolute;z-index:1;left:-34px;top:-97px;width:126px;height:150px;pointer-events:none;opacity:.96;transform-origin:50% 58%;filter:saturate(1.08);animation:survivalCrystalBreath 2.15s ease-in-out infinite}
.survivalShieldAura>span{position:absolute;display:block;box-sizing:border-box;pointer-events:none}
.survivalShieldGlass,.survivalShieldHex,.survivalShieldShine,.survivalShieldRim,.survivalShieldImpactLayer{inset:7px 8px 8px;border-radius:50%}
.survivalShieldGlass{overflow:hidden;background:radial-gradient(circle at 31% 24%,rgba(255,255,255,.30) 0%,rgba(255,255,255,.09) 15%,rgba(171,247,255,.18) 30%,rgba(78,205,255,.11) 52%,rgba(23,116,216,.06) 72%,rgba(0,33,91,.015) 100%),linear-gradient(to bottom,rgba(255,255,255,.035),rgba(70,229,255,.045) 69%,rgba(57,229,255,.16));box-shadow:inset 0 -12px 21px rgba(58,216,255,.15),inset 0 8px 16px rgba(255,255,255,.08)}
.survivalShieldHex{overflow:hidden;opacity:.52;background-image:linear-gradient(30deg,rgba(215,253,255,.42) 12%,transparent 12.5%,transparent 87%,rgba(215,253,255,.42) 87.5%,rgba(215,253,255,.42)),linear-gradient(150deg,rgba(215,253,255,.42) 12%,transparent 12.5%,transparent 87%,rgba(215,253,255,.42) 87.5%,rgba(215,253,255,.42)),linear-gradient(30deg,rgba(215,253,255,.42) 12%,transparent 12.5%,transparent 87%,rgba(215,253,255,.42) 87.5%,rgba(215,253,255,.42)),linear-gradient(150deg,rgba(215,253,255,.42) 12%,transparent 12.5%,transparent 87%,rgba(215,253,255,.42) 87.5%,rgba(215,253,255,.42)),linear-gradient(60deg,rgba(215,253,255,.29) 25%,transparent 25.5%,transparent 75%,rgba(215,253,255,.29) 75%,rgba(215,253,255,.29));background-position:0 0,0 0,11px 19px,11px 19px,0 0;background-size:22px 38px;mix-blend-mode:screen;animation:survivalCrystalHexPulse 1.8s ease-in-out infinite alternate}
.survivalShieldShine{overflow:hidden;opacity:.56;background:linear-gradient(124deg,transparent 18%,rgba(255,255,255,.03) 38%,rgba(226,255,255,.28) 48%,rgba(102,231,255,.08) 56%,transparent 75%),radial-gradient(circle at 27% 24%,rgba(255,255,255,.34),rgba(255,255,255,0) 25%);mix-blend-mode:screen;animation:survivalCrystalShimmer 3.2s ease-in-out infinite}
.survivalShieldRim{inset:5px 6px 6px;border:2px solid rgba(225,255,255,.94);box-shadow:0 0 7px rgba(255,255,255,.88),0 0 16px rgba(77,225,255,.9),0 0 29px rgba(22,147,255,.48),inset 0 0 10px rgba(170,249,255,.36);opacity:.94}
.survivalShieldRim:before,.survivalShieldRim:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.survivalShieldRim:before{inset:4px;border:1px solid rgba(84,216,255,.78);box-shadow:inset 0 0 8px rgba(91,223,255,.32)}
.survivalShieldRim:after{left:11px;right:11px;top:-4px;height:35%;border-top:2px solid rgba(255,255,255,.96);filter:drop-shadow(0 0 5px rgba(177,249,255,.9))}
.survivalShieldCrystal,.survivalShieldNode{background:linear-gradient(135deg,#fff 0%,#c8fbff 28%,#61ddff 62%,#126be5 100%);border:1px solid rgba(236,255,255,.95);box-shadow:0 0 8px rgba(92,226,255,.95),0 0 15px rgba(35,153,255,.6);transform:rotate(45deg)}
.survivalShieldCrystal:before,.survivalShieldNode:before{content:"";position:absolute;inset:22%;border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.08)}
.survivalShieldCrystalTop{z-index:4;left:50%;top:-6px;width:20px;height:28px;margin-left:-10px}
.survivalShieldCrystalBottom{z-index:4;left:50%;bottom:-2px;width:17px;height:21px;margin-left:-8.5px}
.survivalShieldNode{z-index:4;width:13px;height:13px}
.survivalShieldNodeLeft{left:1px;top:57px}
.survivalShieldNodeRight{right:1px;top:57px}
.survivalShieldNodeBottomLeft{left:19px;bottom:17px;width:10px;height:10px;opacity:.9}
.survivalShieldNodeBottomRight{right:19px;bottom:17px;width:10px;height:10px;opacity:.9}
.survivalShieldImpactLayer{z-index:7;opacity:0;border:3px solid rgba(255,255,255,.98);background:radial-gradient(ellipse at center,rgba(255,255,255,.24),rgba(119,235,255,.13) 48%,rgba(0,0,0,0) 73%);box-shadow:0 0 15px rgba(255,255,255,.98),0 0 38px rgba(104,235,255,.95),inset 0 0 20px rgba(255,255,255,.56);transform:scale(.82)}
.survivalShieldAura.survivalShieldImpact{animation:survivalCrystalImpactBody .46s ease-out 1}
.survivalShieldAura.survivalShieldImpact .survivalShieldImpactLayer{animation:survivalCrystalImpactFlash .46s ease-out 1}
.survivalShieldAura.survivalShieldImpact .survivalShieldHex{animation:survivalCrystalHexImpact .46s ease-out 1}
@keyframes survivalCrystalBreath{0%,100%{transform:translateY(1px) scale(.985)}50%{transform:translateY(-1px) scale(1.015)}}
@keyframes survivalCrystalHexPulse{from{opacity:.38}to{opacity:.64}}
@keyframes survivalCrystalShimmer{0%,100%{opacity:.34;transform:translateX(-2px)}50%{opacity:.66;transform:translateX(2px)}}
@keyframes survivalCrystalImpactBody{0%{transform:scale(1);filter:saturate(1.08)}34%{transform:scale(1.055);filter:saturate(1.35) brightness(1.18)}100%{transform:scale(1.01);filter:saturate(1.08)}}
@keyframes survivalCrystalImpactFlash{0%{opacity:0;transform:scale(.8)}28%{opacity:1;transform:scale(1.075)}100%{opacity:0;transform:scale(1.13)}}
@keyframes survivalCrystalHexImpact{0%{opacity:.48}35%{opacity:1;filter:brightness(1.9)}100%{opacity:.52;filter:brightness(1)}}

#buttonShopSeason {
    position: absolute;
    left: 512px;
    top: 542px;
    width: 57px;
    height: 31px;
    text-align: center;
    background-image: none !important;
    z-index: 20;
}

#buttonShopSeason.seasonDisabled {
    filter: grayscale(1);
    opacity: .5;
    pointer-events: none;
}

#buttonShopSeason .AvNotif {
    right: 3px;
}

#buttonShopSeason .shotBtnText {
    left: 50%;
    bottom: -4px;
}

.shopSeasonIcon {
    font-size: 22px;
    text-align: center;
    line-height: 31px;
}


.roomPlayerMobile.roomPet88888888Aura {
    overflow: visible;
    isolation: isolate;
}

.roomPlayerMobile.roomPet88888888Aura > .roomPet88888888AuraTarget {
    will-change: filter;
    animation: roomPet88888888ContourPulse 1.65s ease-in-out infinite alternate;
}

.roomPlayerMobile.roomPet88888888Aura > .roomPet88888888AuraFx {
    position: absolute;
    left: -92px;
    top: -108px;
    width: 184px;
    height: 132px;
    pointer-events: none;
    overflow: visible;
    transform-origin: 50% 88%;
}

.roomPlayerMobile.roomPet88888888Aura > .roomPet88888888AuraBack {
    z-index: 3;
    opacity: .94;
    animation: roomPet88888888AuraBreath 2.35s ease-in-out infinite alternate;
}

.roomPlayerMobile.roomPet88888888Aura > .roomPet88888888AuraBack::before {
    content: "";
    position: absolute;
    inset: 7px 10px 9px;
    border-radius: 48% 52% 42% 58% / 58% 48% 52% 42%;
    background:
        radial-gradient(ellipse at 13% 64%, rgba(102, 220, 255, .42) 0 2%, rgba(50, 157, 255, .13) 8%, transparent 25%),
        radial-gradient(ellipse at 32% 22%, rgba(168, 239, 255, .32) 0 2%, rgba(57, 146, 255, .11) 10%, transparent 25%),
        radial-gradient(ellipse at 67% 18%, rgba(136, 229, 255, .35) 0 2%, rgba(63, 141, 255, .11) 10%, transparent 25%),
        radial-gradient(ellipse at 89% 63%, rgba(90, 205, 255, .42) 0 2%, rgba(37, 132, 255, .13) 8%, transparent 25%);
    opacity: .9;
    animation: roomPet88888888AuraDrift 4.8s ease-in-out infinite alternate;
}

.roomPlayerMobile.roomPet88888888Aura > .roomPet88888888AuraBack::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 2px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(220, 250, 255, .72) 0, rgba(80, 199, 255, .36) 24%, rgba(37, 115, 255, .13) 48%, transparent 72%);
    box-shadow: 0 0 8px rgba(125, 231, 255, .68), 0 0 17px rgba(42, 137, 255, .42);
    transform: scaleX(1.08);
    animation: roomPet88888888GroundPulse 1.45s ease-in-out infinite alternate;
}

.roomPet88888888Wisp {
    position: absolute;
    display: block;
    width: 15px;
    height: 48px;
    bottom: 12px;
    border-left: 2px solid rgba(185, 245, 255, .88);
    border-radius: 64% 12% 66% 18%;
    box-shadow: -2px 0 3px rgba(80, 210, 255, .72), -5px 0 8px rgba(42, 115, 255, .36);
    opacity: 0;
    transform-origin: 50% 100%;
    animation: roomPet88888888WispRise 2.65s ease-out infinite;
}

.roomPet88888888Wisp::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 10px;
    height: 31px;
    border-right: 1px solid rgba(75, 170, 255, .74);
    border-radius: 16% 70% 22% 64%;
}

.roomPet88888888Wisp.w1 { left: 13px; height: 44px; animation-delay: -2.2s; }
.roomPet88888888Wisp.w2 { left: 39px; bottom: 29px; height: 54px; animation-delay: -1.25s; }
.roomPet88888888Wisp.w3 { left: 73px; bottom: 52px; height: 48px; animation-delay: -.35s; }
.roomPet88888888Wisp.w4 { right: 72px; bottom: 54px; height: 52px; --aura-wisp-direction: -1; animation-delay: -1.75s; }
.roomPet88888888Wisp.w5 { right: 38px; bottom: 28px; height: 55px; --aura-wisp-direction: -1; animation-delay: -.82s; }
.roomPet88888888Wisp.w6 { right: 12px; height: 45px; --aura-wisp-direction: -1; animation-delay: -2.45s; }

.roomPet88888888Spark {
    position: absolute;
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #e9fdff;
    box-shadow: 0 0 3px #fff, 0 0 7px #56cfff;
    opacity: 0;
    animation: roomPet88888888SparkFloat 2.9s linear infinite;
}

.roomPet88888888Spark.s1 { left: 21px; bottom: 20px; animation-delay: -2.1s; }
.roomPet88888888Spark.s2 { left: 48px; bottom: 47px; animation-delay: -.7s; }
.roomPet88888888Spark.s3 { left: 82px; bottom: 73px; animation-delay: -1.6s; }
.roomPet88888888Spark.s4 { right: 79px; bottom: 70px; animation-delay: -.15s; }
.roomPet88888888Spark.s5 { right: 45px; bottom: 44px; animation-delay: -2.55s; }
.roomPet88888888Spark.s6 { right: 18px; bottom: 18px; animation-delay: -1.05s; }

.roomPlayerMobile.roomPet88888888Aura > .roomPet88888888AuraFront {
    z-index: 12;
}

.roomPet88888888Flare {
    position: absolute;
    display: block;
    bottom: 4px;
    width: 55px;
    height: 20px;
    border-bottom: 2px solid rgba(170, 241, 255, .78);
    border-radius: 50%;
    box-shadow: 0 4px 5px -4px rgba(85, 196, 255, .9);
    opacity: .58;
    animation: roomPet88888888FlareSlide 2.2s ease-in-out infinite alternate;
}

.roomPet88888888Flare.f1 { left: 19px; --aura-flare-rotate: 8deg; }
.roomPet88888888Flare.f2 { left: 65px; width: 58px; animation-delay: -.8s; }
.roomPet88888888Flare.f3 { right: 17px; --aura-flare-rotate: -8deg; animation-delay: -1.45s; }

@keyframes roomPet88888888ContourPulse {
    0% {
        -webkit-filter: drop-shadow(0 0 1px rgba(238, 254, 255, .92)) drop-shadow(0 0 3px rgba(94, 214, 255, .8)) drop-shadow(0 0 6px rgba(36, 116, 255, .46));
        filter: drop-shadow(0 0 1px rgba(238, 254, 255, .92)) drop-shadow(0 0 3px rgba(94, 214, 255, .8)) drop-shadow(0 0 6px rgba(36, 116, 255, .46));
    }
    100% {
        -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(91, 222, 255, .94)) drop-shadow(0 0 10px rgba(32, 105, 255, .62));
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(91, 222, 255, .94)) drop-shadow(0 0 10px rgba(32, 105, 255, .62));
    }
}

@keyframes roomPet88888888AuraBreath {
    0% { transform: translateY(1px) scale(.98, .97); opacity: .78; }
    100% { transform: translateY(-2px) scale(1.03, 1.04); opacity: 1; }
}

@keyframes roomPet88888888AuraDrift {
    0% { transform: skewX(-3deg) translateX(-2px); }
    100% { transform: skewX(3deg) translateX(2px); }
}

@keyframes roomPet88888888GroundPulse {
    0% { opacity: .48; transform: scaleX(.92) scaleY(.82); }
    100% { opacity: .92; transform: scaleX(1.12) scaleY(1.08); }
}

@keyframes roomPet88888888WispRise {
    0% { opacity: 0; transform: translate(0, 12px) scaleX(var(--aura-wisp-direction, 1)) scale(.66, .38) rotate(-5deg); }
    18% { opacity: .82; }
    72% { opacity: .48; }
    100% { opacity: 0; transform: translate(5px, -23px) scaleX(var(--aura-wisp-direction, 1)) scale(.38, 1.13) rotate(9deg); }
}

@keyframes roomPet88888888SparkFloat {
    0% { opacity: 0; transform: translate(0, 7px) scale(.55); }
    18% { opacity: .95; }
    70% { opacity: .52; }
    100% { opacity: 0; transform: translate(4px, -31px) scale(1.2); }
}

@keyframes roomPet88888888FlareSlide {
    0% { opacity: .28; transform: translateX(-4px) rotate(var(--aura-flare-rotate, 0deg)) scaleX(.82); }
    100% { opacity: .72; transform: translateX(4px) rotate(var(--aura-flare-rotate, 0deg)) scaleX(1.08); }
}


.gamePet88888888Aura {
    overflow: visible !important;
}

.gamePet88888888Aura > .AniObject {
    filter: drop-shadow(0 0 2px rgba(174, 239, 255, .86)) drop-shadow(0 0 5px rgba(42, 160, 255, .48));
    -webkit-filter: drop-shadow(0 0 2px rgba(174, 239, 255, .86)) drop-shadow(0 0 5px rgba(42, 160, 255, .48));
}

.gamePet88888888AuraFx {
    position: absolute;
    left: -92px;
    top: -158px;
    width: 184px;
    height: 166px;
    overflow: visible;
    pointer-events: none;
    transform-origin: 92px 158px;
}

.gamePet88888888AuraBack {
    z-index: 3;
    opacity: .9;
    animation: gamePet88888888AuraBreath 1.8s ease-in-out infinite alternate;
}

.gamePet88888888AuraBack::before {
    content: none;
    display: none;
}

.gamePet88888888AuraBack::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: -6px;
    width: 154px;
    height: 28px;
    border: 2px solid rgba(171, 239, 255, .67);
    border-left-color: rgba(46, 160, 255, .18);
    border-right-color: rgba(46, 160, 255, .18);
    border-radius: 50%;
    box-shadow: 0 0 7px rgba(129, 224, 255, .88), inset 0 0 9px rgba(42, 159, 255, .35);
    animation: gamePet88888888Ground 1.45s ease-in-out infinite alternate;
}

.gamePet88888888Wisp {
    --game-aura-x: 10px;
    --game-aura-r1: -7deg;
    --game-aura-r2: 8deg;
    position: absolute;
    bottom: 2px;
    width: 19px;
    height: 86px;
    border-radius: 55% 45% 48% 52%;
    opacity: 0;
    background: linear-gradient(to top, rgba(31, 120, 255, 0), rgba(70, 190, 255, .58) 24%, rgba(189, 243, 255, .78) 58%, rgba(213, 250, 255, 0));
    filter: drop-shadow(0 0 6px rgba(48, 175, 255, .82));
    transform-origin: 50% 100%;
    clip-path: polygon(50% 100%, 8% 66%, 58% 48%, 28% 26%, 65% 0, 88% 39%, 61% 69%);
    animation: gamePet88888888WispRise 2.75s ease-out infinite;
}

.gamePet88888888Wisp.w1 { left: 7px; height: 70px; animation-delay: -2.2s; }
.gamePet88888888Wisp.w2 { left: 32px; height: 93px; animation-delay: -1.25s; }
.gamePet88888888Wisp.w3 { left: 62px; bottom: 19px; height: 101px; animation-delay: -.37s; }
.gamePet88888888Wisp.w4 { right: 62px; bottom: 19px; height: 101px; --game-aura-x: -10px; --game-aura-r1: 7deg; --game-aura-r2: -8deg; animation-delay: -1.72s; }
.gamePet88888888Wisp.w5 { right: 32px; height: 93px; --game-aura-x: -10px; --game-aura-r1: 7deg; --game-aura-r2: -8deg; animation-delay: -.81s; }
.gamePet88888888Wisp.w6 { right: 7px; height: 70px; --game-aura-x: -10px; --game-aura-r1: 7deg; --game-aura-r2: -8deg; animation-delay: -2.47s; }

.gamePet88888888AuraFront {
    z-index: 13;
}

.gamePet88888888Spark {
    position: absolute;
    bottom: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0;
    background: #e8fbff;
    box-shadow: 0 0 4px #fff, 0 0 9px rgba(87, 203, 255, .95), 0 0 15px rgba(43, 142, 255, .72);
    animation: gamePet88888888SparkRise 2.65s linear infinite;
}

.gamePet88888888Spark.s1 { left: 13px; animation-delay: -2.1s; }
.gamePet88888888Spark.s2 { left: 39px; bottom: 28px; animation-delay: -.73s; }
.gamePet88888888Spark.s3 { left: 68px; bottom: 52px; animation-delay: -1.62s; }
.gamePet88888888Spark.s4 { right: 67px; bottom: 50px; animation-delay: -.14s; }
.gamePet88888888Spark.s5 { right: 38px; bottom: 27px; animation-delay: -2.51s; }
.gamePet88888888Spark.s6 { right: 12px; animation-delay: -1.06s; }

.gamePet88888888Flare {
    position: absolute;
    bottom: -2px;
    width: 62px;
    height: 24px;
    border-bottom: 2px solid rgba(200, 247, 255, .86);
    border-radius: 50%;
    filter: drop-shadow(0 0 5px rgba(60, 187, 255, .88));
    opacity: .55;
    animation: gamePet88888888FlarePulse 1.7s ease-in-out infinite alternate;
}
.gamePet88888888Flare.f1 { left: 8px; --game-flare-rotate: 7deg; }
.gamePet88888888Flare.f2 { left: 61px; width: 64px; --game-flare-rotate: 0deg; animation-delay: -.67s; }
.gamePet88888888Flare.f3 { right: 7px; --game-flare-rotate: -7deg; animation-delay: -1.15s; }

@keyframes gamePet88888888AuraBreath {
    from { opacity: .72; }
    to { opacity: 1; }
}

@keyframes gamePet88888888Contour {
    from { transform: scale(.96, .98); opacity: .58; }
    to { transform: scale(1.035, 1.045); opacity: .96; }
}

@keyframes gamePet88888888Ground {
    from { transform: scale(.91, .83); opacity: .43; }
    to { transform: scale(1.07, 1.08); opacity: .92; }
}

@keyframes gamePet88888888WispRise {
    0% { opacity: 0; transform: translate(0, 12px) scale(.55, .42) rotate(var(--game-aura-r1)); }
    22% { opacity: .72; }
    68% { opacity: .46; }
    100% { opacity: 0; transform: translate(var(--game-aura-x), -62px) scale(.76, 1.16) rotate(var(--game-aura-r2)); }
}

@keyframes gamePet88888888SparkRise {
    0% { opacity: 0; transform: translate(0, 8px) scale(.45); }
    20% { opacity: .95; }
    75% { opacity: .55; }
    100% { opacity: 0; transform: translate(7px, -105px) scale(1.25); }
}

@keyframes gamePet88888888FlarePulse {
    from { opacity: .28; transform: rotate(var(--game-flare-rotate, 0deg)) scaleX(.78); }
    to { opacity: .82; transform: rotate(var(--game-flare-rotate, 0deg)) scaleX(1.08); }
}

.BattlePetLevelModalWrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background: rgba(0, 0, 0, .24);
    overflow: hidden;
    touch-action: none;
}

.BattlePetLevelDialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    min-height: 382px;
    box-sizing: border-box;
    border: 2px solid #21384f;
    border-radius: 7px;
    background: linear-gradient(#d8ecff 0, #9bb6d4 34px, #526a80 35px, #465b70 100%);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .7);
    font-family: Arial, Helvetica, sans-serif;
    color: #e9fbff;
    text-align: left;
    overflow: hidden;
}

.BattlePetLevelTitle {
    height: 35px;
    line-height: 35px;
    padding: 0 42px 0 15px;
    box-sizing: border-box;
    background: linear-gradient(90deg, #c6d000 0%, #8ca309 32%, #51839c 72%, #d8efff 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-shadow: #000 1px 1px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.BattlePetLevelCloseX {
    position: absolute;
    right: 9px;
    top: 7px;
    width: 24px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .45);
    background: linear-gradient(#f5ffff, #80a4c6);
    color: #18304a;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset #fff 0 1px 0;
}

.BattlePetLevelBody {
    padding: 12px 15px 13px;
    box-sizing: border-box;
}

.BattlePetLevelPetName {
    margin-bottom: 8px;
    color: #fff;
    font-size: 15px;
    text-shadow: #000 1px 1px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.BattlePetLevelMainCard {
    padding: 9px 10px 8px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 7px;
    background: rgba(0, 0, 0, .30);
    box-shadow: inset rgba(0, 0, 0, .35) 0 1px 5px;
}

.BattlePetLevelLine {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
    text-shadow: #000 1px 1px 2px;
}

.BattlePetLevelLine b {
    color: #ffef86;
    font-size: 14px;
}

.BattlePetLevelLine .BattlePetExpText {
    color: #b9ffb9;
}

.BattlePetExpTrack {
    height: 12px;
    overflow: hidden;
    border: 1px solid #111;
    border-radius: 9px;
    background: rgba(0, 0, 0, .62);
    box-shadow: inset #000 0 1px 3px;
}

.BattlePetExpFill {
    height: 12px;
    min-width: 0;
    background: linear-gradient(90deg, #32a9ff 0%, #65e0ff 45%, #9dff83 100%);
    box-shadow: rgba(255, 255, 255, .45) 0 1px 0 inset;
    transition: width 650ms ease-out;
}

.BattlePetExpMeta {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: #d4e8f6;
    font-size: 10px;
    text-shadow: #000 1px 1px 1px;
}

.BattlePetExpMeta b {
    color: #fff;
}

.BattlePetNextPower {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 8px;
    min-height: 31px;
    padding: 0 10px;
    margin-bottom: 8px;
    box-sizing: border-box;
    border: 1px solid rgba(144, 202, 236, .34);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(20, 58, 84, .68), rgba(8, 35, 57, .62));
    color: #dcecff;
    font-size: 11px;
    text-shadow: #000 1px 1px 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.BattlePetNextPower b {
    overflow: hidden;
    color: #ffef86;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.BattlePetNextPower small {
    color: #b9d8ed;
    font-size: 9px;
    white-space: nowrap;
}

.BattlePetNextPower.isComplete {
    border-color: rgba(166, 242, 151, .34);
    background: linear-gradient(180deg, rgba(42, 94, 54, .58), rgba(20, 63, 35, .54));
}

.BattlePetNextPower.isComplete b {
    color: #c7ffb8;
}

.BattlePetSkillsBox {
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 7px;
    background: rgba(255, 255, 255, .08);
}

.BattlePetSectionTitle {
    margin-bottom: 6px;
    color: #aee8ff;
    font-size: 12px;
    text-shadow: #000 1px 1px 2px;
}

.BattlePetSkillsList {
    display: flex;
    gap: 6px;
}

.BattlePetSkill {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 6px 7px 5px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: linear-gradient(180deg, rgba(17, 39, 58, .54), rgba(4, 22, 37, .48));
    font-size: 10px;
    text-shadow: #000 1px 1px 1px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.BattlePetSkill.isUnlocked {
    border-color: rgba(164, 237, 145, .48);
    background: linear-gradient(180deg, rgba(55, 113, 62, .55), rgba(23, 72, 40, .52));
    box-shadow: inset 0 1px 0 rgba(222,255,211,.10), 0 0 5px rgba(124,214,113,.10);
}

.BattlePetSkill.isLocked {
    border-color: rgba(164, 184, 202, .18);
    background: linear-gradient(180deg, rgba(38, 52, 65, .56), rgba(18, 29, 40, .54));
}

.BattlePetSkillHeader,
.BattlePetSkillFooter {
    display: flex;
    align-items: center;
    min-width: 0;
}

.BattlePetSkillHeader {
    height: 18px;
}

.BattlePetSkillFooter {
    justify-content: space-between;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.BattlePetSkillState {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    font-size: 10px;
}

.BattlePetSkill.isUnlocked .BattlePetSkillState {
    color: #caffbe;
}

.BattlePetSkill.isLocked .BattlePetSkillState {
    opacity: .78;
}

.BattlePetSkillName {
    overflow: hidden;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.BattlePetSkillLevel {
    margin-left: 0;
    padding-left: 0;
    color: #ffef86;
    font-size: 9px;
    white-space: nowrap;
}

.BattlePetSkillStatus {
    color: #aebdca;
    font-size: 8px;
    white-space: nowrap;
}

.BattlePetSkill.isUnlocked .BattlePetSkillStatus {
    color: #c7ffb8;
}

.BattlePetNoSkills {
    color: #cdd7df;
    font-size: 11px;
}

.BattlePetLevelInfo {
    margin-bottom: 9px;
    color: #dce7ef;
    font-size: 10px;
    line-height: 13px;
    text-shadow: #000 1px 1px 2px;
}

.BattlePetLevelInfo b {
    color: #fff;
}

.BattlePetLevelButtons {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.BattlePetLevelCloseBtn {
    width: 92px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .65);
    border-radius: 7px;
    background: linear-gradient(#d9f1ff 0%, #6ea6d7 48%, #315f88 100%);
    box-shadow: inset rgba(255, 255, 255, .65) 0 1px 0, inset rgba(255, 255, 255, .18) 0 -1px 0, rgba(0, 0, 0, .45) 0 2px 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-shadow: #000 1px 1px 2px;
    cursor: pointer;
    user-select: none;
}

.BattlePetLevelStatus {
    min-height: 16px;
    line-height: 16px;
    color: #c9eeff;
    font-size: 10px;
    text-align: center;
    text-shadow: #000 1px 1px 2px;
}

@supports (height: 100dvh) {
    .BattlePetLevelModalWrap {
        height: 100dvh;
    }

    .BattlePetLevelDialog {
        max-height: calc(100dvh - 18px);
    }
}

@media (max-width: 480px) {
    .BattlePetLevelDialog {
        width: calc(100vw - 14px);
        min-height: 0;
        max-height: calc(100vh - 18px);
        overflow-y: auto;
    }

    .BattlePetLevelTitle {
        height: 32px;
        line-height: 32px;
        padding-left: 10px;
        font-size: 15px;
    }

    .BattlePetLevelBody {
        padding: 9px;
    }

    .BattlePetSkillsList {
        flex-direction: column;
    }

    .BattlePetSkill {
        flex: none;
        width: 100%;
    }
}

@media (max-height: 430px) {
    .BattlePetLevelDialog {
        top: 8px;
        transform: translateX(-50%);
        max-height: calc(100vh - 16px);
        overflow-y: auto;
    }

    .BattlePetLevelInfo {
        display: none;
    }
}