/* Panneaux et boutons « dans l'esprit de l'accueil » : hall multijoueur, boutique et compte KUMP (écrans du module, habillés ICI
   sans toucher à public/vendor/), écran de fin. Matières : pierre bleu nuit + bordure or (comme la barre de navigation),
   planches de bois à cadre de pierre (comme « Entraînement IA »), bouton vert à cadre doré (comme « Bataille en ligne »).
   Textures : assets/menu/wood.webp et stone.webp (tools/make-ui-textures.mjs) ; cadres : ai.webp et battle.webp en border-image. */
:root {
  --pn-serif: "Trajan Pro", "Cinzel", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --pn-gold: #ffd25e;
  --pn-edge: #9a7a45;
  --pn-cream: #fff4d6;
  --pn-tan: #d8ccaa;
  --pn-stone: linear-gradient(rgba(10, 16, 30, 0.3), rgba(10, 16, 30, 0.55)), url("../assets/menu/stone.webp") center / 200px;
  --pn-wood: linear-gradient(rgba(255, 220, 150, 0.1), rgba(0, 0, 0, 0.28)), url("../assets/menu/wood.webp") center / 180px;
  --pn-text-shadow: 0 1px 0 #2b1707, 0 0 3px #000;
}

/* ---------------------------------------------------------------- panneau (pierre + bordure or + rivets) */
.menu.lobby .menu-card, .result-card, .kump-overlay .kump-card {
  border: 3px solid var(--pn-edge);
  border-radius: 18px;
  background:
    radial-gradient(circle at 9px 9px, #ffe08a 0 2px, #7a5a20 3px, transparent 4px) top left / 100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 9px) 9px, #ffe08a 0 2px, #7a5a20 3px, transparent 4px) top left / 100% 100% no-repeat,
    radial-gradient(circle at 9px calc(100% - 9px), #ffe08a 0 2px, #7a5a20 3px, transparent 4px) top left / 100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #ffe08a 0 2px, #7a5a20 3px, transparent 4px) top left / 100% 100% no-repeat,
    var(--pn-stone);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.35), 0 14px 40px rgba(0, 0, 0, 0.6);
  color: var(--pn-cream);
}

/* ---------------------------------------------------------------- boutons : planche de bois / vert (cadres en border-image) */
.menu.lobby .btn, .menu.lobby .mode-btn, .result-card .btn, .kump-overlay .kump-btn {
  border: 15px solid transparent;
  border-image: url("../assets/menu/frame-wood.webp") 46 / 15px stretch;
  border-radius: 0;
  background: var(--pn-wood); /* sous le cadre (border-box) : pas de liseré vide entre le bois et la pierre */
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); /* coins chanfreinés du cadre */
  color: var(--pn-cream);
  font-family: var(--pn-serif);
  font-weight: 800;
  text-shadow: var(--pn-text-shadow);
  min-height: 50px;
  padding: 0 4px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.14s;
}
.menu.lobby .btn.btn-primary, .result-card .btn.btn-primary, .kump-overlay .kump-btn.kump-btn-primary {
  border-image: url("../assets/menu/frame-green.webp") 52 / 16px stretch;
  background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.18)), linear-gradient(#3fb43c, #17751f);
  clip-path: polygon(17px 3px, calc(100% - 17px) 3px, calc(100% - 3px) 17px, calc(100% - 3px) calc(100% - 17px), calc(100% - 17px) calc(100% - 3px), 17px calc(100% - 3px), 3px calc(100% - 17px), 3px 17px);
  color: #fff;
  text-shadow: 0 1px 0 #0d3a14, 0 0 3px #0d3a14;
}
.menu.lobby .btn:hover, .menu.lobby .mode-btn:hover, .result-card .btn:hover, .kump-overlay .kump-btn:hover:not(:disabled) {
  filter: brightness(1.14) drop-shadow(0 0 6px rgba(255, 200, 70, 0.55));
  border-color: transparent;
}
.menu.lobby .btn:active, .menu.lobby .mode-btn:active, .result-card .btn:active, .kump-overlay .kump-btn:active:not(:disabled) { transform: scale(0.97); }
.menu.lobby .btn:focus-visible, .menu.lobby .mode-btn:focus-visible, .result-card .btn:focus-visible, .kump-overlay .kump-btn:focus-visible { outline: 2px solid var(--pn-gold); outline-offset: 2px; }
.menu.lobby .btn:disabled, .kump-overlay .kump-btn:disabled { filter: grayscale(0.55) brightness(0.8); cursor: default; }
.kump-overlay .kump-btn.kump-btn-quiet, .kump-overlay .kump-btn.kump-btn-danger { border: 0; border-image: none; clip-path: none; background: none; min-height: 0; text-shadow: none; font-family: inherit; font-weight: 600; filter: none; }
.kump-overlay .kump-btn.kump-btn-quiet { color: var(--pn-tan); text-decoration: underline; }
.kump-overlay .kump-btn.kump-btn-danger { color: #ff8a80; }

/* ---------------------------------------------------------------- hall multijoueur */
.menu.lobby {
  background: linear-gradient(rgba(6, 14, 32, 0.5), rgba(6, 14, 32, 0.8)), url("../assets/menu/menu-back.webp") center / cover no-repeat;
}
.menu.lobby .menu-card { width: min(100%, 360px); gap: 12px; padding: 16px 16px 14px; }
.menu.lobby .menu-brand::before { content: ""; width: 128px; height: 94px; margin-bottom: 2px; background: url("../assets/menu/logo.webp") center / contain no-repeat; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.menu.lobby .menu-brand h1 { margin: 0; font-family: var(--pn-serif); font-size: 26px; letter-spacing: 0.08em; color: var(--pn-gold); text-shadow: 0 2px 0 #4a3000, 0 0 14px rgba(255, 190, 60, 0.45); }
.menu.lobby .menu-brand p { color: var(--pn-tan); }
.menu.lobby .lobby-body .btn { min-height: 46px; }
.menu.lobby .mode-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; text-align: left; }
.menu.lobby .mode-btn svg { flex: none; width: 36px; height: 36px; padding: 7px; border-radius: 50%; color: #2b1707; background: radial-gradient(circle at 35% 30%, #ffe08a, #d79a2b); box-shadow: 0 1px 4px #000, inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.menu.lobby .mode-btn b { display: block; font-size: 16px; color: var(--pn-cream); }
.menu.lobby .mode-btn small { display: block; margin-top: 2px; font: 600 12px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #e6d7ad; text-shadow: 0 1px 2px #000; }
.lobby-me { color: var(--pn-tan); }
.lobby-me b { color: var(--pn-gold); }
.lobby-note { color: var(--pn-tan); }
.lobby-wait { color: var(--pn-cream); }
.lobby-wait b { color: var(--pn-gold); }
.lobby-code {
  padding: 8px 0 8px; border: 3px solid #d9b25a; border-radius: 14px; background: var(--pn-wood); background-clip: padding-box;
  font-family: var(--pn-serif); color: var(--pn-gold); text-shadow: 0 2px 0 #4a3000, 0 0 16px rgba(255, 190, 60, 0.5);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.5);
}
.lobby-join input { border: 3px solid var(--pn-edge); border-radius: 12px; background: rgba(0, 0, 0, 0.42); color: var(--pn-cream); font-family: var(--pn-serif); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.lobby-join input:focus { outline: none; border-color: var(--pn-gold); }
.lobby-join input::placeholder { color: rgba(216, 204, 170, 0.45); }
.lobby-msg { color: var(--pn-tan); }
.lobby-msg.warn { color: var(--pn-gold); }
.spin { border-color: rgba(255, 224, 160, 0.25); border-top-color: var(--pn-gold); }

/* ---------------------------------------------------------------- écran de fin */
.result-card { border-radius: 18px; }
.result-title { font-family: var(--pn-serif); }
.result-reason { color: var(--pn-tan); }
.result-stats td { border-top-color: rgba(154, 122, 69, 0.38); }
.result-stats td:first-child { color: var(--pn-tan); }
.result-stats .win-col { background: rgba(255, 210, 94, 0.07); }
.result-card .btn { font-size: 15px; }
.result-kump { color: var(--pn-tan); }
.result-kump.ok { color: #8be7a0; }
.result-kump.warn { color: var(--pn-gold); }

/* ---------------------------------------------------------------- écrans du module KUMP (boutique, compte) */
.kump-overlay { background: rgba(5, 12, 28, 0.76); }
.kump-overlay .kump-card { width: min(380px, 100%); padding: 20px 16px 16px; }
.kump-overlay .kump-title { margin: 0 0 12px; text-align: center; font-family: var(--pn-serif); font-size: 1.5rem; letter-spacing: 0.06em; color: var(--pn-gold); text-shadow: 0 2px 0 #4a3000, 0 0 14px rgba(255, 190, 60, 0.45); }
.kump-overlay .kump-subtitle { margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(154, 122, 69, 0.55); font-family: var(--pn-serif); font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pn-gold); }
.kump-overlay .kump-close { color: var(--pn-gold); text-shadow: 0 1px 2px #000; }
.kump-overlay .kump-close:hover { color: #fff; }
.kump-overlay .kump-intro, .kump-overlay .kump-note, .kump-overlay .kump-label, .kump-overlay .kump-loading { color: var(--pn-tan); }
.kump-overlay .kump-input { border: 3px solid var(--pn-edge); border-radius: 12px; background: rgba(0, 0, 0, 0.42); color: var(--pn-cream); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.kump-overlay .kump-input:focus { border-color: var(--pn-gold); }
.kump-overlay .kump-box, .kump-overlay .kump-tile { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(154, 122, 69, 0.6); }
.kump-overlay .kump-tile strong { color: var(--pn-gold); font-family: var(--pn-serif); }
.kump-overlay .kump-tile span { color: var(--pn-tan); }
.kump-overlay .kump-avatar { border: 3px solid var(--pn-gold); border-radius: 50%; background: var(--pn-stone); color: var(--pn-gold); font-family: var(--pn-serif); }
.kump-overlay .kump-chip { border-color: rgba(154, 122, 69, 0.6); }
.kump-overlay .kump-chip.kump-on { background: rgba(255, 210, 94, 0.18); border-color: var(--pn-gold); color: var(--pn-gold); }
.kump-overlay .kump-sep { color: var(--pn-tan); }
.kump-overlay .kump-sep::before, .kump-overlay .kump-sep::after { background: rgba(154, 122, 69, 0.5); }
.kump-overlay .kump-note a { color: var(--pn-gold); }

/* boutique : solde (pièce dorée) et rangées d'objets (planches de bois) */
.kump-overlay .kump-balance { justify-content: center; align-items: center; gap: 8px; padding: 6px 0 10px; }
.kump-overlay .kump-balance::before { content: "★"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; color: #8a5a0a; background: radial-gradient(circle at 35% 30%, #fff1a8, #f0b52e 55%, #c98a14); box-shadow: 0 1px 4px #000, inset 0 0 0 2px rgba(255, 255, 255, 0.4); }
.kump-overlay .kump-balance strong { font-family: var(--pn-serif); font-size: 1.7rem; color: var(--pn-gold); text-shadow: 0 2px 0 #4a3000; }
.kump-overlay .kump-balance span { color: var(--pn-tan); }
.kump-overlay .kump-item { margin-bottom: 8px; padding: 9px 10px; border: 2px solid #5a3f22; border-radius: 12px; background: var(--pn-wood); box-shadow: inset 0 1px 0 rgba(255, 224, 160, 0.25), 0 2px 6px rgba(0, 0, 0, 0.45); }
.kump-overlay .kump-item-main strong { font-family: var(--pn-serif); color: var(--pn-cream); text-shadow: var(--pn-text-shadow); }
.kump-overlay .kump-item-main span { color: #e6d7ad; text-shadow: 0 1px 2px #000; }
.kump-overlay .kump-price { color: var(--pn-gold); font-weight: 800; text-shadow: 0 1px 2px #000; }
.kump-overlay .kump-item .kump-btn { min-height: 42px; padding: 0 6px; font-size: 0.85rem; }

/* ---------------------------------------------------------------- amis KUMP (kump-account/social) : panneau, chat, invitation, notification */
.kump-overlay .kump-friends-card { width: min(400px, 100%); }
.kump-overlay .kump-fcode { border: 3px solid #d9b25a; border-radius: 14px; background: var(--pn-wood); background-clip: padding-box; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.5); }
.kump-overlay .kump-fcode .kump-label { color: var(--pn-cream); font-family: var(--pn-serif); letter-spacing: 0.08em; text-shadow: var(--pn-text-shadow); }
.kump-overlay .kump-fcode-value { font-family: var(--pn-serif); color: var(--pn-gold); text-shadow: 0 2px 0 #4a3000, 0 0 16px rgba(255, 190, 60, 0.5); }
.kump-overlay .kump-fcode .kump-btn { min-height: 40px; font-size: 0.85rem; }
.kump-overlay .kump-fcode-input { font-family: var(--pn-serif); }
.kump-overlay .kump-fadd .kump-btn { min-height: 48px; padding: 0 8px; }
.kump-overlay .kump-fmsg { color: var(--pn-tan); }
.kump-overlay .kump-fmsg.kump-ok { color: #8be7a0; }
.kump-overlay .kump-fmsg.kump-warn { color: var(--pn-gold); }
.kump-overlay .kump-fcount { color: var(--pn-tan); }
.kump-overlay .kump-frow { border: 2px solid #5a3f22; border-radius: 12px; background: var(--pn-wood); box-shadow: inset 0 1px 0 rgba(255, 224, 160, 0.25), 0 2px 6px rgba(0, 0, 0, 0.45); }
.kump-overlay .kump-fclick:hover, .kump-overlay .kump-fclick:focus-visible { border-color: var(--pn-gold); filter: brightness(1.08); }
.kump-overlay .kump-frow .kump-fmain strong { font-family: var(--pn-serif); color: var(--pn-cream); text-shadow: var(--pn-text-shadow); }
.kump-overlay .kump-fstatus { color: #e6d7ad; text-shadow: 0 1px 2px #000; }
.kump-overlay .kump-fon .kump-fstatus { color: #8be7a0; }
.kump-overlay .kump-frow .kump-btn { min-height: 40px; padding: 0 4px; font-size: 0.78rem; }
.kump-overlay .kump-frow .kump-fchat { min-width: 44px; font-size: 1rem; }
.kump-overlay .kump-favatar { border: 3px solid var(--pn-gold); background-color: #182131; color: var(--pn-gold); font-family: var(--pn-serif); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); }
.kump-overlay .kump-dot { border-color: #3a2814; }
.kump-overlay .kump-fbadge { border: 2px solid #ffe08a; background: radial-gradient(circle at 35% 30%, #ff6b5b, #c41d12); }
.kump-overlay .kump-fchat-head .kump-fmain strong { font-family: var(--pn-serif); color: var(--pn-gold); }
.kump-overlay .kump-fchat-head .kump-fback { min-height: 40px; padding: 0 4px; font-size: 0.8rem; }
.kump-overlay .kump-fchat-head .kump-btn-danger { font-size: 1rem; }
.kump-overlay .kump-fchat-log { border: 3px solid var(--pn-edge); border-radius: 12px; background: rgba(0, 0, 0, 0.42); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6); }
.kump-overlay .kump-fbubble { border: 1px solid rgba(154, 122, 69, 0.7); background: #222d40; color: var(--pn-cream); }
.kump-overlay .kump-mine .kump-fbubble { border-color: #2f8a32; background: linear-gradient(#2f9a33, #17751f); color: #fff; }
.kump-overlay .kump-fmsgline time { color: var(--pn-tan); }
.kump-overlay .kump-fchat-form .kump-input { min-height: 48px; }
.kump-overlay .kump-fchat-form .kump-fsend { min-width: 56px; min-height: 50px; font-size: 1.1rem; }

/* carte d'invitation (hors du dialogue : elle peut arriver pendant une partie) */
.kump-invite {
  border: 3px solid var(--pn-edge) !important; border-radius: 16px !important; background: var(--pn-stone) !important; color: var(--pn-cream) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.3), 0 14px 40px rgba(0, 0, 0, 0.6) !important;
}
.kump-invite .kump-fmain strong { font-family: var(--pn-serif); color: var(--pn-gold); text-shadow: 0 2px 0 #4a3000; }
.kump-invite .kump-fstatus { color: var(--pn-tan); }
.kump-invite .kump-invite-ic { border: 3px solid var(--pn-gold); background: var(--pn-wood); color: var(--pn-gold); }
.kump-invite .kump-invite-note { color: var(--pn-tan); }
.kump-invite .kump-btn {
  border: 15px solid transparent; border-image: url("../assets/menu/frame-wood.webp") 46 / 15px stretch; border-radius: 0; background: var(--pn-wood);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  color: var(--pn-cream); font-family: var(--pn-serif); font-weight: 800; text-shadow: var(--pn-text-shadow); min-height: 48px; padding: 0 4px; cursor: pointer;
}
.kump-invite .kump-btn.kump-btn-primary {
  border-image: url("../assets/menu/frame-green.webp") 52 / 16px stretch; background: linear-gradient(rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.18)), linear-gradient(#3fb43c, #17751f);
  clip-path: polygon(17px 3px, calc(100% - 17px) 3px, calc(100% - 3px) 17px, calc(100% - 3px) calc(100% - 17px), calc(100% - 17px) calc(100% - 3px), 17px calc(100% - 3px), 3px calc(100% - 17px), 3px 17px);
  color: #fff;
}
.kump-ftoast { border: 2px solid var(--pn-edge) !important; background: var(--pn-stone) !important; color: var(--pn-cream) !important; font-family: var(--pn-serif) !important; }
/* sprites de la planche d'interface à la place des pictogrammes du module (bulle de chat, épées de l'invitation) */
.kump-overlay .kump-frow .kump-fchat {
  width: 46px; min-width: 46px; height: 46px; min-height: 0; padding: 0; border: 0; border-image: none; clip-path: none; font-size: 0;
  background: url("../assets/ui/btn-chat.webp") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.kump-invite .kump-invite-ic { border: 0; background: url("../assets/ui/fr2-swords.webp") center / contain no-repeat; font-size: 0; width: 48px; height: 48px; }

/* notification « Nouveau message » du module KUMP : MASQUÉE (2026-10-15). Elle s'affichait tout en bas, par-dessus l'interface de la partie ;
   le jeu a la sienne, en partie seulement (ui/GameSocial.js), et la pastille du bouton « Amis » suffit à l'accueil. */
.kump-ftoast { display: none !important; }