.login-page{display:flex;justify-content:center;align-items:center;min-height:100vh}.login-container{background-color:#fdfdf9;padding:40px 50px;border-radius:20px;box-shadow:0 10px 25px #0003;text-align:center;width:320px}.login-container h2{margin-bottom:20px;color:#f57f17}.login-container input{width:100%;padding:12px 15px;margin-bottom:15px;border-radius:10px;font-size:16px;box-sizing:border-box}.login-container input:focus{outline:2px solid #fbc02d}.login-container button{width:100%;padding:12px;background-color:#fbc02d;border:none;border-radius:10px;font-size:18px;font-weight:700;cursor:pointer;transition:background .3s}.login-container button:hover{background-color:#f9a825}.login-container p{margin-top:15px;font-size:14px;color:#6d4c41}.logo{display:flex;flex-direction:column;align-items:center;margin-bottom:30px;width:320px;height:100px;background-image:url(/assets/logo-DSRTY_ws.png);background-size:contain;background-repeat:no-repeat;background-position:center}.error-message{margin-top:15px;color:#d32f2f;font-weight:700;font-size:14px;text-align:center}.games-page{position:relative;background-color:#fff8e1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Arial,sans-serif;padding:20px}.games-list{display:flex;flex-wrap:wrap;gap:25px;justify-content:center;max-width:900px}.game-card{cursor:pointer;background-color:#fff59d;background-size:cover;background-position:center;background-repeat:no-repeat;padding:25px;border-radius:20px;box-shadow:0 5px 15px #0003;width:200px;height:200px;display:flex;align-items:center;justify-content:center;text-align:center;transition:transform .3s,box-shadow .3s;color:#fff;position:relative;overflow:hidden}.game-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #0000004d}.game-card h2{margin-bottom:15px;color:#f57f17}.play-btn{background-color:#fbc02d;border:none;padding:10px 15px;border-radius:10px;cursor:pointer;font-weight:700;transition:background .3s}.play-btn:hover{background-color:#f9a825}.game-card-name{font-size:1.1em;font-weight:700;color:#5d4037;text-align:center;word-break:break-word}.logout-btn{position:absolute;top:20px;right:20px;background-color:#fbc02d;border:none;border-radius:8px;padding:8px 16px;font-weight:700;cursor:pointer;transition:background .3s}.logout-btn:hover{background-color:#f9a825}.teacher-link-btn{position:absolute;top:20px;left:20px;background:none;border:none;font-size:14px;cursor:pointer;color:#f57f17;font-weight:700;padding:0}.teacher-link-btn:hover{text-decoration:underline}.loading-msg,.empty-msg{color:#888;font-size:1.1em;font-style:italic}@media (max-width: 600px){.games-list{gap:15px}.game-card{width:140px;padding:20px}}.scores-section{margin-top:32px;width:100%;max-width:600px}.scores-title{font-size:18px;color:#5d4037;margin-bottom:8px}.scores-table{width:100%;border-collapse:collapse;font-size:14px}.teacher-page{min-height:100vh;background-color:#fff8e1;font-family:Arial,sans-serif;display:flex;flex-direction:column}.teacher-header{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background-color:#fbc02d;box-shadow:0 2px 8px #0000001a}.teacher-title{margin:0;font-size:1.4em;color:#3e2723}.logout-btn{background:#3e2723;color:#fff;border:none;border-radius:8px;padding:8px 18px;font-weight:700;cursor:pointer;font-size:.95em;transition:background .2s}.logout-btn:hover{background:#5d4037}.teacher-body{display:flex;gap:28px;padding:28px 32px;flex-wrap:wrap;align-items:flex-start}.panel{background:#fff;border-radius:16px;padding:24px 28px;box-shadow:0 4px 16px #00000014}.panel h2{margin:0 0 18px;color:#f57f17;font-size:1.1em}.create-panel{min-width:280px;flex:0 0 auto}.students-panel{flex:1;min-width:340px}.create-form{display:flex;flex-direction:column;gap:12px}.create-form input{padding:10px 14px;border:2px solid #fbc02d;border-radius:8px;font-size:1em;outline:none}.create-form input:focus{border-color:#f57f17}.btn-primary{padding:10px 20px;background:#fbc02d;border:none;border-radius:8px;font-size:1em;font-weight:700;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#f9a825}.btn-secondary{padding:7px 14px;background:#fff9c4;border:2px solid #fbc02d;border-radius:8px;font-size:.88em;font-weight:700;cursor:pointer;transition:background .2s}.btn-secondary:hover{background:#fff176}.btn-danger{padding:7px 14px;background:#ffcdd2;border:2px solid #e53935;border-radius:8px;font-size:.88em;font-weight:700;color:#b71c1c;cursor:pointer;transition:background .2s}.btn-danger:hover{background:#ef9a9a}.msg-error{color:#c62828;font-size:.9em;margin-top:10px}.msg-success{color:#2e7d32;font-size:.9em;margin-top:10px}.empty-msg{color:#999;font-style:italic}.student-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.student-item{border:2px solid #ffe082;border-radius:12px;overflow:hidden;background:#fffde7}.student-row{display:flex;align-items:center;gap:12px;padding:12px 16px;flex-wrap:wrap}.student-name{font-weight:700;font-size:1em;color:#3e2723;flex:1;min-width:100px}.student-games-count{font-size:.85em;color:#888;white-space:nowrap}.student-actions{display:flex;gap:8px;flex-wrap:wrap}.game-assign-panel{border-top:2px solid #ffe082;padding:14px 16px;background:#fff}.assign-label{font-size:.9em;color:#666;margin:0 0 10px}.game-checkboxes{display:flex;flex-wrap:wrap;gap:10px}.game-checkbox-label{display:flex;align-items:center;gap:6px;padding:6px 14px;border:2px solid #e0e0e0;border-radius:20px;cursor:pointer;font-size:.9em;background:#fafafa;transition:border-color .2s,background .2s;-webkit-user-select:none;user-select:none}.game-checkbox-label:hover{border-color:#fbc02d;background:#fff9c4}.game-checkbox-label.assigned{border-color:#43a047;background:#c8e6c9}.game-checkbox-label input[type=checkbox]{accent-color:#43a047;width:16px;height:16px}.scores-panel{margin-top:12px;padding:12px 16px;background:#fffde7;border:1px solid #fbc02d;border-radius:8px}.scores-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}.scores-table th,.scores-table td{padding:6px 10px;border:1px solid #e0e0e0;text-align:left}.scores-table th{background:#fbc02d;color:#fff}.all-games-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.all-games-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fffde7;border:1px solid #fbc02d;border-radius:6px;cursor:pointer;transition:background .15s,border-color .15s}.all-games-item:hover{background:#fff9c4;border-color:#f9a825}.all-games-id{font-size:12px;color:#999;min-width:24px}.all-games-name{font-weight:600;color:#3e2723}.word-game-page{min-height:100vh;padding:30px 20px;box-sizing:border-box}.word-game-container{max-width:800px;margin:0 auto}.scrambled-text{background-color:#dcdcdc;padding:20px;border-radius:25px;font-size:30px;margin-top:20px;line-height:1.5}.input-area{margin-top:20px}.word-input{width:100%;font-size:1em;color:#000;background-color:#fff;border:1px solid #ccc;border-radius:8px;padding:10px;box-sizing:border-box;resize:vertical}.try-again{color:red;font-size:20px;margin-top:8px}.btn-row{display:flex;justify-content:flex-end;margin-top:10px}.check-btn{font-size:1em;padding:8px 20px;background-color:#fbc02d;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:background .3s}.syllable-page{min-height:100vh;padding:30px 20px;box-sizing:border-box}.won-message{font-size:48px;color:#ffc501;text-align:center;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.syllable-container{max-width:800px;margin:0 auto}.task-title{font-size:1.8em;font-weight:700;color:#f57f17;margin-bottom:20px;text-align:center}.syllable-textarea{width:100%;font-size:1.4em;padding:15px;border-radius:12px;border:2px solid #fbc02d;box-sizing:border-box;resize:vertical;min-height:120px;font-family:inherit;cursor:pointer;background-color:#fffde7}.syllable-textarea:focus{outline:2px solid #f57f17}.try-again{color:red;font-size:1.2em;margin-top:10px}.answer-reveal{color:#555;font-size:1em;margin-top:10px}.btn-row{display:flex;justify-content:flex-end;margin-top:12px}.check-btn{font-size:1em;padding:10px 24px;background-color:#fbc02d;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:background .3s}.check-btn:hover{background-color:#f9a825}.mirror-page{display:flex;flex-direction:column;height:100vh;overflow:hidden;background-color:#e7ead1;font-family:Arial,sans-serif}.back-btn{position:absolute;top:12px;left:16px;background:none;border:none;font-size:15px;cursor:pointer;color:#f57f17;font-weight:700;z-index:20;padding:0}.mirror-title{text-align:center;margin:10px 0;font-size:1.4em;flex-shrink:0}.mirror-game-area{position:relative;flex:1;width:100%}.mirror-letter{position:absolute;font-size:100px;width:120px;height:120px;line-height:120px;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;color:#000;transition:transform .3s,opacity .3s,color .3s}.mirror-letter.reversed{transform:scaleX(-1)}.mirror-letter.correct{color:green;opacity:.5;pointer-events:none}.mirror-letter.wrong{color:red;opacity:.4;pointer-events:none}.center-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:36px;font-weight:700;color:green;background:#ffffffe6;padding:20px 40px;border-radius:20px;z-index:10;text-align:center;white-space:nowrap}.wb-page{min-height:100vh;padding:30px 20px;box-sizing:border-box;background-color:#fff8e1}.wb-won{font-size:2em;color:#2e7d32;text-align:center;margin-top:30vh}.wb-container{max-width:500px;margin:0 auto;text-align:center}.wb-progress{font-size:.95em;color:#888;margin-bottom:8px}.wb-hint{font-size:1.1em;color:#5d4037;margin-bottom:24px;background:#fff9c4;padding:10px 16px;border-radius:10px}.wb-answer{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:28px}.wb-slot{width:48px;height:56px;border-bottom:3px solid #fbc02d;font-size:1.6em;font-weight:700;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s;border-radius:4px}.wb-slot.filled{background:#fff9c4}.wb-slot.slot-correct{border-color:#43a047;background:#c8e6c9}.wb-slot.slot-wrong{border-color:#e53935;background:#ffcdd2}.wb-tiles{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:24px}.wb-tile{width:52px;height:52px;font-size:1.4em;font-weight:700;border:2px solid #fbc02d;border-radius:10px;background:#fff;cursor:pointer;transition:background .2s,opacity .2s}.wb-tile:hover:not(:disabled){background:#fff9c4}.wb-tile.used{opacity:.2;cursor:default}.wb-actions{display:flex;justify-content:center;gap:16px}.wb-btn-secondary{padding:10px 20px;border:2px solid #fbc02d;background:#fff;border-radius:8px;font-size:1em;cursor:pointer;font-weight:700}.wb-btn-secondary:hover{background:#fff9c4}.wb-btn-primary{padding:10px 24px;background:#fbc02d;border:none;border-radius:8px;font-size:1em;font-weight:700;cursor:pointer;transition:background .2s}.wb-btn-primary:hover:not(:disabled){background:#f9a825}.wb-btn-primary:disabled{opacity:.4;cursor:default}.ml-page{min-height:100vh;padding:30px 20px;box-sizing:border-box;background-color:#fff8e1}.ml-won{font-size:2em;color:#2e7d32;text-align:center;margin-top:30vh}.ml-container{max-width:480px;margin:0 auto;text-align:center}.ml-progress{font-size:.95em;color:#888;margin-bottom:8px}.ml-title{font-size:1.5em;font-weight:700;color:#f57f17;margin-bottom:30px}.ml-word{display:flex;justify-content:center;gap:6px;margin-bottom:36px}.ml-char{font-size:2.4em;font-weight:700;color:#333;width:48px;text-align:center}.ml-blank{font-size:2.4em;font-weight:700;color:#fbc02d;width:48px;text-align:center;border-bottom:4px solid #fbc02d}.ml-options{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.ml-option{width:64px;height:64px;font-size:1.6em;font-weight:700;border:2px solid #fbc02d;border-radius:12px;background:#fff;cursor:pointer;transition:background .2s,border-color .2s}.ml-option:hover{background:#fff9c4}.ml-option.option-correct{background:#c8e6c9;border-color:#43a047}.ml-option.option-wrong{background:#ffcdd2;border-color:#e53935}.rm-page{min-height:100vh;padding:30px 20px;box-sizing:border-box;background-color:#fff8e1}.rm-won{font-size:2em;color:#2e7d32;text-align:center;margin-top:30vh}.rm-container{max-width:560px;margin:0 auto;text-align:center}.rm-progress{font-size:.95em;color:#888;margin-bottom:8px}.rm-title{font-size:1.5em;font-weight:700;color:#f57f17;margin-bottom:30px}.rm-columns{display:flex;justify-content:center;gap:40px}.rm-column{display:flex;flex-direction:column;gap:14px}.rm-tile{min-width:130px;padding:14px 20px;font-size:1.1em;font-weight:700;border:2px solid #fbc02d;border-radius:12px;background:#fff;cursor:pointer;transition:background .2s,border-color .2s,opacity .2s;letter-spacing:1px}.rm-tile:hover{background:#fff9c4}.rm-tile.selected{background:#fff9c4;border-color:#f57f17}.rm-tile.matched{background:#c8e6c9;border-color:#43a047;opacity:.7;cursor:default;pointer-events:none}.rm-tile.wrong{background:#ffcdd2;border-color:#e53935}.ooo-page{min-height:100vh;padding:30px 20px;box-sizing:border-box;background-color:#fff8e1}.back-btn{background:none;border:none;font-size:16px;cursor:pointer;color:#f57f17;font-weight:700;margin-bottom:20px;padding:0}.back-btn:hover{text-decoration:underline}.ooo-won{font-size:2em;color:#2e7d32;text-align:center;margin-top:30vh}.ooo-container{max-width:500px;margin:0 auto;text-align:center}.ooo-progress{font-size:.95em;color:#888;margin-bottom:8px}.ooo-title{font-size:1.5em;font-weight:700;color:#f57f17;margin-bottom:30px}.ooo-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.ooo-option{padding:18px 12px;font-size:1.1em;font-weight:700;border:2px solid #fbc02d;border-radius:14px;background:#fff;cursor:pointer;transition:background .2s,border-color .2s;letter-spacing:1px}.ooo-option:hover{background:#fff9c4}.ooo-option.option-correct{background:#c8e6c9;border-color:#43a047}.ooo-option.option-wrong{background:#ffcdd2;border-color:#e53935}.ooo-explanation{font-size:1em;padding:12px 16px;border-radius:10px;margin-top:8px}.correct-msg{background:#c8e6c9;color:#2e7d32}.wrong-msg{background:#ffcdd2;color:#c62828}.logout-btn{position:absolute;top:20px;right:20px;background-color:#f9a825;color:#fff;padding:10px 20px;border:none;border-radius:10px;font-weight:700;cursor:pointer;transition:background .3s;z-index:10}.logout-btn:hover{background-color:#fbc02d}.logo-center{display:flex;flex-direction:column;align-items:center;margin-bottom:40px}.logo-circle{width:80px;height:80px;background-color:#fbc02d;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;box-shadow:0 5px 15px #0003;margin-bottom:10px}.logo-center h1{font-size:28px;color:#f57f17;margin:0}