/* AivanCrate — Годовая статистика AivanLevels в стиле V2 */
.ylx-hud { padding: .8rem .9rem; margin-bottom: 1rem; }
.ylx-hud-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ylx-search { flex: 1 1 14rem; margin-left: auto; }
.ylx-years { display: flex; gap: .35rem; margin-top: .7rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; }
.ylx-year {
    flex: none; padding: .35rem .8rem; border-radius: .7rem; text-decoration: none; color: var(--av2-ink) !important;
    font-family: "Oxygene1", "PusabGD", sans-serif; font-size: .95rem; letter-spacing: .03em;
    background: rgba(2, 3, 20, .7); border: 1px solid var(--av2-line); transition: transform .15s, border-color .15s;
}
.ylx-year:hover { transform: translateY(-2px); border-color: var(--av2-sky); }
.ylx-year.is-on { background: linear-gradient(180deg, var(--av2-blue-2), var(--av2-blue)); box-shadow: 0 0 0 2px #000; text-shadow: 0 2px 0 #000; }

.ylx-hardest { text-decoration: none; color: inherit !important; border-color: rgba(255, 216, 74, .45) !important; }
.ylx-hardest b { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.05rem !important; }
.ylx-hardest b img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 0 #000); }
.ylx-hardest:hover { transform: translateY(-2px); }

/* Гистограмма по месяцам */
.ylx-chart { padding: .8rem .9rem .6rem; margin-bottom: 1.2rem; }
.ylx-chart-head { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ylx-chart-tip { font-size: .8rem; font-weight: 700; color: #fff; }
.ylx-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .45rem; height: 150px; align-items: end; }
.ylx-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .2rem; text-decoration: none; }
.ylx-bar-col {
    display: flex; flex-direction: column-reverse; width: 100%; max-width: 3rem; height: max(var(--h), 4px); border-radius: .45rem .45rem .2rem .2rem; overflow: hidden;
    box-shadow: 0 0 0 1px #000; transform-origin: bottom; animation: ylxGrow .7s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i) * 40ms);
}
.ylx-bar-col i { display: block; min-height: 2px; background: linear-gradient(180deg, var(--av2-blue-2), var(--av2-blue)); }
.ylx-bar-col i.is-layout { background: repeating-linear-gradient(45deg, #5b6bff 0 5px, #2a35b8 5px 10px); }
.ylx-bar.is-zero .ylx-bar-col { background: rgba(143, 160, 255, .12); box-shadow: none; }
.ylx-bar.is-zero .ylx-bar-col i { display: none; }
@keyframes ylxGrow { from { transform: scaleY(0); } }
.ylx-bar b { font-size: .8rem; font-weight: 900; color: #fff; min-height: 1em; }
.ylx-bar small { font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--av2-muted); }
.ylx-bar:hover .ylx-bar-col { filter: brightness(1.35); box-shadow: 0 0 0 1px #000, 0 0 18px rgba(59, 73, 255, .7); }
.ylx-bar:hover small { color: #fff; }

/* Месяцы и карточки */
.ylx-month { margin-bottom: 1.4rem; scroll-margin-top: 5rem; border-radius: 1rem; }
.ylx-month.is-flash { animation: ylxFlash 1.2s ease; }
@keyframes ylxFlash { 30% { box-shadow: 0 0 0 3px rgba(143, 160, 255, .7); } }
.ylx-month-title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem; font-size: 1.3rem; }
.ylx-month-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--av2-line), transparent); }
.ylx-month-title em { font-style: normal; font-size: .75rem; font-weight: 900; padding: .1rem .5rem; border-radius: 999px; background: var(--av2-blue); box-shadow: 0 0 0 1px #000; color: #fff; }
.ylx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: .8rem; }
.ylx-card {
    display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden; background: var(--av2-card); border: 1px solid var(--av2-line);
    box-shadow: 0 0 0 1px #000; transition: transform .2s ease, border-color .2s, box-shadow .2s; animation: av2Rise .35s ease both; animation-delay: var(--d, 0ms);
}
.ylx-card:hover { transform: translateY(-4px); border-color: rgba(143, 160, 255, .6); box-shadow: 0 0 0 1px #000, 0 18px 36px -18px rgba(59, 73, 255, .95); }
.ylx-card[hidden], .ylx-month[hidden] { display: none; }
.ylx-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.ylx-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ylx-thumb .is-bg { object-fit: cover; filter: blur(14px) brightness(.5); transform: scale(1.15); }
.ylx-thumb .is-img { object-fit: contain; transition: transform .35s; }
.ylx-card:hover .ylx-thumb .is-img { transform: scale(1.05); }
.ylx-thumb .ylx-diff { inset: .4rem auto auto .4rem; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 6px rgba(0, 0, 0, .8)); }
.ylx-date { position: absolute; right: .4rem; bottom: .4rem; padding: .1rem .45rem; border-radius: .4rem; font-size: .74rem; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .75); }
.ylx-layout-tag { position: absolute; left: .4rem; bottom: .4rem; padding: .1rem .45rem; border-radius: .4rem; font-size: .66rem; font-weight: 900; letter-spacing: .08em; color: #dbe2ff; background: rgba(29, 39, 201, .85); box-shadow: 0 0 0 1px #000; }
.ylx-card.is-layout .ylx-thumb img { filter: grayscale(.4) sepia(.3) hue-rotate(180deg) saturate(2.2) brightness(.8); }
.ylx-card.is-layout .ylx-thumb .is-bg { filter: blur(14px) brightness(.4) hue-rotate(180deg); }
.ylx-body { display: flex; flex-direction: column; gap: .3rem; padding: .6rem .7rem .7rem; flex: 1; }
.ylx-body h3 { margin: 0; font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.ylx-body h3 a { color: #fff !important; text-decoration: none; }
.ylx-body p { margin: 0; font-size: .82rem; color: var(--av2-muted); }
.ylx-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .3rem; }
.ylx-chips .av2-chip, .ylx-chips .av2-copy { height: 1.6rem; font-size: .72rem; }

@media (max-width: 575.98px) {
    .ylx-bars { gap: .2rem; height: 120px; }
    .ylx-bar small { font-size: .55rem; }
    .ylx-search { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ylx-bar-col, .ylx-card { animation: none; } }