.App{display:flex;flex-direction:column;align-items:center;padding:10px;min-height:100vh;width:100%;box-sizing:border-box}h1{color:#646cff;margin:0 0 15px;text-align:center;font-size:clamp(1.5rem,5vw,2.5rem)}.game-info{display:flex;justify-content:center;align-items:center;gap:20px;margin-bottom:15px;font-size:clamp(.9rem,2.5vw,1.2rem);width:100%;flex-wrap:wrap;padding:0 10px;box-sizing:border-box}.score{font-weight:700}.action-buttons{display:flex;align-items:center;gap:8px}.next-preview{display:flex;align-items:center;gap:10px}.preview-label{font-weight:500}.preview-grid{display:flex;gap:4px}.preview-cell{width:min(50px,calc((100vw - 60px) / 9));height:min(50px,calc((100vw - 60px) / 9));max-width:60px;max-height:60px;border:1px solid #444;display:flex;align-items:center;justify-content:center;background-color:#2a2a2a;transition:background-color .2s,transform .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;border-radius:4px}.preview-cell.clickable{cursor:pointer;border-color:#646cff}.preview-cell.clickable:hover{background-color:#3a3a3a;transform:scale(1.05);box-shadow:0 0 10px #646cff80}.preview-cell.snatched{background-color:#1a1a1a;border-style:dashed;border-color:#666;opacity:.4}.game-board{display:inline-block;border:2px solid #646cff;border-radius:8px;padding:5px;background-color:#1a1a1a;box-shadow:0 4px 8px #0000004d;max-width:100%;box-sizing:border-box;overflow:hidden;margin-bottom:15px}.skill-bar{display:flex;gap:12px;justify-content:center;align-items:center;padding:10px}.skill-btn{position:relative;width:60px;height:60px;border-radius:12px;border:2px solid #646cff;background:linear-gradient(135deg,#4a4aff,#646cff);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #646cff4d}.skill-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #646cff80;background:linear-gradient(135deg,#5252ff,#7676ff)}.skill-btn:active:not(:disabled){transform:translateY(0)}.skill-btn.active{background:linear-gradient(135deg,#10b981,#059669);border-color:#10b981;animation:pulse 1s ease-in-out infinite}.skill-btn.disabled{background:linear-gradient(135deg,#4a4a4a,#3a3a3a);border-color:#555;cursor:not-allowed;opacity:.5}@keyframes pulse{0%,to{box-shadow:0 2px 8px #10b98166}50%{box-shadow:0 2px 20px #10b981cc}}.skill-icon{display:flex;align-items:center;justify-content:center}.skill-icon svg{width:32px;height:32px;fill:#fff;display:block}.skill-cost{position:absolute;bottom:2px;right:2px;background:#000000b3;color:gold;font-size:.7rem;font-weight:700;padding:2px 5px;border-radius:4px;min-width:16px;text-align:center}.row{display:flex}.cell{width:min(50px,calc((100vw - 60px) / 9));height:min(50px,calc((100vw - 60px) / 9));max-width:60px;max-height:60px;border:1px solid #444;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#2a2a2a;transition:background-color .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative}.cell:hover{background-color:#3a3a3a}.cell.selected{background-color:#4a4a4a;box-shadow:inset 0 0 0 2px #646cff,inset 0 0 10px #646cff80}.cell.on-path{background-color:#646cff26}.cell.failed-path{background-color:#ef444433;box-shadow:inset 0 0 0 2px #ef444499}.path-indicator{position:absolute;width:8px;height:8px;background:#646cff;border-radius:50%;animation:pathPulse .6s ease-in-out infinite}@keyframes pathPulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}.ball{width:70%;height:70%;max-width:35px;max-height:35px;border-radius:50%;border:2px solid #000;box-shadow:inset -5px -5px 10px #00000080,inset 5px 5px 10px #ffffff4d,0 0 10px #0000004d;animation:appear .3s ease-out}.ball.selected-ball{animation:jump .6s ease-in-out infinite}@keyframes appear{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes jump{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.game-over{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000000f2;padding:clamp(20px,5vw,40px);border-radius:12px;border:3px solid #646cff;box-shadow:0 8px 16px #00000080;z-index:1000;max-width:90vw;box-sizing:border-box}.game-over h2{color:#f44;margin-top:0}.game-over p{font-size:1.4em;margin:20px 0}.game-over button{font-size:1.2em;padding:12px 30px;background-color:#646cff;color:#fff;border:none}.game-over button:hover{background-color:#535bf2}.new-game-btn{font-size:clamp(.85rem,2vw,1rem);padding:8px 16px;background-color:#646cff;color:#fff;border:none;white-space:nowrap;touch-action:manipulation}.new-game-btn:hover{background-color:#535bf2}.new-game-btn:active{background-color:#4044d8;transform:scale(.98)}.icon-btn{width:38px;height:38px;border-radius:10px;border:none;background:#646cff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease,background-color .2s ease;padding:0}.icon-btn svg{width:20px;height:20px;fill:#fff;display:block}.icon-btn:hover{background:#535bf2}.icon-btn:active{transform:scale(.95)}.creator-btn.active{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 2px 12px #f59e0b80}.creator-btn.active:hover{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.lang-btn{background:#059669}.lang-btn:hover{background:#10b981}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1200;background:#00000080;display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box}.dialog{width:min(420px,95vw);background:#1f1f1f;border:2px solid #646cff;border-radius:12px;padding:18px;box-sizing:border-box;text-align:left}.dialog h3{margin:0 0 8px}.dialog p{margin:0 0 16px;opacity:.9}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.dialog-btn{border:none;border-radius:8px;padding:8px 12px;font-size:.95rem}.dialog-btn.primary{background:#646cff;color:#fff}.dialog-btn.primary:hover{background:#535bf2}.dialog-btn.primary:disabled{opacity:.5;cursor:not-allowed}.dialog-btn.secondary{background:#3a3a3a;color:#fff}.dialog-btn.secondary:hover{background:#4a4a4a}.status-message{position:fixed;top:20px;left:50%;transform:translate(-50%);background:#646cff;color:#fff;padding:12px 24px;border-radius:8px;font-weight:600;z-index:1100;box-shadow:0 4px 12px #0000004d;animation:slideDown .3s ease-out}.status-indicator{position:fixed;bottom:20px;right:20px;background:#10b981;color:#fff;padding:8px 16px;border-radius:6px;font-size:.85rem;font-weight:600;z-index:1100;box-shadow:0 2px 8px #0000004d;animation:fadeIn .3s ease-out}.status-message.snatch-active{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.grabbed-ball-indicator{display:flex;align-items:center;gap:10px;font-size:1rem}.small-ball{width:24px;height:24px;min-width:24px;min-height:24px;max-width:24px;max-height:24px}@keyframes slideDown{0%{transform:translate(-50%) translateY(-20px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.App{padding:5px}h1{margin-bottom:10px}.game-info{gap:10px;margin-bottom:10px;justify-content:center}.action-buttons{gap:6px}.icon-btn{width:34px;height:34px}.icon-btn svg{width:18px;height:18px}.game-board{border-width:2px;padding:3px}.skill-bar{gap:8px;padding:8px}.skill-btn{width:50px;height:50px}.skill-icon svg{width:26px;height:26px}.skill-cost{font-size:.65rem;padding:1px 4px}.cell{border-width:.5px}.ball{border-width:1px}.game-over h2{font-size:clamp(1.2rem,5vw,1.8rem)}.game-over p{font-size:clamp(1rem,4vw,1.4rem)}.game-over button{font-size:clamp(.9rem,3vw,1.2rem)}}@media (min-width: 769px) and (max-width: 1024px){.cell{width:min(55px,calc((100vw - 80px) / 9));height:min(55px,calc((100vw - 80px) / 9))}}@media (min-width: 1025px){.cell:hover{background-color:#3a3a3a}}@media (prefers-color-scheme: light){.game-board{background-color:#f0f0f0}.cell{background-color:#fff;border-color:#ccc}.cell:hover{background-color:#f5f5f5}.cell.selected{background-color:#e8e8ff;box-shadow:inset 0 0 0 2px #646cff}.cell.on-path{background-color:#646cff33}.cell.failed-path{background-color:#ef444426}.next-ball{border-color:#666}.skill-btn{border-color:#4f46e5;background:linear-gradient(135deg,#6366f1,#4f46e5)}.skill-btn:hover:not(:disabled){background:linear-gradient(135deg,#7c3aed,#6366f1)}.skill-btn.active{background:linear-gradient(135deg,#10b981,#059669);border-color:#059669}.skill-btn.disabled{background:linear-gradient(135deg,#9ca3af,#6b7280);border-color:#9ca3af}.dialog{background:#fff;border-color:#646cff;color:#1f2937}.dialog-btn.secondary{background:#e5e7eb;color:#1f2937}.dialog-btn.secondary:hover{background:#d1d5db}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;max-width:1280px;margin:0 auto;padding:0;text-align:center;box-sizing:border-box}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}button{background-color:#f9f9f9}}