/* The arena page: the world fills the window; bar, numbers and panel float over it. */

.arena-page { overflow: hidden; height: 100vh; }

canvas.world {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  cursor: grab;
}
canvas.world:active { cursor: grabbing; }

.float { background: var(--float); backdrop-filter: blur(6px); }
.bar.float { position: fixed; top: 0; left: 0; right: 0; border-bottom: 1px solid var(--line); }

.hud {
  position: fixed;
  top: 58px;
  left: 16px;
  text-transform: uppercase;
  color: var(--fg); /* the scene's sky is the look's background, so the page's ink reads on it */
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.hud .clock { font-size: 28px; letter-spacing: 0.04em; line-height: 1.1; }
.hud .sun { color: var(--dim); margin-bottom: 10px; }
.hud .fps { color: var(--dim); }
.hud dl { display: grid; grid-template-columns: auto auto; gap: 1px 14px; margin: 0; }
.hud dt { color: var(--dim); }
.hud dd { margin: 0; text-align: right; }

.caption {
  position: fixed;
  left: 16px;
  bottom: 12px;
  text-transform: uppercase;
  color: var(--fg); /* the scene's sky is the look's background, so the page's ink reads on it */
  pointer-events: none;
}

.side {
  position: fixed;
  top: 50px;
  right: 0;
  bottom: 0;
  width: min(380px, 100vw);
  padding: 16px;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  text-transform: uppercase;
}
.side[hidden] { display: none; }

.roster, .present { display: grid; gap: 4px; }
.robot {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 4px 6px 4px 4px;
  border: 1px solid var(--line);
}
.robot svg { width: 72px; height: 48px; display: block; }
.robot .name { color: var(--fg); }
.robot .meta { color: var(--dim); font-variant-numeric: tabular-nums; }
.robot .add { display: flex; gap: 10px; }
.robot .add button { padding: 2px 0; }
.robot.flash { animation: flash 0.8s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent3) 30%, transparent); } to { background: transparent; } }
.empty { color: var(--dim); text-transform: none; }

.present .line { display: flex; justify-content: space-between; color: var(--dim); font-variant-numeric: tabular-nums; }
.present .line b { color: var(--fg); font-weight: normal; }

.side .row { display: flex; gap: 14px; margin-bottom: 6px; }
.side .label { color: var(--dim); width: 52px; }
.sizes, .days, .speeds { display: flex; gap: 12px; flex-wrap: wrap; }
.side button.on { text-decoration: underline; }
.side .about { color: var(--dim); text-transform: none; }

/* The lines the roster shows: [V1] [V2] [V3], on or off; each robot tagged with its line. */
.line-pick { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.line-pick button { text-align: left; color: var(--dim); }
.line-pick button.on { color: var(--fg); text-decoration: underline; }
.tag { color: var(--accent); }