/* Le medaglie — seconda versione, dal verdetto del laboratorio (round 1).
   Nastro invece di cerchio, romano fuori invece di cifra dentro, solo emblemi
   nella fila, scala della rarità in testata, eccedenza che sfuma, e le medaglie
   che non hai in solo contorno. */

.mdg-blocco{margin:18px 0 6px}
.mdg-niente{font-size:.78rem;color:var(--ink-3);margin:14px 0 0;line-height:1.6}

/* la testata: la barra in proporzione, poi la riga di testo */
.mdg-scala{display:flex;height:17px;border-radius:5px;overflow:hidden;background:var(--rule-soft);max-width:340px}
.mdg-scala i{height:100%;display:grid;place-items:center;min-width:0}
/* il conto per gradino: "7×" dentro la sua fetta, e sparisce se la fetta è stretta */
.mdg-scala i b{font-family:var(--sans);font-size:.55rem;font-weight:800;letter-spacing:.02em;
  color:color-mix(in srgb,#14150f 62%,transparent);white-space:nowrap;overflow:hidden}
.mdg-scala i[data-r="5"] b{color:color-mix(in srgb,#faf8f3 82%,transparent)}
.mdg-scala i[data-r="4"] b{color:color-mix(in srgb,#faf8f3 90%,transparent)}
.mdg-scala i[data-r="1"]{background:#c9c5b6}
.mdg-scala i[data-r="2"]{background:#c2a878}
.mdg-scala i[data-r="3"]{background:#c9963f}
.mdg-scala i[data-r="4"]{background:#a9691a}
.mdg-scala i[data-r="5"]{background:#14150f}
.mdg-testa{font-size:.7rem;color:var(--ink-3);margin:8px 0 12px;letter-spacing:.01em}
.mdg-testa b{font-family:var(--serif);font-size:1.05rem;color:var(--ink);font-weight:400}

/* ── l'emblema: nastro + numero romano sotto ── */
.mdg-fila{display:flex;flex-wrap:wrap;gap:9px 7px;align-items:flex-start}
.mdg{display:inline-flex;flex-direction:column;align-items:center;gap:1px;border:0;background:none;
  padding:2px 1px;cursor:pointer;font-family:var(--sans);width:32px;
  --m1:#c9c5b6;--m2:#f2efe6;--m0:#6f7363}
.mdg .seg{width:26px;height:26px;display:block;position:relative}
.mdg .seg svg{display:block;width:100%;height:100%}
/* l'emoji dentro il nastro: e' lei a dire *quale* medaglia e', il colore dice quanto e' rara */
.mdg .seg em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  font-size:12px;line-height:1;padding-bottom:4px;filter:saturate(.85)}
.mdg.vuota .seg em{opacity:.3;filter:grayscale(1)}
.con-nomi .mdg .seg em{font-size:13px}
.mdg .gambo{fill:var(--m2);stroke:var(--m1);stroke-width:1.6;stroke-linejoin:round}
.mdg .dif{font-family:var(--serif);font-style:normal;font-size:.62rem;line-height:1;color:var(--m0);
  letter-spacing:.03em;opacity:.75}
.mdg:hover .gambo,.mdg.on .gambo{stroke-width:2.4}
.mdg:hover .dif,.mdg.on .dif{opacity:1}
.mdg.on .seg{transform:translateY(-1px)}
span.mdg{cursor:default}

/* nel catalogo il nome va scritto: un elenco di soli simboli non si legge,
   e D3 valeva per la fila nel foglio di un atleta, non per il medagliere */
.mdg-fila.con-nomi{gap:14px 10px}
.con-nomi .mdg{width:82px}
.con-nomi .mdg .et{font-style:normal;font-size:.63rem;font-weight:600;line-height:1.25;
  text-align:center;color:var(--ink-2);margin-top:3px}
.con-nomi .mdg.vuota .et{color:var(--ink-4);font-weight:400}
.con-nomi .mdg:hover .et,.con-nomi .mdg.on .et{color:var(--ink)}

/* i cinque gradini della rarità: più sale, più il metallo si scalda e si scurisce */
.mdg[data-r="1"]{--m1:#c9c5b6;--m2:#f2efe6;--m0:#6f7363}
.mdg[data-r="2"]{--m1:#c2a878;--m2:#f6efdf;--m0:#7a6532}
.mdg[data-r="3"]{--m1:#c9963f;--m2:#f8eed6;--m0:#8a6413}
.mdg[data-r="4"]{--m1:#a9691a;--m2:#f4e3c8;--m0:#7a4a0d}
.mdg[data-r="5"]{--m1:#14150f;--m2:#e7dcc4;--m0:#14150f}

/* quelle che non hai: solo contorno, tratteggiato, senza pieno */
.mdg.vuota{cursor:pointer}
.mdg.vuota .gambo{fill:none;stroke-dasharray:2.5 3;stroke-linecap:round;opacity:.55}
.mdg.vuota .dif{opacity:.32}

/* l'eccedenza sfuma invece di finire dietro un bottone che sembra una medaglia */
.mdg-fila.sfuma{max-height:76px;overflow:hidden;position:relative}
.mdg-fila.sfuma::after{content:"";position:absolute;inset:auto 0 0 0;height:34px;pointer-events:none;
  background:linear-gradient(transparent,var(--bg))}
.mdg-tutte{display:inline-block;margin-top:7px;border:0;background:none;padding:4px 0;cursor:pointer;
  font-family:var(--sans);font-size:.71rem;font-weight:700;color:var(--dawn-ink);
  border-bottom:1px solid color-mix(in srgb,var(--dawn) 45%,transparent)}
.mdg-tutte:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ── la spiegazione ── */
.mdg-detta{margin-top:12px;padding:13px 15px;border:1px solid var(--rule);border-radius:12px;
  background:var(--campo,#fffdf8);font-size:.8rem;line-height:1.6;color:var(--ink-2)}
.mdg-detta b{color:var(--ink);font-weight:600}
.mdg-detta span{display:block;margin-top:3px}
.mdg-detta .come{font-size:.72rem;color:var(--ink-3);margin-top:7px}
.mdg-detta .rom{font-family:var(--serif);font-weight:400;font-size:.95rem;color:var(--ink)}
/* prefissata: `.r` da sola si scontrava con le celle allineate a destra di
   scheda-gara, che si prendevano il bordo a pillola della targhetta */
.mdg-r{display:inline-block;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:2px 8px;border-radius:999px;border:1px solid currentColor;margin-left:6px}
.mdg-r1{color:#8a8d7d}.mdg-r2{color:#7a6532}.mdg-r3{color:#8a6413}.mdg-r4{color:#a9691a}.mdg-r5{color:#14150f}

/* ── il medagliere: una famiglia per riga, col suo conto a lato ── */
.mdg-fam{border-top:1px solid var(--rule-soft);padding:16px 0 4px}
.mdg-fam:first-child{border-top:0}
.mdg-fam .ft{display:flex;align-items:baseline;gap:12px;margin-bottom:11px}
.mdg-fam h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin:0}
.mdg-fam .ft span{margin-left:auto;font-size:.7rem;color:var(--ink-3);white-space:nowrap}
.mdg-fam .ft span b{font-family:var(--serif);font-size:1rem;color:var(--ink);font-weight:400}
#mdgDetta{position:sticky;bottom:14px;margin-top:18px;
  box-shadow:0 10px 30px -18px rgba(20,21,15,.5)}

@media(max-width:520px){
  .mdg-fila{gap:8px 6px}
  .mdg{width:29px}
  .mdg .seg{width:24px;height:24px}
}


/* ── l'anteprima al passaggio o al tocco ── */
.mdg-bolla{position:fixed;z-index:1400;max-width:260px;pointer-events:none;opacity:0;
  transform:translateY(3px);transition:opacity .13s,transform .13s var(--molla,ease);
  background:var(--ink);color:var(--bg);border-radius:11px;padding:10px 13px;
  font-family:var(--sans);font-size:.74rem;line-height:1.5;
  box-shadow:0 12px 30px -14px rgba(20,21,15,.6)}
.mdg-bolla.on{opacity:1;transform:translateY(0)}
.mdg-bolla b{font-weight:600}
.mdg-bolla .rr{display:inline-block;font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;border:1px solid currentColor;border-radius:999px;padding:1px 7px;margin-left:6px;
  color:color-mix(in srgb,#faf8f3 70%,transparent)}
.mdg-bolla .d{display:block;margin-top:5px;color:color-mix(in srgb,#faf8f3 82%,transparent)}
.mdg-bolla .q{display:block;margin-top:5px;font-size:.66rem;color:color-mix(in srgb,#faf8f3 58%,transparent)}


/* ── l'elenco disteso: una medaglia per riga, con la sua frase ── */
.mdg-elenco{margin-top:10px;border-top:1px solid var(--rule-soft)}
.mdg-voce{display:flex;gap:11px;align-items:baseline;padding:7px 2px;
  border-bottom:1px solid var(--rule-soft);font-size:.76rem;line-height:1.45}
.mdg-voce .e{font-size:1rem;width:20px;flex:none;text-align:center}
.mdg-voce .t{flex:1;min-width:0}
.mdg-voce .t b{font-weight:600;color:var(--ink)}
.mdg-voce .t i{font-style:normal;font-family:var(--serif);font-size:.85rem;color:var(--ink-4);margin-left:4px}
.mdg-voce .t span{display:block;color:var(--ink-3);font-size:.72rem}
.mdg-voce .q{font-size:.68rem;color:var(--ink-4);white-space:nowrap;font-variant-numeric:tabular-nums}
.mdg-voce[data-r="4"] .q,.mdg-voce[data-r="5"] .q{color:var(--dawn-ink);font-weight:700}

/* Il mazzo che si sfoglia: aperto "vedi tutte", ogni riga sale al suo posto
   una dopo l'altra (il ritardo lo mette il JS), come carte posate sul tavolo.
   L'ombra sotto e' quella di una carta appena appoggiata e sparisce arrivata. */
.mdg-voce{opacity:0;transform:translateY(14px) scale(.985);transform-origin:50% 100%;
  transition:opacity .3s ease,transform .38s var(--molla,cubic-bezier(.34,1.4,.5,1)),
             box-shadow .38s ease;
  box-shadow:0 6px 14px -10px rgba(20,21,15,.55)}
.mdg-voce.giu{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(20,21,15,0)}
/* quella da cui sei partito: aperte tutte e quaranta, senza un segno non la
   ritrovi piu' */
.mdg-voce.scelta{background:color-mix(in srgb,var(--dawn) 13%,transparent);
  box-shadow:inset 2px 0 0 var(--dawn-ink);border-radius:0 5px 5px 0}
@media(prefers-reduced-motion:reduce){
  .mdg-voce{transition:none;box-shadow:none;transform:none;opacity:0}
  .mdg-voce.giu{opacity:1}
}