/* Perto: the box to type a word, the last word sent, and every word sent from the closest to the farthest, each on a
   bar as long as it is close (green, yellow, red as in Contexto, in light tones so the dark text reads on them). */
.board.perto { aspect-ratio: auto; max-width: 40rem; display: grid; gap: .75rem; align-content: start; }
.entering .quit, .entering .perto-closest { display: none; }
.perto-form { display: flex; gap: .6rem; }
.perto-form input { flex: 1; min-width: 0; font: 700 1.25rem var(--title); color: var(--ink); padding: .85rem 1.1rem; border: 2px solid #ddd4e6; border-radius: 1rem; background: #fff; }
.perto-form input:focus { outline: none; border-color: var(--brand); }
.perto-send { border: 0; cursor: pointer; padding: .85rem 1.5rem; }
.perto-msg { min-height: 1.6rem; font: 800 1.125rem var(--title); color: var(--brand); }
.perto-count { margin: 0; font: 700 1.0625rem var(--title); color: #7a6a95; }
.perto-count:empty { display: none; }
.perto-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.perto-list:empty { display: none; }
#last { padding-bottom: .4rem; border-bottom: 2px solid var(--line); }
.perto-list .row { position: relative; display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-radius: .75rem; background: #f3eefa; overflow: hidden;
  font: 800 1.125rem var(--title); color: var(--ink); }
.perto-list .row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--bar); }
.perto-list .row > * { position: relative; }
.perto-list .row .word { flex: 1; }
.perto-list .row.near { --bar: #a9dfb0; }
.perto-list .row.mid { --bar: #f7d97a; }
.perto-list .row.far { --bar: #f2b3ab; }
.perto-list .row.last { box-shadow: 0 0 0 3px var(--brand); }
.tag-hint { font: 700 1rem var(--title); color: var(--brand); background: #fff; border-radius: 999px; padding: .1rem .7rem; }
.quit { display: flex; align-items: center; gap: .75rem; font: 700 1.0625rem var(--title); color: var(--ink); }
.quit button { font: 800 1.0625rem var(--title); border: 0; border-radius: 999px; padding: .55rem 1.2rem; cursor: pointer; background: #ede4fb; color: var(--brand); }
.quit .quit-yes { background: var(--orange); color: #fff; }
.quit-confirm { display: none; align-items: center; gap: .6rem; flex-wrap: wrap; }
.quit.asking .quit-ask { display: none; }
.quit.asking .quit-confirm { display: flex; }
.finished .quit { display: none; }
.perto-closest { display: grid; gap: .75rem; }
.perto-closest[hidden] { display: none; }
.perto-closest h2 { font-size: 1.5rem; }
.credit { margin: 1rem 0 0; font-size: 1rem; color: #7a6a95; }
@media (max-width: 760px) { .perto-send { padding: .85rem 1.1rem; } }