/* game/style.css */ /* ── Тема сайта: "обычная" (по умолчанию) и "ночная" ────────────────────── Переключается через data-theme="night" на , задаётся theme.js. Все новые/переопределённые поверхности используют эти переменные, чтобы переключение темы работало мгновенно без перезагрузки. */ :root { --body-bg: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); --panel-bg: rgba(44, 62, 80, 0.97); --panel-bg-solid: #1a1a2e; --card-bg: rgba(0, 0, 0, 0.2); --border-color: rgba(255, 255, 255, 0.1); --text-primary: #ecf0f1; --text-secondary: #aaaaaa; --text-muted: #888888; --accent-blue: #3498db; --accent-gold: #f1c40f; --board-frame: #34495e; } html[data-theme="night"] { --body-bg: linear-gradient(135deg, #05070a 0%, #0d1117 100%); --panel-bg: rgba(10, 12, 16, 0.97); --panel-bg-solid: #0d0d14; --card-bg: rgba(0, 0, 0, 0.45); --border-color: rgba(255, 255, 255, 0.06); --text-primary: #e6e6e6; --text-secondary: #888888; --text-muted: #666666; --accent-blue: #2f6f9e; --accent-gold: #d4ac0d; --board-frame: #1c1c1c; } * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: var(--body-bg); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; flex-direction: column; gap: 20px; position: relative; overflow-x: hidden; padding: 20px; transition: background 0.3s ease; } /* КНОПКА ПЕРЕКЛЮЧЕНИЯ ТЕМЫ */ .theme-toggle-btn { position: fixed; top: 25px; right: 25px; z-index: 1001; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-primary); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, background 0.3s ease; } .theme-toggle-btn:hover { transform: scale(1.08); } /* КНОПКА СЭНДВИЧА (БУРГЕР) */ .hamburger-menu { position: fixed; top: 25px; left: 25px; width: 35px; height: 25px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; z-index: 1001; /* Поверх боковой панели */ } .hamburger-menu span { display: block; height: 4px; width: 100%; background-color: white; border-radius: 10px; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Анимация бургера в крестик */ .hamburger-menu.active span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); } .hamburger-menu.active span:nth-child(2) { opacity: 0; transform: translateX(-20px); } .hamburger-menu.active span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); } /* БОКОВАЯ ПАНЕЛЬ (SIDE MENU) */ .side-menu { position: fixed; top: 0; left: -320px; /* Спрятано по умолчанию */ width: 300px; height: 100%; background: var(--panel-bg); backdrop-filter: blur(15px); padding: 80px 20px 30px 20px; box-shadow: 5px 0 25px rgba(0,0,0,0.5); transition: 0.4s ease, background 0.3s ease; z-index: 1000; display: flex; flex-direction: column; gap: 30px; overflow-y: auto; /* Добавили прокрутку, так как контента с рейтингами стало больше */ } .side-menu.active { left: 0; } /* Контент внутри сэндвича */ .user-info-side { color: white; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; } #userEmailSide { display: block; font-size: 13px; line-height: 1.5; margin-bottom: 15px; word-break: break-all; opacity: 0.9; text-align: left; background: var(--card-bg); padding: 10px; border-radius: 6px; } .controls-panel-side { display: flex; flex-direction: column; gap: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 25px; } .mode-selector { display: flex; flex-direction: column; gap: 8px; } .mode-selector label { color: #bdc3c7; font-size: 12px; font-weight: 600; text-transform: uppercase; } #modeSelect { background: #34495e; color: white; border: 1px solid #3498db; padding: 12px; border-radius: 8px; outline: none; cursor: pointer; font-size: 15px; } .logout-btn { background: #e74c3c; border: none; color: white; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600; width: 100%; transition: 0.3s; } .logout-btn:hover { background: #c0392b; } /* --- ДЭШБОРД РЕЙТИНГОВ В СЭНДВИЧЕ --- */ .ratings-dashboard-side { color: white; display: flex; flex-direction: column; gap: 15px; } .ratings-dashboard-side h3 { font-size: 14px; text-transform: uppercase; color: #3498db; letter-spacing: 0.5px; border-bottom: 2px solid #3498db; padding-bottom: 5px; } .player-rating-block { background: rgba(0, 0, 0, 0.2); padding: 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.05); } .player-rating-block h4 { font-size: 12px; color: #ecf0f1; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-rating-block h4 .p-name { color: #2ecc71; } .rating-list { list-style: none; display: flex; flex-direction: column; gap: 4px; } .rating-list li { font-size: 11px; display: flex; justify-content: space-between; color: #bdc3c7; padding: 2px 4px; border-radius: 3px; } .rating-list li span { opacity: 0.8; } /* Подсветка текущего запущенного режима */ .rating-list li.current-mode-highlight { background: rgba(52, 152, 219, 0.25); color: #fff; font-weight: bold; border-left: 2px solid #3498db; } /* ГЛАВНЫЙ КОНТЕЙНЕР ДЛЯ РАССТАНОВКИ ДОСОК */ .game-layout { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 40px; margin-top: 10px; flex-wrap: wrap; /* Чтобы доски корректно переносились при нехватке места */ } /* ОБОЛОЧКА КАЖДОЙ ОТДЕЛЬНОЙ ДОСКИ СО СВОИМИ ПАНЕЛЯМИ ИГРОКОВ */ .board-wrapper-block { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; /* Страховка: не даёт инлайн-ширине вылезти за экран */ } /* ДИНАМИЧЕСКИЙ КОНТЕЙНЕР САМОЙ ДОСКИ */ .board-holder { display: flex; flex-direction: column; align-items: center; } /* --- ВДЖЕТЫ ИГРОКОВ НАД И ПОД ДОСКАМИ --- */ .match-players-bar { width: 100%; max-width: 560px; /* Привязано к дефолтной ширине шахматной доски */ display: flex; justify-content: center; } .player-match-card { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); padding: 8px 15px; border-radius: 8px; color: white; display: flex; align-items: center; gap: 10px; font-size: 14px; width: 100%; } .player-match-card.secondary-card { border-color: rgba(52, 152, 219, 0.4); } .color-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,0.5); } .white-dot { background-color: #ffffff; } .black-dot { background-color: #2c3e50; } .match-player-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } /* Динамически расширяем имя, если рейтинг у гостя пуст */ .player-match-card:has(.match-player-elo:empty) .match-player-name { max-width: 100%; } .match-player-elo { color: #2ecc71; font-weight: bold; margin-left: auto; /* Прижимает рейтинг к правому краю карточки */ } /* Полностью скрываем пустые скобки Эло */ .match-player-elo:empty { display: none; } /* Старые стили для обратной совместимости, если используются в JS */ .board-wrapper { display: flex; flex-direction: column; align-items: center; gap: 10px; } .board-label { color: white; font-weight: bold; font-size: 18px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); } /* РЕЗЕРВНЫЕ ПАНЕЛИ */ .reserve-panel { display: flex; flex-direction: column; gap: 10px; background: rgba(0, 0, 0, 0.2); padding: 10px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.1); width: 100%; backdrop-filter: blur(5px); } .reserve-row { display: flex; justify-content: center; gap: 15px; min-height: 50px; align-items: center; } .reserve-piece { font-size: 32px; cursor: pointer; position: relative; transition: 0.2s ease; } /* Белые фигуры (контурный unicode-глиф): тонкая тёмная обводка, чтобы не терялись на светлых элементах фона в обычной теме. */ .reserve-piece.piece-white { color: #f5f5f5; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.55); text-stroke: 1px rgba(0, 0, 0, 0.55); } /* Чёрные фигуры (сплошной unicode-глиф): в обычной теме фон панели светлее и контраст достаточный, но в ночной теме (--card-bg темнее) сплошная заливка глифа сливается с фоном — добавляем светлую обводку и лёгкое свечение, которые проявляют силуэт фигуры независимо от темы. */ .reserve-piece.piece-black { color: #1a1a1a; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.75); text-stroke: 1px rgba(255, 255, 255, 0.75); text-shadow: 0 0 4px rgba(255, 255, 255, 0.35); } html[data-theme="night"] .reserve-piece.piece-black { -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.9); text-stroke: 1.5px rgba(255, 255, 255, 0.9); text-shadow: 0 0 6px rgba(255, 255, 255, 0.45); } .reserve-piece.selected { background: rgba(46, 204, 113, 0.3); outline: 2px solid #2ecc71; border-radius: 5px; } /* Витрина сбитых фигур (не Crazyhouse/Bughouse) — не кликабельна */ .reserve-piece.reserve-piece-display { cursor: default; } .reserve-count { position: absolute; bottom: -5px; right: -8px; background: #2ecc71; color: white; font-size: 10px; padding: 2px 5px; border-radius: 10px; font-weight: bold; } /* ШАХМАТНАЯ ДОСКА */ canvas { border: 4px solid var(--board-frame); border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.4); cursor: pointer; background-color: #f0d9b5; max-width: 100%; height: auto; display: block; transition: border-color 0.3s ease; } /* СТАТУС */ .status { color: var(--text-primary); font-size: 18px; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.5); text-align: center; background: var(--card-bg); padding: 12px 25px; border-radius: 12px; margin-top: 10px; max-width: 560px; } .reset-btn { padding: 12px; background: linear-gradient(45deg, #3498db, #2980b9); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; text-transform: uppercase; } /* Эффект тряски */ @keyframes shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 2px); } 50% { transform: translate(2px, -2px); } 75% { transform: translate(-2px, -2px); } } .explosion-shake { animation: shake 0.4s; } /* Адаптивность */ @media (max-width: 1180px) { .game-layout { flex-direction: column; align-items: center; gap: 50px; } .match-players-bar { max-width: 100%; } } /* --- СЕКЦИЯ МУЛЬТИПЛЕЕРА В СЭНДВИЧЕ --- */ .invite-section-side { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; } .invite-section-side h3 { font-size: 14px; text-transform: uppercase; color: #3498db; letter-spacing: 0.5px; border-bottom: 2px solid #3498db; padding-bottom: 5px; } .invite-status { font-size: 12px; color: #bdc3c7; background: rgba(0,0,0,0.2); padding: 8px 10px; border-radius: 6px; border-left: 3px solid #3498db; line-height: 1.5; } .invite-status.guest-mode { border-left-color: #2ecc71; color: #2ecc71; } .invite-link-block { display: flex; flex-direction: column; gap: 8px; } .invite-link-label { font-size: 11px; color: #bdc3c7; text-transform: uppercase; letter-spacing: 0.3px; } .invite-link-row { display: flex; gap: 6px; align-items: center; } .invite-link-input { flex: 1; padding: 7px 9px; border-radius: 6px; border: 1px solid rgba(52,152,219,0.4); background: rgba(0,0,0,0.3); color: #ecf0f1; font-size: 11px; outline: none; min-width: 0; } .invite-copy-btn { padding: 7px 10px; border-radius: 6px; border: 1px solid #3498db; background: rgba(52,152,219,0.2); color: #3498db; cursor: pointer; font-size: 13px; transition: 0.2s; white-space: nowrap; flex-shrink: 0; } .invite-copy-btn:hover { background: #3498db; color: #fff; } .invite-copy-btn.copied { background: #2ecc71; border-color: #2ecc71; color: #fff; } /* --- СТИЛИ ДЛЯ КАСТОМНОГО МОДАЛЬНОГО ОКНА КОНЦА ИГРЫ --- */ .modal-overlay { animation: fadeInOverlay 0.3s ease forwards; backdrop-filter: blur(8px); } .modal-content { background: #1e2b38 !important; /* Соответствие вашей гамме #2c3e50 */ border: 2px solid #3498db !important; /* Голубой неоновый контур вместо зеленого */ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7) !important; animation: scaleUpModal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .modal-content h2 { color: #3498db !important; /* Голубой заголовок в цвет темы */ font-weight: 700; letter-spacing: 0.5px; } .modal-content button { background: linear-gradient(45deg, #3498db, #2980b9) !important; font-family: inherit; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3); vertical-align: middle; transition: all 0.2s ease !important; } .modal-content button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(52, 152, 219, 0.5); background: linear-gradient(45deg, #2980b9, #2573a7) !important; } /* АНИМАЦИИ ДЛЯ ПОЯВЛЕНИЯ МОДАЛКИ */ @keyframes fadeInOverlay { from { background: rgba(0, 0, 0, 0); } to { background: rgba(0, 0, 0, 0.8); } } @keyframes scaleUpModal { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* --- ИСТОРИЯ ПАРТИЙ В СЭНДВИЧЕ --- */ .match-history-side { color: white; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 15px; padding-bottom: 5px; } .match-history-side h3 { font-size: 14px; text-transform: uppercase; color: #3498db; letter-spacing: 0.5px; border-bottom: 2px solid #3498db; padding-bottom: 5px; margin-bottom: 10px; } .match-history-list { list-style: none; margin: 0; padding: 0; } .match-history-item { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 12px; color: #bdc3c7; line-height: 1.6; overflow: hidden; } .match-history-item:last-child { border-bottom: none; } /* === ОВЕРЛЕЙ ПОЛНОГО РАЗБОРА ПАРТИИ (PREMIUM) === */ .fa-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 16, 22, 0.97); z-index: 10000; display: flex; flex-direction: column; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .fa-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: #1e2b38; border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; } .fa-title { font-size: 16px; font-weight: bold; color: #3498db; letter-spacing: 0.3px; } .fa-close { background: none; border: none; color: #aaa; font-size: 22px; cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s; } .fa-close:hover { color: #fff; } .fa-content { display: flex; flex: 1; overflow: hidden; } /* Панель доски */ .fa-board-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 20px; flex-shrink: 0; gap: 10px; } #faCanvas { border: 3px solid #34495e; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); max-width: min(480px, calc(100vw - 260px)); max-height: calc(100vh - 170px); width: auto; height: auto; display: block; } .fa-move-info { font-size: 13px; font-weight: bold; min-height: 18px; text-align: center; color: #aaa; } /* Панель списка ходов */ .fa-list-panel { flex: 1; overflow-y: auto; background: #151f2a; border-left: 1px solid rgba(255,255,255,0.07); padding: 8px 6px; min-width: 200px; } .fa-move-list { display: flex; flex-direction: column; gap: 1px; } .fa-move-pair { display: flex; align-items: center; gap: 3px; padding: 2px 0; } .fa-move-num { font-size: 11px; color: #4a5568; width: 26px; text-align: right; flex-shrink: 0; } .fa-move-item { padding: 4px 8px; border-radius: 4px; font-size: 13px; cursor: pointer; transition: background 0.15s; display: inline-flex; align-items: center; gap: 4px; min-width: 78px; color: #ecf0f1; } .fa-move-item:hover { background: rgba(255,255,255,0.08); } .fa-move-item.fa-current { background: rgba(52, 152, 219, 0.3); font-weight: bold; outline: 1px solid rgba(52,152,219,0.5); } .fa-start { font-size: 12px; color: #7f8c8d; min-width: auto; padding: 4px 8px; } .fa-badge { font-size: 11px; } /* Цвета категорий */ .fa-good { color: #ecf0f1; } .fa-inaccuracy { color: #f1c40f; } .fa-mistake { color: #e67e22; } .fa-blunder { color: #e74c3c; } /* Навигация */ .fa-nav { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #1e2b38; border-top: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; gap: 10px; } .fa-nav-btn { background: #2c3e50; border: 1px solid rgba(255,255,255,0.15); color: white; padding: 7px 18px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: background 0.2s; flex-shrink: 0; } .fa-nav-btn:hover:not(:disabled) { background: #3d566e; } .fa-nav-btn:disabled { opacity: 0.25; cursor: default; } .fa-nav-label { font-size: 13px; color: #bdc3c7; text-align: center; flex: 1; line-height: 1.4; } /* Мобильная адаптация */ @media (max-width: 768px) { .fa-content { flex-direction: column; } #faCanvas { max-width: min(480px, 94vw); max-height: 45vh; } .fa-board-wrap { padding: 10px; } .fa-list-panel { max-height: 30vh; border-left: none; border-top: 1px solid rgba(255,255,255,0.07); } }