@font-face {
  font-family: 'Jersey 10';
  src: url('../fonts/Jersey10-Regular.woff2') format('woff2');
  font-display: block;
}

:root {
  --ink: #fff4d6;
  --shadow: #1d1712;
  --panel: #1d1712c8;
  --accent: #e2b13c;
  --blood: #a8262a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--shadow);
  color: var(--ink);
  font: 22px/1.1 'Jersey 10', monospace;
  user-select: none;
}

canvas {
  display: block;
  image-rendering: pixelated;
  cursor: crosshair;
}

.hud {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 2px 2px 0 var(--shadow);
  pointer-events: none;
}

.hud[hidden] { display: none; }

#score { font-size: 40px; }

.menu {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: #1d171280;
}

.menu.title { background: linear-gradient(#1d171200, #1d1712a0); }
.menu[hidden] { display: none; }

.logo {
  margin: 0;
  font-size: clamp(64px, 14vw, 128px);
  font-weight: normal;
  letter-spacing: 2px;
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--blood), 8px 8px 0 var(--shadow);
}

.menu:not(.title) .logo { font-size: 56px; }

.menu-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: min(340px, 100%);
}

.menu-items button {
  font: inherit;
  font-size: 28px;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid transparent;
  padding: 6px 18px;
  cursor: pointer;
  text-align: left;
}

.menu-items input {
  font: inherit;
  font-size: 28px;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid transparent;
  padding: 6px 18px;
}

.menu-items input::placeholder { color: #fff4d680; }

.menu-items button:hover,
.menu-items button:focus-visible,
.menu-items button:focus,
.menu-items input:focus {
  outline: none;
  border-color: var(--accent);
  color: var(--accent);
}

.controls {
  margin: 0;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 16px;
  background: var(--panel);
  max-width: 100%;
}

.controls dt { color: var(--accent); }
.controls dd { margin: 0; }
.controls[hidden] { display: none; }

.note {
  margin: 0;
  color: var(--accent);
  text-align: center;
}

.note[hidden],
.lobby[hidden] { display: none; }

.lobby {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  max-width: 100%;
}

.share {
  margin: 0;
  text-align: center;
  user-select: text;
  overflow-wrap: anywhere;
}

.sides {
  display: flex;
  gap: 12px;
}

.side {
  min-width: 160px;
  padding: 8px 16px;
  background: var(--panel);
}

.side h2 {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: normal;
}

.side.blue h2 { color: #6f9ee8; }
.side.red h2 { color: #e0605a; }

.side ul {
  margin: 0;
  padding: 0;
  list-style: none;
}