/* Cosmetics: frames, chat bubbles, titles and victory effects.
   Shared with the table: class names and custom properties are a stable contract. */

:root {
  --cos-laurel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff1c9'/><stop offset='.5' stop-color='%23d9b77a'/><stop offset='1' stop-color='%238a6a33'/></linearGradient><g id='p' fill='url(%23g)'><ellipse cx='5' cy='-2.3' rx='5.4' ry='1.9' transform='rotate(-24)'/><ellipse cx='5' cy='2.3' rx='5.4' ry='1.9' transform='rotate(24)'/></g><g id='l'><path d='M44 95.6 A46 46 0 0 1 14.8 20.4' fill='none' stroke='%23b8914f' stroke-width='1.1'/><use href='%23p' transform='translate(42 95.3) rotate(190)'/><use href='%23p' transform='translate(30.5 91.7) rotate(205)'/><use href='%23p' transform='translate(20.4 85.2) rotate(220)'/><use href='%23p' transform='translate(12.3 76.4) rotate(235)'/><use href='%23p' transform='translate(6.8 65.7) rotate(250)'/><use href='%23p' transform='translate(4.2 54) rotate(265)'/><use href='%23p' transform='translate(4.7 42) rotate(280)'/><use href='%23p' transform='translate(8.3 30.5) rotate(295)'/><use href='%23p' transform='translate(14.8 20.4) rotate(310)'/><ellipse cx='17.5' cy='16.6' rx='4.6' ry='1.8' transform='rotate(-52 17.5 16.6)' fill='url(%23g)'/></g></defs><use href='%23l'/><use href='%23l' transform='translate(100 0) scale(-1 1)'/><circle cx='50' cy='97' r='2.2' fill='%23c42a52' stroke='%238a6a33' stroke-width='.6'/></svg>");
  --cos-lace: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff1c9'/><stop offset='.5' stop-color='%23d9b77a'/><stop offset='1' stop-color='%238a6a33'/></linearGradient></defs><g fill='none' stroke='url(%23g)'><circle cx='50' cy='50' r='47.2' stroke-width='3.2' stroke-dasharray='.01 5.2' stroke-linecap='round'/><circle cx='50' cy='50' r='44.6' stroke-width='.7' stroke-dasharray='2.6 1.3'/><circle cx='50' cy='50' r='49.3' stroke-width='.5' stroke-dasharray='.01 2.6' stroke-linecap='round'/></g><g transform='translate(24.8 -14.6) scale(.42)'><path fill='url(%23g)' stroke='%235d4118' stroke-width='2' d='M12 58 C22 47 38 44 50 50 C54 52.5 58 53 61 51.5 C74 44 92 42 108 33 C104 50 94 64 81 67 C72 69 66 63.5 60 63.5 C54 63.5 47 69.5 38 69 C26 68.5 17 64 12 58Z'/><path fill='%231b1206' d='M26 59.2 C30.75 48.5 40.25 48.5 45 56.8 C40.25 65.6 30.75 65.6 26 59.2Z M73.5 53.7 C78.25 46 87.75 46 92.5 57.3 C87.75 63.1 78.25 63.1 73.5 53.7Z'/></g></svg>");
  --cos-crown: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff4d6'/><stop offset='.45' stop-color='%23e8c47f'/><stop offset='1' stop-color='%238a6a33'/></linearGradient></defs><path d='M12 64 L6 20 L33 41 L60 8 L87 41 L114 20 L108 64 Z' fill='url(%23g)' stroke='%235d4118' stroke-width='2.4' stroke-linejoin='round'/><rect x='12' y='60' width='96' height='13' rx='3' fill='url(%23g)' stroke='%235d4118' stroke-width='2.4'/><circle cx='60' cy='45' r='7.5' fill='%23c42a52' stroke='%235d4118' stroke-width='1.6'/><circle cx='34' cy='51' r='4.4' fill='%23e5486b'/><circle cx='86' cy='51' r='4.4' fill='%23e5486b'/><circle cx='6' cy='20' r='4.6' fill='%23fff4d6'/><circle cx='60' cy='8' r='5' fill='%23fff4d6'/><circle cx='114' cy='20' r='4.6' fill='%23fff4d6'/></svg>");
}

/* ---------- portrait helper ---------- */

.cos-portrait {
  --size: 64px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  vertical-align: middle;
}
.cos-portrait > img,
.cos-portrait > .cos-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2, #16121a);
  box-shadow: 0 0 0 1px rgba(217, 183, 122, 0.22), 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* ---------- frames ---------- */

:where(.cos-frame) {
  position: relative;
  border-radius: 50%;
}
.cos-frame {
  --cos-w: 7%;
  isolation: isolate;
}
.cos-frame::before,
.cos-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.cos-frame::before {
  inset: calc(-1 * var(--cos-w));
  padding: var(--cos-w);
  z-index: 2;
  background: var(--cos-ring, #b8284c);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.cos-frame--thread {
  --cos-w: 4.5%;
  --cos-ring: conic-gradient(from 30deg, #8e1b3a, #e5486b, #6e1030, #c42a52, #8e1b3a);
}

.cos-frame--brass {
  --cos-w: 7%;
  --cos-ring: conic-gradient(from 200deg, #6d4d22, #e7c98d, #9c7438, #f5e0b0, #7a5624, #d9b77a, #6d4d22);
}

.cos-frame--pearl {
  --cos-w: 3%;
  --cos-ring: linear-gradient(135deg, #cfc6b8, #8f8577);
  box-shadow: 0 0 18px rgba(255, 246, 225, 0.22);
}
.cos-frame--pearl::after {
  inset: -15%;
  z-index: 3;
  border-radius: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke-linecap='round'><circle cx='50' cy='50' r='44' stroke='%23776d61' stroke-width='7.6' stroke-dasharray='.01 6.9015'/><circle cx='50' cy='50' r='44' stroke='%23efe6d6' stroke-width='6.4' stroke-dasharray='.01 6.9015'/><circle cx='50' cy='50' r='44.3' stroke='%23fffdf7' stroke-width='3' stroke-dasharray='.01 6.9015' transform='rotate(-1.2 50 50) translate(-.4 -.5)'/></g></svg>") center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.cos-frame--ember {
  --cos-w: 8%;
  --cos-ring: conic-gradient(from 0deg, #2a0906, #ff7a2f, #ffb347, #c2330e, #3a0b05, #ff5a1f, #ffb347, #2a0906);
}
.cos-frame--ember::after {
  inset: -18%;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 110, 40, 0.34) 42%, rgba(255, 60, 20, 0.08) 58%, transparent 70%);
  animation: cos-smoulder 3.2s ease-in-out infinite;
}

.cos-frame--laurel {
  --cos-w: 5%;
  --cos-ring: conic-gradient(from 160deg, #8a6a33, #f7e2b4, #d9b77a, #9c7438, #f1d9a6, #8a6a33);
}
.cos-frame--laurel::after {
  inset: -24%;
  z-index: 3;
  border-radius: 0;
  background: var(--cos-laurel) center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.cos-frame--mask {
  --cos-w: 4%;
  --cos-ring: linear-gradient(135deg, #f7e2b4, #9c7438 60%, #5d4118);
}
.cos-frame--mask::after {
  inset: -17%;
  z-index: 3;
  border-radius: 0;
  background: var(--cos-lace) center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.cos-frame--aurora {
  --cos-w: 8%;
  --cos-ring: conic-gradient(from var(--cos-spin, 0deg), #4ff0c9, #5b9dff, #b26bff, #ff6fb5, #ffd27a, #4ff0c9);
}
.cos-frame--aurora::before {
  animation: cos-spin-ring 6s linear infinite;
}
.cos-frame--aurora::after {
  inset: -20%;
  z-index: -1;
  background: conic-gradient(from 0deg, rgba(79, 240, 201, 0.55), rgba(91, 157, 255, 0.5), rgba(178, 107, 255, 0.6), rgba(255, 111, 181, 0.5), rgba(79, 240, 201, 0.55));
  filter: blur(12px);
  opacity: 0.75;
  animation: cos-rotate 9s linear infinite reverse;
}

.cos-frame--crown {
  --cos-w: 8.5%;
  --cos-ring:
    conic-gradient(from var(--cos-spin, 0deg), transparent 0deg 300deg, rgba(255, 255, 255, 0.9) 330deg, transparent 360deg),
    conic-gradient(from 140deg, #8a6a33, #fff1c9, #e3b85c, #9c7438, #ffe8a8, #c79a45, #8a6a33);
  box-shadow: 0 0 22px rgba(243, 184, 87, 0.45), 0 0 60px rgba(243, 184, 87, 0.18);
  animation: cos-crown-glow 3.6s ease-in-out infinite;
}
.cos-frame--crown::before {
  animation: cos-spin-ring 3.8s linear infinite;
}
.cos-frame--crown::after {
  z-index: 3;
  left: 50%;
  top: -34%;
  width: 62%;
  height: 42%;
  border-radius: 0;
  transform: translateX(-50%) rotate(-8deg);
  background: var(--cos-crown) center / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 8px rgba(255, 214, 130, 0.55));
  animation: cos-crown-bob 3.6s ease-in-out infinite;
}

@property --cos-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes cos-spin-ring { to { --cos-spin: 360deg; } }
@keyframes cos-rotate { to { transform: rotate(360deg); } }
@keyframes cos-smoulder { 0%, 100% { opacity: 0.55; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes cos-crown-glow { 0%, 100% { box-shadow: 0 0 18px rgba(243, 184, 87, 0.38), 0 0 50px rgba(243, 184, 87, 0.12); } 50% { box-shadow: 0 0 28px rgba(243, 184, 87, 0.6), 0 0 80px rgba(243, 184, 87, 0.24); } }
@keyframes cos-crown-bob { 0%, 100% { transform: translate(-50%, 0) rotate(-8deg); } 50% { transform: translate(-50%, -6%) rotate(-5deg); } }

/* ---------- chat bubbles ---------- */

.cos-bubble {
  --cos-bubble-ink: inherit;
  position: relative;
  border-radius: 16px;
  color: var(--cos-bubble-ink);
  transition: box-shadow var(--dur-2, 260ms) ease;
}
.cos-bubble.cos-bubble--smoke {
  background: linear-gradient(160deg, rgba(120, 120, 130, 0.22), rgba(60, 60, 70, 0.16));
  box-shadow: 0 0 0 1px rgba(200, 200, 210, 0.22) inset, 0 8px 22px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
}
.cos-bubble.cos-bubble--wine {
  background: linear-gradient(160deg, rgba(184, 40, 76, 0.34), rgba(110, 16, 48, 0.28));
  box-shadow: 0 0 0 1px rgba(229, 72, 107, 0.4) inset, 0 8px 22px rgba(110, 16, 48, 0.25);
}
.cos-bubble.cos-bubble--gilded {
  background: linear-gradient(160deg, rgba(217, 183, 122, 0.14), rgba(217, 183, 122, 0.05));
  box-shadow: 0 0 0 1px rgba(217, 183, 122, 0.75) inset, 0 0 0 3px rgba(217, 183, 122, 0.12), 0 8px 22px rgba(0, 0, 0, 0.2);
}
.cos-bubble.cos-bubble--velvet {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.08), transparent 55%),
    linear-gradient(160deg, #5b0f26, #2a0714);
  --cos-bubble-ink: #f7e9ea;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 -8px 16px rgba(0, 0, 0, 0.25) inset, 0 14px 30px rgba(40, 4, 16, 0.45);
}
.cos-bubble.cos-bubble--velvet a { color: #ffd9e1; }
.cos-bubble.cos-bubble--neon {
  background: rgba(14, 6, 24, 0.82);
  --cos-bubble-ink: #fdf0ff;
  box-shadow: 0 0 0 1px #ff5fd2 inset, 0 0 12px rgba(255, 95, 210, 0.55), 0 0 28px rgba(90, 200, 255, 0.28), 0 0 0 1px rgba(90, 200, 255, 0.4);
  text-shadow: 0 0 6px rgba(255, 140, 230, 0.55);
  animation: cos-neon 4s steps(1) infinite;
}
.cos-bubble.cos-bubble--royal {
  background:
    linear-gradient(160deg, rgba(40, 24, 8, 0.92), rgba(18, 10, 4, 0.94)) padding-box,
    linear-gradient(135deg, #fff1c9, #d9b77a 40%, #8a6a33 70%, #f7e2b4) border-box;
  border: 1.5px solid transparent;
  --cos-bubble-ink: #fbeed2;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 22px rgba(243, 184, 87, 0.18);
}
.cos-bubble.cos-bubble--royal::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0587a, #b8284c 55%, #6e1030);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(110, 16, 48, 0.4) inset;
}
html[data-theme="light"] .cos-bubble.cos-bubble--smoke { background: linear-gradient(160deg, rgba(90, 90, 100, 0.12), rgba(60, 60, 70, 0.06)); box-shadow: 0 0 0 1px rgba(60, 60, 70, 0.2) inset; }
html[data-theme="light"] .cos-bubble.cos-bubble--wine { background: linear-gradient(160deg, rgba(184, 40, 76, 0.14), rgba(184, 40, 76, 0.07)); }
html[data-theme="light"] .cos-bubble.cos-bubble--gilded { background: linear-gradient(160deg, rgba(217, 183, 122, 0.22), rgba(255, 250, 238, 0.8)); box-shadow: 0 0 0 1px rgba(156, 116, 56, 0.7) inset, 0 0 0 3px rgba(156, 116, 56, 0.1); }
@keyframes cos-neon { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.72; } 94% { opacity: 1; } 96% { opacity: 0.8; } }

/* ---------- titles ---------- */

.cos-title {
  --title-ink: var(--rar, var(--rar-common, #a7adb8));
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 4px 11px 5px 9px;
  border-radius: 999px;
  font-family: var(--display, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none;
  color: var(--title-ink);
  white-space: nowrap;
}
.cos-title::before {
  content: "✦";
  flex: none;
  width: auto;
  height: auto;
  transform: none;
  background: none;
  box-shadow: none;
  font-family: var(--display, "Cormorant Garamond", serif);
  font-style: normal;
  font-size: 0.62em;
  letter-spacing: 0;
  line-height: 1;
  color: var(--title-ink);
  text-shadow: 0 0 10px color-mix(in srgb, var(--title-ink) 70%, transparent);
}
.cos-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in srgb, var(--title-ink) 16%, rgba(12, 10, 16, 0.62));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--title-ink) 42%, transparent) inset;
}
.cos-title[data-rarity="epic"] { text-shadow: 0 0 12px rgba(178, 107, 255, 0.45); }
.cos-title[data-rarity="legendary"] {
  background: linear-gradient(90deg, #f3b857, #fff1c9 40%, #e3a93a 60%, #f3b857) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cos-title-sheen 4s linear infinite;
}
.cos-title[data-rarity="legendary"]::before {
  background: none;
  color: #f3b857;
  -webkit-background-clip: unset;
  background-clip: unset;
}
html[data-theme="light"] .cos-title::after {
  background: color-mix(in srgb, var(--title-ink) 12%, #fffbf5);
}
html[data-theme="light"] .cos-title[data-rarity="common"] { --title-ink: #6c727d; }
html[data-theme="light"] .cos-title[data-rarity="uncommon"] { --title-ink: #2f9a66; }
html[data-theme="light"] .cos-title[data-rarity="rare"] { --title-ink: #2f6fd6; }
html[data-theme="light"] .cos-title[data-rarity="epic"] { --title-ink: #8740d6; }
html[data-theme="light"] .cos-title[data-rarity="legendary"] { background-image: linear-gradient(90deg, #a8741d, #d9a441 40%, #8a5d12 60%, #a8741d); }
@keyframes cos-title-sheen { to { background-position: -200% 0; } }

/* ---------- victory effects overlay ---------- */

.cos-fx {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  transition: opacity 360ms ease;
}
.cos-fx.is-out { opacity: 0; }
.cos-fx canvas { position: absolute; inset: 0; }
.cos-fx-crown {
  position: absolute;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 18px rgba(255, 214, 130, 0.6));
  animation: cos-crown-drop 1.3s cubic-bezier(0.34, 1.4, 0.64, 1) both, cos-crown-float 2.4s ease-in-out 1.3s infinite;
}
.cos-fx-crown svg { width: 100%; height: 100%; }
.cos-fx-halo {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 160, 0.5), rgba(243, 184, 87, 0.18) 40%, transparent 68%);
  animation: cos-halo 3.6s ease-out both;
}
.cos-fx-glow { animation: cos-glow-pulse 1.6s ease-out; }
@keyframes cos-crown-drop { from { opacity: 0; transform: translateY(-240px) rotate(-18deg) scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes cos-crown-float { 50% { transform: translateY(-6px); } }
@keyframes cos-halo { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes cos-glow-pulse { 0% { box-shadow: 0 0 0 0 rgba(243, 184, 87, 0.8); } 100% { box-shadow: 0 0 0 26px rgba(243, 184, 87, 0); } }

.thumb {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 72px;
  overflow: hidden;
  background: #0c0a10;
}
.thumb--plaque { min-height: 0; background: transparent; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb--plaque img { object-fit: contain; }
.thumb-title {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 88px;
  padding: 10px 8px;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(13px, 1.6vw, 18px);
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  color: var(--gold-2);
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--rar, #d9b77a) 28%, transparent), transparent 60%),
    linear-gradient(160deg, #241820, #0c0a10);
}
.thumb-bubble {
  display: block;
  max-width: 90%;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
}
.thumb-effect { width: 48px; height: 48px; color: var(--gold); }
.thumb-effect svg { width: 100%; height: 100%; }
.thumb-face { --size: 72px; }

/* ---------- image frames ---------- */

.cos-frame--thorns,
.cos-frame--chains,
.cos-frame--serpent,
.cos-frame--lace-black,
.cos-frame--candles,
.cos-frame--velvet-rope,
.cos-frame--baroque,
.cos-frame--moon {
  --cos-w: 2.5%;
}
.cos-frame--thorns::after,
.cos-frame--chains::after,
.cos-frame--serpent::after,
.cos-frame--lace-black::after,
.cos-frame--candles::after,
.cos-frame--velvet-rope::after,
.cos-frame--baroque::after,
.cos-frame--moon::after {
  inset: -16%;
  z-index: 3;
  border-radius: 0;
  background: var(--cos-art) center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.cos-frame--thorns { --cos-ring: #2a0d14; --cos-art: url(/art/frames/thorns.webp); }
.cos-frame--chains { --cos-ring: #6d4d22; --cos-art: url(/art/frames/chains.webp); }
.cos-frame--serpent { --cos-ring: #7a5624; --cos-art: url(/art/frames/serpent.webp); }
.cos-frame--lace-black { --cos-ring: #3a3a40; --cos-art: url(/art/frames/lace-black.webp); }
.cos-frame--candles { --cos-ring: #6d4d22; --cos-art: url(/art/frames/candles.webp); }
.cos-frame--velvet-rope { --cos-ring: #6e1030; --cos-art: url(/art/frames/velvet-rope.webp); }
.cos-frame--baroque { --cos-ring: #8a6a33; --cos-art: url(/art/frames/baroque.webp); }
.cos-frame--moon {
  --cos-ring: #8f96a8;
  --cos-art: url(/art/frames/moon.webp);
  box-shadow: 0 0 18px rgba(190, 205, 255, 0.28);
}
.cos-frame--moon::after {
  animation: cos-moon-glow 4.2s ease-in-out infinite;
}
@keyframes cos-moon-glow {
  0%, 100% { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 4px rgba(200, 215, 255, 0.35)); }
  50% { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(200, 215, 255, 0.75)); }
}

/* ---------- wave4 css frames ---------- */

.cos-frame--ivy {
  --cos-w: 6%;
  --cos-ring: conic-gradient(from 80deg, #1f3a22, #6a9a4a, #2d5a32, #c4d48a, #1f3a22);
}
.cos-frame--ivy::after {
  inset: -8%;
  z-index: 3;
  border: 2px dashed rgba(106, 154, 74, 0.55);
  box-shadow: 0 0 0 3px rgba(31, 58, 34, 0.4);
}

.cos-frame--smoke {
  --cos-w: 7%;
  --cos-ring: conic-gradient(from var(--cos-spin, 0deg), #6a6a74, #c8c8d0, #3a3a44, #9a9aa8, #6a6a74);
}
.cos-frame--smoke::before { animation: cos-spin-ring 9s linear infinite; }
.cos-frame--smoke::after {
  inset: -16%;
  z-index: -1;
  background: radial-gradient(circle, rgba(200, 200, 210, 0.22) 42%, transparent 70%);
  filter: blur(8px);
}

.cos-frame--iron {
  --cos-w: 7.5%;
  --cos-ring: conic-gradient(from 200deg, #1a1c20, #8a9098, #3a3e46, #c4c8ce, #2a2e34, #1a1c20);
}

.cos-frame--frost {
  --cos-w: 6%;
  --cos-ring: conic-gradient(from 40deg, #8fb8d8, #f4fbff, #5a8aaa, #d8eef8, #8fb8d8);
  box-shadow: 0 0 16px rgba(180, 220, 255, 0.28);
}
.cos-frame--frost::after {
  inset: -14%;
  z-index: -1;
  background: radial-gradient(circle, rgba(200, 230, 255, 0.28) 40%, transparent 68%);
}

.cos-frame--honey {
  --cos-w: 7%;
  --cos-ring: conic-gradient(from 160deg, #7a4a12, #f0c060, #c47a20, #ffe8a0, #7a4a12);
}

.cos-frame--ribbon {
  --cos-w: 6.5%;
  --cos-ring: conic-gradient(from 10deg, #6e1030, #e5486b, #8e1b3a, #f7a0b4, #6e1030);
}
.cos-frame--ribbon::after {
  left: 50%;
  top: -18%;
  width: 28%;
  height: 18%;
  border-radius: 40% 40% 50% 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 30% 40%, #f7a0b4, #b8284c 60%, #6e1030);
  box-shadow: 8px 4px 0 -2px #8e1b3a, -8px 4px 0 -2px #8e1b3a;
  z-index: 3;
}

.cos-frame--onyx {
  --cos-w: 7%;
  --cos-ring: conic-gradient(from 220deg, #0a0a0c, #3a3a40, #d9b77a 48%, #1a1a1e 52%, #0a0a0c);
}

.cos-frame--blood-drip {
  --cos-w: 6%;
  --cos-ring: conic-gradient(from 90deg, #4a0814, #c42a52, #6e1030, #e5486b, #4a0814);
}
.cos-frame--blood-drip::after {
  inset: auto 42% -18% 42%;
  height: 22%;
  border-radius: 40% 40% 50% 50%;
  background: linear-gradient(180deg, #e5486b, #6e1030);
  z-index: 3;
  animation: cos-drip 2.8s ease-in-out infinite;
}

@keyframes cos-drip {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.85; }
  50% { transform: translateY(12%) scaleY(1.15); opacity: 1; }
}

/* ---------- wave4 image frames ---------- */

.cos-frame--cobweb,
.cos-frame--dice,
.cos-frame--keyhole,
.cos-frame--mirror,
.cos-frame--moth-wings,
.cos-frame--wax-seal,
.cos-frame--comet-ring,
.cos-frame--stained-glass {
  --cos-w: 2.5%;
}
.cos-frame--cobweb::after,
.cos-frame--dice::after,
.cos-frame--keyhole::after,
.cos-frame--mirror::after,
.cos-frame--moth-wings::after,
.cos-frame--wax-seal::after,
.cos-frame--comet-ring::after,
.cos-frame--stained-glass::after {
  inset: -16%;
  z-index: 3;
  border-radius: 0;
  background: var(--cos-art) center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.cos-frame--cobweb { --cos-ring: #6a6a74; --cos-art: url(/art/frames/cobweb.webp); }
.cos-frame--dice { --cos-ring: #cfc6b8; --cos-art: url(/art/frames/dice.webp); }
.cos-frame--keyhole { --cos-ring: #6d4d22; --cos-art: url(/art/frames/keyhole.webp); }
.cos-frame--mirror { --cos-ring: #8f96a8; --cos-art: url(/art/frames/mirror.webp); }
.cos-frame--moth-wings { --cos-ring: #8a6a33; --cos-art: url(/art/frames/moth-wings.webp); }
.cos-frame--wax-seal { --cos-ring: #6e1030; --cos-art: url(/art/frames/wax-seal.webp); }
.cos-frame--comet-ring {
  --cos-ring: #d9b77a;
  --cos-art: url(/art/frames/comet-ring.webp);
  box-shadow: 0 0 18px rgba(243, 184, 87, 0.28);
}
.cos-frame--stained-glass { --cos-ring: #3a1840; --cos-art: url(/art/frames/stained-glass.webp); }

/* ---------- wave4 chat bubbles ---------- */

.cos-bubble.cos-bubble--ink {
  background: linear-gradient(160deg, rgba(18, 22, 36, 0.92), rgba(8, 10, 18, 0.94));
  --cos-bubble-ink: #d8deea;
  box-shadow: 0 0 0 1px rgba(90, 110, 160, 0.45) inset, 0 10px 22px rgba(0, 0, 0, 0.3);
}
.cos-bubble.cos-bubble--ash {
  background: linear-gradient(160deg, rgba(150, 148, 152, 0.2), rgba(70, 68, 74, 0.16));
  box-shadow: 0 0 0 1px rgba(200, 196, 190, 0.22) inset, 0 8px 22px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px);
}
.cos-bubble.cos-bubble--frost {
  background: linear-gradient(160deg, rgba(180, 220, 255, 0.16), rgba(80, 120, 160, 0.12));
  box-shadow: 0 0 0 1px rgba(200, 230, 255, 0.45) inset, 0 0 18px rgba(160, 210, 255, 0.12);
}
.cos-bubble.cos-bubble--silk {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 244, 230, 0.16), transparent 55%),
    linear-gradient(160deg, rgba(232, 213, 196, 0.22), rgba(90, 60, 48, 0.18));
  --cos-bubble-ink: inherit;
  box-shadow: 0 1px 0 rgba(255, 244, 230, 0.2) inset, 0 8px 22px rgba(40, 20, 12, 0.18);
}
.cos-bubble.cos-bubble--parchment {
  background: linear-gradient(160deg, #e8d5b0, #c8a878);
  --cos-bubble-ink: #3a2a14;
  box-shadow: 0 0 0 1px rgba(90, 60, 24, 0.35) inset, 0 8px 18px rgba(40, 24, 8, 0.22);
}
.cos-bubble.cos-bubble--thunder {
  background: rgba(10, 12, 22, 0.88);
  --cos-bubble-ink: #e8eeff;
  box-shadow: 0 0 0 1px #c9d4ff inset, 0 0 16px rgba(160, 190, 255, 0.45), 0 0 28px rgba(90, 120, 255, 0.2);
  animation: cos-thunder 5.2s steps(1) infinite;
}
@keyframes cos-thunder {
  0%, 100% { box-shadow: 0 0 0 1px #c9d4ff inset, 0 0 16px rgba(160, 190, 255, 0.45); }
  86% { box-shadow: 0 0 0 1px #fff inset, 0 0 28px rgba(255, 255, 255, 0.8); }
  88% { box-shadow: 0 0 0 1px #c9d4ff inset, 0 0 10px rgba(160, 190, 255, 0.2); }
  91% { box-shadow: 0 0 0 1px #fff inset, 0 0 36px rgba(220, 230, 255, 0.9); }
}
html[data-theme="light"] .cos-bubble.cos-bubble--ink { background: linear-gradient(160deg, rgba(30, 36, 56, 0.9), rgba(16, 18, 28, 0.92)); }
html[data-theme="light"] .cos-bubble.cos-bubble--ash { background: linear-gradient(160deg, rgba(120, 118, 122, 0.12), rgba(80, 78, 82, 0.08)); }
html[data-theme="light"] .cos-bubble.cos-bubble--frost { background: linear-gradient(160deg, rgba(180, 220, 255, 0.28), rgba(230, 244, 255, 0.7)); }
html[data-theme="light"] .cos-bubble.cos-bubble--silk { background: linear-gradient(160deg, rgba(232, 213, 196, 0.45), rgba(255, 248, 240, 0.85)); }

/* ---------- wave4 victory effect thumbs ---------- */

.thumb-effect--ash { color: #9a9aa8; filter: drop-shadow(0 0 8px rgba(180, 180, 190, 0.45)); }
.thumb-effect--silk { color: #e8d5c4; filter: drop-shadow(0 0 8px rgba(232, 213, 196, 0.45)); }
.thumb-effect--ink { color: #6a82c8; filter: drop-shadow(0 0 8px rgba(90, 110, 180, 0.5)); }
.thumb-effect--thunder { color: #c9d4ff; filter: drop-shadow(0 0 10px rgba(200, 220, 255, 0.7)); animation: cos-thunder-glyph 2.4s ease-in-out infinite; }
@keyframes cos-thunder-glyph {
  0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 6px rgba(200, 220, 255, 0.4)); }
  45% { opacity: 1; filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.9)); }
  55% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .cos-frame::before, .cos-frame::after, .cos-frame, .cos-bubble, .cos-title, .thumb-effect--thunder { animation: none !important; }
}