/*
 * The front page.
 *
 * One featured stream large enough to be the reason you stayed, then the people,
 * then the games. The shell, palette and motion come from season.css.
 */

/* ---------------- hero ---------------- */

.hm-body { padding: 26px 30px 40px; }

.hm-hero { text-align: center; padding: 26px 0 34px; animation: fadeUp .6s ease both; }

.hm-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .34em;
  color: var(--dim);
  margin-bottom: 12px;
}

.hm-title {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
  /* The mark sits inline between two words, so the line has to wrap as one. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .28em;
  flex-wrap: wrap;
}

/*
 * The wordmark, standing in for the word.
 *
 * Sized against the type rather than in pixels, so it tracks the heading down
 * through every breakpoint without a second rule. The artwork carries its own
 * spacing, so it is set a little taller than the caps beside it and pulled onto
 * their optical baseline.
 */
.hm-title-mark {
  height: 1.15em;
  width: auto;
  display: block;
  position: relative;
  top: .02em;
}

/* Read, never seen: the heading still says the word it is showing. */
.hm-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hm-sub { font-size: 11px; letter-spacing: .14em; color: var(--soft); margin-top: 14px; }

/* ---------------- the featured stream ---------------- */

.hm-feature {
  position: relative;
  display: block;
  height: 440px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tile);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
  margin-bottom: 34px;
  text-decoration: none;
  animation: fadeUp .6s ease .1s both;
  transition: transform .25s ease, box-shadow .25s ease;
}

.hm-feature:hover { transform: translateY(-4px); box-shadow: 0 14px 50px rgba(0, 0, 0, .6); }

/* Not a link when there is nothing to watch. */
.hm-feature.is-quiet { cursor: default; }
.hm-feature.is-quiet:hover { transform: none; box-shadow: 0 4px 24px rgba(0, 0, 0, .35); }

.hm-shot { position: absolute; inset: 0; }
.hm-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hm-shot.is-blank {
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(63, 220, 111, .10), transparent 70%),
    linear-gradient(168deg, #16161c, #0b0b0f);
}

.hm-feat-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(4, 4, 6, .72), transparent);
  z-index: 2;
  pointer-events: none;
}

.hm-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #fff;
  background: var(--red);
  border-radius: 4px;
  padding: 5px 10px;
}

.hm-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blinkDot 1.2s infinite; }

/* Offline: the same slot, saying so, rather than a red badge that is a lie. */
.hm-live.is-off { background: rgba(255, 255, 255, .1); color: var(--mute); }
.hm-live.is-off i { animation: none; background: var(--dim); }

.hm-watching { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink); }

.hm-feat-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 70px 18px 18px;
  background: linear-gradient(180deg, transparent, rgba(4, 4, 6, .7) 35%, rgba(4, 4, 6, .95));
  z-index: 2;
  pointer-events: none;
}

.hm-feat-tag { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--green); margin-bottom: 8px; }
.hm-feat-name { font-size: 34px; font-weight: 800; text-transform: uppercase; line-height: 1; color: var(--ink); }
.hm-feat-who { font-size: 11px; letter-spacing: .08em; color: var(--mute); margin-top: 8px; }

.hm-cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  background: var(--green);
  color: #04120a;
  border-radius: 999px;
  padding: 11px 22px;
  white-space: nowrap;
}

.hm-cta.is-quiet { background: rgba(255, 255, 255, .08); color: var(--mute); }

/* ---------------- section heads ---------------- */

.hm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hm-head b { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--ink); }
.hm-head span { font-size: 12px; letter-spacing: .14em; color: var(--dim); }

/* ---------------- streamers ---------------- */

.hm-people {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}

.hm-person {
  position: relative;
  display: block;
  height: 340px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tile);
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
  transition: transform .22s ease, box-shadow .22s ease;
}

.hm-person:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 16px 50px rgba(0, 0, 0, .6); }
.hm-person img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hm-p-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(4, 4, 6, .7), transparent);
  z-index: 2;
  pointer-events: none;
}

.hm-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  border-radius: 4px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, .12);
  color: var(--mute);
}

.hm-badge.is-live { background: var(--red); color: #fff; }

.hm-p-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(4, 4, 6, .7) 40%, rgba(4, 4, 6, .96));
  z-index: 2;
  pointer-events: none;
}

.hm-handle {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-p-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.hm-p-line em { font-style: normal; font-size: 11px; letter-spacing: .1em; color: var(--mute); }
.hm-p-line b { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--green); }

/* ---------------- the game promo ---------------- */

.hm-promo {
  position: relative;
  display: block;
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 34px;
  text-decoration: none;
  /*
   * Neutral dark, matching the design.
   *
   * This had been a purple and blue wash with a purple border and a purple
   * badge, which read as a promo tile belonging to the site rather than as the
   * game's own space, and fought the key art sitting next to it. The design
   * puts the band in the same greys as everything else and lets the artwork be
   * the only colour on the row.
   */
  background: linear-gradient(100deg, #161618 0%, #0a0a0b 55%, #101013 100%);
  transition: filter .2s ease;
}

.hm-promo:hover { filter: brightness(1.15); }

.hm-promo-art { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; }
.hm-promo-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-promo-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0a0a0b, transparent 45%);
}

.hm-promo-text { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); z-index: 2; }

.hm-flag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #0a0a0b;
  background: var(--ink);
  border-radius: 4px;
  padding: 4px 10px;
  margin-bottom: 12px;
  animation: floaty 3s ease-in-out infinite;
}

.hm-promo-name { font-size: 38px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; line-height: 1; }
.hm-promo-line { font-size: 13px; letter-spacing: .08em; color: var(--mute); margin-top: 8px; }

.hm-promo-go {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #0a0a0b;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 9px 20px;
  margin-top: 14px;
}

/* ---------------- games ---------------- */

.hm-games {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 26px;
  scrollbar-width: thin;
}

.hm-games::-webkit-scrollbar { height: 6px; }
.hm-games::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 4px; }

.hm-game {
  position: relative;
  display: block;
  flex: 0 0 306px;
  height: 240px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tile);
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
  transition: transform .22s ease, box-shadow .22s ease;
}

.hm-game:hover { transform: translateY(-5px); box-shadow: 0 14px 44px rgba(0, 0, 0, .6); }
.hm-game img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hm-g-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(4, 4, 6, .72), transparent);
  z-index: 2;
  pointer-events: none;
}

.hm-g-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
  background: var(--red);
  border-radius: 3px;
  padding: 3px 7px;
}

.hm-g-live i { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: blinkDot 1.2s infinite; }
.hm-g-live.is-off { background: rgba(255, 255, 255, .1); color: var(--mute); }
.hm-g-live.is-off i { animation: none; background: var(--dim); }

.hm-g-count { font-size: 11px; font-weight: 700; color: var(--ink); }

.hm-g-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(4, 4, 6, .7) 35%, rgba(4, 4, 6, .95));
  z-index: 2;
  pointer-events: none;
}

.hm-g-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-g-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.hm-g-line em { font-style: normal; font-size: 11px; letter-spacing: .08em; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-g-line b { font-size: 11px; font-weight: 700; letter-spacing: .08em; }

/* ---------------- the store strip ---------------- */

.hm-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  text-decoration: none;
  transition: border-color .2s ease;
}

.hm-strip:hover { border-color: var(--green); }
.hm-strip-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.hm-strip-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  background: var(--green);
  color: #04120a;
  border-radius: 4px;
  padding: 5px 10px;
}

.hm-strip-note { font-size: 11px; letter-spacing: .1em; color: var(--mute); }
.hm-strip-go { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--green); white-space: nowrap; }

/* ---------------- footer ---------------- */


.hm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 26px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--dim);
}

.hm-empty { color: var(--dim); font-size: 12px; letter-spacing: .12em; padding: 8px 0 20px; }

@keyframes blinkDot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------------- narrower ---------------- */

@media (max-width: 1100px) {
  .hm-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hm-body { padding: 18px 16px 28px; }
  .hm-title { font-size: 38px; }
  .hm-feature { height: 260px; }
  .hm-feat-foot { flex-direction: column; align-items: flex-start; gap: 12px; padding: 50px 14px 14px; }
  .hm-feat-name { font-size: 22px; }
  .hm-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hm-person { height: 250px; }
  .hm-promo { height: auto; padding: 20px; }
  .hm-promo-art { display: none; }
  .hm-promo-text { position: static; transform: none; }
  .hm-promo-name { font-size: 26px; }
  .hm-strip { flex-direction: column; align-items: flex-start; }
  .hm-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 520px) {
  .hm-people { grid-template-columns: 1fr; }
  .hm-game { flex-basis: 240px; }
}

/*
 * The overlay text blocks are spans, because they sit inside <a> and a link may
 * not contain a <div>. Spans are inline, so without this the tag, the title and
 * the handle all ran together on one line.
 */
.hm-feat-foot > span,
.hm-feat-tag, .hm-feat-name, .hm-feat-who,
.hm-p-foot, .hm-handle, .hm-p-line,
.hm-g-foot, .hm-g-name, .hm-g-line,
.hm-promo-text, .hm-promo-name, .hm-promo-line, .hm-shot,
.hm-strip-left { display: block; }

.hm-feat-foot > span:first-child { flex: 1; min-width: 0; }
.hm-p-line, .hm-g-line, .hm-strip-left { display: flex; }
.hm-cta, .hm-flag, .hm-promo-go, .hm-strip-tag, .hm-strip-go { display: inline-block; }

/* The generated fallback when a channel has no portrait file. */
.hm-person .letters, .hm-game .letters, .hm-shot .letters {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .85);
}

/*
 * The showreel, when nothing is live.
 *
 * Sized to cover rather than fit. The frame is far wider than sixteen by nine,
 * so an iframe stretched to its bounds leaves the video pillarboxed in the
 * middle with black either side, which reads as a broken embed rather than as a
 * hero.
 *
 * Instead the iframe is given the video's own shape at the full width of the
 * frame and centred, so it is taller than the opening and the excess is cropped.
 * That also takes the player's title bar and controls out of view with it,
 * which matters here: the frame already carries its own caption, and a second
 * one belonging to somebody else's upload sitting on top of it is noise.
 */
.hm-reel {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  transform: translateY(-50%);
  border: 0;
  display: block;
  pointer-events: none;   /* decorative here; the card's own link is the target */
}

/*
 * The overlay has to stop swallowing clicks, or the play button underneath it
 * cannot be pressed. Only the call to action stays clickable.
 */
.hm-feat-foot.is-reel { pointer-events: none; }
.hm-feat-foot.is-reel .hm-cta { pointer-events: auto; }