/* Host controls shell: the phone screen a host uses to run a game.
   Sizes follow the "… host controls" designs (560px column, fixed bottom action bar).
   Classes are .gtf-hc-*; the page body is #host-controls and is replaced live by Turbo Streams. */

:root {
  --gtf-surface-5: #4A4036;
}

.gtf-hc {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px 190px;
}

.gtf-hc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 14px;
}

.gtf-hc__link {
  font-size: 15px;
  font-weight: 600;
}

.gtf-hc__title {
  margin: 14px 0 6px;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 900;
}

.gtf-hc__subtitle {
  margin: 0 0 28px;
  font-size: 16px;
  color: var(--gtf-text-2);
}

.gtf-hc__lede {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.5;
}

.gtf-hc__note {
  margin: 12px 0 0;
  padding-top: 14px;
  border-top: 2px solid var(--gtf-surface-2);
  font-size: 16px;
  color: var(--gtf-text-2);
}

.gtf-hc__section {
  margin-top: 28px;
}

/* Tones: colour for figures, markers and bar fills */
.gtf-hc-tone--success { color: var(--gtf-success); }
.gtf-hc-tone--yellow { color: var(--gtf-yellow); }
.gtf-hc-tone--orange { color: var(--gtf-orange-hi); }
.gtf-hc-tone--muted { color: var(--gtf-text-2); }

.gtf-hc-bar__fill.gtf-hc-tone--success,
.gtf-hc-feed__mark.gtf-hc-tone--success { background: var(--gtf-success); }
.gtf-hc-bar__fill.gtf-hc-tone--yellow,
.gtf-hc-feed__mark.gtf-hc-tone--yellow { background: var(--gtf-yellow); }
.gtf-hc-bar__fill.gtf-hc-tone--orange,
.gtf-hc-feed__mark.gtf-hc-tone--orange { background: var(--gtf-orange); }
.gtf-hc-bar__fill.gtf-hc-tone--muted,
.gtf-hc-feed__mark.gtf-hc-tone--muted { background: var(--gtf-line); }

/* Label / value rows */
.gtf-hc-rows {
  border-bottom: 2px solid var(--gtf-surface-2);
}

.gtf-hc-rows__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-top: 2px solid var(--gtf-surface-2);
}

.gtf-hc-rows__label {
  color: var(--gtf-text-2);
}

.gtf-hc-rows__value {
  text-align: right;
}

/* Big numbers */
.gtf-hc-stats {
  display: grid;
  gap: 16px;
  padding-bottom: 20px;
}

.gtf-hc-stats--1 { grid-template-columns: 1fr; }
.gtf-hc-stats--2 { grid-template-columns: 1fr 1fr; gap: 20px; }
.gtf-hc-stats--3 { grid-template-columns: repeat(3, 1fr); }
.gtf-hc-stats--4 { grid-template-columns: repeat(2, 1fr); }

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

.gtf-hc-stat__value {
  font-family: var(--gtf-mono);
  font-size: 36px;
  line-height: 1.1;
}

.gtf-hc-stat__value--lg {
  font-size: 40px;
}

.gtf-hc-stat__of {
  font-size: 20px;
  color: var(--gtf-text-2);
}

.gtf-hc-stat__value.is-low {
  color: var(--gtf-orange);
}

/* Progress */
.gtf-hc-bar {
  height: 8px;
  margin-bottom: 28px;
  border-radius: 4px;
  background: var(--gtf-surface-2);
  overflow: hidden;
}

.gtf-hc-bar--thick {
  height: 10px;
  border-radius: 5px;
}

.gtf-hc-bar__fill {
  width: calc(var(--pct, 0) * 1%);
  height: 100%;
  transition: width 0.4s;
}

/* Section headings */
.gtf-hc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
}

.gtf-hc-head__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: normal;
}

.gtf-hc-head__note {
  font-family: var(--gtf-mono);
  font-size: 15px;
  color: var(--gtf-text-2);
}

/* Ranked rows */
.gtf-hc-leaders {
  list-style: none;
}

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

.gtf-hc-leader__rank {
  width: 32px;
  flex: none;
  font-size: 18px;
  font-weight: 900;
}

.gtf-hc-leader__avatar {
  flex: none;
  display: inline-flex;
}

.gtf-hc-leader__name {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.gtf-hc-leader__value {
  font-size: 18px;
}

.gtf-hc-leader__delta {
  min-width: 46px;
  font-size: 14px;
  text-align: right;
}

/* Updates feed */
.gtf-hc-feed {
  list-style: none;
}

.gtf-hc-feed__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 2px solid var(--gtf-surface-2);
  font-size: 17px;
}

.gtf-hc-feed__item:nth-child(n + 5) {
  opacity: 0.6;
}

.gtf-hc-feed__mark {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

/* Yellow highlight card (winner) */
.gtf-hc-highlight {
  padding: 24px;
  border-radius: var(--gtf-radius-card);
  background: var(--gtf-yellow);
  color: var(--gtf-ink);
}

.gtf-hc-highlight__label {
  font-size: 16px;
  font-weight: 800;
}

.gtf-hc-highlight__headline {
  margin: 4px 0 10px;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.gtf-hc-highlight__headline--lg {
  font-size: 48px;
}

.gtf-hc-highlight__detail {
  font-size: 17px;
}

/* Fixed bottom action bar */
.gtf-hc-bar-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--gtf-surface-2);
  background: var(--gtf-ink);
}

.gtf-hc-bar-fixed__inner {
  max-width: 520px;
  margin: 0 auto;
}

.gtf-hc-bar-fixed__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.gtf-hc-bar-fixed__hint {
  margin-top: 8px;
  font-size: 14px;
  color: var(--gtf-text-2);
  text-align: center;
}

.gtf-hc-btn-form {
  display: block;
  margin: 0;
}

/* One big primary button on its own row; any other actions sit together in a compact row below it
   (one beside another, three across on a phone) so a night's four actions don't take over the screen. */
.gtf-hc-btn-form--primary {
  flex: 1 1 100%;
}

.gtf-hc-btn-form--secondary {
  flex: 1 1 0;
  min-width: calc(33% - 8px);
}

.gtf-hc-btn {
  width: 100%;
  min-height: 56px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: var(--gtf-font);
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.15s, border-color 0.15s;

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.gtf-hc-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.gtf-hc-btn--orange { background: var(--gtf-orange); color: var(--gtf-ink); }
.gtf-hc-btn--yellow { background: var(--gtf-yellow); color: var(--gtf-ink); }
.gtf-hc-btn--green { background: var(--gtf-success); color: var(--gtf-ink); }
.gtf-hc-btn--surface { background: var(--gtf-surface-2); color: var(--gtf-cream); }

.gtf-hc-btn--link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  text-align: center;
}

.gtf-hc-btn--link.gtf-hc-btn--primary {
  flex: 1 1 100%;
  width: 100%;
}

.gtf-hc-btn--link.gtf-hc-btn--secondary {
  flex: 1 1 0;
  min-width: calc(33% - 8px);
}

body.gtf a.gtf-hc-btn--secondary,
body.gtf a.gtf-hc-btn--secondary:hover {
  color: var(--gtf-cream);
}

.gtf-hc-btn--secondary {
  min-height: 44px;
  padding: 6px 12px;
  border-color: var(--gtf-surface-5);
  background: transparent;
  color: var(--gtf-cream);
  font-size: 16px;
  line-height: 1.15;

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

@media (max-width: 380px) {
  .gtf-hc__title { font-size: 34px; }
  .gtf-hc-stat__value { font-size: 30px; }
}