/* Snake game styles */
body{
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #dbeafe 100%);
  background-attachment: fixed;
  color:#0f172a;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  min-height: 100vh;
}
.snake-container{
  max-width:760px;
  margin:48px auto;
  padding:32px;
  background:rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.2);
  text-align:center;
}
.snake-container h1{
  margin-bottom:8px;
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2.5rem;
  font-weight: 800;
}
.snake-container .lead{
  color:#475569;
  margin-bottom:20px;
  font-size: 1.05rem;
}
.game-area{display:flex;gap:18px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
#snakeCanvas{
  background:#1e293b;
  border-radius:12px;
  border:4px solid rgba(148, 163, 184, 0.3);
  box-shadow:0 8px 20px rgba(0, 0, 0, 0.15);
}
.hud{
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#0f172a;
  text-align:left;
  margin-left:12px;
  font-weight:600;
  background: rgba(255, 255, 255, 0.8);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.controls{margin-top:20px}
.controls button{
  padding:12px 20px;
  margin:0 8px;
  border-radius:10px;
  border:none;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;
  cursor:pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}
.controls button:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
}
.controls button:active{transform:translateY(1px)}
.legend{
  margin-top:20px;
  color:#475569;
  background: rgba(255, 255, 255, 0.6);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.legend .food{display:inline-block;padding:6px 10px;border-radius:6px;margin-left:8px;font-weight:600;color:#fff}
.legend .normal{background:#10b981}
.legend .bonus{background:#ef4444}
.legend .speed{background:#f59e0b}
.legend .poison{background:#6b7280}
.note{margin-top:16px;color:#64748b;font-style: italic}

.game-over-overlay{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:32px 40px;
  border-radius:16px;
  background:rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  color:#0f172a;
  z-index:10002;
  box-shadow:0 24px 60px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(148, 163, 184, 0.3);
  display:none;
  text-align: center;
}
.game-over-overlay.show{display:block}
.game-over-overlay .title{
  font-size:28px;
  font-weight:800;
  margin-bottom:12px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.game-over-overlay .sub{color:#475569}

/* Home button */
#home-button{
  position:fixed;
  top:24px;
  left:24px;
  z-index:1000;
  padding:12px 24px;
  background:rgba(255, 255, 255, 0.95);
  backdrop-filter:blur(20px);
  border:1px solid rgba(148, 163, 184, 0.2);
  border-radius:12px;
  color:#475569;
  text-decoration:none;
  font-weight:600;
  transition:all 0.3s ease;
  box-shadow:0 2px 10px rgba(0, 0, 0, 0.05);
}
#home-button:hover{
  background:rgba(255, 255, 255, 1);
  border-color:rgba(16, 185, 129, 0.5);
  transform:translateX(-4px);
  box-shadow:0 4px 15px rgba(16, 185, 129, 0.2);
  color:#10b981;
}