/* ======================================== ИГРАЙ — тема «CRT» (люминофорный терминал) Слой поверх styles.css: включается атрибутом . Layout не трогает — только токены + фактура (сканлайны, glow, металл). Прототип: _redesign-preview/прототип-CRT.html ======================================== */ html[data-app-theme="crt"] { /* фоны: чёрно-зелёный экран вместо сине-серых */ --bg-dark: #0a120d; --bg-card: #0e1811; --bg-card-hover: #132419; --bg-input: #0c1510; --bg-secondary: #112016; --bg-elev: #1a2f20; --bg-surface: #16281c; /* текст: люминофор */ --text-primary: #b4e0bc; --text: #b4e0bc; --text-secondary: #7fb389; --text-muted: #5f8f69; /* интерактив: фосфорный зелёный (chiral cyan остаётся вторым неоном в hardcoded rgba-глоу — это осознанно, связка со старой темой) */ --accent: #8fce9a; --accent-hover: #aee2b6; --accent-light: #c8f5cf; --accent-rgb: 143, 206, 154; --primary: #8fce9a; --danger: #e0524a; /* линии */ --border-color: #2b4634; --border-light: #3d5c45; --border-warm: #5f8f69; /* стекло → фосфорная плёнка */ --glass-bg: rgba(143, 206, 154, 0.03); --glass-bg-hover: rgba(143, 206, 154, 0.06); --glass-bg-active: rgba(143, 206, 154, 0.10); --glass-border: rgba(143, 206, 154, 0.16); --glass-border-light: rgba(143, 206, 154, 0.08); --glass-inset: rgba(143, 206, 154, 0.05); /* события/тёплое — янтарь ЭЛТ, тревога — красный люминофор */ --gold: #f0c545; --ds-warn: #e0524a; --neon-cyan: #5fd4e8; --neon-magenta: #e089b5; --neon-lime: #c8f5cf; /* DS-слой в зелёный корпус */ --ds-bg-deep: #0c1510; --ds-bg: #112016; --ds-bg-elev: #1a2f20; --ds-chiral: #8fce9a; --ds-chiral-soft: #3d6c4a; --ds-blue-deep: #2e5c3e; --ds-amber: #dc9a3a; --ds-gold-ds: #f0c545; --ds-text-warm: #b4e0bc; --ds-line: #5f8f69; /* heatmap: фосфорная шкала */ --cal-level-0-bg: #0e1811; --cal-level-0-border: #2b4634; --cal-level-1: #1d3a26; --cal-level-2: #2f5c3b; --cal-level-3: #55a065; --cal-level-4: #8fce9a; } /* «жёсткий» рендер шрифта — ближе к пикселю ЭЛТ */ html[data-app-theme="crt"] body { -webkit-font-smoothing: none; background-color: var(--bg-dark); } /* ===== фактура экрана: сканлайны сильнее + виньетка + вспышка ===== */ html[data-app-theme="crt"] .bg-scanlines { z-index: 50; /* поверх контента, как стекло ЭЛТ; клики пропускает */ background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0.16) 0px, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 3px ); mix-blend-mode: multiply; } html[data-app-theme="crt"] .bg-grid { background-image: linear-gradient(rgba(143, 206, 154, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 206, 154, 0.02) 1px, transparent 1px); } html[data-app-theme="crt"] .bg-glow { background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.45) 100%), radial-gradient(ellipse at 50% 0%, rgba(143, 206, 154, 0.05) 0%, transparent 55%); animation: crt-flicker 4.2s infinite; } @keyframes crt-flicker { 0%, 95%, 100% { opacity: 1; } 96% { opacity: 0.88; } 97% { opacity: 1; } 99% { opacity: 0.94; } } @media (prefers-reduced-motion: reduce) { html[data-app-theme="crt"] .bg-glow { animation: none; } } /* ===== свечение текста: заголовки и ключевые значения ===== */ html[data-app-theme="crt"] .card-title, html[data-app-theme="crt"] .section-title, html[data-app-theme="crt"] .hud-lvl-num, html[data-app-theme="crt"] .gauge-val, html[data-app-theme="crt"] .sheet-big, html[data-app-theme="crt"] .sheet-title { color: var(--accent-light); text-shadow: 0 0 6px rgba(143, 206, 154, 0.45); } html[data-app-theme="crt"] .card-title { letter-spacing: 1px; } /* ===== карточки: панель терминала с пунктирной рамкой ===== */ html[data-app-theme="crt"] .card { background: linear-gradient(180deg, rgba(14, 24, 17, 0.9), rgba(10, 18, 13, 0.94)); border: 1px dashed var(--border-color); box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.5); } html[data-app-theme="crt"] .card::before { background: var(--accent); box-shadow: 0 0 6px rgba(143, 206, 154, 0.6); } html[data-app-theme="crt"] .card-glow { border-color: rgba(143, 206, 154, 0.35); box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.5), 0 0 16px rgba(143, 206, 154, 0.07); } /* ===== шапка (HUD): рамка экрана ===== */ html[data-app-theme="crt"] .topbar-hud { background: linear-gradient(180deg, rgba(14, 24, 17, 0.97), rgba(10, 18, 13, 0.93)); border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55); } html[data-app-theme="crt"] .hud-lvlbar i, html[data-app-theme="crt"] .gauge-bar i { box-shadow: 0 0 6px rgba(143, 206, 154, 0.55); } /* ===== XP-бар дня: красная HP-полоса со штриховкой (как в прототипе) ===== */ html[data-app-theme="crt"] .day-xp-fill { background: repeating-linear-gradient(90deg, var(--danger) 0 6px, #b03d37 6px 8px) !important; box-shadow: 0 0 8px rgba(224, 82, 74, 0.5); } html[data-app-theme="crt"] .day-xp-bar { background: #150d0d; border-color: #3d2a28; } /* ===== нижняя навигация: металлический пульт ===== */ html[data-app-theme="crt"] .nav.nav-bottom { background: linear-gradient(170deg, #39423d 0%, #2c342f 45%, #232a26 100%); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 -8px 24px rgba(0, 0, 0, 0.55); border-top: 1px solid #1d2320; } html[data-app-theme="crt"] .nav.nav-bottom::before { background: var(--accent); box-shadow: 0 0 6px var(--accent); } html[data-app-theme="crt"] .nav.nav-bottom .nav-btn { color: #9fb3a5; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); } html[data-app-theme="crt"] .nav.nav-bottom .nav-btn.active { color: var(--accent-light); background: rgba(10, 18, 13, 0.55); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); text-shadow: 0 0 6px rgba(143, 206, 154, 0.6); border-radius: 8px; } /* ===== кнопки: рамочные, с внутренним свечением ===== */ html[data-app-theme="crt"] .btn-primary { background: rgba(143, 206, 154, 0.14); border: 1px solid var(--accent); color: var(--accent-light); text-shadow: 0 0 5px rgba(143, 206, 154, 0.5); box-shadow: inset 0 0 8px rgba(143, 206, 154, 0.1); } html[data-app-theme="crt"] .btn-primary:hover { background: rgba(143, 206, 154, 0.22); } html[data-app-theme="crt"] .btn-mini { border-color: var(--border-light); } /* ===== модалки и шторки: стекло терминала ===== */ html[data-app-theme="crt"] .sheet-content, html[data-app-theme="crt"] .modal-content { background: linear-gradient(180deg, #0e1811, #0a120d); border: 1px solid var(--border-light); box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.45); } /* ===== «полный фарш» (2026-07-08): корпус, инверт-заголовки, LED, скобки ===== */ /* металлическая рамка-корпус по краям экрана (низ — без рамки, там пульт-нав). pointer-events:none — тапы проходят насквозь, юзабилити не трогаем */ html[data-app-theme="crt"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 399; /* над контентом/нав, под sheet(500)/modal(600) */ border-style: solid; border-width: 6px 6px 0 6px; border-color: #2e3631; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 26px rgba(0, 0, 0, 0.55); } /* инверт-заголовки карточек — как секции в KLWP-виджетах (.card-title — старые карточки, .dash-sec-title — дашборд 2026-06) */ html[data-app-theme="crt"] .card-title, html[data-app-theme="crt"] .dash-sec-title { background: var(--accent); color: #06130a; text-shadow: none; padding: 2px 8px; letter-spacing: 2px; box-shadow: 0 0 12px rgba(143, 206, 154, 0.3); width: max-content; } /* неоновые HUD-скобки по углам карточки ДЕНЬ на дашборде */ html[data-app-theme="crt"] .dash-day-card { position: relative; } html[data-app-theme="crt"] .dash-day-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--neon-cyan), var(--neon-cyan)) 0 0 / 14px 1px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 0 0 / 1px 14px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 100% 0 / 14px 1px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 100% 0 / 1px 14px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 0 100% / 14px 1px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 0 100% / 1px 14px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 100% 100% / 14px 1px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 100% 100% / 1px 14px; background-repeat: no-repeat; filter: drop-shadow(0 0 4px rgba(95, 212, 232, 0.55)); opacity: 0.8; } /* легаси-карточка дня (.card-day, если где-то жива) — те же скобки поверх скан-текстуры */ html[data-app-theme="crt"] .card-day::after { background: /* углы: 8 полосок по 2 на угол */ linear-gradient(var(--neon-cyan), var(--neon-cyan)) 0 0 / 14px 1px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 0 0 / 1px 14px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 100% 0 / 14px 1px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 100% 0 / 1px 14px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 0 100% / 14px 1px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 0 100% / 1px 14px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 100% 100% / 14px 1px, linear-gradient(var(--neon-cyan), var(--neon-cyan)) 100% 100% / 1px 14px, /* скан-текстура карточки (была в базе) */ repeating-linear-gradient(0deg, transparent 0 3px, rgba(143, 206, 154, 0.03) 3px 4px); background-repeat: no-repeat; filter: drop-shadow(0 0 4px rgba(95, 212, 232, 0.55)); } /* сегментный бар стодневки в шапке (KLWP CHARGED-бар) */ html[data-app-theme="crt"] .gauge.hund .gauge-bar i { -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); } /* XP-бар дня в шапке — красная HP-полоса со штриховкой (как на дашборде) */ html[data-app-theme="crt"] .gauge.day .gauge-bar i { background: repeating-linear-gradient(90deg, var(--danger) 0 5px, #b03d37 5px 7px); box-shadow: 0 0 6px rgba(224, 82, 74, 0.5); } html[data-app-theme="crt"] .gauge.day .gauge-bar i.full { background: repeating-linear-gradient(90deg, var(--accent) 0 5px, #6da877 5px 7px); box-shadow: 0 0 6px rgba(143, 206, 154, 0.55); } /* LED-счётчик XP над пультом — только в CRT */ .crt-led { display: none; } html[data-app-theme="crt"] .crt-led { display: flex; align-items: center; gap: 5px; position: fixed; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 95; /* над нав-баром, под шитами */ background: #120c0c; border: 1px solid #000; border-radius: 7px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.5); padding: 4px 10px; color: var(--ds-amber); font-size: 13px; letter-spacing: 2px; text-shadow: 0 0 8px rgba(220, 154, 58, 0.8); font-variant-numeric: tabular-nums; } .crt-led b { font-weight: 600; } /* шильдик «-Играй-» в конце ленты — только в CRT */ .crt-badge { display: none; } html[data-app-theme="crt"] .crt-badge { display: block; text-align: center; padding: 18px 0 8px; font-size: 19px; font-weight: 700; font-style: italic; letter-spacing: 2px; color: #c0392f; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 10px rgba(192, 57, 47, 0.35); transform: rotate(-1.2deg); user-select: none; } /* пиксель-аватар гиревика в профиле — только в CRT */ .crt-avatar { display: none; } html[data-app-theme="crt"] .crt-avatar { display: flex; justify-content: center; padding: 2px 0 10px; } html[data-app-theme="crt"] .crt-avatar svg { shape-rendering: crispEdges; filter: drop-shadow(0 0 6px rgba(143, 206, 154, 0.35)); } /* ===== переключатель темы в user-sheet (виден в обеих темах) ===== */ .theme-switch-row { display: flex; gap: 8px; } .theme-switch-row .btn-mini { flex: 1; white-space: nowrap; padding: 9px 8px; text-align: center; } .theme-switch-row .btn-mini.sel { border-color: var(--accent); color: var(--accent-light, var(--accent)); background: var(--glass-bg-active); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.25); }