/* The visitor page. It is held by somebody lying in a dark room under a piece
   whose whole point is that it is dim, so this page is a light source in that
   room and is treated as one: near-black throughout, no white anywhere, and
   nothing that flashes or transitions upward in brightness. */

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: #05060a;
  color: #5d6472;
  font: 400 15px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* A drag on the pad is a brush stroke, never a scroll, a zoom or a
     pull-to-refresh. */
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

#pad {
  position: relative;
  /* Sized off the short axis, which on a phone held upright is the width.
     This used to be `flex: 1`, and in a column flex container that sets the
     *height* to whatever is going spare — then `aspect-ratio: 1` derived the
     width from it, so on a tall phone the circle came out as wide as the screen
     was tall and ran off both sides. `max-height` could not save it, because by
     then the overflowing dimension was the width.
     Driving it from the axis that is actually constrained is the fix, and it
     needs the orientation rule below or the same bug reappears on its side. */
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  /* Round, because the picture is round, and with no top: the composition has
     no "up" and people are lying underneath at every angle, so a pad with a
     right way up would be claiming an orientation the piece does not have. */
  border-radius: 50%;
  aspect-ratio: 1;
  margin: auto;
  border: 1px solid #171b24;
  overflow: hidden;
}

/* Lying down with the phone turned sideways is not an unusual way to hold this,
   given where the piece is. Then height is the short axis and drives instead. */
@media (orientation: landscape) {
  #pad {
    width: auto;
    height: 100%;
  }
}

#ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  color: #2f3542;
  letter-spacing: 0.08em;
  pointer-events: none;
  /* Only ever fades out. */
  transition: opacity 1.2s linear;
}

#hint.gone { opacity: 0; }

footer {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding-top: 12px;
  font-size: 13px;
  min-height: 20px;
}

#swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2f3542;
}

#status[data-state="waiting"] { color: #6c5a3a; }