/* The die is the whole interface. Everything here exists to stay out of its
   way: colours come from the palette via CSS custom properties set in JS, so
   the chrome never introduces a colour the die does not already contain.

   Portrait is the primary layout, not a shrunk desktop one — most visitors
   arrive on a phone. The die fits to width and the controls sit in a bottom
   bar within thumb reach. */

:root {
  /* Replaced at runtime from palettes.json. These are `neon`, the palette
     settings.json defaults to and the one chipfilm rendered every video in,
     so the first paint is the right colour before any JSON has landed.
     Change these alongside settings.palette or the page flashes the wrong
     colour for one round trip; they are chromeVars() applied to neon. */
  --bg: #000000;
  --chrome: #000F06;
  --rule: #002E12;
  --ink: #00BF4D;
  --ink-dim: #006B2B;
  --accent: #FF2BD6;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.4 var(--mono);
  /* no rubber-banding: a vertical drag on the die must not scroll the page */
  overscroll-behavior: none;
}

body {
  display: grid;
  grid-template-rows: 1fr auto;
  /* dvh follows the mobile URL bar as it collapses; vh does not */
  height: 100dvh;
}

#die {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--bg);
  /* without this the browser claims pan and pinch before the canvas sees them */
  touch-action: none;
  cursor: grab;
}
#die:active { cursor: grabbing; }

/* -------------------------------------------------------------- the strip */

/* flex rather than grid: the chip menu is hidden when there is only one chip,
   and a grid would leave its column behind */
#strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--chrome);
  border-top: 1px solid var(--rule);
}
#strip[hidden] { display: none; }

button, select {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 6px 10px;
  /* 40px of vertical target on a phone, without looking like a big button */
  min-height: 34px;
  cursor: pointer;
  appearance: none;
}
button:hover, select:hover { border-color: var(--ink-dim); }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

#play { min-width: 64px; }
#step { min-width: 52px; }

/* the one icon on the page, because there is no word for "the source" that
   would not be longer than the mark itself */
#gh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  margin-left: -6px;           /* optically flush with the buttons' edges */
  color: var(--ink-dim);
}
#gh:hover, #gh:focus-visible { color: var(--ink); }
#gh:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the selects have appearance:none to keep the flat look, so they need their
   own caret — otherwise they read as labels rather than menus */
.menu { position: relative; display: inline-flex; }
.menu[hidden] { display: none; }
.menu select { padding-right: 26px; }
.menu::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1px solid var(--ink-dim);
  border-bottom: 1px solid var(--ink-dim);
  transform: rotate(45deg);
  pointer-events: none;
}

#readout {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 8ch;
  text-align: right;
}

/* ------------------------------------------------------------ the slider */

#speed {
  appearance: none;
  flex: 1 1 120px;
  min-width: 80px;
  height: 34px;              /* the touch target, not the visible track */
  background: transparent;
  cursor: pointer;
}
#speed::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--rule);
}
#speed::-moz-range-track {
  height: 2px;
  background: var(--rule);
}
#speed::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 22px;
  margin-top: -10px;         /* centre the thumb on a 2px track */
  background: var(--ink);
  border: none;
  border-radius: 0;          /* flat: hard edges, no shadow, no gradient */
}
#speed::-moz-range-thumb {
  width: 14px;
  height: 22px;
  background: var(--ink);
  border: none;
  border-radius: 0;
}

/* CC BY-NC-SA requires attribution in a manner reasonable to the medium.
   One line of small type, in the palette's own colours. */
/* what the die is computing, and who the data belongs to: the two lines of
   small type under the controls. Same size and weight, so neither shouts. */
#doing, #credit {
  flex: 1 0 100%;              /* each on its own line in portrait */
  margin: 0;
  color: var(--ink-dim);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#credit { text-decoration: none; }
#credit:hover { color: var(--ink); }
#doing { color: var(--ink); }

#status {
  position: absolute;
  inset: 0 0 auto 0;
  margin: 0;
  padding: 14px 16px;
  color: var(--ink);
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
}
#status[hidden] { display: none; }

/* Wide enough for one row: the credit joins the controls instead of
   taking a line of its own. */
@media (min-width: 620px) {
  #speed { max-width: 320px; }
  #doing { flex: 0 1 auto; margin-left: 4px; }
  #credit { flex: 1 1 auto; text-align: right; margin-left: auto; }
}

/* Coarse pointers get larger targets; the strip is where the thumb lands. */
@media (pointer: coarse) {
  button, select { min-height: 40px; }
  #speed { height: 40px; }
  #gh { min-width: 40px; min-height: 40px; }
}