/* Season ceremony overlay (src/ceremony.js). Tokens and the Barlow face come from styles.css; every animation starts from
   the hidden state in its keyframes, so the global reduced-motion rule (animation:none) leaves the final state. */
.ceremony{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:56px 16px 48px;background:rgba(25,31,40,.8);color:var(--ink);overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;cursor:pointer;animation:cer-fade .25s ease-out both;transition:background .35s}
.ceremony[data-stage=top],.ceremony[data-stage=honor-gold]{background:radial-gradient(circle at 50% 36%,#2f3a4a 0,#151b24 58%,#0c1016 100%)}
.ceremony[data-stage=small]{place-items:end center;padding-bottom:64px}
.cer-stage{width:min(420px,100%);display:grid;justify-items:center;text-align:center}
.cer-bar{position:absolute;top:max(14px,env(safe-area-inset-top));left:16px;right:120px;display:flex;gap:4px}
.cer-bar i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.26);overflow:hidden}
.cer-bar i::after{content:'';display:block;height:100%;width:0;background:#fff}
.cer-bar i.done::after{width:100%}
.cer-bar i.now::after{animation:cer-fill var(--hold,2s) linear forwards}
.cer-skip{position:absolute;z-index:5;top:max(6px,calc(env(safe-area-inset-top) - 8px));right:12px;min-height:40px;padding:0 16px;border-radius:20px;background:rgba(255,255,255,.16);color:#fff;font-size:14px;font-weight:700}
.cer-skip:hover{background:rgba(255,255,255,.26)}
.cer-hint{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:12px;color:rgba(255,255,255,.66)}
.cer-eyebrow{font-size:13px;font-weight:700;color:var(--accent);margin:0;letter-spacing:-.2px}
.cer-label{margin:0;font-size:17px;font-weight:800;letter-spacing:-.4px;line-height:1.35;word-break:keep-all}
.cer-sub{margin:0;font-size:13px;line-height:1.55;color:var(--muted);word-break:keep-all}
.cer-art{display:grid;place-items:center;line-height:0}
.cer-mark{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--theme-soft);color:var(--theme-primary);font-size:20px;font-weight:800}
.cer-mark.first{background:#fff4d6;color:#8a5a00}
.cer-mark.tier{font:700 28px/1 Barlow,sans-serif;font-variant-numeric:tabular-nums;background:linear-gradient(140deg,var(--theme-soft),var(--theme-soft));box-shadow:inset 0 0 0 3px var(--theme-primary)}
.cer-head{margin:0 0 12px;color:#fff;font-size:15px;font-weight:800;letter-spacing:-.3px;animation:cer-fade .3s ease-out both}
.cer-head span{font:700 16px Barlow,sans-serif;opacity:.7}

/* season finale: the sweep fills, then the rank pops (overshoot) */
.cer-finale{width:100%;background:var(--paper,#fff);border-radius:24px;padding:24px 22px 22px;display:grid;justify-items:center;gap:4px;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:cer-rise .32s ease-out both}
.cer-sweep{width:100%;height:6px;border-radius:3px;background:var(--theme-soft);overflow:hidden;margin:10px 0 12px}
.cer-sweep i{display:block;height:100%;background:var(--accent);animation:cer-fill .62s ease-out both}
.cer-league{margin:0;font-size:15px;font-weight:700;color:var(--muted)}
.cer-rank{margin:0;line-height:1;display:flex;align-items:baseline;gap:2px;animation:cer-pop .64s cubic-bezier(.2,1.6,.4,1) .6s both}
.cer-rank b{font:700 104px/1 Barlow,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-2px}
.cer-rank span{font-size:26px;font-weight:800}
.cer-result{margin:4px 0;font-size:34px;font-weight:800;letter-spacing:-1px;animation:cer-pop .64s cubic-bezier(.2,1.6,.4,1) .6s both}
.cer-finale>.cer-sub{font-size:15px;font-weight:700;color:var(--ink);animation:cer-rise .3s ease-out .9s both}
.cer-finale.champion .cer-rank b,.cer-finale.champion .cer-result{color:#c98a00}
.cer-finale.champion .cer-sweep i{background:#f5b700}

/* top: spotlight, slow rays, trophy reveal, avatar cheering, confetti */
.cer-top{display:grid;justify-items:center;gap:8px;color:#fff}
.cer-glow{position:relative;width:230px;height:230px;display:grid;place-items:center;margin-bottom:6px}
.cer-glow::before{content:'';position:absolute;inset:-34px;border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb,var(--ray,#ffe08a) 22%,transparent) 0 9deg,transparent 9deg 22deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 70%);mask:radial-gradient(circle,#000 18%,transparent 70%);animation:cer-spin 18s linear infinite,cer-fade .48s ease-out both}
.cer-glow::after{content:'';position:absolute;inset:30px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ray,#ffe08a) 45%,transparent),transparent 70%);animation:cer-fade .48s ease-out both}
.cer-glow .cer-art{position:relative;z-index:1;filter:drop-shadow(0 12px 26px rgba(0,0,0,.45));animation:cer-trophy .56s cubic-bezier(.2,1.5,.4,1) .12s both}
.cer-avatar{position:absolute;z-index:2;left:-26px;bottom:-14px;width:104px;line-height:0;animation:cer-rise .45s ease-out .5s both}
.cer-avatar svg{width:100%;height:auto}
.cer-top .cer-eyebrow{color:#ffe08a;animation:cer-rise .3s ease-out .3s both}
.cer-top .cer-label{font-size:32px;letter-spacing:-1px;animation:cer-rise .32s ease-out .38s both}
.cer-top .cer-sub{font-size:15px;color:rgba(255,255,255,.78);animation:cer-rise .32s ease-out .46s both}

/* mid: cards pop in one after another */
.cer-cards{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cer-cards.n1{grid-template-columns:minmax(0,300px);justify-content:center}
.cer-card{background:var(--paper,#fff);border-radius:20px;padding:18px 12px 16px;display:grid;justify-items:center;align-content:start;gap:6px;box-shadow:0 18px 44px rgba(0,0,0,.26);animation:cer-pop .5s cubic-bezier(.2,1.6,.4,1) calc(var(--i,0) * 180ms) both}
.cer-cards.n1 .cer-card{padding:26px 20px 22px}
.cer-cards.n1 .cer-label{font-size:22px}
.cer-card .cer-art,.cer-card .cer-mark{margin-bottom:4px}

/* small: stacked toasts from the bottom */
.cer-toasts{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:8px}
.cer-toast{display:flex;align-items:center;gap:12px;text-align:left;background:var(--paper,#fff);border-radius:16px;padding:10px 14px;box-shadow:0 12px 30px rgba(0,0,0,.22);animation:cer-toast .42s cubic-bezier(.2,1.3,.4,1) calc(var(--i,0) * 140ms) both}
.cer-toast .cer-mark{width:38px;height:38px;font-size:15px;flex-shrink:0}
.cer-toast .cer-art{flex-shrink:0;width:38px}
.cer-toast b{display:block;font-size:15px;letter-spacing:-.3px}
.cer-toast span{display:block;font-size:12px;color:var(--muted)}

/* 칭호 획득 banner: metal from the title tier (--m1 light, --m2 base, --m3 dark) */
.cer-honor{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;gap:14px;text-align:left;background:var(--paper,#fff);border-radius:20px;padding:18px 18px 18px 16px;box-shadow:inset 0 0 0 2px var(--m2),0 22px 50px rgba(0,0,0,.35);animation:cer-pop .42s cubic-bezier(.2,1.6,.4,1) both}
.cer-honor::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.7) 45%,transparent 60%);transform:translateX(-120%);animation:cer-shine .9s ease-out .35s both;pointer-events:none}
.cer-badge{flex-shrink:0;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--m1),var(--m2) 55%,var(--m3));box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 6px 14px rgba(0,0,0,.18)}
.cer-badge svg{width:30px;height:30px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.cer-honor .cer-eyebrow{color:var(--m3)}
.cer-honor .cer-label{font-size:22px;margin:2px 0}
.cer-honor.silver .cer-eyebrow{color:#4e5968}
.cer-honor.gold{background:linear-gradient(180deg,#fffdf6,#fff4d6)}
.cer-honor.bronze{background:linear-gradient(180deg,#fffaf6,#fdebdc)}
.cer-honor.silver{background:linear-gradient(180deg,#fff,#eef1f4)}

/* confetti: CSS pieces, top tier and gold titles only */
.cer-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.cer-confetti i{position:absolute;top:-18px;left:var(--x);width:8px;height:14px;border-radius:2px;opacity:0;animation:cer-fall var(--t) cubic-bezier(.3,.6,.6,1) var(--d) forwards}
.cer-confetti i:nth-child(3n){width:9px;height:9px;border-radius:50%}
.cer-confetti i:nth-child(4n){width:6px;height:11px}

/* reduced motion: everything listed at once */
.ceremony.still{place-items:start center;align-content:start;overflow:auto;cursor:default;padding:24px 16px 16px;background:rgba(25,31,40,.94)}
.ceremony.still .cer-skip{position:sticky;top:auto;right:auto;bottom:max(12px,env(safe-area-inset-bottom));width:min(460px,100%);min-height:52px;margin-top:16px;border-radius:14px;background:var(--accent);font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ceremony.still .cer-stage{gap:12px;width:min(460px,100%)}
.ceremony.still .cer-top{width:100%;padding:22px 16px 20px;border-radius:24px;background:radial-gradient(circle at 50% 30%,#2f3a4a,#151b24)}
.ceremony.still .cer-glow{width:170px;height:170px}
.ceremony.still .cer-glow::before{animation:none}
.ceremony.still .cer-top .cer-label{font-size:26px}
.ceremony.still .cer-head{margin:8px 0 0}

@media (min-width:768px){
  .cer-stage{width:min(480px,100%)}
  .cer-glow{width:270px;height:270px}
  .cer-glow .cer-art svg{width:190px;height:auto}
  .cer-top .cer-label{font-size:40px}
  .cer-cards:not(.n1){grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .cer-bar{left:50%;right:auto;width:min(600px,calc(100% - 300px));transform:translateX(-50%)}
  .cer-skip{right:20px}
}
@keyframes cer-fade{from{opacity:0}}
@keyframes cer-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes cer-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1}}
@keyframes cer-trophy{0%{opacity:0;transform:translateY(24px) scale(.4) rotate(-8deg)}}
@keyframes cer-toast{from{opacity:0;transform:translateY(28px) scale(.96)}}
@keyframes cer-fill{from{width:0}to{width:100%}}
@keyframes cer-spin{to{transform:rotate(360deg)}}
@keyframes cer-shine{to{transform:translateX(120%)}}
@keyframes cer-fall{0%{opacity:1;transform:translate(0,0) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translate(var(--dx),108vh) rotate(calc(var(--r) + 600deg))}}
@media (prefers-reduced-motion:reduce){.ceremony,.ceremony *,.ceremony *::before,.ceremony *::after{animation:none!important;transition:none!important}}