.overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-align:center;
  padding:24px;
  background:rgba(4,14,10,0.74);
  backdrop-filter:blur(10px);
  opacity:0;
  transform:scale(0.94);
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.overlay.visible{opacity:1;transform:scale(1);pointer-events:auto;}
.overlay-title{
  font-weight:900;
  font-size:clamp(1.3rem, 4vw, 1.7rem);
  letter-spacing:0.08em;
}
.overlay-hint{
  font-size:0.82rem;
  color:var(--text-muted);
  letter-spacing:0.02em;
}
.play-button{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 32px;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--snake-head), var(--snake-mid));
  color:#03150c;
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:0.06em;
  box-shadow:0 12px 32px rgba(95,232,154,0.35);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.play-button:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(95,232,154,0.45);}
.play-button:active{transform:translateY(0) scale(0.96);}
.play-button svg{width:22px;height:22px;}
.pause-glyph{
  display:flex;
  gap:8px;
}
.pause-glyph span{
  width:9px;
  height:34px;
  border-radius:5px;
  background:linear-gradient(180deg, var(--text-primary), rgba(255,255,255,0.6));
  box-shadow:0 0 18px rgba(255,255,255,0.35);
}
.overlay-score{
  font-family:var(--font-mono);
  font-size:1.1rem;
  color:var(--text-muted);
}
.overlay-score span{
  color:var(--text-primary);
  font-weight:700;
  font-size:1.3rem;
}
.new-best-badge{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.08em;
  color:#221806;
  background:linear-gradient(135deg, var(--gold), #ffe08a);
  padding:5px 14px;
  border-radius:var(--radius-pill);
  box-shadow:0 8px 20px rgba(255,203,87,0.35);
  opacity:0;
  transform:translateY(4px);
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.new-best-badge.visible{opacity:1;transform:translateY(0);}
.restart-button{
  padding:13px 30px;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--snake-head), var(--snake-mid));
  color:#03150c;
  font-weight:800;
  font-size:0.95rem;
  letter-spacing:0.04em;
  box-shadow:0 10px 26px rgba(95,232,154,0.32);
  transition:transform 0.15s ease;
}
.restart-button:hover{transform:translateY(-2px);}
.restart-button:active{transform:scale(0.96);}
.toast{
  position:absolute;
  top:16px;
  left:50%;
  transform:translateX(-50%) translateY(-12px);
  background:rgba(20,16,12,0.92);
  border:1px solid rgba(255,159,67,0.4);
  color:#ffd9ad;
  font-size:0.8rem;
  font-weight:600;
  padding:8px 16px;
  border-radius:var(--radius-pill);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.22s ease, transform 0.22s ease;
  white-space:nowrap;
  z-index:5;
}
.toast.visible{opacity:1;transform:translateX(-50%) translateY(0);}
.dpad{
  display:none;
  grid-template-columns:52px 52px 52px;
  grid-template-rows:52px 52px 52px;
  gap:6px;
  justify-content:center;
}
.dpad.visible{display:grid;}
.dpad-btn{
  background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid var(--panel-border);
  border-radius:var(--radius-md);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(6px);
  transition:background 0.12s ease, transform 0.1s ease;
}
.dpad-btn:active{background:rgba(95,232,154,0.22);transform:scale(0.92);}
.dpad-btn svg{width:22px;height:22px;color:var(--snake-head);}
.dpad-up{grid-column:2;grid-row:1;}
.dpad-left{grid-column:1;grid-row:2;transform:rotate(-90deg);}
.dpad-left svg{transform:rotate(90deg);}
.dpad-right{grid-column:3;grid-row:2;}
.dpad-right svg{transform:rotate(90deg);}
.dpad-down{grid-column:2;grid-row:3;}
.dpad-down svg{transform:rotate(180deg);}
.controls-panel{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.control-group{
  background:linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.005));
  border:1px solid var(--panel-border);
  border-radius:var(--radius-md);
  padding:14px 16px;
}
.control-group-title{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.16em;
  color:var(--text-muted);
  margin-bottom:10px;
}
.mode-selector{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.mode-btn{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--panel-border);
  color:var(--text-muted);
  padding:9px 16px;
  border-radius:var(--radius-pill);
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.03em;
  transition:all 0.18s ease;
}
.mode-btn.active{
  background:linear-gradient(135deg, var(--snake-head), var(--snake-mid));
  border-color:transparent;
  color:#03150c;
  box-shadow:0 6px 18px rgba(95,232,154,0.35);
}
.mode-btn:not(.active):hover{background:rgba(255,255,255,0.08);color:var(--text-primary);}
.mode-btn.is-locked:not(.active){opacity:0.4;}
.color-swatches{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.swatch{
  width:30px;
  height:30px;
  border-radius:50%;
  border:2px solid transparent;
  position:relative;
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.swatch:hover{transform:scale(1.08);}
.swatch.active{border-color:var(--teal);box-shadow:0 0 0 3px rgba(95,232,208,0.25);}
.swatch.active::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 8px var(--teal);
}
.button-group{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.action-btn{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:0.9rem;
  letter-spacing:0.02em;
  white-space:nowrap;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.action-btn:active{transform:scale(0.96);}
.action-btn.primary{
  background:linear-gradient(135deg, var(--snake-head), var(--snake-mid));
  color:#03150c;
  box-shadow:0 8px 22px rgba(95,232,154,0.3);
}
.action-btn.secondary{
  background:linear-gradient(135deg, #ffb457, #ff8a3d);
  color:#2a1200;
  box-shadow:0 8px 22px rgba(255,138,61,0.28);
}
.action-btn.secondary.is-resume{
  background:linear-gradient(135deg, var(--teal), #3fc4d8);
  color:#04231f;
  box-shadow:0 8px 22px rgba(95,232,208,0.28);
}
.action-btn.ghost{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--panel-border);
  color:var(--text-muted);
}
.action-btn.ghost:hover{color:var(--text-primary);background:rgba(255,255,255,0.09);}
.btn-icon{width:16px;height:16px;flex-shrink:0;}
.btn-icon svg{width:100%;height:100%;}
.icon-play{display:none;}
.action-btn.is-resume .icon-pause{display:none;}
.action-btn.is-resume .icon-play{display:block;}
.hint-text{
  font-size:0.72rem;
  color:var(--text-faint);
  text-align:center;
  letter-spacing:0.02em;
  line-height:1.6;
}