:root {
    --green: #2d5016; --green-light: #4a7a2e;
    --brown: #8B6914; --brown-light: #a88428;
    --stone: #9B8B7A; --stone-light: #b8a99a;
    --blue: #2E86AB; --blue-light: #3a9ec7;
    --cream: #FFF8F0; --cream-dark: #f0e8d8;
    --text: #2c2416; --text-light: #5a4e3e;
    --correct: #2d8a3e; --correct-bg: #e8f5e9;
    --wrong: #c0392b; --wrong-bg: #fdecea;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 24px rgba(0,0,0,0.12);
    --radius: 14px; --radius-sm: 8px;
    --transition: 0.25s ease;
    --pre-bg: #EBF5FB; --pre-border: #85C1E9;
    --story-bg: #FFFDF7; --story-border: #D4C5A9;
    --check-bg: #FFFFFF; --check-border: #A3D9A5;
    --summary-bg: #E8F5E9; --summary-border: #66BB6A;
    --mnemonic-bg: #FFF9E6; --mnemonic-border: #F0C040;
}
.dark {
    --cream: #1a1612; --cream-dark: #2a2218;
    --text: #e8dfd2; --text-light: #b0a494;
    --shadow: 0 2px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 24px rgba(0,0,0,0.4);
    --correct-bg: #1a3a20; --wrong-bg: #3a1a18;
    --pre-bg: #1a2028; --pre-border: #3a5a7a;
    --story-bg: #1e1c18; --story-border: #4a4030;
    --check-bg: #1e1e1e; --check-border: #2a5a2c;
    --summary-bg: #1a2a1a; --summary-border: #3a6a3c;
    --mnemonic-bg: #2a2618; --mnemonic-border: #8a7020;
    --stone: #6a5e52; --stone-light: #7a6e62;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--cream); color: var(--text);
    min-height: 100vh; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition), color var(--transition);
}
.container { max-width: 640px; margin: 0 auto; padding: 12px; }

/* Screens */
.screen { display: none; animation: fadeIn 0.3s ease; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }

/* Name screen */
.name-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:85vh; text-align:center; }
.name-screen h1 { font-size:2.2rem; color:var(--green); margin-bottom:6px; }
.name-screen p { color:var(--text-light); margin-bottom:28px; font-size:1.1rem; }
.name-input {
    font-size:1.2rem; padding:12px 18px; border:2px solid var(--stone-light);
    border-radius:var(--radius); background:var(--cream); color:var(--text);
    width:100%; max-width:300px; text-align:center; outline:none;
}
.name-input:focus { border-color:var(--green); }
#existingUsers { width:100%; max-width:300px; }
.user-select-btn:hover { border-color:var(--green) !important; background:var(--correct-bg) !important; }

/* Buttons */
.btn {
    padding:12px 32px; font-size:1rem; font-weight:600; border:none;
    border-radius:var(--radius); cursor:pointer; transition: all var(--transition);
}
.btn-primary { background:var(--green); color:white; }
.btn-primary:hover { background:var(--green-light); }
.btn-primary:disabled { opacity:0.5; cursor:default; }
.btn-outline { background:transparent; border:2px solid var(--stone-light); color:var(--text); }
.btn-outline:hover { border-color:var(--green); color:var(--green); }
.btn-outline:disabled { opacity:0.4; cursor:default; }
.btn-outline:disabled:hover { border-color:var(--stone-light); color:var(--text); }
.icon-btn {
    width:36px; height:36px; border:none; border-radius:50%;
    background:var(--cream-dark); cursor:pointer; font-size:1.1rem;
    display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover { background:var(--stone-light); }

/* Home screen */
.home-header { display:flex; align-items:center; justify-content:space-between; padding:10px 0 16px; }
.app-title { font-size:1.4rem; font-weight:800; color:var(--green); }
.header-right { display:flex; align-items:center; gap:8px; }
.user-badge { font-size:0.82rem; color:var(--text-light); background:var(--cream-dark); padding:4px 12px; border-radius:20px; }

/* Group cards on home */
.group-card {
    background:white; border-radius:var(--radius); padding:16px 18px;
    box-shadow:var(--shadow); margin-bottom:10px; cursor:pointer;
    transition: all var(--transition); border-left:4px solid var(--stone-light);
    display:flex; align-items:center; gap:14px;
}
.dark .group-card { background:#2a2218; }
.group-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-1px); }
.group-card.completed { border-left-color:var(--correct); }
.group-card .group-info { flex:1; }
.group-card h3 { font-size:1rem; color:var(--green); margin-bottom:2px; }
.group-card .subtitle { font-size:0.82rem; color:var(--text-light); }
.group-card .group-progress { font-size:0.78rem; color:var(--text-light); margin-top:4px; }
.group-card .group-icon { font-size:1.6rem; }

.action-row { display:flex; gap:10px; margin-top:16px; }
.action-row .btn { flex:1; text-align:center; }

/* Card view header */
.card-header { display:flex; align-items:center; gap:10px; padding:8px 0; }
.card-group-label { font-size:0.92rem; font-weight:600; color:var(--green); flex:1; }
.card-counter { font-size:0.82rem; color:var(--text-light); }
.progress-bar { height:3px; background:var(--cream-dark); border-radius:2px; margin-bottom:16px; overflow:hidden; }
.progress-fill { height:100%; background:var(--green); border-radius:2px; transition:width 0.4s ease; width:0%; }

/* Card types */
.card {
    border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
    margin-bottom:12px; animation:slideIn 0.3s ease;
    border:2px solid transparent;
}
.card-pre { background:var(--pre-bg); border-color:var(--pre-border); }
.card-story { background:var(--story-bg); border-color:var(--story-border); }
.card-check { background:var(--check-bg); border-color:var(--check-border); }
.card-summary { background:var(--summary-bg); border-color:var(--summary-border); }

.card-type-label { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.card-pre .card-type-label { color:var(--blue); }
.card-check .card-type-label { color:var(--correct); }
.card-summary .card-type-label { color:var(--green); }

.card h2 { font-size:1.15rem; color:var(--text); margin-bottom:12px; line-height:1.4; }
.card p { margin-bottom:10px; font-size:0.98rem; }
.card strong { color:var(--green); }

.pre-reassurance { font-size:0.82rem; color:var(--text-light); font-style:italic; margin:10px 0; }

/* Mnemonic box */
.mnemonic {
    background:var(--mnemonic-bg); border-left:4px solid var(--mnemonic-border);
    border-radius:var(--radius-sm); padding:12px 14px; margin:14px 0 8px;
    font-style:italic; font-size:0.92rem;
}
.mnemonic-label { font-weight:700; font-style:normal; margin-bottom:4px; display:block; font-size:0.85rem; }

/* Expandable terms */
.term { color:var(--blue); cursor:pointer; border-bottom:1px dashed var(--blue); font-weight:500; }
.term-box {
    display:none; background:var(--cream-dark); border-radius:var(--radius-sm);
    padding:10px 14px; margin:6px 0 10px; font-size:0.88rem;
    color:var(--text-light); line-height:1.5; border-left:3px solid var(--blue);
}
.term-box.open { display:block; }

/* Answer buttons */
.answers { display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.answer-btn {
    display:flex; align-items:center; gap:10px; padding:12px 14px;
    border:2px solid var(--stone-light); border-radius:var(--radius-sm);
    background:white; cursor:pointer; font-size:0.95rem; text-align:left;
    transition:all 0.15s;
}
.dark .answer-btn { background:var(--cream-dark); }
.answer-btn:hover { border-color:var(--blue); background:var(--pre-bg); }
.answer-btn .letter {
    width:28px; height:28px; border-radius:50%; background:var(--cream-dark);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:0.85rem; flex-shrink:0;
}
.answer-btn.answered { cursor:default; pointer-events:none; }
.answer-btn.correct { border-color:var(--correct); background:var(--correct-bg); }
.answer-btn.correct .letter { background:var(--correct); color:white; }
.answer-btn.wrong { border-color:var(--wrong); background:var(--wrong-bg); }
.answer-btn.wrong .letter { background:var(--wrong); color:white; }
.answer-btn.dimmed { opacity:0.4; }

/* Feedback */
.feedback { border-radius:var(--radius-sm); padding:12px 14px; margin:10px 0; display:none; }
.feedback.show { display:block; }
.feedback.correct-fb { background:var(--correct-bg); color:var(--correct); }
.feedback.wrong-fb { background:var(--wrong-bg); color:var(--wrong); }
.feedback .fb-title { font-weight:700; margin-bottom:4px; }
.feedback .fb-context { font-size:0.88rem; color:var(--text-light); margin-top:6px; }

/* Help buttons */
.help-row { display:flex; gap:8px; margin:10px 0; }
.help-btn {
    padding:8px 14px; font-size:0.85rem; border:1px solid var(--stone-light);
    border-radius:20px; background:transparent; cursor:pointer; color:var(--text-light);
}
.help-btn:hover { border-color:var(--blue); color:var(--blue); }
.hint-box {
    display:none; background:var(--mnemonic-bg); border-left:3px solid var(--mnemonic-border);
    border-radius:var(--radius-sm); padding:10px 14px; margin:8px 0;
    font-style:italic; font-size:0.9rem; color:var(--text-light);
}
.hint-box.show { display:block; }

/* Flip: text view replaces question */
.text-view {
    display:none; background:var(--story-bg); border:2px solid var(--story-border);
    border-radius:var(--radius); padding:20px; animation:fadeIn 0.2s ease;
}
.text-view.show { display:block; }
.quiz-view.hidden { display:none; }

/* Next button */
.next-btn {
    display:none; width:100%; padding:14px; font-size:1rem; font-weight:600;
    border:none; border-radius:var(--radius); background:var(--green);
    color:white; cursor:pointer; margin-top:10px;
}
.next-btn.show { display:block; }
.next-btn:hover { background:var(--green-light); }

/* Summary recap */
.recap-list { list-style:none; padding:0; }
.recap-list li { padding:6px 0; font-size:0.92rem; border-bottom:1px solid var(--cream-dark); }
.recap-list li:last-child { border:none; }
.recap-list li::before { content:"• "; color:var(--green); font-weight:700; }

.fun-fact {
    background:var(--mnemonic-bg); border-left:4px solid var(--mnemonic-border);
    border-radius:var(--radius-sm); padding:12px 14px; margin:14px 0;
    font-size:0.9rem;
}
.fun-fact-label { font-weight:700; display:block; margin-bottom:4px; }

/* Stats */
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.stat-card {
    background:white; border-radius:var(--radius); padding:16px;
    box-shadow:var(--shadow); text-align:center;
}
.dark .stat-card { background:#2a2218; }
.stat-card .stat-num { font-size:1.8rem; font-weight:800; color:var(--green); }
.stat-card .stat-label { font-size:0.8rem; color:var(--text-light); }

/* Mobile */
@media (max-width: 480px) {
    .container { padding: 8px; }
    .card { padding: 18px; }
    .card h2 { font-size: 1.05rem; }
}