:root {
  --neon-green: #00ff88;
  --neon-pink: #ff0066;
  --neon-blue: #00cfff;
  --neon-yellow: #ffdd00;
  --snake-bg: #070a0f;
  --grid: #0d1520;
}

.snake-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  min-height: calc(100vh - 53px);
}

.snake-main {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--snake-bg);
  position: relative;
  overflow: hidden;
}

.snake-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,136,0.015) 2px,rgba(0,255,136,0.015) 4px);
  pointer-events: none;
}

.snake-sidebar {
  background: var(--card);
  border-left: 1px solid var(--border);
  padding: 1rem;
  overflow-y: auto;
}

.game-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px;
  width: 100%;
  max-width: 700px;
  position: relative;
  z-index: 1;
}

/* Header */
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.title {
  font-family: 'Orbitron', monospace;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green), 0 0 30px var(--neon-green), 0 0 60px rgba(0,255,136,0.4);
  line-height: 1;
}

.scores {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.score-label { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: rgba(0,255,136,0.4); letter-spacing: 0.2em; text-transform: uppercase; }
.score-value {
  font-family: 'Orbitron', monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--neon-yellow);
  text-shadow: 0 0 15px var(--neon-yellow);
  line-height: 1;
}
.high-score-value { font-family: 'Orbitron', monospace; font-size: 16px; color: var(--neon-pink); text-shadow: 0 0 10px var(--neon-pink); }

/* Toggle row */
.toggle-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.name-toggle {
  display: flex;
  align-items: center;
  background: rgba(0,255,136,0.05);
  border: 1px solid rgba(0,255,136,0.15);
  border-radius: 30px;
  padding: 3px;
  gap: 2px;
  cursor: pointer;
}
.name-opt {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 24px;
  letter-spacing: 0.1em;
  color: rgba(0,255,136,0.4);
  transition: all 0.25s;
  white-space: nowrap;
}
.name-opt.active {
  background: rgba(0,255,136,0.15);
  color: var(--neon-green);
  text-shadow: 0 0 8px var(--neon-green);
  box-shadow: 0 0 8px rgba(0,255,136,0.2);
}

.kids-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,255,136,0.05);
  border: 1px solid rgba(0,255,136,0.15);
  border-radius: 30px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.25s;
}
.kids-toggle.on {
  background: rgba(255,221,0,0.1);
  border-color: rgba(255,221,0,0.4);
  box-shadow: 0 0 10px rgba(255,221,0,0.15);
}
.kids-icon { font-size: 16px; line-height: 1; }
.kids-label {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(0,255,136,0.4);
  transition: color 0.25s;
  white-space: nowrap;
}
.kids-toggle.on .kids-label { color: var(--neon-yellow); text-shadow: 0 0 8px var(--neon-yellow); }

/* Level row */
.level-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.marvin-row { display: flex; gap: 6px; align-items: center; }
.marvin-letter {
  font-family: 'Orbitron', monospace;
  font-size: 22px;
  font-weight: 900;
  color: rgba(255,255,255,0.1);
  transition: all 0.3s;
  letter-spacing: 0.04em;
}
.marvin-letter.current { animation: pulse-letter 0.65s infinite alternate; }
@keyframes pulse-letter { from { opacity:0.6; } to { opacity:1; } }

.speed-side { display: flex; gap: 6px; align-items: center; }
.speed-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(0,255,136,0.12);
  border: 1px solid rgba(0,255,136,0.18);
  transition: all 0.3s;
}
.speed-dot.active { background: var(--neon-green); box-shadow: 0 0 6px var(--neon-green); }

/* Canvas */
.canvas-container {
  position: relative;
  border: 1px solid rgba(0,255,136,0.2);
  box-shadow: 0 0 0 1px rgba(0,255,136,0.05), 0 0 20px rgba(0,255,136,0.08), inset 0 0 40px rgba(0,0,0,0.8);
  background: var(--grid);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.canvas-container.kids {
  border-color: rgba(255,221,0,0.3);
  box-shadow: 0 0 0 1px rgba(255,221,0,0.05), 0 0 20px rgba(255,221,0,0.1), inset 0 0 40px rgba(0,0,0,0.8);
}

canvas { display: block; }

.kids-badge {
  position: absolute;
  top: 8px; right: 8px;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--neon-yellow);
  background: rgba(255,221,0,0.1);
  border: 1px solid rgba(255,221,0,0.3);
  border-radius: 4px;
  padding: 4px 8px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 4;
}
.kids-badge.visible { opacity: 1; }

/* Hype toast */
#hypeToast {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.08em;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  white-space: nowrap;
  text-shadow: 0 0 20px currentColor, 0 0 50px currentColor;
}
#hypeToast.show {
  animation: hype-pop 2s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes hype-pop {
  0%   { opacity:0; transform: translate(-50%,-50%) scale(0.5) rotate(-4deg); }
  15%  { opacity:1; transform: translate(-50%,-50%) scale(1.15) rotate(2deg); }
  30%  { opacity:1; transform: translate(-50%,-50%) scale(0.97) rotate(-1deg); }
  42%  { opacity:1; transform: translate(-50%,-50%) scale(1.04) rotate(0deg); }
  68%  { opacity:1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform: translate(-50%,-50%) scale(0.85); }
}

/* Face pop */
#facePop {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -60%) scale(0);
  opacity: 0;
  z-index: 7;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#facePop.show {
  animation: face-bounce 2.8s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes face-bounce {
  0%   { opacity:0; transform: translate(-50%,-60%) scale(0) rotate(-8deg); }
  18%  { opacity:1; transform: translate(-50%,-60%) scale(1.15) rotate(4deg); }
  30%  { opacity:1; transform: translate(-50%,-60%) scale(0.95) rotate(-2deg); }
  42%  { opacity:1; transform: translate(-50%,-60%) scale(1.05) rotate(1deg); }
  60%  { opacity:1; transform: translate(-50%,-60%) scale(1) rotate(0deg); }
  82%  { opacity:1; transform: translate(-50%,-60%) scale(1); }
  100% { opacity:0; transform: translate(-50%,-60%) scale(0.8) rotate(3deg); }
}
#faceLabel {
  font-family: 'Orbitron', monospace;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffdd00;
  text-shadow: 0 0 12px #ffdd00, 0 0 30px rgba(255,221,0,0.5);
  white-space: nowrap;
}

.star-burst {
  position: absolute;
  font-size: 22px;
  animation: star-fly 2.5s ease-out forwards;
  pointer-events: none;
}
@keyframes star-fly {
  0%   { opacity:1; transform: translate(0,0) scale(1); }
  100% { opacity:0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

/* Overlay */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(7,10,15,0.92);
  gap: 14px;
  transition: opacity 0.3s;
  z-index: 6;
}
.overlay.hidden { opacity:0; pointer-events:none; }

.overlay-title {
  font-family: 'Orbitron', monospace;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--neon-green);
  text-shadow: 0 0 20px var(--neon-green), 0 0 50px rgba(0,255,136,0.3);
}
.overlay-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  color: rgba(0,255,136,0.45);
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 2;
}
.dead-score {
  font-family: 'Orbitron', monospace;
  font-size: 52px;
  font-weight: 900;
  color: var(--neon-yellow);
  text-shadow: 0 0 20px var(--neon-yellow);
}
.new-record {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  color: var(--neon-pink);
  text-shadow: 0 0 10px var(--neon-pink);
  letter-spacing: 0.2em;
  animation: blink 0.8s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.15} }

.snake-btn {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 12px 30px;
  background: transparent;
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--neon-green);
  box-shadow: 0 0 10px rgba(0,255,136,0.2), inset 0 0 10px rgba(0,255,136,0.05);
  transition: all 0.15s;
}
.snake-btn:hover {
  background: rgba(0,255,136,0.1);
  box-shadow: 0 0 20px rgba(0,255,136,0.4), inset 0 0 20px rgba(0,255,136,0.1);
  transform: scale(1.03);
}

/* D-pad (touch only) */
.controls {
  display: none;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 56px);
  gap: 6px;
}
@media (pointer: coarse) { .controls { display: grid; } }

.dpad-btn {
  width: 56px; height: 56px;
  background: rgba(0,255,136,0.05);
  border: 1px solid rgba(0,255,136,0.2);
  color: var(--neon-green);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.1s;
}
.dpad-btn:active { background: rgba(0,255,136,0.2); }
.dpad-btn.up    { grid-column:2; grid-row:1; }
.dpad-btn.left  { grid-column:1; grid-row:2; }
.dpad-btn.down  { grid-column:2; grid-row:2; }
.dpad-btn.right { grid-column:3; grid-row:2; }

/* Responsive */
@media (max-width: 900px) {
  .snake-layout { grid-template-columns: 1fr; }
  .snake-sidebar { display: none; }
}

@media (max-width: 600px) {
  .title { font-size: 28px; }
  .score-value { font-size: 22px; }
  .marvin-letter { font-size: 16px; }
}