*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}:root{--parch-1: #f4e8d0;--parch-2: #ede0c0;--parch-3: #e6d5b0;--ink: #3a2817;--brown: #8b5a2b;--brown-dark: #6b4423;--gold: #b8860b;--gold-light: #ffd700;--green: #5a7a3a;--green-dark: #4a6a2a;--red: #8b2b2b}html,body{font-family:Georgia,Times New Roman,serif;background:radial-gradient(circle at 20% 30%,rgba(184,134,11,.15) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(139,90,43,.2) 0%,transparent 50%),linear-gradient(135deg,#1a0f08,#3a2418,#1a0f08);background-attachment:fixed;min-height:100vh;color:var(--ink);-webkit-font-smoothing:antialiased}.app{max-width:920px;margin:0 auto;padding:16px;min-height:100vh}.parchment{background:radial-gradient(circle at 30% 20%,rgba(139,90,43,.08) 0%,transparent 40%),radial-gradient(circle at 70% 80%,rgba(139,90,43,.08) 0%,transparent 40%),linear-gradient(135deg,var(--parch-1) 0%,var(--parch-2) 50%,var(--parch-3) 100%);box-shadow:0 10px 40px #00000080,inset 0 0 60px #8b5a2b26;border:2px solid var(--brown);border-radius:14px;padding:28px;margin-bottom:16px;position:relative}.parchment-light{background:linear-gradient(135deg,#faf3e0 0%,var(--parch-1) 100%);border:2px solid #c9a876;border-radius:12px;padding:20px;margin-bottom:16px}h1{font-size:38px;margin-bottom:8px;text-shadow:1px 1px 2px rgba(139,90,43,.3)}h2{font-size:24px;margin-bottom:12px}h3{font-size:20px;margin-bottom:12px}p{font-size:17px;line-height:1.6;margin-bottom:8px}.gold{color:var(--gold)}.italic{font-style:italic}.center{text-align:center}.bold{font-weight:700}.btn{font-family:Georgia,serif;font-size:18px;font-weight:700;padding:14px 26px;border-radius:12px;border:2px solid #5a3a1c;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;margin:5px;touch-action:manipulation}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg,var(--brown) 0%,var(--brown-dark) 100%);color:var(--parch-1);box-shadow:0 4px 12px #0000004d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #0006}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.btn-success{background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);color:var(--parch-1);border-color:#3a5a1a;box-shadow:0 4px 12px #0000004d}.btn-success:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0006}.btn-danger{background:linear-gradient(135deg,var(--red) 0%,#6b1b1b 100%);color:var(--parch-1);border-color:#5a1a1a}.btn-ghost{background:transparent;color:var(--brown-dark);border:2px solid var(--brown)}.btn-large{font-size:22px;padding:16px 38px}.scroll-icon{font-size:76px;display:inline-block;animation:float 3s ease-in-out infinite;filter:drop-shadow(2px 4px 6px rgba(0,0,0,.3))}@keyframes float{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}.concept-card{background:#fdfaf0;border-left:4px solid var(--gold);padding:18px;border-radius:6px;margin-bottom:16px;box-shadow:0 2px 8px #0000001a}.concept-card ul,.concept-card ol{margin-left:22px;margin-top:8px}.concept-card li{font-size:16px;line-height:1.7;margin-bottom:6px}.header-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:12px}.header-title{display:flex;align-items:center;gap:12px}.header-title h1{font-size:24px;margin:0}.header-title .mini-scroll{font-size:34px}.badges{display:flex;gap:10px;flex-wrap:wrap}.badge{background:#fef3c7;border:2px solid #b45309;padding:8px 16px;border-radius:999px;font-weight:700}.badge-yellow{background:#fef9c3;border-color:#ca8a04}.star{color:var(--gold-light);text-shadow:0 0 8px rgba(255,215,0,.8)}.progress-track{background:#d6c39a;border-radius:999px;height:14px;overflow:hidden;border:1px solid var(--brown);margin-top:8px;box-shadow:inset 0 2px 4px #0003}.progress-fill{background:linear-gradient(90deg,var(--gold) 0%,var(--gold-light) 50%,var(--gold) 100%);height:100%;transition:width .5s ease;box-shadow:0 0 10px #ffd70080}.verse-box{background:repeating-linear-gradient(0deg,transparent 0,transparent 31px,rgba(139,90,43,.13) 32px),#fdfaf0;border:2px dashed var(--brown);border-radius:10px;padding:24px;margin-bottom:16px;position:relative}.verse-label{font-size:13px;color:var(--gold);font-weight:700;margin-bottom:10px;letter-spacing:1px}.verse-text{font-size:21px;line-height:2;font-style:italic}.speak-btn{position:absolute;top:14px;right:14px;background:var(--gold);color:#fff;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:18px;box-shadow:0 2px 6px #0000004d;transition:transform .2s;touch-action:manipulation}.speak-btn:active{transform:scale(.9)}.speak-btn.speaking{background:var(--green);animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.blank-slot{display:inline-block;vertical-align:middle;min-width:130px;min-height:44px;background:#fff3cd;border:2px dashed var(--gold);border-radius:8px;margin:0 6px;padding:6px 12px;font-style:normal;font-weight:700;color:var(--brown-dark);text-align:center;transition:all .2s}.blank-slot.filled{background:#d4edda;border-style:solid;border-color:var(--green);font-style:normal}.blank-slot.over{background:#fff0a0;border-color:var(--brown);transform:scale(1.05);box-shadow:0 0 14px #b8860b80}.blank-slot .placed-word{display:inline-flex;align-items:center;gap:8px}.tap-remove{font-size:13px;color:var(--brown);cursor:pointer}.cards-area{margin-top:6px}.cards-instruction{font-size:14px;color:var(--brown-dark);margin-bottom:12px;font-style:italic}.cards-grid{display:flex;flex-direction:column;gap:12px}.word-card{background:linear-gradient(135deg,#fdfaf0,#faf3e0);border:2px solid #c9a876;border-radius:12px;padding:14px 16px;cursor:grab;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;box-shadow:0 3px 8px #0000001f;-webkit-user-select:none;user-select:none;touch-action:manipulation;position:relative}.word-card:hover{border-color:var(--brown);box-shadow:0 5px 14px #0000002e;transform:translateY(-2px)}.word-card:active{cursor:grabbing}.word-card.selected{background:#fff3cd;border-color:var(--gold);border-width:3px;box-shadow:0 0 20px #b8860b80;transform:translateY(-2px) scale(1.01)}.word-card.dragging{opacity:.5}.word-card.used{opacity:.4;pointer-events:none;filter:grayscale(.5)}.word-card.correct-card{background:#d4edda;border-color:var(--green);border-width:3px;animation:correctPulse .6s ease}.word-card.wrong-card{background:#f8d7da;border-color:#dc3545;border-width:3px;animation:wrongShake .5s ease}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.04);box-shadow:0 0 30px #28a74599}to{transform:scale(1)}}@keyframes wrongShake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.card-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}.card-letter{flex:0 0 auto;width:30px;height:30px;background:var(--gold);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}.card-word{font-size:17px;font-weight:700;color:var(--ink)}.card-evidence{font-size:13.5px;color:var(--brown-dark);font-style:italic;padding-left:40px}.result-box{border-radius:12px;padding:20px;margin-bottom:16px;animation:fadeIn .5s ease}.result-correct{background:#d4edda;border:3px solid #28a745}.result-wrong{background:#fff3cd;border:3px solid #ffc107}.result-title{font-size:22px;font-weight:700;margin-bottom:8px}.result-correct .result-title{color:#155724}.result-wrong .result-title{color:#856404}.result-correct p{color:#155724}.result-wrong p{color:#856404}.button-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}.difficulty-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:20px 0}.diff-card{background:#fdfaf0;border:3px solid #c9a876;border-radius:14px;padding:22px 16px;cursor:pointer;transition:transform .2s,box-shadow .2s;text-align:center}.diff-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0003;border-color:var(--brown)}.diff-card:active{transform:scale(.97)}.diff-card.easy{border-top:6px solid var(--green)}.diff-card.medium{border-top:6px solid var(--gold)}.diff-card.hard{border-top:6px solid var(--red)}.diff-icon{font-size:38px;margin-bottom:8px}.diff-title{font-size:20px;font-weight:700;margin-bottom:4px}.diff-detail{font-size:14px;color:var(--brown-dark)}.character-box{display:flex;gap:14px;align-items:flex-start;background:#fdfaf0;border:2px solid var(--gold);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 4px 12px #00000026}.character-avatar{flex:0 0 auto;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gold) 0%,var(--brown) 100%);display:flex;align-items:center;justify-content:center;font-size:38px;box-shadow:0 3px 8px #00000040;animation:bobble 2.5s ease-in-out infinite}@keyframes bobble{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.character-speech{flex:1;position:relative;background:#fff;border:2px solid #c9a876;border-radius:12px;padding:12px 14px;font-size:16px;line-height:1.5}.character-speech:before{content:"";position:absolute;left:-10px;top:20px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:10px solid #c9a876}.character-name{font-weight:700;color:var(--brown-dark);font-size:14px;margin-bottom:4px}.principle-banner{display:inline-block;background:linear-gradient(135deg,var(--gold) 0%,var(--brown) 100%);color:#fff;padding:6px 18px;border-radius:999px;font-weight:700;font-size:15px;margin-bottom:10px;box-shadow:0 3px 8px #0003}.hint-box{background:#fff9e6;border:2px dashed var(--gold);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:15px}.hint-box .hint-label{font-weight:700;color:var(--gold)}.complete-trophy{font-size:96px;margin-bottom:14px;animation:bounce 1s ease-out}@keyframes bounce{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.final-score-box{background:#fef9c3;border:4px solid #ca8a04;border-radius:16px;padding:22px;margin:22px auto;display:inline-block;box-shadow:0 8px 24px #ca8a0466}.final-score-box p{font-size:26px;font-weight:700}.rank-text{font-size:21px;color:var(--gold);margin-top:8px}.top-controls{position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:100}.icon-btn{background:#8b5a2beb;color:var(--parch-1);border:2px solid #5a3a1c;border-radius:50%;width:46px;height:46px;cursor:pointer;font-size:20px;box-shadow:0 4px 12px #0006;transition:transform .15s;touch-action:manipulation;display:flex;align-items:center;justify-content:center}.icon-btn:active{transform:scale(.9)}@keyframes fadeIn{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease}.drag-overlay{background:linear-gradient(135deg,#fff3cd,#ffe9a0);border:3px solid var(--gold);border-radius:12px;padding:14px 16px;box-shadow:0 12px 30px #00000059;font-weight:700;font-size:17px;color:var(--ink);cursor:grabbing;max-width:320px}.bar-chart{margin:16px 0 6px}.bar-item{margin-bottom:14px}.bar-label{font-size:15px;margin-bottom:4px;color:var(--ink)}.bar-track{background:#e6d5b0;border:1px solid var(--brown);border-radius:8px;height:30px;overflow:hidden;box-shadow:inset 0 2px 4px #00000026}.bar-fill{background:linear-gradient(90deg,#c9a876 0%,var(--gold) 100%);height:100%;border-radius:6px;min-width:4px;transition:width 1s ease;animation:growBar 1.2s ease}.bar-fill.bar-nt{background:linear-gradient(90deg,var(--green) 0%,#6a9a4a 100%);box-shadow:0 0 12px #5a7a3a80}.bar-value{font-size:14px;color:var(--brown-dark);margin-top:3px;font-weight:700}.bar-caption{font-size:13px;font-style:italic;color:var(--brown-dark);margin-top:6px;text-align:center}@keyframes growBar{0%{width:0!important}}@media (max-width: 600px){.app{padding:10px}.parchment{padding:18px}h1{font-size:28px}.header-title h1{font-size:19px}.verse-text{font-size:18px}.difficulty-grid{grid-template-columns:1fr}.card-word{font-size:16px}.blank-slot{min-width:100px;display:inline-flex}}