/* =========================================
   ХЕЛОНІВСЬКА ТЕМА (HALLOWEEN THEME)
   ========================================= */

/* Плавне переливання та містична пульсація */
@keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes gentle-pulse {
    0% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); transform: scale(1); }
    50% { box-shadow: 0 8px 35px rgba(255, 102, 0, 0.25); transform: scale(1.02); }
    100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); transform: scale(1); }
}

body { margin: 0; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; overflow: hidden; background: #05000a; color: #f0f0f0; user-select: none; -webkit-user-select: none; }
#main-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('fonn.png') center/cover no-repeat; filter: brightness(0.3) contrast(1.2) sepia(0.3) hue-rotate(270deg); z-index: -1; } /* Легкий фіолетовий відтінок фону */

#rulesOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 0, 10, 0.85); display: flex; align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s ease; }
#rulesOverlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
.rules-card { width: 90%; max-width: 360px; background: rgba(22, 15, 28, 0.85); border: 1px solid rgba(255, 102, 0, 0.15); border-radius: 28px; padding: 20px; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 20px rgba(138, 43, 226, 0.1); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); transform: scale(0.9); transition: transform 0.3s ease; }
#rulesOverlay.active .rules-card { transform: scale(1); }
.rules-content { width: 100%; max-height: 65vh; overflow-y: auto; margin-bottom: 16px; border-radius: 14px; color: #ddd; }
.rules-content img { width: 100%; height: auto; display: block; border-radius: 14px; }

#closeRulesBtn { width: 100%; background: rgba(255, 102, 0, 0.1); color: #ff9933; border: 1px solid rgba(255, 102, 0, 0.2); padding: 14px; border-radius: 16px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; backdrop-filter: blur(10px); }
#closeRulesBtn:active { background: rgba(255, 102, 0, 0.2); }

#pc-blocker { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #05000a; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; text-align: center; padding: 20px; }
#pc-blocker h2 { color: #ff3b30; font-weight: 600; text-shadow: 0 0 10px rgba(255,59,48,0.5); }

#top-bar { position: fixed; top: 12px; left: 0; width: 100%; display: none; justify-content: center; gap: 10px; align-items: center; z-index: 100; }
.combined-info { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(20, 10, 25, 0.8); padding: 8px 14px; border-radius: 20px; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(138, 43, 226, 0.2); box-shadow: 0 4px 15px rgba(0,0,0,0.5); box-sizing: border-box; }
#fps { color: #39ff14; font-weight: 600; font-size: 15px; min-width: 55px; text-align: center; text-shadow: 0 0 8px rgba(57,255,20,0.4); } /* Токсично-зелений FPS */
#deviceName { font-size: 13px; opacity: 0.85; text-align: center; color: #e0d5e5; }
#graphCanvas { width: 55px; height: 22px; background: rgba(255,255,255,0.02); border-radius: 4px; display: block; margin: 0 auto; border: 1px solid rgba(138,43,226,0.15); }
#counter { background: rgba(25, 10, 10, 0.85); padding: 10px 16px; border-radius: 20px; border: 1px solid rgba(255, 102, 0, 0.3); box-shadow: 0 4px 15px rgba(255, 102, 0, 0.15); font-size: 15px; font-weight: 700; color: #ff7300; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-shadow: 0 0 5px rgba(255, 115, 0, 0.4); } /* Гарбузовий рахунок */

#vsScreen { position: absolute; top: 12px; width: 100%; display: none; justify-content: space-around; padding: 0 10px; box-sizing: border-box; z-index: 100; }
.vsBox { width: 46%; padding: 12px; border-radius: 20px; background: rgba(22, 15, 28, 0.85); border: 1px solid rgba(138, 43, 226, 0.25); text-align: center; position: relative; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-sizing: border-box; box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
.check-mark { position: absolute; top: -10px; right: -10px; background: #39ff14; color: #000; border-radius: 50%; width: 24px; height: 24px; display: none; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; border: 2px solid #1c1c1e; box-sizing: border-box; box-shadow: 0 0 10px rgba(57,255,20,0.5); }

#menu { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 200; box-sizing: border-box; text-align: center; }
.bot-logo { width: 104px; height: 104px; background: rgba(25, 10, 10, 0.5); border: 1px solid rgba(255, 102, 0, 0.25); border-radius: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; flex-shrink: 0; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-sizing: border-box; animation: gentle-pulse 3s ease-in-out infinite; box-shadow: inset 0 0 20px rgba(255,102,0,0.1); }
.bot-logo img { display: block; margin: 0 auto; object-fit: contain; opacity: 0.95; filter: drop-shadow(0 0 10px rgba(255,102,0,0.3)); }

.menu-buttons { display: flex; flex-direction: column; gap: 12px; width: 85%; max-width: 320px; margin: 0 auto; box-sizing: border-box; align-items: stretch; }

/* ХЕЛОНІВСЬКІ КНОПКИ */
#startBtn { background: linear-gradient(90deg, #d35400, #ff7300, #d35400, #ff7300); background-size: 200% auto; color: #111; border: none; padding: 15px; border-radius: 16px; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(255, 115, 0, 0.25); transition: transform 0.1s ease; box-sizing: border-box; display: block; width: 100%; text-align: center; letter-spacing: 0.5px; animation: shimmer 3s linear infinite; text-transform: uppercase; } /* Гарбузова гра */
#duelBtn { background: linear-gradient(90deg, #4b0082, #8a2be2, #4b0082, #8a2be2); background-size: 200% auto; color: #fff; border: none; padding: 15px; border-radius: 16px; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(138, 43, 226, 0.3); transition: transform 0.1s ease; box-sizing: border-box; display: block; width: 100%; text-align: center; letter-spacing: 0.5px; animation: shimmer 3s linear infinite reverse; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0,0,0,0.5); } /* Відьомська дуель */
#rulesBtn { background: rgba(30, 20, 40, 0.4); border: 1px solid rgba(138, 43, 226, 0.2); color: #d8b4e2; width: 100%; padding: 14px; border-radius: 16px; font-size: 15px; font-weight: 600; cursor: pointer; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); transition: background 0.2s; box-sizing: border-box; display: block; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,0.4); }

#startBtn:active, #duelBtn:active { transform: scale(0.96); }
#rulesBtn:active { transform: scale(0.96); background: rgba(30, 20, 40, 0.6); }

#resultModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 0, 10, 0.92); backdrop-filter: blur(20px); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 2000; text-align: center; padding: 20px; box-sizing: border-box; }
#resEmoji { font-size: 65px; margin-bottom: 8px; filter: drop-shadow(0 0 15px rgba(255,102,0,0.5)); }
#resStatus { font-size: 28px; font-weight: 900; color: #ff7300; letter-spacing: 1px; text-shadow: 0 0 15px rgba(255,115,0,0.4); text-transform: uppercase; }
.stats-container { margin: 18px 0; background: rgba(25, 15, 30, 0.7); border: 1px solid rgba(138, 43, 226, 0.2); padding: 18px; border-radius: 20px; width: 90%; max-width: 340px; box-sizing: border-box; backdrop-filter: blur(10px); box-shadow: inset 0 0 20px rgba(0,0,0,0.5); }

#retryBtn { background: linear-gradient(90deg, #d35400, #ff7300, #d35400); background-size: 200% auto; color: #111; width: 90%; max-width: 340px; padding: 15px; margin-bottom: 12px; border-radius: 16px; font-size: 16px; font-weight: 800; border: none; cursor: pointer; box-sizing: border-box; display: block; margin-left: auto; margin-right: auto; animation: shimmer 3s linear infinite; box-shadow: 0 6px 20px rgba(255, 115, 0, 0.3); text-transform: uppercase; }
#homeBtn { background: rgba(138, 43, 226, 0.1); border: 1px solid rgba(138, 43, 226, 0.3); color: #d8b4e2; width: 90%; max-width: 340px; padding: 15px; border-radius: 16px; font-size: 16px; font-weight: 600; cursor: pointer; box-sizing: border-box; display: block; margin-left: auto; margin-right: auto; backdrop-filter: blur(10px); transition: background 0.2s; }
#homeBtn:active { background: rgba(138, 43, 226, 0.2); }

#centerText { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; display: none; pointer-events: none; z-index: 50; color: #ff7300; text-shadow: 0 0 15px rgba(255,115,0,0.8), 0 2px 8px rgba(0,0,0,0.9); font-weight: 800; opacity: 0.95; text-align: center; width: 100%; box-sizing: border-box; text-transform: uppercase; letter-spacing: 2px; }
#countdown { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 100px; font-weight: 900; color: #ff7300; display: none; z-index: 300; text-shadow: 0 0 30px rgba(255,115,0,0.6), 0 4px 15px rgba(0,0,0,0.9); }

#searchingPlayer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 0, 10, 0.95); backdrop-filter: blur(15px); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 1500; text-align: center; box-sizing: border-box; }

canvas#game { display: block; position: absolute; top: 0; left: 0; z-index: 10; mix-blend-mode: screen; }

/* =========================================
   ЧАТ ІНТЕРФЕЙС (ПОВНОЕКРАННИЙ - HALLOWEEN)
   ========================================= */
#chat-btn { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background: url('1000040785.png') center/cover; box-shadow: 0 0 25px rgba(255, 102, 0, 0.6); cursor: pointer; z-index: 1000; border: 2px solid #ff7300; transition: transform 0.2s; }
#chat-btn:active { transform: scale(0.9); }
.online-badge { position: absolute; top: -5px; right: -5px; background: #39ff14; color: #000; font-size: 11px; font-weight: 900; padding: 2px 6px; border-radius: 10px; border: 2px solid #05000a; box-shadow: 0 0 8px rgba(57,255,20,0.5); }

#chatModal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #080310; z-index: 99999; flex-direction: column; animation: slideUp 0.3s cubic-bezier(0.19, 1, 0.22, 1); }

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.chat-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: #12081a; border-bottom: 1px solid rgba(255,102,0,0.2); box-shadow: 0 4px 20px rgba(0,0,0,0.8); z-index: 2; }
.chat-title { color: #ff7300; font-weight: 900; font-size: 20px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.5px; text-shadow: 0 0 10px rgba(255,115,0,0.3); text-transform: uppercase; }
.chat-pinned { background: rgba(255,102,0,0.08); border-left: 3px solid #ff7300; padding: 10px 15px; font-size: 13px; color: #e0d5e5; z-index: 1; }

.chat-messages { flex: 1; overflow-y: auto; padding: 20px 15px; display: flex; flex-direction: column; gap: 16px; background: url('fonn.png') center/cover; position: relative; }
.chat-messages::before { content: ""; position: absolute; inset: 0; background: rgba(10, 2, 15, 0.88); z-index: -1; } /* Темно-фіолетовий відтінок фону чату */

.msg { display: flex; gap: 10px; align-items: flex-end; }
.msg-avatar { width: 38px; height: 38px; border-radius: 50%; background: #1a0f24; overflow: hidden; border: 1px solid rgba(138,43,226,0.3); flex-shrink: 0; }
.msg-content { max-width: 75%; }
.msg-name { font-size: 12px; font-weight: 800; color: #a392b5; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.msg-bubble { background: #1a1025; padding: 12px 16px; border-radius: 18px 18px 18px 4px; font-size: 15px; line-height: 1.4; color: #f0f0f0; box-shadow: 0 3px 8px rgba(0,0,0,0.5); border: 1px solid rgba(138,43,226,0.15); }

.msg.own { flex-direction: row-reverse; }
.msg.own .msg-name { justify-content: flex-end; color: #ff7300; }
.msg.own .msg-bubble { background: linear-gradient(135deg, rgba(255,102,0,0.15), rgba(255,102,0,0.05)); border: 1px solid rgba(255,115,0,0.3); border-radius: 18px 18px 4px 18px; box-shadow: 0 3px 10px rgba(255,115,0,0.1); }

.rank-badge { background: rgba(138,43,226,0.2); font-size: 10px; padding: 3px 6px; border-radius: 6px; color: #d8b4e2; text-transform: uppercase; font-weight: 800; border: 1px solid rgba(138,43,226,0.3); }
.admin-badge { background: #8b0000; color: #ff6666; border-color: #ff3b30; } /* Криваво-червоний адмін */
.owner-badge { background: linear-gradient(90deg, #ff7300, #d35400); color: #111; box-shadow: 0 0 10px rgba(255,115,0,0.5); border: none; }

.chat-input-area { padding: 12px 15px; background: #12081a; border-top: 1px solid rgba(138,43,226,0.2); display: flex; gap: 10px; align-items: center; padding-bottom: max(12px, env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px rgba(0,0,0,0.6); }
.chat-input { flex: 1; background: #1a1025; border: 1px solid rgba(138,43,226,0.3); color: white; padding: 14px 18px; border-radius: 24px; outline: none; font-size: 15px; transition: border 0.2s, box-shadow 0.2s; }
.chat-input:focus { border: 1px solid #ff7300; box-shadow: 0 0 10px rgba(255,115,0,0.2); }
.chat-action-btn { background: none; border: none; font-size: 22px; color: #8a2be2; cursor: pointer; padding: 5px; transition: color 0.2s; filter: drop-shadow(0 0 5px rgba(138,43,226,0.3)); }
.chat-action-btn:hover { color: #ff7300; }
.chat-send-btn { background: linear-gradient(135deg, #ff7300, #d35400); color: #111; border: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; box-shadow: 0 4px 15px rgba(255,115,0,0.4); }
.chat-send-btn:active { transform: scale(0.92); }

/* Контекстне меню адміна */
.admin-context { display: none; position: absolute; background: #160f1c; border: 1px solid #8a2be2; border-radius: 12px; padding: 6px; box-shadow: 0 8px 25px rgba(0,0,0,0.9), 0 0 15px rgba(138,43,226,0.2); z-index: 3000; flex-direction: column; gap: 5px; backdrop-filter: blur(10px); }
.admin-context button { background: none; border: none; color: #e0d5e5; padding: 10px 16px; text-align: left; cursor: pointer; border-radius: 6px; font-size: 14px; font-weight: 600; transition: background 0.2s; }
.admin-context button:hover { background: rgba(138,43,226,0.2); color: #fff; }
.admin-context button.danger { color: #ff3b30; }
.admin-context button.danger:hover { background: rgba(255,59,48,0.15); }