*,*:before,*:after{box-sizing:border-box}:root{font-family:Outfit,Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;font-weight:400;--primary-color: #6366f1;--primary-color-rgb: 99, 102, 241;--primary-dark: #4f46e5;--primary-light: #818cf8;--secondary-color: #10b981;--secondary-color-rgb: 16, 185, 129;--accent-color: #f59e0b;--accent-color-rgb: 245, 158, 11;--danger-color: #ef4444;--bg-color: #f8fafc;--bg-color-rgb: 248, 250, 252;--surface-color: #ffffff;--surface-color-rgb: 255, 255, 255;--text-color: #0f172a;--text-color-rgb: 15, 23, 42;--text-secondary: #64748b;--grid-border: #e2e8f0;--grid-border-rgb: 226, 232, 240;--tile-bg: #ffffff;--tile-border: #cbd5e1;--tile-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .5);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .15);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--font-sm: .875rem;--font-md: 1rem;--font-lg: 1.25rem;--font-xl: 1.5rem;--font-xxl: 2rem;--font-display: 3rem;--weight-regular: 400;--weight-medium: 500;--weight-bold: 700;--weight-black: 900;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px;color-scheme:light dark;color:var(--text-color);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: dark){:root{--bg-color: #0f172a;--bg-color-rgb: 15, 23, 42;--surface-color: #1e293b;--surface-color-rgb: 30, 41, 59;--text-color: #f8fafc;--text-secondary: #94a3b8;--grid-border: #334155;--grid-border-rgb: 51, 65, 85;--tile-bg: #1e293b;--tile-border: #475569;--glass-bg: rgba(15, 23, 42, .7);--glass-border: rgba(255, 255, 255, .1)}}body{margin:0;display:flex;place-items:center;justify-content:center;min-width:320px;min-height:100vh;background:radial-gradient(circle at top left,rgba(var(--primary-color-rgb),.15),transparent 40%),radial-gradient(circle at bottom right,rgba(var(--secondary-color-rgb),.15),transparent 40%),var(--bg-color)}@media (max-width: 480px){body{min-height:100dvh;overflow:hidden;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}}#root{width:100%;height:100%;display:flex;justify-content:center;align-items:center}h1{font-size:3rem;line-height:1.1;margin:0 0 1.5rem;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;letter-spacing:-.05em;text-align:center}button{border-radius:12px;border:none;padding:.8em 1.5em;font-size:1em;font-weight:600;font-family:inherit;background-color:var(--primary-color);color:#fff;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px rgba(var(--primary-color-rgb),.3),0 2px 4px -1px rgba(var(--primary-color-rgb),.1);position:relative;overflow:hidden}button:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 15px -3px rgba(var(--primary-color-rgb),.4),0 4px 6px -2px rgba(var(--primary-color-rgb),.2)}button:active{transform:translateY(0)}button:focus,button:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@media (max-width: 768px){html{font-size:14px}h1{font-size:2.5rem;margin-bottom:1rem}button{padding:.7em 1.2em}}@media (max-width: 480px){html{font-size:13px}h1{font-size:3rem;margin-bottom:0rem}}.game-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto;position:relative;width:100%;max-width:400px;padding:0}.game-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:var(--spacing-md)}.button-group{display:flex;gap:var(--spacing-sm)}.icon-button{padding:.6rem;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--surface-color);color:var(--text-color);border:1px solid var(--grid-border);box-shadow:var(--tile-shadow)}.icon-button:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.grid{border:none;margin:0 auto var(--spacing-lg);background-color:var(--surface-color);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--tile-shadow);padding:var(--spacing-sm);display:grid;grid-template-columns:repeat(9,1fr);gap:var(--spacing-xs);width:100%}.row{display:contents}.cell{width:100%;aspect-ratio:1;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold);font-size:var(--font-xl);background-color:var(--bg-color);color:var(--text-secondary);transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid transparent}.cell.filled{background-color:var(--surface-color);color:var(--text-color);border-color:var(--tile-border);box-shadow:0 2px 4px #0000000d;animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}.cell.current{background-color:var(--primary-color);color:#fff;box-shadow:0 4px 6px rgba(var(--primary-color-rgb),.3);transform:scale(1.05);z-index:10}.cell.cleared{background-color:var(--secondary-color);color:#fff;animation:popIn .3s reverse forwards}.controls{display:flex;gap:var(--spacing-md);width:100%;justify-content:center;align-items:stretch}.control-button{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);background:var(--surface-color);color:var(--text-color);border:1px solid var(--grid-border);box-shadow:var(--tile-shadow);border-radius:var(--radius-md)}.center-button{flex:2;background:var(--primary-color);color:#fff;border:none;font-size:1.1rem;gap:var(--spacing-sm)}.center-button:hover{background:var(--primary-dark)}.button-text{font-weight:var(--weight-bold);letter-spacing:.05em}.overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:var(--spacing-xl);text-align:center;z-index:50;min-width:280px;display:flex;flex-direction:column;gap:var(--spacing-md)}.overlay h2{margin:0;font-size:2rem;color:var(--primary-color)}.overlay p{font-size:1.5rem;font-weight:600;margin:0}.countdown-overlay{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.countdown-number{font-size:8rem;font-weight:var(--weight-black);background:var(--primary-color);color:#fff;border-color:var(--primary-color);display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:var(--radius-full);margin:0 auto}@media (max-width: 480px){.game-container{height:fit-content;justify-content:center;padding-bottom:var(--spacing-lg);padding-top:var(--spacing-lg);width:100%;overflow:hidden;max-width:none;gap:var(--spacing-md)}.grid{padding:var(--spacing-sm);border-radius:var(--radius-sm);gap:2px;margin:0!important}.cell{font-size:clamp(1.2rem,6vw,1.8rem);border-radius:3px;border-width:1px;min-width:0}.controls{gap:var(--spacing-sm);padding-bottom:env(safe-area-inset-bottom);width:98%}.control-button{padding:var(--spacing-md);font-size:1.2rem;min-height:56px}.center-button{font-size:1rem}}@media (max-width: 360px){.cell{font-size:1rem}.control-button{padding:.8rem}}@media (max-height: 700px){.grid{margin-bottom:.2rem}}.next-tiles-container{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:1rem;padding:.8rem 1.2rem;box-sizing:border-box}.next-label{font-weight:700;font-size:.9rem;color:var(--text-secondary);letter-spacing:.1em}.next-tiles-preview{display:flex;gap:.8rem}.next-tile{width:32px;height:32px;border-radius:4px;background-color:var(--surface-color);border:1px solid var(--grid-border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;color:var(--text-color);box-shadow:var(--tile-shadow);position:relative}.next-tile:first-child{transform:scale(1.1);border-color:var(--primary-color);color:var(--primary-color);box-shadow:0 4px 6px rgba(var(--primary-color-rgb),.2);z-index:2}.next-tile:nth-child(2){opacity:.8}.next-tile:nth-child(3){opacity:.6}.score-container{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem}.score-value{display:flex;flex-direction:column;align-items:flex-start;line-height:1}.score-label{font-size:.7rem;font-weight:700;color:var(--text-secondary);letter-spacing:.05em;margin-bottom:2px}.score-number{font-size:1.5rem;font-weight:800;color:var(--primary-color);font-variant-numeric:tabular-nums}.combo-badge{background:linear-gradient(135deg,var(--accent-color),#fbbf24);color:#fff;font-weight:800;font-size:.8rem;padding:.2rem .6rem;border-radius:12px;box-shadow:0 2px 4px #f59e0b4d;animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}@media (max-width: 480px){.next-tiles-container{padding:.6rem 1rem}.next-tile{width:28px;height:28px;font-size:.9rem}.score-number{font-size:1.2rem}}.intro-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0f172a99;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000;padding:var(--spacing-md)}.intro-card{width:100%;max-width:420px;max-height:90vh;overflow-y:auto;background:var(--surface-color);padding:2.5rem;display:flex;flex-direction:column;gap:var(--spacing-xl);animation:popIn .4s cubic-bezier(.34,1.56,.64,1);border:1px solid var(--glass-border);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;box-sizing:border-box;border-radius:var(--radius-lg)}.intro-header{text-align:center}.game-title{font-size:var(--font-display);margin:0 0 var(--spacing-sm);background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:var(--weight-black);letter-spacing:-.05em}.tagline{font-size:var(--font-lg);color:var(--text-secondary);font-weight:var(--weight-medium);letter-spacing:.1em;text-transform:uppercase;margin:0}.intro-body{display:flex;flex-direction:column;gap:var(--spacing-lg)}.info-group h3{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-lg);color:var(--text-color);margin:0 0 var(--spacing-sm)}.icon-accent{color:var(--primary-color)}.info-group p{margin:0;color:var(--text-secondary);line-height:1.6}.controls-preview{display:flex;flex-direction:column;gap:var(--spacing-sm);background:var(--bg-color);padding:var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--grid-border)}.control-row{display:flex;align-items:center;justify-content:space-between}.control-row span{font-size:var(--font-sm);color:var(--text-secondary);font-weight:var(--weight-medium)}.key-group{display:flex;gap:.4rem}kbd{background:var(--surface-color);border:1px solid var(--grid-border);border-bottom-width:3px;border-radius:var(--radius-sm);padding:.3rem .6rem;font-family:inherit;font-size:var(--font-sm);color:var(--text-color);min-width:24px;text-align:center;display:flex;align-items:center;justify-content:center}kbd.wide{padding:.3rem 1.2rem;font-size:.8rem;font-weight:var(--weight-bold);text-transform:uppercase}.intro-footer{display:flex;justify-content:center}.start-button{width:100%;padding:var(--spacing-md);font-size:var(--font-lg);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s;box-shadow:0 4px 6px -1px rgba(var(--primary-color-rgb),.3)}.start-button:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 15px -3px rgba(var(--primary-color-rgb),.4)}@media (max-width: 480px){.intro-card{width:90%;padding:var(--spacing-lg);gap:var(--spacing-md)}.game-title{font-size:2.2rem;word-break:break-word}.tagline{font-size:.8rem}.intro-overlay{padding:var(--spacing-sm)}}.countdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;gap:2rem;pointer-events:none}.countdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(var(--bg-color-rgb),.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fadeIn .3s ease-out}.countdown-container{position:relative;width:280px;height:280px;display:flex;align-items:center;justify-content:center;animation:scaleIn .5s cubic-bezier(.34,1.56,.64,1);z-index:1}.countdown-container.normal{--primary-glow: rgba(99, 102, 241, .6);--secondary-glow: rgba(139, 92, 246, .4);--main-color: #6366f1;--accent-color: #8b5cf6}.countdown-container.warning{--primary-glow: rgba(245, 158, 11, .6);--secondary-glow: rgba(249, 115, 22, .4);--main-color: #f59e0b;--accent-color: #f97316}.countdown-container.go{--primary-glow: rgba(16, 185, 129, .6);--secondary-glow: rgba(5, 150, 105, .4);--main-color: #10b981;--accent-color: #059669}.countdown-content{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center;z-index:10}.countdown-number{font-size:6rem;font-weight:900;color:#fff;text-shadow:0 0 20px var(--primary-glow),0 0 40px var(--primary-glow),0 0 60px var(--secondary-glow),0 4px 8px rgba(0,0,0,.3);animation:numberPulse .8s ease-out,numberScale .5s cubic-bezier(.34,1.56,.64,1);letter-spacing:-.05em;line-height:1;position:relative;z-index:2}.progress-ring{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg);filter:drop-shadow(0 0 10px var(--primary-glow))}.progress-ring-bg{fill:none;stroke:#ffffff1a;stroke-width:8}.progress-ring-fill{fill:none;stroke:var(--main-color);stroke-width:8;stroke-linecap:round;stroke-dasharray:565.48;stroke-dashoffset:calc(565.48 * (1 - var(--progress, 0)));animation:progressFill 1s ease-out;filter:drop-shadow(0 0 8px var(--main-color))}.rings-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;z-index:1}.ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid;opacity:.3;animation:rotateRing 3s linear infinite}.ring-1{width:200px;height:200px;border-color:var(--main-color);animation-duration:3s}.ring-2{width:240px;height:240px;border-color:var(--accent-color);animation-duration:4s;animation-direction:reverse;border-style:dashed}.ring-3{width:280px;height:280px;border-color:var(--main-color);animation-duration:5s;opacity:.2}.particle-container{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);z-index:0}.particle{position:absolute;top:50%;left:50%;width:8px;height:8px;background:var(--main-color);border-radius:50%;box-shadow:0 0 10px var(--main-color);transform-origin:center;animation:particleBurst .8s ease-out forwards;animation-delay:var(--delay);opacity:0}.glow-effect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:radial-gradient(circle,var(--primary-glow) 0%,var(--secondary-glow) 40%,transparent 70%);border-radius:50%;animation:glowPulse 1.5s ease-in-out infinite;z-index:0;filter:blur(20px)}.pulse-wave{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:180px;height:180px;border:3px solid var(--main-color);border-radius:50%;opacity:0;animation:pulseOut 1.5s ease-out infinite}.pulse-2{animation-delay:.5s}.pulse-3{animation-delay:1s}.countdown-message{font-size:1.5rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.2em;animation:messageBounce .6s ease-out;text-shadow:0 2px 10px rgba(0,0,0,.5);z-index:1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(0);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}@keyframes numberPulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}@keyframes numberScale{0%{transform:scale(0);opacity:0}50%{transform:scale(1.3)}to{transform:scale(1);opacity:1}}@keyframes rotateRing{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes particleBurst{0%{transform:translate(0) scale(0);opacity:1}50%{opacity:1}to{transform:translate(calc(cos(var(--angle))*120px),calc(sin(var(--angle))*120px)) scale(1);opacity:0}}@keyframes glowPulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.8}}@keyframes pulseOut{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}@keyframes progressFill{0%{stroke-dashoffset:565.48}to{stroke-dashoffset:calc(565.48 * (1 - var(--progress, 0)))}}@keyframes messageBounce{0%{transform:translateY(30px);opacity:0}60%{transform:translateY(-10px)}to{transform:translateY(0);opacity:1}}@media (max-width: 480px){.countdown-container{width:240px;height:240px}.countdown-content{width:160px;height:160px}.countdown-number{font-size:5rem}.ring-1{width:180px;height:180px}.ring-2{width:210px;height:210px}.ring-3{width:240px;height:240px}.countdown-message{font-size:1.2rem}}@media (prefers-contrast: high){.countdown-backdrop{background:rgba(var(--bg-color-rgb),.95)}.countdown-number{text-shadow:0 0 30px var(--primary-glow),0 0 60px var(--primary-glow),0 6px 12px rgba(0,0,0,.5)}.ring{opacity:.6;border-width:3px}}@media (prefers-reduced-motion: reduce){.countdown-container,.countdown-number,.countdown-message,.particle,.glow-effect,.pulse-wave,.ring{animation:none}.countdown-number{opacity:1;transform:scale(1)}}.App{width:100%;max-width:500px;margin:0 auto;padding:var(--spacing-xl);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;box-sizing:border-box}.game-wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);position:relative;padding-top:var(--spacing-md);padding-bottom:var(--spacing-md)}@media (max-width: 480px){.App{padding:0;height:100dvh;min-height:100dvh;overflow:hidden}.game-wrapper{padding:var(--spacing-md);border-radius:var(--radius-md);justify-content:center;overflow:hidden;gap:var(--spacing-md)}}