@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;800&display=swap";.game-container{z-index:1;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;width:100%;max-width:600px;padding:20px;display:flex;position:relative}.bg-gradient{z-index:-1;background:radial-gradient(circle at 15%,#4c1d9526,#0000 25%),radial-gradient(circle at 85% 30%,#db27771a,#0000 25%);width:100vw;height:100vh;position:fixed;top:0;left:0}.bg-pattern{z-index:-1;background-image:linear-gradient(#ffffff08 1px,#0000 1px),linear-gradient(90deg,#ffffff08 1px,#0000 1px);background-size:50px 50px;width:100%;height:100%;position:fixed;top:0;left:0;-webkit-mask-image:radial-gradient(circle,#000,#0000 80%);mask-image:radial-gradient(circle,#000,#0000 80%)}.header{justify-content:space-between;align-items:center;width:100%;padding:0 10px;display:flex}.title{background:linear-gradient(135deg,#fff 0%,#cbd5e1 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 10px #60a5fa33);letter-spacing:-1px;-webkit-background-clip:text;font-size:2.5rem;font-weight:800}.home-link,.pause-btn{border:1px solid var(--glass-border);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:44px;height:44px;color:var(--text-primary);background:#ffffff0d;border-radius:12px;justify-content:center;align-items:center;font-size:1.2rem;transition:all .2s;display:flex}.home-link svg{width:20px;height:20px;stroke:var(--text-primary)}.home-link:hover,.pause-btn:hover:not(:disabled){background:#ffffff1a;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.pause-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.score-container{gap:1rem;width:100%;display:flex}.score-card{background:var(--game-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;flex-direction:column;flex:1;align-items:flex-start;padding:12px 20px;display:flex;box-shadow:0 4px 20px #0000001a}.score-card.high{background:linear-gradient(145deg,#171e2bcc,#f472b60d);align-items:flex-end}.score-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-size:.8rem;font-weight:600}.score-value{color:var(--text-primary);font-size:1.8rem;font-weight:700;line-height:1.2}.board-wrapper{aspect-ratio:1;background:linear-gradient(145deg,#ffffff0d,#ffffff03);border-radius:20px;width:100%;padding:4px;position:relative;box-shadow:0 20px 40px -10px #00000080,inset 0 0 0 1px #ffffff0d}.play-board{background-color:var(--board-bg);border-radius:16px;width:100%;height:100%;display:grid;position:relative;overflow:hidden}.food{filter:drop-shadow(0 0 10px #f8717166);background:0 0;justify-content:center;align-items:center;font-size:1.2rem;animation:1.5s ease-in-out infinite pulse;display:flex}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.snake-segment{background-color:var(--snake-body);z-index:2;border-radius:40%;justify-content:center;align-items:center;margin:1px;font-size:.8rem;transition:all .1s linear;display:flex;box-shadow:0 0 10px #3b82f64d}.snake-segment.head{background-color:var(--snake-head);z-index:3;border-radius:30%;transform:scale(1.1);box-shadow:0 0 15px #60a5fa80}.overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#0f172ad9;border-radius:20px;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s fadeIn;display:flex;position:absolute;top:0;left:0}.overlay-content{text-align:center;color:#fff;flex-direction:column;align-items:center;gap:15px;display:flex}.overlay-icon{filter:drop-shadow(0 0 20px #fff3);margin-bottom:.5rem;font-size:4rem;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.overlay h2{background:linear-gradient(90deg,#60a5fa,#f472b6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:2rem;font-weight:800}.final-score{color:var(--text-secondary);font-size:1.2rem}.final-score span{color:var(--text-primary);font-size:1.5rem;font-weight:700}.new-record{color:#fbbf24;font-size:1.1rem;font-weight:700;animation:.5s infinite alternate bounce}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-3px)}}.start-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);border:none;border-radius:12px;margin-top:10px;padding:12px 32px;font-size:1.1rem;font-weight:600;transition:all .2s;box-shadow:0 4px 15px #2563eb4d}.start-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #2563eb66}.start-btn:active{transform:scale(.95)}.controls{flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:1rem;display:none}.controls-row{gap:10px;display:flex}.control-btn{border:1px solid var(--glass-border);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border-radius:20px;justify-content:center;align-items:center;width:65px;height:65px;font-size:1.5rem;transition:all .1s;display:flex;box-shadow:0 4px #0003}.control-btn:active{box-shadow:none;background:#ffffff1a;transform:translateY(4px)}.instructions{color:var(--text-secondary);opacity:.7;gap:20px;font-size:.9rem;display:flex}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media screen and (width<=800px){.game-container{justify-content:flex-start;max-width:100%;height:100vh;padding:15px}.header{margin-bottom:10px}.title{font-size:2rem}.controls{display:flex}.instructions{display:none}.board-wrapper{width:100%;max-width:400px}}:root{--primary-color:#60a5fa;--game-bg:#171e2bb3;--board-bg:#0d121c99;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--accent-color:#f472b6;--glass-border:#ffffff14;--food-color:#f87171;--snake-head:#60a5fa;--snake-body:#3b82f6}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0;font-family:Outfit,sans-serif}body{min-height:100vh;color:var(--text-primary);background-color:#0f172a;justify-content:center;align-items:center;margin:0;display:flex;overflow:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}
