/* Vault Heist — shared by the square and the hex game. */
:root {
  --bg: #0d1117;
  --panel: #161c25;
  --ink: #e6edf5;
  --ink-soft: #8d96a3;
  --line: #262f3b;
  --accent: #ffcf26;
  --accent-ink: #1b1b1b;
}
.overlay { background: rgba(13, 17, 23, 0.86) !important; padding: 20px; }
html, body { overscroll-behavior: none; }
.stage {
  position: relative;
  width: min(calc(100vw - 16px), calc((100vh - 72px) * 9 / 16));
  width: min(calc(100vw - 16px), calc((100dvh - 72px) * 9 / 16));
  aspect-ratio: 9 / 16;
  margin: 8px auto 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(0, 0, 0, 0.5);
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.overlay h2 { font-size: 30px; letter-spacing: 0.06em; }
.overlay .big { font-size: 44px; font-weight: 900; color: var(--ink); font-family: ui-monospace, Consolas, monospace; }
.overlay .hint { font-size: 14px; }
.how { font-size: 14px; color: var(--ink-soft); max-width: 280px; margin: 0 auto; line-height: 1.5; }
.how b { color: var(--ink); }
.sizes { display: grid; gap: 10px; width: min(260px, 80%); margin: 0 auto; }
.size {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 800;
  box-shadow: inset 0 0 0 2px var(--line);
}
.size small { font-weight: 600; color: var(--ink-soft); }
.size.chosen { box-shadow: inset 0 0 0 2px var(--accent); }
.size:active { transform: scale(0.97); }

/* The bar under the board: dig or mark, and a fresh vault. */
.bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: none;
  justify-content: center;
  gap: 10px;
}
.bar.show { display: flex; }
.bar button {
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 800;
  font-size: 14px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line);
}
.bar button.marking { background: var(--accent); color: var(--accent-ink); box-shadow: none; }