/* xp5b (29-10-2026, point 23 of the site review): golden hours and secret milestones of Ape XP
   (templates/components/_milestones.html). Medals: a hexagon rim in the colour of their tier (25 bronze, 50 silver,
   100 gold) around a dark face with the glyph; a locked one is a dim slot. */
.ms-medal { --ms-rim: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)); --ms-face: #120a26; --ms-ink: rgba(255,255,255,0.3);
    --ms-glow: transparent; position: relative; flex: none; display: inline-grid; place-items: center; width: 52px; height: 58px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--ms-rim);
    filter: drop-shadow(0 4px 10px var(--ms-glow)); transition: transform 0.2s ease, filter 0.2s ease; }
.ms-medal-in { position: relative; display: grid; place-items: center; width: calc(100% - 6px); height: calc(100% - 6px); overflow: hidden;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--ms-face); color: var(--ms-ink); }
.ms-medal-in::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.32) 50%, transparent 65%);
    transform: translateX(-130%); transition: transform 0.7s ease; pointer-events: none; }
.ms-medal svg { position: relative; width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ms-medal--bronze { --ms-rim: linear-gradient(145deg, #ffd9ae, #c8743a 52%, #6f3311); --ms-face: radial-gradient(circle at 50% 30%, #6a3415, #2a1206 75%);
    --ms-ink: #ffd3a3; --ms-glow: rgba(200, 116, 58, 0.35); }
.ms-medal--silver { --ms-rim: linear-gradient(145deg, #ffffff, #b9c5d6 50%, #5f6e86); --ms-face: radial-gradient(circle at 50% 30%, #44506a, #151b28 75%);
    --ms-ink: #f1f5fb; --ms-glow: rgba(185, 197, 214, 0.32); }
.ms-medal--gold { --ms-rim: linear-gradient(145deg, #fff4c6, #f6b92c 50%, #9c5c06); --ms-face: radial-gradient(circle at 50% 30%, #6b4306, #241502 75%);
    --ms-ink: #ffe68c; --ms-glow: rgba(246, 185, 44, 0.45); }
.ms-medal:not(.is-locked) { cursor: help; }
.ms-medal:not(.is-locked):hover, .ms-medal:not(.is-locked):focus-visible { transform: translateY(-2px) scale(1.06); outline: none; }
.ms-medal:not(.is-locked):hover .ms-medal-in::after, .ms-medal:not(.is-locked):focus-visible .ms-medal-in::after { transform: translateX(130%); }
.ms-medal.is-locked .ms-medal-in { background: repeating-linear-gradient(135deg, #140c2a 0 6px, #110922 6px 12px); }
.ms-medal--sm { width: 34px; height: 38px; }
.ms-medal--sm .ms-medal-in { width: calc(100% - 4px); height: calc(100% - 4px); }
.ms-medal--sm svg { stroke-width: 2.2; }

/* the short line: /profile (inside the Ape XP card) and /ape/<name> (inside ADN Ape) */
.ms-row { display: grid; gap: 10px; margin-top: 16px; padding: 14px 16px; border-radius: 16px;
    background: linear-gradient(120deg, rgba(246,185,44,0.08), rgba(167,139,250,0.06) 60%, transparent), rgba(0,0,0,0.22); border: 1px solid var(--line); }
.ms-row-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ms-row-k { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #fde68a; }
.ms-row-k::before { content: '🗝️'; margin-right: 6px; letter-spacing: 0; }
.ms-row-head b { font-size: 0.92rem; color: #fff; }
.ms-row-head b span { color: #fde68a; }
.ms-row-head a { margin-left: auto; font-size: 0.85rem; font-weight: 700; color: var(--cyan, #22d3ee); text-decoration: none; }
.ms-row-head a:hover, .ms-row-head a:focus-visible { text-decoration: underline; }
.ms-row-medals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ms-row-more { display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.ms-row-more b { font-size: 0.85rem; font-weight: 800; color: var(--muted); }
.ms-row-note { margin: 0; font-size: 0.85rem; color: var(--muted); }

/* /xp: the block of the two extras */
.gh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; align-items: stretch; }
.gh-card, .ms-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.32); }
.gh-card { background: radial-gradient(420px 240px at 0% 0%, rgba(251,191,36,0.22), transparent 70%), linear-gradient(160deg, #241205, #120720 70%);
    border: 1px solid rgba(251,191,36,0.38); }
.ms-card { background: radial-gradient(480px 260px at 100% 0%, rgba(167,139,250,0.18), transparent 70%), linear-gradient(160deg, #170b34, #0c0520);
    border: 1px solid rgba(167,139,250,0.32); }
.gh-card::before, .ms-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.gh-card::before { background: linear-gradient(90deg, #fde68a, #f59e0b, #fde68a); }
.ms-card::before { background: linear-gradient(90deg, #c8743a, #e2e8f0, #f6b92c); }
.gh-card-top { display: flex; align-items: center; gap: 14px; }
.gh-card-top h3 { margin: 2px 0 0; font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.gh-k { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #fde68a; }
.ms-card .gh-k { color: #c4b5fd; }
.gh-card > p, .ms-card > p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: #cbd5e1; }
.gh-card > p b, .ms-card > p b { color: #fff; }

.gh-sun { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; }
.gh-sun i { position: absolute; inset: 0; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(253,230,138,0.85) 0 10deg, transparent 10deg 30deg);
    mask: radial-gradient(circle, transparent 52%, #000 53%, #000 70%, transparent 71%); -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%, #000 70%, transparent 71%);
    animation: gh-spin 18s linear infinite; }
.gh-sun b { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; font-weight: 900; color: #2a1600;
    background: radial-gradient(circle at 35% 30%, #fff7cc, #fbbf24 55%, #d97706); box-shadow: 0 0 22px rgba(251,191,36,0.65); }
@keyframes gh-spin { to { transform: rotate(360deg); } }
.ms-card-key { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; font-size: 1.9rem;
    background: radial-gradient(circle at 50% 35%, rgba(196,181,253,0.28), rgba(196,181,253,0.06) 70%); border: 1px solid rgba(196,181,253,0.35); }

.gh-now { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'tag tag go' 'title title go' 'end end go'; gap: 4px 12px; align-items: center;
    padding: 14px 16px; border-radius: 16px; color: #fff; text-decoration: none; background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.5);
    box-shadow: 0 0 0 0 rgba(251,191,36,0.4); animation: gh-pulse 2.6s ease-in-out infinite; transition: background 0.15s; }
.gh-now:hover, .gh-now:focus-visible { background: rgba(251,191,36,0.2); }
.gh-now-tag { grid-area: tag; display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #fde68a; }
.gh-now-tag i { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 10px #fbbf24; }
.gh-now-title { grid-area: title; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 1rem; }
.gh-now-end { grid-area: end; font-size: 0.85rem; color: #fde68a; }
.gh-now-go { grid-area: go; padding: 8px 14px; border-radius: 10px; font-weight: 900; color: #2a1600; background: linear-gradient(135deg, #fff1b8, #fbbf24 45%, #f59e0b); }
@keyframes gh-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.35); } 50% { box-shadow: 0 0 0 8px rgba(251,191,36,0); } }
.gh-next { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: start; padding: 14px 16px; border-radius: 16px;
    background: rgba(0,0,0,0.22); border: 1px solid var(--line); font-size: 0.88rem; line-height: 1.5; color: #cbd5e1; }
.gh-next b { color: #fff; }
.gh-next a { grid-column: 2; font-weight: 800; color: #fde68a; text-decoration: none; }
.gh-next a:hover, .gh-next a:focus-visible { text-decoration: underline; }
.gh-mine { margin: auto 0 0; font-size: 0.85rem; color: var(--muted); }
.gh-what { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.gh-what li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 12px; border-radius: 12px; font-size: 0.88rem; font-weight: 700;
    background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.22); }
.gh-what li span { flex: none; font-size: 1rem; }
.gh-what li b { margin-left: auto; padding: 1px 7px; border-radius: 99px; font-size: 0.75rem; font-weight: 900; color: #2a1600;
    background: linear-gradient(135deg, #fff1b8, #fbbf24 45%, #f59e0b); }
.gh-card > p.gh-not { font-size: 0.84rem; color: var(--muted); }
.gh-mine b { color: #fde68a; }

.ms-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ms-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding: 14px 16px; border-radius: 16px;
    background: rgba(0,0,0,0.22); border: 1px dashed rgba(196,181,253,0.28); }
.ms-hidden-medals { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-hidden > span { font-size: 0.86rem; color: var(--muted); }
.ms-hidden > span b { color: #c4b5fd; }
.ms-hidden.is-all { flex-direction: column; justify-content: center; gap: 16px; margin-top: 0; flex: 1; padding: 22px 16px; text-align: center; }
.ms-hidden.is-all .ms-hidden-medals { display: grid; grid-template-columns: repeat(5, 52px); gap: 10px 12px; justify-content: center; }
.ms-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 14px 8px 12px; border-radius: 16px; text-align: center;
    background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.ms-tile b { font-size: 0.86rem; font-weight: 800; line-height: 1.2; }
.ms-tile small { font-size: 0.75rem; line-height: 1.35; color: #cbd5e1; }
.ms-tile em { margin-top: auto; font-size: 0.75rem; font-style: normal; font-weight: 700; color: var(--muted); }
.ms-tile--bronze { border-color: rgba(200,116,58,0.45); background: linear-gradient(180deg, rgba(200,116,58,0.12), rgba(255,255,255,0.02)); }
.ms-tile--silver { border-color: rgba(185,197,214,0.4); background: linear-gradient(180deg, rgba(185,197,214,0.1), rgba(255,255,255,0.02)); }
.ms-tile--gold { border-color: rgba(246,185,44,0.5); background: linear-gradient(180deg, rgba(246,185,44,0.14), rgba(255,255,255,0.02)); }
.ms-tile--bronze em { color: #ffd3a3; }
.ms-tile--silver em { color: #e2e8f0; }
.ms-tile--gold em { color: #ffe68c; }
.ms-tile.is-locked b { color: rgba(255,255,255,0.55); }
.ms-tile.is-locked small { color: var(--muted); }
.ms-login { justify-self: start; }

@media (max-width: 1100px) {
    .ms-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .gh-grid { grid-template-columns: minmax(0, 1fr); }
    .ms-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .gh-card, .ms-card { padding: 18px 16px; border-radius: 20px; }
    .gh-card-top h3 { font-size: 1.08rem; }
    .gh-sun, .ms-card-key { width: 54px; height: 54px; }
    .gh-sun b { width: 34px; height: 34px; font-size: 0.9rem; }
    .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .gh-what li { padding: 8px 10px; font-size: 0.82rem; }
    .ms-tile { padding: 12px 6px 10px; }
    .ms-row { padding: 12px; }
    .ms-row-head a { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 370px) {
    .gh-what { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .gh-sun i, .gh-now { animation: none; }
    .ms-medal, .ms-medal-in::after { transition: none; }
}

/* the «✨ ×2» of a doubled move and of the rules that double (/xp, /profile) */
.xp-gold-chip { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 99px; vertical-align: 1px; cursor: help;
    font-size: 0.75rem; font-weight: 900; font-style: normal; letter-spacing: 0.02em; white-space: nowrap; color: #2a1600;
    background: linear-gradient(135deg, #fff1b8, #fbbf24 45%, #f59e0b); box-shadow: 0 0 10px rgba(251,191,36,0.35); }
.xp-earn-card small .xp-gold-chip { margin-left: 8px; }
.xp-gold-chip .gold-spark { width: 11px; height: 11px; margin-right: 3px; fill: currentColor; }