/* The start page: the logo over the client's dark stone, then a window per game. */
body.hub {
  align-items: center;
  min-height: 100%;
  height: auto;
  padding: 28px 16px 24px;
  gap: 14px;
  /* The client's own dark grey backdrop, tiled flat as in the client (no lighting): calm, and darker
     than the windows' stone so they stand out. */
  background: url('/ui/images/backdrop-dark-grey.png') #2c2c2c;
  /* The client's title artwork, to bring back:
  background: linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.75)) fixed, url('/ui/images/title.jpg') center / cover fixed, #000; */
}
.hub-title { margin: 0 0 12px; line-height: 0; }
.hub-title img { width: min(380px, 80vw); height: auto; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.6)); }
.hub-games {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  justify-content: center;
  gap: 34px 18px; /* room for the tall title bars */
  width: 100%;
  max-width: 1040px;
}

/* A game: the client's dialog window, all of it a link. */
.hub-game {
  width: auto;
  color: var(--text);
  text-decoration: none;
  cursor: url('/ui/cursors/cursor-pointinghand.png') 4 2, pointer;
  transition: filter 0.15s;
}
.hub-game:hover { filter: brightness(1.12); }
.hub-game:focus { outline: none; }
.hub-game:focus-visible { outline: 1px solid var(--text-bright); outline-offset: 3px; }
.hub-game .window-title { display: flex; justify-content: center; align-items: center; }
.hub-game .window-title .pixel-text { zoom: 1.25; margin-top: 0; }
.hub-game .window-body { gap: 10px; padding: 10px; }

/* The tutorial loop, sunk into the window like the games' own: a 7:3 scene, filling it edge to edge. */
.hub-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 7 / 3;
  overflow: hidden;
  background: #000;
  outline: 1px solid #111;
  box-shadow: inset 1px 1px 0 #2a2a2a;
}
.hub-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-plate .pixel-text { zoom: 1.5; }

.hub-blurb { flex: 1; line-height: 1.45; }
/* Play: the client's grey button, the window's full width. */
.hub-actions {
  display: flex;
  padding-top: 8px;
  border-top: 5px solid;
  border-image: url('/ui/images/divider-horizontal.png') 5 0 0 / 5px 0 0 stretch;
}
.hub-actions .btn { flex: 1; text-align: center; }
.hub-game:active .btn {
  padding: 4px 12px 3px 14px;
  border-image-source: url('/ui/images/skin/classic/button-9grid-pressed.png');
}

.hub-footer { margin-top: auto; padding-top: 24px; color: var(--muted); font-size: 10px; text-align: center; }
.hub-footer a { color: var(--text); }