/*
 * Loading lines — the splash and the top bar.
 *
 * The same dial the game shows (src/ui/Dial.tsx): an ink ring, a white face,
 * a needle sweeping clockwise once every 1.4 s, a small blue tick at twelve.
 * Under one of the loading lines, chosen at random by js/loading.js and
 * swapped every 2.2 s while the page is still loading.
 *
 * The splash is painted by CSS from the first frame — the element is in the
 * document, not injected — and js/loading.js only decides WHEN it fades. It
 * is shown once per session: js/loading.js stamps `data-loading="splash"` on
 * <html> before first paint when sessionStorage says so, and nothing in this
 * file shows the splash without that stamp, so a visitor who has already seen
 * it, or who has JavaScript off, never sees a page-covering panel it would
 * then have no way to remove.
 *
 * prefers-reduced-motion: the needle holds at twelve; the line still shows.
 */

.loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--ground, #FFFFFF);
  color: var(--ink, #14181D);
  opacity: 1;
  transition: opacity 320ms ease;
}
html[data-loading="splash"] .loading { display: flex; }
html[data-loading="splash"] .loading[data-done] { opacity: 0; pointer-events: none; }

/* The short bar on an in-site navigation: the dial, small, with the line. */
html[data-loading="bar"] .loading {
  display: flex;
  inset: auto 0 auto 0;
  top: 0;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.55rem var(--gutter, 1.25rem);
  border-bottom: 2px solid var(--ink, #14181D);
  box-shadow: 0 2px 0 var(--ground, #fff);
}
html[data-loading="bar"] .loading[data-done] { opacity: 0; pointer-events: none; }
html[data-loading="bar"] .loading .dial { inline-size: 1.5rem; block-size: 1.5rem; }
html[data-loading="bar"] .loading .dial::before { inset: 4px; }
html[data-loading="bar"] .loading .dial::after { inline-size: 2px; block-size: 0.5rem; margin-block-start: -0.5rem; }
html[data-loading="bar"] .loading .dial i { inline-size: 2px; block-size: 3px; top: 2px; }
html[data-loading="bar"] .loading__line { font-size: 0.875rem; }

/* ── The dial ───────────────────────────────────────────────────────────── */

.dial {
  position: relative;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: 50%;
  border: 3px solid var(--ink, #14181D);
  background: var(--panel, #FFFFFF);
  flex: none;
}
/* The face: a hairline inner ring so the needle reads against something. */
.dial::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid var(--rule, #DFE4E9);
}
/* The needle. Pivot at the centre; drawn from the centre up to the rim. */
.dial::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  inline-size: 3px;
  block-size: 1.6rem;
  margin-inline-start: -1.5px;
  margin-block-start: -1.6rem;
  background: var(--ink, #14181D);
  border-radius: 2px;
  transform-origin: 50% 100%;
  animation: dial-sweep 1.4s linear infinite;
}
/* The blue tick at twelve. */
.dial i {
  position: absolute;
  left: 50%;
  top: 4px;
  inline-size: 3px;
  block-size: 7px;
  margin-inline-start: -1.5px;
  background: var(--accent, #14548F);
}
@keyframes dial-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading__line {
  font-family: var(--display, 'Barlow Condensed', 'Arial Narrow', sans-serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink, #14181D);
  margin: 0;
  min-inline-size: 16ch;
  text-align: center;
}
.loading__brand { inline-size: 180px; block-size: 40px; }
html[data-loading="bar"] .loading__brand { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dial::after { animation: none; }
  .loading { transition: none; }
}