/* monstrebien.ch — hall of fame intégré aux jeux maison (voir /js/hall.js).
   Rien n'est imposé : la police est héritée du jeu, les couleurs viennent de ses jetons (--ink, --dim, --panel, --line
   et sa couleur d'accent), et chaque jeu peut redéfinir les variables --mbh-* ou n'importe quelle classe mbh-* dans sa
   propre feuille. Structure : .mbh (podium dans le menu), .mbh-board (classement complet, par pages), .mbh-toast. */
.mbh, .mbh-board, .mbh-toast {
  --mbh-ink: var(--ink, #fff);
  --mbh-dim: var(--dim, rgba(255, 255, 255, .66));
  --mbh-line: var(--line, rgba(255, 255, 255, .2));
  --mbh-panel: var(--panel, rgba(0, 0, 0, .6));
  --mbh-accent: var(--gold, var(--amber, var(--yellow, var(--brass, #ffc44d))));
  --mbh-on-accent: #1a1205;
  --mbh-radius: 12px;
  --mbh-row: rgba(255, 255, 255, .07);
  --mbh-me: rgba(255, 255, 255, .14);
  font-family: inherit; color: var(--mbh-ink); box-sizing: border-box; pointer-events: auto;
}
.mbh *, .mbh-board *, .mbh-toast * { box-sizing: border-box; }

/* ---------- Podium dans le menu ---------- */
.mbh { width: 100%; max-width: 420px; display: grid; gap: 6px; text-align: left; }
.mbh-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mbh-title { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mbh-accent); }
.mbh-cup { width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14v2h3v3a5 5 0 0 1-4.6 5A6 6 0 0 1 13 16.9V19h3v2H8v-2h3v-2.1A6 6 0 0 1 6.6 13 5 5 0 0 1 2 8V5h3V3zm0 4H4v1a3 3 0 0 0 1.4 2.5A9 9 0 0 1 5 7zm14 0a9 9 0 0 1-.4 3.5A3 3 0 0 0 20 8V7h-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14v2h3v3a5 5 0 0 1-4.6 5A6 6 0 0 1 13 16.9V19h3v2H8v-2h3v-2.1A6 6 0 0 1 6.6 13 5 5 0 0 1 2 8V5h3V3zm0 4H4v1a3 3 0 0 0 1.4 2.5A9 9 0 0 1 5 7zm14 0a9 9 0 0 1-.4 3.5A3 3 0 0 0 20 8V7h-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mbh-all { padding: 5px 10px; border: 1px solid var(--mbh-line); border-radius: 999px; background: transparent; color: var(--mbh-ink); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mbh-all small { font-weight: 500; color: var(--mbh-dim); font-size: .9em; }
.mbh-all:hover { border-color: var(--mbh-accent); color: var(--mbh-accent); }
.mbh-podium, .mbh-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mbh-row { display: grid; grid-template-columns: 1.7rem 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 34px; padding: 3px 8px 3px 6px; border-radius: var(--mbh-radius); background: var(--mbh-row); font-size: .95rem; line-height: 1.2; }
.mbh-rank { font-weight: 800; text-align: center; color: var(--mbh-dim); font-variant-numeric: tabular-nums; }
.mbh-p1 .mbh-rank, .mbh-row.is-pinned .mbh-rank { color: var(--mbh-accent); }
.mbh-p1 { box-shadow: inset 0 0 0 1px var(--mbh-accent); }
.mbh-p1 .mbh-name { color: var(--mbh-accent); }
.mbh-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: .66rem; font-weight: 800; letter-spacing: .02em; color: #fff; background: hsl(var(--h, 210) 55% 42%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.mbh-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbh-score { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--mbh-ink); }
.mbh-row.is-me { background: var(--mbh-me); box-shadow: inset 0 0 0 1px var(--mbh-accent); }
.mbh-me { margin: 0; font-size: .88rem; color: var(--mbh-dim); }
.mbh-me b { color: var(--mbh-ink); }
.mbh-login a { color: var(--mbh-accent); font-weight: 700; }
.mbh-empty { margin: 0; padding: 8px 10px; border-radius: var(--mbh-radius); background: var(--mbh-row); font-size: .88rem; color: var(--mbh-dim); }

/* variante compacte : le podium sur une ligne, pour les menus déjà bien remplis */
.mbh.is-strip { max-width: none; gap: 5px; }
.mbh.is-strip .mbh-podium { display: flex; flex-wrap: wrap; gap: 4px; }
.mbh.is-strip .mbh-row { flex: 1 1 120px; grid-template-columns: auto 22px minmax(0, 1fr); min-height: 30px; padding: 2px 8px 2px 6px; font-size: .84rem; }
.mbh.is-strip .mbh-avatar { width: 22px; height: 22px; font-size: .56rem; }
.mbh.is-strip .mbh-score { grid-column: 3; font-size: .78rem; font-weight: 600; color: var(--mbh-dim); }
.mbh.is-strip .mbh-name { grid-column: 3; }
.mbh.is-strip .mbh-rank, .mbh.is-strip .mbh-avatar { grid-row: 1 / 3; }
.mbh.is-strip .mbh-me { font-size: .82rem; }

/* ---------- Classement complet : par pages, le joueur en tête ---------- */
.mbh-board { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.mbh-board[hidden] { display: none; }
.mbh-board-in { width: min(100%, 460px); max-height: 100%; overflow: auto; display: grid; gap: 8px; padding: 14px; background: var(--mbh-panel); border: 1px solid var(--mbh-line); border-radius: var(--mbh-radius); }
.mbh-board-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; }
.mbh-board-head h2 { margin: 0; font-size: 1.25rem; line-height: 1.1; color: var(--mbh-accent); }
.mbh-board-sub { grid-row: 2; font-size: .82rem; color: var(--mbh-dim); }
.mbh-close { grid-row: 1 / 3; width: 36px; height: 36px; border: 1px solid var(--mbh-line); border-radius: 50%; background: transparent; color: var(--mbh-ink); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.mbh-close:hover { border-color: var(--mbh-accent); color: var(--mbh-accent); }
.mbh-rows-me { padding-bottom: 8px; border-bottom: 1px dashed var(--mbh-line); }
.mbh-board-foot { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: .88rem; color: var(--mbh-dim); }
.mbh-prev, .mbh-next { width: 38px; height: 38px; border: 1px solid var(--mbh-line); border-radius: 50%; background: transparent; color: var(--mbh-ink); font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.mbh-prev:disabled, .mbh-next:disabled { opacity: .3; cursor: default; }

/* ---------- Message après une partie ---------- */
.mbh-toast { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translate(-50%, 16px); z-index: 2147482001; max-width: calc(100% - 28px); padding: 9px 14px; border: 1px solid var(--mbh-line); border-radius: var(--mbh-radius); background: var(--mbh-panel); font-size: .92rem; line-height: 1.3; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.mbh-toast.on { opacity: 1; transform: translate(-50%, 0); }
.mbh-toast.is-record { border-color: var(--mbh-accent); }
.mbh-toast b { color: var(--mbh-accent); }
@media (max-width: 480px) { .mbh-row { font-size: .88rem; } .mbh-board { padding: 8px; } .mbh-board-in { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .mbh-toast { transition: none; } }