/* Fantasy Impact League: moments (full-screen celebrations, the sad paper airplane, the milestone banner).
   Pairs with js/moments.js. Everything is drawn in inline SVG and moved with CSS keyframes: no image,
   GIF, audio or font files. Brand: Nunito; deep indigo, indigo, slate indigo, soft lilac, impact sky,
   gold for champagne and coins. Power pink appears only on the Continue button.
   The rule that keeps "skip" and reduced motion simple: every drawn element's plain style IS its final
   frame, and each animation runs from a start state to that style. Turning animations off
   (.pcm-final, or prefers-reduced-motion) shows the final frame. Elements marked .pcm-amb are
   gentle idle loops (twinkles, bubbles) that keep running after a skip but not under reduced motion. */

.pcm-overlay, .pcm-banner {
  --pcm-head: var(--head, #2e0052);
  --pcm-ink: var(--ink, #1b1c1c);
  --pcm-muted: var(--muted, #4c4451);
  --pcm-link: var(--link, #4b0082);
  --pcm-focus: var(--focus, #4b0082);
  --pcm-pink: var(--pink, #ca0362);
  --pcm-on-pink: var(--on-pink, #ffffff);
  --pcm-font: var(--font, "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif);
  --pcm-veil: radial-gradient(120% 85% at 50% 26%, #ffffff 0%, #f7efff 55%, #ecdefb 100%);
  --pcm-frame: 0 22px 46px -24px rgba(46, 0, 82, 0.6), 0 0 0 1px rgba(46, 0, 82, 0.08);
  /* scene colors (light) */
  --pcm-line: #2e0052;
  --pcm-mark: #2e0052;
  --pcm-stage-paid: linear-gradient(180deg, #e7f5fe 0%, #f7f0ff 62%, #efe3fb 100%);
  --pcm-stage-fail: linear-gradient(180deg, #8fd0f7 0%, #c2e6fc 55%, #e8f6fe 100%);
  --pcm-desk: #e4d4f6; --pcm-desk-edge: #cdb8ea;
  --pcm-jar-back: rgba(255, 255, 255, 0.62); --pcm-jar-front: rgba(255, 255, 255, 0.24);
  --pcm-jar-line: #8f80d6; --pcm-jar-lip: #f4eefc; --pcm-jar-glow: rgba(113, 193, 244, 0.28);
  --pcm-soft-shadow: rgba(46, 0, 82, 0.13);
  --pcm-hill: #d6c9ee; --pcm-hill2: #c6b5e6; --pcm-tuft: #9f8bd3;
  --pcm-cloud: rgba(255, 255, 255, 0.95); --pcm-smoke: #d8d0e4; --pcm-dirt: #a08fc9;
  --pcm-plane-shade: #ddd2f0;
  --pcm-banner-bg: linear-gradient(90deg, #ffffff 0%, #f8f0ff 100%);
  --pcm-banner-line: #d9c6ff;
  --pcm-shine: rgba(255, 255, 255, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pcm-overlay, :root:not([data-theme="light"]) .pcm-banner {
    --pcm-head: var(--head, #f4e6ff); --pcm-ink: var(--ink, #faf9f8); --pcm-muted: var(--muted, #cec3d3);
    --pcm-link: var(--link, #d9c6ff); --pcm-focus: var(--focus, #f4e6ff);
    --pcm-veil: radial-gradient(120% 85% at 50% 26%, #4b0082 0%, #2e0052 55%, #160a22 100%);
    --pcm-frame: 0 22px 50px -22px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(244, 230, 255, 0.16);
    --pcm-mark: #f4e6ff;
    --pcm-stage-paid: linear-gradient(180deg, #3a2a8a 0%, #2e0052 100%);
    --pcm-stage-fail: linear-gradient(180deg, #2a2468 0%, #43378f 62%, #5d4cbf 100%);
    --pcm-desk: #4b0082; --pcm-desk-edge: #5d4cbf;
    --pcm-jar-back: rgba(244, 230, 255, 0.1); --pcm-jar-front: rgba(244, 230, 255, 0.07);
    --pcm-jar-line: #a99cf0; --pcm-jar-lip: rgba(244, 230, 255, 0.2); --pcm-jar-glow: rgba(113, 193, 244, 0.2);
    --pcm-soft-shadow: rgba(0, 0, 0, 0.3);
    --pcm-hill: #3d2a80; --pcm-hill2: #2e0052; --pcm-tuft: #6d5bd6;
    --pcm-cloud: rgba(244, 230, 255, 0.22); --pcm-smoke: #bdb3d6; --pcm-dirt: #8f80d6;
    --pcm-banner-bg: linear-gradient(90deg, #241a2b 0%, #2e0052 100%);
    --pcm-banner-line: #5d4cbf;
    --pcm-shine: rgba(255, 255, 255, 0.18);
  }
}
:root[data-theme="dark"] .pcm-overlay, :root[data-theme="dark"] .pcm-banner {
  --pcm-head: var(--head, #f4e6ff); --pcm-ink: var(--ink, #faf9f8); --pcm-muted: var(--muted, #cec3d3);
  --pcm-link: var(--link, #d9c6ff); --pcm-focus: var(--focus, #f4e6ff);
  --pcm-veil: radial-gradient(120% 85% at 50% 26%, #4b0082 0%, #2e0052 55%, #160a22 100%);
  --pcm-frame: 0 22px 50px -22px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(244, 230, 255, 0.16);
  --pcm-mark: #f4e6ff;
  --pcm-stage-paid: linear-gradient(180deg, #3a2a8a 0%, #2e0052 100%);
  --pcm-stage-fail: linear-gradient(180deg, #2a2468 0%, #43378f 62%, #5d4cbf 100%);
  --pcm-desk: #4b0082; --pcm-desk-edge: #5d4cbf;
  --pcm-jar-back: rgba(244, 230, 255, 0.1); --pcm-jar-front: rgba(244, 230, 255, 0.07);
  --pcm-jar-line: #a99cf0; --pcm-jar-lip: rgba(244, 230, 255, 0.2); --pcm-jar-glow: rgba(113, 193, 244, 0.2);
  --pcm-soft-shadow: rgba(0, 0, 0, 0.3);
  --pcm-hill: #3d2a80; --pcm-hill2: #2e0052; --pcm-tuft: #6d5bd6;
  --pcm-cloud: rgba(244, 230, 255, 0.22); --pcm-smoke: #bdb3d6; --pcm-dirt: #8f80d6;
  --pcm-banner-bg: linear-gradient(90deg, #241a2b 0%, #2e0052 100%);
  --pcm-banner-line: #5d4cbf;
  --pcm-shine: rgba(255, 255, 255, 0.18);
}

/* ---------------------------------------------------------------- overlay frame */
html.pcm-lock, html.pcm-lock body { overflow: hidden; }
.pcm-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--pcm-veil); color: var(--pcm-ink); font-family: var(--pcm-font);
  font-size: 16px; line-height: 1.5; text-align: center;
  -webkit-tap-highlight-color: transparent; cursor: default;
  animation: pcm-veil-in 0.25s ease-out both;
}
.pcm-overlay *, .pcm-overlay *::before, .pcm-overlay *::after { box-sizing: border-box; }
.pcm-overlay.pcm-chained { animation: none; }
.pcm-overlay.pcm-closing { animation: pcm-veil-out 0.18s ease-in both; pointer-events: none; }
.pcm-top { display: flex; justify-content: flex-end; padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 0; min-height: 50px; }
.pcm-body {
  flex: 1 0 auto; width: 100%; max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 22px);
}
.pcm-stage {
  position: relative; flex: none; overflow: hidden; border-radius: 22px;
  width: min(100%, 420px, calc(44vh * 320 / 220)); aspect-ratio: 320 / 220;
  box-shadow: var(--pcm-frame);
  animation: pcm-stage-in 0.5s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}
.pcm-svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.pcm-k-bigWin .pcm-stage { background: radial-gradient(110% 85% at 50% 30%, #6a52d6 0%, #4b0082 48%, #2e0052 100%); }
.pcm-k-goal .pcm-stage { background: radial-gradient(130% 100% at 50% 0%, #4b0082 0%, #2e0052 55%, #1b0033 100%); }
.pcm-k-paidOff .pcm-stage { background: var(--pcm-stage-paid); }
.pcm-k-failure .pcm-stage { background: var(--pcm-stage-fail); }

.pcm-text { width: 100%; animation: pcm-text-in 0.4s 0.12s ease-out both; }
.pcm-title {
  margin: 20px auto 8px; max-width: 22ch; color: var(--pcm-head); font-family: var(--pcm-font);
  font-size: clamp(1.55rem, 7vw, 2.05rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.01em;
  text-wrap: balance; overflow-wrap: anywhere;
}
.pcm-title:focus { outline: none; }
.pcm-k-failure .pcm-title { animation: pcm-wobble 0.7s 2s ease-in-out; }
.pcm-lines { max-width: 34ch; margin: 0 auto; }
.pcm-lines p { margin: 0 0 0.4rem; font-size: 1.06rem; text-wrap: pretty; overflow-wrap: anywhere; }
.pcm-lines .pcm-note { margin-top: 0.7rem; font-size: 0.92rem; color: var(--pcm-muted); }
.pcm-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: min(100%, 340px); margin-top: 18px; }
.pcm-btn {
  font: inherit; font-family: var(--pcm-font); font-weight: 800; min-height: 48px; padding: 10px 20px;
  border-radius: 12px; border: 2px solid transparent; cursor: pointer; line-height: 1.25; max-width: 100%;
  -webkit-appearance: none; appearance: none;
}
.pcm-btn:focus-visible { outline: 3px solid var(--pcm-focus); outline-offset: 2px; }
.pcm-primary { background: var(--pcm-pink); color: var(--pcm-on-pink); font-size: 1.08rem; box-shadow: 0 8px 18px -10px rgba(202, 3, 98, 0.75); }
.pcm-primary:active { transform: translateY(1px); }
.pcm-quiet { background: transparent; color: var(--pcm-link); text-decoration: underline; text-underline-offset: 3px; }
.pcm-sound { min-height: 44px; padding: 6px 12px; font-size: 0.92rem; }
@media (max-width: 360px) {
  .pcm-title { margin-top: 14px; }
  .pcm-lines p { font-size: 1rem; }
}
@media (max-height: 640px) {
  .pcm-top { min-height: 44px; }
  .pcm-title { margin-top: 12px; font-size: 1.45rem; }
  .pcm-actions { margin-top: 12px; }
}

/* ---------------------------------------------------------------- drawing defaults */
.pcm-svg * { transform-box: view-box; transform-origin: 0 0; }
.pcm-svg text { font-family: var(--pcm-font); font-weight: 900; }
.pcm-shadow { fill: rgba(0, 0, 0, 0.28); }
.pcm-soft-shadow { fill: var(--pcm-soft-shadow); }
.pcm-floor { fill: rgba(244, 230, 255, 0.08); }
.pcm-floor-line { stroke: rgba(244, 230, 255, 0.22); stroke-width: 1; }
.pcm-wire { fill: none; stroke: rgba(244, 230, 255, 0.4); stroke-width: 1.2; }
.pcm-bulb-glow { opacity: 0.32; }
.pcm-star { fill: #fff6d1; }
.pcm-glint { fill: #fff6d1; }
.pcm-g-solid { fill: rgba(255, 255, 255, 0.88); }
.pcm-g-top { fill: #fff1c2; }
.pcm-g-bowl { fill: rgba(255, 255, 255, 0.13); stroke: rgba(255, 255, 255, 0.95); stroke-width: 2.4; stroke-linejoin: round; }
.pcm-g-rim { fill: rgba(255, 255, 255, 0.1); stroke: rgba(255, 255, 255, 0.95); stroke-width: 1.5; }
.pcm-g-shine { fill: none; stroke: rgba(255, 255, 255, 0.8); stroke-width: 2.2; stroke-linecap: round; }
.pcm-bub { fill: #fffbe6; opacity: 0.85; }
.pcm-fizz { fill: rgba(255, 255, 255, 0.22); stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.1; }
.pcm-a-burst line, .pcm-a-fw line { stroke-width: 2.3; stroke-linecap: round; }
.pcm-ray-gold line { stroke: #ffe9a3; }
.pcm-ray-ink line { stroke: var(--pcm-mark); stroke-width: 2.2; }
.pcm-bottle-body { stroke: #a99cf0; stroke-width: 1.4; }
.pcm-label { fill: #f4e6ff; }
.pcm-label-band { fill: #f0b43a; }
.pcm-label-crest { fill: none; stroke: #4b0082; stroke-width: 1.5; }
.pcm-hi { fill: none; stroke: rgba(255, 255, 255, 0.38); stroke-linecap: round; }
.pcm-cork { fill: #e9c58f; stroke: #a9783c; stroke-width: 1.3; }
.pcm-cork-band { stroke: #c99a5b; stroke-width: 1.4; }
.pcm-foam { fill: #fffaf0; }
.pcm-ring { fill: none; stroke: #fffaf0; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.pcm-conf-0 { fill: #ffd45c; } .pcm-conf-1 { fill: #71c1f4; } .pcm-conf-2 { fill: #d9c6ff; } .pcm-conf-3 { fill: #fff6d1; } .pcm-conf-4 { fill: #8f82e0; }
/* paid off */
.pcm-desk { fill: var(--pcm-desk); }
.pcm-desk-edge { stroke: var(--pcm-desk-edge); stroke-width: 2; }
.pcm-paper { fill: #fffdf8; stroke: #d7c9e6; stroke-width: 1.2; stroke-linejoin: round; }
.pcm-paper-fold { fill: #efe6f8; stroke: #d7c9e6; stroke-width: 1.2; stroke-linejoin: round; }
.pcm-iou { fill: #2e0052; font-size: 25px; letter-spacing: 1.5px; }
.pcm-textbar { fill: #e2d8ee; }
.pcm-sign { fill: none; stroke: #4b0082; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pcm-sign-line { stroke: #d7c9e6; stroke-width: 1.2; }
.pcm-stamp-ink { fill: none; stroke: #4b0082; }
.pcm-stamp-text { fill: #4b0082; font-size: 16px; letter-spacing: 0.4px; }
.pcm-speck { fill: #fffdf8; }
.pcm-tool-rubber { fill: #4b0082; }
.pcm-tool-block { fill: #5d4cbf; stroke: #3a2a85; stroke-width: 1; }
.pcm-tool-neck { fill: #d6a56a; stroke: #a9783c; stroke-width: 1; }
.pcm-tool-knob { fill: #e9be82; stroke: #a9783c; stroke-width: 1.2; }
.pcm-tool-hi { fill: rgba(255, 255, 255, 0.45); }
.pcm-jar-glow { fill: var(--pcm-jar-glow); }
.pcm-jar-back { fill: var(--pcm-jar-back); }
.pcm-jar-front { fill: var(--pcm-jar-front); stroke: var(--pcm-jar-line); stroke-width: 2.2; stroke-linejoin: round; }
.pcm-jar-lip { fill: var(--pcm-jar-lip); stroke: var(--pcm-jar-line); stroke-width: 2; }
.pcm-jar-hi { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 3; stroke-linecap: round; }
.pcm-coin { stroke: #c4881a; stroke-width: 1.4; }
.pcm-coin-ring { fill: none; stroke: #e3a62c; stroke-width: 1.3; }
.pcm-coin-hi { fill: none; stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.6; stroke-linecap: round; }
/* failure */
.pcm-cloud { fill: var(--pcm-cloud); }
.pcm-hill { fill: var(--pcm-hill); }
.pcm-hill2 { fill: var(--pcm-hill2); }
.pcm-tuft { fill: none; stroke: var(--pcm-tuft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pcm-smoke { fill: var(--pcm-smoke); }
.pcm-dirt { fill: var(--pcm-dirt); }
.pcm-plane-wing { fill: #ffffff; stroke: var(--pcm-line); stroke-width: 1.6; stroke-linejoin: round; }
.pcm-plane-fold { fill: var(--pcm-plane-shade); stroke: var(--pcm-line); stroke-width: 1.6; stroke-linejoin: round; }
.pcm-plane-crease { fill: none; stroke: #c8bce2; stroke-width: 1; stroke-linecap: round; }
.pcm-crumple-line { fill: none; stroke: var(--pcm-line); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.pcm-face { fill: #ffffff; stroke: var(--pcm-line); stroke-width: 2.2; }
.pcm-blush { fill: #eab3d4; opacity: 0.55; }
.pcm-eye { fill: var(--pcm-line); }
.pcm-eye-glint { fill: #ffffff; }
.pcm-brow { fill: none; stroke: var(--pcm-line); stroke-width: 2; stroke-linecap: round; }
.pcm-frown { fill: none; stroke: var(--pcm-line); stroke-width: 2.2; stroke-linecap: round; }
.pcm-tear { fill: #71c1f4; stroke: #2f8fd4; stroke-width: 1; }

/* ---------------------------------------------------------------- moving parts (plain style = final frame) */
.pcm-a-glow { opacity: 0.55; animation: pcm-glow 1s ease-out both; }
.pcm-a-burst { opacity: 0; animation: pcm-burst 0.6s ease-out both; }
.pcm-a-glint { animation: pcm-glint 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.pcm-a-rise { opacity: 0; animation: pcm-rise 1.1s ease-out both; }
.pcm-a-float { opacity: 0.9; animation: pcm-float 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.pcm-a-pop { animation: pcm-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.pcm-a-fade { animation: pcm-fade 0.6s ease-out both; }
.pcm-a-in { animation: pcm-fade 0.25s ease-out both; }
.pcm-a-out { opacity: 0; animation: pcm-out 0.25s ease-in both; }
.pcm-glass-L { transform: translate(0px, 0px) rotate(13.8deg); animation: pcm-glass-l 1.25s both; }
.pcm-glass-R { transform: translate(0px, 0px) rotate(-13.8deg); animation: pcm-glass-r 1.25s both; }
.pcm-a-bottle { transform: translate(0px, 0px) rotate(0deg); animation: pcm-bottle 0.5s ease-out both; }
.pcm-a-cork { opacity: 0; transform: translate(-36px, -200px) rotate(-430deg); animation: pcm-cork 0.95s both; }
.pcm-a-ring { opacity: 0; animation: pcm-ring 0.45s ease-out both; }
.pcm-a-rocket { opacity: 0; animation: pcm-rocket 0.4s ease-out both; }
.pcm-a-fw { opacity: 0; animation: pcm-fw 1.1s both; }
.pcm-a-conf { transform: translate(0px, 0px) rotate(360deg); animation: pcm-conf 1.3s both; }
.pcm-a-paper { animation: pcm-paper 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.pcm-a-stamp { opacity: 0; transform: translate(70px, -170px) rotate(20deg) scale(1, 1); animation: pcm-stamp 1s both; }
.pcm-a-mark { opacity: 0.92; animation: pcm-mark 0.32s ease-out both; }
.pcm-a-coin { transform: translate(0px, 0px); animation: pcm-coin 0.55s both; }
.pcm-a-flip { transform: scale(1, 1); animation: pcm-flip 0.55s linear both; }
.pcm-plane { animation: pcm-fly 1.95s linear both; }
.pcm-a-crumple { transform: scale(0.9, 1.04); animation: pcm-crumple 0.4s ease-out both; }
.pcm-a-puff { opacity: 0; animation: pcm-puff 0.75s ease-out both; }
.pcm-a-smoke { opacity: 0; animation: pcm-smoke 1.15s ease-out both; }
.pcm-a-wisp { opacity: 0.75; animation: pcm-wisp 0.8s ease-out both; }
.pcm-a-hop { opacity: 0; animation: pcm-hop 0.7s ease-out both; }
.pcm-a-peek { transform: translate(0px, 0px); animation: pcm-peek 0.45s both; }
.pcm-a-droop { transform: translate(0px, 2px) rotate(-7deg); animation: pcm-droop 0.5s ease-in-out both; }
.pcm-a-look { transform: translate(1.6px, 1.2px); animation: pcm-look 0.3s ease-out both; }
.pcm-a-tear { transform: translate(-1px, 4px) scale(1); animation: pcm-tear 0.6s both; }
/* idle loops */
.pcm-a-tw { animation: pcm-tw 1.8s ease-in-out infinite alternate; }
.pcm-a-glowtw { animation: pcm-glowtw 1.6s ease-in-out infinite alternate; }
.pcm-bub { animation: pcm-bub 1.7s ease-in infinite; }
.pcm-a-drift { animation: pcm-drift 7s ease-in-out infinite alternate; }

/* skip: jump to the final frame (idle loops keep going) */
.pcm-final *:not(.pcm-amb) { animation: none !important; }

@keyframes pcm-veil-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pcm-veil-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pcm-stage-in { 0% { opacity: 0; transform: scale(0.86); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pcm-text-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes pcm-wobble { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-2.5deg); } 55% { transform: rotate(2deg); } 80% { transform: rotate(-1deg); } }
@keyframes pcm-glow { 0% { opacity: 0; } 30% { opacity: 0.95; } 100% { opacity: 0.55; } }
@keyframes pcm-burst { 0% { opacity: 0; transform: scale(0.3); } 8% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes pcm-glint { 0% { opacity: 0; transform: scale(0) rotate(-60deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes pcm-rise { 0% { opacity: 0; transform: translate(0px, 0px) scale(0.5); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -40px)) scale(1); } }
@keyframes pcm-float { 0% { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(0.3); } 100% { opacity: 0.9; transform: translate(0px, 0px) scale(1); } }
@keyframes pcm-pop { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pcm-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pcm-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pcm-tw { 0% { opacity: 1; } 100% { opacity: 0.35; } }
@keyframes pcm-glowtw { 0% { opacity: 0.42; } 100% { opacity: 0.1; } }
@keyframes pcm-bub { 0% { opacity: 0; transform: translate(0px, 0px); } 20% { opacity: 0.95; } 85% { opacity: 0.8; } 100% { opacity: 0; transform: translate(0px, -36px); } }
@keyframes pcm-drift { 0% { transform: translate(0px, 0px); } 100% { transform: translate(10px, 0px); } }
@keyframes pcm-glass-l {
  0% { transform: translate(-30px, 0px) rotate(-16deg); animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.55); }
  58% { transform: translate(0px, 0px) rotate(14.6deg); animation-timing-function: ease-out; }
  72% { transform: translate(0px, 0px) rotate(9.5deg); animation-timing-function: ease-in-out; }
  86% { transform: translate(0px, 0px) rotate(14.2deg); animation-timing-function: ease-in-out; }
  100% { transform: translate(0px, 0px) rotate(13.8deg); }
}
@keyframes pcm-glass-r {
  0% { transform: translate(30px, 0px) rotate(16deg); animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.55); }
  58% { transform: translate(0px, 0px) rotate(-14.6deg); animation-timing-function: ease-out; }
  72% { transform: translate(0px, 0px) rotate(-9.5deg); animation-timing-function: ease-in-out; }
  86% { transform: translate(0px, 0px) rotate(-14.2deg); animation-timing-function: ease-in-out; }
  100% { transform: translate(0px, 0px) rotate(-13.8deg); }
}
@keyframes pcm-bottle {
  0% { transform: translate(0px, 80px) rotate(0deg); }
  24% { transform: translate(0px, 0px) rotate(0deg); }
  40% { transform: translate(0px, 0px) rotate(-4deg); }
  56% { transform: translate(0px, 0px) rotate(4deg); }
  72% { transform: translate(0px, 0px) rotate(-3deg); }
  88% { transform: translate(0px, 0px) rotate(2deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes pcm-cork {
  0% { opacity: 1; transform: translate(0px, 0px) rotate(0deg); }
  14% { transform: translate(0px, 0px) rotate(-12deg); }
  28% { transform: translate(0px, 0px) rotate(10deg); }
  38% { transform: translate(0px, -3px) rotate(-8deg); }
  44% { opacity: 1; transform: translate(0px, -5px) rotate(0deg); animation-timing-function: cubic-bezier(0.15, 0.7, 0.35, 1); }
  100% { opacity: 1; transform: translate(-36px, -200px) rotate(-430deg); }
}
@keyframes pcm-ring { 0% { opacity: 0; transform: scale(0.3); } 10% { opacity: 1; } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes pcm-rocket { 0% { opacity: 0; transform: translate(0px, var(--h, 150px)); } 15% { opacity: 0.9; } 85% { opacity: 0.9; } 100% { opacity: 0; transform: translate(0px, 0px); } }
@keyframes pcm-fw {
  0% { opacity: 0; transform: translate(0px, 0px) scale(0.12); animation-timing-function: cubic-bezier(0.1, 0.8, 0.3, 1); }
  5% { opacity: 1; }
  55% { opacity: 1; transform: translate(0px, 2px) scale(1); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(0px, 9px) scale(1.1); }
}
@keyframes pcm-conf {
  0% { opacity: 0; transform: translate(0px, var(--fy, -200px)) rotate(var(--r0, 0deg)); }
  6% { opacity: 1; }
  40% { transform: translate(var(--sx, 10px), calc(var(--fy, -200px) * 0.6)) rotate(calc(var(--r0, 0deg) + 140deg)); }
  75% { transform: translate(calc(var(--sx, 10px) * -0.6), calc(var(--fy, -200px) * 0.22)) rotate(calc(var(--r0, 0deg) + 260deg)); }
  100% { opacity: 1; transform: translate(0px, 0px) rotate(360deg); }
}
@keyframes pcm-paper { 0% { opacity: 0; transform: translate(0px, -26px) rotate(-6deg); } 100% { opacity: 1; transform: translate(0px, 0px) rotate(0deg); } }
@keyframes pcm-stamp {
  0% { opacity: 1; transform: translate(46px, -150px) rotate(16deg) scale(1, 1); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
  45% { opacity: 1; transform: translate(0px, 0px) rotate(0deg) scale(1, 1); animation-timing-function: ease-out; }
  52% { transform: translate(0px, 0px) rotate(0deg) scale(1.04, 0.88); }
  60% { opacity: 1; transform: translate(0px, -8px) rotate(0deg) scale(1, 1); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  100% { opacity: 0; transform: translate(70px, -170px) rotate(20deg) scale(1, 1); }
}
@keyframes pcm-mark { 0% { opacity: 0; transform: scale(1.3); } 35% { opacity: 0.95; transform: scale(0.97); } 100% { opacity: 0.92; transform: scale(1); } }
@keyframes pcm-coin {
  0% { transform: translate(0px, var(--fy, -150px)); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.6); }
  72% { transform: translate(0px, 0px); animation-timing-function: ease-out; }
  84% { transform: translate(0px, -6px); animation-timing-function: ease-in; }
  100% { transform: translate(0px, 0px); }
}
@keyframes pcm-flip { 0% { transform: scale(1, 1); } 18% { transform: scale(0.12, 1); } 36% { transform: scale(1, 1); } 54% { transform: scale(0.12, 1); } 72%, 100% { transform: scale(1, 1); } }
@keyframes pcm-crumple { 0% { transform: scale(1, 1); } 30% { transform: scale(0.78, 1.16); } 65% { transform: scale(0.95, 0.97); } 100% { transform: scale(0.9, 1.04); } }
@keyframes pcm-puff { 0% { opacity: 0; transform: translate(0px, 0px) scale(0.3); } 15% { opacity: 0.95; } 100% { opacity: 0; transform: translate(-10px, -6px) scale(1.5); } }
@keyframes pcm-smoke {
  0% { opacity: 0; transform: translate(0px, 0px) scale(0.2); }
  10% { opacity: 1; }
  55% { opacity: 0.95; transform: translate(0px, -6px) scale(1.15); }
  100% { opacity: 0; transform: translate(0px, -20px) scale(1.35); }
}
@keyframes pcm-wisp { 0% { opacity: 0; transform: translate(0px, 8px); } 100% { opacity: 0.75; transform: translate(0px, 0px); } }
@keyframes pcm-hop { 0% { opacity: 0; transform: translate(0px, 0px); } 5% { opacity: 1; } 45% { transform: translate(calc(var(--dx, 10px) * 0.55), var(--dy, -20px)); } 100% { opacity: 0; transform: translate(var(--dx, 10px), 4px); } }
@keyframes pcm-peek {
  0% { transform: translate(0px, 48px); animation-timing-function: cubic-bezier(0.3, 0.9, 0.5, 1.2); }
  65% { transform: translate(0px, -4px); animation-timing-function: ease-in-out; }
  100% { transform: translate(0px, 0px); }
}
@keyframes pcm-droop { 0% { transform: translate(0px, 0px) rotate(0deg); } 100% { transform: translate(0px, 2px) rotate(-7deg); } }
@keyframes pcm-look { 0% { transform: translate(0px, 0px); } 100% { transform: translate(1.6px, 1.2px); } }
@keyframes pcm-tear {
  0% { opacity: 0; transform: translate(0px, 0px) scale(0); }
  30% { opacity: 1; transform: translate(0px, 0px) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.6); }
  100% { opacity: 1; transform: translate(-1px, 4px) scale(1); }
}

/* ---------------------------------------------------------------- milestone banner */
.pcm-banner {
  position: fixed; z-index: 999; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px; right: 12px;
  max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: var(--pcm-banner-bg); color: var(--pcm-ink); border: 1.5px solid var(--pcm-banner-line);
  box-shadow: 0 16px 32px -16px rgba(46, 0, 82, 0.55); font-family: var(--pcm-font); text-align: left;
  -webkit-tap-highlight-color: transparent;
  animation: pcm-banner-in 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.pcm-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, var(--pcm-shine) 50%, transparent 65%);
  transform: translateX(-120%); animation: pcm-shine 1.1s 0.45s ease-in-out both;
}
.pcm-banner.pcm-banner-out { animation: pcm-banner-out 0.3s ease-in both; }
.pcm-rosette { display: block; flex: none; width: 46px; height: 46px; overflow: visible; }
.pcm-rosette * { transform-box: view-box; transform-origin: 0 0; }
.pcm-a-rose { animation: pcm-rose 0.6s 0.15s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.pcm-banner-text { min-width: 0; }
.pcm-banner-title { margin: 0; font-weight: 900; font-size: 1.02rem; line-height: 1.25; color: var(--pcm-head); overflow-wrap: anywhere; }
.pcm-banner-line { margin: 2px 0 0; font-size: 0.92rem; line-height: 1.3; color: var(--pcm-muted); overflow-wrap: anywhere; }
@keyframes pcm-banner-in { 0% { opacity: 0; transform: translateY(-130%); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes pcm-banner-out { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-130%); } }
@keyframes pcm-shine { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes pcm-rose { 0% { opacity: 0; transform: translate(24px, 22px) scale(0) rotate(-40deg) translate(-24px, -22px); } 100% { opacity: 1; transform: translate(24px, 22px) scale(1) rotate(0deg) translate(-24px, -22px); } }

.pcm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- reduced motion: the final frame, no movement */
@media (prefers-reduced-motion: reduce) {
  .pcm-overlay, .pcm-overlay *, .pcm-banner, .pcm-banner *, .pcm-banner::after { animation: none !important; transition: none !important; }
  .pcm-banner::after { display: none; }
}