/* Dynamic White-Label Variables (overridden from Firebase at runtime) */
:root {
    --bg: #121212;
    --bg-color: #121212;
    --card: #1e1e1e;
    --card-color: #1e1e1e;
    --text: #ffffff;
    --text-color: #ffffff;
    --accent: #bb86fc;
    --accent-color: #bb86fc;
    --success: #4caf50;
}
body {
    margin: 0; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-color); color: var(--text-color); padding: 20px;
}
.screen { display: none; max-width: 600px; margin: 0 auto; }
.screen.active { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.card { background: var(--card); padding: 24px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
h1, h2 { margin-top: 0; color: var(--accent); }
.info-box { background: rgba(187, 134, 252, 0.1); padding: 15px; border-radius: 8px; border-left: 4px solid var(--accent); margin-bottom: 20px; }

.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 0.9rem; color: #aaa; margin-bottom: 5px; }
input[type="text"], input[type="password"] {
    width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #333; background: #2a2a2a; color: white; font-size: 1rem; box-sizing: border-box;
}
input[type="file"] { margin-top: 5px; }

.btn { width: 100%; padding: 14px; border: none; border-radius: 8px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: 0.2s; }
.btn.primary { background: var(--accent); color: #000; }
.btn.primary:hover { background: #a370f7; }
.btn.secondary { background: #333; color: white; width: auto; padding: 8px 16px; }

.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.list-container { display: flex; flex-direction: column; gap: 10px; }
.payment-item { background: #2a2a2a; padding: 15px; border-radius: 8px; display: flex; flex-direction: column; gap: 10px; border-left: 4px solid #ff9800; }
.payment-item.approved { border-left-color: var(--success); opacity: 0.7; }
.payment-item.rejected { border-left-color: #ff5252; opacity: 0.5; }
.payment-actions { display: flex; gap: 10px; }
.payment-actions button { flex: 1; padding: 8px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
.btn-approve { background: var(--success); color: black; }
.btn-reject { background: #ff5252; color: white; }

body.light-theme {
    --bg: #f5f5f5;
    --card: #ffffff;
    --text: #121212;
}
body.light-theme .form-group label { color: #555; }
body.light-theme input[type="text"], body.light-theme input[type="password"], body.light-theme input[type="number"], body.light-theme select {
    background: #fff; border-color: #ccc; color: #000;
}
body.light-theme .payment-item { background: #f9f9f9; border: 1px solid #eee; border-left: 4px solid #ff9800; }
body.light-theme .payment-item.approved { border-left-color: var(--success); }

.faq-details { background: var(--bg); border: 1px solid #333; border-radius: 8px; margin-bottom: 10px; padding: 12px; }
.faq-details summary { font-weight: bold; cursor: pointer; outline: none; color: var(--accent); }
body.light-theme .faq-details { border-color: #ccc; }
.vip-badge { font-size: 0.8em; margin-left: 6px; padding: 2px 6px; border-radius: 12px; border: 1px solid; white-space: nowrap; }
.badge-silver { color: #b0bec5; border-color: #b0bec5; background: rgba(176,190,197,0.1); }
.badge-gold { color: #ffb300; border-color: #ffb300; background: rgba(255,179,0,0.1); }
.badge-diamond { color: #00e5ff; border-color: #00e5ff; background: rgba(0,229,255,0.1); }
.chart-container { display: flex; align-items: flex-end; justify-content: space-around; height: 150px; margin-top: 15px; border-bottom: 1px solid #555; padding-bottom: 5px; gap: 8px; }
.chart-bar { background: var(--accent); border-radius: 4px 4px 0 0; width: 100%; text-align: center; color: #fff; font-size: 0.75rem; position: relative; transition: height 0.3s; min-height: 20px; display:flex; flex-direction:column; justify-content:flex-start; padding-top:4px;}
.chart-label { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 0.7rem; color: #aaa; }
.avatar-preview { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
.safe-locked { text-align: center; padding: 30px 20px; background: rgba(244, 67, 54, 0.1); border: 1px dashed #ff5252; border-radius: 8px; color: #ff5252; }
.safe-unlocked { padding: 20px; background: rgba(76, 175, 80, 0.1); border: 1px solid #4caf50; border-radius: 8px; text-align: center; }
.content-btn { display: inline-block; padding: 12px 24px; background: #4caf50; color: #000; text-decoration: none; font-weight: bold; border-radius: 8px; margin-top: 10px; width: 100%; box-sizing: border-box; }
.churned-client { opacity: 0.8; border-left: 4px solid #ff5252 !important; }
.progress-container { background: #333; border-radius: 10px; height: 12px; width: 100%; margin: 10px 0; overflow: hidden; position: relative; }
.progress-bar-fill { background: linear-gradient(90deg, #bb86fc, #00e5ff); height: 100%; width: 0%; transition: width 0.5s ease; }
.rating-stars { display: flex; gap: 5px; font-size: 1.5rem; cursor: pointer; justify-content: center; margin-bottom: 10px; }
.star { color: #555; transition: color 0.2s; }
.star.active { color: #ffb300; }
.express-renew-btn { background: linear-gradient(135deg, #ff9800, #ff5252); color: white; font-size: 1.1rem; padding: 15px; border-radius: 8px; font-weight: bold; width: 100%; border: none; cursor: pointer; margin-bottom: 15px; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } }
.calendar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 15px; }
.calendar-card { background: var(--bg); border: 1px solid #333; padding: 10px; border-radius: 8px; text-align: center; }
.calendar-date { font-weight: bold; color: var(--accent); font-size: 0.9rem; margin-bottom: 5px; }
.achievements-container { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.achievement-badge { display: flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.05); border: 1px solid #555; padding: 5px 10px; border-radius: 15px; font-size: 0.8rem; color: #aaa; transition: 0.3s; filter: grayscale(100%); opacity: 0.5; }
.achievement-badge.unlocked { filter: grayscale(0%); opacity: 1; border-color: #ffb300; color: #fff; background: rgba(255, 179, 0, 0.1); }
.metric-box { background: #2a2a2a; padding: 15px; border-radius: 8px; flex: 1; min-width: 100px; text-align: center; border-bottom: 2px solid #bb86fc; }
.leaderboard-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #333; }
.leaderboard-item:nth-child(1) .rank { font-size: 1.5rem; color: #ffd700; }
.leaderboard-item:nth-child(2) .rank { font-size: 1.3rem; color: #c0c0c0; }
.leaderboard-item:nth-child(3) .rank { font-size: 1.2rem; color: #cd7f32; }
.rank { font-weight: bold; width: 30px; }
.ref-box { background: rgba(66, 165, 245, 0.1); border: 1px dashed #42a5f5; padding: 10px; border-radius: 8px; margin-top: 15px; font-size: 0.9rem; text-align: center; }
.ai-advice-box { background: linear-gradient(135deg, #1e1e1e, #2a2a2a); border-left: 4px solid #bb86fc; padding: 15px; border-radius: 8px; margin-top: 15px; color: #e0e0e0; font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; display: none; }
.chat-wall { background: rgba(0,0,0,0.2); border: 1px solid #333; border-radius: 8px; padding: 10px; margin-bottom: 20px; max-height: 250px; overflow-y: auto; }
.chat-msg { margin-bottom: 8px; font-size: 0.9rem; padding-bottom: 8px; border-bottom: 1px solid #2a2a2a; }
.chat-msg.mention-highlight { background: rgba(255, 179, 0, 0.2); border-left: 3px solid #ffb300; padding-left: 8px; }
.chat-nick { color: #bb86fc; font-weight: bold; cursor: pointer; }
.fomo-badge { background: #ff5252; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; margin-left: 5px; animation: pulse 2s infinite; }
.profile-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; }
.profile-card { background: var(--card); padding: 20px; border-radius: 12px; width: 90%; max-width: 400px; text-align: center; border: 1px solid var(--accent); position: relative; }
.close-modal { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; cursor: pointer; color: #aaa; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; border-radius: 8px; margin-bottom: 15px; display: none; border: 1px solid var(--accent); }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.tag-badge { display: inline-block; padding: 3px 8px; border-radius: 12px; background: rgba(187,134,252,0.1); color: #bb86fc; font-size: 0.75rem; border: 1px solid #bb86fc; margin-right: 5px; margin-bottom: 5px; }
.filter-btn { background: transparent; border: 1px solid #555; color: #aaa; padding: 5px 12px; border-radius: 15px; cursor: pointer; font-size: 0.85rem; transition: 0.3s; }
.filter-btn.active { background: #bb86fc; color: #000; border-color: #bb86fc; font-weight: bold; }
.partner-row { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #333; }
.coin-balance { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 179, 0, 0.1); color: #ffb300; padding: 5px 10px; border-radius: 20px; font-weight: bold; font-size: 0.9rem; border: 1px solid #ffb300; }
.shop-item { background: var(--bg); border: 1px solid #333; padding: 15px; border-radius: 8px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.poll-container { background: rgba(66, 165, 245, 0.1); border: 1px solid #42a5f5; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
.poll-option { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.3); padding: 10px; border-radius: 6px; margin-bottom: 8px; cursor: pointer; position: relative; overflow: hidden; }
.poll-fill { position: absolute; left: 0; top: 0; height: 100%; background: rgba(66, 165, 245, 0.3); z-index: 0; transition: width 0.3s; }
.poll-text { position: relative; z-index: 1; font-size: 0.9rem; }
.online-indicator { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: #4caf50; font-weight: bold; background: rgba(76, 175, 80, 0.1); padding: 4px 8px; border-radius: 12px; }
.online-dot { width: 8px; height: 8px; background: #4caf50; border-radius: 50%; animation: blink 2s infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
.chat-nick.gold-nick { color: #ffb300; text-shadow: 0 0 5px rgba(255,179,0,0.5); }
.reaction-emoji { position: absolute; bottom: 10px; font-size: 2rem; pointer-events: none; animation: floatUp 2.5s ease-out forwards; z-index: 1000; }
@keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-200px) scale(1.5); opacity: 0; } }
.floating-pip { position: fixed !important; bottom: 20px; right: 20px; width: 300px; height: auto; z-index: 9999; box-shadow: 0 10px 30px rgba(0,0,0,0.8); border-radius: 12px; transition: 0.3s; }
.timestamp-btn { background: rgba(187,134,252,0.1); color: #bb86fc; border: 1px solid #bb86fc; padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; margin-right: 5px; margin-bottom: 5px; display: inline-block; }
.onboarding-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; display: none; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 20px; }
.onboarding-highlight { position: relative; z-index: 10001 !important; box-shadow: 0 0 0 4px #ffb300, 0 0 20px #ffb300; border-radius: 8px; background: var(--bg); }
.crypto-box { background: rgba(0, 229, 255, 0.1); border: 1px dashed #00e5ff; padding: 15px; border-radius: 8px; margin-top: 15px; display: none; }
#cohort-table th, #cohort-table td { border: 1px solid #333; padding: 8px; }
#cohort-table th { background: #2a2a2a; color: #00e5ff; }
.cohort-high { background: rgba(76, 175, 80, 0.3); }
.cohort-med { background: rgba(255, 152, 0, 0.3); }
.cohort-low { background: rgba(244, 67, 54, 0.3); }
.audio-user { background: #2a2a2a; padding: 5px 10px; border-radius: 20px; border: 1px solid #bb86fc; font-size: 0.8rem; display: flex; align-items: center; gap: 5px; }
.audio-user.speaking { border-color: #4caf50; box-shadow: 0 0 10px #4caf50; }
.ppv-locked { position: relative; }
.ppv-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; border-radius: 8px; }

/* OBS Overlay Mode */
body.obs-mode { background: transparent !important; overflow: hidden; margin: 0; padding: 0; }
.obs-container { position: absolute; bottom: 50px; left: 50px; width: 400px; display: flex; flex-direction: column; gap: 15px; }
.obs-alert { background: rgba(0,0,0,0.8); border: 2px solid #ffb300; padding: 20px; border-radius: 12px; color: white; font-weight: bold; animation: slideInLeft 0.5s ease-out, fadeOut 1s ease-in 5s forwards; box-shadow: 0 0 20px rgba(255,179,0,0.5); display: flex; align-items: center; gap: 15px; }
@keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-20px); } }

/* CRM Tags */
.crm-tag { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: bold; background: #333; color: #fff; margin-left: 5px; cursor: pointer; }
.crm-tag.whale { background: rgba(0, 229, 255, 0.2); color: #00e5ff; border: 1px solid #00e5ff; }
.crm-tag.toxic { background: rgba(244, 67, 54, 0.2); color: #ff5252; border: 1px solid #ff5252; }

/* Smart Player */
.continue-watching-bar { background: #ff9800; height: 4px; width: 0%; transition: width 1s; position: absolute; bottom: 0; left: 0; }
.btn-cast { background: transparent; border: 1px solid #fff; color: white; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }

/* Battle Pass */
.bp-container { background: rgba(0,0,0,0.3); padding: 10px; border-radius: 8px; margin-bottom: 15px; border: 1px solid #333; }
.bp-bar-bg { width: 100%; height: 10px; background: #333; border-radius: 5px; overflow: hidden; margin-top: 5px; }
.bp-bar-fill { height: 100%; background: linear-gradient(90deg, #bb86fc, #00e5ff); width: 0%; transition: width 0.5s ease-out; }

/* Split Screen */
.video-grid { display: grid; grid-template-columns: 1fr; gap: 10px; transition: 0.3s; }
.video-grid.split { grid-template-columns: 1fr 1fr; }

/* AI Support Widget */
.ai-widget-btn { position: fixed; bottom: 20px; left: 20px; width: 50px; height: 50px; border-radius: 50%; background: #00e5ff; color: #000; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 15px rgba(0,229,255,0.4); z-index: 9999; }
.ai-chat-window { position: fixed; bottom: 80px; left: 20px; width: 300px; height: 400px; background: var(--card-color); border: 1px solid #00e5ff; border-radius: 12px; display: none; flex-direction: column; z-index: 9999; box-shadow: 0 10px 30px rgba(0,0,0,0.8); overflow: hidden; }
.btn.wl-primary { background: var(--accent-color); color: #000; }

/* Omniverse Controls */
.omni-wallet-bar { background: rgba(255,179,0,0.1); border: 1px solid #ffb300; padding: 10px; border-radius: 8px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
#btn-connect-metamask { transition: 0.2s; }
#btn-connect-metamask:hover { background: #e07415; }

/* ===== Companion Mode (Second Screen / Mobile) ===== */
body.companion-mode > *:not(script):not(link):not(style) { display: none !important; }
body.companion-mode #player-modal,
body.companion-mode .player-modal,
body.companion-mode #live-chat-container,
body.companion-mode .live-chat-header,
body.companion-mode #live-chat-messages,
body.companion-mode .live-chat-input-row,
body.companion-mode #wp-chat-container,
body.companion-mode header,
body.companion-mode nav,
body.companion-mode .video-grid,
body.companion-mode iframe { display: none !important; }
body.companion-mode #mafia-notepad-container,
body.companion-mode #live-notepad-section {
    display: block !important;
    width: 100vw; height: 100vh;
    position: fixed; top: 0; left: 0;
    z-index: 999999;
    background: #121212;
    overflow-y: auto;
    padding: 12px;
    box-sizing: border-box;
    margin: 0; border: none; border-radius: 0;
}
body.companion-mode #live-notepad-inner { display: block !important; }
body.companion-mode #mafia-notepad-container button,
body.companion-mode #live-notepad-section button {
    min-height: 36px; min-width: 36px; font-size: 1rem;
}
body.companion-mode #mafia-notepad-container input[type="text"],
body.companion-mode #mafia-notepad-container input[type="number"],
body.companion-mode #live-notepad-section input[type="text"],
body.companion-mode #live-notepad-section input[type="number"] {
    font-size: 1rem; padding: 8px 10px;
}
body.companion-mode #mafia-notepad-container table,
body.companion-mode #live-notepad-section table {
    font-size: 0.95rem;
}
body.companion-mode #mafia-notepad-container td,
body.companion-mode #live-notepad-section td {
    padding: 8px 6px;
}
#btn-enter-vr { font-weight: bold; }

/* Notepad Lock / Freeze Mode */
.notepad-locked input,
.notepad-locked textarea,
.notepad-locked .color-btn,
.notepad-locked .role-btn,
.notepad-locked .emoji-tag-btn,
.notepad-locked .macro-tag-btn,
.notepad-locked button:not(#btn-notepad-freeze):not(#notepad-day-prev):not(#notepad-day-next):not(#notepad-version-a):not(#notepad-version-b):not(#btn-truth-check):not(#btn-notepad-to-chat):not(#btn-notepad-export-img):not(#btn-notepad-qr):not(#btn-notepad-coop):not(#notepad-view-toggle):not(#btn-voting-matrix-tab):not(#btn-notepad-undo):not(#btn-notepad-redo):not(#btn-zen-mode):not(#btn-night-mode):not(#btn-notepad-sort-suspicion):not(#btn-notepad-send-streamer):not(#btn-my-reviews):not(#btn-create-branch):not(#btn-toggle-action-log):not(#mode-analytic):not(#mode-training) {
    pointer-events: none !important;
    opacity: 0.7;
}

/* Truth Checker highlights */
.guess-correct {
    background: rgba(76, 175, 80, 0.15) !important;
    outline: 1px solid #4caf50;
    outline-offset: -1px;
}
.guess-wrong {
    background: rgba(239, 83, 80, 0.15) !important;
    outline: 1px solid #ef5350;
    outline-offset: -1px;
}
.ai-dub-active { background: #4caf50 !important; color: #fff !important; }
.tension-flash { animation: tensionFlash 0.5s ease 3; }
@keyframes tensionFlash { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 30px rgba(255,82,82,0.8); } }

/* Speech-to-Text: Listening pulse */
.mic-btn.listening {
    border-color: #ef5350 !important;
    color: #ef5350 !important;
    animation: micPulse 0.8s ease-in-out infinite;
}
@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,83,80,0.5); }
    50% { box-shadow: 0 0 8px 3px rgba(239,83,80,0.6); }
}

/* Suspicion Slider */
.suspicion-slider {
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #212121, #555 45%, #888 50%, #555 55%, #ef5350);
    border-radius: 3px;
    outline: none;
}
.suspicion-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #e0e0e0;
    border: 2px solid #888;
    cursor: pointer;
}
.suspicion-slider::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #e0e0e0;
    border: 2px solid #888;
    cursor: pointer;
}
.suspicion-row { border-bottom: none !important; }

/* Matrix Alert: Red-on-Red */
@keyframes matrixAlertRedPulse {
    0%, 100% { background: rgba(255,152,0,0.25); }
    50% { background: rgba(255,235,59,0.35); }
}
.matrix-alert-red {
    animation: matrixAlertRedPulse 1.2s infinite !important;
    outline: 1px solid #ff9800;
    outline-offset: -1px;
}
/* Matrix Alert: Black-on-Black */
@keyframes matrixAlertBlackPulse {
    0%, 100% { background: rgba(103,58,183,0.25); }
    50% { background: rgba(30,30,80,0.45); }
}
.matrix-alert-black {
    animation: matrixAlertBlackPulse 1.2s infinite !important;
    outline: 1px solid #7c4dff;
    outline-offset: -1px;
}
/* Sheriff Locked Slider */
.sheriff-locked {
    outline: 2px solid #fdd835 !important;
    outline-offset: -1px;
    border-radius: 4px;
    opacity: 0.7;
    pointer-events: none;
}
/* Ghost Shadow Marker */
.ghost-shadow {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(180,180,180,0.45);
    border: 1px solid rgba(255,255,255,0.2);
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* === Genesis Update === */
#bci-status { font-weight: bold; }
#holo-canvas-container canvas { width: 100% !important; height: 100% !important; }
#ai-call-modal { display: none; flex-direction: column; align-items: center; justify-content: center; }
#ai-call-modal h2 { text-shadow: 0 0 20px #00e5ff; }
#dao-proposals .poll-option { cursor: pointer; transition: transform 0.15s; }
#dao-proposals .poll-option:hover { transform: scale(1.02); }
#btn-toggle-holo.active { background: #00e5ff !important; color: #000 !important; }
#btn-connect-eeg.connected { background: #4caf50 !important; color: #fff !important; }

/* System-highlight chat message (streamer verdict) */
.system-highlight {
    background: linear-gradient(135deg, rgba(124,77,255,0.15), rgba(255,152,0,0.1)) !important;
    border: 1px solid #7c4dff !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin: 6px 0 !important;
    animation: system-highlight-pulse 2s ease-in-out;
}
@keyframes system-highlight-pulse {
    0% { box-shadow: 0 0 0 0 rgba(124,77,255,0.5); }
    50% { box-shadow: 0 0 12px 4px rgba(124,77,255,0.25); }
    100% { box-shadow: 0 0 0 0 rgba(124,77,255,0); }
}

/* Blind Spot Alert */
.blind-spot-alert {
    opacity: 0.5;
    position: relative;
    animation: blind-spot-pulse 2.5s ease-in-out infinite;
}
.blind-spot-alert::after {
    content: '👁️ Слепая зона: вы давно не анализировали этого игрока!';
    position: absolute;
    right: 4px; top: 50%; transform: translateY(-50%);
    background: rgba(255, 152, 0, 0.15);
    border: 1px solid #ff9800;
    border-radius: 6px;
    padding: 2px 8px;
    color: #ff9800;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}
@keyframes blind-spot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 83, 80, 0); outline: 2px solid transparent; }
    50% { box-shadow: 0 0 12px 2px rgba(239, 83, 80, 0.5); outline: 2px solid rgba(239, 83, 80, 0.5); outline-offset: -1px; }
}

/* ========== Zen Mode (Дзен-режим) ========== */
.zen-mode-active .voting-log-panel,
.zen-mode-active #notepad-best-move,
.zen-mode-active .kills-panel,
.zen-mode-active #notepad-macro-tags,
.zen-mode-active #action-log-panel,
.zen-mode-active #btn-toggle-action-log,
.zen-mode-active .suspicion-row,
.zen-mode-active .sheriff-checks-row,
.zen-mode-active #voting-matrix-panel,
.zen-mode-active #balance-tracker,
.zen-mode-active #critical-alert,
.zen-mode-active #paranoia-alert,
.zen-mode-active #polarity-bar {
    display: none !important;
}
.zen-mode-active #mafia-notepad-table thead {
    display: none;
}
.zen-mode-active #mafia-notepad-body {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 12px;
}
.zen-mode-active #mafia-notepad-body tr[data-player] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid var(--player-color, #555);
    background: var(--player-color, #333) !important;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    text-decoration: none !important;
    cursor: default;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    opacity: 1 !important;
}
.zen-mode-active #mafia-notepad-body tr[data-player]:hover {
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(255,255,255,0.3);
}
.zen-mode-active #mafia-notepad-body tr[data-player] td:not(:first-child) {
    display: none !important;
}
.zen-mode-active #mafia-notepad-body tr[data-player] td:first-child {
    padding: 0;
    width: auto;
    text-align: center;
}
.zen-mode-active .notepad-footer-row {
    display: none !important;
}

/* Blind Spot (Live Notepad) */
.blind-spot {
    opacity: 0.6;
    position: relative;
    animation: blind-spot-live-pulse 3s ease-in-out infinite;
}
.blind-spot::after {
    content: '👁️ Слепая зона';
    position: absolute;
    right: 4px; top: 50%; transform: translateY(-50%);
    background: rgba(255, 152, 0, 0.15);
    border: 1px solid #ff9800;
    border-radius: 6px;
    padding: 2px 8px;
    color: #ff9800;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}
@keyframes blind-spot-live-pulse {
    0%, 100% { outline: 2px solid transparent; }
    50% { outline: 2px solid rgba(255, 152, 0, 0.4); outline-offset: -1px; }
}

/* ========== Night Mode (Ночное видение) ========== */

/* Smooth transition for all elements */
body.night-phase-active * { transition: filter 0.5s ease, opacity 0.5s ease, box-shadow 0.5s ease; }

/* Dark overlay on page — dim everything */
body.night-phase-active { background: #05061a !important; }
body.night-phase-active > *:not(script):not(style):not(link) {
    filter: brightness(0.4) contrast(1.2) saturate(0.8);
}

/* Exempt: Video player keeps normal brightness */
body.night-phase-active .player-container,
body.night-phase-active #player-container,
body.night-phase-active .player-wrap,
body.night-phase-active iframe[id^="player"],
body.night-phase-active #player {
    filter: none !important;
}

/* Exempt: Notepad containers keep normal brightness */
body.night-phase-active #mafia-notepad-container,
body.night-phase-active #live-notepad-inner,
body.night-phase-active .notepad-section {
    filter: none !important;
}

/* --- Notepad inner: dim DAY columns (videos.html) --- */
/* Columns: 1=#, 2=🎭, 3=Цвет, 4=🔒, 5=Вектор, 7=💀 */
body.night-phase-active #mafia-notepad-table tr[data-player] td:nth-child(1),
body.night-phase-active #mafia-notepad-table tr[data-player] td:nth-child(2),
body.night-phase-active #mafia-notepad-table tr[data-player] td:nth-child(3),
body.night-phase-active #mafia-notepad-table tr[data-player] td:nth-child(4),
body.night-phase-active #mafia-notepad-table tr[data-player] td:nth-child(5),
body.night-phase-active #mafia-notepad-table tr[data-player] td:nth-child(7) {
    opacity: 0.2;
}
/* Suspicion slider rows also dim */
body.night-phase-active #mafia-notepad-table .suspicion-row {
    opacity: 0.2;
}

/* --- Notepad inner: dim DAY columns (live.html) --- */
/* Columns: 1=#, 2=avatar, 3=🔒, 4=Вектор, 6=💀 */
body.night-phase-active #live-notepad-table tr[data-player] td:nth-child(1),
body.night-phase-active #live-notepad-table tr[data-player] td:nth-child(2),
body.night-phase-active #live-notepad-table tr[data-player] td:nth-child(3),
body.night-phase-active #live-notepad-table tr[data-player] td:nth-child(4),
body.night-phase-active #live-notepad-table tr[data-player] td:nth-child(6) {
    opacity: 0.2;
}
body.night-phase-active #live-notepad-table .suspicion-row {
    opacity: 0.2;
}

/* NIGHT columns stay fully visible: Роль (sheriff/don), Заметки */
body.night-phase-active #mafia-notepad-table tr[data-player] td:nth-child(6),
body.night-phase-active #mafia-notepad-table tr[data-player] td:nth-child(8),
body.night-phase-active #live-notepad-table tr[data-player] td:nth-child(5),
body.night-phase-active #live-notepad-table tr[data-player] td:nth-child(7) {
    opacity: 1;
}

/* Sheriff checks row stays visible + neon glow */
body.night-phase-active .sheriff-checks-row {
    opacity: 1 !important;
}
body.night-phase-active .sheriff-checks-row input {
    box-shadow: 0 0 8px 2px rgba(92, 107, 192, 0.6), 0 0 20px 4px rgba(92, 107, 192, 0.2);
    border-color: #5c6bc0 !important;
}

/* === PeerJS Reconnect Overlay === */
#live-reconnect-overlay {
    animation: reconnectPulse 1.5s ease-in-out infinite;
}
@keyframes reconnectPulse {
    0%, 100% { background: rgba(0,0,0,0.7); }
    50% { background: rgba(0,0,0,0.85); }
}

/* === Voice Mute Button === */
#btn-voice-mute {
    transition: border-color 0.2s, color 0.2s;
}
#btn-voice-mute:hover {
    background: rgba(124,77,255,0.1);
}

/* === Voting Matrix Summary Row === */
.matrix-summary-cell {
    font-weight: 700;
    font-size: 0.72rem;
}

/* Neon glow on night-action note inputs */
body.night-phase-active .notepad-note-input {
    box-shadow: 0 0 8px 2px rgba(92, 107, 192, 0.5), 0 0 18px 4px rgba(92, 107, 192, 0.15);
    border-color: #5c6bc0 !important;
    background: #0d1033 !important;
    color: #c5cae9 !important;
}
body.night-phase-active .live-notepad-note-input {
    box-shadow: 0 0 8px 2px rgba(92, 107, 192, 0.5), 0 0 18px 4px rgba(92, 107, 192, 0.15);
    border-color: #5c6bc0 !important;
    background: #0d1033 !important;
    color: #c5cae9 !important;
}

/* Role buttons (sheriff/don) neon highlight in night mode */
body.night-phase-active #mafia-notepad-table tr[data-player] td:nth-child(6) button,
body.night-phase-active #live-notepad-table tr[data-player] td:nth-child(5) button {
    box-shadow: 0 0 6px 1px rgba(92, 107, 192, 0.4);
}

/* Voting log and Best Move sections dim */
body.night-phase-active .voting-log-panel,
body.night-phase-active #notepad-best-move,
body.night-phase-active #live-notepad-voting-log,
body.night-phase-active #live-notepad-best-move {
    opacity: 0.2;
}

/* Night mode subtle vignette via pseudo-element on body */
body.night-phase-active::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(5,6,26,0.6) 100%);
}