/* ===========================================================================
   Medals — the shelf, the medal card and the celebration (js/medals.js)
   ---------------------------------------------------------------------------
   Loaded on index.html after profile.css. Uses base.css's tokens, so it
   follows the light and night themes. Tier colours: bronze, silver, gold.
   =========================================================================== */

:root {
    --tier-1: #C98A4E;
    --tier-1-soft: #F6E3CF;
    --tier-2: #9AA6BC;
    --tier-2-soft: #E9EEF7;
    --tier-3: #FFB547;
    --tier-3-soft: #FFF1CC;
}

/* ── The badge: the medal's picture in a ring that fills as you go ──────── */
.mdl-badge {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    flex-shrink: 0;
}
.mdl-badge svg { position: absolute; inset: 0; overflow: visible; }
.mdl-ring-bg { fill: none; stroke: var(--border); }
.mdl-ring { fill: none; stroke-linecap: round; transition: stroke-dasharray 0.6s var(--ease-out); }
.mdl-art {
    position: relative;
    display: block;
    width: var(--inner);
    height: var(--inner);
    border-radius: 50%;
    object-fit: cover;
    background: #1A2050;
}
.mdl-badge.is-earned { filter: drop-shadow(0 4px 12px rgba(255, 181, 71, 0.4)); }
.mdl-lock {
    position: absolute;
    right: 2%;
    bottom: 2%;
    display: grid;
    place-items: center;
    width: 30%;
    height: 30%;
    border: 2px solid var(--card-bg);
    border-radius: 50%;
    background: #2A3160;
    color: #fff;
}
.mdl-lock svg { position: static; width: 52%; height: 52%; }

/* ── The shelf ───────────────────────────────────────────────────────────── */
.pf-medals.pf-medals { display: block !important; }
.mdl-group + .mdl-group { margin-top: 18px; }
.mdl-group-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 2px 10px;
    font-size: 0.98rem;
    font-weight: 900;
    color: var(--text-main);
}
.mdl-group-head span + span { font-size: 0.8rem; color: var(--text-muted); font-weight: 800; }
.mdl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mdl-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 132px;
    padding: 12px 4px 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card-bg);
    font: inherit;
    color: var(--text-muted);
    cursor: pointer;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s, border-color 0.2s;
}
.mdl-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mdl-cell:active { transform: scale(0.96); }
.mdl-cell.is-earned {
    border-color: rgba(255, 181, 71, 0.55);
    background: linear-gradient(180deg, var(--gold-soft), var(--card-bg) 75%);
    color: var(--text-main);
}
.mdl-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.mdl-meta { font-size: 0.7rem; font-weight: 800; color: var(--text-muted); }
.mdl-cell.is-earned .mdl-meta { color: var(--gold-text); }

/* ── "Next medal" ────────────────────────────────────────────────────────── */
.mdl-next {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1.5px solid rgba(255, 181, 71, 0.5);
    border-radius: 20px;
    background: var(--card-bg);
    font: inherit;
    text-align: left;
    color: var(--text-main);
    cursor: pointer;
}
.mdl-next:hover { box-shadow: var(--shadow-md); }
.mdl-next-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.mdl-next-text strong { font-size: 1rem; font-weight: 900; color: var(--text-main); }
.mdl-next-kicker { color: var(--gold-text); }
.mdl-next-go { font-size: 1.4rem; color: var(--text-muted); }

/* The same goal on the home page's night sky. */
.mdl-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 440px;
    margin: 12px auto 0;
    padding: 10px 14px;
    border: 1px solid rgba(255, 214, 107, 0.45);
    border-radius: 18px;
    background: rgba(255, 194, 71, 0.12);
    font: inherit;
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.mdl-chip[hidden] { display: none; }
.mdl-chip:hover { background: rgba(255, 194, 71, 0.2); }
.mdl-chip-ico { display: inline-grid; animation: mdlPulse 1.4s ease-in-out 3; }
.mdl-chip .mdl-ring-bg { stroke: rgba(255, 255, 255, 0.18); }
.mdl-chip-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.78rem; color: rgba(236, 240, 255, 0.78); font-weight: 600; }
.mdl-chip-text strong { color: #fff; font-size: 0.86rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdl-chip-go { font-size: 1.2rem; font-weight: 900; color: var(--gold); }
@keyframes mdlPulse { 50% { transform: scale(1.15); } }

/* ── The medal card ──────────────────────────────────────────────────────── */
.mdl-dialog {
    box-sizing: border-box;
    width: min(460px, 100%);
    max-height: 88vh;
    margin: auto;
    padding: 18px 20px 22px;
    border: 1px solid var(--border);
    border-radius: 28px;
    background: var(--card-bg);
    color: var(--text-main);
    text-align: center;
    overflow-y: auto;
}
.mdl-dialog::backdrop { background: rgba(8, 10, 32, 0.5); }
.mdl-dialog[open] { animation: mdlRise 0.35s var(--ease-out); }
@media (max-width: 600px) {
    /* A sheet from the bottom edge. The browser's own dialog margins and max-width
       would otherwise push it past the right side of a phone. */
    .mdl-dialog { margin: auto 0 0; inset-inline: 0; width: 100vw; max-width: 100vw; border-radius: 28px 28px 0 0; }
}
@keyframes mdlRise { from { transform: translateY(40px); opacity: 0; } }
.mdl-close {
    float: right;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-main);
    font-size: 0.95rem;
    cursor: pointer;
}
.mdl-card-stage { position: relative; display: grid; place-items: center; width: 168px; height: 168px; margin: 6px auto 0; clear: both; }
/* Golden rays turning slowly behind a won medal; a band of light across it. */
.mdl-rays, .mdl-sunburst {
    position: absolute;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 224, 138, 0.55) 0deg 9deg, rgba(255, 224, 138, 0) 9deg 25.714deg);
    -webkit-mask: radial-gradient(circle, #000 18%, transparent 70%);
    mask: radial-gradient(circle, #000 18%, transparent 70%);
    animation: mdlRaysIn 0.7s var(--ease-out) both, mdlTurn 26s linear infinite;
}
.mdl-rays { inset: -36px; }
.mdl-rays::after, .mdl-sunburst::after {
    content: "";
    position: absolute;
    inset: 19%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 224, 138, 0.6), rgba(255, 194, 71, 0) 70%);
}
@keyframes mdlTurn { to { rotate: 360deg; } }
@keyframes mdlRaysIn { from { opacity: 0; scale: 0.6; } }
.mdl-shine {
    position: absolute;
    width: 100px; /* the picture inside a 128px badge */
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
}
.mdl-shine::after {
    content: "";
    position: absolute;
    top: -20%;
    left: 30%;
    width: 28%;
    height: 140%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    rotate: 20deg;
    translate: -100% 0;
    animation: mdlShine 3.2s ease-in-out 0.5s infinite;
}
@keyframes mdlShine {
    0% { translate: -260% 0; }
    28%, 100% { translate: 260% 0; }
}
.mdl-tier {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #1B1F3B;
}
.mdl-tier.tier-1 { background: var(--tier-1-soft); }
.mdl-tier.tier-2 { background: var(--tier-2-soft); }
.mdl-tier.tier-3 { background: var(--tier-3-soft); }
.mdl-card-title { margin: 8px 0 4px; font-size: 1.35rem; font-weight: 900; }
.mdl-card-desc { margin: 0 auto; max-width: 340px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.mdl-card-won { margin: 14px 0 0; font-weight: 800; color: var(--gold-text); }
.mdl-card-secret { margin: 14px 0 0; color: var(--text-muted); font-size: 0.9rem; }
.mdl-card-progress { margin-top: 16px; text-align: left; }
.mdl-card-progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 0.88rem; }
.mdl-card-progress-top span { color: var(--gold-text); font-weight: 800; }
.mdl-bar { height: 12px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.mdl-bar span { display: block; height: 100%; border-radius: 6px; transition: width 0.6s var(--ease-out); }
.mdl-bar.tier-1 span { background: linear-gradient(90deg, #E8A867, #B8692E); }
.mdl-bar.tier-2 span { background: linear-gradient(90deg, #E9EEF7, #9AA6BC); }
.mdl-bar.tier-3 span { background: linear-gradient(90deg, #FFE08A, #FFB547); }
.mdl-tips { margin-top: 18px; text-align: left; }
.mdl-tips h4 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 900; }
.mdl-tip {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px 8px 8px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card-bg);
    font: inherit;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}
.mdl-tip:hover { border-color: var(--primary-color); }
.mdl-tip img { width: 64px; height: 50px; border-radius: 12px; object-fit: cover; background: var(--surface-2); }
.mdl-tip > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.78rem; color: var(--text-muted); }
.mdl-tip strong { color: var(--text-main); font-size: 0.9rem; }
.mdl-tip-play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); font-size: 0.8rem; }

/* ── The celebration ─────────────────────────────────────────────────────── */
/* In order: the medal arrives as its shadow (0.15s), turns (0.9s), comes alive
   in colour at --reveal with sparks, a ring of light and ribbons, and the words
   follow. js/medals.js's REVEAL is the same moment. */
.mdl-celebrate {
    --reveal: 1.15s;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: linear-gradient(170deg, #080B1E, #1C1656 45%, #0B1026);
    color: #fff;
    overflow: hidden;
}
.mdl-celebrate::backdrop { background: transparent; }
.mdl-celebrate[open] { display: grid; place-items: center; animation: mdlFade 0.3s ease-out; }
@keyframes mdlFade { from { opacity: 0; } }
.mdl-confetti { position: absolute; inset: 0; pointer-events: none; }
.mdl-confetti i {
    position: absolute;
    top: -30px;
    left: var(--x);
    width: var(--w);
    height: calc(var(--w) * var(--h));
    border-radius: var(--round);
    background: var(--c);
    animation: mdlFall var(--d) cubic-bezier(0.45, 0, 0.8, 0.6) var(--delay) both;
}
.mdl-confetti i.is-star { clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@keyframes mdlFall {
    to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); }
}
.mdl-celebrate-body { position: relative; display: flex; flex-direction: column; align-items: center; padding: 24px; text-align: center; }
.mdl-kicker { margin: 0; color: var(--gold); font-weight: 900; font-size: 1rem; animation: mdlFade 0.4s ease-out both; }
.mdl-stage { position: relative; display: grid; place-items: center; width: 330px; height: 330px; max-width: 92vw; margin: -6px 0 14px; }
.mdl-stage > * { grid-area: 1 / 1; }
.mdl-sunburst { width: 330px; height: 330px; animation-delay: 0.15s, 0s; }
.mdl-wave {
    width: 182px;
    height: 182px;
    border: 4px solid #FFE08A;
    border-radius: 50%;
    opacity: 0;
    animation: mdlWave 0.8s ease-out var(--reveal) both;
}
@keyframes mdlWave {
    0% { opacity: 0; scale: 0.7; }
    1% { opacity: 0.8; scale: 0.7; }
    100% { opacity: 0; scale: 1.6; }
}

/* The medal: arrives, turns from its shadow to its colours, then floats. */
.mdl-medal {
    position: relative;
    display: grid;
    place-items: center;
    width: 172px;
    height: 172px;
    perspective: 700px;
    animation: mdlArrive 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both, mdlFloat 2.8s ease-in-out calc(var(--reveal) + 0.9s) infinite;
}
@keyframes mdlArrive { from { opacity: 0; scale: 0.35; } }
@keyframes mdlFloat { 50% { translate: 0 -6px; } }
.mdl-flip {
    position: relative;
    width: 172px;
    height: 172px;
    transform-style: preserve-3d;
    animation: mdlFlip 0.52s cubic-bezier(0.65, 0, 0.35, 1) 0.9s both;
}
@keyframes mdlFlip { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
.mdl-side {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.mdl-front { transform: rotateY(180deg); }
.mdl-front .mdl-badge.is-earned { filter: drop-shadow(0 0 22px rgba(255, 181, 71, 0.7)); }
.mdl-celebrate .mdl-ring-bg { fill: #12173A; }
.mdl-back .mdl-ring-bg { stroke: #3A4170; }
.mdl-front .mdl-shine { width: 134px; height: 134px; } /* inside a 172px badge */
.mdl-front .mdl-shine::after { animation-delay: calc(var(--reveal) + 0.3s); }

/* Two ribbon tails in the tier's colours, unfolding under the medal. */
.mdl-ribbons {
    position: absolute;
    bottom: -45px;
    display: flex;
    gap: 14px;
}
.mdl-ribbons i {
    width: 34px;
    height: 72px;
    background: linear-gradient(180deg, var(--rib-a), var(--rib-b));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 83%, 0 100%);
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.35);
    transform-origin: top center;
    animation: mdlRibbon 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--reveal) + 0.12s) both;
    --tilt: 8deg;
}
.mdl-ribbons i + i { --tilt: -8deg; }
@keyframes mdlRibbon {
    from { opacity: 0; translate: 0 -30px; rotate: calc(var(--tilt) * 1.75); }
    to { opacity: 1; translate: 0 0; rotate: var(--tilt); }
}

/* Sparks flying out of the medal as it comes alive. */
.mdl-sparks { position: relative; width: 0; height: 0; }
.mdl-sparks i {
    position: absolute;
    left: calc(var(--s) / -2);
    top: calc(var(--s) / -2);
    width: var(--s);
    height: var(--s);
    background: var(--c);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    opacity: 0;
    animation: mdlSpark 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) var(--reveal) both;
}
@keyframes mdlSpark {
    0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }
    8% { opacity: 1; }
    50% { transform: translate(calc(var(--tx) * 0.8), calc(var(--ty) * 0.8)) scale(1.3) rotate(80deg); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(120deg); }
}

/* The words, after the medal. */
.mdl-pop { margin-top: 16px; animation: mdlPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--reveal) + 0.35s) both; }
@keyframes mdlPop { from { opacity: 0; scale: 0.3; } }
.mdl-up { animation: mdlUp 0.5s var(--ease-out) calc(var(--reveal) + 0.35s + var(--t, 0s)) both; }
@keyframes mdlUp { from { opacity: 0; translate: 0 18px; } }
.mdl-celebrate-title { margin: 10px 0 0; font-size: 1.7rem; font-weight: 900; }
.mdl-celebrate-desc { margin: 6px 0 0; max-width: 360px; color: rgba(236, 240, 255, 0.86); line-height: 1.5; }
.mdl-actions { display: flex; gap: 10px; width: min(360px, 100%); margin-top: 28px; }
.mdl-actions button {
    flex: 1;
    min-height: 52px;
    border-radius: 999px;
    font: inherit;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
}
.mdl-btn-gold { border: 0; background: linear-gradient(135deg, #FFE08A, #FFC247 55%, #FFB547); color: #1B1F3B; }
.mdl-btn-glass { border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .mdl-confetti, .mdl-sparks, .mdl-wave, .mdl-shine { display: none; }
    .mdl-rays, .mdl-sunburst, .mdl-medal, .mdl-ribbons i, .mdl-kicker, .mdl-pop, .mdl-up,
    .mdl-chip-ico, .mdl-dialog[open], .mdl-celebrate[open] { animation: none; }
    .mdl-ribbons i { rotate: var(--tilt); }
    .mdl-flip { animation: none; transform: rotateY(180deg); }
}