:root {
    --bg-color: #050510;
    --console-bg: #141420;
    --console-border: #404050;
    --neon-purple: #8f56e3;
    --neon-green: #2ecc71;
    --neon-blue: #4d9be6;
    --neon-red: #ff0055;
    --text-main: #d0d0e0;
    --accent-gold: #f1c40f;
    --accent-silver: #bdc3c7;
    --accent-bronze: #cd7f32;
    --font-header: 'Press Start 2P', cursive;
    --font-body: 'VT323', monospace;
}

* { box-sizing: border-box; outline: none; }

body {
    background-color: var(--bg-color);
    background-image: 
        linear-gradient(var(--console-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--console-border) 1px, transparent 1px);
    background-size: 30px 30px;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 1.2rem;
    margin: 0; padding: 0;
    min-height: 100vh;
}

body::after {
    content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 2px);
    pointer-events: none; z-index: 9999;
}

@keyframes border-flicker {
    0% { border-color: var(--neon-blue); box-shadow: 0 0 5px var(--neon-blue); }
    2% { border-color: #fff; box-shadow: 0 0 15px #fff, inset 0 0 5px #fff; } 
    4% { border-color: var(--neon-blue); box-shadow: 0 0 5px var(--neon-blue); }
    8% { opacity: 0.8; }
    9% { opacity: 1; }
    100% { border-color: var(--neon-blue); box-shadow: 0 0 5px var(--neon-blue); }
}

#landing-page {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-color); z-index: 20000;
    display: flex; align-items: center; justify-content: center;
    overflow-y: auto; padding: 20px;
}
.auth-terminal {
    background: var(--console-bg);
    border: 4px solid #000;
    box-shadow: 0 0 0 2px var(--console-border), 0 0 40px rgba(143, 86, 227, 0.2);
    padding: 40px; width: 100%; max-width: 450px;
    text-align: center;
}
.auth-logo { font-family: var(--font-header); font-size: 1.5rem; color: var(--neon-purple); margin-bottom: 10px; text-shadow: 3px 3px #000; }
.auth-welcome { font-size: 1rem; color: #888; margin-bottom: 30px; border-bottom: 1px dashed #333; padding-bottom: 20px; }

.auth-input {
    width: 100%; background: #000; border: 1px solid #333;
    color: var(--neon-green); padding: 12px; margin-bottom: 10px;
    font-family: var(--font-body); font-size: 1.1rem;
}
.auth-input:focus { border-color: var(--neon-blue); box-shadow: 0 0 10px rgba(77, 155, 230, 0.2); }

.pass-wrapper { position: relative; margin-bottom: 10px; width: 100%; }
.pass-wrapper input { margin-bottom: 0; padding-right: 40px; }
.pass-eye { 
    position: absolute; right: 10px; top: 12px; 
    color: #555; cursor: pointer; transition: 0.2s; z-index: 10;
}
.pass-eye:hover { color: var(--neon-blue); }

.auth-btn {
    width: 100%; padding: 12px; border: none; cursor: pointer;
    font-family: var(--font-header); font-size: 0.8rem; margin-top: 10px;
    text-transform: uppercase; transition: 0.2s;
}
.btn-login { background: var(--neon-green); color: #000; }
.btn-login:hover { box-shadow: 0 0 15px var(--neon-green); }
.btn-google { background: #fff; color: #333; margin-top: 10px; }

.auth-links { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; }
.auth-link { color: #888; cursor: pointer; text-decoration: underline; }
.auth-link:hover { color: #fff; }

.checkbox-wrapper { display: flex; align-items: flex-start; gap: 10px; text-align: left; font-size: 0.8rem; color: #aaa; margin: 10px 0; }
.checkbox-wrapper input { margin-top: 3px; }

#app-content { display: none; padding-top: 60px; }

.console-container {
    max-width: 1100px; margin: 0 auto;
    background: var(--console-bg);
    border: 4px solid #000;
    box-shadow: inset 0 0 0 2px var(--console-border), 0 0 30px rgba(143, 86, 227, 0.3);
    padding: 20px; position: relative;
}

.top-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 60px; 
    background: #080808; border-bottom: 2px solid var(--neon-purple);
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    z-index: 10000; display: flex; align-items: center; padding: 0 20px; gap: 20px;
}

.logo-area { font-family: var(--font-header); font-size: 1rem; color: var(--neon-purple); display:flex; gap:10px; align-items:center; text-shadow: 2px 2px #000; white-space:nowrap; }

/* SEARCH ATUALIZADO */
.global-search-container { flex-grow: 1; max-width: 500px; position: relative; display: flex; align-items: center; }
.global-search-input {
    width: 100%; background: #1a1a1a; border: 1px solid #333;
    color: #fff; padding: 8px 40px 8px 15px; border-radius: 20px;
    font-family: var(--font-body); font-size: 1.1rem;
    transition: 0.2s;
}
.global-search-input:focus { border-color: var(--neon-blue); box-shadow: 0 0 10px rgba(77, 155, 230, 0.3); }

.search-btn-absolute {
    position: absolute; right: 10px; background: transparent; border: none;
    color: #666; cursor: pointer; font-size: 1rem; transition: 0.2s; z-index: 10;
}
.search-btn-absolute:hover { color: var(--neon-blue); transform: scale(1.1); }

.search-results-dropdown {
    position: absolute; top: 45px; left: 0; width: 100%;
    background: #111; border: 1px solid #333; border-radius: 8px;
    max-height: 300px; overflow-y: auto; display: none;
    box-shadow: 0 10px 20px #000; z-index:100;
}
.search-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid #222; cursor: pointer; transition: 0.2s; }
.search-item:hover { background: #222; border-left: 2px solid var(--neon-blue); padding-left: 15px; }
.search-item img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.search-item.friend { border-left: 3px solid var(--neon-green); background: rgba(46, 204, 113, 0.05); }

.nav-icons { display: flex; gap: 15px; margin-left: auto; }
.nav-icon-btn { 
    position: relative; width: 35px; height: 35px;
    background: transparent; border: 1px solid #333;
    color: #888; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.nav-icon-btn:hover { color: #fff; border-color: var(--neon-blue); text-shadow: 0 0 5px var(--neon-blue); }
.nav-icon-btn.active { color: var(--neon-green); border-color: var(--neon-green); box-shadow: 0 0 5px var(--neon-green); }
.badge-count { position: absolute; top: -3px; right: -3px; background: var(--neon-red); color: #fff; font-size: 0.5rem; padding: 1px 3px; border-radius: 2px; }

.mini-profile-head { display:none; align-items:center; gap:10px; cursor:pointer; background:rgba(20,20,32,0.8); padding:5px 15px; border:1px solid var(--neon-blue); border-radius:20px; }
.mini-profile-head img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--neon-green); object-fit: cover; }

.dlc-dropdown {
    display: none; position: absolute; top: 55px; right: 80px; width: 300px; max-height: 250px; overflow-y: auto;
    background: #0a0a0a; border: 2px solid var(--accent-gold); box-shadow: 0 10px 30px #000; z-index: 20000; font-size: 0.9rem;
}
.dlc-dropdown.active { display: block; animation: slideDown 0.2s; }
.dlc-header { background: var(--accent-gold); color: #000; padding: 5px; font-family: var(--font-header); font-size: 0.7rem; text-align: center; }
.dlc-item { padding: 10px; border-bottom: 1px solid #333; display: flex; align-items: center; gap: 10px; color: #ccc; transition:0.2s; }
.dlc-item:hover { background: #1a1a1a; color: #fff; }

.profile-header { 
    display: flex; gap: 20px; padding: 20px; background-color: #000; 
    background-size: cover; background-position: center; border: 2px solid var(--console-border); 
    align-items: center; margin-bottom: 20px; flex-wrap: wrap; position: relative; overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.profile-header::before {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.2) 100%); z-index: 1;
}
.profile-content-wrap { position: relative; z-index: 2; display:flex; gap:20px; width:100%; align-items:center; }
.profile-avatar { width: 100px; height: 100px; border: 3px solid var(--neon-blue); box-shadow: 0 0 15px var(--neon-blue); overflow: hidden; background: #000; flex-shrink: 0; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-info { flex-grow: 1; display:flex; flex-direction:column; justify-content:center; }
.profile-nick { font-family: var(--font-header); font-size: 1.5rem; color: var(--neon-green); margin-bottom: 5px; text-shadow: 2px 2px #000; }
.profile-bio { font-size: 1rem; color: #ccc; margin-bottom: 10px; }
.profile-stats { display: flex; gap: 20px; font-size: 0.9rem; color: #888; margin-bottom: 10px; }
.stat-item { cursor:pointer; transition:0.2s; }
.stat-item:hover { color:#fff; text-shadow:0 0 5px #fff; }
.stat-num { color: var(--accent-gold); font-weight: bold; }

/* Dashboard e outras áreas */
.dashboard-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-areas: "activeChallenges top10" "missionReport records";
    gap: 20px; margin-bottom: 20px; 
}
.area-challenges { grid-area: activeChallenges; }
.area-top10 { grid-area: top10; }
.area-mission { grid-area: missionReport; }
.area-records { grid-area: records; }
.panel-box { background: var(--console-bg); border: 4px solid #000; padding: 0; box-shadow: 5px 5px 0 #000; height: 100%; }
.panel-header { background: #000; color: var(--neon-purple); font-family: var(--font-header); font-size: 0.8rem; padding: 10px; border-bottom: 2px solid var(--console-border); display: flex; justify-content: space-between; align-items: center; }
.panel-content { padding: 15px; }

/* CHALLENGE & HP BAR */
.challenge-row { background: #0a0a0a; border: 1px solid #333; padding: 10px; margin-bottom: 10px; position:relative; }
.challenge-name { color: #fff; font-weight: bold; display: block; margin-bottom: 5px; font-size: 1rem; }
.challenge-meta { display:flex; justify-content:space-between; font-size:0.8rem; color:#ccc; }

.hp-track {
    width: 100%; height: 24px; background: #0e0e0e; border: 2px solid #555;
    margin-top: 8px; position: relative; box-shadow: 2px 2px 0px #000;
}
.hp-fill {
    height: 100%; background: linear-gradient(90deg, #e74c3c, #f1c40f, #2ecc71);
    transition: width 0.6s ease-out; position: relative; overflow: hidden; 
}
.hp-fill::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(0,0,0,0.8) 4px, rgba(0,0,0,0.8) 5px);
    z-index: 2; pointer-events: none;
}
.challenge-from { font-size: 0.7rem; color: var(--neon-blue); margin-top: 5px; font-style: italic; }

.challenge-actions { display: flex; gap: 5px; margin-top: 5px; }

/* TOP 10 */
.rank-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 10px; margin-bottom: 6px; background: #080808; border: 1px solid #333; transition: 0.2s;
}
.rank-info { display:flex; align-items:center; gap:10px; }
.rank-pos { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-family: var(--font-header); font-size: 0.8rem; border: 2px solid #333; background: #000; color: #555; }
.rank-score { text-align: right; line-height: 1; }
.rank-val { color: var(--accent-gold); font-weight: bold; }
.rank-clears { font-size: 0.7rem; color: #666; }

.rank-1 { border: 2px solid var(--accent-gold); background: rgba(241, 196, 15, 0.1); box-shadow: 0 0 10px rgba(241, 196, 15, 0.3); animation: glowGold 2s infinite alternate; }
.rank-1 .rank-pos { background: var(--accent-gold); color: #000; font-weight:bold; }
@keyframes glowGold { from { box-shadow: 0 0 5px var(--accent-gold); } to { box-shadow: 0 0 15px var(--accent-gold); } }
.rank-2 { border: 2px solid var(--accent-silver); background: rgba(189, 195, 199, 0.1); }
.rank-2 .rank-pos { background: var(--accent-silver); color: #000; font-weight:bold; }
.rank-3 { border: 2px solid var(--accent-bronze); background: rgba(205, 127, 50, 0.1); }
.rank-3 .rank-pos { background: var(--accent-bronze); color: #000; font-weight:bold; }
.rank-4-5 { border-left: 4px solid var(--neon-green); border-top: 1px solid #222; border-right: 1px solid #222; border-bottom: 1px solid #222; }
.rank-4-5 .rank-pos { color: var(--neon-green); border-color: var(--neon-green); }
.rank-6-10 { border-left: 4px solid #444; opacity: 0.8; }
.rank-6-10:hover { opacity: 1; border-color: #666; }

/* MISSION TABLE */
.mission-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-family: var(--font-body); }
.mission-table th { text-align: left; border-bottom: 2px solid #444; color: var(--neon-purple); padding: 8px 4px; font-family: var(--font-header); font-size: 0.7rem; }
.mission-table td { border-bottom: 1px solid #222; padding: 6px 4px; color: #888; }
.mission-table .highlight { color: var(--neon-green); font-weight: bold; }
.mission-table tr:last-child td { border-top: 2px solid #555; border-bottom: none; color: #fff; padding-top: 10px; }

.record-row { display: flex; justify-content: space-between; border-bottom: 1px solid #222; padding: 8px 0; font-size: 0.9rem; }
.record-label { color: #888; }
.record-val { color: var(--neon-blue); font-weight: bold; }
.worst-list { font-size: 0.8rem; color: var(--neon-red); margin-top: 5px; }

input, select { width: 100%; background: #000; border: 1px solid #333; color: var(--neon-green); font-family: var(--font-body); font-size: 1rem; padding: 5px; margin-bottom: 5px; height: 35px; }
.form-row { display: flex; gap: 10px; }
.settings-grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.settings-card { background: #0e0e0e; border: 1px solid #333; padding: 15px; }
.settings-card h3 { color: var(--neon-purple); border-bottom: 1px solid #333; padding-bottom: 5px; font-size: 0.9rem; margin-top: 0; font-family: var(--font-header); }
.full-width { grid-column: span 2; }

.game-cartridge { background: #1a1a1a; border: 2px solid #000; margin-bottom: 15px; display: flex; box-shadow: 4px 4px 0 #000; min-height: 110px; position:relative; transition: 0.2s; }
.game-cartridge:hover { animation: border-flicker 1.5s infinite; transform:translateY(-2px); }

.cart-art { width: 90px; background: #000; flex-shrink: 0; position: relative; overflow: hidden; border-right: 2px solid #000; display:flex; align-items:center; justify-content:center; cursor: pointer; transition: 0.2s; }
.cart-art:hover { opacity: 0.8; }
.cart-art img { width: 100%; height: 100%; object-fit: contain; }
.cart-body { padding: 10px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.cart-title { font-size: 1.3rem; color: #fff; line-height: 1.1; margin-bottom:2px; cursor: pointer; display:flex; align-items:center; gap:5px; }
.cart-title:hover { color: var(--neon-blue); }
.cart-meta { font-size: 0.85rem; color: #aaa; margin-bottom: 5px; }

.scores-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.score-mini { font-size: 0.7rem; color: #666; display: flex; align-items: center; gap: 3px; border: 1px solid #333; padding: 1px 4px; border-radius: 4px; }
.score-mini i { color: var(--neon-purple); font-size: 0.6rem; }

/* RANK PC */
.rank-box-absolute { 
    position: absolute; right: 15px; top: -8px; 
    height: 55px; width: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #000; border: 2px solid var(--neon-purple); box-shadow: 0 4px 10px rgba(0,0,0,0.8);
    z-index: 10; transform: rotate(-2deg);
}
.cart-rank { font-family: var(--font-header); font-size: 1.1rem; color: var(--accent-gold); text-shadow: 2px 2px #000; line-height: 1; }
.cart-rank-label { font-size: 0.5rem; color: #8f56e3; text-transform: uppercase; margin-top: 2px; }
.delete-btn-area { position: absolute; bottom: 5px; right: 90px; }

.btn { background: #222; border: 2px solid #555; color: #aaa; font-family: var(--font-header); font-size: 0.7rem; padding: 10px 15px; cursor: pointer; text-transform: uppercase; box-shadow: 0 4px 0 #000; transition: 0.1s; }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 #000; }
.btn-green { background: var(--neon-green); border-color: #27ae60; color: #000; }
.btn-red { background: var(--neon-red); border-color: #c0392b; color: #fff; }
.btn-red-pulse { animation: pulseRed 0.5s infinite alternate; background: var(--neon-red); color: #fff; }
@keyframes pulseRed { from { opacity: 1; } to { opacity: 0.5; } }

.gg-btn {
    border: 1px solid var(--accent-gold); background: #000; color: var(--accent-gold);
    padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; font-family: var(--font-header);
    transition: 0.2s; display: flex; align-items: center; gap: 5px;
}
.gg-btn:hover { background: var(--accent-gold); color: #000; box-shadow: 0 0 10px var(--accent-gold); }
.gg-btn.active { background: var(--accent-gold); color: #000; box-shadow: inset 0 0 5px #000; }

.page-section { display: none; }
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95); z-index:25000; align-items:center; justify-content:center; }
.modal-box { background:#000; border:2px solid var(--neon-purple); padding:20px; width: 350px; max-height: 90vh; overflow-y: auto; }
.close-modal { position: absolute; top: 10px; right: 10px; cursor: pointer; color: #555; font-size: 1.5rem; }
.crop-container { width: 100%; height: 300px; background: #333; margin-bottom: 15px; }
#imageToCrop { max-width: 100%; display: block; }
.year-tabs-container { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #333; }
.year-tab { background: #111; color: #666; border: 1px solid #333; padding: 5px 15px; cursor: pointer; font-family: var(--font-header); font-size: 0.7rem; white-space: nowrap; }
.year-tab.active { background: var(--neon-purple); color: #fff; }

.game-modal-wide { width: 600px; border-color: var(--neon-green); }
.rating-grid-modal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; border: 1px dashed #333; padding: 10px; }
.rating-item { display: flex; justify-content: space-between; align-items: center; }
.rating-item label { font-size: 0.8rem; color: #ccc; }
.rating-item select { width: 60px; height: 30px; }
.modal-footer-btn { margin-top: 15px; border-top: 1px dashed #333; padding-top: 10px; text-align: right; }

/* FIX MOBILE */
@media(max-width: 700px) {
    .top-bar { gap: 10px; padding: 0 10px; }
    .logo-area span { display: none; }
    .dashboard-grid { grid-template-columns: 1fr; grid-template-areas: "activeChallenges" "top10" "missionReport" "records"; }
    .settings-grid-container { grid-template-columns: 1fr; }
    .full-width { grid-column: span 1; }
    .profile-content-wrap { flex-direction: column; text-align: center; }
    .cart-body { flex-direction: column; align-items: flex-start; gap: 10px; }
    .cart-rank { align-self: flex-end; }
    .form-row { flex-wrap: wrap; }
    .rating-grid { grid-template-columns: 1fr 1fr; }
    .social-area { align-items: center; }
    .game-modal-wide { width: 95%; }
    .rating-grid-modal { grid-template-columns: 1fr; }
    .delete-btn-area { position: relative; bottom: auto; right: auto; margin-top: 10px; }
    .rank-box-absolute { 
        position: relative; width: 100%; height: auto; right: auto; top: auto;
        transform: none; border: none; box-shadow: none; background: transparent;
        border-top: 1px dashed #333; padding: 10px; flex-direction: row; gap: 10px; 
    }
    .cart-rank { font-size: 1.5rem; }
}

/* SEARCH TABS & RESULT CARDS */
.search-header { margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.search-tabs { display: flex; gap: 10px; margin-top: 10px; }
.search-tab { background: transparent; border: 1px solid #333; color: #888; padding: 5px 15px; cursor: pointer; border-radius: 20px; font-size: 0.9rem; transition: 0.2s; }
.search-tab:hover, .search-tab.active { background: var(--neon-blue); color: #000; border-color: var(--neon-blue); }
.search-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.result-card-person { 
    display: flex; align-items: center; gap: 15px; 
    background: #0e0e0e; border: 1px solid #333; 
    padding: 15px; margin-bottom: 10px; border-radius: 8px; transition: 0.2s;
}
.result-card-person:hover { border-color: var(--neon-blue); transform: translateX(5px); }
.rc-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #333; }
.rc-info { flex: 1; }
.rc-name { color: #fff; font-weight: bold; font-size: 1.1rem; }
.rc-bio { color: #888; font-size: 0.8rem; }
.rc-btn { padding: 5px 10px; font-size: 0.7rem; }
.suggestion-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #222; }
.suggestion-item:last-child { border-bottom: none; }
.sug-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sug-info { flex: 1; overflow: hidden; }
.sug-name { font-size: 0.9rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-reason { font-size: 0.7rem; color: var(--accent-gold); }
.sug-action { font-size: 1.2rem; color: var(--neon-green); cursor: pointer; padding: 5px; }
.sug-action:hover { transform: scale(1.2); }

@media(max-width: 768px) {
    .search-layout { grid-template-columns: 1fr; }
    .search-sidebar { display: none; }
}

/* === REDES SOCIAIS: DESIGN MINIMALISTA === */

/* Container Geral */
.profile-socials-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Espaço entre as linhas */
    margin-top: 20px;
    width: 100%;
}

/* --- 1. LINHA STREAMER (Topo) --- */
.streamer-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    border-radius: 50px; /* Formato de pílula sutil */
    transition: 0.3s;
}

/* Efeito quando Modo Streamer está ATIVO: Brilho sutil no fundo, sem borda grossa */
.streamer-active-glow {
    background: radial-gradient(circle, rgba(241, 196, 15, 0.15) 0%, transparent 70%);
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.05);
    animation: pulseGlow 3s infinite alternate;
}

@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.02); opacity: 1; }
}

/* Botões Grandes (Streamer) */
.btn-big-social {
    width: 50px; height: 50px;
    font-size: 1.8rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; /* Levemente arredondado */
    background: #0a0a0a;
    border: 1px solid #222;
    color: #666;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efeito elástico */
    position: relative;
}

.btn-big-social:hover {
    transform: translateY(-5px); /* Sobe um pouquinho */
    color: #fff;
    border-color: #fff;
}

/* Cores e Marcas */
.btn-twitch:hover { background: #6441a5; border-color: #6441a5; box-shadow: 0 5px 15px rgba(100, 65, 165, 0.4); }
.btn-youtube:hover { background: #ff0000; border-color: #ff0000; box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4); }

/* KICK (Arrumado e Estiloso) */
.btn-kick {
    font-weight: 900; 
    font-family: 'Arial Black', sans-serif; /* Fonte grossa */
    letter-spacing: -2px;
}
.btn-kick:hover {
    background: #53fc18; 
    color: #000; 
    border-color: #53fc18; 
    box-shadow: 0 5px 15px rgba(83, 252, 24, 0.4);
}

/* Se Modo Streamer Ativo: Os botões ficam acesos por padrão */
.streamer-active-glow .btn-twitch { border-color: #6441a5; color: #6441a5; }
.streamer-active-glow .btn-youtube { border-color: #ff0000; color: #ff0000; }
.streamer-active-glow .btn-kick { border-color: #53fc18; color: #53fc18; }
.streamer-active-glow .btn-big-social:hover { color: #fff; } /* Hover volta a ser branco */


/* --- 2. LINHA SOCIAL (Meio - Discreta) --- */
.social-row-minimal {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-small-social {
    width: 40px; height: 40px;
    font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; /* Totalmente redondo */
    background: transparent;
    border: 1px solid #333;
    color: #888;
    text-decoration: none;
    transition: 0.2s;
}

.btn-small-social:hover {
    background: #222;
    color: var(--neon-blue);
    border-color: var(--neon-blue);
    transform: scale(1.1);
}


/* --- 3. LISTA DE ID (Fim - Elegante) --- */
.copy-ids-wrapper {
    width: 100%;
    max-width: 400px; /* Não deixa ficar muito largo */
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border: 1px solid #222;
    overflow: hidden; /* Para o border-radius funcionar */
}

.id-row-minimal {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #1a1a1a;
    transition: 0.2s;
}
.id-row-minimal:last-child { border-bottom: none; }
.id-row-minimal:hover { background: rgba(255,255,255,0.05); }

.id-icon { 
    width: 25px; 
    color: #555; 
    font-size: 1rem; 
    text-align: center;
}

.id-val { 
    flex: 1; 
    margin: 0 15px; 
    font-family: 'Consolas', monospace; 
    font-size: 0.9rem; 
    color: var(--text-main);
    letter-spacing: 0.5px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.id-copy-btn {
    background: transparent;
    border: none;
    color: #444;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.2s;
}
.id-copy-btn:hover { color: var(--neon-green); transform: scale(1.1); }

/* Adicione ao final do arquivo style.css */

/* Coop Section */
.coop-section {
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
}
.coop-section label {
    cursor: pointer;
}
.coop-section input[type="checkbox"] {
    width: auto;
    margin-right: 5px;
}
#coopCheckboxes {
    display: flex;
    flex-direction: column;
    gap: 5px;
}