/* Snake page. The board wears a DOS palette of its own; game.js reads these
   three properties for the canvas, so this block is the only place the
   colours are written down. */

.snake {
  --dos-grey: #aaaaaa;   /* CGA light grey: the board */
  --dos-red: #aa0000;    /* CGA red: the food */
  --dos-slate: #2f3e4e;  /* the snake */

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* The board can be dragged out to the full width of the window. */
  max-width: none;
  padding-block: 2rem;

  /* style.css centres main vertically with margin:auto. Here the top has to
     stay put: the corner grip sets the height by how far it is from the top
     edge, and a board that re-centred as it grew would slide out from under
     the pointer. */
  margin: 0 auto;
}

/* The stage is exactly as wide as the board, so the score and the key hint
   line up with its edges. game.js sets the width and the board's height in
   whole cells; nothing here scales, so a cell is always the same size. */
.stage {
  margin: 0 auto;
}

/* Two numbers and no labels: each is set in the colour of the thing it
   counts. Slate, left, is the snake's length; red, right, is food eaten. */
.tally {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* A flex row of its own, so the length is laid out exactly as the food count
   opposite is; as plain inline text it sat a pixel lower. */
.length {
  display: flex;
  align-items: baseline;
}

.score { color: var(--dos-slate); }

/* Squares still to come, beside the length they are about to join: the same
   slate, fainter. Shown only while the snake is growing. */
.pending {
  margin-left: 0.5ch;
  color: var(--dos-slate);
  opacity: 0.55;
}

.pending[hidden] {
  display: none;
}
.eaten { color: var(--dos-red); }

.frame {
  position: relative;
  margin-top: 0.6rem;
}

.board {
  background: var(--dos-grey);
  /* Swipes steer the snake; without this the page scrolls under the thumb. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.board canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* With no words on the page, a dimmed board is what says "not running":
   paused, or finished. A fresh game stays bright. */
.board.idle canvas {
  opacity: 0.45;
}

/* The resize grip: a slate bracket hugging the bottom-left corner from the
   outside, so it never covers a cell the food could land on. The hit area
   is a good deal bigger than the mark, so a thumb can find it. */
.grip {
  position: absolute;
  left: -12px;
  bottom: -12px;
  width: 34px;
  height: 34px;
  cursor: nesw-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.grip::before {
  content: "";
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 14px;
  height: 14px;
  border-left: 3px solid var(--dos-slate);
  border-bottom: 3px solid var(--dos-slate);
  opacity: 0.6;
  transition: opacity 0.12s ease;
}

.grip:hover::before,
.grip.dragging::before {
  opacity: 1;
}

/* The pause menu: a DOS dialog over the dimmed board. It is a sibling of the
   board, not a child, so the board's pointer capture (for swipes) cannot
   swallow presses meant for the menu's buttons. It is wider than the 10x10
   minimum board and simply overhangs it, centred; nothing clips it. */
.menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 3px;
  background: var(--dos-slate);
  color: var(--dos-grey);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

/* `display` on a class outranks the browser's [hidden] rule; say it again. */
.menu[hidden] {
  display: none;
}

/* length / area = X%. A readout, not a setting: no hover, no selection, and
   a rule beneath to set it apart from the rows that are. */
.menu .progress {
  display: block;
  padding: 3px 6px 5px;
  margin-bottom: 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--dos-grey) 45%, transparent);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.menu .row {
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 3px 6px;
  text-align: left;
  cursor: pointer;
}

/* The row the arrow keys are on, in inverse video. */
.menu .row.selected {
  background: var(--dos-grey);
  color: var(--dos-slate);
}

.menu .value {
  font-variant-numeric: tabular-nums;
}

/* "increment" and "exponent" differ by a letter; hold the wider so the menu
   does not twitch when the mode flips. */
.menu [data-setting="mode"] .value {
  display: inline-block;
  min-width: 9ch;
}

/* The growth row explains itself on hover; game.js keeps data-tip in step
   with the number. The rows are deliberately not positioned, so this hangs
   from the menu as a whole: hung from its own row it would cover the rows
   beneath. It may run past a small board, which is fine: nothing clips it. */
.menu .row[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 7px;
  background: var(--dos-slate);
  color: var(--dos-grey);
  outline: 1px solid var(--dos-grey);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* Steering on the left, pause in the centre, vibe on the right. The outer
   columns are equal, so the centre item is centred on the board rather than
   merely between its neighbours. */
.stage {
  container-type: inline-size;
}

.bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.bar > :first-child { justify-self: start; }
.bar > :last-child { justify-self: end; }

/* A board too narrow for one line stacks them, left-aligned. */
@container (max-width: 21rem) {
  .bar { grid-template-columns: 1fr; }
  /* All of them, not just the last: a grid item stretches by default, and a
     stretched button centres its text, which leaves the middle hint adrift. */
  .bar > *,
  .bar > :last-child { justify-self: start; } /* :last-child named to outrank the rule above */
}

.keys {
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* The two hints that are also buttons, for a finger with no keyboard. They
   look exactly like the hint beside them. */
button.keys {
  font: inherit;
  letter-spacing: 0.06em;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

button.keys:hover {
  color: var(--fg);
}