@import"https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap";:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background-color:#1e1e1e;color:#fff;font-family:Uncial Antiqua,serif;background:url(/lotr-trivia-flashcards/background-desktop.jpg) no-repeat center center fixed;background-size:cover}h1{font-size:4em;text-shadow:4px 4px 8px rgba(0,0,0,.7)}p{font-size:1.6em;text-shadow:2px 2px 5px rgba(0,0,0,.5)}.game-over h2{font-size:5em;text-shadow:4px 4px 8px rgba(0,0,0,.7)}.game-over p{font-size:1.8em;text-shadow:2px 2px 5px rgba(0,0,0,.6)}.App{text-align:center}.flashcard-container{display:flex;justify-content:center;align-items:center;margin-top:20px}.button-container{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:20px;flex-wrap:wrap;width:100%}.nav-button{padding:10px 20px;font-size:1em;font-weight:700;border:2px solid #aa8800;border-radius:8px;cursor:pointer;background-color:gold;color:#000;transition:background .3s ease-in-out;width:150px;text-align:center}.nav-button:hover{background-color:#fc0;border-color:#fa0}.progress-indicator{font-size:1.2em;font-weight:700;margin-bottom:10px}.shuffle-button{padding:10px 20px;font-size:2em;font-weight:700;border:2px solid #8b7355;border-radius:8px;cursor:pointer;background:linear-gradient(145deg,#c0a060,#ab8d4d);color:#2c1810;transition:all .3s ease-in-out;text-shadow:1px 1px 2px rgba(255,255,255,.3);font-family:Uncial Antiqua,serif;width:50px;height:50px;display:flex;align-items:center;justify-content:center}.shuffle-button:hover{background:linear-gradient(145deg,#d4b574,#c0a060);transform:translateY(-2px)}@media screen and (max-width: 768px){h1{font-size:2em;max-width:90%}p,.progress-indicator{font-size:1em;max-width:90%}.flashcard{width:90%;height:auto;padding:15px;font-size:1.2em;max-width:90%}.button-container{flex-direction:column;gap:10px}.nav-button{width:100%;font-size:1em;padding:12px}}@media screen and (max-width: 425px){h1{font-size:1.8em;padding:10px;max-width:90%}p,.progress-indicator{font-size:.9em;padding:5px;max-width:90%}.flashcard{width:90%;height:auto;font-size:1.1em;padding:12px;max-width:90%}.button-container{flex-direction:column;align-items:center;gap:8px}.nav-button{width:90%;font-size:.9em;padding:10px}}.game-over{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.game-over button{padding:10px 25px;font-size:1.5em;font-family:Uncial Antiqua,serif;border:2px solid #8b7355;border-radius:8px;cursor:pointer;background:linear-gradient(145deg,#c0a060,#ab8d4d);color:#2c1810;transition:all .3s ease-in-out;text-shadow:1px 1px 3px rgba(0,0,0,.5);font-weight:700;width:200px;height:50px;display:flex;align-items:center;justify-content:center;margin-top:20px}.game-over button:hover{background:linear-gradient(145deg,#d4b574,#c0a060);transform:translateY(-2px)}.game-over h1{display:none}@media screen and (max-width: 375px){h1{font-size:1.6em;padding:8px;max-width:90%}p,.progress-indicator{font-size:.85em;padding:4px;max-width:90%}.flashcard{width:95%;height:auto;font-size:1em;padding:10px;max-width:95%}.button-container{flex-direction:column;align-items:center;gap:6px}.nav-button{width:95%;font-size:.85em;padding:8px}}@media screen and (max-width: 320px){h1{font-size:1.4em;padding:6px;max-width:90%}p,.progress-indicator{font-size:.8em;padding:3px;max-width:90%}.flashcard{width:98%;height:auto;font-size:.95em;padding:8px;max-width:98%}.button-container{flex-direction:column;align-items:center;gap:5px}.nav-button{width:98%;font-size:.8em;padding:6px}}@keyframes fireGlow{0%{text-shadow:2px 2px 8px rgba(120,53,20,.8),3px 3px 12px rgba(89,40,10,.6),4px 4px 18px rgba(56,22,5,.4)}to{text-shadow:3px 3px 10px rgba(150,73,30,1),4px 4px 14px rgba(120,53,20,.9),5px 5px 20px rgba(89,40,10,.8)}}.fire-title{font-size:4em;color:#fff;animation:fireGlow 1.5s infinite alternate}.fire-progress{font-size:1.8em;color:#fff;animation:fireGlow 1.5s infinite alternate}.fire-text,.fire-score{font-size:2.5em;font-family:Uncial Antiqua,serif;color:#fff;text-shadow:2px 2px 8px rgba(120,53,20,.8),3px 3px 12px rgba(89,40,10,.6),4px 4px 18px rgba(56,22,5,.4);animation:emberGlow 2s infinite alternate ease-in-out}@keyframes emberGlow{0%{text-shadow:2px 2px 8px rgba(120,53,20,.8),3px 3px 12px rgba(89,40,10,.6),4px 4px 18px rgba(56,22,5,.4)}to{text-shadow:3px 3px 10px rgba(150,73,30,1),4px 4px 14px rgba(120,53,20,.9),5px 5px 20px rgba(89,40,10,.8)}}.flashcard{width:600px;height:400px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.5em;border:3px solid #c0a060;border-radius:15px;cursor:pointer;background:#f2ead3fa;background-image:url(/lotr-trivia-flashcards/lotr.webp);background-repeat:no-repeat;background-size:cover;background-position:center;color:#2c1810;transition:all .3s ease-in-out;padding:30px;box-sizing:border-box;box-shadow:0 10px 20px #0000004d,0 0 30px #c0a06033;position:relative;overflow:hidden}.card-content{background:#d6c9a3f2;padding:20px;border-radius:12px;box-shadow:0 4px 8px #0003;width:100%}.flashcard:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml;utf8,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><rect width="200" height="200" fill="none" stroke="%23c0a060" stroke-width="1"/><circle cx="100" cy="100" r="80" fill="none" stroke="%23c0a060" stroke-width="0.5"/></svg>') center center;opacity:.1;pointer-events:none}.flashcard p{margin:0 0 15px;font-family:Uncial Antiqua,serif;line-height:1.6;font-size:1.2em;color:#2c1810;text-shadow:2px 2px 4px rgba(0,0,0,.3);font-weight:700}.answer-form{margin-top:20px;display:flex;flex-direction:column;gap:10px;align-items:center}.answer-input{width:80%;padding:12px;font-size:1em;border:2px solid #c0a060;border-radius:8px;background:#fffffff2;font-family:Uncial Antiqua,serif;color:#2c1810;font-weight:700}.answer-input:focus{outline:none;border-color:#8b7355;box-shadow:0 0 5px #c0a06080}.button-group{display:flex;gap:10px;justify-content:center}.submit-button{padding:10px 25px;font-size:1em;font-family:Uncial Antiqua,serif;border:2px solid #8b7355;border-radius:8px;cursor:pointer;background:linear-gradient(145deg,#c0a060,#ab8d4d);color:#2c1810;transition:all .3s ease-in-out;text-shadow:1px 1px 2px rgba(255,255,255,.3);font-weight:700}.nav-button{padding:10px 25px;font-size:1.5em;font-family:Uncial Antiqua,serif;border:2px solid #8b7355;border-radius:8px;cursor:pointer;background:linear-gradient(145deg,#c0a060,#ab8d4d);color:#2c1810;transition:all .3s ease-in-out;text-shadow:1px 1px 2px rgba(255,255,255,.3);font-weight:700;width:200px;height:50px;display:flex;align-items:center;justify-content:center}.nav-button:hover{background:linear-gradient(145deg,#d4b574,#c0a060);transform:translateY(-2px)}.submit-button:hover:not(:disabled){background:linear-gradient(145deg,#d4b574,#c0a060);transform:translateY(-2px)}.submit-button:disabled{opacity:.6;cursor:not-allowed}.feedback{margin-top:15px;padding:10px 20px;border-radius:8px;font-weight:700;animation:fadeIn .3s ease-in-out;font-size:.9em;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.feedback.correct{background:#4caf50f2;color:#fff}.feedback.incorrect{background:#f44336f2;color:#fff}.answered-message{margin-top:20px;padding:10px;background:#0000001a;border-radius:8px;font-size:.9em;color:#666}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media screen and (max-width: 768px){.flashcard{width:90%;font-size:1.2em}.answer-input{width:90%;font-size:.9em}.submit-button{font-size:.9em;padding:8px 20px}.button-group{flex-direction:column}}@media screen and (max-width: 480px){.flashcard{padding:15px}.flashcard p{font-size:1em}.answer-input{width:95%;font-size:.85em}.submit-button{font-size:.85em;padding:8px 16px}.feedback{font-size:.8em}}