/* Cosmetics: names, cards, frames, backgrounds, particles and chat looks.
   Items set CSS variables from js/cosmetics.js; these generated classes read them, so no per-item rules are needed. */

/* registered so keyframes can animate glow radius, glow colour and shadow offset */
@property --gr { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --gc { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --sx { syntax: '<length>'; inherits: true; initial-value: 2px; }

/* rarity colour hooks */
.rb-common { --rcol: var(--common); } .rb-uncommon { --rcol: var(--uncommon); } .rb-rare { --rcol: var(--rare); }
.rb-epic { --rcol: var(--epic); } .rb-legendary { --rcol: var(--legendary); } .rb-mythic { --rcol: var(--mythic); }

/* ------------------------------------------------------------------ names */
.cn { display: inline-flex; align-items: center; gap: .3em; max-width: 100%; vertical-align: middle; position: relative;
  animation: var(--ga, none) var(--gd, 2s) ease-in-out infinite, var(--sa, none) var(--sd, 1s) ease-in-out infinite; }
.cn-t { position: relative; display: inline-block; white-space: nowrap; color: var(--c, var(--text));
  text-shadow: var(--o, 0 0 0 transparent), 0 0 var(--gr) var(--gc), 0 0 calc(var(--gr) * 2.2) var(--gc), var(--s, 0 0 0 transparent); }
.cn-l { display: inline-block; white-space: pre; }
.cn-g { display: inline-flex; flex: none; color: var(--c, var(--gcol, var(--rcol, var(--text)))); filter: drop-shadow(1px 1px 0 rgba(0,0,0,.7)); }
.cn-g .spr { width: .85em; height: .85em; min-width: 12px; min-height: 12px; }

/* shine sweep: rare+ items, and Gloss colours */
.rp-sheen > .cn-t::before { content: attr(data-t); position: absolute; inset: 0; color: transparent; text-shadow: none; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; animation: k-sheen 3.6s linear infinite; }
.rp-hot > .cn-t::before { animation-duration: 2s; }
@keyframes k-sheen { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* glow and shadow animations (on .cn, they drive the registered properties) */
@keyframes gl-pulse { 50% { --gr: 11px; } }
@keyframes gl-flick { 0%, 100% { --gr: 7px; } 20% { --gr: 3px; } 40% { --gr: 9px; } 60% { --gr: 4px; } 80% { --gr: 8px; } }
@keyframes gl-prism { 0%, 100% { --gc: #ff4d6d; } 20% { --gc: #ffd34d; } 40% { --gc: #5fe08a; } 60% { --gc: #4fa8ff; } 80% { --gc: #c05fff; } }
@keyframes sh-flick { 0%, 100% { --sx: 2px; } 50% { --sx: 4px; } 70% { --sx: 1px; } }
@keyframes sh-pulse { 50% { --sx: 9px; } }

/* the 20 name animations */
.an-pulse { animation: k-pulse var(--ad) ease-in-out infinite; }
@keyframes k-pulse { 50% { transform: scale(1.08); filter: brightness(1.35); } }
.an-shimmer::after { content: attr(data-t); position: absolute; inset: 0; color: transparent; pointer-events: none; text-shadow: none;
  background: linear-gradient(100deg, transparent 35%, #fff 50%, transparent 65%) 100% 0 / 250% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: k-sheen var(--ad) linear infinite; }
.an-flicker { animation: k-flicker var(--ad) linear infinite; }
@keyframes k-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .35; } 12% { opacity: 1; } 40% { opacity: .8; } 44% { opacity: .3; } 48% { opacity: 1; } 70% { opacity: .9; } }
.an-wave .cn-l { animation: k-wave var(--ad) ease-in-out infinite; animation-delay: calc(var(--i) * -.12s); }
@keyframes k-wave { 50% { transform: translateY(-.28em); } }
.an-rainbow { animation: k-rainbow var(--ad) linear infinite; }
@keyframes k-rainbow { 0%, 100% { color: #ff4d6d; } 17% { color: #ffb000; } 33% { color: #9be630; } 50% { color: #3fd0ff; } 67% { color: #7a5cff; } 83% { color: #f03cc8; } }
.an-glitch { animation: k-glitch-base var(--ad) steps(1) infinite; }
.an-glitch::after { content: attr(data-t); position: absolute; inset: 0; color: #ff2bd6; text-shadow: -2px 0 #00e5ff; mix-blend-mode: screen; pointer-events: none; opacity: 0; animation: k-glitch var(--ad) steps(1) infinite; }
@keyframes k-glitch-base { 0%, 86%, 100% { transform: none; } 88% { transform: translate(1px, 0); } 91% { transform: translate(-1px, 1px); } }
@keyframes k-glitch { 0%, 86%, 100% { opacity: 0; } 88% { opacity: 1; transform: translate(-2px, 0); clip-path: inset(10% 0 55% 0); } 91% { opacity: 1; transform: translate(2px, 1px); clip-path: inset(55% 0 10% 0); } 94% { opacity: 1; transform: translate(-1px, -1px); clip-path: inset(30% 0 40% 0); } }
.an-type { animation: k-type var(--ad) steps(var(--n), end) infinite; }
@keyframes k-type { 0% { clip-path: inset(-8px 100% -8px -8px); } 60%, 100% { clip-path: inset(-8px -8px -8px -8px); } }
.an-bounce .cn-l { animation: k-bounce var(--ad) steps(4) infinite; animation-delay: calc(var(--i) * -.09s); }
@keyframes k-bounce { 0%, 50%, 100% { transform: none; } 25% { transform: translateY(-.32em); } }
.an-drip::after { content: ''; position: absolute; left: 0; right: 0; top: 80%; height: 12px; pointer-events: none;
  background: linear-gradient(var(--c, #fff), var(--c, #fff)) 18% 0 / 2px 4px no-repeat, linear-gradient(var(--c, #fff), var(--c, #fff)) 62% 0 / 2px 3px no-repeat, linear-gradient(var(--c, #fff), var(--c, #fff)) 86% 0 / 2px 5px no-repeat;
  animation: k-drip var(--ad) steps(5) infinite; }
@keyframes k-drip { 0% { transform: translateY(-3px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
.an-spark::after { content: ''; position: absolute; inset: -5px; pointer-events: none;
  background: linear-gradient(#fff, #fff) 8% 0 / 3px 3px no-repeat, linear-gradient(#ffe27a, #ffe27a) 52% 85% / 2px 2px no-repeat, linear-gradient(#fff, #fff) 92% 18% / 3px 3px no-repeat, linear-gradient(#ffe27a, #ffe27a) 30% 60% / 2px 2px no-repeat;
  animation: k-spark var(--ad) steps(2) infinite; }
@keyframes k-spark { 0%, 100% { opacity: 0; } 40%, 60% { opacity: 1; } }
.an-sway { transform-origin: 50% 100%; animation: k-sway var(--ad) ease-in-out infinite; }
@keyframes k-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.an-shake { animation: k-shake var(--ad) steps(1) infinite; }
@keyframes k-shake { 0% { transform: translate(0); } 25% { transform: translate(-1px, 1px); } 50% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, -1px); } }
.an-fade { animation: k-fade var(--ad) ease-in-out infinite; }
@keyframes k-fade { 50% { opacity: .3; } }
.an-scan::after { content: attr(data-t); position: absolute; inset: 0; color: transparent; pointer-events: none; text-shadow: none;
  background: linear-gradient(180deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%) 0 100% / 100% 300% no-repeat, repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px);
  -webkit-background-clip: text; background-clip: text; animation: k-scan var(--ad) linear infinite; }
@keyframes k-scan { from { background-position: 0 100%, 0 0; } to { background-position: 0 0, 0 0; } }
.an-ember::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(#ff9a2e, #ff9a2e) 12% 100% / 2px 2px no-repeat, linear-gradient(#ffd34d, #ffd34d) 40% 100% / 2px 2px no-repeat, linear-gradient(#ff5a1a, #ff5a1a) 68% 100% / 3px 3px no-repeat, linear-gradient(#ff9a2e, #ff9a2e) 90% 100% / 2px 2px no-repeat;
  animation: k-ember var(--ad) steps(6) infinite; }
@keyframes k-ember { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-1.3em); opacity: 0; } }
.an-frost::after { content: attr(data-t); position: absolute; inset: 0; color: transparent; pointer-events: none; text-shadow: none;
  background: linear-gradient(#e6f8ff, #e6f8ff) 0 0 / 0% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: k-frost var(--ad) steps(10) infinite; }
@keyframes k-frost { 0% { background-size: 0% 100%; opacity: 1; } 60%, 80% { background-size: 100% 100%; opacity: 1; } 100% { background-size: 100% 100%; opacity: 0; } }
.an-vine::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 4px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #3fae4a 0 3px, #7bd86a 3px 5px, #2b7d34 5px 8px) 0 0 / 0% 100% no-repeat; animation: k-vine var(--ad) steps(10) infinite; }
@keyframes k-vine { 0% { background-size: 0% 100%; } 70%, 90% { background-size: 100% 100%; } 100% { background-size: 100% 100%; opacity: 0; } }
.an-crawl { isolation: isolate; }
.an-crawl::after { content: attr(data-t); position: absolute; inset: 0; color: #000; opacity: .6; z-index: -1; filter: blur(1px); text-shadow: none; pointer-events: none; animation: k-crawl var(--ad) ease-in-out infinite; }
@keyframes k-crawl { 0%, 100% { transform: translate(-3px, 2px); } 33% { transform: translate(3px, 3px); } 66% { transform: translate(1px, -2px) skewX(10deg); } }
.an-rays { isolation: isolate; }
.an-rays::after { content: ''; position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; translate: -50% -50%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,240,170,.55) 0 6deg, transparent 6deg 20deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 68%); mask: radial-gradient(circle, #000 0, transparent 68%);
  animation: k-spin var(--ad) linear infinite; }
@keyframes k-spin { to { rotate: 360deg; } }
.an-static::after { content: attr(data-t); position: absolute; inset: 0; color: transparent; pointer-events: none; text-shadow: none;
  background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 2px, transparent 2px 5px); -webkit-background-clip: text; background-clip: text; animation: k-static var(--ad) steps(4) infinite; }
@keyframes k-static { 0% { background-position: 0 0, 0 0; } 25% { background-position: 0 1px, 3px 0; } 50% { background-position: 0 2px, 1px 0; } 75% { background-position: 0 0, 4px 0; } 100% { background-position: 0 1px, 2px 0; } }

/* ------------------------------------------------------------------ cards */
.ccard { --fm: var(--line2); --fm2: #000; --fm3: var(--line); position: relative; min-width: 0; background: var(--panel); border: 2px solid var(--fm); }
.dot { display: inline-block; width: 8px; height: 8px; flex: none; background: var(--dim); opacity: .5; }
.dot.on { background: var(--good); opacity: 1; }

.ccard.compact { padding: 4px 6px; box-shadow: 2px 2px 0 #000; }
.ccard.compact.fr-thin { box-shadow: 2px 2px 0 #000, inset 0 0 0 1px var(--fm3); }
.cc-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 3px; }
.cc-extra { display: flex; gap: 4px; flex: none; }
.cc-stk { display: inline-flex; flex: none; }
.cc-task { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard.compact .bar { margin-top: 3px; height: 10px; }
.ccard.compact .bar > span { font-size: calc(11px * var(--ts, 1)); }

.ccard.full { min-height: 140px; border-width: 4px; box-shadow: 3px 3px 0 #000; margin-bottom: 12px; color: var(--text); }
.ccard.full.has-aura { box-shadow: 3px 3px 0 #000, 0 0 26px -2px var(--aura); }
.cc-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cc-bg { position: absolute; inset: 0; background: var(--sun, none), var(--sky); }
.cc-bg.plain { background: linear-gradient(160deg, var(--panel2), var(--panel)); }
.cc-sil { position: absolute; inset: 0; background: var(--sil); clip-path: var(--clip, none); }
.cc-bg.storm::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; animation: k-flash 5s steps(1) infinite; }
@keyframes k-flash { 0%, 90% { opacity: 0; } 91% { opacity: .55; } 92% { opacity: 0; } 94% { opacity: .4; } 95%, 100% { opacity: 0; } }
.cc-clip.rp-sheen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%) 100% 0 / 250% 100% no-repeat; animation: k-sheen 5s linear infinite; }
.cc-banner { position: relative; height: 34px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); border-bottom: 2px solid rgba(0,0,0,.5); }
.cc-body { position: relative; display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; align-items: center; }
.cc-portrait { position: relative; width: 84px; height: 84px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(8,5,20,.5); border: 3px solid var(--fm3); }
.cc-portrait .icon { width: 64px; height: 64px; }
.has-aura .cc-portrait { box-shadow: 0 0 14px 4px var(--aura), inset 0 0 12px var(--aura); animation: k-aura 2.4s ease-in-out infinite; }
@keyframes k-aura { 50% { box-shadow: 0 0 22px 8px var(--aura), inset 0 0 18px var(--aura); } }
.cc-id { position: relative; flex: 1 1 150px; min-width: 0; background: rgba(8,5,20,.6); border: 2px solid rgba(255,255,255,.12); padding: 6px 8px; color: #ece6ff; }
.cc-nm { font-size: calc(26px * var(--ts, 1)); line-height: 1.2; overflow: hidden; padding: 3px 4px; margin: -3px -4px; }
.cc-title { font-size: calc(17px * var(--ts, 1)); line-height: 1; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
.cc-tags { margin-top: 4px; gap: 6px; }
.cc-task { color: #cfc6ee; margin-top: 4px; }
.cc-stks { position: relative; display: flex; flex-direction: column; gap: 4px; flex: none; }
.cc-foot { position: relative; padding: 0 12px 12px; }
@media (max-width: 480px) {
  .cc-body { gap: 8px; padding: 8px; }
  .cc-portrait { width: 64px; height: 64px; } .cc-portrait .icon { width: 48px; height: 48px; }
  .cc-nm { font-size: calc(22px * var(--ts, 1)); }
  .cc-stks { flex-direction: row; flex-basis: 100%; }
}
.ccard.mini { min-height: 62px; border-width: 3px; margin: 0; width: 100%; }
.ccard.mini .cc-body { padding: 6px; justify-content: center; }
.ccard.mini .cc-portrait { width: 44px; height: 44px; border-width: 2px; }
.ccard.mini .cc-portrait .icon { width: 32px; height: 32px; }

/* frames: --fm main, --fm2 dark, --fm3 light */
.ccard.full.fr { border-width: 6px; border-color: var(--fm); box-shadow: 3px 3px 0 #000, inset 0 0 0 2px var(--fm2); }
.ccard.full.fr.has-aura { box-shadow: 3px 3px 0 #000, inset 0 0 0 2px var(--fm2), 0 0 26px -2px var(--aura); }
.fr-studded::before { content: ''; position: absolute; inset: -6px; pointer-events: none; z-index: 2;
  background: radial-gradient(circle, var(--fm3) 0 3px, var(--fm2) 3.5px 5px, transparent 5.5px) 0 0 / 12px 12px no-repeat, radial-gradient(circle, var(--fm3) 0 3px, var(--fm2) 3.5px 5px, transparent 5.5px) 50% 0 / 12px 12px no-repeat,
    radial-gradient(circle, var(--fm3) 0 3px, var(--fm2) 3.5px 5px, transparent 5.5px) 100% 0 / 12px 12px no-repeat, radial-gradient(circle, var(--fm3) 0 3px, var(--fm2) 3.5px 5px, transparent 5.5px) 0 50% / 12px 12px no-repeat,
    radial-gradient(circle, var(--fm3) 0 3px, var(--fm2) 3.5px 5px, transparent 5.5px) 100% 50% / 12px 12px no-repeat, radial-gradient(circle, var(--fm3) 0 3px, var(--fm2) 3.5px 5px, transparent 5.5px) 0 100% / 12px 12px no-repeat,
    radial-gradient(circle, var(--fm3) 0 3px, var(--fm2) 3.5px 5px, transparent 5.5px) 50% 100% / 12px 12px no-repeat, radial-gradient(circle, var(--fm3) 0 3px, var(--fm2) 3.5px 5px, transparent 5.5px) 100% 100% / 12px 12px no-repeat; }
.fr-runed { border-image: repeating-linear-gradient(90deg, var(--fm) 0 6px, var(--fm3) 6px 8px, var(--fm2) 8px 14px) 6; }
.fr-runed::before { content: ''; position: absolute; inset: 0; border: 1px dashed var(--fm3); pointer-events: none; z-index: 2; }
.fr-chained { border-style: dotted !important; }
.fr-chained::before { content: ''; position: absolute; inset: -1px; border: 2px solid var(--fm2); pointer-events: none; z-index: 2; }
.fr-thorned::before { content: ''; position: absolute; inset: -9px; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, var(--fm3) 50%, transparent 50%) 0 0 / 16px 16px no-repeat, linear-gradient(225deg, var(--fm3) 50%, transparent 50%) 100% 0 / 16px 16px no-repeat,
    linear-gradient(45deg, var(--fm3) 50%, transparent 50%) 0 100% / 16px 16px no-repeat, linear-gradient(315deg, var(--fm3) 50%, transparent 50%) 100% 100% / 16px 16px no-repeat; }
.fr-gilded { box-shadow: 3px 3px 0 #000, 0 0 0 2px var(--fm2), inset 0 0 0 2px var(--fm3), inset 0 0 0 4px var(--fm2) !important; }
.fr-cracked { border-color: var(--fm2) !important; }
.fr-cracked::before { content: ''; position: absolute; inset: -6px; border: 6px solid transparent; border-image: repeating-linear-gradient(115deg, var(--fm) 0 10px, transparent 10px 13px, var(--fm) 13px 24px) 6; pointer-events: none; z-index: 2; }
.fr-winged { margin-left: 22px; margin-right: 22px; }
.fr-winged::before, .fr-winged::after { content: ''; position: absolute; top: 8%; bottom: 8%; width: 22px; pointer-events: none; background: linear-gradient(var(--fm3), var(--fm)); }
.fr-winged::before { left: -26px; clip-path: polygon(100% 0, 0 30%, 45% 50%, 0 70%, 100% 100%); }
.fr-winged::after { right: -26px; clip-path: polygon(0 0, 100% 30%, 55% 50%, 100% 70%, 0 100%); }

/* ------------------------------------------------------------------ stickers */
.stk { display: inline-flex; align-items: center; justify-content: center; width: var(--stk, 28px); height: var(--stk, 28px); flex: none; background: var(--plate, #333); border: 2px solid var(--rcol, var(--line2)); box-shadow: 1px 1px 0 #000; }
.stk-1 { border-radius: 50%; }
.stk-2 { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0; border: 0; box-shadow: none; background: var(--plate); outline: 0; }
.stk-3 { clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%); border: 0; box-shadow: none; }
.stk .spr { display: block; }

/* ------------------------------------------------------------------ particles */
.pt { position: absolute; inset: 0; container-type: size; pointer-events: none; overflow: hidden; }
.pt-i { position: absolute; left: var(--x); top: 0; width: var(--sz); height: var(--sz); background: var(--col); display: block; will-change: transform; }
.pt-i.at-y { top: var(--y); }
.pt-dot { border-radius: 50%; } .pt-ring { background: none; border: 2px solid var(--col); border-radius: 50%; }
.pt-line { width: 2px; height: calc(var(--sz) * 5); rotate: 18deg; }
.pt-puff { border-radius: 50%; background: radial-gradient(circle, var(--col), transparent 70%); }
.pt-spr { background: none; }
.pt-spr .spr { display: block; }
.pt-fall .pt-i { animation: pt-fall var(--d) linear var(--dl) infinite; }
.pt-rise .pt-i { animation: pt-rise var(--d) linear var(--dl) infinite; }
.pt-spin .pt-i { animation: pt-fall var(--d) linear var(--dl) infinite, pt-rot calc(var(--d) / 3) linear var(--dl) infinite; }
.pt-float .pt-i { animation: pt-float var(--d) ease-in-out var(--dl) infinite; }
.pt-blink .pt-i { animation: pt-blink var(--d) steps(4) var(--dl) infinite; }
.pt-fly .pt-i { animation: pt-fly var(--d) linear var(--dl) infinite, pt-bob 1s steps(2) var(--dl) infinite; }
.pt-diag .pt-i { animation: pt-diag var(--d) linear var(--dl) infinite; }
.pt-drift .pt-i { animation: pt-drift var(--d) linear var(--dl) infinite; }
@keyframes pt-fall { from { transform: translate3d(0, -8cqh, 0); } to { transform: translate3d(var(--sw), 108cqh, 0); } }
@keyframes pt-rise { from { transform: translate3d(0, 108cqh, 0); opacity: 0; } 10%, 85% { opacity: 1; } to { transform: translate3d(var(--sw), -8cqh, 0); opacity: 0; } }
@keyframes pt-rot { to { rotate: 360deg; } }
@keyframes pt-float { 0%, 100% { transform: translate(0, 0); opacity: .5; } 50% { transform: translate(var(--sw), var(--sh)); opacity: 1; } }
@keyframes pt-blink { 0%, 100% { opacity: 0; scale: .4; } 50% { opacity: 1; scale: 1; } }
@keyframes pt-fly { from { transform: translateX(-10cqw); } to { transform: translateX(110cqw); } }
@keyframes pt-bob { 50% { translate: 0 4px; } }
@keyframes pt-diag { from { transform: translate3d(-6cqw, -10cqh, 0); } to { transform: translate3d(34cqw, 110cqh, 0); } }
@keyframes pt-drift { from { transform: translateX(-30cqw); opacity: 0; } 20%, 80% { opacity: .7; } to { transform: translateX(130cqw); opacity: 0; } }

/* ------------------------------------------------------------------ chat */
.chatline { display: flex; gap: 6px; align-items: flex-start; padding: 3px 0; min-width: 0; }
.cl-main { min-width: 0; flex: 1 1 auto; }
.cl-time { flex: none; padding-top: 3px; }
.cl-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: calc(20px * var(--ts, 1)); }
.cl-who .tag { font-size: calc(14px * var(--ts, 1)); }
.cl-bubble { display: inline-block; max-width: 100%; margin-top: 2px; padding: 0 2px; overflow-wrap: anywhere; color: var(--bf, var(--text)); position: relative; }
.cl-bubble.has-bb { padding: 2px 8px; background: var(--bb); border: 2px solid var(--bd); border-radius: var(--br); }
.bb-planks { background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgba(0,0,0,.25) 5px 6px); }
.bb-rolled { box-shadow: -4px 0 0 -1px var(--bd), 4px 0 0 -1px var(--bd); }
.bb-swallow { padding-right: 16px !important; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); }
.bb-warm { box-shadow: 0 0 8px var(--bd); }
.bb-cloud { padding: 4px 12px !important; box-shadow: -6px 6px 0 -3px var(--bb), -12px 12px 0 -5px var(--bb); }
.bb-shout { padding: 4px 12px !important; font-weight: bold; clip-path: polygon(0 10%, 5% 0, 10% 10%, 20% 0, 30% 10%, 40% 0, 50% 10%, 60% 0, 70% 10%, 80% 0, 90% 10%, 100% 0, 100% 90%, 95% 100%, 90% 90%, 80% 100%, 70% 90%, 60% 100%, 50% 90%, 40% 100%, 30% 90%, 20% 100%, 10% 90%, 0 100%); }
.bb-faint { opacity: .8; font-style: italic; }
.bb-gem { clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.bb-hung { margin-top: 6px; }
.bb-hung::before { content: ''; position: absolute; top: -6px; left: 8px; right: 8px; height: 5px; border-left: 2px solid var(--bd); border-right: 2px solid var(--bd); }
.bb-alt { border-right-width: 6px !important; }
.ct-rainbow { animation: k-rainbow 3s linear infinite; }
.ct-shake { display: inline-block; animation: k-shake .6s steps(1) infinite; }
.ct-fade { animation: k-fade 3s ease-in-out infinite; }
.ct-flicker { animation: k-flicker 1.8s linear infinite; }
.ct-gold { animation: k-gold 2.4s ease-in-out infinite; }
@keyframes k-gold { 50% { color: #fff2b0; } }
.ct-sparkle { animation: k-sparkle 1.4s steps(2) infinite; }
@keyframes k-sparkle { 0%, 100% { text-shadow: 0 0 2px #fff; } 50% { text-shadow: 0 0 8px #fff, 0 0 14px #ffe27a; } }
.ct-glitch { animation: k-ctglitch 2.4s steps(1) infinite; }
@keyframes k-ctglitch { 0%, 88%, 100% { text-shadow: none; } 90% { text-shadow: -2px 0 #ff2bd6, 2px 0 #00e5ff; } 94% { text-shadow: 2px 0 #ff2bd6, -2px 0 #00e5ff; } }
.ct-type { display: inline-block; animation: k-ctype 1.6s steps(var(--n), end) both; }
@keyframes k-ctype { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ct-reveal { animation: k-reveal 2.2s ease-out both; }
@keyframes k-reveal { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
.ct-bounce { display: inline-block; animation: k-ctbounce .7s steps(5) both; }
@keyframes k-ctbounce { 0%, 100% { transform: none; } 30% { transform: translateY(-6px); } 60% { transform: translateY(2px); } }
.ent { animation: k-ent var(--ed, .5s) var(--et) both; }
.ent-pop { animation: k-ent-pop var(--ed, .6s) var(--et) both; }
@keyframes k-ent { from { transform: translate(var(--ex), var(--ey)) rotate(var(--er)) scale(var(--es)); opacity: var(--eo); filter: brightness(var(--eb)) blur(var(--ebl)); } }
@keyframes k-ent-pop { from { transform: translate(var(--ex), var(--ey)) rotate(var(--er)) scale(var(--es)); opacity: var(--eo); filter: brightness(var(--eb)) blur(var(--ebl)); } 70% { transform: scale(1.1); opacity: 1; } }

/* ------------------------------------------------------------------ wardrobe swatches */
.swatch { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 6px; overflow: hidden; position: relative; background: var(--bg); text-align: center; }
.swatch .chatline { padding: 0; }
.swatch .cl-main { text-align: left; }

/* ------------------------------------------------------------------ effect switches */
/* reduce effects (settings), the OS reduced-motion preference, hidden tabs, and still previews */
.fx-off :is(.cn, .ccard, .chatline, .swatch), .fx-off :is(.cn, .ccard, .chatline, .swatch) *,
.fx-off :is(.cn, .ccard, .chatline, .swatch) *::before, .fx-off :is(.cn, .ccard, .chatline, .swatch) *::after,
.fx-still, .fx-still *, .fx-still *::before, .fx-still *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.cn, .ccard, .chatline, .swatch), :is(.cn, .ccard, .chatline, .swatch) *, :is(.cn, .ccard, .chatline, .swatch) *::before, :is(.cn, .ccard, .chatline, .swatch) *::after { animation: none !important; }
}
.fx-pause :is(.cn, .ccard, .chatline, .swatch), .fx-pause :is(.cn, .ccard, .chatline, .swatch) *,
.fx-pause :is(.cn, .ccard, .chatline, .swatch) *::before, .fx-pause :is(.cn, .ccard, .chatline, .swatch) *::after { animation-play-state: paused !important; }

/* pixel hero portraits and painted backdrops (cards) */
.cc-portrait canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }
.cc-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 85%; image-rendering: pixelated; opacity: .9; }
.ccard.full .cc-portrait { width: 112px; height: 112px; }
@media (max-width: 480px) { .ccard.full .cc-portrait { width: 84px; height: 84px; } }