.snake-segment{background:linear-gradient(#27ae60,#1e8449);border-radius:8px;justify-content:center;align-items:center;display:flex;position:absolute;box-shadow:inset 0 -4px 6px #ffffff08,0 6px 12px #00000073}.snake-head{background:linear-gradient(#36d399,#1fbf6b);border-radius:10px}.snake-head .eye{background:#111;border-radius:50%;width:3px;height:3px;position:absolute;top:6px}.snake-head .eye.left{left:6px}.snake-head .eye.right{right:6px}.snake-food{background:radial-gradient(circle at 30% 30%,#fff3f3,#ff4d4d 40%,#d32f2f 100%);border:1px solid #ffffff0f;border-radius:50%;box-shadow:0 6px 18px #ff4d4d52,inset 0 -4px 8px #ffffff0f}@keyframes headWiggle{0%{transform:scale(1)}50%{transform:scale(1.03)}to{transform:scale(1)}}.snake-head{animation:.9s ease-in-out infinite headWiggle}.snake-segment.collision{border:2px solid #ff404099;transform:scale(1.05);box-shadow:0 0 18px #ff4040e6,inset 0 -6px 10px #ffffff05}
@keyframes borderGlow{0%{border-color:red}20%{border-color:orange}40%{border-color:green}60%{border-color:#00f}80%{border-color:violet}to{border-color:red}}.animate-borderGlow{border:4px solid red;border-radius:12px;padding:16px;animation:3s linear infinite borderGlow}.animate-borderGlow:before{z-index:-1;background:#000;border-radius:8px;inset:4px}.hover-text-shadow:hover{text-shadow:0 0 40px #fff9}:root{--menu-size:420px;--panel-padding:12px;--panel-radius:14px;--btn-size:64px;--grid-gap:20px;--accent-start:#7c3aed;--accent-end:#06b6d4}.game-button{color:#fff;z-index:60;background:linear-gradient(135deg,#7c3aed 0%,#06b6d4 100%);border:1px solid #ffffff0f;border-radius:9999px;justify-content:center;align-items:center;gap:8px;width:72px;height:72px;font-weight:600;transition:transform .2s,box-shadow .2s;display:flex;position:fixed;bottom:1.5rem;left:1.5rem;box-shadow:0 8px 30px #7c3aed40,inset 0 -2px 6px #00000040}.game-button:hover{transform:translateY(-4px)scale(1.03);box-shadow:0 18px 50px #7c3aed47,inset 0 -2px 8px #00000059}@keyframes pulseRing{0%{box-shadow:0 0 #7c3aed59}70%{box-shadow:0 0 30px 16px #7c3aed00}to{box-shadow:0 0 #7c3aed00}}.game-button:after{content:"";z-index:-1;border-radius:9999px;width:140%;height:140%;animation:2.8s infinite pulseRing;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.game-button .label{display:none}@media (min-width:768px){.game-button{gap:12px;width:auto;height:72px;padding:0 16px}.game-button .label{display:inline-block}}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}60%{opacity:1;transform:translateY(-6%)}80%{transform:translateY(2%)}to{transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:90;background:#00000080;animation:.22s forwards fadeIn;position:fixed;inset:0}.modal-backdrop.fade-out{animation:.22s forwards fadeOut}.slide-up-modal{z-index:100;border-radius:14px;width:auto;max-width:calc(100% - 32px);animation:.52s cubic-bezier(.22,.9,.39,1) forwards slideUp;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.menu-container{width:min(var(--menu-size), calc(100% - 48px));aspect-ratio:1;max-width:94vw;padding:calc(var(--panel-padding) + 6px);flex-direction:column;gap:12px;display:flex}.menu-title{justify-content:center;align-items:center;width:100%;padding-top:2px;display:flex}.menu-title h2{letter-spacing:.4px;margin:0;font-size:1.3rem;font-weight:600}.menu-title .divider{background:linear-gradient(90deg,#ffffff0f,#ffffff05);border-radius:2px;width:48px;height:1px;margin-left:12px}.menu-grid{gap:var(--grid-gap);flex:auto;grid-template-columns:repeat(3,1fr);grid-auto-flow:row;place-content:center;place-items:center;padding:6px 10px;display:grid}.menu-btn{width:var(--btn-size);height:var(--btn-size);color:#fff;-webkit-backdrop-filter:blur(6px);background:linear-gradient(#ffffff05,#ffffff03);border:1px solid #ffffff0d;border-radius:12px;justify-content:center;align-items:center;transition:transform .2s cubic-bezier(.2,.9,.3,1),box-shadow .2s,background .2s;display:inline-flex;box-shadow:0 6px 18px #00000073,inset 0 -2px 6px #ffffff03}.menu-btn:hover{transform:translateY(-8px)scale(1.04);box-shadow:0 18px 40px #0009}.menu-btn:focus{outline-offset:4px;outline:3px solid #7c3aed2e}.game-panel-content{box-sizing:border-box;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;max-width:100%;display:flex;overflow:auto}.winning-cell{background:linear-gradient(#ffffff05,#ffffff03);position:relative;box-shadow:0 6px 24px #0009,inset 0 0 0 3px #ffffff05}.winning-cell:after{content:"";pointer-events:none;border-radius:6px;animation:.9s ease-in-out infinite pulseGlow;position:absolute;inset:2px;box-shadow:0 0 18px #ffd7002e}@keyframes pulseGlow{0%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}to{opacity:.6;transform:scale(1)}}@keyframes slideFromButton{0%{transform:translate(var(--tx), var(--ty)) scale(.6);opacity:0}60%{transform:translate(calc(var(--tx) * -.06), calc(var(--ty) * -.06)) scale(1.02);opacity:1}80%{transform:translate(calc(var(--tx) * .02), calc(var(--ty) * .02)) scale(.99)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes slideToButton{0%{opacity:1;transform:translate(0)scale(1)}to{transform:translate(var(--tx), var(--ty)) scale(.6);opacity:0}}@keyframes shrinkOutCenter{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}.slide-up-modal.from-button{animation:none}.slide-up-modal.from-button>div:first-child{animation:.38s cubic-bezier(.22,.9,.39,1) both slideFromButton}.slide-up-modal.is-closing>div:first-child{animation:.22s ease-in both shrinkOutCenter!important}.slide-up-modal.from-button.is-closing>div:first-child{animation:.22s cubic-bezier(.55,.085,.68,.53) both slideToButton!important}