/* Shared by every page: the site name, the corner menu (the die's number → page table), the
   running line and the loading state. Kept here, with the die, so they are the same everywhere. */

/* ====== Name: centred at the top ====== */
.site-top {
  display: flex;
  justify-content: center;
  padding: 28px 40px 0;
}
.site-name { font-weight: 500; }

/* ====== Menu: a small list in the top-left corner ======
   "7 notes": the number to roll, then where it leads. Plain text on purpose (roll, or type the
   address) until three rolls on a page have gone nowhere; then the rows are links. */
.site-menu {
  position: absolute;
  top: 28px;
  left: 40px;
  display: grid;
  color: var(--muted, #7a7a72);
  white-space: nowrap;
  z-index: 1;
}
.site-menu .row { position: relative; cursor: default; }
.site-menu b {
  display: inline-block;
  width: 2ch;
  margin-right: 1.5ch;
  font-weight: 400;
  text-align: right;
  color: var(--fg, inherit);
}
.site-menu .here,
.site-menu .won { color: var(--fg, inherit); }
.site-menu .here b { font-weight: 500; }
/* the rolled number: the one red dot */
.site-menu .won::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #e0502a);
}
.site-menu a.row { cursor: pointer; }
.site-menu a.row:hover { color: var(--fg, inherit); text-decoration: none; }
/* unlocked: a short flash shows that the rows are links now */
.site-menu.unlocked a.row { animation: menu-unlock 0.9s ease-out; }
@keyframes menu-unlock { from { color: var(--fg, inherit); } }

/* pages leave room for the menu: content starts one blank line under its last row */
body > main { padding-top: calc(var(--menu-rows, 5) * 22px); }

@media (max-width: 600px) {
  .site-top { padding: 22px 16px 0; }
  .site-menu { top: 22px; left: 16px; }
}

/* ====== The line: one line near the bottom of the window where the page speaks ======
   The die's hints and the word widget's histories. A band centred on the page; text that fits
   sits still, longer text runs through it right to left. No panel: just the page colour behind
   the letters, fading out at both ends. */
.site-line {
  position: fixed;
  left: 17%;
  right: 17%;
  bottom: 28px;
  height: 22px;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  background: var(--bg, #f8f8e8);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  z-index: 2147482000;
}
.site-line.on { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.site-line .run { display: inline-block; }
.site-line .sep { margin: 0 2ch; }
.site-line.running {
  text-align: left;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
/* no motion: the whole text, wrapped and centred */
.site-line.still { height: auto; max-height: 40vh; overflow-y: auto; white-space: normal; }
@media (max-width: 600px) { .site-line { left: 16px; right: 16px; bottom: 22px; } }

/* ====== Loading: only the name, the menu, the die and the line show until everything is there ====== */
.page > *, body > main, .panel { transition: opacity 0.25s ease; }
html.dice-loading .page > :not(.site-top),
html.dice-loading body > main,
html.dice-loading .panel { opacity: 0; transition: none; }