:root {
  --bg: #0b1020;
  --panel: #121a2a;
  --text: #f8fafc;
  --subtle: #8ea0bf;
  --coil-head: #22d3ee;
  --coil-body: #16a34a;
  --food: #ef4444;
  --danger: #fda4af;
  --board-bg: #0a1121;
  --board-border: #27395d;
  --cell-bg: #0f1a31;
  --cell-border: #1f2f56;
  --button-bg: #1d2742;
  --button-border: #2b3a62;
  --hud-title: #d4ddff;
  --app-border: #1f2a44;
  --page-gradient-start: #172447;
}

:root[data-theme='light'],
body[data-theme='light'],
html.theme-light,
body.theme-light {
  --bg: #f8fafc;
  --panel: #ffffff;
  --text: #0f172a;
  --subtle: #334155;
  --coil-head: #0284c7;
  --coil-body: #16a34a;
  --food: #dc2626;
  --danger: #dc2626;
  --board-bg: #ffffff;
  --board-border: #cbd5e1;
  --cell-bg: #f1f5f9;
  --cell-border: #dbeafe;
  --button-bg: #e2e8f0;
  --button-border: #94a3b8;
  --hud-title: #0f172a;
  --app-border: #cbd5e1;
  --page-gradient-start: #dbeafe;
}

:root[data-theme='dark'],
body[data-theme='dark'],
html.theme-dark,
body.theme-dark {
  --bg: #0b1020;
  --panel: #121a2a;
  --text: #f8fafc;
  --subtle: #8ea0bf;
  --coil-head: #22d3ee;
  --coil-body: #16a34a;
  --food: #ef4444;
  --danger: #fda4af;
  --board-bg: #0a1121;
  --board-border: #27395d;
  --cell-bg: #0f1a31;
  --cell-border: #1f2f56;
  --button-bg: #1d2742;
  --button-border: #2b3a62;
  --hud-title: #d4ddff;
  --app-border: #1f2a44;
  --page-gradient-start: #172447;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(circle at top, var(--page-gradient-start), var(--bg));
  font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  display: grid;
  place-items: center;
  padding: 16px;
  background-color: var(--bg);
  touch-action: manipulation;
  overscroll-behavior: none;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.app {
  width: min(92vw, 560px);
  background: var(--panel);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 16px;
}

h1 {
  margin: 0 0 8px;
  color: var(--hud-title);
}

.status {
  min-height: 20px;
  color: var(--subtle);
  margin: 0 0 10px;
}

.hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
  flex-wrap: wrap;
}

.score-wrap {
  display: grid;
  gap: 4px;
  font-size: 15px;
}

.high-score {
  color: var(--subtle);
}

.actions {
  display: inline-flex;
  gap: 8px;
}

button {
  background: var(--button-bg);
  color: var(--text);
  border: 1px solid var(--button-border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.05);
}

button:active {
  transform: scale(0.98);
}

.board {
  display: grid;
  border: 2px solid var(--board-border);
  padding: 2px;
  background: var(--board-bg);
  margin: 0 auto;
  width: min(88vw, 520px);
  aspect-ratio: 1 / 1;
  max-width: min(88vw, 560px);
  touch-action: none;
}

.board--ended {
  outline: 2px solid var(--danger);
}

.cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--cell-border);
  background: var(--cell-bg);
}

.coil {
  background: var(--coil-body);
}

.coil-head {
  background: var(--coil-head);
}

.food {
  background: var(--food);
}

.mobile-controls {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 240px;
  margin-inline: auto;
  touch-action: none;
}

.mobile-controls__btn {
  font-size: 28px;
  line-height: 1;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid var(--button-border);
  background: var(--button-bg);
  min-height: 56px;
  min-width: 56px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: transform 120ms ease, filter 120ms ease, background 120ms ease, border-color 120ms ease;
}

.mobile-controls__btn.is-pressed {
  transform: scale(0.94);
  filter: brightness(1.15);
  border-color: var(--coil-head);
}

.mobile-controls__btn:nth-child(1) {
  grid-column: 2;
}

.mobile-controls__btn:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.mobile-controls__btn:nth-child(3) {
  grid-column: 3;
  grid-row: 2;
}

.mobile-controls__btn:nth-child(4) {
  grid-column: 2;
  grid-row: 3;
}

@media (max-width: 768px) {
  body {
    place-items: start center;
  }

  .app {
    width: min(96vw, 560px);
    padding: 12px;
  }

  .hud {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .score-wrap {
    font-size: 16px;
  }

  .actions {
    width: 100%;
    justify-content: space-between;
  }

  .actions button {
    flex: 1;
    min-height: 44px;
    font-size: 16px;
    padding: 10px 12px;
  }

  .board {
    width: min(92vw, 560px);
    max-width: none;
  }

  .mobile-controls {
    width: min(96vw, 380px);
    gap: 14px;
    margin-top: 18px;
  }

  .mobile-controls__btn {
    min-width: 76px;
    min-height: 76px;
    font-size: 36px;
    border-radius: 18px;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (hover: none) and (pointer: coarse) {
  .mobile-controls {
    margin-top: 14px;
  }
}