*,::after,::before{box-sizing:border-box}body,html{height:100%;margin:0;font-family:Inter,sans-serif;line-height:1.5;background-color:#f3f4f6;color:#1f2937}body{display:flex;flex-direction:column}main{flex:1 0 auto;padding-top:5.5rem;padding-bottom:5rem;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}header{position:fixed;top:0;left:0;width:100%;z-index:50;height:4.5rem;background-color:#2563eb;color:#fff;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);padding:1rem;display:flex;align-items:center;justify-content:space-between}header h1{font-size:1.5rem;line-height:2rem;font-weight:700;white-space:nowrap;transition:font-size .2s ease-in-out}header a.return-link{background-color:#1d4ed8;color:#fff;font-weight:600;padding:.5rem 1rem;border-radius:.5rem;display:inline-flex;align-items:center;text-decoration:none;transition:background-color 150ms ease-in-out,padding .2s ease-in-out,font-size .2s ease-in-out;white-space:nowrap}header a.return-link:hover{background-color:#1e40af}header a.return-link svg{width:20px;height:20px;margin-right:.5rem;flex-shrink:0;transition:width .2s ease-in-out,height .2s ease-in-out}.intro-container{display:flex;flex-direction:row;align-items:center;gap:1.5rem;margin-bottom:2rem;margin-left:auto;margin-right:auto;max-width:60rem}.description{text-align:left;color:#4b5563;font-size:1.125rem;line-height:1.75rem;margin-bottom:0;flex-grow:1;flex-shrink:1;min-width:0}#main-image{max-width:150px;height:auto;border-radius:.5rem;transition:max-width .2s ease-in-out;flex-shrink:0}section{margin-bottom:2rem}section h2{font-size:1.25rem;line-height:1.75rem;font-weight:600;margin-bottom:1rem}#category-selection,#difficulty-selection,#round-settings,#user-word-management{text-align:center}#category-selection .button-container,#difficulty-selection .button-container,#user-word-management .button-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.category-btn,.difficulty-btn{color:#fff;font-weight:700;padding:.75rem 1.5rem;border-radius:.5rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);transition:background-color 150ms ease-in-out;border:none;cursor:pointer}.category-btn{padding:.5rem 1rem}button[data-difficulty=kindergarten]{background-color:#22c55e}button[data-difficulty=kindergarten]:hover{background-color:#16a34a}button[data-difficulty=grades1-2]{background-color:#eab308}button[data-difficulty=grades1-2]:hover{background-color:#ca8a04}button[data-difficulty=grades3-6]{background-color:#ef4444}button[data-difficulty=grades3-6]:hover{background-color:#dc2626}button[data-difficulty=user]{background-color:#a855f7}button[data-difficulty=user]:hover{background-color:#9333ea}#random-all-btn{background-color:#6b7280}#random-all-btn:hover{background-color:#4b5563}.category-btn[data-category]{background-color:#3b82f6}.category-btn[data-category]:hover{background-color:#2563eb}#start-user-round-btn{background-color:#6366f1;color:#fff;font-weight:700;padding:.5rem 1rem;border-radius:.5rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);transition:background-color 150ms ease-in-out;margin-top:1rem;border:none;cursor:pointer}#start-user-round-btn:hover{background-color:#4f46e5}#round-settings{background-color:#fff;padding:1.5rem;border-radius:.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);max-width:36rem;margin-left:auto;margin-right:auto;margin-top:1rem}.settings-option{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.settings-option label{font-weight:500;color:#374151;cursor:pointer;margin-right:.25rem}.settings-option input[type=checkbox]{width:1rem;height:1rem;border-radius:.25rem;border:1px solid #9ca3af;cursor:pointer;accent-color:#3b82f6}.settings-option input[type=checkbox]:focus{outline:0;box-shadow:0 0 0 2px rgba(59,130,246,.5)}.settings-option input[type=number]{width:4rem;padding:.3rem .5rem;border:1px solid #d1d5db;border-radius:.375rem;text-align:center}.settings-option input[type=number]:focus{outline:0;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.5)}#settings-continue-btn{background-color:#16a34a;color:#fff;font-weight:700;padding:.5rem 1.5rem;border-radius:.5rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);transition:background-color 150ms ease-in-out;border:none;cursor:pointer;margin-top:1rem}#settings-continue-btn:hover{background-color:#15803d}#spelling-area{background-color:#fff;padding:1rem;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);max-width:42rem;margin-left:auto;margin-right:auto;text-align:center}#round-description{font-size:.875rem;color:#6b7280;margin-bottom:.5rem;font-style:italic;min-height:1.25rem}#question-counter{font-size:.875rem;color:#4b5563;margin-bottom:.75rem;font-weight:500}#word-prompt{margin-bottom:1rem}#word-prompt p{color:#4b5563;margin-bottom:.5rem}.prompt-buttons{display:flex;justify-content:center;gap:1rem;margin-top:.5rem;flex-wrap:wrap}#repeat-word-btn{background-color:#3b82f6;color:#fff;font-weight:700;padding:.5rem 1rem;border-radius:.5rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);display:inline-flex;align-items:center;border:none;cursor:pointer;transition:background-color 150ms ease-in-out}#repeat-word-btn:hover{background-color:#2563eb}#repeat-word-btn svg{width:20px;height:20px;margin-right:.5rem}#repeat-word-btn:disabled{opacity:.5;cursor:not-allowed}#spelling-input{width:100%;padding:.75rem;border:1px solid #d1d5db;border-radius:.5rem;margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;text-align:center;transition:border-color 150ms ease-in-out,box-shadow 150ms ease-in-out}#spelling-input:focus{outline:0;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.2)}#spelling-input::placeholder{color:#9ca3af}#spelling-input:read-only{background-color:#f9fafb;cursor:default}#spelling-input:disabled{background-color:#e5e7eb;cursor:not-allowed}#word-length-display{margin-bottom:1rem;font-size:1.5rem;line-height:2rem;color:#6b7280;letter-spacing:.2em;font-family:monospace;min-height:2rem;word-break:break-all}#on-screen-keyboard{margin-top:1rem;padding-top:1rem;border-top:1px solid #e5e7eb}#on-screen-keyboard>div{display:flex;justify-content:center;flex-wrap:nowrap;gap:.25rem;margin-bottom:.5rem;overflow-x:auto;padding-bottom:5px}#keyboard-backspace,.keyboard-key{background-color:#e5e7eb;color:#1f2937;font-weight:600;padding:.6rem .8rem;border-radius:.25rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);font-size:1rem;line-height:1;border:none;cursor:pointer;transition:background-color 150ms ease-in-out;flex-shrink:0;min-width:32px;text-align:center}.keyboard-key:hover{background-color:#d1d5db}#keyboard-backspace{background-color:#fb923c;color:#fff;padding-left:.7rem;padding-right:.7rem}#keyboard-backspace:hover{background-color:#f97316}#submit-spelling-btn{width:100%;background-color:#4f46e5;color:#fff;font-weight:700;padding:.75rem 1.5rem;border-radius:.5rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);transition:background-color 150ms ease-in-out;margin-top:1rem;border:none;cursor:pointer}#submit-spelling-btn:hover{background-color:#4338ca}#submit-spelling-btn:disabled{opacity:.5;cursor:not-allowed}#feedback{margin-top:1rem;font-weight:600;min-height:1.5em}#feedback.correct{color:#16a34a}#feedback.incorrect{color:#dc2626}#feedback.complete{color:#2563eb}#score-display{margin-top:.5rem;font-weight:700;font-size:1.125rem;color:#1e40af}#score-display .excellent{color:#ca8a04;display:block;margin-top:.25rem;font-size:1.25rem}.round-controls{margin-top:1.5rem;display:flex;justify-content:center;flex-wrap:wrap;gap:1rem}.round-controls button{color:#fff;font-weight:700;padding:.5rem 1rem;border-radius:.5rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);transition:background-color 150ms ease-in-out,opacity 150ms ease-in-out;border:none;cursor:pointer}#repeat-round-btn{background-color:#f97316}#repeat-round-btn:hover{background-color:#ea580c}#new-round-btn{background-color:#14b8a6}#new-round-btn:hover{background-color:#0d9488}#quit-quiz-btn{background-color:#dc2626}#quit-quiz-btn:hover{background-color:#b91c1c}.round-controls button:disabled{opacity:.5;cursor:not-allowed;background-color:#9ca3af!important}#user-word-management{background-color:#fff;padding:1.5rem;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);max-width:36rem;margin-left:auto;margin-right:auto;margin-top:2rem}#user-feedback{font-weight:600;min-height:1.5em;margin-bottom:.75rem}#user-feedback.info-add{color:#16a34a}#user-feedback.info-exists{color:#ca8a04}#user-feedback.info-invalid{color:#dc2626}#user-feedback.info-clear{color:#f97316}#user-feedback.info-remove{color:#f97316}#user-word-management>div:nth-of-type(2){margin-bottom:1rem}#add-word-input{width:100%;padding:.75rem;border:1px solid #d1d5db;border-radius:.5rem;margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;transition:border-color 150ms ease-in-out,box-shadow 150ms ease-in-out}#add-word-input:focus{outline:0;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.2)}#add-word-btn{width:100%;background-color:#22c55e;color:#fff;font-weight:700;padding:.5rem 1rem;border-radius:.5rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);transition:background-color 150ms ease-in-out;margin-bottom:1rem;border:none;cursor:pointer}#add-word-btn:hover{background-color:#16a34a}#user-word-list{text-align:left;margin-bottom:1rem;max-height:12rem;overflow-y:auto;border:1px solid #e5e7eb;padding:.5rem;border-radius:.25rem;background-color:#f9fafb}#user-word-list p{color:#6b7280;font-style:italic}#user-word-list ul{list-style:disc;padding-left:1.5rem;margin:0}#user-word-list li{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem;color:#374151}.delete-word-btn{margin-left:.5rem;font-size:.75rem;line-height:1rem;color:#ef4444;font-weight:700;padding:0 .25rem;border-radius:.25rem;border:none;background-color:transparent;cursor:pointer;transition:color 150ms ease-in-out,background-color 150ms ease-in-out}.delete-word-btn:hover{color:#dc2626;background-color:#fee2e2}.delete-word-btn:focus{outline:0;box-shadow:0 0 0 1px #fecaca}#user-word-management .button-container{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem}#user-word-management .button-container button{color:#fff;font-weight:700;padding:.5rem 1rem;border-radius:.5rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);transition:background-color 150ms ease-in-out;border:none;cursor:pointer}#save-user-words-btn{background-color:#3b82f6}#save-user-words-btn:hover{background-color:#2563eb}#clear-user-words-btn{background-color:#ef4444}#clear-user-words-btn:hover{background-color:#dc2626}#exit-user-words-btn{background-color:#6b7280;color:#fff;font-weight:700;padding:.5rem 1rem;border-radius:.5rem;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);transition:background-color 150ms ease-in-out;border:none;cursor:pointer;margin-top:1rem;display:block;margin-left:auto;margin-right:auto}#exit-user-words-btn:hover{background-color:#4b5563}#user-word-management .storage-note{font-size:.75rem;line-height:1rem;color:#6b7280;margin-top:.5rem}footer{position:fixed;bottom:0;left:0;width:100%;z-index:50;height:3.5rem;flex-shrink:0;background-color:#1f2937;color:#d1d5db;padding:1rem;text-align:center;font-size:.875rem;line-height:1.25rem}footer a,footer button#disclaimer-link{color:inherit;text-decoration:underline;transition:color 150ms ease-in-out;background:0 0;border:none;padding:0;font-size:inherit;cursor:pointer}footer a:hover,footer button#disclaimer-link:hover{color:#fff}.modal{display:none;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.5);align-items:center;justify-content:center;padding:1rem}.modal-content{background-color:#fefefe;margin:auto;padding:20px;border:1px solid #888;width:90%;max-width:500px;border-radius:.5rem;box-shadow:0 4px 6px rgba(0,0,0,.1);position:relative}.modal-content h2{font-size:1.25rem;font-weight:600;margin-bottom:1rem}.modal-content p{margin-bottom:.5rem}.modal-close{color:#aaa;position:absolute;top:10px;right:15px;font-size:28px;font-weight:700;cursor:pointer;line-height:1}.modal-close:focus,.modal-close:hover{color:#000;text-decoration:none}.confirm-dialog h2{color:#dc2626}#clue-confirm-modal .confirm-dialog h2{color:#2563eb}.confirm-dialog p{margin-bottom:1.5rem}.confirm-buttons{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.75rem}.confirm-buttons button{font-weight:600;padding:.5rem 1rem;border-radius:.375rem;border:1px solid transparent;cursor:pointer;transition:background-color 150ms ease-in-out,border-color 150ms ease-in-out}#quit-confirm-yes-btn{background-color:#ef4444;color:#fff;border-color:#ef4444}#quit-confirm-yes-btn:hover{background-color:#dc2626;border-color:#dc2626}#quit-confirm-no-btn{background-color:#fff;color:#374151;border-color:#d1d5db}#quit-confirm-no-btn:hover{background-color:#f9fafb}#clue-confirm-yes-btn{background-color:#22c55e;color:#fff;border-color:#22c55e}#clue-confirm-yes-btn:hover{background-color:#16a34a;border-color:#16a34a}#clue-confirm-no-btn{background-color:#fff;color:#374151;border-color:#d1d5db}#clue-confirm-no-btn:hover{background-color:#f9fafb}.hidden{display:none!important}@media (max-width:640px){header{height:auto;padding:.75rem}header h1{font-size:1.25rem;line-height:1.75rem}header a.return-link{padding:.4rem .8rem;font-size:.875rem}header a.return-link svg{width:18px;height:18px;margin-right:.4rem}.intro-container{gap:1rem;align-items:flex-start}#main-image{max-width:100px}.description{text-align:left;font-size:1rem}}@media (max-width:480px){#keyboard-backspace,.keyboard-key{min-width:30px;padding:.5rem .7rem;font-size:.9rem}#on-screen-keyboard>div{gap:.2rem}#main-image{max-width:80px}.intro-container{gap:.75rem}.description{font-size:.9rem}}@media (max-width:380px){#on-screen-keyboard>div{gap:.15rem}#keyboard-backspace,.keyboard-key{min-width:28px;padding:.5rem .6rem;font-size:.9rem}header h1{font-size:1.1rem}header a.return-link{padding:.3rem .6rem;font-size:.8rem}header a.return-link svg{width:16px;height:16px}#main-image{max-width:60px}.intro-container{gap:.5rem}}