/* === BibleLingo Stylesheet === */
:root {
    --green: #58cc02;
    --green-dark: #58a700;
    --blue: #1cb0f6;
    --yellow: #ffc800;
    --red: #ff4b4b;
    --purple: #ce82ff;
    --bg: #ffffff;
    --card-bg: #f7f7f7;
    --text: #3c3c3c;
    --text-light: #777;
    --border: #e5e5e5;
    --radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
    background: var(--bg);
    color: var(--text);
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    padding-bottom: 70px;
}

.container { padding: 16px; }

/* --- Bottom Nav --- */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px;
    display: flex; justify-content: space-around;
    background: #fff; border-top: 1px solid var(--border);
    padding: 10px 0; z-index: 100;
}
.nav-item { font-size: 24px; text-decoration: none; }

/* --- Buttons --- */
.btn {
    display: inline-block; padding: 14px 24px;
    border: none; border-radius: var(--radius);
    font-size: 16px; font-weight: 700;
    text-decoration: none; text-align: center;
    cursor: pointer; transition: transform 0.1s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--green); color: #fff; }
.btn-secondary { background: var(--card-bg); color: var(--text); border: 2px solid var(--border); }
.btn-small { padding: 8px 16px; font-size: 14px; }

/* --- Landing --- */
.landing {
    text-align: center; padding-top: 80px;
}
.landing h1 { font-size: 42px; color: var(--green); margin-bottom: 8px; }
.subtitle { font-size: 20px; color: var(--text-light); margin-bottom: 40px; }
.landing-buttons { margin: 20px 0; }
.tagline { margin-top: 60px; color: var(--text-light); }

/* --- Auth Forms --- */
.auth-form { padding-top: 40px; }
.auth-form h1 { text-align: center; margin-bottom: 24px; }
.auth-form input {
    width: 100%; padding: 16px; margin-bottom: 12px;
    border: 2px solid var(--border); border-radius: var(--radius);
    font-size: 16px;
}
.auth-form input:focus { border-color: var(--blue); }
.avatar-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.avatar-picker label { font-size: 28px; cursor: pointer; }
.avatar-picker input[type="radio"] { width: auto; display: none; }

/* --- Home --- */
.home-header { margin-bottom: 16px; }
.user-stats {
    display: flex; justify-content: space-around;
    background: var(--card-bg); border-radius: var(--radius);
    padding: 12px; margin-bottom: 16px;
}
.stat { font-size: 18px; font-weight: 700; text-align: center; }

.badges-row { margin-bottom: 16px; }
.badge-icon {
    display: inline-block; margin-right: 8px;
    background: var(--yellow); color: #fff;
    padding: 4px 12px; border-radius: 20px; font-size: 14px;
}

.lesson-path { display: flex; flex-direction: column; gap: 8px; }
.lesson-node {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; background: var(--card-bg);
    border-radius: var(--radius); text-decoration: none;
    color: var(--text); border: 2px solid transparent;
}
.lesson-node.completed { border-color: var(--green); }
.lesson-node.perfect { border-color: var(--yellow); background: #fffbe6; }
.lesson-circle { font-size: 24px; }
.lesson-title { font-weight: 700; flex: 1; }
.lesson-meta { font-size: 12px; color: var(--text-light); }

/* --- Lesson --- */
.lesson-container { min-height: 70vh; }
.lesson-progress-bar {
    height: 8px; background: var(--border); border-radius: 4px;
    margin-bottom: 16px; overflow: hidden;
}
.lesson-progress-fill { height: 100%; background: var(--green); transition: width 0.3s; }
.hearts-display { text-align: right; font-size: 20px; margin-bottom: 16px; }
.question-card {
    background: var(--card-bg); border-radius: var(--radius);
    padding: 24px; margin-bottom: 16px;
}
.question-text { font-size: 18px; margin-bottom: 16px; font-weight: 600; }
.passage-text {
    background: #fff; border-left: 4px solid var(--blue);
    padding: 16px; border-radius: 8px; margin-bottom: 16px;
    white-space: pre-wrap; font-size: 16px; line-height: 1.8;
}
.option-btn {
    display: block; width: 100%; padding: 16px; margin-bottom: 8px;
    border: 2px solid var(--border); border-radius: var(--radius);
    background: #fff; font-size: 16px; text-align: left;
    cursor: pointer;
}
.option-btn.correct { border-color: var(--green); background: #e7f9d4; }
.option-btn.wrong { border-color: var(--red); background: #ffe0e0; }
.fill-blank-input {
    width: 100%; padding: 16px; border: 2px solid var(--border);
    border-radius: var(--radius); font-size: 16px; margin-bottom: 12px;
}
.tf-buttons { display: flex; gap: 8px; }
.tf-buttons .option-btn { flex: 1; text-align: center; }

.lesson-result {
    text-align: center; padding: 40px 16px;
}
.result-emoji { font-size: 64px; margin-bottom: 16px; }
.result-stats { display: flex; justify-content: center; gap: 24px; margin: 24px 0; }
.result-stat { text-align: center; }
.result-stat .num { font-size: 32px; font-weight: 700; }
.result-stat .label { font-size: 14px; color: var(--text-light); }

/* --- Leaderboard --- */
.leaderboard { margin-top: 16px; }
.leaderboard-row {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; border-bottom: 1px solid var(--border);
}
.leaderboard-row.you { background: #fffbe6; border-radius: var(--radius); }
.rank { font-size: 20px; font-weight: 700; width: 30px; }
.avatar { font-size: 24px; }
.name { flex: 1; font-weight: 600; }
.xp { font-weight: 700; color: var(--green); }
.streak { font-size: 14px; }

/* --- Gifts --- */
.gift-header { display: flex; justify-content: space-between; align-items: center; }
.gems-balance { font-size: 20px; font-weight: 700; color: var(--blue); }
.received-gifts { margin: 16px 0; }
.gift-received {
    background: #fffbe6; border-radius: var(--radius);
    padding: 16px; margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.gift-shop-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.gift-card {
    background: var(--card-bg); border-radius: var(--radius);
    padding: 16px; text-align: center;
}
.gift-emoji-lg { font-size: 36px; display: block; }
.gift-name { font-weight: 700; display: block; margin: 4px 0; }
.gift-desc { font-size: 12px; color: var(--text-light); display: block; margin-bottom: 8px; }
.gift-cost { font-weight: 700; color: var(--blue); display: block; margin-bottom: 8px; }

/* --- Modal --- */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); display: flex;
    align-items: center; justify-content: center; z-index: 200;
}
.modal.hidden { display: none; }
.modal-content {
    background: #fff; border-radius: var(--radius);
    padding: 24px; width: 90%; max-width: 360px;
}
.modal-content select, .modal-content input {
    width: 100%; padding: 12px; margin-bottom: 12px;
    border: 2px solid var(--border); border-radius: 12px; font-size: 16px;
}
.modal-buttons { display: flex; gap: 8px; }
.modal-buttons .btn { flex: 1; }

/* --- Admin --- */
.user-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.user-table th, .user-table td {
    padding: 8px; border-bottom: 1px solid var(--border); text-align: left;
}

/* --- Flash Messages --- */
.flash-messages { margin-bottom: 16px; }
.flash-msg {
    background: #fff3cd; border-radius: 8px; padding: 12px;
    margin-bottom: 8px; font-size: 14px;
}

/* --- Misc --- */
.hidden { display: none; }
.error-text { color: var(--red); font-size: 14px; margin-bottom: 8px; }

/* --- Daily Limit --- */
.daily-limit-banner {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
}
.daily-limit-banner.reached {
    background: linear-gradient(135deg, #fffbe6, #fff3cd);
    color: var(--green-dark);
    border: 2px solid var(--yellow);
}
.lesson-node.locked {
    opacity: 0.5;
    pointer-events: none;
}
.lesson-node.locked .lesson-circle {
    font-size: 20px;
}

/* === Companion System === */
/* Register picker */
.companion-picker {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0;
}
.companion-option {
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 6px; border: 2px solid var(--border); border-radius: var(--radius);
    cursor: pointer; background: #fff; transition: border-color 0.15s, background 0.15s;
}
.companion-option input[type="radio"] { display: none; }
.companion-option:has(input:checked),
.companion-option.selected { border-color: var(--green); background: #e7f9d4; }
.companion-emoji { font-size: 32px; }
.companion-name { font-size: 14px; font-weight: 700; margin-top: 2px; }
.companion-phrase { font-size: 11px; color: var(--text-light); margin-top: 2px; text-align: center; }

/* Modal picker (home) */
.companion-picker-modal {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 16px 0;
}
.companion-picker-modal .companion-emoji { font-size: 28px; }

/* Home mascot */
.companion-home {
    display: flex; align-items: center; gap: 14px;
    background: var(--card-bg); border-radius: var(--radius);
    padding: 16px; margin-bottom: 8px;
}
.companion-mascot { flex-shrink: 0; }
.companion-emoji-lg {
    font-size: 56px; display: inline-block;
    animation: companion-bounce 2.4s ease-in-out infinite;
}
@keyframes companion-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.speech-bubble {
    position: relative; background: #fff; border: 2px solid var(--border);
    border-radius: 16px; padding: 12px 14px; flex: 1;
}
.speech-bubble::before {
    content: ""; position: absolute; left: -10px; top: 18px;
    border: 8px solid transparent; border-right-color: #fff;
}
.speech-bubble p { font-weight: 700; font-size: 16px; }
.speech-bubble .speech-sub { font-size: 13px; color: var(--text-light); font-weight: 400; margin-top: 2px; }
.companion-change-row { margin-bottom: 16px; }

/* Nav companion */
.nav-companion {
    font-size: 24px; cursor: default; user-select: none;
    animation: companion-bounce 2.4s ease-in-out infinite;
}

/* Lesson companion */
.lesson-companion {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; padding: 8px 10px;
    background: #fff; border-radius: 14px; border: 2px solid var(--border);
    transition: border-color 0.2s, transform 0.2s;
}
.lesson-companion[data-state="happy"] { border-color: var(--green); transform: scale(1.02); }
.lesson-companion[data-state="sad"] { border-color: var(--red); }
.lesson-companion[data-state="celebrate"] { border-color: var(--yellow); animation: companion-bounce 0.6s ease-in-out infinite; }
.lesson-companion-emoji { font-size: 32px; flex-shrink: 0; }
.lesson-companion-bubble {
    background: var(--card-bg); border-radius: 12px; padding: 8px 12px;
    font-size: 14px; font-weight: 600; flex: 1;
}

/* === Answer Animations === */
@keyframes pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(88,204,2,0.7); }
    50% { box-shadow: 0 0 0 10px rgba(88,204,2,0); }
}
@keyframes float-up {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { transform: translateY(-12px) scale(1.3); opacity: 1; }
    100% { transform: translateY(-70px) scale(1); opacity: 0; }
}
@keyframes confetti-fall {
    0% { transform: translateY(-30px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(105vh) rotate(360deg); opacity: 0.5; }
}
@keyframes sparkle-fade {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1.4) rotate(180deg); opacity: 1; }
    100% { transform: scale(0.5) rotate(360deg); opacity: 0; }
}
@keyframes flash-fade {
    0% { opacity: 0.55; }
    100% { opacity: 0; }
}
@keyframes heart-break {
    0% { transform: scale(1); }
    25% { transform: scale(1.35) rotate(-4deg); }
    50% { transform: scale(0.85) rotate(6deg); }
    75% { transform: scale(1.12) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}
@keyframes perfect-badge {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    60% { transform: scale(1.25) rotate(12deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes screen-dim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.animate-pop { animation: pop 0.4s ease-out; }
.animate-shake { animation: shake 0.4s ease-in-out; }
.animate-pulse { animation: pulse-glow 0.8s ease-out 2; }
.animate-heartbreak { animation: heart-break 0.8s ease-out; }

.fx-overlay {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px; height: 100%;
    pointer-events: none; z-index: 150; opacity: 0;
}
.fx-overlay.flash-green { background: rgba(88,204,2,0.3); animation: flash-fade 0.5s ease-out; }
.fx-overlay.flash-red { background: rgba(255,75,75,0.3); animation: flash-fade 0.5s ease-out; }
.fx-overlay.dim { background: rgba(0,0,0,0.35); animation: screen-dim 0.6s ease-out forwards; }

.fx-float {
    position: absolute; font-size: 28px; pointer-events: none;
    animation: float-up 0.8s ease-out forwards; z-index: 160;
}
.fx-confetti {
    position: fixed; top: -30px; font-size: 24px; pointer-events: none;
    animation: confetti-fall linear forwards; z-index: 160;
}
.fx-sparkle {
    position: absolute; font-size: 24px; pointer-events: none;
    animation: sparkle-fade 0.9s ease-out forwards; z-index: 160;
}
.fx-perfect-badge {
    display: inline-block; background: var(--yellow); color: #fff;
    padding: 8px 28px; border-radius: 22px; font-size: 26px; font-weight: 800;
    animation: perfect-badge 0.6s ease-out; margin: 14px 0;
    box-shadow: 0 4px 12px rgba(255,200,0,0.4);
}