*{margin:0;padding:0;box-sizing:border-box}body,html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#f5f5f5;color:#333;overflow-x:hidden;overscroll-behavior:none}#root{width:100vw;height:100dvh;touch-action:none}.outer-app-container{padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);height:100dvh;width:100vw;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column}.app{max-width:1200px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}.app.compact{padding:10px;flex:1;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;box-sizing:border-box;min-height:0}.app.compact.choose-word-mode .header,.app.compact.choose-word-mode .topic-input{margin-bottom:15px}.app.compact.solving-mode .compact-sentence-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:5px;flex-shrink:0}.app.compact.solving-mode .compact-sentence-row .sentence-selector{flex:1;margin-bottom:0;align-self:center}.app.compact.solving-mode .compact-sentence-row .new-topic-button{flex-shrink:0;font-size:1.5rem;align-self:center;background:none;border:none;padding:0;margin:0;cursor:pointer;opacity:.8;transition:opacity .2s}.app.compact.solving-mode .compact-sentence-row .new-topic-button:hover{background:none;opacity:1}.app.compact.solving-mode .sentence-container{margin-bottom:5px;min-height:0;display:flex;flex-direction:column;overflow:hidden}.app.compact.solving-mode .sentence-display{padding:10px;min-height:0;overflow-y:auto;font-size:1.3rem;font-weight:700;line-height:1.2}.app.compact.solving-mode .word-search-grid{margin-top:5px;flex:0 0 auto;overflow:hidden}.header{display:flex;flex-wrap:wrap-reverse;justify-content:center;align-items:center;position:relative;margin-bottom:30px;column-gap:40px;row-gap:10px}.header h1{flex:1 1 auto;text-align:center;min-width:0;margin:0}.header .header-controls{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}.header .header-controls .version{font-size:.9rem;color:#666}.header .header-controls .checkbox-label{display:flex;align-items:center;gap:4px;cursor:pointer}.header .header-controls .checkbox-label .emoji-label{font-size:1rem;opacity:.8}.header .header-controls .debug-toggle,.header .header-controls .compact-toggle{cursor:pointer}.header .header-controls .info-button{background:none;border:none;font-size:.9rem;cursor:pointer;padding:2px;opacity:.7;transition:opacity .2s}.header .header-controls .info-button:hover{opacity:1}.header h1{font-size:1.75rem;color:#2c3e50;margin:0}.topic-input{display:flex;justify-content:flex-start;margin-bottom:30px;padding:0 20px}.topic-input form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:100%}.topic-input label{font-weight:600}.topic-input input{padding:8px 12px;border:2px solid #ddd;border-radius:4px;font-size:16px;width:240px;min-width:100px}.topic-input input:focus{outline:none;border-color:#3498db}.topic-input input:disabled{background:#f0f0f0;cursor:not-allowed}@media (max-width: 480px){.topic-input input{width:120px}}.topic-input .language-selector{padding:8px 12px;border:2px solid #ddd;border-radius:4px;font-size:16px;background:#fff;cursor:pointer}.topic-input .language-selector:focus{outline:none;border-color:#3498db}.topic-input .language-selector:disabled{background:#f0f0f0;cursor:not-allowed}.topic-input button{padding:8px 16px;background:#3498db;color:#fff;border:none;border-radius:4px;font-size:16px;cursor:pointer}.topic-input button:hover{background:#2980b9}.topic-input .new-topic-button{background:none;border:none;font-size:1rem;cursor:pointer;padding:2px;opacity:.7;transition:opacity .2s}.topic-input .new-topic-button:hover{background:none;opacity:1}.topic-input .error{color:#e74c3c;margin-top:10px;text-align:center}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:400px;width:90%}.modal-content p{margin-bottom:20px;font-size:16px;line-height:1.5;text-align:center}.modal-content .modal-buttons{display:flex;gap:10px;justify-content:center}.modal-content .modal-buttons button{padding:10px 24px;font-size:16px;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:all .2s}.modal-content .modal-buttons button.modal-yes{background:#3498db;color:#fff}.modal-content .modal-buttons button.modal-yes:hover{background:#2980b9}.modal-content .modal-buttons button.modal-yes:focus{outline:2px solid #3498db;outline-offset:2px}.modal-content .modal-buttons button.modal-no{background:#e0e0e0;color:#333}.modal-content .modal-buttons button.modal-no:hover{background:#d0d0d0}.modal-content .modal-buttons button.modal-no:focus{outline:2px solid #999;outline-offset:2px}.about-modal h2{margin-bottom:20px;text-align:center;color:#2c3e50}.about-modal ul{margin-bottom:20px;padding-left:20px}.about-modal ul li{line-height:1.6;text-align:left}.about-modal .copyright{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:#666}.about-modal .copyright a{color:#4a90e2;text-decoration:none}.about-modal .copyright a:hover{text-decoration:underline}.about-modal .modal-ok{padding:10px 32px;font-size:16px;border:none;border-radius:4px;cursor:pointer;font-weight:500;background:#3498db;color:#fff;transition:all .2s}.about-modal .modal-ok:hover{background:#2980b9}.about-modal .modal-ok:focus{outline:2px solid #3498db;outline-offset:2px}.disambiguation-modal{max-width:600px;max-height:80vh;overflow-y:auto}.disambiguation-modal h3{margin-bottom:15px;text-align:center;color:#2c3e50;font-size:1.3rem}.disambiguation-modal p{margin-bottom:20px;text-align:center;color:#666}.disambiguation-modal .disambiguation-options{max-height:400px;overflow-y:auto;margin-bottom:20px;border:1px solid #ddd;border-radius:4px}.disambiguation-modal .disambiguation-options .disambiguation-option{display:block;width:100%;padding:12px 16px;border:none;background:#fff;color:#333;text-align:left;cursor:pointer;border-bottom:1px solid #eee;font-size:14px;transition:background-color .2s}.disambiguation-modal .disambiguation-options .disambiguation-option:hover{background:#f8f9fa}.disambiguation-modal .disambiguation-options .disambiguation-option:focus{background:#e3f2fd;outline:none}.disambiguation-modal .disambiguation-options .disambiguation-option:last-child{border-bottom:none}.disambiguation-modal .modal-cancel{padding:10px 24px;font-size:16px;border:none;border-radius:4px;cursor:pointer;font-weight:500;background:#e0e0e0;color:#333;transition:all .2s}.disambiguation-modal .modal-cancel:hover{background:#d0d0d0}.disambiguation-modal .modal-cancel:focus{outline:2px solid #999;outline-offset:2px}.error-message{text-align:center;padding:10px 20px;margin:20px auto;max-width:400px;background:#ffebee;color:#c62828;border:1px solid #ef5350;border-radius:4px;font-weight:500;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.topic-and-selectors{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:50px;row-gap:20px;margin-bottom:30px}.topic-and-selectors .topic-input,.topic-and-selectors .sentence-selector-row{flex:0 1 auto;margin-bottom:0}.sentence-selector-row{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:30px}.sentence-selector-row .new-topic-button{flex-shrink:0;font-size:1.5rem;background:none;border:none;padding:0;margin:0 0 0 20px;cursor:pointer;opacity:.8;transition:opacity .2s}.sentence-selector-row .new-topic-button:hover{opacity:1}.sentence-selector{display:flex;justify-content:center;gap:10px}.sentence-selector .square{width:30px;height:30px;border:2px solid #333;cursor:pointer;transition:all .3s ease;background:#f4e04d}.sentence-selector .square:hover{transform:scale(1.1)}.sentence-selector .square.partial{background:#f2a154}.sentence-selector .square.complete{background:#90a955}.sentence-selector .square.current{background:#fcf300;box-shadow:0 0 10px #0000004d}.sentence-selector .square.current.partial{background:#ff6b35}.sentence-selector .square.current.complete{background:#06d6a0}.game-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.sentence-container{margin-bottom:10px;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom;overscroll-behavior-y:contain}.sentence-display{text-align:center;font-size:1.5rem;font-family:Courier New,Monaco,Menlo,monospace;line-height:1.4;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;overflow-y:auto}.sentence-display .word{padding:2px 4px;border-radius:3px;background:transparent}.sentence-display .word.unrevealed{background:#fcc}.sentence-display .word.revealed{background:#cce5ff}.sentence-display .non-word{padding:0;background:transparent}.word-search-grid{display:flex;justify-content:center;margin-top:30px}.word-search-grid svg{background:#fff;border:2px solid #333;border-radius:8px;box-shadow:0 4px 20px #0000001a;cursor:crosshair;-webkit-user-select:none;user-select:none}.word-search-grid .letter{font-family:Courier New,monospace;font-weight:700;fill:#333;pointer-events:none}.word-search-grid .selection{pointer-events:none}.word-search-grid .selection.correct{fill:#90ee90;opacity:.5}.word-search-grid .selection.correct.last{fill:#06d6a0;opacity:.7}.word-search-grid .selection.current{fill:orange;opacity:.5}.word-search-grid .selection.wrong{fill:#ff6b6b;opacity:.5;animation:fadeOut 1s ease-out forwards}@keyframes fadeOut{0%{opacity:.5}to{opacity:0}}.loading{text-align:center;font-size:1.2rem;color:#666;margin-top:50px}.about-page .about-content{max-width:800px;margin:0 auto;background:#fff;padding:30px;border-radius:8px;box-shadow:0 2px 10px #0000001a}.about-page .about-content h2{color:#2c3e50;margin-bottom:20px}.about-page .about-content h3{color:#34495e;margin-top:30px;margin-bottom:15px}.about-page .about-content p{line-height:1.6;margin-bottom:15px}.about-page .about-content ol{margin-left:30px;line-height:1.8}.about-page .about-content a{color:#3498db;text-decoration:none}.about-page .about-content a:hover{text-decoration:underline}