: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;padding:0;min-width:320px;min-height:100vh;overflow:hidden}#root{width:100%;height:100vh;margin:0;padding:0}.App{padding:2rem}h1{font-size:3.2em;line-height:1.1;color:#646cff}p{font-size:1.2em;color:#888}.matrix-container{position:relative;width:100vw;height:100vh;overflow:hidden;background:#000}.matrix-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.matrix-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;text-align:center;pointer-events:none;perspective:1000px;perspective-origin:center center}.matrix-content h1{font-size:4rem;font-weight:700;color:#0f0;text-shadow:0 0 20px #0F0,0 0 40px #0F0;margin:0;letter-spacing:.5rem;animation:glow 2s ease-in-out infinite alternate;display:inline-block}.matrix-content h1.convergence-text{display:flex;gap:.5rem}.matrix-content h1 .letter{display:inline-block;animation:converge 2.5s cubic-bezier(.22,.61,.36,1) forwards,letterGlow 2.5s ease-out forwards;animation-delay:calc(var(--char-index) * .15s);opacity:0;transform-style:preserve-3d;position:relative}.matrix-content h1 .letter:before{content:attr(data-char);position:absolute;top:0;left:0;right:0;bottom:0;opacity:.3;filter:blur(20px);animation:trailGlow 2.5s ease-out forwards;animation-delay:calc(var(--char-index) * .15s)}@keyframes converge{0%{transform:translate3d(calc(var(--random-x) * 1px),calc(var(--random-y) * 1px),calc(var(--random-z) * 1px)) rotateX(calc(var(--random-rotation-x) * 1deg)) rotateY(calc(var(--random-rotation-y) * 1deg)) rotate(calc(var(--random-rotation) * 1deg)) scale(.1);opacity:0;filter:blur(20px) brightness(3)}20%{opacity:.7}40%{filter:blur(8px) brightness(2)}60%{opacity:1;filter:blur(2px) brightness(1.5)}75%{transform:translateZ(0) rotateX(0) rotateY(0) rotate(0) scale(1.3);filter:blur(0px) brightness(2)}85%{transform:translateZ(0) rotateX(0) rotateY(0) rotate(0) scale(.9)}to{transform:translateZ(0) rotateX(0) rotateY(0) rotate(0) scale(1);opacity:1;filter:blur(0px) brightness(1)}}@keyframes letterGlow{0%{text-shadow:0 0 5px #0F0,0 0 10px #0F0,0 0 20px #0F0}50%{text-shadow:0 0 20px #0F0,0 0 40px #0F0,0 0 60px #0F0,0 0 80px #0F0,0 0 100px #0F0}75%{text-shadow:0 0 30px #0F0,0 0 50px #0F0,0 0 70px #0F0,0 0 90px #0F0}to{text-shadow:0 0 10px #0F0,0 0 20px #0F0,0 0 30px #0F0}}@keyframes trailGlow{0%{opacity:.8;transform:scale(2)}to{opacity:0;transform:scale(1)}}.matrix-content p.subtitle{font-size:1.5rem;color:#0f0;text-shadow:0 0 10px #0F0;margin-top:2rem;opacity:0;animation:fadeInSubtitle 1s ease-out forwards;animation-delay:2s}@keyframes fadeInSubtitle{0%{opacity:0;transform:translateY(20px);filter:blur(5px)}to{opacity:.8;transform:translateY(0);filter:blur(0px)}}@keyframes glow{0%{text-shadow:0 0 10px #0F0,0 0 20px #0F0,0 0 30px #0F0}to{text-shadow:0 0 20px #0F0,0 0 40px #0F0,0 0 60px #0F0,0 0 80px #0F0}}.snake-game-container{min-height:100vh;width:100vw;background:linear-gradient(135deg,#0a0a0a,#1a1a1a);display:flex;align-items:center;justify-content:center;padding:2rem;box-sizing:border-box}.snake-game-content{display:flex;flex-direction:column;align-items:center;gap:2rem}.snake-title{font-size:3rem;font-weight:700;color:#0f0;text-shadow:0 0 10px #0F0,0 0 20px #0F0,0 0 30px #0F0,0 0 40px #0F0;margin:0;letter-spacing:.5rem;animation:titlePulse 2s ease-in-out infinite alternate}@keyframes titlePulse{0%{text-shadow:0 0 10px #0F0,0 0 20px #0F0,0 0 30px #0F0}to{text-shadow:0 0 20px #0F0,0 0 30px #0F0,0 0 40px #0F0,0 0 50px #0F0}}.game-info{display:flex;gap:3rem;margin-bottom:1rem}.score-display,.high-score-display{display:flex;flex-direction:column;align-items:center;gap:.5rem}.score-display .label,.high-score-display .label{font-size:.9rem;color:#0f0;opacity:.7;letter-spacing:.1rem}.score-display .value,.high-score-display .value{font-size:2rem;font-weight:700;color:#0f0;text-shadow:0 0 10px #0F0}.canvas-wrapper{position:relative;box-shadow:0 0 20px #00ff004d,0 0 40px #0f03,inset 0 0 20px #00ff001a;border:2px solid #0F0;border-radius:4px}.game-canvas{display:block;background:#000;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.game-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:pointer;-webkit-tap-highlight-color:transparent}.game-overlay.game-over{background:#000000e6;cursor:default}.overlay-content{text-align:center;color:#0f0;padding:2rem}.overlay-content h2{font-size:2.5rem;margin:0 0 1rem;text-shadow:0 0 10px #0F0,0 0 20px #0F0,0 0 30px #0F0;animation:overlayGlow 1.5s ease-in-out infinite alternate}@keyframes overlayGlow{0%{text-shadow:0 0 10px #0F0,0 0 20px #0F0}to{text-shadow:0 0 20px #0F0,0 0 30px #0F0,0 0 40px #0F0}}.overlay-content p{font-size:1.2rem;margin:.5rem 0;color:#0f0;opacity:.8}.final-score,.final-length{font-size:1.5rem!important;font-weight:700;opacity:1!important;text-shadow:0 0 10px #0F0}.restart-button{margin-top:2rem;padding:1rem 2rem;font-size:1.2rem;font-weight:700;color:#000;background:#0f0;border:none;border-radius:4px;cursor:pointer;box-shadow:0 0 20px #00ff0080,0 0 40px #00ff004d;transition:all .3s ease;letter-spacing:.1rem}.restart-button:hover{background:#0f0;box-shadow:0 0 30px #00ff00b3,0 0 60px #00ff0080;transform:scale(1.05)}.restart-button:active{transform:scale(.95)}.game-controls{display:flex;gap:2rem;margin-top:1rem;flex-wrap:wrap;justify-content:center}.control-info{display:flex;flex-direction:column;align-items:center;gap:.5rem}.control-key{font-size:1rem;font-weight:700;color:#0f0;padding:.5rem 1rem;border:2px solid #0F0;border-radius:4px;box-shadow:0 0 10px #00ff004d,inset 0 0 10px #00ff001a;min-width:60px;text-align:center}.control-desc{font-size:.9rem;color:#0f0;opacity:.7}.virtual-controls{display:none;flex-direction:column;align-items:center;gap:.5rem;margin-top:1.5rem;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.control-row{display:flex;gap:.5rem;justify-content:center}.control-button{width:60px;height:60px;font-size:1.8rem;font-weight:700;color:#000;background:#0f0;border:2px solid #0F0;border-radius:8px;cursor:pointer;box-shadow:0 0 15px #00ff0080,inset 0 0 10px #0f03;transition:all .2s ease;display:flex;align-items:center;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.control-button:active:not(:disabled){transform:scale(.95);box-shadow:0 0 25px #0f0c,inset 0 0 15px #00ff004d;background:#0f0}.control-button:disabled{opacity:.3;cursor:not-allowed}.control-button.pause-button{background:#0f0;font-size:1.5rem}.desktop-only{display:flex}@media(max-width:768px){.desktop-only{display:none}.virtual-controls{display:flex}.control-button{width:70px;height:70px;font-size:2rem}.snake-title{font-size:2rem;letter-spacing:.3rem}.game-info{gap:2rem}.score-display .value,.high-score-display .value{font-size:1.5rem}.overlay-content h2{font-size:2rem}.overlay-content p{font-size:1rem}.game-controls{gap:1rem}.control-key{font-size:.9rem;padding:.4rem .8rem;min-width:50px}.control-desc{font-size:.8rem}}@media(max-width:600px){.snake-game-container{padding:.5rem}.snake-title{font-size:1.5rem;letter-spacing:.2rem}.game-info{gap:1.5rem;margin-bottom:.5rem}.score-display .label,.high-score-display .label{font-size:.8rem}.score-display .value,.high-score-display .value{font-size:1.2rem}.canvas-wrapper{box-shadow:0 0 15px #00ff004d,0 0 30px #0f03}.overlay-content h2{font-size:1.5rem}.overlay-content p{font-size:.9rem}.final-score,.final-length{font-size:1.2rem!important}.restart-button{padding:.8rem 1.5rem;font-size:1rem}.virtual-controls{margin-top:1rem}.control-button{width:65px;height:65px;font-size:1.8rem}}@media(max-width:400px){.snake-title{font-size:1.2rem;letter-spacing:.15rem}.game-info{gap:1rem}.control-button{width:55px;height:55px;font-size:1.5rem}.control-button.pause-button{font-size:1.2rem}}
