/*
 * Достижения: значки, раздел, витрина профиля, окно праздника и тосты.
 * Подключается в общей оболочке — значки рисуются на нескольких
 * страницах, а праздник может прийти на любой.
 *
 * Селекторы кнопок и полей двойные (.cwa .cwa-pin): в app.css есть
 * глобальные правила с !important для кнопок и полей, одиночный класс им
 * проигрывает.
 */

:root {
    --cwa-surface: #ffffff;
    --cwa-surface-2: #eef2f8;
    --cwa-line: #dde4ee;
    --cwa-ink: #0f172a;
    --cwa-ink-2: #475569;
    --cwa-ink-3: #7a889e;
    --cwa-accent: #2563eb;
    --cwa-good: #1f9d5c;
    --cwa-good-bg: #e3f6ec;
    --cwa-bad: #d9482a;
    --cwa-bad-bg: #fdebe6;
    --cwa-rare: #2f7fd6;
    --cwa-very: #7c4dff;
    --cwa-legend: #b86e00;
    --cwa-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 32px -18px rgba(15, 23, 42, .28);
}

[data-theme="dark"] {
    --cwa-surface: #131b2e;
    --cwa-surface-2: #1a2440;
    --cwa-line: #26324e;
    --cwa-ink: #e7ecf6;
    --cwa-ink-2: #a3b0c6;
    --cwa-ink-3: #74829a;
    --cwa-accent: #3b82f6;
    --cwa-good: #3fd183;
    --cwa-good-bg: rgba(63, 209, 131, .12);
    --cwa-bad: #ff8264;
    --cwa-bad-bg: rgba(255, 130, 100, .12);
    --cwa-rare: #5fb0ff;
    --cwa-very: #a583ff;
    --cwa-legend: #ffc24d;
    --cwa-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 36px -20px rgba(0, 0, 0, .7);
}

/* ------------------------------------------------------------- значок */

/*
 * Значок — плоская клавиша: спокойная заливка в тон металла, тонкая рамка
 * и нижняя грань в 2px. Иконка — половина значка, в глубоком тоне металла.
 *
 * Раньше клавиша была глянцевой: тяжёлый градиент, тень, толстый низ. В
 * крупном макете это смотрелось, а в строке ленты и в ряду значков
 * превращалось в «конфетку» и читалось как эмодзи.
 *
 * Разметка прежняя (.cwa-key > .cwa-key__top > svg) — её строят и
 * шаблоны, и cw-achievements.js; обёртка __top теперь прозрачна.
 */
.cwa-key {
    --c: #97a3b6;     /* металл: рамка и грань */
    --c2: #4b5870;    /* глубокий тон: иконка */
    --tint: #eff2f7;  /* заливка */
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--size, 56px);
    height: var(--size, 56px);
    box-sizing: border-box;
    border-radius: 28%;
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
    background: var(--tint);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c) 28%, transparent), 0 1px 2px rgba(15, 23, 42, .06);
    color: var(--c2);
}

.cwa-key__top { display: contents; }

.cwa-key svg {
    width: calc(var(--size, 56px) * .48);
    height: calc(var(--size, 56px) * .48);
}

.cwa-key--bronze { --c: #c27a3d; --c2: #8a4f1f; --tint: #fbefe4; }
.cwa-key--silver { --c: #97a3b6; --c2: #4b5870; --tint: #eff2f7; }
.cwa-key--gold   { --c: #e6a700; --c3: #ffd166; --c2: #8f6400; --tint: #fff4d6; }
.cwa-key--plat   { --c: #22b5cb; --c3: #8be6f2; --c2: #0e6e7c; --tint: #e0f6f9; }
.cwa-key--epic   { --c: #8b5cf6; --c3: #ec4899; --c2: #6d3fe0; --tint: #f1eaff; }
.cwa-key--sky    { --c: #3b82f6; --c2: #1d4ed8; --tint: #e7f0ff; }
.cwa-key--coral  { --c: #f2613f; --c2: #b63a1e; --tint: #ffede7; }

/* Старшие ступени — тонкое кольцо градиентом: заметно издалека, но без
   глянца. Заливка обязана быть сплошной — иначе градиент просвечивает. */
.cwa-key--gold,
.cwa-key--plat,
.cwa-key--epic {
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--tint), var(--tint)) padding-box,
        linear-gradient(135deg, var(--c), var(--c3)) border-box;
    box-shadow:
        inset 0 -2px 0 color-mix(in srgb, var(--c) 28%, transparent),
        0 6px 16px -8px color-mix(in srgb, var(--c) 70%, transparent);
}

.cwa-key--off {
    --c: var(--cwa-line);
    --c2: var(--cwa-ink-3);
    --tint: transparent;
    border: 1.5px dashed var(--cwa-line);
    box-shadow: none;
}

/* Тёмная тема: заливка — металл поверх фона, сплошной смесью; иконка
   светлее, чтобы читалась на тёмном. */
[data-theme="dark"] .cwa-key:not(.cwa-key--off) {
    --tint: color-mix(in srgb, var(--c) 16%, var(--cwa-surface));
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c) 35%, transparent);
}
[data-theme="dark"] .cwa-key--bronze { --c2: #e8a66c; }
[data-theme="dark"] .cwa-key--silver,
[data-theme="dark"] .cwa-key:not([class*="cwa-key--"]) { --c2: #c3ccd9; }
[data-theme="dark"] .cwa-key--gold { --c2: #ffd166; }
[data-theme="dark"] .cwa-key--plat { --c2: #7fe0ee; }
[data-theme="dark"] .cwa-key--epic { --c2: #c4a8ff; }
[data-theme="dark"] .cwa-key--sky { --c2: #8ab8ff; }
[data-theme="dark"] .cwa-key--coral { --c2: #ff9a80; }

/* ------------------------------------------------------------- раздел */

.cwa {
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: 12px;
    padding-block: 24px 56px;
    display: grid;
    gap: 28px;
    color: var(--cwa-ink);
}

.cwa-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 40px;
}

.cwa-head__text { display: grid; gap: 6px; max-width: 60ch; }
.cwa-head h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.cwa-head p { margin: 0; color: var(--cwa-ink-2); }

.cwa-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.cwa-stats div { display: grid; gap: 2px; }
.cwa-stats dt { order: 2; font-size: 12.5px; color: var(--cwa-ink-3); }
.cwa-stats dd { order: 1; margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.cwa-flash {
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--cwa-good-bg);
    color: var(--cwa-good);
    font-weight: 600;
}
.cwa-flash.is-bad { background: var(--cwa-bad-bg); color: var(--cwa-bad); }

.cwa-showcase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--cwa-surface-2);
}
.cwa-showcase__label { display: grid; gap: 2px; min-width: 220px; flex: 1 1 260px; }
.cwa-showcase__label b { font-size: 15px; }
.cwa-showcase__label span { font-size: 13.5px; color: var(--cwa-ink-3); }
.cwa-showcase__keys { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.cwa-showcase__item { display: flex; align-items: center; gap: 10px; }
.cwa-showcase__item span { display: grid; font-size: 14px; font-weight: 600; line-height: 1.3; }
.cwa-showcase__item em { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--cwa-ink-3); }

.cwa .cwa-btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--cwa-line);
    background: var(--cwa-surface);
    color: var(--cwa-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.cwa .cwa-btn:hover { border-color: var(--cwa-ink-3); }

.cwa-group { display: grid; gap: 14px; }
.cwa-group__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cwa-group__title h2 { margin: 0; font-size: 18px; font-weight: 700; }
.cwa-group__title span { font-size: 13.5px; color: var(--cwa-ink-3); }

.cwa-near { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cwa-near__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--cwa-line);
    border-radius: 14px;
    background: var(--cwa-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s;
}
.cwa-near__item:hover { border-color: var(--cwa-ink-3); }
.cwa-near__text { display: grid; gap: 2px; min-width: 0; }
.cwa-near__text b { font-size: 14.5px; }
.cwa-near__text span { font-size: 13px; color: var(--cwa-ink-3); }
.cwa-near__bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--cwa-surface-2); overflow: hidden; }
.cwa-near__bar i { display: block; height: 100%; border-radius: inherit; background: var(--cwa-good); }

.cwa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

.cwa-card {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 16px;
    border: 1px solid var(--cwa-line);
    border-radius: 16px;
    background: var(--cwa-surface);
    scroll-margin-top: 90px;
}
.cwa-card:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cwa-accent) 35%, transparent); }
.cwa-card.is-off { background: transparent; }

.cwa-card__top { display: flex; align-items: center; gap: 14px; }
.cwa-card__id { display: grid; gap: 2px; min-width: 0; }
.cwa-card__id h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.cwa-card__id p { margin: 0; font-size: 13px; color: var(--cwa-ink-3); }
.cwa-card__goal { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cwa-ink-2); }
.cwa-card__note { margin: 4px 0 0; font-size: 13px; color: var(--cwa-ink-3); }

.cwa-progress { display: grid; gap: 6px; }
.cwa-bar { height: 7px; border-radius: 99px; background: var(--cwa-surface-2); overflow: hidden; }
.cwa-bar i { display: block; height: 100%; border-radius: inherit; background: var(--cwa-good); }
.cwa-bar__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 13px; color: var(--cwa-ink-3); font-variant-numeric: tabular-nums; }
.cwa-bar__label b { color: var(--cwa-ink-2); font-weight: 600; }

.cwa-pips { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cwa-pips li { flex: 1; display: grid; gap: 4px; justify-items: center; cursor: help; }
.cwa-pips i { width: 100%; height: 6px; border-radius: 3px; background: var(--cwa-surface-2); }
.cwa-pips span { font-size: 11px; color: var(--cwa-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cwa-pips .is-bronze i { background: #c27a3d; }
.cwa-pips .is-silver i { background: #97a3b6; }
.cwa-pips .is-gold i { background: #e6a700; }
.cwa-pips .is-plat i { background: #22b5cb; }
.cwa-pips .is-epic i { background: linear-gradient(90deg, #8b5cf6, #ec4899); }

.cwa-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.cwa-card__foot form { margin: 0; }

.cwa-rare { font-size: 12.5px; font-weight: 600; color: var(--cwa-ink-3); }
.cwa-rare--rare { color: var(--cwa-rare); }
.cwa-rare--very { color: var(--cwa-very); }
.cwa-rare--legend { color: var(--cwa-legend); }

.cwa .cwa-pin {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--cwa-line);
    background: var(--cwa-surface);
    color: var(--cwa-ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.cwa .cwa-pin:hover { border-color: var(--cwa-ink-3); color: var(--cwa-ink); }
.cwa .cwa-pin.is-on { background: var(--cwa-good-bg); border-color: transparent; color: var(--cwa-good); }

/* ----------------------------------------------------- профиль */

.cwa-shelf { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-bottom: 18px; }
.cwa-shelf__item { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.cwa-shelf__item .cwa-key { grid-row: span 2; }
.cwa-shelf__item b { font-size: 15px; align-self: end; }
.cwa-shelf__item span { font-size: 12.5px; color: var(--cwa-ink-3); align-self: start; }

.cwa-mini { display: flex; flex-wrap: wrap; gap: 10px; }

.cwa-link { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--cwa-accent); text-decoration: none; }
.cwa-link:hover { text-decoration: underline; }

/* --------------------------------------------------- окно праздника */

.cwa-pop {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: grid;
    place-items: center;
    padding: 16px;
    font-family: inherit;
}

.cwa-pop__back {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: cwa-fade .2s ease both;
}

.cwa-pop__card {
    position: relative;
    width: min(380px, 100%);
    box-sizing: border-box;
    padding: 28px 24px 22px;
    border-radius: 22px;
    background: var(--cwa-surface);
    color: var(--cwa-ink);
    box-shadow: var(--cwa-shadow), 0 0 0 1px var(--cwa-line);
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
    animation: cwa-up .28s cubic-bezier(.2, .9, .3, 1.15) both;
}

.cwa-pop__card .cwa-key { margin: 6px 0 8px; animation: cwa-rise .6s .08s cubic-bezier(.2, .9, .3, 1.3) both; }
.cwa-pop__kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cwa-very); }
.cwa-pop__title { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.25; }
.cwa-pop__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--cwa-ink-2); }
.cwa-pop__rare { margin: 0; font-size: 13px; font-weight: 600; color: var(--cwa-ink-3); }
.cwa-pop__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }

.cwa-pop .cwa-pop__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    border: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: var(--cwa-surface-2);
    color: var(--cwa-ink);
}
.cwa-pop .cwa-pop__btn--main { background: var(--cwa-accent); color: #fff; }
.cwa-pop .cwa-pop__btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--cwa-accent) 45%, transparent); outline-offset: 2px; }

@keyframes cwa-fade { from { opacity: 0; } }
@keyframes cwa-up { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes cwa-rise { from { transform: translateY(12px) scale(.8); } }

/* ------------------------------------------------------------ тосты */

.cwa-toasts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2147481000;
    display: grid;
    gap: 8px;
    width: min(340px, calc(100vw - 32px));
    pointer-events: none;
}

.cwa-toast {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--cwa-surface);
    color: var(--cwa-ink);
    text-decoration: none;
    box-shadow: var(--cwa-shadow), 0 0 0 1px var(--cwa-line);
    pointer-events: auto;
    animation: cwa-up .25s ease both;
    transition: opacity .3s, transform .3s;
}
.cwa-toast.is-gone { opacity: 0; transform: translateY(8px); }
.cwa-toast b { display: block; font-size: 14px; line-height: 1.3; }
.cwa-toast span { font-size: 12.5px; color: var(--cwa-ink-3); }

/* ------------------------------------------------------- значок звания */

/*
 * Значки званий — SVG-символы из achievements/_sprite вместо эмодзи, см.
 * LevelBadgeService::glyph. Селекторы с именем тега: app.css подключается
 * позже этого файла и при равном весе перебил бы размеры.
 */
span.cw-lvlname em {
    display: inline-grid;
    place-items: center;
    align-self: center;
    width: 16px;
    height: 16px;
}
span.cw-lvlname em svg { width: 16px; height: 16px; }

span.pl-bar__badge em {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--cw-sun-edge, #d98f00);
}
span.pl-bar__badge em svg { width: 24px; height: 24px; }

div.cw-levelup__ico { display: grid; place-items: center; color: var(--cw-sun-edge, #d98f00); }
div.cw-levelup__ico svg { width: 44px; height: 44px; }

span.pl-bar__badge[data-cw-tone="mint"] em,
div.cw-levelup__ico[data-cw-tone="mint"] { color: var(--cw-mint, #2fbf71); }
span.pl-bar__badge[data-cw-tone="sky"] em,
div.cw-levelup__ico[data-cw-tone="sky"] { color: var(--cw-sky, #3b9eff); }
span.pl-bar__badge[data-cw-tone="grape"] em,
div.cw-levelup__ico[data-cw-tone="grape"] { color: var(--cw-grape, #8b5cf6); }
span.pl-bar__badge[data-cw-tone="coral"] em,
div.cw-levelup__ico[data-cw-tone="coral"] { color: var(--cw-coral, #ff6b4a); }

@media (max-width: 640px) {
    .cwa-head h1 { font-size: 26px; }
    .cwa-grid, .cwa-near { grid-template-columns: 1fr; }
    .cwa-pips span { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .cwa-pop__back,
    .cwa-pop__card,
    .cwa-pop__card .cwa-key,
    .cwa-toast { animation: none; }
}