*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1vh 1vw;color:#fff;transition:all .3s ease;box-sizing:border-box;margin:0;overflow:hidden}.dark{background:linear-gradient(135deg,#2c3e50 0,#34495e 100%);color:#ecf0f1}h2{color:#fff;margin-bottom:clamp(10px,2vh,20px);font-size:clamp(1.5rem,5vw,2.5rem);text-shadow:2px 2px 4px rgba(0,0,0,.3);text-align:center;font-weight:700;line-height:1.2}.title-container{align-items:center;gap:15px;margin-bottom:20px}#controls{margin-bottom:20px;width:100%;max-width:600px}#top-row{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}#grid-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}#game-info{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.control-select{background:rgba(255,255,255,.15);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;min-width:120px}.control-select:focus,.control-select:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.5);outline:0}.control-select option{background:#2c3e50;color:#fff;padding:5px}.control-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;border:none;border-radius:8px;padding:10px 15px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px rgba(255,107,107,.3);min-width:50px}.control-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,107,107,.4)}.info-display{background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:600;text-align:center;min-width:100px}.info-display span{color:gold;font-weight:700}#game-container{background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:15px;padding:20px;margin-bottom:20px;display:flex;justify-content:center;align-items:center}#game-board{display:grid;grid-template-columns:repeat(20,20px);grid-template-rows:repeat(20,20px);gap:0;background:rgba(0,0,0,.2);border-radius:10px;padding:10px;box-shadow:inset 0 2px 10px rgba(0,0,0,.3);border-top:2px solid #fff;border-bottom:2px solid #fff}.cell{width:20px;height:20px;background:0 0;transition:all .2s ease}.snake{background:linear-gradient(135deg,#00ff87,#60efff);border-radius:25%;box-shadow:0 0 12px rgba(0,255,135,.6);transform:scale(.95)}.dark .snake{background:linear-gradient(135deg,#00d468,#00b894);box-shadow:0 0 15px rgba(0,212,104,.8)}.food{background:linear-gradient(135deg,#ff4757,#ff6b7a);border-radius:50%;box-shadow:0 0 15px rgba(255,71,87,.7);transform:scale(.9);position:relative}.food::before{content:"🍎";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;filter:drop-shadow(0 0 3px rgba(0, 0, 0, .5))}.bonus{border-radius:50%;box-shadow:0 0 18px rgba(255,215,0,.8);transform:scale(.85);animation:bonusPulse 1.5s infinite ease-in-out;position:relative;background:linear-gradient(135deg,gold,#ffb347)}.bonus::before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;filter:drop-shadow(0 0 2px rgba(0, 0, 0, .7))}.bonus.cherry::before{content:"🍒"}.bonus.banana::before{content:"🍌"}.bonus.orange::before{content:"🍊"}.bonus.grape::before{content:"🍇"}.bonus.strawberry::before{content:"🍓"}.bonus.watermelon::before{content:"🍉"}.bonus.peach::before{content:"🍑"}.bonus.pineapple::before{content:"🍍"}@keyframes bonusPulse{0%,100%{transform:scale(.85);box-shadow:0 0 18px rgba(255,215,0,.8)}50%{transform:scale(.95);box-shadow:0 0 25px gold}}#game-controls{margin-top:20px;width:100%;max-width:600px}.control-instructions{justify-content:space-around;align-items:center;gap:10px;flex-wrap:wrap;text-align:center}.control-instructions span{font-size:13px;font-weight:500;opacity:.9;padding:5px 10px;background:rgba(255,255,255,.1);border-radius:20px;white-space:nowrap}.touch-controls{display:none;flex-direction:column;align-items:center;gap:8px;margin:20px 0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.control-row{display:flex;align-items:center;gap:8px}.touch-btn{background:rgba(255,255,255,.15);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:12px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;transition:all .2s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.touch-btn:active,.touch-btn:hover{background:rgba(255,255,255,.25);transform:scale(.95);box-shadow:0 2px 10px rgba(0,0,0,.2)}.touch-btn:active{transform:scale(.9)}.pause-btn{background:rgba(255,215,0,.2);border-color:rgba(255,215,0,.3)}.pause-btn:active,.pause-btn:hover{background:rgba(255,215,0,.3)}.arrow-down,.arrow-left,.arrow-right,.arrow-up,.pause-icon{display:block;line-height:1}@media (max-width:1024px){.touch-controls{display:flex}}@media (max-width:768px){.touch-btn{width:55px;height:55px;font-size:20px}}.theme-toggle{background:rgba(255,255,255,.15);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;font-weight:700;transition:all .3s ease}.theme-toggle:hover{transform:translateY(-2px) rotate(15deg);background:rgba(255,255,255,.25);box-shadow:0 4px 15px rgba(0,0,0,.2)}@media (max-width:768px){body{padding:clamp(5px,1.5vh,10px) clamp(5px,1.5vw,10px);height:100vh;width:100vw;overflow:hidden}h2{font-size:clamp(1.4rem,4.5vw,2rem);margin-bottom:clamp(8px,1.5vh,15px)}.title-container{flex-direction:column;gap:clamp(5px,1vh,10px);margin-bottom:clamp(8px,1.5vh,15px)}#controls,#game-container,#game-controls{max-width:100%;margin:clamp(3px,.5vh,6px) 0}#top-row{flex-direction:column;gap:clamp(8px,2vh,15px)}#game-info,#grid-controls{justify-content:center;width:100%;flex-wrap:wrap;gap:clamp(5px,1.5vw,10px)}.control-instructions{flex-direction:column;gap:clamp(4px,1vh,8px)}.theme-toggle{width:clamp(32px,8vw,36px);height:clamp(32px,8vw,36px);font-size:clamp(14px,4vw,16px)}.dialog-content{width:95%;padding:clamp(15px,4vw,20px);margin:clamp(5px,2vh,10px)}.dialog-header h3{font-size:clamp(1.2rem,4vw,1.5rem)}.control-btn,.control-select{font-size:clamp(11px,3vw,14px);padding:clamp(6px,2vw,10px) clamp(8px,2.5vw,12px);min-width:clamp(60px,18vw,80px)}.touch-btn{width:clamp(45px,12vw,55px);height:clamp(45px,12vw,55px);font-size:clamp(16px,5vw,20px)}}@media (max-width:480px){body{padding:.5vh .5vw}#game-board{grid-template-columns:repeat(15,clamp(12px,4vw,16px));grid-template-rows:repeat(15,clamp(12px,4vw,16px));padding:clamp(4px,2vw,8px)}.cell{width:clamp(12px,4vw,16px);height:clamp(12px,4vw,16px)}.bonus::before,.food::before{font-size:clamp(8px,2.5vw,10px)}h2{font-size:clamp(1.2rem,4vw,1.5rem)}.control-btn,.control-select{font-size:clamp(10px,2.8vw,12px);padding:clamp(5px,1.5vw,8px) clamp(6px,2vw,10px);min-width:clamp(50px,15vw,70px)}.touch-btn{width:clamp(40px,10vw,45px);height:clamp(40px,10vw,45px);font-size:clamp(14px,4vw,16px)}.theme-toggle{width:clamp(28px,7vw,32px);height:clamp(28px,7vw,32px);font-size:clamp(12px,3.5vw,14px)}}@media (max-width:360px){body{padding:.3vh .3vw}h2{font-size:1.1rem}#game-board{grid-template-columns:repeat(15,12px);grid-template-rows:repeat(15,12px);padding:4px}.cell{width:12px;height:12px}.bonus::before,.food::before{font-size:8px}.control-btn,.control-select{font-size:10px;padding:4px 6px;min-width:45px}.touch-btn{width:35px;height:35px;font-size:12px}.theme-toggle{width:24px;height:24px;font-size:10px}}