/* =====================================================================
   Défis du multijoueur (ui/challenge.js) et classements du salon (scenes/multi.js .mp-boards).
   ===================================================================== */
body.cg-on .mp-ui, body.cg-on .mp-names { display: none; }
.screen-layer.cg-layer { place-items: center; background: rgba(20, 14, 24, 0.5); font-family: var(--pixel); word-spacing: 0.1em; }
.cg-screen { position: relative; width: min(760px, 94vw); display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.cg-head { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 12px; background: var(--paper); box-shadow: var(--card-frame); }
.cg-title { font-weight: normal; flex: 1; }
.cg-prog { color: var(--ink-soft); font-size: 0.9em; }
.cg-clock { min-width: 4.5em; text-align: right; font-size: 1.6em; color: #a8741a; font-variant-numeric: tabular-nums; }
.cg-pen { min-width: 6em; font-size: 0.8em; color: #a3301e; }
.cg-track { display: flex; gap: 3px; }
.cg-track i { flex: 1; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.35); }
.cg-track i.done { background: #e0a030; }
.cg-track i.cur { background: #fff3c8; box-shadow: 0 0 0 2px #e0a030; }
.cg-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 14px; background: var(--paper); box-shadow: var(--card-frame); min-height: 300px; justify-content: center; }
.cg-q, .cg-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cg-q h2 { margin: 0; font-weight: normal; font-size: 1.25em; }
.cg-target { font-size: 2em !important; }
.cg-pic canvas { image-rendering: pixelated; display: block; }
.cg-answers { width: 100%; display: flex; justify-content: center; }
.cg-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cg-grid .quiz-choice { font-size: 1.15em; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cg-grid.pics .quiz-choice { min-height: 84px; }
.cg-grid .quiz-choice canvas { image-rendering: pixelated; }
.cg-grid .quiz-choice.ok { background: #c8f0c0; }
.cg-grid .quiz-choice.no { background: #f6c8c0; opacity: 0.6; }
.cg-typebox { width: 100%; display: flex; gap: 10px; align-items: center; }
.cg-typebox .cg-input { flex: 1; font-size: 1.3em; }
.cg-reveal { font-size: 1.3em; margin: 0; }
.cg-ready { font-size: 1.6em !important; color: var(--ink-soft); }
.cg-foot { display: flex; justify-content: flex-end; }
.cg-foot .btn { font-family: var(--pixel); }
.cg-screen.bad .cg-card { animation: cg-shake 0.28s; box-shadow: var(--card-frame), 0 0 0 3px #e05040; }
@keyframes cg-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.cg-count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 7em; color: #fff3c8;
  text-shadow: 0 4px 0 #a8741a, 0 0 30px rgba(0, 0, 0, 0.5); opacity: 0; }
.cg-count.on { animation: cg-pop 0.9s ease-out; }
.cg-count.go { color: #c8f0a0; text-shadow: 0 4px 0 #2f7a3a; }
@keyframes cg-pop { 0% { opacity: 0; transform: scale(1.6); } 20% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* résultat */
.cg-result .cg-card { gap: 8px; }
.cg-result h2 { margin: 0; font-weight: normal; font-size: 1.1em; text-align: center; }
.cg-result h3 { margin: 8px 0 0; font-weight: normal; color: var(--ink-soft); font-size: 0.9em; }
.cg-big { font-size: 3em; color: #a8741a; }
.cg-result.first .cg-big { animation: reel-glow 1.2s ease-in-out 3; color: #e0a030; }
.cg-split, .cg-empty { margin: 0; color: var(--ink-soft); font-size: 0.82em; text-align: center; }
.cg-rank { margin: 0; font-size: 1.05em; }
.cg-coins { margin: 0; color: #a8741a; }
.cg-bad { color: #a3301e; }
.cg-actions { display: flex; gap: 10px; margin-top: 8px; }
.cg-actions .btn { font-family: var(--pixel); }
.cg-board { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 3px; font-size: 0.85em; }
.cg-board li { display: flex; gap: 8px; align-items: center; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.45); }
.cg-board li.me { background: #fff3c8; box-shadow: inset 0 0 0 2px #e0a030; }
.cg-board b { flex: 1; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-rk { min-width: 1.8em; }
.cg-ms { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* classements du salon, à gauche */
.mp-boards { position: absolute; top: 56px; left: 12px; width: 230px; padding: 8px 10px; border-radius: 10px; background: var(--paper); color: var(--ink);
  box-shadow: var(--card-frame); font-size: 0.85em; display: flex; flex-direction: column; gap: 6px; }
.mp-boards.min .cg-board, .mp-boards.min .cg-empty, .mp-boards.min .mpb-tabs { display: none; }
.mpb-head { display: flex; align-items: center; gap: 6px; }
.mpb-head b { flex: 1; font-weight: normal; }
.mpb-tabs { display: flex; gap: 4px; }
.mpb-tabs .seg-btn { flex: 1; }
.mp-boards .cg-board { font-size: 0.9em; }
.mp-tag small { display: block; font-size: 0.75em; color: #ffe27a; text-align: center; }

[data-theme="dark"] .cg-board li { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .cg-board li.me { background: rgba(224, 160, 48, 0.25); }
@media (max-width: 640px) {
  .mp-boards { top: auto; bottom: 200px; width: 190px; }
  .cg-grid { grid-template-columns: 1fr; }
  .cg-count { font-size: 4em; }
}

/* un habitant parle sur la place : le dialogue passe devant la barre de chat */
body.mp-on .dialogue:not(.hidden) { z-index: 40; }
body.mp-on:has(.dialogue:not(.hidden)) .mp-chat { opacity: 0.25; pointer-events: none; }