/* Snake404.js v1.0.1 — MIT */
.snake404,
.snake404 * { box-sizing: border-box; }

.snake404 {
  --snake404-bg: #0b0d10;
  --snake404-panel: #11151a;
  --snake404-border: rgba(255,255,255,.10);
  --snake404-text: #fff;
  --snake404-muted: rgba(255,255,255,.65);
  --snake404-accent: #c7ff5e;
  width: 100%;
  color: var(--snake404-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  outline: 0;
}
.snake404__shell { width: min(100%, 960px); margin: 0 auto; display: grid; gap: 18px; }
.snake404__copy { display: grid; gap: 8px; }
.snake404__eyebrow { font-size: clamp(3rem,10vw,7rem); font-weight: 900; letter-spacing: -.08em; line-height: .8; color: var(--snake404-accent); }
.snake404__title { margin: 0; max-width: 760px; font-size: clamp(1.15rem,2.8vw,2rem); line-height: 1.05; letter-spacing: -.04em; }
.snake404__stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: .9rem; color: var(--snake404-muted); }
.snake404__stats strong { color: var(--snake404-text); }
.snake404__stage { position: relative; overflow: hidden; width: 100%; height: clamp(320px,52vw,540px); border: 1px solid var(--snake404-border); border-radius: 24px; background: var(--snake404-bg); box-shadow: 0 20px 80px rgba(0,0,0,.25); }
.snake404__canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.snake404__overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: linear-gradient(to bottom,rgba(11,13,16,.12),rgba(11,13,16,.72)); backdrop-filter: blur(4px); }
.snake404__overlay[hidden] { display: none; }
.snake404__overlayCard { width: min(100%,420px); padding: 24px; border: 1px solid var(--snake404-border); border-radius: 20px; background: rgba(17,21,26,.84); box-shadow: 0 20px 70px rgba(0,0,0,.25); text-align: center; }
.snake404__overlayTitle,.snake404__overlayText { display: block; }
.snake404__overlayTitle { font-size: 1.45rem; margin-bottom: 8px; }
.snake404__overlayText { color: var(--snake404-muted); line-height: 1.45; }
.snake404__button { appearance: none; border: 0; cursor: pointer; margin-top: 18px; padding: 12px 18px; border-radius: 999px; background: var(--snake404-accent); color: #0b0d10; font: inherit; font-weight: 800; transition: transform .18s ease, opacity .18s ease; }
.snake404__button:hover { transform: translateY(-1px); }
.snake404__button:active { transform: translateY(0); }
.snake404__controls { display: none; justify-items: center; gap: 6px; }
.snake404__controls > div { display: flex; gap: 6px; }
.snake404__controls button { width: 52px; height: 48px; border: 1px solid var(--snake404-border); border-radius: 14px; background: var(--snake404-panel); color: var(--snake404-text); font: inherit; font-size: 1.1rem; cursor: pointer; }

@media (hover:none),(pointer:coarse),(max-width:760px) {
  .snake404__controls { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .snake404__button { transition: none; }
}