*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.6;color:#fff;background:linear-gradient(135deg,#0f0f23,#1a1a2e,#16213e 50%,#0f3460);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--primary-color: #00d4ff;--secondary-color: #ff6b6b;--accent-color: #4ecdc4;--background-dark: #0f0f23;--background-medium: #1a1a2e;--text-primary: #ffffff;--text-secondary: #e0e0e0;--text-muted: #a0a0a0;--border-radius: 12px;--shadow-light: 0 4px 6px rgba(0, 0, 0, .1);--shadow-medium: 0 8px 25px rgba(0, 0, 0, .15);--shadow-heavy: 0 15px 35px rgba(0, 0, 0, .2);--transition-fast: .2s ease;--transition-medium: .3s ease;--transition-slow: .5s ease}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin-bottom:.5em;letter-spacing:-.02em}h1{font-size:clamp(2.5rem,5vw,4rem);background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}h2{font-size:clamp(1.8rem,4vw,2.8rem)}p{margin-bottom:1em;color:var(--text-secondary)}@keyframes slideInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes glow{0%,to{box-shadow:0 0 20px #00d4ff4d}50%{box-shadow:0 0 40px #00d4ff99}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.game-description{text-align:center;font-size:clamp(1.1rem,2.5vw,1.3rem);margin:3rem auto;color:var(--text-secondary);max-width:800px;padding:2rem;background:#ffffff0d;border-radius:var(--border-radius);border:1px solid rgba(0,212,255,.2);backdrop-filter:blur(10px);animation:fadeInUp .8s ease-out;box-shadow:var(--shadow-medium)}#about,#how-to-play{padding:3rem 2rem;max-width:900px;margin:3rem auto;background:#ffffff14;border-radius:var(--border-radius);border:1px solid rgba(0,212,255,.3);backdrop-filter:blur(15px);box-shadow:var(--shadow-heavy);animation:fadeInUp .8s ease-out;transition:transform var(--transition-medium),box-shadow var(--transition-medium)}#about:hover,#how-to-play:hover{transform:translateY(-5px);box-shadow:0 20px 40px #00d4ff26}#about h2,#how-to-play h2{font-size:clamp(1.8rem,4vw,2.5rem);color:var(--primary-color);text-align:center;margin-bottom:2rem;position:relative}#about h2:after,#how-to-play h2:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));border-radius:2px}#about p,#how-to-play p,#how-to-play ul{font-size:clamp(1rem,2vw,1.2rem);line-height:1.8;color:var(--text-secondary);margin-bottom:1.5rem}#how-to-play ul{list-style:none;padding-left:0}#how-to-play li{margin-bottom:1.5rem;padding:1rem 1.5rem;background:#00d4ff1a;border-radius:8px;border-left:4px solid var(--primary-color);position:relative;transition:all var(--transition-medium)}#how-to-play li:hover{background:#00d4ff26;transform:translate(5px)}#how-to-play li strong{color:var(--primary-color);font-weight:600}.modern-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:#fff;border:none;border-radius:var(--border-radius);font-weight:600;text-decoration:none;transition:all var(--transition-medium);cursor:pointer;box-shadow:var(--shadow-medium)}.modern-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-heavy);filter:brightness(1.1)}.modern-btn:active{transform:translateY(0)}.grid{display:grid;gap:2rem}.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.card{background:#ffffff14;border-radius:var(--border-radius);padding:2rem;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);transition:all var(--transition-medium);box-shadow:var(--shadow-light)}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-heavy);border-color:#00d4ff4d}.loading{position:relative;overflow:hidden}.loading:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:loading 1.5s infinite}@keyframes loading{0%{left:-100%}to{left:100%}}:focus{outline:2px solid var(--primary-color);outline-offset:2px;border-radius:4px}:focus:not(:focus-visible){outline:none}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,var(--accent-color),var(--primary-color))}::selection{background:#00d4ff4d;color:var(--text-primary)}@media (max-width: 768px){#about,#how-to-play{padding:2rem 1rem;margin:2rem 1rem}.game-description{padding:1.5rem;margin:2rem 1rem}#how-to-play li{padding:.75rem 1rem}}@media (max-width: 480px){#about,#how-to-play{padding:1.5rem 1rem}.game-description{padding:1rem}}@media (prefers-contrast: high){:root{--primary-color: #ffffff;--text-secondary: #ffffff}body{background:#000}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media print{body{background:#fff!important;color:#000!important}#about,#how-to-play{border:2px solid black!important;background:#fff!important}}[data-v-e530732c]:root{--primary-color: #00d4ff;--secondary-color: #ff6b6b;--accent-color: #4ecdc4;--success-color: #00ff88;--warning-color: #ffaa00;--danger-color: #ff4444;--background-dark: #0f0f23;--background-medium: #1a1a2e;--background-light: #2a2a3e;--text-primary: #ffffff;--text-secondary: #e0e0e0;--border-radius: 12px;--border-radius-large: 20px;--shadow-light: 0 4px 6px rgba(0, 0, 0, .1);--shadow-medium: 0 8px 25px rgba(0, 0, 0, .15);--shadow-heavy: 0 15px 35px rgba(0, 0, 0, .2);--shadow-glow: 0 0 30px rgba(0, 212, 255, .3);--transition: .3s cubic-bezier(.4, 0, .2, 1);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1)}.tetris-container[data-v-e530732c]{width:100%;max-width:1200px;margin:0 auto;padding:clamp(1rem,3vw,2rem);position:relative}.start-screen[data-v-e530732c]{background:linear-gradient(135deg,var(--background-dark) 0%,var(--background-medium) 50%,var(--background-light) 100%);border-radius:var(--border-radius-large);padding:clamp(2rem,5vw,4rem);text-align:center;box-shadow:var(--shadow-heavy);border:1px solid rgba(0,212,255,.2);backdrop-filter:blur(20px);position:relative;overflow:hidden}.start-screen[data-v-e530732c]:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(0,212,255,.1) 0%,transparent 70%);animation:rotate-e530732c 20s linear infinite}@keyframes rotate-e530732c{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.start-content[data-v-e530732c]{position:relative;z-index:1}.game-title[data-v-e530732c]{font-size:clamp(2.5rem,6vw,4rem);font-weight:800;background:linear-gradient(135deg,var(--primary-color),var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;text-shadow:0 0 30px rgba(0,212,255,.5);animation:glow-e530732c 2s ease-in-out infinite alternate}@keyframes glow-e530732c{0%{filter:brightness(1) drop-shadow(0 0 10px rgba(0,212,255,.3))}to{filter:brightness(1.2) drop-shadow(0 0 20px rgba(0,212,255,.6))}}.game-description[data-v-e530732c]{font-size:clamp(1.1rem,2.5vw,1.4rem);color:var(--text-primary);margin-bottom:2rem;line-height:1.6;font-weight:500}.features[data-v-e530732c]{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:2rem 0}.feature[data-v-e530732c]{background:#ffffff0d;padding:1rem;border-radius:var(--border-radius);border:1px solid rgba(0,212,255,.2);font-weight:500;transition:all var(--transition);backdrop-filter:blur(10px)}.feature[data-v-e530732c]:hover{transform:translateY(-5px);background:#00d4ff1a;border-color:var(--primary-color);box-shadow:var(--shadow-medium)}.start-button[data-v-e530732c]{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border:none;padding:1.2rem 3rem;border-radius:50px;color:#fff;font-size:1.3rem;font-weight:700;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-medium);position:relative;overflow:hidden;margin:2rem 0}.start-button[data-v-e530732c]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.start-button[data-v-e530732c]:hover:before{left:100%}.start-button[data-v-e530732c]:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-heavy);filter:brightness(1.1)}.start-button[data-v-e530732c]:active{transform:translateY(-1px) scale(1.02)}.controls-info[data-v-e530732c]{background:#0009;padding:1.5rem;border-radius:var(--border-radius);margin-top:2rem;border:2px solid rgba(255,255,255,.2);box-shadow:var(--shadow-medium)}.controls-info h3[data-v-e530732c]{color:var(--primary-color);margin-bottom:1rem;font-size:1.2rem}.control-item[data-v-e530732c]{padding:.5rem 0;color:var(--text-primary);font-family:Courier New,monospace;border-bottom:1px solid rgba(255,255,255,.2);font-weight:500}.control-item[data-v-e530732c]:last-child{border-bottom:none}.game-screen[data-v-e530732c]{position:relative;background:linear-gradient(135deg,var(--background-dark) 0%,var(--background-medium) 100%);border-radius:var(--border-radius-large);padding:clamp(1rem,3vw,2rem);box-shadow:var(--shadow-heavy);border:1px solid rgba(0,212,255,.2);backdrop-filter:blur(20px)}.game-area[data-v-e530732c]{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1rem,3vw,2rem);align-items:start;justify-items:center}.game-info[data-v-e530732c]{display:flex;flex-direction:column;gap:1.5rem;min-width:200px}.score-panel[data-v-e530732c]{background:#0009;padding:1.5rem;border-radius:var(--border-radius);border:2px solid rgba(0,212,255,.5);backdrop-filter:blur(15px);box-shadow:var(--shadow-heavy)}.score-item[data-v-e530732c]{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.score-item[data-v-e530732c]:last-child{border-bottom:none}.score-item .label[data-v-e530732c]{color:var(--text-primary);font-weight:600}.score-item .value[data-v-e530732c]{color:var(--primary-color);font-weight:700;font-size:1.2rem;text-shadow:0 0 10px rgba(0,212,255,.5)}.next-piece[data-v-e530732c]{background:#0009;padding:1.5rem;border-radius:var(--border-radius);border:2px solid rgba(0,212,255,.5);backdrop-filter:blur(15px);text-align:center;box-shadow:var(--shadow-heavy)}.next-piece h3[data-v-e530732c]{color:var(--primary-color);margin-bottom:1rem;font-size:1.1rem}.next-preview[data-v-e530732c]{display:grid;gap:2px;justify-content:center;padding:1rem;background:#0000004d;border-radius:var(--border-radius)}.next-row[data-v-e530732c]{display:grid;grid-template-columns:repeat(4,20px);gap:2px}.next-cell[data-v-e530732c]{width:20px;height:20px;border-radius:3px;border:1px solid rgba(255,255,255,.1);transition:all var(--transition-fast)}.next-cell.filled[data-v-e530732c]{border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 0 10px #fff3,0 0 10px #00d4ff4d}.game-board[data-v-e530732c]{display:grid;grid-template-rows:repeat(20,28px);gap:1px;background:#0009;padding:1rem;border-radius:var(--border-radius);border:2px solid var(--primary-color);box-shadow:var(--shadow-glow),inset 0 0 20px #00000080;position:relative}.game-board[data-v-e530732c]:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,var(--primary-color),var(--accent-color),var(--primary-color));border-radius:var(--border-radius);z-index:-1;animation:borderGlow-e530732c 3s ease-in-out infinite alternate}@keyframes borderGlow-e530732c{0%{opacity:.5}to{opacity:1}}.board-row[data-v-e530732c]{display:grid;grid-template-columns:repeat(10,28px);gap:1px}.board-cell[data-v-e530732c]{width:28px;height:28px;border:1px solid rgba(255,255,255,.1);border-radius:3px;transition:all var(--transition-fast);position:relative}.board-cell.filled[data-v-e530732c]{border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 0 10px #fff3,0 0 5px #00000080}.board-cell.filled[data-v-e530732c]:before{content:"";position:absolute;inset:2px;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent);border-radius:2px}.game-controls[data-v-e530732c]{display:flex;flex-direction:column;gap:1rem;min-width:150px}.control-btn[data-v-e530732c]{background:#00d4ff1a;border:2px solid var(--primary-color);padding:1rem 1.5rem;border-radius:var(--border-radius);color:var(--primary-color);font-weight:600;cursor:pointer;transition:all var(--transition);backdrop-filter:blur(10px);position:relative;overflow:hidden}.control-btn[data-v-e530732c]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,212,255,.2),transparent);transition:left .5s ease}.control-btn[data-v-e530732c]:hover:before{left:100%}.control-btn[data-v-e530732c]:hover{background:#00d4ff33;transform:translateY(-2px);box-shadow:var(--shadow-medium)}.stop-btn[data-v-e530732c]{background:#ff44441a;border-color:var(--danger-color);color:var(--danger-color)}.stop-btn[data-v-e530732c]:hover{background:#f443}.game-over-overlay[data-v-e530732c]{position:absolute;inset:0;background:#000000f2;display:flex;justify-content:center;align-items:center;border-radius:var(--border-radius-large);backdrop-filter:blur(20px);animation:fadeIn-e530732c .5s ease-out}@keyframes fadeIn-e530732c{0%{opacity:0}to{opacity:1}}.game-over-content[data-v-e530732c]{background:linear-gradient(135deg,var(--background-dark) 0%,var(--background-medium) 100%);padding:clamp(2rem,5vw,4rem);border-radius:var(--border-radius-large);text-align:center;border:2px solid var(--danger-color);box-shadow:0 0 50px #ff44444d,var(--shadow-heavy);position:relative;overflow:hidden;animation:slideUp-e530732c .5s ease-out}@keyframes slideUp-e530732c{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.game-over-content[data-v-e530732c]:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,68,68,.1) 0%,transparent 70%);animation:rotate-e530732c 10s linear infinite}.game-over-content[data-v-e530732c]>*{position:relative;z-index:1}.game-over-content h2[data-v-e530732c]{color:var(--danger-color);font-size:clamp(2rem,5vw,3rem);margin-bottom:1.5rem;text-shadow:0 0 20px rgba(255,68,68,.5);animation:pulse-e530732c 2s ease-in-out infinite}@keyframes pulse-e530732c{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.final-score[data-v-e530732c],.final-lines[data-v-e530732c]{font-size:clamp(1.2rem,3vw,1.5rem);margin:1rem 0;color:var(--primary-color);font-weight:600}.restart-btn[data-v-e530732c],.menu-btn[data-v-e530732c]{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border:none;padding:1rem 2rem;margin:.5rem;border-radius:50px;color:#fff;font-weight:700;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-medium);position:relative;overflow:hidden}.restart-btn[data-v-e530732c]:before,.menu-btn[data-v-e530732c]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.restart-btn[data-v-e530732c]:hover:before,.menu-btn[data-v-e530732c]:hover:before{left:100%}.restart-btn[data-v-e530732c]:hover,.menu-btn[data-v-e530732c]:hover{transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-heavy);filter:brightness(1.1)}@media (max-width: 1024px){.game-area[data-v-e530732c]{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:1.5rem}.game-info[data-v-e530732c]{order:2;display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:400px}.game-board[data-v-e530732c]{order:1;justify-self:center}.game-controls[data-v-e530732c]{order:3;flex-direction:row;justify-content:center;width:100%;max-width:400px}.mobile-controls[data-v-e530732c]{order:4;display:flex;flex-direction:column;gap:1rem;width:100%;max-width:400px;justify-self:center}}.mobile-controls[data-v-e530732c]{display:none;flex-direction:column;gap:1rem;margin-top:1rem;padding:1rem;background:#1a1a2ecc;border-radius:var(--border-radius);backdrop-filter:blur(10px);border:1px solid rgba(0,212,255,.2)}.touch-controls-row[data-v-e530732c]{display:flex;justify-content:center;gap:1rem}.touch-btn[data-v-e530732c]{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border:none;border-radius:50px;color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-medium);position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.move-btn[data-v-e530732c],.drop-btn[data-v-e530732c]{width:60px;height:60px;font-size:1.5rem}.rotate-btn[data-v-e530732c],.hard-drop-btn[data-v-e530732c]{padding:.8rem 1.5rem;font-size:1rem;min-width:120px}.touch-btn[data-v-e530732c]:active{transform:scale(.95);box-shadow:var(--shadow-light)}.touch-btn[data-v-e530732c]:hover{transform:translateY(-2px);box-shadow:var(--shadow-heavy);filter:brightness(1.1)}.touch-btn[data-v-e530732c]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .3s ease}.touch-btn[data-v-e530732c]:active:before{left:100%}@media (max-width: 768px){.start-screen[data-v-e530732c]{padding:2rem 1rem}.features[data-v-e530732c]{grid-template-columns:1fr}.game-board[data-v-e530732c]{grid-template-rows:repeat(20,24px)}.board-row[data-v-e530732c]{grid-template-columns:repeat(10,24px)}.board-cell[data-v-e530732c]{width:24px;height:24px}.mobile-controls[data-v-e530732c]{display:flex}}@media (max-width: 480px){.tetris-container[data-v-e530732c]{padding:1rem .5rem}.game-board[data-v-e530732c]{grid-template-rows:repeat(20,20px);padding:.5rem}.board-row[data-v-e530732c]{grid-template-columns:repeat(10,20px)}.board-cell[data-v-e530732c]{width:20px;height:20px}.game-title[data-v-e530732c]{font-size:2rem}.game-info[data-v-e530732c]{grid-template-columns:1fr}.game-controls[data-v-e530732c]{flex-direction:column}.mobile-controls[data-v-e530732c]{display:flex;padding:.8rem;margin-top:.5rem}.touch-controls-row[data-v-e530732c]{gap:.8rem}.move-btn[data-v-e530732c],.drop-btn[data-v-e530732c]{width:50px;height:50px;font-size:1.3rem}.rotate-btn[data-v-e530732c],.hard-drop-btn[data-v-e530732c]{padding:.6rem 1.2rem;font-size:.9rem;min-width:100px}}@media (prefers-reduced-motion: reduce){[data-v-e530732c],[data-v-e530732c]:before,[data-v-e530732c]:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast: high){[data-v-e530732c]:root{--primary-color: #ffffff;--text-secondary: #ffffff;--background-dark: #000000;--background-medium: #000000}.board-cell[data-v-e530732c],.next-cell[data-v-e530732c]{border-color:#fff}}@media (prefers-color-scheme: dark){[data-v-e530732c]:root{--background-dark: #000000;--background-medium: #111111;--background-light: #222222}}:root{--primary-color: #00d4ff;--secondary-color: #ff6b6b;--accent-color: #4ecdc4;--background-dark: #1a1a2e;--background-medium: #2d2d44;--background-light: #3a3a5c;--text-primary: #ffffff;--text-secondary: #e0e0e0;--text-accent: #00d4ff;--border-radius: 12px;--shadow-light: 0 4px 6px rgba(0, 0, 0, .1);--shadow-medium: 0 8px 25px rgba(0, 0, 0, .15);--shadow-heavy: 0 15px 35px rgba(0, 0, 0, .2);--transition: .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,var(--background-dark) 0%,var(--background-medium) 50%,var(--background-light) 100%);color:var(--text-primary);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,var(--background-dark) 0%,var(--background-medium) 50%,var(--background-light) 100%)}.navbar{position:fixed;top:0;left:0;right:0;background:#1a1a2ef2;backdrop-filter:blur(15px);border-bottom:2px solid var(--primary-color);z-index:1000;padding:1rem 0}.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 2rem}.nav-brand{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:700;color:var(--primary-color)}.tetris-icon{font-size:2rem}.brand-text{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav-menu{display:flex;list-style:none;gap:2rem}.nav-item{position:relative}.nav-link{color:var(--text-primary);text-decoration:none;font-weight:500;padding:.5rem 1rem;border-radius:var(--border-radius);transition:all var(--transition);position:relative;overflow:hidden}.hamburger-menu{display:none;flex-direction:column;justify-content:space-around;width:30px;height:30px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001}.hamburger-line{width:100%;height:3px;background:var(--primary-color);border-radius:2px;transition:all .3s ease;transform-origin:center}.hamburger-menu.active .hamburger-line:nth-child(1){transform:rotate(45deg) translate(7px,7px)}.hamburger-menu.active .hamburger-line:nth-child(2){opacity:0}.hamburger-menu.active .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}@media (max-width: 768px){.navbar{padding:1rem 0;background:#000000f2;backdrop-filter:blur(20px)}.nav-container{flex-direction:row;justify-content:space-between;align-items:center;padding:0 1rem}.nav-brand{justify-content:flex-start;margin-bottom:0}.brand-text{font-size:1.5rem;font-weight:700}.tetris-icon{font-size:1.8rem}.hamburger-menu{display:flex}.nav-menu{position:fixed;top:70px;left:0;right:0;background:#000000fa;backdrop-filter:blur(20px);flex-direction:column;width:100%;gap:0;padding:2rem 1rem;transform:translateY(-100%);opacity:0;visibility:hidden;transition:all .3s ease;border-top:2px solid var(--primary-color);z-index:999}.nav-menu.mobile-menu-open{transform:translateY(0);opacity:1;visibility:visible}.nav-item{margin-bottom:1rem}.nav-link{width:100%;justify-content:center;padding:1rem 1.5rem;font-size:1.1rem;font-weight:600;border-radius:12px;background:#00d4ff1a;border:2px solid rgba(0,212,255,.3);transition:all .3s ease;min-height:50px;display:flex;align-items:center}.nav-link:hover,.nav-link:active{background:#00d4ff33;border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 15px #00d4ff4d}.hero-section{padding:2rem 0;margin-top:1rem}.hero-title{font-size:2.2rem;line-height:1.2;margin-bottom:1rem;padding:0 1rem}.hero-subtitle{font-size:1.1rem;margin-bottom:2rem;padding:0 1rem}.features-grid,.games-grid,.controls-grid{grid-template-columns:1fr}.control-item{flex-direction:column;gap:.5rem;text-align:center}}@media (max-width: 480px){.container{padding:0 .75rem}.navbar{padding:1rem 0}.nav-container{gap:1rem;padding:0 .75rem}.brand-text{font-size:1.5rem}.tetris-icon{font-size:1.8rem}.nav-menu{gap:.75rem}.nav-link{padding:.875rem 1rem;font-size:1rem;min-height:45px;border-radius:10px}.hero-title{font-size:1.8rem;padding:0 .75rem}.hero-subtitle{font-size:1rem;padding:0 .75rem}.section-title{font-size:1.8rem}.feature-card,.game-card,.control-group,.gameplay-tips{padding:1.25rem;margin:0 .5rem}}html{scroll-behavior:smooth}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(5deg)}}.feature-card,.game-card,.control-group,.gameplay-tips{animation:fadeInUp .6s ease-out}.tetris-icon{font-size:clamp(2rem,5vw,3rem);animation:float 3s ease-in-out infinite}.nav-link:hover{color:var(--primary-color);background:#00d4ff1a;transform:translateY(-2px)}.hero-section{padding:120px 2rem 4rem;text-align:center;background:linear-gradient(135deg,var(--background-dark) 0%,var(--background-medium) 100%);position:relative;overflow:hidden;contain:layout style paint}.hero-section:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,212,255,.1),transparent);animation:shimmer 3s infinite;will-change:transform}@keyframes shimmer{0%{transform:translate(0)}to{transform:translate(200%)}}.hero-content{max-width:1200px;margin:0 auto;position:relative;z-index:1}.hero-title{font-size:clamp(2.5rem,6vw,4rem);font-weight:800;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;letter-spacing:-.02em}.hero-subtitle{font-size:clamp(1.1rem,3vw,1.5rem);color:var(--text-secondary);margin-bottom:3rem;font-weight:500}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.section-title{font-size:clamp(2rem,4vw,3rem);color:var(--primary-color);text-align:center;margin-bottom:3rem;font-weight:700;position:relative}.section-title:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:80px;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));border-radius:2px}.game-intro{padding:4rem 0;background:#ffffff0d}.game-description{font-size:clamp(1.1rem,2.5vw,1.3rem);color:var(--text-primary);text-align:center;line-height:1.8;max-width:900px;margin:0 auto;font-weight:500}.features-section{padding:4rem 0;background:var(--background-medium)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}.feature-card{background:#ffffff1a;padding:2rem;border-radius:var(--border-radius);border:2px solid rgba(0,212,255,.3);text-align:center;transition:all var(--transition);backdrop-filter:blur(15px);position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,212,255,.1),transparent);transition:transform .5s ease;will-change:transform}.feature-card:hover:before{transform:translate(200%)}.feature-card:hover{transform:translateY(-10px);border-color:var(--primary-color);box-shadow:var(--shadow-heavy)}.feature-icon{font-size:3rem;margin-bottom:1rem;display:block}.feature-title{font-size:1.5rem;color:var(--primary-color);margin-bottom:1rem;font-weight:600}.feature-description{color:var(--text-secondary);line-height:1.6;font-size:1rem}.how-to-play-section{padding:4rem 0;background:#ffffff0d}.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:3rem;margin-top:2rem}.control-group{background:#0009;padding:2rem;border-radius:var(--border-radius);border:2px solid rgba(0,212,255,.4);backdrop-filter:blur(15px)}.control-title{color:var(--primary-color);font-size:1.5rem;margin-bottom:1.5rem;font-weight:600}.control-list{display:flex;flex-direction:column;gap:1rem}.control-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#ffffff1a;border-radius:8px;border:1px solid rgba(0,212,255,.2)}.control-key{background:var(--primary-color);color:var(--background-dark);padding:.5rem 1rem;border-radius:6px;font-weight:700;font-family:Courier New,monospace}.control-action{color:var(--text-primary);font-weight:500}.gameplay-tips{background:#0009;padding:2rem;border-radius:var(--border-radius);border:2px solid rgba(0,212,255,.4);backdrop-filter:blur(15px)}.tips-title{color:var(--primary-color);font-size:1.5rem;margin-bottom:1.5rem;font-weight:600}.tips-list{list-style:none;display:flex;flex-direction:column;gap:1rem}.tips-list li{padding:1rem;background:#00d4ff1a;border-radius:8px;border-left:4px solid var(--primary-color);color:var(--text-primary);font-weight:500;position:relative}.tips-list li:before{content:"💡";position:absolute;left:-2rem;top:50%;transform:translateY(-50%);font-size:1.2rem}.more-games-section{padding:4rem 0;background:var(--background-medium)}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}.game-card{background:#ffffff1a;padding:2rem;border-radius:var(--border-radius);border:2px solid rgba(0,212,255,.3);text-align:center;transition:all var(--transition);backdrop-filter:blur(15px);cursor:pointer;position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,212,255,.1),transparent);transition:left .5s ease}.game-card:hover:before{left:100%}.game-card:hover{transform:translateY(-10px);border-color:var(--primary-color);box-shadow:var(--shadow-heavy)}.game-icon{font-size:3rem;margin-bottom:1rem;display:block}.game-title{font-size:1.5rem;color:var(--primary-color);margin-bottom:1rem;font-weight:600}.game-description{color:var(--text-secondary);line-height:1.6;font-size:1rem}.subtitle{font-size:clamp(1rem,2.5vw,1.3rem);color:var(--text-secondary);font-weight:400;margin-bottom:1.5rem}.main-nav{display:flex;justify-content:center;gap:clamp(1rem,3vw,2rem);flex-wrap:wrap;margin-top:1rem}.nav-link{display:inline-flex;align-items:center;padding:.75rem 1.5rem;background:#ffffff1a;border:1px solid rgba(0,212,255,.3);border-radius:var(--border-radius);color:var(--text-primary);text-decoration:none;font-weight:500;transition:all var(--transition);backdrop-filter:blur(10px);position:relative;overflow:hidden}.nav-link:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,212,255,.2),transparent);transition:left .5s ease}.nav-link:hover:before{left:100%}.nav-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-medium);border-color:var(--primary-color);background:#00d4ff26}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;padding:clamp(1rem,3vw,2rem);max-width:1200px;margin:0 auto;width:100%}.footer{background:#0009;padding:clamp(1rem,2vw,2rem);text-align:center;border-top:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}.footer-content{max-width:1200px;margin:0 auto}.footer p{margin-bottom:1rem;color:var(--text-secondary)}.footer-nav{display:flex;justify-content:center;align-items:center;gap:2rem;margin-bottom:1rem;flex-wrap:wrap}.footer-link{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:all var(--transition);padding:.5rem 1rem;border-radius:var(--border-radius)}.footer-link:hover{color:var(--primary-color);background:#00d4ff1a;transform:translateY(-2px)}.social-links{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}.share-btn{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border:none;padding:.75rem 1.5rem;border-radius:var(--border-radius);color:#fff;font-weight:600;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-light);display:inline-flex;align-items:center;gap:.5rem}.share-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-heavy);filter:brightness(1.1)}.share-btn:active{transform:translateY(0)}@media (max-width: 1024px){.main-content{padding:1.5rem}}@media (max-width: 768px){.header{padding:1.5rem 1rem}.title{flex-direction:column;gap:.5rem}.main-nav{gap:1rem;margin-top:1.5rem}.nav-link{padding:.6rem 1.2rem;font-size:.9rem}.main-content{padding:1rem}.footer{padding:1.5rem 1rem}.social-links{flex-direction:column;gap:.5rem}}@media (max-width: 480px){.header{padding:1rem .5rem}.main-nav{flex-direction:column;align-items:center;gap:.75rem}.nav-link{width:100%;max-width:200px;justify-content:center}.main-content{padding:.5rem}}@media (prefers-reduced-motion: no-preference){.header{animation:slideDown .8s ease-out}.main-content>*{animation:fadeInUp .8s ease-out}.footer{animation:slideUp .8s ease-out}}@keyframes slideDown{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@media (prefers-color-scheme: dark){:root{--background-dark: #000000;--background-medium: #111111}}@media (prefers-contrast: high){:root{--primary-color: #ffffff;--text-secondary: #ffffff}.nav-link{border-color:#fff}}@media print{.header,.footer{background:#fff!important;color:#000!important}.nav-link,.share-btn{display:none}}@media (max-width: 480px){.title{font-size:1.5rem}.header{padding:1rem .5rem}}