: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}.app{width:100vw;height:100vh;margin:0;padding:20px;position:relative;z-index:1;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto}.game-area{flex:1;display:flex;flex-direction:column;min-height: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:0;margin-top:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.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;max-width:300px;margin:16px auto}.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-top:8px;font-size:18px;font-weight:700;color:#4a2c5a;text-shadow:1px 1px 2px rgba(255,255,255,.6)}.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-overlay{position:absolute;top:12px;left:50%;transform:translate(-50%);background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid rgba(52,211,153,.7);border-radius:12px;padding:8px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 3px 12px #34d3994d;z-index:10;pointer-events:none}.current-word-label{color:#059669;font-size:12px;font-weight:600}.current-word-text{color:#065f46;font-size:20px;font-weight:700;letter-spacing:2px}.row input{flex:1}.board-container{padding:24px;margin-top:16px;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:20px;width:56px;height:56px}.board-container[data-board-size="7"] .board-cell{font-size:18px;width:52px;height:52px}.board-cell{width:64px;height:64px;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:24px;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:linear-gradient(45deg,transparent 0%,transparent 45%,rgba(59,130,246,.15) 45%,rgba(59,130,246,.15) 100%),linear-gradient(-45deg,transparent 0%,transparent 45%,rgba(37,99,235,.2) 45%,rgba(37,99,235,.2) 100%),#dbeafe;border-color:#1d4ed8;color:#1d4ed8;box-shadow:inset -5px -5px #1d4ed8cc,inset -3px -3px #1e40af99,inset -1px -1px #3b82f666,inset 1px 1px #dbeafecc}.board-cell.last-selected{background:linear-gradient(45deg,transparent 0%,transparent 40%,rgba(30,64,175,.2) 40%,rgba(30,64,175,.2) 100%),linear-gradient(-45deg,transparent 0%,transparent 40%,rgba(59,130,246,.25) 40%,rgba(59,130,246,.25) 100%),#bfdbfe;border-color:#1e40af;color:#1e40af;box-shadow:inset -6px -6px #1e40afe6,inset -4px -4px #1d4ed8b3,inset -2px -2px #2563eb80,inset 0 0 #3b82f699,inset 2px 2px #bfdbfecc,0 0 0 2px #1e40af80}.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:58px;height:58px;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:linear-gradient(45deg,transparent 0%,transparent 45%,rgba(59,130,246,.15) 45%,rgba(59,130,246,.15) 100%),linear-gradient(-45deg,transparent 0%,transparent 45%,rgba(37,99,235,.2) 45%,rgba(37,99,235,.2) 100%),#dbeafe;border-color:#1d4ed8;box-shadow:inset -4px -4px #1d4ed8cc,inset -2px -2px #1e40af99,inset 0 0 #3b82f666,inset 2px 2px #dbeafecc}.board-cell.last-selected{background:linear-gradient(45deg,transparent 0%,transparent 40%,rgba(30,64,175,.2) 40%,rgba(30,64,175,.2) 100%),linear-gradient(-45deg,transparent 0%,transparent 40%,rgba(59,130,246,.25) 40%,rgba(59,130,246,.25) 100%),#bfdbfe;border-color:#1e40af;box-shadow:inset -5px -5px #1e40afe6,inset -3px -3px #1d4ed8b3,inset -1px -1px #3b82f680,inset 1px 1px #bfdbfecc}.board-grid{gap:1px}.board-container[data-board-size="6"] .board-cell{width:48px;height:48px;font-size:18px}.board-container[data-board-size="7"] .board-cell{width:44px;height:44px;font-size:16px}}