/* Game night host controls: the night's phone screen, and the same panel inline in the host page's
   "Running the night" card. The panel is broadcast to both places, so which one it is comes from the
   ancestor: under .gtf-hc (the phone layout) the action bar is fixed to the bottom of the screen;
   anywhere else it flows with the content. */

/* Which game (or break) the stage is about */
.gtf-night-slot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
  padding: 20px 0;
  border-top: 2px solid var(--gtf-surface-2);
  border-bottom: 2px solid var(--gtf-surface-2);
}

.gtf-night-slot__eyebrow {
  font-size: 15px;
  font-weight: 600;
  color: var(--gtf-text-2);
}

.gtf-night-slot__name {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Main screen mode while between games */
.gtf-night-modes {
  margin-top: 24px;
}

.gtf-night-modes__label {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--gtf-text-2);
}

.gtf-night-modes__buttons {
  display: flex;
  gap: 8px;

  & form {
    flex: 1;
    margin: 0;
  }
}

.gtf-night-mode {
  width: 100%;
  min-height: 48px;
  border: 2px solid var(--gtf-surface-5);
  border-radius: 10px;
  background: transparent;
  color: var(--gtf-cream);
  font-family: var(--gtf-font);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;

  &:hover {
    border-color: var(--gtf-yellow);
  }
}

.gtf-night-mode--active {
  border-color: var(--gtf-yellow);
  background: var(--gtf-yellow);
  color: var(--gtf-ink);
}

/* Action bar: in the flow by default */
.gtf-night-bar {
  margin-top: 24px;
}

.gtf-night-bar__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.gtf-night-bar__hint {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--gtf-text-2);
  text-align: center;
}

/* ...and fixed on the night's phone screen */
.gtf-hc .gtf-night-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  margin: 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--gtf-surface-2);
  background: var(--gtf-ink);
}

.gtf-hc .gtf-night-bar__inner {
  max-width: 520px;
  margin: 0 auto;
}

/* Inline in the host page card: no stage heading (the card has its own), compact buttons */
.gtf-host-running .gtf-night-head {
  display: none;
}

.gtf-host-running #game_night_host_controls {
  & .gtf-hc__lede {
    margin-bottom: 16px;
    font-size: 16px;
  }

  & .gtf-night-slot {
    padding: 14px 0;
  }

  & .gtf-night-slot__name {
    font-size: 22px;
  }

  & .gtf-hc-btn-form {
    display: block;
    flex: 1 1 auto;
  }

  & .gtf-hc-btn {
    min-height: 48px;
    font-size: 16px;
  }

  & .gtf-hc-btn--link {
    flex: 1 1 auto;
  }
}

/* Line-up */
.gtf-night-lineup {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gtf-night-lineup__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 0;
  border-top: 2px solid var(--gtf-surface-2);
}

.gtf-night-lineup__number {
  width: 20px;
  font-family: var(--gtf-mono);
  font-size: 14px;
  color: var(--gtf-text-2);
}

.gtf-night-lineup__name {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 800;
}

.gtf-night-lineup__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-basis: 100%;
  padding-left: 34px;
}

/* Roster (phone screen and host page card) */
.gtf-night-roster__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
}

.gtf-night-roster__count {
  font-family: var(--gtf-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--gtf-text-2);
}

.gtf-night-roster__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gtf-night-roster__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 2px solid var(--gtf-surface-2);
}

.gtf-night-roster__name {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.gtf-night-roster__reset {
  min-height: 36px;
  padding: 0 12px;
  border: 2px solid var(--gtf-surface-5);
  border-radius: 8px;
  background: transparent;
  color: var(--gtf-cream);
  font-family: var(--gtf-font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;

  &:hover {
    border-color: var(--gtf-yellow);
  }
}

.gtf-night-roster__empty {
  margin: 0;
  color: var(--gtf-text-2);
}