.game-body {
    background: url('../img/testbg.jpg');
    font-family: "Courier New", monospace;
    position: relative;
    color: #0df2ff;
    display: flex;
    justify-content: space-around;
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

#leftContainer, #rightContainer {
    width: 40%;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 340px;
}

#gameContainer {
    position: relative;
    width: 672px;
    height: 672px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    background-color: #000;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 223, 255, 0.5), 0 0 50px rgba(0, 223, 255, 0.2);
    border: 2px solid rgba(0, 223, 255, 0.5);
    transition: width 0.2s, height 0.2s;
    max-width: 100vw;
    max-height: 100vw;
    box-sizing: border-box;
}

.gameContainerWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

#gameContainer > * {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .game-body {
        display: block;
        width: 100vw;
        min-height: 100dvh;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }
    #navbar {
        width: 100vw;
    }
    #leftContainer, #rightContainer {
        width: 100vw;
        min-width: 0;
        margin-top: 0;
        align-items: stretch;
        padding: 0;
    }
    #leftContainer {
        display: block;
        padding: 0;
    }
    #topInfoZone {
        display: flex;
        justify-content: center;
        align-items: stretch;
        width: 100vw;
        padding: 0;
        margin: 0;
    }
    .character-info-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 94vw;
        margin: 30px auto 0 auto;
        padding: 10px 2vw 8px 2vw;
        background: linear-gradient(135deg,#0A0A0A,#141414);
        border-radius: 13px;
        box-shadow: 0 0 7px #00F0FF;
        border: 2px solid #00F0FF;
        gap: 3px;
        box-sizing: border-box;
        min-width: 0;
        position: relative;
    }
    .character-info-mobile .avatar-box {
        position: relative !important;
        width: 52px !important;
        height: 52px !important;
        display: block !important;
    }
    .character-info-mobile #characterAvatar {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 38px !important;
        height: 38px !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        background: #111 !important;
        z-index: 1 !important;
    }
    .character-info-mobile .avatar-frame {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 52px !important;
        height: 52px !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 50% !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }
    .character-info-mobile .char-main-data {
        width: 100%;
        text-align: center;
        margin: 2px 0 2px 0;
    }
    .character-info-mobile .char-name {
        font-size: 14px;
        font-weight: 600;
        color: #0df2ff;
        margin-bottom: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .character-info-mobile .char-points {
        display: flex;
        justify-content: center;
        gap: 10px;
        font-size: 13px;
        color: #55e6ff;
        margin-bottom: 2px;
    }
    .character-info-mobile .char-extra {
        width: 100%;
        display: flex;
        justify-content: space-around;
        font-size: 12px;
        color: #bee3fa;
        margin-bottom: 4px;
    }
    .character-info-mobile .char-extra > div {
        min-width: 68px;
        text-align: center;
    }
    .character-info-mobile .char-barres {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: 2px;
        margin-bottom: 5px;
    }
    .character-info-mobile .char-barres > div {
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100%;
    }
    .character-info-mobile .char-barres span {
        display: inline-block;
        min-width: 60px;
        font-size: 12px;
        color: #0df2ff;
        text-align: left;
    }
    .character-info-mobile .progress-bar {
        flex: 1 1 0;
        min-width: 0;
        height: 11px;
        border-radius: 5px;
        background: rgba(255,255,255,0.13);
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
    }
    .character-info-mobile .progress-bar .endurance-filled,
    .character-info-mobile .progress-bar .health-filled,
    .character-info-mobile .progress-bar .xp-filled {
        height: 100%;
        border-radius: 5px;
        transition: width 0.18s;
        min-width: 0 !important;
        margin: 0;
        padding: 0;
    }
    .character-info-mobile .progress-bar .endurance-filled {
        background: linear-gradient(90deg,#7EFFA1,#00F0FF);
    }
    .character-info-mobile .progress-bar .health-filled {
        background: linear-gradient(90deg,#FF6D00,#AD1C1C);
    }
    .character-info-mobile .progress-bar .xp-filled {
        background: linear-gradient(90deg,#3B0F78,#00F0FF);
    }
    .character-info-mobile .progress-bar .tooltip {
        display: none;
    }
    .character-info-mobile .char-stats-btn {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 4px;
    }
    .character-info-mobile .char-action {
        width: 100%;
        text-align: center;
        margin: 2px 0 4px 0;
        line-height: 1.15;
    }
    .character-info-mobile .char-action #mobileActionText {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #0df2ff;
    }
    .character-info-mobile .char-action .action-since {
        display: block;
        font-size: 12px;
        color: #9fdfff;
        opacity: .95;
        margin-top: 2px;
    }
    .character-info-mobile #showStatsButton {
        font-size: 13px;
        min-width: 110px;
        max-width: 180px;
        padding: 6px 0;
        border-radius: 8px;
        width: 98%;
        background: radial-gradient(circle,rgba(0,223,255,0.65),rgba(0,223,255,0.2));
        color: #000;
        border: 2px solid #00F0FF;
        box-shadow: 0 0 3px #00F0FF;
        display: block;
        text-align: center;
        line-height: 1.1;
    }
    .character-info-mobile #showStatsButton:active,
    .character-info-mobile #showStatsButton:hover {
        background: rgba(0, 223, 255, 0.9);
        color: #000;
    }
    #gameContainer {
        width: 97vw;
        height: 97vw;
        min-width: 220px;
        min-height: 220px;
        max-width: 98vw;
        max-height: 98vw;
        margin: 10px auto 0 auto;
        border-radius: 13px;
        box-sizing: border-box;
        display: block;
    }
    .gameContainerWrapper {
        width: 100vw;
        height: auto;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    #buttonContainer {
        width: 99vw;
        max-width: 99vw;
        margin: 15px auto 0 auto;
        border-radius: 14px;
        border-width: 4px;
        flex-wrap: wrap;
        padding: 5px 0;
        justify-content: center;
        gap: 4px;
        background: linear-gradient(135deg, #0A0A0A, #0f0f0f);
    }
    .menuButton {
        width: 48vw;
        min-width: 100px;
        max-width: 99vw;
        margin: 3px auto;
        height: 40px;
        font-size: 0.93em;
        padding: 0;
        border-radius: 11px;
        box-shadow: 0 0 6px #00F0FF;
    }
    .menuButton span {
        display: inline;
        font-size: 1em;
        padding-left: 3px;
    }
    .menuButton.active, .menuButton:active, .menuButton:hover {
        background: rgba(0, 223, 255, 0.8);
        color: #000;
        box-shadow: 0 0 12px #00F0FF;
    }
    .whoIsThere {
        width: 98vw;
        margin: 12px auto 5px auto;
        border-radius: 12px;
        padding: 9px 8px;
        min-height: 26px;
        max-height: 40px;
        font-size: 14px;
        overflow-x: auto;
        background: linear-gradient(135deg, #101010, #18181a);
    }
    #panelContainer {
        width: 98vw;
        margin: 0 auto 0 auto;
        min-height: 200px;
        height: auto;
        padding: 0;
        box-sizing: border-box;
        margin-bottom: 22px;
    }
    #inboxContainer,
    #notificationsContainer,
    #inventoryContainer,
    #workContainer,
    #housingContainer {
        width: 99vw;
        min-width: 0;
        margin: 0 auto;
        padding: 10px 3vw;
        border-radius: 13px;
        box-sizing: border-box;
        max-height: calc(100dvh - 120px);
        min-height: 160px;
        overflow-y: auto;
    }
    #gameErrors, #gameSuccess {
        width: 99vw;
        margin: 0 auto;
        font-size: 15px;
    }
}

@media (max-width: 600px), (max-height: 500px) {
    #gameContainer {
        width: 99vw;
        height: 99vw;
        margin-top: 1vw;
        margin-bottom: 1vw;
        border-radius: 10px;
    }
    #panelContainer {
        padding-bottom: 50px;
    }
}

@media (max-width: 900px) {
    #topInfoZone,
    .character-info,
    .gameContainerWrapper,
    #gameContainer,
    #buttonContainer,
    .whoIsThere,
    #panelContainer {
        margin-bottom: 10px !important;
    }
}

.character-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 90%;
    height: 120px;
    margin-bottom: 0;
    background: linear-gradient(135deg, #0A0A0A, #141414);
    border-radius: 20px 20px 0 0;
    padding: 10px 20px 10px 140px;
    border: 6px groove #00F0FF;
    box-shadow: inset 0 0 2px #00F0FF, 0 0 8px #00F0FF;
    position: relative;
    overflow: visible;
}

.character-info::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 25px;
    background: rgba(0, 223, 255, 0.015);
    pointer-events: none;
    z-index: -1;
    box-shadow: none;
}

.avatar-frame-container {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 128px;
    height: 128px;
    z-index: 2;
}

#characterAvatar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;
    border: none;
    box-shadow: none;
    object-fit: cover;
}

.avatar-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

.left-info, .middle-info, .right-info {
    width: 33.33%;
    height: 60%;
}

.bottom-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 10px;
    box-sizing: border-box;
}

.bottom-info > div {
    display: flex;
    align-items: center;
    width: 100%;
}

.progress-bar {
    flex-grow: 1;
    height: 14px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    overflow: visible;
    margin-left: 8px;
    position: relative;
}

.endurance-bar .endurance-filled {
    background: linear-gradient(90deg, #7EFFA1, #00F0FF);
    height: 100%;
}

.health-bar .health-filled {
    background: linear-gradient(90deg, #FF6D00, #AD1C1C);
    height: 100%;
}

.xp-bar .xp-filled {
    background: linear-gradient(90deg, #3B0F78, #00F0FF);
    height: 100%;
}

.info-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

#showStatsButton {
    background: radial-gradient(circle, rgba(0, 223, 255, 0.7), rgba(0, 223, 255, 0.3));
    border: 2px solid #00F0FF;
    color: #000;
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 5px #00F0FF;
    margin-top: 10px;
}

#showStatsButton:hover {
    background: rgba(0, 223, 255, 0.8);
    color: #000;
    box-shadow: 0 0 10px #00F0FF;
}

.left-info, .middle-info, .right-info {
    width: 33.33%;
    height: 60%;
}

.left-info .name, .left-info .weight {
    margin-bottom: 10px;
}

.right-info div:first-child {
    margin-bottom: 10px;
}

#neoCreditsDisplay {
    margin-bottom: 10px;
    font-size: 15px;
}

#neoCreditsDisplay img {
    height: 15px;
    margin-left: 3px;
    margin-bottom: 3px;
}

#fightButtonsContainer {
    display: flex;
}

#logsOverlay {
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(13, 242, 255, 0.8);
}

@keyframes blinker {
    50% {
        opacity: 0.5;
    }
}

#gameErrors {
    text-align: center;
    color: red;
    width: 100%;
    margin-top: -15px;
}

#gameSuccess {
    text-align: center;
    color: green;
    width: 100%;
    font-size: smaller;
    margin-top: -15px;
}

#buttonContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    margin: 10px auto 0 auto;
    background: linear-gradient(135deg, #0A0A0A, #141414);
    padding: 10px;
    border-radius: 0 0 20px 20px;
    border: 6px groove #00F0FF;
    box-shadow: inset 0 0 2px #00F0FF, 0 0 8px #00F0FF;
    position: relative;
}

.menuButton {
    width: 13%;
    height: 30px;
    background: radial-gradient(circle, rgba(0, 223, 255, 0.7), rgba(0, 223, 255, 0.3));
    border: 2px solid #00F0FF;
    color: #000;
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 5px #00F0FF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75em;
}

.menuButton:hover, .menuButton.active {
    background: rgba(0, 223, 255, 0.8);
    color: #000;
    box-shadow: 0 0 10px #00F0FF;
}

.whoIsThere {
    width: 90%;
    margin: 0 auto 20px auto;
    background: linear-gradient(135deg, #0A0A0A, #141414);
    border: 6px groove #00F0FF;
    border-radius: 0 0 20px 20px;
    padding: 12px 16px;
    color: #0df2ff;
    font-size: 14px;
    min-height: 35px;
    max-height: 35px;
    overflow-y: auto;
    box-shadow: inset 0 0 2px #00F0FF, 0 0 8px #00F0FF;
}

.whoIsThere span:hover {
    cursor: pointer;
}

.whoIsThere .separator:hover {
    cursor: default;
}

.whoIsThere::-webkit-scrollbar {
    height: 3px;
}

.whoIsThere::-webkit-scrollbar-thumb {
    background-color: #0df2ff;
}

.whoIsThere::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#panelContainer {
    width: 90%;
    height: 90%;
}

#discussionContainer {
    width: 100%;
    height: 100%;
    max-height: 750px;
    position: relative;
    padding: 20px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 223, 255, 0.4);
    box-sizing: border-box;
    z-index: 1;
    clip-path: polygon(10% 0%, 90% 0%, 100% 12%, 100% 95%, 0% 95%, 0% 12%);
}

#discussionContainer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(0, 223, 255, 0.6), rgba(0, 0, 0, 0) 70%);
    clip-path: polygon(10% 0%, 90% 0%, 100% 12%, 100% 95%, 0% 95%, 0% 12%);
    pointer-events: none;
    animation: border-glow 3s ease-in-out infinite;
}

@keyframes border-glow {
    0% { box-shadow: 0 0 20px rgba(0, 223, 255, 0.4), 0 0 40px rgba(0, 223, 255, 0.3); }
    50% { box-shadow: 0 0 40px rgba(0, 223, 255, 0.7), 0 0 60px rgba(0, 223, 255, 0.5); }
    100% { box-shadow: 0 0 20px rgba(0, 223, 255, 0.4), 0 0 40px rgba(0, 223, 255, 0.3); }
}

#discussionContent {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 96%;
    z-index: 2;
    padding-bottom: 30px;
}

.no-messages {
    color: #0df2ff;
    text-align: center;
    margin-top: auto;
}

#discussionPanel {
    height: calc(100% - 80px);
    overflow-y: auto;
    background: #0d0d0d;
    padding: 10px;
    border-radius: 10px;
    z-index: 2;
    box-shadow: inset 0 0 15px rgba(0, 223, 255, 0.5);
    clip-path: polygon(12% 0%, 88% 0%, 100% 10%, 100% 95%, 0% 95%, 0% 10%);
}

#discussionPanel::-webkit-scrollbar { width: 5px; }
#discussionPanel::-webkit-scrollbar-track { background: #1a1a1a; }
#discussionPanel::-webkit-scrollbar-thumb { background: #0df2ff; }
#discussionPanel::-webkit-scrollbar-thumb:hover { background: #0df2ff; }

#discussionInput {
    position: absolute;
    width: calc(100% - 40px);
    height: 40px;
    border: none;
    background: #0d0d0d;
    color: white;
    padding: 10px;
    margin-top: -10px;
    box-sizing: border-box;
    border-radius: 5px;
    z-index: 3;
    box-shadow: 0 0 12px rgba(0, 223, 255, 0.5);
}

#discussionInput:focus {
    outline: none;
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.7);
}

#discussionModeButtons {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    left: 5px;
    bottom: 90px;
    z-index: 3000;
}

#discussionModeButtons .tooltip {
    visibility: hidden;
    opacity: 0;
    width: max-content;
    min-width: 52px;
    background: #23273a;
    color: #0df2ff;
    text-align: center;
    border-radius: 7px;
    padding: 3px 9px;
    position: absolute;
    left: 35px;
    font-size: 13px;
    top: 1px;
    z-index: 10000;
    transition: opacity 0.16s;
    pointer-events: none;
    box-shadow: 0 0 8px #0df2ff5a;
}

#discussionModeButtons button:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

#discussionModeButtons button {
    width: 24px;
    height: 24px;
    background: #0df2ff;
    border: none;
    color: #000000;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.5);
    transition: all 0.3s ease;
}

#discussionModeButtons button:hover {
    background-color: #000000;
    color: #0df2ff;
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.7);
}

#discussionModeButtons button.active {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
}

@media (max-width: 900px) {
    #discussionContainer {
        max-height: 100vh;
        min-height: 300px;
        padding: 4vw 1vw 17vw 1vw;
        border-radius: 10px;
        box-sizing: border-box;
    }
    #discussionPanel {
        padding: 2vw 1vw 8vw 1vw;
        font-size: 0.97em;
        min-height: 80px;
        max-height: 59vh;
        box-sizing: border-box;
    }
    #discussionInputRow {
        width: 100vw;
        min-width: 0;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        padding: 2vw 2vw 2.5vw 2vw;
        background: #000;
        border-bottom-left-radius: 9px;
        border-bottom-right-radius: 9px;
        z-index: 50;
        box-sizing: border-box;
    }
    #discussionModeButtons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 7px;
        width: 100%;
        margin: 0 auto 0 auto;
        padding: 0;
    }
    #discussionModeButtons button {
        width: 30px;
        height: 30px;
        font-size: 1em;
    }
    #discussionInput {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        height: 38px;
        border-radius: 7px;
        font-size: 1.06em;
        padding: 6px 8px;
        display: block;
        box-sizing: border-box;
    }
}

@media (max-width: 600px), (max-height: 500px) {
    #discussionContainer {
        max-height: 100vh;
        min-height: 120px;
        padding: 2vw 0.5vw 18vw 0.5vw;
        border-radius: 7px;
        box-sizing: border-box;
    }
    #discussionPanel {
        padding: 2vw 1vw 10vw 1vw;
        font-size: 0.95em;
        min-height: 46px;
        max-height: 44vh;
        box-sizing: border-box;
    }
    #discussionInputRow {
        width: 100vw;
        min-width: 0;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        padding: 2vw 2vw 2.2vw 2vw;
        background: #000;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        z-index: 50;
        box-sizing: border-box;
    }
    #discussionModeButtons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 100%;
        margin: 0 auto 0 auto;
        padding: 0;
    }
    #discussionModeButtons button {
        width: 27px;
        height: 27px;
        font-size: 0.93em;
    }
    #discussionInput {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        height: 32px;
        border-radius: 7px;
        font-size: 0.98em;
        padding: 4px 6px;
        display: block;
        box-sizing: border-box;
    }
}

#inboxContainer {
	width: 100%;
	max-height: 670px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #0b0f13;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(0, 223, 255, 0.35), inset 0 0 14px rgba(0, 223, 255, 0.18);
	position: relative;
	overflow: hidden;
}

#inboxHeader {
	display: flex;
	justify-content: center;
	gap: 10px;
	background-color: #0b0f13;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 223, 255, 0.5);
}

#inboxHeader button {
	background-color: rgba(2, 14, 20, 0.8);
	border: 2px solid rgba(0, 223, 255, 0.45);
	color: #72faff;
	font-size: 1.2em;
	cursor: pointer;
	box-shadow: 0 0 12px rgba(0, 223, 255, 0.35);
	border-radius: 8px;
	transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}

#inboxHeader button:hover {
	color: #72faff;
	background-color: rgba(14, 36, 46, 0.6);
	box-shadow: 0 0 16px rgba(114, 250, 255, 0.55);
	transform: translateY(-1px);
}

#inboxHeader button.active {
	color: #72faff;
	background-color: rgba(14, 36, 46, 0.6);
	box-shadow: 0 0 16px rgba(114, 250, 255, 0.55);
}

#inboxCategories {
	text-align: center;
	color: #72faff;
}

#addCategoryButton, #removeCategoryButton, #inboxCategoriesSelect, #categorySelect, #subcategorySelect {
	background-color: #0b1218;
	color: #e8faff;
	border: 1px solid rgba(0, 223, 255, 0.5);
	padding: 5px;
	border-radius: 8px;
	transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

#addCategoryButton:hover, #removeCategoryButton:hover, #subcategorySelect:hover {
	cursor: pointer;
	box-shadow: 0 0 10px rgba(114, 250, 255, 0.45);
	border-color: rgba(114, 250, 255, 0.6);
}

#inboxContent {
	width: 100%;
	max-height: 600px;
	overflow-y: auto;
	margin-top: 20px;
	background-color: #0b0f13;
	padding: 10px;
	border-radius: 10px;
	box-shadow: inset 0 0 15px rgba(0, 223, 255, 0.28);
}

#inboxContent > div {
	border-bottom: 1px solid rgba(0, 223, 255, 0.35);
	transition: opacity 0.2s ease-in-out, background .15s ease;
	cursor: pointer;
}

#inboxContent > div:hover {
	opacity: 0.85;
	background: rgba(14, 36, 46, 0.35);
}

.inboxMessage {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #0b1218;
	padding: 0 10px;
	margin-bottom: 5px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 223, 255, 0.25);
    box-sizing: border-box; 
	transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
	border-left: 5px solid transparent;
	color: rgba(255, 255, 255, 0.86);
}

.inboxMessage.unread {
	background: linear-gradient(180deg,#112833 0%,#0f1b24 100%);
	border-left-color: #72faff;
	color: #ffffff;
	box-shadow:
		0 0 18px rgba(114,250,255,.55),
		inset 0 0 6px rgba(114,250,255,.22);
	position: relative;
	animation: inboxUnreadGlow 2.2s ease-in-out infinite;
	transform: translateY(0);
}

.inboxMessage.unread::after {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	right: 6px;
	width: 3px;
	border-radius: 2px;
	background: linear-gradient(180deg,#72faff 0%,rgba(114,250,255,.0) 100%);
	box-shadow: 0 0 10px rgba(114,250,255,.55);
}

.inboxMessage.unread .senderName,
.inboxMessage.unread .messageTitle,
.inboxMessage.unread .messageDateTime {
	color: #fff !important;
	font-weight: 700;
	letter-spacing: .2px;
	text-shadow: 0 0 6px rgba(114,250,255,.35);
}

.inboxMessage.unread .avatar {
	border-color: #72faff !important;
	box-shadow: 0 0 10px rgba(114,250,255,.75), 0 0 0 3px rgba(114,250,255,.18);
}

.inboxMessage.unread:hover {
	background: #12303d;
    box-shadow:
        inset 0 0 0 1px rgba(114,250,255,.25),
        0 0 22px rgba(114,250,255,.65),
        inset 0 0 8px rgba(114,250,255,.25);
    }

@keyframes inboxUnreadGlow {
	0%   { box-shadow: 0 0 14px rgba(114,250,255,.42), inset 0 0 6px rgba(114,250,255,.18); }
	50%  { box-shadow: 0 0 22px rgba(114,250,255,.65), inset 0 0 8px rgba(114,250,255,.22); }
	100% { box-shadow: 0 0 14px rgba(114,250,255,.42), inset 0 0 6px rgba(114,250,255,.18); }
}

.inboxMessage:hover {
	color: #e8faff;
	background-color: #11202a;
	box-shadow: 0 0 14px rgba(114, 250, 255, 0.42);
	transform: translateY(-1px);
}

.inboxMessage .senderInfo, .inboxMessage .messageTitle, .inboxMessage .messageDateTime {
	color: #cfefff;
}

.inboxMessage .avatar {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	border: 2px solid rgba(0, 223, 255, 0.5);
	box-shadow: 0 0 6px rgba(114, 250, 255, 0.35);
}

.inboxMessage .messageTitle {
	display: flex;
	align-items: center;
	justify-content: center;
}

#conversationOverlay {
	background-color: #0b0f13;
	border: 2px solid rgba(0, 223, 255, 0.45);
	box-shadow: 0 0 18px rgba(0, 223, 255, 0.35), inset 0 0 12px rgba(0, 223, 255, 0.15);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	overflow: hidden;
	padding: 0;
	box-sizing: border-box;
	position: fixed;
	top: 20%;
	left: 50%;
	width: 750px;
	height: 600px;
	z-index: 998;
}

#conversationOverlay .div {
	margin: 0;
}

#conversationTitle {
	position: absolute;
	top: 10px;
	right: 0;
	height: 20px;
	font-size: 22px;
	font-style: italic;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	width: 100%;
}

#settingsButton {
	position: absolute;
	top: 10px;
	left: 9px;
	background: none;
	border: none;
	padding: 0;
	outline: none;
}

#minimizeButton {
	position: absolute;
	top: 2px;
	right: 32px;
	padding: 5px 10px;
	border: 2px solid rgba(114, 250, 255, 0.45);
	border-radius: 8px;
	background: rgba(2, 14, 20, 0.85);
	color: #72faff;
	cursor: pointer;
	box-shadow: 0 0 10px rgba(114, 250, 255, 0.4);
	transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}

#minimizeButton:hover {
	background: rgba(14, 36, 46, 0.6);
	box-shadow: 0 0 14px rgba(114, 250, 255, 0.55);
	transform: translateY(-1px);
}

.gear {
	width: 20px;
	height: 20px;
	background: #0b1218;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	box-shadow: 0 0 8px rgba(114, 250, 255, 0.35);
}

.gear:hover {
	background: #11202a;
}

.gear-inner {
	width: 10px;
	height: 10px;
	background: #72faff;
	border-radius: 50%;
}

.bar {
	width: 34px;
	height: 8px;
	background: #72faff;
	border-radius: 3px;
	position: absolute;
	z-index: -1;
}

.bar:nth-child(2) {
	transform: rotate(60deg);
}

.bar:nth-child(3) {
	transform: rotate(120deg);
}

#participantsContainer, #messagesContainer {
	padding: 0 10px;
}

#participantsContainer {
	display: flex;
	justify-content: space-between;
	height: 100px;
	width: 97.33%;
	overflow: auto;
	margin-top: 50px;
}

#participants {
	width: 80%;
	margin: 0;
	background-color: #0b0f13;
	border: 2px solid rgba(0, 223, 255, 0.45);
	box-shadow: inset 0 0 10px rgba(0, 223, 255, 0.15);
	border-radius: 12px;
	overflow-y: auto;
	font-size: 0.9em;
	padding: 5px;
	color: #cfefff;
	font-family: inherit;
}

#lastSenderInfo {
	display: flex;
	width: 20%;
	flex-direction: column;
	align-items: center;
	background-color: #0b0f13;
	border: 2px solid rgba(0, 223, 255, 0.45);
	box-shadow: inset 0 0 10px rgba(0, 223, 255, 0.15), 0 0 10px rgba(0, 223, 255, 0.25);
	border-radius: 12px;
	color: #cfefff;
	font-family: inherit;
}

#lastSenderAvatar {
	width: 75px;
	height: 75px;
}

#messagesContainer {
	display: flex;
	justify-content: space-between;
	height: 400px;
	width: 97.33%;
	margin-top: 5px;
}

#messagesList {
	font-size: 0.8em;
	text-overflow: ellipsis;
	overflow-y: auto;
	text-align: center;
	flex-direction: column;
	align-items: center;
	background-color: #0b0f13;
	border: 2px solid rgba(0, 223, 255, 0.45);
	box-shadow: inset 0 0 12px rgba(0, 223, 255, 0.15), 0 0 10px rgba(0, 223, 255, 0.25);
	border-radius: 12px;
	font-family: inherit;
}

#messagesList > div {
	margin: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.6);
	background-color: #0b1218;
	transition: opacity 0.1s ease-in-out, background 0.15s ease, transform 0.12s ease;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.82);
	border-left: 3px solid transparent;
}
#messagesList > div > p {
	margin: 0;
}

#messagesList > div:hover {
	background-color: #11202a;
	transform: translateY(-1px);
}

#messagesList > div:last-child {
	border-bottom: none;
}

#messagesList > div.unread {
	background-color: #0f1b24;
	border-left: 3px solid #72faff;
	color: #ffffff;
}

#messagesList > div.active {
	background-color: rgba(14, 36, 46, 0.45);
}

#messageContent {
	padding: 10px;
	overflow: auto;
	white-space: pre-wrap;
	width: 85%;
	background-color: #0b0f13;
	border: 2px solid rgba(0, 223, 255, 0.45);
	box-shadow: inset 0 0 12px rgba(0, 223, 255, 0.15), 0 0 12px rgba(0, 223, 255, 0.25);
	border-radius: 12px;
	color: #e8faff;
	font-family: inherit;
}

#answerContainer {
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	width: 85%;
}

#answerTextarea {
	padding: 10px;
	overflow: auto;
	height: 330px;
	background-color: #0b1218;
	border: 1px solid rgba(114, 250, 255, 0.35);
	border-radius: 12px;
	font-family: "Courier New", monospace;
	color: #e8faff;
}

.buttonGroup {
	display: flex;
}

.buttonGroup button {
	margin-right: 7px;
}

.buttonGroup button:last-child {
	margin-right: 0px;
}

.separator {
	margin-left: 2px;
	margin-right: 2px;
	align-self: center;
	color: black;
	font-size: 175%;
	font-weight: bolder;
}

#toolbarAnswerButtons {
	overflow: auto;
	padding-top: 6px;
	background-color: #070b0e;
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 50%, transparent 50%);
	background-size: 100% 2px;
	background-repeat: repeat-y;
	border: 2px solid rgba(13, 242, 255, 0.8);
	box-shadow: 0 0 5px rgba(0, 223, 255, 0.45), 0 0 10px rgba(0, 223, 255, 0.28);
	border-radius: 12px;
	font-family: "Courier New", monospace;
	color: #ffffff;
	display: flex;
	justify-content: center;
}

#toolbarAnswerButtons button, #answerContainer button {
	width: 25px;
	height: 25px;
	background-color: #72faff;
	background-repeat: no-repeat;
	background-position: center;
	border: 1px solid rgba(114, 250, 255, 0.35);
	border-radius: 6px;
}

#toolbarAnswerButtons button:hover, #answerContainer button:hover {
	background-color: #0b1218;
}

#toolbarCreateButtons {
	overflow: auto;
	padding: 6px;
	color: #ffffff;
	display: flex;
	justify-content: center;
	border-radius: 5px;
	margin-bottom: 10px;
}

#toolbarCreateButtons button {
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-position: center;
	transition: background-color 0.3s ease;
}

#toolbarCreateButtons button:hover {
	background-color: #2a2a2a;
}

#voiceMessageBox {
	display: flex;
	margin-top: 100px;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#voiceMessageBox button {
	width: 45px;
	height: 110px;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #72faff;
}

#voiceMessageBox button:hover {
	background-color: #343333;
}

#messageContent blockquote {
	position: relative;
	padding-left: 30px;
}

#messageContent blockquote::before {
	content: url(../img/icons/answerQuoteRotate.png);
	left: 0;
	top: 0;
}

#messageContent blockquote::after {
	content: url(../img/icons/answerQuote.png);
	right: 0;
	bottom: 0;
}

#messageContent ul, #messageContent ol {
	margin-top: 0;
	margin-bottom: 0;
}

#messageContent ul > li:first-child, #messageContent ol > li:first-child {
	margin-top: 10px;
}

#answerBoldButton, #createBoldButton { background-image: url('../img/icons/answerBold.png'); }
#answerBoldButton:hover, #createBoldButton:hover { background-image: url('../img/icons/answerBoldHover.png'); }
#answerItalicButton, #createItalicButton { background-image: url('../img/icons/answerItalic.png'); }
#answerItalicButton:hover, #createItalicButton:hover { background-image: url('../img/icons/answerItalicHover.png'); }
#answerColorButton, #createColorButton { background-image: url('../img/icons/answerColor.png'); }
#answerColorButton:hover, #createColorButton:hover { background-image: url('../img/icons/answerColorHover.png'); }
#answerAlignLeftButton, #createAlignLeftButton { background-image: url('../img/icons/answerLeft.png'); }
#answerAlignLeftButton:hover, #createAlignLeftButton:hover { background-image: url('../img/icons/answerLeftHover.png'); }
#answerAlignCenterButton, #createAlignCenterButton { background-image: url('../img/icons/answerCenter.png'); }
#answerAlignCenterButton:hover, #createAlignCenterButton:hover { background-image: url('../img/icons/answerCenterHover.png'); }
#answerAlignRightButton, #createAlignRightButton { background-image: url('../img/icons/answerRight.png'); }
#answerAlignRightButton:hover, #createAlignRightButton:hover { background-image: url('../img/icons/answerRightHover.png'); }
#answerLinkButton, #createLinkButton { background-image: url('../img/icons/answerLink.png'); }
#answerLinkButton:hover, #createLinkButton:hover { background-image: url('../img/icons/answerLinkHover.png'); }
#answerImageButton, #createImageButton { background-image: url('../img/icons/answerImage.png'); }
#answerImageButton:hover, #createImageButton:hover { background-image: url('../img/icons/answerImageHover.png'); }
#answerVideoButton, #createVideoButton { background-image: url('../img/icons/answerVideo.png'); }
#answerVideoButton:hover, #createVideoButton:hover { background-image: url('../img/icons/answerVideoHover.png'); }
#answerQuoteButton, #createQuoteButton { background-image: url('../img/icons/answerQuote.png'); }
#answerQuoteButton:hover, #createQuoteButton:hover { background-image: url('../img/icons/answerQuoteHover.png'); }
#answerSpoilerButton, #createSpoilerButton { background-image: url('../img/icons/answerSpoiler.png'); }
#answerSpoilerButton:hover, #createSpoilerButton:hover { background-image: url('../img/icons/answerSpoilerHover.png'); }
#answerOrderedListButton, #createOrderedListButton { background-image: url('../img/icons/answerOrderedList.png'); }
#answerOrderedListButton:hover, #createOrderedListButton:hover { background-image: url('../img/icons/answerOrderedListHover.png'); }
#answerUnorderedListButton, #createUnorderedListButton { background-image: url('../img/icons/answerUnorderedList.png'); }
#answerUnorderedListButton:hover, #createUnorderedListButton:hover { background-image: url('../img/icons/answerUnorderedListHover.png'); }
#answerVoiceMessageButton, #voiceMessageBox button, #createVoiceMessageButton { background-image: url('../img/icons/microphoneOff.png'); }
#answerVoiceMessageButton:hover, #createVoiceMessageButton:hover { background-image: url('../img/icons/microphoneOffHover.png'); }
#answerEmoteButton, #createEmoteButton { background-image: url('../img/icons/answerEmote.png'); }
#answerEmoteButton:hover, #createEmoteButton:hover { background-image: url('../img/icons/answerEmoteHover.png'); }
#voiceMessageBox button { background-image: url('../img/icons/microphoneOffBig.png'); }
#voiceMessageBox button:hover { background-image: url('../img/icons/microphoneOffBigHover.png'); }

#actionsContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 97.33%;
	margin-top: 5px;
}

#actionsContainer button {
	background-color: rgba(2, 14, 20, 0.85);
	border: 2px solid rgba(0, 223, 255, 0.45);
	color: #72faff;
	font-size: 1.2em;
	cursor: pointer;
	box-shadow: 0 0 12px rgba(0, 223, 255, 0.35);
	border-radius: 8px;
	transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}

#actionsContainer button:hover {
	background-color: rgba(14, 36, 46, 0.6);
	color: #72faff;
	box-shadow: 0 0 18px rgba(114, 250, 255, 0.5);
	transform: translateY(-1px);
}

#answerButton {
	background-color: #11202a !important;
	color: #72faff !important;
	box-shadow: 0 0 18px rgba(114, 250, 255, 0.55);
}

#answerButton:hover {
	background-color: rgba(2, 14, 20, 0.85) !important;
	border: 2px solid rgba(0, 223, 255, 0.45);
	color: #72faff !important;
	font-size: 1.2em;
	cursor: pointer;
	box-shadow: 0 0 12px rgba(0, 223, 255, 0.35);
	border-radius: 8px;
	transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}

#inboxAnswerSuccess, #inboxAnswerError {
	text-align: center;
	width: 97.33%;
}

#participants, #messagesList, #messageContent {
	scrollbar-width: thin;
	scrollbar-color: #72faff transparent;
}

#participants::-webkit-scrollbar,
#messagesList::-webkit-scrollbar,
#messageContent::-webkit-scrollbar {
	width: 5px;
}

#participants::-webkit-scrollbar-thumb,
#messagesList::-webkit-scrollbar-thumb,
#messageContent::-webkit-scrollbar-thumb {
	background-color: #72faff;
}

.emote-picker{
	position:fixed;
	z-index:9999;
	min-width:220px;
	max-width:280px;
	max-height:260px;
	overflow:auto;
	background:#0a121a;
	border:1px solid #2c3b4e;
	border-radius:10px;
	box-shadow:0 10px 40px rgba(0,0,0,.5);
	padding:8px;
	display:none
}
.emote-picker .emote-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:6px 8px;
	border-radius:8px;
	color:#cfe6ff;
	cursor:pointer
}
.emote-picker .emote-row:hover{background:#0e1a24}
.emote-badge{
	display:inline-block;
	padding:2px 6px;
	border:1px solid #2a8;
	border-radius:999px;
	font-size:11px;
	color:#9ff
}

@media (max-width: 900px) {
	#conversationOverlay {
		width: 99vw;
		height: 99vh;
		left: 50%;
		top: 40px;
		transform: translateX(-50%);
		min-width: unset;
		min-height: unset;
		padding: 0;
		font-size: 95%;
		max-width: 99vw;
		max-height: 99vh;
		border-radius: 12px;
	}
	#participantsContainer, #messagesContainer { padding: 0 2vw; }
	#participants, #lastSenderInfo { font-size: 0.86em; }
	#actionsContainer { width: 99vw; }
}

@media (max-width: 700px) {
	#conversationOverlay {
		width: 100vw;
		height: calc(100vh - 40px);
		left: 0;
		top: 40px;
		transform: none;
		border-radius: 0;
		padding: 0;
		max-width: 100vw;
		max-height: calc(100vh - 40px);
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: auto;
	}
	#participantsContainer {
		margin-top: 34px;
		flex-direction: column;
		gap: 8px;
		height: auto;
		overflow-x: hidden;
		width: 100vw;
		box-sizing: border-box;
		padding: 0 1vw;
	}
	#participants, #lastSenderInfo {
		width: 100%;
		min-width: 0;
		max-width: 100vw;
		box-sizing: border-box;
		overflow-x: hidden;
	}
	#lastSenderInfo { min-width: 72px; }
	#messagesContainer {
		flex-direction: column;
		gap: 7px;
		min-height: 80px;
		height: auto;
		max-height: none;
		width: 100vw;
		box-sizing: border-box;
		padding: 0 1vw calc(var(--actions-h, 104px) + env(safe-area-inset-bottom)) 1vw;
		overflow-x: hidden;
		overflow-y: auto;
	}
	#messagesList, #messageContent, #answerContainer {
		width: 100%;
		min-width: 0;
		max-width: 100vw;
		box-sizing: border-box;
		overflow-x: hidden;
	}
	#messagesList {
		min-height: 56px;
		height: 25vh;
		max-height: 26vh;
	}
	#messageContent {
		min-height: 56px;
		height: 24vh;
		max-height: 24vh;
		word-break: break-word;
		overflow-x: hidden;
		box-sizing: border-box;
	}
	#toolbarAnswerButtons {
		min-height: 40px;
		height: 46px;
		padding-top: 8px;
		padding-bottom: 8px;
		overflow-x: auto;
		overflow-y: hidden;
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		scrollbar-width: thin;
	}
	#toolbarAnswerButtons button {
		flex: 0 0 auto;
		margin-right: 2px;
	}
	#answerTextarea {
		min-height: 130px;
		height: auto;
		max-height: var(--answerMax, 44vh);
		overflow-y: auto;
		margin-top: 10px;
		margin-bottom: 6px;
	}
	#actionsContainer {
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;
		margin: 0 !important;
		border-radius: 0;
		background: #070b0e;
		z-index: 9999;
		padding-bottom: env(safe-area-inset-bottom);
	}
}

@media (max-width: 480px) {
	#conversationOverlay { font-size: 13px; }
	#conversationTitle { font-size: 13px; }
	#participantsContainer, #messagesContainer { padding: 0 1vw; }
	#messagesList, #messageContent { font-size: 12px; }
	#toolbarAnswerButtons {
		min-height: 38px;
		height: 44px;
		padding-top: 7px;
		padding-bottom: 7px;
	}
	#answerTextarea {
		min-height: 140px;
		height: auto;
		max-height: var(--answerMax, 48vh);
		font-size: 13px;
		margin-top: 8px;
		margin-bottom: 4px;
	}
}

body.death-mode {
    background: #000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 2vh 4vw;
    box-sizing: border-box;
}

body.death-mode #leftContainer,
body.death-mode #rightContainer > *:not(#navbar),
body.death-mode #characterAvatar {
    display: none !important;
}

#deathOverlay {
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: "Courier New", monospace;
    color: #ff4c4c;
    background: rgba(0, 0, 0, 0.85);
    padding: 40px;
    border: 2px solid #ff4c4c;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(255, 76, 76, 0.7);
    max-width: 90%;
}

#deathOverlay .death-title {
    font-size: clamp(24px, 6vw, 48px);
    margin: 2vh 0 1vh;
    line-height: 1.2;
    word-break: break-word;
}

#deathOverlay .death-subtitle {
    font-size: clamp(14px, 4vw, 22px);
    color: #ffffff;
    animation: blink 1.5s infinite;
}

.avatar-container {
    position: relative;
    width: 40vw;
    max-width: 150px;
    aspect-ratio: 1/1;
    margin: 0 auto 2vh auto;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ff4c4c;
    box-shadow: 0 0 20px #ff4c4c, 0 0 40px rgba(255, 76, 76, 0.8);
}

.death-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    z-index: 1;
    display: block;
}

.blood-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.95;
}

.gear-svg {
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.6));
    width: clamp(40px, 20vw, 80px);
    height: clamp(40px, 20vw, 80px);
}

.death-icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2vh;
}

.death-icon {
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));
}

.skull {
    display: inline-block;
    font-size: clamp(24px, 5vw, 48px);
    margin: 0 1vw;
}

.skull-left, .skull-right {
    animation: skull-shake 1.2s infinite ease-in-out;
}

@keyframes skull-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    75% { transform: rotate(-3deg); }
}

.death-reason {
    font-size: clamp(14px, 4vw, 18px);
    margin: 2vh 0;
    color: #ff8c8c;
    font-style: italic;
    animation: fadein 2s ease;
}

@keyframes fadein {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.rotating {
    animation: rotate 12s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.revive-button {
    padding: 10px 20px;
    font-size: 16px;
    background: #ff4c4c;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}
.revive-button:hover {
    background: #ff1c1c;
}

@media (max-width: 1024px) {
    body.death-mode {
        flex-direction: column;
        padding: 4vh 2vw;
    }

    #deathOverlay {
        padding: 20px;
        border-width: 1.5px;
        border-radius: 10px;
        max-width: 95%;
    }

    .avatar-container {
        width: 60vw;
        max-width: 200px;
        margin-bottom: 3vh;
        border-width: 3px;
    }

    .gear-svg {
        width: clamp(36px, 18vw, 70px);
        height: clamp(36px, 18vw, 70px);
    }

    .death-title {
        font-size: clamp(20px, 5vw, 40px);
        margin-top: 1vh;
    }

    .death-reason {
        font-size: clamp(13px, 3.5vw, 17px);
        margin: 1.5vh 0;
    }

    .death-subtitle {
        font-size: clamp(13px, 3.5vw, 18px);
        margin-top: 0.5vh;
    }

    .revive-button {
        padding: 8px 16px;
        font-size: 14px;
        border-radius: 6px;
    }
}

@media (max-width: 600px) {
    #deathOverlay {
        padding: 15px;
        border-width: 1px;
        border-radius: 8px;
    }

    .avatar-container {
        width: 70vw;
        max-width: 160px;
        border-width: 2.5px;
    }

    .gear-svg {
        width: clamp(32px, 16vw, 60px);
        height: clamp(32px, 16vw, 60px);
    }

    .death-title {
        font-size: clamp(18px, 4.5vw, 36px);
    }

    .death-reason {
        font-size: clamp(12px, 3.2vw, 16px);
    }

    .death-subtitle {
        font-size: clamp(12px, 3.2vw, 16px);
    }

    .revive-button {
        padding: 7px 14px;
        font-size: 13px;
    }
}

#statsOverlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.85);
    border: 2px solid rgba(13, 242, 255, 0.8);
    box-shadow: 0 0 20px rgba(13, 242, 255, 0.6), 0 0 40px rgba(13, 242, 255, 0.4);
    border-radius: 12px;
    padding: 20px;
    width: 700px;
    height: 800px;
    text-align: center;
    display: none;
    z-index: 10000;
    box-sizing: border-box;
    overflow-y: auto;
}

#statsOverlay .stats-overlay-content {
    position: relative;
}

#statsOverlay #closeStatsOverlay {
    position: fixed;
    top: 1px;
    right: 1px;
    background: #f44336;
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
    border-radius: 12px;
    z-index: 1;
}

#statsOverlay #closeStatsOverlay:hover {
    background: #d32f2f;
}

#statsOverlay .tab-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

#statsOverlay .tab {
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(13, 242, 255, 0.7);
    color: #0df2ff;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    margin: 5px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    min-width: 85px;
    text-align: center;
    font-size: 1em;
}

#statsOverlay .tab:hover {
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
}

#statsOverlay .tab.active {
    background-color: rgba(13, 242, 255, 0.4);
    box-shadow: 0 0 15px rgba(13, 242, 255, 1);
}

#statsOverlay .stats-section {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(13, 242, 255, 0.7);
    padding: 10px;
    margin-top: 10px;
    border-radius: 8px;
}

#statsOverlay .stats-section h3 {
    margin: 0;
    color: #0df2ff;
    text-align: center;
}

#statsOverlay .stats-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    font-size: 14px;
    flex-wrap: wrap;
}

#statsOverlay .stats-item span {
    flex: 1;
    text-align: left;
    word-break: break-word;
}

#statsOverlay .stats-value {
    flex: 1;
    text-align: center;
    font-weight: bold;
}

#statsOverlay .stats-buttons {
    display: flex;
    gap: 5px;
}

#statsOverlay .stat-increase, 
#statsOverlay .stat-decrease {
    background-color: rgba(13, 242, 255, 0.5);
    border: 1px solid rgba(13, 242, 255, 1);
    color: white;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: background 0.3s ease;
    width: 24px;
    height: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    padding: 0;
}

#statsOverlay .stat-increase:hover, 
#statsOverlay .stat-decrease:hover {
    background-color: rgba(13, 242, 255, 1);
}

#statsOverlay .stat-increase-x10 {
    background-color: rgba(13, 242, 255, 0.5);
    border: 1px solid rgba(13, 242, 255, 1);
    color: white;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: background 0.3s ease;
    font-size: 13px;
    width: 32px;
    height: 24px;
    padding: 0 2px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
#statsOverlay .stat-increase-x10:hover {
    background-color: rgba(13, 242, 255, 1);
    color: #111;
}

#statsOverlay #validateStatsButton {
    margin: 15px auto 0 auto;
    padding: 8px 15px;
    font-size: 14px;
    background-color: rgba(13, 242, 255, 0.8);
    border: 1px solid rgba(13, 242, 255, 1);
    color: black;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.3s ease;
    display: block;
    width: fit-content;
}

#statsOverlay #validateStatsButton:hover {
    background-color: rgba(13, 242, 255, 1);
}

#statsOverlay .error-message {
    color: red;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    display: none;
}

#statsOverlay .talent-path-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}

#statsOverlay .talent-path-button {
    background-color: rgba(13, 242, 255, 0.5);
    border: 1px solid rgba(13, 242, 255, 1);
    color: white;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: background 0.3s ease;
    width: 90%;
    padding: 10px;
    margin: 5px;
    font-size: 16px;
}

#statsOverlay .talent-path-button:hover {
    background-color: rgba(13, 242, 255, 1);
}

#statsOverlay .talent-tier {
    margin-top: 20px;
    text-align: center;
}

#talentTreeContainer {
    width: 100%;
    height: calc(100% - 50px);
    max-height: 65vh;
    position: relative;
    background: radial-gradient(circle, #16213e, #0f3460);
    border: 2px solid rgba(13,242,255,0.7);
    border-radius: 10px;
    cursor: grab;
    overflow-x: auto;
    overflow-y: auto;
    white-space: normal;
    padding-bottom: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: none;
}

.combat-talents {
    background: rgba(255, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
}

.rp-talents {
    background: rgba(0, 0, 255, 0.2);
    padding: 10px;
    border-radius: 5px;
}

.talent-path-section {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid rgba(13, 242, 255, 0.5);
    border-radius: 8px;
}

.talent-path-section h3 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #0ff;
}

.talent-path-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.talent-path-buttons button {
    background: rgba(13, 242, 255, 0.8);
    border: 1px solid rgba(13, 242, 255, 1);
    color: black;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.talent-path-buttons button:hover {
    background: rgba(13, 242, 255, 1);
}

.combat-path {
    justify-content: center;
}

.development-path {
    flex-wrap: wrap;
    justify-content: space-around;
}

.talent-path-button {
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

#talentTreeContainer::-webkit-scrollbar {
    display: none;
}

#validateTalentsButton:hover {
    background-color: rgba(13, 242, 255, 1);
}

.branches-container {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    white-space: nowrap;
}

.branches-container::-webkit-scrollbar {
    display: none;
}

.talent-branch {
    width: 140px;
    text-align: center;
    border: 1px solid rgba(13,242,255,0.5);
    border-radius: 8px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.branch-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

.branch-header {
    background: rgba(13, 242, 255, 0.3);
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    max-width: 100%;
    min-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.branch-content {
    position: relative;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

#statsOverlay #talentTree {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#statsOverlay .talent-node {
    width: 50px;
    height: 50px;
    background-color: #16213e;
    border: 2px solid #0f3460;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

#statsOverlay .talent-node img {
    width: 80%;
    height: 80%;
}

#statsOverlay .talent-node:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 150, 255, 0.7);
}

#statsOverlay .talent-node.acquired {
    background-color: rgba(13, 242, 255, 0.9);
    border: 2px solid white;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}

.talent-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    text-align: left;
    display: none;
    z-index: 10000;
    width: auto;
    max-width: 250px;
    box-shadow: 0 0 10px rgba(0, 150, 255, 0.8);
    white-space: normal;
    word-wrap: break-word;
}

.tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.tooltip-icon {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.tooltip-title {
    font-weight: bold;
    font-size: 16px;
    color: #0df2ff;
}

.tooltip-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 1200px) {
    #statsOverlay {
        width: 95vw;
        height: 90vh;
        max-width: 900px;
        max-height: 95vh;
        padding: 12px 2vw;
    }
}

@media (max-width: 900px) {
    #statsOverlay {
        width: 99vw;
        height: 98vh;
        left: 0.5vw;
        top: 2vh;
        max-width: 99vw;
        max-height: 98vh;
        padding: 10px 1vw;
        border-radius: 8px;
        transform: none;
    }
}

@media (max-width: 700px) {
    #statsOverlay {
        top: 75px;
        left: 0;
        right: 0;
        transform: none;
        width: 100vw;
        height: calc(100vh - 50px);
        max-width: 100vw;
        max-height: calc(100vh - 50px);
        border-radius: 0;
        padding: 0 0 12px 0;
        box-sizing: border-box;
    }
    #statsOverlay .stats-section,
    #statsOverlay .tab,
    #statsOverlay .talent-path-button,
    #statsOverlay .stats-item,
    #statsOverlay .talent-path-section {
        font-size: 0.98em;
        padding-left: 4px;
        padding-right: 4px;
    }
    #statsOverlay .stats-overlay-content {
        padding: 0 1vw;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    #statsOverlay {
        font-size: 12px;
        padding: 0 0 8px 0;
    }
    #statsOverlay .tab {
        font-size: 0.95em;
        min-width: 65px;
        padding: 6px 4px;
    }
    #statsOverlay .stats-item {
        font-size: 12px;
        padding: 7px 2px;
    }
    #statsOverlay .talent-path-button {
        font-size: 14px;
        padding: 7px;
    }
}

#landInformationsOverlay {
    position: absolute;
    bottom: 9.33%;
    width: 100%;
    height: 18.66%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    border-top: 2px solid rgba(13, 242, 255, 0.8);
    border-bottom: 2px solid rgba(13, 242, 255, 0.8);
    box-shadow: 0 0 15px rgba(13, 242, 255, 0.5), 0 0 30px rgba(13, 242, 255, 0.4);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #ffffff;
    animation: slide-up 0.5s ease forwards;
}

@keyframes slide-up {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

#streetNameDisplay {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(13, 242, 255, 0.8);
    margin-bottom: 10px;
}

#closeLandOverlayButton {
    position: absolute;
    top: 0px;
    right: 19px;
    padding: 5px 10px;
    border: none;
    background: #f44336;
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px;
    transition: background 0.3s ease;
}

#closeLandOverlayButton:hover {
    background: #d32f2f;
}

#landInformationsOverlay .overlay-action-button {
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(13, 242, 255, 0.7);
    color: #0df2ff;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    margin: 5px 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#landInformationsOverlay .overlay-action-button:hover {
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
}

#characterButtonsOverlay {
    top: 0;
    display: none;
    animation: slide-down 0.5s ease forwards;
}

@keyframes slide-up {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-down {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

#closeCharacterButtonsOverlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px !important;
    height: 20px;
    border-top-right-radius: 12px;
    border: none !important;
    background: #f44336 !important;
    color: #ffffff !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#closeCharacterButtonsOverlay:hover {
    background: #d32f2f !important;
}

#gameButtonsOverlay, #characterButtonsOverlay {
    position: absolute;
    width: 100%;
    height: 9.33%;
    background: linear-gradient(90deg, rgba(13, 242, 255, 0.15), rgba(13, 242, 255, 0.3), rgba(13, 242, 255, 0.15));
    border-top: 2px solid rgba(13, 242, 255, 0.8);
    border-bottom: 2px solid rgba(13, 242, 255, 0.8);
    box-shadow: 0 0 20px rgba(13, 242, 255, 0.5), 0 0 30px rgba(13, 242, 255, 0.4);
    z-index: 5;
    animation: glow-effect 3s ease-in-out infinite;
    backdrop-filter: blur(2px);
}

@keyframes glow-effect {
    0% {
        box-shadow: 0 0 10px rgba(13, 242, 255, 0.4), 0 0 25px rgba(13, 242, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(13, 242, 255, 0.7), 0 0 40px rgba(13, 242, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 10px rgba(13, 242, 255, 0.4), 0 0 25px rgba(13, 242, 255, 0.3);
    }
}

#gameButtonsOverlay {
    bottom: 0;
    animation: slide-up 0.5s ease forwards;
}

#gameButtonsOverlay.expanded {
    height: 15%;
    transition: height 0.3s ease-in-out;
}

#gameButtonsOverlay.collapsed {
    height: 9.33%;
    transition: height 0.3s ease-in-out;
}

#toggleButtons {
    position: absolute;
    bottom: 5px;
    left: 5px;
    cursor: pointer;
    z-index: 6;
}

#buttonsContainer, #characterButtonsContainer {
    position: absolute;
    height: 100%;
    width: 97.14%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    z-index: 6;
}

#characterButtonsContainerDiv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 5px;
    width: 95%;
    height: 90%;
    max-height: 85%;
}

#characterButtonsContainerDiv::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

#characterButtonsContainerDiv::-webkit-scrollbar-thumb {
    background-color: #0df2ff;
}

#characterButtonsContainerDiv::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.button-border, .character-button-border {
    width: 60px;
    height: 60px;
    background: url('../img/icons/containerButtons.png') no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.button-border:hover, .character-button-border:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.6), 0 0 30px rgba(0, 223, 255, 0.8);
}

.button-border img, .character-button-border img {
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.button-border .tooltip, .character-button-border .tooltip {
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
}

.button-border:hover .tooltip, .character-button-border:hover .tooltip {
    display: block;
    opacity: 1;
}

#characterButtonsCard {
    background-color: #2a2a2a;
    color: #0df2ff;
    border: 1px solid #0df2ff;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#characterButtonsCard:hover {
    background-color: #0df2ff;
    color: #323232;
}

@media (max-width: 900px) {
    #gameButtonsOverlay, #characterButtonsOverlay {
        height: 13vw;
        min-height: 60px;
        max-height: 22vw;
        padding: 0;
        left: 0;
        width: 100vw;
        border-radius: 11px 11px 0 0;
        font-size: 1em;
    }
    #gameButtonsOverlay.expanded {
        height: 22vw;
        min-height: 80px;
        max-height: 32vw;
    }
    #gameButtonsOverlay.collapsed {
        height: 13vw;
        min-height: 60px;
        max-height: 22vw;
    }
    #toggleButtons {
        bottom: 6px;
        left: 7px;
        font-size: 1.3em;
    }
    #buttonsContainer, #characterButtonsContainer {
        position: absolute;
        height: 100%;
        width: 99vw;
        left: 0;
        padding: 0 2vw;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2vw;
        overflow-x: auto;
        overflow-y: hidden;
    }
    #characterButtonsContainerDiv {
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100vw;
        min-width: 0;
        max-width: 100vw;
        min-width: fit-content;
        height: 100%;
        max-height: 100%;
        padding: 5px 1vw;
        gap: 2vw;
        scrollbar-width: thin;
        display: flex;
    }
    .button-border, .character-button-border {
        width: 42px;
        height: 42px;
        min-width: 36px;
        min-height: 36px;
        margin: 0 2vw;
        border-radius: 9px;
    }
    .button-border img, .character-button-border img {
        width: 34px;
        height: 34px;
    }
    .button-border .tooltip, .character-button-border .tooltip {
        width: 160px;
        font-size: 0.98em;
        padding: 4px 0;
        margin-left: -80px;
    }
}
@media (max-width: 600px), (max-height: 500px) {
    #gameButtonsOverlay, #characterButtonsOverlay {
        height: 50px;
        min-height: 44px;
        max-height: 70px;
        border-radius: 9px 9px 0 0;
        font-size: 1em;
    }
    #gameButtonsOverlay.expanded {
        height: 74px;
        min-height: 60px;
        max-height: 100px;
    }
    #buttonsContainer, #characterButtonsContainer {
        width: 100vw;
        padding: 0 2vw;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2vw;
        overflow-x: auto;
    }
    #characterButtonsContainerDiv {
        width: 100vw;
        max-width: 100vw;
        min-width: fit-content;
        padding: 4px 0.5vw;
        gap: 1vw;
        justify-content: center;
        align-items: center;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .button-border, .character-button-border {
        width: 35px;
        height: 35px;
        min-width: 28px;
        min-height: 28px;
        border-radius: 7px;
        margin: 0 1vw;
    }
    .button-border img, .character-button-border img {
        width: 26px;
        height: 26px;
    }
    .button-border .tooltip, .character-button-border .tooltip {
        width: 120px;
        font-size: 0.92em;
        margin-left: -60px;
        padding: 3px 0;
    }
}

@media (max-width: 900px) {
    #landInformationsOverlay {
        bottom: calc(13vw + 4px);
        height: auto;
        min-height: 14vw;
        max-height: 28vw;
        font-size: 1em;
        padding: 6px 4vw;
        border-top-width: 1.5px;
        border-bottom-width: 1.5px;
        border-radius: 9px 9px 0 0;
    }
    #streetNameDisplay {
        font-size: 1.1em;
        margin-bottom: 6px;
    }
    #closeLandOverlayButton {
        top: 2px;
        right: 10px;
        padding: 4px 8px;
        font-size: 0.9em;
        border-radius: 6px;
    }
    #landInformationsOverlay .overlay-action-button {
        padding: 6px 10px;
        font-size: 0.9em;
        margin: 3px 0;
        border-radius: 6px;
    }
}

@media (max-width: 600px), (max-height: 500px) {
    #landInformationsOverlay {
        bottom: calc(50px + 4px);
        height: auto;
        min-height: 44px;
        max-height: 90px;
        font-size: 0.92em;
        padding: 5px 3vw;
        border-top-width: 1px;
        border-bottom-width: 1px;
    }
    #streetNameDisplay {
        font-size: 1em;
        margin-bottom: 4px;
    }
    #closeLandOverlayButton {
        padding: 3px 6px;
        font-size: 0.85em;
        top: 2px;
        right: 8px;
        border-radius: 5px;
    }
    #landInformationsOverlay .overlay-action-button {
        padding: 5px 8px;
        font-size: 0.85em;
        margin: 2px 0;
        border-radius: 5px;
    }
}

.notransition {
    transition: none !important;
}

.tooltip {
    display: none;
    position: absolute;
    background-color: #080808;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%);
    background-size: 100% 3px;
    background-repeat: repeat-y;
    background-attachment: fixed;
    font-family: "Courier New", monospace;
    border: 1px solid #0df2ff;
    padding: 7px 12px 7px 12px;
    color: white;
    font-size: 13px;
    z-index: 999999;
    text-align: left;
    min-width: 220px;
    max-width: 340px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.45;
    box-sizing: border-box;
    box-shadow: 0 2px 12px #021822e0;
}

.tooltip.visible {
    display: block;
    z-index: 9999;
}

.tooltip-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    z-index: 9999;
}

.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #132a33;
    border: 1.5px solid #0df2ff;
    font-family: inherit;
    font-weight: bold;
    color: #00eaff;
    font-size: 13px;
    box-shadow: 0 1px 6px #021822c0;
    transition: box-shadow .18s, border-color .15s, background .2s;
    margin-left: 5px;
    cursor: pointer;
    outline: none;
}
.help-icon:hover, .help-icon:focus {
    background: #021822;
    border-color: #fff;
    color: #fff;
    box-shadow: 0 0 0 2px #0df2ff80;
}

.tooltip {
    pointer-events: none;
}
.tooltip-wrapper:hover .tooltip,
.tooltip-wrapper:focus .tooltip,
.tooltip-wrapper:active .tooltip {
    display: block;
    pointer-events: auto;
}

.trade-overlay {
    position: fixed;
    top: 30%;
    left: 15%;
    z-index: 1500;
    background-color: #080808;
    border: 2px solid #0df2ff;
    border-radius: 10px;
    padding: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.trade-section {
    flex: 1;
    margin: 10px;
}

.trade-section-left, .trade-section-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sections-container {
    display: flex;
    flex: 1;
}

.trade-title {
    text-align: center;
    color: white;
    margin-bottom: 20px;
}

.trade-section-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.trade-section-right .trade-item-slot {
    opacity: 0.5;
    pointer-events: none;
}

.trade-section-right .trade-credits-input {
    opacity: 0.5;
    pointer-events: none;
}

.trade-avatar {
    width: 128px;
    height: 128px;
    background-size: cover;
    border-radius: 64px;
    margin-bottom: 20px;
}

.trade-items-row {
    display: flex;
    justify-content: center;
}

.trade-item-slot {
    width: 64px;
    height: 64px;
    background-color: #2a2a2a;
    border: 1px solid #0df2ff;
    margin: 5px;
    border-radius: 8px;
}

.trade-action-button {
    padding: 10px 20px;
    background-color: #0df2ff;
    border: 1px solid #2a2a2a;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 0;
}

.trade-action-button:hover {
    padding: 10px 20px;
    background-color: #2a2a2a;
    border: 1px solid #0df2ff;
    border-radius: 5px;
    margin: 10px 0;
}

.trade-credits-input {
    margin-top: 20px;
    padding: 10px;
    text-align: center;
    background-color: #2a2a2a;
    border: 1px solid #0df2ff;
    color: white;
}

.trade-credits-icon {
    width: 21px;
    height: 15px;
    vertical-align: middle;
}

@media (max-width: 1024px) {
  .trade-overlay {
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 86vw;
    max-width: 900px;
    padding: 16px;
    border-radius: 10px;
    max-height: 88vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sections-container {
    gap: 14px;
  }

  .trade-title {
    margin-bottom: 14px;
    font-size: 1.2rem;
  }

  .trade-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 14px;
  }

  .trade-items-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .trade-item-slot {
    width: 56px;
    height: 56px;
    margin: 4px;
  }

  .trade-action-button {
    padding: 10px 14px;
    margin: 8px 0;
  }

  .trade-credits-input {
    width: 100%;
    margin-top: 14px;
  }
}

@media (max-width: 640px) {
  .trade-overlay {
    top: calc(env(safe-area-inset-top, 10px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 94vw;
    max-width: 520px;
    padding: 14px;
    border-radius: 10px;
    max-height: 90vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sections-container {
    flex-direction: column;
    gap: 12px;
  }

  .trade-section {
    margin: 6px 0;
    width: 100%;
  }

  .trade-section-left,
  .trade-section-right,
  .trade-section-center {
    width: 100%;
    align-items: center;
  }

  .trade-title {
    margin-bottom: 12px;
    font-size: 1.1rem;
    text-align: center;
  }

  .trade-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin-bottom: 12px;
  }

  .trade-items-row {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .trade-item-slot {
    width: 52px;
    height: 52px;
    margin: 3px;
  }

  .trade-action-button {
    width: 100%;
    padding: 10px;
    margin: 8px 0 0 0;
  }

  .trade-credits-input {
    width: 100%;
    margin-top: 12px;
    padding: 10px;
  }

  .trade-credits-icon {
    width: 20px;
    height: 14px;
  }
}

#settingsOverlay {
    position: fixed;
    z-index: 999;
    background-color: #0d0d0d;
    color: #0df2ff;
    top: 20%;
    left: 50%;
    width: 570px;
    height: 500px;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Courier New', monospace;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.4), 0 0 20px rgba(0, 223, 255, 0.3);
    overflow: auto;
    animation: pulse-border 3s ease-in-out infinite;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 10px rgba(0, 223, 255, 0.4), 0 0 20px rgba(0, 223, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 223, 255, 0.7), 0 0 25px rgba(0, 223, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 10px rgba(0, 223, 255, 0.4), 0 0 20px rgba(0, 223, 255, 0.3);
    }
}

#settingsOverlay h2 {
    text-align: center;
    color: #ff4c4c;
    font-size: 1.5em;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255, 76, 76, 0.7);
}

#settingsTableContainer {
    max-height: 175px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 20px;
    background-color: #141414;
    padding: 10px;
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 223, 255, 0.5);
}

#settingsTable th, #settingsTable td {
    padding: 10px;
    text-align: center;
    font-size: 0.9em;
    color: #0df2ff;
    border-bottom: 1px solid rgba(0, 223, 255, 0.3);
}

#settingsTable th {
    color: #ff4c4c;
}

#settingsTableContainer::-webkit-scrollbar {
    width: 5px;
}

#settingsTableContainer::-webkit-scrollbar-thumb {
    background: #0df2ff;
}

@media (max-width: 900px) {
    #settingsOverlay {
        width: 95vw;
        min-width: 0;
        max-width: 99vw;
        height: auto;
        max-height: 96vh;
        top: 3vw;
        left: 50%;
        transform: translateX(-50%);
        padding: 3vw 2vw 3vw 2vw;
        font-size: 1em;
        border-radius: 8px;
        overflow-y: auto;
        box-sizing: border-box;
    }
    #settingsOverlay h2 {
        font-size: 1.2em;
        margin-bottom: 14px;
    }
    #settingsTableContainer {
        max-height: 160px;
        padding: 7px;
    }
    #settingsTable th, #settingsTable td {
        padding: 7px;
        font-size: 0.95em;
    }
}
@media (max-width: 600px), (max-height: 500px) {
    #settingsOverlay {
        width: 99vw;
        max-width: 99vw;
        min-width: 0;
        height: auto;
        max-height: 98vh;
        padding: 8vw 2vw 8vw 2vw;
        font-size: 1em;
        top: 1vh;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 7px;
    }
    #settingsOverlay h2 {
        font-size: 1.08em;
        margin-bottom: 10px;
    }
    #settingsTableContainer {
        max-height: 110px;
        padding: 4px;
    }
    #settingsTable th, #settingsTable td {
        padding: 4px;
        font-size: 0.93em;
    }
}

#ticketOverlay.overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ticketOverlay .overlayContent {
    background: #10151c;
    border: 1px solid #00f0ff55;
    border-radius: 10px;
    padding: 20px;
    width: 480px;
    box-sizing: border-box;
    box-shadow: 0 0 20px #00f0ff33;
    color: #e0f0ff;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: Arial, sans-serif;
}

#ticketOverlay input,
#ticketOverlay select,
#ticketOverlay textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #0df2ff;
    border-radius: 5px;
    background-color: #1a1f26;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
    resize: none;
}

#ticketOverlay .overlayButtons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#ticketOverlay button {
    background-color: #00c2ff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#ticketOverlay button:hover {
    background-color: #009ec7;
}

@media (max-width: 1024px) {
  #ticketOverlay .overlayContent {
    width: 90vw;
    max-width: 600px;
    padding: 16px;
    max-height: 88vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  #ticketOverlay input,
  #ticketOverlay select,
  #ticketOverlay textarea {
    font-size: 15px;
    padding: 10px;
  }

  #ticketOverlay .overlayButtons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  #ticketOverlay button {
    padding: 10px 14px;
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  #ticketOverlay .overlayContent {
    width: 94vw;
    max-width: 500px;
    padding: 14px;
    max-height: 90vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }

  #ticketOverlay input,
  #ticketOverlay select,
  #ticketOverlay textarea {
    font-size: 14px;
    padding: 9px;
  }

  #ticketOverlay .overlayButtons {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #ticketOverlay button {
    width: 100%;
    padding: 10px;
    font-size: 14px;
  }
}

#addCharacterContainer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

#addCharacterInput {
    background-color: #0a0a0a;
    border: 2px solid #0df2ff;
    color: #0df2ff;
    font-family: 'Courier New', monospace;
    padding: 8px 12px;
    border-radius: 5px;
    flex-grow: 1;
    margin-right: 10px;
    outline: none;
}

#addCharacterContainer button {
    background-color: #0df2ff;
    border: none;
    color: #323232;
    padding: 8px 15px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.4);
    transition: all 0.3s ease;
}

#addCharacterContainer button:hover {
    background-color: #2a2a2a;
    color: #0df2ff;
    box-shadow: 0 0 25px rgba(0, 223, 255, 0.6);
}

#addCharacterError, #addCharacterSuccess {
    text-align: center;
    display: block;
    color: #ff4c4c;
}

#settingsTableContainer input[type="checkbox"] {
    display: none;
}

.custom-checkbox::before {
    content: "";
    display: inline-block;
    background-color: #505050;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    position: relative;
    top: -2px;
    transition: background-color 0.2s ease;
}

input[type="checkbox"]:checked + label .custom-checkbox::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" fill="#0df2ff"><path d="M5.2 11.5l-2.8-3 .7-.6 2.2 2.4 4.8-4.9 .8.6-5.7 5.5z"/></svg>') no-repeat center center;
}

#hideSystemMessagesLabel, #receiveSoundNotificationsLabel, #categorySelectLabel {
    font-size: small;
    color: #0df2ff;
}

.message {
    white-space: pre-wrap;
    line-height: 1.2;
    margin-left: 5px;
    margin-bottom: 10px;
}

.message:first-child {
    margin-top: 5px;
}

.message:last-child {
    margin-bottom: 0;
}

.message .normal {
    color: #fff;
}

.message .italic {
    color: white;
    font-style: italic;
}

.message .italic-cyan {
    color: #0df2ff;
    font-style: italic;
}

.message .name {
    color: #0df2ff;
}

.message .me {
    color: #0df2ff;
}

.message .me-whisper {
    color: #b0b4c0;
}

.message .me-scream {
    color: rgb(150, 0, 0);
}

.message .whisper {
    color: #8ec3e4;
}

.message .whisper-italic {
    color: #5da6c9;
    font-style: italic;
}

.message .scream {
    color: rgb(255, 0, 0);
}

.message .scream-italic {
    color: rgb(150, 0, 0);
    font-style: italic;
}

.message .me-whisper-italic {
    color: #a5c1d8;
    font-style: italic;
}

.message .me-scream-italic {
    color: red;
    font-style: italic;
}

#avatarTooltip {
    position: absolute;
    z-index: 10;
    display: none;
    width: 150px;
    height: 150px;
}

#avatarTooltip img {
    width: 100%;
    height: 100%;
}

.com-overlay {
    position: absolute;
    top: 8vh;
    left: 50%;
    width: 500px;
    height: 580px;
    background: rgba(10, 10, 10, 0.95);
    border: 2px solid #0df2ff;
    border-radius: 18px;
    box-shadow: 0 0 30px #0df2ff88;
    z-index: 8000;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Courier New", monospace;
    overflow: hidden;
    animation: fadeInScale 0.3s ease forwards;
    min-width: 260px;
    min-height: 320px;
    max-width: 98vw;
    max-height: 97vh;
}

@media (max-width: 900px) {
    .com-overlay {
        width: 95vw;
        max-width: 600px;
        height: 84vh;
        min-height: 270px;
        top: 4vh;
        padding: 10px 6px 10px 6px;
    }
}

@media (max-width: 600px) {
    .com-overlay {
        width: 99vw;
        left: 0;
        transform: none;
        border-radius: 0 0 18px 18px;
        height: 97vh;
        min-height: 190px;
        max-width: 100vw;
        top: 0;
        padding: 2vw 2vw 12vw 2vw;
    }
}

@media (max-width: 400px) {
    .com-overlay {
        min-width: 0;
        padding: 1vw 0.7vw 13vw 0.7vw;
    }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: translateX(-50%) scale(0.8);}
    to { opacity: 1; transform: translateX(-50%) scale(1);}
}
@keyframes fadeOutScale {
    from { opacity: 1; transform: translateX(-50%) scale(1);}
    to { opacity: 0; transform: translateX(-50%) scale(0.8);}
}

.com-tab-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 10px;
    width: 100%;
}

.com-tab-button {
    width: auto;
    min-width: 70px;
    height: 28px;
    background: radial-gradient(circle, rgba(0, 223, 255, 0.7), rgba(0, 223, 255, 0.3));
    border: 2px solid #00F0FF;
    color: #000;
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s;
    box-shadow: 0 0 5px #00F0FF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75em;
    font-family: 'Orbitron', sans-serif;
}

.com-tab-button:hover,
.com-tab-button.active {
    background: rgba(0, 223, 255, 0.8);
    color: #000;
    box-shadow: 0 0 10px #00F0FF;
}

.com-content-container {
    flex-grow: 1;
    width: 100%;
    background: #0a0a0a;
    border: 1px solid #0df2ff44;
    border-radius: 8px;
    padding: 12px;
    padding-bottom: 40px;
    overflow-y: auto;
    max-height: calc(100% - 40px);
    min-height: 160px;
}

.com-tab-content {
    font-size: 1.1em;
    color: #ccc;
}

.com-tab-content b {
    color: #00f0ff;
    font-weight: bold;
}

.com-close-button {
    position: absolute;
    top: 50px;
    right: 14px;
    color: #0df2ff;
    font-size: 1.4em;
    cursor: pointer;
    font-weight: bold;
    z-index: 2;
}

.com-close-button:hover {
    transform: rotate(90deg) scale(1.2);
    color: #ff0055;
    text-shadow: 0 0 5px #ff0055;
}

.com-svg-bg {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    opacity: 0.3;
    z-index: 0;
}

.com-svg-bg svg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2;
}

#notificationsContainer {
    width: 100%;
    max-height: 670px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #000000;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 223, 255, 0.4), 0 0 40px rgba(0, 223, 255, 0.3);
    overflow: hidden;
}

#notificationsContent {
    overflow-y: auto;
    max-height: 620px;
    background-color: #0a0a0a;
    padding: 10px;
    border-radius: 10px;
    box-shadow: inset 0 0 15px rgba(0, 223, 255, 0.5);
}

#notificationsContainer .notification-item {
    position: relative;
    border: 1px solid rgba(0, 223, 255, 0.5);
    color: #0df2ff;
    background-color: #141414;
    text-align: left;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.5);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#notificationsContainer .notification-item:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
}

#notificationsContainer .notification-item:last-child {
    margin-bottom: 0;
}

#notificationsContainer .notification-date {
    font-size: 0.8em;
    color: #0df2ff;
    text-align: right;
    margin-top: 10px;
}

#notificationsContainer .notification-message {
    margin-top: 5px;
    color: #ffffff;
}

#notificationsContainer .no-notifications {
    color: #0df2ff;
    text-align: center;
    padding: 15px;
    background-color: #141414;
    border: 1px solid rgba(0, 223, 255, 0.5);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.5);
}

#notificationButtons {
    text-align: center;
    margin-bottom: 20px;
}

#additionalButtonsContainer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 10px;
}

#notificationsContainer button {
    background-color: #000;
    color: #0df2ff;
    border: 2px solid rgba(0, 223, 255, 0.5);
    font-size: large;
    cursor: pointer;
    padding: 5px 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.4);
    transition: all 0.3s ease;
}

#notificationsContainer button:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
}

#notificationsContainer button.active {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
}

#selectAllNotificationsButton, 
#deleteSelectedNotificationsButton {
    height: 30px;
    font-size: small;
    padding: 5px 10px;
    margin-right: 10px;
}

#selectAllNotificationsButton:hover,
#deleteSelectedNotificationsButton:hover {
    background-color: #2a2a2a;
    color: #0df2ff;
}

#notificationsContainer .tooltip {
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%) translateY(5px);
    background-color: #080808;
    font-family: "Courier New", monospace;
    border: 1px solid #0df2ff;
    padding: 5px;
    color: white;
    font-size: 12px;
    z-index: 10;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.5);
    min-width: 140px;
    max-width: 300px;
    pointer-events: none;
}

#notificationsContainer .tooltip.visible {
    display: block;
}

#notificationsContainer .tooltip.floating {
  position: fixed !important;
  transform: none !important;
  z-index: 999999 !important;
  pointer-events: none;
  display: none;
}
#notificationsContainer .tooltip.floating.visible {
  display: block;
}

#notificationsContent {
  padding: 10px 10px 64px;
  box-sizing: border-box;
}

#notificationsContent::after {
  content: "";
  display: block;
  height: 32px;
}

#notificationsContent .notification-item:last-child {
  margin-bottom: 12px;
}

#notificationsContent::-webkit-scrollbar {
    width: 5px;
}

#notificationsContent::-webkit-scrollbar-thumb {
    background-color: #0df2ff;
}

#notificationsContent::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

@media (max-width:700px){
	#notificationsContainer .tooltip.mobile{
		position:absolute !important;
		left:50% !important;
		transform:translateX(-50%) !important;
		max-width:calc(100vw - 32px);
		min-width:auto;
		z-index:1000;
	}
}

#inventoryContainer {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, rgba(13, 13, 13, 0.9), rgba(0, 223, 255, 0.2));
    border: 2px solid rgba(0, 223, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 223, 255, 0.4), 0 0 40px rgba(0, 223, 255, 0.3);
    padding: 20px;
    border-radius: 15px;
    overflow: hidden;
    animation: neon-border-glow 3s ease-in-out infinite;
}

#ficheButton.ficheBtn{
	position:absolute;
	z-index:5;
	opacity:0;
	padding:6px 10px;
	border-radius:10px;
	border:1px solid rgba(0,223,255,.45);
	background:rgba(0,0,0,.72);
	backdrop-filter:blur(2px);
	box-shadow:0 0 10px rgba(0,255,255,.18), inset 0 0 8px rgba(0,255,255,.08);
	color:#bffaff;
	font-size:12px;
	letter-spacing:.3px;
	user-select:none;
	cursor:pointer;
	transition:transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
#ficheButton.ficheBtn:hover{
	transform:translateY(-1px);
	box-shadow:0 0 14px rgba(0,255,255,.28), inset 0 0 10px rgba(0,255,255,.12);
	color:#eaffff;
}
#ficheButton.ficheBtn:active{
	transform:translateY(0);
}
@media (max-width:900px){
	#ficheButton.ficheBtn{
		padding:8px 12px;
		font-size:13px;
	}
}

#ficheButton.ficheBtn{transform:translate(-50%,-50%)}

@keyframes neon-border-glow {
    0% {
        box-shadow: 0 0 20px rgba(0, 223, 255, 0.4), 0 0 40px rgba(0, 223, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 223, 255, 0.8), 0 0 60px rgba(0, 223, 255, 0.6);
    }
    100% {
        box-shadow: 0 0 20px rgba(0, 223, 255, 0.4), 0 0 40px rgba(0, 223, 255, 0.3);
    }
}

#bagSlotsContainer {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    width: 100%;
    height: 15%;
}

#bagSlotsContainer::before, #weaponsContainer::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #0df2ff;
    font-size: 16px;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 8px rgba(0, 223, 255, 0.7), 0 0 15px rgba(0, 223, 255, 0.5);
    letter-spacing: 1.2px;
    animation: pulseText 2s infinite alternate;
}

@keyframes pulseText {
    0% {
        text-shadow: 0 0 10px rgba(0, 223, 255, 0.8), 0 0 20px rgba(0, 223, 255, 0.6);
    }
    100% {
        text-shadow: 0 0 20px rgba(0, 223, 255, 1), 0 0 40px rgba(0, 223, 255, 0.9);
    }
}

#bagSlotsContainer::before {
    content: 'Sacs';
    bottom: -5%;
}

#weaponsContainer::before {
    content: 'Armes';
    top: -5%;
}

.bagSlot {
    width: 64px;
    height: 64px;
    border: 2px solid #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0, 223, 255, 0.3), 0 0 20px rgba(0, 223, 255, 0.6);
    border-radius: 15%;
    transition: all 0.3s ease;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bagSlot:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 223, 255, 0.8), 0 0 30px rgba(0, 223, 255, 1);
}

.bagItemSlot {
    width: 64px;
    height: 64px;
    border: 1px solid #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
    border-radius: 25%;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.furnitureItemSlot {
    width: 80px;
    height: 80px;
    border: 1px solid #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.furnitureItemSlot .furniture-item {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.bagOverlay, .furnitureContainer {
    background-color: #080808;
    border: 1.5px solid #0df2ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    width: 520px;
    min-width: 200px;
    max-width: 96vw;
    max-height: 80vh;
    padding: 20px 14px 16px 14px;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 13px;
    box-shadow: 0 0 25px rgba(13,242,255,0.25), 0 0 3px #0df2ff66;
    scrollbar-width: thin;
    scrollbar-color: #0df2ff transparent;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .bagOverlay, .furnitureContainer {
        left: 50%;
        top: 53%;
        transform: translate(-50%, -50%);
        width: 94vw;
        min-width: 0;
        max-width: 98vw;
        max-height: 75vh;
        padding: 11px 2vw 9px 2vw;
        border-radius: 11px;
        font-size: 0.98em;
    }
    .furnitureItemSlot {
        width: 68px;
        height: 68px;
        margin: 5px;
    }
}

@media (max-width: 600px), (max-height: 500px) {
    .bagOverlay, .furnitureContainer {
        left: 50%;
        top: 54%;
        transform: translate(-50%, -50%);
        width: 99vw;
        min-width: 0;
        max-width: 99vw;
        max-height: 72vh;
        padding: 6px 1.2vw 7px 1.2vw;
        border-radius: 8px;
        font-size: 0.96em;
    }
    .furnitureItemSlot {
        width: 56px;
        height: 56px;
        margin: 4px;
    }
}

.stackCount {
    position: absolute;
    bottom: 4px;
    right: 6px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.75rem;
    padding: 1px 4px;
    border-radius: 3px;
    pointer-events: none;
    font-family: sans-serif;
    font-weight: bold;
}

#closeBag, .closefurnitureContainer {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px !important;
    height: 20px;
    border: none !important;
    background: #f44336 !important;
    color: #ffffff !important;
    cursor: pointer;
}

.bagTitle, .furnitureTitle {
    color: white;
    font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
}

.bagRow, .furnitureRow {
    display: flex;
    justify-content: center;
}

.bagSlot, .equipmentSlot, .weaponSlot {
    background-size: 64px 64px;
    background-repeat: no-repeat;
    background-position: center;
}

.bagSlot:hover, .equipmentSlot:hover, .weaponSlot:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 25px rgba(0, 223, 255, 1), 0 0 40px rgba(0, 223, 255, 1);
    border-color: #ffffff;
    background-color: rgba(13, 242, 255, 0.4);
}

#companionSlot.companionSlot {
    position: absolute;
    top: -5%;
    left: 20%;
    width: 64px;
    height: 64px;
    z-index: 10;
    border: 2px solid #0df2ff;
    border-radius: 15%;
    background-color: rgba(13, 242, 255, 0.23);
    box-shadow: 0 4px 18px rgba(0, 223, 255, 0.7), 0 0 20px rgba(0, 223, 255, 0.33);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#companionSlot.companionSlot:hover {
    transform: scale(1.14);
    box-shadow: 0 4px 22px rgba(0, 223, 255, 0.8), 0 0 30px rgba(0, 223, 255, 0.99);
    border-color: #ffffff;
    background-color: rgba(13, 242, 255, 0.36);
}

#companionSlot.companionSlot span {
    position: absolute;
    top: 105%;
    left: 50%;
    transform: translateX(-50%);
    color: #0df2ff;
    font-size: 15px;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 8px rgba(0, 223, 255, 0.7), 0 0 10px rgba(0, 223, 255, 0.5);
    letter-spacing: 1px;
    pointer-events: none;
}

#implantSlot.implantSlot {
    position: absolute;
    top: -5%;
    right: 20%;
    width: 64px;
    height: 64px;
    z-index: 10;
    border: 2px solid #0df2ff;
    border-radius: 15%;
    background-color: rgba(13, 242, 255, 0.23);
    box-shadow: 0 4px 18px rgba(0, 223, 255, 0.7), 0 0 20px rgba(0, 223, 255, 0.33);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#implantSlot.implantSlot:hover {
    transform: scale(1.14);
    box-shadow: 0 4px 22px rgba(0, 223, 255, 0.8), 0 0 30px rgba(0, 223, 255, 0.99);
    border-color: #ffffff;
    background-color: rgba(13, 242, 255, 0.36);
}

#implantSlot.implantSlot span {
    position: absolute;
    top: 105%;
    left: 50%;
    transform: translateX(-50%);
    color: #0df2ff;
    font-size: 15px;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 8px rgba(0, 223, 255, 0.7), 0 0 10px rgba(0, 223, 255, 0.5);
    letter-spacing: 1px;
    pointer-events: none;
}

#equipmentContainer {
    position: relative;
    display: flex;
    width: 100%;
    height: 61%;
    margin-top: 20px;
}

.equipmentSide {
    width: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.equipmentCenter {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.equipmentImage {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    width: 100%;
}

.equipmentSlot {
    width: 64px;
    height: 64px;
    border: 2px solid #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0, 223, 255, 0.3), 0 0 20px rgba(0, 223, 255, 0.6);
    border-radius: 15%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    cursor: pointer;
}

.equipmentSlot:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 223, 255, 0.8), 0 0 30px rgba(0, 223, 255, 1);
}

.equipmentSlot span, .weaponSlot span {
    position: relative;
    top: -42px;
    color: #0df2ff;
    font-size: 16px;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 8px rgba(0, 223, 255, 0.7), 0 0 12px rgba(0, 223, 255, 0.5);
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

#weaponsContainer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 15%;
    margin-top: 20px;
}
    
.weaponSlot {
    width: 64px;
    height: 64px;
    border: 2px solid #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0, 223, 255, 0.3), 0 0 20px rgba(0, 223, 255, 0.6);
    border-radius: 15%;
    transition: all 0.3s ease;
    margin: 0 5px;
    cursor: pointer;
}

.weaponSlot:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 223, 255, 0.8), 0 0 30px rgba(0, 223, 255, 1);
}
    
#weaponsContainer span {
    font-size: 14px;
    color: white;
    margin-right: 10px;
}

#skinSelectionContainer {
    position: fixed !important;
    z-index: 1001;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    min-width: 180px;
    max-width: 90vw;
}

#skinSelectionMenu {
    border: 1px solid #0df2ff;
    background: #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 12px rgba(0,223,255,0.6);
    color: white;
    font-size: 16px;
    width: 100%;
    border-radius: 10px;
    margin-top: 4px;
    padding: 4px 0;
}

#skinSelectionMenu option {
    padding: 10px 18px;
    background: #000;
    border-bottom: 1px solid #0df2ff;
    transition: background-color .2s, color .2s;
}

#skinSelectionMenu option:hover, #skinSelectionMenu option:focus {
    background: #0df2ff;
    color: #080808;
}

#closeSkin {
    align-self: flex-end;
    margin: 2px 6px 0 0;
    width: 24px !important;
    height: 24px !important;
    font-size: 18px !important;
    border: none !important;
    background: #f44336 !important;
    color: #fff !important;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}

#closeSkin:active, #closeSkin:hover {
    background: #d32f2f !important;
}

#inventoryContainer::-webkit-scrollbar {
    width: 5px;
}

#inventoryContainer::-webkit-scrollbar-thumb {
    background-color: #0df2ff;
}

#inventoryContainer::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.rpSlot {
    width: 64px;
    height: 64px;
    border: 2px dashed #0df2ff;
    background-color: rgba(13, 242, 255, 0.1);
    border-radius: 12px;
    position: absolute;
    z-index: 2;
    background-size: 64px 64px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 12px rgba(0, 223, 255, 0.3);
    cursor: grab;
}

#rpSlotTopLeft {
    top: -104px;
    left: 10px;
}
#rpSlotTopRight {
    top: -104px;
    right: 10px;
}
#rpSlotBottomLeft {
    bottom: -102px;
    left: 10px;
}
#rpSlotBottomRight {
    bottom: -102px;
    right: 10px;
}

.rpSlot:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 223, 255, 0.9);
}

.characterCardOverlay {
    width: 480px;
    height: 540px;
    max-width: 97vw;
    max-height: 97vh;
    position: fixed;
    top: 30%;
    left: 30%;
    border-radius: 16px;
    border: 2px solid #00F0FF;
    box-shadow: 0 0 20px #00F0FF88, inset 0 0 10px #00F0FF44;
    background-color: #10151c;
    backdrop-filter: blur(6px);
    z-index: 1000;
    overflow: hidden;
    font-family: 'Orbitron', sans-serif;
    color: #e0f0ff;
    display: flex;
    flex-direction: column;
}
.characterCardOverlay .closeButton {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 12px;
    border: none;
    background: #f44336;
    color: #fff;
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px #f44336aa;
    transition: background 0.3s ease;
}
.characterCardOverlay .closeButton:hover {
    background: #d32f2f;
}
.characterCardOverlay .tabs {
    display: flex;
    justify-content: space-around;
    background: rgba(0, 240, 255, 0.1);
    padding: 12px 0;
    border-bottom: 1px solid #00F0FF55;
}
.characterCardOverlay .tabButton {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: #e0f0ff;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent;
}
.characterCardOverlay .tabButton:hover {
    color: #00F0FF;
}
.characterCardOverlay .tabButton.active {
    color: #00F0FF;
    border-bottom: 2px solid #00F0FF;
}
.dice-roll-message {
    animation: rollfadein 0.6s;
}
@keyframes rollfadein {
    from { transform:scale(1.14); opacity:0; }
    to { transform:scale(1); opacity:1; }
}
.characterCardOverlay .tabContent {
    padding: 20px;
    overflow-y: auto;
    height: calc(100% - 80px);
}
.characterCardOverlay .tabInnerContent {
    display: none;
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.characterCardOverlay .characterCardHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-bottom: 1px solid #00f0ff44;
}
.characterCardOverlay .avatarWrapper {
    position: relative;
    width: 150px;
    height: 150px;
    margin-right: 20px;
}
.characterCardOverlay .characterAvatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}
.characterCardOverlay .characterAvatarFrame {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    pointer-events: none;
}
.characterCardOverlay .characterInfoBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #e0f0ff;
}
.characterCardOverlay .characterInfoBox h1 {
    font-size: 1.8em;
    margin: 0;
    color: #00f0ff;
}
.characterCardOverlay .characterTitle {
    font-size: 1.2em;
    color: #ffa500;
    margin: 5px 0;
    font-style: italic;
}
.characterCardOverlay .characterRaceSex {
    font-size: 1em;
    color: #cccccc;
}
.characterCardOverlay .statusActionBox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 16px;
    background-color: #101010;
    border-top: 1px solid #00f0ff44;
    font-family: "Courier New", monospace;
    font-size: 0.95em;
}
.characterCardOverlay .statusRow {
    text-align: left;
    padding-left: 5px;
}
.characterCardOverlay .actionRow {
    text-align: right;
    padding-right: 5px;
}
.characterCardOverlay .characterStatus {
    color: #00ff00;
}
.characterCardOverlay .characterStatus.afk {
    color: #ffff00;
}
.characterCardOverlay .characterStatus.disconnected {
    color: #ff0000;
}
.characterCardOverlay .characterAction {
    color: #00e0ff;
}
.characterCardOverlay #characterInventoryContainer.characterInventoryOverlay #characterEquipmentContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    gap: 20px;
    width: 100%;
    position: relative;
}

.characterHealthWrapper {
	display: flex;
	align-items: center;
	margin-top: 8px;
}

.characterHeart {
	position: relative;
	width: 32px;
	height: 32px;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 29"><path fill="white" d="M23.6,0c-2.9,0-5.4,1.6-6.6,4C15.8,1.6,13.3,0,10.4,0C5.7,0,2,3.7,2,8.4 c0,8.3,14.9,20.6,14.9,20.6S32,16.7,32,8.4C32,3.7,28.3,0,23.6,0z"/></svg>') center/contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 29"><path fill="white" d="M23.6,0c-2.9,0-5.4,1.6-6.6,4C15.8,1.6,13.3,0,10.4,0C5.7,0,2,3.7,2,8.4 c0,8.3,14.9,20.6,14.9,20.6S32,16.7,32,8.4C32,3.7,28.3,0,23.6,0z"/></svg>') center/contain no-repeat;
	background: #222;
}

.characterHeart::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--fill, 0%);
	background: red;
}

.characterHealthText {
	color: #ff7777;
	font-size: 0.9em;
	font-style: italic;
}

@media (max-width: 900px) {
    .characterCardOverlay {
        width: 98vw;
        height: 96vh;
        min-width: 0;
        min-height: 0;
        max-width: 99vw;
        max-height: 98vh;
        padding: 0;
        top: 50px !important;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .characterCardOverlay .tabContent {
        padding: 12px 4vw;
        height: calc(100% - 78px);
    }
    .characterCardOverlay .characterCardHeader {
        flex-direction: column;
        padding: 12px 2vw 6px 2vw;
        gap: 10px;
    }
    .characterCardOverlay .avatarWrapper,
    .characterCardOverlay .characterAvatar,
    .characterCardOverlay .characterAvatarFrame {
        width: 80px;
        height: 80px;
        min-width: 80px;
        min-height: 80px;
        max-width: 120px;
        max-height: 120px;
        margin-right: 0;
        margin-bottom: 6px;
    }
    .characterCardOverlay .characterInfoBox h1 {
        font-size: 1.3em;
    }
    .characterCardOverlay .characterTitle {
        font-size: 1em;
    }
    .characterCardOverlay .characterRaceSex {
        font-size: 0.95em;
    }
    .characterCardOverlay .statusActionBox {
        font-size: 0.92em;
        padding: 7px 4vw;
    }
}
@media (max-width: 600px), (max-height: 500px) {
    .characterCardOverlay {
        width: 99vw;
        height: 99vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 7px;
        padding: 0;
        top: 50px !important;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .characterCardOverlay .tabContent {
        padding: 7px 1vw;
        height: calc(100% - 73px);
        font-size: 0.98em;
    }
    .characterCardOverlay .characterCardHeader {
        padding: 8px 1vw 4px 1vw;
        gap: 7px;
    }
    .characterCardOverlay .avatarWrapper,
    .characterCardOverlay .characterAvatar,
    .characterCardOverlay .characterAvatarFrame {
        width: 58px;
        height: 58px;
        min-width: 58px;
        min-height: 58px;
        max-width: 88px;
        max-height: 88px;
        margin-right: 0;
        margin-bottom: 3px;
    }
    .characterCardOverlay .characterInfoBox h1 {
        font-size: 1.04em;
    }
    .characterCardOverlay .characterTitle {
        font-size: 0.93em;
    }
    .characterCardOverlay .characterRaceSex {
        font-size: 0.86em;
    }
    .characterCardOverlay .statusActionBox {
        font-size: 0.90em;
        padding: 4px 1vw;
    }
}

.item-overlay {
    width: 340px;
    min-height: 420px;
    max-height: 600px;
    overflow: hidden;
    background: linear-gradient(180deg, #0d0d0d 0%, #141414 100%);
    border: 2px solid #0df2ff;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(13, 242, 255, 0.5);
    padding: 15px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font-family: "Courier New", monospace;
    color: #e0f0ff;
    font-size: 1em;
}

.item-overlay .overlay-actions {
  margin-top: auto;
  width: 100%;
}

.item-overlay .btn-open {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #0df2ff;
  border-radius: 10px;
  background: linear-gradient(180deg, #0b0b0b 0%, #131313 100%);
  color: #e0f0ff;
  font-family: "Courier New", monospace;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 25px rgba(13, 242, 255, 0.35);
  text-shadow: 0 0 6px rgba(13, 242, 255, 0.45);
  -webkit-tap-highlight-color: transparent;
}

.item-overlay .btn-open:hover,
.item-overlay .btn-open:focus-visible {
  outline: none;
  box-shadow: 0 0 28px rgba(13,242,255,.55), 0 0 36px rgba(13,242,255,.25);
  transform: translateY(-1px);
}

.item-overlay .btn-open:active {
  transform: translateY(0) scale(.99);
}

@media (max-width: 900px) {
    .item-overlay {
        width: 94vw;
        min-width: 0;
        max-width: 98vw;
        min-height: 260px;
        max-height: 90vh;
        border-radius: 10px;
        padding: 10px 2vw;
        font-size: 0.98em;
    }
}
@media (max-width: 600px), (max-height: 500px) {
    .item-overlay {
        width: 98vw;
        min-width: 0;
        max-width: 99vw;
        min-height: 180px;
        max-height: 85vh;
        border-radius: 8px;
        padding: 6px 1vw;
        font-size: 0.96em;
    }
}

#shopOverlay {
  font-family: 'Courier New', monospace;
  background: rgba(2, 13, 20, 0.97) !important;
  z-index: 9999;
  backdrop-filter: blur(2px);
  animation: neon-border-glow 3s infinite;
}
.neoShopCard {
  background: radial-gradient(ellipse 65% 85% at 55% 9%, #102331 80%, #0a111a 100%);
  border: 4px groove #00F0FF;
  border-radius: 28px;
  box-shadow: 0 0 32px #0df2ff99, 0 0 0 7px #0df2ff33;
  color: #0df2ff;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  padding: 38px 22px 24px 22px;
  min-width: 320px;
  width: 96vw;
  max-width: 730px;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.neoShopTabs {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin: 16px 0 22px 0;
  flex-wrap: wrap;
}
.neoShopTabs button {
  background: linear-gradient(90deg,rgba(0,223,255,0.16),rgba(0,223,255,0.06));
  border: 2.5px solid #0df2ff;
  color: #0df2ff;
  border-radius: 10px 10px 0 0;
  padding: 10px 20px;
  font-size: 1.08em;
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.18s, color 0.13s, box-shadow 0.18s;
  box-shadow: 0 2px 7px #0df2ff22;
}
.neoShopTabs button.active, .neoShopTabs button:focus {
  background: linear-gradient(90deg,#0df2ff88,#131f23 90%);
  color: #fff;
  box-shadow: 0 0 15px #00f0ff;
}
.neoShopTabs button:hover:not(.active) {
  background: #0df2ff11;
  color: #00f0ff;
}
.neoShopContentArea {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 58vh;
  margin: 0;
  padding: 2px 0;
}
.neoShopCard .shop-balance {
  text-align: center;
  margin-bottom: 8px;
  font-weight: bold;
  color: #7fffd4;
  font-size: 1.09em;
  letter-spacing: 1px;
}
.neoShopItemCard {
  background: linear-gradient(135deg,#091b29 70%,#161d20 100%);
  border: 2.5px solid #00F0FFBB;
  border-radius: 14px;
  box-shadow: 0 1px 8px #0df2ff11, 0 0 0 2.5px #0df2ff44;
  padding: 17px 10px 15px 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
  transition: box-shadow 0.18s;
}
.neoShopItemCard:hover {
  box-shadow: 0 0 16px #00f0ff77, 0 0 0 5px #0df2ff88;
  z-index: 2;
}
.neoShopItemCard .shop-promo {
  position: absolute;
  top: 7px;
  right: 15px;
  background: linear-gradient(90deg,#0df2ff,#00c6ad);
  color: #181f26;
  font-weight: bold;
  font-size: 0.83em;
  border-radius: 8px;
  padding: 2px 11px;
  box-shadow: 0 0 10px #0df2ff55;
}
.neoShopItemCard img {
  width: 54px;
  height: 54px;
  margin: 0 auto 7px auto;
  display: block;
  filter: drop-shadow(0 0 12px #0df2ff77);
  border-radius: 11px;
  background: #101926;
}
.neoShopItemCard .item-name {
  font-weight: bold;
  color: #7fffd4;
  margin-top: 3px;
  font-size: 1.08em;
}
.neoShopItemCard .item-desc {
  color: #dff;
  font-size: 0.98em;
  margin: 2px 0 5px 0;
}
.neoShopItemCard .item-price {
  color: #0df2ff;
  font-size: 1.15em;
  margin-bottom: 4px;
}
.neoShopItemCard .shop-buy {
  background: radial-gradient(circle, #0df2ff 70%, #36f9d2 100%);
  color: #0a111a;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  margin-top: 9px;
  font-size: 1em;
  padding: 7px 26px;
  box-shadow: 0 0 15px #0df2ff33;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background 0.18s, color 0.15s, box-shadow 0.15s;
}
.neoShopItemCard .shop-buy:hover {
  background: linear-gradient(90deg,#00f0ff,#7fffd4 80%);
  color: #16213e;
  box-shadow: 0 0 22px #0df2ff88;
}
.neoShopCard .close-btn {
  position: absolute;
  top: 14px;
  right: 24px;
  background: transparent;
  color: #0df2ff;
  font-size: 39px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: color 0.14s;
}
.neoShopCard .close-btn:hover {
  color: #ff4c4c;
  text-shadow: 0 0 10px #ff4c4c99;
}
.neoShopCard .shop-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 7px;
}
.neoShopCard .shop-logo .shop-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  font-size: 2.2em;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 0 20px #0df2ff77, 0 0 4px #0df2ff;
}
.neoShopCard .shop-logo-sub {
  text-align: center;
  margin-top: 4px;
  font-size: 1.12em;
  color: #7fffd4;
  text-shadow: 0 0 12px #0df2ff77;
}

@supports (height: 100dvh) { #shopOverlay { height: 100dvh !important; } }
body.neoShop-locked { overflow: hidden; touch-action: none; }

@media (max-width: 480px) {
  #shopOverlay {
    top: 50px;
    height: calc(100dvh - 50px);
    overflow-x: hidden;
  }
  .neoShopCard {
    border-radius: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    padding: 20px 12px 16px;
  }
  .neoShopTabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    justify-content: flex-start;
  }
  .neoShopTabs button {
    flex: 0 0 auto;
  }
  .neoShopContentArea {
    max-height: calc(100dvh - 50px - 170px);
    overflow-x: hidden;
  }
}

#vipOverlay, .vip-overlay {
  font-family: 'Courier New', monospace;
  background: rgba(10,24,40,0.96);
  z-index: 9999;
  backdrop-filter: blur(2px);
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vip-card {
  background: radial-gradient(ellipse 70% 90% at 55% 10%, #18314a 80%, #171d22 100%);
  border: 2.5px solid #ffe052;
  border-radius: 22px;
  padding: 32px 24px 26px 24px;
  min-width: 340px;
  width: 92vw;
  max-width: 430px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 0 38px 12px #ffe05299, 0 0 0 4px #fff48f44;
  color: #ffe052;
  font-size: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vip-close-btn {
  position: absolute; top: 10px; right: 18px;
  background: transparent; color: #ffe052; font-size: 34px;
  border: none; cursor: pointer; font-weight: bold;
}
.vip-title-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; }
.vip-title-img { width: 40px; height: 40px; }
.vip-title-text { font-family: 'Orbitron',sans-serif; font-weight: bold; font-size: 1.5em; color: #fff; letter-spacing: 2px; }
.vip-content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.vip-btns { display: flex; flex-direction: column; gap: 13px; align-items: center; justify-content: center; margin-top: 5px; width: 100%; }
.vip-btn { width: 97%; margin: 0 auto; display: block; padding: 13px 0; background: linear-gradient(90deg,#ffe052cc,#fff8b2); color: #171d22; border: none; border-radius: 10px; font-weight: bold; font-size: 1.09em; box-shadow: 0 0 7px #ffe05244; cursor: pointer; transition: background 0.18s, color 0.14s; }
.vip-btn:hover:not(:disabled) { background: linear-gradient(90deg,#ffe052,#fffcb3);}
.vip-btn-disabled, .vip-btn:disabled { background: #ccc !important; color: #888 !important; cursor: not-allowed !important; }

.vip-error { color: #fff; background: #c52f2f; padding: 9px 19px; border-radius: 10px; font-size: 1.09em; font-weight: bold; margin: 12px 0; }
.vip-non-premium { color: #fff; font-size: 1.14em; text-align: center; margin: 20px 0 8px 0; }
.vip-non-premium span { font-size: 0.96em; color: #ffe052; }
.vip-goto-shop { color: #ffe052; text-decoration: underline; cursor: pointer; }
.vip-bienvenue { font-size: 1.18em; font-weight: bold; margin-bottom: 13px; color: #fff; text-align: center; }

.vip-bank-title, .vip-title-choice, .vip-frame-title, .vip-pulsar-title, .vip-connectes-title { font-size: 1.18em; font-weight: bold; margin-bottom: 13px; color: #fff; text-align: center; }
.vip-bank-desc { color: #ffe052; font-size: 1.03em; margin-bottom: 14px; text-align: center; }
.vip-bank-slots { display: flex; justify-content: center; gap: 22px; margin-bottom: 18px; }
.bankStorageSlot { width: 64px; height: 64px; border: 1.8px solid #0df2ff; background-color: rgba(13,242,255,0.15); box-shadow: 0 0 12px rgba(13,242,255,0.6); border-radius: 22%; margin: 2px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vip-bank-back { margin-top: 10px; padding: 9px 34px; font-size: 1.04em; font-weight: bold; background: #233555; color: #ffe052; border-radius: 8px; border: none; cursor: pointer; }
.bank-item { width: 64px; height: 64px; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; }
.vip-bank-msg { margin: 8px 0; font-weight: bold; padding: 7px 14px; border-radius: 8px; background: #283855; color: #ffe052; }
.vip-bank-msg-error { background: #c52f2f !important; color: #fff !important; }
.vip-select { width: 100%; font-size: 1em; padding: 5px 7px; }

.vip-title-input { font-size: 1em; padding: 8px 14px; border-radius: 8px; border: 1px solid #0df2ff; background: #142e48; color: #fff; width: 85%; outline: none; }
.vip-title-btn { margin-top: 12px; padding: 8px 28px; font-size: 1.09em; font-weight: bold; background: linear-gradient(90deg,#ffe052,#fffcb3); color: #181f26; border-radius: 7px; border: none; cursor: pointer; }
.vip-cancel-btn { margin-top: 7px; margin-left: 8px; padding: 7px 24px; font-size: 0.97em; font-weight: bold; background: #233555; color: #fff; border-radius: 7px; border: none; cursor: pointer; }
.vip-title-note { font-size: 0.96em; color: #ffe052c2; margin-top: 7px; text-align: center; }

.vip-frame-img { margin-bottom: 14px; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.vip-frame-img-actual { max-width: 120px; max-height: 90px; object-fit: contain; }
.vip-frame-claim { padding: 9px 32px; font-size: 1.12em; font-weight: bold; background: linear-gradient(90deg,#ffe052,#fffcb3); color: #181f26; border-radius: 7px; border: none; cursor: pointer; margin-bottom: 7px; }
.vip-frame-cancel { margin-top: 0; padding: 7px 24px; font-size: 0.97em; font-weight: bold; background: #233555; color: #fff; border-radius: 7px; border: none; cursor: pointer; }
.vip-frame-note { font-size: 0.95em; color: #ffe052c2; margin-top: 7px; text-align: center; }

.vip-pulsar-img { margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.vip-pulsar-img-actual { max-width: 80px; max-height: 80px; object-fit: contain; }
.vip-pulsar-claim { padding: 10px 38px; font-size: 1.14em; font-weight: bold; background: linear-gradient(90deg,#ffe052,#fffcb3); color: #181f26; border-radius: 7px; border: none; cursor: pointer; margin-bottom: 7px; }
.vip-pulsar-cancel { margin-top: 0; padding: 7px 24px; font-size: 0.97em; font-weight: bold; background: #233555; color: #fff; border-radius: 7px; border: none; cursor: pointer; }
.vip-pulsar-note { font-size: 0.95em; color: #ffe052c2; margin-top: 7px; text-align: center; }

.vip-connectes-title { font-size: 1.18em; font-weight: bold; margin-bottom: 13px; color: #fff; text-align: center; }
.vip-connectes-list { width: 100%; max-height: 340px; overflow-y: auto; margin-bottom: 15px; }
.vip-connectes-back { margin-top: 10px; padding: 9px 34px; font-size: 1.04em; font-weight: bold; background: #233555; color: #ffe052; border-radius: 8px; border: none; cursor: pointer; }
.vip-connectes-ul { list-style: none; padding: 0; margin: 0; }
.vip-connectes-li { margin-bottom: 7px; font-size: 1.11em; color: #fff; display: flex; align-items: center; gap: 10px; }
.vip-connectes-name { flex: 1; }
.vip-status-afk { color: orange; }
.vip-status-online { color: #60e86a; }
.vip-connectes-none { color: #ffe052; font-size: 1.06em; }

@media (max-width: 900px) {
  .vip-card {
    width: 99vw !important;
    max-width: 99vw !important;
    min-width: 0 !important;
    padding: 18px 3vw 13px 3vw !important;
    border-radius: 13px !important;
    box-shadow: 0 0 17px #ffe05299, 0 0 0 1vw #fff48f1c !important;
    font-size: 16.2px !important;
    max-height: 96vh !important;
  }
  .vip-close-btn {
    top: 6px !important;
    right: 3vw !important;
    font-size: 23px !important;
  }
  .vip-title-wrap { gap: 7px !important; margin-bottom: 7px !important; }
  .vip-title-img { width: 28px !important; height: 28px !important; }
  .vip-title-text { font-size: 1.08em !important; letter-spacing: 1px; }
  .vip-content { font-size: 1em !important; }
  .vip-btn { padding: 10px 0 !important; font-size: 0.97em !important; border-radius: 8px !important; }
  .vip-bank-slots { gap: 8px !important; }
  .bankStorageSlot, .bank-item { width: 42px !important; height: 42px !important; }
  .vip-title-input { font-size: 0.95em !important; padding: 6px 8px !important; width: 95% !important; }
}
@media (max-width: 600px), (max-height: 600px) {
  .vip-card {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    font-size: 13.2px !important;
    padding: 7px 1vw 5px 1vw !important;
    max-height: 98vh !important;
  }
  .vip-close-btn {
    right: 2vw !important;
    top: 2px !important;
    font-size: 18px !important;
  }
  .vip-title-img { width: 19px !important; height: 19px !important; }
  .vip-title-text { font-size: 1em !important; }
  .vip-btn { padding: 7px 0 !important; font-size: 0.92em !important; }
  .vip-bank-slots { gap: 3px !important; }
  .bankStorageSlot, .bank-item { width: 34px !important; height: 34px !important; }
  .vip-title-input { font-size: 0.89em !important; padding: 4px 4px !important; width: 97% !important; }
}

.characterCardOverlay #characterInventoryContainer.characterInventoryOverlay #characterEquipmentContainer #characterSilhouette {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 85%;
    max-height: 100%;
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

.characterCardOverlay #characterInventoryContainer.characterInventoryOverlay .characterWeaponsOverlay {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
    padding-bottom: 4px;
}

.characterCardOverlay #characterInventoryContainer.characterInventoryOverlay .characterWeaponsOverlay .weaponSlot {
    width: 64px;
    height: 64px;
    background-color: #222;
    border: 1px solid #0df2ff;
    border-radius: 8px;
    position: relative;
}

.characterCardOverlay #characterInventoryContainer.characterInventoryOverlay #characterEquipmentContainer #characterRpLine {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.characterCardOverlay #characterInventoryContainer.characterInventoryOverlay #characterEquipmentContainer #characterRpLine .rpSlot {
    width: 40px;
    height: 40px;
    background-color: #222;
    border: 1px solid #0df2ff;
    border-radius: 6px;
    position: static;
    flex-shrink: 0;
}

.characterCardOverlay .characterWeaponsOverlay::before {
    content: none !important;
}

.menu-radial {
    position: absolute;
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    opacity: 0.8;
    z-index: 10;
    transition: 0.5s;
}

.menu-radial img {
    position: absolute;
    height: 32px;
    width: 32px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.character-list {
    position: absolute;
    display: none;
    overflow-y: auto;
    box-sizing: border-box;
    text-align: center;
    z-index: 10;
    cursor: pointer;
    padding: 3px;
    transform: translate(-50%, -50%);
    background-color: #323232;
    max-height: 250px;
    font-size: small;
    scrollbar-width: thin;
    scrollbar-color: #0df2ff transparent;
}

.character-list::-webkit-scrollbar {
    width: 5px;
}

.character-list::-webkit-scrollbar-thumb {
    background-color: #0df2ff;
}

.characterList-item {
    border-bottom: 1px solid black;
    padding: 5px 0;
}

.characterList-item:hover {
    background-color: #3f3f3f;
}

.characterList-item:last-child {
    border-bottom: none;
}

.menu-radial .character-card {
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% - 5px));
}

.menu-radial .move-here {
    transform: translate(-50%, -50%);
}

#messageOverlay {
    background-color: #0a0a0a;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 50%, transparent 50%);
    background-size: 100% 2px;
    background-repeat: repeat-y;
    border: 2px solid rgba(13, 242, 255, 0.8);
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.4), 0 0 20px rgba(0, 223, 255, 0.3);
    border-radius: 12px;
    font-family: "Courier New", monospace;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 25px;
    position: fixed;
    top: 20%;
    left: 52%;
    max-height: 600px; 
    z-index: 1000;
    animation: pulse-border 4s ease-in-out infinite;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 30px rgba(0, 223, 255, 0.5), 0 0 60px rgba(0, 223, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 50px rgba(0, 223, 255, 0.7), 0 0 100px rgba(0, 223, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 30px rgba(0, 223, 255, 0.5), 0 0 60px rgba(0, 223, 255, 0.3);
    }
}

#messageOverlay label {
    color: #0df2ff;
    margin-bottom: 10px;
}

#messageOverlay input,
#messageOverlay textarea {
    color: #ffffff;
    background-color: #1a1a1a;
    border: 1px solid #0df2ff;
    padding: 10px;
    border-radius: 5px;
    width: 95%;
    margin-bottom: 10px;
}

#messageOverlay textarea {
    height: 250px;
    resize: none;
}

#messageOverlay input:focus,
#messageOverlay textarea:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.7);
}

@media (max-width: 900px) {
	#messageOverlay {
		width: 95vw;
		min-width: 0;
		max-width: 99vw;
		height: auto;
		max-height: 96vh;
		top: 3vw;
		left: 50%;
		padding: 3vw 2vw;
		font-size: 1em;
		border-radius: 8px;
		overflow-y: auto;
		box-sizing: border-box;
	}

    #toolbarCreateButtons {
		min-height: 40px;
		height: 46px;
		padding-top: 8px;
		padding-bottom: 8px;
		overflow-x: auto;
		overflow-y: hidden;
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
	#toolbarCreateButtons button {
		flex: 0 0 auto;
		margin-right: 2px;
	}
	.buttonGroup {
		flex: 0 0 auto;
	}
	.separator {
		flex: 0 0 auto;
	}
}

@media (max-width: 600px), (max-height: 500px) {
	#messageOverlay {
		width: 99vw;
		max-width: 99vw;
		min-width: 0;
		height: auto;
		max-height: 98vh;
		padding: 8vw 2vw 8vw 2vw;
		font-size: 1em;
		top: 1vh;
		left: 50%;
		border-radius: 7px;
	}
}

#subjectDiv,
#recipientDiv {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#messageInput {
    width: 100%;
    height: 200px;
    resize: none;
}

#sendButtonContainer,
#inboxMessageError,
#inboxMessageSuccess {
    display: flex;
    justify-content: center;
    width: 100%;
}

#sendButton {
    background-color: rgba(13, 242, 255, 0.8);
    font-size: 1.2em;
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.4);
    transition: all 0.3s ease;
}

#sendButton:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
}

#sendButtonContainer {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

#closeOverlayButton,
#closeSettingsButton {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 5px 10px;
    background: #f44336;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#closeOverlayButton:hover,
#closeSettingsButton:hover {
    background-color: #d32f2f;
}

#closeConversationButton {
	position: absolute;
	top: 2px;
	right: 2px;
	padding: 5px 10px;
	border: 2px solid rgba(114, 250, 255, 0.45);
	border-radius: 8px;
	background: rgba(2, 14, 20, 0.85);
	color: #72faff;
	cursor: pointer;
	box-shadow: 0 0 10px rgba(114, 250, 255, 0.4);
	transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}

#closeConversationButton:hover {
	background: rgba(14, 36, 46, 0.6);
	box-shadow: 0 0 14px rgba(114, 250, 255, 0.55);
	transform: translateY(-1px);
}

.buttonGroup {
    display: flex;
}

.buttonGroup button {
    margin-right: 7px;
    width: 35px;
    height: 35px;
    border: none;
    background-color: #0df2ff;
    color: #323232;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.buttonGroup button:hover {
    background-color: #2a2a2a;
    color: #0df2ff;
}

.separator {
    margin-left: 2px;
    margin-right: 2px;
    align-self: center;
    color: #0df2ff;
    font-size: 175%;
    font-weight: bolder;
}

#buildingCreationOverlay {
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
}

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 750px;
    height: 750px;
    max-width: 95vw;
    max-height: 95vh;
    background-color: #0d0d0d;
    border: 2px solid #0df2ff;
    border-radius: 15px;
    font-family: 'Courier New', monospace;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 30px rgba(0, 223, 255, 0.4), 0 0 60px rgba(0, 223, 255, 0.2);
}

.overlay-header {
    width: 100%;
    height: 30px;
    background-color: #1a1a1a;
    cursor: move;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0df2ff;
    font-size: 1.2em;
    font-weight: bold;
}

.building-menu {
    width: 200px;
    height: 100%;
    text-align: center;
    border-right: 1px solid #0df2ff;
    border-bottom: 1px solid #0df2ff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1em;
    color: #0df2ff;
    padding-right: 8px;
}

.building-menu p { margin: 0; }
.building-menu div { display: inline; margin-top: 5px; }
.building-menu select, .building-menu button { margin-bottom: 5px; }
.building-menu img { margin-bottom: 5px; }
.building-menu span { display: inline; }

.buildingTypeSelected, #priceMeterBuilding, #totalMeterBuilding, .totalMeterCounter, #totalBuildingCost {
    color: white !important;
}

.building-menu p, .building-menu div, .building-menu select, .building-menu button, .building-menu img, .building-menu span {
    color: #0df2ff;
}

.building-display {
    position: relative;
    cursor: grab;
    width: 500px;
    height: 500px;
    margin-left: 30px;
    background-color: #1a1a1a;
    border: 2px solid #0df2ff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.4), 0 0 30px rgba(0, 223, 255, 0.2);
}

.buttons-container, .building-buttons {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 25px;
    flex-wrap: wrap;
    gap: 8px;
}

.buttons-container button,
.building-buttons button,
.building-menu button,
.buildingSelection button,
#closeGeneratedImageOverlay {
    background-color: #000;
    border-radius: 5px;
    border: none;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.4);
    transition: all 0.3s ease;
    color:#0df2ff;
    cursor:pointer;
    font-family:'Courier New',monospace;
    outline:none;
    text-transform:uppercase;
}

.buttons-container button { font-size:14px; font-weight: bold; padding:8px 16px; margin:0; }
.building-buttons button, .building-menu button, .buildingSelection button { font-size: 10px; padding:8px 12px; margin:0; }

.building-buttons button:hover,
.building-menu button:hover,
.buildingSelection button:hover,
#closeGeneratedImageOverlay:hover,
.buttons-container button:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
}

.overlay-main {
    display: flex;
    flex-grow: 1;
    gap: 16px;
}

.building-and-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

#buildingTypeSelection, #floorTypeSelection, #wallTypeSelection, #floorSelection {
    background-color: #000000;
    color: #0df2ff;
    border: 1px solid rgba(0, 223, 255, 0.5);
    padding: 5px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

#buildingTypeSelection:hover, #floorTypeSelection:hover, #wallTypeSelection:hover, #floorSelection:hover { cursor: pointer; }

.buildingSelection { margin-top: 20px !important; }

#buildingCreationError, #buildingCreationInProgress {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    text-align: center;
}

#generatedImageOverlay {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

#generatedImageOverlay .overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    max-width: 95vw;
    max-height: 95vh;
    background-color: #323232;
    font-family: "Courier New", monospace;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%);
    gap: 10px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#displayedFloorSelection {
    width: 160px;
    margin-bottom: 6px;
}

.image-container {
    margin-bottom: -12px;
}

@media (max-width: 1024px) {
    .overlay-content { padding: 16px; border-radius: 12px; }
    .overlay-main { gap: 12px; }
    .building-menu { width: 180px; }
}

@media (max-width: 640px) {
    #buildingCreationOverlay {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
    .overlay-content {
        position: static;
        width: 95vw;
        height: auto;
        max-height: none;
        margin: 50px auto 16px auto;
        padding: 12px;
        gap: 10px;
        overflow: visible;
    }
    .overlay-header {
        height: 44px;
        font-size: 1rem;
    }
    .overlay-main {
        flex-direction: column;
        gap: 10px;
    }
    .building-menu {
        width: 100%;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid #0df2ff;
        padding-bottom: 10px;
        align-items: center;
    }
    .building-and-buttons {
        width: 100%;
    }
    .building-display {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin-left: 0;
    }
    #generatedImageOverlay .overlay-content {
        width: 95vw;
        height: auto;
        max-height: calc(100vh - 60px);
        transform: translate(-50%, 0);
        top: 30px;
        left: 50%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }
    #generatedImageOverlay .image-container {
        width: 100%;
        max-height: calc(100vh - 140px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #generatedImageOverlay .image-container img {
        display: block;
        max-width: 90%;
        max-height: 70vh;
        height: auto;
        width: auto;
        user-select: none;
        -webkit-user-drag: none;
    }
}

#floorOverlay {
    position: absolute;
    background-color:#323232;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%);
    background-size: 100% 3px;
    background-repeat: repeat-y;
    background-attachment: fixed;
    font-family:"Courier New",monospace;
    border: 1px solid black;
    width: 150px;
    padding: 5px;
    box-sizing: border-box;
    z-index: 1000;
}

#floorOverlay p {
    text-align: center;
    margin: 5px 0;
    font-size:14px;
}

#floorOverlay button {
    display: block;
    width: 100%;
    margin: 0;
    background-color:#0df2ff;
    border:2px solid #2a2a2a;
    border-radius:5px;
    color:#2a2a2a;
    cursor:pointer;
    font-family:'Courier New',monospace;
    font-size:10px;
    font-weight: bold;
    padding:5px 5px;
    text-transform:uppercase;
    transition:background-color 0.3s,color .3s;
    text-align: center;
}

#floorOverlay button:last-child {
    margin-bottom: 5px;
}

#floorOverlay button:hover {
    background-color:#2a2a2a;
    color:#0df2ff;
}

#closeFloorOverlay,
#closeTerminalOverlay,
#closeDigicodeOverlay,
#closeStateTerminalOverlay,
#closeShowcaseOverlay,
#closeBankAccountOverlay,
#closePaymentOverlay {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: #f44336 !important;
  color: #ffffff !important;
  cursor: pointer;
  z-index: 9999;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 7px rgba(0,0,0,0.22);
  touch-action: manipulation;
  user-select: none;
}

#closeFloorOverlay:hover,
#closeTerminalOverlay:hover,
#closeDigicodeOverlay:hover,
#closeStateTerminalOverlay:hover,
#closeShowcaseOverlay:hover,
#closeBankAccountOverlay:hover,
#closePaymentOverlay:hover {
  background: #d32f2f !important;
}

@media (max-width: 450px) {
  #closeFloorOverlay,
  #closeTerminalOverlay,
  #closeDigicodeOverlay,
  #closeStateTerminalOverlay,
  #closeShowcaseOverlay,
  #closeBankAccountOverlay,
  #closePaymentOverlay {
    top: 4px;
    right: 4px;
    width: 38px !important;
    height: 38px !important;
    font-size: 20px;
    padding: 0;
  }
}

#terminalOverlay {
  background-color: #080808;
  border: 2px solid rgba(13, 242, 255, 0.8);
  box-shadow: 0 0 10px rgba(0, 223, 255, 0.4), 0 0 20px rgba(0, 223, 255, 0.3);
  border-radius: 12px;
  animation: pulse-border 4s ease-in-out infinite;
  font-family: "Courier New", monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 5%;
  left: 50vw;
  width: 98vw;
  max-width: 750px;
  height: 90vh;
  max-height: 650px;
  z-index: 1000;
  justify-content: flex-start;
  padding: 12px 8px 16px 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #0df2ff transparent;
  transform: translate(-50%, 0);
  will-change: left, top;
}

#terminalOverlay.dragging-overlay {
  transform: none !important;
}

@media (min-width: 768px) {
  #terminalOverlay {
    padding: 32px 32px 32px 32px;
    top: 20%;
    left: 52vw;
    width: 750px;
    height: 650px;
    transform: translate(-50%, 0);
    max-width: 98vw;
    max-height: 95vh;
  }
}

#terminalOverlay .management-button,
#terminalOverlay .floor-access-button,
#terminalOverlay .sub-management-button,
#terminalOverlay .create-position-button,
#terminalOverlay .add-access,
#terminalOverlay .list-factory-prod,
#terminalOverlay .category-button {
  display: inline-block;
  background-color: #0d0d0d;
  border: 2px solid #0df2ff;
  border-radius: 5px;
  color: #0df2ff;
  text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: bold;
  padding: 7px 10px;
  text-align: center;
  min-width: 88px;
}

#terminalOverlay .access-controller-button {
  background-color: #0d0d0d;
  border: 2px solid #0df2ff;
  border-radius: 5px;
  color: #0df2ff;
  margin-left: 2px;
  text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 6px;
  text-align: center;
}

#terminalOverlay .management-button.active,
#terminalOverlay .floor-access-button.active,
#terminalOverlay .sub-management-button.active,
.create-position-button:hover,
#terminalOverlay button:hover,
.category-button.active,
#terminalOverlay .history-date-button.special-button,
#terminalOverlay .history-date-button.active,
#terminalOverlay .sell-land-button,
#terminalOverlay .sell-building-button,
#terminalOverlay .destroy-building-button,
#terminalOverlay .submit-button-account,
#terminalOverlay .proposalButton,
#terminalOverlay .production-number,
#terminalOverlay .history-date-button:hover:not(.active),
#terminalOverlay .add-access-button:hover,
.add-employee-button:hover,
.delete-employee-button:hover {
  color: #0df2ff;
  background-color: rgba(13, 242, 255, 0.2);
  box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
  border: 2px solid #0df2ff;
}

#terminalOverlay .sub-management-button .applications-count {
  color: red;
}

#terminalOverlay .management-button-container,
#terminalOverlay .button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  gap: 6px;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  #terminalOverlay .management-button,
  #terminalOverlay .floor-access-button,
  #terminalOverlay .sub-management-button,
  #terminalOverlay .create-position-button,
  #terminalOverlay .add-access,
  #terminalOverlay .list-factory-prod,
  #terminalOverlay .category-button {
    font-size: 12px;
    padding: 4px 8px;
    min-width: 72px;
    border-width: 1px;
    line-height: 1.2;
  }

  #terminalOverlay .access-controller-button {
    font-size: 10px;
    padding: 2px 6px;
    border-width: 1px;
    line-height: 1.2;
  }

  #terminalOverlay .management-button.active,
  #terminalOverlay .floor-access-button.active,
  #terminalOverlay .sub-management-button.active,
  .create-position-button:hover,
  #terminalOverlay button:hover,
  .category-button.active,
  #terminalOverlay .history-date-button.special-button,
  #terminalOverlay .history-date-button.active,
  #terminalOverlay .sell-land-button,
  #terminalOverlay .sell-building-button,
  #terminalOverlay .destroy-building-button,
  #terminalOverlay .submit-button-account,
  #terminalOverlay .proposalButton,
  #terminalOverlay .production-number,
  #terminalOverlay .history-date-button:hover:not(.active),
  #terminalOverlay .add-access-button:hover,
  .add-employee-button:hover,
  .delete-employee-button:hover {
    border-width: 1px;
    box-shadow: 0 0 6px rgba(13, 242, 255, 0.7);
  }
}

#terminalOverlay .sub-buttons-container {
  display: flex;
  height: 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: -24px;
  margin-bottom: 16px;
}

#terminalOverlay table {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  font-size: 14px;
}

#terminalOverlay table td {
  border: 1px solid #0df2ff;
  padding: 7px;
  background-color: #2a2a2a;
  color: #0df2ff;
  font-family: 'Courier New', monospace;
  font-size: 15px;
}

#terminalOverlay table td:nth-child(1),
#terminalOverlay table td:nth-child(2) {
  width: 42vw;
  min-width: 100px;
  max-width: 250px;
}

@media (min-width: 768px) {
  #terminalOverlay table td:nth-child(1),
  #terminalOverlay table td:nth-child(2) {
    width: 250px !important;
  }
}

#terminalOverlay .styled-form {
  border: 1px solid #0df2ff;
  padding: 10px;
  margin-top: 0;
}

#terminalOverlay .form-title {
  text-align: center;
  border: 1px solid #0df2ff;
  padding: 10px 0 10px 25px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}

#terminalOverlay .form-label {
  margin-bottom: 3px;
  display: block;
  color: #fff;
  font-size: 14px;
}

#terminalOverlay .form-control,
#terminalOverlay .text-input,
#terminalOverlay .number-input {
  margin-bottom: 13px;
  border: 1px solid #0df2ff;
  color: #0df2ff;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  background: #181a1b;
  border-radius: 5px;
}

#terminalOverlay .submit-button:hover {
  background-color: #0df2ff;
  border: 1px solid #2a2a2a;
  color: #2a2a2a;
}

#terminalOverlay .jobs-title {
  color: white;
  text-align: center;
  margin-top: 20px;
  width: 100%;
}

#terminalOverlay .job-container {
  border: 1px solid #0df2ff;
  max-width: 98vw;
  padding: 10px;
  margin-top: 5px;
  justify-content: center;
}

#terminalOverlay .job-container span {
  cursor: pointer;
  font-size: 18px;
}

#terminalOverlay .job-details {
  width: 100%;
  max-width: 480px;
  margin: 0px auto;
  overflow-wrap: break-word;
  border: 1px solid #0df2ff;
  border-top: none;
  border-bottom: none;
  padding: 10px;
}

#terminalOverlay .application-container {
  width: 100%;
  max-width: 480px;
  font-size: 13px;
  border: 1px solid #0df2ff;
  text-align: center;
  color: #fff;
  margin-bottom: 15px;
  padding: 10px;
}

#terminalOverlay .application-title {
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
}

#terminalOverlay .application-details {
  background-color: #2a2a2a;
  color: #fff;
  margin-top: 15px;
  padding: 5px;
  text-align: left;
  border: 1px solid #0df2ff;
}

#terminalOverlay .job-details label, 
#terminalOverlay .job-details p {
  color: #fff;
  font-size: 13px;
}

#terminalOverlay .job-details input, 
#terminalOverlay .job-details select, 
#terminalOverlay .list-factory select, 
#terminalOverlay .submitItemSelect {
  background-color: #2a2a2a;
  border: 1px solid #0df2ff;
  color: #0df2ff;
  margin-bottom: 10px;
  width: 100px;
  border-radius: 4px;
  font-size: 14px;
}

#terminalOverlay .submitItemSelect {
  background-color: #2a2a2a;
  border: 1px solid #0df2ff;
  color: #0df2ff;
}

#terminalOverlay .stats-select {
  background-color: #2a2a2a;
  border: 1px solid #0df2ff;
  color: #0df2ff;
  text-align: center;
  width: 50px;
}

#terminalOverlay .dropdownContainer label {
  font-size: 13px;
}

#terminalOverlay .input-sell-price {
  background-color: #2a2a2a;
  border: 1px solid #0df2ff;
  color: #0df2ff;
  padding: 5px;
  margin: 5px 0;
  width: 100px;
  text-align: center;
}

#terminalOverlay .job-details button, 
#terminalOverlay .applicationsButtons button, 
#terminalOverlay .addToShowcase, 
#terminalOverlay .modifyPriceButton, 
#terminalOverlay .removeFromShowcase, 
#terminalOverlay .createItemShowcase, 
#terminalOverlay .submitItem {
  background-color: #0d0d0d;
  border: 1px solid #0df2ff;
  border-radius: 5px;
  color: #0df2ff;
  margin-left: 2px;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
  margin-top: 2px;
  height: 30px;
  min-width: 72px;
  font-size: 13px;
}

#terminalOverlay .numberToShowcase {
  text-align: center;
  border: 1px solid rgba(0, 223, 255, 0.5);
  background-color: #2a2a2a;
  color: #0df2ff;
  border-radius: 5px;
  width: 50px;
}

#terminalOverlay input::-webkit-outer-spin-button,
#terminalOverlay input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#terminalOverlay .job-details button:hover, 
#terminalOverlay .applicationsButtons button:hover {
  color: #0df2ff;
  background-color: rgba(13, 242, 255, 0.2);
  box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
  border: 1px solid #0df2ff;
}

#terminalOverlay .bank-account-input {
  align-self: center;
  margin-bottom: 0;
}

#terminalOverlay .applicationsButtons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

#terminalOverlay .noApplicationsMessage {
  color: #fff;
  width: 100%;
  text-align: center !important;
  margin-top: 20px;
}

#terminalOverlay .item-element, 
#terminalOverlay .add-stock-item {
  border: 2px solid rgba(0, 223, 255, 0.5);
  border-radius: 10px;
  background-color: rgba(13, 242, 255, 0.2);
  box-shadow: 0 0 10px rgba(0, 223, 255, 0.3);
  margin: 4px 0;
  padding: 5px 8px;
  width: 100%;
  max-width: 220px;
}

@media (max-width: 450px) {
  #terminalOverlay {
    padding: 4px;
    font-size: 13px;
    min-width: 95vw;
    min-height: 95vh;
  }
  #terminalOverlay .item-element,
  #terminalOverlay .add-stock-item {
    max-width: 98vw;
    font-size: 12px;
  }
  #terminalOverlay .job-details, 
  #terminalOverlay .application-container {
    max-width: 99vw;
    font-size: 12px;
  }
  #terminalOverlay .management-button,
  #terminalOverlay .floor-access-button,
  #terminalOverlay .sub-management-button,
  #terminalOverlay .create-position-button,
  #terminalOverlay .add-access,
  #terminalOverlay .list-factory-prod,
  #terminalOverlay .category-button {
    font-size: 11px;
    min-width: 62px;
    padding: 4px 5px;
  }
}

.jong-tab-content {
  min-height: 120px;
  background: rgba(0,0,0,0.15);
  border-radius: 10px;
  padding: 14px 6vw 14px 6vw;
  color: white;
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .jong-tab-content {
    min-height: 180px;
    padding: 24px 32px 24px 32px;
  }
}

.jong-form-title-wide {
  font-size: 1.3em;
  color: #0df2ff;
  background: none;
  border: 2px solid #0df2ff;
  width: 98%;
  margin: 10px auto 18px auto;
  text-align: center;
  font-family: "Courier New", monospace;
  font-weight: bold;
  border-radius: 0.25em;
  box-shadow: 0 0 14px #0df2ff44;
  letter-spacing: 1px;
  padding: 8px 0;
}

@media (min-width: 500px) {
  .jong-form-title-wide {
    font-size: 2em;
    padding: 10px 0;
  }
}

.jong-cat-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 98%;
  margin: 0 auto 10px auto;
  flex-wrap: wrap;
}

@media (min-width: 600px) {
  .jong-cat-row {
    gap: 16px;
    width: 96%;
    margin-bottom: 12px;
    flex-wrap: nowrap;
  }
}

.jong-cat-label {
  color: #0df2ff;
  font-size: 1em;
  width: 100px;
  text-align: left;
  font-family: "Courier New", monospace;
}

@media (min-width: 500px) {
  .jong-cat-label {
    font-size: 1.15em;
    width: 150px;
  }
}

.jong-cat-select {
  background: #181a1c;
  color: #0df2ff;
  border: 1.5px solid #0df2ff;
  border-radius: 4px;
  font-size: 1em;
  width: 90vw;
  min-width: 120px;
  max-width: 99vw;
  height: 32px;
  padding-left: 7px;
  font-family: "Courier New", monospace;
  box-sizing: border-box;
}

@media (min-width: 480px) {
  .jong-cat-select {
    width: 60%;
    min-width: 180px;
    max-width: 400px;
  }
}

.jong-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 12px 0 7px 0;
  flex-wrap: wrap;
}

@media (min-width: 600px) {
  .jong-toolbar {
    gap: 7px;
    margin: 18px 0 10px 0;
    flex-wrap: nowrap;
  }
}

.jong-toolbar-btn {
  min-width: 36px;
  font-size: 1em;
  font-weight: bold;
  border-radius: 5px;
  margin: 0 1px;
  height: 30px;
  padding: 2px 8px;
  font-family: "Courier New", monospace;
}

@media (min-width: 600px) {
  .jong-toolbar-btn {
    min-width: 40px;
    font-size: 1.08em;
    padding: 2px 12px;
    height: 32px;
    margin: 0 2px;
  }
}

.jong-textarea {
  background-color: #1a1f27;
  color: #e0f0ff;
  min-height: 90px;
  max-height: 220px;
  border-radius: 8px;
  outline: none;
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  overflow-y: auto !important;
  overflow-x: hidden;
  resize: none;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 550px) {
  .jong-textarea {
    min-height: 200px;
    max-height: 340px;
    font-size: 14px;
  }
}

.jong-button-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

@media (min-width: 500px) {
  .jong-button-row {
    gap: 24px;
    margin-top: 18px;
  }
}

.jong-button-row .management-button {
  min-width: 88px;
  font-size: 0.96em;
  padding: 7px 0;
  border-radius: 7px;
  margin: 0 4px;
  font-family: "Courier New", monospace;
}

@media (min-width: 600px) {
  .jong-button-row .management-button {
    min-width: 110px;
    font-size: 1em;
    margin: 0 8px;
  }
}

.terminalAuthorized {
  color: green;
  font-style: italic;
  text-align: left;
  margin: 0;
  align-self: flex-start;
  font-size: 13px;
}

@media (min-width: 600px) {
  .terminalAuthorized {
    font-size: 14px;
  }
}

#terminalOverlay::-webkit-scrollbar,
#jobsOverlay::-webkit-scrollbar {
  width: 5px;
}

#terminalOverlay::-webkit-scrollbar-thumb,
#jobsOverlay::-webkit-scrollbar-thumb {
  background-color: #0df2ff;
}

#terminalOverlay::-webkit-scrollbar-thumb:hover,
#jobsOverlay::-webkit-scrollbar-thumb:hover {
  background: #555;
}

@keyframes pulsePinned {
  0% { box-shadow: 0 0 0 #0df2ff44; transform: scale(.98);}
  40% { box-shadow: 0 0 14px #0df2ff66,0 0 32px #0df2ff33; }
  100% { box-shadow: 0 0 16px #0df2ff44; transform: scale(1);}
}

.jong-notice-content { font-size: 0.9em; }
.jong-notice-content .text-center { text-align: center !important; }
.jong-notice-content .text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.jong-calendar-container {
  max-width: 99vw;
  margin: 0 auto;
  padding: 2vw;
  box-sizing: border-box;
}
@media (min-width: 700px) {
  .jong-calendar-container {
    max-width: 520px;
    padding: 0;
  }
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px);} to { opacity:1; transform:none;} }
.jong-calendar-modal { animation: fadeIn .15s; }

#terminalOverlay .division-chief {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(22,30,32,0.93);
  border-radius: 12px;
  border: 1.5px solid #0df2ff;
  box-shadow: 0 0 16px #0df2ff33;
  padding: 10px 0 10px 0;
  margin: 0 0 16px 0;
  width: 99%;
  max-width: 99vw;
  box-sizing: border-box;
}

@media (min-width: 700px) {
  #terminalOverlay .division-chief {
    padding: 18px 0 12px 0;
    margin: 0 0 22px 0;
    width: 96%;
    max-width: 430px;
  }
}

#terminalOverlay .chief-title {
  font-family: "Courier New", monospace;
  color: #0df2ff;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 8px;
}

@media (min-width: 700px) {
  #terminalOverlay .chief-title {
    font-size: 17px;
  }
}

#terminalOverlay .chief-name {
  color: #fff;
  font-family: "Courier New", monospace;
  margin: 6px 0 4px 0;
  font-size: 1em;
}

#terminalOverlay .appoint-title {
  color: #0df2ff;
  font-family: "Courier New", monospace;
  font-size: 13px;
  margin-bottom: 4px;
  text-align: center;
  width: 100%;
}
@media (min-width: 700px) {
  #terminalOverlay .appoint-title {
    font-size: 14px;
  }
}

#terminalOverlay .appoint-chief-form input,
#terminalOverlay .appoint-chief-form button {
  font-family: "Courier New", monospace;
  font-size: 12px;
  margin-bottom: 4px;
  padding: 5px 7px;
  border-radius: 6px;
  border: 1px solid #0df2ff;
  background: #1a1a1a;
  color: #0df2ff;
  outline: none;
}

@media (min-width: 600px) {
  #terminalOverlay .appoint-chief-form input,
  #terminalOverlay .appoint-chief-form button {
    font-size: 13px;
  }
}

#terminalOverlay .appoint-chief-form button {
  background: #0d0d0d;
  font-weight: bold;
  transition: background 0.2s;
  cursor: pointer;
}
#terminalOverlay .appoint-chief-form button:hover {
  background: rgba(13,242,255,0.13);
  color: #0df2ff;
  box-shadow: 0 0 8px #0df2ff88;
}
#terminalOverlay .revoke-chief-btn {
  font-family: "Courier New", monospace;
  font-size: 12px;
  margin-top: 7px;
  border-radius: 7px;
  background: #0d0d0d;
  color: #0df2ff;
  border: 1.5px solid #0df2ff;
  font-weight: bold;
  cursor: pointer;
  padding: 5px 14px;
  transition: background 0.15s;
}
@media (min-width: 700px) {
  #terminalOverlay .revoke-chief-btn {
    font-size: 13px;
    padding: 5px 18px;
  }
}
#terminalOverlay .revoke-chief-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
#terminalOverlay .revoke-chief-btn:hover:not(:disabled) {
  background: rgba(13,242,255,0.16);
  color: #0df2ff;
  box-shadow: 0 0 8px #0df2ff99;
}
#terminalOverlay .members-title {
  color: #0df2ff;
  font-family: "Courier New", monospace;
  font-size: 14px;
  margin: 13px 0 7px 0;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.5px;
}
@media (min-width: 600px) {
  #terminalOverlay .members-title {
    font-size: 15px;
    margin: 18px 0 8px 0;
  }
}

#terminalOverlay .division-members-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  width: 100%;
  max-width: 99vw;
}

@media (min-width: 700px) {
  #terminalOverlay .division-members-list {
    gap: 19px 22px;
    max-width: 650px;
  }
}

#terminalOverlay .division-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #0df2ff;
  background: #181a1c;
  border-radius: 7px;
  padding: 6px 10px 7px 10px;
  min-width: 66px;
  box-shadow: 0 0 6px #0df2ff25;
}

@media (min-width: 500px) {
  #terminalOverlay .division-member {
    min-width: 100px;
    padding: 8px 18px 7px 18px;
  }
}

#terminalOverlay .division-member span {
  color: #0df2ff;
  font-family: "Courier New", monospace;
  margin-top: 7px;
  font-size: 12px;
}
@media (min-width: 600px) {
  #terminalOverlay .division-member span {
    font-size: 13px;
  }
}
#terminalOverlay .avatar {
  border-radius: 8px;
  border: 2px solid #0df2ff;
  box-shadow: 0 0 10px #0df2ff3b;
  background: #181a1c;
  width: 38px;
  height: 38px;
  margin-bottom: 0;
  object-fit: cover;
}
@media (min-width: 500px) {
  #terminalOverlay .avatar {
    width: 48px;
    height: 48px;
  }
}
#terminalOverlay .division-chief .avatar {
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
}
@media (min-width: 500px) {
  #terminalOverlay .division-chief .avatar {
    width: 64px;
    height: 64px;
  }
}

#stateTerminalOverlay {
  background-color: #080808;
  border: 2px solid rgba(13, 242, 255, 0.8);
  box-shadow: 0 0 10px rgba(0, 223, 255, 0.4), 0 0 20px rgba(0, 223, 255, 0.3);
  border-radius: 12px;
  font-family: "Courier New", monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 4%;
  left: 50vw;
  width: 98vw;
  max-width: 750px;
  height: 87vh;
  max-height: 550px;
  z-index: 1000;
  justify-content: flex-start;
  padding: 10px 6px 16px 6px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #0df2ff transparent;
  box-sizing: border-box;
  transform: translate(-50%, 0);
  will-change: left, top;
}

#stateTerminalOverlay.dragging-overlay {
  transform: none !important;
}

@media (min-width: 700px) {
  #stateTerminalOverlay {
    padding: 50px 30px 32px 30px;
    top: 20%;
    left: 8vw;
    width: 750px;
    height: 550px;
    max-width: 98vw;
    max-height: 95vh;
    transform: none;
  }
}

#stateTerminalOverlay .buttonsContainer {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 6px;
}

#stateTerminalOverlay .stateTerminalMenuButtons {
  background-color: #0d0d0d;
  border: 2px solid #0df2ff;
  border-radius: 5px;
  color: #0df2ff;
  margin: 2px 2px;
  text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  padding: 8px 10px;
  text-align: center;
  min-width: 72px;
}

@media (max-width: 450px) {
  #stateTerminalOverlay .stateTerminalMenuButtons {
    font-size: 10px;
    padding: 6px 7px;
    min-width: 52px;
  }
}

#stateTerminalOverlay .stateTerminalMenuButtons:hover {
  color: #0df2ff;
  background-color: rgba(13, 242, 255, 0.2);
  box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
  border: 2px solid #0df2ff;
}

#stateTerminalOverlay .stateTerminalWelcome {
  color: green;
  font-style: italic;
  text-align: left;
  margin: 0;
  align-self: flex-start;
  font-size: 13px;
}

@media (min-width: 500px) {
  #stateTerminalOverlay .stateTerminalWelcome {
    font-size: 14px;
  }
}

#stateTerminalOverlay .state-terminal-title {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 11px;
  color: #0df2ff;
  font-family: "Courier New", monospace;
}

@media (min-width: 700px) {
  #stateTerminalOverlay .state-terminal-title {
    font-size: 32px;
    margin-bottom: 15px;
  }
}

#stateTerminalOverlay .state-terminal-select, 
#stateTerminalOverlay .state-terminal-input {
  background-color: #2a2a2a;
  border: 1px solid #0df2ff;
  color: #0df2ff;
  margin-bottom: 10px;
  text-align: center;
  width: 80vw !important;
  max-width: 220px;
  min-width: 100px;
  font-size: 14px;
  border-radius: 5px;
  padding: 7px 10px;
  font-family: "Courier New", monospace;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  #stateTerminalOverlay .state-terminal-select, 
  #stateTerminalOverlay .state-terminal-input {
    width: 200px !important;
    max-width: 240px;
    font-size: 15px;
  }
}

#stateTerminalOverlay .permissionDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 13px;
  width: 100%;
}

#stateTerminalOverlay .checkboxContainer {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 6px;
}

#stateTerminalOverlay .permissionLabel {
  margin-bottom: 5px;
  color: #0df2ff;
  font-family: "Courier New", monospace;
  font-size: 14px;
}

#stateTerminalOverlay::-webkit-scrollbar {
  width: 5px;
}
#stateTerminalOverlay::-webkit-scrollbar-thumb {
  background-color: #0df2ff;
}
#stateTerminalOverlay::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#stateTerminalOverlay .stateTerminalTab {
  background-color: #0d0d0d;
  border: 2px solid #0df2ff;
  border-radius: 5px 5px 0 0;
  color: #0df2ff;
  margin: 0 2px;
  text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  padding: 8px 14px;
  text-align: center;
  min-width: 72px;
}

@media (max-width: 450px) {
  #stateTerminalOverlay .stateTerminalTab {
    font-size: 10px;
    padding: 6px 8px;
    min-width: 48px;
  }
}

#stateTerminalOverlay .stateTerminalTab:hover {
  color: #0df2ff;
  background-color: rgba(13, 242, 255, 0.2);
  box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
  border: 2px solid #0df2ff;
}

#stateTerminalOverlay .stateTerminalTab.active {
  background-color: rgba(13, 242, 255, 0.2);
  box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
  border-bottom: 2px solid transparent;
  margin-bottom: 15px;
}

#stateTerminalOverlay .stateTerminalWelcome, #showcaseOverlay .businessShowcaseWelcome, #bankAccountOverlay .businessBankAccountWelcome {
    color: green;
    font-style: italic;
    text-align: left;
    margin: 0;
    align-self: flex-start;
    font-size: 14px;
}

.receptionDomeOverlayNew {
    background: linear-gradient(120deg,#08121f 0%, #181f38 100%);
    border-radius: 15px;
    border: 2.7px solid #18a6fa99;
    box-shadow: 0 0 44px 7px #13e0f250, 0 0 0 2.6px #18a6fa33 inset;
    position: fixed;
    z-index: 130;
    animation: sectorFadeIn 1.07s cubic-bezier(.44,.15,.1,1.07);
    max-width: 600px; min-width:320px; width: 98vw;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 95vh;
    height: auto;
}
@media (max-width: 900px) {
    .receptionDomeOverlayNew {
        min-width: 0; width: 99vw; max-width: 99vw;
        border-radius: 0 0 15px 15px;
    }
}
@media (max-width: 600px) {
    .receptionDomeOverlayNew {
        min-width: 0; width: 100vw; max-width: 100vw; left: 0; top: 0;
        border-radius: 0;
        transform: none;
        height: 100vh; max-height: 100vh;
    }
}
@keyframes sectorFadeIn {
    0% { opacity: 0; filter: blur(13px);}
    100% { opacity: 1; filter: blur(0);}
}

.dome-message-container {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 65px 38px 25px 38px;
    min-height: 0;
}
@media (max-width: 900px) {
    .dome-message-container { padding: 36px 4vw 14px 4vw; }
}
@media (max-width: 600px) {
    .dome-message-container { padding: 15vw 2vw 4vw 2vw; }
}

.sector-choice-svg-top {
    display: block;
    margin: 0 auto;
    margin-top: -38px;
    max-width: 290px;
    width: 92%;
    height: auto;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .sector-choice-svg-top { max-width: 96vw; }
}
.sector-choice-svg-bottom {
    display: block;
    margin: 0 auto;
    margin-bottom: -11px;
    max-width: 190px;
    width: 82%;
    height: auto;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .sector-choice-svg-bottom { max-width: 85vw; }
}

.dome-btns-row {
    display: flex;
    gap: 33px;
    justify-content: center;
    align-items: center;
    margin: 38px 0 12px 0;
}
@media (max-width: 600px) {
    .dome-btns-row { gap: 13px; margin: 23px 0 10px 0; }
}

.dome-sector-btn {
    flex: 1;
    min-width: 100px;
    max-width: 195px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: linear-gradient(112deg,#0c1830cc 38%,#16f1ccbb 80%,#fff0);
    border: 2.7px solid #18a6fa;
    border-radius: 21px;
    font-size: 29px;
    font-family: 'Orbitron','Consolas',monospace;
    color: #cdfcfe;
    font-weight: 900;
    letter-spacing: 2.6px;
    box-shadow:0 0 22px 2px #0df2ff2b,0 0 0 2px #18a6fa99 inset;
    text-shadow: 0 2px 9px #19d8f2,0 1px 4px #fff8;
    padding: 0;
    transition: all .19s cubic-bezier(.56,.34,.09,1.01), filter .21s cubic-bezier(.56,.34,.09,1.01);
    text-align:center;
}
.dome-sector-btn.selected, .dome-sector-btn:hover {
    background: linear-gradient(120deg,#18a6fa 60%,#23ffd4 100%);
    color: #002b40; border:2.8px solid #1cffc2; box-shadow:0 0 33px 4px #1cffc288;
    filter: brightness(1.14) drop-shadow(0 0 12px #18a6fa77);
}

.dome-confirm-btn {
    display: block;
    margin:48px auto 0 auto;
    min-width:222px; font-size:22.7px;
    background:linear-gradient(90deg,#23ffd4 45%,#18a6fa 100%);
    border-radius:13px;
    color:#07283a;
    font-weight: bold;
    border:none;
    padding:18px 47px 14px 47px;
    box-shadow:0 4px 27px #18a6fa73;
    cursor:pointer;
    transition: all .15s cubic-bezier(.38,.70,.13,1), box-shadow .24s cubic-bezier(.56,.34,.09,1.01);
}
.dome-confirm-btn:disabled {
    opacity: 0.67;
    filter: grayscale(0.15);
    cursor: not-allowed;
}
.dome-confirm-btn:not(:disabled):hover {
    background:linear-gradient(90deg,#18a6fa 55%,#23ffd4 100%);
    color:#001233;
    transform: scale(1.043);
    box-shadow:0 0 60px #18a6fa42,0 0 0 2.6px #18a6fa55 inset;
    filter:brightness(1.06) drop-shadow(0 0 22px #13e0f2b2);
}

.dome-sector-info {
    background:rgba(18,29,46,0.83);
    padding:17px 22px 10px 22px;
    border-radius:14px;
    margin:0 auto 18px auto;
    max-width:495px;
    color:#b8f6ff;
    font-size:16.1px;
    line-height:1.63;
    text-align:center;
    font-family:Consolas,monospace;
}
.dome-sector-extra {
    color:#5bf7fd;
    font-size:15.3px;
    margin:16px 0 0 0;
    font-family: 'Consolas', monospace;
    display: block;
    text-align: center;
}

.dome-affiliation-title {
    font-size:21.3px;
    color:#18a6fa;
    font-weight:900;
    letter-spacing:1.7px;
    text-align:center;
    margin-bottom:19px;
    font-family:'Orbitron',Consolas,monospace;
}
.dome-sector-choice-row {
    display:block;margin:10px 0 0 0;
}
.dome-sector-choice-a, .dome-sector-choice-b {
    color:#23ffd4;font-size:20.6px;font-weight:700;text-shadow:0 0 7px #21ffe38c;
}
.dome-sector-choice-b { color:#18a6fa;text-shadow:0 0 7px #18a6fab0;}
.dome-sector-choice-ou {
    color:#bbb;margin:0 7px 0 7px;font-size:17.5px;position:relative;top:-2px;
}

.dome-current-card {
    margin: 42px auto 14px auto;
    max-width: 500px;
    border-radius: 14px;
    background: linear-gradient(120deg,#142033 0%, #18284a 100%);
    box-shadow: 0 0 32px 0 #0df2ff1a, 0 0 0 1.5px #21ffe340 inset;
    border: 2.2px solid #18a6fa44;
    padding: 35px 26px 27px 26px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.dome-current-title {
    font-size:20.6px;
    color:#21ffe3;
    font-family:'Orbitron','Consolas',monospace;
    font-weight:800;
    letter-spacing:1.2px;
    margin-bottom:13px;
    text-shadow:0 0 11px #18a6fa66;
}
.dome-current-choice {
    font-size:32px;
    color:#18a6fa;
    font-family:'Orbitron','Consolas',monospace;
    font-weight:900;
    letter-spacing:3.6px;
    text-shadow:0 0 14px #23ffd477, 0 1px 5px #fff9;
    margin-bottom:14px;
    border-radius: 12px;
    padding: 12px 24px;
    background: linear-gradient(120deg, #112337 0%, #1b335a 100%);
    border: 1.8px solid #18a6fa88;
    display: inline-block;
}
.dome-current-extra {
    color:#b6eaff;
    font-size:15.6px;
    margin-top:14px;
    line-height:1.65;
    max-width: 430px;
    text-align:center;
    font-family:'Consolas',monospace;
    display:block;
}

.receptionDomeOverlayNew .dome-message-container::-webkit-scrollbar {
    width: 6px;
}
.receptionDomeOverlayNew .dome-message-container::-webkit-scrollbar-thumb {
    background-color: #18a6fa88;
    border-radius: 6px;
}
.receptionDomeOverlayNew .dome-message-container::-webkit-scrollbar-thumb:hover {
    background: #0df2ff;
}

.teleporter-list {
    text-align: center;
    width: 100%;
}

.teleporter-list div {
    cursor: pointer;
}

.teleporter-list div:hover {
    color: red;
}

.teleporter-list button {
    margin-left: 10px;
    padding: 5px 10px;
    background-color: #0d0d0d;
    border: 2px solid #0df2ff;
    color: #0df2ff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.teleporter-list button:hover {
    background-color: rgba(13, 242, 255, 0.2);
    color: #0df2ff;
}

.steal-action-button:hover {
    background-color: var(--primary-light);
    transform: scale(1.05);
    transition: all 0.2s ease;
}

@keyframes pulse {
    0% { text-shadow: 0 0 5px #0df2ff, 0 0 10px #0df2ff; }
    50% { text-shadow: 0 0 15px #0df2ff, 0 0 30px #0df2ff; }
    100% { text-shadow: 0 0 5px #0df2ff, 0 0 10px #0df2ff; }
}

#cryoOverlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: rgba(0, 20, 40, 0.9);
    border: 2px solid #00f2ff;
    border-radius: 16px;
    padding: 40px;
    color: #b0faff;
    font-family: "Courier New", monospace;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.7);
    max-width: 90%;
    min-width: 320px;
    max-height: 96vh;
    overflow-y: auto;
}

.cryo-avatar-container {
    position: relative;
    width: 150px;
    margin: 0 auto 20px;
}

.cryo-avatar {
    width: 100%;
    border-radius: 50%;
    border: 4px solid #00f2ff;
    box-shadow: 0 0 20px #00f2ff;
}

.ice-overlay {
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    pointer-events: none;
}

.cryo-title {
    font-size: clamp(22px, 5vw, 32px);
    margin-top: 1em;
    font-weight: bold;
    text-shadow: 0 0 10px #00f2ff;
}

.cryo-description {
    font-size: 16px;
    margin: 1em 0;
    line-height: 1.5;
}

.cryo-icon svg {
    width: 64px;
    height: 64px;
    margin-top: 1em;
    filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.6));
}

#confirmCryoButton {
    margin-top: 1.5em;
    background: #00f2ff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    color: #001f2f;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.6);
    transition: background 0.3s ease;
}

#confirmCryoButton:hover {
    background: #00aacc;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.9);
}

#closeCryoOverlay {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    color: #b0faff;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10;
}

#closeCryoOverlay:hover {
    color: #00f2ff;
}

.ice-frost-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    opacity: 0.7;
    pointer-events: none;
    mix-blend-mode: screen;
}

@media (max-width: 900px) {
    #cryoOverlay {
        max-width: 97vw;
        min-width: 0;
        width: 97vw;
        padding: 22px 3vw;
        border-radius: 13px;
        font-size: 0.98em;
    }
    .cryo-avatar-container {
        width: 78px;
        height: 78px;
        min-width: 78px;
        min-height: 78px;
        max-width: 100px;
        max-height: 100px;
        margin: 0 auto 16px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .cryo-avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #00f2ff;
        box-shadow: 0 0 14px #00f2ff;
        display: block;
    }
    .ice-overlay, .ice-frost-overlay {
        width: 100%;
        height: 100%;
        left: 0; top: 0; right: 0; bottom: 0;
        border-radius: 50%;
    }
    .cryo-title {
        font-size: 1.1em;
    }
    .cryo-description {
        font-size: 14px;
    }
    .cryo-icon svg {
        width: 48px;
        height: 48px;
    }
    #confirmCryoButton {
        font-size: 15px;
        padding: 8px 14px;
        border-radius: 9px;
    }
    #closeCryoOverlay {
        top: 7px;
        right: 8px;
        font-size: 18px;
    }
}
@media (max-width: 600px), (max-height: 500px) {
    #cryoOverlay {
        max-width: 99vw;
        width: 99vw;
        min-width: 0;
        padding: 12px 2vw;
        border-radius: 8px;
        font-size: 0.96em;
    }
    .cryo-avatar-container {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        max-width: 65px;
        max-height: 65px;
        margin: 0 auto 11px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .cryo-avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #00f2ff;
        box-shadow: 0 0 9px #00f2ff;
        display: block;
    }
    .ice-overlay, .ice-frost-overlay {
        width: 100%;
        height: 100%;
        left: 0; top: 0; right: 0; bottom: 0;
        border-radius: 50%;
    }
    .cryo-title {
        font-size: 1em;
    }
    .cryo-description {
        font-size: 12.5px;
    }
    .cryo-icon svg {
        width: 32px;
        height: 32px;
    }
    #confirmCryoButton {
        font-size: 13px;
        padding: 7px 9px;
        border-radius: 7px;
        margin-top: 1em;
    }
    #closeCryoOverlay {
        top: 4px;
        right: 5px;
        font-size: 15px;
    }
}

#showcaseOverlay {
    background-color: #000000;
    border: 2px solid rgba(13, 242, 255, 0.8);
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.4), 0 0 20px rgba(0, 223, 255, 0.3);
    border-radius: 12px;
    animation: pulse-border 4s ease-in-out infinite;
    font-family: "Courier New", monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 20%;
    left: 8%;
    width: 650px;
    max-height: 700px;
    z-index: 1000;
    justify-content: flex-start;
    padding-top: 5px;
    padding-left: 5px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #0df2ff transparent;
    box-sizing: border-box;
}

#showcaseOverlay .bank-accounts-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#showcaseOverlay .bank-account {
    background-color: #000;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.5);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin: 10px 0;
    position: relative;
    max-width: 550px;
}

#showcaseOverlay .bank-account-name {
    color: #0df2ff;
    text-align: center;
}

#showcaseOverlay #showcaseContainer {
    flex-wrap: wrap;
}

#showcaseOverlay #mainButtonContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#showcaseOverlay #buildingTypeButtonContainer {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

#showcaseOverlay .showcaseButton {
    display: inline-block;
    margin: 0;
    background-color: #0df2ff;
    border: 2px solid #2a2a2a;
    border-radius: 5px;
    color: #2a2a2a;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    padding: 5px 5px;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
    text-align: center;
}

#showcaseOverlay .showcaseButton.active,
#showcaseOverlay .showcaseButton:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
    border: 1px solid #0df2ff;
}

#showcaseOverlay .obtain-account-btn {
    background-color: #0d0d0d;
    border: 1px solid #0df2ff;
    border-radius: 5px;
    color: #0df2ff;
    padding: 10px 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#showcaseOverlay .obtain-account-btn:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
    border: 1px solid #0df2ff;
}

#showcaseOverlay .total-cost {
    color: red;
    margin-top: 10px;
    text-align: center;
}

#showcaseOverlay .showcaseOverlay-title {
    text-align: center;
    margin: 0 auto;
    font-size: 2em;
    color: #0df2ff;
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

#showcaseOverlay .bank-account p {
    background-color: #000;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.5);
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
}

#showcaseOverlay #buildingDetailsContainer, #showcaseOverlay #sellContentContainer, #showcaseOverlay #rentContentContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#showcaseOverlay .building-detail, .floor-detail {
    background-color: #2a2a2a;
    color: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
    max-width: 550px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

#showcaseOverlay .address-section, .buy-section {
    background-color: #333;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

#showcaseOverlay .building-title {
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 5px;
    color: white;
}

#showcaseOverlay .location-link, .floor-plan-link {
    color: #0df2ff;
    cursor: pointer;
    text-decoration: underline;
    margin: 5px 0;
}

#showcaseOverlay .floor-info-section p, .building-price {
    margin: 5px 0;
    text-align: center;
    color: #fff;
}

#showcaseOverlay .buy-building-button, .buy-floor-button {
    background-color: #0d0d0d;
    border: 1px solid #0df2ff;
    border-radius: 5px;
    color: #0df2ff;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
    display: block;
    width: fit-content;
    transition: background-color 0.3s, color 0.3s;
}

#showcaseOverlay .buy-building-button:hover, .buy-floor-button:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
    border: 1px solid #0df2ff;
}

#showcaseOverlay .floor-title {
    font-size: 1.2em;
    margin-bottom: 5px;
    text-align: center;
    color: #0df2ff;
}

#showcaseOverlay .floor-detail p {
    margin: 5px 0;
    text-align: left;
}

#showcaseOverlay .sellBuildingFloorSelect {
    background-color: #2a2a2a;
    border: 1px solid #0df2ff;
    color: #0df2ff;
    margin-bottom: 10px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}

#showcaseOverlay .details p {
    color: white;
    position: relative;
    text-align: left;
    margin: 5px 0;
}

#showcaseOverlay .details button, #showcaseOverlay .submitRentButton{
    background-color: #0d0d0d;
    border: 1px solid #0df2ff;
    border-radius: 5px;
    color: #0df2ff;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    display: block;
    margin: 10px auto;
    transition: background-color 0.3s, color 0.3s;
}

#showcaseOverlay .details button:hover, #showcaseOverlay .submitRentButton:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
    border: 1px solid #0df2ff;
}

#showcaseOverlay .inputSellPrice {
    display: block;
    width: 60%;
    margin: 10px auto;
    text-align: center;
    padding: 5px;
    background-color: #2a2a2a;
    border: 1px solid #0df2ff;
    color: #0df2ff;
}

#showcaseOverlay .bank-account .centered-info {
    display: block;
    text-align: center;
}

#showcaseOverlay .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background: url('/img/icons/navigateArrow.png') no-repeat center center;
    background-size: 32px 32px;
    border: none;
    width: 32px;
    height: 32px;
    background-color: transparent;
}

#showcaseOverlay .left-arrow {
    left: -40px;
}

#showcaseOverlay .right-arrow {
    right: -40px;
    transform: rotate(180deg) translateY(50%);
}

#showcaseOverlay .items-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 95%;
    margin: 20px auto;
}

#showcaseOverlay .item-element {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 20%;
    padding: 10px;
    border: 2px solid rgba(0, 223, 255, 0.5);
    border-radius: 10px;
    background-color: rgba(13, 242, 255, 0.2);
    margin-bottom: 15px;
    margin: 2px;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.3);
    box-sizing: border-box;
}

#showcaseOverlay .item-element img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
}

#showcaseOverlay .item-element p {
    color: #fff;
    margin: 5px 0;
    text-align: center;
}

#showcaseOverlay .item-element .action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#showcaseOverlay .item-element input[type="number"] {
    width: 60px;
    padding: 5px;
    text-align: center;
    border: 2px solid rgba(0, 223, 255, 0.5);
    background-color: #2a2a2a;
    color: #0df2ff;
    border-radius: 5px;
    margin-top: 10px;
}

#showcaseOverlay .item-element button {
    background-color: #0d0d0d;
    border: 1px solid #0df2ff;
    border-radius: 5px;
    color: #0df2ff;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
}

#showcaseOverlay .item-element button:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
    border: 1px solid #0df2ff;
}

#showcaseOverlay .no-items-message {
    text-align: center;
    width: 100%;
    font-size: 1.2em;
    color: #0df2ff;
    margin-left: 40px;
}

#showcaseOverlay::-webkit-scrollbar, #jobsOverlay::-webkit-scrollbar {
    width: 5px;
}

#showcaseOverlay::-webkit-scrollbar-thumb, #jobsOverlay::-webkit-scrollbar-thumb {
    background-color: #0df2ff;
}

#showcaseOverlay::-webkit-scrollbar-thumb:hover, #jobsOverlay::-webkit-scrollbar-thumb:hover {
    background: #555;
}

@media (max-width: 1200px) {
    #showcaseOverlay {
        width: 90vw;
        left: 5vw;
        max-width: 900px;
        padding-left: 0;
    }
    #showcaseOverlay .item-element {
        width: 28%;
        min-width: 140px;
    }
}

@media (max-width: 900px) {
    #showcaseOverlay {
        width: 98vw;
        left: 1vw;
        max-width: 98vw;
        max-height: 96vh;
        top: 3vh;
        border-radius: 10px;
        padding-left: 0;
        padding-top: 4px;
    }
    #showcaseOverlay .item-element {
        width: 43%;
        min-width: 120px;
    }
    #showcaseOverlay .bank-account, #showcaseOverlay .building-detail, #showcaseOverlay .floor-detail {
        max-width: 96vw;
        min-width: 0;
    }
    #showcaseOverlay .showcaseOverlay-title { font-size: 1.45em; }
}

@media (max-width: 700px) {
    #showcaseOverlay {
        width: 100vw;
        left: 0;
        top: 0;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #showcaseOverlay .items-container {
        width: 98vw;
        margin: 8px auto;
    }
    #showcaseOverlay .item-element {
        width: 90vw;
        min-width: 0;
        max-width: 97vw;
        margin: 7px 0;
    }
    #showcaseOverlay .bank-account,
    #showcaseOverlay .building-detail,
    #showcaseOverlay .floor-detail {
        max-width: 97vw;
        min-width: 0;
    }
    #showcaseOverlay .showcaseOverlay-title { font-size: 1.08em; padding: 8px 0; }
}

@media (max-width: 480px) {
    #showcaseOverlay {
        font-size: 12px;
        padding: 0;
    }
    #showcaseOverlay .item-element {
        width: 99vw;
        min-width: 0;
        max-width: 99vw;
        margin: 4px 0;
        padding: 7px 0;
    }
    #showcaseOverlay .bank-account, 
    #showcaseOverlay .building-detail, 
    #showcaseOverlay .floor-detail {
        max-width: 99vw;
        padding: 9px 3vw;
    }
    #showcaseOverlay .showcaseOverlay-title { font-size: 1em; padding: 7px 0; }
}

#bankAccountOverlay {
    background-color: #000000;
    border: 2px solid rgba(13, 242, 255, 0.8);
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.4), 0 0 20px rgba(0, 223, 255, 0.3);
    border-radius: 12px;
    font-family: "Courier New", monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px;
    position: fixed;
    top: 20%;
    left: 8%;
    width: 650px;
    max-height: 700px;
    z-index: 1000;
    justify-content: flex-start;
    padding-top: 5px;
    padding-left: 5px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #0df2ff transparent;
}

#bankAccountOverlay .tabButton {
    display: inline-block;
    margin: 0;
    margin-top: 20px;
    background-color: #0d0d0d;
    border: 1px solid #0df2ff;
    border-radius: 5px;
    color: #0df2ff;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    padding: 5px 5px;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
    text-align: center;
}

#bankAccountOverlay .tabButton.active,
#bankAccountOverlay .tabButton:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
    border: 1px solid #0df2ff;
}

#bankAccountOverlay .bankAccountContainer {
    background-color: #000;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.5);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 15px;
    position: relative;
    max-width: 550px;
    left: 24px;
}

#bankAccountOverlay .inputBankAccount {
    background-color: #2a2a2a;
    border: 1px solid #0df2ff;
    color: #0df2ff;
    margin-bottom: 10px;
    text-align: center;
    width: 100px;
}

#bankAccountOverlay .submitBankAccount {
    background-color: #0d0d0d;
    border: 1px solid #0df2ff;
    border-radius: 5px;
    color: #0df2ff;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
    margin-left: auto;
    margin-right: auto;
}

#bankAccountOverlay .submitBankAccount:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
    border: 1px solid #0df2ff;
}

#bankAccountOverlay .stats-select {
    background-color: #2a2a2a;
    border: 1px solid #0df2ff;
    color: #0df2ff;
    text-align: center;
    width: 50px;
}

#bankAccountOverlay #prevStorageButton, #bankAccountOverlay #nextStorageButton {
    background-color: #0d0d0d;
    border: 1px solid #0df2ff;
    border-radius: 5px;
    color: #0df2ff;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 10px;
    transition: background-color 0.3s, color 0.3s;
}

#bankAccountOverlay #prevStorageButton:hover, #bankAccountOverlay #nextStorageButton:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
    border: 1px solid #0df2ff;
}

#bankAccountOverlay::-webkit-scrollbar {
    width: 5px;
}

#bankAccountOverlay::-webkit-scrollbar-thumb {
    background-color: #0df2ff;
}

#bankAccountOverlay::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.bankStorageSlot {
    width: 64px;
    height: 64px;
    border: 2px solid #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0, 223, 255, 0.3), 0 0 20px rgba(0, 223, 255, 0.6);
    border-radius: 15%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    cursor: pointer;
}

.bankStorageSlot:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 223, 255, 0.8), 0 0 30px rgba(0, 223, 255, 1);
    background-color: rgba(13, 242, 255, 0.4);
}

.bankStorageSlotsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bankStorageRow {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

#bankAccountOverlay .buyButton {
    background-color: #0d0d0d;
    border: 1px solid #0df2ff;
    border-radius: 5px;
    color: #0df2ff;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

#bankAccountOverlay .buyButton:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
    border: 1px solid #0df2ff;
}

@media screen and (max-width: 1024px) {
    #bankAccountOverlay {
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-height: 80vh;
        padding: 20px;
    }

    #bankAccountOverlay .bankAccountContainer {
        max-width: 90%;
        left: 0;
    }

    .bankStorageSlot {
        width: 56px;
        height: 56px;
    }
}

@media screen and (max-width: 600px) {
    #bankAccountOverlay {
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        max-height: 90vh;
        padding: 10px;
        padding-top: 5px;
        padding-left: 5px;
    }

    #bankAccountOverlay .tabButton {
        font-size: 8px;
        padding: 4px 4px;
        margin-top: 10px;
    }

    #bankAccountOverlay .bankAccountContainer {
        padding: 10px;
        margin-top: 10px;
        max-width: 100%;
        left: 0;
    }

    .bankStorageSlot {
        width: 48px;
        height: 48px;
        margin: 3px;
    }

    #bankAccountOverlay .submitBankAccount,
    #bankAccountOverlay .buyButton,
    #bankAccountOverlay #prevStorageButton,
    #bankAccountOverlay #nextStorageButton {
        font-size: 8px;
        padding: 6px 12px;
    }

    #bankAccountOverlay .inputBankAccount,
    #bankAccountOverlay .stats-select {
        width: 80px;
        font-size: 12px;
    }

    .bankStorageRow {
        flex-wrap: wrap;
    }
}

#paymentOverlay {
    background-color: #080808;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%);
    background-size: 100% 3px;
    background-repeat: repeat-y;
    background-attachment: fixed;
    font-family: "Courier New", monospace;
    border: 1px solid #0df2ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    position: fixed;
    top: 45%;
    left: 20%;
    width: 300px;
    height: 150px;
    z-index: 2000;
    justify-content: flex-start;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #0df2ff transparent;
    padding-top: 5px;
}

#paymentOverlay .paymentButton {
    display: inline-block;
    margin: 0;
    margin-top: 10px;
    background-color: #0d0d0d;
    border: 1px solid #0df2ff;
    border-radius: 5px;
    color: #0df2ff;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    padding: 5px 5px;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
    text-align: center;
}

#paymentOverlay .paymentButton:hover {
    color: #0df2ff;
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
    border: 1px solid #0df2ff;
}

#paymentOverlay h2 {
    margin-bottom: 10px;
}

#paymentOverlay p {
    margin-top: 0;
    margin-bottom: 5px;
}

#gpsOverlay {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #0df2ff;
    border-radius: 10px;
    padding: 10px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 0 20px rgba(0, 223, 255, 0.6);
}

.gps-mode-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.gps-mode-buttons button {
    background: rgba(0, 223, 255, 0.3);
    border: 1px solid #0df2ff;
    color: #0df2ff;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.gps-mode-buttons button.active {
    background: #0df2ff;
    color: black;
}

#gpsSearchInput {
    width: 90%;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #0df2ff;
    border-radius: 5px;
    background: #000;
    color: #0df2ff;
}

#gpsResults {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid #0df2ff;
    border-radius: 5px;
    margin-top: 10px;
    color: #0df2ff;
    text-align: left;
    padding: 5px;
}

#closeGPSOverlay, #cancelGPSButton {
    margin-top: 10px;
    background: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

@keyframes gpsBlink {
    0% { border-color: yellow; opacity: 1; }
    50% { border-color: transparent; opacity: 0.2; }
    100% { border-color: yellow; opacity: 1; }
}

.gps-blink-marker {
    position: absolute;
    border: 3px solid yellow;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 9999;
}

#furniturePlacementOverlay {
    background-color: #080808;
    border: 2px solid rgba(13, 242, 255, 0.8);
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.4), 0 0 20px rgba(0, 223, 255, 0.3);
    border-radius: 12px;
    position: fixed;
    top: 10%;
    left: 10%;
    width: 900px;
    height: 750px;
    z-index: 1100;
    display: flex;
    flex-direction: row;
    padding: 10px;
    overflow: hidden;
}

#furniturePlacementOverlay .image-container {
    width: 75%;
    height: 100%;
    overflow: hidden;
    position: relative;
    cursor: grab;
}

#furniturePlacementOverlay .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: unset;
    max-height: unset;
    -webkit-user-drag: none;
    user-select: none;
}

#furniturePlacementOverlay .furniture-list-container {
    width: 25%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(13, 242, 255, 0.1);
    padding: 10px;
    box-sizing: border-box;
}

#furniturePlacementOverlay .furniture-item {
  margin-bottom: 6px;
  padding: 8px;
  background-color: #0d0d0d;
  border: 1px solid rgba(13, 242, 255, 0.8);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  box-sizing: border-box;
}

#furniturePlacementOverlay .furniture-item h3,
#furniturePlacementOverlay .furniture-item h4 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
}

#furniturePlacementOverlay .furniture-item img {
  display: block;
  margin: 2px 0;
  max-width: 100%;
  height: auto;
}

#furniturePlacementOverlay .furniture-item > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

#furniturePlacementOverlay .furniture-item button {
  background-color: #0d0d0d;
  border: 2px solid;
  color: white;
  cursor: pointer;
  margin: 2px;
}
#furniturePlacementOverlay .furniture-item button.place { border-color: #32CD32; }
#furniturePlacementOverlay .furniture-item button.remove { border-color: #FF0000; color: #FF0000; }

#jobsOverlay, .jobsOverlay.neon-overlay {
    display: none;
    flex-direction: column;
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10,18,24,0.98);
    border-radius: 16px;
    border: 2px solid #00f0ff;
    box-shadow: 0 0 35px #00f0ff50, 0 0 4px #0df2ff80;
    width: 500px;
    max-width: 97vw;
    min-width: 285px;
    min-height: 420px;
    max-height: 88vh;
    overflow: hidden;
    animation: fadeInScale 0.18s;
}

.jobs-title {
    text-align: center;
    font-size: 1.3em;
    color: #0df2ff;
    padding: 1.3em 0 0.8em 0;
    font-family: 'Orbitron', monospace;
    letter-spacing: 0.5px;
    font-weight: 700;
    text-shadow: 0 0 12px #00f0ff66;
    border-bottom: 1px solid #132d36;
    margin-bottom: 0.7em;
}

.jobs-icon {
    font-size: 1.3em;
    margin-right: 7px;
}

.jobsTypeTab {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 0.6em 0 0.2em 0;
}

.job-type-tab-btn.neon-btn {
    background: #0d0d13;
    color: #0df2ff;
    border: 1.5px solid #0df2ff;
    border-radius: 7px 7px 0 0;
    font-family: 'Orbitron', monospace;
    padding: 0.55em 1.1em;
    font-size: 1em;
    cursor: pointer;
    transition: 0.16s;
    box-shadow: 0 0 6px #0df2ff40;
    margin-bottom: -2px;
}
.job-type-tab-btn.neon-btn.active,
.job-type-tab-btn.neon-btn:hover {
    background: linear-gradient(135deg, #101d23 60%, #00f0ff19 100%);
    color: #fff;
    border-bottom: 2.5px solid #00f0ff;
    box-shadow: 0 0 15px #00f0ff99;
}

.jobs-content.neon-box {
    background: #0a1922c0;
    border-radius: 0 0 15px 15px;
    border: 1.2px solid #00f0ff80;
    box-shadow: 0 0 10px #00f0ff25;
    padding: 16px 0;
    overflow-y: auto;
    flex: 1;
    max-height: 54vh;
    min-height: 220px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.no-jobs-msg {
    color: #888;
    text-align: center;
    margin-top: 2em;
}

.job-card.neon-card {
    background: linear-gradient(120deg,#101d23,#142c36 90%);
    border: 2px solid #00f0ff70;
    border-radius: 12px;
    box-shadow: 0 0 8px #00f0ff50, 0 0 1px #0df2ff80;
    padding: 0.9em 1.1em 0.4em 1.1em;
    margin-bottom: 1.1em;
    width: 92%;
    max-width: 380px;
    min-width: 170px;
    margin: 0.5em auto 1.1em auto;
    cursor: pointer;
    color: #0df2ff;
    font-family: 'Orbitron', monospace;
    font-size: 1.13em;
    transition: box-shadow .16s, transform .18s;
    position: relative;
    user-select: none;
}

.job-card.neon-card:hover, .job-card.expanded {
    background: #101f25;
    box-shadow: 0 0 15px #00f0ff9e, 0 0 4px #0df2ff80;
    border: 2px solid #00f0ff;
}

.job-title {
    font-weight: bold;
    font-size: 1.13em;
    margin-bottom: 0.3em;
    color: #0df2ff;
    text-shadow: 0 0 10px #0df2ff2a;
}

.job-details {
    padding-top: 8px;
    padding-bottom: 8px;
    border-top: 1px dashed #0df2ff66;
    margin-top: 7px;
}

.job-detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color: #a2eaff;
    font-size: 0.98em;
}

.job-detail span:last-child {
    color: #00f0ff;
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

.job-apply-textarea {
    margin: 1em 0 0.4em 0;
    background: #0a141b;
    border: 1px solid #0df2ff;
    color: #0df2ff;
    border-radius: 7px;
    padding: 7px 10px;
    width: 94%;
    min-height: 60px;
    max-height: 140px;
    font-size: 0.98em;
    font-family: "Courier New", monospace;
    resize: none;
    box-shadow: 0 0 5px #00f0ff22;
}

.job-char-counter {
    text-align: right;
    color: #0df2ffad;
    font-size: 0.9em;
    margin-bottom: 0.8em;
    padding-right: 8px;
}

.job-apply-btn.neon-btn {
    background: linear-gradient(90deg, #00f0ff 20%, #0df2ff 90%);
    color: #000;
    border: none;
    border-radius: 7px;
    font-family: 'Orbitron', monospace;
    padding: 0.53em 1.7em;
    font-size: 1.06em;
    cursor: pointer;
    box-shadow: 0 0 8px #0df2ffb0;
    font-weight: bold;
    margin: 0.7em auto 0 auto;
    display: block;
    transition: 0.13s;
}

.job-apply-btn.neon-btn:hover:enabled {
    background: #0df2ff;
    color: #121212;
    box-shadow: 0 0 16px #00f0ffcc;
}

.close-jobsOverlay-button.neon-close-btn {
    position: absolute;
    top: 7px;
    right: 14px;
    color: #fff;
    font-size: 1.5em;
    background: #f44336;
    border: none;
    border-radius: 10px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    z-index: 11;
    box-shadow: 0 0 10px #0df2ff66;
    transition: 0.16s;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-jobsOverlay-button.neon-close-btn:hover {
    background: #d32f2f;
    color: #fff;
    transform: scale(1.13);
    box-shadow: 0 0 12px #f44336cc;
}

@media (max-width: 650px) {
    #jobsOverlay, .jobsOverlay.neon-overlay {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 98vw;
        min-width: unset;
        max-width: 99vw;
        min-height: 55vw;
        max-height: 97vh;
        border-radius: 11px;
        padding: 0;
    }
    .jobs-content.neon-box {
        padding: 12px 1vw;
        max-height: 70vw;
        border-radius: 0 0 11px 11px;
    }
    .job-card.neon-card {
        width: 98vw;
        max-width: 99vw;
        min-width: 0;
        padding-left: 2vw;
        padding-right: 2vw;
    }
}

.work-jobs-scroll {
  max-height: 370px;
  overflow-y: auto;
  width: 100%;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.digicode-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2a2a2a;
    padding: 20px;
    z-index: 1000;
    text-align: center;
}

.digicode-title {
    color: white;
    margin-bottom: 10px;
}

.digicode-input-container {
    margin-bottom: 10px;
}

.digicode-input {
    width: 100%;
    max-width: 100px;
    border: 1px solid #0df2ff;
}

.digicode-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.digicode-button {
    margin-top: 5px;
    width: 100%;
    height: 30px;
    background-color:#2a2a2a;
    border:2px solid #0df2ff;
    border-radius:5px;
    color:#fff;
    cursor:pointer;
    font-family:'Courier New',monospace;
    font-size: 14px;
}

.digicode-button:hover {
    background-color:#0df2ff;
    color:#2a2a2a;
}

.alertOverlay-hidden {
    display: none;
}

.alertOverlay-content {
    position: absolute;
    width: 375px;
    max-width: 375px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.85);
    border: 2px solid rgba(13, 242, 255, 0.8);
    box-shadow: 0 0 20px rgba(13, 242, 255, 0.5), 0 0 40px rgba(13, 242, 255, 0.4);
    border-radius: 10px;
    padding: 20px;
    z-index: 100000;
    text-align: center;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    color: #ffffff;
    animation: pop-up 0.5s ease forwards;
}

.alertOverlay-content select {
    width: 100%;
    font-size: 1.05em;
    padding: 8px 10px;
    background: rgba(13, 242, 255, 0.10);
    color: #0df2ff;
    border: 1.7px solid #0df2ff;
    border-radius: 7px;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.25);
    margin: 8px 0 6px 0;
    outline: none;
    font-family: "Courier New", monospace;
    transition: box-shadow 0.22s;
}
.alertOverlay-content select:focus {
    box-shadow: 0 0 15px #0df2ff;
}

@keyframes pop-up {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.alertOverlay-title {
    color: #0df2ff;
    font-size: 16px;
    text-shadow: 0 0 10px rgba(13, 242, 255, 0.7);
    margin-bottom: 15px;
}

.alertOverlay-button {
    margin-top: 10px;
    width: 120px;
    height: 35px;
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(13, 242, 255, 0.8);
    border-radius: 5px;
    color: #0df2ff;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.5);
}

.alertOverlay-button:hover {
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 10px rgba(13, 242, 255, 0.8);
}

.alertOverlay-statusMessage {
    margin-top: 10px;
    font-size: 14px;
    color: red;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
}

.alertOverlay-statusMessage.success {
    color: green;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
}

.notification-overlay {
    position: fixed;
    right: 0px;
    top: 120px;
    width: 300px;
    height: 110px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1000;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.notification-overlay.visible {
    opacity: 1;
    transform: translateX(0);
}

.notification-overlay .message-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.notification-overlay .progress-bar {
    height: 5px;
    background-color: limegreen;
    width: 100%;
    transition: width linear;
}

#forumPage {
    overflow-y: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#forumPage #forumContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    width: 90%;
    margin: 20px auto;
    padding: 20px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 223, 255, 0.5), 0 0 40px rgba(0, 223, 255, 0.3);
    color: #00a3cc;
    min-height: 100%;
    height: fit-content;
    box-sizing: border-box;
    overflow: hidden;
}

#forumPage .forum-title {
    font-size: 2.5em;
    font-family: "Courier New", monospace;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(0, 223, 255, 0.8);
    text-align: center;
    width: 100%;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#forumPage .forum-title:hover {
    color: #00ffff;
    text-shadow: 0 0 20px rgba(0, 223, 255, 1);
}

#forumPage .ban-message {
    color: #ff4444;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.2);
    border: 2px solid rgba(255, 0, 0, 0.5);
    padding: 10px;
    border-radius: 8px;
    width: 80%;
    margin: 10px auto;
    display: block;
}

#forumPage .ban-message.hidden {
    display: none;
}

#forumPage .category-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
    box-sizing: border-box;
}

#forumPage .category-item {
    background-color: rgba(13, 242, 255, 0.1);
    border: 2px solid rgba(0, 223, 255, 0.5);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: calc(100% - 40px);
    margin: 0 auto;
}

#forumPage .category-item:hover {
    transform: scale(1.02);
    box-shadow: 0 0 25px rgba(0, 223, 255, 0.6);
}

#forumPage .category-name {
    font-size: 1.8em;
    margin-bottom: 10px;
}

#forumPage .category-description {
    font-size: 1em;
    margin-bottom: 15px;
    color: #aaaaaa;
}

.latest-thread-title, .latest-author {
    color: #2EE5FF;
    text-shadow: 0 0 2px #00fff0, 0 0 8px #2ee5ff77;
    text-decoration: underline;
    transition: color 0.2s, text-shadow 0.2s;
    font-weight: 500;
    word-break: break-word;
    max-width: 160px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 2px;
}

.latest-thread-title:hover, .latest-author:hover {
    color: #fff;
    text-shadow: 0 0 10px #00fff0, 0 0 18px #2ee5ffbb;
    background: #081C21;
}

.latest-message-box {
    background: rgba(10,30,40,0.92);
    border-radius: 8px;
    margin: 8px 0 0 0;
    padding: 8px 12px;
    border: 1.5px solid #263D50;
}

.latest-message-title {
    color: #2EE5FF;
    font-size: 1em;
    margin-bottom: 2px;
    font-weight: 600;
}

.latest-message-content {
    margin-left: 2px;
}

.latest-message-meta {
    font-size: 0.94em;
    color: #8eb8c7;
    margin-top: 3px;
}

.latest-date {
    color: #8eb8c7;
    font-style: italic;
}

.category-item.has-unread {
    border: 2px solid #ffa726;
    background: #fffbe5;
}

.section-item.has-unread {
    border-left: 4px solid #ffa726;
    background: #fffbe5;
}

.unread-dot {
    display: none;
}

.latest-thread-title,
.latest-author {
    color: #388e3c;
    font-weight: 600;
    text-decoration: none;
}

.latest-thread-title:hover,
.latest-author:hover {
    text-decoration: underline;
}

.unread-count-badge {
    display: inline-block;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    margin-left: 8px;
    background: #ffa726;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    vertical-align: middle;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 0 4px #ffa72699;
}

#forumPage .section-list {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

#forumPage .section-item {
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 223, 255, 0.3);
    border-radius: 8px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    width: calc(100% - 30px);
    margin: 0 auto;
}

#forumPage .section-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 10px;
}

#forumPage .section-info {
    flex: 1;
}
#forumPage .latest-message-box {
    min-width: 220px;
    max-width: 320px;
    background: rgba(0,223,255,0.08);
    border-left: 2px solid #00a3cc;
    padding: 10px 16px;
    margin-left: 18px;
    border-radius: 7px;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background 0.3s;
    box-shadow: 0 2px 8px rgba(0,223,255,0.1);
}

#forumPage .latest-message-title {
    font-size: 1em;
    color: #00a3cc;
    font-weight: bold;
    margin-bottom: 3px;
}
#forumPage .latest-message-content {
    font-size: 0.98em;
}
#forumPage .latest-thread-title {
    color: #00ffff;
    font-weight: bold;
    text-decoration: underline;
}
#forumPage .latest-message-meta {
    font-size: 0.94em;
    color: #aaaaaa;
    margin-top: 2px;
}
@media (max-width: 800px) {
    #forumPage .section-item {
        flex-direction: column;
    }
    #forumPage .latest-message-box {
        margin-left: 0;
        margin-top: 10px;
        max-width: 100%;
    }
}

#forumPage .section-item:hover {
    background-color: rgba(13, 242, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.4);
}

#forumPage .section-name {
    font-size: 1.2em;
    margin-bottom: 5px;
}

#forumPage .section-description {
    font-size: 0.9em;
    color: #cccccc;
}

#forumPage #forumStats {
    margin-top: 20px;
    width: calc(100% - 40px);
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(0, 223, 255, 0.5);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.4);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#forumPage #forumStats.hidden {
    display: none;
}

#forumPage .section-view {
    width: 95%;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#forumPage .section-header {
    width: 100%;
    padding: 15px;
    background-color: rgba(13, 242, 255, 0.1);
    border: 2px solid rgba(0, 223, 255, 0.5);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

#forumPage .section-header .header-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#forumPage .section-header h2 {
    font-size: 2em;
    text-align: center;
    flex-grow: 1;
    margin: 0;
}

#forumPage .section-header .section-description {
    font-size: 1em;
    color: #aaaaaa;
    text-align: center;
    margin-top: 10px;
    width: 100%;
}

#forumPage .section-header .back-forum-button,
#forumPage .section-header .create-thread-button,
#forumPage .back-thread-button,
#forumPage .reply-thread-button {
    padding: 8px;
    font-size: 1em;
    background-color: rgba(0, 223, 255, 0.8);
    border: none;
    border-radius: 5px;
    color: #000;
    text-transform: uppercase;
    cursor: pointer;
}

#forumPage .section-header .back-forum-button:hover,
#forumPage .section-header .create-thread-button:hover,
#forumPage .back-thread-button:hover
#forumPage .reply-thread-button:hover {
    background-color: rgba(0, 223, 255, 1);
}

#forumPage .post-list {
    width: 100%;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.4);
}

#forumPage .pinned-post-list,
#forumPage .post-list {
    width: 100%;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.4);
    margin-bottom: 20px;
}

#forumPage .pinned-post-list h3,
#forumPage .post-list h3 {
    font-size: 1.5em;
    text-align: center;
    color: #00ffff;
    margin-bottom: 10px;
}

#forumPage .thread-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

#forumPage .thread-table th, 
#forumPage .thread-table td {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(0, 223, 255, 0.5);
    color: #ffffff;
}

#forumPage .thread-table th {
    background-color: rgba(0, 223, 255, 0.2);
    color: #00ffff;
    font-size: 1em;
}

#forumPage .thread-row.even {
    background-color: rgba(0, 0, 0, 0.6);
}

#forumPage .thread-row.odd {
    background-color: rgba(13, 242, 255, 0.1);
}

#forumPage .thread-creator {
    display: flex;
    align-items: center;
    justify-content: center;
}

#forumPage .creator-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

#forumPage .thread-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#forumPage .thread-title {
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
}

#forumPage .thread-last-update {
    font-size: 0.9em;
}

#forumPage .thread-last-update .date {
    font-weight: bold;
    color: #ffffff;
}

#forumPage .thread-last-update .time {
    font-size: 0.8em;
    color: #fff;
    display: block;
    margin-top: 2px;
}

#forumPage .empty-forum-message {
    text-align: center;
    color: #ffffff;
    font-size: 1.2em;
    font-style: italic;
    margin-top: 20px;
}

#forumPage .thread-header .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#forumPage .thread-header h2 {
    flex-grow: 1;
    text-align: center;
    margin: 0;
}

#forumPage .thread-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

#forumPage .thread-header {
    width: 100%;
    padding: 15px;
    background-color: rgba(13, 242, 255, 0.1);
    border: 2px solid rgba(0, 223, 255, 0.5);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#forumPage .thread-header h2 {
    font-size: 1.8em;
    text-align: center;
    flex-grow: 1;
    color: #00a3cc;
}

#forumPage .messages-container {
    width: 100%;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.4);
}

@media (min-width: 901px) {
	#forumPage .messages-container .message-row{
		display:flex;
		align-items:flex-start;
		gap:12px;
		margin:0 0 24px 0;
		padding:0;
	}
	#forumPage .messages-container .message-row:last-child{
		margin-bottom:0;
	}
	#forumPage .messages-container .message-row .message-box{
		flex:1 1 auto;
		min-width:0;
		margin:0;
		border:2px solid rgba(0,223,255,0.5);
		border-radius:10px;
		box-shadow:0 0 10px rgba(0,223,255,0.35);
	}
	#forumPage .messages-container .message-row:nth-child(odd) .message-box{
		background:rgba(0,223,255,0.10);
	}
	#forumPage .messages-container .message-row:nth-child(even) .message-box{
		background:rgba(0,0,0,0.75);
	}
	#forumPage .messages-container .message-row .user-box-right{
		flex:0 0 180px;
		max-width:180px;
		padding:10px;
		border:1.5px solid #0df2ff;
		border-radius:10px;
		background:linear-gradient(180deg,#0b0b0b 0%,#131313 100%);
		box-shadow:0 0 16px rgba(13,242,255,.28);
		color:#e0f0ff;
		font-family:"Courier New",monospace;
		font-size:.92em;
	}
	#forumPage .messages-container .message-row .user-box-right img{
		width:40px;
		height:40px;
		border-radius:50%;
		border:1px solid #0df2ff;
	}
	#forumPage .messages-container .message-row .user-box-right .user-name,
	#forumPage .messages-container .message-row .user-box-right .user-box-name{
		font-weight:700;
		font-size:13px;
		color:#0df2ff;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	#forumPage .message-box .user-box{
		display:none;
	}
}

@media (max-width: 900px){
	#forumPage .thread-main{display:block}
	#forumPage .user-aside{display:none}
}

#forumPage .empty-messages {
    text-align: center;
    color: #ffffff;
    font-size: 1.2em;
    font-style: italic;
    margin-top: 20px;
}

#forumPage .message-box {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(0, 223, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.4);
    position: relative;
}

#forumPage .message-box:nth-child(odd) {
    background-color: rgba(0, 223, 255, 0.1);
}

#forumPage .message-box:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.7);
}

#forumPage .message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 223, 255, 0.5);
    margin-bottom: 10px;
}

#forumPage .message-date {
    font-size: 1em;
    color: #00a3cc;
    font-weight: bold;
}

#forumPage .message-number {
    font-size: 0.9em;
    color: #00ffff;
    font-weight: bold;
}

#forumPage .message-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

#forumPage .message-content {
    flex: 1;
    font-size: 1.1em;
    color: #ffffff;
    line-height: 1.5;
}

.message-content img {
    max-width: 100%;
    height: auto;
}

#forumPage .user-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 223, 255, 0.15);
    padding: 12px;
    border-radius: 10px;
    border: 2px solid rgba(0, 223, 255, 0.6);
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    width: 160px;
    text-align: center;
}

#forumPage .user-box:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.6);
}

#forumPage .user-avatar {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    border: 2px solid rgba(0, 223, 255, 0.5);
    margin-bottom: 8px;
    transition: transform 0.2s;
}

#forumPage .user-avatar:hover {
    transform: scale(1.1);
}

#forumPage .user-role {
    background: rgba(0, 223, 255, 0.2);
    color: #ffffff;
    padding: 5px 10px;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    width: fit-content;
    margin-bottom: 5px;
}

#forumPage .user-info {
    font-size: 0.9em;
    color: #aaaaaa;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#forumPage .user-flag {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid #00a3cc;
}

#forumPage .user-name-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 5px;
    margin-bottom: 5px;
}

#forumPage .user-online-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

#forumPage .user-name {
    flex-grow: 1;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    color: #00a3cc;
    cursor: pointer;
}

#forumPage .private-message-icon {
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s;
}

#forumPage .private-message-icon:hover {
    transform: scale(1.2);
}

#forumPage .reply-box {
    width: 95%;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(0, 223, 255, 0.5);
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.4);
}

#forumPage .reply-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 10px;
}

#forumPage .cancel-edit-button {
    margin-left: auto;
    background-color: #ff4444;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#forumPage .cancel-edit-button:hover {
    background-color: #cc0000;
}

#forumPage .toolbar-button {
    background-color: rgba(0, 223, 255, 0.8);
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
}

#forumPage .reply-editor {
    width: 100%;
    text-align: left;
    height: 250px;
    padding: 10px;
    font-size: 1em;
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 223, 255, 0.5);
    border-radius: 5px;
    color: #00ffff;
    overflow-y: auto;
    outline: none;
    box-sizing: border-box;
}

#forumPage .reply-editor:empty:before {
    content: attr(data-placeholder);
    color: rgba(0, 223, 255, 0.5);
    font-style: italic;
}

#forumPage .toolbar-button:hover {
    background-color: rgba(0, 223, 255, 1);
}

#forumPage .reply-textarea {
    width: calc(100% - 30px);
    height: 150px;
    padding: 10px;
    font-size: 1em;
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 223, 255, 0.5);
    border-radius: 5px;
    color: #00ffff;
    resize: none;
    box-sizing: border-box;
}

#forumPage .send-reply-button {
    width: 100%;
    padding: 10px;
    background-color: rgba(0, 223, 255, 0.8);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    margin-top: 10px;
}

#forumPage .send-reply-button:hover {
    background-color: rgba(0, 223, 255, 1);
}

#forumPage .quote-box {
    background-color: rgba(0, 223, 255, 0.1);
    border-left: 5px solid #00a3cc;
    padding: 10px;
    font-style: italic;
    color: #00a3cc;
    width: 95%;
    margin: 10px auto;
    border-radius: 5px;
}

#forumPage .message-box.highlighted {
    animation: highlightFlash 1.5s ease-in-out 2;
}

#forumPage .reply-title {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #00a3cc;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(0, 223, 255, 0.8);
}

@keyframes highlightFlash {
    0% { background-color: rgba(0, 223, 255, 0.4); }
    50% { background-color: rgba(0, 223, 255, 0.1); }
    100% { background-color: rgba(0, 223, 255, 0.4); }
}

#forumPage .rp-box {
    background-color: rgba(255, 69, 0, 0.1);
    border-left: 5px solid #ff4500;
    padding: 10px;
    font-style: italic;
    font-family: "Georgia", serif;
    color: #ff4500;
    width: 95%;
    margin: 10px auto;
    border-radius: 5px;
}

#forumPage .hrp-box {
    background-color: rgba(30, 144, 255, 0.1);
    border-left: 5px solid #1e90ff;
    padding: 10px;
    font-style: normal;
    font-family: "Arial", sans-serif;
    color: #1e90ff;
    width: 95%;
    margin: 10px auto;
    border-radius: 5px;
}

#forumPage .spoiler-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
}

#forumPage .spoiler-toggle {
    background-color: rgba(0, 223, 255, 0.8);
    color: #000;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s, transform 0.1s;
}

#forumPage .spoiler-toggle:hover {
    background-color: rgba(0, 223, 255, 1);
    transform: scale(1.05);
}

#forumPage .spoiler-content {
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 223, 255, 0.5);
    color: #ffffff;
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px;
    width: 90%;
    text-align: center;
    display: none;
}

#forumPage .spoiler-content.hidden {
    display: none;
}

#forumPage .like-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    padding: 4px 8px;
    margin: 5px 0 0 5px;
    border-radius: 5px;
}

#forumPage .like-button {
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: transform 0.1s ease-in-out;
}

#forumPage .like-button:hover {
    transform: scale(1.2);
}

#forumPage .like-count {
    font-size: 14px;
    font-weight: bold;
    color: #00a3cc;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    margin-top: 7px;
}

#forumPage .like-button.liked {
    transform: scale(1.2) rotate(180deg);
}

#forumPage .new-message-highlight {
    animation: messageFlash 1.5s ease-in-out 2;
}

@keyframes messageFlash {
    0% { background-color: rgba(0, 223, 255, 0.4); }
    50% { background-color: rgba(0, 223, 255, 0.1); }
    100% { background-color: rgba(0, 223, 255, 0.4); }
}

#forumPage .like-animation {
    animation: likePulse 0.5s ease-in-out;
}

@keyframes likePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

#forumPage .message-content.highlighted {
    animation: highlightMessage 1.5s ease-in-out;
}

@keyframes highlightMessage {
    0% { background-color: rgba(0, 223, 255, 0.3); }
    50% { background-color: transparent; }
    100% { background-color: rgba(0, 223, 255, 0.3); }
}

#forumPage .pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 15px 0;
}

#forumPage .pagination button, .pagination-btn {
    background-color: rgba(0, 223, 255, 0.8);
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

#forumPage .pagination button.active, .pagination-btn.active {
    background-color: #00a3cc;
    font-weight: bold;
}

#forumPage .pagination button:hover, .pagination-btn:hover {
    background-color: rgba(0, 223, 255, 1);
}

#forumPage .create-thread-container {
    width: 100%;
    padding: 20px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.5);
    text-align: center;
}

#forumPage .create-thread-container h2 {
    color: #00a3cc;
    font-size: 1.8em;
    margin-bottom: 15px;
}

#forumPage .thread-title-input {
    width: 90%;
    padding: 10px;
    font-size: 1.2em;
    border: 2px solid rgba(0, 223, 255, 0.5);
    background: rgba(0, 0, 0, 0.6);
    color: #00a3cc;
    border-radius: 5px;
    margin-bottom: 15px;
}

#forumPage .send-thread-button {
    width: 100%;
    padding: 10px;
    background-color: rgba(0, 223, 255, 0.8);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    margin-top: 10px;
}

#forumPage .send-thread-button:hover {
    background-color: rgba(0, 223, 255, 1);
}

#forumPage .reply-title-wrapper,
#forumPage .create-thread-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-shadow: 0 0 10px rgba(0, 223, 255, 0.8);
}

#forumPage .reply-text,
#forumPage .create-thread-text {
    font-size: 1.1em;
    color: #00a3cc;
    text-shadow: 0 0 5px rgba(0, 223, 255, 1);
}

#forumPage .reply-mode-selector,
#forumPage .create-thread-mode-selector,
#forumPage .reply-pnj-selector {
    background-color: rgba(0, 0, 0, 0.8);
    color: #00a3cc;
    border: 1px solid rgba(0, 223, 255, 0.5);
    font-size: 1em;
    padding: 5px 10px;
    border-radius: 5px;
}

#forumPage .reply-avatar,
#forumPage .create-thread-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(0, 223, 255, 0.5);
}

#forumPage .pin-thread-button, 
#forumPage .unpin-thread-button {
    padding: 8px 15px;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.1s ease-in-out;
}

#forumPage .pin-thread-button {
    background-color: rgba(0, 223, 255, 0.8);
    color: black;
}

#forumPage .pin-thread-button:hover {
    background-color: rgba(0, 223, 255, 1);
    transform: scale(1.05);
}

#forumPage .unpin-thread-button {
    background-color: orange;
    color: black;
}

#forumPage .unpin-thread-button:hover {
    background-color: darkorange;
    transform: scale(1.05);
}

#forumPage .close-thread-button, 
#forumPage .open-thread-button {
    padding: 8px 15px;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.1s ease-in-out;
}

#forumPage .close-thread-button {
    background-color: rgba(255, 69, 0, 0.8);
    color: white;
}

#forumPage .close-thread-button:hover {
    background-color: rgba(255, 69, 0, 1);
    transform: scale(1.05);
}

#forumPage .open-thread-button {
    background-color: rgba(50, 205, 50, 0.8);
    color: white;
}

#forumPage .open-thread-button:hover {
    background-color: rgba(50, 205, 50, 1);
    transform: scale(1.05);
}

#forumPage .archive-thread-button,
#forumPage .unarchive-thread-button {
    padding: 8px 15px;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.1s ease-in-out;
}

#forumPage .archive-thread-button {
    background-color: rgba(128, 128, 128, 0.8);
    color: white;
}

#forumPage .archive-thread-button:hover {
    background-color: rgba(105, 105, 105, 1);
    transform: scale(1.05);
}

#forumPage .unarchive-thread-button {
    background-color: orange;
    color: black;
}

#forumPage .unarchive-thread-button:hover {
    background-color: darkorange;
    transform: scale(1.05);
}

#forumPage .profile-container {
    width: 85%;
    margin: 20px auto;
    background: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 223, 255, 0.5);
    color: #00a3cc;
    text-align: center;
}

#forumPage .profile-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#forumPage .profile-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #00a3cc;
}

#forumPage .profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #00a3cc;
}

#forumPage .profile-info {
    text-align: left;
}

#forumPage .profile-name-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 1.5em;
    font-weight: bold;
    width: 100%;
}

#forumPage .user-online-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

#forumPage .private-message-icon {
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s;
}

#forumPage .private-message-icon:hover {
    transform: scale(1.2);
}

#forumPage .message-section {
    width: 100%;
    max-width: 95%;
    background: rgba(0, 223, 255, 0.15);
    padding: 15px;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 20px;
}

#forumPage .messages-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#forumPage .message-preview {
    background: rgba(0, 223, 255, 0.2);
    padding: 15px;
    border-radius: 8px;
    border-left: 5px solid #00a3cc;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#forumPage .message-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #00a3cc;
    text-transform: uppercase;
}

#forumPage .message-date {
    font-size: 0.9em;
    color: #b0b0b0;
    margin-bottom: 5px;
}

#forumPage .message-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    display: block;
    color: #e0e0e0;
    font-size: 1em;
    line-height: 1.4;
}

#forumPage .message-content a {
    color: #00a3cc;
    text-decoration: underline;
    word-break: break-all;
}

#forumPage .message-content a:hover {
    color: #00bbff;
}

#forumPage .view-message {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(0, 223, 255, 0.8);
    color: black;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
    width: fit-content;
    font-weight: bold;
}

#forumPage .view-message:hover {
    background: rgba(0, 223, 255, 1);
}

#forumPage .message-icon {
    position: absolute;
    top: 4.5%;
    right: 5.2%;
    width: 32px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

#forumPage .message-icon:hover {
    transform: scale(1.2);
}

#forumPage .message-notification-badge {
    position: absolute;
    top: 4.8%;
    right: 5.5%;
    background-color: red;
    color: white;
    font-size: 0.75em;
    font-weight: bold;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.8);
    display: none;
    transition: visibility 0.3s ease-in-out;
}

#forumPage .messages-container {
    width: 85%;
    background: rgba(10, 10, 10, 0.95);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 223, 255, 0.6);
    color: #00a3cc;
    text-align: center;
}

#forumPage .messages-header {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

#forumPage .tab-button {
    padding: 12px 24px;
    border: 1px solid rgba(0, 223, 255, 0.6);
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    background: rgba(0, 223, 255, 0.2);
    color: #00a3cc;
    transition: background 0.3s, transform 0.2s;
}

#forumPage .tab-button.active,
#forumPage .tab-button:hover {
    background-color: rgba(0, 223, 255, 1);
    color: #000;
    transform: scale(1.05);
}

#forumPage .messages-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 223, 255, 0.1);
    border-radius: 10px;
}

#forumPage .new-message-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: rgba(0, 223, 255, 0.1);
    border-radius: 10px;
    align-items: center;
}

#forumPage .load-more-button {
    display: block;
    width: 90%;
    max-width: 400px;
    margin: 15px auto;
    padding: 12px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    background: rgba(0, 223, 255, 0.3);
    border: 1px solid rgba(0, 223, 255, 0.6);
    color: #00a3cc;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

#forumPage .load-more-button:hover {
    background: rgba(0, 223, 255, 0.8);
    color: #000;
    transform: scale(1.05);
}

#forumPage .new-message-form input,
#forumPage .new-message-form textarea {
    width: 90%;
    max-width: 600px;
    padding: 12px;
    font-size: 1em;
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid rgba(0, 223, 255, 0.6);
    color: #00a3cc;
    border-radius: 8px;
}

#forumPage .new-message-form input#messageTitle {
    width: 90%;
    max-width: 600px;
    padding: 12px;
    font-size: 1em;
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid rgba(0, 223, 255, 0.6);
    color: #00a3cc;
    border-radius: 8px;
}

#forumPage #sendMessageButton {
    background: rgba(0, 223, 255, 0.8);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

#forumPage #sendMessageButton:hover {
    background: rgba(0, 223, 255, 1);
    transform: scale(1.05);
}

#forumPage .hidden {
    display: none;
}

#forumPage .messages-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 223, 255, 0.1);
    border-radius: 10px;
}

#forumPage .message-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 223, 255, 0.2);
    padding: 15px;
    border-radius: 8px;
    border-left: 5px solid #00a3cc;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

#forumPage .message-item:hover {
    background: rgba(0, 223, 255, 0.4);
    transform: scale(1.02);
}

#forumPage .message-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(0, 223, 255, 0.5);
    margin-right: 10px;
}

#forumPage .message-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

#forumPage .message-meta {
    text-align: right;
    font-size: 0.9em;
    color: #b0b0b0;
}

#forumPage .conversation-messages {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 223, 255, 0.15);
    border-radius: 10px;
}

#forumPage .message {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    border-left: 4px solid #00a3cc;
    box-shadow: 0 0 10px rgba(0, 223, 255, 0.3);
}

#forumPage .message-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
    text-align: center;
}

#forumPage .message-user img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(0, 223, 255, 0.5);
}

#forumPage .message-user .username {
    margin-top: 5px;
    font-size: 1em;
    color: #00a3cc;
    font-weight: bold;
}

#forumPage .message-content {
    flex: 1;
    padding-left: 15px;
    color: #e0e0e0;
    font-size: 1.05em;
    line-height: 1.3;
    word-wrap: break-word;
}

#forumPage .message-content h2,
#forumPage .message-content h3,
#forumPage .message-content h4 {
    margin-top: 6px;
    margin-bottom: 6px;
}

#forumPage .message-content p {
    margin-top: 6px;
    margin-bottom: 6px;
}

#forumPage .message-content ul {
    margin-top: 6px;
    margin-bottom: 6px;
    padding-left: 18px;
}

#forumPage .message-content li {
    margin-bottom: 3px;
    padding-left: 0;
}

#forumPage .message-content blockquote {
    margin: 8px 0;
    padding: 6px 12px;
    background-color: rgba(0, 223, 255, 0.05);
    border-left: 3px solid #00a3cc;
    font-style: italic;
    color: #00a3cc;
    font-size: 0.95em;
    line-height: 1.3;
}

#forumPage .message-content code {
    font-size: 0.95em;
    padding: 2px 4px;
    background-color: rgba(0, 223, 255, 0.1);
    border-radius: 3px;
}

#forumPage .message-content .video-container {
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 8px auto;
}

#forumPage .message-content .video-container iframe {
    width: 100%;
    max-width: 560px;
    height: auto;
    aspect-ratio: 16/9;
}

#forumPage .message .timestamp {
    font-size: 0.85em;
    color: #b0b0b0;
    margin-top: 5px;
    text-align: right;
}

#forumPage .unread-message {
    background: rgba(0, 223, 255, 0.5);
    font-weight: bold;
    border-left: 6px solid #ffcc00;
}

#forumPage .unread-message:hover {
    background: rgba(0, 223, 255, 0.8);
}

#forumPage .message-content span[style*="text-align:center"]:not([style*="display:block"]),
#forumPage .message-content span[style*="text-align:right"]:not([style*="display:block"]),
#forumPage .message-content span[style*="text-align:left"]:not([style*="display:block"]),
#forumPage .message-content span[style*="text-align:justify"]:not([style*="display:block"]) {
    display: block !important;
}

#forumPage .message-content {
    text-align: left;
}

#forumPage .vote-block {
    width: 100%;
    max-width: 570px;
    margin: 0 auto 22px auto;
    background: rgba(8, 38, 46, 0.60);
    border-radius: 15px;
    box-shadow: 0 0 14px #00e7ff50, 0 0 48px #0099ff16;
    padding: 14px 0 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border: 1.5px solid #00e7ff55;
    z-index: 4;
}

#forumPage .vote-title {
    font-family: "Orbitron", "Courier New", monospace;
    font-size: 1.25em;
    letter-spacing: 1.2px;
    color: #00fff6;
    text-shadow: 0 0 6px #00e7ff, 0 0 12px #0099ff88;
    margin-bottom: 4px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    filter: brightness(1.1) drop-shadow(0 0 4px #00fff3);
}

#forumPage .vote-categories {
    width: 98%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 18px;
    margin: 0 auto;
    flex-wrap: wrap;
}

#forumPage .vote-category {
    background: rgba(0, 223, 255, 0.05);
    border-radius: 9px;
    box-shadow: 0 0 4px #00e7ff12;
    padding: 9px 10px 7px 10px;
    min-width: 138px;
    flex: 1 1 138px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    border: 1px solid #00e7ff30;
}

#forumPage .vote-category-header {
    font-family: "Orbitron", "Arial", monospace;
    font-size: 0.97em;
    font-weight: 700;
    color: #00e7ff;
    letter-spacing: 1px;
    margin-bottom: 0px;
    text-shadow: 0 1px 5px #00fff688, 0 0 1px #007a8560;
    text-align: center;
}

#forumPage .vote-link {
    width: 97%;
    margin: 0 0 3px 0;
    display: block;
    padding: 7px 0 6px 0;
    font-size: 0.96em;
    font-family: "Orbitron", "Arial", monospace;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-decoration: none;
    text-align: center;
    border-radius: 27px;
    background: linear-gradient(90deg, #00e7ff 0%, #0099ff 100%);
    color: #04191d;
    border: 1.7px solid #00d6ff;
    box-shadow: 0 0 8px #00e7ff77, 0 0 11px #0099ff45;
    text-shadow: 0 1px 8px #fff, 0 0 4px #00fff2a0;
    transition: 
        background 0.18s, 
        color 0.12s, 
        box-shadow 0.14s, 
        transform 0.11s,
        border-color 0.11s;
    cursor: pointer;
    outline: none;
    position: relative;
}

#forumPage .vote-link:hover,
#forumPage .vote-link:focus {
    background: linear-gradient(90deg, #00fff0 0%, #25afff 100%);
    color: #000;
    box-shadow: 0 0 17px #00e7ff, 0 0 23px #0099ff60;
    transform: scale(1.028) rotate(-0.7deg);
    border-color: #22ffff;
    text-decoration: none;
}

#forumPage .vote-link-rt { border-color: #0cf6e0; }
#forumPage .vote-link-top50 { border-color: #2c78f6; }
#forumPage .vote-link-ja { border-color: #ffc96b; }
#forumPage .vote-link-toppg { border-color: #4bffe5; }
#forumPage .vote-link-bazzart { border-color: #f2a2ff; }

@media (max-width: 700px) {
    #forumPage .vote-block { padding: 8px 0 5px 0; }
    #forumPage .vote-categories { flex-direction: column; gap: 12px; }
    #forumPage .vote-category { min-width: 0; width: 98%; align-items: stretch; }
    #forumPage .vote-link { font-size: 0.92em; border-radius: 18px; }
    #forumPage .vote-title { font-size: 1em; }
}

@media (max-width: 1024px) {
  #forumPage, #forumPage * {
    box-sizing: border-box;
  }

  #forumPage #forumContainer {
    width: 96%;
    margin: 16px auto;
    padding: 16px;
  }

  #forumPage .forum-title {
    font-size: 2em;
    margin-bottom: 16px;
  }

  #forumPage .category-list { gap: 22px; margin-bottom: 28px; }
  #forumPage .category-item { padding: 16px; width: calc(100% - 32px); }

  #forumPage .section-item { padding: 10px 12px; }

  #forumPage .latest-message-box {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 50%;
    padding: 10px 12px;
    margin-left: 14px;
  }

  #forumPage .section-view,
  #forumPage .thread-container,
  #forumPage #sectionViewContainer { width: 95%; }

  #forumPage .thread-header h2 { font-size: 1.6em; }
  #forumPage .section-header h2 { font-size: 1.8em; }

  #forumPage .thread-table th, 
  #forumPage .thread-table td { padding: 8px 10px; }
  #forumPage .thread-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #forumPage .message-layout { gap: 16px; }
  #forumPage .user-box { width: 160px; overflow: hidden; }
  #forumPage .user-avatar { width: 80px; height: 80px; }

  #forumPage .profile-container { width: 92%; }
  #forumPage .profile-avatar { width: 90px; height: 90px; }
}

@media (max-width: 640px) {
  #forumPage { overflow-x: hidden; }
  #forumPage, #forumPage * { box-sizing: border-box; }

  #forumPage #forumContainer {
    width: 100%;
    margin: 10px auto;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 0 14px rgba(0,223,255,0.45), 0 0 26px rgba(0,223,255,0.25);
  }

  #forumPage .forum-title {
    font-size: 1.6em;
    margin-bottom: 12px;
  }

  #forumPage .category-list { gap: 16px; margin-bottom: 18px; }
  #forumPage .category-item { padding: 14px; width: calc(100% - 28px); }
  #forumPage .category-name { font-size: 1.3em; }
  #forumPage .category-description { font-size: 0.95em; }

  #forumPage .section-list { gap: 10px; }
  #forumPage .section-item {
    width: calc(100% - 24px);
    margin: 0 auto;
    padding: 10px 12px;
    min-width: 0;
  }
  #forumPage .section-name { font-size: 1.1em; margin-bottom: 4px; }
  #forumPage .section-description { font-size: 0.92em; overflow-wrap: anywhere; word-break: break-word; }

  #forumPage .section-item { flex-direction: column; }

  #forumPage .latest-message-box {
    margin-left: 0;
    margin-top: 8px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: 8px 10px;
    border-left-width: 2px;
    max-height: 140px;
    overflow: auto;
  }
  #forumPage .latest-message-title { font-size: 0.98em; }
  #forumPage .latest-message-content {
    font-size: 0.95em;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .latest-thread-title, .latest-author {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #forumPage .thread-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #forumPage .thread-table th, 
  #forumPage .thread-table td {
    font-size: 0.95em;
    padding: 8px 10px;
    white-space: nowrap;
  }

  #forumPage .section-view,
  #forumPage .thread-container,
  #forumPage #sectionViewContainer {
    width: 100%;
    min-width: 0;
  }
  #forumPage .section-header,
  #forumPage .thread-header {
    padding: 12px;
    border-radius: 8px;
    gap: 8px;
  }
  #forumPage .section-header h2 { font-size: 1.4em; }
  #forumPage .thread-header h2 { font-size: 1.4em; }

  #forumPage .messages-container {
    width: 100%;
    padding: 14px;
  }

  #forumPage .message-box {
    padding: 14px;
    border-radius: 8px;
  }

  #forumPage .message-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #forumPage .message-layout {
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  #forumPage .user-box {
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 10px;
    overflow: hidden;
    flex-wrap: wrap;
  }
  #forumPage .user-avatar { width: 64px; height: 64px; margin: 0 auto; }
  #forumPage .user-role { margin: 0 auto; }
  #forumPage .user-actions { width: 100%; display: flex; justify-content: center; gap: 8px; margin: 0 auto; }
  #forumPage .user-name-container { flex: 1 1 auto; min-width: 0; justify-content: center; }
  #forumPage .user-info { font-size: 0.9em; flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

  #forumPage .message-content {
    padding-left: 0;
    font-size: 1em;
    line-height: 1.45;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .message-content img { max-width: 100%; height: auto; display: block; }
  #forumPage .message-content .video-container iframe {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  #forumPage .reply-box {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    margin-left: 0;
    margin-right: 0;
  }
  #forumPage .reply-toolbar { flex-wrap: wrap; gap: 6px; }
  #forumPage .reply-editor { width: 100%; height: 200px; font-size: 0.98em; }
  #forumPage .reply-textarea { width: 100%; }
  #forumPage .send-reply-button { font-size: 1.05em; padding: 10px; width: 100%; }

  #forumPage .section-header .back-forum-button,
  #forumPage .section-header .create-thread-button,
  #forumPage .back-thread-button,
  #forumPage .reply-thread-button,
  #forumPage .pin-thread-button,
  #forumPage .unpin-thread-button,
  #forumPage .close-thread-button,
  #forumPage .open-thread-button,
  #forumPage .archive-thread-button,
  #forumPage .unarchive-thread-button,
  #forumPage .send-thread-button {
    width: 100%;
    max-width: 420px;
  }

  #forumPage .create-thread-container { padding: 14px; }
  #forumPage .thread-title-input { width: 100%; font-size: 1.05em; }
  #forumPage .send-thread-button { width: 100%; }

  #forumPage .profile-container { width: 100%; padding: 14px; }
  #forumPage .profile-layout { gap: 14px; }
  #forumPage .profile-header { flex-direction: column; gap: 12px; }
  #forumPage .profile-avatar { width: 80px; height: 80px; }
  #forumPage .profile-name-container { font-size: 1.2em; }

  #forumPage .messages-container { width: 100%; }
  #forumPage .messages-header { flex-wrap: wrap; gap: 10px; }
  #forumPage .tab-button { width: 100%; }

  #forumPage .message-item {
    flex-direction: row;
    gap: 10px;
    min-width: 0;
  }
  #forumPage .message-avatar { width: 44px; height: 44px; }

  #forumPage .conversation-messages { padding: 14px; gap: 12px; }
  #forumPage .message { flex-direction: row; }
  #forumPage .message-user { width: 80px; }
  #forumPage .message-user img { width: 48px; height: 48px; }
  #forumPage .message-user .username { font-size: 0.95em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

  #forumPage .pagination { gap: 6px; }
  #forumPage .pagination button, .pagination-btn {
    padding: 10px 12px;
    font-size: 1em;
    width: auto;
  }

  #forumPage .message-icon,
  #forumPage .message-notification-badge {
    position: fixed;
    right: 10px;
    top: 10px;
  }

  #forumPage .quote-box,
  #forumPage .rp-box,
  #forumPage .hrp-box {
    width: 100%;
    margin: 10px 0;
  }

  #forumPage .vote-block {
    width: 100%;
    border-radius: 12px;
    padding: 10px 0 8px 0;
  }
  #forumPage .vote-categories { flex-direction: column; gap: 12px; }
  #forumPage .vote-category { width: 96%; margin: 0 auto; }
}

#forumPage .btn-manage-private{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 14px;
	border-radius:8px;
	border:1px solid #00e7ff80;
	background:linear-gradient(180deg,rgba(0,223,255,0.85),rgba(0,190,220,0.85));
	color:#041a1f;
	font-weight:800;
	letter-spacing:.4px;
	text-transform:uppercase;
	cursor:pointer;
	box-shadow:0 2px 10px rgba(0,223,255,0.35), inset 0 0 0 1px #00e7ff40;
	transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
#forumPage .btn-manage-private:hover,
#forumPage .btn-manage-private:focus-visible{
	box-shadow:0 4px 18px rgba(0,223,255,0.55), inset 0 0 0 1px #00ffff90;
	transform:translateY(-1px);
	filter:brightness(1.05);
}

#forumPage .badge-private{
	display:inline-flex;
	align-items:center;
	gap:6px;
	margin-left:10px;
	padding:4px 10px;
	border-radius:999px;
	border:1px solid #00e7ff55;
	background:linear-gradient(180deg,#07222a 0%,#04161b 100%);
	color:#2ee5ff;
	font-size:.78rem;
	text-transform:uppercase;
	letter-spacing:.6px;
	box-shadow:0 0 10px #00e7ff33;
}

#forumPage .private-overlay{
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(2,16,22,0.82);
	backdrop-filter:blur(3.5px);
	-webkit-backdrop-filter:blur(3.5px);
	z-index:9999;
}
#forumPage .private-panel{
	width:min(620px,94vw);
	border:1.5px solid #00e7ff55;
	border-radius:14px;
	background:linear-gradient(180deg, rgba(4,25,29,0.98) 0%, rgba(3,18,22,0.98) 100%);
	box-shadow:0 10px 40px rgba(0,223,255,0.25), 0 0 60px #00bcd430;
	padding:18px;
	color:#bfefff;
}
#forumPage .private-panel h3{
	margin:0 0 12px 0;
	font-family:"Orbitron","Courier New",monospace;
	letter-spacing:.8px;
	color:#00fff6;
	text-shadow:0 0 8px #00e7ff88;
}

#forumPage .private-search-row{
	display:flex;
	gap:10px;
	align-items:center;
	margin:10px 0 12px 0;
}
#forumPage .private-search{
	flex:1;
	padding:10px 12px;
	border-radius:8px;
	border:1px solid #0a2a33;
	background:#06191f;
	color:#c8f6ff;
	outline:none;
	transition:box-shadow .2s ease, border-color .2s ease;
}
#forumPage .private-search:focus{
	border-color:#00e7ff;
	box-shadow:0 0 0 3px #00e7ff33;
}
#forumPage .private-search-btn{
	padding:10px 14px;
	border-radius:8px;
	border:1px solid #00e7ff66;
	background:rgba(0,223,255,0.18);
	color:#00e7ff;
	font-weight:700;
	cursor:pointer;
	box-shadow:0 0 10px #00e7ff33 inset;
	transition:background .2s ease, transform .06s ease, border-color .2s ease;
}
#forumPage .private-search-btn:hover{
	background:rgba(0,223,255,0.35);
	border-color:#00ffffa6;
	transform:translateY(-1px);
}

#forumPage .private-search-results{
	max-height:220px;
	overflow:auto;
	border:1px solid #0a2a33;
	border-radius:10px;
	padding:6px;
	background:rgba(3,18,22,0.9);
	box-shadow:inset 0 0 12px #00191f88;
}
#forumPage .private-result-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:8px 10px;
	border-bottom:1px solid #0c2b34;
}
#forumPage .private-result-row:last-child{ border-bottom:none; }
#forumPage .private-add-btn{
	padding:6px 10px;
	border-radius:7px;
	border:1px solid #00e7ff66;
	background:rgba(0,223,255,0.16);
	color:#00e7ff;
	font-weight:700;
	cursor:pointer;
	transition:background .2s, transform .06s, border-color .2s;
}
#forumPage .private-add-btn:hover{
	background:rgba(0,223,255,0.32);
	border-color:#00ffffa6;
	transform:translateY(-1px);
}

#forumPage .private-participants{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:8px;
}
#forumPage .private-chip{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:6px 10px;
	border-radius:999px;
	border:1px solid #0a2a33;
	background:linear-gradient(180deg,#071e24,#05161b);
	color:#d7fbff;
	box-shadow:0 0 8px #00e7ff22 inset;
}
#forumPage .private-chip .private-remove{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:22px;
	height:22px;
	border-radius:999px;
	border:1px solid #1b3b45;
	background:#072028;
	color:#9beaff;
	font-weight:900;
	line-height:1;
	cursor:pointer;
	transition:transform .06s ease, background .2s ease, border-color .2s ease;
}
#forumPage .private-chip .private-remove:hover{
	transform:scale(1.06);
	background:#0a2f3a;
	border-color:#00e7ff77;
}

#forumPage .private-panel .private-footer{
	display:flex;
	justify-content:flex-end;
	margin-top:14px;
}
#forumPage .private-panel .close-private{
	padding:10px 14px;
	border-radius:8px;
	border:1px solid #00e7ff66;
	background:rgba(0,223,255,0.18);
	color:#00e7ff;
	font-weight:800;
	cursor:pointer;
	transition:background .2s ease, transform .06s ease, border-color .2s ease;
}
#forumPage .private-panel .close-private:hover{
	background:rgba(0,223,255,0.35);
	border-color:#00ffffa6;
	transform:translateY(-1px);
}

@media (max-width:640px){
	#forumPage .private-panel{ width:min(96vw,640px); padding:14px; }
	#forumPage .private-search-row{ gap:8px; }
	#forumPage .private-search-results{ max-height:200px; }
}

#wikiPageList {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
	margin-bottom: 40px;
	box-sizing: border-box;
}

#wikiEditor {
	margin-top: 20px;
	padding: 20px;
	border: 2px solid rgba(0, 223, 255, 0.5);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 15px rgba(0, 223, 255, 0.4);
	width: 100%;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

#wikiEditor .reply-editor {
	width: 100%;
	height: 300px;
	background-color: rgba(0, 0, 0, 0.8);
	color: #00ffff;
	padding: 10px;
	border: 1px solid rgba(0, 223, 255, 0.5);
	border-radius: 5px;
	margin-bottom: 10px;
	overflow-y: auto;
}

#wikiEditor input,
#wikiParentSelect {
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	border: 2px solid rgba(0, 223, 255, 0.5);
	background-color: rgba(0, 0, 0, 0.6);
	color: #00a3cc;
	border-radius: 5px;
}

#wikiEditor .send-reply-button {
	width: 100%;
	padding: 10px;
	background-color: rgba(0, 223, 255, 0.8);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1.2em;
}

.wiki-welcome-container {
	position: relative;
	overflow: hidden;
	background-color: #000;
	color: #00eaff;
	padding: 3rem 2rem;
	border-radius: 12px;
	box-shadow: 0 0 30px rgba(0, 223, 255, 0.15);
	font-family: 'Orbitron', sans-serif;
	max-width: 980px;
	margin: auto;
}

.wiki-welcome-content {
	position: relative;
	z-index: 2;
	text-align: center;
}

.wiki-welcome-content h1 {
	font-size: 2.4rem;
	margin-bottom: 2rem;
	text-shadow: 0 0 10px #00d0ff;
}

.carousel-container {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	min-height: 160px;
	margin-bottom: 2rem;
}

.carousel-slide {
	display: none;
	animation: fadeIn 0.8s ease-in-out;
}

.carousel-slide.active {
	display: block;
}

.carousel-slide h2 {
	font-size: 1.5rem;
	margin-bottom: 0.8rem;
	color: #76f2ff;
}

.carousel-slide p {
	font-size: 1.1rem;
	line-height: 1.7;
}

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

.carousel-dots .dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #00caff55;
	cursor: pointer;
	transition: 0.3s;
}

.carousel-dots .dot.active {
	background-color: #00eaff;
	box-shadow: 0 0 5px #00eaff;
}

.warning {
	font-weight: bold;
	color: #f2f28d;
	margin-bottom: 1.8rem;
}

.welcome-footer {
	font-style: italic;
	color: #88ecff;
	font-size: 0.95rem;
	margin-top: 1.5rem;
}

.animated-bg {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: radial-gradient(circle, rgba(0,223,255,0.12) 0%, transparent 60%),
				repeating-linear-gradient(45deg, rgba(0,223,255,0.03) 0px, rgba(0,223,255,0.03) 1px, transparent 1px, transparent 12px);
	animation: glow-fade 4s infinite alternate ease-in-out;
	z-index: 1;
}

@keyframes glow-fade {
	0% { opacity: 0.15; transform: scale(1); }
	100% { opacity: 0.4; transform: scale(1.02); }
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(15px); }
	to { opacity: 1; transform: translateY(0); }
}

.wiki-categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
	max-width: 1000px;
	margin: 4rem auto;
	padding: 1rem;
}

.category-card {
	background: linear-gradient(145deg, rgba(0,223,255,0.15), rgba(0,223,255,0.03));
	border: 1px solid rgba(0, 223, 255, 0.2);
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
	color: #00eaff;
	font-family: 'Orbitron', sans-serif;
	text-decoration: none;
	box-shadow: 0 0 12px rgba(0, 223, 255, 0.1);
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.category-card:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 0 20px rgba(0, 223, 255, 0.25);
	border-color: rgba(0, 223, 255, 0.6);
	color: #ffffff;
	background-color: rgba(0, 223, 255, 0.05);
}

.cat-intro-title {
	text-align: center;
	font-size: 2rem;
	color: #00f0ff;
	margin-bottom: 1rem;
	text-shadow: 0 0 8px #00eaff;
}

.cat-intro-text {
	text-align: center;
	color: #88ecff;
	max-width: 720px;
	margin: 0 auto 2rem;
	font-size: 1.1rem;
	line-height: 1.6;
}

.subcategory-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	padding: 1rem 2rem;
	max-width: 960px;
	margin: auto;
}

.subcategory-card {
	background-color: rgba(0, 223, 255, 0.05);
	border: 1px solid rgba(0, 223, 255, 0.2);
	padding: 1rem;
	border-radius: 10px;
	text-align: center;
	color: #00eaff;
	font-family: 'Orbitron', sans-serif;
	text-decoration: none;
	box-shadow: 0 0 10px rgba(0, 223, 255, 0.05);
	transition: all 0.2s ease;
}

.subcategory-card:hover {
	background-color: rgba(0, 223, 255, 0.08);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 0 15px rgba(0, 223, 255, 0.3);
}

.wiki-title {
	cursor: pointer;
}

.wiki-page-card {
	background-color: rgba(0, 223, 255, 0.06);
	border: 1px solid rgba(0, 223, 255, 0.2);
	border-radius: 12px;
	box-shadow: 0 0 12px rgba(0, 223, 255, 0.1);
	margin: 1rem auto;
	padding: 1.5rem;
	max-width: 720px;
	color: #c4f7ff;
	text-align: center;
	font-family: 'Orbitron', sans-serif;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wiki-page-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 0 20px rgba(0, 223, 255, 0.3);
}

.wiki-page-card h3 {
	font-size: 1.4rem;
	margin-bottom: 1rem;
}

.wiki-page-view {
	position: relative;
	overflow: hidden;
	background-color: #000;
	color: #00eaff;
	padding: 3rem 2rem;
	border-radius: 12px;
	box-shadow: 0 0 30px rgba(0, 223, 255, 0.15);
	font-family: 'Orbitron', sans-serif;
	max-width: 980px;
	margin: auto;
}

.wiki-content-html {
	margin-top: 2rem;
	font-size: 1.1rem;
	line-height: 1.8;
	color: #c7f6ff;
	text-align: left;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.wiki-content-html h1,
.wiki-content-html h2,
.wiki-content-html h3 {
	color: #00eaff;
	text-shadow: 0 0 6px #00f0ff;
	margin-top: 1.5em;
}

.wiki-content-html img {
	max-width: 100%;
	border-radius: 8px;
	box-shadow: 0 0 12px rgba(0,223,255,0.2);
	margin: 1rem 0;
}

.rp-box, .hrp-box {
	background-color: rgba(0, 223, 255, 0.05);
	border-left: 4px solid #00eaff;
	padding: 1rem;
	margin: 1.5rem 0;
	font-style: italic;
}

.spoiler-container {
	margin: 1rem 0;
}

.spoiler-toggle {
	background: rgba(0, 223, 255, 0.15);
	border: none;
	color: #00eaff;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	cursor: pointer;
}

.spoiler-content.hidden {
	display: none;
}

#wikiSearchContainer {
	max-width: 600px;
	margin: 1rem auto 2rem;
	text-align: center;
	position: relative;
}

#wikiSearchInput {
	width: 100%;
	padding: 12px 16px;
	font-size: 1.1rem;
	border-radius: 8px;
	border: 1px solid rgba(0, 223, 255, 0.3);
	background: rgba(0, 0, 0, 0.5);
	color: #00eaff;
	box-shadow: 0 0 10px rgba(0, 223, 255, 0.2);
	outline: none;
	transition: border 0.3s ease;
}

#wikiSearchInput:focus {
	border-color: rgba(0, 223, 255, 0.8);
}

#wikiSearchResults {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #000;
	border: 1px solid rgba(0, 223, 255, 0.3);
	border-top: none;
	z-index: 10;
	box-shadow: 0 10px 15px rgba(0, 223, 255, 0.1);
	max-height: 240px;
	overflow-y: auto;
	border-radius: 0 0 10px 10px;
}

.wiki-search-item {
	padding: 10px;
	cursor: pointer;
	color: #00eaff;
	text-align: left;
	transition: background 0.2s;
	font-family: 'Orbitron', sans-serif;
}

.wiki-search-item:hover {
	background: rgba(0, 223, 255, 0.1);
	color: #ffffff;
}

@media (max-width: 1024px) {
  #wikiEditor {
    max-width: 92%;
    padding: 16px;
  }

  #wikiEditor .reply-editor {
    height: 260px;
  }

  .wiki-welcome-container,
  .wiki-page-view {
    max-width: 94%;
    padding: 2.2rem 1.6rem;
  }

  .wiki-welcome-content h1 {
    font-size: 2rem;
  }

  .carousel-container {
    gap: 1rem;
    min-height: 140px;
    margin-bottom: 1.6rem;
  }

  .carousel-slide h2 {
    font-size: 1.3rem;
  }

  .carousel-slide p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .wiki-categories-grid,
  .subcategory-grid {
    gap: 1.2rem;
    padding: 0.75rem 1rem;
    max-width: 95%;
  }

  .category-card,
  .subcategory-card {
    padding: 1.25rem;
  }

  .cat-intro-title {
    font-size: 1.7rem;
  }

  .cat-intro-text {
    max-width: 680px;
    font-size: 1rem;
  }

  .wiki-page-card {
    max-width: 92%;
    padding: 1.25rem;
  }

  .wiki-content-html {
    max-width: 92%;
    font-size: 1.02rem;
    line-height: 1.7;
  }

  .wiki-content-html,
  .wiki-content-html * {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #wikiSearchContainer {
    max-width: 90%;
  }

  #wikiSearchResults {
    max-height: 260px;
  }
}

@media (max-width: 640px) {
  #wikiEditor {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    margin-top: 14px;
  }

  #wikiEditor .reply-editor {
    height: 220px;
    font-size: 0.98rem;
  }

  #wikiEditor input,
  #wikiParentSelect {
    padding: 10px;
    font-size: 1rem;
  }

  #wikiEditor .send-reply-button {
    padding: 10px;
    font-size: 1.05rem;
  }

  .wiki-welcome-container,
  .wiki-page-view {
    max-width: 100%;
    width: 100%;
    padding: 1.4rem 1rem;
    border-radius: 10px;
  }

  .wiki-welcome-content h1 {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
  }

  .carousel-container {
    gap: 0.8rem;
    min-height: 120px;
    margin-bottom: 1.2rem;
  }

  .carousel-slide h2 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .carousel-slide p {
    font-size: 0.98rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .carousel-dots {
    gap: 8px;
    margin-bottom: 1.2rem;
  }

  .carousel-dots .dot {
    width: 12px;
    height: 12px;
  }

  .warning {
    margin-bottom: 1rem;
    font-size: 0.95rem;
  }

  .welcome-footer {
    font-size: 0.9rem;
    margin-top: 1rem;
  }

  .wiki-categories-grid,
  .subcategory-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.9rem;
    padding: 0.5rem 0.75rem;
    max-width: 100%;
  }

  .category-card,
  .subcategory-card {
    padding: 1rem;
  }

  .category-card h3,
  .subcategory-card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
  }

  .cat-intro-title {
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
  }

  .cat-intro-text {
    max-width: 100%;
    font-size: 0.98rem;
    margin: 0 auto 1.2rem;
  }

  .wiki-page-card {
    max-width: 100%;
    padding: 1rem;
    margin: 0.8rem auto;
  }

  .wiki-page-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.7rem;
  }

  .wiki-content-html {
    max-width: 100%;
    width: 100%;
    padding: 0;
    font-size: 0.98rem;
    line-height: 1.65;
  }

  .wiki-content-html img {
    height: auto;
    max-width: 100%;
    display: block;
  }

  .wiki-page-view .rp-box,
  .wiki-page-view .hrp-box,
  .wiki-content-html .rp-box,
  .wiki-content-html .hrp-box {
    padding: 0.8rem;
    margin: 1rem 0;
  }

  .spoiler-container {
    margin: 0.8rem 0;
  }

  .spoiler-toggle {
    padding: 0.45rem 0.9rem;
    font-size: 0.95rem;
  }

  #wikiSearchContainer {
    max-width: 100%;
    width: 100%;
    padding: 0 10px;
    margin: 0.75rem auto 1.2rem;
  }

  #wikiSearchInput {
    font-size: 1rem;
    padding: 10px 14px;
  }

  #wikiSearchResults {
    left: 0;
    right: 0;
    width: 100%;
    max-height: 220px;
    border-radius: 0 0 10px 10px;
  }

  #wikiPageList {
    gap: 18px;
    margin-bottom: 22px;
    padding: 0 8px;
  }

  .wiki-title {
    font-size: 1.02rem;
  }
}

#workContainer {
    width: 100%;
    color: #0df2ff;
    border-radius: 16px;
    box-shadow: 0 0 20px #00f0ff40, 0 0 50px #00f0ff20;
    padding: 25px 20px 35px 20px;
    margin: 0 auto;
    min-height: 320px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.neo-credits-icon {
    height: 1em;
    width: 1em;
    vertical-align: middle;
    margin-left: 2px;
    margin-bottom: 2px;
}

#workContainer, #housingContainer {
    width: 100%;
    max-height: 670px;
    color: #e5fcff;
    border-radius: 14px;
    background: #181c23;
    box-shadow: 0 0 12px #00f0ff33;
    padding: 24px 18px 30px 18px;
    margin: 0 auto;
    min-height: 320px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#workContent, #housingContent {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.housing-tabs, .work-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.housing-tab-btn, .work-tab-btn {
    background: #131a21;
    color: #00f0ff;
    border: 1.5px solid #00f0ff;
    border-radius: 6px;
    padding: 6px 24px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.96;
    transition: background 0.13s, color 0.13s, border 0.13s;
}
.housing-tab-btn.tab-btn-active, .housing-tab-btn:focus, .housing-tab-btn:hover,
.work-tab-btn.tab-btn-active, .work-tab-btn:focus, .work-tab-btn:hover {
    background: #00f0ff;
    color: #131a21;
    border-color: #00f0ff;
    outline: none;
}

.work-job-card, .housing-card {
    background: #1b212a;
    border: 1.5px solid #00f0ff33;
    border-radius: 12px;
    margin: 0 0 17px 0;
    padding: 17px 18px 12px 18px;
    box-shadow: 0 2px 10px #0df2ff18;
    font-size: 1.03em;
    text-align: left;
}
.work-job-card h2, .housing-card h2 {
    margin-bottom: 10px;
    color: #0df2ff;
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: left;
}
.work-details, .housing-details {
    margin-bottom: 2px;
}
.work-details > div, .housing-details > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4px;
}
.work-label, .housing-label {
    font-weight: 500;
    color: #00f0ff;
    min-width: 120px;
    font-size: 1em;
    text-align: left;
    opacity: 0.93;
}
.work-value, .housing-value {
    color: #eaf9ff;
    font-weight: 400;
    text-align: right;
    word-break: break-all;
    max-width: 220px;
}

.work-status {
    color: #7effa1;
    font-weight: bold;
}
.work-status-label {
    margin: 9px 0 0 0;
    font-weight: bold;
}
.work-status-label.boss { color: #0ea900; }
.work-status-label.leader { color: #2196f3; }
.work-job-employee .work-status { color: #43a047; }

.work-action-btn.menuButton, .work-resign-btn.menuButton {
    margin-top: 10px;
    padding: 8px 18px;
    background: #00f0ff;
    border: none;
    border-radius: 7px;
    color: #181c23;
    font-weight: bold;
    font-size: 1em;
    box-shadow: 0 0 4px #0df2ff33;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
}
.work-resign-btn.menuButton {
    background: #f44336;
    color: #fff;
    border: 1.5px solid #f44336;
}
.work-resign-btn.menuButton:hover {
    background: #ffbf40;
    color: #fff;
}
.work-action-btn.menuButton:hover {
    background: #7effa1;
    color: #181c23;
}

.work-unemployed, .work-loading, .work-error, .tip {
    color: #88e6ff;
    text-align: center;
    margin: 36px 0 14px 0;
    font-size: 1.09em;
    opacity: 0.95;
}
.tip {
    color: #a9b8c8;
    font-size: 0.97em;
    margin-top: 8px;
}

html, body {
    overflow-x: hidden !important;
}

#repairOverlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.72);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}
#repairOverlay .repair-header {
	position: relative;
	width: 100%;
	max-width: 680px;
	background: rgba(10,18,24,.98);
	border: 2px solid #00f0ff;
	border-bottom: 0;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 0 35px #00f0ff50, 0 0 4px #0df2ff80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 44px;
}
#repairOverlay h2 {
	margin: 0;
	color: #0df2ff;
	font-family: 'Orbitron', monospace;
	font-weight: 700;
	letter-spacing: .5px;
	text-shadow: 0 0 12px #00f0ff66;
	font-size: 1.12rem;
}
#repairOverlay .repair-close {
	position: absolute;
	right: 10px;
	top: 8px;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 2px solid #0df2ff;
	background: #0d0d0d;
	color: #0df2ff;
	font-weight: 900;
	font-size: 20px;
	cursor: pointer;
}
#repairOverlay .repair-inner {
	width: 100%;
	max-width: 680px;
	max-height: 78vh;
	overflow: auto;
	background: rgba(10,18,24,.98);
	border: 2px solid #00f0ff;
	border-top: 0;
	border-radius: 0 0 16px 16px;
	box-shadow: 0 0 35px #00f0ff50, 0 0 4px #0df2ff80;
	padding: 14px 16px 16px 16px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
#repairOverlay .repair-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#repairOverlay label {
	color: #0df2ff;
	font-family: 'Courier New', monospace;
	font-size: .95rem;
}
#repairOverlay select {
	background:#0b0b0b;
	color:#e0f0ff;
	border:2px solid #0df2ff;
	border-radius:10px;
	padding:8px 10px;
	font-family:'Courier New',monospace;
	font-size:.95rem;
}
#repairOverlay .repair-hint {
	color:#7fd9e0;
	font-family:'Courier New',monospace;
	font-size:.9rem;
	min-height:1.2em;
}
#repairOverlay .repair-hint.repair-error { color:#ff6b6b; }
#repairOverlay .repair-preview {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:8px;
	padding:8px;
	border:1px solid #132d36;
	border-radius:12px;
	background:rgba(13,242,255,.06);
}
#repairOverlay .repair-item-img {
	width:96px;
	height:96px;
	image-rendering: pixelated;
}
#repairOverlay .repair-item-name {
	color:#fff;
	font-family:'Courier New',monospace;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.06em;
}
#repairOverlay .repair-state {
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
}
#repairOverlay .repair-state-bar {
	width:100%;
	height:18px;
	border:2px solid #0df2ff;
	border-radius:10px;
	background:linear-gradient(180deg,#0b0b0b 0%,#131313 100%);
	overflow:hidden;
}
#repairOverlay .repair-state-fill {
	height:100%;
	width:0%;
	background:linear-gradient(90deg,#28d7ff,#00f0ff);
	box-shadow:0 0 12px rgba(13,242,255,.6) inset;
	transition:width .25s ease;
}
#repairOverlay .repair-state-text {
	color:#e0f0ff;
	font-family:'Courier New',monospace;
	font-size:.95rem;
}
#repairOverlay .repair-actions {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}
#repairOverlay .repair-expected {
	color:#7fd9e0;
	font-family:'Courier New',monospace;
	font-size:.95rem;
	flex:1 1 auto;
}
#repairOverlay .repair-btn {
	background:#0d0d0d;
	border:2px solid #0df2ff;
	border-radius:10px;
	color:#e0f0ff;
	font-family:'Courier New',monospace;
	font-size:1rem;
	font-weight:700;
	letter-spacing:.06em;
	padding:10px 16px;
	cursor:pointer;
	box-shadow:0 0 25px rgba(13,242,255,.35);
	text-transform:uppercase;
}
#repairOverlay .repair-btn:disabled {
	opacity:.5;
	cursor:default;
}
@media (max-width:700px){
	#repairOverlay .repair-inner{max-width:95vw}
	#repairOverlay .repair-header{max-width:95vw}
}