/* Snake — styles. Same monochrome look as my portfolio, with one green accent for the snake. */

:root {
  --bg: #121212;
  --panel: #1c1c1c;
  --line: #2e2e2e;
  --text: #f2f2f2;
  --muted: #8a8a8a;
  --accent: #4ade80;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Inter", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 20px 16px 40px;
}

.mono { font-family: "JetBrains Mono", monospace; }
.wrap { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 16px; }

/* Header: back link, title, scores */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.back { color: var(--muted); text-decoration: none; font-size: .85rem; }
.back:hover { color: var(--text); }
h1 { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; }
.scores { display: flex; gap: 14px; justify-content: flex-end; }
.scores div { text-align: right; }
.scores span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.scores strong { font-size: 1.3rem; font-family: "JetBrains Mono", monospace; }

/* Game board */
.board { position: relative; width: 100%; aspect-ratio: 1 / 1; }
canvas {
  width: 100%; height: 100%; display: block;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}

.overlay {
  position: absolute; inset: 0; border-radius: 14px;
  background: rgba(18, 18, 18, .88);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center;
}
.overlay.hidden { display: none; }
.overlay h2 { font-size: 1.7rem; font-weight: 800; }
.overlay p { color: var(--muted); max-width: 280px; line-height: 1.5; }
.hint { font-size: .72rem; margin-top: 6px; }

.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--text); color: var(--bg);
  border: 0; border-radius: 999px; padding: 12px 26px;
  transition: transform .15s;
}
.btn:hover { transform: translateY(-2px); }

/* Touch d-pad (only shown on small / touch screens) */
.pad {
  display: none;
  grid-template-columns: repeat(3, 64px);
  grid-template-areas: ". up ." "left down right";
  gap: 8px; justify-content: center;
}
.pad button {
  height: 56px; font-size: 1.2rem; cursor: pointer;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
}
.pad button:active { background: var(--line); }
.pad [data-dir="up"] { grid-area: up; }
.pad [data-dir="left"] { grid-area: left; }
.pad [data-dir="down"] { grid-area: down; }
.pad [data-dir="right"] { grid-area: right; }

@media (hover: none), (max-width: 600px) {
  .pad { display: grid; }
}

.foot { text-align: center; color: var(--muted); font-size: .75rem; }
.foot a { color: var(--text); }