/*
 * The page around the table.
 *
 * Deliberately quiet. The playfield carries all the colour, so everything
 * outside it is stone and parchment and stays out of the way. The palette is
 * the one the art was generated against: crimson, gold, weathered grey.
 */

:root {
  --stone-900: #14100e;
  --stone-800: #1e1815;
  --stone-700: #2b2320;
  --stone-400: #6d605a;
  --parchment: #e8dcc4;
  --gold: #d8a842;
  --crimson: #8e2130;

  --header-h: 3rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: radial-gradient(circle at 50% 0%, var(--stone-800), var(--stone-900) 70%);
  color: var(--parchment);
  font: 400 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  padding: 0 max(0.75rem, env(safe-area-inset-left)) 0 max(0.75rem, env(safe-area-inset-right));
  border-bottom: 1px solid var(--stone-700);
  font-size: 0.8rem;
  color: var(--stone-400);
}

footer.bar {
  border-bottom: 0;
  border-top: 1px solid var(--stone-700);
  padding-bottom: env(safe-area-inset-bottom);
}

.wordmark {
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold);
}

nav {
  display: flex;
  gap: 0.5rem;
}

.ghost {
  border: 1px solid var(--stone-700);
  border-radius: 4px;
  background: transparent;
  color: var(--stone-400);
  font: inherit;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  /* The portfolio link wears this too, and an anchor brings its own colour and
     underline unless told otherwise. */
  text-decoration: none;
  line-height: 1.5;
  display: inline-block;
}

.ghost:hover,
.ghost[aria-pressed='true'] {
  border-color: var(--gold);
  color: var(--gold);
}

a {
  color: var(--stone-400);
}

canvas#table {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0.5rem;
}

/*
 * The stage sizes itself from the canvas rather than the other way round. The
 * canvas is always 1024 by 1536 internally, which is the table's own coordinate
 * space, and CSS scales it. Nothing in the game ever has to know the screen size.
 */
.stage {
  position: relative;
  height: 100%;
  aspect-ratio: 1024 / 1536;
  max-width: 100%;
  max-height: 100%;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #100c0a;
  touch-action: none;
}

/*
 * The scoreboard sits under the table, not on it.
 *
 * It used to be pinned across the top of the canvas, where it covered the
 * castle: the gate, the portcullis and the towers are the thing the whole table
 * points at, and they were behind four panels. Nothing about a score needs to
 * be over the playfield, so it moved out of the picture entirely and shrank.
 */
.hud {
  display: flex;
  gap: 0.3rem;
  width: 100%;
  max-width: 520px;
  margin: 0.4rem auto 0;
  pointer-events: none;
}

.panel {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.2rem 0.3rem;
  border: 1px solid rgb(216 168 66 / 0.22);
  border-radius: 4px;
  background: rgb(10 8 7 / 0.5);
}

.label {
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-400);
}

.value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gold);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  text-align: center;
  background: rgb(10 8 7 / 0.72);
  border-radius: 6px;
}

.overlay[hidden] {
  display: none;
}

.headline {
  font-size: clamp(1.1rem, 4vw, 1.7rem);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.05em;
}

.sub {
  max-width: 26ch;
  font-size: 0.85rem;
  color: var(--parchment);
  opacity: 0.75;
}

/* The plunger charge, shown as a bar rather than a number nobody would read. */
.plunger {
  position: absolute;
  right: 0.4rem;
  bottom: 0.5rem;
  width: 6px;
  height: 22%;
  border: 1px solid rgb(216 168 66 / 0.3);
  border-radius: 3px;
  overflow: hidden;
}

.plunger span {
  position: absolute;
  inset: auto 0 0 0;
  height: 0%;
  background: linear-gradient(to top, var(--crimson), var(--gold));
  transition: height 40ms linear;
}

.touch {
  display: none;
  gap: 0.5rem;
  width: 100%;
  max-width: 520px;
  padding: 0.5rem 0.5rem max(0.5rem, env(safe-area-inset-bottom));
}

/*
 * The three touch pads.
 *
 * `user-select` alone is not enough on a phone. A long press on the plunger pad
 * put the glyph into a text selection with the copy bubble over it, because iOS
 * runs its own callout gesture and Android its own long-press-to-select, and
 * neither is governed by `user-select`. Winding the plunger IS a long press, so
 * the one control that has to be held was the one control that could not be.
 *
 * `-webkit-touch-callout` kills the iOS bubble, `-webkit-user-select` covers the
 * older WebKit prefix, and `-webkit-tap-highlight-color` stops the grey flash
 * that reads as the button having failed.
 */
.pad {
  flex: 1;
  min-height: 56px;
  border: 1px solid var(--stone-700);
  border-radius: 8px;
  background: var(--stone-800);
  color: var(--gold);
  font-size: 1.2rem;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.pad.narrow {
  flex: 0 0 30%;
}

.pad:active {
  background: var(--crimson);
  color: var(--parchment);
}

/* Touch controls only where there is no keyboard to speak of. */
@media (hover: none) and (pointer: coarse) {
  .touch {
    display: flex;
    /* Above the footer, and the footer is gone anyway. Belt and braces, because
       the thing being protected here is the only way to play on a phone. */
    position: relative;
    z-index: 6;
  }

  /*
   * No footer on a phone.
   *
   * The page is a column that fills the viewport, and on a short screen the
   * touch row is the part that gets squeezed. The footer then sat over the
   * bottom of all three pads and swallowed every tap that landed there: the
   * controls were visible and dead, which is worse than not drawing them.
   *
   * The footer is one line of prose and a link to the repo, and both are on the
   * page it links to. The buttons are the only way to play. So the buttons win.
   */
  footer.bar {
    display: none;
  }
}

/*
 * The geometry key.
 *
 * Pinned to the left margin, which on this page is a wide strip of empty dark
 * ground. It is only ever visible while the Geometry overlay is on, so it costs
 * the normal page nothing, and it is out of the way of the board so it can never
 * cover the thing it is a legend for.
 */
.geokey {
  position: fixed;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.09);
  border-radius: 0.6rem;
  background: rgb(12 10 8 / 0.82);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: #d9d2c4;
  pointer-events: none;
  z-index: 5;
}

.geokey[hidden] {
  display: none;
}

.geokey b {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8f8676;
}

.geokey span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.geokey i {
  width: 1.6rem;
  height: 0.28rem;
  border-radius: 0.14rem;
  background: currentColor;
}

.geokey small {
  margin-top: 0.3rem;
  color: #8f8676;
  font-size: 0.7rem;
}

/* On a narrow screen there is no margin to put it in, so it goes away. */
@media (max-width: 900px) {
  .geokey {
    display: none;
  }
}

/* The swipe hint, shown only where the gesture exists.

   It sits with the touch pad rather than under the board, because that is where
   somebody's thumbs already are, and it is deliberately quiet: a hint that
   shouts competes with the table for attention every single frame. */
.swipe-hint {
  display: none;
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--stone-500, #7d7268);
}

@media (hover: none) and (pointer: coarse) {
  .swipe-hint {
    display: block;
  }
}