/* Arcade hub: a grid of game tiles driven by stick + button. DOM over an
   animated canvas backdrop (starfield, raster bars, synth floor), scanlines
   and a vignette on top so it sits with the CRT games. */

#riverrun.hub {
  background: #05070f;
  color: #f2f6ff;
  overflow: hidden;
}

#riverrun.hub .hb-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

#riverrun.hub .hb-bg {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.75));
  pointer-events: none;
  z-index: 2;
}

#riverrun.hub .hb-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 1.8vw, 48px);
  padding: 20px;
  z-index: 1;
}

#riverrun.hub .hb-title {
  font-size: clamp(28px, 4.2vw, 120px);
  font-weight: 700;
  letter-spacing: 0.25em;
  padding-left: 0.25em;
  text-shadow: 0.07em 0.07em 0 var(--rr-pink), 0.14em 0.14em 0 #0c1018;
  animation: rr-logo 1.6s steps(1) infinite;
}

#riverrun.hub .hb-marquee {
  font-size: clamp(12px, 1.1vw, 32px);
  letter-spacing: 0.5em;
  color: var(--rr-amber);
  text-shadow: 0.15em 0.15em 0 #0c1018;
  white-space: nowrap;
  overflow: hidden;
  width: 82vw;
  text-align: center;
  animation: hb-marquee 1.2s steps(2) infinite;
}

@keyframes hb-marquee {
  0% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* the grid spans ~80% of the screen whatever its size; everything inside scales with it */
#riverrun.hub .hb-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.3vw, 36px);
  width: 82vw;
}

@media (max-aspect-ratio: 1/1) {
  #riverrun.hub .hb-grid { grid-template-columns: repeat(3, 1fr); }
}

/* tiles: corners cut as a two-step staircase, like the corners of the pixel
   letters in the title. The element itself is the border colour, clipped to
   the stepped shape; ::before is the fill, inset by the border width and
   clipped the same way; drop-shadow follows the clipped outline. */
#riverrun.hub .hb-tile {
  --s: clamp(4px, 0.42vw, 11px);        /* one stair step */
  --b: clamp(3px, 0.25vw, 8px);         /* border width */
  --cut: polygon(
    calc(2 * var(--s)) 0, calc(100% - 2 * var(--s)) 0,
    calc(100% - 2 * var(--s)) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(2 * var(--s)), 100% calc(2 * var(--s)),
    100% calc(100% - 2 * var(--s)), calc(100% - var(--s)) calc(100% - 2 * var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - 2 * var(--s)) calc(100% - var(--s)), calc(100% - 2 * var(--s)) 100%,
    calc(2 * var(--s)) 100%, calc(2 * var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - 2 * var(--s)), 0 calc(100% - 2 * var(--s)),
    0 calc(2 * var(--s)), var(--s) calc(2 * var(--s)), var(--s) var(--s), calc(2 * var(--s)) var(--s)
  );
  position: relative;
  aspect-ratio: 4 / 3;
  border: none;
  background: #2a3352;                  /* the border */
  clip-path: var(--cut);
  filter: drop-shadow(clamp(4px, 0.35vw, 10px) clamp(4px, 0.35vw, 10px) 0 #05070f);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.6vw, 18px);
  cursor: pointer;
}

#riverrun.hub .hb-tile::before {
  content: '';
  position: absolute;
  inset: var(--b);
  background: #0f1730;                  /* the fill */
  clip-path: var(--cut);
  z-index: 0;
}

#riverrun.hub .hb-tile > * { position: relative; z-index: 1; }

#riverrun.hub .hb-tile svg {
  width: 40%;
  height: auto;
  filter: drop-shadow(0.15vw 0.15vw 0 #05070f);
}

#riverrun.hub .hb-name {
  font-size: clamp(11px, 1vw, 30px);
  letter-spacing: 0.18em;
  color: #f2f6ff;
  text-shadow: 0.15em 0.15em 0 #05070f;
}

#riverrun.hub .hb-sub {
  font-size: clamp(8px, 0.7vw, 20px);
  letter-spacing: 0.12em;
  color: #8995b8;
}

/* the selected tile: inverted fill, the border blinks in the game's colour, the icon bounces */
#riverrun.hub .hb-tile.sel {
  background: currentColor;
  filter: drop-shadow(clamp(6px, 0.5vw, 14px) clamp(6px, 0.5vw, 14px) 0 #05070f);
  transform: translate(-0.15vw, -0.15vw);
  animation: hb-march 0.5s steps(2) infinite;
}

#riverrun.hub .hb-tile.sel::before { background: #f2f6ff; }
#riverrun.hub .hb-tile.sel .hb-name { color: #05070f; text-shadow: none; }
#riverrun.hub .hb-tile.sel .hb-sub { color: #3a4360; }
#riverrun.hub .hb-tile.sel svg { animation: hb-bounce 0.6s steps(2) infinite; }

@keyframes hb-march {
  0% { background: currentColor; }
  50% { background: #f2f6ff; }
}

@keyframes hb-bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-0.4vw); }
}

#riverrun.hub .hb-foot {
  display: flex;
  gap: 28px;
  align-items: center;
}

#riverrun.hub .hb-foot .rr-press { font-size: clamp(15px, 1.3vw, 38px); }