/* «Итоги года» — плашка и полноэкранная история. Общий файл для телефона и компьютера. */

/* ── Плашка ── */
.wr-banner{position:relative;overflow:hidden;border-radius:18px;padding:16px 18px;color:#fff;cursor:pointer;display:flex;align-items:center;gap:14px;
  background:radial-gradient(120% 140% at 0% 0%,#3b82f6 0%,#1e3a8a 50%,#0b1023 100%);box-shadow:0 8px 24px rgba(30,58,138,.35);
  animation:wrIn .5s cubic-bezier(.2,.8,.2,1) both;transition:transform .18s ease,box-shadow .18s ease;-webkit-tap-highlight-color:transparent}
.wr-banner:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(30,58,138,.45)}
.wr-banner:active{transform:scale(.99)}
.wr-banner .wr-snow{opacity:.8}
.wr-banner-ic{font-size:32px;position:relative;flex-shrink:0;animation:wrSpin 8s linear infinite}
.wr-banner-t{position:relative;flex:1;min-width:0}
.wr-banner-t b{display:block;font-size:17px;font-weight:800;line-height:1.2}
.wr-banner-t span{display:block;font-size:13px;opacity:.82;margin-top:2px}
.wr-banner-go{position:relative;background:#fff;color:#1e3a8a;font-weight:800;font-size:13px;padding:9px 14px;border-radius:12px;white-space:nowrap;flex-shrink:0}
.wr-banner-rings{position:relative;display:flex;gap:6px;flex-shrink:0}
.wr-banner-rings i{width:40px;height:40px;border-radius:50%;border:2.5px solid #93c5fd;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:19px;background:rgba(255,255,255,.1)}
.wr-banner.seen{background:radial-gradient(120% 140% at 0% 0%,#334155 0%,#1e293b 60%,#0f172a 100%);box-shadow:0 4px 14px rgba(15,23,42,.25)}
.wr-banner.seen .wr-banner-ic{animation:none}
@keyframes wrSpin{to{transform:rotate(360deg)}}
@keyframes wrIn{from{opacity:0;transform:translateY(8px)}}

/* ── Снег ── */
.wr-snow{position:absolute;inset:-40px 0 0;pointer-events:none;
  background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 120px 80px,#fff,transparent),radial-gradient(2px 2px at 260px 140px,#fff,transparent),radial-gradient(1.5px 1.5px at 60px 220px,#fff,transparent),radial-gradient(2.5px 2.5px at 300px 300px,#fff,transparent),radial-gradient(1.5px 1.5px at 180px 360px,#fff,transparent),radial-gradient(2px 2px at 40px 470px,#fff,transparent),radial-gradient(1.5px 1.5px at 230px 560px,#fff,transparent),radial-gradient(2px 2px at 110px 650px,#fff,transparent);
  background-size:340px 700px;animation:wrSnow 14s linear infinite;opacity:.65}
.wr-snow.b{background-size:260px 520px;animation-duration:22s;opacity:.4;filter:blur(.5px)}
@keyframes wrSnow{from{background-position:0 0}to{background-position:40px 700px}}

/* ── Окно истории ── */
.wr{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:wrFade .25s ease both;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
@keyframes wrFade{from{opacity:0}}
.wr.out{animation:wrFadeOut .2s ease both}
@keyframes wrFadeOut{to{opacity:0}}
.wr-stage{position:relative;width:100%;height:100%;overflow:hidden;background:#0b1023;color:#fff;touch-action:manipulation}
@media (min-width:640px){.wr-stage{width:min(430px,calc((100vh - 40px)*.5));height:min(930px,calc(100vh - 40px));border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.6)}}
.wr-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer;display:none;transition:background .15s}
.wr-nav:hover{background:rgba(255,255,255,.24)}
@media (min-width:640px){.wr-nav{display:block}}
.wr-nav.prev{left:calc(50% - min(215px,(100vh - 40px)*.25) - 72px)}
.wr-nav.next{right:calc(50% - min(215px,(100vh - 40px)*.25) - 72px)}
.wr-bars{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;display:flex;gap:3px;z-index:5}
.wr-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.wr-bars i b{display:block;height:100%;width:0;background:#fff}
.wr-bars i.done b{width:100%}
.wr-bars i.cur b{animation:wrBar var(--dur,8s) linear both}
.wr.paused .wr-bars i.cur b{animation-play-state:paused}
@keyframes wrBar{to{width:100%}}
.wr-light .wr-bars i{background:rgba(15,23,42,.15)}.wr-light .wr-bars i b{background:#0f172a}
.wr-top{position:absolute;top:calc(22px + env(safe-area-inset-top));left:16px;right:10px;display:flex;align-items:center;gap:8px;z-index:5;font-size:12px;font-weight:700;opacity:.85}
.wr-top span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr-x{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:22px;cursor:pointer;line-height:1}
.wr-light .wr-top{color:#0f172a}

/* ── Слайд ── */
.wr-slide{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(70px + env(safe-area-inset-top)) 26px calc(26px + env(safe-area-inset-bottom));overflow:hidden}
.wr-slide.enter{animation:wrSlideIn .45s cubic-bezier(.2,.8,.2,1) both}
.wr-slide.enter.back{animation-name:wrSlideBack}
@keyframes wrSlideIn{from{opacity:0;transform:scale(1.04)}}
@keyframes wrSlideBack{from{opacity:0;transform:scale(.96)}}
.wr-slide>*:not(.wr-snow):not(.wr-confetti){position:relative}
.wr-n{font-size:inherit!important;opacity:1!important;display:inline!important;margin:0!important}
.wa{opacity:0;transform:translateY(16px)}
.on .wa{animation:wrUp .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 120ms + 120ms)}
@keyframes wrUp{to{opacity:1;transform:none}}
.wr-cap{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.wr-h{font-size:clamp(28px,8.4vw,36px);font-weight:850;font-weight:800;line-height:1.08;margin-top:10px;letter-spacing:-.02em}
.wr-big{font-size:clamp(72px,24vw,104px);font-weight:900;line-height:.95;letter-spacing:-.045em;margin-top:14px;font-variant-numeric:tabular-nums}
.wr-sub{font-size:15.5px;opacity:.88;margin-top:10px;line-height:1.4}
.wr-sub b{opacity:1}
.wr-foot{margin-top:auto;font-size:12px;opacity:.6}
.wr-c{text-align:center}
.wr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.wr-tile{background:rgba(255,255,255,.12);border-radius:16px;padding:14px}
.wr-tile b{display:block;font-size:28px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wr-tile span{font-size:12px;opacity:.8;line-height:1.3;display:block;margin-top:2px}
.wr-bar{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13.5px}
.wr-bar>span{width:82px;flex-shrink:0;opacity:.85}
.wr-bar>em{height:24px;border-radius:7px;background:#fff;display:block;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1) .3s}
.on .wr-bar>em{width:var(--w)}
.wr-bar>b{font-variant-numeric:tabular-nums}
.wr-cols{display:flex;align-items:flex-end;gap:5px;height:150px;margin-top:22px}
.wr-cols div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.wr-cols i{width:100%;border-radius:6px 6px 3px 3px;background:rgba(255,255,255,.35);height:0;transition:height .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--j) * 45ms + 200ms)}
.on .wr-cols i{height:var(--h)}
.wr-cols i.top{background:#fff}
.wr-cols span{font-size:10px;opacity:.7}
.wr-heat{display:grid;grid-template-columns:repeat(26,1fr);gap:2px;margin-top:20px}
.wr-heat i{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.1);opacity:0;transition:opacity .3s;transition-delay:calc(var(--j) * 3ms + 200ms)}
.on .wr-heat i{opacity:1}
.wr-months{display:flex;justify-content:space-between;font-size:10px;opacity:.6;margin-top:6px}
.wr-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:12px;opacity:.85}
.wr-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.wr-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.wr-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.12);border-radius:14px;padding:10px 13px}
.wr-list.tight{gap:6px;margin-top:12px}.wr-list.tight .wr-row{padding:7px 11px}.wr-list.tight .wr-row small{font-size:11px}.wr-list.tight .wr-row .e{font-size:18px}
.wr-row .e{font-size:22px;width:28px;text-align:center;flex-shrink:0}
.wr-row div{min-width:0;flex:1}
.wr-row b{display:block;font-size:14px}
.wr-row small{display:block;font-size:12px;opacity:.82;margin-top:1px;line-height:1.3}
.wr-row em{font-style:normal;font-weight:900;font-size:20px;font-variant-numeric:tabular-nums}
.wr-dw{position:relative;width:200px;height:200px;margin:26px auto 6px}
.wr-donut{width:200px;height:200px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--c1) 0 var(--a1),var(--c2) 0 var(--a2),var(--c3) 0 100%);-webkit-mask:radial-gradient(circle,transparent 58%,#000 59%);mask:radial-gradient(circle,transparent 58%,#000 59%);transform:rotate(-90deg) scale(.6);opacity:0;transition:transform 1s cubic-bezier(.2,.8,.2,1) .2s,opacity .5s .2s}
.on .wr-donut{transform:rotate(0) scale(1);opacity:1}
.wr-donut-c{position:absolute!important;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.wr-donut-c b{display:block;font-size:40px;font-weight:900}
.wr-donut-c span{font-size:12px;opacity:.8}
.wr-ring{width:200px;height:200px;border-radius:50%;margin:26px auto 10px;display:flex;align-items:center;justify-content:center;position:relative}
.wr-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.wr-ring circle{fill:none;stroke-width:16;stroke-linecap:round}
.wr-ring .fg{stroke:#fff;stroke-dasharray:0 600;transition:stroke-dasharray 1.4s cubic-bezier(.2,.8,.2,1) .3s}
.on .wr-ring .fg{stroke-dasharray:var(--len) 600}
.wr-ring div{text-align:center}.wr-ring b{display:block;font-size:50px;font-weight:900}.wr-ring span{font-size:12px;opacity:.8}
.wr-emoji{font-size:clamp(84px,26vw,110px);text-align:center;margin:30px 0 4px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.on .wr-emoji{animation:wrPop .8s cubic-bezier(.2,1.6,.4,1) both .15s}
@keyframes wrPop{from{transform:scale(.3) rotate(-20deg);opacity:0}}
.wr-pair{display:flex;justify-content:center;margin:26px 0 12px}
.wr-av{width:108px;height:108px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;border:3px solid rgba(255,255,255,.55)}
.wr-pair .wr-av+.wr-av{margin-left:-22px;background:rgba(255,255,255,.3)}
.on .wr-pair .wr-av:first-child{animation:wrL .7s cubic-bezier(.2,.8,.2,1) both .1s}
.on .wr-pair .wr-av+.wr-av{animation:wrR .7s cubic-bezier(.2,.8,.2,1) both .1s}
@keyframes wrL{from{transform:translateX(-60px);opacity:0}}
@keyframes wrR{from{transform:translateX(60px);opacity:0}}
.wr-tag{display:inline-block;margin-top:12px;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.18);font-size:13px;font-weight:600}
.wr-chip{display:inline-block;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:700;margin-right:6px}

/* Итоговая карточка */
.wr-card{background:linear-gradient(160deg,#1e3a8a,#0b1023);color:#fff;border-radius:24px;padding:22px;margin-top:14px;position:relative;overflow:hidden}
.wr-card .r{display:flex;justify-content:space-between;margin-top:14px;position:relative}
.wr-card .r div b{display:block;font-size:26px;font-weight:900;font-variant-numeric:tabular-nums}
.wr-card .r div span{font-size:11px;opacity:.75}
.wr-btns{display:flex;gap:10px;margin-top:16px;position:relative;z-index:6}
.wr-btn{flex:1;text-align:center;padding:13px;border-radius:14px;font-weight:700;font-size:14px;background:#2563eb;color:#fff;border:0;cursor:pointer;font-family:inherit}
.wr-btn.o{background:#e2e8f0;color:#0f172a}
.wr-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wr-confetti i{position:absolute;top:-20px;width:8px;height:14px;border-radius:2px;animation:wrFall var(--t) cubic-bezier(.25,.6,.45,1) var(--dl) both}
@keyframes wrFall{0%{transform:translate(0,0) rotate(0);opacity:1}25%{transform:translate(var(--x),var(--y)) rotate(calc(var(--r)*.3))}100%{transform:translate(calc(var(--x)*1.3),110vh) rotate(var(--r));opacity:.9}}
.wr-confetti{z-index:4}
.wr-medals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.wr-medal{background:rgba(255,255,255,.14);border-radius:18px;padding:14px 12px;text-align:center;border:1px solid rgba(255,255,255,.18)}
.wr-medal i{display:block;font-style:normal;font-size:38px;line-height:1.1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.3))}
.on .wr-medal i{animation:wrPop .7s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--d,0) * 120ms + 200ms)}
.wr-medal b{display:block;font-size:14px;margin-top:6px;line-height:1.2}
.wr-medal span{display:block;font-size:11.5px;opacity:.82;margin-top:3px;line-height:1.3}
.wr-medals.many{grid-template-columns:repeat(3,1fr);gap:8px}.wr-medals.many .wr-medal{padding:10px 6px}.wr-medals.many .wr-medal i{font-size:30px}.wr-medals.many .wr-medal b{font-size:12px}.wr-medals.many .wr-medal span{display:none}

/* Фоны */
.bg-intro{background:radial-gradient(120% 80% at 50% 0%,#3b82f6 0%,#1e3a8a 45%,#0b1023 100%)}
.bg-teal{background:linear-gradient(160deg,#0f766e,#064e3b 70%)}
.bg-violet{background:linear-gradient(170deg,#1e1b4b,#4c1d95)}
.bg-sky{background:linear-gradient(165deg,#0369a1,#0c4a6e)}
.bg-red{background:linear-gradient(165deg,#7c2d12,#b91c1c 60%,#7f1d1d)}
.bg-orange{background:linear-gradient(160deg,#f59e0b,#ea580c 55%,#9a3412)}
.bg-night{background:linear-gradient(165deg,#312e81 0%,#0f172a 75%)}
.bg-pink{background:linear-gradient(160deg,#db2777,#831843)}
.bg-green{background:linear-gradient(160deg,#16a34a,#14532d)}
.bg-slate{background:linear-gradient(165deg,#334155,#0f172a)}
.bg-gold{background:linear-gradient(160deg,#ca8a04,#713f12)}
.bg-indigo{background:linear-gradient(165deg,#4f46e5,#1e1b4b)}
.bg-light{background:#f8fafc;color:#0f172a}

@media (prefers-reduced-motion:reduce){.wr *,.wr-banner,.wr-banner *{animation:none!important;transition:none!important}.wa{opacity:1;transform:none}}