/**
 * pathologic_game.css
 *
 * Everything PathologicGame builds inside the container it is handed, and
 * nothing else. The container is the only selector that has to exist in the
 * page: the class is put on it by the script, and every rule here is written
 * under it, so a page may hold more than one game and none of these names can
 * collide with the page's own.
 *
 * Type and colour are inherited from the page rather than set here, except
 * where a part of the game is a different size or colour from the text around
 * it. The counters are drawn rather than set, and the drawing takes its colour
 * and its size by reading the rules below off the elements it stands in for -
 * so these are the one place those are decided.
 */

.pathologic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pathologic .board-wrap {
  display: inline-flex;
  flex-direction: column;
  /* Shrink to the board canvas, so the counters can hang off its corners. */
  align-items: stretch;
}

/* One row over the top of the board, with a counter at each end of it. */
.pathologic .hud {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  /* What the drawn line comes to at the label's size: the font's em box plus
     the room boil-text leaves for the wobble. Holding the row to it means the
     board does not jump down the page when the counters arrive. */
  min-height: 33px;
  /* Both insets are the board's own padding, so a counter sits over the
     corner of the ruled grid rather than of the canvas around it. */
  padding: 0 var(--hud-inset, 15px);
  font-variant-numeric: tabular-nums;
}
.pathologic .counter {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
/* Half again the size of the surrounding type. Written as an em rather than
   in pixels so it stays that, whatever the page is set in. */
.pathologic .hud .label { color: #6f6657; font-size: 1.5em; }
.pathologic .hud .value { font-size: 21px; }
.pathologic .hud .value.exhausted { color: #b4382f; }

/* The counters are drawn, never set. The text stays in the page but never
   reaches the screen: it is what a screen reader is given, and it is where
   the colours and sizes the drawing uses are defined. Setting it as well
   would only mean a flash of the fallback face before the outlines land. */
.pathologic .hud canvas { display: block; }
.pathologic .hud .label,
.pathologic .hud .value {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  clip: rect(0 0 0 0);   /* for browsers without clip-path */
  white-space: nowrap;
}

.pathologic .board {
  display: block;
  touch-action: manipulation;
  cursor: pointer;
}
.pathologic .board.locked { cursor: default; }

/* Rows of buttons, centred under the board. The gaps are left at nil because
   each button canvas already carries the pencil margin as transparent
   border, which is most of the space between them. */
.pathologic .controls-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.pathologic .controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 4px;
}
.pathologic .go {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}
.pathologic .go:disabled { cursor: default; opacity: .45; }
.pathologic .go:focus-visible { outline: 2px solid #8a7f6a; outline-offset: 4px; border-radius: 4px; }
.pathologic .go canvas { display: block; }

.pathologic .note {
  margin: 0;
  min-height: 18px;
  font-size: 15px;
  color: #7a7062;
}