/* The page around the canvas. Everything inside it is drawn by the engine. */
:root {
  --ink: #e8e4dc;
  --dim: #9a948a;
  --back: #0e0f12;
  --edge: #2a2c33;
  --hot: #d8b26a;
  /* **the honest label's colour.** Warmer than `--hot` and dimmer than `--ink`: a card that
     says what is rough about its game should read as a caveat, not as an error or a heading. */
  --warn: #d9904a;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--back);
  color: var(--ink);
  font: 15px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  display: flex;
  flex-direction: column;
}
header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--edge);
}
header h1 { font-size: 15px; font-weight: 600; margin: 0; }
header h1 a { color: var(--ink); text-decoration: none; }
header nav { display: flex; gap: 12px; }
header nav a { color: var(--dim); text-decoration: none; }
header nav a:hover, header nav a[aria-current] { color: var(--hot); }
#status { color: var(--dim); margin-left: auto; font-size: 13px; }
main { flex: 1; position: relative; min-height: 0; }
/* the canvas is sized by CSS and winit reads that size; nothing here sets its width attribute */
#world {
  display: block; width: 100%; height: 100%; background: #000; outline: none;
  /* **touch-action is what makes a touch screen playable at all**, and without it the engine's
     own touch handling cannot win: Safari claims a one-finger drag for scrolling and two for
     zooming before any event reaches the canvas, so a thumb meant to turn the camera scrolls the
     page instead. `none` hands every gesture to the engine. See `wgame::touch`. */
  touch-action: none;
  /* a drag across a canvas otherwise selects the text around it, and iOS shows the callout menu
     on a long press, which lands in the middle of holding a stick down */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* **One footer, two devices.** A keyboard page is useless on an iPad and a thumb page is useless
   on a laptop, so each line is shown to the device that has the input. `hover: none` plus
   `pointer: coarse` is the pair that means "a finger and nothing else" — `pointer: coarse` alone is
   also true of a laptop with a touch screen, which still has a keyboard and wants the keys. */
.bythumb { display: none; }
@media (hover: none) and (pointer: coarse) {
  .bythumb { display: inline; }
  .bykeys { display: none; }
}
footer {
  padding: 8px 16px;
  border-top: 1px solid var(--edge);
  color: var(--dim);
  font-size: 13px;
}
footer b { color: var(--ink); font-weight: 600; }
/* **The ways in**, for a game that now has more than one. A row of links under the keys, wrapping
   on a phone, because a mode or a board is a URL here — the query string is the argv. */
footer nav.ways {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  margin-top: 6px;
}
footer nav.ways a { color: var(--dim); }
footer nav.ways a:hover { color: var(--hot); }
kbd {
  border: 1px solid var(--edge);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 4px;
  color: var(--ink);
}
.wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--dim);
  pointer-events: none;
  padding: 16px;
}
.wait.gone { display: none; }
.wait b { color: var(--hot); font-weight: 600; }

/* **What went wrong, where a visitor can see it.** `wgame::web::error` writes here; the engine's
   own complaints — an option it does not take, a range that does not exist — are sentences meant
   to be read, and in a browser nobody is reading the console. */
#trouble {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  margin: 0;
  max-height: 50%;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid #6b3b3b;
  border-radius: 4px;
  background: #1a1214;
  color: #f0c9c9;
  font: 13px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap;
}