@font-face {
    font-family: "XDDJ KuaiLe";
    src: url("/fonts/xddj/zcool-kuaile.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "XDDJ WenKai";
    src: url("/fonts/xddj/lxgw-wenkai.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

:root {
    color-scheme: light;
    --paper: #fff0f5;
    --ink: #87465f;
    --rose: #c75d8b;
    --pink: #e8a0bf;
    --clay: #e6a1bf;
}

*, *::before, *::after { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); }

body {
    margin: 0;
    min-width: 280px;
    min-height: 100svh;
    background: var(--paper);
    color: var(--ink);
    font-family: "XDDJ WenKai", serif;
    -webkit-font-smoothing: antialiased;
}

::selection { background: #efbad2; color: var(--ink); }

button, a { -webkit-tap-highlight-color: transparent; }

.landing {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    width: calc(100% - 128px);
    max-width: 1344px;
    min-height: 100svh;
    margin: 0 auto;
    padding: max(40px, env(safe-area-inset-top)) 0 max(40px, env(safe-area-inset-bottom));
}

.copy-panel { min-width: 0; padding: 48px 20px 48px 8px; }

h1 {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin: 0 0 39px;
    font-family: "XDDJ KuaiLe", cursive;
    font-size: clamp(72px, 7.8vw, 122px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -.055em;
    white-space: nowrap;
}

.title-letter {
    display: inline-block;
}

.title-letter span { pointer-events: none; }

.title-reveal {
    display: inline-block;
    opacity: 1;
    animation: letter-arrive 950ms cubic-bezier(.2, .85, .24, 1) both;
    animation-delay: var(--letter-delay, 0ms);
}

.title-glyph {
    display: inline-block;
    transform: translateY(0) rotate(0deg);
    transform-origin: 50% 75%;
    transition: transform 260ms cubic-bezier(.2, .8, .2, 1), color 180ms ease;
}

.title-letter:nth-child(2) { --letter-delay: 75ms; }
.title-letter:nth-child(3) { --letter-delay: 150ms; }
.title-letter:nth-child(4) { --letter-delay: 225ms; }

.title-spark {
    position: absolute;
    top: -.1em;
    right: -.27em;
    width: .17em;
    height: .17em;
    background: var(--pink);
    clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 38%);
    animation: sparkle 5s ease-in-out 1s infinite;
}

.intro {
    margin: 0;
    color: #92596f;
    font-size: clamp(18px, 1.55vw, 22px);
    line-height: 2.15;
    letter-spacing: .015em;
    animation: copy-arrive 850ms ease 280ms both;
}

.leader {
    position: relative;
    display: inline-block;
    color: var(--ink);
}

.leader::after {
    position: absolute;
    right: -1px;
    bottom: .57em;
    left: -1px;
    z-index: -1;
    height: 5px;
    border-radius: 60% 35% 45% 40%;
    background: #f0bcd2;
    content: "";
    transform: rotate(-3deg);
}

.annotated-phrase { white-space: nowrap; }

.insertion-anchor { position: relative; display: inline-block; width: 5px; }

.insertion-note {
    position: absolute;
    bottom: 1.1em;
    left: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 4px;
    color: var(--rose);
    font-size: .76em;
    line-height: 1.1;
    transform: translateX(-50%) rotate(-9deg);
    transform-origin: 50% 100%;
    animation: note-arrive 650ms cubic-bezier(.2, .85, .3, 1.3) 650ms both;
}

.insertion-word { display: inline-block; white-space: nowrap; }

.insertion-caret {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 1.7px solid currentColor;
    border-left: 1.7px solid currentColor;
    transform: rotate(45deg);
}

.championship-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 48px;
    margin-top: 31px;
    padding: 10px 19px 10px 21px;
    border: 1px solid #e3a3bf;
    border-radius: 100px;
    background: #f4cfdf;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    box-shadow: 0 3px 0 #e7acc6;
    animation: copy-arrive 850ms ease 440ms backwards;
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1), background 220ms, box-shadow 220ms;
}

.link-arrow {
    position: relative;
    display: block;
    width: 19px;
    height: 12px;
    transition: transform 220ms ease;
}

.link-arrow::before {
    position: absolute;
    top: 5px;
    left: 0;
    width: 18px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}

.link-arrow::after {
    position: absolute;
    top: 2px;
    right: 1px;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    content: "";
    transform: rotate(45deg);
}

.championship-link:active { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 #e7acc6; }

.championship-link:focus-visible, .cat-scene:focus-visible {
    outline: 2px solid var(--rose);
    outline-offset: 8px;
}

.cat-panel { display: grid; min-width: 0; place-items: center; }

.cat-scene {
    position: relative;
    display: block;
    width: min(100%, 560px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 48%;
    background: transparent;
    color: var(--pink);
    cursor: pointer;
    isolation: isolate;
    appearance: none;
    animation: scene-arrive 1100ms cubic-bezier(.2, .8, .2, 1) 350ms backwards;
}

.cat-scene > *, .cat-scene span { pointer-events: none; }

.cat-aura {
    position: absolute;
    inset: 3%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse, #efb5d04a 0, #f5c8dc28 44%, #fff0f500 71%);
}

.cat-position {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 360px;
    height: 340px;
    transform: translate(-50%, -47%);
}

.cat-float { position: absolute; inset: 0; animation: cat-float 5.6s ease-in-out infinite; }

.cat-tracker {
    position: absolute;
    inset: 0;
    --head-turn: 0deg;
    transform: rotate(var(--head-turn));
    transform-origin: 50% 70%;
}

.cat-head {
    position: absolute;
    top: 48px;
    left: 14px;
    width: 332px;
    height: 270px;
    background: var(--clay);
    /* One continuous silhouette: short soft-tipped ears and a broad round jaw. */
    clip-path: path("M166 63 C150 63 136 65 123 71 L65 28 Q51 18 52 36 L56 106 C56 113 50 120 45 128 C33 145 28 160 29 178 C30 221 82 252 166 252 C250 252 302 221 303 178 C304 160 299 145 287 128 C282 120 276 113 276 106 L280 36 Q281 18 267 28 L209 71 C196 65 182 63 166 63 Z");
}

.cat-whiskers {
    position: absolute;
    top: 202px;
    width: 46px;
    height: 43px;
    color: var(--clay);
}

.whiskers-left { left: 12px; }
.whiskers-right { right: 12px; transform: scaleX(-1); }

.cat-whiskers::before, .cat-whiskers::after, .whisker-middle {
    position: absolute;
    right: 0;
    display: block;
    height: 10px;
    border-top: 3px solid currentColor;
    border-radius: 65% 80% 0 0;
    transform-origin: 100% 50%;
}

.cat-whiskers::before {
    top: 1px;
    width: 35px;
    content: "";
    transform: rotate(13deg);
}

.whisker-middle { top: 15px; width: 41px; transform: rotate(1deg); }

.cat-whiskers::after {
    top: 29px;
    width: 33px;
    content: "";
    transform: rotate(-12deg);
}

.whiskers-right::before { width: 28px; }
.whiskers-right .whisker-middle { width: 31px; }
.whiskers-right::after { width: 26px; }

.knife-paw {
    position: absolute;
    width: 48px;
    height: 35px;
    border-radius: 48% 48% 44% 44%;
    background: var(--clay);
}

.knife-guard {
    position: absolute;
    top: 156px;
    right: -20px;
    width: 84px;
    height: 160px;
    transform: rotate(17deg);
    transform-origin: 50% 88%;
    transition: transform 260ms cubic-bezier(.2, .85, .25, 1.25);
}

.knife-swing { position: absolute; inset: 0; transform-origin: 50% 88%; }

.knife-blade {
    position: absolute;
    top: 0;
    left: 31px;
    width: 27px;
    height: 95px;
    border-radius: 21px 5px 2px 2px;
    background: var(--clay);
}

.knife-hilt { position: absolute; top: 91px; left: 24px; width: 42px; height: 8px; border-radius: 5px; background: var(--clay); }
.knife-handle { position: absolute; top: 97px; left: 32px; width: 25px; height: 43px; border-radius: 3px 3px 9px 9px; background: var(--clay); }

.knife-paw { top: 119px; left: 17px; transform: rotate(-7deg); }

.cat-scene[data-guard="true"] .knife-guard { transform: translate(9px, -22px) rotate(4deg); }

.cat-scene[data-slash-direction="left"] { --slash-sign: -1; }
.cat-scene[data-slash-direction="right"] { --slash-sign: 1; }

.cat-scene[data-slashing="true"] .knife-swing { animation: knife-slash 500ms cubic-bezier(.2, .7, .25, 1) both; }

.slash-arc {
    position: absolute;
    top: 118px;
    right: -13px;
    width: 165px;
    height: 148px;
    border-top: 3px solid #d787b0;
    border-right: 2px solid transparent;
    border-radius: 50%;
    opacity: 0;
    transform: rotate(32deg);
}

.cat-scene[data-slashing="true"] .slash-arc { animation: slash-arc 500ms ease-out both; }
.cat-scene[data-static-pose="true"] .knife-guard { transform: translate(9px, -16px) rotate(4deg); transition: none; }


.scene-star, .ambient-spark {
    position: absolute;
    display: block;
    background: currentColor;
    clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 38%);
}

.scene-star { animation: star-drift 5.4s ease-in-out infinite; transition: opacity 100ms; }
.star-one { top: 18%; left: 14%; width: 20px; height: 20px; color: #d78fb4; animation-delay: -1.5s; }
.star-two { top: 26%; right: 9%; width: 31px; height: 31px; color: #e2a5c2; animation-delay: -.6s; }
.star-three { right: 20%; bottom: 13%; width: 15px; height: 15px; color: #cf87ad; animation-delay: -3.2s; }
.scene-star.is-cut { opacity: 0; }

.cat-effects { position: absolute; inset: 0; overflow: visible; }
.star-burst { position: absolute; display: block; width: var(--star-size, 22px); height: var(--star-size, 22px); transform: translate(-50%, -50%); }

.star-fragment { position: absolute; inset: 0; animation: fragment-away 650ms ease-out both; }
.star-fragment::before { position: absolute; inset: 0; background: currentColor; clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 38%); content: ""; }
.fragment-left { clip-path: polygon(0 0, 52% 0, 48% 100%, 0 100%); --fragment-turn: -60deg; }
.fragment-right { clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%); --fragment-turn: 65deg; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-spark { color: #d892b2; opacity: .43; animation: ambient-drift 11s ease-in-out infinite; }
.ambient-spark-one { top: 15%; left: 9%; width: 11px; height: 11px; animation-delay: -2s; }
.ambient-spark-two { right: 10%; bottom: 16%; width: 9px; height: 9px; animation-delay: -5s; }
.ambient-spark-three { top: 13%; left: 58%; width: 7px; height: 7px; animation-delay: -8s; }
.ambient-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #db9ab7; opacity: .5; animation: ambient-drift 9s ease-in-out infinite; }
.ambient-dot-one { bottom: 19%; left: 29%; }
.ambient-dot-two { top: 32%; right: 6%; animation-delay: -4s; }

.paw-print { position: absolute; width: var(--paw-size, 40px); height: var(--paw-size, 40px); color: #d482a9; opacity: .22; animation: paw-drift 9s ease-in-out infinite; }
.paw-toe, .paw-pad { position: absolute; display: block; background: currentColor; }
.paw-toe { width: 20%; height: 27%; border-radius: 50%; }
.paw-toe:nth-child(1) { top: 26%; left: 6%; transform: rotate(-28deg); }
.paw-toe:nth-child(2) { top: 7%; left: 27%; transform: rotate(-9deg); }
.paw-toe:nth-child(3) { top: 7%; right: 27%; transform: rotate(9deg); }
.paw-toe:nth-child(4) { top: 26%; right: 6%; transform: rotate(28deg); }
.paw-pad { top: 48%; left: 25%; width: 50%; height: 41%; border-radius: 52% 52% 42% 42% / 64% 64% 34% 34%; }
.paw-print-one { top: 12%; left: 27%; --paw-size: 35px; --paw-turn: -23deg; animation-delay: -1s; }
.paw-print-two { bottom: 15%; left: 9%; --paw-size: 50px; --paw-turn: -25deg; animation-delay: -5s; }
.paw-print-three { bottom: 10%; left: 28%; --paw-size: 32px; --paw-turn: 17deg; animation-delay: -2s; }
.paw-print-four { bottom: 18%; left: 47%; --paw-size: 24px; --paw-turn: -12deg; animation-delay: -7s; }
.paw-print-five { top: 12%; right: 13%; --paw-size: 54px; --paw-turn: 28deg; animation-delay: -4s; }
.paw-print-six { bottom: 24%; right: 4%; --paw-size: 38px; --paw-turn: 30deg; animation-delay: -6s; }

.custom-cursor { position: fixed; top: 0; left: 0; z-index: 100; width: 0; height: 0; opacity: 0; pointer-events: none; }
.custom-cursor, .custom-cursor * { pointer-events: none; }
.cursor-ring, .cursor-dot { position: absolute; top: 0; left: 0; display: block; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-dot { width: 6px; height: 6px; background: #b77491; }
.cursor-ring { width: 24px; height: 24px; border: 1px solid #b7749180; background: #f6dce618; transition: width 180ms, height 180ms, background 180ms, border-color 180ms; }
.custom-cursor[data-mode="link"] .cursor-ring { width: 38px; height: 38px; border-color: #b77491a0; background: #e8a0bf38; }
.custom-cursor[data-mode="cat"] .cursor-ring { width: 18px; height: 18px; border-color: #b77491b0; }
.custom-cursor[data-pressed="true"] .cursor-ring { width: 14px; height: 14px; background: #edc1d170; }

@media (hover: hover) and (pointer: fine) {
    .has-custom-cursor, .has-custom-cursor * { cursor: none !important; }
    .has-custom-cursor .custom-cursor { opacity: 1; }
    .championship-link:hover { transform: translateY(-3px); background: #efbad2; box-shadow: 0 6px 0 #e7acc6; }
    .championship-link:hover .link-arrow { transform: translateX(3px); }
    .championship-link:active { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 #e7acc6; }
    .title-letter:hover .title-glyph { color: var(--rose); transform: translateY(-4px) rotate(-3deg); }
    .insertion-note:hover .insertion-word { animation: word-wiggle 500ms ease both; }
}

@media (min-width: 901px) and (max-width: 1150px) {
    .landing { width: calc(100% - 80px); }
    .copy-panel { padding-left: 0; padding-right: 14px; }
    .cat-position { transform: translate(-50%, -47%) scale(.88); }
    .intro { font-size: 18px; }
}

@media (max-width: 900px), (pointer: coarse) {
    .landing { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 650px; padding: max(44px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(44px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); }
    .copy-panel { padding: 0; }
    .cat-panel { display: none; }
    h1 { font-size: clamp(64px, 14vw, 96px); margin-bottom: 40px; }
    .intro { font-size: clamp(18px, 3vw, 21px); line-height: 2.3; }
    .championship-link { margin-top: 29px; }
    .ambient-spark-three { left: auto; right: 15%; top: 18%; }
    .ambient-dot-one { bottom: 15%; left: 19%; }
    .paw-print-one { top: 14%; left: 17%; --paw-size: 30px; }
    .paw-print-two { bottom: 15%; left: 12%; --paw-size: 38px; }
    .paw-print-three { bottom: 10%; left: 48%; --paw-size: 25px; }
    .paw-print-four { display: none; }
    .paw-print-five { top: 20%; right: 14%; --paw-size: 43px; }
    .paw-print-six { bottom: 21%; right: 11%; --paw-size: 30px; }
}

@media (max-width: 350px) {
    .landing { padding-right: max(24px, env(safe-area-inset-right)); padding-left: max(24px, env(safe-area-inset-left)); }
    h1 { font-size: 62px; }
    .intro { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .cat-tracker { transform: none; }
    .title-letter:hover .title-glyph { transform: none; }
}

@keyframes letter-arrive { from { opacity: 0; transform: translateY(22px) rotate(5deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes copy-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes note-arrive { from { opacity: 0; transform: translateX(-50%) rotate(-18deg) scale(.7); } to { opacity: 1; transform: translateX(-50%) rotate(-9deg) scale(1); } }
@keyframes scene-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes cat-float { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-9px) rotate(.6deg); } }
@keyframes star-drift { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-9px) rotate(9deg); } }
@keyframes ambient-drift { 0%, 100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(-12px); opacity: .55; } }
@keyframes sparkle { 0%, 100% { transform: scale(.85) rotate(0); opacity: .7; } 50% { transform: scale(1.1) rotate(18deg); opacity: 1; } }
@keyframes word-wiggle { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(12deg); } 70% { transform: rotate(-5deg); } }
@keyframes knife-slash { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(calc(-35deg * var(--slash-sign, 1))); } 55% { transform: rotate(calc(65deg * var(--slash-sign, 1))); } }
@keyframes slash-arc { 0%, 20% { opacity: 0; transform: rotate(calc(-20deg * var(--slash-sign, 1))) scale(.75); } 45% { opacity: .9; } 100% { opacity: 0; transform: rotate(calc(65deg * var(--slash-sign, 1))) scale(1.2); } }
@keyframes fragment-away { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(var(--fragment-x, 35px), var(--fragment-y, -28px)) rotate(var(--fragment-turn, 60deg)) scale(.4); } }

@keyframes paw-drift { 0%, 100% { transform: translateY(0) rotate(var(--paw-turn, 0deg)); opacity: .18; } 50% { transform: translateY(-7px) rotate(calc(var(--paw-turn, 0deg) + 5deg)); opacity: .3; } }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.player-bubbles { position: fixed; inset: 0; z-index: 5; overflow: hidden; padding-bottom: max(18px, env(safe-area-inset-bottom)); pointer-events: none; }
.player-bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    max-width: min(430px, calc(100vw - 28px));
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    will-change: transform;
}
.player-bubble.is-settled { will-change: auto; }
.bubble-content {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 182px;
    max-width: inherit;
    min-height: 64px;
    padding: 8px 20px 8px 9px;
    border: 1px solid #e8b7cd;
    border-radius: inherit;
    background: #fff9fcf5;
    box-shadow: 0 4px 0 #eac2d35c, 0 8px 24px #ac6a8812, inset 0 1px 0 #ffffff;
    transform: scaleX(var(--bubble-stretch, 1)) scaleY(var(--bubble-squash, 1));
    transition: border-color 180ms, box-shadow 180ms;
}
.player-bubble.is-arriving .bubble-content { animation: bubble-arrive 380ms cubic-bezier(.15, .9, .28, 1.3) backwards; }
.bubble-avatar { position: relative; display: grid; flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; border: 1px solid #eecbdb; border-radius: 50%; background: #f7e5ed; place-items: center; }
.bubble-avatar:empty::before { color: #d798b5; font-size: 25px; content: '✧'; }
.bubble-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bubble-name { overflow: hidden; max-width: 150px; color: #87465f; font-family: "XDDJ KuaiLe", cursive; font-size: 18px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.bubble-honor { overflow: hidden; max-width: 168px; margin-left: 2px; padding-left: 12px; border-left: 1px solid #ecc8d9; color: #af537c; font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.bubble-emblem { position: absolute; top: -7px; left: 39px; z-index: 1; display: grid; width: 20px; height: 20px; border: 1px solid #dfa4be; border-radius: 50%; background: #ffe7f0; color: #c2608c; font-size: 14px; line-height: 1; place-items: center; transform: rotate(12deg); }
.player-bubble.is-featured .bubble-content { border-color: #df9cba; background: #f7d4e4f7; box-shadow: 0 4px 0 #dda5be55, 0 9px 28px #bc729226, inset 0 1px 0 #ffffffa6; }
.player-bubble.is-featured .bubble-avatar { border-color: #dfa3be; background: #f2c5d9; }
.player-bubble.is-featured .bubble-honor { border-color: #dca3be; }
.player-bubble:focus-visible { outline: 2px solid var(--rose); outline-offset: 5px; }
.player-bubble:hover .bubble-content { border-color: #d788ae; box-shadow: 0 4px 0 #dda5be55, 0 8px 25px #bc72922e; }
.player-bubble.is-waving .bubble-content { animation: bubble-wave 500ms cubic-bezier(.2, .8, .25, 1) both; }
.bubble-burst { position: absolute; top: 0; left: 0; width: 0; height: 0; color: #d47ba4; pointer-events: none; }
.bubble-burst::before { position: absolute; top: -16px; left: -16px; width: 32px; height: 32px; border: 2px solid currentColor; border-radius: 50%; content: ''; animation: bubble-ripple 480ms cubic-bezier(.1, .55, .25, 1) both; }
.bubble-particle { position: absolute; top: -3px; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: bubble-particle 580ms cubic-bezier(.08, .62, .22, 1) both; }
.bubble-particle:nth-child(3n) { border-radius: 0; clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 38%); width: 12px; height: 12px; }
.bubble-particle:nth-child(2n) { color: #e8b1cb; }
.bubble-burst.is-launch { color: #dfa1be; }
.bubble-burst.is-launch::before { border-width: 1px; }
@keyframes bubble-arrive { from { opacity: 0; transform: scale(.32); } 65% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@keyframes bubble-wave { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-5deg) scale(1.05); } 60% { transform: rotate(4deg) scale(.98); } }
@keyframes bubble-ripple { from { opacity: .75; transform: scale(.3); } to { opacity: 0; transform: scale(3.5); } }
@keyframes bubble-particle { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--particle-x), var(--particle-y)) rotate(var(--particle-turn)) scale(.2); } }
@media (max-width: 600px) {
    .bubble-content { gap: 8px; min-width: 152px; min-height: 58px; padding: 7px 15px 7px 7px; }
    .bubble-avatar { flex-basis: 40px; width: 40px; height: 40px; }
    .bubble-name { max-width: 95px; font-size: 16px; }
    .bubble-honor { max-width: 115px; margin-left: 0; padding-left: 9px; font-size: 11px; }
}