.snake-puzzle-container{min-height:100vh;background:var(--color-gray-100);padding:2rem;display:flex;flex-direction:column;align-items:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.game-header{text-align:center;margin-bottom:2rem}.game-header h1{font-size:2.5rem;color:var(--text-primary);margin-bottom:.5rem;background:linear-gradient(45deg,#4caf50,#2196f3);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.game-header p{color:#666;font-size:1.1rem}.game-board-container{background:#fff;padding:2rem;border-radius:var(--space-5);box-shadow:0 10px 30px #0000001a;position:relative;-webkit-user-select:none;user-select:none}.game-board{display:grid;gap:4px;background:#e0e0e0;padding:4px;border-radius:var(--space-2);position:relative}.grid-cell{width:60px;height:60px;background:#fff;border-radius:4px;display:flex;justify-content:center;align-items:center;position:relative}.dot{width:var(--space-2);height:var(--space-2);background:#ddd;border-radius:var(--radius-full)}.snake-segment{position:absolute;width:100%;height:100%;z-index:1;display:flex;justify-content:center;align-items:center;transition:all .2s ease}.snake-body{width:80%;height:80%;border-radius:var(--space-2)}.snake-head{width:90%;height:90%;border-radius:var(--space-3);cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:0 4px var(--space-2) #0003}.snake-head:after{content:"👀";font-size:1.2rem}.snake-tail{width:60%;height:60%;border-radius:var(--radius-full)}.color-green .snake-body,.color-green .snake-head,.color-green .snake-tail{background-color:#4caf50}.color-purple .snake-body,.color-purple .snake-head,.color-purple .snake-tail{background-color:#9c27b0}.color-yellow .snake-body,.color-yellow .snake-head,.color-yellow .snake-tail{background-color:#ffeb3b}.color-blue .snake-body,.color-blue .snake-head,.color-blue .snake-tail{background-color:#2196f3}.color-orange .snake-body,.color-orange .snake-head,.color-orange .snake-tail{background-color:#ff9800}.game-controls{margin-top:2rem;display:flex;gap:1rem}.control-btn{padding:.8rem 1.5rem;border:none;border-radius:var(--space-2);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;background:#f0f0f0;color:#333}.control-btn:hover{background:#e0e0e0;transform:translateY(-2px)}.control-btn.primary{background:#4caf50;color:#fff}.control-btn.primary:hover{background:#43a047}.status-panel{margin-top:1.5rem;font-size:1.2rem;font-weight:500;color:#333}.win-message{color:#4caf50;font-weight:700;animation:bounce .5s infinite alternate}@keyframes bounce{0%{transform:scale(1)}to{transform:scale(1.1)}}.connection{position:absolute;background:inherit;z-index:0}.connection.horizontal{width:100%;height:80%;top:10%}.connection.vertical{width:80%;height:100%;left:10%}@media (max-width: 600px){.grid-cell{width:45px;height:45px}.snake-head:after{font-size:.9rem}}