.app{min-height:100vh;background:linear-gradient(135deg,#171717,#262626);padding:1rem;display:flex;align-items:center;justify-content:center}.container{max-width:800px;width:100%}.header{background:linear-gradient(135deg,#9e7fff,#38bdf8);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 8px 32px #9e7fff4d}.header-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{width:32px;height:32px;color:#fff;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));flex-shrink:0}.logo h1{font-size:clamp(1.25rem,4vw,2rem);font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.2);white-space:nowrap}.score-board{display:flex;gap:1.5rem;align-items:center;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.75rem 1.25rem;border-radius:12px;border:1px solid rgba(255,255,255,.2)}.score-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.score-label{font-size:.75rem;color:#fffc;text-transform:uppercase;letter-spacing:.05em;font-weight:600}.score-value{font-size:clamp(1.25rem,3vw,1.75rem);font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.2)}.trophy-icon{width:18px;height:18px;color:#f59e0b;margin-bottom:.25rem}.score-divider{width:1px;height:36px;background:#ffffff4d}.game-container{background:#262626;border-radius:16px;padding:1.5rem;box-shadow:0 8px 32px #0006}.game-wrapper{display:flex;justify-content:center;margin-bottom:1.5rem;overflow:hidden}.game-board{position:relative;background:#171717;border-radius:12px;overflow:hidden;box-shadow:inset 0 4px 16px #00000080;border:2px solid #2F2F2F;max-width:100%}.grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(20,1fr);grid-template-rows:repeat(20,1fr)}.grid-cell{border:1px solid rgba(47,47,47,.3)}.snake-segment{position:absolute;background:linear-gradient(135deg,#9e7fff,#38bdf8);border-radius:4px;transition:all .05s ease;box-shadow:0 2px 8px #9e7fff66}.snake-head{background:linear-gradient(135deg,#f472b6,#9e7fff);box-shadow:0 2px 12px #f472b699;z-index:10}.food{position:absolute;background:radial-gradient(circle,#10b981,#059669);border-radius:50%;animation:pulse 1s ease-in-out infinite;box-shadow:0 0 16px #10b98199}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}.game-over-overlay,.start-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#171717f2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease;padding:1rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-over-content,.start-content{text-align:center;padding:1.5rem;animation:slideUp .4s ease;max-width:90%}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.game-over-content h2,.start-content h2{font-size:clamp(1.75rem,5vw,2.5rem);font-weight:700;background:linear-gradient(135deg,#9e7fff,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}.final-score{font-size:clamp(1.125rem,3vw,1.5rem);color:#a3a3a3;margin-bottom:.5rem}.new-record{font-size:clamp(1rem,2.5vw,1.25rem);color:#10b981;font-weight:600;margin-bottom:1.5rem;animation:bounce .6s ease}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.start-content p{font-size:clamp(.875rem,2vw,1.125rem);color:#a3a3a3;margin-bottom:1.5rem}.controls{display:flex;gap:.75rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.5rem;border:none;border-radius:12px;font-size:clamp(.875rem,2vw,1rem);font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit;min-width:120px;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,#9e7fff,#38bdf8);color:#fff;box-shadow:0 4px 16px #9e7fff66}.btn-primary:hover:not(:disabled){box-shadow:0 6px 24px #9e7fff99}.btn-secondary{background:#2f2f2f;color:#fff;border:1px solid #404040}.btn-secondary:hover:not(:disabled){background:#404040;border-color:#525252}.instructions{background:#1f1f1f;border-radius:12px;padding:1.25rem;border:1px solid #2F2F2F}.instructions h3{font-size:clamp(1rem,2.5vw,1.25rem);font-weight:600;color:#fff;margin-bottom:1rem}.instruction-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-bottom:1rem}.instruction-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#262626;border-radius:8px;border:1px solid #2F2F2F}.key{display:inline-flex;align-items:center;justify-content:center;min-width:50px;padding:.5rem .75rem;background:linear-gradient(135deg,#9e7fff,#38bdf8);color:#fff;border-radius:6px;font-weight:600;font-size:.75rem;box-shadow:0 2px 8px #9e7fff4d;flex-shrink:0}.instruction-item span:last-child{color:#a3a3a3;font-size:clamp(.75rem,1.5vw,.875rem)}.tip{color:#a3a3a3;font-size:clamp(.75rem,1.5vw,.875rem);text-align:center;padding-top:1rem;border-top:1px solid #2F2F2F;line-height:1.5}@media (max-width: 768px){.app{padding:.75rem}.header{padding:1.25rem;margin-bottom:1.25rem}.header-content{gap:1rem}.logo-icon{width:28px;height:28px}.score-board{gap:1.25rem;padding:.625rem 1rem}.score-divider{height:32px}.game-container{padding:1.25rem}.game-board{width:min(480px,100%)!important;height:min(480px,100%)!important}.controls{gap:.625rem}.btn{padding:.75rem 1.25rem;min-width:110px}.instruction-grid{grid-template-columns:1fr;gap:.625rem}}@media (max-width: 480px){.app{padding:1rem .5rem .5rem;align-items:flex-start}.header{padding:1rem;margin-bottom:1rem;border-radius:12px}.header-content{flex-direction:column;align-items:stretch;gap:1rem}.logo{justify-content:center;gap:.625rem}.logo-icon{width:24px;height:24px}.score-board{width:100%;justify-content:space-around;gap:1rem;padding:.75rem 1rem}.score-label{font-size:.625rem}.trophy-icon{width:16px;height:16px}.score-divider{height:28px}.game-container{padding:1rem;border-radius:12px}.game-wrapper{margin-bottom:1rem}.game-board{width:min(360px,calc(100vw - 3rem))!important;height:min(360px,calc(100vw - 3rem))!important;border-radius:8px}.snake-segment,.food{border-radius:3px}.controls{flex-direction:column;gap:.5rem}.btn{width:100%;padding:.875rem 1rem;min-width:unset}.instructions{padding:1rem;border-radius:8px}.instruction-item{padding:.625rem;gap:.625rem}.key{min-width:45px;padding:.375rem .625rem;font-size:.625rem}.game-over-content,.start-content{padding:1rem}}@media (max-width: 360px){.app{padding:.375rem}.header{padding:.875rem;margin-bottom:.875rem}.game-container{padding:.875rem}.game-board{width:min(300px,calc(100vw - 2.5rem))!important;height:min(300px,calc(100vw - 2.5rem))!important}.score-board{gap:.75rem;padding:.625rem .875rem}.btn{padding:.75rem .875rem;font-size:.875rem}}@media (max-height: 600px) and (orientation: landscape){.app{padding:.5rem;align-items:flex-start}.header{padding:.75rem 1rem;margin-bottom:.75rem}.header-content{flex-direction:row;gap:1rem}.logo h1{font-size:1.25rem}.score-board{padding:.5rem 1rem}.game-container{padding:.75rem}.game-wrapper{margin-bottom:.75rem}.game-board{width:min(320px,45vh)!important;height:min(320px,45vh)!important}.controls{margin-bottom:.75rem}.instructions{padding:.75rem}.instruction-grid{grid-template-columns:repeat(2,1fr)}}@media (hover: none) and (pointer: coarse){.btn{min-height:44px;touch-action:manipulation}.btn:active{transform:scale(.98)}.instruction-item{min-height:44px}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.snake-segment,.food{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.food{animation:none}.btn:hover{transform:none}}@media (prefers-color-scheme: light){.app{background:linear-gradient(135deg,#f5f5f5,#e5e5e5)}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#171717;color:#fff;overflow:hidden}#root{min-height:100vh;display:flex;align-items:center;justify-content:center}