.card-streak {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  min-height: 32px;
  padding: 2px 4px;
  color: #6855a4;
  white-space: nowrap;
}
.streak-eiffel { width:21px; height:29px; flex:none; transform-origin:50% 90%; }
.streak-stars { position:relative; display:inline-flex; align-items:center; gap:1px; }
.streak-star { display:inline-block; width:12px; color:#adb4c9; font-size:14px; line-height:1; text-align:center; }
.streak-star.is-lit { color:#d5a13c; }
.card-streak strong { min-width:1.4ch; color:#5740ae; font:800 14px/1 "Manrope", sans-serif; font-variant-numeric:tabular-nums; text-align:right; }
.card-streak-tier-spark .streak-eiffel { color:#7554c4; }
.card-streak-milestone .streak-eiffel,.card-streak-milestone strong { color:#9a6b17; }
.card-streak-tier-grand .streak-eiffel { filter:drop-shadow(0 0 4px rgba(216,169,64,.55)); }
.card-streak-tier-grand .streak-star.is-lit { color:#be8425; }
.card-streak-gain .streak-star.is-new { animation:streak-star-land .65s cubic-bezier(.18,.9,.24,1.1) both; }
.card-streak-gain .streak-eiffel { animation:streak-tower-jump .75s cubic-bezier(.2,.85,.25,1.1); }
.card-streak-moment-three .streak-eiffel { animation:streak-tower-wave 1s ease-in-out; }
.card-streak-moment-five .streak-eiffel,.card-streak-moment-grand .streak-eiffel { animation:streak-tower-celebrate 1.25s cubic-bezier(.2,.8,.25,1.1); }
.card-streak-moment-five::before,.card-streak-moment-grand::before { position:absolute; left:3px; top:2px; width:26px; height:26px; border:2px solid #e2b44f; border-radius:50%; opacity:0; pointer-events:none; animation:streak-halo 1s ease-out forwards; content:""; }
.card-streak-moment-grand::before { border-color:#9e7fe0; }
.card-streak-break .streak-eiffel { animation:streak-tower-wobble .68s ease-in-out; }
.card-streak-break strong { animation:streak-count-reset .45s ease-out; }
.streak-fall { position:absolute; inset:0; pointer-events:none; }
.streak-fall i { position:absolute; top:0; color:#d5a13c; font-size:14px; font-style:normal; line-height:1; animation:streak-star-fall .75s ease-in forwards; }
.streak-fall i:nth-child(1) { left:0; --fall-x:-17px; animation-delay:0s; }
.streak-fall i:nth-child(2) { left:12px; --fall-x:1px; animation-delay:.08s; }
.streak-fall i:nth-child(3) { left:24px; --fall-x:17px; animation-delay:.15s; }
.streak-sparkles { position:absolute; inset:0; pointer-events:none; }
.streak-sparkles i { position:absolute; left:17px; top:9px; color:#d5a13c; font-size:11px; font-style:normal; line-height:1; opacity:0; animation:streak-spark-out .8s ease-out forwards; }
.streak-sparkles i:nth-child(1) { --spark-x:-19px; --spark-y:-21px; }
.streak-sparkles i:nth-child(2) { --spark-x:7px; --spark-y:-31px; animation-delay:.06s; }
.streak-sparkles i:nth-child(3) { --spark-x:37px; --spark-y:-14px; animation-delay:.12s; }
.streak-sparkles i:nth-child(4) { --spark-x:30px; --spark-y:18px; animation-delay:.04s; }
.streak-sparkles i:nth-child(5) { --spark-x:-30px; --spark-y:14px; animation-delay:.15s; }
.streak-sparkles i:nth-child(6) { --spark-x:51px; --spark-y:-30px; animation-delay:.09s; }
.streak-sparkles i:nth-child(7) { --spark-x:56px; --spark-y:12px; animation-delay:.21s; }
.streak-sparkles i:nth-child(8) { --spark-x:-27px; --spark-y:-36px; animation-delay:.18s; }
@keyframes streak-star-land { 0% { transform:translateY(-23px) rotate(-30deg) scale(.45); opacity:0; } 68% { transform:translateY(2px) rotate(8deg) scale(1.3); opacity:1; } 100% { transform:translateY(0) rotate(0) scale(1); opacity:1; } }
@keyframes streak-tower-jump { 0%,100% { transform:translateY(0) rotate(0); } 45% { transform:translateY(-6px) rotate(-7deg); filter:drop-shadow(0 0 7px #d9b1f3); } 72% { transform:translateY(2px) rotate(4deg); } }
@keyframes streak-tower-wave { 0%,100% { transform:translateY(0) rotate(0); } 30% { transform:translateY(-8px) rotate(-15deg) scale(1.2); } 55% { transform:translateY(-5px) rotate(15deg) scale(1.2); } 75% { transform:translateY(1px) rotate(-5deg); } }
@keyframes streak-tower-celebrate { 0%,100% { transform:translateY(0) rotate(0) scale(1); } 24% { transform:translateY(-11px) rotate(-13deg) scale(1.25); filter:drop-shadow(0 0 9px #e6bd5d); } 46% { transform:translateY(-5px) rotate(13deg) scale(1.32); } 67% { transform:translateY(-8px) rotate(-8deg) scale(1.24); } 84% { transform:translateY(2px) rotate(4deg) scale(1.05); } }
@keyframes streak-halo { 0% { transform:scale(.3); opacity:.8; } 100% { transform:scale(2.3); opacity:0; } }
@keyframes streak-tower-wobble { 0%,100% { transform:rotate(0); } 24% { transform:rotate(-9deg); } 48% { transform:rotate(7deg); } 72% { transform:rotate(-3deg); } }
@keyframes streak-count-reset { 0% { transform:scale(1.3); opacity:.4; } 100% { transform:scale(1); opacity:1; } }
@keyframes streak-star-fall { 0% { transform:translate(0,-4px) rotate(0); opacity:1; } 100% { transform:translate(var(--fall-x),52px) rotate(100deg); opacity:0; } }
@keyframes streak-spark-out { 0% { transform:translate(0,0) scale(.4) rotate(0); opacity:0; } 30% { opacity:1; } 100% { transform:translate(var(--spark-x),var(--spark-y)) scale(1.15) rotate(100deg); opacity:0; } }
.card-celebration { position:absolute; z-index:2; inset:0; overflow:hidden; border-radius:28px 8px; pointer-events:none; }
.card-celebration i { position:absolute; color:#d7a342; font-size:18px; font-style:normal; line-height:1; opacity:0; text-shadow:0 0 12px #fff6d5; }
.card-celebration-gain i { left:50%; top:19%; animation:card-star-burst 1.2s ease-out forwards; }
.card-celebration-gain i:nth-child(1) { --burst-x:-155px; --burst-y:-75px; }
.card-celebration-gain i:nth-child(2) { --burst-x:-100px; --burst-y:40px; animation-delay:.06s; }
.card-celebration-gain i:nth-child(3) { --burst-x:-45px; --burst-y:-110px; animation-delay:.11s; }
.card-celebration-gain i:nth-child(4) { --burst-x:35px; --burst-y:75px; animation-delay:.03s; }
.card-celebration-gain i:nth-child(5) { --burst-x:115px; --burst-y:-80px; animation-delay:.12s; }
.card-celebration-gain i:nth-child(6) { --burst-x:155px; --burst-y:45px; animation-delay:.08s; }
.card-celebration-gain i:nth-child(7) { --burst-x:-175px; --burst-y:100px; animation-delay:.16s; }
.card-celebration-gain i:nth-child(8) { --burst-x:175px; --burst-y:105px; animation-delay:.19s; }
.card-celebration-gain i:nth-child(9) { --burst-x:-205px; --burst-y:-10px; animation-delay:.05s; }
.card-celebration-gain i:nth-child(10) { --burst-x:205px; --burst-y:-15px; animation-delay:.14s; }
.card-celebration-gain i:nth-child(11) { --burst-x:-125px; --burst-y:135px; animation-delay:.18s; }
.card-celebration-gain i:nth-child(12) { --burst-x:125px; --burst-y:135px; animation-delay:.1s; }
.card-celebration-gain i:nth-child(13) { --burst-x:-75px; --burst-y:-145px; animation-delay:.21s; }
.card-celebration-gain i:nth-child(14) { --burst-x:75px; --burst-y:-145px; animation-delay:.17s; }
.card-celebration-gain i:nth-child(15) { --burst-x:-210px; --burst-y:115px; animation-delay:.26s; }
.card-celebration-gain i:nth-child(16) { --burst-x:210px; --burst-y:115px; animation-delay:.23s; }
.card-celebration-moment-three i:nth-child(n+9) { color:#a783d8; font-size:21px; }
.card-celebration-moment-five i,.card-celebration-moment-grand i { font-size:23px; }
.card-celebration-moment-five i:nth-child(even),.card-celebration-moment-grand i:nth-child(even) { color:#a783d8; }
.card-celebration-moment-grand i { font-size:27px; }
.card-celebration-moment-five::before,.card-celebration-moment-grand::before { position:absolute; inset:0; background:radial-gradient(circle at 50% 24%,rgba(242,208,119,.23),transparent 42%); opacity:0; animation:streak-warm-glow 1.25s ease-out forwards; content:""; }
.card-celebration-moment-grand::before { background:radial-gradient(circle at 50% 24%,rgba(215,189,255,.28),transparent 48%); }
.streak-scene { position:absolute; z-index:2; left:12%; top:23%; width:72px; height:98px; color:#835dba; opacity:0; transform-origin:50% 90%; animation:streak-scene-wave 1.85s ease-out forwards; }
.streak-scene-eiffel { position:relative; z-index:2; display:block; width:100%; height:100%; filter:drop-shadow(0 5px 5px rgba(101,71,134,.16)); }
.streak-scene-arm { position:absolute; z-index:1; top:48%; width:27px; height:5px; border-radius:5px; background:currentColor; transform-origin:90% 50%; }
.streak-scene-arm.arm-left { left:-11px; transform:rotate(30deg); }
.streak-scene-arm.arm-right { right:-11px; transform-origin:10% 50%; transform:rotate(-30deg); }
.streak-scene-halo { position:absolute; z-index:0; inset:1px -8px; border:2px solid #e6ba55; border-radius:50%; opacity:0; }
.streak-scene-ray { position:absolute; z-index:0; left:50%; top:0; width:100px; height:126px; background:linear-gradient(180deg,rgba(238,189,81,.34),transparent); clip-path:polygon(46% 0,54% 0,100% 100%,0 100%); opacity:0; transform-origin:50% 0; }
.streak-scene-ray.ray-one { transform:translateX(-50%) rotate(-23deg); }
.streak-scene-ray.ray-two { transform:translateX(-50%) rotate(23deg); }
.streak-scene-flash { position:absolute; z-index:3; right:-13px; top:0; color:#e9ad39; font-size:24px; opacity:0; }
.streak-scene-three .arm-right { animation:streak-arm-wave .29s ease-in-out 4 alternate; }
.streak-scene-five { top:22%; color:#a77424; animation:streak-scene-jump 2s cubic-bezier(.2,.85,.24,1) forwards; }
.streak-scene-five .streak-scene-halo { animation:streak-scene-ring 1.2s ease-out .22s forwards; }
.streak-scene-five .arm-left,.streak-scene-five .arm-right { animation:streak-arms-up .55s ease-out .12s forwards; }
.streak-scene-five .streak-scene-flash { animation:streak-flash 1.3s ease-out .45s forwards; }
.streak-scene-grand { left:auto; right:12%; top:22%; color:#6a48af; animation:streak-scene-grand 2.3s cubic-bezier(.16,.87,.2,1) forwards; }
.streak-scene-grand .streak-scene-halo { animation:streak-scene-ring 1.6s ease-out .18s forwards; }
.streak-scene-grand .arm-left,.streak-scene-grand .arm-right { animation:streak-arms-up .45s ease-out .25s forwards; }
.streak-scene-grand .streak-scene-ray { animation:streak-beam 1.7s ease-in-out .3s forwards; }
.streak-scene-grand .streak-scene-flash { animation:streak-flash 1.6s ease-out .5s forwards; }
.streak-toast { position:absolute; z-index:3; left:43%; top:27%; border:1px solid rgba(226,187,87,.65); border-radius:999px; padding:8px 16px; color:#735019; background:#fff9e9; box-shadow:0 10px 25px rgba(109,75,22,.12); font:800 15px/1.2 "Manrope",sans-serif; white-space:nowrap; opacity:0; pointer-events:none; animation:streak-toast-pop 1.85s ease-out forwards; }
.streak-toast-five { border-color:#e4b44e; background:#fff3d5; box-shadow:0 8px 24px rgba(202,143,35,.2); }
.streak-toast-grand { left:35%; top:22%; border:2px solid #e8c873; border-radius:14px; padding:12px 20px; color:#513b93; background:linear-gradient(110deg,#fff7d8,#f4edff 72%); box-shadow:0 10px 32px rgba(111,73,183,.24); font-size:18px; animation-duration:2.2s; }
.streak-toast-grand::before { display:block; margin-bottom:3px; color:#b17c20; font-size:11px; letter-spacing:6px; text-align:center; content:"★ ★ ★"; }
.card-celebration-moment-grand i:nth-child(odd) { left:15%; top:32%; --burst-x:-55px; --burst-y:-65px; animation-duration:1.7s; }
.card-celebration-moment-grand i:nth-child(even) { left:85%; top:32%; --burst-x:55px; --burst-y:-65px; animation-duration:1.7s; }
.card-celebration-moment-grand i:nth-child(4n+1) { --burst-x:100px; --burst-y:-120px; }
.card-celebration-moment-grand i:nth-child(4n+2) { --burst-x:-100px; --burst-y:-120px; }
.card-celebration-moment-grand i:nth-child(4n+3) { --burst-x:-120px; --burst-y:35px; }
.card-celebration-moment-grand i:nth-child(4n+4) { --burst-x:120px; --burst-y:35px; }
.card-celebration-break i { top:-5%; animation:card-star-rain 1.1s ease-in forwards; --fall-distance:250px; }
.card-celebration-break i:nth-child(1) { left:10%; --drift:-35px; }
.card-celebration-break i:nth-child(2) { left:22%; --drift:25px; animation-delay:.07s; }
.card-celebration-break i:nth-child(3) { left:34%; --drift:-12px; animation-delay:.15s; }
.card-celebration-break i:nth-child(4) { left:46%; --drift:34px; animation-delay:.03s; }
.card-celebration-break i:nth-child(5) { left:58%; --drift:-30px; animation-delay:.18s; }
.card-celebration-break i:nth-child(6) { left:70%; --drift:14px; animation-delay:.1s; }
.card-celebration-break i:nth-child(7) { left:82%; --drift:-25px; animation-delay:.2s; }
.card-celebration-break i:nth-child(8) { left:91%; --drift:17px; animation-delay:.05s; }
.card-celebration-milestone i { color:#be8220; font-size:23px; }
@keyframes card-star-burst { 0% { transform:translate(-50%,8px) scale(.2) rotate(-25deg); opacity:0; } 18% { opacity:1; } 70% { transform:translate(var(--burst-x),var(--burst-y)) scale(1.25) rotate(55deg); opacity:1; } 100% { transform:translate(var(--burst-x),calc(var(--burst-y) + 32px)) scale(.65) rotate(130deg); opacity:0; } }
@keyframes streak-warm-glow { 0% { opacity:0; } 28% { opacity:1; } 100% { opacity:0; } }
@keyframes streak-toast-pop { 0% { transform:translate(-50%,14px) scale(.72); opacity:0; } 20% { transform:translate(-50%,-4px) scale(1.1); opacity:1; } 35%,78% { transform:translate(-50%,0) scale(1); opacity:1; } 100% { transform:translate(-50%,-18px) scale(.94); opacity:0; } }
@keyframes streak-scene-wave { 0% { transform:translate(-34px,16px) rotate(-18deg) scale(.6); opacity:0; } 18%,70% { opacity:1; } 30% { transform:translate(0,-7px) rotate(12deg) scale(1.08); } 50% { transform:translate(0,0) rotate(-8deg) scale(1); } 80% { transform:translate(0,0) rotate(0) scale(1); opacity:1; } 100% { transform:translate(0,-7px) scale(.95); opacity:0; } }
@keyframes streak-arm-wave { from { transform:rotate(-35deg); } to { transform:rotate(-76deg); } }
@keyframes streak-scene-jump { 0% { transform:translateY(25px) scale(.45); opacity:0; } 19% { transform:translateY(-13px) scale(1.18); opacity:1; } 34% { transform:translateY(4px) scale(.96); } 48% { transform:translateY(-9px) scale(1.1); } 65%,82% { transform:translateY(0) scale(1.05); opacity:1; } 100% { transform:translateY(-10px) scale(.95); opacity:0; } }
@keyframes streak-scene-grand { 0% { transform:translateY(38px) scale(.3) rotate(-10deg); opacity:0; } 18% { transform:translateY(-17px) scale(1.35) rotate(7deg); opacity:1; } 30% { transform:translateY(4px) scale(1.08) rotate(-4deg); } 45% { transform:translateY(-12px) scale(1.3) rotate(4deg); } 60%,83% { transform:translateY(0) scale(1.22) rotate(0); opacity:1; } 100% { transform:translateY(-15px) scale(1.1); opacity:0; } }
@keyframes streak-arms-up { to { transform:rotate(-55deg); } }
@keyframes streak-scene-ring { 0% { transform:scale(.5); opacity:0; } 25% { opacity:.8; } 100% { transform:scale(1.7); opacity:0; } }
@keyframes streak-flash { 0%,12% { transform:scale(.25) rotate(-60deg); opacity:0; } 28%,58% { transform:scale(1.3) rotate(18deg); opacity:1; } 100% { transform:scale(.7) rotate(120deg); opacity:0; } }
@keyframes streak-beam { 0% { opacity:0; } 26%,72% { opacity:.85; } 100% { opacity:0; } }
@keyframes card-star-rain { 0% { transform:translate(0,-18px) rotate(0); opacity:0; } 18% { opacity:.95; } 100% { transform:translate(var(--drift),var(--fall-distance)) rotate(160deg); opacity:0; } }
.card-effects-toggle { position:absolute; z-index:3; left:30px; bottom:30px; display:grid; width:36px; height:36px; place-items:center; border:1px solid rgba(35,87,71,.12); border-radius:50%; padding:0; color:#6855a4; background:rgba(255,255,255,.86); box-shadow:0 5px 14px rgba(35,60,50,.06); cursor:pointer; }
.card-effects-toggle span { position:relative; font-size:18px; line-height:1; }
.card-effects-toggle.is-muted { color:#7b8297; }
.card-effects-toggle.is-muted::after { position:absolute; width:22px; height:1.5px; background:currentColor; transform:rotate(-45deg); content:""; }
.card-effects-toggle.is-on-dark { border-color:rgba(255,255,255,.3); color:white; background:rgba(255,255,255,.12); box-shadow:none; }
.card-effects-toggle:focus-visible { outline:3px solid #d5a13c; outline-offset:3px; }
body.flashcard-focus .card-streak { display:inline-flex; margin:0 10px; transform:scale(1.17); }
body.flashcard-focus .card-celebration i { font-size:26px; }
body.flashcard-focus .card-celebration-break i { --fall-distance:420px; }
@media (max-width: 660px) {
  .card-toolbar { flex-wrap: wrap; }
  .card-counter { min-width: 0; }
  .card-toolbar-actions { order: 2; width: auto; justify-content: flex-start; }
  .card-streak { order: 3; margin-left: auto; }
  .card-effects-toggle { left:20px; bottom:20px; }
  .streak-scene,.streak-scene-five { left:5%; top:20%; scale:.72; }
  .streak-scene-grand { left:auto; right:5%; top:20%; scale:.72; }
  .streak-toast { left:59%; top:27%; font-size:13px; padding:6px 10px; }
  .streak-toast-grand { left:35%; top:22%; font-size:14px; padding:8px 11px; }
  .streak-toast-grand::before { font-size:9px; letter-spacing:3px; }
  body.flashcard-focus .card-streak { margin:0 0 0 auto; transform:scale(1.06); }
  body.flashcard-focus .card-celebration-break i { --fall-distance:300px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-streak-gain .streak-star.is-new,.card-streak-gain .streak-eiffel,.card-streak-break .streak-eiffel,.card-streak-break strong,.card-streak-moment-five::before,.card-streak-moment-grand::before,.streak-fall i,.streak-sparkles i { animation:none; }
  .streak-fall,.streak-sparkles,.card-celebration { display:none; }
  .streak-toast { animation:none; opacity:1; transform:translateX(-50%); }
}