/* Chessingo - multiplayer page extras. Rides on play.css (board, panel, cards,
   promo, overlay) and only adds the lobby / room / chat-input chrome. */

/* Quick Match (FEAT-2026-0930-0008): live-first search + seed-backfill note. */
.mp-quick-hint { color: var(--text-dim); font-size: 0.8rem; line-height: 1.45; margin: 0 0 0.55rem; }
.mp-quick-status {
    font-family: 'Silkscreen', monospace;
    font-size: 0.74rem;
    color: var(--sky);
    text-align: center;
    margin: 0.55rem 0 0.2rem;
}
.mp-h3-gap { margin-top: 1.1rem; }

.mp-or {
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0.6rem 0 0.4rem;
}

.mp-input {
    width: 100%;
    padding: 0.62rem 0.8rem;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.25)),
        rgba(13, 8, 23, 0.5);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}
.mp-input::placeholder { color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 0.12em; }
.mp-input:focus { outline: none; border-color: var(--corn); box-shadow: 0 0 12px rgba(255, 210, 63, 0.35); }
#join-code { text-transform: uppercase; text-align: center; font-family: 'Silkscreen', monospace; }

.mp-room-code {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
#room-code {
    flex: 1;
    font-family: 'Silkscreen', monospace;
    font-size: 1.3rem;
    letter-spacing: 0.14em;
    color: var(--corn);
    text-shadow: 0 0 14px rgba(255, 210, 63, 0.5);
    word-break: break-all;
}
/* Compact kit-button variants (higher specificity than base button.btn so the
   auto width and tighter border-image insets win). Same real button art. */
button.btn.mp-copy, button.btn.mp-send {
    width: auto;
    padding: 0.02rem 0.2rem 0.1rem;
    font-size: 0.74rem;
    border-width: 12px 16px 15px 14px;
}

.mp-seat {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}
.mp-seat b { color: var(--sky); }

.mp-opp {
    margin-top: 0.4rem;
    font-size: 0.9rem;
    color: var(--text-dim);
}
.mp-opp.online { color: var(--lime); }
.mp-opp.offline { color: var(--magenta); }

/* Per-move clock (FEAT-2026-0923-0020). Lights sky on your move, magenta on
   the opponent's, corn + glow under 10s so a flag never sneaks up. */
.mp-clock {
    margin-top: 0.55rem;
    padding: 0.32rem 0.5rem;
    border-radius: 10px;
    text-align: center;
    font-family: 'Silkscreen', monospace;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}
.mp-clock.mine { color: var(--sky); }
.mp-clock.theirs { color: var(--magenta); }
.mp-clock.low { color: var(--corn); text-shadow: 0 0 10px rgba(255, 210, 63, 0.6); }

.mp-chat {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.55rem;
}
.mp-chat .mp-input { margin-bottom: 0; }
.mp-chat .mp-input:disabled, .mp-send:disabled { opacity: 0.45; cursor: not-allowed; }

/* Chat lines reuse #events .ev from play.css; distinguish the two speakers. */
#events .ev.me { border-left: 3px solid var(--sky); }
#events .ev.them { border-left: 3px solid var(--magenta); }
#events .ev.sys { color: var(--text-dim); font-style: italic; border-left: 3px solid var(--card-line); }
/* Rated-result line (PvP Elo, FEAT-2026-0923-0025): the ladder verdict for the
   game that just ended, called out in corn so it reads as the headline event. */
#events .ev.rating {
    color: var(--corn);
    font-family: 'Silkscreen', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    border-left: 3px solid var(--corn);
    text-shadow: 0 0 10px rgba(255, 210, 63, 0.4);
}

/* The friend lobby card (GDD s11.4 Friend). One obvious action, then two
   compact rows. */
.mp-lede { color: var(--text-dim); font-size: 0.95rem; line-height: 1.5; margin: 0 0 0.8rem; }
.mp-row { display: flex; gap: 0.5rem; align-items: stretch; }
.mp-row .mp-input { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
button.btn.mp-inline { width: auto; flex: 0 0 auto; padding-inline: 1.1rem; }
.mp-alt { display: block; margin-top: 1rem; text-align: center; color: var(--corn); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.mp-alt:hover { text-decoration: underline; }