/* =====================================================================
   Multijoueur : menu « Multijoueur » de l'écran titre (.sm-multi) et interface du salon (.mp-ui, scenes/multi.js).
   Même style que le reste du jeu : papier crème, cuir, police pixel.
   ===================================================================== */

/* ---------------- écran titre : liste des salons */
.sm-multi .mp-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-multi .mp-langs .seg-btn { padding: 4px 6px; }
.sm-multi .mp-langs canvas { image-rendering: pixelated; display: block; }
.mp-rooms { display: flex; flex-direction: column; gap: 8px; }
.mp-roomrow { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--paper); box-shadow: var(--card-frame); }
.mp-roomrow canvas { image-rendering: pixelated; flex: none; }
.mp-roomrow.off { background: linear-gradient(90deg, rgba(232, 176, 72, 0.18), var(--paper) 60%); }
.mp-rr-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-rr-txt b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-rr-txt small { font-size: 0.72em; color: var(--ink-soft); }
.mp-rr-n { font-size: 0.85em; color: var(--ink-soft); white-space: nowrap; }
.mp-none { text-align: center; padding: 8px 0; }
.mp-err { margin: 0; padding: 8px 12px; border-radius: 8px; background: rgba(220, 80, 60, 0.14); color: #a3301e; font-size: 0.85em; }
.mp-actions { margin-top: auto; }
.mp-codebox { display: flex; gap: 6px; align-items: center; }
.mp-code-in { width: 8.5em; padding: 7px 10px; border-radius: 8px; border: 2px solid var(--leather); background: var(--paper); color: var(--ink); font: inherit; text-transform: uppercase; letter-spacing: 0.12em; }
.mp-create { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--paper); box-shadow: var(--card-frame); }
.mp-f { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.9em; }
.mp-f > span:first-child { min-width: 9em; color: var(--ink-soft); }
.mp-f input[type="text"] { flex: 1; padding: 7px 10px; border-radius: 8px; border: 2px solid var(--leather); background: var(--paper-2); color: var(--ink); font: inherit; }
.mp-f input[type="range"] { flex: 1; }
.mp-f.check > span:first-child { min-width: 0; color: var(--ink); }
.mp-f canvas { image-rendering: pixelated; }

/* ---------------- dans le salon */
body.mp-on .quest-track, body.mp-on #hud-chrono { display: none !important; }
.mp-ui { position: absolute; inset: 0; pointer-events: none; z-index: 30; font-family: var(--pixel); word-spacing: 0.1em; }
.mp-ui > * { pointer-events: auto; }
.mp-ui button { font-family: var(--pixel); }

/* le salon (en haut à droite, à la place des quêtes) */
.mp-room { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; max-width: min(420px, 60vw);
  padding: 8px 10px; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: var(--card-frame); }
.mp-room-top { display: flex; align-items: center; gap: 8px; }
.mp-room-top b { flex: 1; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-flag { image-rendering: pixelated; flex: none; }
.mp-count, .mp-leave { border: none; border-radius: 7px; padding: 4px 8px; cursor: pointer; background: var(--paper-2); color: var(--ink); box-shadow: 0 0 0 2px var(--leather); font-size: 0.85em; }
.mp-leave { background: #f3c9b8; }
.mp-count:hover, .mp-leave:hover { filter: brightness(1.06); }
.mp-code { font-size: 0.8em; padding: 4px 8px; border-radius: 6px; background: rgba(232, 176, 72, 0.22); letter-spacing: 0.05em; user-select: all; }
.mp-sub { font-size: 0.75em; color: var(--ink-soft); }

/* liste des joueurs */
.mp-players { position: absolute; top: 74px; right: 12px; width: min(340px, 86vw); max-height: calc(100vh - 230px); overflow-y: auto;
  padding: 10px 12px; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: var(--card-frame); display: flex; flex-direction: column; gap: 6px; }
.mp-players h4 { margin: 0 0 2px; font-size: 0.9em; font-weight: normal; color: var(--leather); }
.mp-p { display: flex; align-items: center; gap: 7px; font-size: 0.85em; padding: 4px 0; border-bottom: 1px dashed rgba(120, 85, 50, 0.25); }
.mp-p b { flex: 1; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-p.me b { color: var(--leather); }
.mp-acts { display: flex; gap: 3px; }
.mp-mini { border: none; border-radius: 6px; width: 28px; height: 26px; cursor: pointer; background: var(--paper-2); box-shadow: 0 0 0 1px var(--leather); font-size: 0.85em; }
.mp-mini.danger { background: #f3c9b8; }
.mp-tools { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.mp-opt { display: flex; align-items: center; gap: 8px; font-size: 0.8em; }
.mp-opt input[type="range"] { flex: 1; }
.mp-btn { border: none; border-radius: 8px; padding: 7px 12px; cursor: pointer; background: var(--paper-2); color: var(--ink); box-shadow: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather-d); font: inherit; }
.mp-btn.primary { background: linear-gradient(180deg, #ffe07c, var(--gold)); }
.mp-btn.danger { background: #f3c9b8; }

/* état de la connexion */
.mp-status { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: var(--card-frame); font-size: 0.85em; }

/* le chat (en bas au centre) */
.mp-chat { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(560px, 92vw); display: flex; flex-direction: column; gap: 6px; }
.mp-log { max-height: 128px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 10px;
  background: rgba(30, 20, 14, 0.52); color: #fbf4e2; font-size: 0.8em; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); scrollbar-width: thin; }
.mp-log:empty { display: none; }
.mp-line b { color: #ffd77a; font-weight: normal; }
.mp-line.me b { color: #9fe3d7; }
.mp-bar { display: flex; gap: 6px; }
.mp-input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 9px; border: none; background: var(--paper); color: var(--ink); box-shadow: var(--card-frame); font: inherit; font-size: 0.9em; }
.mp-input:focus { outline: 3px solid var(--gold); }
.mp-small { width: 42px; border: none; border-radius: 9px; cursor: pointer; background: var(--paper); box-shadow: var(--card-frame); font-size: 1.1em; }
.mp-tray { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: 10px; background: var(--paper); box-shadow: var(--card-frame); max-height: 40vh; overflow-y: auto; }
.mp-tray.hidden { display: none; }
.mp-emo { width: 44px; height: 40px; border: none; border-radius: 8px; cursor: pointer; background: var(--paper-2); font-size: 1.3em; }
.mp-phrase { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--paper-2); color: var(--ink); text-align: left; box-shadow: 0 0 0 1px rgba(120, 85, 50, 0.4); }
.mp-phrase b { font-weight: normal; font-size: 0.9em; }
.mp-phrase small { font-size: 0.7em; color: var(--ink-soft); }
.mp-emo:hover, .mp-phrase:hover, .mp-small:hover { filter: brightness(1.05); }

/* le micro (en bas à droite) */
.mp-mic { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: none; background: none; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.mp-mic-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 1.8em; background: var(--paper); box-shadow: var(--card-frame), 0 0 0 calc(var(--lvl, 0) * 10px) rgba(240, 188, 88, 0.45); transition: transform 0.1s; }
.mp-mic.on .mp-mic-ico { background: linear-gradient(180deg, #ffe07c, var(--gold)); transform: scale(1.08); }
.mp-mic-lbl { font-size: 0.68em; padding: 2px 8px; border-radius: 6px; background: rgba(30, 20, 14, 0.6); color: #fbf4e2; white-space: nowrap; }

/* fenêtre (âge pour la voix) */
.mp-modal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 8, 6, 0.5); z-index: 5; }
.mp-box { width: min(420px, 90vw); padding: 18px; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: var(--card-frame); text-align: center; }
.mp-box p { margin: 0 0 14px; line-height: 1.5; }
.mp-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* pseudos au-dessus des têtes */
.mp-names { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.mp-tag { position: absolute; left: 0; top: 0; padding: 2px 6px; border-radius: 5px; font-family: var(--pixel); font-size: 12px; white-space: nowrap;
  color: #fff; background: rgba(30, 20, 14, 0.55); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); will-change: transform; }
.mp-tag.talk { background: rgba(214, 150, 40, 0.85); }

/* tactile / petit écran : le chat ne passe pas sous les boutons de jeu */
body.touch .mp-chat { bottom: auto; top: 64px; left: 12px; transform: none; width: min(460px, 52vw); }
body.touch .mp-players { width: min(300px, 42vw); max-height: calc(100vh - 110px); }
body.touch .mp-log { max-height: 84px; }
body.touch .mp-mic { right: auto; left: 50%; transform: translateX(-50%); bottom: 18px; }
@media (max-width: 640px) {
  .mp-room { max-width: 64vw; }
  .mp-chat { width: 94vw; }
}

/* menu Multijoueur (v8.62) : onglets Publics / Privés, salons de toutes les langues les uns sous les autres */
.mp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 12px; background: rgba(120, 85, 50, 0.1); }
.mp-tab { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border: none; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 0.9em; color: var(--ink-soft); background: transparent; }
.mp-tab small { font-size: 0.75em; padding: 1px 7px; border-radius: 999px; background: rgba(120, 85, 50, 0.15); }
.mp-tab small:empty { display: none; }
.mp-tab.on { color: #4a2c08; background: linear-gradient(180deg, #ffe07c, var(--gold)); box-shadow: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather-d); }
.mp-tab:not(.on):is(:hover, :focus-visible) { outline: none; background: rgba(255, 255, 255, 0.6); }
.mp-roomrow.mine { box-shadow: 0 0 0 2px #2f9a8a, var(--card-frame); }
.mp-mine { margin-left: 8px; font-style: normal; font-size: 0.7em; padding: 1px 7px; border-radius: 999px; color: #fff; background: #2f9a8a; vertical-align: middle; }
.mp-rr-n.live { color: #1f7a6c; font-weight: bold; }
.mp-f-langs { flex-direction: column; align-items: flex-start !important; }
[data-theme="dark"] .mp-tab.on, [data-theme="dark"] .mp-tab.on span { color: #4a2c08; }
[data-theme="dark"] .mp-tabs { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .mp-rr-n.live { color: #7fe0c8; }

/* Hub (v9) : pancartes des portails, vote, lignes d'information du chat, ligne du Hub dans le menu */
.mp-vote { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 3px #a0302a, 0 6px 18px rgba(0, 0, 0, 0.35);
  font-family: var(--pixel); pointer-events: auto; max-width: min(520px, 90vw); text-align: center; }
.mp-vote b { font-weight: normal; font-size: 0.9em; }
.mp-vote-n { font-size: 0.75em; color: var(--ink-soft); }
.mp-line.sys span { color: #1f7a6c; font-style: italic; }
[data-theme="dark"] .mp-line.sys span { color: #7fe0c8; }
.mp-globe { font-size: 22px; width: 27px; text-align: center; flex: none; }
.mp-roomrow.hub { background: linear-gradient(90deg, rgba(47, 181, 160, 0.22), var(--paper) 65%); }

/* Hub v9.3 : tableau des départs — grande fenêtre au milieu de l'écran (scenes/multi.js openDepartures) */
.mp-dep-back { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(20, 14, 8, 0.45); pointer-events: auto; animation: mp-dep-in 0.18s ease-out; }
@keyframes mp-dep-in { from { opacity: 0; } }
.mp-dep { width: min(860px, 94vw); max-height: min(640px, 88vh); display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 4px #2f9a8a, 0 0 0 7px #e8b030, 0 14px 40px rgba(0, 0, 0, 0.5);
  font-family: var(--pixel); animation: mp-dep-pop 0.25s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes mp-dep-pop { from { transform: scale(0.85); } }
.mp-dep-head { display: flex; align-items: center; gap: 8px; }
.mp-dep-head b { flex: 1; font-weight: normal; font-size: 1.5em; }
.mp-dep-sub { margin: 0; font-size: 0.85em; color: var(--ink-soft); }
.mp-dep-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; overflow-y: auto; min-height: 0; padding: 2px; }
.mp-dep-row { display: flex; align-items: center; gap: 8px; padding: 10px 10px; border: none; border-radius: 10px; cursor: pointer; font: inherit; font-size: 0.95em;
  background: var(--paper-2); color: var(--ink); box-shadow: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather); text-align: left; transition: transform 0.08s; }
.mp-dep-row:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 0 3px #2f9a8a, 0 4px 0 3px #1f7a6c; }
.mp-dep-row:disabled { opacity: 0.5; cursor: default; }
.mp-dep-row.live { background: rgba(47, 181, 160, 0.2); }
.mp-dep-flag { image-rendering: pixelated; border-radius: 2px; flex: none; width: 31px; height: 21px; }
.mp-dep-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-dep-n { flex: none; color: var(--ink-soft); font-size: 0.85em; }
.mp-dep-row.live .mp-dep-n { color: #1f7a6c; }
[data-theme="dark"] .mp-dep-row.live .mp-dep-n { color: #7fe0c8; }
@media (max-width: 760px) { .mp-dep-list { grid-template-columns: repeat(2, 1fr); } }
.mpz-flash { position: fixed; inset: 0; background: #fff; pointer-events: none; z-index: 30; opacity: 0; }
.mpz-flash.in { animation: mpz-flash 0.5s ease-out; }
@keyframes mpz-flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
.mpz-photo { position: fixed; inset: 0; z-index: 31; display: grid; place-items: center; background: rgba(20, 10, 6, 0.55); pointer-events: auto; }
.mpz-photo-in { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 3px var(--leather), 0 10px 30px rgba(0, 0, 0, 0.5); }
.mpz-photo-in img { width: min(560px, 80vw); height: auto; image-rendering: pixelated; transform: rotate(-1.2deg); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.mpz-photo-in a.mp-btn { text-decoration: none; }
/* l'appareil photo (ui/photo.js) : « Souriez ! » puis le flash */
.photo-smile { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 30; font-family: var(--pixel); font-size: 34px; color: #ffd02a;
  text-shadow: 0 3px 0 #7a4a10, 3px 0 0 #7a4a10, -3px 0 0 #7a4a10, 0 -3px 0 #7a4a10; pointer-events: none; animation: coin-fx-n 0.7s ease-out both; }
.photo-flash { position: fixed; inset: 0; background: #fff; pointer-events: none; z-index: 30; animation: mpz-flash 0.5s ease-out forwards; }

/* v9.4 : en multijoueur, pas les menus du solo — le bouton du menu du salon, les pièces dans la carte du salon */
body.mp-on .hud-esc, body.mp-on .badge-strip, body.mp-on .hud-keys, body.mp-on .hud-coins, body.mp-on .trad, body.mp-on .zone-radar { display: none !important; }
.mp-menu-btn { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: none; border-radius: 9px; cursor: pointer;
  background: var(--paper); color: var(--ink); box-shadow: var(--card-frame); font-size: 15px; }
.mp-menu-btn kbd { font-family: var(--pixel); font-size: 10px; padding: 1px 5px; border-radius: 4px; background: #e8b030; color: #4a2c08; }
body.touch .mp-menu-btn kbd { display: none; }
.mp-boards { top: 58px; }
.mp-coins { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #fff3c8; color: #4a2c08; box-shadow: inset 0 0 0 2px #e0a030; font-size: 0.9em; }
.mp-coins .coin-ico::before { margin: 0; }
/* le menu du salon (ui/mpMenu.js) */
.mm-back { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(20, 14, 8, 0.5); pointer-events: auto; animation: mp-dep-in 0.18s ease-out; }
.mm { width: min(900px, 95vw); height: min(640px, 90vh); display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 16px;
  background: var(--paper); color: var(--ink); box-shadow: 0 0 0 4px #2f9a8a, 0 0 0 7px #e8b030, 0 14px 40px rgba(0, 0, 0, 0.5); font-family: var(--pixel); animation: mp-dep-pop 0.25s cubic-bezier(.2, 1.4, .4, 1); }
.mm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm-head > b { font-weight: normal; font-size: 1.3em; margin-right: 6px; }
.mm-tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.mm-tab { border: none; cursor: pointer; padding: 7px 12px; border-radius: 9px; font: inherit; font-size: 0.85em; background: var(--paper-2); color: var(--ink); box-shadow: 0 0 0 2px var(--leather); }
.mm-tab.on { background: #fff3c8; color: #4a2c08; box-shadow: 0 0 0 2px #e0a030, inset 0 -3px 0 #e0a030; }
.mm-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.mm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.mm-room { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: var(--paper-2); box-shadow: 0 0 0 2px var(--leather); font-size: 0.85em; }
.mm-room.here { box-shadow: 0 0 0 2px #2f9a8a; background: rgba(47, 181, 160, 0.15); }
.mm-room .mp-btn { padding: 4px 10px; font-size: 0.9em; }
.mm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-name small { display: block; color: var(--ink-soft); font-size: 0.8em; }
.mm-n { color: var(--ink-soft); font-size: 0.85em; }
.mm-here { color: #1f7a6c; font-size: 0.85em; }
.mm-flag { image-rendering: pixelated; border-radius: 2px; flex: none; }
.mm-globe { font-size: 18px; width: 21px; text-align: center; }
.mm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-code, .mm-select { padding: 6px 10px; border-radius: 8px; border: 2px solid var(--leather); background: var(--paper-2); color: var(--ink); font: inherit; }
.mm-code { width: 14em; text-transform: uppercase; }
.mm-msg { color: #b8221a; }
.mm-body h4 { margin: 6px 0 2px; font-weight: normal; }
.mm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-cols.three { grid-template-columns: repeat(3, 1fr); }
.mm-col { padding: 8px 10px; border-radius: 10px; background: var(--paper-2); box-shadow: 0 0 0 2px var(--leather); }
.mm-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 0.85em; }
.mm-list li { display: grid; grid-template-columns: 1.8em 1fr auto; gap: 6px; align-items: center; }
.mm-list li b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-list li.me { color: #a8741a; }
.mm-empty, .mm-wait { color: var(--ink-soft); font-size: 0.85em; margin: 4px 0; }
.mm-friends { display: flex; flex-direction: column; gap: 6px; }
.mm-friend { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--paper-2); box-shadow: 0 0 0 2px var(--leather); }
.mm-friend b { font-weight: normal; min-width: 8em; }
.mm-where { flex: 1; display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 0.85em; }
.mm-dot { width: 9px; height: 9px; border-radius: 50%; background: #9a8a7a; flex: none; }
.mm-friend.on .mm-dot { background: #2fb5a0; box-shadow: 0 0 6px #2fb5a0; }
[data-theme="dark"] .mm-here, [data-theme="dark"] .mm-list li.me { color: #ffd060; }
@media (max-width: 700px) { .mm-grid, .mm-cols, .mm-cols.three { grid-template-columns: 1fr; } }