:root{font-family:Nunito,Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#2d1b69;background:linear-gradient(135deg,#ffe4e1,#e6f3ff,#f0e6ff,#fff5e6,#f0f8ff)}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden;height:100vh}.app{width:100vw;height:100vh;margin:0;padding:20px;position:relative;z-index:1;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden}.game-area{flex:1;display:flex;flex-direction:column;min-height:0;flex-shrink:0}.app header{text-align:center;margin-bottom:24px}.app header h1{font-size:28px;font-weight:900;color:#4a2c5a;text-shadow:0 2px 4px rgba(245,158,11,.2);margin:0 0 8px}.app header h1:after{content:"";display:block;width:60px;height:3px;background:linear-gradient(90deg,#34d399,#10b981);border-radius:2px;margin:8px auto 0}.app header p{font-size:14px;font-weight:600;margin:0}.card{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);border-radius:16px;padding:16px;margin-top:16px;box-shadow:0 4px 20px #0003}.game-overlay{background:transparent;border:none;border-radius:0;padding:20px;margin-top:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;min-height:100vh;display:flex;flex-direction:column}.game-overlay h2{color:#2d1b69;text-shadow:2px 2px 4px rgba(255,255,255,.8);font-size:24px;margin-bottom:8px}.game-overlay p{color:#4a2c5a;text-shadow:1px 1px 2px rgba(255,255,255,.6);font-weight:600}.game-overlay .muted{color:#6b5b95;text-shadow:1px 1px 2px rgba(255,255,255,.5)}.game-overlay ul{background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:8px;padding:12px;border:1px solid rgba(255,255,255,.2)}.game-overlay li{color:#4a2c5a;text-shadow:1px 1px 2px rgba(255,255,255,.6)}.game-overlay h2,.game-overlay p,.game-overlay .game-controls,.game-overlay ul,.game-overlay button:not(.rotate-button){text-align:center;margin-left:auto;margin-right:auto;display:block}.game-overlay .game-controls{margin:12px 0;text-align:center}.game-overlay ul{max-width:400px;margin:16px auto}.game-overlay button{background:#ffffffe6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:2px solid rgba(255,255,255,.3);color:#4a2c5a;text-shadow:none}.game-overlay button:hover{background:#fffffff2;border-color:#ffffff80}.timer-container{text-align:center;margin:0 auto;width:450px;max-width:90vw}.timer-bar{width:100%;height:20px;background:#fff3;border:2px solid rgba(255,255,255,.3);border-radius:10px;overflow:hidden;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 2px 8px #0000001a}.timer-fill{height:100%;border-radius:8px;transition:width 1s ease,background-color .3s ease;box-shadow:inset 0 1px 3px #0003}.timer-text{margin-bottom:8px;font-size:18px;font-weight:700;text-shadow:1px 1px 2px rgba(255,255,255,.6);transition:color .3s ease}.current-word-display{text-align:center;padding:12px 20px;height:48px;max-width:300px;margin:16px auto;display:flex;align-items:center;justify-content:center}.game-overlay .shake-button{background:linear-gradient(145deg,#fbbf24,#f59e0b);border:2px solid #f59e0b;color:#92400e;text-shadow:0 1px 2px rgba(0,0,0,.2)}.game-overlay .shake-button:hover{background:linear-gradient(145deg,#fcd34d,#fbbf24);border-color:#d97706;transform:scale(1.05)}.muted{color:#059669;font-weight:600}.error{color:#dc2626;font-weight:700}label{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}input,button{border-radius:10px;border:2px solid rgba(255,255,255,.3);padding:12px;font-size:16px;font-weight:600;background:#ffffffe6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 2px 12px #00000026;transition:all .2s ease}input:focus{outline:none;border-color:#9ca3af;box-shadow:0 2px 12px #0000001f}button{background:linear-gradient(145deg,#f3f4f6,#e5e7eb);color:#374151;border:none;margin-top:8px;cursor:pointer;transform:translateY(0)}button:hover{background:linear-gradient(145deg,#e5e7eb,#d1d5db);transform:translateY(-1px);box-shadow:0 4px 12px #00000026}button:active{transform:translateY(0);box-shadow:0 2px 6px #0000001f}button:disabled{opacity:.6}.row{display:flex;gap:8px;margin:12px 0}.settings-section{background:#f9fafbe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.4);border-radius:12px;padding:16px;margin:16px 0;box-shadow:0 2px 16px #00000026}.settings-section h3{margin:0 0 12px;font-size:18px;color:#4a2c5a;font-weight:700}.game-controls{margin:12px 0;display:flex;gap:8px;align-items:center}.rotate-button{background:linear-gradient(145deg,#f3f4f6,#e5e7eb);color:#374151;border:none;padding:10px 16px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #00000014}.rotate-button:hover{background:linear-gradient(145deg,#e5e7eb,#d1d5db);transform:scale(1.02);box-shadow:0 3px 12px #0000001f}.game-area{position:relative}.current-word-text{color:#eab308;font-size:24px;font-weight:700;letter-spacing:3px;text-shadow:1px 1px 3px rgba(234,179,8,.6);opacity:.9;transition:all .3s ease}.current-word-text.invalid-word{color:#dc2626;text-shadow:0 0 10px rgba(220,38,38,.8),0 0 20px rgba(220,38,38,.6),0 0 30px rgba(220,38,38,.4);animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes selected-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.error-word-text{color:#dc2626;font-size:18px;font-weight:700;letter-spacing:2px;text-shadow:0 0 10px rgba(220,38,38,.8),0 0 20px rgba(220,38,38,.6),0 0 30px rgba(220,38,38,.4);animation:shake .5s ease-in-out}.total-score-display{text-align:center;margin:16px 0}.total-score-text{font-size:32px;font-weight:900;color:#fbbf24;text-shadow:0 0 15px rgba(251,191,36,.8),0 0 30px rgba(251,191,36,.6),2px 2px 4px rgba(0,0,0,.3);letter-spacing:2px}.word-list-container{width:400px;margin:auto auto 0}.word-list-container ul{margin:0;padding:12px;background:#fbbf24e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;border:2px solid rgba(245,158,11,.8);min-height:120px;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 16px #f59e0b4d;list-style:none}.word-list-container li{color:#92400e;text-shadow:1px 1px 2px rgba(255,255,255,.8);padding:6px 10px;border-radius:6px;background:#ffffff26;border:1px solid rgba(245,158,11,.3);font-size:14px;font-weight:600}.word-list-container li.empty-word-slot{background:#ffffff14;border:1px dashed rgba(245,158,11,.4);opacity:.5}.row input{flex:1}.board-container{padding:24px;margin-top:2px;border-radius:0;background:transparent;transition:transform .5s cubic-bezier(.68,-.55,.265,1.55);width:fit-content;margin-left:auto;margin-right:auto;border:2px solid #2563eb;position:relative}.board-container:before{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;border-radius:0;pointer-events:none}@keyframes board-rotate{0%{opacity:.8;transform:scale(.95)}50%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}.board-container.board-flashy-valid .board-cell{animation:cell-glow 1s ease-out}@keyframes cell-glow{0%{box-shadow:inset 0 0 #4d7cff00}30%{box-shadow:inset 0 0 0 2px #4d7cff4d}60%{box-shadow:inset 0 0 0 3px #4d7cff80}to{box-shadow:inset 0 0 #4d7cff00}}.board-grid{display:grid;gap:2px;transition:all .5s ease-out;justify-content:start;width:fit-content;background:transparent}.board-grid.rotating{animation:board-rotate .5s ease-out}.board-container[data-board-size="6"] .board-cell{font-size:24px;width:70px;height:70px}.board-container[data-board-size="7"] .board-cell{font-size:22px;width:65px;height:65px}.board-cell{width:80px;height:80px;border-radius:0;background:linear-gradient(45deg,transparent 0%,transparent 50%,rgba(147,197,253,.1) 50%,rgba(147,197,253,.1) 100%),linear-gradient(-45deg,transparent 0%,transparent 50%,rgba(96,165,250,.15) 50%,rgba(96,165,250,.15) 100%),#fff;background-size:2px 2px,2px 2px;border:2px solid #2563eb;display:grid;place-content:center;font-size:28px;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s ease;box-shadow:inset -4px -4px #3b82f6cc,inset -2px -2px #2563eb99,inset 0 0 #dbeafe66,inset 2px 2px #ffffffe6;color:#2563eb;font-family:Courier New,monospace}.board-cell:hover{transform:scale(1.02);background:linear-gradient(45deg,transparent 0%,transparent 40%,rgba(147,197,253,.2) 40%,rgba(147,197,253,.2) 100%),linear-gradient(-45deg,transparent 0%,transparent 40%,rgba(96,165,250,.25) 40%,rgba(96,165,250,.25) 100%),#f8fafc;box-shadow:inset -5px -5px #3b82f6e6,inset -3px -3px #2563ebb3,inset -1px -1px #dbeafe80,inset 1px 1px #fffffff2}.board-cell.selected{background:#fbbf24;border:3px solid #f59e0b;color:#92400e;box-shadow:0 0 0 2px #f59e0b,0 0 15px #f59e0b99,inset -2px -2px #92400ecc,inset 2px 2px #fff9;text-shadow:1px 1px 2px rgba(255,255,255,.5);animation:selected-pulse 1.5s ease-in-out infinite}.board-cell.last-selected{background:#f59e0b;border:4px solid #d97706;color:#78350f;box-shadow:0 0 0 3px #d97706,0 0 25px #f59e0bcc,0 0 40px #f59e0b66,inset -3px -3px #78350fe6,inset 3px 3px #ffffffb3;text-shadow:1px 1px 3px rgba(255,255,255,.6);animation:selected-pulse .8s ease-in-out infinite;z-index:10}.word-list-valid{animation:word-valid .8s ease-out}.word-list-flashy-valid{animation:word-flashy-valid 1.2s ease-out}.word-list-invalid{animation:word-invalid .6s ease-in-out}@keyframes word-valid{0%{transform:scale(1)}25%{transform:scale(1.05)}50%{transform:scale(1.08)}75%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes word-flashy-valid{0%{transform:scale(1) rotate(0);filter:brightness(1) saturate(1)}10%{transform:scale(1.05) rotate(.5deg);filter:brightness(1.1) saturate(1.2)}20%{transform:scale(1.12) rotate(-.3deg);filter:brightness(1.3) saturate(1.4) drop-shadow(0 0 6px #4d7cff)}35%{transform:scale(1.18) rotate(.2deg);filter:brightness(1.6) saturate(1.6) drop-shadow(0 0 12px #4d7cff)}50%{transform:scale(1.15) rotate(0);filter:brightness(1.8) saturate(1.8) drop-shadow(0 0 18px #4d7cff) hue-rotate(10deg)}65%{transform:scale(1.12) rotate(-.1deg);filter:brightness(1.5) saturate(1.5) drop-shadow(0 0 14px #4d7cff) hue-rotate(5deg)}80%{transform:scale(1.08) rotate(0);filter:brightness(1.2) saturate(1.2) drop-shadow(0 0 8px #4d7cff)}90%{transform:scale(1.03) rotate(0);filter:brightness(1.05) saturate(1.05) drop-shadow(0 0 2px #4d7cff)}to{transform:scale(1) rotate(0);filter:brightness(1) saturate(1)}}@keyframes word-invalid{0%{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-5px)}to{transform:translate(0)}}.board-valid{animation:board-valid .6s ease-out}.board-flashy-valid{animation:board-flashy-valid 1s ease-out}.board-invalid{animation:board-invalid .5s ease-in-out}@keyframes board-valid{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes board-flashy-valid{0%{transform:scale(1);filter:brightness(1) contrast(1)}15%{transform:scale(1.02);filter:brightness(1.1) contrast(1.1) drop-shadow(0 0 4px rgba(77,124,255,.4))}30%{transform:scale(1.04);filter:brightness(1.2) contrast(1.2) drop-shadow(0 0 8px rgba(77,124,255,.6))}50%{transform:scale(1.05);filter:brightness(1.3) contrast(1.3) drop-shadow(0 0 12px rgba(77,124,255,.8)) saturate(1.2)}70%{transform:scale(1.03);filter:brightness(1.15) contrast(1.15) drop-shadow(0 0 8px rgba(77,124,255,.5)) saturate(1.1)}85%{transform:scale(1.01);filter:brightness(1.05) contrast(1.05) drop-shadow(0 0 3px rgba(77,124,255,.2))}to{transform:scale(1);filter:brightness(1) contrast(1) drop-shadow(0 0 0px rgba(77,124,255,0))}}@keyframes board-invalid{0%{transform:translate(0)}25%{transform:translate(-3px)}50%{transform:translate(3px)}75%{transform:translate(-3px)}to{transform:translate(0)}}.confetti{font-size:20px}@media (max-width: 480px){.app{padding:12px}.board-container{padding:20px;width:fit-content;margin-left:auto;margin-right:auto}.board-cell{width:72px;height:72px;border:2px solid #2563eb;background:linear-gradient(45deg,transparent 0%,transparent 50%,rgba(147,197,253,.1) 50%,rgba(147,197,253,.1) 100%),linear-gradient(-45deg,transparent 0%,transparent 50%,rgba(96,165,250,.15) 50%,rgba(96,165,250,.15) 100%),#fff;background-size:2px 2px,2px 2px;box-shadow:inset -3px -3px #3b82f6cc,inset -1px -1px #2563eb99,inset 1px 1px #dbeafe66,inset 3px 3px #ffffffe6}.board-cell.selected{background:#fbbf24;border:2px solid #f59e0b;color:#92400e;box-shadow:0 0 0 2px #f59e0b,0 0 12px #f59e0b80,inset -2px -2px #92400ecc,inset 2px 2px #fff9;text-shadow:1px 1px 2px rgba(255,255,255,.5);animation:selected-pulse 1.5s ease-in-out infinite}.board-cell.last-selected{background:#f59e0b;border:3px solid #d97706;color:#78350f;box-shadow:0 0 0 2px #d97706,0 0 20px #f59e0bb3,0 0 35px #f59e0b4d,inset -3px -3px #78350fe6,inset 3px 3px #ffffffb3;text-shadow:1px 1px 3px rgba(255,255,255,.6);animation:selected-pulse .8s ease-in-out infinite;z-index:10}.board-grid{gap:1px}.board-container[data-board-size="6"] .board-cell{width:60px;height:60px;font-size:20px}.board-container[data-board-size="7"] .board-cell{width:55px;height:55px;font-size:18px}}