/* ================================================
   Quantum Life Guide v4.3 — Mobile Responsive CSS
   Полная адаптация для мобильных устройств
   ================================================ */

/* ============ ОБЩИЕ ПРАВИЛА ============ */
/* Запрет горизонтальной прокрутки */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Все изображения не выходят за пределы */
img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Все таблицы и блоки */
table, pre, code, .chart-container, .crystals-grid, .params-grid {
  max-width: 100%;
  overflow-x: auto;
}

/* ============ ПЛАНШЕТЫ (max-width: 1024px) ============ */
@media (max-width: 1024px) {
  /* Landing: results grid */
  .results-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  /* Dashboard: stats grid */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Calculator: container */
  .container {
    padding: 15px;
  }

  /* Calculator: chart height */
  #radarChart {
    height: 550px !important;
    min-height: 400px !important;
  }
}

/* ============ МОБИЛЬНЫЕ (max-width: 768px) ============ */
@media (max-width: 768px) {
  /* --- Landing --- */
  .hero {
    padding: 60px 15px 50px;
  }

  h1 {
    font-size: 2em !important;
    letter-spacing: 0;
  }

  h2 {
    font-size: 1.6em !important;
  }

  .subtitle {
    font-size: 1.1em;
  }

  .quantum-symbol {
    font-size: 50px;
  }

  section {
    margin: 40px 0;
    padding: 25px 15px;
    border-radius: 15px;
  }

  .method-card {
    padding: 25px 18px;
    margin: 20px 0;
  }

  .method-card h3 {
    font-size: 1.4em;
  }

  .method-icon {
    font-size: 45px;
  }

  .results-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .result-item {
    padding: 18px;
  }

  .result-item:hover {
    transform: translateY(-5px) scale(1.02);
  }

  .author-card {
    flex-direction: column;
    text-align: center;
    padding: 25px 18px;
    gap: 25px;
  }

  .photo-placeholder,
  .author-photo-img {
    width: 140px;
    height: 140px;
    font-size: 3em;
  }

  .author-info h3 {
    font-size: 1.8em;
  }

  .cta {
    padding: 50px 20px;
  }

  .cta h2 {
    font-size: 2em;
  }

  .cta-button {
    padding: 15px 30px;
    font-size: 1.1em;
    width: 100%;
    justify-content: center;
  }

  .lead {
    font-size: 1.1em;
  }

  /* --- Calculator --- */
  .container {
    padding: 10px;
  }

  header {
    padding: 20px 10px;
  }

  .calculator-wrapper {
    max-width: 100%;
  }

  .calc-form {
    padding: 20px 15px;
    border-radius: 15px;
  }

  .form-section h2 {
    font-size: 1.5em !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .form-group {
    margin-bottom: 18px;
  }

  label {
    font-size: 1em;
    gap: 8px;
  }

  .label-icon {
    font-size: 1.1em;
  }

  input[type="text"],
  input[type="date"],
  input[type="time"],
  input[type="email"] {
    padding: 12px 15px;
    font-size: 1em;
  }

  .submit-btn {
    padding: 15px;
    font-size: 1.1em;
  }

  /* Gender */
  .gender-group {
    gap: 10px;
  }

  .gender-label {
    padding: 12px;
    font-size: 1em;
  }

  .gender-icon {
    font-size: 1.3em;
  }

  /* Loading */
  .loading {
    padding: 40px 15px;
    margin-top: 20px;
  }

  .loading p {
    font-size: 1.1em;
  }

  .loader {
    width: 60px;
    height: 60px;
  }

  /* Results */
  .results {
    margin-top: 25px;
  }

  .results-title {
    font-size: 1.8em !important;
    margin-bottom: 25px;
  }

  /* Energy Profile */
  .energy-profile-section {
    padding: 20px 15px;
    margin-bottom: 25px;
  }

  .energy-profile-title {
    font-size: 1.4em;
  }

  .energy-profile-summary {
    font-size: 1em;
  }

  .energy-profile-badges {
    gap: 8px;
  }

  .energy-badge {
    padding: 6px 12px;
    font-size: 0.85em;
  }

  /* Quantum Params */
  .quantum-params {
    padding: 20px 15px;
    margin-bottom: 25px;
  }

  .quantum-params h3 {
    font-size: 1.4em !important;
  }

  .params-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .param-item {
    padding: 15px;
  }

  .param-value {
    font-size: 1.3em;
  }

  .param-explanation {
    font-size: 0.78em;
  }

  /* Chart */
  .chart-container {
    padding: 15px 5px;
    margin-bottom: 25px;
  }

  #radarChart {
    height: 400px !important;
    min-height: 300px !important;
  }

  /* Life Areas */
  .life-areas-breakdown h3 {
    font-size: 1.4em;
  }

  .life-area-card summary {
    padding: 14px 12px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .area-icon {
    font-size: 1.3em;
  }

  .area-name {
    font-size: 1em;
    flex: 1;
    min-width: 0;
  }

  .area-percent {
    font-size: 1.2em;
    min-width: 45px;
  }

  .area-level {
    font-size: 0.75em;
    min-width: auto;
    padding: 3px 8px;
  }

  .area-progress-bar {
    width: 80px;
  }

  .life-area-content {
    padding: 15px;
  }

  .life-area-content .area-recommendation {
    padding: 10px 12px;
    font-size: 0.95em;
  }

  /* Matrix Destiny */
  .matrix-destiny-section {
    padding: 25px 15px;
    margin-bottom: 25px;
  }

  .matrix-destiny-section h3 {
    font-size: 1.4em;
  }

  .matrix-destiny-section h4 {
    font-size: 1.1em;
  }

  .matrix-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .matrix-card {
    padding: 14px;
  }

  .matrix-card-value {
    font-size: 1.6em;
  }

  .matrix-purpose-timeline {
    flex-direction: column !important;
    gap: 10px;
  }

  .purpose-item {
    min-width: auto;
  }

  .purpose-value {
    font-size: 1.5em;
  }

  /* Pythagoras */
  .pythagoras-section {
    padding: 25px 15px;
    margin-bottom: 25px;
  }

  .pythagoras-section h3 {
    font-size: 1.4em;
  }

  .pythagoras-section h4 {
    font-size: 1.1em;
  }

  .pythagoras-table {
    gap: 6px;
  }

  .pyth-cell {
    padding: 12px 8px;
  }

  .pyth-cell-name {
    font-size: 0.7em;
    letter-spacing: 0.5px;
  }

  .pyth-cell-digits {
    font-size: 1.4em !important;
    min-height: 35px;
  }

  .pyth-cell-level {
    font-size: 0.75em;
  }

  .pyth-lines {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pyth-work-numbers {
    gap: 8px;
    padding: 12px;
  }

  .pyth-work-num {
    padding: 6px 12px;
  }

  .pyth-work-num-value {
    font-size: 1.2em;
  }

  /* AI Analysis (Accordion) */
  #aiAnalysisContainer h3 {
    font-size: 1.4em;
  }

  #aiAnalysisContainer summary {
    font-size: 1.1em;
    padding: 8px;
  }

  #aiAnalysisContainer details {
    padding: 15px;
  }

  #aiAnalysisContainer details p {
    font-size: 0.95em;
  }

  #aiAnalysisContainer ul, #aiAnalysisContainer ol {
    padding-left: 18px;
  }

  /* Crystals */
  .crystals-section {
    padding: 25px 15px;
    margin-bottom: 25px;
  }

  .crystals-section h3 {
    font-size: 1.5em !important;
  }

  .crystals-grid {
    grid-template-columns: 1fr !important;
    gap: 15px;
  }

  .crystal-card {
    padding: 20px;
  }

  .crystal-card:hover {
    transform: translateY(-5px);
  }

  .crystal-icon {
    font-size: 45px;
  }

  .crystal-name {
    font-size: 1.2em;
  }

  .crystal-meta {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  /* Crystal Synergies */
  .crystal-synergies-section {
    padding: 20px 15px;
    margin-bottom: 25px;
  }

  .crystal-synergies-section h3 {
    font-size: 1.3em;
  }

  .synergy-item {
    padding: 12px 14px;
    font-size: 0.9em;
  }

  /* Gemini Consultation */
  .gemini-consultation {
    padding: 25px 15px;
    margin-bottom: 25px;
  }

  .gemini-consultation h3 {
    font-size: 1.5em !important;
  }

  .consultation-intro {
    font-size: 0.95em;
    margin-bottom: 20px;
  }

  .consultation-input-group textarea {
    font-size: 0.95em;
    padding: 12px 14px;
    min-height: 80px;
  }

  .gemini-response {
    padding: 18px;
    margin-top: 20px;
  }

  .gemini-response h4 {
    font-size: 1.2em;
  }

  .gemini-answer {
    font-size: 0.95em;
  }

  /* Action Buttons */
  .action-buttons {
    flex-direction: column !important;
    gap: 12px;
  }

  .action-btn {
    width: 100% !important;
    min-width: auto !important;
    padding: 15px 20px;
    font-size: 1.05em;
  }

  .action-btn:hover {
    transform: translateY(-2px);
  }

  /* Footer */
  footer {
    padding: 25px 15px;
    margin-top: 40px;
    font-size: 0.85em;
  }

  /* Profile Menu */
  .profile-menu {
    top: 10px;
    right: 10px;
  }

  .profile-button {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .profile-dropdown {
    min-width: 180px;
    right: 0;
  }

  .profile-dropdown-item {
    padding: 10px 16px;
    font-size: 0.95em;
  }

  .user-info-dropdown {
    padding: 12px 16px;
  }

  /* Lang toggle */
  .lang-toggle {
    width: 44px;
    height: 44px;
    bottom: 15px;
    right: 15px;
    font-size: 12px;
  }

  /* Theme toggle (landing) */
  .theme-toggle {
    width: 44px;
    height: 44px;
    bottom: 15px;
    right: 15px;
    font-size: 18px;
  }

  /* Модальное окно Email */
  .modal-content {
    margin: 25% auto;
    padding: 20px;
    width: 95%;
  }

  .modal-content h3 {
    font-size: 1.2em;
  }

  .modal-content input[type="email"] {
    width: 95%;
    padding: 10px;
    font-size: 15px;
  }

  .modal-content button {
    padding: 10px 20px;
    font-size: 14px;
  }

  .modal-buttons {
    flex-direction: column;
    gap: 8px;
  }

  /* --- Dashboard --- */
  .dashboard-container {
    padding: 10px;
    margin-top: 50px;
  }

  .dashboard-header {
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    text-align: center;
  }

  .user-info {
    flex-direction: column;
    text-align: center;
  }

  .user-avatar {
    width: 50px;
    height: 50px;
  }

  .user-details h2 {
    font-size: 1.2em;
  }

  .btn-logout {
    width: 100%;
    padding: 10px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .stat-card {
    padding: 15px;
  }

  .stat-card h3 {
    font-size: 11px;
  }

  .stat-card .stat-value {
    font-size: 24px;
  }

  .history-section {
    padding: 20px 12px;
  }

  .history-section h2 {
    font-size: 1.3em;
    margin-bottom: 15px;
  }

  .history-filters {
    flex-wrap: wrap;
    gap: 6px;
  }

  .filter-btn {
    padding: 6px 12px;
    font-size: 12px;
    flex: 1;
    min-width: 0;
    text-align: center;
  }

  .history-item {
    padding: 14px;
  }

  .history-item-header {
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
  }

  .history-item-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .btn-small {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    font-size: 11px;
  }

  /* Dashboard: Back button */
  a[data-i18n="dash.backToCalc"] {
    padding: 8px 14px;
    font-size: 13px;
    top: 10px;
    left: 10px;
  }

  /* Pagination */
  .pagination {
    flex-wrap: wrap;
    gap: 5px !important;
  }

  .pagination .btn-small {
    padding: 6px 10px;
    font-size: 11px;
    min-width: 32px;
  }

  /* Notification */
  .notification {
    right: 10px;
    left: 10px;
    max-width: none;
  }

  /* --- Auth --- */
  .auth-container {
    padding: 5px;
  }

  .auth-header {
    padding: 25px 15px;
  }

  .auth-header h1 {
    font-size: 22px;
  }

  .auth-body {
    padding: 25px 15px;
  }

  .google-btn {
    font-size: 14px;
    padding: 10px 15px;
  }

  .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ============ МАЛЕНЬКИЕ МОБИЛЬНЫЕ (max-width: 420px) ============ */
@media (max-width: 420px) {
  h1 {
    font-size: 1.6em !important;
  }

  h2 {
    font-size: 1.3em !important;
  }

  .subtitle {
    font-size: 0.95em;
  }

  .hero {
    padding: 40px 10px 35px;
  }

  /* Landing sections */
  section {
    padding: 20px 12px;
    margin: 25px 0;
  }

  .method-card {
    padding: 18px 14px;
  }

  .method-card h3 {
    font-size: 1.2em;
  }

  .formula {
    font-size: 0.9em;
    padding: 12px;
  }

  /* Calculator form */
  .calc-form {
    padding: 15px 12px;
  }

  .form-section h2 {
    font-size: 1.3em !important;
    margin-bottom: 20px;
  }

  input[type="text"],
  input[type="date"],
  input[type="time"] {
    padding: 10px 12px;
    font-size: 0.95em;
  }

  .submit-btn {
    padding: 13px;
    font-size: 1em;
  }

  /* Params */
  .quantum-params {
    padding: 15px 12px;
  }

  .param-label {
    font-size: 0.8em;
  }

  .param-value {
    font-size: 1.2em;
  }

  /* Chart */
  #radarChart {
    height: 300px !important;
    min-height: 250px !important;
  }

  .chart-container {
    padding: 10px 2px;
  }

  /* Life areas summary - stack vertically */
  .life-area-card summary {
    padding: 12px 10px;
    gap: 8px;
  }

  .area-name {
    font-size: 0.9em;
  }

  .area-percent {
    font-size: 1.1em;
  }

  .area-level {
    font-size: 0.7em;
    padding: 2px 6px;
  }

  .area-progress-bar {
    width: 60px;
    height: 6px;
  }

  /* Pythagoras */
  .pythagoras-table {
    gap: 4px;
  }

  .pyth-cell {
    padding: 8px 5px;
  }

  .pyth-cell-digits {
    font-size: 1.2em !important;
    min-height: 28px;
  }

  .pyth-cell-name {
    font-size: 0.6em;
  }

  /* Dashboard stats */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-card .stat-value {
    font-size: 20px;
  }

  .stat-card h3 {
    font-size: 10px;
  }

  /* Crystals */
  .crystal-card {
    padding: 15px;
  }

  .crystal-icon {
    font-size: 35px;
  }

  .crystal-name {
    font-size: 1.1em;
  }

  /* Buttons */
  .action-btn {
    padding: 13px 15px;
    font-size: 0.95em;
  }

  /* Modal */
  .modal-content {
    margin: 30% auto;
    padding: 15px;
  }

  /* CTA */
  .cta h2 {
    font-size: 1.6em;
  }

  .cta p {
    font-size: 1em;
  }

  .cta-button {
    padding: 12px 25px;
    font-size: 1em;
  }
}

/* ============ LANDSCAPE MOBILE ============ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding: 30px 15px 20px;
  }

  .quantum-symbol {
    font-size: 40px;
  }

  #radarChart {
    height: 350px !important;
    min-height: 300px !important;
  }

  .modal-content {
    margin: 5% auto;
  }
}

/* ============ SAFE AREA (iPhone X+) ============ */
@supports (padding: env(safe-area-inset-bottom)) {
  .action-buttons {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .lang-toggle,
  .theme-toggle {
    bottom: calc(15px + env(safe-area-inset-bottom));
  }

  footer {
    padding-bottom: calc(25px + env(safe-area-inset-bottom));
  }
}

/* ============ TOUCH IMPROVEMENTS ============ */
@media (hover: none) and (pointer: coarse) {
  /* Увеличиваем области нажатия */
  .filter-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-small {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .profile-dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Убираем hover-анимации на тач */
  .crystal-card:hover,
  .result-item:hover,
  .method-card:hover,
  .matrix-card:hover {
    transform: none;
  }

  /* Убираем shimmer-эффект кнопок на тач */
  .submit-btn::before,
  .action-btn::before,
  .cta-button::before {
    display: none;
  }
}

/* ============ PRINT ============ */
@media print {
  .profile-menu,
  .lang-toggle,
  .theme-toggle,
  .action-buttons,
  .gemini-consultation,
  #particles-js,
  .back-link {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .container {
    max-width: 100%;
  }
}