/* Sakura learning streak — self-contained styles. Pairs with streak.js.
   Uses the site's existing CSS variables when present, with fallbacks. */

.sk-root {
  --sk-ink: var(--ink, #fff4e6);
  --sk-soft: var(--ink-soft, rgba(255, 244, 230, .78));
  --sk-line: var(--line, rgba(255, 244, 230, .22));
  --sk-accent: var(--accent, #ffb0c8);
  --sk-c1: #ffb0c8;           /* petal colour */
  --sk-c2: #ffe4ec;           /* petal highlight */
  --sk-core: #ffd27a;         /* flower centre */
  --sk-glow: rgba(255, 176, 200, 0);
  position: fixed; z-index: 15; pointer-events: none;
  top: calc(env(safe-area-inset-top, 0px) + var(--sk-top, 72px));
  right: var(--sk-side, 14px);
  font-family: inherit; line-height: 1.4; color: var(--sk-ink);
}
.sk-root[data-pos="top-left"] { right: auto; left: var(--sk-side, 14px); }
.sk-root[data-pos="bottom-right"] { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sk-bottom, 16px)); }
.sk-root[data-pos="bottom-left"] { top: auto; right: auto; left: var(--sk-side, 14px); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sk-bottom, 16px)); }

/* ---------- tiers ---------- */
.sk-root [data-tier="0"] { --sk-c1: #9a8bb0; --sk-c2: #c9bdd8; --sk-core: #b9aac8; }
.sk-root [data-tier="1"] { --sk-c1: #ffb0c8; --sk-c2: #ffe4ec; }
.sk-root [data-tier="2"] { --sk-c1: #ff8fb0; --sk-c2: #ffd0de; --sk-glow: rgba(255, 143, 176, .35); }
.sk-root [data-tier="3"] { --sk-c1: #ff9fbd; --sk-c2: #ffe3a8; --sk-core: #ffc94d; --sk-glow: rgba(255, 201, 120, .4); }
.sk-root [data-tier="4"] { --sk-c1: #ffd27a; --sk-c2: #fff3c9; --sk-core: #ff9fbd; --sk-glow: rgba(255, 210, 122, .5); }
.sk-root [data-tier="5"] { --sk-c1: #fff0c2; --sk-c2: #ffffff; --sk-core: #ffb0c8; --sk-glow: rgba(255, 240, 194, .6); }

/* ---------- chip ---------- */
.sk-chip {
  position: relative; pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px 0 8px; margin: 0; font: inherit; color: var(--sk-ink); cursor: pointer;
  background: rgba(28, 20, 46, .55); border: 1px solid var(--sk-line); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 18px 2px var(--sk-glow);
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .6s ease, visibility 0s linear 0s;
}
.sk-chip:hover, .sk-chip[aria-expanded="true"] { border-color: var(--sk-c1); }
.sk-chip:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 3px; }
.sk-chip.sk-hidden { opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }

.sk-chip::after {                       /* ripple ring */
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--sk-c1); opacity: 0;
}
.sk-chip.is-bloom::after { animation: sk-ring .85s ease-out; }
.sk-chip.is-bloom { animation: sk-chip-pop .7s cubic-bezier(.2, .9, .2, 1); }
.sk-chip[data-tier="4"]::before, .sk-chip[data-tier="5"]::before {   /* shimmer sweep */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  animation: sk-shimmer 3.4s ease-in-out infinite;
}

/* ---------- flower ---------- */
.sk-flowerwrap { position: relative; width: 26px; height: 26px; flex: none; }
.sk-flower { display: block; width: 26px; height: 26px; overflow: visible; }
.sk-petal { fill: var(--sk-c1); stroke: rgba(255, 255, 255, .25); stroke-width: .4; transform-origin: 0px 0px; transform-box: view-box; transition: fill .5s ease, opacity .5s ease; }
.sk-hl { fill: var(--sk-c2); opacity: .55; transform-origin: 0px 0px; transform-box: view-box; }
.sk-core { fill: var(--sk-core); transition: fill .5s ease; }
.sk-chip[data-state="idle"] .sk-petal { fill-opacity: .28; stroke: var(--sk-c1); stroke-width: .8; }
.sk-chip[data-state="idle"] .sk-hl { opacity: 0; }
.sk-chip[data-state="pending"] .sk-petal { fill-opacity: .45; stroke: var(--sk-c1); stroke-width: .9; stroke-dasharray: 2.2 1.6; }
.sk-chip[data-state="pending"] .sk-flowerwrap { animation: sk-breathe 2.8s ease-in-out infinite; }
.sk-chip[data-state="done"] .sk-flowerwrap { animation: sk-sway 6s ease-in-out infinite; }
.sk-chip.is-bloom .sk-flowerwrap { animation: sk-bloom .95s cubic-bezier(.2, .9, .2, 1); }
/* Animate one HTML layer rather than repainting each SVG petal. */
.sk-chip .sk-flowerwrap { will-change: transform; }
.sk-orbit { display: none; position: absolute; inset: -3px; pointer-events: none; animation: sk-spin 4.5s linear infinite; }
.sk-orbit i { position: absolute; left: 50%; top: -1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 7px 2px rgba(255, 236, 180, .95); }
.sk-orbit i + i { top: auto; bottom: -1px; width: 3px; height: 3px; margin-left: -1.5px; }
.sk-root [data-tier="5"] .sk-orbit { display: block; }

/* ---------- number (odometer) ---------- */
.sk-count { display: block; height: 1.25em; overflow: hidden; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sk-roll { display: flex; flex-direction: column; align-items: flex-start; transition: transform .6s cubic-bezier(.2, .85, .25, 1); }
.sk-n { display: block; height: 1.25em; line-height: 1.25em; }
.sk-unit { font-size: 12px; letter-spacing: .08em; color: var(--sk-soft); margin-left: -3px; white-space: nowrap; }
@media (max-width: 400px) { .sk-unit { display: none; } .sk-chip { padding-right: 12px; } }

/* ---------- FX layer: petal burst + shower ---------- */
.sk-fx { position: fixed; inset: 0; z-index: 14; pointer-events: none; overflow: hidden; }
.sk-pt {
  position: absolute; left: 0; top: 0; width: var(--s, 10px); height: calc(var(--s, 10px) * 1.3); opacity: 0; will-change: transform, opacity;
  background: linear-gradient(135deg, var(--pa, #ffd7e2), var(--pb, #ff9fbd)); border-radius: 80% 0 80% 0;
}
.sk-burst .sk-pt { animation: sk-fly var(--dur, 950ms) cubic-bezier(.12, .75, .3, 1) var(--delay, 0ms) forwards; }
.sk-fall .sk-pt { left: var(--x, 50%); top: -24px; animation: sk-fall var(--dur, 3400ms) linear var(--delay, 0ms) forwards; }

/* ---------- toast ---------- */
.sk-toast {
  position: fixed; left: 50%; z-index: 16; top: calc(env(safe-area-inset-top, 0px) + 76px);
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: min(92vw, 390px); padding: 12px 22px 12px 14px;
  background: rgba(34, 24, 54, .94); border: 1px solid var(--sk-accent); border-radius: 16px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(10, 6, 24, .5), 0 0 26px var(--sk-glow);
  color: var(--sk-ink); cursor: pointer; pointer-events: auto;
  opacity: 0; transform: translate(-50%, -14px);
  transition: opacity .4s ease, transform .55s cubic-bezier(.2, .85, .25, 1);
}
@media (max-width: 520px) { .sk-toast { top: calc(env(safe-area-inset-top, 0px) + var(--sk-top, 72px) + 48px); } }
.sk-toast.in { opacity: 1; transform: translate(-50%, 0); }
.sk-toast.out { opacity: 0; transform: translate(-50%, -8px); transition: opacity .3s ease, transform .3s ease; }
.sk-toast .sk-flowerwrap { width: 40px; height: 40px; }
.sk-toast .sk-flower { width: 40px; height: 40px; }
.sk-toast.in .sk-flowerwrap { animation: sk-bloom .95s cubic-bezier(.2, .9, .2, 1) .15s both; }

.sk-toast .sk-title { font-size: 18px; font-weight: 700; letter-spacing: .06em; }
.sk-toast .sk-sub { font-size: 13px; color: var(--sk-soft); letter-spacing: .04em; }
.sk-toast.big { padding: 16px 28px 16px 18px; border-width: 1.5px; }
.sk-toast.big .sk-title { font-size: 22px; }
.sk-toast.big .sk-flowerwrap, .sk-toast.big .sk-flower { width: 52px; height: 52px; }

/* ---------- details popover ---------- */
.sk-pop {
  position: fixed; z-index: 17; width: min(320px, calc(100vw - 24px)); padding: 18px 18px 14px;
  background: rgba(34, 24, 54, .95); border: 1px solid var(--sk-line); border-radius: 14px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(10, 6, 24, .55); color: var(--sk-ink); pointer-events: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top right;
  max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .85, .25, 1), visibility 0s linear .4s;
}
.sk-pop.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sk-pop:focus { outline: none; }
.sk-pop-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sk-pop-head .sk-flowerwrap, .sk-pop-head .sk-flower { width: 54px; height: 54px; }
.sk-pop-big { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: .02em; }
.sk-pop-big small { font-size: 14px; font-weight: 500; letter-spacing: .08em; color: var(--sk-soft); margin-left: 6px; }
.sk-pop-best { font-size: 13px; color: var(--sk-soft); letter-spacing: .06em; }
.sk-pop-msg { margin: 0 0 14px; font-size: 13.5px; line-height: 1.7; color: var(--sk-soft); }
.sk-pop-msg b { color: var(--sk-ink); font-weight: 700; }
.sk-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 14px; }
.sk-day { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: var(--sk-soft); letter-spacing: .04em; }
.sk-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--sk-line); display: block; position: relative; transition: background .3s, border-color .3s; }
.sk-day.on .sk-dot { background: radial-gradient(circle at 50% 50%, var(--sk-core) 0 18%, var(--sk-c1) 20%); border-color: var(--sk-c1); animation: sk-dot-pop .5s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 50ms + 120ms); }
.sk-day.today .sk-dot { border-color: var(--sk-ink); box-shadow: 0 0 0 2px rgba(255, 244, 230, .18); }
.sk-day.today { color: var(--sk-ink); }
.sk-next { font-size: 12px; color: var(--sk-soft); letter-spacing: .06em; display: flex; justify-content: space-between; margin-bottom: 6px; }
.sk-bar { height: 7px; border-radius: 999px; background: rgba(255, 244, 230, .12); overflow: hidden; }
.sk-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sk-c1), var(--sk-core)); transition: width .9s cubic-bezier(.2, .85, .25, 1) .15s; }
.sk-foot { margin: 12px 0 0; font-size: 11.5px; line-height: 1.6; color: rgba(255, 244, 230, .55); }

/* ---------- keyframes ---------- */
@keyframes sk-bloom { 0% { transform: scale(.55) rotate(-50deg); } 55% { transform: scale(1.4) rotate(14deg); } 80% { transform: scale(.95) rotate(-4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes sk-open { 0% { transform: scale(.15); opacity: 0; } 70% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sk-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.6, 1.9); opacity: 0; } }
@keyframes sk-chip-pop { 0% { transform: scale(1); } 35% { transform: scale(1.09); } 100% { transform: scale(1); } }
@keyframes sk-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes sk-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes sk-spin { to { transform: rotate(360deg); } }
@keyframes sk-shimmer { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes sk-dot-pop { 0% { transform: scale(.2); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes sk-fly {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
}
@keyframes sk-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  6% { opacity: 1; }
  30% { transform: translate(calc(var(--sway) * 1), 30vh) rotate(calc(var(--rot) * .3)); }
  60% { transform: translate(calc(var(--sway) * -.7), 62vh) rotate(calc(var(--rot) * .65)); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--sway) * .5), 112vh) rotate(var(--rot)); }
}

/* ---------- reduced motion: no flying petals, no rolling numbers ---------- */
@media (prefers-reduced-motion: reduce) {
  .sk-root *, .sk-root *::before, .sk-root *::after,
  .sk-toast, .sk-toast *, .sk-pop, .sk-pop * { animation: none !important; }
  .sk-fx { display: none; }
  .sk-roll, .sk-bar i, .sk-chip, .sk-pop, .sk-toast { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .sk-chip.sk-hidden { transition: none; }
  .sk-toast { transition: opacity .2s ease !important; transform: translate(-50%, 0); }
  .sk-toast.out { transform: translate(-50%, 0); }
}

/* Integration: retain the supplied blossom design, fit beneath the site header. */
.sk-root {--sk-top:96px}
.sk-root *, .sk-root *::before, .sk-root *::after {box-sizing:border-box}
.sk-pop-close {display:block;margin:0 0 8px auto;padding:6px 12px;min-height:36px;font:inherit;font-size:12px;color:var(--sk-ink);background:none;border:1px solid var(--sk-line);border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.sk-pop-close:hover {background:rgba(255,176,200,.12);border-color:var(--sk-accent)}
.sk-pop-close:focus-visible {outline:2px solid var(--sk-accent);outline-offset:2px}
.sk-pop-close:active {transform:scale(.96)}
@media(max-width:760px){.sk-root{--sk-top:88px;--sk-side:10px}.sk-chip{height:36px}.sk-pop{max-height:calc(100dvh - 154px)}}
.sk-root[hidden] {display:none!important}
@media(max-width:760px){
 body[data-page="community"].streak-present .sk-chip {gap:5px;padding-right:8px}
}