.streak{
    --c1:#ff9bcf; --c2:#b81c6b; --c3:#ffd9ec;
    position:relative;
    display:inline-flex; align-items:center; gap:7px;
    padding:5px 16px 5px 8px;
    border-radius:999px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border:1px solid rgba(255,255,255,0.22);
    border:1px solid color-mix(in srgb, var(--c1) 25%, transparent);
    isolation:isolate;
    user-select:none;
  }
  .streak__glow{
    position:absolute; inset:-8px; z-index:-1; border-radius:999px;
    background: var(--c1); filter: blur(12px); opacity:.22;
    animation: streak-glow 3s ease-in-out infinite;
  }
  @keyframes streak-glow{ 0%,100%{ opacity:.16; } 50%{ opacity:.32; } }

  .ds-flame-wrap{ position:relative; width:28px; height:37px; flex-shrink:0; margin:-2px 0; }
  .ds-flame{ position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; }

  .streak__num{ font-size:16px; font-weight:800; color:#fff; font-variant-numeric: tabular-nums; }
  .streak__label{ font-size:13px; font-weight:700; color: var(--c3); margin-left:-3px; opacity:.85; }

  .ds-ember{ position:absolute; z-index:0; bottom:16px; width:2px; height:2px; border-radius:50%; background: var(--c3); box-shadow:0 0 4px 1px var(--c1); opacity:0; animation: ember-rise 2.4s cubic-bezier(.3,.1,.6,1) infinite; }
  @keyframes ember-rise{
    0%{ transform: translate(0,0) scale(.5); opacity:0; }
    25%{ opacity:1; }
    100%{ transform: translate(var(--ex,0px),-26px) scale(1); opacity:0; }
  }

  .ds-is-holo .ds-flame{ animation: holo-hue 5s linear infinite; }
  .ds-is-holo .streak__glow{ animation: streak-glow 3s ease-in-out infinite, holo-glow-hue 5s linear infinite; }
  @keyframes holo-hue{ from{ filter: hue-rotate(0deg); } to{ filter: hue-rotate(360deg); } }
  @keyframes holo-glow-hue{ from{ filter: blur(12px) hue-rotate(0deg); } to{ filter: blur(12px) hue-rotate(360deg); } }
  .ds-sparkle{ position:absolute; width:9px; height:9px; z-index:2; opacity:0; animation: sparkle-pulse 2.2s ease-in-out infinite; }
  .ds-sparkle svg{ width:100%; height:100%; fill:#fff; filter: drop-shadow(0 0 3px #fff); }
  @keyframes sparkle-pulse{ 0%,100%{ opacity:0; transform: scale(.6) rotate(0deg); } 50%{ opacity:1; transform: scale(1.1) rotate(25deg); } }

  @media (prefers-reduced-motion: reduce){
    .streak__glow, .ds-ember, .ds-sparkle, .ds-is-holo .ds-flame{ animation:none !important; }
    .ds-ember, .ds-sparkle{ display:none; }
  }

  /* ============================================================
     "Огонёк" tooltip — same design as the title tooltips
     (brand-pink card, pink icon tile, rarity-style pill, centred arrow,
     spring entrance). Only the flame and the tier pill carry tier colour.
  ============================================================ */
  .ogonek-tip,.og-overlay{ --pink-100:#ffd9ec; --pink-300:#ff9bcf; --pink-500:#ef4d9d; }
  .ds-tier-caption{ position:relative; }
  .streak{ cursor:pointer; }

  .ogonek-tip{
    --ax: 50%;
    position:absolute;
    bottom: calc(100% + 14px);
    left:0;
    width:270px;
    padding:16px 18px;
    background: linear-gradient(165deg, #1a1016, #110b0f);
    border: 1px solid rgba(239,77,157,0.4);
    border-radius:16px;
    box-shadow: 0 24px 50px -18px rgba(0,0,0,0.7), 0 0 22px -6px rgba(255,155,207,0.3);
    transform: translateY(8px) scale(0.94);
    transform-origin: var(--ax) 100%;
    opacity:0;
    pointer-events:none;
    transition: opacity .22s ease, transform .32s cubic-bezier(.34,1.56,.64,1);
    z-index:50;
    color: var(--text);
  }
  .ogonek-tip::after{
    content:"";
    position:absolute;
    top:100%; left: var(--ax);
    width:12px; height:12px;
    margin-left:-6px; margin-top:-6px;
    background:#110b0f;
    border-right:1px solid rgba(239,77,157,0.4);
    border-bottom:1px solid rgba(239,77,157,0.4);
    transform: rotate(45deg);
  }
  .ds-tier-caption:hover .ogonek-tip,
  .ds-tier-caption:focus-within .ogonek-tip,
  .ds-tier-caption.is-pinned .ogonek-tip{ opacity:1; pointer-events:auto; transform: translateY(0) scale(1); }

  /* not enough room above → open below, arrow on top */
  .ds-tier-caption.tip-below .ogonek-tip{ bottom:auto; top: calc(100% - 8px); transform: translateY(-8px) scale(.94); transform-origin: var(--ax) 0; }
  .ds-tier-caption.tip-below:hover .ogonek-tip,
  .ds-tier-caption.tip-below:focus-within .ogonek-tip,
  .ds-tier-caption.tip-below.is-pinned .ogonek-tip{ transform: translateY(0) scale(1); }
  .ds-tier-caption.tip-below .ogonek-tip::after{ top:auto; bottom:100%; margin-top:0; margin-bottom:-6px; transform: rotate(225deg); }

  .ds-tooltip-head{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
  .ds-tooltip-icon{
    width:28px; height:28px; border-radius:9px; flex-shrink:0;
    background: rgba(239,77,157,0.18);
    display:flex; align-items:center; justify-content:center;
  }
  .ds-tooltip-icon svg{ width:15px; height:19px; }
  .ds-tooltip-title{ font-size:14px; font-weight:800; color: var(--pink-100); }

  /* tier pill — same shape as the rarity pill (GODLIKE etc.) */
  .ds-tier-pill{
    margin-left:auto; flex-shrink:0;
    padding:3px 9px; border-radius:999px;
    font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
    color:#1a0f17;
    background: linear-gradient(90deg, var(--c1), var(--c3));
    box-shadow: 0 0 10px -3px var(--c1);
  }
  .ds-tier-pill.ds-is-holo{
    background: linear-gradient(90deg, #ffc2e2, #ffe9a8, #b9f7d2, #bfe0ff, #fbcfdf, #ffc2e2);
    background-size: 300% 100%;
    box-shadow: 0 0 10px -3px #fff;
    animation: tip-rainbow 4s linear infinite;
  }
  @keyframes tip-rainbow{ to{ background-position: 300% 0; } }

  .ds-tooltip-desc{ margin:0; font-size:12.5px; line-height:1.6; color:#c9b9c4; }
  .ds-tooltip-desc b{ color: var(--pink-100); font-weight:700; }

  .tooltip-next{
    margin-top:12px; padding-top:11px;
    border-top:1px solid rgba(239,77,157,0.16);
  }
  .tooltip-next__row{ display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; color:#c9b9c4; margin-bottom:7px; }
  .tooltip-next__row b{ font-size:12.5px; color: var(--c1); font-weight:800; }
  .tooltip-next__track{ height:4px; border-radius:99px; background: rgba(255,255,255,0.07); overflow:hidden; }
  .tooltip-next__fill{ height:100%; border-radius:99px; background: linear-gradient(90deg, var(--c2), var(--c1)); box-shadow: 0 0 8px -2px var(--c1); }
  .tooltip-next__max{ font-size:11.5px; font-weight:700; color: var(--pink-100); }

  @media (prefers-reduced-motion: reduce){
    .ds-tier-pill.ds-is-holo, .ds-is-holo .ds-tooltip-icon svg{ animation:none; }
  }
  .ogonek-tip.ds-is-holo .ds-tooltip-icon svg{ animation: holo-hue 5s linear infinite; }

  .ds-tier-caption{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
  .ds-tier-caption small{ font-size:11px; color: var(--text-dim); padding-left:4px; }

.daily-streak-slot{display:inline-flex;flex:none;height:44px;vertical-align:middle;align-items:center}
.streak,.social-main .daily-streak-slot>.streak{display:inline-flex;align-items:center;gap:7px;min-height:0;min-width:0;height:auto;padding:5px 16px 5px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c1) 25%,transparent);background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));font-family:inherit;line-height:1;color:var(--text,#f2f2f4);white-space:nowrap;box-shadow:none;transform:none}
.streak:focus-visible{outline:2px solid var(--c1);outline-offset:3px}
.ds-flame-wrap>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ogonek-tip{position:fixed;inset:auto;z-index:10020;box-sizing:border-box;width:min(310px,calc(100vw - 24px));height:auto;max-height:none;overflow:visible;opacity:1;pointer-events:auto;transform:none;--pink-100:#ffd9ec;color:#f2f2f4;border-color:color-mix(in srgb,var(--c1) 40%,transparent);box-shadow:0 24px 50px -18px #000b,0 0 22px -6px color-mix(in srgb,var(--c1) 30%,transparent);animation:ds-tip-open .32s cubic-bezier(.34,1.56,.64,1)}
.ogonek-tip::after{border-color:color-mix(in srgb,var(--c1) 40%,transparent)}
.ogonek-tip[data-side=below]{transform-origin:var(--ax) 0}.ogonek-tip[data-side=below]::after{top:0;transform:rotate(225deg)}
.ogonek-tip .ds-tooltip-icon{background:color-mix(in srgb,var(--c1) 18%,transparent)}
@keyframes ds-tip-open{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.ds-best{font-size:12px;color:#c9b9c4;margin:10px 0 0}
.ds-settings{margin:14px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}.ds-settings button{font:inherit;border:1px solid #ef4d9d66;border-radius:10px;padding:8px 12px;background:#ef4d9d18;color:inherit;cursor:pointer}
.profile-name-row{min-width:0;align-items:center;row-gap:8px}.profile-name-row h1{min-width:0;overflow-wrap:anywhere}
html[data-streak-hidden] .streak *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.streak *,.ogonek-tip,.ogonek-tip *{animation:none!important;transition:none!important}.ds-ember,.ds-sparkle{display:none!important}}
  .og-overlay{
    position:fixed; inset:0; z-index:1000;
    display:flex; align-items:center; justify-content:center;
    padding:20px;
  }
  /* no background of its own — just blurs & dims whatever page is underneath */
  .og-backdrop{
    position:absolute; inset:0;
    background: rgba(8,6,10,0.5);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
    opacity:0;
    transition: opacity .35s ease;
  }
  .og-overlay.is-open .og-backdrop{ opacity:1; }
  .og-overlay.is-closing .og-backdrop{ opacity:0; transition-duration:.28s; }

  .og-card{
    position:relative;
    width:min(340px, 100%);
    padding:28px 26px 24px;
    text-align:center;
    background: linear-gradient(165deg, #1a1016, #110b0f);
    border:1px solid rgba(239,77,157,0.4);
    border-radius:22px;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,0.85), 0 0 46px -14px var(--c1);
    overflow:hidden; isolation:isolate;
    opacity:0; transform: translateY(16px) scale(.92);
    transition: opacity .3s ease, transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .6s ease;
  }
  .og-overlay.is-open .og-card{ opacity:1; transform:none; }
  .og-overlay.is-closing .og-card{ opacity:0; transform: translateY(10px) scale(.96); transition: opacity .25s ease, transform .28s ease; }
  /* soft coloured light pooling behind the flame */
  .og-card::before{
    content:""; position:absolute; left:50%; top:-40px; z-index:-1;
    width:320px; height:260px; margin-left:-160px;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 34%, transparent), transparent);
    opacity:.9; transition: background .6s ease;
  }

  .og-close{
    position:absolute; top:12px; right:12px; z-index:5;
    width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
    background: rgba(255,255,255,0.06); color:#c9b9c4;
    display:flex; align-items:center; justify-content:center;
    transition: background-color .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .og-close:hover{ background: rgba(239,77,157,0.2); transform: rotate(90deg); }
  .og-close:focus{ outline:none; }
  .og-close:focus-visible{ background: rgba(239,77,157,0.25); box-shadow: 0 0 0 2px rgba(239,77,157,0.5); }
  .og-card:focus{ outline:none; }
  .og-close svg{ width:12px; height:12px; stroke: currentColor; }

  /* ---------- stage: flame + effects ---------- */
  .og-stage{ position:relative; width:160px; height:160px; margin:0 auto 4px; }

  .og-rays{
    position:absolute; inset:-34px; border-radius:50%;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c1) 30%, transparent) 0deg 7deg, transparent 7deg 30deg);
    -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 75%);
    mask: radial-gradient(closest-side, #000 20%, transparent 75%);
    opacity:0; transform: scale(.6);
    transition: opacity .8s ease, transform 1s cubic-bezier(.2,.8,.3,1);
    animation: og-spin 18s linear infinite;
  }
  .og-stage.is-lit .og-rays{ opacity:.8; transform: scale(1); }
  .og-stage.is-holo .og-rays{
    background: repeating-conic-gradient(from 0deg, #ff8fc855 0deg 7deg, transparent 7deg 15deg, #72bcff55 15deg 22deg, transparent 22deg 30deg, #ffd25755 30deg 37deg, transparent 37deg 45deg);
  }
  @keyframes og-spin{ to{ rotate:360deg; } }

  .og-ring{
    position:absolute; left:50%; top:62%; width:70px; height:70px; margin:-35px 0 0 -35px;
    border-radius:50%; border:2px solid var(--c1);
    opacity:0; pointer-events:none;
  }
  .og-ring.go{ animation: og-ring .8s cubic-bezier(.2,.7,.3,1) forwards; }
  .og-ring.go.r2{ animation-delay:.12s; border-width:1px; border-color: var(--c3); }
  @keyframes og-ring{ 0%{ opacity:.9; transform: scale(.3); } 100%{ opacity:0; transform: scale(2.6); } }

  .og-spark{
    position:absolute; left:50%; top:60%;
    width:5px; height:5px; margin:-2.5px; border-radius:50%;
    background:#fff; box-shadow: 0 0 6px 2px var(--sc);
    opacity:0; pointer-events:none;
  }
  .og-spark.go{ animation: og-spark var(--d) cubic-bezier(.15,.7,.35,1) var(--delay) forwards; }
  @keyframes og-spark{
    0%{ opacity:1; transform: translate(0,0) scale(1); }
    70%{ opacity:.9; }
    100%{ opacity:0; transform: translate(var(--dx), var(--dy)) scale(.3); }
  }

  .og-flash{
    position:absolute; left:50%; top:58%; width:150px; height:150px; margin:-75px 0 0 -75px;
    border-radius:50%;
    background: radial-gradient(closest-side, #fff, color-mix(in srgb, var(--c1) 60%, transparent) 45%, transparent);
    opacity:0; pointer-events:none; mix-blend-mode: screen;
  }
  .og-flash.go{ animation: og-flash .7s ease-out forwards; }
  @keyframes og-flash{ 0%{ opacity:0; transform: scale(.3); } 25%{ opacity:1; transform: scale(1); } 100%{ opacity:0; transform: scale(1.35); } }

  .og-flame{
    position:absolute; left:50%; bottom:6px;
    width:96px; height:128px; margin-left:-48px;
    transform-origin: 50% 94%;
    opacity:0; transform: scale(.2);
  }
  .og-flame svg{ width:100%; height:100%; overflow:visible; display:block; }
  .og-flame.ignite{ animation: og-ignite .75s cubic-bezier(.34,1.56,.64,1) forwards; }
  .og-flame.shown{ opacity:1; transform: scale(1); transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1); }
  .og-flame.burn-out{ animation: og-out .45s ease-in forwards; }
  .og-flame.is-holo svg{ animation: holo-hue 5s linear infinite; }
  @keyframes og-ignite{
    0%{ opacity:0; transform: scale(.2) translateY(10px); }
    45%{ opacity:1; }
    65%{ transform: scale(1.14) translateY(-2px); }
    100%{ opacity:1; transform: scale(1) translateY(0); }
  }
  @keyframes og-out{
    0%{ opacity:1; transform: scale(1); filter: brightness(1); }
    100%{ opacity:0; transform: scale(.55); filter: brightness(2.2); }
  }
  @keyframes holo-hue{ from{ filter: hue-rotate(0deg); } to{ filter: hue-rotate(360deg); } }

  /* ---------- counter (odometer) ---------- */
  .og-count{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin:2px 0 4px; }
  .og-num{
    display:inline-flex; font-size:46px; font-weight:900; line-height:1; letter-spacing:-.02em;
    font-variant-numeric: tabular-nums; color:#fff;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c1) 65%, transparent));
  }
  .og-digit{ display:inline-block; height:1em; overflow:hidden; }
  .og-digit__col{ display:flex; flex-direction:column; transition: transform .7s cubic-bezier(.65,0,.35,1); }
  .og-digit__col span{ height:1em; line-height:1; }
  .og-digit.roll .og-digit__col{ transform: translateY(-50%); }
  .og-digit.enter .og-digit__col span:first-child{ visibility:hidden; }
  .og-num.pop{ animation: og-num-pop .5s cubic-bezier(.34,1.56,.64,1); }
  @keyframes og-num-pop{ 0%{ transform: scale(1); } 40%{ transform: scale(1.12); } 100%{ transform: scale(1); } }
  .og-unit{ font-size:13px; font-weight:700; color: var(--c3); }

  .og-title{ font-size:18px; font-weight:800; color: var(--pink-100, #ffe3f1); margin:10px 0 6px; }
  .og-title.is-holo{
    background: linear-gradient(90deg, #ffc2e2, #ffe9a8, #b9f7d2, #bfe0ff, #fbcfdf, #ffc2e2);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: og-rainbow 4s linear infinite;
  }
  @keyframes og-rainbow{ to{ background-position: 300% 0; } }
  .og-overlay .is-pending{ opacity:0; }
  .og-reveal{ animation: og-fadeup .45s cubic-bezier(.2,.8,.3,1) forwards; }
  @keyframes og-fadeup{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
  .og-unit{ transition: opacity .2s ease; }
  .og-unit.swap{ opacity:0; }
  .og-sub{ margin:0 auto; max-width:270px; font-size:12.5px; line-height:1.6; color:#c9b9c4; }
  .og-sub b{ color: var(--pink-100, #ffe3f1); }

  /* tier pill — same as in the tooltip */
  .og-tier-pill{
    display:inline-block; margin-top:12px;
    padding:3px 10px; border-radius:999px;
    font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
    color:#1a0f17;
    background: linear-gradient(90deg, var(--c1), var(--c3));
    box-shadow: 0 0 12px -3px var(--c1);
  }
  .og-tier-pill.is-holo{
    background: linear-gradient(90deg, #ffc2e2, #ffe9a8, #b9f7d2, #bfe0ff, #fbcfdf, #ffc2e2);
    background-size: 300% 100%; box-shadow: 0 0 12px -3px #fff;
    animation: og-rainbow 4s linear infinite;
  }
  .og-tier-pill.hidden{ opacity:0; transform: scale(.4); }
  .og-tier-pill.pop{ animation: og-pill .6s cubic-bezier(.34,1.56,.64,1) forwards; }
  @keyframes og-pill{ 0%{ opacity:0; transform: scale(.4); } 100%{ opacity:1; transform: scale(1); } }

  .og-next{ margin-top:16px; padding-top:13px; border-top:1px solid rgba(239,77,157,0.16); text-align:left; }
  .og-next__row{ display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; color:#c9b9c4; margin-bottom:7px; }
  .og-next__row b{ font-size:12.5px; color: var(--c1); font-weight:800; }
  .og-next__track{ height:5px; border-radius:99px; background: rgba(255,255,255,0.07); overflow:hidden; }
  .og-next__fill{ height:100%; border-radius:99px; background: linear-gradient(90deg, var(--c2), var(--c1)); box-shadow: 0 0 8px -2px var(--c1); transition: width .9s cubic-bezier(.4,0,.2,1); }
  .og-next__max{ font-size:11.5px; font-weight:700; color: var(--pink-100, #ffe3f1); text-align:center; }

  /* 5-second auto-close timer */
  .og-timer{ position:absolute; left:0; right:0; bottom:0; height:3px; background: rgba(255,255,255,0.05); }
  .og-timer__fill{ height:100%; width:100%; transform-origin:left; background: linear-gradient(90deg, var(--c2), var(--c1)); }

  @media (prefers-reduced-motion: reduce){
    .og-rays{ animation:none; }
    .og-flame.is-holo svg, .og-title.is-holo, .og-tier-pill.is-holo{ animation:none; }
  }

/* Native modal top layer supplies inert background and bounded keyboard focus. */
dialog.og-overlay{margin:0;border:0;max-width:none;max-height:none;width:100%;height:100%;box-sizing:border-box;background:transparent;color:#fff;font:inherit;overflow:auto}
dialog.og-overlay:not([open]){display:none}dialog.og-overlay::backdrop{background:transparent}
.og-overlay *{box-sizing:border-box}.og-card{max-height:calc(100dvh - 24px);overflow:auto;flex-shrink:0}
.og-close{padding:0;min-height:0;font:inherit}
@media(max-height:480px){.og-overlay{padding:12px}.og-card{padding:16px 24px}.og-stage{height:105px;width:130px}.og-flame{width:66px;height:88px;margin-left:-33px}.og-num{font-size:34px}.og-next{margin-top:10px;padding-top:8px}.og-title{margin-top:5px}}
@media(prefers-reduced-motion:reduce){.og-overlay *,.og-overlay *::before{animation:none!important;transition:none!important}.og-overlay .og-ring,.og-overlay .og-spark,.og-overlay .og-flash{display:none}.og-overlay .og-flame.old{display:none}}

.streak{cursor:default}