.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(8px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--sp-6);animation:fade-in var(--t-base) var(--ease-out)}
.modal{background:var(--surface);border-radius:var(--r-xl);max-width:520px;width:100%;max-height:90vh;overflow:auto;animation:modal-in var(--t-slow) var(--ease-out)}
.modal-header{padding:var(--sp-6);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-title{font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.modal-close{width:32px;height:32px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer}
.modal-close:hover{background:var(--surface-alt)}
.modal-body{padding:var(--sp-6)}
.modal-footer{padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:var(--sp-3)}

.modal.modal-celebrate{max-width:480px;overflow:hidden;text-align:center;background:linear-gradient(135deg,#fff 0%,#faf5ff 100%);animation:modal-celebrate-in 600ms cubic-bezier(.34,1.56,.64,1)}
.modal-celebrate-hero{padding:var(--sp-8) var(--sp-6);position:relative;background:var(--gradient-hero);color:#fff;overflow:hidden}
.modal-celebrate-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent 60%);animation:shimmer 3s ease-in-out infinite}
.celebrate-icon{font-size:5rem;margin-bottom:var(--sp-4);animation:pop-in 600ms cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 4px 20px rgba(0,0,0,.2))}
.celebrate-title{font-size:var(--fs-2xl);font-weight:var(--fw-extrabold);margin-bottom:var(--sp-2);color:#fff}
.celebrate-sub{font-size:var(--fs-base);opacity:.9;color:#fff}
.celebrate-body{padding:var(--sp-6)}
.celebrate-level-badge{display:inline-block;padding:var(--sp-3) var(--sp-6);background:var(--gradient-gold);color:#fff;border-radius:var(--r-full);font-weight:var(--fw-bold);margin:var(--sp-4) 0;box-shadow:0 8px 24px rgba(245,158,11,.4)}

.xp-gain{position:fixed;bottom:120px;right:var(--sp-6);padding:var(--sp-3) var(--sp-5);background:var(--gradient-primary);color:#fff;font-weight:var(--fw-bold);border-radius:var(--r-full);box-shadow:var(--shadow-lg);z-index:var(--z-toast);pointer-events:none;animation:xp-gain var(--t-slow) var(--ease-out),xp-fade 800ms 1.2s forwards}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:calc(var(--z-modal) + 1);overflow:hidden}
.confetti-piece{position:absolute;top:-10%;width:10px;height:10px;animation:confetti-fall 3s linear forwards}

.shake{animation:shake 400ms ease}

@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes modal-celebrate-in{0%{opacity:0;transform:scale(.5) rotate(-10deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes pop-in{0%{transform:scale(0) rotate(-90deg)}70%{transform:scale(1.2) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
@keyframes shimmer{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.2);opacity:.8}}
@keyframes xp-gain{from{opacity:0;transform:translateY(40px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes xp-fade{to{opacity:0;transform:translateY(-20px)}}
@keyframes confetti-fall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

@keyframes level-up-pulse{0%{box-shadow:0 0 0 0 rgba(99,102,241,.7)}70%{box-shadow:0 0 0 20px rgba(99,102,241,0)}100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}}
.pulse{animation:level-up-pulse 1.5s infinite}

@keyframes slide-in-right{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.slide-in{animation:slide-in-right var(--t-base) var(--ease-out)}