/* ═══════════════════════════════════════════════════════════
   ar-theme.css — Two themes for the AR page (ar.html)

   Светлая (Lpalo)      → body.theme-light   (по умолчанию)
   Тёмная (AuthKit)     → body.theme-dark

   Тема синхронизирована с лендингом через localStorage
   ключ «book_theme» (тот же, что на index.html).
   ═══════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────── */
:root {
    /* Студия (светлая) — единый стиль с admin/studio: индиго-акцент */
    --ar-surface:      #ffffff;
    --ar-surface-solid:#ffffff;
    --ar-surface-2:    #f8fafc;
    --ar-ink:          #0f172a;
    --ar-text-body:    #0f172a;
    --ar-text-muted:   #475569;
    --ar-text-helper:  #94a3b8;
    --ar-accent:       #4f46e5;
    --ar-accent-hover: #4338ca;
    --ar-accent-ink:   #ffffff;
    --ar-accent-soft:  #eef2ff;
    --ar-border:       #e6eaf0;
    --ar-border-strong:#d4dae3;
    --ar-border-w:     1px;
    --ar-hairline:     rgba(15, 23, 42, 0.10);
    --ar-frost:        rgba(255, 255, 255, 0.82);
    --ar-frost-hover:  #f8fafc;
    --ar-overlay:      rgba(15, 23, 42, 0.35);
    --ar-shadow:       0 4px 12px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.08);
    --ar-radius-pill:  999px;
    --ar-radius-card:  20px;
    --ar-radius-md:    12px;
    --ar-font-body:    'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --ar-success:      #059669;
    --ar-success-soft: #ecfdf5;
    --ar-danger:       #dc2626;
    --ar-danger-soft:  #fef2f2;
}

body.theme-dark {
    /* Студия (тёмная) — индиго-акцент на тёмном фоне */
    --ar-surface:      rgba(16, 19, 35, 0.94);
    --ar-surface-solid:#101327;
    --ar-surface-2:    #1a1f3a;
    --ar-ink:          #d1e4fa;
    --ar-text-body:    #d1e4fa;
    --ar-text-muted:   #c7d3ea;
    --ar-text-helper:  #9da7ba;
    --ar-accent:       #7b5cf7;
    --ar-accent-hover: #8f74f9;
    --ar-accent-ink:   #ffffff;
    --ar-accent-soft:  rgba(123, 92, 247, 0.18);
    --ar-border:       rgba(186, 215, 247, 0.14);
    --ar-border-strong:rgba(186, 215, 247, 0.24);
    --ar-border-w:     1px;
    --ar-hairline:     rgba(186, 215, 247, 0.14);
    --ar-frost:        rgba(186, 214, 247, 0.08);
    --ar-frost-hover:  rgba(186, 214, 247, 0.14);
    --ar-overlay:      rgba(5, 6, 15, 0.82);
    --ar-shadow:       0 6px 24px rgba(0, 0, 0, 0.45);
    --ar-font-body:    'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --ar-success:      #10b981;
    --ar-success-soft: rgba(16, 185, 129, 0.14);
    --ar-danger:       #ef4444;
    --ar-danger-soft:  rgba(239, 68, 68, 0.14);
}

/* ── Base ───────────────────────────────────────────────── */
body {
    font-family: var(--ar-font-body);
    -webkit-font-smoothing: antialiased;
}

/* ── Close button (✕) ───────────────────────────────────── */
.close-btn {
    background: var(--ar-surface) !important;
    color: var(--ar-ink) !important;
    border-radius: 50% !important;
    font-family: var(--ar-font-body) !important;
    font-size: 16px !important;
    box-shadow: inset 0 0 0 var(--ar-border-w) var(--ar-border), var(--ar-shadow) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.15s, box-shadow 0.15s;
}
.close-btn:hover { background: var(--ar-frost-hover) !important; }

/* ── Start button (▶ Включить камеру) ───────────────────── */
#start-button {
    background: var(--ar-accent) !important;
    color: var(--ar-accent-ink) !important;
    font-family: var(--ar-font-body) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border-radius: var(--ar-radius-pill) !important;
    padding: 14px 32px !important;
    box-shadow: inset 0 0 0 var(--ar-border-w) var(--ar-border), 0 4px 16px rgba(0,0,0,0.22) !important;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
#start-button:hover { background: var(--ar-accent-hover) !important; }
#start-button:active { transform: scale(0.97); }
#start-button:disabled { opacity: 0.6; cursor: default; }

/* ── Books button (glass pill) ──────────────────────────── */
#books-btn {
    background: var(--ar-surface) !important;
    color: var(--ar-ink) !important;
    font-family: var(--ar-font-body) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    border: var(--ar-border-w) solid var(--ar-border) !important;
    border-radius: var(--ar-radius-pill) !important;
    padding: 8px 16px !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--ar-shadow) !important;
    opacity: 0.9 !important;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
#books-btn:hover {
    opacity: 1 !important;
    background: var(--ar-frost-hover) !important;
}

/* ── Stabilize button (антитряска) ──────────────────────── */
#stabilize-btn {
    background: var(--ar-surface) !important;
    color: var(--ar-ink) !important;
    border-radius: 50% !important;
    font-family: var(--ar-font-body) !important;
    box-shadow: inset 0 0 0 var(--ar-border-w) var(--ar-border), var(--ar-shadow) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
#stabilize-btn:hover { background: var(--ar-frost-hover) !important; }
#stabilize-btn.active {
    background: var(--ar-accent) !important;
    color: var(--ar-accent-ink) !important;
    box-shadow: inset 0 0 0 var(--ar-border-w) var(--ar-border), 0 0 0 3px var(--ar-accent), var(--ar-shadow) !important;
}
#stabilize-btn svg { width: 22px; height: 22px; display: block; }

/* ── Book banner (chip) ─────────────────────────────────── */
#book-banner {
    background: var(--ar-surface) !important;
    color: var(--ar-text-body) !important;
    font-family: var(--ar-font-body) !important;
    font-size: 12px !important;
    border-radius: var(--ar-radius-card) !important;
    padding: 10px 20px !important;
    box-shadow: inset 0 0 0 var(--ar-border-w) var(--ar-border), var(--ar-shadow) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Debug / Log (dev overlays) ─────────────────────────── */
#debug {
    background: var(--ar-surface) !important;
    color: var(--ar-text-helper) !important;
    font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
    font-size: 9px !important;
    border-radius: var(--ar-radius-card) !important;
    padding: 8px 10px !important;
    box-shadow: inset 0 0 0 var(--ar-border-w) var(--ar-border), 0 2px 8px rgba(0,0,0,0.18) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    line-height: 1.4 !important;
}
.log {
    background: var(--ar-surface) !important;
    color: var(--ar-text-helper) !important;
    font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
    font-size: 9px !important;
    border-top: var(--ar-border-w) solid var(--ar-border) !important;
    padding: 6px 12px !important;
    max-height: 60px !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Quiz overlay + card ────────────────────────────────── */
#quiz-overlay {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* Карточка квиза — ниже навигационной подсказки (#guide), в стиле студии */
#quiz-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--ar-text-body) !important;
    font-family: var(--ar-font-body) !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: center;
}
#quiz-question-text {
    color: var(--ar-text-body) !important;
    text-align: center !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 3px rgba(255, 255, 255, 0.35);
}
/* Кнопки ответов — динамическая сетка: равная ширина и высота, перенос при нехватке места */
#quiz-answers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    align-items: stretch;
}
.quiz-answer-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 56px !important;
    background: var(--ar-surface-2) !important;
    border: var(--ar-border-w) solid var(--ar-border) !important;
    color: var(--ar-text-body) !important;
    font-family: var(--ar-font-body) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 14px !important;
    overflow-wrap: break-word;
    word-break: break-word;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
    transition: transform 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.quiz-answer-btn:hover {
    background: var(--ar-accent) !important;
    border-color: var(--ar-accent) !important;
    color: var(--ar-accent-ink) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.32) !important;
}
.quiz-answer-btn.correct {
    background: var(--ar-success) !important;
    border-color: var(--ar-success) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 28px rgba(5, 150, 105, 0.4) !important;
}
.quiz-answer-btn.wrong {
    background: var(--ar-danger) !important;
    border-color: var(--ar-danger) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 28px rgba(220, 38, 38, 0.4) !important;
}
#quiz-feedback { color: var(--ar-text-body) !important; text-align: center !important; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); }
#quiz-feedback.ok { color: var(--ar-success) !important; }
#quiz-feedback.bad { color: var(--ar-danger) !important; }
#quiz-next-hint {
    background: transparent !important;
    border: none !important;
    color: var(--ar-accent) !important;
    text-align: center !important;
}

/* ── Автоконтраст текста квиза по яркости фона (плавный переход, без мерцания) ── */
#quiz-question-text { transition: color 0.5s ease, text-shadow 0.5s ease; }
#quiz-next-hint { transition: color 0.5s ease; }
#quiz-overlay.bg-dark #quiz-question-text {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.6) !important;
}
#quiz-overlay.bg-dark #quiz-next-hint { color: #a5b4fc !important; }

/* ── Анимации появления квиза (выезжают с разных боков и замирают) ── */
#quiz-card.anim { animation: quiz-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
#quiz-question-text.anim { animation: quiz-question-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.quiz-answer-btn.anim-left  { animation: quiz-answer-left  0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.quiz-answer-btn.anim-right { animation: quiz-answer-right 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
#quiz-feedback.anim { animation: quiz-feedback-in 0.35s ease backwards; }
#quiz-next-hint.anim { animation: quiz-feedback-in 0.35s ease backwards; }
@keyframes quiz-card-in {
    0%   { opacity: 0; transform: translateY(36px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes quiz-question-in {
    0%   { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes quiz-answer-left {
    0%   { opacity: 0; transform: translateX(-90px) scale(0.96); }
    60%  { opacity: 1; transform: translateX(5px) scale(1.01); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes quiz-answer-right {
    0%   { opacity: 0; transform: translateX(90px) scale(0.96); }
    60%  { opacity: 1; transform: translateX(-5px) scale(1.01); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes quiz-feedback-in {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── Fullscreen video close ─────────────────────────────── */
#fullscreen-video-close {
    background: var(--ar-surface) !important;
    color: var(--ar-ink) !important;
    font-family: var(--ar-font-body) !important;
    box-shadow: inset 0 0 0 var(--ar-border-w) var(--ar-border), var(--ar-shadow) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}