/* The clickable loop page: a 16:9 picture with its rings and featured buttons on top, the card beside it on wide
   screens (over the picture, on the side away from the clicked object) and under it on narrow ones. No text under 14 px. */
:root {
  color-scheme: dark;
  --bg: #05060a;
  --fg: #eef1f6;
  --muted: #b9c1cd;
  --panel: rgba(10, 12, 18, 0.94);
  --line: #3a4254;
  --accent: #ffd27a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

* { box-sizing: border-box; }

/* hidden means hidden, whatever display a rule gives the element (the controls, the canvas, the card's parts) */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

figure { margin: 0; }

/* the controls come first in the page (tab order) and are shown under the picture */
.loop {
  display: flex;
  flex-direction: column;
}

.view {
  position: relative;
  order: 1;
}

.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: 6px;
}

.stage video,
.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stage video { object-fit: contain; }

/* one button per featured object, for the keyboard only: the pointer reaches the objects through the canvas */
.featured {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.featured button {
  position: absolute;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}

.hint {
  position: absolute;
  top: 12px;
  left: 12px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(5, 6, 10, 0.72);
  font-size: 15px;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

.hint.gone { opacity: 0; }

.controls {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}

button {
  font: inherit;
  color: var(--fg);
  cursor: pointer;
}

.toggle {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 15px;
  background: #1a1f2b;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.toggle:hover { background: #242b3a; }

button:focus-visible,
a:focus-visible,
.card:focus-visible,
.featured button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.card {
  position: absolute;
  top: 12px;
  right: 12px;
  width: min(340px, 42%);
  max-height: calc(100% - 24px);
  overflow: auto;
  padding: 12px 16px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
}

.card.at-left {
  right: auto;
  left: 12px;
}

.card[hidden],
.card [hidden] { display: none; }

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.card h2 {
  margin: 4px 0 8px;
  font-size: 19px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.close {
  flex: none;
  width: 36px;
  height: 36px;
  margin: -4px -8px 0 auto;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
}

.close:hover { border-color: var(--line); }

.closeup img {
  display: block;
  width: 160px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0 0 10px;
  border-radius: 4px;
  background: #000;
}

.closeup-note {
  margin: -6px 0 10px;
  font-size: 14px;
  color: var(--muted);
}

.lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lines li { margin: 0 0 4px; }

.source {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.source a,
figcaption a { color: inherit; }

figcaption {
  order: 3;
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

figcaption p { margin: 0 0 6px; }

@media (max-width: 899px) {
  .card,
  .card.at-left {
    position: static;
    width: auto;
    max-height: none;
    margin-top: 10px;
    scroll-margin: 8px;    /* brought into view on opening (player.js), clear of the screen's edge */
  }
}

@media (prefers-reduced-motion: reduce) {
  .hint { transition: none; }
}