/* HypnoTap Style для MindSpace */ /* ── Платформенные скрытия (VK/OK) ───────────────────────────── Класс platform-vk/platform-ok ставится синхронно в до первой отрисовки, поэтому элементы не мелькают перед скрытием. */ .platform-vk .about-socials, .platform-ok .about-socials { display: none !important; } .platform-vk .about-text-socials, .platform-ok .about-text-socials { display: none !important; } /* ── /Платформенные скрытия ──────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { background: #0f0f1a; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f0f1a; color: #ffffff; overflow: hidden; width: 100vw; height: var(--vh-real, 100vh); position: fixed; } .screen { width: 100%; height: var(--vh-real, 100vh); position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hidden { display: none !important; } /* Маленькие экраны (iPhone SE 640×1136): центрированный контент не влезал в фиксированный 100vh, а скролла не было — была недоступна кнопка «Прогресс» в меню (7338192) и «Завершить» на экране результата. Включаем вертикальный скролл. justify-content:flex-start + авто-поля на крайних элементах держат контент по центру на больших экранах и НЕ обрезают верх при переполнении (в отличие от justify-content:center + overflow, который прячет верхнюю часть). */ #mainMenu, .session-complete-screen { justify-content: flex-start; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: var(--kc-s-4) 0; } #mainMenu > .center-circle, .session-complete-screen > .affirmation-text { margin-top: auto; } #mainMenu > .kc-stack, .session-complete-screen > .kc-stack { margin-bottom: auto; } /* === ГЛАВНОЕ МЕНЮ === */ .top-icons { position: absolute; top: 20px; right: 20px; display: flex; gap: 15px; z-index: 100; } .icon-btn { background: transparent; border: none; color: rgba(255, 255, 255, 0.5); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; } .icon-btn:active { transform: scale(0.95); } .svg-icon { width: 16px; height: 16px; fill: currentColor; } .center-circle { margin-bottom: 40px; } #logoCanvas { width: 200px; height: 200px; } .game-title { font-family: var(--kc-font-display); font-size: var(--kc-t-xl); font-weight: 600; letter-spacing: var(--kc-tr-wide); color: rgba(255, 255, 255, 0.9); margin-bottom: 20px; text-transform: uppercase; } .streak-display { margin-bottom: 16px; cursor: pointer; transition: transform 0.2s ease; } .streak-display:active { transform: scale(0.95); } .kc-demo-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin: 0 var(--kc-s-4) 16px; background: rgba(255, 200, 80, 0.07); border: 1px solid rgba(255, 200, 80, 0.2); border-radius: 12px; cursor: pointer; color: var(--kc-text-secondary, #9090a8); font-size: 13px; line-height: 1.3; transition: background 0.15s; -webkit-tap-highlight-color: transparent; } .kc-demo-banner:active { background: rgba(255, 200, 80, 0.13); } .kc-demo-banner svg { flex-shrink: 0; opacity: 0.6; } .kc-demo-banner__cta { margin-left: auto; padding-left: 8px; color: var(--kc-accent, #4dd0e1); white-space: nowrap; font-size: 13px; } .streak-circles { display: flex; gap: 8px; justify-content: center; } .streak-circle { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); transition: background 0.3s var(--kc-ease), border-color 0.3s var(--kc-ease); } /* Сессия выполнена - полный голубой */ .streak-circle.active { background: #4dd0e1; border-color: #4dd0e1; box-shadow: 0 0 8px rgba(77, 208, 225, 0.5); } /* Фриз (пропуск дня) - более прозрачный голубой */ .streak-circle.freeze { background: rgba(77, 208, 225, 0.15); border-color: rgba(77, 208, 225, 0.25); box-shadow: 0 0 4px rgba(77, 208, 225, 0.2); } /* Критический пропуск (третий) - оранжевый как клюв */ .streak-circle.missed-critical { background: rgba(255, 102, 0, 0.4); border-color: rgba(255, 102, 0, 0.5); box-shadow: 0 0 4px rgba(255, 102, 0, 0.3); } .screen-title { color: rgba(255, 255, 255, 0.9); text-align: center; margin-bottom: var(--kc-s-7); font-family: var(--kc-font-display); font-size: var(--kc-t-xl); font-weight: 600; letter-spacing: var(--kc-tr-wide); text-transform: uppercase; } .duration-start { margin-top: var(--kc-s-7); } .menu-buttons { display: flex; flex-direction: column; gap: 15px; width: 280px; } .top-quick-buttons { position: absolute; top: 20px; right: 20px; display: flex; gap: 8px; z-index: 10; } .thoughts-quick-btn, .premium-quick-btn { width: 36px; height: 36px; border-radius: 50%; font-size: 18px; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .thoughts-quick-btn { background: rgba(77, 208, 225, 0.15); border: 1px solid rgba(77, 208, 225, 0.3); color: rgba(77, 208, 225, 0.9); } .thoughts-quick-btn:active { transform: scale(0.9); background: rgba(77, 208, 225, 0.25); } .premium-quick-btn { background: rgba(255, 102, 0, 0.2); border: 1px solid rgba(255, 102, 0, 0.4); color: rgba(255, 102, 0, 0.9); } .premium-quick-btn:active { transform: scale(0.9); background: rgba(255, 102, 0, 0.3); } .menu-button { padding: 18px 40px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50px; color: rgba(255, 255, 255, 0.8); font-size: 16px; font-weight: 400; cursor: pointer; transition: all 0.3s; letter-spacing: 1px; } .menu-button:active { background: rgba(255, 255, 255, 0.12); transform: scale(0.98); } .menu-button.disabled { opacity: 0.3; pointer-events: none; } /* === ИГРОВОЙ ЭКРАН === */ #gameScreen { background: transparent; } .session-progress-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(0, 0, 0, 0.3); z-index: 15; } .session-progress-fill { height: 100%; background: var(--kc-text-soft); transition: width 0.3s ease-out; width: 100%; } .game-hud { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: var(--kc-tap-icon) 1fr var(--kc-tap-icon); align-items: center; gap: var(--kc-s-3); padding: var(--kc-s-4) var(--kc-s-5); z-index: 10; pointer-events: none; } .score-mini { pointer-events: auto; text-align: center; } .hud-center { display: flex; justify-content: center; } .score-mini { font-size: var(--kc-t-xl); font-weight: 500; color: var(--kc-text); letter-spacing: var(--kc-tr-wider); font-variant-numeric: tabular-nums; } #gameCanvas { position: absolute; top: 0; left: 0; touch-action: none; } .pause-btn { pointer-events: auto; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.15); } .debug-btn { position: absolute; top: 16px; left: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100; transition: all 0.2s; } .debug-btn:active { transform: scale(0.95); background: rgba(0, 0, 0, 0.5); } /* === ОВЕРЛЕИ (Game Over, Victory, Settings) === */ .overlay { background: #0f0f1a; /* perf: тяжёлый blur отключён — backdrop-filter: blur(10px); */ z-index: 1000; } .overlay-content { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50px; padding: 20px 15px; max-width: 360px; width: 90%; max-height: 85vh; overflow-y: auto; text-align: center; position: relative; } .overlay-content h2 { font-size: 22px; font-weight: 400; margin-bottom: 25px; letter-spacing: 4px; text-transform: uppercase; } .close-btn { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: none; color: rgba(255, 255, 255, 0.6); font-size: 18px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .close-btn:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.15); } .reset-btn { position: absolute; top: 16px; left: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: none; color: rgba(255, 255, 255, 0.6); font-size: 20px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .reset-btn:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.15); } /* === НАСТРОЙКИ === */ .settings-section { margin-bottom: 25px; } .setting-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 15px; color: rgba(255, 255, 255, 0.8); } .setting-row:last-child { border-bottom: none; } .toggle { position: relative; width: 50px; height: 28px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.1); border-radius: 28px; transition: 0.3s; cursor: pointer; } .toggle-slider:before { content: ""; position: absolute; height: 22px; width: 22px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; } .toggle input:checked + .toggle-slider { background: #4dd0e1; } .toggle input:checked + .toggle-slider:before { transform: translateX(22px); } /* === ИНФОРМАЦИЯ === */ .info-section { text-align: left; margin-bottom: 25px; padding: 15px; background: rgba(255, 255, 255, 0.03); border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.06); } .info-section h3 { font-size: 16px; font-weight: 400; margin-bottom: 12px; color: #4dd0e1; } .info-section p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin-bottom: 10px; } .info-list { list-style: none; padding: 0; } .info-list li { padding: 8px 0; padding-left: 20px; position: relative; font-size: 14px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; } .info-list li:before { content: "•"; position: absolute; left: 0; color: #4dd0e1; font-size: 18px; } .version { text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.3); margin-top: 20px; } /* === АДАПТАЦИЯ === */ @media (max-height: 700px) { .game-title { font-size: 28px; margin-bottom: 40px; } .menu-button { padding: 15px 35px; font-size: 15px; } #logoCanvas { width: 150px; height: 150px; } } /* === ВЫБОР СОСТОЯНИЯ === */ .state-buttons { display: flex; flex-direction: column; gap: 15px; width: 280px; } .state-list { display: flex; flex-direction: column; gap: 10px; width: 280px; margin: var(--kc-s-3) auto 0; scrollbar-width: none; } .state-list::-webkit-scrollbar { display: none; } .state-item { position: relative; width: 280px; } .state-item .state-button { width: 100%; margin: 0; text-align: center; } .state-button { padding: 18px 40px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50px; color: rgba(255, 255, 255, 0.8); font-size: 16px; font-weight: 400; cursor: pointer; transition: all 0.3s; letter-spacing: 1px; text-align: center; } .state-button:active { background: rgba(255, 255, 255, 0.12); transform: scale(0.98); } .state-button.active { background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.3); color: rgba(74, 222, 128, 0.9); } .state-button.active:active { background: rgba(74, 222, 128, 0.15); transform: scale(0.98); } .state-button.secondary { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } .state-button.secondary:active { background: rgba(255, 255, 255, 0.08); } .state-button.disabled { background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.3); cursor: not-allowed; } .state-button.disabled:active { transform: none; } .state-name { font-size: 16px; font-weight: 400; letter-spacing: 1px; } .state-status { display: none; /* Убираем статус, будет видно по цвету */ } /* === ВЫБОР ДЛИТЕЛЬНОСТИ === */ .duration-inner { position: relative; width: 100%; max-width: var(--kc-app-max-w); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .duration-back { position: absolute; top: 16px; left: 16px; } .duration-buttons { display: flex; gap: 12px; width: 100%; max-width: 300px; justify-content: center; } .duration-btn { width: 50px; height: 50px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50px; color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; } .duration-btn:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.12); } .duration-btn.active { background: rgba(77, 208, 225, 0.15); border-color: rgba(77, 208, 225, 0.4); color: rgba(77, 208, 225, 1); } .duration-btn.locked { opacity: 0.35; cursor: pointer; } .duration-time { font-size: 22px; font-weight: 300; letter-spacing: 0; } .menu-button.secondary { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } .menu-button.secondary:active { background: rgba(255, 255, 255, 0.08); } /* === ВРЕМЯ И ДАТА СБОРКИ === */ .build-info { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 11px; color: rgba(255, 255, 255, 0.25); font-weight: 300; letter-spacing: 0.5px; line-height: 1.4; } /* === ЗАВЕРШЕНИЕ СЕССИИ === */ .session-complete-screen { background: #0f0f1a; padding: 60px 20px; } .affirmation-text { font-family: var(--kc-font); font-size: var(--kc-t-xl); font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.95); margin-bottom: 50px; text-align: center; letter-spacing: normal; animation: fadeInAffirmation 0.8s ease-out; max-width: 280px; margin-left: auto; margin-right: auto; } @keyframes fadeInAffirmation { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Три плашки на экране завершения */ .session-metrics { width: 280px; margin: 0 auto var(--kc-s-7); } /* === СТАТИСТИКА === */ .stats-body { display: flex; flex-direction: column; gap: var(--kc-s-4); padding: 0 var(--kc-s-5) var(--kc-s-6); } .stats-spark-svg { width: 100%; height: 60px; display: block; margin-bottom: var(--kc-s-2); } .stats-spark-labels { display: flex; justify-content: space-between; font-size: var(--kc-t-xs); color: var(--kc-text-soft); letter-spacing: 0.04em; } .stats-period-btn.disabled { opacity: 0.3; cursor: pointer; } /* === МЕСЯЧНЫЙ КАЛЕНДАРЬ === */ .month-calendar { padding: 15px; background: rgba(255, 255, 255, 0.03); border-radius: var(--kc-r-card); border: 1px solid var(--kc-border); display: block; } .month-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; font-size: 16px; color: rgba(255, 255, 255, 0.9); font-weight: 400; letter-spacing: 1px; } .month-name { flex: 1; text-align: center; } .month-nav-btn { width: var(--kc-tap-icon); height: var(--kc-tap-icon); display: flex; align-items: center; justify-content: center; background: var(--kc-surface-hover); border: none; border-radius: var(--kc-r-circle); color: var(--kc-text-dim); cursor: pointer; transition: background var(--kc-dur), color var(--kc-dur), transform var(--kc-dur) var(--kc-ease); } .month-nav-btn:hover { background: var(--kc-surface-active); color: var(--kc-text); } .month-nav-btn:active { transform: scale(0.93); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .calendar-day-name { text-align: center; font-size: 11px; color: rgba(255, 255, 255, 0.5); padding: 5px 0; font-weight: 400; letter-spacing: 0.5px; } .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; color: rgba(255, 255, 255, 0.6); transition: background 0.3s var(--kc-ease), color 0.3s var(--kc-ease), border-color 0.3s var(--kc-ease); } .calendar-day.empty { background: transparent; border: none; } .calendar-day.today { border-color: rgba(77, 208, 225, 0.5); } .calendar-day.session { background: #4dd0e1; border-color: #4dd0e1; color: #0f0f1a; font-weight: 500; box-shadow: 0 0 8px rgba(77, 208, 225, 0.5); } .calendar-day.freeze { background: rgba(77, 208, 225, 0.15); border-color: rgba(77, 208, 225, 0.25); color: rgba(255, 255, 255, 0.6); box-shadow: 0 0 4px rgba(77, 208, 225, 0.2); } .calendar-day.missed-critical { background: rgba(255, 102, 0, 0.4); border-color: rgba(255, 102, 0, 0.5); color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 4px rgba(255, 102, 0, 0.3); } .calendar-day:not(.empty) { cursor: pointer; } /* Приглушённые дни вне выбранного периода */ .calendar-day.dimmed { opacity: 0.3; } /* === СТАТИСТИКА ПО СОСТОЯНИЯМ === */ .states-stats { margin: 0; padding: 0; background: none; border: none; border-radius: 0; } .states-stats-header { font-size: var(--kc-t-xs); color: var(--kc-text-soft); text-transform: uppercase; letter-spacing: var(--kc-tr-wider); font-weight: 500; margin-bottom: var(--kc-s-3); } .states-stats-item { display: flex; justify-content: space-between; align-items: center; padding: var(--kc-s-2) 0; border-bottom: 1px solid var(--kc-border); } .states-stats-item:last-child { border-bottom: none; } .states-stats-label { font-size: var(--kc-t-xl); line-height: 1.1; color: var(--kc-text-dim); } .states-stats-value { font-size: var(--kc-t-xl); line-height: 1; letter-spacing: var(--kc-tr-tight); font-weight: 400; color: var(--kc-text); font-variant-numeric: tabular-nums; } /* === ТЕСТ АНИМАЦИЙ === */ .test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 360px; margin: 0 auto; } .test-item { display: flex; flex-direction: column; align-items: center; gap: 8px; } .test-canvas { width: 100px; height: 100px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; } .test-label { font-size: 12px; color: rgba(255, 255, 255, 0.6); text-align: center; letter-spacing: 0.5px; } /* Вкладки теста */ .test-tabs { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; } .test-tab { padding: 10px 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50px; color: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.2s var(--kc-ease), color 0.2s var(--kc-ease), border-color 0.2s var(--kc-ease); } .test-tab:active { transform: scale(0.95); } .test-tab.active { background: rgba(77, 208, 225, 0.15); border-color: rgba(77, 208, 225, 0.4); color: rgba(77, 208, 225, 1); } .test-tab-content { width: 100%; } .test-tab-content.hidden { display: none; } @media (max-width: 380px) { .overlay-content { padding: 15px 10px; } .overlay-content h2 { font-size: 20px; } .menu-buttons { width: 260px; } .state-buttons { width: 280px; } .duration-buttons { gap: 10px; max-width: 280px; } .duration-btn { width: 48px; height: 48px; } .affirmation-text { padding: 20px; } .test-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; max-width: 300px; } .test-canvas { width: 85px; height: 85px; } } /* === ВЫБОР СКИНА КУКУШКИ === */ .skin-selector { display: flex; flex-direction: column; gap: 15px; } .skin-option { background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 15px; cursor: pointer; transition: background 0.3s var(--kc-ease), border-color 0.3s var(--kc-ease); } .skin-option:active { transform: scale(0.98); } .skin-option.selected { background: rgba(77, 208, 225, 0.15); border-color: rgba(77, 208, 225, 0.5); } .skin-option-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .skin-name { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.9); } .skin-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; } .skin-option.selected .skin-check { background: #4dd0e1; border-color: #4dd0e1; color: #0f0f1a; } .skin-preview { display: flex; justify-content: space-around; align-items: center; gap: 8px; } .skin-preview canvas { border-radius: 8px; } /* === ВЫБОР СКИНОВ С ГРАДАЦИЯМИ === */ .skin-selector-compact { display: flex; justify-content: center; padding: 0; } .skin-row-compact { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); flex-wrap: nowrap; } .skin-option { display: flex; align-items: center; justify-content: center; padding: 4px; cursor: pointer; transition: transform 0.2s var(--kc-ease), opacity 0.2s var(--kc-ease); flex-shrink: 0; } .skin-option:hover { transform: scale(1.08); } .skin-option:active { transform: scale(0.95); } .skin-option.selected { /* perf: тяжёлый filter drop-shadow отключён — filter: drop-shadow(0 0 8px rgba(77, 208, 225, 0.6)); */ } .skin-option canvas { display: block; } /* === Редактор мыслей (Премиум) === */ /* ============================================ РЕДАКТОР МЫСЛЕЙ — по дизайн-системе ============================================ */ .thoughts-editor-body { display: flex; flex-direction: column; gap: var(--kc-s-3); padding: var(--kc-s-4) var(--kc-s-5) var(--kc-s-5); } .thoughts-list { display: flex; flex-direction: column; gap: var(--kc-s-2); } .kc-thought-card { cursor: pointer; } /* Тинты как у переключателя — из дизайн-системы (thought-токены) */ .thoughts-list .kc-thought-card[data-type="negative"] { background: var(--kc-thought-negative-soft); border-color: rgba(255,102,0,0.2); } .thoughts-list .kc-thought-card[data-type="positive"] { background: var(--kc-thought-positive-soft); border-color: rgba(77,208,225,0.2); } .kc-inline-actions { display: flex; justify-content: center; gap: var(--kc-s-4); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .22s var(--kc-ease), opacity .18s, padding .22s var(--kc-ease); padding: 0 var(--kc-s-2); } .kc-inline-actions .kc-action-bar-item { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .kc-inline-actions .kc-action-bar-icon { width: var(--kc-tap-icon); height: var(--kc-tap-icon); border-radius: var(--kc-r-circle); background: var(--kc-surface-hover); color: var(--kc-text-dim); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--kc-dur), transform var(--kc-dur) var(--kc-ease); } .kc-inline-actions .kc-action-bar-icon svg { width: 14px; height: 14px; } .kc-inline-actions .kc-action-bar-item:active .kc-action-bar-icon { transform: scale(0.93); background: var(--kc-surface-active); } .kc-inline-actions .kc-action-bar-item--danger .kc-action-bar-icon { color: #e06464; border: 1px solid rgba(220,80,80,0.35); } .kc-inline-actions .kc-action-bar-label { font-size: var(--kc-t-xs); font-weight: 500; white-space: nowrap; color: var(--kc-text-soft); } .kc-thought-card.is-open { border-color: var(--kc-border-strong); } .kc-thought-card.is-disabled { opacity: 0.45; } .kc-thought-card.is-disabled .kc-thought-text { text-decoration: line-through; color: var(--kc-text-soft); } input.kc-thought-text { background: transparent; border: none; outline: none; color: inherit; font: inherit; width: 100%; padding: 0; } .thoughts-add-row { display: flex; gap: var(--kc-s-2); align-items: flex-end; } /* Заглушка пустого списка мыслей */ .thoughts-empty { text-align: center; color: var(--kc-text-soft); padding: var(--kc-s-6) var(--kc-s-4); line-height: 1.5; } /* Контекст исходной мысли при генерации контрмысли */ .counter-thought-ctx { font-size: var(--kc-t-sm); color: var(--kc-text-dim); padding: 4px 4px 6px; line-height: 1.4; } .counter-thought-ctx::before { content: 'Контр для: '; font-style: italic; opacity: 0.7; } /* Textarea вместо input: тот же шрифт что в карточках мыслей, авторесайз */ .kc-input.thoughts-input { border-radius: var(--kc-r-card); padding: 12px 16px; letter-spacing: normal; font-size: var(--kc-t-base); line-height: 1.4; resize: none; overflow: hidden; min-height: var(--kc-tap-min); height: var(--kc-tap-min); max-height: 120px; /* поле не должно съедать экран и уводить кнопку «+» */ } .thoughts-add-btn { flex-shrink: 0; width: var(--kc-tap-min); height: var(--kc-tap-min); background: var(--kc-accent); border: none; border-radius: var(--kc-r-circle); color: #0a0a14; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; } .thoughts-add-btn:active { transform: scale(0.92); } .thoughts-add-btn[data-type="negative"] { background: var(--kc-warn); } .thoughts-add-btn[data-type="positive"] { background: var(--kc-accent); } /* ============================================ ЭКРАН «ОБ ИГРЕ» — по дизайн-системе ============================================ */ .about-body { display: flex; flex-direction: column; gap: var(--kc-s-4); padding: var(--kc-s-3) var(--kc-s-5) var(--kc-s-6); } .about-hero { text-align: center; font-family: var(--kc-font-display); font-size: var(--kc-t-xl); font-weight: 600; letter-spacing: var(--kc-tr-wide); text-transform: uppercase; color: var(--kc-text); padding: var(--kc-s-2) 0; } .about-section-label { text-align: center; font-family: var(--kc-font-display); font-size: var(--kc-t-xl); font-weight: 600; letter-spacing: var(--kc-tr-wide); text-transform: uppercase; color: var(--kc-text); padding: var(--kc-s-2) 0; } .about-card--me { --about-accent: var(--kc-gf-text); } .about-purple { color: var(--kc-gf-text); } /* Цветные акценты карточек — палитра экрана завершения сессии */ .about-card--principle { --about-accent: var(--kc-mid); } .about-card--practice { --about-accent: var(--kc-good); } .about-card { background: color-mix(in srgb, var(--about-accent, white) 7%, var(--kc-surface)); border-color: var(--kc-border); } .about-card-title { margin: 0 0 var(--kc-s-4); font-size: var(--kc-t-md); font-weight: 600; color: var(--about-accent, var(--kc-accent)); text-align: center; } .about-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kc-s-3); } .about-steps li { display: flex; gap: var(--kc-s-3); align-items: flex-start; } .about-step-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--kc-r-circle); background: var(--kc-surface-active); color: var(--kc-text-soft); font-size: var(--kc-t-sm); font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 1px; } /* Выделенный пункт списка — цветом карточки */ .about-steps li.is-marked .about-step-num { background: color-mix(in srgb, var(--about-accent, var(--kc-accent)) 22%, transparent); color: var(--about-accent, var(--kc-accent)); } .about-steps li > span:last-child { flex: 1; font-size: var(--kc-t-base); line-height: 1.6; color: var(--kc-text-dim); } .about-text { display: flex; flex-direction: column; gap: var(--kc-s-3); } .about-text p { margin: 0; font-size: var(--kc-t-base); line-height: 1.7; color: var(--kc-text-dim); } .about-consult { text-decoration: none; border-color: var(--kc-border); justify-content: center; text-align: center; } .about-consult svg { width: 20px; height: 20px; } .about-socials { display: flex; justify-content: space-between; align-items: center; gap: var(--kc-s-2); width: 100%; } .about-social { width: 52px; height: 52px; border-radius: var(--kc-r-circle); overflow: hidden; display: flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; transition: transform var(--kc-dur) var(--kc-ease); } .about-social:active { transform: scale(0.92); } .about-social svg { width: 52px; height: 52px; display: block; } /* Юридический футер в разделе «Об игре» */ .about-legal { display: flex; flex-direction: column; align-items: center; gap: var(--kc-s-2); padding: var(--kc-s-4) 0 var(--kc-s-2); } .about-legal-link { font-size: var(--kc-t-sm); color: var(--kc-text-dim); text-decoration: underline; text-underline-offset: 2px; opacity: 0.8; } .about-legal-link:active { opacity: 0.5; } .about-delete-section { display: flex; align-items: center; gap: 10px; padding: 6px 4px 2px; flex-wrap: wrap; } .about-delete-label { font-size: var(--kc-t-sm); color: var(--kc-text-dim); flex: 1; } .about-delete-confirm { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 10px 0 4px; } .about-delete-confirm.hidden { display: none; } .about-delete-confirm-text { font-size: var(--kc-t-sm); color: #e06464; line-height: 1.4; } .about-delete-confirm-btns { display: flex; gap: 8px; } .about-disclaimer { background: var(--kc-warn-soft); border: 1px solid var(--kc-border); border-radius: var(--kc-r-card); padding: var(--kc-s-4); } .about-disclaimer p { margin: 0; font-size: var(--kc-t-base); line-height: 1.6; color: var(--kc-text-dim); text-align: center; } /* ========================================================= МОДАЛКА «ОФОРМИТЕ ПРЕМИУМ» — по тапу на залоченные кнопки. Подложка = .kc-backdrop, коробка = .kc-card (см. kukuha-system.css). ========================================================= */ .premium-gate-overlay { display: flex; position: fixed; inset: 0; background: rgba(15, 15, 26, 0.85); z-index: 2000; align-items: center; justify-content: center; padding: var(--kc-s-5); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .premium-gate-overlay.visible { opacity: 1; pointer-events: auto; } .premium-gate-box { width: 100%; max-width: 300px; text-align: center; } .premium-gate-text { font-size: var(--kc-t-base); color: var(--kc-text-dim); margin-bottom: var(--kc-s-5); line-height: 1.5; } .premium-gate-actions { display: flex; flex-direction: column; gap: var(--kc-s-3); } /* ========================================================= МИКРОАНИМАЦИИ ========================================================= */ /* Слайд-переход между экранами */ .screen { transition: transform 0.34s var(--kc-ease); } .screen.slide-from-right { transform: translateX(100%); } .screen.slide-from-left { transform: translateX(-100%); } /* Заполнение стрика на главной */ @keyframes kc-streak-pop { 0% { transform: scale(0.2); opacity: 0; } 65% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .streak-circle { animation: kc-streak-pop 0.5s var(--kc-ease) backwards; } .streak-circle:nth-child(1) { animation-delay: 0.05s; } .streak-circle:nth-child(2) { animation-delay: 0.11s; } .streak-circle:nth-child(3) { animation-delay: 0.17s; } .streak-circle:nth-child(4) { animation-delay: 0.23s; } .streak-circle:nth-child(5) { animation-delay: 0.29s; } .streak-circle:nth-child(6) { animation-delay: 0.35s; } .streak-circle:nth-child(7) { animation-delay: 0.41s; } /* Появление карточек метрик волной */ @keyframes kc-metric-rise { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .kc-metrics .kc-metric { animation: kc-metric-rise 0.44s var(--kc-ease) backwards; } .kc-metrics .kc-metric:nth-child(1) { animation-delay: 0.08s; } .kc-metrics .kc-metric:nth-child(2) { animation-delay: 0.18s; } .kc-metrics .kc-metric:nth-child(3) { animation-delay: 0.28s; } /* Появление ячеек календаря волной (delay задаётся инлайн в JS) */ @keyframes kc-cal-fade { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } .calendar-day:not(.empty) { animation: kc-cal-fade 0.38s var(--kc-ease) backwards; } /* Скользящий индикатор сегментированного переключателя */ .kc-segmented:not(.kc-segmented--thoughts) { position: relative; } .kc-segmented:not(.kc-segmented--thoughts)::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px - (var(--seg-count, 4) - 1) * 2px) / var(--seg-count, 4)); background: var(--kc-accent-soft); border-radius: calc(var(--kc-r-card) - 4px); transform: translateX(calc(var(--seg-i, 0) * (100% + 2px))); transition: transform 0.32s var(--kc-ease); pointer-events: none; } .kc-segmented:not(.kc-segmented--thoughts) button { position: relative; z-index: 1; } .kc-segmented:not(.kc-segmented--thoughts) button.is-active { background: transparent; } /* ── AI usage bar (аккаунт) ─────────────────────────────────── */ .kc-bar.ai-usage-bar { background: var(--kc-gf-soft); } .kc-bar.ai-usage-bar > i { background: var(--kc-gf); transition: width .4s var(--kc-ease); } /* ── Экран аккаунта ─────────────────────────────────────────── */ .account-status-row { display: flex; align-items: center; gap: var(--kc-s-4); } .account-avatar { width: var(--kc-btn-h); height: var(--kc-btn-h); border-radius: var(--kc-r-circle); background: var(--kc-surface-hover); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .account-avatar svg { width: 28px; height: 28px; fill: var(--kc-text-soft); } .account-info { display: flex; flex-direction: column; gap: var(--kc-s-1); } .account-name { font-weight: 600; color: var(--kc-text); } .account-platform { color: var(--kc-text-soft); } .account-platform--tg { color: var(--kc-platform-tg, #29A9EB); } .account-platform--vk { color: var(--kc-platform-vk, #0077FF); } /* ── Блок входа (js/auth.js) ─────────────────────────────── */ .auth-card .auth-sub { margin-bottom: var(--kc-s-4); } .auth-identity { font-size: var(--kc-t-md); color: var(--kc-text); word-break: break-word; margin: 0; } .auth-providers { display: flex; flex-direction: column; align-items: center; gap: var(--kc-s-3); margin-bottom: var(--kc-s-4); } /* Официальные виджеты провайдеров центрируем единой колонкой */ .auth-widget { display: flex; justify-content: center; width: 100%; min-height: var(--kc-btn-h); align-items: center; } .auth-widget iframe { border-radius: var(--kc-r-pill) !important; } .auth-apple-btn { justify-content: center; } .auth-divider { display: flex; align-items: center; gap: var(--kc-s-3); margin: var(--kc-s-2) 0 var(--kc-s-4); color: var(--kc-text-soft); font-size: var(--kc-t-xs); letter-spacing: var(--kc-tr-wider); text-transform: uppercase; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--kc-border); } .auth-linked { margin-bottom: var(--kc-s-4); } .auth-linked .auth-ok { color: var(--kc-good); } .auth-email-form { display: flex; flex-direction: column; gap: var(--kc-s-3); } .auth-email-form .auth-error { margin: 0; min-height: 14px; display: none; } .account-providers { display: flex; flex-direction: column; gap: var(--kc-s-3); } .account-provider-btn { display: flex; align-items: center; gap: var(--kc-s-3); width: 100%; min-height: var(--kc-btn-h); /* левый отступ = вертикальному зазору иконки (56-36)/2 = 10px, чтобы лого было ровно по всем краям */ padding: 0 var(--kc-s-5) 0 10px; border: 1px solid var(--kc-border-strong); border-radius: var(--kc-r-pill); background: var(--kc-surface); color: var(--kc-text); font-family: var(--kc-font); font-size: var(--kc-btn-size); font-weight: 400; letter-spacing: var(--kc-tr-wide); cursor: pointer; transition: background var(--kc-dur), transform var(--kc-dur) var(--kc-ease); } .account-provider-btn:active { transform: scale(0.97); background: var(--kc-surface-active); } .account-provider-btn:disabled { opacity: 0.35; pointer-events: none; } .account-provider-btn--linked { border-color: var(--kc-border-strong); background: var(--kc-surface-hover); } .account-provider-icon { width: var(--kc-tap-icon); height: var(--kc-tap-icon); flex-shrink: 0; } /* Галочка-кружок внутри кнопки провайдера (справа). Появляется, когда вход подключён. */ .account-provider-check { margin-left: auto; width: 22px; height: 22px; border-radius: var(--kc-r-circle); background: var(--kc-text-soft); color: var(--kc-bg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .account-provider-check .kc-i { width: 12px; height: 12px; } /* ── Привязка по коду ──────────────────────────────────── */ .link-code-area { margin-top: var(--kc-s-4); padding-top: var(--kc-s-4); border-top: 1px solid var(--kc-border); } .link-code-actions { display: flex; gap: var(--kc-s-3); } .link-code-actions .kc-btn { flex: 1; } .link-code-display { text-align: center; padding-top: var(--kc-s-4); } .link-code-hint { margin-bottom: var(--kc-s-3); } .link-code-value { font-family: var(--kc-font-mono); font-size: var(--kc-t-hero); font-weight: 600; letter-spacing: var(--kc-tr-wider); color: var(--kc-text); margin-bottom: var(--kc-s-3); -webkit-user-select: all; user-select: all; } .link-code-timer { margin-top: var(--kc-s-3); } .link-code-enter { padding-top: var(--kc-s-4); } .link-code-form { display: flex; gap: var(--kc-s-3); } .link-code-field { flex: 1; text-align: center; font-family: var(--kc-font-mono); letter-spacing: var(--kc-tr-wider); text-transform: uppercase; } .link-code-error { margin-top: var(--kc-s-2); display: none; } /* ── Удалить аккаунт ──────────────────────────────────── */ /* Заголовок и описание идут сверху вниз по той же сетке, что и другие карточки, а иконка прижата в правый верхний угол с тем же отступом, что и паддинг карточки */ .account-delete-card { position: relative; } .account-delete-card .kc-card-head, .account-delete-card > p { margin-bottom: 2px; /* оставляем место под иконку, чтобы заголовок и описание не наезжали */ padding-right: calc(var(--kc-tap-icon) + var(--kc-s-3)); } .account-delete-btn { position: absolute; top: var(--kc-s-5); right: var(--kc-s-5); } /* ── Dev-кнопки (правый верхний угол главного экрана) ──────── */ .dev-top-btns { position: absolute; top: var(--kc-s-3); right: var(--kc-s-3); display: flex; gap: var(--kc-s-2); z-index: 10; } /* ── ИИ-результат (общий) ───────────────────────────────────── */ .ai-result { margin-top: var(--kc-s-3); padding: var(--kc-s-4); border-radius: var(--kc-r-card); background: var(--kc-bg-elevated); border: 1px solid var(--kc-border); } .ai-result-text { line-height: 1.6; color: var(--kc-text); white-space: pre-wrap; } .ai-result-loading { color: var(--kc-text-soft); font-style: italic; } .ai-analysis-result { font-family: var(--kc-font); font-size: var(--kc-t-xl); font-weight: 400; line-height: 1.6; letter-spacing: normal; color: rgba(255, 255, 255, 0.95); text-align: center; white-space: pre-wrap; } /* Разбор на мысли: один в один как «Мои мысли». Карточка — тот же .kc-thought-card (дизайн-система), те же тинты и шрифты; чекбокс встаёт на место точки (.thought-more). Сверху — компактный селект состояния. */ .extract-checklist { display: flex; flex-direction: column; gap: var(--kc-s-4); } .extract-thought { display: flex; flex-direction: column; gap: var(--kc-s-2); } /* Тинты карточки — те же, что в .thoughts-list */ .extract-checklist .kc-thought-card[data-type="negative"] { background: var(--kc-thought-negative-soft); border-color: rgba(255, 102, 0, 0.2); } .extract-checklist .kc-thought-card[data-type="positive"] { background: var(--kc-thought-positive-soft); border-color: rgba(77, 208, 225, 0.2); } /* Текст-инпут выглядит как .kc-thought-text (шрифт наследуется), справа место под чекбокс */ .extract-card .kc-thought-text.extract-text { background: transparent; border: none; outline: none; padding: 0; padding-right: 22px; } /* Чекбокс выбора — точно на месте точки (.thought-more): абсолютно справа, по центру */ .extract-card .extract-cb { position: absolute; right: var(--kc-s-4); top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: transparent; border: 1px solid var(--kc-text-dim); color: var(--kc-text); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--kc-dur), border-color var(--kc-dur); } .extract-card .extract-cb .kc-i { width: 9px; height: 9px; opacity: 0; transition: opacity var(--kc-dur); } .extract-card .extract-cb.is-active { border-color: var(--kc-text); } .extract-card .extract-cb.is-active .kc-i { opacity: 1; } .extract-card .extract-cb:active { transform: translateY(-50%) scale(0.9); } /* Свой дроп состояния (нативный