/* ═══════ MODULES EN LIGNE / PUZZLES / TOURNOIS ═══════ */
.app-panel { max-width: 1200px; margin: 0 auto; padding: clamp(1rem, 4vw, 2.4rem); }

.lobby__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.6rem; }
.lobby__title { font-family: 'Fraunces', serif; font-size: clamp(1.5rem, 4vw, 2.1rem); color: #e0b96f; margin: 0 0 0.3rem; }
.lobby__sub { color: rgba(250,246,238,0.8); margin: 0; max-width: 46ch; line-height: 1.5; }

.online__live { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(224,185,111,0.2); border-radius: 100px; padding: 0.5rem 1rem; font-size: 0.9rem; }
.online__dot { width: 9px; height: 9px; border-radius: 50%; background: #7cc59a; box-shadow: 0 0 10px #7cc59a; animation: pulse-dot 1.6s infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.online__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; }
.online__cadences { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { background: rgba(0,0,0,0.3); border: 1px solid rgba(224,185,111,0.2); color: rgba(250,246,238,0.88); border-radius: 100px; padding: 0.5rem 1rem; cursor: pointer; font: inherit; font-size: 0.85rem; transition: all 0.2s; }
.chip:hover { border-color: #e0b96f; color: #e0b96f; }
.chip.is-active { background: linear-gradient(135deg, #e0b96f, #b8924f); color: #1a1206; font-weight: 700; border-color: transparent; }

.online__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.online__empty { color: rgba(250,246,238,0.72); padding: 2rem; text-align: center; }
.room { background: rgba(26,20,16,0.7); border: 1px solid rgba(224,185,111,0.18); border-radius: 16px; padding: 1.2rem; transition: transform 0.2s, border-color 0.2s; }
.room:hover { transform: translateY(-3px); border-color: rgba(224,185,111,0.4); }
.room__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.room__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #e0b96f, #b8924f); color: #1a1206; font-weight: 700; font-size: 1.1rem; }
.room__host { margin: 0; font-size: 1rem; color: #faf6ee; }
.room__elo { font-size: 0.8rem; color: rgba(250,246,238,0.76); }
.room__cad { margin-left: auto; text-align: right; font-size: 0.85rem; color: #e0b96f; display: flex; flex-direction: column; }
.room__cad i { font-style: normal; color: rgba(250,246,238,0.72); font-size: 0.78rem; }
.room__join { width: 100%; }

.match { background: rgba(26,20,16,0.7); border: 1px solid rgba(224,185,111,0.18); border-radius: 18px; padding: 1.4rem; }
.match__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.match__vs { font-family: 'Fraunces', serif; font-size: 1.1rem; }
.match__vs b { color: #e0b96f; margin: 0 0.3rem; }
.match__body { display: grid; grid-template-columns: 1fr 300px; gap: 1.2rem; }
.match__wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 220px; text-align: center; color: rgba(250,246,238,0.86); }
.match__spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(224,185,111,0.25); border-top-color: #e0b96f; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.match__ready { color: #7cc59a; font-weight: 600; line-height: 1.5; }
.match__chat { background: rgba(0,0,0,0.25); border: 1px solid rgba(224,185,111,0.15); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; }
.match__chat h4 { margin: 0 0 0.7rem; color: #e0b96f; font-family: 'Fraunces', serif; }
.chat__log { flex: 1; min-height: 160px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; }
.chat__msg { font-size: 0.85rem; color: rgba(250,246,238,0.8); background: rgba(255,255,255,0.04); padding: 0.4rem 0.6rem; border-radius: 8px; }
.chat__msg.is-mine { background: rgba(224,185,111,0.14); align-self: flex-end; }
.chat__msg b { color: #e0b96f; margin-right: 0.3rem; }
.chat__form { display: flex; gap: 0.5rem; }
.chat__form input { flex: 1; background: rgba(0,0,0,0.3); border: 1px solid rgba(224,185,111,0.2); border-radius: 10px; color: #faf6ee; padding: 0.6rem; font: inherit; }
.chat__form input:focus { outline: none; border-color: #e0b96f; }

/* ── Multijoueur réel (lobby « mp » + HUD de partie) ── */
.mp__real { background: rgba(124,197,154,0.1); border: 1px solid rgba(124,197,154,0.3); border-radius: 12px; padding: 0.8rem 1rem; color: rgba(250,246,238,0.9); font-size: 0.9rem; line-height: 1.5; margin: 0 0 1.2rem; }
.mp__real b { color: #7cc59a; }
.mp__error { background: rgba(240,116,110,0.1); border: 1px solid rgba(240,116,110,0.3); border-radius: 12px; padding: 0.9rem 1rem; color: rgba(250,246,238,0.9); }
.mp__loading { color: rgba(250,246,238,0.8); padding: 1.5rem 0; }
.mp__section { margin-bottom: 1.4rem; }
.mp__h { font-family: 'Fraunces', serif; color: #e0b96f; margin: 0 0 0.7rem; font-size: 1.1rem; }
.mp__waiting { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: rgba(26,20,16,0.7); border: 1px solid rgba(224,185,111,0.25); border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; color: rgba(250,246,238,0.88); }
.mp__waiting p { margin: 0; flex: 1; min-width: 220px; line-height: 1.5; }
.mp__waiting b { color: #e0b96f; }
.room--live { border-color: rgba(124,197,154,0.35); }
.room--live .room__cad { color: #7cc59a; }

.mp-hud { background: rgba(0,0,0,0.25); border: 1px solid rgba(224,185,111,0.2); border-radius: 14px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; }
.mp-hud__opp { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mp-hud__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(250,246,238,0.72); }
.mp-hud__opp b { color: #faf6ee; }
.mp-hud__elo { font-size: 0.8rem; color: rgba(250,246,238,0.76); }
.mp-hud__presence { margin-left: auto; color: #7cc59a; font-size: 0.9rem; text-shadow: 0 0 8px rgba(124,197,154,0.8); }
.mp-hud__presence.is-away { color: #f0a86f; text-shadow: none; }
.mp-hud__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mp-hud__actions .btn { flex: 1; }
.mp-hud__drawoffer { background: rgba(224,185,111,0.12); border: 1px solid rgba(224,185,111,0.35); border-radius: 10px; padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.88rem; color: rgba(250,246,238,0.92); }
.mp-hud__drawbtns { display: flex; gap: 0.5rem; }
.mp-hud__drawbtns .btn { flex: 1; }
.mp-chat { display: flex; flex-direction: column; }
.mp-chat__log { max-height: 150px; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.5rem; }
.mp-chat__log:empty::before { content: 'Discutez avec votre adversaire — restez courtois.'; color: rgba(250,246,238,0.55); font-size: 0.8rem; font-style: italic; }
.mp-chat__form { display: flex; gap: 0.4rem; }
.mp-chat__form input { flex: 1; min-width: 0; background: rgba(0,0,0,0.3); border: 1px solid rgba(224,185,111,0.2); border-radius: 10px; color: #faf6ee; padding: 0.5rem 0.6rem; font: inherit; font-size: 0.85rem; }
.mp-chat__form input:focus { outline: none; border-color: #e0b96f; }

/* ── Appariement rapide & défi par lien ── */
.mp-quick { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(224,185,111,0.16), rgba(124,197,154,0.1));
  border: 1px solid rgba(224,185,111,0.3); border-radius: 16px; padding: 1.1rem 1.3rem; margin-bottom: 0.8rem; }
.mp-quick__title { font-family: 'Fraunces', serif; font-size: 1.3rem; color: #e0b96f; margin: 0 0 0.2rem; }
.mp-quick__sub { margin: 0; color: rgba(250,246,238,0.82); font-size: 0.9rem; }
.mp-quick__act { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.mp-quick__cad { background: rgba(0,0,0,0.35); border: 1px solid rgba(224,185,111,0.25); border-radius: 10px; color: #faf6ee; padding: 0.6rem 0.7rem; font: inherit; font-size: 0.88rem; }
.mp-quick__act .btn { white-space: nowrap; }
.mp-quick__alt { text-align: center; margin-bottom: 1.2rem; }
.mp__dim { color: rgba(250,246,238,0.6); font-size: 0.85rem; }
.mp__waiting--duel { flex-direction: column; align-items: stretch; text-align: left; }
.mp__waiting--duel p { min-width: 0; }
.mp-duel__link { display: flex; gap: 0.5rem; margin: 0.4rem 0; }
.mp-duel__link input { flex: 1; min-width: 0; background: rgba(0,0,0,0.4); border: 1px solid rgba(224,185,111,0.25); border-radius: 10px; color: #faf6ee; padding: 0.6rem 0.7rem; font: inherit; font-size: 0.82rem; }
.mp-duel__link input:focus { outline: none; border-color: #e0b96f; }
.mp__waiting-foot { display: flex; align-items: center; gap: 0.6rem; color: rgba(250,246,238,0.82); font-size: 0.9rem; }
.mp__waiting-foot .match__spinner { width: 22px; height: 22px; border-width: 2px; }

/* ── Mises (Fous d'Or) ── */
.mp-stake { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; color: rgba(250,246,238,0.82); }
.mp-stake select { background: rgba(0,0,0,0.35); border: 1px solid rgba(224,185,111,0.25); border-radius: 10px; color: #faf6ee; padding: 0.5rem 0.6rem; font: inherit; font-size: 0.85rem; }
.mp-stake__note { flex-basis: 100%; margin: 0.4rem 0 0; font-size: 0.8rem; color: rgba(250,246,238,0.7); }
.room--stake { border-color: rgba(224,185,111,0.45); }
.room__stake { font-style: normal; color: #e0b96f; font-size: 0.78rem; display: block; margin-top: 0.15rem; }
.mp-hud__stake { background: rgba(224,185,111,0.14); border: 1px solid rgba(224,185,111,0.3); border-radius: 10px; padding: 0.45rem 0.7rem; font-size: 0.82rem; color: #e0b96f; font-weight: 600; }

/* ── Puzzles ── */
.puzzle { display: grid; grid-template-columns: 1fr 320px; gap: 1.6rem; align-items: start; }
.puzzle__board-wrap { background: rgba(0,0,0,0.25); border: 1px solid rgba(224,185,111,0.18); border-radius: 18px; padding: 1rem; }
.puzzle__board { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.psq { border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; font-size: clamp(1.2rem, 4vw, 2rem); transition: box-shadow 0.15s; aspect-ratio: 1; }
.psq.is-light { background: #dcbe8c; } .psq.is-dark { background: #8a5a34; }
.psq.is-sel { box-shadow: inset 0 0 0 4px #e0b96f; }
.psq__p { line-height: 1; }
.psq:hover { box-shadow: inset 0 0 0 3px rgba(224,185,111,0.6); }
.puzzle__status { text-align: center; margin: 0.8rem 0 0; font-family: 'Fraunces', serif; color: #e0b96f; }
.puzzle__status.is-ok { color: #7cc59a; } .puzzle__status.is-err { color: #f0746e; }
.puzzle__panel { background: rgba(26,20,16,0.7); border: 1px solid rgba(224,185,111,0.18); border-radius: 18px; padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.puzzle__meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.puzzle__rating { color: rgba(250,246,238,0.8); font-size: 0.85rem; }
.puzzle__solved { color: #7cc59a; font-size: 0.85rem; font-weight: 600; }
.puzzle__theme { font-family: 'Fraunces', serif; color: #faf6ee; margin: 0; font-size: 1.3rem; }
.puzzle__hint { background: rgba(224,185,111,0.1); border-left: 3px solid #e0b96f; padding: 0.7rem 0.9rem; border-radius: 8px; color: rgba(250,246,238,0.85); font-size: 0.88rem; margin: 0; }
.puzzle__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.puzzle__nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.puzzle__count { font-size: 0.85rem; color: rgba(250,246,238,0.8); }
.puzzle__progress { text-align: center; color: rgba(250,246,238,0.8); font-size: 0.88rem; margin: 0; }
.puzzle__progress b { color: #e0b96f; }
.tag { border-radius: 100px; padding: 0.3rem 0.8rem; font-size: 0.78rem; font-weight: 700; }
.tag-good { background: rgba(124,197,154,0.18); color: #7cc59a; }
.tag-inacc { background: rgba(224,196,111,0.18); color: #e0c46f; }
.tag-mistake { background: rgba(240,168,111,0.18); color: #f0a86f; }

/* ── Tournois ── */
.tournaments { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.tourney { background: rgba(26,20,16,0.7); border: 1px solid rgba(224,185,111,0.18); border-radius: 18px; padding: 1.4rem; transition: transform 0.2s, border-color 0.2s; }
.tourney:hover { transform: translateY(-3px); border-color: rgba(224,185,111,0.4); }
.tourney.is-live { border-color: rgba(240,116,110,0.4); }
.tourney__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 1rem; }
.tourney__name { font-family: 'Fraunces', serif; color: #faf6ee; margin: 0; font-size: 1.2rem; }
.tourney__starts { font-size: 0.8rem; color: rgba(250,246,238,0.76); }
.tourney__live { font-size: 0.75rem; color: #f0746e; font-weight: 700; animation: pulse-dot 1.5s infinite; }
.tourney__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.2rem; font-size: 0.85rem; color: rgba(250,246,238,0.86); }
.tourney__actions { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; }
.tourney__standings { margin-top: 1rem; }
.standings { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.standings th, .standings td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(224,185,111,0.12); }
.standings th { color: #e0b96f; font-weight: 600; }
.standings td { color: rgba(250,246,238,0.8); }
.standings tr.is-me td { color: #e0b96f; font-weight: 700; }

@media (max-width: 860px) {
  .puzzle, .match__body { grid-template-columns: 1fr; }
}