/* v22 cosmetics pack: 10 bubbles, 10 names, 10 effects, 10 frames, 10 recruit cards. Keyframes prefixed cx */

/* ---------- chat bubbles ---------- */
.txt.bub_moss { background: linear-gradient(160deg, #23361a, #121c0d) !important; border: 1px solid #7fa34a; color: #e4f2cf !important; box-shadow: inset 0 -3px 0 #3d5a24; }
.txt.bub_dusk { background: linear-gradient(135deg, #2b1d52, #4a1f45 60%, #5a2a2a) !important; border: 1px solid #c58bd8; color: #f6e8ff !important; }
.txt.bub_paper { background: linear-gradient(180deg, #f3ead6, #e3d6b8) !important; border: 1px solid #b59a6a; color: #2e2414 !important; box-shadow: 2px 2px 0 #6b5532; }
.txt.bub_tide { background: linear-gradient(100deg, #063848, #0b5a6a, #0a3a5a, #063848) !important; background-size: 300% 100% !important; border: 1px solid #4fd6d0; color: #e2fbff !important; animation: cxtide 6s linear infinite; }
@keyframes cxtide { to { background-position: 300% 0; } }
.txt.bub_slate { background: #2a2f36 !important; border: 1px solid #4b535e; color: #e9edf2 !important; box-shadow: inset 0 1px 0 #ffffff1a, inset 0 -2px 0 #00000055, 0 2px 0 #11151a; }
.txt.bub_mint { background: linear-gradient(135deg, #bff5dc, #9ae8c8) !important; border: 1px solid #e8fff4; color: #0b3324 !important; }
.txt.bub_static { background-color: #15181d !important; background-image: repeating-linear-gradient(0deg, #ffffff0d 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, #ffffff08 0 1px, transparent 1px 3px) !important; background-size: 100% 4px, 6px 100% !important; border: 1px solid #9aa6b5; color: #f0f4f8 !important; animation: cxstatic .5s steps(2) infinite; }
@keyframes cxstatic { to { background-position: 0 2px, 3px 0; } }
.txt.bub_comet { background-color: #0a0f1e !important; background-image: linear-gradient(105deg, transparent 40%, #9fc4ff33 48%, #ffffff55 50%, transparent 56%) !important; background-size: 250% 100% !important; background-repeat: no-repeat !important; border: 1px solid #5d7fd6; color: #e8efff !important; animation: cxcomet 3.6s ease-in-out infinite; }
@keyframes cxcomet { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }
.txt.bub_bloom { background: radial-gradient(circle at 0 0, #ff9cc766, transparent 55%), radial-gradient(circle at 100% 100%, #ffcf9c44, transparent 50%), #3a1430 !important; border: 1px solid #ff9cc7; color: #ffeaf4 !important; box-shadow: 0 0 8px #ff9cc744; }
.txt.bub_onyx { background: linear-gradient(180deg, #2a2a2e 0, #0b0b0d 55%, #000 100%) !important; border: 1px solid #c9ced6; color: #f4f6f8 !important; box-shadow: inset 0 1px 0 #ffffff33, 0 0 0 1px #000; }

/* ---------- name colours ---------- */
.name_lime { color: #c6ff4a !important; text-shadow: 0 0 5px #c6ff4a55; }
.name_coral { color: #ff8a73 !important; }
.name_sky { color: #8cc4ff !important; text-shadow: 0 0 6px #4aa3ff66; }
.name_amber { color: #ffb02e !important; text-shadow: 0 1px 0 #6a3a00; }
.name_lilac { color: #dcc0ff !important; text-shadow: 0 0 6px #b58bff55; }
.name_ocean { background: linear-gradient(90deg, #5fffe0, #3ea8ff); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.name_dawn { background: linear-gradient(90deg, #ff9cc7, #ffc59a, #d6b3ff); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.name_jade { background: linear-gradient(180deg, #b8ffd8, #2fd18a); -webkit-background-clip: text; background-clip: text; color: transparent !important; filter: drop-shadow(0 0 3px #2fd18a66); }
.name_orchid { background: linear-gradient(90deg, #ff6ad5, #b36bff, #ff6ad5); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: cxorchid 3s linear infinite; }
@keyframes cxorchid { to { background-position: 200% 0; } }
.name_lumen { background: linear-gradient(100deg, #9fb4d0 0 40%, #ffffff 50%, #9fb4d0 60% 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: cxlumen 2.8s ease-in-out infinite; }
@keyframes cxlumen { 0% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }

/* ---------- message effects (no size or layout changes) ---------- */
.txt.fx_ripple { position: relative; }
.txt.fx_ripple::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; animation: cxripple 2.4s ease-out infinite; }
@keyframes cxripple { 0% { box-shadow: 0 0 0 0 #3ee6ffaa; } 70%, 100% { box-shadow: 0 0 0 7px #3ee6ff00; } }
.txt.fx_shimmer { position: relative; isolation: isolate; }
.txt.fx_shimmer::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 42%, #ffffff40 50%, transparent 58%) no-repeat; background-size: 300% 100%; animation: cxshim 3s ease-in-out infinite; }
@keyframes cxshim { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
.txt.fx_drift { position: relative; }
.txt.fx_drift::before, .txt.fx_drift::after { content: ''; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: #9ff3ff; pointer-events: none; opacity: 0; animation: cxdrift 2.6s ease-out infinite; }
.txt.fx_drift::before { right: 8px; }
.txt.fx_drift::after { right: 18px; width: 3px; height: 3px; background: #c7a6ff; animation-delay: 1.3s; }
@keyframes cxdrift { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-26px); opacity: 0; } }
.txt.fx_caret { position: relative; }
.txt.fx_caret::after { content: ''; position: absolute; right: -6px; bottom: 5px; width: 3px; height: 11px; border-radius: 1px; background: #5fd16b; pointer-events: none; animation: cxcaret 1s steps(1) infinite; }
@keyframes cxcaret { 50% { opacity: 0; } }
.txt.fx_flicker { animation: cxflick 3.2s steps(1) infinite; text-shadow: 0 0 6px #ff6ad5aa; }
@keyframes cxflick { 0%, 100% { text-shadow: 0 0 6px #ff6ad5aa; } 88% { text-shadow: none; } 90% { text-shadow: 0 0 6px #ff6ad5aa; } 93% { text-shadow: none; } 95% { text-shadow: 0 0 8px #ff6ad5; } }
.txt.fx_hop { animation: cxhop 2.6s ease-in-out infinite; }
@keyframes cxhop { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(-4px); } 86% { transform: translateY(0); } 91% { transform: translateY(-1.5px); } }
.txt.fx_drizzle { position: relative; isolation: isolate; }
.txt.fx_drizzle::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(105deg, transparent 0 7px, #8fc8ff26 7px 8px); background-size: 16px 30px; animation: cxdrizzle .9s linear infinite; }
@keyframes cxdrizzle { to { background-position: -8px 30px; } }
.txt.fx_echo { text-shadow: 1px 1px 0 #a46bffaa, 2px 2px 0 #3ee6ff55; }
.txt.fx_beat { animation: cxbeat 2.2s ease-in-out infinite; }
@keyframes cxbeat { 0%, 30%, 100% { transform: scale(1); } 10% { transform: scale(1.03); } 20% { transform: scale(1.015); } }
.txt.fx_spot { position: relative; isolation: isolate; }
.txt.fx_spot::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 30% 90% at center, #ffe39a3a, transparent 100%) no-repeat; background-size: 200% 100%; animation: cxspot 4s ease-in-out infinite alternate; }
@keyframes cxspot { from { background-position: 0 0; } to { background-position: 100% 0; } }

/* ---------- avatar frames ---------- */
.frame_ruby { border: 2px solid #e0244f !important; box-shadow: 0 0 8px #e0244f88, inset 0 0 5px #ff8aa055; }
.frame_jade { border: 2px solid #2fd18a !important; box-shadow: 0 0 0 2px #071a12, 0 0 0 3px #2fd18a99; }
.frame_stitch { border: 2px dashed #e8eef6 !important; box-shadow: 0 0 0 2px #2a4a63; }
.frame_orbit { border: 2px solid #4aa3ff !important; animation: cxorbit 2.4s linear infinite; }
@keyframes cxorbit { 0%, 100% { box-shadow: -3px -3px 6px #9fdcff; } 25% { box-shadow: 3px -3px 6px #9fdcff; } 50% { box-shadow: 3px 3px 6px #9fdcff; } 75% { box-shadow: -3px 3px 6px #9fdcff; } }
.frame_throb { border: 2px solid #ff5fa2 !important; animation: cxthrob 1.8s ease-in-out infinite; }
@keyframes cxthrob { 0%, 40%, 100% { transform: scale(1); box-shadow: 0 0 4px #ff5fa266; } 12% { transform: scale(1.07); box-shadow: 0 0 10px #ff5fa2cc; } 24% { transform: scale(1.02); } }
.frame_tide { border: 2px solid #3ea8ff !important; animation: cxtideb 4s ease-in-out infinite; }
@keyframes cxtideb { 0%, 100% { border-color: #3ea8ff; box-shadow: 0 0 7px #3ea8ff88; } 50% { border-color: #5fffe0; box-shadow: 0 0 7px #5fffe088; } }
.frame_sun { border: 3px solid #ffb02e !important; box-shadow: 0 0 0 1px #ffe39a, 0 0 10px #ffb02e99, 0 0 20px #ff7a2a44; }
.frame_ghost { border: 2px solid #ffffffaa !important; animation: cxghost 3s ease-in-out infinite; }
@keyframes cxghost { 0%, 100% { opacity: 1; box-shadow: 0 0 6px #ffffff55; } 50% { opacity: .6; box-shadow: 0 0 12px #c9e4ff88; } }
.frame_split { border: 2px solid !important; border-color: #ff4d9d #3ee6ff #3ee6ff #ff4d9d !important; box-shadow: -2px -2px 6px #ff4d9d55, 2px 2px 6px #3ee6ff55; }
.frame_steel { border: 2px solid !important; border-color: #e8eef6 #6b7686 #3a4250 #a9b4c2 !important; box-shadow: 0 0 0 1px #0a0d12, 0 2px 3px #000; }

/* ---------- recruitment cards ---------- */
.rcard.rc_tide { background: linear-gradient(100deg, #063848, #0b5a6a, #0a3a5a, #063848); background-size: 300% 100%; border-color: #4fd6d0; animation: cxtide 7s linear infinite; }
.rcard.rc_dusk { background: linear-gradient(135deg, #2b1d52, #4a1f45 60%, #5a2a2a); border-color: #c58bd8; box-shadow: 0 0 10px #c58bd833; }
.rcard.rc_paper { background: linear-gradient(180deg, #f3ead6, #e0d2b2); border-color: #8a6f42; box-shadow: 3px 3px 0 #6b5532; color: #2e2414; }
.rcard.rc_paper b { color: #2e2414 !important; } .rcard.rc_paper .tag { color: #9a5a00 !important; } .rcard.rc_paper .small { color: #4a3a22; } .rcard.rc_paper .btn { color: #fff; }
.rcard.rc_ruby { background: radial-gradient(circle at 15% 20%, #5a0f22, #1a050b 75%); border-color: #e0244f; box-shadow: 0 0 12px #e0244f55, inset 0 0 0 1px #ff8aa022; }
.rcard.rc_jade { background: linear-gradient(135deg, #0b2a1d, #06140e); border-color: #2fd18a; box-shadow: 0 0 0 2px #071a12, 0 0 0 3px #2fd18a66; }
.rcard.rc_steel { background: linear-gradient(180deg, #3a414c, #1d2128 55%, #14171c); border-color: #a9b4c2; box-shadow: inset 0 1px 0 #ffffff33, 0 2px 0 #0a0c10; }
.rcard.rc_stripe { background-color: #17140a; background-image: repeating-linear-gradient(135deg, #ffd34a14 0 10px, transparent 10px 20px); background-size: 28.28px 28.28px; border-color: #ffd34a; border-left-width: 4px; animation: cxstripe 1.6s linear infinite; }
@keyframes cxstripe { to { background-position: 28.28px 0; } }
.rcard.rc_sun { background: radial-gradient(ellipse at 50% 170%, #ff9a3a, #8a2c1c 45%, #2a0f2a 85%); border-color: #ffc56a; box-shadow: 0 0 14px #ff9a3a55; }
.rcard.rc_comet { background-color: #0a0f1e; background-image: linear-gradient(105deg, transparent 40%, #9fc4ff2a 48%, #ffffff44 50%, transparent 56%), radial-gradient(circle at 85% 30%, #5d7fd633, transparent 40%); background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; border-color: #5d7fd6; animation: cxcometr 4s ease-in-out infinite; }
@keyframes cxcometr { 0% { background-position: 130% 0, 0 0; } 60%, 100% { background-position: -30% 0, 0 0; } }
.rcard.rc_bloom { background: radial-gradient(circle at 0 0, #ff9cc755, transparent 50%), radial-gradient(circle at 100% 100%, #ffcf9c33, transparent 45%), #3a1430; border-color: #ff9cc7; box-shadow: 0 0 10px #ff9cc733; }