/**
 * The guest faces, and the picker that cycles them.
 *
 * Shared by Roadhouse Showdown and Trivia. One 7x7 sprite sheet of 49 faces
 * at 27KB, so a player list of sixteen is one request rather than sixteen,
 * and a picker that flicks through the whole set never waits for anything.
 *
 * Positions are set inline by js/identity.js as percentages, which is what
 * lets the same sprite be drawn at 112px in the picker, 48px in a lobby and
 * 28px in a scoreboard row without a second copy of anything.
 */

.av {
    display: inline-block;
    width: var(--av, 48px);
    height: var(--av, 48px);
    flex: 0 0 auto;
    background-image: url('/assets/avatars.png?v=2');
    /* 7 columns and 7 rows, so each cell is 700% of the box. */
    background-size: 700% 700%;
    background-repeat: no-repeat;
    image-rendering: pixelated;      /* it is pixel art; do not smooth it */
    border-radius: 10px;
    vertical-align: middle;
}

/* A Discord avatar is a photo, not a sprite: one image filling the box. */
.av.is-photo {
    background-size: cover;
    background-position: center;
    image-rendering: auto;
}

/* --------------------------------------------------------------- picker */

.idpick { text-align: center; }
.idpick-head { font-size: 1.15rem; margin: 0 0 1rem; }

.idpick-face {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    margin-bottom: 0.4rem;
}

/*
 * Arrows rather than a grid of forty-nine, and this is the whole design.
 * A grid is a decision to be got through; arrows are a toy, and people will
 * click through the entire set laughing at them — which is the only reason
 * to have drawn funny ones.
 */
.idpick-arrow {
    appearance: none; cursor: pointer; font: inherit;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--card-2, #262b36);
    border: 1px solid var(--line, #38404f);
    color: var(--ink, #f4f2ee);
    font-size: 1.8rem; line-height: 1; padding: 0 0 0.2rem;
    display: grid; place-items: center;
    touch-action: manipulation;
}
.idpick-arrow:active { transform: scale(0.94); }

.idpick-avatar {
    appearance: none; cursor: pointer; padding: 0.4rem;
    background: var(--card, #1e222b);
    border: 1px solid var(--line, #38404f);
    border-radius: 18px;
    display: grid; place-items: center;
    touch-action: manipulation;
}
.idpick-avatar:active { transform: scale(0.97); }

.idpick-hint {
    color: var(--dim, #a4adbd); font-size: 0.78rem; margin: 0 0 1rem;
}

.idpick-name {
    width: 100%; max-width: 20rem; font: inherit; text-align: center;
    padding: 0.8rem 0.9rem; min-height: 50px;
    background: var(--card-2, #262b36);
    border: 1px solid var(--line, #38404f);
    border-radius: 11px; color: var(--ink, #f4f2ee);
}
.idpick-name:focus { outline: 2px solid var(--gold, #e0a244); outline-offset: -2px; }
.idpick-name:disabled { opacity: 0.45; }

.idpick-discord {
    display: flex; gap: 0.6rem; align-items: flex-start; text-align: left;
    max-width: 22rem; margin: 1rem auto 0;
    background: var(--card, #1e222b);
    border: 1px solid var(--line, #38404f);
    border-radius: 12px; padding: 0.75rem 0.85rem;
    font-size: 0.85rem; line-height: 1.45; color: var(--dim, #a4adbd);
    cursor: pointer;
}
.idpick-discord input { margin-top: 0.15rem; width: 18px; height: 18px; flex: 0 0 auto; }
.idpick-discord b { color: var(--ink, #f4f2ee); }

.idpick-note {
    color: var(--dim, #a4adbd); font-size: 0.82rem; line-height: 1.5;
    max-width: 22rem; margin: 1rem auto 0;
}

/* ------------------------------------------------------- player rows */

.who { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-tag {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--dim, #a4adbd); border: 1px solid var(--line, #38404f);
    border-radius: 999px; padding: 0.1rem 0.4rem;
}