/* ══ ROADMAP — „DIAMANT" ════════════════════════════════════════════════════
   Refăcut de la zero pe 25 sept 2026, odată cu tot Mativera+ (materialul și
   tokenii --d-* vin din assets/css/mativera-plus.css). Fără fotografia din spatele
   titlului, fără numărătoarea zilelor, fără borne, fără anotimp și etapă, fără
   butonul de vreme și fără animații.

   Traseul: cinci opriri pe lat. Sus, un fir care le leagă, cu câte o piatră
   (mărgeaua) pentru fiecare oprire; dedesubt, cardul diamant al opririi.

   Firul se umple pe măsură ce asculți — asta e funcționalitate, nu efect. Scriptul
   din pagină pune pe fiecare oprire:
     --rm-seg     cât din segmentul ei s-a parcurs (0..1)  → umplerea firului
     --rm-lumina  cât de aproape e firul de piatră (0..1)  → piatra se colorează
     --rm-cap     1 cât timp segmentul chiar se umple      → punctul din capul firului
     .rm-lit      piatra a fost atinsă
     .rm-activ    oprirea care se aude acum
   Înăuntrul pietrei, cele șapte puncte (mtv_rm_puncte în pagină) stau pe loc. */

.rm-page {
    --rm-stop-w: 300px;
    --rm-gap: 20px;
    --rm-bleed: 24px;     /* cât „respiră" caruselul dincolo de coloană (vezi .rm-track) */
    --rm-orb: 64px;
    --rm-orb-top: 6px;
    --rm-fir: 4px;}

/* ── Antetul ─────────────────────────────────────────────────────────────── */
.rm-head, .rm-stop-card, .rm-gate {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--d-diamant);
    border: 1px solid var(--d-margine);
    border-radius: var(--d-raza);
    box-shadow: var(--d-umbra);}
.rm-head::before, .rm-stop-card::before, .rm-gate::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url('../../img/diamant-fatete.svg') right top / 760px auto no-repeat;
    -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.6) 38%, transparent 72%);
            mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.6) 38%, transparent 72%);}
.rm-head::before { background-size: 1000px auto;}

.rm-head { padding: 32px 34px; margin-bottom: 22px;}
.rm-title { margin: 0 0 12px; font-size: clamp(34px, 4.2vw, 50px); line-height: 1.02; letter-spacing: -0.025em; color: var(--d-ink);}
.rm-t-thin { font-weight: 300;}
.rm-t-bold { font-weight: 800; color: var(--d-accent);}
.rm-lead { max-width: 620px; margin: 0; font-size: 16px; line-height: 1.6; color: var(--d-ink-2);}

/* ── Opririle ────────────────────────────────────────────────────────────── */
.rm-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px;}
.rm-sec-title { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: var(--d-ink);}
.rm-nav { display: flex; gap: 8px;}
.rm-nav-btn {
    width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
    display: grid; place-items: center;
    background: #ffffff; border: 1px solid var(--d-field); color: var(--d-ink); font-size: 14px;}
.rm-nav-btn:hover:not(:disabled) { border-color: var(--d-accent); color: var(--d-accent);}
.rm-nav-btn:disabled { opacity: 0.4; cursor: default;}

/* Caruselul taie tot ce iese din el. Lipit de margine, prima oprire își pierdea
   inelul pietrei, conturul cardului activ și umbra (26 sept 2026). De aceea iese
   cu --rm-bleed în afara coloanei, stânga și dreapta, și are exact atâta spațiu
   pe dinăuntru: opririle rămân aliniate cu titlul, dar au loc să respire.
   scroll-padding: altfel „snap"-ul lipește iar oprirea de marginea caruselului.
   max-width: none — regula globală `* { max-width: 100% }` de pe telefon ar anula lățirea. */
.rm-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: -10px calc(-1 * var(--rm-bleed)) -22px;
    padding: 10px var(--rm-bleed) 36px;
    scroll-padding-inline: var(--rm-bleed);
    max-width: none; width: calc(100% + 2 * var(--rm-bleed));}
.rm-track::-webkit-scrollbar { display: none;}

.rm-stop {
    position: relative; flex: 0 0 calc(var(--rm-stop-w) + var(--rm-gap));
    padding-right: var(--rm-gap);
    scroll-snap-align: start;}

/* firul: pista (mereu vizibilă) și umplerea (cât s-a ascultat) */
.rm-stop::before, .rm-stop::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: calc(var(--rm-orb-top) + var(--rm-orb) / 2 - var(--rm-fir) / 2);
    height: var(--rm-fir); border-radius: calc(var(--rm-fir) / 2);}
.rm-stop::before { background: rgba(10, 58, 165, 0.12);}
.rm-stop::after {
    z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--d-accent), #6ec1ff);
    transform: scaleX(var(--rm-seg, 0)); transform-origin: left center;}
/* ultima oprire: firul se oprește la cardul ei */
.rm-stop:last-child::before, .rm-stop:last-child::after { right: var(--rm-gap);}

/* capul firului: un punct alb, cât timp segmentul se umple */
.rm-comet {
    position: absolute; z-index: 2; pointer-events: none;
    left: 0; right: 0; height: 0;
    top: calc(var(--rm-orb-top) + var(--rm-orb) / 2);
    transform: translateX(calc(var(--rm-seg, 0) * 100%));
    opacity: var(--rm-cap, 0);}
.rm-comet::before {
    content: ''; position: absolute; left: -7px; top: -7px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #ffffff; border: 3px solid var(--d-accent);
    box-shadow: 0 2px 6px rgba(10, 58, 165, 0.3);}
.rm-stop:last-child .rm-comet { right: var(--rm-gap);}

/* numărul opririi, lângă piatră */
.rm-stop-no {
    position: absolute; z-index: 2;
    left: calc(var(--rm-orb) + 12px); top: calc(var(--rm-orb-top) - 2px);
    padding: 2px 8px; border-radius: 7px; background: var(--d-bg);
    font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;}
.rm-lit .rm-stop-no { color: var(--d-accent);}

/* piatra (mărgeaua): gheață cât e departe firul, albastru-diamant când e atinsă */
.rm-stop-orb {
    position: relative; z-index: 3; overflow: hidden;
    display: block; margin-top: var(--rm-orb-top);
    width: var(--rm-orb); height: var(--rm-orb); border-radius: 50%;
    background: radial-gradient(130% 150% at 100% 0%, #ffffff 0%, #e8f1fc 50%, #d3e2f5 100%);
    border: 1px solid rgba(10, 58, 165, 0.2);
    box-shadow: 0 0 0 5px var(--d-bg), 0 8px 18px rgba(10, 58, 165, 0.14);}
.rm-stop-orb::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.55;
    background: url('../../img/diamant-fatete.svg') right top / 220px auto no-repeat;}
.rm-orb-core {
    position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none;
    background: radial-gradient(130% 150% at 100% 0%, #6ec1ff 0%, #1f58b8 48%, #0a2c7a 100%);
    opacity: var(--rm-lumina, 0);}

/* cele șapte puncte din piatră — stau pe loc */
.rm-nucleu { position: absolute; inset: 0; z-index: 3; pointer-events: none;}
.rm-nod {
    position: absolute;
    left: calc(50% + var(--nx) * 1%);
    top: calc(50% + var(--ny) * 1%);
    width: calc(var(--nd) * 1%); height: calc(var(--nd) * 1%);
    transform: translate(-50%, -50%);
    opacity: var(--no);}
.rm-nod i { position: absolute; inset: 0; border-radius: 50%; background: var(--d-accent);}
.rm-nod-ancora i { background: radial-gradient(circle at 34% 30%, #6ec1ff, var(--d-accent) 70%);}
.rm-lit .rm-nod { opacity: min(1, calc(var(--no) + 0.2));}
.rm-lit .rm-nod i { background: #ffffff;}
.rm-lit .rm-nod-ancora i { background: radial-gradient(circle at 34% 30%, #ffffff, #cde9ff 70%);}

/* cardul opririi */
.rm-stop-card { margin-top: 18px; padding: 18px 18px 16px;}
.rm-activ .rm-stop-card { border-color: var(--d-accent); box-shadow: 0 0 0 1px var(--d-accent), 0 12px 30px rgba(10, 58, 165, 0.14);}
.rm-stop-mood {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
    padding: 5px 12px 5px 10px; border-radius: 999px;
    background: #ffffff; border: 1px solid rgba(10, 58, 165, 0.12);
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--d-ink-2);}
.rm-stop-mood::before {
    content: ''; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg);
    background: linear-gradient(135deg, hsl(var(--h, 210), 70%, 72%), hsl(var(--h, 210), 70%, 40%));}
.rm-stop-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--d-ink);}
.rm-stop-sub { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--d-ink-2);}

/* sunetul opririi */
.rm-sound {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 8px 8px 8px; border-radius: 14px; cursor: pointer;
    background: #ffffff; border: 1px solid rgba(10, 58, 165, 0.12);}
.rm-sound:hover { border-color: var(--d-accent);}
.rm-sound-play {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(130% 150% at 100% 0%, #6ec1ff 0%, #2a6fd0 38%, #0a3aa5 72%, #072a7a 100%);
    color: #ffffff; font-size: 12px;
    box-shadow: 0 4px 10px rgba(10, 58, 165, 0.25);}
.rm-sound-play i { margin-left: 2px;}
.rm-sound-info { flex: 1; min-width: 0; display: flex; flex-direction: column;}
.rm-sound-name { font-size: 14.5px; font-weight: 700; color: var(--d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.rm-sound-dur { font-size: 12.5px; color: var(--d-ink-2); font-variant-numeric: tabular-nums;}
.rm-sound-fav {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; padding: 0; cursor: pointer;
    display: grid; place-items: center; border: 0; background: transparent; color: var(--d-ink-3); font-size: 15px;}
.rm-sound-fav:hover { background: #eef5fd; color: var(--d-accent);}

.rm-start {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 50px; margin-top: 10px; padding: 0 24px; border: 0; border-radius: 14px; cursor: pointer;
    background: var(--d-accent); color: #ffffff; font-size: 15px; font-weight: 800;
    box-shadow: 0 8px 20px rgba(10, 58, 165, 0.25);}
.rm-start:hover { background: var(--d-accent-2);}

/* ── Fără Elite: se vede ce e, dar nu se poate folosi ─────────────────────── */
.rm-locked .rm-track { filter: blur(3px) saturate(0.7); opacity: 0.55; pointer-events: none; -webkit-user-select: none; user-select: none;}
.rm-gate {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    max-width: 560px; margin: 8px auto 0; padding: 30px 28px 28px;}
.rm-gate > i {
    width: 56px; height: 56px; margin-bottom: 14px; border-radius: 16px;
    display: grid; place-items: center; font-size: 20px;
    background: var(--d-navy); color: var(--d-gold);}
.rm-gate h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: var(--d-ink);}
.rm-gate p { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--d-ink-2);}
.rm-gate p b { color: var(--d-ink);}
.rm-gate-btn {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 50px; padding: 0 24px; border-radius: 14px;
    background: var(--d-accent); color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 800;
    box-shadow: 0 8px 20px rgba(10, 58, 165, 0.25);}
.rm-gate-btn i { color: var(--d-gold);}
.rm-gate-btn:hover { background: var(--d-accent-2); color: #ffffff;}

@media (max-width: 640px) {
    .rm-page { --rm-stop-w: min(82vw, 300px); --rm-gap: 14px; --rm-orb: 56px; --rm-bleed: 12px;}
    .rm-head { padding: 22px 20px;}
    .rm-lead { font-size: 15px;}
    .rm-sec-title { font-size: 19px;}
    .rm-nav-btn { width: 40px; height: 40px;}
    .rm-start { width: 100%; justify-content: center;}
}