/* QVGDK en ligne : salon, bandeau des candidats pendant la partie, classement final. */
.kqm-online-open { border-color: var(--kqm-cyan); background: linear-gradient(135deg, #0e2a6b, #15205a); color: #fff; }
.kqm-online-open span { color: var(--kqm-cyan); }

.kqm-online-card { width: min(100%, 480px); }
.kqm-online-card > .kqm-online-note { margin: 14px 0 0; color: rgba(255,255,255,.74); font-size: .74rem; line-height: 1.55; }
.kqm-online-error { margin: 12px 0 0; padding: 9px 12px; border: 1px solid rgba(255,96,120,.5); border-radius: 9px; background: rgba(120,18,40,.42); color: #ffd6dd; font-size: .7rem; font-weight: 700; }
.kqm-online-actions { display: grid; gap: 10px; margin-top: 18px; }
.kqm-online-actions .kqm-primary, .kqm-online-actions .kqm-secondary { width: 100%; }
.kqm-online-actions .kqm-online-note { margin: 0; text-align: center; color: rgba(255,255,255,.7); font-size: .7rem; }

.kqm-online-code { display: grid; justify-items: center; gap: 2px; margin-top: 16px; padding: 14px; border: 1px solid rgba(255,212,95,.4); border-radius: 12px; background: radial-gradient(circle at 50% 0%, rgba(25,118,255,.32), rgba(4,8,28,.8)); }
.kqm-online-code small { color: var(--kqm-cyan); font-size: .54rem; font-weight: 900; letter-spacing: .16em; }
.kqm-online-code strong { color: var(--kqm-gold); font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: .28em; text-indent: .28em; user-select: all; }
.kqm-online-code span { color: rgba(255,255,255,.62); font-size: .62rem; text-align: center; }
.kqm-online-code .kqm-online-server { font-size: clamp(1.1rem, 5vw, 1.4rem); letter-spacing: .02em; text-indent: 0; text-align: center; user-select: auto; }

.kqm-online-lobby { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.kqm-online-lobby li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 1px solid rgba(92,233,255,.18); border-radius: 10px; background: rgba(11,18,59,.66); }
.kqm-online-lobby li.is-me { border-color: rgba(255,212,95,.5); }
.kqm-online-lobby strong { flex: 1; min-width: 0; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.kqm-online-lobby em { padding: 3px 8px; border-radius: 999px; background: var(--kqm-gold); color: #171124; font-size: .5rem; font-style: normal; font-weight: 950; letter-spacing: .1em; }
.kqm-online-lobby small { color: rgba(255,255,255,.55); font-size: .6rem; }
.kqm-online-lobby button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(255,96,120,.4); border-radius: 50%; background: transparent; color: #ffb3c0; font-size: 1rem; }

/* Serveurs ouverts */
.kqm-online-rooms-title { margin-top: 16px; }
.kqm-online-rooms { max-height: min(42vh, 300px); overflow-y: auto; }
.kqm-online-room-info { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.kqm-online-room-info strong { flex: none; }
.kqm-online-lobby .kqm-online-join-room { width: auto; height: 34px; padding: 0 14px; border: 1px solid var(--kqm-gold); border-radius: 999px; background: linear-gradient(180deg, #ffd45f, #e0a92a); color: #171124; font: inherit; font-size: .62rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.kqm-online-lobby .kqm-online-join-room:disabled { border-color: rgba(255,255,255,.2); background: transparent; color: rgba(255,255,255,.5); }
.kqm-online-empty { padding: 14px; border: 1px dashed rgba(92,233,255,.25); border-radius: 10px; text-align: center; }

.kqm-online-themes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 0; color: #fff; font-size: .68rem; }
.kqm-online-themes small { color: var(--kqm-cyan); font-size: .52rem; font-weight: 900; letter-spacing: .14em; }
.kqm-online-themes button { margin-left: auto; padding: 5px 12px; border: 1px solid rgba(92,233,255,.42); border-radius: 999px; background: rgba(8,15,50,.72); color: #fff; font: inherit; font-size: .6rem; font-weight: 800; }

.kqm-online-avatar { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; overflow: hidden; border: 1px solid rgba(92,233,255,.38); border-radius: 50%; background: #15205a; color: var(--kqm-gold); font-size: .72rem; font-weight: 950; }
.kqm-online-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Bandeau des candidats pendant la partie */
.kqm-online-players { display: flex; gap: 6px; margin: 0 0 8px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.kqm-online-players::-webkit-scrollbar { display: none; }
.kqm-online-players[hidden] { display: none; }
.kqm-online-player { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 40px; padding: 4px 10px 4px 5px; border: 1px solid rgba(92,233,255,.22); border-radius: 999px; background: rgba(6,11,40,.78); transition: border-color .25s, background .25s, opacity .25s; }
.kqm-online-player span { display: grid; line-height: 1.15; }
.kqm-online-player strong { max-width: 92px; overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.kqm-online-player small { color: rgba(255,255,255,.58); font-size: .52rem; }
.kqm-online-player b { color: var(--kqm-gold); font-size: .62rem; }
.kqm-online-player b::after { content: " KP"; font-size: .5rem; }
.kqm-online-player.is-me { border-color: rgba(255,212,95,.55); }
.kqm-online-player.is-locked { border-color: var(--kqm-cyan); background: rgba(14,42,107,.82); }
.kqm-online-player.is-locked small { color: var(--kqm-cyan); }
.kqm-online-player.is-out { opacity: .55; border-color: rgba(255,96,120,.4); }
.kqm-online-player.is-out small { color: #ffb3c0; }
.kqm-online-player.is-quit { opacity: .7; }
.kqm-online-player.is-won { border-color: var(--kqm-gold); background: rgba(90,66,8,.55); }
.kqm-online-player.is-away { opacity: .45; }
.kqm-game.is-online-retrying .kqm-online-players::before { flex: 0 0 auto; align-self: center; padding: 6px 10px; border-radius: 999px; background: rgba(120,18,40,.7); color: #ffd6dd; content: "Reconnexion…"; font-size: .58rem; font-weight: 800; animation: kqm-online-pulse 1s ease-in-out infinite alternate; }
@keyframes kqm-online-pulse { to { opacity: .5; } }

/* Classement final */
.kqm-online-standings { display: grid; gap: 6px; width: min(100%, 420px); margin: 14px auto 0; padding: 0; list-style: none; }
.kqm-online-standings[hidden] { display: none; }
.kqm-online-standings li { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; border: 1px solid rgba(92,233,255,.2); border-radius: 12px; background: rgba(6,11,40,.78); text-align: left; }
.kqm-online-standings li > b { display: grid; flex: 0 0 26px; height: 26px; place-items: center; border-radius: 50%; background: rgba(92,233,255,.16); color: #fff; font-size: .7rem; }
.kqm-online-standings li.is-rank-1 { border-color: var(--kqm-gold); background: linear-gradient(90deg, rgba(120,88,10,.6), rgba(6,11,40,.8)); }
.kqm-online-standings li.is-rank-1 > b { background: var(--kqm-gold); color: #171124; }
.kqm-online-standings li.is-me { box-shadow: inset 0 0 0 1px rgba(255,212,95,.5); }
.kqm-online-standings span { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.kqm-online-standings strong { overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.kqm-online-standings small { color: rgba(255,255,255,.58); font-size: .58rem; }
.kqm-online-standings em { color: var(--kqm-gold); font-size: .74rem; font-style: normal; font-weight: 900; white-space: nowrap; }
.kqm-online-rewards { margin: 10px 0 0; color: var(--kqm-cyan); font-size: .66rem; font-weight: 700; }
.kqm-online-rewards[hidden] { display: none; }