/* Host line, guess input, strike indicator.
   On mobile this whole block sticks to the bottom of the viewport so the
   input sits directly above the keyboard rather than scrolling away under it. */

.hud {
  margin-top: var(--gap-lg);
}

.hostline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-sm);
  min-height: 26px;
  padding: 4px 2px;
  color: var(--green);
  font-size: clamp(13px, 3.2vw, 15px);
  letter-spacing: 0.02em;
}

.hostline__prompt {
  color: var(--green-dim);
  flex: none;
}

.hostline__text {
  flex: 0 1 auto;
  min-width: 0;
}

.hostline__cursor {
  flex: none;
  width: 8px;
  height: 15px;
  background: var(--green);
  animation: cursor-blink 1.05s steps(1, end) infinite;
}

@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hostline--gold .hostline__text {
  color: var(--gold-bright);
  text-shadow: var(--glow-gold);
}

.hostline--alert .hostline__text {
  color: var(--red);
}

.guess-form {
  display: flex;
  gap: var(--gap-sm);
  margin-top: var(--gap-sm);
}

/* `display: flex` would otherwise win over the [hidden] default. */
.guess-form[hidden] { display: none; }

.guess-input {
  flex: 1;
  min-width: 0;
  /* 16px minimum: anything smaller makes iOS Safari zoom on focus. */
  font-size: 16px;
  font-family: var(--font-mono);
  padding: 12px var(--gap);
  color: var(--ink);
  background: #05091a;
  border: var(--border-chunky) solid var(--stage-line);
  border-radius: var(--radius);
  caret-color: var(--green);
}

.guess-input::placeholder {
  color: var(--ink-faint);
}

.guess-input:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: var(--glow-green);
}

.guess-input[readonly] {
  opacity: 0.6;
}

.guess-form.is-shaking .guess-input {
  animation: input-shake var(--t-shake) ease-in-out;
  border-color: var(--red);
}

@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.guess-submit {
  flex: none;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 0 var(--gap-lg);
  color: var(--stage-deep);
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  border: var(--border-chunky) solid var(--gold-deep);
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter 140ms ease, transform 90ms ease;
}

.guess-submit:hover { filter: brightness(1.1); }
.guess-submit:active { transform: translateY(1px); }
.guess-submit:disabled { filter: grayscale(0.7) brightness(0.7); cursor: default; }

/* While a guess is in flight. `is-waiting` only appears once the round trip has
   run long enough to be worth explaining — usually a live judge call. */
.guess-form.is-thinking .guess-input {
  border-color: var(--green-dim);
}

.guess-form.is-waiting .guess-input {
  animation: input-breathe 1.1s ease-in-out infinite;
}

@keyframes input-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(74, 255, 160, 0); }
  50% { box-shadow: 0 0 16px rgba(74, 255, 160, 0.35); }
}

/* --- Strikes ----------------------------------------------------------- */

.strikes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  margin-top: var(--gap);
}

.strike {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: #1b2452;
  border: 2px solid #1b2452;
  border-radius: var(--radius);
  transition: color 160ms ease, border-color 160ms ease;
}

.strike.is-lit {
  color: var(--red);
  border-color: var(--red);
  text-shadow: 0 0 14px rgba(255, 46, 62, 0.8);
}

.strike.is-popping {
  animation: strike-pop 380ms var(--ease-overshoot);
}

@keyframes strike-pop {
  0% { transform: scale(0.4); opacity: 0.2; }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 720px) {
  .hud {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: var(--gap);
    padding: var(--gap) var(--gap) calc(var(--gap-sm) + env(safe-area-inset-bottom));
    margin-left: calc(-1 * var(--gap));
    margin-right: calc(-1 * var(--gap));
    /* Opaque within a few pixels: the board must not read through the HUD. */
    background: linear-gradient(180deg, rgba(6, 10, 24, 0) 0, var(--stage-deep) 10px);
    border-top: 1px solid var(--stage-edge);
  }

  .strikes { margin-top: 6px; gap: var(--gap-sm); }
  .strike { width: 26px; height: 26px; font-size: 17px; }
  .guess-input { padding: 10px var(--gap); }
}

@media (prefers-reduced-motion: reduce) {
  .hostline__cursor { animation: none; }
  .guess-form.is-shaking .guess-input { animation: none; }
  .guess-form.is-waiting .guess-input { animation: none; border-color: var(--green); }
  .strike.is-popping { animation: none; }
}