: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);--safe-area-inset-top: env(safe-area-inset-top);--safe-area-inset-right: env(safe-area-inset-right);--safe-area-inset-bottom: env(safe-area-inset-bottom);--safe-area-inset-left: env(safe-area-inset-left);--safe-area-inset-top: 0px;--safe-area-inset-right: 0px;--safe-area-inset-bottom: 0px;--safe-area-inset-left: 0px}*{box-sizing:border-box}*{-webkit-touch-callout:none}button,input,textarea,select,[role=button],[touch-action],[style*="cursor: pointer"],[style*="cursor: grab"],[style*="cursor: grabbing"]{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}body{margin:0;min-height:100vh;overflow:hidden;height:calc(var(--vh, 1vh) * 100);padding-top:var(--safe-area-inset-top);padding-bottom:var(--safe-area-inset-bottom);padding-left:var(--safe-area-inset-left);padding-right:var(--safe-area-inset-right);box-sizing:border-box;-webkit-overflow-scrolling:touch;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}.app{width:100vw;height:calc(var(--vh, 1vh) * 100);margin:0;padding:0;position:relative;z-index:1;display:flex;flex-direction:column;box-sizing:border-box;overflow:auto}.game-area{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.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:8px;margin-top:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;height:calc(var(--vh, 1vh) * 100);display:flex;flex-direction:column;box-sizing:border-box;overflow:auto;min-height:0}.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:300px;max-width:80vw;flex-shrink:0}.timer-bar{width:100%;height:16px;background:#fff3;border:2px solid rgba(255,255,255,.3);border-radius:8px;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;margin:12px 0 8px;padding:6px 12px;height:32px;max-width:280px;display:flex;align-items:center;justify-content:center;align-self:center;flex-shrink:0}.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;min-height:44px;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}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,button:focus{transform:translateY(0);box-shadow:0 2px 6px #0000001f;outline:none}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:8px 0;display:flex;gap:8px;align-items:center;flex-shrink:0}.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;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow-x:auto;overflow-y:hidden}.current-word-text{color:#eab308;font-size:20px;font-weight:700;letter-spacing:2px;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:8px 0;flex-shrink:0}.total-score-text{font-size:24px;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:80px;max-height:150px;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 16px #f59e0b4d;list-style:none;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.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:8px;margin-top:0;border-radius:0;background:transparent;transition:transform .5s cubic-bezier(.68,-.55,.265,1.55);width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;position:relative;flex-shrink:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}.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:10px 5px;transition:all .5s ease-out;justify-content:start;width:fit-content;background:transparent;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}.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;display:grid;place-content:center;font-size:32px;font-weight:900;cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;transition:all .15s ease;color:#2563eb;font-family:Courier New,monospace;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:none}.board-cell:hover{transform:scale(1.02);filter:brightness(1.1);text-shadow:1px 1px 2px rgba(37,99,235,.5)}.board-cell:active{transform:scale(.98);filter:brightness(.95)}.board-cell.selected{color:#92400e;filter:brightness(1.2) contrast(1.1);box-shadow:0 0 15px #f59e0b99,0 0 25px #f59e0b4d;text-shadow:2px 2px 4px rgba(255,255,255,.8);animation:selected-pulse 1.5s ease-in-out infinite}.board-cell.last-selected{color:#78350f;filter:brightness(1.3) contrast(1.2);box-shadow:0 0 25px #f59e0bcc,0 0 40px #f59e0b66,0 0 60px #f59e0b33;text-shadow:3px 3px 6px rgba(255,255,255,.9);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)}}@keyframes zuko-appear{0%{opacity:0;transform:scale(0) rotate(-180deg) translateY(-50px)}20%{opacity:1;transform:scale(1.2) rotate(-10deg) translateY(0)}40%{transform:scale(1.1) rotate(5deg)}60%{transform:scale(1.05) rotate(-2deg)}80%{transform:scale(1.02) rotate(1deg)}to{opacity:1;transform:scale(1) rotate(0)}}.board-cell:hover{transform:scale(1.05)!important;transition:transform .2s ease}.confetti{font-size:20px}@media (max-width: 768px){.board-container{padding:4px;width:fit-content;margin-left:auto;margin-right:auto;max-width:100vw}.board-cell{width:72px;height:72px;font-size:26px;font-weight:900;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation}.board-cell.selected{color:#92400e;filter:brightness(1.2) contrast(1.1);box-shadow:0 0 12px #f59e0b80,0 0 20px #f59e0b4d;text-shadow:2px 2px 4px rgba(255,255,255,.8);animation:selected-pulse 1.5s ease-in-out infinite}.board-cell.selected:active{transform:scale(.95);filter:brightness(1.1) contrast(1)}.board-cell.last-selected{color:#78350f;filter:brightness(1.3) contrast(1.2);box-shadow:0 0 20px #f59e0bb3,0 0 35px #f59e0b4d,0 0 50px #f59e0b33;text-shadow:3px 3px 6px rgba(255,255,255,.9);animation:selected-pulse .8s ease-in-out infinite;z-index:10}.board-cell.last-selected:active{transform:scale(.92);filter:brightness(1.2) contrast(1.1)}.word-list-container{width:95%;max-width:380px;margin-left:auto;margin-right:auto}.word-list-container ul{min-height:75px;max-height:140px;padding:10px}.word-list-container li{padding:6px 10px;font-size:14px}.game-overlay{padding:8px;height:calc(var(--vh, 1vh) * 100);overflow:hidden}.game-area{flex:1;overflow:hidden}.timer-container{margin-top:8px;width:90vw;max-width:400px}.current-word-display{margin:6px 0;padding:6px 12px;height:36px}.total-score-display,.game-controls{margin:6px 0}.board-grid{gap:10px 5px}.board-container[data-board-size="6"] .board-cell{width:58px;height:58px;font-size:19px}.board-container[data-board-size="7"] .board-cell{width:52px;height:52px;font-size:17px}.board-container[data-board-size="7"] .board-cell{width:50px;height:50px;margin:1px;font-size:17px}}@media (max-width: 480px){.timer-container{width:95vw;max-width:320px}.timer-text{font-size:16px}.total-score-text{font-size:20px}.board-container{padding:2px;max-width:calc(100vw - 16px)}.game-area{padding:0 8px}.board-cell{width:60px;height:60px;font-size:22px;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation}.board-container[data-board-size="6"] .board-cell{width:52px;height:52px;font-size:17px}.board-container[data-board-size="7"] .board-cell{width:46px;height:46px;font-size:15px}.word-list-container{width:98%;max-width:320px}.word-list-container ul{min-height:65px;max-height:110px;padding:8px}.word-list-container li{padding:4px 8px;font-size:13px}.game-overlay{padding:4px}}