:root {
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --accent-color: #10b981; /* Мягкий изумрудно-зеленый бренд Lingora */
    --accent-blue: #38bdf8;
    --accent-purple: #8b5cf6;
    --accent-green: #22c55e;
    --accent-red: #ef4444;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --input-bg: #0f172a;
    --border-color: #334155;
    --brand-green-glow: rgba(16, 185, 129, 0.25);
    --hero-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(15, 23, 42, 0.8));
}

[data-theme="light"] {
    --bg-color: #f0fdf4;
    --card-bg: #ffffff;
    --accent-color: #059669;
    --accent-blue: #0284c7;
    --accent-purple: #7c3aed;
    --accent-green: #16a34a;
    --accent-red: #dc2626;
    --text-main: #0f172a;
    --text-muted: #475569;
    --input-bg: #f8fafc;
    --border-color: #cbd5e1;
    --brand-green-glow: rgba(5, 150, 105, 0.15);
    --hero-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(255, 255, 255, 0.96));
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    transition: background-color 0.3s, color 0.3s; 
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    position: relative;
    overflow-x: hidden;
}

/* === ГЛОБАЛЬНАЯ ШАПКА И ЛОГОТИП LINGORA === */
header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 520px;
    margin-bottom: 20px;
    z-index: 20;
}

.brand-logo-container {
    text-align: center;
    margin-bottom: 12px;
}

.brand-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: #ffffff;
    background: linear-gradient(135deg, #10b981, #34d399, #6ee7b7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    animation: softPulse 3.5s infinite ease-in-out;
    text-shadow: 0 10px 25px var(--brand-green-glow);
}

@keyframes softPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.3)); }
    50% { transform: scale(1.04); filter: drop-shadow(0 0 22px rgba(52, 211, 153, 0.6)); }
}

.brand-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.global-nav {
    display: flex;
    gap: 8px;
    width: 100%;
    background: var(--card-bg);
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.global-nav-btn {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.global-nav-btn.active {
    background: var(--accent-color);
    color: #ffffff;
    box-shadow: 0 4px 12px var(--brand-green-glow);
}

/* header-top-bar и трио — см. конец файла */

/* === ГЛАВНАЯ СТРАНИЦА ПРЕЗЕНТАЦИИ (SECTION HOME) === */
.section-home {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-card {
    background: var(--hero-bg);
    border: 1px solid var(--accent-color);
    border-radius: 20px;
    padding: 28px 22px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.hero-card h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--text-main);
}

.hero-card p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
}

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

.feature-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: 14px;
    text-align: center;
}

.feature-box .icon { font-size: 1.8rem; margin-bottom: 8px; }
.feature-box h4 { font-size: 0.9rem; color: var(--text-main); margin-bottom: 4px; }
.feature-box p { font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; }

/* === СОЦИАЛЬНЫЕ СЕТИ (SECTION SOCIAL) === */
.section-contacts {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: fadeIn 0.5s ease-out;
}

.social-banner {
    background: var(--card-bg);
    border: 1px dashed var(--accent-color);
    padding: 12px 16px;
    border-radius: 12px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--accent-color);
    font-weight: 600;
}

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

.social-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.social-card .soc-icon { font-size: 2rem; }
.social-card h3 { font-size: 1rem; color: var(--text-main); }
.social-card p { font-size: 0.75rem; color: var(--text-muted); }

.legal-disclaimer {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.2;
    opacity: 0.8;
}

/* === МЫЛЬНЫЕ ПУЗЫРИ (DESKTOP) === */
#bubble-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.bubble {
    position: absolute;
    bottom: -60px;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    animation: floatUp linear forwards;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(1px);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 0.8; }
    100% { transform: translateY(-115vh) scale(1.1); opacity: 0.1; }
}

.bubble.popped { transform: scale(1.6); opacity: 0 !important; }

/* === ИГРОВОЙ ДВИЖОК QUIZ CARDS === */
.section-quiz {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeIn 0.5s ease-out;
}

.auth-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 400px;
    background: var(--card-bg);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.auth-container h2 { text-align: center; color: var(--accent-color); }

.app-view { display: none; width: 100%; flex-direction: column; align-items: center; }

.nav-tabs { display: flex; gap: 8px; width: 100%; margin-bottom: 15px; }

.tab-btn {
    flex: 1;
    padding: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
}
.tab-btn.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }

.daily-goal-widget {
    width: 100%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(56, 189, 248, 0.12));
    border: 1px solid var(--accent-color);
    border-radius: 12px;
    padding: 10px 14px;
    margin-top: 10px;
}

.daily-goal-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.daily-goal-title { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; color: var(--accent-color); }

.dart-icon {
    display: inline-block;
    font-size: 1.2rem;
    animation: dartHit 0.5s infinite alternate ease-in-out;
}
@keyframes dartHit {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.25) rotate(-12deg); }
}

.goal-badge {
    background: linear-gradient(90deg, #10b981, #3b82f6);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.85rem;
}

.daily-goal-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}

.neon-avatar-ring {
    position: relative;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #10b981, #38bdf8, #8b5cf6, #10b981);
    animation: rotateNeon 7s linear infinite;
}
@keyframes rotateNeon { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.avatar-display {
    font-size: 1.9rem;
    background: var(--input-bg);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
}

select, input, textarea {
    background: var(--input-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: 8px;
    outline: none;
    font-size: 0.9rem;
    width: 100%;
}

.stats-bar {
    width: 100%; background: var(--card-bg); padding: 10px 15px;
    border-radius: 10px; display: flex; justify-content: space-between; font-size: 0.85rem;
    margin-bottom: 15px; border: 1px solid var(--border-color);
}

.card-container { perspective: 1000px; width: 100%; height: 260px; cursor: pointer; margin-bottom: 15px; position: relative; }
.card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.22s cubic-bezier(.2,.8,.2,1); border-radius: 16px; will-change: transform; }
/* Скрываем карточку на один-два кадра во время смены текста: новый английский ответ не мелькает на обратной стороне. */
.card-container.is-updating .card { visibility: hidden !important; transition: none !important; }
.card.flipped { transform: rotateY(180deg); }

.card-front, .card-back {
    position: absolute; width: 100%; height: 100%; backface-visibility: hidden;
    border-radius: 16px; padding: 20px; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
    background: var(--card-bg); border: 1px solid var(--border-color);
}
.card-back { transform: rotateY(180deg); }

.card-label { position: absolute; top: 12px; left: 15px; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
.russian-text { font-size: 1.3rem; font-weight: 600; }
.english-text { font-size: 1.4rem; font-weight: 700; color: var(--accent-color); margin-bottom: 6px; }
.phonetic { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 8px; }
.verb-forms { font-size: 0.8rem; background: var(--input-bg); padding: 5px 10px; border-radius: 6px; margin-bottom: 6px; }

.audio-btn { position: absolute; bottom: 12px; right: 15px; background: none; border: none; font-size: 1.4rem; cursor: pointer; }

.comic-popup {
    position: absolute;
    top: -15px;
    right: -10px;
    background: #facc15;
    color: #000;
    font-weight: 900;
    font-size: 0.9rem;
    padding: 6px 12px;
    border: 3px solid #000;
    border-radius: 8px;
    transform: rotate(8deg);
    box-shadow: 4px 4px 0px #000;
    z-index: 50;
    animation: comicPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes comicPop {
    0% { transform: rotate(-10deg) scale(0); opacity: 0; }
    100% { transform: rotate(8deg) scale(1); opacity: 1; }
}

.actions { display: flex; gap: 12px; width: 100%; }
.btn { flex: 1; padding: 12px; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.btn-secondary { background-color: var(--border-color); color: var(--text-main); }
.btn-wrong { background-color: var(--accent-red); color: white; }
.btn-right { background-color: var(--accent-green); color: white; }
.btn-primary { background-color: var(--accent-color); color: white; }

.notebook-list { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.notebook-card { background: var(--card-bg); border: 1px solid var(--border-color); padding: 15px; border-radius: 12px; }
.notebook-header { display: flex; justify-content: space-between; align-items: center; }
.notebook-actions { display: flex; gap: 6px; align-items: center; }
.icon-btn { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 2px 6px; }

.download-btn {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    font-weight: 600;
}

.import-box { width: 100%; display: flex; flex-direction: column; gap: 12px; background: var(--card-bg); padding: 15px; border-radius: 12px; border: 1px solid var(--border-color); }
.user-profile { width: 100%; background: var(--card-bg); padding: 15px; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 12px; }

.quiz-mode-switch { display: flex; gap: 8px; margin-bottom: 12px; width: 100%; }
.quiz-mode-btn {
    flex: 1; padding: 8px; border-radius: 8px; background: var(--input-bg);
    border: 1px solid var(--border-color); color: var(--text-muted); font-weight: 600; cursor: pointer; font-size: 0.85rem;
}
.quiz-mode-btn.active {
    background: linear-gradient(90deg, #10b981, #3b82f6); color: white; border-color: transparent;
}

.quiz-controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-bottom: 12px; }
.quiz-controls-grid input { grid-column: span 2; }

.profile-header { display: flex; align-items: center; gap: 12px; }
.avatar-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; font-size: 1.5rem; margin-top: 10px; max-height: 120px; overflow-y: auto; padding: 5px; background: var(--input-bg); border-radius: 8px; }
.avatar-option { cursor: pointer; text-align: center; padding: 4px; border-radius: 6px; }
.color-dot { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }

.profile-modal-content {
    background: var(--card-bg); padding: 22px; border-radius: 16px; width: 92%; max-width: 460px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--border-color);
}
.profile-section-title { font-size: 0.95rem; font-weight: 700; color: var(--accent-color); border-bottom: 1px solid var(--border-color); padding-bottom: 6px; margin-bottom: 8px; }
.chart-period-tabs { display: flex; gap: 6px; margin-top: 10px; margin-bottom: 8px; }
.chart-tab-btn { flex: 1; padding: 4px; font-size: 0.75rem; background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-muted); border-radius: 6px; cursor: pointer; }
.chart-tab-btn.active { background: var(--accent-color); color: white; }
.chart-container-box { width: 100%; height: 180px; background: var(--input-bg); border-radius: 10px; padding: 10px; border: 1px solid var(--border-color); }

/* === ДОБАВЛЕНО: профиль, блокноты, слова === */
.profile-subtitle { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); margin: 16px 0 8px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stat-box { background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.stat-box b { font-size: 1.4rem; color: var(--accent-color); }
.stat-box span { font-size: 0.7rem; color: var(--text-muted); }
.goal-line { font-size: 0.85rem; margin-bottom: 6px; }
.progress-track { width: 100%; height: 10px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #10b981, #3b82f6); transition: width 0.4s; }
.field-row { display: flex; gap: 8px; align-items: flex-end; }
.field-row label { flex: 1; }
.form-grid { display: flex; flex-direction: column; gap: 8px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--text-muted); }
.form-grid input:disabled { opacity: 0.6; cursor: not-allowed; }
.form-status { min-height: 1em; font-size: 0.8rem; font-weight: 600; }
.notebook-title { cursor: pointer; flex: 1; user-select: none; }
.notebook-title small { color: var(--text-muted); }
.word-list { margin-top: 10px; border-top: 1px dashed var(--border-color); padding-top: 8px; max-height: 280px; overflow-y: auto; }
.word-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: 0.88rem; }
.word-row:last-child { border-bottom: none; }
.word-text { flex: 1; word-break: break-word; }
.word-actions { display: flex; flex: none; }
.pos-tag { font-size: 0.65rem; background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-muted); padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
.empty-note { font-size: 0.8rem; color: var(--text-muted); padding: 6px 0; }
.add-word-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* === ДОБАВЛЕНО: выбор аватара, выделение слов, формы глаголов === */
.avatar-option { font-size: 1.5rem; border: 2px solid transparent; transition: transform 0.1s; }
.avatar-option:hover { transform: scale(1.15); }
.avatar-option.selected { border-color: var(--accent-color); background: var(--brand-green-glow); }
.verb-forms { font-weight: 600; color: var(--accent-blue); letter-spacing: 0.3px; }
.bulk-bar { position: sticky; top: 0; z-index: 5; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--card-bg); border: 1px solid var(--accent-color); border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; font-size: 0.85rem; box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.bulk-bar select { width: auto; flex: 1; min-width: 120px; padding: 8px; }
.bulk-bar .btn { flex: none; padding: 8px 10px; font-size: 0.8rem; }
.word-check { width: 18px; height: 18px; padding: 0; flex: none; accent-color: var(--accent-color); cursor: pointer; }
.select-all { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); margin-top: 10px; cursor: pointer; }
.select-all input { width: 16px; height: 16px; padding: 0; accent-color: var(--accent-color); }
.pos-tag { cursor: pointer; }
.pos-tag:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* =========================================================
   ТРИО: светлая / тёмная тема / пузыри
   ========================================================= */
.header-top-bar { position: relative; z-index: 30; width: 100%; max-width: 520px; display: flex; justify-content: flex-end; margin-bottom: 8px; }
@media (min-width: 700px) { .header-top-bar { position: absolute; top: 15px; right: 15px; width: auto; max-width: none; margin: 0; } }
.control-trio { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
.trio-btn { border: none; background: transparent; cursor: pointer; width: 38px; height: 32px; border-radius: 999px; font-size: 1.05rem; opacity: 0.5; transition: all 0.2s; }
.trio-btn:hover { opacity: 0.9; }
.trio-btn.active { opacity: 1; background: var(--accent-color); box-shadow: 0 2px 10px var(--brand-green-glow); }
.trio-btn#bubble-toggle-btn { margin-left: 4px; position: relative; }
.trio-btn#bubble-toggle-btn::before { content: ''; position: absolute; left: -3px; top: 7px; bottom: 7px; width: 1px; background: var(--border-color); }

/* =========================================================
   ЗАСТАВКА
   ========================================================= */
body.intro-active { overflow: hidden; }
body.intro-hold-title .brand-title { visibility: hidden; animation: none; }
#intro { position: fixed; inset: 0; z-index: 100000; cursor: pointer; overflow: hidden; transition: opacity 0.5s ease; }
#intro.intro-out { opacity: 0; pointer-events: none; }
.intro-veil { position: absolute; inset: 0; background: var(--bg-color); }
.intro-glow { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; background: radial-gradient(circle at 50% 50%, rgba(52,211,153,0.55), rgba(16,185,129,0.2) 38%, transparent 72%); }
.intro-black { position: absolute; inset: 0; background: #000; opacity: 1; transition: opacity 1.3s ease; }
#intro.s-light .intro-black { opacity: 0; }
#intro.s-light .intro-glow { opacity: 1; }
#intro.s-move .intro-glow { opacity: 0; transition-duration: 0.9s; }
.intro-logo { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; font-weight: 900; line-height: 1.2; letter-spacing: -0.5px; font-size: clamp(2.6rem, 14vw, 5.5rem); opacity: 0; transition: opacity 0.9s ease; background: linear-gradient(135deg, #10b981, #34d399, #6ee7b7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 18px rgba(16,185,129,0.55)); }
#intro.s-logo .intro-logo { opacity: 1; }
#intro.s-landed .intro-logo { opacity: 0; }
.sp-pro { transition: opacity 0.5s ease; }
#intro.s-move .sp-pro { opacity: 0; }
.intro-skip { position: fixed; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.45); }
@media (prefers-reduced-motion: reduce) { #intro { display: none; } }

/* =========================================================
   ЦВЕТНЫЕ КАРТОЧКИ (цвет выбранного блокнота)
   ========================================================= */
.card-container.custom-color .card-front, .card-container.custom-color .card-back { background: var(--card-custom-bg); color: var(--card-custom-fg); border-color: var(--card-custom-border); }
.card-container.custom-color .card-label, .card-container.custom-color .phonetic { color: var(--card-custom-fg); opacity: 0.7; }
.card-container.custom-color .english-text, .card-container.custom-color .verb-forms { color: var(--card-custom-fg); }
.card-container.custom-color .verb-forms { background: var(--card-custom-chip); }
.user-profile.custom-color .profile-header { text-shadow: none; }

/* =========================================================
   БЛОКНОТЫ: тема, стикер, цвет
   ========================================================= */
.nb-modal-card { background: var(--card-bg); padding: 22px; border-radius: 16px; width: 92%; max-width: 440px; max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border-color); }
.form-label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--text-muted); }
.nb-preview { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.nb-preview b { display: block; font-size: 1.05rem; } .nb-preview small { opacity: 0.8; }
.nb-prev-sticker { font-size: 2rem; }
.sticker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.sticker-opt { font-size: 1.25rem; background: var(--input-bg); border: 2px solid transparent; border-radius: 8px; padding: 4px 0; cursor: pointer; }
.sticker-opt.selected { border-color: var(--accent-color); background: var(--brand-green-glow); }
.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-color); cursor: pointer; padding: 0; }
.swatch.selected { outline: 2px solid var(--text-main); outline-offset: 2px; }
.color-custom { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); }
.color-custom input[type=color] { width: 44px; height: 30px; padding: 0; border: 1px solid var(--border-color); background: none; cursor: pointer; }
.cat-chip { font-size: 0.65rem; background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-muted); padding: 1px 7px; border-radius: 10px; margin: 0 4px; vertical-align: middle; }
.notebook-card .notebook-actions .icon-btn { font-size: 1rem; }

/* =========================================================
   Т9: красная волна + подсказки
   ========================================================= */
.spell-field { position: relative; background: var(--input-bg); border-radius: 8px; }
.spell-field input { position: relative; z-index: 1; background: transparent; }
.spell-mirror { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 12px; border: 1px solid transparent; font-size: 0.9rem; line-height: normal; white-space: pre; overflow: hidden; color: transparent; pointer-events: none; border-radius: 8px; }
.spell-err { text-decoration: underline wavy #ef4444; -webkit-text-decoration: underline wavy #ef4444; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.spell-bar { min-height: 0; }
.spell-hint { margin-top: 6px; font-size: 0.78rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.spell-hint b { color: #ef4444; }
.spell-chip { border: 1px solid var(--accent-color); background: var(--brand-green-glow); color: var(--text-main); padding: 3px 10px; border-radius: 14px; font-size: 0.8rem; cursor: pointer; font-weight: 600; }
.spell-chip:hover { background: var(--accent-color); color: #fff; }

/* =========================================================
   АВТОПЕРЕВОД: центральное окно
   ========================================================= */
.tr-overlay { position: fixed; inset: 0; z-index: 10050; background: rgba(2,6,23,0.6); backdrop-filter: blur(4px); justify-content: center; align-items: center; animation: fadeIn 0.25s ease-out; }
.tr-card { position: relative; background: var(--card-bg); border: 1px solid var(--accent-color); border-radius: 20px; padding: 34px 22px 18px; width: 92%; max-width: 400px; text-align: center; box-shadow: 0 25px 60px rgba(0,0,0,0.45), 0 0 0 6px var(--brand-green-glow); max-height: 92vh; overflow-y: auto; }
.tr-badge { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; background: linear-gradient(135deg, #10b981, #38bdf8); box-shadow: 0 8px 20px var(--brand-green-glow); }
.tr-progress { position: absolute; top: 12px; right: 16px; font-size: 0.72rem; color: var(--text-muted); }
.tr-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tr-message { font-size: 0.88rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 14px; }
.tr-message b { color: var(--text-main); }
.tr-suggest { background: var(--input-bg); border: 1px dashed var(--accent-color); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.tr-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-color); font-weight: 700; margin-bottom: 4px; }
.tr-suggest-text { font-size: 1.25rem; font-weight: 700; color: var(--text-main); word-break: break-word; }
.tr-actions { display: flex; gap: 10px; margin-bottom: 8px; }
.tr-actions .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tr-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.link-btn { background: none; border: none; color: var(--text-muted); font-size: 0.78rem; cursor: pointer; text-decoration: underline; padding: 4px; }
.link-btn:hover { color: var(--accent-color); }
#tr-custom .spell-box { text-align: left; }

/* =========================================================
   СТАТИСТИКА: подробнее
   ========================================================= */
.stats-hero { text-align: center; padding: 8px 0 2px; }
.stats-big { font-size: 3.2rem; font-weight: 900; line-height: 1; background: linear-gradient(135deg, #10b981, #38bdf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stats-caption { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }
.range-input { padding: 0; border: none; background: transparent; accent-color: var(--accent-color); height: 28px; cursor: pointer; }
.slider-scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); margin-top: -8px; }
.year-row { display: grid; grid-template-columns: 44px 1fr 40px; gap: 8px; align-items: center; font-size: 0.85rem; padding: 4px 0; }
.year-row b { text-align: right; color: var(--accent-color); }
.year-bar { height: 8px; background: var(--input-bg); border-radius: 6px; overflow: hidden; border: 1px solid var(--border-color); }
.year-bar i { display: block; height: 100%; background: linear-gradient(90deg, #10b981, #3b82f6); }
.intro-skip { transition: opacity 0.4s; }
#intro.s-landed .intro-skip { opacity: 0; }
.tr-overlay { overflow-y: auto; padding: 44px 0 16px; }
.tr-card { overflow: visible; max-height: none; margin: auto 0; }

/* =========================================================
   РАМКА АВАТАРА (круг / квадрат / треугольник / пятиугольник)
   ========================================================= */
[data-shape="round"] { --clip: circle(50%); }
[data-shape="square"] { --clip: inset(0 round 18px); --clip-in: inset(0 round 14px); }
[data-shape="triangle"] { --clip: polygon(50% 2%, 98% 94%, 2% 94%); --emoji-top: 66%; --emoji-size: 1.45rem; }
[data-shape="pentagon"] { --clip: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%); --emoji-top: 55%; --emoji-size: 1.6rem; }
.avatar-frame { position: relative; width: 66px; height: 66px; flex: none; cursor: pointer; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.28)); }
.af-outer, .af-inner { position: absolute; clip-path: var(--clip); }
.af-outer { inset: 0; background: var(--frame-bg, #10b981); }
.af-inner { inset: 4px; background: var(--input-bg); clip-path: var(--clip-in, var(--clip)); }
.avatar-emoji { position: absolute; left: 50%; top: var(--emoji-top, 50%); transform: translate(-50%, -50%); font-size: var(--emoji-size, 1.9rem); line-height: 1; user-select: none; }
.frame-preview-row { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.shape-row { display: flex; gap: 8px; flex-wrap: wrap; }
.shape-btn { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--border-color); background: var(--input-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.shape-btn.selected { border-color: var(--accent-color); color: var(--accent-color); background: var(--brand-green-glow); }
.shape-icon { display: block; width: 24px; height: 24px; background: currentColor; clip-path: var(--clip); }
.mini-title { font-size: 0.72rem; color: var(--text-muted); margin: 8px 0 6px; text-transform: uppercase; letter-spacing: 0.6px; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; cursor: pointer; }
.check-row input { width: 16px; height: 16px; padding: 0; accent-color: var(--accent-color); }

/* =========================================================
   ИМПОРТ СО СКРИНШОТА
   ========================================================= */
.ocr-drop { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; padding: 14px; border: 2px dashed var(--accent-color); border-radius: 14px; background: var(--brand-green-glow); }
.ocr-drop small { color: var(--text-muted); line-height: 1.4; }
.ocr-title { font-weight: 700; color: var(--accent-color); }
.ocr-btn { display: block; text-align: center; cursor: pointer; flex: none; }
.ocr-drop .check-row { justify-content: center; }


/* Сетевые ошибки Firebase показываются внутри страницы, а не только в DevTools. */
.service-status {
    width: min(100%, 900px);
    margin: 0 auto 14px;
    padding: 11px 14px;
    border: 1px solid var(--accent-red);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 0.88rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
#service-status-message { flex: 1 1 260px; min-width: 0; }
.service-retry {
    flex: none;
    padding: 8px 11px;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    background: var(--brand-green-glow);
    color: var(--text-main);
    font-weight: 700;
    cursor: pointer;
}
.service-status[data-level="info"] { border-color: var(--accent-blue); }
.service-status[hidden], .service-retry[hidden] { display: none !important; }
.auth-note {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: center;
}
button:disabled { opacity: 0.65; cursor: wait; }

/* Убираем экспериментальные наложенные рты: остаётся только оригинальная улыбка внутри WebP. */
#globus-mouth, .globus-mouth, .globus-mouth-overlay, .globus-mouth-open, .globus-mouth-speaking {
    display: none !important;
    animation: none !important;
    transform: none !important;
}

/* =========================================================
   GLOBUS — интерактивный маскот, лёгкий для мобильных устройств
   ========================================================= */
.brand-title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    min-height: 62px;
}
.brand-title-row .brand-title { margin: 0; }
.globus-header-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 47px;
    height: 62px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.globus-header-image {
    display: block;
    width: 47px;
    height: 62px;
    object-fit: contain;
    /* Transparent mascot art sits directly on the page; no tile/frame behind it. */
    background: transparent;
    border-radius: 0;
    transform-origin: 50% 90%;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .22));
    pointer-events: none;
}
.globus-header-wave {
    position: absolute;
    top: -4px;
    right: -9px;
    opacity: 0;
    transform: scale(.5) rotate(-18deg);
    pointer-events: none;
    font-size: 1rem;
}
.globus-header-btn.is-wave .globus-header-image { animation: globus-header-wiggle .75s ease-in-out; }
.globus-header-btn.is-wave .globus-header-wave { animation: globus-wave-pop .75s ease-out forwards; }
.globus-header-btn:focus-visible,
.globus-character-button:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 4px;
}

.section-globus {
    width: 100%;
    max-width: 520px;
    flex-direction: column;
    gap: 14px;
    animation: fadeIn .35s ease-out;
}
.globus-panel {
    width: 100%;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: var(--card-bg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .14);
}
.globus-heading { text-align: center; position: relative; z-index: 1; }
.globus-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--accent-color);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1.4px;
}
.globus-heading h2 { color: var(--text-main); font-size: clamp(1.25rem, 5vw, 1.65rem); margin-bottom: 7px; }
.globus-heading p { max-width: 390px; margin: 0 auto; color: var(--text-muted); font-size: .85rem; line-height: 1.5; }
.globus-stage {
    position: relative;
    width: 100%;
    height: clamp(350px, 94vw, 435px);
    max-height: 435px;
    margin: 8px auto 4px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 50% 78%, rgba(16, 185, 129, .15), transparent 51%),
        linear-gradient(160deg, rgba(56, 189, 248, .07), transparent 55%),
        var(--input-bg);
}
.globus-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .23;
    pointer-events: none;
    background-image: radial-gradient(var(--border-color) .7px, transparent .7px);
    background-size: 17px 17px;
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
}
.globus-speech {
    position: absolute;
    z-index: 4;
    top: 13px;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 10px 13px;
    border: 1px solid rgba(16, 185, 129, .35);
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text-main);
    box-shadow: 0 7px 22px rgba(0, 0, 0, .13);
    font-size: .82rem;
    line-height: 1.35;
    text-align: center;
    transform: translateX(-50%);
}
.globus-speech::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: calc(50% - 6px);
    width: 10px;
    height: 10px;
    background: var(--card-bg);
    border-right: 1px solid rgba(16, 185, 129, .35);
    border-bottom: 1px solid rgba(16, 185, 129, .35);
    transform: rotate(45deg);
}
.globus-floor {
    position: absolute;
    z-index: 0;
    bottom: 18px;
    left: 50%;
    width: 58%;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .18);
    filter: blur(9px);
    transform: translateX(-50%);
}
.globus-character-button {
    position: absolute;
    z-index: 2;
    bottom: 17px;
    left: 50%;
    display: block;
    width: min(90%, 365px);
    height: calc(100% - 92px);
    max-height: 365px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: transparent;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateX(-50%);
    transform-origin: 50% 88%;
}
.globus-character-button:active { cursor: pointer; }
.globus-art-motion {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform-origin: 50% 82%;
    will-change: transform, filter;
    border-radius: 24px;
    animation: globus-idle-breathe 4.8s ease-in-out infinite;
    isolation: isolate;
}
.globus-art-canvas {
    position: relative;
    height: 100%;
    width: auto;
    max-width: 100%;
    aspect-ratio: 900 / 1152;
    flex: 0 1 auto;
}
.globus-art-halo {
    position: absolute;
    z-index: -1;
    inset: 12% 14% 8%;
    border-radius: 48%;
    background: radial-gradient(ellipse, rgba(29, 241, 176, .30), rgba(48, 211, 255, .13) 46%, transparent 72%);
    filter: blur(19px);
    opacity: .8;
    animation: globus-halo-breathe 4.6s ease-in-out infinite;
    pointer-events: none;
}
.globus-2d-art {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    object-position: center bottom;
    background: transparent;
    filter: drop-shadow(0 13px 12px rgba(0, 0, 0, .18)) drop-shadow(0 0 11px rgba(38, 234, 185, .12));
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    outline: none;
}
.globus-art-sheen {
    position: absolute;
    z-index: 2;
    left: 17%;
    top: 18%;
    width: 66%;
    height: 66%;
    border-radius: 47%;
    background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.36) 45%, rgba(255,255,255,.06) 51%, transparent 66%);
    transform: translateX(-125%) rotate(9deg);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}
.globus-stage.is-active .globus-art-sheen { animation: globus-glass-sheen 6.8s ease-in-out 1.1s infinite; }
.globus-blink {
    position: absolute;
    z-index: 3;
    top: 43.4%;
    width: 13%;
    height: 8.2%;
    border-radius: 50% 50% 44% 44%;
    background: linear-gradient(180deg, #46d6ce, #4de7bf 72%, rgba(126,255,155,.86));
    box-shadow: 0 0 7px rgba(59, 240, 199, .65);
    opacity: 0;
    transform: scaleY(.05);
    transform-origin: center;
    pointer-events: none;
}
.globus-blink-left { left: 28.5%; }
.globus-blink-right { right: 25.5%; }
.globus-stage.is-active .globus-blink-left { animation: globus-blink 7.4s linear 1.8s infinite; }
.globus-stage.is-active .globus-blink-right { animation: globus-blink 7.4s linear 1.8s infinite; }
.globus-emotion {
    position: absolute;
    z-index: 5;
    left: calc(50% + 105px);
    top: 42%;
    font-size: clamp(1.7rem, 7vw, 2.5rem);
    filter: drop-shadow(0 4px 5px rgba(0,0,0,.15));
    opacity: 0;
    pointer-events: none;
    transform: translateY(7px) scale(.45) rotate(-12deg);
}
.globus-emotion.is-visible { animation: globus-emotion-pop 1.35s ease-out forwards; }
.globus-art-motion.is-pet { filter: drop-shadow(0 0 22px rgba(34, 255, 149, .35)); }
.globus-character-sparkle {
    position: absolute;
    right: 9%;
    bottom: 37%;
    color: #facc15;
    font-size: 1.4rem;
    opacity: .85;
    text-shadow: 0 0 15px rgba(250, 204, 21, .55);
    pointer-events: none;
    animation: globus-sparkle 3.2s ease-in-out infinite;
}
.globus-wave-mark, .globus-play-mark {
    position: absolute;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    font-size: clamp(1.6rem, 7vw, 2.3rem);
}
.globus-wave-mark { left: calc(50% + 95px); bottom: 42%; transform: rotate(-25deg) scale(.7); }
.globus-play-mark { left: calc(50% + 108px); top: 47%; color: #facc15; }
.globus-character-button.is-wave + .globus-wave-mark { animation: globus-wave-pop .9s ease-out; }
.globus-character-button.is-hop ~ .globus-play-mark,
.globus-character-button.is-spin ~ .globus-play-mark { animation: globus-sparkle .85s ease-out; }
.globus-art-motion.is-laugh { animation: globus-laugh .68s ease-in-out; filter: drop-shadow(0 0 20px rgba(34, 255, 149, .35)); }
.globus-art-motion.is-pet { animation: globus-pet .78s ease-in-out; }
.globus-art-motion.is-hop { animation: globus-hop .9s cubic-bezier(.2,.8,.3,1); }
.globus-art-motion.is-spin { animation: globus-spin 1.15s cubic-bezier(.2,.75,.3,1); }
.globus-art-motion.is-wave { animation: globus-wave-body .9s ease-in-out; }
@media (hover: hover) and (pointer: fine) {
    .globus-character-button:hover .globus-art-motion { filter: drop-shadow(0 12px 13px rgba(16, 185, 129, .25)) brightness(1.025); }
    .globus-header-btn:hover .globus-header-image { filter: drop-shadow(0 5px 7px rgba(16, 185, 129, .35)); }
}
.globus-action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.globus-action { min-width: 0; padding: 10px 7px; font-size: .79rem; line-height: 1.2; white-space: normal; }
.globus-footnote { margin: 11px 3px 0; color: var(--text-muted); font-size: .74rem; line-height: 1.5; text-align: center; }

@keyframes globus-idle-breathe {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(.6deg); }
}
@keyframes globus-halo-breathe {
    0%, 100% { opacity: .55; transform: scale(.96); }
    50% { opacity: .95; transform: scale(1.06); }
}
@keyframes globus-glass-sheen {
    0%, 12% { opacity: 0; transform: translateX(-125%) rotate(9deg); }
    20% { opacity: .7; }
    35% { opacity: 0; transform: translateX(125%) rotate(9deg); }
    100% { opacity: 0; transform: translateX(125%) rotate(9deg); }
}
@keyframes globus-blink {
    0%, 93%, 96%, 100% { opacity: 0; transform: scaleY(.05); }
    94.5% { opacity: .82; transform: scaleY(1); }
}
@keyframes globus-header-wiggle {
    0%, 100% { transform: rotate(0) translateY(0); }
    25% { transform: rotate(-8deg) translateY(-3px); }
    55% { transform: rotate(8deg) translateY(-2px); }
    78% { transform: rotate(-4deg); }
}
@keyframes globus-wave-pop {
    0% { opacity: 0; transform: translateY(10px) scale(.55) rotate(-28deg); }
    30% { opacity: 1; }
    65% { opacity: 1; transform: translateY(-8px) scale(1.08) rotate(12deg); }
    100% { opacity: 0; transform: translateY(-15px) scale(.85) rotate(-5deg); }
}
@keyframes globus-wave-body {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-4px) rotate(-3deg); }
    50% { transform: translateY(0) rotate(3deg); }
    75% { transform: translateY(-2px) rotate(-2deg); }
}
@keyframes globus-laugh {
    0%, 100% { transform: translateY(0) scale(1, 1) rotate(0); }
    18% { transform: translateY(-5px) scale(1.04, .94) rotate(-3deg); }
    36% { transform: translateY(0) scale(.98, 1.03) rotate(3deg); }
    55% { transform: translateY(-4px) scale(1.03, .96) rotate(-2deg); }
    76% { transform: translateY(0) scale(1, 1) rotate(1deg); }
}
@keyframes globus-pet {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(3px) scale(1.04, .96); }
    55% { transform: translateY(-2px) scale(.99, 1.02); }
}
@keyframes globus-hop {
    0%, 100% { transform: translateY(0) rotate(0) scale(1); }
    28% { transform: translateY(-33px) rotate(-5deg) scale(.96, 1.04); }
    52% { transform: translateY(-38px) rotate(6deg) scale(1.02, .98); }
    76% { transform: translateY(2px) rotate(-2deg) scale(1.04, .92); }
}
@keyframes globus-spin {
    0% { transform: translateY(0) rotate(0) scale(1); }
    42% { transform: translateY(-17px) rotate(190deg) scale(.87); }
    78% { transform: translateY(0) rotate(320deg) scale(.95); }
    100% { transform: translateY(0) rotate(360deg) scale(1); }
}
@keyframes globus-emotion-pop {
    0% { opacity: 0; transform: translateY(10px) scale(.45) rotate(-12deg); }
    22% { opacity: 1; transform: translateY(-5px) scale(1.12) rotate(8deg); }
    65% { opacity: 1; transform: translateY(-10px) scale(1) rotate(-4deg); }
    100% { opacity: 0; transform: translateY(-22px) scale(.88) rotate(5deg); }
}
@keyframes globus-sparkle {
    0%, 100% { opacity: 0; transform: translateY(4px) scale(.6) rotate(-12deg); }
    25%, 70% { opacity: .95; transform: translateY(-7px) scale(1.08) rotate(12deg); }
}
@media (max-width: 380px) {
    .brand-title-row { gap: 3px; }
    .globus-header-btn, .globus-header-image { width: 39px; height: 55px; }
    .global-nav { gap: 4px; padding: 4px; }
    .global-nav-btn { padding: 9px 4px; font-size: .72rem; }
    .globus-panel { padding: 13px; }
    .globus-stage { height: 365px; }
    .globus-character-button { width: 92%; height: calc(100% - 88px); }
    .globus-action-row { gap: 5px; }
    .globus-action { font-size: .72rem; padding: 9px 4px; }
}
@media (min-width: 700px) {
    .globus-panel { padding: 22px; }
    .globus-stage { height: 425px; }
}
@media (prefers-reduced-motion: reduce) {
    .globus-header-image, .globus-art-motion, .globus-2d-art, .globus-art-halo, .globus-art-sheen, .globus-blink, .globus-character-sparkle, .globus-emotion,
    .globus-header-wave, .globus-wave-mark, .globus-play-mark {
        animation: none !important;
        transition: none !important;
    }
}
.hero-actions { display: flex; align-items: stretch; justify-content: center; gap: 9px; flex-wrap: wrap; }
.hero-actions .btn { flex: 1 1 180px; min-width: 0; }
@media (max-width: 380px) {
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
}

/* =========================================================
   CHAIN OF WORDS — responsive matching game
   ========================================================= */
.section-chain {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 900px;
    animation: fadeIn .38s ease-out;
}
.chain-panel {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    padding: clamp(13px, 3vw, 24px);
    background: linear-gradient(155deg, rgba(16,185,129,.10), transparent 38%), var(--card-bg);
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
    overflow: hidden;
}
.chain-hero { text-align: center; margin-bottom: 18px; }
.chain-logo-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 7px 14px; }
.chain-logo-link { font-size: clamp(1.7rem, 5vw, 2.4rem); filter: drop-shadow(0 5px 10px rgba(16,185,129,.25)); transform: rotate(-18deg); }
.chain-logo-text {
    margin: 0;
    font-size: clamp(1.65rem, 6vw, 2.5rem);
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -.055em;
    background: linear-gradient(100deg, #10b981 5%, #38bdf8 42%, #8b5cf6 68%, #10b981 96%);
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: chain-logo-flow 4s linear infinite;
}
.chain-thread { position: absolute; left: 0; bottom: -1px; width: 100%; height: 26px; overflow: visible; pointer-events: none; }
.chain-thread path { fill: none; stroke: url(#chain-thread-gradient); stroke: var(--accent-color); stroke-width: 3.1; stroke-linecap: round; stroke-dasharray: 8 8; animation: chain-thread-run 1.1s linear infinite; filter: drop-shadow(0 2px 3px rgba(16,185,129,.3)); }
.chain-hero p { max-width: 630px; margin: 8px auto 0; color: var(--text-muted); font-size: .9rem; line-height: 1.5; }
@keyframes chain-logo-flow { to { background-position: 220% 0; } }
@keyframes chain-thread-run { to { stroke-dashoffset: -32; } }
.chain-locked-gate {
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 30px 18px;
    text-align: center;
    background: radial-gradient(circle at 50% 0, var(--brand-green-glow), transparent 60%), var(--input-bg);
}
.chain-locked-gate[hidden], .chain-game-content[hidden], .chain-round-result[hidden], .globus-locked-gate[hidden], .globus-unlocked-content[hidden] { display: none !important; }
.chain-lock-symbol { font-size: 3rem; margin-bottom: 8px; }
.chain-locked-gate h3 { font-size: 1.25rem; margin-bottom: 8px; }
.chain-locked-gate p { max-width: 440px; margin: 0 auto 16px; color: var(--text-muted); line-height: 1.5; font-size: .88rem; }
.chain-setup-card { border: 1px solid var(--border-color); border-radius: 16px; padding: 14px; background: color-mix(in srgb, var(--input-bg) 65%, transparent); }
.chain-setup-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.chain-setup-heading > span { font-size: 1.5rem; }
.chain-setup-heading h3 { margin: 0 0 2px; font-size: 1rem; }
.chain-setup-heading p { color: var(--text-muted); font-size: .78rem; margin: 0; }
.chain-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.chain-settings-grid label { display: flex; flex-direction: column; gap: 6px; color: var(--text-muted); font-weight: 700; font-size: .75rem; min-width: 0; }
.chain-settings-grid select, .chain-settings-grid input { min-width: 0; padding: 10px; font-size: .84rem; }
.chain-settings-grid input:disabled { opacity: .55; cursor: not-allowed; }
.chain-custom-time-wrap { display: none; }
.chain-settings-note { margin: 10px 0 12px; font-size: .72rem; line-height: 1.45; color: var(--text-muted); }
.chain-start-btn { width: 100%; min-height: 44px; }
.chain-start-btn:disabled { opacity: .55; cursor: wait; }
.chain-hud { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; padding: 14px 2px 10px; }
.chain-hud > div:not(.chain-progress-track):not(.chain-time-track) { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chain-hud span { color: var(--text-muted); font-size: .68rem; }
.chain-hud b { font-size: 1rem; overflow-wrap: anywhere; }
.chain-progress-track, .chain-time-track { grid-column: 1 / -1; height: 7px; border-radius: 99px; background: var(--border-color); overflow: hidden; }
.chain-progress-track i, .chain-time-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #10b981, #38bdf8, #8b5cf6); transition: width .22s ease; }
.chain-time-track i { background: linear-gradient(90deg, #22c55e, #facc15, #ef4444); }
.chain-instructions { border: 1px dashed var(--border-color); border-radius: 11px; padding: 10px 12px; margin-bottom: 12px; font-size: .78rem; color: var(--text-muted); line-height: 1.45; }
.chain-instructions b { color: var(--accent-color); }
.chain-board {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr);
    gap: 8px;
    padding: 12px 8px;
    border-radius: 17px;
    border: 1px solid var(--border-color);
    background: radial-gradient(ellipse at 50% 0, rgba(56,189,248,.08), transparent 60%), var(--input-bg);
    isolation: isolate;
}
.chain-board.is-round-over { opacity: .64; }
.chain-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.chain-connection { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 800; stroke-dashoffset: 800; animation: chain-line-draw .24s ease-out forwards; filter: drop-shadow(0 2px 4px rgba(0,0,0,.14)); }
.chain-connection.is-right { stroke: #22c55e; }
.chain-connection.is-wrong { stroke: #ef4444; }
@keyframes chain-line-draw { to { stroke-dashoffset: 0; } }
.chain-column { min-width: 0; }
.chain-column-heading { display: flex; flex-direction: column; gap: 2px; min-height: 38px; text-align: center; align-items: center; justify-content: center; margin-bottom: 8px; font-weight: 900; font-size: .85rem; }
.chain-column-heading small { color: var(--text-muted); font-size: .63rem; font-weight: 500; }
.chain-board-divider { display: flex; align-items: center; justify-content: center; color: var(--accent-color); font-size: 1.2rem; }
.chain-board-divider::before { content: ""; position: absolute; top: 52px; bottom: 13px; width: 1px; background: linear-gradient(transparent, var(--border-color), transparent); z-index: -1; }
.chain-word-column { display: flex; flex-direction: column; gap: 8px; }
.chain-word-row { display: flex; align-items: stretch; gap: 3px; min-width: 0; animation: chain-word-enter .26s cubic-bezier(.2,.8,.3,1) both; }
.chain-word-row.is-entering { animation: chain-word-enter .26s cubic-bezier(.2,.8,.3,1) both; }
@keyframes chain-word-enter { from { opacity: 0; transform: translateY(7px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chain-word-btn { flex: 1; min-width: 0; min-height: 55px; padding: 7px 5px; background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 3px 0 rgba(0,0,0,.06); font-weight: 750; font-size: clamp(.7rem, 2.4vw, .9rem); line-height: 1.18; overflow-wrap: anywhere; cursor: pointer; transition: background-color .14s, border-color .14s, transform .14s, opacity .14s; }
.chain-word-btn:hover:not(:disabled) { border-color: var(--accent-color); transform: translateY(-1px); }
.chain-word-btn:focus-visible, .chain-speak-btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.chain-word-btn.is-selected { background: rgba(56,189,248,.14); border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(56,189,248,.14); }
.chain-word-btn.is-correct { background: rgba(34,197,94,.18); border-color: #22c55e; transform: scale(.96); }
.chain-word-btn.is-wrong { background: rgba(239,68,68,.13); border-color: #ef4444; animation: chain-nudge .22s ease-in-out; }
.chain-word-btn:disabled, .chain-speak-btn:disabled { cursor: default; }
.chain-speak-btn { flex: none; width: 29px; padding: 0; border: 1px solid var(--border-color); border-radius: 8px; background: var(--card-bg); color: var(--accent-color); font-size: .8rem; cursor: pointer; }
@keyframes chain-nudge { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.chain-game-status { min-height: 23px; text-align: center; padding: 9px 0 5px; color: var(--text-muted); font-size: .8rem; }
.chain-round-result { margin-top: 12px; border: 1px solid var(--accent-color); border-radius: 16px; padding: 17px; text-align: center; background: var(--hero-bg); animation: fadeIn .28s ease-out; }
.chain-result-icon { font-size: 2.2rem; }
.chain-round-result h3 { margin: 3px 0 7px; font-size: 1.2rem; }
.chain-round-result p { margin: 0 auto 12px; max-width: 480px; font-size: .84rem; color: var(--text-muted); line-height: 1.45; }
.chain-result-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-bottom: 13px; }
.chain-result-stats span { display: flex; flex-direction: column; gap: 3px; background: var(--card-bg); border-radius: 9px; padding: 8px 4px; color: var(--text-muted); font-size: .68rem; }
.chain-result-stats b { color: var(--text-main); font-size: 1rem; }
.chain-round-result .btn { width: 100%; }
.chain-session-footer { display: flex; flex-wrap: wrap; gap: 9px 14px; justify-content: space-between; align-items: center; padding: 11px 2px 0; font-size: .74rem; color: var(--text-muted); }
.chain-session-footer b { color: var(--accent-color); }
.chain-session-footer .link-btn { margin-left: auto; }
.chain-lexicon-note { border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: 12px; color: var(--text-muted); font-size: .7rem; line-height: 1.5; }
.chain-lexicon-note a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 2px; }
@keyframes chain-line-run { to { stroke-dashoffset: -30; } }

/* =========================================================
   GLOBUS LEVEL / CLOSET / LIGHTWEIGHT ENVIRONMENTS
   ========================================================= */
.globus-locked-gate { width: 100%; text-align: center; padding: 12px 8px 24px; }
.globus-locked-preview { position: relative; width: min(220px, 60vw); margin: 0 auto 10px; }
.globus-locked-preview img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 20px rgba(16,185,129,.18)); }
.globus-locked-preview span { position: absolute; top: 8%; right: 1%; font-size: 2.5rem; filter: drop-shadow(0 3px 5px rgba(0,0,0,.25)); }
.globus-locked-gate h2 { font-size: clamp(1.2rem,5vw,1.65rem); margin-bottom: 8px; }
.globus-locked-gate p { max-width: 430px; margin: 0 auto 16px; color: var(--text-muted); font-size: .88rem; line-height: 1.55; }
.globus-backdrop { position: absolute; z-index: 0; inset: -5%; overflow: hidden; border-radius: inherit; transform: scale(var(--globus-bg-scale,1)); transform-origin: center; filter: blur(var(--globus-bg-blur,0px)); transition: filter .18s, transform .18s, background .25s; background: linear-gradient(180deg,#e6f5ff 0 62%,#c9a17a 62% 100%); }
.globus-backdrop::before, .globus-backdrop::after { content: ""; position: absolute; pointer-events: none; }
.globus-backdrop::before { inset: 0; background: linear-gradient(180deg,transparent 0 63%,rgba(103,67,36,.10) 63% 64%,transparent 64%); }
.globus-backdrop::after { left: -10%; right: -10%; bottom: -7%; height: 31%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg,rgba(255,255,255,.18),rgba(71,46,27,.2)); }
.globus-backdrop[data-background="nature"] { background: radial-gradient(circle at 76% 16%,#fff5b2 0 5%,transparent 5.5%),linear-gradient(180deg,#9ee4ff 0 58%,#70b85d 58% 75%,#3b874f 75% 100%); }
.globus-backdrop[data-background="nature"]::before { inset: auto -6% 16%; height: 40%; background:#65a956; clip-path:polygon(0 85%,13% 35%,25% 73%,42% 18%,58% 70%,75% 26%,100% 82%,100% 100%,0 100%); }
.globus-backdrop[data-background="river"] { background:linear-gradient(180deg,#9fdcff 0 50%,#78bd75 50% 68%,#348e91 68% 84%,#4c965d 84%); }
.globus-backdrop[data-background="river"]::before { left: 25%; right: 20%; bottom: 14%; height: 36%; background:linear-gradient(180deg,#8de4f5,#318bb9); clip-path:polygon(0 0,100% 18%,70% 43%,100% 66%,44% 100%,18% 64%,38% 34%); filter:drop-shadow(0 0 8px rgba(255,255,255,.28)); }
.globus-backdrop[data-background="mountains"] { background:linear-gradient(180deg,#a3d8ff 0 58%,#e4eaf1 58% 100%); }
.globus-backdrop[data-background="mountains"]::before { inset: auto -5% 13%; height: 52%; background:linear-gradient(135deg,#91a8c2,#607c9d); clip-path:polygon(0 92%,12% 38%,20% 62%,38% 0,57% 70%,73% 22%,100% 88%,100% 100%,0 100%); }
.globus-backdrop[data-background="mountains"]::after { left:-5%; right:-5%; bottom:0; height:30%; background:linear-gradient(180deg,#9acb9b,#58855c); border-radius:50% 50% 0 0; }
.globus-backdrop[data-background="moon"] { background:radial-gradient(circle at 78% 20%,rgba(255,255,255,.9) 0 1px,transparent 2px),radial-gradient(circle at 18% 28%,rgba(255,255,255,.8) 0 1px,transparent 2px),radial-gradient(circle at 60% 45%,rgba(255,255,255,.7) 0 1px,transparent 2px),linear-gradient(180deg,#09142e,#253e6b 65%,#1d2543); }
.globus-backdrop[data-background="moon"]::before { inset:auto -10% -6%; height:34%; border-radius:50% 50% 0 0; background:radial-gradient(circle at 22% 26%,#b8b6b0 0 4px,transparent 5px),radial-gradient(circle at 63% 50%,#a19f9b 0 8px,transparent 9px),linear-gradient(180deg,#9b9eab,#676d7e); }
.globus-scene-earth { display:none; position:absolute; z-index:1; left:10%; bottom:24%; font-size:clamp(2.5rem,9vw,4.5rem); filter:drop-shadow(0 0 15px rgba(56,189,248,.55)); animation:globus-earth-float 7s ease-in-out infinite; }
.globus-scene-moon { display:none; position:absolute; right:16%; top:12%; font-size:2rem; opacity:.85; }
.globus-backdrop[data-background="moon"] .globus-scene-earth, .globus-backdrop[data-background="moon"] .globus-scene-moon { display:block; }
@keyframes globus-earth-float { 0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-8px) rotate(7deg)} }
.globus-costume-hat { display:none; position:absolute; z-index:5; left:50%; top:20%; width:47px; height:29px; transform:translateX(-50%) rotate(-4deg); border-radius:13px 13px 5px 5px; background:linear-gradient(135deg,#10b981,#0e7490); box-shadow:0 4px 8px rgba(0,0,0,.23); border:1px solid rgba(255,255,255,.7); }
.globus-costume-hat::after { content:""; position:absolute; left:-6px; right:-8px; bottom:-4px; height:7px; border-radius:8px; background:linear-gradient(90deg,#0d7664,#10b981); border:1px solid rgba(255,255,255,.55); }
.globus-costume-hat span { position:absolute; inset:4px 0 0; display:flex; justify-content:center; align-items:center; color:white; font-size:.65rem; font-weight:1000; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.globus-costume-hat.is-equipped { display:block; }
.globus-costume-shirt { display:none; position:absolute; z-index:4; left:50%; top:64%; width:37%; height:12%; transform:translateX(-50%) rotate(-1deg); border-radius:16px 16px 9px 9px; border:2px solid rgba(255,255,255,.6); box-shadow:0 5px 8px rgba(0,0,0,.16); align-items:center; justify-content:center; font-size:.8rem; font-weight:1000; color:#10b981; }
.globus-costume-shirt::before,.globus-costume-shirt::after { content:""; position:absolute; top:5px; width:19%; height:45%; background:inherit; border:inherit; border-radius:8px; }
.globus-costume-shirt::before { left:-13%; transform:rotate(24deg); }
.globus-costume-shirt::after { right:-13%; transform:rotate(-24deg); }
.globus-costume-shirt.is-equipped { display:flex; }
.globus-costume-shirt.shirt-white { background:#f8fafc; color:#059669; }
.globus-costume-shirt.shirt-black { background:#172033; color:#5eead4; border-color:#64748b; }
.globus-costume-shirt.shirt-gradient { background:linear-gradient(125deg,#10b981,#38bdf8,#8b5cf6); color:#fff; }
.globus-art-canvas.is-out-of-jar { height:78%; aspect-ratio:1/1; }
.globus-art-canvas.is-out-of-jar .globus-costume-hat { top:8%; }
.globus-art-canvas.is-out-of-jar .globus-costume-shirt { top:56%; }
.globus-level-card, .globus-customizer { margin-top:14px; border:1px solid var(--border-color); border-radius:16px; padding:15px; background:linear-gradient(135deg,rgba(16,185,129,.09),transparent 55%),var(--card-bg); }
.globus-level-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.globus-level-eyebrow { color:var(--accent-color); font-size:.64rem; font-weight:900; letter-spacing:1px; }
.globus-level-top h3 { font-size:1.04rem; margin:3px 0 0; }
.globus-level-top h3 strong { font-size:1.5rem; color:var(--accent-color); }
.globus-xp-chip { flex:none; text-align:right; display:flex; flex-direction:column; gap:3px; }
.globus-xp-chip b { color:var(--accent-color); font-size:1rem; }
.globus-xp-chip small { color:var(--text-muted); font-size:.67rem; }
.globus-level-track { height:10px; background:var(--input-bg); border:1px solid var(--border-color); border-radius:99px; overflow:hidden; margin:13px 0 6px; }
.globus-level-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#10b981,#38bdf8,#8b5cf6); transition:width .3s ease; }
.globus-level-progress-text { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px; color:var(--text-muted); font-size:.7rem; }
.globus-level-progress-text span:last-child { color:var(--accent-color); }
.globus-level-message { color:var(--text-muted); font-size:.75rem; margin:9px 0 0; line-height:1.45; }
.globus-customizer-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:13px; }
.globus-customizer-heading h3 { font-size:1.02rem; margin:3px 0 0; }
.globus-shop-mark { font-size:1.8rem; }
.globus-custom-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.globus-custom-grid label { display:flex; flex-direction:column; gap:6px; color:var(--text-muted); font-size:.75rem; font-weight:750; min-width:0; }
.globus-custom-grid select { min-width:0; padding:9px; font-size:.81rem; }
.globus-custom-grid select option:disabled { color:#94a3b8; }
.globus-custom-grid output { display:inline; color:var(--accent-color); font-weight:850; }
.globus-custom-grid input[type="range"] { padding:0; border:0; background:transparent; accent-color:var(--accent-color); }
.globus-cosmetics-status { min-height:18px; color:var(--accent-color); font-size:.74rem; margin:10px 0 4px; }
.globus-customizer-note { color:var(--text-muted); font-size:.7rem; line-height:1.5; margin:7px 0 12px; }
.globus-customizer .btn { width:100%; }

@media (max-width: 520px) {
    .global-nav { gap:3px; padding:4px; }
    .global-nav-btn { padding:9px 3px; font-size:.72rem; min-width:0; }
    .chain-panel { padding:11px; border-radius:16px; }
    .chain-settings-grid { grid-template-columns:1fr; gap:9px; }
    .chain-hud { gap:7px; padding-top:12px; }
    .chain-hud span { font-size:.61rem; }
    .chain-hud b { font-size:.86rem; }
    .chain-board { grid-template-columns:minmax(0,1fr) 15px minmax(0,1fr); gap:4px; padding:8px 5px; }
    .chain-word-column { gap:6px; }
    .chain-word-row { gap:2px; }
    .chain-word-btn { min-height:54px; padding:5px 3px; font-size:.68rem; border-radius:8px; }
    .chain-speak-btn { width:24px; font-size:.72rem; }
    .chain-column-heading { font-size:.74rem; }
    .globus-custom-grid { grid-template-columns:1fr; }
    .globus-customizer, .globus-level-card { padding:12px; }
}
@media (prefers-reduced-motion: reduce) {
    .chain-logo-text, .chain-thread path, .chain-word-row, .chain-connection, .globus-scene-earth { animation:none !important; transition:none !important; }
}

/* =========================================================
   LINGORA STORIES — responsive book reader
   ========================================================= */
.section-stories{width:100%;max-width:1120px;display:flex;flex-direction:column;gap:16px;animation:fadeIn .35s ease-out;margin-bottom:24px}
.stories-panel{width:100%;display:flex;flex-direction:column;gap:18px}
.stories-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:24px 24px 36px;border:1px solid var(--border-color);border-radius:22px;background:linear-gradient(135deg,rgba(16,185,129,.17),rgba(56,189,248,.09) 52%,var(--card-bg));box-shadow:0 14px 32px rgba(0,0,0,.12)}
.stories-hero-icon{display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:20px;background:linear-gradient(145deg,#10b981,#38bdf8);font-size:2rem;box-shadow:0 10px 24px rgba(16,185,129,.24);animation:storiesBookFloat 4s ease-in-out infinite}
.stories-hero-copy{position:relative;z-index:1}.stories-eyebrow{font-size:.7rem;font-weight:800;letter-spacing:1.6px;color:var(--accent-color)}
.stories-hero h2{font-size:clamp(1.45rem,4vw,2.1rem);margin:5px 0 7px;color:var(--text-main)}
.stories-hero p{color:var(--text-muted);line-height:1.55;font-size:.92rem;max-width:720px}
.stories-page-flight{position:absolute;right:22px;bottom:10px;width:126px;height:58px;pointer-events:none;perspective:500px;opacity:.96}
.stories-flying-page{position:absolute;display:block;width:47px;height:42px;border:1px solid rgba(5,150,105,.34);border-radius:3px 8px 8px 3px;background:linear-gradient(115deg,#fffdf5,#f0f7f2);box-shadow:0 5px 12px rgba(15,23,42,.13),inset 4px 0 0 rgba(16,185,129,.10);transform-origin:left center}
.stories-flying-page i{display:block;height:1px;margin:8px 6px;background:rgba(71,85,105,.24);border-radius:2px}
.stories-flying-page.page-back{left:10px;top:9px;transform:rotate(-13deg);animation:storiesPageBack 4.8s ease-in-out infinite}
.stories-flying-page.page-middle{left:37px;top:6px;transform:rotate(9deg);animation:storiesPageMiddle 4.8s ease-in-out infinite .2s}
.stories-flying-page.page-front{left:65px;top:12px;transform:rotate(-3deg);animation:storiesPageFront 4.8s ease-in-out infinite .45s}
@keyframes storiesPageBack{0%,100%{transform:translate(0,0) rotate(-13deg);opacity:.6}50%{transform:translate(-4px,-5px) rotate(-20deg);opacity:.9}}
@keyframes storiesPageMiddle{0%,100%{transform:translate(0,0) rotate(9deg)}50%{transform:translate(2px,-7px) rotate(14deg)}}
@keyframes storiesPageFront{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(5px,-3px) rotate(5deg)}}
@keyframes storiesBookFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.stories-controls{display:grid;grid-template-columns:minmax(140px,1fr) minmax(160px,1.2fr) minmax(180px,1.4fr);gap:10px;padding:14px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:16px}
.stories-controls label,.story-word-actions label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:.78rem;font-weight:700;color:var(--text-muted)}
.stories-controls select,.stories-controls input{min-width:0;padding:10px 11px}
.stories-layout{display:grid;grid-template-columns:minmax(250px,.82fr) minmax(0,1.6fr);align-items:start;gap:16px}
.stories-library,.story-reader,.story-word-sheet{min-width:0;background:var(--card-bg);border:1px solid var(--border-color);border-radius:18px;padding:14px;box-shadow:0 8px 25px rgba(0,0,0,.08)}
.stories-library-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:.9rem}
.stories-library-head span{font-size:.75rem;color:var(--text-muted)}
.story-continue-reading{display:block;width:100%;margin:0 0 12px;padding:10px 12px;border:1px solid var(--accent-green);border-radius:12px;background:rgba(16,185,129,.10);color:var(--text-main);font:inherit;font-size:.82rem;font-weight:750;text-align:left;cursor:pointer;transition:background .18s ease,transform .18s ease}
.story-continue-reading:hover{background:rgba(16,185,129,.18);transform:translateY(-1px)}
.story-continue-reading[hidden]{display:none!important}
.story-list{display:flex;flex-direction:column;gap:9px;max-height:780px;overflow:auto;padding-right:2px}
.story-card{appearance:none;width:100%;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px;text-align:left;color:var(--text-main);background:var(--input-bg);border:1px solid var(--border-color);border-radius:13px;cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s}
.story-card:hover{transform:translateY(-2px);border-color:var(--accent-color);box-shadow:0 8px 18px rgba(16,185,129,.1)}
.story-card.is-selected{border-color:var(--accent-color);box-shadow:inset 0 0 0 1px var(--accent-color),0 8px 20px rgba(16,185,129,.1)}
.story-card-top,.story-card-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.story-card strong{font-size:.95rem;line-height:1.3}.story-card-summary{font-size:.78rem;color:var(--text-muted);line-height:1.45}
.story-card-genre{font-size:.68rem;color:var(--text-muted)}.story-card-bottom{font-size:.68rem;color:var(--text-muted);padding-top:7px;border-top:1px solid var(--border-color)}
.story-level-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:999px;background:rgba(16,185,129,.14);color:var(--accent-color);font-size:.7rem;font-weight:800;white-space:nowrap}
.story-list-empty{padding:20px;text-align:center;color:var(--text-muted);font-size:.85rem}
.stories-reading-column{display:flex;flex-direction:column;gap:12px;min-width:0}
.story-reader{padding:16px}
.story-empty-state{min-height:360px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:8px;color:var(--text-muted)}
.story-empty-state>span{font-size:3.2rem;filter:drop-shadow(0 8px 14px rgba(16,185,129,.2))}.story-empty-state h3{color:var(--text-main)}.story-empty-state p{max-width:320px;line-height:1.55;font-size:.86rem}
.story-reading-header{max-width:none;width:100%;margin:0 0 14px;z-index:auto;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.story-reading-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--text-muted);font-size:.72rem}
.story-reading-header h3{font-size:clamp(1.25rem,3vw,1.8rem);line-height:1.22;color:var(--text-main)}.story-reading-header p{font-size:.88rem;line-height:1.5;color:var(--text-muted)}
.story-reading-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:12px 0;padding:10px 12px;border-radius:12px;border:1px solid var(--border-color);background:rgba(148,163,184,.06)}
.story-reading-tools label{display:flex;align-items:center;gap:7px;font-size:.76rem;color:var(--text-muted);font-weight:700}
.story-reading-tools input[type=color]{width:34px;height:30px;padding:2px;border:1px solid var(--border-color);border-radius:7px;cursor:pointer;background:transparent}
.story-tool-reset{border:0;background:transparent;color:var(--accent-color);font-size:.76rem;font-weight:700;cursor:pointer;padding:6px}
.story-book{perspective:1200px;padding:4px 0}
.story-page-frame{position:relative;min-height:490px;padding:24px clamp(18px,4vw,42px) 20px;border-radius:5px 14px 14px 5px;background:var(--story-page-bg,#fffaf0);color:var(--story-page-fg,#233044);box-shadow:inset 8px 0 12px rgba(0,0,0,.06),0 16px 32px rgba(0,0,0,.16);border-left:4px solid rgba(120,100,70,.2);overflow:hidden;transform-origin:left center;will-change:transform,opacity}
.story-page-frame:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(0deg,transparent 0,transparent 31px,rgba(120,130,140,.15) 32px);mask-image:linear-gradient(to bottom,transparent,black 15%,black 85%,transparent)}
.story-page-topline,.story-page-footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.64rem;letter-spacing:1px;opacity:.62}
.story-page-topline{padding-bottom:14px;border-bottom:1px solid currentColor}.story-page-footer{padding-top:14px;margin-top:16px;border-top:1px solid currentColor;letter-spacing:0}
.story-page-content{position:relative;z-index:1;min-height:360px;padding:18px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.9;overflow-wrap:anywhere}
.story-page-paragraph{white-space:pre-line;text-align:justify;text-indent:1.4em;margin:0}.story-page-paragraph::first-letter{font-size:1.15em;font-weight:700}
.story-word-token{display:inline;color:inherit;font:inherit;line-height:inherit;padding:0 .02em;margin:0;border:0;border-radius:3px;background:transparent;cursor:pointer;text-decoration-color:rgba(16,185,129,.36);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:background .15s,color .15s}
.story-word-token:hover,.story-word-token:focus-visible{outline:none;background:rgba(16,185,129,.2);color:#047857;text-decoration-color:#059669;border-radius:4px}
.is-page-leaving.turn-forward{animation:storyPageOutForward .11s ease-in forwards}.is-page-leaving.turn-backward{animation:storyPageOutBack .11s ease-in forwards}.is-page-entering{animation:storyPageIn .2s ease-out both}
@keyframes storyPageOutForward{to{opacity:.15;transform:perspective(900px) rotateY(-5deg) translateX(-8px)}}
@keyframes storyPageOutBack{to{opacity:.15;transform:perspective(900px) rotateY(5deg) translateX(8px)}}
@keyframes storyPageIn{from{opacity:.35;transform:perspective(900px) rotateY(4deg) translateX(9px)}to{opacity:1;transform:perspective(900px) rotateY(0) translateX(0)}}
.story-end-page{min-height:330px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:12px}.story-end-page>span{font-size:3rem;color:#10b981}.story-end-page h4{font-size:2rem}.story-end-page p{font-family:inherit;text-align:center;max-width:340px}
.story-pagination{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.story-pagination .btn{min-width:104px;padding:10px 13px}.story-pagination span{text-align:center;font-size:.76rem;color:var(--text-muted)}.story-pagination button:disabled{opacity:.42;cursor:not-allowed}
.story-quiz-panel{padding:16px;border-radius:14px;background:var(--input-bg);border:1px solid var(--border-color);animation:fadeIn .25s ease-out}
.story-quiz-heading{display:flex;gap:12px;align-items:center;margin-bottom:14px}.story-quiz-heading>span{font-size:1.6rem}.story-quiz-heading h4{font-size:1rem}.story-quiz-heading p{margin-top:4px;font-size:.8rem;color:var(--text-muted)}
.story-question{border:1px solid var(--border-color);border-radius:11px;padding:12px;margin:10px 0 14px;min-width:0}.story-question legend{padding:0 5px;font-weight:750;font-size:.88rem;line-height:1.45}
.story-answer-option{display:flex;gap:9px;align-items:flex-start;padding:8px;border-radius:8px;font-size:.84rem;line-height:1.4;cursor:pointer}.story-answer-option:hover{background:rgba(16,185,129,.08)}.story-answer-option input{width:auto;margin-top:3px;accent-color:var(--accent-color)}.story-question.is-correct{border-color:var(--accent-color)}
.story-quiz-result{font-size:.85rem;font-weight:700;color:var(--accent-color);margin-top:10px;line-height:1.45}
.story-word-sheet{position:relative;padding:18px;animation:storySheetIn .2s ease-out;border-color:rgba(16,185,129,.45);box-shadow:0 12px 28px rgba(0,0,0,.12)}
@keyframes storySheetIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.story-sheet-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;border-radius:10px;font-size:1.5rem;cursor:pointer;background:var(--input-bg);color:var(--text-muted)}
.story-word-sheet h3{font-size:1.65rem;margin:8px 42px 6px 0;overflow-wrap:anywhere}.story-word-context{font-size:.8rem;line-height:1.5;color:var(--text-muted);margin:8px 0 10px}
.story-translation-result{padding:12px;border-radius:10px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);font-size:.86rem;line-height:1.5;margin:10px 0;color:var(--text-main);overflow-wrap:anywhere}
.story-word-actions{display:grid;grid-template-columns:auto minmax(150px,1fr) minmax(150px,1fr);gap:10px;align-items:end}.story-word-actions .btn{min-height:42px;padding:10px}.story-word-actions label input,.story-word-actions label select{min-width:0;padding:10px}.story-word-actions label:nth-of-type(2){grid-column:2 / -1}.story-word-actions #story-save-word{grid-column:1 / -1}
.story-translation-note,.story-word-status{margin-top:9px;font-size:.74rem;line-height:1.45;color:var(--text-muted)}.story-word-status{font-weight:700;color:var(--accent-color)}.stories-legal-note{font-size:.72rem;color:var(--text-muted);line-height:1.5;opacity:.85;padding:0 4px}
.section-stories [hidden]{display:none!important}
@media(max-width:820px){.stories-layout{grid-template-columns:1fr}.story-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.stories-library{order:2}.stories-reading-column{order:1}.story-page-frame{min-height:440px}.story-page-content{min-height:305px}}
@media(max-width:560px){.stories-hero{grid-template-columns:1fr;padding:19px 17px 67px;gap:10px}.stories-page-flight{right:12px;bottom:4px;transform:scale(.82);transform-origin:bottom right}.stories-hero-icon{width:52px;height:52px;border-radius:16px;font-size:1.6rem}.stories-controls{grid-template-columns:1fr;gap:9px}.story-list{grid-template-columns:1fr}.stories-library,.story-reader{padding:10px}.story-reading-header{padding:0}.story-page-frame{min-height:430px;padding:17px 16px 16px}.story-page-content{min-height:300px;font-size:1rem;line-height:1.78}.story-page-footer{font-size:.58rem}.story-pagination{grid-template-columns:1fr 1fr}.story-pagination span{grid-column:1/-1;grid-row:1}.story-pagination .btn{width:100%;min-width:0}.story-word-actions{grid-template-columns:1fr 1fr}.story-word-actions label:nth-of-type(1){grid-column:1/-1}.story-word-actions label:nth-of-type(2){grid-column:1/-1}.story-word-actions #story-save-word{grid-column:1/-1}.story-reading-tools{gap:8px}.story-reading-tools label{font-size:.7rem}.story-tool-reset{margin-left:auto}.story-reading-meta{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){.stories-flying-page,.stories-hero-icon,.is-page-leaving,.is-page-entering,.story-word-sheet{animation:none!important;transition:none!important}}


/* === ЕДИНАЯ СЕТКА НАВИГАЦИИ И ВХОД С ГЛАВНОЙ === */
header { width: 100%; max-width: 1120px; }
.global-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 7px;
    width: 100%;
}
.global-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 46px;
    padding: 10px 8px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}
.global-nav-btn .nav-icon {
    display: inline-flex;
    flex: 0 0 1.25em;
    width: 1.25em;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
}
.global-nav-btn .nav-label { min-width: 0; }
.section-home { max-width: 900px; }
.presentation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-auth-container {
    width: 100%;
    max-width: 590px;
    margin: 0 auto;
    padding: 22px;
    border: 1px solid var(--accent-color);
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.home-auth-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.home-auth-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 13px; background: var(--brand-green-glow); font-size: 1.35rem; }
.home-auth-heading h2 { margin: 0 0 5px; color: var(--accent-color); font-size: 1.18rem; }
.home-auth-heading p { color: var(--text-muted); font-size: .84rem; line-height: 1.5; }
.auth-field-label { color: var(--text-muted); font-size: .78rem; font-weight: 700; margin: 3px 0 -8px; }
.home-auth-submit { width: 100%; }
.auth-mode-switch { background: transparent; border: 0; color: var(--accent-color); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; cursor: pointer; padding: 7px 4px; }
.home-user-card {
    width: 100%; max-width: 900px; margin: 0 auto;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--card-bg); border: 1px solid var(--accent-color); border-radius: 17px;
    padding: 17px 19px; box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.home-user-card[hidden], #auth-screen[hidden], #quiz-locked-gate[hidden] { display: none !important; }
.home-user-avatar { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 15px; background: var(--brand-green-glow); font-size: 1.55rem; }
.home-user-copy { flex: 1 1 180px; min-width: 0; }
.home-user-copy h3 { font-size: 1rem; margin-bottom: 4px; }
.home-user-copy p { color: var(--text-muted); font-size: .82rem; overflow-wrap: anywhere; line-height: 1.4; }
.home-account-actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
.home-account-actions .btn { min-width: 120px; }
.quiz-locked-gate {
    width: 100%; max-width: 580px; margin: 22px auto; padding: clamp(20px, 4vw, 32px);
    display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
    background: var(--card-bg); border: 1px solid var(--accent-color); border-radius: 20px;
    box-shadow: 0 16px 36px rgba(0,0,0,.13); animation: fadeIn .35s ease-out;
}
.quiz-lock-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; background: var(--brand-green-glow); font-size: 1.9rem; }
.quiz-locked-gate h2 { font-size: 1.28rem; color: var(--accent-color); }
.quiz-locked-gate p { max-width: 440px; color: var(--text-muted); font-size: .9rem; line-height: 1.6; }
.quiz-locked-gate .btn { flex: none; width: min(100%, 340px); }
.contacts-intro { display: flex; gap: 13px; align-items: flex-start; padding: 20px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--hero-bg); }
.contacts-intro-icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 14px; background: var(--brand-green-glow); font-size: 1.5rem; }
.contacts-intro h2 { margin-bottom: 5px; font-size: 1.2rem; }
.contacts-intro p { color: var(--text-muted); font-size: .85rem; line-height: 1.5; }
.section-contacts { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; animation: fadeIn .35s ease-out; }
@media (max-width: 760px) {
    header { max-width: 100%; }
    .global-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 5px; }
    .global-nav-btn { min-height: 42px; padding: 9px 5px; font-size: .78rem; gap: 5px; }
    .global-nav-btn .nav-icon { flex-basis: 1.2em; width: 1.2em; }
    .section-home { max-width: 100%; }
    .presentation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
    .global-nav { gap: 4px; padding: 4px; }
    .global-nav-btn { min-height: 40px; padding: 8px 3px; font-size: .70rem; gap: 3px; }
    .global-nav-btn .nav-icon { font-size: .95rem; }
    .home-auth-container { padding: 16px; }
    .home-user-card { padding: 13px; }
    .home-account-actions { display: grid; grid-template-columns: 1fr; }
    .home-account-actions .btn { width: 100%; }
}
\n\n/* === Stories guest gate, locked books and bookmarks === */
.stories-guest-gate{width:100%;max-width:760px;margin:24px auto;padding:clamp(24px,5vw,44px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;border:1px solid rgba(16,185,129,.42);border-radius:24px;background:radial-gradient(circle at 15% 5%,rgba(56,189,248,.12),transparent 36%),linear-gradient(135deg,rgba(16,185,129,.12),transparent 70%),var(--card-bg);box-shadow:0 20px 55px rgba(0,0,0,.12);animation:fadeIn .3s ease-out}
.stories-guest-gate[hidden]{display:none!important}.stories-gate-art{font-size:3rem;filter:drop-shadow(0 8px 18px rgba(16,185,129,.3));animation:storyGateFloat 3s ease-in-out infinite}.stories-guest-gate h3{font-size:clamp(1.2rem,3vw,1.65rem)}.stories-guest-gate p{max-width:520px;color:var(--text-muted);line-height:1.6}.stories-guest-gate .btn{flex:none;min-width:240px}
@keyframes storyGateFloat{50%{transform:translateY(-6px) rotate(2deg)}}
.stories-bookmarks-filter{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--border-color);border-radius:10px;color:var(--text-muted);font-size:.78rem}.stories-bookmarks-filter input{width:auto;accent-color:var(--accent-color)}
.story-card.is-locked{opacity:.76;border-style:dashed}.story-card.is-locked:hover{transform:none}.story-card-lock{display:inline-flex;align-items:center;gap:4px;color:#d97706;font-size:.72rem;font-weight:800}.story-card.is-bookmarked{border-color:rgba(245,158,11,.55)}.story-card-mark{color:#d97706;font-size:1rem}.story-reading-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%}.story-bookmark-button{flex:0 0 auto;border:1px solid var(--border-color);border-radius:999px;padding:8px 11px;background:var(--card-bg);color:var(--text-muted);font-size:.76rem;font-weight:800;cursor:pointer}.story-bookmark-button[aria-pressed="true"]{border-color:#d97706;background:rgba(245,158,11,.12);color:#d97706}

/* === Profile widgets shared by games === */
.game-profile-row{display:flex;width:100%;margin:0 0 12px}.game-profile-row-left{justify-content:flex-start}.game-profile-row-right{justify-content:flex-end}.game-profile-widget{display:flex;align-items:center;gap:10px;min-width:190px;max-width:100%;padding:7px 12px 7px 7px;border:1px solid var(--border-color);border-radius:16px;background:var(--card-bg);color:var(--text-main);cursor:pointer;text-align:left;box-shadow:0 6px 18px rgba(0,0,0,.07);transition:transform .18s,border-color .18s}.game-profile-widget:hover{transform:translateY(-1px);border-color:var(--accent-color)}.game-player-avatar{--player-frame-color:var(--accent-color);display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;font-size:1.45rem;background:var(--input-bg);border:3px solid var(--player-frame-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--player-frame-color),transparent 72%);line-height:1}.game-player-meta{display:flex;flex-direction:column;gap:3px;min-width:0}.game-player-meta b{font-size:.81rem;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-player-meta small{font-size:.66rem;color:var(--text-muted);max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-profile-chevron{color:var(--text-muted);font-size:1.15rem;margin-left:auto}.stories-game-profile-row{margin-bottom:10px}.game-profile-row-right .game-profile-widget{flex-direction:row}

/* === iOS-like profile settings === */
.profile-modal-content.ios-settings{width:min(96vw,780px);max-height:min(92vh,920px);overflow:auto;padding:0 0 20px;border-radius:24px;background:var(--bg-color);border:1px solid var(--border-color);box-shadow:0 30px 90px rgba(0,0,0,.32)}.ios-profile-header{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:16px 18px;background:color-mix(in srgb,var(--card-bg),transparent 4%);border-bottom:1px solid var(--border-color);backdrop-filter:blur(16px)}.ios-profile-header>div{text-align:center}.ios-profile-header h3{font-size:1.03rem}.ios-profile-eyebrow{font-size:.55rem;letter-spacing:1.2px;color:var(--accent-color);font-weight:900}.ios-back-button{justify-self:start;border:0;background:transparent;color:var(--accent-color);font-size:.9rem;font-weight:700;cursor:pointer;padding:7px 0}.ios-back-button:first-letter{font-size:1.55rem}.ios-close-button{justify-self:end}.ios-profile-nav{display:flex;flex-direction:column;gap:0;margin:16px 18px 20px;border:1px solid var(--border-color);border-radius:15px;overflow:hidden;background:var(--card-bg)}.ios-profile-nav button{display:grid;grid-template-columns:32px 1fr 18px;align-items:center;gap:8px;text-align:left;padding:12px 13px;color:var(--text-main);background:transparent;border:0;border-bottom:1px solid var(--border-color);font-size:.86rem;cursor:pointer}.ios-profile-nav button:last-child{border-bottom:0}.ios-profile-nav button:hover{background:rgba(16,185,129,.07)}.ios-profile-nav button span{font-size:1.08rem}.ios-profile-nav button i{font-style:normal;font-size:1.3rem;color:var(--text-muted)}.ios-profile-group{margin:12px 18px 18px;padding:17px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:17px;scroll-margin-top:90px}.ios-profile-group .profile-section-title{margin-top:0}.ios-profile-group .profile-subtitle{margin-top:17px}.profile-feedback-intro{font-size:.83rem;color:var(--text-muted);line-height:1.55;margin:8px 0 14px}.profile-feedback-label{display:block;margin:8px 0;font-size:.78rem;color:var(--text-muted);font-weight:800}.profile-feedback-panel textarea{resize:vertical;min-height:110px;line-height:1.5}.feedback-form-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:9px}.feedback-form-footer small{font-size:.72rem;color:var(--text-muted)}.feedback-form-footer .btn{flex:none}.admin-feedback-section{margin-top:15px;padding-top:14px;border-top:1px solid var(--border-color)}.admin-feedback-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border-color);border-radius:11px;background:var(--input-bg);color:var(--text-main);padding:11px 12px;font-weight:800;cursor:pointer}.admin-feedback-toggle span{display:inline-grid;place-items:center;min-width:25px;height:25px;border-radius:999px;background:var(--accent-color);color:white}.admin-feedback-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}.admin-feedback-item{padding:12px;border:1px solid var(--border-color);border-radius:12px;background:var(--input-bg)}.admin-feedback-item p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.84rem;line-height:1.5}.admin-feedback-item small{display:block;color:var(--text-muted);font-size:.7rem;margin-bottom:7px}.admin-feedback-item button{margin-top:9px}

/* === Quick profile, level-up popup and word-stat toast === */
.quick-profile-backdrop,.globus-level-popup-backdrop{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,8,23,.55);backdrop-filter:blur(8px);animation:fadeIn .16s ease-out}.quick-profile-backdrop[hidden],.globus-level-popup-backdrop[hidden]{display:none!important}.quick-profile-card,.globus-level-popup{position:relative;width:min(100%,430px);padding:24px;border:1px solid var(--border-color);border-radius:24px;background:var(--card-bg);color:var(--text-main);box-shadow:0 28px 90px rgba(0,0,0,.3);animation:profilePopupIn .24s cubic-bezier(.2,.8,.2,1)}@keyframes profilePopupIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.quick-profile-close{position:absolute;right:12px;top:12px;border:0;border-radius:10px;background:var(--input-bg);color:var(--text-muted);width:32px;height:32px;font-size:1.4rem;cursor:pointer}.quick-profile-main{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-right:20px}.quick-profile-avatar{width:58px;height:58px;flex-basis:58px;font-size:1.9rem}.quick-profile-main h3{font-size:1.1rem;margin-bottom:4px}.quick-profile-main p{font-size:.75rem;color:var(--text-muted);overflow-wrap:anywhere}.quick-profile-xp{display:inline-block;font-size:.7rem;font-weight:800;color:var(--accent-color);margin-top:7px}.quick-profile-card>.btn{width:100%;margin-top:8px;flex:none}.globus-level-popup{text-align:center;overflow:hidden;border-color:rgba(16,185,129,.45);background:radial-gradient(circle at 50% 0,rgba(16,185,129,.18),transparent 48%),var(--card-bg)}.level-up-confetti{font-size:1.5rem;letter-spacing:.45rem;color:#10b981;animation:confettiFloat 2.4s ease-in-out infinite}@keyframes confettiFloat{50%{transform:translateY(-6px) rotate(4deg);opacity:.65}}.globus-level-popup-icon{font-size:3.2rem;filter:drop-shadow(0 8px 18px rgba(16,185,129,.3));animation:profilePopupIn .5s ease-out}.globus-level-popup h2{font-size:1.45rem;margin:10px 0;color:var(--accent-color)}.globus-level-popup p{color:var(--text-muted);line-height:1.55;font-size:.9rem}.globus-level-popup-actions{display:flex;gap:10px;margin-top:20px}.globus-level-popup-actions .btn{flex:1}.global-nav-btn.globus-level-attention{animation:globusNavGlow 1.35s ease-in-out infinite;border:1px solid #10b981}@keyframes globusNavGlow{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0);filter:saturate(1)}50%{box-shadow:0 0 0 4px rgba(16,185,129,.18),0 0 20px rgba(16,185,129,.38);filter:saturate(1.4)}}
.word-added-toast{position:fixed;z-index:10800;right:18px;bottom:18px;width:min(410px,calc(100vw - 28px));display:flex;align-items:flex-start;gap:12px;padding:15px 15px 15px 13px;border:1px solid rgba(16,185,129,.45);border-radius:17px;background:var(--card-bg);color:var(--text-main);box-shadow:0 18px 55px rgba(0,0,0,.22);animation:profilePopupIn .23s ease-out}.word-added-toast[hidden]{display:none!important}.word-toast-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:12px;background:rgba(16,185,129,.13);font-size:1.35rem}.word-toast-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.word-toast-copy b{font-size:.91rem}.word-toast-copy span{font-size:.78rem;line-height:1.45;color:var(--text-main)}.word-toast-copy small{font-size:.7rem;color:var(--text-muted);line-height:1.4}.word-toast-close{margin-left:auto;border:0;background:transparent;color:var(--text-muted);font-size:1.2rem;cursor:pointer}
#bubble-container .bubble{touch-action:manipulation;-webkit-tap-highlight-color:transparent}#bubble-container .bubble{pointer-events:auto}
@media(max-width:600px){.game-profile-widget{min-width:0;max-width:100%}.game-player-meta b{max-width:135px}.game-player-meta small{max-width:145px}.ios-profile-header{padding:13px 12px}.ios-profile-group,.ios-profile-nav{margin-left:11px;margin-right:11px}.ios-profile-group{padding:13px}.feedback-form-footer{align-items:stretch;flex-direction:column}.feedback-form-footer .btn{width:100%}.globus-level-popup-actions{flex-direction:column}.word-added-toast{right:12px;bottom:12px}}


/* In-app administrator notification for new feedback */
.admin-feedback-notice{position:fixed;z-index:15000;right:18px;bottom:18px;display:flex;align-items:center;gap:12px;width:min(520px,calc(100vw - 28px));padding:14px;border:1px solid rgba(16,185,129,.45);border-radius:18px;background:var(--card-bg);color:var(--text-main);box-shadow:0 18px 50px rgba(0,0,0,.24);animation:feedbackNoticeIn .25s cubic-bezier(.2,.8,.2,1)}
.admin-feedback-notice[hidden]{display:none!important}.admin-feedback-notice-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,rgba(16,185,129,.22),rgba(56,189,248,.2));font-size:1.45rem}.admin-feedback-notice-copy{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.admin-feedback-notice-copy b{font-size:.86rem}.admin-feedback-notice-copy span{font-size:.74rem;line-height:1.4;color:var(--text-muted)}.admin-feedback-notice .btn{flex:none;padding:9px 12px;font-size:.8rem}.admin-feedback-notice .word-toast-close{flex:none}
@keyframes feedbackNoticeIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:560px){.admin-feedback-notice{right:10px;bottom:10px;gap:8px;padding:10px;flex-wrap:wrap}.admin-feedback-notice-icon{flex-basis:36px;width:36px;height:36px}.admin-feedback-notice-copy{min-width:calc(100% - 60px);flex-basis:calc(100% - 60px)}.admin-feedback-notice .btn{margin-left:44px}}
/* === Shared profile visuals: Home, Quiz, Chain and Stories === */
#section-stories .stories-panel { position: relative; }
#section-stories .stories-game-profile-row {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 12;
    margin: 0 !important;
}
#section-stories .stories-game-profile-row .game-profile-widget {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    height: 50px;
    padding: 3px;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
}
#section-stories .stories-game-profile-row .game-player-meta,
#section-stories .stories-game-profile-row .game-profile-chevron { display: none !important; }
#section-stories .stories-game-profile-row .game-player-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}
#section-stories .stories-hero-copy { padding-right: 58px; }
#home-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid var(--player-frame-color, var(--accent-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--player-frame-color, var(--accent-color)), transparent 72%);
}
.social-card-link {
    color: var(--text-main);
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.social-card-link:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color);
    box-shadow: 0 12px 26px rgba(16,185,129,.15);
}
.social-card-link:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 3px;
}
.social-card-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    padding: 8px 12px;
    border: 1px solid var(--accent-color);
    border-radius: 999px;
    background: var(--brand-green-glow);
    color: var(--accent-color);
    font-size: .75rem;
    font-weight: 800;
}
@media (max-width: 600px) {
    #section-stories .stories-game-profile-row { top: 8px; right: 8px; }
    #section-stories .stories-game-profile-row .game-profile-widget {
        width: 44px; min-width: 44px; max-width: 44px; height: 44px;
    }
    #section-stories .stories-game-profile-row .game-player-avatar {
        width: 36px; height: 36px; flex-basis: 36px; font-size: 1.2rem;
    }
    #section-stories .stories-hero-copy { padding-right: 48px; }
}
/* === LINGORA TALK — voice assistant MVP === */
.global-nav { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.section-talk {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
    animation: fadeIn .35s ease-out;
}
.talk-panel { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.talk-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 22px 24px;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(16,185,129,.17), rgba(56,189,248,.10) 56%, var(--card-bg));
    box-shadow: 0 14px 32px rgba(0,0,0,.10);
}
.talk-hero-art {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 20px;
    color: white;
    font-size: 2rem;
    background: linear-gradient(145deg,#10b981,#38bdf8);
    box-shadow: 0 10px 24px rgba(16,185,129,.22);
}
.talk-hero-copy { min-width: 0; padding-right: 56px; }
.talk-hero h2 { margin: 5px 0 7px; color: var(--text-main); font-size: clamp(1.45rem,4vw,2rem); }
.talk-hero p { max-width: 650px; color: var(--text-muted); font-size: .91rem; line-height: 1.55; }
.talk-profile-compact {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    height: 50px;
    padding: 3px;
    border-radius: 50%;
    z-index: 4;
}
.talk-profile-compact .game-player-meta,
.talk-profile-compact .game-profile-chevron { display: none !important; }
.talk-profile-compact .game-player-avatar { width: 42px; height: 42px; flex-basis: 42px; }
.talk-login-gate {
    width: 100%;
    max-width: 690px;
    margin: 8px auto;
    padding: clamp(22px,4vw,36px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--accent-color);
    border-radius: 20px;
    background: var(--card-bg);
    text-align: center;
}
.talk-login-gate[hidden], .talk-workspace[hidden] { display: none !important; }
.talk-gate-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--brand-green-glow); font-size: 1.8rem; }
.talk-login-gate h3 { font-size: 1.12rem; }
.talk-login-gate p { max-width: 500px; color: var(--text-muted); font-size: .88rem; line-height: 1.6; }
.talk-workspace { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.talk-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.5;
}
.talk-privacy-note > span { font-size: 1.1rem; }
.talk-privacy-note p { min-width: 0; }
.talk-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
    max-height: min(55vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(13px,2.5vw,24px);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: color-mix(in srgb, var(--card-bg), transparent 8%);
    scroll-behavior: smooth;
}
.talk-message {
    width: fit-content;
    max-width: min(88%, 720px);
    padding: 11px 14px;
    border: 1px solid var(--border-color);
    border-radius: 16px 16px 16px 5px;
    background: var(--card-bg);
    color: var(--text-main);
    overflow-wrap: anywhere;
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.talk-message p { white-space: pre-wrap; line-height: 1.6; font-size: .91rem; }
.talk-message-author { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: .68rem; font-weight: 800; letter-spacing: .2px; }
.talk-message-user { align-self: flex-end; border-radius: 16px 16px 5px 16px; border-color: color-mix(in srgb, var(--accent-color), transparent 50%); background: var(--brand-green-glow); }
.talk-message-user .talk-message-author { color: var(--accent-color); }
.talk-message-typing p { color: var(--text-muted); }
.talk-status { padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-main); background: var(--card-bg); font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
.talk-status[hidden] { display: none !important; }
.talk-composer { display: flex; flex-direction: column; gap: 12px; padding: clamp(13px,2.5vw,22px); border: 1px solid var(--border-color); border-radius: 18px; background: var(--card-bg); }
.talk-record-strip { display: flex; align-items: center; gap: 12px; }
.talk-mic-button { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; border: 1px solid var(--accent-color); border-radius: 999px; background: var(--brand-green-glow); color: var(--text-main); font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; transition: transform .16s ease, background .16s ease; }
.talk-mic-button:hover { transform: translateY(-1px); }
.talk-mic-button.is-recording { border-color: #ef4444; background: rgba(239,68,68,.12); }
.talk-mic-button:disabled { opacity: .6; cursor: wait; }
#talk-mic-hint { color: var(--text-muted); font-size: .78rem; line-height: 1.4; }
.talk-form { display: flex; flex-direction: column; gap: 8px; }
.talk-input-label { font-size: .78rem; color: var(--text-muted); font-weight: 700; }
#talk-input {
    display: block;
    width: 100%;
    min-height: 88px;
    resize: vertical;
    padding: 12px 13px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--text-main);
    font: inherit;
    font-size: .9rem;
    line-height: 1.5;
}
#talk-input:focus { outline: 2px solid color-mix(in srgb, var(--accent-color), transparent 35%); outline-offset: 1px; }
.talk-form-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.talk-voice-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: .81rem; cursor: pointer; }
.talk-voice-toggle input { accent-color: var(--accent-color); }
.talk-form-footer .btn { flex: 0 0 auto; }
.talk-bottom-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.talk-bottom-row small { color: var(--text-muted); font-size: .69rem; line-height: 1.4; }
.talk-clear-button { border: 0; padding: 6px 0; background: transparent; color: var(--text-muted); font: inherit; font-size: .76rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.talk-clear-button:hover { color: var(--accent-color); }
@media (max-width: 760px) {
    .talk-hero { grid-template-columns: 1fr; gap: 10px; padding: 19px 17px; }
    .talk-hero-art { width: 52px; height: 52px; border-radius: 16px; font-size: 1.55rem; }
    .talk-hero-copy { padding-right: 44px; }
    .talk-messages { min-height: 240px; max-height: 54vh; }
    .talk-message { max-width: 94%; }
}
@media (max-width: 420px) {
    .talk-profile-compact { top: 9px; right: 9px; width: 44px; min-width: 44px; max-width: 44px; height: 44px; }
    .talk-profile-compact .game-player-avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: 1.2rem; }
    .talk-hero-copy { padding-right: 45px; }
    .talk-record-strip { align-items: flex-start; flex-direction: column; }
    .talk-form-footer { align-items: stretch; flex-direction: column; }
    .talk-form-footer .btn { width: 100%; }
    .talk-bottom-row { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .talk-mic-button, .talk-messages { transition: none !important; scroll-behavior: auto; }
}

/* Bilingual native-speaker controls */
.talk-practice-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--card-bg); }
.talk-control-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.talk-control-field label { color: var(--text-muted); font-size: .78rem; font-weight: 750; }
.talk-control-field select { width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--input-bg); color: var(--text-main); font: inherit; font-size: .84rem; }
.talk-key-panel { padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); color: var(--text-main); }
.talk-key-panel summary { cursor: pointer; font-size: .85rem; font-weight: 750; }
.talk-key-content { display: flex; flex-direction: column; gap: 9px; padding-top: 13px; }
.talk-key-content p, .talk-key-content small { color: var(--text-muted); font-size: .78rem; line-height: 1.55; }
.talk-key-content a { color: var(--accent-color); text-decoration: underline; }
.talk-key-content label { font-size: .78rem; font-weight: 700; }
.talk-key-content input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--input-bg); color: var(--text-main); font: inherit; }
.talk-key-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.talk-status.is-error { border-color: var(--accent-red); color: var(--accent-red); }
@media (max-width: 560px) { .talk-practice-controls { grid-template-columns: 1fr; } }

/* Lingora Talk voice selector uses the same responsive control layout. */
#talk-voice { width: 100%; }

/* XP notifications for successful actions across Lingora */
.xp-earned-toast{position:fixed;z-index:10810;right:18px;bottom:18px;width:min(410px,calc(100vw - 28px));display:flex;align-items:flex-start;gap:12px;padding:15px;border:1px solid rgba(16,185,129,.5);border-radius:17px;background:var(--card-bg);color:var(--text-main);box-shadow:0 18px 55px rgba(0,0,0,.24);animation:profilePopupIn .23s ease-out}.xp-earned-toast[hidden]{display:none!important}.xp-toast-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:12px;background:rgba(16,185,129,.14);font-size:1.35rem}.xp-toast-copy{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.xp-toast-copy b{font-size:.91rem}.xp-toast-copy span{font-size:.78rem;line-height:1.45;color:var(--text-main)}.xp-toast-copy small{font-size:.7rem;color:var(--text-muted);line-height:1.4}.xp-notifications-setting{margin:10px 0;padding:12px;border:1px solid var(--border-color);border-radius:12px;align-items:flex-start}.xp-notifications-setting input{margin-top:3px}
@media(max-width:600px){.xp-earned-toast{right:12px;bottom:12px}}

/* Lingora Talk translation and correction coach */
.talk-message-tools{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:8px}
.talk-inline-action{border:1px solid var(--border-color);border-radius:999px;background:var(--card-bg);color:var(--text-main);padding:7px 11px;font:inherit;font-size:.72rem;font-weight:750;cursor:pointer}
.talk-inline-action:hover{border-color:var(--accent-color);background:rgba(16,185,129,.09)}
.talk-inline-action:disabled{opacity:.6;cursor:wait}
.talk-inline-hint{font-size:.68rem;color:var(--text-muted)}
.talk-inline-translation{flex:1 0 100%;padding:9px 11px;border:1px solid rgba(16,185,129,.25);border-radius:10px;background:rgba(16,185,129,.08);color:var(--text-main);font-size:.82rem;line-height:1.55;white-space:pre-wrap}
.talk-inline-translation[hidden]{display:none}
.talk-word-token{display:inline;padding:0 1px;border:0;border-radius:3px;background:transparent;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(16,185,129,.5);text-underline-offset:3px}
.talk-word-token:hover{background:rgba(16,185,129,.18);color:var(--accent-color)}
.talk-correction-modal{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,23,.48);backdrop-filter:blur(7px);animation:talkCorrectionFade .18s ease-out}
.talk-correction-modal[hidden]{display:none!important}
.talk-correction-card{position:relative;width:min(560px,100%);max-height:82vh;overflow:auto;padding:25px;border:1px solid rgba(16,185,129,.35);border-radius:23px;background:var(--card-bg);color:var(--text-main);box-shadow:0 25px 90px rgba(0,0,0,.32);animation:talkCorrectionPop .24s ease-out}
.talk-correction-close{position:absolute;right:13px;top:12px;width:34px;height:34px;border:0;border-radius:11px;background:var(--input-bg);color:var(--text-muted);font-size:1.45rem;cursor:pointer}
.talk-correction-badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(16,185,129,.12);color:var(--accent-color);font-size:.63rem;font-weight:850;letter-spacing:1px}
.talk-correction-card h3{margin:13px 40px 10px 0;font-size:1.3rem}
.talk-correction-summary{font-size:.91rem;line-height:1.6;margin-bottom:15px}
.talk-correction-details{padding:13px;border:1px solid var(--border-color);border-radius:13px;background:var(--input-bg);font-size:.84rem;line-height:1.7;white-space:pre-wrap}
.talk-correction-details summary{cursor:pointer;font-weight:800;margin-bottom:8px}
@keyframes talkCorrectionFade{from{opacity:0}to{opacity:1}}
@keyframes talkCorrectionPop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}


/* === Mobile polish: compact navigation and Talk chat === */
@media (max-width: 760px) {
  .global-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row;
    gap: 7px !important;
    padding: 8px !important;
    align-items: stretch;
    overflow: visible;
  }
  .global-nav-btn {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 8px 4px !important;
    border-radius: 13px !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.15 !important;
    font-size: .72rem !important;
    overflow-wrap: anywhere;
  }
  .global-nav-btn .nav-icon {
    flex: 0 0 auto !important;
    width: auto !important;
    font-size: 1.15rem !important;
  }
  .global-nav-btn .nav-label {
    display: block;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .section-talk { gap: 12px; margin-bottom: 18px; }
  .talk-panel { gap: 12px; }
  .talk-hero { padding: 17px 15px !important; border-radius: 19px; }
  .talk-hero-copy { padding-right: 42px !important; }
  .talk-hero-copy p { font-size: .86rem; line-height: 1.5; }
  .talk-messages {
    height: auto !important;
    min-height: 180px !important;
    max-height: 42vh !important;
    flex: 0 1 auto !important;
    padding: 12px !important;
    gap: 9px;
    border-radius: 16px;
  }
  .talk-message { max-width: 100% !important; padding: 10px 12px; }
  .talk-message p { font-size: .9rem; line-height: 1.55; }
  .talk-composer { padding: 13px !important; gap: 10px; }
  .talk-bottom-row { gap: 8px; }
  #talk-check-conversation { max-width: 100%; white-space: normal; text-align: left; line-height: 1.35; }
}
@media (max-width: 380px) {
  .global-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .global-nav-btn { min-height: 56px !important; font-size: .75rem !important; }
  .talk-hero-copy { padding-right: 38px !important; }
  .talk-messages { min-height: 160px !important; max-height: 38vh !important; }
}

/* Home navigation icon: crisp vector on light and dark themes */
.global-nav-btn .nav-icon-home{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.1em;height:2.1em;overflow:visible}
.global-nav-btn .nav-icon-home img{display:block;width:100%;height:100%;max-width:44px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(16,185,129,.22))}
@media(max-width:760px){.global-nav-btn .nav-icon-home{width:38px;height:38px;flex-basis:38px}.global-nav-btn .nav-icon-home img{max-width:38px}}
@media(max-width:380px){.global-nav-btn .nav-icon-home{width:34px;height:34px;flex-basis:34px}.global-nav-btn .nav-icon-home img{max-width:34px}}

/* Illustrated icon family for every Lingora navigation item */
.global-nav-btn .nav-icon-art{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.1em;height:2.1em;overflow:visible}
.global-nav-btn .nav-icon-art img{display:block;width:100%;height:100%;max-width:44px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(16,185,129,.2));transition:transform .2s ease,filter .2s ease}
.global-nav-btn:hover .nav-icon-art img,.global-nav-btn:focus-visible .nav-icon-art img{transform:translateY(-2px) scale(1.04);filter:drop-shadow(0 4px 10px rgba(16,220,185,.32))}
@media(max-width:760px){.global-nav-btn .nav-icon-art{width:38px;height:38px;flex-basis:38px}.global-nav-btn .nav-icon-art img{max-width:38px}}
@media(max-width:380px){.global-nav-btn .nav-icon-art{width:34px;height:34px;flex-basis:34px}.global-nav-btn .nav-icon-art img{max-width:34px}}

/* In-section artwork: same Lingora illustrated icon family as global navigation */
.chain-logo-art{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;transform:none!important}
.chain-logo-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(22,210,197,.24))}
.stories-hero-art{background:transparent!important;box-shadow:none!important;animation:storiesBookFloat 4s ease-in-out infinite}
.stories-hero-art img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(22,210,197,.22))}
.talk-hero-art-image{background:transparent!important;box-shadow:none!important;overflow:visible!important}
.talk-hero-art-image img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(22,210,197,.24))}
.quiz-section-hero{display:flex;align-items:center;gap:16px;padding:18px 20px;margin:0 0 18px;border:1px solid var(--border-color);border-radius:22px;background:linear-gradient(135deg,rgba(16,185,129,.10),rgba(56,189,248,.08)),var(--card-bg);box-shadow:0 10px 26px rgba(3,15,35,.08)}
.quiz-section-hero img{display:block;flex:0 0 auto;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(22,210,197,.2))}
.quiz-section-hero span{font-size:.7rem;font-weight:800;letter-spacing:.16em;color:var(--accent-color)}
.quiz-section-hero h2{margin:3px 0 4px;font-size:clamp(1.25rem,3vw,1.7rem)}
.quiz-section-hero p{margin:0;color:var(--muted-text,var(--text-secondary));line-height:1.45}
@media(max-width:560px){.chain-logo-art{width:48px;height:48px}.stories-hero-art{width:56px!important;height:56px!important}.talk-hero-art-image{width:56px!important;height:56px!important}.quiz-section-hero{gap:11px;padding:14px 13px;border-radius:18px}.quiz-section-hero img{width:52px;height:52px}.quiz-section-hero span{font-size:.61rem}.quiz-section-hero p{font-size:.88rem}}

.globus-section-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.globus-section-title img{display:inline-block;width:48px;height:48px;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 5px 12px rgba(22,210,197,.24))}
@media(max-width:560px){.globus-section-title img{width:40px;height:40px}}

/* Globus section heading: centered and styled like the Lingora brand logo */
.globus-heading .globus-section-title {
  display: block;
  width: 100%;
  margin: 0 auto 7px;
  text-align: center;
  font-family: inherit;
  font-weight: 900;
  letter-spacing: -0.5px;
}

/* Styled file picker for Lingora Smart Import */
#import-file {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 12px 0 14px;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(16,185,129,.07), rgba(56,189,248,.06)), var(--input-bg);
  color: var(--text-muted);
  font: inherit;
  font-size: .88rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#import-file:hover,
#import-file:focus-visible {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
  outline: none;
}
#import-file::file-selector-button {
  margin: 0 12px 0 0;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}
#import-file::file-selector-button:hover { filter: brightness(1.06); }
#import-file::-webkit-file-upload-button {
  margin: 0 12px 0 0;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
@media(max-width:480px) {
  #import-file { padding: 8px; font-size: .8rem; }
  #import-file::file-selector-button,
  #import-file::-webkit-file-upload-button { padding: 8px 10px; margin-right: 8px; }
}


/* Talk: switchable text and push-to-talk experiences */
.talk-view-tabs{display:flex;gap:8px;padding:6px;border:1px solid var(--border-color);border-radius:15px;background:var(--card-bg)}
.talk-view-tab{display:flex;align-items:center;justify-content:center;gap:9px;flex:1;min-height:46px;padding:9px 13px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--text-muted);font:inherit;font-weight:800;cursor:pointer}
.talk-view-tab svg{width:30px;height:30px;flex:0 0 30px}.talk-view-tab.active{background:var(--brand-green-glow);border-color:var(--accent-color);color:var(--text-main)}
#talk-chat-panel[hidden],#talk-voice-panel[hidden]{display:none!important}.talk-workspace.talk-mode-voice #talk-composer-chat{display:none!important}
.talk-voice-panel{display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(16px,4vw,30px);border:1px solid var(--border-color);border-radius:20px;background:var(--card-bg);text-align:center}
.talk-phone-illustration{width:min(180px,52vw);margin:0 auto}.talk-phone-illustration svg{display:block;width:100%;height:auto}
.talk-voice-panel h3{font-size:1.2rem}.talk-voice-description{max-width:430px;color:var(--text-muted);font-size:.88rem;line-height:1.55}
.talk-record-strip .talk-ptt-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:min(240px,70vw);min-height:150px;padding:20px;border:2px solid var(--accent-color);border-radius:28px;background:linear-gradient(145deg,rgba(16,185,129,.2),rgba(56,189,248,.12));color:var(--text-main);font:inherit;font-weight:850;box-shadow:0 12px 30px rgba(16,185,129,.16);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.talk-ptt-button svg{width:48px;height:48px}.talk-ptt-button.is-recording{border-color:#ef4444;background:rgba(239,68,68,.14);box-shadow:0 0 0 7px rgba(239,68,68,.1);transform:scale(.98)}
.talk-ptt-button:disabled{opacity:.55;cursor:not-allowed}.talk-ptt-hint{min-height:1.4em;color:var(--text-muted);font-size:.78rem;line-height:1.45}
.talk-voice-messages{display:flex;flex-direction:column;align-items:stretch;gap:7px;width:100%;max-width:620px;text-align:left}.talk-voice-message{padding:8px 11px;border:1px solid var(--border-color);border-radius:10px;background:var(--input-bg);font-size:.78rem;line-height:1.45;overflow-wrap:anywhere}.talk-voice-message b{display:block;margin-bottom:3px;color:var(--accent-color);font-size:.68rem}
.talk-device-notice{position:fixed;inset:0;z-index:13000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,23,.65);backdrop-filter:blur(9px)}.talk-device-notice[hidden]{display:none!important}
.talk-device-card{position:relative;width:min(570px,100%);padding:clamp(22px,4vw,34px);border:1px solid rgba(16,185,129,.42);border-radius:24px;background:var(--card-bg);color:var(--text-main);box-shadow:0 25px 90px rgba(0,0,0,.38)}
.talk-device-close{position:absolute;top:10px;right:13px;width:36px;height:36px;border:0;border-radius:50%;background:var(--input-bg);color:var(--text-muted);font-size:1.6rem;cursor:pointer}
.talk-device-eyebrow{color:var(--accent-color);font-size:.7rem;font-weight:900;letter-spacing:1.5px}.talk-device-card h3{margin:9px 36px 8px 0;font-size:clamp(1.25rem,4vw,1.7rem)}.talk-device-card>p{margin-bottom:18px;color:var(--text-muted);font-size:.88rem;line-height:1.55}
.talk-device-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.talk-device-option{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:18px 12px;border:1px solid var(--border-color);border-radius:16px;background:var(--input-bg);color:var(--text-main);font:inherit;cursor:pointer}
.talk-device-option:hover,.talk-device-option:focus-visible{border-color:var(--accent-color);background:var(--brand-green-glow)}.talk-device-option svg{width:46px;height:46px;color:var(--accent-color)}.talk-device-option b{font-size:.95rem}.talk-device-option span{color:var(--text-muted);font-size:.75rem;line-height:1.4}
.talk-device-remember{display:flex;align-items:flex-start;gap:9px;margin-top:17px;color:var(--text-muted);font-size:.82rem;line-height:1.45;cursor:pointer}.talk-device-remember input{flex:0 0 auto;width:17px;height:17px;margin-top:1px;accent-color:var(--accent-color)}
@media(max-width:480px){.talk-device-options{grid-template-columns:1fr}.talk-device-option{flex-direction:row;justify-content:flex-start;text-align:left;padding:13px}.talk-device-option svg{width:38px;height:38px;flex:0 0 38px}.talk-device-option span{margin-left:auto;max-width:45%}.talk-ptt-button{width:min(220px,74vw);min-height:136px}}