/* Colourful Language, the player's phone: the points chip, the speaker's swatches and clue, the ring clock,
   the spectrum with its pin, and the result / final figures. Built on the player shell (20_player_shell.css).
   Game accent: hue 285. */

:root {
  --gtf-cl-accent: oklch(0.78 0.16 285);
  --gtf-cl-track: #3a322a;
  --gtf-cl-line: #4a4036;
}

.gtf-cl-points {
  color: var(--gtf-cl-accent);
}

/* Rules line under the waiting copy */
.gtf-cl-rule {
  max-width: none;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 2px solid var(--gtf-surface-2);
  font-size: 16px;
  line-height: 1.5;
}

/* Visually hidden, but read out (selected swatch, hex value) */
.gtf-cl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gtf-cl-error {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gtf-orange);

  &:empty {
    display: none;
  }
}

/* ---------- Buttons ---------- */

.gtf-cl-btn {
  background: var(--gtf-yellow);

  &:disabled {
    background: var(--gtf-surface-2);
    color: #8a7f70;
    opacity: 1;
  }
}

/* ---------- Speaker: six swatches and the clue ---------- */

.gtf-cl-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.gtf-cl-swatch {
  position: relative;
  min-height: 96px;
  border: 4px solid transparent;
  border-radius: 12px;
  background: var(--swatch);
  font-size: 22px;
  font-weight: 900;
  color: var(--gtf-ink);
  cursor: pointer;

  &[aria-pressed="true"] {
    border-color: var(--gtf-cream);
    box-shadow: inset 0 0 0 2px var(--gtf-ink);

    &::after {
      content: "\2713";
    }
  }

  &:disabled {
    cursor: default;
  }
}

.gtf-cl-clue {
  margin-top: 24px;
}

.gtf-cl-clue__input {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 2px solid var(--gtf-cl-line);
  border-radius: 12px;
  background: var(--gtf-surface-2);
  font-size: 20px;
  font-weight: 400;
  color: var(--gtf-cream);
}

.gtf-cl-send {
  margin-top: 16px;
}

/* The speaker's own colour once the clue is out */
.gtf-cl-target {
  height: 120px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: var(--swatch);
}

/* ---------- Heading row with the clock ---------- */

.gtf-cl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 14px;
}

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

.gtf-cl-head__title {
  margin: 0;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Ring that drains: --clock-deg is set by colourful-language-clock */
.gtf-cl-clock {
  --clock-deg: 360deg;
  --clock-colour: var(--gtf-cl-accent);

  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--clock-colour) var(--clock-deg), var(--gtf-cl-track) 0);
}

.gtf-cl-clock.is-low {
  --clock-colour: var(--gtf-orange);
}

.gtf-cl-clock__face {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gtf-ink);
  font-family: var(--gtf-mono);
  font-size: 26px;
  color: var(--gtf-cream);
}

.gtf-cl-clock.is-low .gtf-cl-clock__face {
  color: var(--gtf-orange);
}

/* ---------- Guess: the spectrum ---------- */

.gtf-cl-spectrum {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  touch-action: none;
  cursor: crosshair;
}

.gtf-cl-spectrum__canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  touch-action: none;
}

.gtf-cl-pin {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 4px solid var(--gtf-cream);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gtf-ink);
  translate: -50% -50%;
  pointer-events: none;
}

.gtf-cl-lockrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;

  & .gtf-pl-btn {
    flex: 1;
    width: auto;
  }
}

.gtf-cl-chip {
  flex: none;
  width: 56px;
  height: 56px;
  border: 2px solid var(--gtf-cl-line);
  border-radius: 12px;
  background: var(--gtf-surface-2);
}

/* ---------- Result and final ---------- */

.gtf-cl-gain {
  margin-bottom: 6px;
  font-size: 44px;
  color: var(--gtf-success);

  &.gtf-cl-gain--none {
    color: var(--gtf-text-2);
  }
}

.gtf-cl-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.gtf-cl-pair--single {
  grid-template-columns: 1fr;
}

.gtf-cl-pair__swatch {
  height: 96px;
  border-radius: 12px;
  background: var(--swatch);
}

.gtf-cl-pair__label {
  padding-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gtf-text-2);
}

.gtf-cl-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 2px solid var(--gtf-surface-2);
}

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

.gtf-cl-figures__value {
  font-family: var(--gtf-mono);
  font-size: 36px;
}

.gtf-cl-figures__value--good {
  color: var(--gtf-success);
}

@media (prefers-reduced-motion: no-preference) {
  .gtf-cl-swatch {
    transition: border-color 0.12s;
  }
}