.dictation-game{max-width:1400px;margin:0 auto;padding:1rem}.game-header{text-align:center;margin-bottom:1.5rem}.game-header h1{color:#2d3748;margin-bottom:.25rem;font-size:2rem}.subtitle{color:#718096;font-size:1rem}.game-layout{grid-template-columns:280px 1fr;align-items:start;gap:2rem;display:grid}.level-selector{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 2px 8px #00000014}.level-selector h3{color:#2d3748;margin-bottom:1rem;font-size:1.1rem}.levels-grid{flex-direction:column;gap:.75rem;display:flex}.level-card{cursor:pointer;text-align:left;background:#fff;border:2px solid #e2e8f0;border-radius:12px;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;transition:all .2s;display:flex}.level-card:hover{background:#ebf8ff;border-color:#4299e1;transform:translate(4px)}.level-card.active{background:#ebf8ff;border-color:#4299e1;box-shadow:0 2px 4px #4299e133}.level-emoji{font-size:1.5rem}.level-name{color:#4a5568;font-size:.95rem;font-weight:600}.game-area{flex-direction:column;gap:1.5rem;display:flex}.current-command{margin-bottom:0}.command-display{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;justify-content:center;align-items:center;gap:1rem;padding:1rem 1.5rem;font-size:1.25rem;font-weight:700;display:flex}.command-display.completed{background:linear-gradient(135deg,#48bb78 0%,#38a169 100%)}.command-arrow{font-size:2rem}.command-progress{opacity:.8;font-size:.9rem}.game-board{justify-content:center;display:flex}.grid{aspect-ratio:1;background:#cbd5e0;border-radius:8px;gap:2px;width:100%;max-width:500px;padding:2px;display:grid}.cell{aspect-ratio:1;background:#fff;justify-content:center;align-items:center;transition:background .2s;display:flex}.cell.drawn{background:#4299e1}.cell.current{background:#f6e05e}.cell.drawn.current{background:#48bb78}.cursor{color:#2d3748;font-size:1.5rem}.controls{background:#fff;border-radius:16px;justify-content:center;align-items:center;gap:2rem;padding:1rem;display:flex;box-shadow:0 2px 8px #00000014}.direction-pad{grid-template-rows:repeat(3,60px);grid-template-columns:repeat(3,60px);gap:.5rem;display:grid}.dir-button{cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:12px;justify-content:center;align-items:center;width:60px;height:60px;font-size:1.5rem;transition:all .2s;display:flex}.dir-button:hover:not(:disabled){background:#ebf8ff;border-color:#4299e1;transform:scale(1.05)}.dir-button:disabled{opacity:.5;cursor:not-allowed}.dir-button.up{grid-area:1/2}.dir-button.left{grid-area:2/1}.dir-button.center{background:#f7fafc;grid-area:2/2;font-size:1.25rem}.dir-button.right{grid-area:2/3}.dir-button.down{grid-area:3/2}.action-buttons{flex-direction:column;gap:.75rem;display:flex}.action-button{cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .2s}.action-button.auto{color:#fff;background:#48bb78}.action-button.auto:hover:not(:disabled){background:#38a169}.action-button.stop{color:#fff;background:#f56565}.action-button.stop:hover{background:#c53030}.action-button:disabled{opacity:.5;cursor:not-allowed}.instructions{background:#f7fafc;border-radius:12px;margin-top:2rem;padding:1.5rem}.instructions h3{color:#2d3748;margin-bottom:1rem}.instructions ol{margin-bottom:1rem;margin-left:1.5rem}.instructions li{color:#4a5568;margin-bottom:.5rem}.tip{color:#2c5282;background:#ebf8ff;border-left:4px solid #4299e1;border-radius:8px;padding:1rem}.error-message{color:#742a2a;text-align:center;background:#fed7d7;border:2px solid #f56565;border-radius:12px;margin-bottom:1rem;padding:1rem;font-weight:600;animation:.5s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@media (width<=1024px){.game-layout{grid-template-columns:1fr;gap:1.5rem}.level-selector{order:2}.game-area{order:1}.levels-grid{flex-flow:wrap}.level-card{flex:1;width:auto;min-width:140px}}@media (width<=768px){.game-header h1{font-size:1.5rem}.command-display{padding:.75rem 1rem;font-size:1rem}.command-arrow{font-size:1.5rem}.grid{max-width:100%}.direction-pad{grid-template-rows:repeat(3,50px);grid-template-columns:repeat(3,50px)}.dir-button{width:50px;height:50px;font-size:1.25rem}.controls{flex-direction:column;gap:1rem}.action-button{width:100%}}@media (width<=480px){.dictation-game{padding:.5rem}.direction-pad{grid-template-rows:repeat(3,45px);grid-template-columns:repeat(3,45px)}.dir-button{width:45px;height:45px;font-size:1rem}}