/* style.css - Версия 15.0 (Обединена) */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Roboto:wght@300;400;700&display=swap');

:root {
    --bg-color: #0A0A10; --panel-bg: rgba(12, 10, 26, 0.7); --modal-bg: rgba(20, 18, 38, 0.9);
    --text-color: #E0E0E0; --text-light: #FFFFFF; --text-muted: #9a9ab0; --border-color: #4A4A6A;
    --primary-color: #8A4FFF; --glow-color: #c0a0ff88; --danger-color: #FF4F4F;
    --font-main: 'Roboto', sans-serif; --font-title: 'Orbitron', sans-serif;
}

body, html { height: 100%; margin: 0; overflow: hidden; }
body { background-color: var(--bg-color); background-image: url('https://www.transparenttextures.com/patterns/stardust.png'); color: var(--text-color); font-family: var(--font-main); }
#app { width: 100%; height: 100%; position: relative; }

.screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; box-sizing: border-box; }
.screen.active { display: flex; }

/* СТИЛОВЕ ЗА МЕНЮТА И МОДАЛНИ ПРОЗОРЦИ */
.modal-screen { flex-direction: column; background: rgba(10, 10, 16, 0.5); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.4s ease; }
.modal-screen.active { opacity: 1; }
.modal-content { background: var(--modal-bg); padding: 2.5rem; border-radius: 15px; border: 1px solid var(--border-color); box-shadow: 0 0 40px rgba(0,0,0,0.5); max-width: 90%; width: 700px; text-align: center; }
.home-modal { max-height: 95vh; overflow-y: auto; }
.home-header { margin-bottom: 2rem; }
.home-header h1 { font-family: var(--font-title); color: var(--text-light); text-shadow: 0 0 10px var(--glow-color); margin:0; font-size:2.5rem; }
.home-header p { color: var(--text-muted); margin-top: 0.5rem; }
.main-menu { display: flex; flex-direction: column; gap: 1rem; max-width: 300px; margin: 2rem auto 0; }
.settings-section { margin-bottom: 2rem; }
input, select, textarea, button { font-family: var(--font-main); background-color: rgba(0,0,0,0.3); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.8rem 1rem; width: 100%; box-sizing: border-box; margin-top: 0.5rem; font-size: 1rem; }
button { cursor: pointer; }
.btn-primary { background: linear-gradient(45deg, var(--primary-color), #a87fff); font-weight: bold; color: var(--text-light); border: none; }

/* ФИНАЛНО ОФОРМЛЕНИЕ НА ИГРОВИЯ ЕКРАН */
#screen-game.active { display: grid; grid-template-areas: "header header header" "left main right"; grid-template-columns: 250px 1fr 280px; grid-template-rows: 50px 1fr; width: 100%; height: 100%; gap: 1rem; padding: 1rem; box-sizing: border-box; }
.top-bar, .left-sidebar, .right-sidebar, .main-content { background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 15px; }
.top-bar { grid-area: header; display: flex; justify-content: flex-start; align-items: center; padding: 0 1rem; }
.left-sidebar { grid-area: left; }
.main-content { grid-area: main; }
.right-sidebar { grid-area: right; }
.left-sidebar, .right-sidebar, .main-content { padding: 1rem; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.left-sidebar, .right-sidebar { overflow-y: auto; }
.chat-window { flex-grow: 1; overflow-y: auto; min-height: 0; }
.composer-area { flex-shrink: 0; border-top: 1px solid var(--border-color); padding-top: 1rem; margin-top: 1rem; display: flex; gap: 10px; }
#player-input { flex-grow: 1; margin: 0; resize: none; max-height: 150px; }
#send-button { width: auto; flex-shrink: 0; margin: 0; }

/* СТИЛОВЕ ЗА СЪОБЩЕНИЯТА */
.msg { display: flex; align-items: flex-start; margin-bottom: 1.5rem; max-width: 90%; flex-shrink: 0;}
.msg .avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 15px; background: #333; flex-shrink: 0; display: flex; justify-content: center; align-items: center; }
.msg .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.msg .bubble { padding: 0.8rem 1.2rem; border-radius: 12px; line-height: 1.6; background: #2a2a4a; }
.msg.играч { align-self: flex-end; flex-direction: row-reverse; }
.msg.играч .avatar { margin: 0 0 0 15px; }
.msg.играч .bubble { background: var(--primary-color); color: white; }
.msg.system { align-self: center; text-align: center; font-style: italic; color: var(--text-muted); }
.soul-orb, .soul-orb-creator { width: 36px; height: 36px; border-radius: 50%; }
.soul-orb-creator { background: radial-gradient(circle, #fff, #c8b4ff); box-shadow: 0 0 10px #fff, 0 0 20px var(--glow-color); animation: pulse 4s infinite ease-in-out; }
@keyframes pulse { 50% { transform: scale(1.05); opacity: 0.8; } }

/* СТИЛ ЗА МОДАЛЕН ПРОЗОРЕЦ ЗА КАРТИНКА */
#image-modal { cursor: pointer; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); z-index: 20; }
#modal-image { max-width: 80vw; max-height: 80vh; object-fit: contain; border-radius: 15px; border: 2px solid var(--primary-color); }
#close-modal-btn { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; cursor: pointer; text-shadow: 0 0 10px #000; }