/* ---------- Contexto ---------- */

/* The list scrolls, so the stage fills rather than centres. */
.stage {
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px 0;
}

/* ---------- status bar ---------- */

.statusbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
}

.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
}
.chip span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- entry ---------- */

.entry {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.entry input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 16px;           /* below 16px iOS zooms the page on focus */
  font-weight: 600;
}
.entry input::placeholder { color: var(--muted); font-weight: 500; }
.entry input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}
.entry input:disabled { opacity: .5; }

.entry .btn { flex: 0 0 auto; padding: 0 18px; }

/* ---------- guess list ---------- */

.list {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* The dock below carries the safe-area inset; this only needs to clear the
     last row from whatever is parked underneath. */
  padding-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Where a guess is parked when its place in the sorted list is off screen.
   Sits above the list, separated from it, so it reads as "here's what you just
   played" rather than as another entry in the ranking. */
.latest {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;
}
.latest[hidden] { display: none; }
.latest .row { margin: 0; }

.row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
  flex: 0 0 auto;
}

/* Width carries the closeness; colour carries the band. */
.row__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--band);
  opacity: .32;
  transition: width .35s var(--ease);
}

.row__word,
.row__rank {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 650;
}
.row__word { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__rank { font-variant-numeric: tabular-nums; color: var(--text-2); }

.row.b-hot  { --band: var(--ok); }
.row.b-warm { --band: var(--warn); }
.row.b-cold { --band: var(--bad); }

.row.is-new { animation: row-in .28s var(--ease); }
@keyframes row-in { from { transform: translateY(-6px); opacity: 0; } }

/* The row currently pinned above the list, and its twin in the list. */
.row.is-current { box-shadow: inset 0 0 0 2px var(--accent); }

.row.is-hint .row__word::after {
  content: 'hint';
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.row.is-won {
  background: var(--ok);
  color: #06210f;
}
.row.is-won .row__rank { color: #06210f; }
.row.is-won .row__bar { display: none; }

/* ---------- empty state ---------- */

.hintline {
  margin: 18px auto 0;
  max-width: 320px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- result ---------- */

.result {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  text-align: center;
}
.result[hidden] { display: none; }
.result b { display: block; font-size: 19px; font-weight: 800; }
.result p { margin: 4px 0 10px; font-size: 14px; color: var(--text-2); }
.result .btn { min-height: 40px; }
.result__btns { display: flex; gap: 8px; justify-content: center; }
.result__btns .btn { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 14px; }

/* ---------- the closest words, shown once it's over ---------- */

.toplist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}
/* Words the player actually reached, so the list reads as a scorecard. */
.toplist .row.is-found { box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------- controls ---------- */

.pad { display: flex; gap: 8px; justify-content: center; max-width: 520px; margin: 0 auto; }
.pad .btn { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 0 6px; font-size: 14px; }