:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0a0a0a;color:#fafafa}.game-wrapper{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1rem;gap:1rem;user-select:none;-webkit-user-select:none}.game-header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:720px}.game-title{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#34d399,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-subtitle{font-size:.75rem;color:#fff6}.score-section{display:flex;gap:.75rem}.score-box{display:flex;flex-direction:column;align-items:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;padding:.35rem .75rem;min-width:64px}.score-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.15em;color:#fff6}.score-value{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums;color:#34d399}.score-value.hi{color:#f59e0b}.grid-container{position:relative;width:100%;max-width:720px;aspect-ratio:24 / 18;border:2px solid rgba(255,255,255,.1);border-radius:.5rem;overflow:hidden;background:#111}.grid{display:grid;width:100%;height:100%;gap:1px;background:#ffffff08}.cell{display:flex;align-items:center;justify-content:center;font-size:clamp(.6rem,1.8vw,1.1rem);background:#ffffff03;transition:background .05s;border-radius:2px}.cell-player{background:#34d39926;animation:pulse .6s ease-in-out infinite alternate}.cell-snake{border-radius:3px;box-shadow:inset 0 0 4px #0006}.cell-snake-head{font-size:clamp(.7rem,2vw,1.2rem)}.cell-food{animation:food-bob .8s ease-in-out infinite alternate}@keyframes pulse{0%{box-shadow:0 0 4px #34d3994d}to{box-shadow:0 0 10px #34d39999}}@keyframes food-bob{0%{transform:scale(1)}to{transform:scale(1.15)}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10}.overlay-card{text-align:center;max-width:340px;padding:2rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:1rem}.overlay-card h2{font-size:1.75rem;font-weight:700;margin-bottom:.75rem;background:linear-gradient(135deg,#34d399,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.overlay-card p{font-size:.85rem;color:#fff9;margin-bottom:.5rem}.overlay-card .warn{color:#f87171;font-weight:600;margin-top:.5rem;margin-bottom:1rem}.overlay-card kbd{display:inline-block;padding:.1rem .4rem;font-size:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:.25rem;color:#fafafa}.final-score{font-size:1.5rem!important;font-weight:700;color:#34d399!important}.new-record{font-size:1rem!important;color:#f59e0b!important;font-weight:700;animation:pulse .6s ease-in-out infinite alternate}.btn{display:inline-block;margin-top:.75rem;padding:.6rem 2rem;font-size:1rem;font-weight:600;color:#0a0a0a;background:linear-gradient(135deg,#34d399,#22d3ee);border:none;border-radius:.5rem;cursor:pointer;transition:transform .1s,box-shadow .1s}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px #34d3994d}.btn:active{transform:translateY(0)}.hint{display:block;font-size:.7rem;color:#ffffff4d;margin-top:.5rem}.mobile-controls{display:grid;grid-template-areas:". up ." "left . right" ". down .";grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px;margin-top:.5rem}.dpad-btn{display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:#ffffff14;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;color:#ffffffb3;cursor:pointer;-webkit-tap-highlight-color:transparent}.dpad-btn:active{background:#34d39933}.dpad-up{grid-area:up}.dpad-down{grid-area:down}.dpad-left{grid-area:left}.dpad-right{grid-area:right}@media(min-width:768px){.mobile-controls{display:none}}@media(max-width:480px){.game-header{flex-direction:column;align-items:center;gap:.5rem;text-align:center}.score-section{gap:.5rem}}