.viewer-header{position:relative}
.time-pill{display:grid;gap:2px;padding:5px 9px;border-radius:12px}
.battle-day{font:700 7px 'DM Sans';letter-spacing:.08em;color:var(--red);text-align:center;white-space:nowrap}
.battle-time-row{display:flex;align-items:center;justify-content:center;gap:5px}
.viewer-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);overflow:hidden}
.viewer-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--red),#f0c169);transition:width .22s ease}
.like-button{position:relative;isolation:isolate;transition:transform .18s,background .18s}
.like-button:active{transform:scale(.92)}
.like-button.heart-burst{animation:heartPop .55s cubic-bezier(.2,.8,.2,1)}
.like-button.heart-burst:before{content:"";position:absolute;inset:-8px;border:3px solid #ff7668;border-radius:999px;animation:heartRing .55s ease-out forwards;z-index:-1}
.rank-ribbon.rank-up{animation:rankGlow .65s ease}
.bottom-nav button:active,.primary-button:active,.ranking-card:active,.pref-tile:active{transform:scale(.96)}

.success-card{text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 0,#fff 0,#f8f5ed 60%)}
.success-mark{width:66px;height:66px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-size:30px;font-weight:800;box-shadow:0 12px 28px rgba(219,73,57,.3);animation:successPop .55s cubic-bezier(.2,.9,.2,1.2)}
.success-card h2{margin:5px 0 16px;font-size:30px;line-height:1.35}.success-card>p:not(.eyebrow){color:var(--muted);font-size:11px;line-height:1.8}
.streak-result{display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:end;margin:18px 0;padding:16px;text-align:left;border-radius:18px;background:#fff}
.streak-result span{font-size:10px;color:var(--muted)}.streak-result strong{grid-column:2;grid-row:1/3;font:800 28px 'DM Sans';color:var(--red)}.streak-result small{font:700 10px 'Noto Sans JP'}
.streak-result i{display:block;height:6px;border-radius:99px;background:#eee9df;overflow:hidden}.streak-result i b{display:block;width:86%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red),#f0c169);animation:streakFill .7s .15s both}

[data-screen="results"]{position:relative}.celebration-layer{position:fixed;z-index:45;inset:68px 0 78px;pointer-events:none;overflow:hidden}.celebration-layer i{position:absolute;left:var(--x);top:-16px;width:8px;height:14px;border-radius:2px;background:var(--color);animation:confettiFall 1.5s var(--delay) cubic-bezier(.2,.7,.4,1) forwards}.winner-card.winner-reveal{animation:winnerReveal .75s cubic-bezier(.2,.8,.2,1)}

@keyframes heartPop{0%{transform:scale(1)}35%{transform:scale(1.2) rotate(-4deg)}70%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes heartRing{from{opacity:.8;transform:scale(.7)}to{opacity:0;transform:scale(1.35)}}
@keyframes rankGlow{40%{transform:scale(1.12);box-shadow:0 0 0 9px rgba(240,193,105,.2);background:#d5a33d}100%{transform:scale(1)}}
@keyframes successPop{from{opacity:0;transform:scale(.35) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes streakFill{from{width:0}}
@keyframes confettiFall{0%{opacity:0;transform:translateY(-10px) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(90dvh) rotate(540deg)}}
@keyframes winnerReveal{0%{opacity:.2;transform:scale(.96)}55%{box-shadow:0 0 0 7px rgba(213,163,61,.22),0 25px 60px rgba(213,163,61,.3)}100%{opacity:1;transform:scale(1)}}

@media(prefers-reduced-motion:reduce){.viewer-progress i{transition:none}.success-mark,.streak-result i b{animation:none}.streak-result i b{width:86%}}