/* ================= Reset Básico e Estilos Gerais ================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    background-color: #2b2621;
    color: #d1c9c1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* ... e o restante do seu código CSS */
}
/* ================= Reset Básico e Estilos Gerais ================= */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            font-family: "Trebuchet MS", Verdana, sans-serif;
            background-color: #2b2621;
            color: #d1c9c1;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Removido overflow: hidden para permitir rolagem */
        }

        h1 {
            margin-top: 20px;
            color: #ffcc00;
            text-shadow: 2px 2px 6px #000;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        /* ================= Utilitários ================= */
        .hidden {
            display: none !important;
        }

        .no-scroll {
            overflow: hidden; /* Usado temporariamente para bloquear rolagem ao abrir modais */
        }

        /* ================= Barra Superior Fixa (Top-Bar) ================= */
        #top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 10px 20px;
            background-color: #1e1e1e;
            border-bottom: 2px solid #555;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
        }

        #top-bar > div {
            margin: 0 15px;
        }

        #backToStartBtn {
            padding: 8px 15px;
            font-size: 14px;
            font-weight: bold;
            color: white;
            background-color: #8b3a32;
            border: 2px solid #5b2621;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #backToStartBtn:hover {
            background-color: #a34840;
        }

        #refinadoContainer {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 20px;
            font-weight: bold;
        }

        #refinadoContainer img {
            width: 60px;
            height: 60px;
        }

        #statsContainer {
            display: flex;
            gap: 30px;
            font-size: 16px;
            color: #c9c0b8;
        }

        #statsContainer b {
            color: #ffcc00;
            font-size: 18px;
        }

        #music-container {
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(0, 0, 0, 0.5);
            padding: 8px;
            border-radius: 25px;
            border: 1px solid #a33528;
        }

        #volumeBtn,
        #prevBtn,
        #nextBtn {
            background: transparent;
            border: none;
            color: #ffcc00;
            width: 30px;
            height: 30px;
            font-size: 18px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        #volumeBtn:hover,
        #prevBtn:hover,
        #nextBtn:hover {
            transform: scale(1.1);
        }

        #volumeSlider {
            -webkit-appearance: none;
            appearance: none;
            width: 100px;
            height: 8px;
            background: #444;
            outline: none;
            border-radius: 5px;
        }

        #volumeSlider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            background: #ffcc00;
            cursor: pointer;
            border-radius: 50%;
            border: 2px solid #111;
        }

        #volumeSlider::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: #ffcc00;
            cursor: pointer;
            border-radius: 50%;
            border: 2px solid #111;
        }

        /* ================= Containers da Tela de Jogo ================= */
          #gameContainer {
            width: 100%;
            padding-top: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 10;
        }

        #main-content {
            display: flex;
            justify-content: center;
            gap: 30px;
            width: 95%;
            padding-top: 80px;
            overflow-y: auto;
            max-height: calc(100vh - 80px);
        }

        #left-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1.5;
            max-width: 1000px;
        }

        #right-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            max-width: 500px;
            margin-top: 20px;
            overflow-y: auto;
            max-height: calc(100vh - 100px);
        }

        /* ================= Vídeo e Recompensa ================= */
        #videoContainer {
            position: relative;
            width: 85vw;
            max-width: 1000px;
            max-height: 70vh;
            aspect-ratio: 16 / 9;
            background-color: #000;
            margin-top: 20px;
            border: 3px solid #a33528;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 20px #000;
            overflow: hidden;
            z-index: 10;
        }

        video#boxVideo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            pointer-events: none;
            user-select: none;
        }

        .is-playing video#boxVideo {
            z-index: 10;
        }

        #rewardScreen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 15px;
            z-index: 12;
            transition: opacity 0.3s ease;
            opacity: 0;
            pointer-events: none;
        }

        #rewardScreen.visible {
            opacity: 1;
            pointer-events: all;
        }

        img#itemImg {
            max-width: 50%;
            max-height: 50%;
            filter: drop-shadow(0 0 15px rgba(255, 220, 150, 0.5));
        }

        #itemName {
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            text-shadow: 3px 3px 6px #000;
            color: #ffcc00;
        }

        #itemActions,
        .main-actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        /* ================= Botões Gerais ================= */
        #openBtn,
        #openBackpackBtn,
        #achievementsBtn,
        #profileBtn,
        #sellBtn,
        #storeBtn,
        #discardBtn,
        #testBtn,
        #soundConfigBtn,
        #loginBtn,
        #duelModeBtn,
        #missionsBtn,
        #exchangeBtnStart,
        #buyGamesBtn {
            padding: 12px 25px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            border: 2px solid #222;
            border-radius: 5px;
            background: linear-gradient(#d1c9c1, #9a8a7c);
            color: #2b2621;
            box-shadow: inset 0 3px 6px #000;
            transition: background 0.3s, transform 0.2s;
        }

        #openBtn:hover,
        #openBackpackBtn:hover,
        #achievementsBtn:hover,
        #profileBtn:hover,
        #sellBtn:hover,
        #storeBtn:hover,
        #discardBtn:hover,
        #testBtn:hover,
        #soundConfigBtn:hover,
        #loginBtn:hover,
        #duelModeBtn:hover,
        #missionsBtn:hover,
        #exchangeBtnStart:hover,
        #buyGamesBtn:hover {
            background: linear-gradient(#ffcc00, #ffaa00);
            transform: scale(1.05);
        }

        #achievementsBtn {
            background: linear-gradient(#6a8a61, #4f6b46);
            color: #fff;
        }

        #achievementsBtn:hover {
            background: linear-gradient(#82a878, #6a8a61);
        }

        #profileBtn {
            background-color: #a57436;
            color: #eae2d6;
        }

        #profileBtn:hover {
            background-color: #b88f5a;
        }

        #loginBtn,
        #duelModeBtn,
        #missionsBtn,
        #exchangeBtnStart,
        #buyGamesBtn {
            width: 250px;
            padding: 15px 30px;
            font-size: 1rem;
            color: white;
            background-color: #d10000;
            border: 2px solid #a30000;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }
        
        #missionsBtn {
            background-color: #4b69ff; /* Cor azul para diferenciar */
            border: 2px solid #3a52c4;
        }

        #loginBtn:hover,
        #duelModeBtn:hover,
        #exchangeBtnStart:hover,
        #buyGamesBtn:hover {
            background-color: #ff0000;
            transform: translateY(-2px);
        }

        #missionsBtn:hover {
            background-color: #6a82ff;
            transform: translateY(-2px);
        }

        /* ================= Loja e Venda ================= */
        #shop,
        #sellArea {
            width: 100%;
            margin-top: 25px;
            padding: 20px;
            border-radius: 10px;
            border: 3px solid #a33528;
            background: linear-gradient(145deg, #3c352e, #2b2621);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
            z-index: 10;
        }

        #shop h2,
        #sellArea h2 {
            text-align: center;
            color: #ffcc00;
            text-shadow: 2px 2px 4px #000;
            margin-top: 0;
        }

        .shopItem,
        .sellItem {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 15px 0;
            padding: 10px;
            border: 1px solid #444;
            border-radius: 8px;
            background-color: #2b2621;
            box-shadow: inset 0 0 10px #000;
        }

        .shopItem img,
        .sellItem img {
            width: 70px;
            height: 70px;
        }

        .shopItem span,
        .sellItem span {
            flex: 1;
            margin-left: 15px;
            font-size: 18px;
        }

        .shopItem button,
        .sellItem button {
            padding: 8px 15px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            border: 2px solid #222;
            border-radius: 5px;
            background: linear-gradient(#d1c9c1, #9a8a7c);
            color: #2b2621;
            box-shadow: inset 0 3px 6px #000;
            transition: background 0.3s;
        }

        .shopItem button:hover,
        .sellItem button:hover {
            background: linear-gradient(#ffcc00, #ffaa00);
        }

        #sellEmptyMessage {
            color: #888;
            text-align: center;
        }

        /* ================= Mochila (Modal) ================= */
        #backpackModal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1010;
            transition: opacity 0.3s ease;
        }

        #backpackModal.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .backpack-content {
            background-color: #3c352e;
            padding: 15px;
            border-radius: 5px;
            border: 2px solid #222;
            width: 90%;
            max-width: 950px;
            overflow-y: auto;
            max-height: 80vh;
        }

        .backpack-title-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            color: #d1c9c1;
            border-bottom: 2px solid #a33528;
            padding-bottom: 5px;
        }

        .backpack-title-bar h3 {
            margin: 0;
            font-size: 20px;
            text-transform: uppercase;
        }

        #closeBackpackBtn {
            background: #a33528;
            border: 1px solid #222;
            color: #fff;
            font-weight: bold;
            font-size: 16px;
            width: 25px;
            height: 25px;
            cursor: pointer;
            border-radius: 3px;
        }

        #backpackGrid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
            gap: 8px;
            margin-bottom: 15px;
        }

        .backpack-slot {
            width: 100%;
            aspect-ratio: 1 / 1;
            background-color: #2b2621;
            border: 1px solid #444;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: inset 0 0 6px #000;
        }

        .backpack-slot img {
            max-width: 90%;
            max-height: 90%;
        }

        #backpackPagination {
            display: flex;
            justify-content: center;
            gap: 5px;
        }

        .pagination-btn {
            background-color: #7d7064;
            color: #d1c9c1;
            border: 1px solid #222;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.2s;
        }

        .pagination-btn:hover {
            background-color: #9a8a7c;
        }

        .pagination-btn.active {
            background-color: #a33528;
            color: #fff;
        }

        /* ================= Conquistas (Modal) ================= */
        #achievementsModal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1010;
            transition: opacity 0.3s ease;
        }

        #achievementsModal.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .achievements-content {
            background-color: #3c352e;
            padding: 15px;
            border-radius: 5px;
            border: 2px solid #222;
            width: 90%;
            max-width: 700px;
            overflow-y: auto;
            max-height: 80vh;
        }

        .achievements-title-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            color: #d1c9c1;
            border-bottom: 2px solid #a33528;
            padding-bottom: 5px;
        }

        .achievements-title-bar h3 {
            margin: 0;
            font-size: 20px;
            text-transform: uppercase;
        }

        #closeAchievementsBtn {
            background: #a33528;
            border: 1px solid #222;
            color: #fff;
            font-weight: bold;
            font-size: 16px;
            width: 25px;
            height: 25px;
            cursor: pointer;
            border-radius: 3px;
        }

        #achievementsList {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: 60vh;
            overflow-y: auto;
            padding-right: 10px;
        }

        .achievement {
            background-color: #2b2621;
            border: 1px solid #444;
            border-radius: 5px;
            padding: 10px;
            opacity: 0.5;
            transition: opacity 0.3s, border-color 0.3s;
            box-shadow: inset 0 0 6px #000;
        }

        .achievement.unlocked {
            opacity: 1;
            border-left: 5px solid #ffcc00;
            background-color: #3c352e;
        }

        .achievement h4 {
            margin: 0 0 5px 0;
            color: #ffcc00;
        }

        .achievement p {
            margin: 0;
            color: #d1c9c1;
        }

        /* ================= Perfil (Modal) ================= */
        #profileModal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1010;
            transition: opacity 0.3s ease;
        }

        #profileModal.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .profile-content {
            background-color: #3c352e;
            border: 2px solid #1e1b18;
            width: 90%;
            max-width: 500px;
            padding: 0;
            overflow-y: auto;
            max-height: 80vh;
        }

        .profile-title-bar {
            background: #2a2622;
            border-bottom: 2px solid #1e1b18;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .profile-title-bar h3 {
            font-family: 'Teko', sans-serif;
            font-size: 24px;
            margin: 0;
        }

        #closeProfileBtn {
            background: #c54c42;
            border: 1px solid #222;
            color: #fff;
            font-weight: bold;
            font-size: 16px;
            width: 25px;
            height: 25px;
            cursor: pointer;
            border-radius: 3px;
        }

        .profile-details {
            padding: 20px;
            font-size: 18px;
        }

        .profile-name-section {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        #playerNameInput {
            background-color: #eae2d6;
            border: 2px solid #1e1b18;
            color: #3c352e;
            font-weight: bold;
            padding: 5px;
            font-size: 18px;
            flex-grow: 1;
        }

        .profile-title-section {
            margin-bottom: 20px;
        }

        .profile-title-section b {
            color: #ffd700;
            font-family: 'Teko', sans-serif;
            font-size: 24px;
            margin-left: 10px;
        }

        .profile-stats h4 {
            font-family: 'Teko', sans-serif;
            font-size: 22px;
            border-bottom: 1px solid #554e48;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

        .profile-stats p {
            margin: 5px 0;
        }

        .profile-stats span {
            font-weight: bold;
            color: #fff;
        }

        .profile-stats p img {
            height: 20px;
            margin-right: 5px;
            vertical-align: middle;
        }

        /* ================= Menu Secreto (Modal) ================= */
        #secretMenu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1010;
            transition: opacity 0.3s ease;
        }

        #secretMenu.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .modal-content {
            background-color: #2b2b2b;
            border: 2px solid #ffcc00;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            color: white;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .modal-content h2 {
            color: #ffcc00;
            text-shadow: 1px 1px 2px black;
            margin-top: 0;
        }

        .secret-options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .cheat-btn {
            background-color: #ffcc00;
            color: black;
            border: none;
            padding: 10px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.2s;
        }

        .cheat-btn:hover {
            background-color: #e6b800;
        }

        /* ================= Seção de Drops Recentes ================= */
        #recent-drops {
            width: 100%;
            padding: 15px;
            border-radius: 10px;
            border: 3px solid #a33528;
            background: linear-gradient(145deg, #3c352e, #2b2621);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
        }

        #recent-drops h2 {
            text-align: center;
            color: #ffcc00;
            text-shadow: 2px 2px 4px #000;
            margin-top: 0;
            font-size: 1.2rem;
        }

        #dropsList {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 250px;
            overflow-y: auto;
        }

        .drop-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid #444;
        }

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

        .drop-item img {
            width: 35px;
            height: 35px;
            object-fit: contain;
        }

        .drop-item span {
            font-size: 14px;
            color: #d1c9c1;
        }

        #clearHistoryBtn {
            display: block;
            width: 90%;
            margin: 10px auto;
            padding: 8px 15px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            border: 2px solid #a33528;
            border-radius: 5px;
            background-color: transparent;
            color: #a33528;
            transition: background-color 0.3s, color 0.3s;
        }

        #clearDropsBtn:hover {
            background-color: #a33528;
            color: #fff;
        }

        /* ================= Tela de Login ================= */
        #loginScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #2b2621;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1111111;
            transition: opacity 0.5s ease-out;
        }

        .login-box {
            display: flex;
            flex-direction: column;
            gap: 15px;
            align-items: center;
        }

        .login-title {
            font-size: 72px;
            color: #ffcc00;
            text-shadow: 3px 3px 10px #000;
            margin: 0 0 30px 0;
            text-transform: uppercase;
            font-weight: bold;
        }

        /* ================= Tela de Troca de Refinados ================= */
        #exchangeScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #2b2621;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            transition: opacity 0.5s ease-out;
        }

        .exchange-box {
            display: flex;
            flex-direction: column;
            gap: 15px;
            align-items: center;
            background-color: #1e1e1e;
            padding: 40px;
            border-radius: 10px;
            border: 2px solid #555;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

        .exchange-title {
            font-size: 48px;
            color: #ffcc00;
            text-shadow: 2px 2px 8px #000;
            margin: 0 0 20px 0;
            text-transform: uppercase;
        }

        .exchange-stats {
            text-align: center;
            font-size: 20px;
        }

        .exchange-stats p {
            margin: 5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .exchange-stats img {
            width: 24px;
            height: 24px;
        }

        .exchange-stats span {
            font-weight: bold;
            color: #fff;
        }

        .exchange-actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin: 20px 0;
        }

        .exchange-actions p {
            margin: 5px 0 0 0;
            color: #c9c0b8;
        }

        .exchange-action-btn {
            width: 250px;
            padding: 12px 25px;
            font-size: 1rem;
            font-weight: bold;
            color: white;
            background-color: #4b69ff;
            border: 2px solid #3a52c4;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
        }

        .exchange-action-btn:hover {
            background-color: #6a82ff;
            transform: translateY(-2px);
        }

        .custom-exchange-input {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
        }

        .custom-exchange-input input {
            padding: 8px;
            font-size: 16px;
            border: 2px solid #444;
            border-radius: 5px;
            background-color: #2b2621;
            color: #d1c9c1;
            width: 100px;
            text-align: center;
        }

        .custom-exchange-input button {
            padding: 8px 15px;
            font-size: 14px;
            font-weight: bold;
            color: white;
            background-color: #4b69ff;
            border: 2px solid #3a52c4;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .custom-exchange-input button:hover {
            background-color: #6a82ff;
        }

        #backToLoginBtn {
            margin-top: 20px;
            padding: 8px 15px;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid #a33528;
            border-radius: 5px;
            background-color: transparent;
            color: #a33528;
            transition: background-color 0.3s, color 0.3s;
        }

        #backToLoginBtn:hover {
            background-color: #a33528;
            color: #fff;
        }

        /* ================= Tela da Loja de Jogos Steam ================= */
        #steamStoreScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #1b2838;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
            transition: opacity 0.5s ease-out;
        }

        .steam-store-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 90%;
            max-width: 1200px;
            height: 90%;
            background-color: #171a21;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
            overflow-y: auto;
        }

        .steam-store-title {
            font-size: 42px;
            color: #66c0f4;
            text-shadow: 1px 1px 2px #000;
            margin: 0 0 10px 0;
        }

        .store-stats {
            font-size: 22px;
            color: #c7d5e0;
            margin-bottom: 20px;
        }

        .store-stats span {
            font-weight: bold;
            color: #fff;
        }

        .steam-games-grid {
            width: 100%;
            flex-grow: 1;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            overflow-y: auto;
            padding: 15px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        .game-item {
            background-color: #2a475e;
            border-radius: 4px;
            padding: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
        }

        .game-item img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            margin-bottom: 8px;
            border-radius: 3px;
        }

        .game-item .game-name {
            font-size: 14px;
            font-weight: bold;
            color: #c7d5e0;
            margin: 0 0 5px 0;
            flex-grow: 1;
        }

        .game-item .game-price {
            font-size: 16px;
            color: #a1dd48;
            margin: 0 0 8px 0;
        }

        .buy-game-btn {
            width: 100%;
            padding: 8px;
            font-size: 0.9rem;
            font-weight: bold;
            color: white;
            background: linear-gradient(to right, #75b022, #588a1b);
            border: none;
            border-radius: 2px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .buy-game-btn:hover {
            background: linear-gradient(to right, #89c92a, #6aa420);
        }

        .buy-game-btn:disabled {
            background: #333;
            color: #888;
            cursor: not-allowed;
        }

        #backToLoginFromStoreBtn {
            margin-top: 20px;
            padding: 10px 25px;
            background-color: #66c0f4;
            color: #171a21;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            font-weight: bold;
        }

        /* ================= Tela de Modo Duelo ================= */
        #duelScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #2b2621;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            transition: opacity 0.5s ease-out;
            padding: 20px;
        }

        .duel-box {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
            background-color: #1e1e1e;
            padding: 25px;
            border-radius: 10px;
            border: 3px solid #a33528;
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
            width: 95%;
            max-width: 1400px;
            height: 90vh;
            color: #d1c9c1;
        }

        .duel-title {
            font-size: 48px;
            color: #ffcc00;
            text-shadow: 2px 2px 8px #000;
            margin: 0;
        }

        #duelSetup {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .duel-input-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
        }

        #duelCratesInput {
            padding: 8px;
            font-size: 16px;
            width: 80px;
            text-align: center;
            background-color: #2b2621;
            color: #d1c9c1;
            border: 2px solid #444;
            border-radius: 5px;
        }

        #startDuelBtn {
            padding: 10px 20px;
            font-size: 1rem;
            font-weight: bold;
            color: white;
            background-color: #d10000;
            border: 2px solid #a30000;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #startDuelBtn:hover {
            background-color: #ff0000;
        }

        #duelInProgress {
            width: 100%;
            flex-grow: 1; /* Faz esta área ocupar o espaço disponível */
            overflow: hidden; /* Evita que o conteúdo vaze */
        }

        .duel-container {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            width: 100%;
            height: 100%;
        }

        .duel-side {
            background-color: rgba(0, 0, 0, 0.3);
            border: 2px solid #555;
            border-radius: 8px;
            width: 48%;
            height: 100%;
            padding: 15px;
            display: flex;
            flex-direction: column;
        }

        .duel-side h2 {
            text-align: center;
            margin-top: 0;
            color: #ffcc00;
            border-bottom: 2px solid #a33528;
            padding-bottom: 10px;
        }

        .duel-total-value {
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
            padding: 5px;
            background-color: #111;
            border-radius: 5px;
        }

        .duel-items-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 10px;
            overflow-y: auto; /* Permite rolagem se houver muitos itens */
            flex-grow: 1;
            padding: 10px;
            background: #2b2621;
            border-radius: 5px;
        }

        .duel-item {
            width: 100%;
            aspect-ratio: 1 / 1;
            background-color: #3c352e;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            box-shadow: inset 0 0 6px #000;
        }

        .duel-item img {
            max-width: 80%;
            max-height: 80%;
        }

        .duel-item.winner-item {
            border-color: #ffcc00; /* Borda dourada para o vencedor */
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 5px #ffcc00; }
            50% { box-shadow: 0 0 15px #ffcc00; }
            100% { box-shadow: 0 0 5px #ffcc00; }
        }


        #duelResultScreen {
            background: rgba(0, 0, 0, 0.8);
            position: absolute;
            padding: 40px;
            border-radius: 10px;
            border: 2px solid #ffcc00;
            text-align: center;
            z-index: 10;
        }

        #duelResultScreen.winner {
            border-color: #28a745; /* Verde para vitória */
        }
        #duelResultScreen.loser {
            border-color: #dc3545; /* Vermelho para derrota */
        }

        #duelResultTitle {
            font-size: 3rem;
            margin: 0 0 15px 0;
        }
        #duelResultScreen.winner #duelResultTitle {
            color: #28a745;
        }
        #duelResultScreen.loser #duelResultTitle {
            color: #dc3545;
        }

        #backToLoginFromDuelBtn {
            margin-top: auto; /* Empurra para baixo */
            padding: 8px 15px;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid #a33528;
            border-radius: 5px;
            background-color: transparent;
            color: #a33528;
            transition: background-color 0.3s, color 0.3s;
        }

        #backToLoginFromDuelBtn:hover {
            background-color: #a33528;
            color: #fff;
        }


        /* ================= Outros Elementos ================= */
        .download-container {
            top: 10%;
            margin-top: 30px;
            padding-bottom: 30px;
            text-align: center;
        }

        .download-container a {
            color: #ffcc00;
            font-size: 18px;
            font-weight: bold;
            text-decoration: none;
            border: 2px solid #ffcc00;
            padding: 10px 20px;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
        }

        .download-container a:hover {
            background-color: #ffcc00;
            color: #111;
        }

        #resetBtn {
            margin: 25px 0 30px;
            padding: 8px 15px;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid #a33528;
            border-radius: 5px;
            background-color: transparent;
            color: #a33528;
            transition: background-color 0.3s, color 0.3s;
        }

        #resetBtn:hover {
            background-color: #a33528;
            color: #fff;
        }

        #alertBox {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #3c352e;
            color: #ffcc00;
            padding: 15px 25px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0 0 15px #000;
            border: 2px solid #a33528;
            z-index: 1010;
            max-width: 280px;
            text-align: center;
            opacity: 0;
            transform: translateX(120%);
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        #alertBox.show {
            opacity: 1;
            transform: translateX(0);
        }

        #tooltip {
            position: fixed;
            background-color: #2a2622;
            border: 2px solid #1e1b18;
            padding: 10px;
            max-width: 300px;
            z-index: 1011;
            pointer-events: none;
            transition: opacity 0.1s;
            font-size: 14px;
        }

        #tooltip h5 {
            font-family: 'Teko', sans-serif;
            font-size: 20px;
            margin: 0 0 5px 0;
            padding-bottom: 5px;
            border-bottom: 1px solid #4a4139;
        }

        .tooltip-rarity {
            font-weight: bold;
            margin-bottom: 10px;
        }

        .tooltip-rarity-comum {
            color: #b0c3d9;
        }

        .tooltip-rarity-raro {
            color: #4b69ff;
        }

        .tooltip-rarity-ultrararo {
            color: #8847ff;
        }

        #tooltip p {
            margin: 0 0 10px 0;
            color: #b1a89b;
        }

        #tooltip .tooltip-value {
            color: #ffd700;
            font-weight: bold;
        }

        /* ================= Tela de Configuração de Som ================= */
        #soundConfigModal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(43, 38, 33, 0.95);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
        }

        #soundConfigModal.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .modal-content {
            background-color: #1e1e1e;
            padding: 15px;
            border-radius: 5px;
            border: 2px solid #222;
            width: 90%;
            max-width: 500px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            z-index: 10000;
        }

        .modal-content h2 {
            color: #ffcc00;
            text-shadow: 2px 2px 6px #000;
            margin: 0 0 10px 0;
            text-transform: uppercase;
        }

        #soundFeedback {
            font-size: 14px;
            color: #c9c0b8;
            margin-bottom: 10px;
        }

        .sound-config-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 10px;
            background-color: #2b2621;
            border-radius: 5px;
            border: 1px solid #444;
        }

        .sound-config-item label {
            font-size: 16px;
            color: #d1c9c1;
            margin-right: 10px;
        }

        .sound-config-item input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 200px;
            height: 8px;
            background: #444;
            outline: none;
            border-radius: 5px;
        }

        .sound-config-item input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            background: #ffcc00;
            cursor: pointer;
            border-radius: 50%;
            border: 2px solid #111;
        }

        .sound-config-item input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: #ffcc00;
            cursor: pointer;
            border-radius: 50%;
            border: 2px solid #111;
        }

        #closeSoundConfigBtn {
            padding: 8px 15px;
            font-size: 14px;
            font-weight: bold;
            color: white;
            background-color: #a33528;
            border: 2px solid #5b2621;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #closeSoundConfigBtn:hover {
            background-color: #c54c42;
        }
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #1a1a1a;
            color: #d1c9c1;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            overflow-x: hidden;
            background-image: url('background.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            position: relative;
        }

        body.no-scroll {
            overflow: hidden;
        }

        /* Efeito de sobreposição para escurecer o fundo */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: -1;
        }

        h1, h2, h3, h4, h5 {
            font-family: 'Teko', sans-serif;
            color: #ffcc00;
        }

        .hidden {
            display: none !important;
        }

        /* ================= Tela de Login ================= */
        #loginScreen, #missionsScreen, #exchangeScreen, #steamStoreScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(43, 38, 33, 0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            transition: opacity 0.5s ease-out;
            padding: 20px;
            text-align: center
        }

        .login-box, .exchange-box {
            display: flex
;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    background-color: #1e1e1e;
    padding: 25px;
    border-radius: 10px;
    border: 3px solid #a33528;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    width: 95%;
    max-width: 500px;
    min-height: 50px;
    color: #d1c9c1;
        }
        .profile-store-content{
            display: flex
;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    background-color: #1e1e1e;
    padding: 25px;
    border-radius: 10px;
    border: 3px solid #a33528;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    width: 95%;
    max-width: 100px;
    min-height: 50px;
    color: #d1c9c1;
        }
        .missions-box{
            display: flex
;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    align-items: center;
    background-color: #1e1e1e;
    padding: 25px;
    border-radius: 10px;
    border: 3px solid #a33528;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    width: 95%;
    max-width: 800px;
    min-height: 50px;
    color: #d1c9c1;
        }
.duel-box{
            display: flex
;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    align-items: center;
    background-color: #1e1e1e;
    padding: 25px;
    border-radius: 10px;
    border: 3px solid #a33528;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    width: 95%;
    max-width: 5000px;
    min-height: 50px;
    color: #d1c9c1;
        }
        .login-title, .duel-title, .missions-title, .exchange-title, .steam-store-title {
            font-size: 48px;
            color: #ffcc00;
            text-shadow: 2px 2px 8px #000;
            margin: 0;
        }

        #loginBtn, #duelModeBtn, #missionsBtn, #exchangeBtnStart, #buyGamesBtn {
            width: 80%;
            padding: 15px 10px;
            font-size: 1.2rem;
            font-weight: bold;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #loginBtn { background-color: #a33528; }
        #duelModeBtn { background-color: #2b2621; border: 2px solid #555; }
        #missionsBtn { background-color: #4b69ff; }
        #exchangeBtnStart { background-color: #6a8a61; }
        #buyGamesBtn { background-color: #1e1e1e; border: 2px solid #fff; }

        #loginBtn:hover { background-color: #c54c42; }
        #duelModeBtn:hover { background-color: #3c352e; }
        #missionsBtn:hover { background-color: #6a82ff; }
        #exchangeBtnStart:hover { background-color: #79a170; }
        #buyGamesBtn:hover { background-color: #3c352e; }

        #backToLoginBtn, #backToLoginFromStoreBtn {
            margin-top: auto;
            padding: 8px 15px;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid #a33528;
            border-radius: 5px;
            background-color: transparent;
            color: #a33528;
            transition: background-color 0.3s, color 0.3s;
        }

        #backToLoginBtn:hover, #backToLoginFromStoreBtn:hover {
            background-color: #a33528;
            color: #fff;
        }

        /* ================= Tela Principal do Jogo ================= */
        #gameContainer {
            width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            padding-top: 80px;
            box-sizing: border-box;
            position: relative;
        }

        #top-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 70px;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            box-sizing: border-box;
            border-bottom: 2px solid #a33528;
            z-index: 100;
        }

        #backToStartBtn {
            background: #a33528;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
        }

        #music-container {
            display: flex;
            align-items: center;
            gap: 10px;
            background-color: #2b2621;
            padding: 8px 12px;
            border-radius: 5px;
            border: 1px solid #444;
        }

        #music-container button {
            background: none;
            border: none;
            color: #d1c9c1;
            font-size: 1.2rem;
            cursor: pointer;
        }

        #volumeSlider {
            width: 80px;
            cursor: pointer;
        }

        #refinadoContainer {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 1.2rem;
            font-weight: bold;
            color: #ffcc00;
        }

        #refinadoContainer img {
            width: 30px;
            height: 30px;
        }

        #statsContainer {
            display: flex;
            gap: 20px;
        }

        #statsContainer span {
            font-size: 1rem;
            color: #d1c9c1;
        }

        #statsContainer b {
            font-weight: bold;
            color: #ffcc00;
        }

        #soundConfigBtn {
            padding: 8px 15px;
            font-size: 14px;
            font-weight: bold;
            color: white;
            background-color: #a33528;
            border: 2px solid #5b2621;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #soundConfigBtn:hover {
            background-color: #c54c42;
        }

        #main-content {
            display: flex;
            gap: 30px;
            padding: 30px;
            width: 100%;
            box-sizing: border-box;
            flex-grow: 1;
        }

        #left-column {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 60%;
            max-width: 1000px;
            align-items: center;
             min-height: 50px;
        }

        #videoContainer {
            position: relative;
                    width: 70%;
                    aspect-ratio: 16 / 9;
                    background-color: #1e1e1e;
                    border: 2px solid #a33528;
                    border-radius: 8px;
                    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;
            
        }

        #boxVideo {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        #rewardScreen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            gap: 15px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease-in-out;
        }
        
        #rewardScreen.visible {
            opacity: 1;
            pointer-events: auto;
        }

        #itemName {
            font-size: 2.5rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px #000;
            text-transform: uppercase;
        }

        #itemImg {
            max-width: 80%;
            max-height: 50%;
            object-fit: contain;
        }

        #itemActions {
            display: flex;
            gap: 10px;
        }

        #itemActions button {
            padding: 10px 20px;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            color: white;
            transition: background-color 0.3s;
        }

        #sellBtn { background-color: #a33528; }
        #storeBtn { background-color: #4b69ff; }
        #discardBtn { background-color: #6a8a61; }

        #sellBtn:hover { background-color: #c54c42; }
        #storeBtn:hover { background-color: #6a82ff; }
        #discardBtn:hover { background-color: #79a170; }

        .main-actions {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            width: 100%;
        }

        .main-actions button {
            padding: 15px 30px;
            font-size: 1.1rem;
            font-weight: bold;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #openBtn { background-color: #a33528; }
        #openBackpackBtn { background-color: #2b2621; border: 2px solid #555; }
        #achievementsBtn { background-color: #4b69ff; }
        #profileBtn { background-color: #6a8a61; }
        #profileStoreBtn { background: linear-gradient(#4b69ff, #3a52c4); color: #fff; }

        #openBtn:hover { background-color: #c54c42; }
        #openBackpackBtn:hover { background-color: #3c352e; }
        #achievementsBtn:hover { background-color: #6a82ff; }
        #profileBtn:hover { background-color: #79a170; }
        #profileStoreBtn:hover { background: linear-gradient(#6a82ff, #4b69ff); }

        #right-column {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 30%;
            max-width: 400px;
        }

        #recent-drops, #shop, #sellArea {
            background-color: rgba(0, 0, 0, 0.5);
            border: 2px solid #555;
            border-radius: 8px;
            padding: 15px;
        }

        #recent-drops h2, #shop h2, #sellArea h2 {
            margin: 0 0 10px 0;
            text-align: center;
            border-bottom: 2px solid #a33528;
            padding-bottom: 5px;
        }

        #recent-drops button {
            background: #a33528;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            font-size: 0.8rem;
            cursor: pointer;
            display: block;
            margin: 0 auto 10px;
        }

        #dropsList {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 250px;
            overflow-y: auto;
        }

        #dropsList li {
            padding: 5px;
            border-bottom: 1px solid #444;
        }

        .drop-common { color: #b0c4de; }
        .drop-rare { color: #4b69ff; }
        .drop-ultrarare { color: #8847ff; }
        .drop-golden { color: #ffd700; }
        
        #shop .shopItem {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-bottom: 15px;
            background-color: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #444;
        }

        .shopItem img {
            width: 80px;
            height: 80px;
            margin-bottom: 5px;
        }

        .shopItem span {
            font-weight: bold;
            color: #ffcc00;
            margin-bottom: 5px;
        }

        .shopItem button {
            padding: 8px 15px;
            font-size: 0.9rem;
            font-weight: bold;
            color: white;
            background-color: #6a8a61;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .shopItem button:hover { background-color: #79a170; }

        #sellArea {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        #sellArea .sell-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.3);
            padding: 5px 10px;
            border-radius: 5px;
            border: 1px solid #444;
        }

        .sell-item span {
            font-size: 0.9rem;
            color: #d1c9c1;
        }

        .sell-item button {
            padding: 5px 10px;
            background-color: #a33528;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        /* ================= Modais ================= */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content, .achievements-content, .profile-content {
            background-color: #3c352e;
            padding: 20px;
            border-radius: 10px;
            border: 2px solid #a33528;
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }
.backpack-content{
            background-color: #3c352e;
            padding: 20px;
            border-radius: 10px;
            border: 2px solid #a33528;
            width: 90%;
            max-width: 950px;
            max-height: 650px;
            overflow-y: auto;
            position: relative;
        }

        .backpack-title-bar, .achievements-title-bar, .profile-title-bar, .profile-store-title-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            border-bottom: 2px solid #a33528;
            padding-bottom: 5px;
        }

        .backpack-title-bar h3, .achievements-title-bar h3, .profile-title-bar h3, .profile-store-title-bar h3 {
            margin: 0;
            color: #ffcc00;
        }

        #closeBackpackBtn, #closeAchievementsBtn, #closeProfileBtn, #closeProfileStoreBtn {
            background: #a33528;
            border: 1px solid #222;
            color: #fff;
            font-weight: bold;
            width: 25px;
            height: 25px;
            cursor: pointer;
            border-radius: 3px;
        }
#closeSoundConfigBtn {
    /* Adicione estas propriedades para um visual mais robusto */
    padding: 8px 15px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background-color: #a33528; /* Cor de fundo que combina com o tema */
    border: 2px solid #5b2621; /* Borda mais escura para dar profundidade */
    border-radius: 5px; /* Bordas levemente arredondadas */
    cursor: pointer; /* Mãozinha para indicar que é clicável */
    transition: background-color 0.3s; /* Animação suave ao passar o mouse */
}

#closeSoundConfigBtn:hover {
    background-color: #c54c42; /* Cor mais clara para o efeito de hover */
}
        #backpackGrid, #achievementsList {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 10px;
        }

        .backpack-item, .achievement-item {
            background-color: #2b2621;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            cursor: pointer;
            box-shadow: inset 0 0 6px #000;
        }

        .backpack-item img {
            max-width: 80%;
            max-height: 80%;
        }

        .achievement-item.locked {
            filter: grayscale(100%);
            opacity: 0.7;
        }

        .achievement-item.locked h4 {
            color: #888;
        }

        /* ================= Tela de Perfil ================= */
        .profile-details {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
        }

        .profile-name-section, .profile-title-section {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.2rem;
            color: #ffcc00;
        }

        #playerNameInput {
            background-color: #2b2621;
            border: 1px solid #444;
            color: #d1c9c1;
            padding: 5px 10px;
            border-radius: 5px;
            width: 200px;
        }

        .profile-stats {
            margin-top: 10px;
        }

        .profile-stats h4 {
            margin-top: 0;
            color: #d1c9c1;
            border-bottom: 1px solid #555;
            padding-bottom: 5px;
        }

        .profile-stats p {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 8px 0;
            font-size: 1rem;
        }

        .profile-stats img {
            width: 20px;
            height: 20px;
        }

        /* ================= Tela de Troca ================= */
        .exchange-stats {
            text-align: center;
            font-size: 1.2rem;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .exchange-stats img {
            width: 25px;
            height: 25px;
            vertical-align: middle;
        }
        .exchange-actions {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 15px;
            align-items: center;
        }
        .exchange-action-btn {
            width: 80%;
            padding: 10px;
            font-weight: bold;
            border-radius: 5px;
            border: none;
            background-color: #6a8a61;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .exchange-action-btn:hover { background-color: #79a170; }
        .custom-exchange-input {
            display: flex;
            gap: 10px;
            width: 80%;
        }
        #customExchangeInput {
            flex-grow: 1;
            padding: 8px;
            font-size: 16px;
            background-color: #2b2621;
            color: #d1c9c1;
            border: 2px solid #444;
            border-radius: 5px;
        }
        #customExchangeBtn {
            padding: 8px 15px;
            background-color: #6a8a61;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #customExchangeBtn:hover { background-color: #79a170; }

        /* ================= Tela da Loja Steam ================= */
        .steam-games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 20px;
            width: 100%;
            max-height: 60vh;
            overflow-y: auto;
            padding: 10px;
            border: 2px solid #444;
            border-radius: 8px;
        }
        .steam-game-item {
            background-color: #2b2621;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: inset 0 0 6px #000;
        }
        .steam-game-item img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 5px;
        }
        .steam-game-item h4 {
            margin: 10px 0 5px 0;
            color: #d1c9c1;
        }
        .steam-game-item p {
            margin: 0;
            font-weight: bold;
            color: #ffcc00;
        }
        .steam-game-item button {
            margin-top: auto;
            padding: 8px 15px;
            font-weight: bold;
            background-color: #4b69ff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .steam-game-item button:hover { background-color: #6a82ff; }
        .steam-game-item button:disabled { background-color: #555; cursor: not-allowed; }

        /* ================= Tela de Duelo ================= */
        #duelSetup {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        #duelCratesInput {
            padding: 8px;
            font-size: 16px;
            width: 80px;
            text-align: center;
            background-color: #2b2621;
            color: #d1c9c1;
            border: 2px solid #444;
            border-radius: 5px;
        }

        #startDuelBtn {
            padding: 10px 20px;
            font-size: 1rem;
            font-weight: bold;
            color: white;
            background-color: #d10000;
            border: 2px solid #a30000;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #startDuelBtn:hover {
            background-color: #ff0000;
        }

        #duelInProgress {
            width: 100%;
            flex-grow: 1;
            overflow: hidden;
        }

        .duel-container {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            width: 100%;
            height: 100%;
        }

        .duel-side {
            background-color: rgba(0, 0, 0, 0.3);
            border: 2px solid #555;
            border-radius: 8px;
            width: 48%;
            height: 100%;
            padding: 15px;
            display: flex;
            flex-direction: column;
        }

        .duel-side h2 {
            text-align: center;
            margin-top: 0;
            color: #ffcc00;
            border-bottom: 2px solid #a33528;
            padding-bottom: 10px;
        }

        .duel-total-value {
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
            padding: 5px;
            background-color: #111;
            border-radius: 5px;
        }

        .duel-items-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 10px;
            overflow-y: auto;
            flex-grow: 1;
            padding: 10px;
            background: #2b2621;
            border-radius: 5px;
        }

        .duel-item {
            width: 100%;
            aspect-ratio: 1 / 1;
            background-color: #3c352e;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            box-shadow: inset 0 0 6px #000;
        }

        .duel-item img {
            max-width: 80%;
            max-height: 80%;
        }

        .duel-item.winner-item {
            border-color: #ffcc00;
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 5px #ffcc00; }
            50% { box-shadow: 0 0 15px #ffcc00; }
            100% { box-shadow: 0 0 5px #ffcc00; }
        }

        #duelResultScreen {
            background: rgba(0, 0, 0, 0.8);
            position: absolute;
            padding: 40px;
            border-radius: 10px;
            border: 2px solid #ffcc00;
            text-align: center;
            z-index: 10;
        }

        #duelResultScreen.winner {
            border-color: #28a745;
        }
        #duelResultScreen.loser {
            border-color: #dc3545;
        }

        #duelResultTitle {
            font-size: 3rem;
            margin: 0 0 15px 0;
        }
        #duelResultScreen.winner #duelResultTitle {
            color: #28a745;
        }
        #duelResultScreen.loser #duelResultTitle {
            color: #dc3545;
        }

        #playAgainDuelBtn, #backToLoginFromDuelBtn {
            margin-top: 15px;
            padding: 10px 20px;
            font-size: 1rem;
            font-weight: bold;
            color: white;
            background-color: #a33528;
            border: 2px solid #5b2621;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #playAgainDuelBtn:hover, #backToLoginFromDuelBtn:hover {
            background-color: #c54c42;
        }

        /* ================= Tela de Missões ================= */
        #missionsList {
            width: 100%;
            flex-grow: 1;
            overflow-y: auto;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .mission {
            background-color: #2b2621;
            border: 1px solid #444;
            border-left: 5px solid #555;
            border-radius: 8px;
            padding: 15px;
            box-shadow: inset 0 0 8px #000;
        }
        
        .mission.completed {
            border-left-color: #ffcc00;
        }

        .mission h4 {
            color: #ffcc00;
            margin: 0 0 5px 0;
        }

        .mission p {
            margin: 5px 0;
            color: #c9c0b8;
        }
        
        .mission button {
            margin-top: 10px;
            padding: 8px 15px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 5px;
            border: none;
            background-color: #4b69ff;
            color: white;
            transition: background-color 0.3s;
        }
        
        .mission button:hover {
            background-color: #6a82ff;
        }
        
        .mission.claimed button {
            background-color: #555;
            cursor: not-allowed;
        }

        #backToLoginFromMissionsBtn {
            margin-top: auto;
            padding: 8px 15px;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid #a33528;
            border-radius: 5px;
            background-color: transparent;
            color: #a33528;
            transition: background-color 0.3s, color 0.3s;
        }

        #backToLoginFromMissionsBtn:hover {
            background-color: #a33528;
            color: #fff;
        }

        /* ================= Botão de Pular Duelo ================= */
        #skipDuelBtn {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 11;
            padding: 10px 20px;
            font-size: 1rem;
            font-weight: bold;
            color: #111;
            background-color: #ffcc00;
            border: 2px solid #e6b800;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            transition: background-color 0.3s, transform 0.2s;
        }

        #skipDuelBtn:hover {
            background-color: #fff;
            transform: translateX(-50%) scale(1.05);
        }

        #skipDuelBtn.hidden {
            display: none !important;
        }

        /* ================= Outros Elementos ================= */
        .download-container {
            margin-top: 30px;
            padding-bottom: 30px;
            text-align: center;
        }

        .download-container a {
            color: #ffcc00;
            font-size: 18px;
            font-weight: bold;
            text-decoration: none;
            border: 2px solid #ffcc00;
            padding: 10px 20px;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
        }

        .download-container a:hover {
            background-color: #ffcc00;
            color: #111;
        }

        #resetBtn {
            margin: 5px 0 5px;
            padding: 8px 15px;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid #a33528;
            border-radius: 5px;
            background-color: transparent;
            color: #a33528;
            transition: background-color 0.3s, color 0.3s;
        }

        #resetBtn:hover {
            background-color: #a33528;
            color: #fff;
        }

        #alertBox {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #3c352e;
            color: #ffcc00;
            padding: 15px 25px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0 0 15px #000;
            border: 2px solid #a33528;
            z-index: 1010;
            max-width: 280px;
            text-align: center;
            opacity: 0;
            transform: translateX(120%);
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        #alertBox.show {
            opacity: 1;
            transform: translateX(0);
        }

        /* ================= Configuração de Som & Tooltip ================= */
        #tooltip {
            position: fixed;
            background-color: #2a2622;
            padding: 10px;
            max-width: 300px;
            z-index: 1011;
            pointer-events: none;
            transition: opacity 0.1s;
            font-size: 14px;
        }

        #tooltip h5 {
            font-family: 'Teko', sans-serif;
            font-size: 20px;
            margin: 0 0 5px 0;
            padding-bottom: 5px;
            border-bottom: 1px solid #4a4139;
        }

        .tooltip-rarity {
            font-weight: bold;
            margin-bottom: 10px;
        }

        #tooltip p {
            margin: 0 0 10px 0;
            color: #b1a89b;
        }

        #tooltip .tooltip-value {
            color: #ffd700;
            font-weight: bold;
        }

        #soundConfigModal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(43, 38, 33, 0.95);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
        }

        #soundConfigModal.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .sound-config-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 10px;
            background-color: #2b2621;
            border-radius: 5px;
            border: 1px solid #444;
        }

        .sound-config-item label {
            font-size: 16px;
            color: #d1c9c1;
            margin-right: 10px;
        }

        .sound-config-item input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 200px;
            height: 8px;
            background: #444;
            outline: none;
            border-radius: 5px;
        }

        .sound-config-item input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            background: #ffcc00;
            cursor: pointer;
            border-radius: 50%;
            border: 2px solid #111;
        }

        #closeSoundConfigBtn {
            padding: 8px 15px;
            font-size: 14px;
            font-weight: bold;
            color: white;
            background-color: #a33528;
            border: 2px solid #5b2621;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #closeSoundConfigBtn:hover {
            background-color: #c54c42;
        }
        
        /* ================= LOJA DE CUSTOMIZAÇÃO DE PERFIL ================= */
        .profile-store-content {
            background-color: #3c352e;
            padding: 10px;
            border-radius: 5px;
            border: 2px solid #222;
            width: 100%;
            max-width: 750px;
            max-height: 75vh;
            overflow-y: auto;
        }

        .profile-store-title-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            color: #ffcc00;
            border-bottom: 2px solid #a33528;
            padding-bottom: 5px;
        }

        #closeProfileStoreBtn {
            background: #a33528;
            border: 1px solid #222;
            color: #fff;
            font-weight: bold;
            width: 25px;
            height: 25px;
            cursor: pointer;
            border-radius: 3px;
        }

        .profile-store-section h4 {
            color: #ffcc00;
            margin-bottom: 10px;
        }

        .store-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
        }

        .store-item {
            background-color: #2b2621;
            border: 1px solid #444;
            border-radius: 5px;
            padding: 10px;
            text-align: center;
        }
        
        .store-item img {
            width: 80px;
            height: 80px;
            object-fit: contain;
            margin-bottom: 5px;
        }

        .store-item p {
            margin: 0;
            font-weight: bold;
        }

        .store-item button {
            margin-top: 10px;
            padding: 5px 10px;
            width: 100%;
            cursor: pointer;
            background-color: #6a8a61;
            color: white;
            border: none;
            border-radius: 3px;
        }

        .store-item button:disabled {
            background-color: #555;
            cursor: not-allowed;
        }

        .profile-avatar-container {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto 15px;
        }

        #profileAvatar { 
            width: 150%;
            height: 130%;
            object-fit: cover;
            border: 5px black solid transparent; 
            border-radius: 5px; 
            transition: border-color 0.3s; 
        }

        #profileAvatar.border-rare { border-color: #4b69ff; }
        #profileAvatar.border-ultrarare { border-color: #8847ff; }
        #profileAvatar.border-golden { border-color: #ffd700; }
        /* ================= ESTILOS CORRIGIDOS PARA BORDAS DE PERFIL ================= */

/* O invólucro da borda */
#profileAvatar {
    padding: 5px; /* Espaçamento interno para a borda aparecer */
    border: 5px solid transparent; /* Começa transparente */
    border-radius: 5px; /* Arredonda junto com o conteúdo */
    transition: border-color 0.3s ease-in-out;
}

/* Regra para a borda de Aço */
#profileAvatar.border-steel {
    border-color: #aab5c2;
    box-shadow: 0 0 15px #c0c0c0;
}

/* Regra para a borda Dourada */
#profileAvatar.border-golden {
    border-color: #ffd700;
    box-shadow: 0 0 20px #ffec8b;
}

/* Remove a borda original do conteúdo interno para não haver conflito */
#profileAvatar .profile-content {
    border: none;
    padding: 0; /* Remove padding duplicado */
}

/* =================================================================== */
/* ============= ESTILOS RESPONSIVOS PARA CELULAR ==================== */
/* =================================================================== */

@media (max-width: 900px) {

    /* --- AJUSTES GERAIS DE LAYOUT --- */
    #main-content {
            flex-direction: column; /* Coloca as colunas uma sobre a outra */
            padding: 20px;
            padding-top: 80px; /* Espaço para a barra superior */
            gap: 20px;
    }

    #left-column {
        width: 100%;
        max-width: 100%;
        margin-top: 0px;
    }

    #right-column {
        display: flex;
                width: 100%;
        max-width: 100%;    /* Garante que a coluna da loja/venda seja exibida */
    }
    
    #gameContainer {
        padding-top: 0; /* A main-content já tem padding */
    }


    /* --- BARRA SUPERIOR (TOP-BAR) --- */
    #top-bar {
        flex-wrap: nowrap; /* Impede a quebra de linha */
        justify-content: space-between;
        height: 70px;
        padding: 0 10px;
    }
    
    /* Esconde elementos para limpar a interface */
    #top-bar #music-container,
    #top-bar #statsContainer,
    #top-bar #soundConfigBtn {
        display: none;
    }


    /* --- ELEMENTOS ESCONDIDOS --- */
    .download-container, #resetBtn {
        display: none; /* Remove o texto de download e o botão de reset */
    }


    /* --- VÍDEO E RECOMPENSA --- */
    #videoContainer {
        width: 100%; /* Ocupa a largura total da coluna */
        margin-top: 0;
    }
    
    #rewardScreen {
        justify-content: center; /* Garante centralização vertical */
        gap: 10px;
        padding: 10px;
    }
    
    #itemName {
        font-size: 1.5rem; /* Diminui o texto do item para caber */
    }
    
    #itemImg {
        max-height: 40%; /* Reduz a altura máxima da imagem */
        max-width: 70%;
    }

    /* Garante que os botões de ação da recompensa apareçam e se ajustem */
    #itemActions {
        display: flex;
        flex-direction: row; 
        flex-wrap: wrap; 
        gap: 10px;
        margin-top: 10px;
    }
    
    #itemActions button {
        padding: 10px 15px;
        font-size: 0.9rem;
        flex-grow: 1; /* Faz os botões crescerem para ocupar o espaço */
    }


    /* --- MENU HAMBÚRGUER E PAINEL LATERAL --- */
    .hamburger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 35px;
        height: 30px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1002;
    }

    .hamburger-menu span {
        width: 100%;
        height: 4px;
        background-color: #d1c9c1;
        border-radius: 2px;
    }

    /* Esconde os botões originais que agora estarão no menu */
    .main-actions #openBackpackBtn,
    .main-actions #achievementsBtn,
    .main-actions #profileBtn,
    .main-actions #profileStoreBtn {
        display: none;
        padding: 0%;
    }
.main-actions{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            width: 100%;
        }
    /* Estiliza o painel lateral que desliza */
    .side-nav-panel {
        display: flex;
        flex-direction: column;
        gap: 15px;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        max-width: 80vw; /* Garante que não ocupe a tela toda em celulares muito estreitos */
        height: 100%;
        background-color: #1e1e1e;
        border-left: 3px solid #a33528;
        z-index: 1001;
        padding: 60px 20px 20px;
        transform: translateX(100%); /* Começa fora da tela */
        transition: transform 0.3s ease-in-out;
        box-shadow: -5px 0 25px rgba(0,0,0,0.5);
    }

    /* Classe que o JavaScript adiciona para mostrar o painel */
    .side-nav-panel.is-open {
        transform: translateX(0); /* Desliza para dentro da tela */
    }
    
    /* Estilo dos botões DENTRO do painel */
    .side-nav-panel .nav-button {
        display: block;
        width: 100%;
        padding: 15px;
        font-size: 1.1rem;
        font-weight: bold;
        color: #d1c9c1;
        background-color: #2b2621;
        border: 2px solid #555;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
    }

    /* Estilo do botão de fechar (X) */
    .close-nav-btn {
        position: absolute;
        top: 10px;
        right: 20px;
        background: none;
        border: none;
        color: #ffcc00;
        font-size: 2.5rem;
        font-weight: bold;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        z-index: 1002;
    }
    
    /* Outros ajustes finos para telas muito pequenas */
    @media (max-width: 380px) {
        .login-title, .duel-title, .missions-title, .exchange-title {
            font-size: 1.8rem;
        }
        
        #refinadoContainer {
            font-size: 1.1rem;
        }

        #refinadoContainer img {
            width: 30px;
            height: 30px;
        }
    }
}   
/* ================= Reset Básico e Estilos Gerais ================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    background-color: #2b2621;
    color: #d1c9c1;
    display: flex;
    flex-direction: column;
}

h1 {
    margin-top: 20px;
    color: #ffcc00;
    text-shadow: 2px 2px 6px #000;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ================= Utilitários ================= */
.hidden {
    display: none !important;
}

.no-scroll {
    overflow: hidden;
}

/* ================= Barra Superior Fixa (Top-Bar) ================= */
#top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    background-color: #1e1e1e;
    border-bottom: 2px solid #555;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

#top-bar > div {
    margin: 0 15px;
}

#backToStartBtn {
    padding: 8px 15px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background-color: #8b3a32;
    border: 2px solid #5b2621;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#backToStartBtn:hover {
    background-color: #a34840;
}

#refinadoContainer {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: bold;
}

#refinadoContainer img {
    width: 60px;
    height: 60px;
}

#statsContainer {
    display: flex;
    gap: 30px;
    font-size: 16px;
    color: #c9c0b8;
}

#statsContainer b {
    color: #ffcc00;
    font-size: 18px;
}

#music-container {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px;
    border-radius: 25px;
    border: 1px solid #a33528;
}

#volumeBtn,
#prevBtn,
#nextBtn {
    background: transparent;
    border: none;
    color: #ffcc00;
    width: 30px;
    height: 30px;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s;
}

#volumeBtn:hover,
#prevBtn:hover,
#nextBtn:hover {
    transform: scale(1.1);
}

#volumeSlider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 8px;
    background: #444;
    outline: none;
    border-radius: 5px;
}

#volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #ffcc00;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #111;
}

#volumeSlider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #ffcc00;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #111;
}

/* ================= Containers da Tela de Jogo ================= */
#gameContainer {
    width: 100%;
    padding-top: 70px; /* Ajuste para a altura da top-bar */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
}

#main-content {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    max-width: 1600px;
    padding: 20px;
}

#left-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 2; /* Mais espaço para a coluna principal */
}

#right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1; /* Menos espaço para a coluna lateral */
    max-width: 400px;
}

/* ================= Vídeo e Recompensa ================= */
#videoContainer {
    position: relative;
    width: 100%;
    max-width: 800px; /* Limite de largura para o vídeo */
    aspect-ratio: 16 / 9;
    background-color: #000;
    border: 3px solid #a33528;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 20px #000;
    overflow: hidden;
    z-index: 10;
}

video#boxVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

#rewardScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    z-index: 12;
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0,0,0,0.7);
}

#rewardScreen.visible {
    opacity: 1;
    pointer-events: all;
}

img#itemImg {
    max-width: 50%;
    max-height: 50%;
    filter: drop-shadow(0 0 15px rgba(255, 220, 150, 0.5));
}

#itemName {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    text-shadow: 3px 3px 6px #000;
    color: #ffcc00;
    padding: 0 10px;
}

#itemActions,
.main-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
    width: 100%;
}

/* ================= Botões Gerais ================= */
.main-actions button, 
#itemActions button,
#loginScreen button,
#exchangeScreen button,
.cheat-btn {
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    border: 2px solid #222;
    color: #2b2621;
    background: linear-gradient(#d1c9c1, #9a8a7c);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    transition: all 0.2s;
    text-transform: uppercase;
}

.main-actions button:hover, 
#itemActions button:hover,
#loginScreen button:hover,
#exchangeScreen button:hover,
.cheat-btn:hover {
    background: linear-gradient(#ffcc00, #ffaa00);
    transform: scale(1.05);
}

#achievementsBtn {
    background: linear-gradient(#6a8a61, #4f6b46);
    color: #fff;
}
#achievementsBtn:hover {
    background: linear-gradient(#82a878, #6a8a61);
}

#profileBtn {
    background-color: #a57436;
    color: #eae2d6;
}
#profileBtn:hover {
    background-color: #b88f5a;
}

/* ... (Estilos específicos de botões de outras telas) ... */

/* ================= Loja e Venda ================= */
#recent-drops, #shop, #sellArea {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    border: 3px solid #a33528;
    background: linear-gradient(145deg, #3c352e, #2b2621);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}

#recent-drops h2, #shop h2, #sellArea h2 {
    text-align: center;
    color: #ffcc00;
    text-shadow: 2px 2px 4px #000;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.shopItem, .sellItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    background-color: rgba(0,0,0,0.3);
    border: 1px solid #444;
}

.shopItem img, .sellItem img {
    width: 60px;
    height: 60px;
    margin-right: 15px;
}

.shopItem span, .sellItem span {
    flex: 1;
    font-size: 1rem;
}

.shopItem button, .sellItem button {
    padding: 8px 15px;
    font-size: 0.9rem;
}

/* ================= Modais ================= */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 15px;
}

.modal-content, .achievements-content, .profile-content, .backpack-content, .shop-sell-content {
    background-color: #3c352e;
    padding: 20px;
    border-radius: 10px;
    border: 3px solid #a33528;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
}

.backpack-title-bar, .achievements-title-bar, .profile-title-bar, .profile-store-title-bar, .shop-sell-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #a33528;
    padding-bottom: 10px;
}

.backpack-title-bar h3, .achievements-title-bar h3, .profile-title-bar h3, .profile-store-title-bar h3, .shop-sell-title-bar h3 {
    margin: 0;
    color: #ffcc00;
    font-size: 1.8rem;
}

#closeBackpackBtn, #closeAchievementsBtn, #closeProfileBtn, #closeProfileStoreBtn, #closeShopSellBtn {
    background: #a33528;
    border: 1px solid #222;
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
    width: 35px;
    height: 35px;
    cursor: pointer;
    border-radius: 5px;
    line-height: 35px;
    text-align: center;
}

#right-column-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* =================================================================== */
/* ============= ESTILOS RESPONSIVOS PARA CELULAR ==================== */
/* =================================================================== */

@media (max-width: 900px) {

    /* --- AJUSTES GERAIS DE LAYOUT --- */
    #main-content {
        flex-direction: column;
        padding: 15px;
        padding-top: 85px; /* Mais espaço para a barra superior fixa */
    }
    
    #left-column {
        width: 100%;
        justify-content: center; /* Centraliza o conteúdo verticalmente */
        align-items: center;     /* Centraliza o conteúdo horizontalmente */
        flex-grow: 1;            /* Permite que a coluna cresça para ocupar espaço */
        gap: 30px;               /* Aumenta o espaço entre o vídeo e o botão */
    }

    #right-column {
        display: none; /* Esconde a coluna da loja da tela principal */
    }
    
    #gameContainer {
        padding-top: 0;
    }

    /* --- BARRA SUPERIOR (TOP-BAR) --- */
    #top-bar {
        padding: 0 15px;
        height: 70px;
    }
    
    #top-bar #music-container,
    #top-bar #statsContainer,
    #top-bar #soundConfigBtn {
        display: none;
    }

    #refinadoContainer img {
        width: 35px;
        height: 35px;
    }

    /* --- ELEMENTOS ESCONDIDOS --- */
    .download-container, #resetBtn {
        display: none;
    }

    /* --- VÍDEO E AÇÕES --- */
    #videoContainer {
        width: 100%;
        max-width: 500px; /* Limita a largura máxima em telas de tablet */
        margin: 0;
    }
    
    .main-actions {
        width: 100%;
        max-width: 500px;
        margin: 0;
    }

    #openBtn {
        width: 100%; /* Faz o botão "Abrir Caixa" ocupar toda a largura disponível */
        padding: 20px;
        font-size: 1.2rem;
    }

    /* --- MENU HAMBÚRGUER E PAINEL LATERAL --- */
    .hamburger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 35px;
        height: 30px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1002;
    }

    .hamburger-menu span {
        width: 100%;
        height: 4px;
        background-color: #d1c9c1;
        border-radius: 2px;
    }

    .main-actions #openBackpackBtn,
    .main-actions #achievementsBtn,
    .main-actions #profileBtn,
    .main-actions #profileStoreBtn {
        display: none;
    }

    .side-nav-panel {
        display: flex;
        flex-direction: column;
        gap: 15px;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        max-width: 80vw;
        height: 100%;
        background-color: #1e1e1e;
        border-left: 3px solid #a33528;
        z-index: 2001;
        padding: 60px 20px 20px;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: -5px 0 25px rgba(0,0,0,0.5);
    }

    .side-nav-panel.is-open {
        transform: translateX(0);
    }
    
    .side-nav-panel .nav-button {
        display: block;
        width: 100%;
        padding: 15px;
        font-size: 1.1rem;
        font-weight: bold;
        color: #d1c9c1;
        background-color: #2b2621;
        border: 2px solid #555;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
    }

    .close-nav-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        background: none;
        border: none;
        color: #ffcc00;
        font-size: 2.5rem;
        font-weight: bold;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        z-index: 2002;
    }
}
/* =================== ESTILOS PARA A ÁREA DE VENDA DE ITENS =================== */

#sellArea {
    background-color: #1b1a19;
    border: 1px solid #4a4540;
    border-radius: 5px;
    padding: 15px;
    margin-top: 20px;
}

#sellItemList {
    /* Cria uma grade que se ajusta ao tamanho da tela */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px; /* Espaço entre os itens */
    max-height: 400px; /* Define uma altura máxima para a área */
    overflow-y: auto;  /* Adiciona uma barra de rolagem se os itens ultrapassarem a altura */
    padding: 5px;
}

/* O container de cada item individual para venda */
.sell-item {
    display: flex;
    flex-direction: column; /* Empilha os elementos verticalmente (imagem, texto, botão) */
    align-items: center;    /* Centraliza tudo horizontalmente */
    justify-content: space-between; /* Distribui o espaço para o botão ficar no fundo */
    background-color: #2c2926;
    border: 1px solid #5a534e;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}

/* A CORREÇÃO PRINCIPAL: Define o tamanho da imagem */
.sell-item img {
    max-width: 80px;   /* Limita a largura da imagem */
    height: auto;      /* Mantém a proporção da imagem */
    margin-bottom: 10px; /* Adiciona um espaço abaixo da imagem */
}

/* Estiliza o texto do item */
.sell-item span {
    font-size: 0.9em;
    margin-bottom: 10px;
    word-break: break-word; /* Evita que nomes longos quebrem o layout */
    flex-grow: 1; /* Faz o texto ocupar o espaço disponível */
}

/* Estiliza o botão de venda dentro do card */
.sell-item button {
    width: 100%;
    padding: 8px;
    border: none;
    background-color: #a12e2e;
    color: white;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.sell-item button:hover {
    background-color: #c43c3c;
}
/* style.css */

/* Garante que a caixa de login possa posicionar elementos dentro dela */
.login-box {
    position: relative;
    /* Adiciona espaço extra no fundo para o botão não sobrepor outros */
    padding-bottom: 25px; 
}

/* ========================================================== */
/*  NOVO ESTILO PARA O BOTÃO DE TERMOS - VERSÃO MINÚSCULA     */
/* ========================================================== */
#termsBtn {
    position: absolute;   /* Posicionamento absoluto em relação ao .login-box */
    bottom: 5px;          /* Mais perto do fundo */
    left: 0;            /* Centraliza horizontalmente */
 /* Ajuste fino para centralização perfeita */

    /* Estilos para torná-lo MINÚSCULO e discreto */
    font-size: 10px;      /* Letra minúscula */
    padding: 2px 5px;     /* Espaçamento interno mínimo */
    background: none;     /* Sem fundo */
    border: none;         /* Sem borda */
    color: #666;          /* Cor cinza bem escura e discreta */
    cursor: pointer;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif; /* Usa uma fonte mais legível em tamanho pequeno */
    letter-spacing: 0.5px; /* Leve espaçamento entre as letras */
    transition: color 0.2s;
}

#termsBtn:hover {
    color: #999; /* Clareia um pouco ao passar o mouse */
    text-decoration: underline; /* Adiciona sublinhado para indicar que é clicável */
}
/* =============================================== */
/*  CSS PARA RESPONSIVIDADE (CELULARES)            */
/* =============================================== */

/* Aplica estes estilos quando a tela for 800px ou menor */
@media (max-width: 800px) {
    
    /* 1. Mudar o layout principal para uma única coluna */
    #main-content {
        flex-direction: column; /* A MUDANÇA MAIS IMPORTANTE: Empilha as colunas */
        overflow-y: auto;       /* Permite rolar a página verticalmente para ver tudo */
        padding: 10px;
    }

    /* 2. Fazer cada coluna ocupar a largura total da tela */
    #left-column,
    #right-column {
        width: 100%;
        max-width: 100%; /* Garante que não ultrapasse a tela */
        margin: 0;       /* Remove margens laterais desnecessárias */
    }

    /* 3. Adicionar um espaço entre a coluna de cima e a de baixo */
    #right-column {
        margin-top: 20px;
    }

    /* 4. Ajustes finos na interface para telas menores */
    #top-bar {
        flex-wrap: wrap; /* Permite que os itens da barra superior quebrem a linha se necessário */
        height: auto;    /* Altura automática para acomodar a quebra de linha */
        padding: 8px;
    }
    
    #statsContainer {
        /* Garante que as estatísticas não ocupem muito espaço */
        font-size: 0.8em;
        margin-top: 5px;
        width: 100%;
        justify-content: center;
    }

    .login-box {
        width: 90%; /* Aumenta a largura da caixa de login em telas pequenas */
    }

    /* Garante que os modais não fiquem muito grandes na tela */
    .modal-box {
        width: 95%;
    }
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    background-color: #1a1a1a;
    color: #d1c9c1;
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden; /* Previne a rolagem no nível do body */
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
}

h1, h2, h3, h4, h5 {
    font-family: 'Teko', sans-serif;
    color: #ffcc00;
}

.hidden {
    display: none !important;
}

/* ================= Telas de Menu (Login, Missões, etc.) ================= */
#loginScreen, #missionsScreen, #exchangeScreen, #steamStoreScreen, #duelScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(43, 38, 33, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s ease-out;
    padding: 20px;
    text-align: center;
}

.login-box, .exchange-box{
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    background-color: #1e1e1e;
    padding: 25px;
    border-radius: 10px;
    border: 3px solid #a33528;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    width: 100%;
    max-width: 500px;
    color: #d1c9c1;
}

.login-title, .missions-title, .exchange-title, .steam-store-title, .duel-title {
    font-size: 3rem;
    margin-bottom: 15px;
}

.login-box button, .exchange-box button, .missions-box button, .duel-box button {
    width: 100%;
    max-width: 300px;
    padding: 15px 10px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}

.back-to-login-btn {
    margin-top: 15px;
    background-color: transparent !important;
    border: 1px solid #a33528 !important;
    color: #a33528 !important;
}
.back-to-login-btn:hover {
    background-color: #a33528 !important;
    color: white !important;
}

/* ================= Tela Principal do Jogo ================= */
#gameContainer {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

#top-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 70px;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; border-bottom: 2px solid #a33528; z-index: 100;
}
#backToStartBtn { background: #a33528; color: white; border: none; padding: 8px 15px; border-radius: 5px; font-weight: bold; cursor: pointer; }
#music-container { display: flex; align-items: center; gap: 10px; }
#music-container button { background: none; border: none; color: #d1c9c1; font-size: 1.2rem; cursor: pointer; }
#refinadoContainer { display: flex; align-items: center; gap: 5px; font-size: 1.2rem; font-weight: bold; color: #ffcc00; }
#refinadoContainer img { width: 30px; height: 30px; }
#statsContainer { display: flex; gap: 20px; }

#main-content {
    display: flex; gap: 30px; padding: 20px; width: 100%;
    padding-top: 90px; /* Espaço para a top-bar */
    height: 100%;
}
#left-column { display: flex; flex-direction: column; gap: 20px; flex: 2; align-items: center; }
#right-column { display: flex; flex-direction: column; gap: 20px; flex: 1; max-width: 400px; overflow-y: auto; padding-bottom: 20px; }

#videoContainer { position: relative; width: 100%; max-width: 800px; aspect-ratio: 16 / 9; background-color: #1e1e1e; border: 2px solid #a33528; border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); overflow: hidden; display: flex; justify-content: center; align-items: center; }
#boxVideo { width: 100%; height: 100%; object-fit: cover; }
#rewardScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 15px; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in-out; }
#rewardScreen.visible { opacity: 1; pointer-events: auto; }
#itemName { font-size: 2.5rem; text-shadow: 2px 2px 4px #000; text-transform: uppercase; }
#itemImg { max-width: 80%; max-height: 50%; object-fit: contain; }
#itemActions { display: flex; gap: 10px; }
#itemActions button { padding: 10px 20px; font-weight: bold; border: none; border-radius: 5px; cursor: pointer; color: white; transition: background-color 0.3s; }
#sellBtn { background-color: #a33528; }
#storeBtn { background-color: #4b69ff; }
#discardBtn { background-color: #6a8a61; }
.main-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; width: 100%; }
.main-actions button { padding: 15px 30px; font-size: 1.1rem; font-weight: bold; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; }
#openBtn { background-color: #a33528; }
#openBackpackBtn, #achievementsBtn, #profileBtn, #profileStoreBtn { background-color: #2b2621; border: 2px solid #555; }
#recent-drops, #shop, #sellArea { background-color: rgba(0, 0, 0, 0.5); border: 2px solid #555; border-radius: 8px; padding: 15px; }
#recent-drops h2, #shop h2, #sellArea h2 { margin: 0 0 10px 0; text-align: center; border-bottom: 2px solid #a33528; padding-bottom: 5px; }

/* ================= Modais ================= */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 2000; padding: 15px; }
.modal-box { background-color: #3c352e; padding: 20px; border-radius: 10px; border: 3px solid #a33528; width: 100%; max-width: 900px; max-height: 90vh; overflow-y: auto; box-shadow: 0 0 30px rgba(0,0,0,0.6); }
.modal-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #a33528; padding-bottom: 10px; }
.modal-title-bar h2 { margin: 0; font-size: 1.8rem; }
.close-modal-btn { background: #a33528; border: 1px solid #222; color: #fff; font-weight: bold; font-size: 1.5rem; width: 80px; height: 35px; cursor: pointer; border-radius: 5px; line-height: 35px; text-align: center; }

/* ================= Menu Hamburger e Painel Lateral ================= */
.hamburger-menu { display: none; } /* Escondido em telas grandes */
.side-nav-panel { display: none; } /* Escondido em telas grandes */

/* =================================================================== */
/* ============= ESTILOS RESPONSIVOS PARA CELULAR ==================== */
/* =================================================================== */

@media (max-width: 900px) {
    #main-content { flex-direction: column; padding: 15px; padding-top: 85px; align-items: center; }
    #left-column { width: 100%; max-width: 500px; }
    #right-column { display: none; } /* ** A MUDANÇA IMPORTANTE: Esconde a coluna da tela principal */
    
    #top-bar { padding: 0 15px; }
    #top-bar #music-container, #top-bar #statsContainer { display: none; }
    
    .download-container, #resetBtn { display: none; }
    
    #videoContainer { width: 100%; }
    .main-actions { max-width: 100%; }
    .main-actions #openBackpackBtn, .main-actions #achievementsBtn, .main-actions #profileBtn, .main-actions #profileStoreBtn { display: none; }

    .hamburger-menu { display: flex; flex-direction: column; justify-content: space-around; width: 35px; height: 30px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1002; }
    .hamburger-menu span { width: 100%; height: 4px; background-color: #d1c9c1; border-radius: 2px; }

    .side-nav-panel { display: flex; flex-direction: column; gap: 15px; position: fixed; top: 0; right: 0; width: 280px; max-width: 80vw; height: 100%; background-color: #1e1e1e; border-left: 3px solid #a33528; z-index: 2001; padding: 60px 20px 20px; transform: translateX(100%); transition: transform 0.3s ease-in-out; box-shadow: -5px 0 25px rgba(0,0,0,0.5); }
    .side-nav-panel.is-open { transform: translateX(0); }
    .side-nav-panel .nav-button { display: block; width: 100%; padding: 15px; font-size: 1.1rem; font-weight: bold; color: #d1c9c1; background-color: #2b2621; border: 2px solid #555; border-radius: 5px; text-align: center; cursor: pointer; }
    .close-nav-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; color: #ffcc00; font-size: 2.5rem; cursor: pointer; z-index: 2002; }

    /* Estilo para o conteúdo da loja/venda dentro do modal */
    #right-column-content-mobile { display: flex; flex-direction: column; gap: 20px; }
}
/* style.css */

.save-management {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 300px; /* Alinha com os outros botões */
    justify-content: center;
}

.save-management button, #resetBtn {
    flex: 1; /* Faz os botões dividirem o espaço */
    padding: 10px;
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}

#importSaveBtn {
    background-color: #4b69ff;
}
#importSaveBtn:hover {
    background-color: #6a82ff;
}

#exportSaveBtn {
    background-color: #6a8a61;
}
#exportSaveBtn:hover {
    background-color: #79a170;
}

#resetBtn {
    margin-top: 10px;
    width: 100%;
    max-width: 300px;
    background-color: transparent;
    border: 1px solid #a33528;
    color: #a33528;
}

#resetBtn:hover {
    background-color: #a33528;
    color: white;
}

#resetBtn.confirm-delete {
    background-color: #ff0000;
    border-color: #ff0000;
    color: white;
}
/* style.css */

/* ========================================================== */
/*  ESTILO CORRIGIDO PARA O LINK DE DOWNLOAD                  */
/* ========================================================== */

#loginScreen {
    /* Garante que o posicionamento absoluto funcione em relação à tela */
    position: relative;
}

.downloadLink {
    position: absolute; /* Posicionamento fixo em relação à tela de login */
    bottom: 60px;       /* Distância do fundo da tela (deixa espaço para os "Termos") */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;         /* Ocupa 90% da largura da tela para não cortar */
    max-width: 800px;   /* Limite máximo de largura */
    text-align: center;
    padding: 0 10px;
}

.downloadLink a {
    color: #ffcc00;
    font-size: 1rem; /* Tamanho de fonte mais adaptável */
    font-weight: bold;
    text-decoration: none;
    border: 2px solid #ffcc00;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    display: inline-block; /* Importante para o padding funcionar corretamente */
}

.download-container a:hover {
    background-color: #ffcc00;
    color: #111;
}
/* style.css */

/* ========================================================== */
/*  ESTILO PARA O BOTÃO "VENDER TUDO"                         */
/* ========================================================== */

.sell-area-header {
    display: flex;
    justify-content: space-between; /* Alinha o título à esquerda e o botão à direita */
    align-items: center;
    margin-bottom: 15px; /* Espaço abaixo do cabeçalho */
}

#sellAllBtn {
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: bold;
    color: white;
    background-color: #c54c42; /* Um vermelho mais chamativo */
    border: 1px solid #a33528;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#sellAllBtn:hover {
    background-color: #e06a61;
}

#sellAllBtn:disabled {
    background-color: #555;
    color: #888;
    cursor: not-allowed;
    border-color: #444;
}
/* ================================================= */
/* ==== CORREÇÃO PARA ÍCONES NA ÁREA DE VENDA ==== */
/* ================================================= */

/* Organiza o contêiner de cada item para venda */
.sell-item {
  display: flex;
  flex-direction: column; /* Organiza os itens em coluna (imagem em cima, texto/botão embaixo) */
  align-items: center;   /* Centraliza tudo horizontalmente */
  justify-content: space-between; /* Tenta distribuir o espaço verticalmente */
  border: 1px solid #444;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

/* Define um tamanho máximo e ajusta as imagens dos itens */
.sell-item img {
  max-width: 80px;      /* A imagem não vai passar de 80px de largura */
  max-height: 80px;     /* E nem de 80px de altura */
  width: auto;          /* Mantém a proporção da imagem */
  height: auto;         /* Mantém a proporção da imagem */
  object-fit: contain;  /* Garante que a imagem caiba inteira sem distorcer */
  margin-bottom: 10px;  /* Adiciona um espaço entre a imagem e o texto/botão */
}
/* ======================================= */
/*          ESTILOS RESPONSIVOS            */
/* ======================================= */

/* Regras para telas com largura máxima de 768px (tablets e celulares) */
@media (max-width: 768px) {

    /* --- GERAL --- */
    body {
        /* Reduz o tamanho da fonte base para melhor encaixe */
        font-size: 14px;
    }

    /* --- TELAS DE MENU (Login, Troca, Loja, etc.) --- */
    .login-box,
    .exchange-box,
    .steam-store-box,
    .duel-box,
    .missions-box {
        width: 90%; /* Aumenta a largura das caixas para ocupar mais espaço na tela */
        padding: 20px; /* Ajusta o preenchimento interno */
        margin: 20px auto;
    }

    /* Ajusta o tamanho dos botões nas telas de menu */
    .login-box button,
    .exchange-action-btn,
    .back-to-login-btn {
        padding: 12px;
        font-size: 1em;
    }

    /* --- TELA PRINCIPAL DO JOGO --- */

    /* Cabeçalho */
    #top-bar {
        flex-direction: row;
        flex-wrap: wrap; /* Permite que os itens quebrem para a linha de baixo */
        justify-content: space-between;
        padding: 8px;
    }

    /* Esconde estatísticas e botões que irão para o menu lateral */
    #statsContainer,
    #soundConfigBtn {
       display: none;
    }
    
    /* Mostra e estiliza o ícone do menu hambúrguer */
    .hamburger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        cursor: pointer;
        /* Garante que ele fique visível */
        position: absolute;
        right: 15px;
        top: 15px;
    }

    .hamburger-menu span {
        width: 100%;
        height: 3px;
        background-color: #fff; /* Cor das barras do menu */
    }

    /* Conteúdo Principal (colunas Esquerda e Direita) */
    #main-content {
        flex-direction: column; /* Empilha as colunas verticalmente */
        align-items: center; /* Centraliza o conteúdo */
    }

    #left-column,
    #right-column {
        width: 95%; /* Faz cada coluna ocupar quase toda a largura */
        margin-bottom: 20px; /* Adiciona espaço entre as colunas empilhadas */
    }
    
    .main-actions {
        flex-direction: column; /* Empilha os botões de ação (Abrir Caixa, Ver Mochila) */
        width: 100%;
    }

    .main-actions button {
        width: 90%;
        margin: 8px auto; /* Centraliza e adiciona espaço entre os botões */
    }


    /* --- TELA DE DUELO --- */
    .duel-container {
        flex-direction: column; /* Empilha a área do jogador e do bot */
        align-items: center;
    }

    .duel-side {
        width: 100%; /* Faz cada lado do duelo ocupar a largura total */
        margin-bottom: 20px;
    }

    .duel-input-container {
        flex-direction: column;
        align-items: center;
        gap: 10px; /* Adiciona espaço entre o input e o botão */
    }

    /* --- GRID DE JOGOS E ITENS --- */
    .steam-games-grid,
    .duel-items-grid {
        /* Ajusta o grid para ter menos colunas */
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }


    /* --- PAINEL DE NAVEGAÇÃO LATERAL --- */
    /* O painel começa escondido fora da tela */
    .side-nav-panel {
        position: fixed;
        top: 0;
        right: -300px; /* Começa fora da tela, à direita */
        width: 250px;
        height: 100%;
        background-color: #2c2c2c; /* Cor de fundo escura */
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
        transition: right 0.3s ease-in-out; /* Animação suave */
        padding-top: 60px;
        z-index: 1000; /* Garante que fique acima de outros elementos */
    }

    /* Classe a ser adicionada via JavaScript para mostrar o menu */
    .side-nav-panel.open {
        right: 0; /* Move o painel para dentro da tela */
    }
    
    .close-nav-btn {
        position: absolute;
        top: 15px;
        right: 25px;
        font-size: 36px;
    }
}

/* Regras adicionais para telas muito pequenas (celulares em modo retrato) */
@media (max-width: 480px) {
    h1 {
        font-size: 2em; /* Reduz um pouco os títulos principais */
    }

    h2 {
        font-size: 1.5em;
    }

    #videoContainer, #rewardScreen {
        padding: 5px;
    }

    #itemImg {
        max-height: 150px; /* Limita a altura da imagem do item */
    }
}

/* ======================================= */
/*      ESTILOS DOS MODAIS DO JOGO         */
/* ======================================= */

/* Aumenta o tamanho do modal da mochila */
.modal-content.large {
    max-width: 800px;
}

/* Grid da Mochila */
#backpackGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    padding: 10px;
    background-color: #1e1e1e;
    border-radius: 5px;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
}

.backpack-slot {
    width: 60px;
    height: 60px;
    background-color: #333;
    border: 1px solid #555;
    display: flex;
    align-items: center;
    justify-content: center;
}

.backpack-slot img {
    max-width: 90%;
    max-height: 90%;
}

#backpackPagination {
    margin-top: 15px;
}

/* Lista de Conquistas */
#achievementsList {
    max-height: 400px;
    overflow-y: auto;
    text-align: left;
}

.achievement {
    background-color: #333;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    opacity: 0.5;
}

.achievement.unlocked {
    opacity: 1;
    border-left: 4px solid #a1dd48;
}

.achievement h4 {
    margin: 0 0 5px 0;
    color: #ffd700;
}

/* Perfil do Jogador */
.profile-info, .profile-stats {
    margin-bottom: 20px;
    text-align: left;
}

#playerNameInput {
    background: #333;
    border: 1px solid #555;
    color: #fff;
    padding: 5px;
}

/* Configurações de Som */
.sound-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}