/* Jeu : boite des medailles, jauge, replay du solveur. */
/* Box Objectifs Médailles */
/* Jauge des medailles */
.mbar { --diamond:#7fe3ff; --gold:#ffcf6b; --silver:#c9cedd; --bronze:#d98a52; padding:2px 2px 0; }
.mbarStatus { font-size:12px; font-weight:700; margin-bottom:20px; color:var(--muted); font-variant-numeric:tabular-nums; transition:color .3s; }
.mbarStatus[data-m="diamond"] { color:var(--diamond); } .mbarStatus[data-m="gold"] { color:var(--gold); } .mbarStatus[data-m="silver"] { color:var(--silver); }
.mbarStatus[data-m="bronze"] { color:var(--bronze); } .mbarStatus[data-m="none"] { color:var(--accent); }
.mbarTrack { position:relative; height:8px; margin:0 9px 26px; border-radius:99px; background:rgba(255,255,255,.07);
             box-shadow:inset 0 1px 2px rgba(0,0,0,.4); }
/* la jauge est coloree par zones de medaille (bronze, argent, or, diamant) ; la partie deja videe reste visible en fantome, et une etincelle marque le niveau actuel */
.mbarGhost { position:absolute; inset:0; border-radius:99px; opacity:.2; }
.mbarFill { position:absolute; inset:0; border-radius:99px; background:var(--gold); }
.mbarSpark { position:absolute; top:-4px; width:3px; height:16px; margin-left:-1.5px; border-radius:2px; background:#fff; box-shadow:0 0 8px 1px rgba(255,255,255,.75); opacity:0; transition:opacity .2s; pointer-events:none; }
.mbarSpark.on { opacity:.95; }
.mbarFill[data-m="diamond"] { background:var(--diamond); } .mbarFill[data-m="silver"] { background:var(--silver); } .mbarFill[data-m="bronze"] { background:var(--bronze); }
.mbarFill[data-m="none"] { background:#5b6078; }
.mbarPb { position:absolute; top:-5px; width:2px; height:18px; margin-left:-1px; border-radius:2px; background:var(--mint); opacity:.85; }
.mbarPb::after { content:'PB'; position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-size:8px; font-weight:800; color:var(--mint); letter-spacing:.05em; }
.mbarNode { position:absolute; top:50%; width:0; height:0; }
.mbarNode .dot { position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
                 font-size:10px; font-weight:900; color:#15171f; background:var(--c); border:2px solid var(--panel);
                 box-shadow:0 0 0 1px var(--c), 0 2px 6px rgba(0,0,0,.35);
                 transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s, opacity .35s; }
.mbarNode .lbl { position:absolute; top:13px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:700;
                 color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; transition:color .3s, opacity .3s; }
.mbar-diamond { --c:var(--diamond); } .mbar-gold { --c:var(--gold); } .mbar-silver { --c:var(--silver); } .mbar-bronze { --c:var(--bronze); }
.mbarNode.next .dot { animation:mbarPulse 1.4s ease-in-out infinite; }
/* diamant : symbole SVG a la place du rond */
.gem { display:block; width:100%; height:100%; overflow:visible; }
.gem .gf { fill:var(--c); stroke:var(--c); stroke-width:1.2; stroke-linejoin:round; }
.gem .gl { fill:#fff; fill-opacity:.42; }
.gem .gs { fill:#000; fill-opacity:.12; }
.gem .gk { fill:none; stroke:rgba(21,23,31,.38); stroke-width:.9; stroke-linejoin:round; stroke-linecap:round; }
.mbar-diamond .dot { left:-12px; top:-12px; width:24px; height:24px; border:0; background:none; box-shadow:none; border-radius:0;
                     filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.mbar-diamond:not(.owned) .gem .gf { fill-opacity:.22; }
.mbar-diamond:not(.owned) .gem .gl, .mbar-diamond:not(.owned) .gem .gs { display:none; }
.mbarNode.mbar-diamond.next .dot { animation:gemPulse 1.4s ease-in-out infinite; box-shadow:none; }
@keyframes gemPulse { 0%,100% { filter:drop-shadow(0 0 0 rgba(127,227,255,0)); transform:scale(1); }
                      50% { filter:drop-shadow(0 0 6px rgba(127,227,255,.9)); transform:scale(1.14); } }
.mbarNode.next .lbl { color:var(--text); }
.mbarNode.lost .dot { transform:scale(.7); filter:grayscale(1) brightness(.55); }
.mbarNode.lost .lbl { opacity:.45; text-decoration:line-through; }
.mbarNode.owned .dot { color:#15171f; }
@keyframes mbarPulse { 0%,100% { box-shadow:0 0 0 1px var(--c), 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); }
                       50% { box-shadow:0 0 0 1px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 0%, transparent); transform:scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .mbarNode.next .dot { animation:none; } }
.boxHead { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; }
.boxHead h2 { margin:0 !important; }
.medalsPb { font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--mint);
            background:rgba(95,214,168,.12); padding:2px 6px; border-radius:5px; border:1px solid rgba(95,214,168,.25); white-space:nowrap; }
.medalsPb[hidden] { display:none; }
.medalsList { display:flex; flex-direction:column; gap:6px; }
.medalRow { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; border-radius:8px;
            border:1px solid var(--line); background:rgba(24,26,36,.6); transition:background .2s, border-color .2s, box-shadow .2s; }
.medalRow:hover { background:rgba(31,34,48,.9); border-color:var(--line2); }
.medalRow-gold { border-color:rgba(255,207,107,.25); background:rgba(255,207,107,.04); }
.medalRow-silver { border-color:rgba(185,195,215,.2); background:rgba(185,195,215,.03); }
.medalRow-bronze { border-color:rgba(215,140,75,.22); background:rgba(215,140,75,.04); }
.medalRow.achieved { box-shadow:inset 0 0 0 1px rgba(95,214,168,.35); }
.medalRow-gold.achieved { border-color:rgba(255,207,107,.6); background:rgba(255,207,107,.12);
                          box-shadow:0 2px 10px rgba(255,207,107,.12), inset 0 0 0 1px rgba(255,207,107,.35); }
.medalRow-silver.achieved { border-color:rgba(200,215,235,.5); background:rgba(200,215,235,.1); }
.medalRow-bronze.achieved { border-color:rgba(215,140,75,.5); background:rgba(215,140,75,.1); }
.medalLeft { display:flex; align-items:center; gap:8px; }
.medalIcon { font-size:16px; line-height:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.medalName { font-size:12px; font-weight:700; color:var(--text); }
.medalRight { display:flex; align-items:center; gap:6px; }
.medalTarget { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--muted); }
.medalRow.achieved .medalTarget { color:var(--text); }
.medalBadge { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:800;
              padding:1px 6px; border-radius:4px; letter-spacing:.03em;
              background:rgba(95,214,168,.18); color:var(--mint); border:1px solid rgba(95,214,168,.3); }
.medalRow-gold.achieved .medalBadge { background:rgba(255,207,107,.22); color:var(--gold); border-color:rgba(255,207,107,.4); }
.bossMedalCard { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
                 border:1px solid rgba(255,90,95,.35); background:rgba(255,90,95,.08); }
.bossMedalIcon { font-size:22px; line-height:1; }
.bossMedalTitle { font-weight:800; font-size:12px; color:var(--accent); margin-bottom:2px; }
.bossMedalDesc { font-size:11px; color:var(--muted); line-height:1.35; }
.bossMedalCard.commMedal { background: rgba(255,255,255,.03); border-color: var(--line, rgba(255,255,255,.08)); }
.commMedal .bossMedalTitle { color: var(--text, #e6e8f2); }
.commMedal .bossMedalIcon { filter: grayscale(1); opacity: .6; }
/* Replay du Solveur */
.replayBtn {
  margin-top:8px; width:100%; display:inline-flex; align-items:center; justify-content:center;
  gap:7px; padding:6px 12px; border:1px solid rgba(0,210,255,.35); border-radius:8px;
  background:rgba(0,210,255,.08); color:#00d2ff; font:inherit; font-size:11px; font-weight:700;
  cursor:pointer; transition:background .15s, border-color .15s, transform .1s, box-shadow .15s; user-select:none;
}
.replayBtn:hover {
  background:rgba(0,210,255,.16); border-color:#00d2ff; box-shadow:0 0 12px rgba(0,210,255,.25); transform:translateY(-1px);
}
.replayBtn:active { transform:translateY(0); }
.replayBtn.active { background:rgba(0,210,255,.25); border-color:#00d2ff; color:#fff; box-shadow:0 0 16px rgba(0,210,255,.35); }
.replayOverlay {
  position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:20; pointer-events:auto;
}
.replayBanner {
  display:inline-flex; align-items:center; gap:12px; padding:6px 12px; background:rgba(18,22,33,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(0,210,255,.45);
  border-radius:20px; box-shadow:0 8px 24px rgba(0,0,0,.6), 0 0 16px rgba(0,210,255,.2);
}
.replayInfo { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#e9ebf5; }
.replayDot {
  width:8px; height:8px; border-radius:50%; background:#00d2ff; box-shadow:0 0 8px #00d2ff;
  animation:pulseReplay 1s infinite alternate;
}
@keyframes pulseReplay { 0% { opacity:0.4; transform:scale(0.85); } 100% { opacity:1; transform:scale(1.15); } }
.replayTimer { font-weight:800; font-variant-numeric:tabular-nums; color:#00d2ff; background:rgba(0,210,255,.12); padding:2px 7px; border-radius:6px; }
.replayControls { display:inline-flex; align-items:center; gap:6px; }
.replayControlBtn { height:24px; padding:0 8px; font-size:11px; font-weight:700; border-radius:6px; }