/* --- NOVO LAYOUT DO DASHBOARD --- */
/* Reset básico */
body, html { margin: 0; padding: 0; height: 100%; font-family: sans-serif; background-color: #1e1e1e; color: white; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.dashboard-layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 60px 1fr; grid-template-areas: "header header" "sidebar content"; height: 100vh; overflow: hidden; }

/* HEADER */
.dashboard-header { grid-area: header; background-color: #111; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #555; color: #ccc; }
.dashboard-header .user-info { display: flex; align-items: center; }
.dashboard-header .user-info img { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; border: 1px solid white; }
.dashboard-header .user-info span { font-weight: bold; color: white; }

/* Ícones de Moeda do Header */
.dashboard-header .currency-info { display: flex; align-items: center; gap: 25px; margin-left: auto; margin-right: 30px; }
.dashboard-header .currency-item { display: flex; align-items: center; }
.dashboard-header .currency-item .currency-icon { width: 36px; height: 36px; margin-right: 8px; vertical-align: middle; }
.dashboard-header .currency-item span { font-weight: bold; color: yellow; font-size: 1.2em; line-height: 1; }

/* Esconde SP e Bamboo no Header */
#sp-currency-item, #bamboo-currency-item { display: none; }

.dashboard-header .logout-button { color: #ff4400; font-weight: bold; text-decoration: none; padding: 5px 10px; border: 1px solid #ff4400; border-radius: 5px; }
.dashboard-header .logout-button:hover { background-color: #ff4400; color: white; text-decoration: none; }

/* SIDEBAR */
.dashboard-sidebar { 
    grid-area: sidebar; 
    background-color: #222; 
    padding-top: 20px; 
    border-right: 2px solid #555; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    overflow-y: auto; 
}
.dashboard-sidebar nav { width: 100%; }
.dashboard-sidebar nav ul { list-style: none; padding: 0; margin: 0; }
.dashboard-sidebar nav li a { display: block; padding: 15px 20px; color: white; text-decoration: none; font-size: 18px; border-bottom: 1px solid #444; }
.dashboard-sidebar nav li a:hover { background-color: #444; }
.dashboard-sidebar nav li a.active-link { background-color: #9146ff; font-weight: bold; }

/* CONTEÚDO */
.dashboard-content { grid-area: content; padding: 20px; overflow-y: auto; }
.content-section { display: none; }
.content-section.active { display: block; }


/* --- LOJA (STORE) - ESTILO STREAM RAIDERS --- */

/* Navegação da Loja */
.store-header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1a120b;
    padding: 10px 20px;
    border-bottom: 2px solid #4a3b2a;
    border-radius: 8px 8px 0 0;
    margin-bottom: 20px;
}

.store-tabs {
    display: flex;
    gap: 15px;
}

.store-tab-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.2s;
}

.store-tab-btn:hover {
    color: #ccc;
}

.store-tab-btn.active {
    color: #ffcc00;
    border-bottom: 2px solid #ffcc00;
}

.redeem-code-btn {
    background-color: #0055aa;
    color: white;
    border: 1px solid #0077cc;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}
.redeem-code-btn:hover { background-color: #0066cc; }

/* Conteúdo das Abas */
.store-tab-content.hidden {
    display: none;
}

.store-sub-header h3 {
    color: #ffcc00;
    border-bottom: 1px solid #4a3b2a;
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-size: 1.2em;
    text-transform: uppercase;
}

/* Barra de Refresh (Scrolls) */
.scrolls-refresh-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #251d16;
    padding: 10px 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid #4a3b2a;
    gap: 20px;
}

.refresh-info {
    text-align: right;
    font-size: 0.9em;
    color: #aaa;
}

.refresh-timer {
    display: block;
    font-size: 1.2em;
    color: white;
    font-weight: bold;
}

.refresh-button {
    background-color: #555;
    color: white;
    border: 1px solid #777;
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}
.refresh-button:hover { background-color: #666; }

.icon-tiny-inline {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Cards da Loja (Grid e Item) */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}

.shop-item-card {
    background-color: #3b2f27;
    border: 1px solid #5c4b3a;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: transform 0.2s, border-color 0.2s;
    overflow: hidden;
    min-height: 280px;
}

.shop-item-card:hover {
    transform: translateY(-2px);
    border-color: #7c6b5a;
}

/* Header do Card (Centralizado) */
.shop-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
    background-color: #251d16;
    padding: 10px 5px;
    border-radius: 5px;
    min-height: 50px;
}

.shop-card-header h4 {
    margin: 0;
    color: #ddd;
    font-size: 1em;
    text-align: center;
    white-space: normal;
    overflow: visible;
    max-width: 100%;
    line-height: 1.2;
}

/* Ícone Principal do Item - FORÇADO */
.shop-item-card .shop-item-icon {
    width: 100px !important;
    height: 100px !important;
    max-width: 100%;
    object-fit: contain;
    margin: 10px 0;
    display: block;
}

/* Estilos de Ícone Composto (Scrolls) */
.shop-composite-icon {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px auto;
}
.shop-weapon-base {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.shop-scroll-overlay {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 40px;
    height: 40px;
    filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.8));
    z-index: 2;
}

/* Descrição do item */
.shop-item-card p {
    font-size: 0.85em;
    color: #ccc;
    line-height: 1.4;
    margin-bottom: 15px;
    text-align: center;
    flex-grow: 1;
    padding: 0 5px;
}

/* Rodapé do Card */
.shop-card-footer {
    margin-top: auto;
    width: 100%;
}

.shop-buy-btn {
    width: 100%;
    padding: 8px;
    background-color: #cc2200;
    color: white;
    border: 1px solid #ff4444;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
}
.shop-buy-btn.premium-btn {
    background-color: #008800;
    border-color: #00aa00;
}
.shop-buy-btn:hover { opacity: 0.9; }
.shop-buy-btn:disabled {
    background-color: #333;
    border-color: #555;
    color: #777;
    cursor: not-allowed;
}

/* Badge de Limite/Quantidade */
.shop-limit-badge {
    font-size: 0.8em;
    color: #888;
    margin-top: 5px;
    text-align: center;
}
.shop-buy-btn .currency-icon, .refresh-button .icon-tiny-inline { width: 24px; height: 24px; vertical-align: middle; margin-bottom: 2px; }


/* --- ESTILOS DO MAPA DE CAMPANHA --- */
#campaign-map-container { position: relative; width: 100%; height: 550px; overflow: hidden; margin: 20px 0; border: 3px solid #666; border-radius: 10px; background-size: cover; background-position: center; background-image: url('assets/campaign_map.png'); image-rendering: pixelated; }
#map-paths-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.map-node-path { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.map-node {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    transition: transform 0.1s, box-shadow 0.2s, background-color 0.3s, border-color 0.3s;
    transform: translate(-50%, -50%);
    z-index: 50;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.map-node .node-icon { width: 70%; height: 70%; object-fit: contain; }
.map-node.disabled-node { background-color: #555 !important; border-color: #888 !important; cursor: default; box-shadow: none !important; opacity: 0.6; }
.map-node.disabled-node .node-icon { filter: grayscale(100%) brightness(0.8); }

.easy-path .map-node { background-color: #00cc00; border-color: #aaffaa; }
.medium-path .map-node { background-color: #ffaa00; border-color: #ffddaa; }
.hard-path .map-node { background-color: #cc0000; border-color: #ffaaaa; }

.map-node.selected { transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 0 15px 5px yellow !important; z-index: 60; }
.map-node.unlocked { opacity: 1; cursor: pointer; }
.map-node.unlocked:hover { transform: translate(-50%, -50%) scale(1.1); }
.map-node.cleared { background-color: #555 !important; border-color: #888 !important; cursor: default; box-shadow: none !important; opacity: 0.6; }

#campaign-actions { margin-top: 20px; }
#selected-node-display { color: #00aaff; }
#start-selected-battle-btn { padding: 10px 20px; background-color: #9146ff; color: white; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; transition: background-color 0.2s; }
#start-selected-battle-btn:hover:not(:disabled) { background-color: #a970ff; }
#start-selected-battle-btn:disabled { background-color: #555; cursor: not-allowed; }

/* --- ESTILOS Específicos do Overlay --- */
#game-container { 
    width: 960px; 
    height: 540px; 
    margin: 0 auto; 
    position: relative; 
    overflow: hidden; 
    background-color: #111; 
    border: 4px solid #111; 
    border-radius: 12px; 
    box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.9); 
}
.hidden { display: none !important; }
#dojo-scene-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
.prep-dojo-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; z-index: 1; background-image: url('https://via.placeholder.com/900x600/2a2a2e/555555?text=Dojo+Background+Placeholder'); image-rendering: pixelated; }
.overlay-lobby-info { position: absolute; top: 20px; left: 20px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px 15px; border-radius: 8px; border: 1px solid #555; z-index: 10; text-align: center; }
.overlay-lobby-info h3 { margin: 0 0 5px 0; color: #ffc107; font-size: 1.1em; }
.overlay-lobby-info #timer-display { font-size: 2em; font-weight: bold; color: #00ff00; margin: 5px 0; }
.overlay-lobby-info p { margin: 5px 0 0 0; font-size: 0.9em; }
.overlay-lobby-info #player-count { font-weight: bold; color: #00ff00; }
.prep-streamer-pedestal { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); z-index: 10; text-align: center; background-color: rgba(0, 0, 0, 0.4); padding: 10px; border-radius: 10px; border: 1px solid #555; }
.prep-streamer-pedestal img { width: 70px; height: 70px; border-radius: 50%; border: 3px solid #9146ff; }
.prep-streamer-pedestal h3 { margin: 5px 0 0 0; color: white; font-size: 1em; }
.prep-raider-area { position: absolute; bottom: 80px; left: 10%; right: 10%; height: auto; min-height: 80px; z-index: 5; border: 1px dashed #555; padding: 10px; border-radius: 5px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; }
.prep-raider-entry.overlay-raider { background-color: rgba(40, 40, 40, 0.85); color: #e0e0e0; padding: 5px 10px; border-radius: 15px; font-size: 0.9em; border: 1px solid #666; white-space: nowrap; box-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.overlay-controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; gap: 20px; }
#controls-container button { display: inline-block; padding: 12px 25px; font-size: 1.1em; font-weight: bold; color: white; border: 2px solid white; border-radius: 10px; cursor: pointer; min-width: 150px; }
#start-early-button { background-color: #cc2200; }
#start-early-button:hover { background-color: #ff4400; }
#start-battle-button { background-color: #008800; }
#start-battle-button:hover { background-color: #00cc00; }
.overlay-prompt { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.8); color: #ffc107; padding: 15px 25px; border-radius: 10px; border: 1px solid #555; z-index: 12; text-align: center; }
.overlay-prompt h2 { margin: 0; font-size: 1.3em; }
.overlay-streamer-weapon-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 150px; z-index: 15; background-color: #111; border-top: 2px solid #555; display: flex; align-items: center; padding: 0 15px; gap: 15px; }
.overlay-streamer-weapon-bar .prep-weapon-selection-bar { flex-grow: 1; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 10px 0; height: 100%; }
.overlay-streamer-weapon-bar .prep-weapon-selection-bar::-webkit-scrollbar { height: 8px; }
.overlay-streamer-weapon-bar .prep-weapon-selection-bar::-webkit-scrollbar-track { background: #222; }
.overlay-streamer-weapon-bar .prep-weapon-selection-bar::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.overlay-streamer-weapon-bar .prep-weapon-card.streamer-choice { cursor: pointer; width: 100px; height: calc(100% - 20px); padding: 8px; background-color: #2a2a2e; border: 2px solid #555; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; position: relative; border-radius: 8px; transition: all 0.2s ease; text-align: center; }
.overlay-streamer-weapon-bar .prep-weapon-card.streamer-choice img { width: 45px; height: 45px; margin-bottom: 5px; align-self: center; object-fit: contain; }
.overlay-streamer-weapon-bar .prep-weapon-card.streamer-choice span { font-size: 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; }
.overlay-streamer-weapon-bar .prep-weapon-card.streamer-choice.selected { border-color: #00ff00; box-shadow: 0 0 8px #00ff00; }
#confirm-streamer-weapon-btn { background-color: #008800; color: white; border: none; padding: 20px 30px; font-size: 1.3rem; font-weight: bold; border-radius: 5px; cursor: pointer; transition: all 0.2s; height: 80%; }
#confirm-streamer-weapon-btn:hover:not(:disabled) { background-color: #00cc00; box-shadow: 0 0 8px #00cc00; }
#confirm-streamer-weapon-btn:disabled { background-color: #555; color: #888; cursor: not-allowed; }

.overlay-streamer-weapon-bar .prep-weapon-card.streamer-choice.disabled {
    border-color: #cc2200;
    opacity: 0.7;
    cursor: not-allowed;
}

.overlay-streamer-weapon-bar .prep-weapon-card.streamer-choice .cooldown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75); 
    color: #ff3333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 6px;
    z-index: 20; 
    text-shadow: 2px 2px 0 #000;
}


/* --- Estilos da Arena 1v1 --- */
.arena-1v1-container { 
    width: 100%; 
    height: 100%; 
    background-color: #111; 
    background-image: url('/images/backgrounds/dojo_arena.png'); 
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 20; 
    display: flex; 
    justify-content: space-between; 
    align-items: stretch; 
    padding: 20px; 
    padding-top: 80px; 
    box-sizing: border-box;
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.85);
    image-rendering: pixelated; 
}

#battle-main-title { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    right: 20px; 
    text-align: center; 
    color: white; 
    z-index: 25; 
    margin: 0; 
    font-size: 2.2em; 
    white-space: nowrap; 
    text-shadow: 2px 2px 4px #000; 
}

.fighter-slot { width: 40%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; transition: opacity 0.5s ease-out; }

.fighter-slot.defeated { opacity: 0; }
.info-bar-1v1 { width: 100%; color: white; font-weight: bold; background-color: rgba(0,0,0,0.6); padding: 5px 10px; border-radius: 5px; border: 1px solid #555; }
.info-bar-1v1 .name { font-size: 1.2em; text-shadow: 1px 1px 2px black; }
.life-bar-container { height: 20px; background-color: #222; border: 2px solid #ddd; border-radius: 5px; margin-top: 3px; padding: 2px; }
.life-bar { height: 100%; background-color: #00ff00; border-radius: 2px; width: 100%; transition: width 0.5s ease-out; box-shadow: inset 0 -5px 5px rgba(0,0,0,0.3); }
#monster-life-bar { background-color: #cc2200; }

/* Estilos de Animação e Camadas dos Personagens */
.fighter-sprite-container { position: relative; width: 150px; height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }

.character-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: bottom center;
}

/* Corpo base (Usado agora pelos monstros ESTÁTICOS) */
.fighter-body {
    position: absolute;
    bottom: 25px;
    left: 50%;
    max-height: 100%;
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
    image-rendering: pixelated; 
}


/* --- ESTILOS VIEWER DASHBOARD (SLOTS DE SENSEI) --- */
.dojo-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; }
.sensei-slot { background-color: #2a2a2e; border: 2px solid #555; border-radius: 8px; text-align: center; overflow: hidden; display: flex; flex-direction: column; }
.sensei-slot-header { background-color: #111; padding: 8px; font-weight: bold; color: #ccc; border-bottom: 2px solid #555; }
.sensei-slot-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sensei-slot .lock-icon { font-size: 40px; color: #777; margin-bottom: 10px; }
.sensei-slot-body h3 { margin: 0 0 10px 0; color: white; font-size: 1.1em; }
.sensei-slot-body p { color: #aaa; font-size: 0.9em; margin: 5px 0; }
.sensei-slot-body button:not(.slot-action-btn):not(.buy-pass-button) { width: 80%; padding: 10px; font-size: 1em; background-color: #0077cc; border: 1px solid #777; color: white; cursor: pointer; border-radius: 5px; margin-top: auto; }
.sensei-slot-body button:hover:not(.slot-action-btn):not(.buy-pass-button) { background-color: #0099e6; }
.sensei-slot-body button:disabled { background-color: #333; color: #777; cursor: not-allowed; border-color: #444; }
.sensei-slot.locked .sensei-slot-body h3 { color: #777; }
.sensei-slot.locked .sensei-slot-body p { color: #777; }
.sensei-slot.locked.premium-lock { border-color: #cc9900; }
.sensei-slot.occupied { border-color: #00aaff; }
.sensei-slot-body .sensei-slot-image { width: 70px; height: 70px; border-radius: 50%; border: 2px solid #555; margin-bottom: 10px; background-color: #111; }
.sensei-slot.occupied .sensei-slot-body .sensei-slot-image { border-color: #00aaff; }
.sensei-slot-body .sensei-status-text { color: #aaa; font-style: italic; font-size: 0.9em; margin-bottom: 10px; }
.sensei-slot-body .buy-pass-button { width: 80%; padding: 10px; font-size: 1em; background-color: #cc9900; border: 1px solid #ffdd44; color: white; cursor: pointer; border-radius: 5px; margin-top: 10px; font-weight: bold; }
.sensei-slot-body .buy-pass-button:hover { background-color: #e6ac00; }
.slot-buttons { display: flex; gap: 10px; width: 100%; margin-top: auto; }
.slot-action-btn { flex: 1; padding: 8px; font-size: 0.9em; font-weight: bold; border: none; border-radius: 5px; cursor: pointer; }
.slot-action-btn.watch-btn { background-color: #9146ff; color: white; }
.slot-action-btn.watch-btn:hover { background-color: #a970ff; }
.slot-action-btn.leave-btn { background-color: #cc2200; color: white; }
.slot-action-btn.leave-btn:hover { background-color: #ff4400; }

/* --- ESTILOS DAS CARTAS DE ARMAS (Arsenal) --- */
#weapons-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; list-style: none; padding: 0; margin-top: 20px; }
.weapon-card { background-color: #2a2a2e; border: 2px solid #555; border-radius: 8px; padding: 10px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; position: relative; overflow: hidden; transition: transform 0.2s ease-in-out; }
.weapon-card:hover { transform: translateY(-5px); border-color: #aaa; }
.weapon-card.locked { opacity: 0.6; background-color: #1a1a1e; border-color: #333; }
.weapon-card.on-cooldown { border-color: #cc2200; }
.weapon-icon-container { position: relative; width: 100px; height: 100px; margin: 10px auto; background-color: #111; border-radius: 5px; display: flex; align-items: center; justify-content: center; border: 1px solid #444; }
.weapon-icon { max-width: 80%; max-height: 80%; }
.weapon-level { position: absolute; bottom: -8px; right: -8px; width: 30px; height: 30px; background-color: #444; color: yellow; font-weight: bold; font-size: 0.9em; border-radius: 50%; border: 2px solid yellow; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 2; }
.weapon-card.locked .weapon-level { color: #888; border-color: #666; background-color: #222; }
.weapon-card h4 { margin: 5px 0 10px 0; font-size: 1.1em; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upgrade-progress { margin-bottom: 15px; padding: 0 5px; height: 35px; display: flex; align-items: center; position: relative; }
.progress-cap-left, .progress-cap-right { height: 34px; width: 34px; flex-shrink: 0; object-fit: contain; z-index: 5; position: relative; }
.progress-cap-left { margin-right: -19px; transform: rotate(-55deg); }
.progress-cap-right { margin-left: -21px; }
.progress-cap-right.ready { opacity: 1; animation: glow 1.5s infinite alternate; }
.progress-bar-container { width: 100%; height: 25px; position: relative; overflow: hidden; border-radius: 12px; z-index: 1; }
.progress-bar-track, .progress-bar-fill { position: absolute; left: 0; top: 0; height: 100%; }
.progress-bar-track { width: 100%; background-color: #1a1a1a; z-index: 1; border-radius: 12px; }
.progress-bar-fill { background-color: #cc9900; width: 0%; transition: width 0.5s ease-out; z-index: 2; box-shadow: inset 0 0 5px rgba(0,0,0,0.5); border-radius: 12px; }
.progress-text { position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); z-index: 3; text-align: center; font-size: 0.9em; color: white; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); white-space: nowrap; padding: 0 24px; }
.upgrade-progress .progress-text-locked { color: #777; font-size: 0.9em; display: block; width: 100%; text-align: center; }
.weapon-card .weapon-actions button { width: 100%; padding: 10px; font-size: 1em; margin-top: auto; border-radius: 5px; border: 1px solid #777; background-color: #444; color: white; cursor: pointer; transition: background-color 0.2s; }
.weapon-card .weapon-actions button:hover { background-color: #555; }
.weapon-card .weapon-actions button:disabled { background-color: #333; color: #777; cursor: not-allowed; border-color: #444; }
.upgrade-button.can-upgrade { background-color: #008800; border: 2px solid yellow; animation: glow 1.5s infinite alternate; }
.upgrade-button.can-upgrade:hover { background-color: #00cc00; }

/* --- ESTILOS PARA VIDAS (CORAÇÕES) --- */
.lives-display { display: inline-block; font-size: 1.5em; line-height: 1; }
.lives-display span { margin: 0 2px; transition: color 0.3s ease; }
.lives-display .heart-full { color: #ff4444; }
.lives-display .heart-empty { color: #555555; }

/* --- ESTILOS PARA O MODAL DE RETRY --- */
#retry-battle-modal .modal-content h2 { color: #cc2200; }
#retry-confirm-btn { background-color: #008800; color: white; border-color: #00cc00; }
#retry-confirm-btn:hover:not(:disabled) { background-color: #00cc00; }
#retry-confirm-btn:disabled { background-color: #555; color: #888; cursor: not-allowed; border-color: #666; }
#retry-decline-btn { background-color: #555; color: white; border-color: #777; }
#retry-decline-btn:hover { background-color: #777; }
#retry-lives-text strong { color: #ff4400; }
#retry-no-lives-message { color: #ffaa00; font-weight: bold; margin-top: 15px; }
#retry-goto-store-btn { background-color: #cc9900; color: white; border: 1px solid #ffdd44; border-radius: 5px; padding: 10px 20px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 10px; }
#retry-goto-store-btn:hover { background-color: #e6ac00; }

/* --- SENSEI BROWSER MODAL --- */
.sensei-modal-content {
    background-color: #1e1e1e; border: 2px solid #555; border-radius: 10px; width: 700px; max-width: 95%; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
}
.sensei-modal-header {
    background-color: #111; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #444;
}
.sensei-modal-header h2 { margin: 0; color: #00aaff; font-size: 1.5em; }
.sensei-modal-close {
    background: none; border: none; color: #aaa; font-size: 1.5em; cursor: pointer; font-weight: bold; padding: 0 5px;
}
.sensei-modal-close:hover { color: #fff; }
.sensei-modal-nav {
    display: flex; background-color: #222; border-bottom: 1px solid #444;
}
.sensei-modal-nav .sensei-tab {
    flex: 1; text-align: center; padding: 12px; color: #aaa; text-decoration: none; font-weight: bold; font-size: 1.1em;
}
.sensei-modal-nav .sensei-tab.active {
    color: #fff; border-bottom: 3px solid #9146ff; background-color: #2a2a2e;
}
.sensei-modal-filters {
    padding: 15px 20px; background-color: #2a2a2e; display: flex; flex-wrap: wrap; gap: 15px; border-bottom: 1px solid #444; align-items: center;
}
.sensei-modal-filters .search-bar {
    display: flex; align-items: center; background: #111; padding: 8px 12px; border-radius: 5px; border: 1px solid #555; flex-grow: 1; min-width: 200px;
}
.sensei-modal-filters .search-bar input {
    background: transparent; border: none; color: white; margin-left: 10px; outline: none; width: 100%; font-size: 1em;
}
.sensei-modal-filters select {
    background: #111; color: white; border: 1px solid #555; padding: 9px; border-radius: 5px; outline: none; font-size: 0.9em; cursor: pointer;
}
.sensei-modal-filters .filter-group {
    display: flex; align-items: center; gap: 8px; font-size: 0.9em; color: #ccc;
}
.sensei-modal-filters .filter-btn {
    background: #333; color: #aaa; border: 1px solid #555; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: all 0.2s;
}
.sensei-modal-filters .filter-btn:hover { background: #444; color: #fff; }
.sensei-modal-filters .filter-btn.active {
    background: #9146ff; color: white; border-color: #a970ff;
}
.streamer-list-container {
    padding: 15px 20px; flex-grow: 1; overflow-y: auto; background-color: #1e1e1e; min-height: 250px;
}
.sensei-modal-footer {
    background-color: #111; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #444; color: #888; font-size: 0.9em;
}
.sensei-modal-footer button {
    background: #333; color: white; border: 1px solid #555; padding: 8px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background 0.2s;
}
.sensei-modal-footer button:hover { background: #444; }

/* --- Fundo Específico do Overlay --- */
.overlay-body {
    background: linear-gradient(rgba(15, 15, 20, 0.7), rgba(15, 15, 20, 0.95)), url('/images/backgrounds/dojo_landing.jpg') center/cover no-repeat !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

/* ============================================================
   ATUALIZAÇÃO: SISTEMA DE SPRITES DINÂMICOS (4, 5, 7 E 9 FRAMES)
   ============================================================ */
.fighter-monster, .fighter-raider {
    position: absolute;
    bottom: 25px;   
    left: 50%;
    transform-origin: bottom center;
    image-rendering: pixelated; 
    background-repeat: no-repeat;
    background-position: 0 0;
    z-index: 1;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
}

/* -------------------------------------------------------------------------
   Tamanho Base 
   ------------------------------------------------------------------------- */

/* Herói (144px) */
.fighter-raider { 
    width: 144px; 
    height: 144px; 
    transform: translateX(-50%); 
}

/* Monstros Animados e Estáticos Comuns (250px com ajuste de margem) */
.fighter-monster, .fighter-body { 
    width: 250px; 
    height: 250px; 
    transform: translateX(-50%); 
    margin-left: -80px; /* Aumentado o ajuste para a esquerda (era -50px) */
}

/* Exceção do Chefe Armored Oni - Fica grande mas controlável */
.fighter-monster[data-monster="Armored_Oni"],
.fighter-body[data-monster="Armored_Oni"],
.fighter-monster[data-monster="armored_oni"],
.fighter-body[data-monster="armored_oni"] { 
    width: 320px !important; /* Reduzido o tamanho base para não bugar a tela (era 450px) */
    height: 320px !important;
    margin-left: -120px; /* Margem alinhada ao novo tamanho */
}

/* ------------------------------------------------------------
   CLASSES DE FRAMES (MÁGICA DA MATEMÁTICA DE SPRITES)
   ------------------------------------------------------------ */

/* 4 FRAMES */
.frames-4 { background-size: 400% 100%; }
.frames-4.idle   { animation: play-4-loop 0.8s steps(4) infinite; }
.frames-4.walk   { animation: play-4-loop 0.5s steps(4) infinite; }
.frames-4.attack { animation: play-4-once 0.5s steps(3) forwards; } /* Trava no último frame */
.frames-4.damage { animation: play-4-once 0.5s steps(3) forwards; }
@keyframes play-4-loop { 100% { background-position-x: 133.333%; } }
@keyframes play-4-once { 100% { background-position-x: 100%; } }

/* 5 FRAMES */
.frames-5 { background-size: 500% 100%; }
.frames-5.idle   { animation: play-5-loop 0.8s steps(5) infinite; }
.frames-5.walk   { animation: play-5-loop 0.5s steps(5) infinite; }
.frames-5.attack { animation: play-5-once 0.5s steps(4) forwards; }
.frames-5.damage { animation: play-5-once 0.5s steps(4) forwards; }
@keyframes play-5-loop { 100% { background-position-x: 125%; } }
@keyframes play-5-once { 100% { background-position-x: 100%; } }

/* 7 FRAMES */
.frames-7 { background-size: 700% 100%; }
.frames-7.idle   { animation: play-7-loop 0.8s steps(7) infinite; }
.frames-7.walk   { animation: play-7-loop 0.5s steps(7) infinite; }
.frames-7.attack { animation: play-7-once 0.5s steps(6) forwards; }
.frames-7.damage { animation: play-7-once 0.5s steps(6) forwards; }
@keyframes play-7-loop { 100% { background-position-x: 116.666%; } }
@keyframes play-7-once { 100% { background-position-x: 100%; } }

/* 9 FRAMES */
.frames-9 { background-size: 900% 100%; }
.frames-9.idle   { animation: play-9-loop 0.8s steps(9) infinite; }
.frames-9.walk   { animation: play-9-loop 0.5s steps(9) infinite; }
.frames-9.attack { animation: play-9-once 0.5s steps(8) forwards; }
.frames-9.damage { animation: play-9-once 0.5s steps(8) forwards; }
@keyframes play-9-loop { 100% { background-position-x: 112.5%; } }
@keyframes play-9-once { 100% { background-position-x: 100%; } }

/* TENGU BULLET */
.tengu-bullet {
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 100;
    transition: transform 0.8s linear;
    image-rendering: pixelated;
    transform-origin: center;
}

/* ------------------------------------------------------------ */

/* Arma antiga desativada */
.fighter-weapon { display: none !important; }

/* Animação quando sofre dano - Corrigido para não bugar o tamanho */
@keyframes shakeHit {
    0% { transform: translateX(-50%) rotate(0); filter: brightness(1); }
    25% { transform: translateX(-50%) rotate(-5deg); filter: brightness(1.5) sepia(1.2); }
    50% { transform: translateX(-50%) rotate(5deg); }
    75% { transform: translateX(-50%) rotate(-2deg); }
    100% { transform: translateX(-50%) rotate(0); filter: brightness(1); }
}
.hit-effect { 
    animation: shakeHit 0.3s ease-out; 
}

.damage-number { position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5em; font-weight: bold; color: yellow; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; animation: move-up 1s ease-out forwards; pointer-events: none; z-index: 10;}
@keyframes move-up { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -150%) scale(1.5); } }

/* --- Estilos Comuns de Modais --- */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.75); justify-content: center; align-items: center; z-index: 1000; padding: 20px; }
.modal-content { background-color: #1e1e1e; padding: 30px; border-radius: 10px; border: 2px solid white; text-align: center; max-width: 500px; }
.modal-content h2 { margin-top: 0; color: #ff4400; }
.modal-buttons { margin-top: 20px; display: flex; justify-content: center; gap: 15px; }
.modal-buttons button { padding: 10px 20px; font-size: 16px; font-weight: bold; border: 2px solid white; border-radius: 5px; cursor: pointer; }
#confirm-yes-button { background-color: #cc2200; color: white; }
#confirm-yes-button:hover { background-color: #ff4400; }
#confirm-no-button { background-color: #555; color: white; }
#confirm-no-button:hover { background-color: #777; }
#modal-upgrade-button.hidden { display: none; }
#modal-close-button { background-color: #555; color: white; }
#modal-close-button:hover { background-color: #777; }

/* Botões do Modal de Cooldown */
#cd-confirm-btn { background-color: #008800; border-color: #00aa00; }
#cd-confirm-btn:hover { background-color: #00cc00; }
#cd-cancel-btn { background-color: #555; border-color: #777; }
#cd-goto-store-btn { background-color: #cc9900; border-color: #ffcc00; }

.icon-small { width: 20px; height: 20px; vertical-align: middle; }

/* --- CONTROLES DE ÁUDIO DA ARENA --- */
.audio-controls-container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 30; /* Fica acima de tudo na arena */
    display: flex;
    gap: 10px;
}

.audio-btn {
    background-color: rgba(20, 20, 20, 0.8);
    border: 2px solid #555;
    color: white;
    font-size: 1.2em;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

.audio-btn:hover {
    background-color: rgba(60, 60, 60, 0.9);
    border-color: #fff;
    transform: scale(1.1);
}

.audio-btn.muted {
    background-color: rgba(150, 30, 0, 0.8);
    border-color: #ff4444;
    opacity: 0.7;
}

/* REGRA INTELIGENTE: Tamanho específico para a animação de ataque da Katana (64px * 3 = 192px) */
.fighter-raider[data-weapon="Katana"].attack { 
    width: 192px; 
    height: 192px; 
}

/* --- REWARDS MODAL (ESTILO STREAM RAIDERS CLASSIC) --- */
.sr-rewards-content {
    background-color: #1e1e24; /* Fundo cinza escuro/azulado clássico */
    border: 2px solid #444;
    border-radius: 8px;
    padding: 0 0 30px 0; /* Padding zero no topo para colar o banner */
    text-align: center;
    width: 500px;
    max-width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    position: relative;
    animation: dropIn 0.3s ease-out forwards;
}

.sr-victory-banner {
    background-color: #0077cc; /* Azul clássico de header de modal */
    border-bottom: 2px solid #005599;
    padding: 15px;
    border-radius: 6px 6px 0 0;
    margin-bottom: 20px;
}

.sr-victory-banner h2 {
    margin: 0;
    color: white;
    font-size: 2.5em;
    font-weight: bold;
    text-shadow: 2px 2px 0px #000;
    letter-spacing: 2px;
}

.sr-rewards-subtitle {
    color: #ffcc00;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 1px 1px 0px #000;
}

.sr-rewards-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

/* Os cartõezinhos quadrados de loot */
.sr-reward-card {
    background-color: #2a2a35;
    border: 2px solid #555;
    border-radius: 5px;
    width: 120px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.sr-reward-card img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 10px;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.8));
}

.sr-reward-amt {
    font-size: 1.4em;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 0px #000;
}

#reward-coins { color: #ffdd44; }
#reward-scrolls { color: #00ccff; }

/* Resumo do cofre */
.sr-total-vault {
    font-size: 1.1em;
    color: #ccc;
    margin-bottom: 25px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}

.sr-total-vault span {
    color: #ffdd44;
    font-weight: bold;
}

/* Botão de Continue */
.sr-continue-btn {
    background-color: #009900;
    color: white;
    border: 2px solid #00cc00;
    padding: 12px 40px;
    font-size: 1.4em;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-shadow: 1px 1px 0px #000;
    transition: background-color 0.2s;
}

.sr-continue-btn:hover {
    background-color: #00bb00;
}

@keyframes dropIn {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- LOOT ALLOCATION UI --- */
.allocation-section {
    background-color: rgba(0,0,0,0.3);
    padding: 15px;
    border-radius: 8px;
    margin: 0 20px 20px 20px;
    border: 1px solid #444;
}

.card-label {
    font-size: 0.75em;
    color: #aaa;
    margin-top: 5px;
    text-transform: uppercase;
}

.slider-container {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #555;
}

.slider-container label {
    display: block;
    color: #fff;
    font-weight: bold;
    margin-bottom: 10px;
}

#split-slider {
    width: 80%;
    accent-color: #ffcc00;
    cursor: pointer;
}

.split-info {
    font-size: 0.9em;
    color: #ccc;
    margin-top: 10px;
}

/* --- BONUS CHEST SECTION --- */
.bonus-raiders-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 0 20px 20px 20px;
}

.bonus-raider-card {
    background-color: #2a2a35;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 10px;
    width: 100px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bonus-raider-card img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 5px;
    border: 2px solid #00aaff;
}

.bonus-raider-card span {
    font-size: 0.8em;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.bonus-raider-card:hover { background-color: #3a3a45; border-color: #888; }
.bonus-raider-card.selected { border-color: #ffcc00; background-color: #4a4a00; box-shadow: 0 0 10px #ffcc00; }

#rewards-confirm-btn:disabled { background-color: #444; border-color: #555; color: #888; cursor: not-allowed; }

/* =========================================================================
   NOVAS ADIÇÕES: SANGRAMENTO (FACA) E AJUSTE DO SCROLL
   ========================================================================= */

/* AJUSTE PARA CENTRALIZAR O SCROLL PARA A DIREITA NA TELA DE LOOT */
#reward-scrolls-container img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.8));
    transform: translateX(8px); 
}

/* CLASSE DE SANGRAMENTO (BLEED) PARA A FACA */
.damage-number.bleed {
    color: #ff2222;
    text-shadow: 2px 2px 0px #500000, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black, 1px 1px 0px black;
    font-size: 2em; 
    animation: floatUpBleed 1.5s ease-out forwards;
}

/* ANIMAÇÃO ESPECÍFICA DO SANGRAMENTO */
@keyframes floatUpBleed {
    0% { opacity: 1; transform: translate(-50%, 0) scale(0.9); }
    20% { transform: translate(-50%, -15px) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -60px) scale(0.9); }
}


/* =========================================================================
   NOVA SEÇÃO: BATTLE PASS REFORMULADO (BANNER ESTILO GAME)
   ========================================================================= */

.battle-pass-container {
    position: relative;
    background-image: url('/images/backgrounds/bp_bg.png');
    background-size: cover;
    background-position: center;
    border: 2px solid #555;
    border-radius: 12px;
    padding: 30px;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
    image-rendering: pixelated;
}

.bp-bg-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(15,15,20,0.95) 0%, rgba(15,15,20,0.6) 100%);
    z-index: 0;
}

.bp-header-banner, .bp-milestone-wrapper, .bp-infinite-wrapper {
    position: relative;
    z-index: 2;
}

/* --- Cabeçalho Interativo em Estilo Banner Arcade --- */
.bp-header-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(20,20,30,0.9) 0%, rgba(40,20,10,0.8) 100%);
    border: 2px solid #ffaa00; /* Borda dourada */
    border-radius: 12px;
    padding: 20px 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 0 20px rgba(255,170,0,0.2);
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
}

/* Brilho animado que passa pelo banner */
.bp-header-banner::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 30%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-25deg);
    animation: banner-sweep 5s infinite;
}

@keyframes banner-sweep {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

.bp-season-tag {
    background: linear-gradient(90deg, #cc2200, #ff4400);
    color: white;
    padding: 5px 15px;
    border-radius: 4px; 
    font-weight: 900;
    font-size: 0.85em;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 10px;
    box-shadow: 2px 2px 0px #550000;
    text-transform: uppercase;
}

.bp-banner-title {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 3.5em;
    margin: 5px 0;
    background: linear-gradient(to bottom, #ffffff 0%, #ffcc00 50%, #ff6600 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    letter-spacing: 3px;
    filter: drop-shadow(4px 4px 0px #551100) drop-shadow(2px 2px 5px rgba(0,0,0,0.8));
    transform: perspective(500px) rotateX(10deg);
    transition: transform 0.3s ease;
}

.bp-banner-title:hover {
    transform: perspective(500px) rotateX(0deg) scale(1.02);
}

.bp-banner-desc {
    font-size: 1.1em;
    color: #eee;
    margin: 10px 0 0 0;
    text-shadow: 1px 1px 0px #000;
    background-color: rgba(0,0,0,0.6);
    padding: 10px 15px;
    border-left: 5px solid #ffcc00;
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.highlight-bamboo {
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
}

.bp-banner-right {
    text-align: right;
    z-index: 10; /* Para ficar acima do reflexo e não bugar */
}

.bp-progress-label {
    font-size: 0.9em;
    color: #aaa;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

.bp-progress-value {
    font-size: 2em;
    font-weight: bold;
    color: #ffcc00;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    text-shadow: 2px 2px 0px #000;
    margin-top: 5px;
}

.bp-bamboo-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(1px 1px 1px black);
}


/* O Container permite que a trilha role (scroll horizontal) se tiver muitos itens */
.bp-milestone-wrapper {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 20px;
    margin-top: 10px;
}

.bp-milestone-wrapper::-webkit-scrollbar {
    height: 10px;
}
.bp-milestone-wrapper::-webkit-scrollbar-track {
    background: #111;
    border-radius: 5px;
    border: 1px solid #333;
}
.bp-milestone-wrapper::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 5px;
}
.bp-milestone-wrapper::-webkit-scrollbar-thumb:hover {
    background: #ffcc00;
}

/* A trilha principal onde a linha de fundo, a linha de preenchimento e os nós ficam */
.bp-track {
    position: relative;
    /* Tamanho garantido para as 10 bolinhas não se apertarem */
    min-width: 1600px; 
    height: 250px;
}

/* Linha de Fundo e Linha Dourada */
.bp-line-bg, .bp-line-fill {
    position: absolute;
    left: 70px; 
    right: 70px; 
    top: 160px;
    height: 8px;
    transform: translateY(-50%);
    border-radius: 4px;
}

.bp-line-bg {
    background-color: #222;
    border: 2px solid #111;
    z-index: 1;
}

.bp-line-fill {
    width: 0%; 
    max-width: 100%;
    background: linear-gradient(90deg, #88cc00, #ffcc00);
    z-index: 2;
    box-shadow: 0 0 10px #ffcc00;
    border: none;
}

/* Container flex que espalha as cartas e bolinhas perfeitamente pelo espaço de 1600px */
.bp-nodes-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 3;
}

/* Cada Ponto/Recompensa na trilha */
.bp-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 140px; 
    height: 250px;
}

/* A caixa de prêmio em cima da linha */
.bp-node-top { 
    height: 140px; 
    display: flex; 
    align-items: flex-end; 
    padding-bottom: 10px;
}

.bp-node-reward {
    background: linear-gradient(180deg, #2a2a2e 0%, #1a1a1e 100%);
    border: 2px solid #555;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    width: 130px;
    height: 130px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
    transition: transform 0.2s, box-shadow 0.2s;
}

.bp-node-reward:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.7);
}

.bp-reward-level {
    font-size: 0.8em;
    color: #ffcc00;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: auto; 
}

/* Container fixo com img contida para não estourar layout */
.bp-reward-img-container {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
}

.bp-reward-img-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.8));
}

.bp-reward-title {
    font-size: 0.9em;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
    margin-top: auto; 
}

/* MARCO CENTRAL (A BOLINHA DE CUSTO) */
.bp-node-middle { 
    height: 40px; 
    display: flex; 
    align-items: center;
    z-index: 5; 
    position: relative;
}

.bp-node-marker {
    width: 40px; 
    height: 40px;
    border-radius: 50%;
    background: #1a1a1e; 
    border: 3px solid #555;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9em;
    color: #ccc;
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

/* O espaço embaixo da linha, onde fica o botão de Claim */
.bp-node-bottom { 
    height: 70px; 
    display: flex; 
    align-items: flex-start; 
    justify-content: center;
    width: 100%;
    padding-top: 15px;
}

/* BOTÕES INTERATIVOS MELHORADOS */
.bp-btn {
    width: 110px;
    padding: 8px 0;
    border-radius: 6px;
    font-weight: 900;
    font-size: 0.85em;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4);
}

.bp-btn-locked {
    background-color: #222;
    color: #666;
    border: 2px dashed #444;
    cursor: not-allowed;
    box-shadow: none;
}

.bp-btn-claim {
    background: linear-gradient(180deg, #00ff00 0%, #009900 100%);
    color: white;
    border: 2px solid #aaffaa;
    cursor: pointer;
    animation: pulse-claim 1.5s infinite alternate;
}

.bp-btn-claim:hover {
    background: linear-gradient(180deg, #33ff33 0%, #00cc00 100%);
    transform: scale(1.05);
    box-shadow: 0 0 15px #00ff00;
}

.bp-btn-claimed {
    background-color: #1a331a;
    color: #00aa00;
    border: 2px solid #005500;
    cursor: not-allowed;
    box-shadow: none;
}

@keyframes pulse-claim {
    from { box-shadow: 0 0 5px #00ff00; }
    to { box-shadow: 0 0 15px #00ff00; }
}

/* ESTADOS DAS CARTAS NA TRILHA */
.bp-node.unlocked .bp-node-reward { border-color: #ffcc00; }
.bp-node.unlocked .bp-node-marker { 
    border-color: #ffcc00; 
    background: #554400; 
    color: #ffcc00; 
    box-shadow: 0 0 12px #ffcc00; 
}

.bp-node.claimed .bp-node-reward { border-color: #00aa00; opacity: 0.6; }
.bp-node.claimed .bp-node-marker { 
    border-color: #00aa00; 
    background: #003300; 
    color: #00ff00; 
}

/* REGRAS PARA A SEÇÃO INFINITA */
.bp-infinite-wrapper {
    background-color: rgba(20, 20, 30, 0.8);
    border: 2px dashed #00aaff;
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    margin-top: 40px;
}
.bp-infinite-title {
    color: #00aaff;
    margin-top: 0;
    font-size: 2em;
    font-style: italic;
    letter-spacing: 2px;
}
.bp-infinite-progress-box {
    margin: 20px 0;
    background-color: rgba(0,0,0,0.6);
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #333;
}
.bp-infinite-cards-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.bp-infinite-card {
    background-color: #222;
    border: 2px solid #444;
    border-radius: 8px;
    padding: 20px;
    width: 220px;
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bp-infinite-card:hover {
    transform: translateY(-5px);
    border-color: #00aaff;
}
.bp-infinite-card .bp-btn { width: 100%; margin-top: 15px; padding: 12px 0; font-size: 1.1em;}

/* =========================================================
   FORÇAR SCROLL DE CELULAR (VIA JAVASCRIPT DETECT)
   ========================================================= */

body.mobile-mode, 
body.mobile-mode html {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

body.mobile-mode .dashboard-layout {
    display: block !important; 
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
}

body.mobile-mode .dashboard-header {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    height: auto !important;
    padding: 15px !important;
    position: relative !important;
}

body.mobile-mode .currency-info {
    flex-wrap: wrap !important;
    justify-content: center !important;
}

body.mobile-mode .dashboard-content {
    display: block !important;
    height: auto !important;
    overflow: visible !important; 
    padding: 15px !important;
    padding-bottom: 160px !important; 
}

body.mobile-mode .dashboard-sidebar {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding-top: 0 !important;
    z-index: 99999 !important;
    background: #111 !important;
    border-top: 2px solid #444 !important;
}

body.mobile-mode .dashboard-sidebar nav ul {
    display: flex !important;
    overflow-x: auto !important;
    padding: 10px 0 !important;
    -webkit-overflow-scrolling: touch !important;
}

body.mobile-mode .dashboard-sidebar nav ul li {
    min-width: 90px !important;
    flex: 1 !important;
    text-align: center !important;
    margin: 0 !important;
}

body.mobile-mode .dashboard-sidebar nav a {
    padding: 10px !important;
    font-size: 0.85em !important;
    border: none !important;
}
body.mobile-mode .dashboard-sidebar nav a.active-link {
    border-left: none !important;
    border-bottom: 4px solid #00ff00 !important;
}

body.mobile-mode .dojo-card-grid, 
body.mobile-mode .shop-grid,
body.mobile-mode #weapons-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 15px !important;
}

body.mobile-mode #campaign-map-container {
    height: 350px !important;
    border-width: 2px !important;
}

body.mobile-mode .map-node {
    width: 25px !important;
    height: 25px !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
}

body.mobile-mode .modal-content, 
body.mobile-mode .sensei-modal-content {
    width: 95% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

body.mobile-mode .bp-header-banner,
body.mobile-mode .bp-infinite-cards-container {
    flex-direction: column !important;
    text-align: center !important;
}

/* --- ESTILOS DO BOTÃO DO DISCORD COM ANIMAÇÃO --- */
.bottom-discord-area {
    width: 100%;
    padding: 25px 10px;
    background-color: #151515;
    border-top: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    box-shadow: inset 0 10px 15px -10px rgba(0,0,0,0.8);
}

.discord-button-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 12px;
    width: 100%;
    text-align: center;
}

.discord-button-img {
    width: 85px; 
    height: auto;
    /* Animação que faz o ícone pulsar e brilhar o tempo todo */
    animation: discordPulseGlow 2s infinite alternate ease-in-out;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.discord-text {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    color: #ffcc00; /* Cor dourada para combinar com a temática do jogo */
    text-shadow: 1px 1px 2px black;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Efeito extra ao passar o mouse */
.discord-button-link:hover .discord-button-img {
    animation: none; /* Pausa o pulsar lento */
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 0 20px rgba(255, 204, 0, 1));
}

.discord-button-link:hover .discord-text {
    color: #ffffff;
    transform: scale(1.05);
}

@keyframes discordPulseGlow {
    0% {
        transform: scale(1) translateY(0px);
        filter: drop-shadow(0 0 5px rgba(255, 170, 0, 0.4));
    }
    100% {
        transform: scale(1.08) translateY(-5px);
        filter: drop-shadow(0 0 15px rgba(255, 204, 0, 0.9));
    }
}