/* ==========================================================================
   I mecha condivisi: la pagina pubblica di un mecha (/mech/{codice}) e la vetrina della comunità
   (/hangar/shared), i più importati per primi.
   ========================================================================== */

.mc { --tinta: 255, 209, 102; width: min(1200px, 100%); margin: 0 auto; padding: 5rem var(--gutter-in, 1rem) 3rem; }
/* ⚠ Il menu qui è fisso e trasparente (app.css, «home»): sotto i 5rem il «← Mecha della comunità» ci finiva sotto. */
.mc-back { display: inline-flex; gap: 0.4rem; margin-bottom: 1rem; color: var(--muted); text-decoration: none; font: 700 0.8rem/1 'Rajdhani', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.mc-missing { text-align: center; padding-top: 4rem; }
.mc-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; align-items: center; }
.mc-art { position: relative; aspect-ratio: 3 / 4; max-height: 560px; border-radius: 18px; overflow: hidden;
    background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(var(--tinta), 0.18), transparent 70%), linear-gradient(160deg, rgba(27, 35, 49, 0.8), rgba(10, 13, 19, 0.9));
    border: 1px solid rgba(var(--tinta), 0.3); }
.mc-art .mvs { width: 100%; height: 100%; }
.mc-class { position: absolute; right: 1rem; bottom: 0.2rem; font: 700 7rem/1 'Rajdhani', sans-serif; color: rgba(var(--tinta), 0.12); pointer-events: none; }
.mc-id h1 { margin: 0.2rem 0 0.3rem; font: 700 clamp(2.4rem, 6vw, 4rem)/0.95 'Rajdhani', sans-serif; text-transform: uppercase; }
.mc-author { color: rgb(var(--tinta)); font-weight: 600; margin: 0; }
.mc-pilot { color: #c4cfe0; }
.mc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 1.2rem 0; }
.mc-tiles div { padding: 0.7rem 0.8rem; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.mc-tiles dt { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mc-tiles dd { margin: 0.2rem 0 0; font: 700 1.5rem/1 'Rajdhani', sans-serif; }
.mc-tiles dd.small { font-size: 1.05rem; }
.mc-imports { color: var(--muted); }
.mc-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mc-parts { margin-top: 2rem; }
.mc-parts ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.mc-parts li { display: grid; gap: 0.15rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); }
.mc-parts small { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mc-parts em { color: var(--muted); font-style: normal; font-size: 0.82rem; }

/* La testata dell'elenco come quella dell'hangar: stessa altezza dall'alto, stesso titolo. */
.mc-list { width: min(1240px, 100%); padding-top: 6rem; }
.mc-list-head h1 { margin: 0 0 1rem; font: 700 clamp(3rem, 8vw, 6rem)/0.92 'Rajdhani', 'Inter', sans-serif; text-transform: uppercase; }
.mc-list-head .lead { color: #c4cfe0; max-width: 60ch; }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.mc-card { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0.8rem; align-items: center; padding: 0.8rem; border-radius: 14px;
    background: linear-gradient(160deg, rgba(27, 35, 49, 0.75), rgba(13, 17, 24, 0.85)); border: 1px solid rgba(255, 255, 255, 0.08); color: inherit; text-decoration: none; transition: transform 0.15s, border-color 0.15s; }
.mc-card:hover { transform: translateY(-2px); border-color: rgba(var(--tinta), 0.5); }
.mc-card-art { height: 130px; }
.mc-card-art .mvs { width: 100%; height: 100%; }
.mc-card-info { display: grid; gap: 0.2rem; }
.mc-card-info b { font: 700 1.15rem/1.1 'Rajdhani', sans-serif; text-transform: uppercase; }
.mc-card-info b em { color: rgb(var(--tinta)); font-style: normal; }
.mc-card-info small { color: var(--muted); }
.mc-card-info span { color: #c4cfe0; font-size: 0.85rem; }
.mc-rank { position: absolute; top: 0.5rem; right: 0.7rem; font: 700 0.9rem/1 'Rajdhani', sans-serif; color: var(--muted); }

@media (max-width: 800px) {
    .mc-hero { grid-template-columns: 1fr; }
    .mc-art { max-height: 420px; }
    .mc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}