/* The site in the game's own look (the main menu, Manual style): white glossy panels on a slate-blue world, brick
   lettering (bricktext.js), Nunito. Shared by the launch page and the demo's page. */
:root {
  --ink: #696b70;          /* the menu's labels */
  --ink-strong: #1a1c20;
  --soft: rgba(105, 107, 112, 0.68);
  --panel-top: #fefefe;
  --panel-bottom: #f3f4f4;
  --edge: rgba(0, 0, 0, 0.07);
  --lit: #72a2ce;          /* a chosen or hovered button */
  --lit-ink: #ffffff;
  --sky-top: #7a8fae;
  --sky-bottom: #43526b;
  --shadow: 0 6px 18px rgba(13, 20, 38, 0.28);
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--sky-bottom); }
body {
  margin: 0; color: var(--ink-strong); font: 600 15px/1.5 var(--body);
  background: var(--sky-bottom);
  min-height: 100vh;
}
[hidden] { display: none !important; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
canvas[data-bricks] { display: block; color: var(--ink); }

/* a menu button: the label in bricks, a line about it under */
.item {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 7px;
  width: 100%; min-height: 78px; padding: 14px 26px; text-decoration: none; text-align: left;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid var(--edge); border-radius: 6px; box-shadow: var(--shadow);
  font: inherit; cursor: pointer;
  transition: transform 0.15s ease;
}
.item .lit { display: none; color: var(--lit-ink); }
.item small { font: 600 13px/1 var(--body); color: var(--soft); }
.item:hover, .item:focus-visible { background: var(--lit); transform: translateY(-2px); outline: none; }
.item:focus-visible { box-shadow: var(--shadow), 0 0 0 3px #fff; }
.item:hover .rest, .item:focus-visible .rest { display: none; }
.item:hover .lit, .item:focus-visible .lit { display: block; }
.item:hover small, .item:focus-visible small { color: rgba(255, 255, 255, 0.85); }
.item .go { position: absolute; right: 22px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--ink); opacity: 0.5; }
.item:hover .go, .item:focus-visible .go { color: #fff; opacity: 1; }
.item.off { cursor: default; background: linear-gradient(180deg, #f6f6f5, #ebeceb); box-shadow: 0 3px 10px rgba(13, 20, 38, 0.18); }
.item.off:hover { transform: none; background: linear-gradient(180deg, #f6f6f5, #ebeceb); }
.item.off:hover .rest { display: block; }
.item.off:hover .lit { display: none; }
.item.off:hover small { color: var(--soft); }
.item.off .rest { opacity: 0.45; }
.item small.warn, .warn { display: inline-flex; align-items: center; gap: 6px; color: #b5651d; }
.warn svg { width: 15px; height: 15px; flex: none; }
.item.off:hover small.warn { color: #b5651d; }