/* ==========================================================================
   Profile cosmetics (lib/cosmetics.js): the look of every shop item.
   Class names are `cos-<item id>` with underscores as hyphens. Site themes
   apply to the whole page via <html data-site-theme="<id>">, and to shop
   previews via the same class name as every other item.
   ========================================================================== */

@property --cos-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes cos-spin {
    to { --cos-angle: 360deg; }
}

@keyframes cos-slide {
    to { background-position: 200px 0; }
}

@keyframes cos-slide-slow {
    to { background-position: 600px 0, 0 0; }
}

@keyframes cos-shine {
    0%, 55% { background-position: -150% 0, 0 0; }
    100% { background-position: 250% 0, 0 0; }
}

/* Moving cosmetics animate only transform and opacity, which the browser
   runs on the compositor, unaffected by a busy page (animating
   background-position or box-shadow repaints on the main thread).
   - Glows: a pseudo-element carrying the brightest shadow fades in and out.
   - Drifting patterns (bubbles, embers): the repeating layer sits on a
     pseudo-element one tile larger than its host and slides by exactly one
     tile per loop.
   - Stars don't drift: tiny dots moving a few pixels a second always step
     from pixel to pixel. They stay put and twinkle instead - two star sets
     on ::before/::after fading against each other. */
@keyframes cos-twinkle {
    from { opacity: 1; }
    to { opacity: 0.15; }
}

@keyframes cos-glow {
    from { opacity: var(--glow-min, 0.3); }
    to { opacity: 1; }
}

.cos-banner-galaxy,
.cos-bg-stars,
.cos-bg-bubbles,
.cos-bg-embers,
.cos-bg-void,
.cos-card-nether,
.cos-card-starry {
    /* every host is positioned already (profile backdrop, banner, row, previews) */
    overflow: hidden;
    isolation: isolate;
}

.cos-banner-galaxy::before,
.cos-bg-stars::before,
.cos-bg-bubbles::before,
.cos-bg-embers::before,
.cos-bg-void::before,
.cos-card-nether::before,
.cos-card-starry::before,
.cos-banner-galaxy::after,
.cos-bg-stars::after,
.cos-bg-void::after,
.cos-card-starry::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

.cos-banner-galaxy::before, .cos-banner-galaxy::after,
.cos-bg-stars::before, .cos-bg-stars::after,
.cos-bg-void::before, .cos-bg-void::after,
.cos-card-starry::before, .cos-card-starry::after {
    inset: 0;
    will-change: opacity;
    animation: cos-twinkle var(--twinkle-duration, 2.6s) ease-in-out infinite alternate;
}

/* the second set is at its dimmest while the first is brightest */
.cos-banner-galaxy::after,
.cos-bg-stars::after,
.cos-bg-void::after,
.cos-card-starry::after {
    animation-delay: calc(var(--twinkle-duration, 2.6s) * -1);
}

:root {
    --cos-ink: rgba(0, 0, 0, 0.09);
    --cos-star: rgba(60, 60, 110, 0.4);
    --cos-common: #757575;
    --cos-rare: #2563eb;
    --cos-epic: #9333ea;
    --cos-legendary: #d97706;
}

html.dark-mode {
    --cos-ink: rgba(255, 255, 255, 0.1);
    --cos-star: rgba(255, 255, 255, 0.75);
    --cos-common: #bdbdbd;
    --cos-rare: #60a5fa;
    --cos-epic: #c084fc;
    --cos-legendary: #fbbf24;
}

.cos-rarity-common { --rarity-color: var(--cos-common); }
.cos-rarity-rare { --rarity-color: var(--cos-rare); }
.cos-rarity-epic { --rarity-color: var(--cos-epic); }
.cos-rarity-legendary { --rarity-color: var(--cos-legendary); }

/* --- Site themes (whole website, only for their owner) ------------------ */

html[data-site-theme="site_blue"], .cos-site-blue {
    --primary-color: #2f80ed; --primary-hover: #1f6fd8; --primary-dark: #1a5fc0; --primary-light: #6aa8f7;
    --primary-ink: #2565bb; --on-primary: #000000;
}
html[data-site-theme="site_green"], .cos-site-green {
    --primary-color: #2eaa4f; --primary-hover: #25943f; --primary-dark: #1d7f35; --primary-light: #6fd08a;
    --primary-ink: #207737; --on-primary: #000000;
}
html[data-site-theme="site_pink"], .cos-site-pink {
    --primary-color: #e8479a; --primary-hover: #d63686; --primary-dark: #b82a70; --primary-light: #f489c0;
    --primary-ink: #b03675; --on-primary: #000000;
}
html[data-site-theme="site_purple"], .cos-site-purple {
    --primary-color: #8b5cf6; --primary-hover: #7c4ae8; --primary-dark: #6d28d9; --primary-light: #b79cff;
    --primary-ink: #734ccc; --on-primary: #ffffff;
}
html[data-site-theme="site_teal"], .cos-site-teal {
    --primary-color: #14b8a6; --primary-hover: #0ea596; --primary-dark: #0f8f83; --primary-light: #5eead4;
    --primary-ink: #0d766a; --on-primary: #1a1a1a;
}
html[data-site-theme="site_red"], .cos-site-red {
    --primary-color: #e53935; --primary-hover: #d32f2f; --primary-dark: #b71c1c; --primary-light: #ff7a73;
    --primary-ink: #bc2f2b; --on-primary: #ffffff;
}
html[data-site-theme="site_midnight"], .cos-site-midnight {
    --primary-color: #6366f1; --primary-hover: #5457e6; --primary-dark: #4338ca; --primary-light: #a5b4fc;
    --primary-ink: #5154c6; --on-primary: #ffffff;
    --bg-color: #eef0f8;
}
html.dark-mode[data-site-theme="site_midnight"], html.dark-mode .cos-site-midnight {
    --bg-color: #0c0f1e; --card-bg: #141a30; --white: #141a30; --card-hover-bg: #1a2140;
    --ip-bg: #1d2442; --ip-hover-bg: #262e52; --footer-bg: #090b17;
}
html[data-site-theme="site_gold"], .cos-site-gold {
    --primary-color: #d4a017; --primary-hover: #bf8f0f; --primary-dark: #a67c00; --primary-light: #f2cf5b;
    --primary-ink: #83630e; --on-primary: #1a1a1a;
    --bg-color: #f8f5ec;
}
html.dark-mode[data-site-theme="site_gold"], html.dark-mode .cos-site-gold {
    --bg-color: #13110b; --card-bg: #1d1a12; --white: #1d1a12; --card-hover-bg: #262218; --ip-bg: #2a2518;
}
html[data-site-theme="site_ender"], .cos-site-ender {
    --primary-color: #b05cff; --primary-hover: #9d45f0; --primary-dark: #7e22ce; --primary-light: #dcb3ff;
    --primary-ink: #8244bd; --on-primary: #000000;
    --bg-color: #f4effb;
}
html.dark-mode[data-site-theme="site_ender"], html.dark-mode .cos-site-ender {
    --bg-color: #0d0714; --card-bg: #170f22; --white: #170f22; --card-hover-bg: #1f1530;
    --ip-bg: #241836; --ip-hover-bg: #2e1f45; --footer-bg: #0a0510;
}
html[data-site-theme="site_ender"] body::before {
    background-image: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--primary-color) 14%, transparent), transparent 60%);
}

/* A theme's page glow stays put while the page scrolls: a fixed layer
   behind everything (background-attachment: fixed would repaint the whole
   body on every scroll step, and iOS ignores it). */
html[data-site-theme="site_ender"] body::before,
html[data-site-theme="site_synthwave"] body::before,
html[data-site-theme="site_sculk"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* --- Profile colour schemes (the profile page, for every visitor) ------- */

.cos-theme-ocean { --primary-color: #1e88e5; --primary-hover: #1976d2; --primary-dark: #1565c0; --primary-light: #64b5f6; --primary-ink: #1769b0; --on-primary: #000000; }
.cos-theme-forest { --primary-color: #2e7d32; --primary-hover: #276b2b; --primary-dark: #1b5e20; --primary-light: #66bb6a; --primary-ink: #2a732e; --on-primary: #ffffff; }
.cos-theme-cherry { --primary-color: #ec6a9c; --primary-hover: #e0548a; --primary-dark: #c2185b; --primary-light: #f8a5c6; --primary-ink: #a3496c; --on-primary: #1a1a1a; }
.cos-theme-slate { --primary-color: #607d8b; --primary-hover: #546e7a; --primary-dark: #455a64; --primary-light: #90a4ae; --primary-ink: #516975; --on-primary: #ffffff; }
.cos-theme-amethyst { --primary-color: #9b59d0; --primary-hover: #8a48c0; --primary-dark: #6a2c9e; --primary-light: #c69cf0; --primary-ink: #844cb1; --on-primary: #ffffff; }
.cos-theme-gold { --primary-color: #d4a017; --primary-hover: #bf8f0f; --primary-dark: #9c7300; --primary-light: #f5d160; --primary-ink: #83630e; --on-primary: #1a1a1a; }
.cos-theme-redstone { --primary-color: #d32f2f; --primary-hover: #c62828; --primary-dark: #8e0000; --primary-light: #ff6f60; --primary-ink: #bc2a2a; --on-primary: #ffffff; }
.cos-theme-neon { --primary-color: #00c8d7; --primary-hover: #00b3c0; --primary-dark: #0087a0; --primary-light: #72f5ff; --primary-ink: #00747d; --on-primary: #1a1a1a; }
.cos-theme-sunset { --primary-color: #f0564a; --primary-hover: #e04336; --primary-dark: #b0306b; --primary-light: #ffb347; --primary-ink: #b24037; --on-primary: #000000; }
.cos-theme-prismatic { --primary-color: #8b5cf6; --primary-hover: #7c3aed; --primary-dark: #db2777; --primary-light: #22d3ee; --primary-ink: #734ccc; --on-primary: #ffffff; }

/* Every theme above and below sets --primary-ink (its colour as readable
   text on light surfaces) and --on-primary (text on its solid fill) next to
   --primary-color. --primary-text is derived from them in main.css's :root,
   which only reaches the html element; a theme class on an inner element
   (shop previews, profile pages, player rows) derives it again here, and
   dark mode uses the bright --primary-color as text instead. */
[class*="cos-site-"], [class*="cos-theme-"] {
    --primary-text: var(--primary-ink);
}
html.dark-mode[data-site-theme],
html.dark-mode [class*="cos-site-"],
html.dark-mode [class*="cos-theme-"] {
    --primary-text: var(--primary-color);
}

.cos-theme-neon .profile-hero,
.cos-theme-neon .profile-season:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 45%, transparent), 0 0 26px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.cos-theme-sunset .profile-progress-fill,
.cos-theme-sunset .profile-block-bar span {
    background: linear-gradient(90deg, #ffb347, #f0564a, #b0306b);
}

.cos-theme-prismatic .profile-progress-fill,
.cos-theme-prismatic .profile-block-bar span {
    background: linear-gradient(90deg, #ff004c, #ff8a00, #ffe600, #2bd92b, #00c2ff, #8b5cf6);
}

.cos-theme-prismatic .profile-hero {
    border: 2px solid transparent;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
        linear-gradient(90deg, #ff004c, #ff8a00, #ffe600, #2bd92b, #00c2ff, #8b5cf6, #ff004c) border-box;
}

/* --- Banners ------------------------------------------------------------ */

.cos-banner-sky {
    background:
        radial-gradient(ellipse 90px 22px at 22% 40%, rgba(255, 255, 255, 0.55), transparent 70%),
        radial-gradient(ellipse 120px 26px at 70% 65%, rgba(255, 255, 255, 0.45), transparent 70%),
        linear-gradient(180deg, #5bb8f5, #2d8ee6 70%, #1f75c9);
}

.cos-banner-meadow {
    background:
        linear-gradient(0deg, #3f8f2a 0 18%, transparent 18%),
        repeating-linear-gradient(90deg, #52a83a 0 6px, #4a9c33 6px 12px) 0 100% / 100% 30% no-repeat,
        linear-gradient(180deg, #a9e0ff, #d8f3c8);
}

.cos-banner-rose {
    background:
        radial-gradient(circle at 15% 30%, rgba(255, 255, 255, 0.35) 0 16px, transparent 17px),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.25) 0 24px, transparent 25px),
        linear-gradient(120deg, #ffb3c7, #f06292 55%, #c2185b);
}

.cos-banner-desert {
    background:
        radial-gradient(ellipse 60% 70% at 25% 120%, #d9a441 60%, transparent 61%),
        radial-gradient(ellipse 55% 60% at 80% 125%, #c98f2f 60%, transparent 61%),
        linear-gradient(180deg, #ffd88a, #f7c46c 60%, #eab150);
}

.cos-banner-ocean {
    background:
        radial-gradient(circle at 50% 100%, transparent 17px, rgba(255, 255, 255, 0.35) 18px 20px, transparent 21px) 0 0 / 44px 22px,
        radial-gradient(circle at 50% 100%, transparent 17px, rgba(255, 255, 255, 0.2) 18px 20px, transparent 21px) 22px 11px / 44px 22px,
        linear-gradient(180deg, #0b7ac4, #045a94 60%, #033d68);
}

.cos-banner-forest {
    background:
        conic-gradient(from 150deg at 50% 0, #1d4d1f 60deg, transparent 0) 0 100% / 36px 60px repeat-x,
        conic-gradient(from 150deg at 50% 0, #2f6b2f 60deg, transparent 0) 18px 100% / 36px 80px repeat-x,
        linear-gradient(180deg, #9fd4a5, #5f9e67);
}

.cos-banner-deepslate {
    background:
        radial-gradient(circle, #5ee7df 0 2px, transparent 3px) 12px 18px / 70px 50px,
        radial-gradient(circle, #f5c518 0 2px, transparent 3px) 46px 36px / 90px 60px,
        radial-gradient(circle, #ff4d4d 0 1.5px, transparent 2.5px) 30px 6px / 110px 46px,
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(135deg, #3b3b44, #25252c);
}

.cos-banner-nether {
    background:
        radial-gradient(ellipse 50% 60% at 20% 110%, rgba(255, 120, 0, 0.75), transparent 70%),
        radial-gradient(ellipse 40% 50% at 75% 105%, rgba(255, 60, 0, 0.7), transparent 70%),
        linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px) 0 0 / 16px 16px,
        linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px) 0 0 / 16px 16px,
        linear-gradient(180deg, #5c0b0b, #8e1a12 60%, #b22d10);
}

.cos-banner-end {
    background:
        radial-gradient(circle, rgba(255, 250, 200, 0.9) 0 1.2px, transparent 2px) 0 0 / 38px 34px,
        radial-gradient(circle, rgba(220, 200, 255, 0.7) 0 1px, transparent 1.8px) 17px 19px / 52px 44px,
        radial-gradient(ellipse 45% 70% at 80% 100%, rgba(233, 226, 160, 0.55), transparent 70%),
        linear-gradient(160deg, #1b0b2e, #3d1a63 60%, #57308a);
}

.cos-banner-aurora {
    background:
        linear-gradient(100deg, transparent 10%, rgba(0, 255, 170, 0.55) 30%, rgba(0, 190, 255, 0.5) 45%, rgba(170, 90, 255, 0.55) 60%, transparent 80%, transparent 90%) 0 0 / 600px 100%,
        linear-gradient(180deg, #06142e, #0b2548);
    animation: cos-slide-slow 14s linear infinite;
}

.cos-banner-galaxy {
    background:
        radial-gradient(ellipse 35% 80% at 30% 50%, rgba(170, 60, 255, 0.55), transparent 70%),
        radial-gradient(ellipse 30% 70% at 75% 40%, rgba(0, 170, 255, 0.45), transparent 70%),
        linear-gradient(135deg, #050316, #120a33 60%, #0a1a3d);
}

/* Irregular star sets on wide tiles (a single-star tile reads as a grid). */
.cos-banner-galaxy::before {
    background:
        radial-gradient(circle at 14px 22px, #fff 0 1.1px, transparent 1.6px),
        radial-gradient(circle at 63px 71px, rgba(255, 255, 255, 0.75) 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 97px 14px, rgba(255, 255, 255, 0.75) 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 131px 92px, #fff 0 1.1px, transparent 1.6px),
        radial-gradient(circle at 178px 41px, rgba(255, 255, 255, 0.75) 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 209px 103px, rgba(255, 255, 255, 0.75) 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 236px 58px, #fff 0 1.1px, transparent 1.6px),
        radial-gradient(circle at 41px 104px, rgba(255, 255, 255, 0.75) 0 0.8px, transparent 1.3px);
    background-size: 250px 116px;
}

.cos-banner-galaxy::after {
    background:
        radial-gradient(circle at 29px 51px, rgba(220, 200, 255, 0.8) 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 82px 33px, #fff 0 1.1px, transparent 1.6px),
        radial-gradient(circle at 116px 62px, rgba(220, 200, 255, 0.8) 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 152px 18px, rgba(220, 200, 255, 0.8) 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 163px 79px, #fff 0 1.1px, transparent 1.6px),
        radial-gradient(circle at 197px 9px, rgba(220, 200, 255, 0.8) 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 224px 86px, rgba(220, 200, 255, 0.8) 0 0.8px, transparent 1.3px),
        radial-gradient(circle at 8px 84px, #fff 0 1.1px, transparent 1.6px);
    background-size: 250px 116px;
}

.cos-banner-enchanted {
    background:
        linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 200, 255, 0.35) 50%, transparent 60%) no-repeat,
        linear-gradient(120deg, #3b0a6b, #7b2ff7 45%, #c026d3 75%, #5b0fa8);
    background-size: 60% 100%, 100% 100%;
    animation: cos-shine 3.5s ease-in-out infinite;
}

.cos-banner-gold {
    background:
        linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.75) 47%, transparent 60%) no-repeat,
        radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px) 0 0 / 26px 22px,
        linear-gradient(120deg, #8a5a00, #d4a017 30%, #ffe27a 50%, #d4a017 70%, #8a5a00);
    background-size: 50% 100%, 26px 22px, 100% 100%;
    animation: cos-gold-shine 3s ease-in-out infinite;
}

@keyframes cos-gold-shine {
    0%, 55% { background-position: -150% 0, 0 0, 0 0; }
    100% { background-position: 250% 0, 0 0, 0 0; }
}

/* --- Avatar frames -------------------------------------------------------
   A ring laid over the avatar's edge (a gradient border masked to its
   outline), so it works on the round list avatars and the rounded-square
   profile avatar alike. */

.profile-avatar { --frame-inset: -4px; --frame-width: 4px; --frame-radius: 24px; }
.member-avatar { --frame-inset: -3px; --frame-width: 3px; --frame-radius: 50%; }

.cos-frame::after {
    content: '';
    position: absolute;
    inset: var(--frame-inset, -3px);
    z-index: 2;
    padding: var(--frame-width, 3px);
    border-radius: var(--frame-radius, 50%);
    background: var(--frame-paint);
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-clip: content-box, border-box;
    mask-composite: exclude;
    pointer-events: none;
}

.cos-frame .member-online-dot,
.cos-frame .profile-presence-dot {
    z-index: 3;
}

.cos-frame-wood { --frame-paint: repeating-linear-gradient(135deg, #6d4524 0 3px, #9c6a3a 3px 7px, #7f5530 7px 10px); }
.cos-frame-stone { --frame-paint: conic-gradient(from 45deg, #7d7d7d, #a3a3a3, #6a6a6a, #949494, #7d7d7d); }
.cos-frame-iron { --frame-paint: linear-gradient(135deg, #f4f4f4, #b8b8b8 30%, #fafafa 50%, #9a9a9a 75%, #e0e0e0); }
.cos-frame-gold { --frame-paint: linear-gradient(135deg, #fff4b0, #f5c518 30%, #b8860b 55%, #ffe066 80%, #d4a017); }
.cos-frame-copper { --frame-paint: linear-gradient(135deg, #5fd3b0, #3a9b7e 35%, #c77b4a 60%, #4fbf9a); }
.cos-frame-emerald {
    --frame-paint: linear-gradient(135deg, #8dffc0, #17b35c 40%, #0a7a3a 60%, #4dea8e);
    box-shadow: 0 0 12px rgba(23, 179, 92, 0.4);
}
.cos-frame-diamond {
    --frame-paint: linear-gradient(135deg, #e6fffd, #5ee7df 35%, #1aa7b8 60%, #b3fff8);
    box-shadow: 0 0 18px rgba(94, 231, 223, 0.6);
}
.cos-frame-amethyst {
    --frame-paint: linear-gradient(135deg, #f0dcff, #a855f7 40%, #6b21a8 65%, #d8b4fe);
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.55);
}
.cos-frame-redstone::before,
.cos-frame-netherite::before,
.cos-frame-enchanted::before {
    content: '';
    position: absolute;
    inset: var(--frame-inset, -3px);
    border-radius: var(--frame-radius, 50%);
    box-shadow: var(--frame-glow);
    pointer-events: none;
    animation: cos-glow var(--glow-duration) ease-in-out infinite alternate;
}

.cos-frame-redstone {
    --frame-paint: linear-gradient(135deg, #ff6b6b, #d00000 50%, #ff3030);
    --frame-glow: 0 0 22px rgba(255, 30, 30, 0.8);
    --glow-min: 0.2;
    --glow-duration: 0.8s;
}

.cos-frame-netherite,
.cos-frame-rainbow,
.cos-frame-enchanted {
    --frame-width-boost: 1px;
}

/* The spinning paints are declared on the ring itself: a custom property
   referencing var(--cos-angle) resolves where it's declared, so on the host
   it would freeze at 0deg while only the ring's angle animates. */
.cos-frame-netherite::after,
.cos-frame-rainbow::after,
.cos-frame-enchanted::after {
    padding: calc(var(--frame-width, 3px) + var(--frame-width-boost));
    inset: calc(var(--frame-inset, -3px) - var(--frame-width-boost));
    animation: cos-spin 3s linear infinite;
}

.cos-frame-netherite {
    --frame-glow: 0 0 24px rgba(255, 140, 0, 0.8);
    --glow-min: 0.45;
    --glow-duration: 1.2s;
}

.cos-frame-netherite::after {
    --frame-paint: conic-gradient(from var(--cos-angle), #2b2326, #ff5f00, #ffcf33, #2b2326 40%, #ff3d00, #ffb300, #2b2326);
}

.cos-frame-rainbow {
    box-shadow: 0 0 18px rgba(140, 90, 255, 0.45);
}

.cos-frame-rainbow::after {
    --frame-paint: conic-gradient(from var(--cos-angle), #ff004c, #ff8a00, #ffe600, #2bd92b, #00c2ff, #6b5bff, #d400ff, #ff004c);
    animation-duration: 4s;
}

.cos-frame-enchanted {
    --frame-glow: 0 0 28px rgba(220, 120, 255, 0.85);
    --glow-min: 0.4;
    --glow-duration: 1.1s;
}

.cos-frame-enchanted::after {
    --frame-paint: conic-gradient(from var(--cos-angle), #7b2ff7, #c77dff, #ffffff, #c77dff, #7b2ff7, #f107a3, #7b2ff7);
}

/* --- Name effects ------------------------------------------------------- */

.cos-name-aqua { color: #0e9fb3; }
.cos-name-green { color: #1f9a3e; }
.cos-name-red { color: #d32f2f; }
.cos-name-gold { color: #c98a00; }

html.dark-mode .cos-name-aqua { color: #55ffff; }
html.dark-mode .cos-name-green { color: #55ff55; }
html.dark-mode .cos-name-red { color: #ff5555; }
html.dark-mode .cos-name-gold { color: #ffaa00; }

.cos-name-ocean,
.cos-name-sunset,
.cos-name-toxic,
.cos-name-ice,
.cos-name-fire,
.cos-name-rainbow,
.cos-name-enchanted {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cos-name-ocean { background-image: linear-gradient(90deg, #00b4db, #0083b0 60%, #1f4fbf); }
.cos-name-sunset { background-image: linear-gradient(90deg, #ff9a44, #fc6076 55%, #b0306b); }
.cos-name-toxic { background-image: linear-gradient(90deg, #a8ff00, #22c55e 55%, #0f9d58); }

.cos-name-neon {
    color: #00b8a9;
    text-shadow: 0 0 6px rgba(0, 230, 210, 0.55), 0 0 14px rgba(0, 230, 210, 0.35);
}

html.dark-mode .cos-name-neon {
    color: #7dfff2;
    text-shadow: 0 0 6px rgba(0, 255, 230, 0.8), 0 0 18px rgba(0, 255, 230, 0.5);
}

/* Icy blues dark enough to read on light surfaces; the pale frost is the
   dark-mode look (on white it was nearly invisible). */
.cos-name-ice {
    background-image: linear-gradient(90deg, #0284c7, #38bdf8 45%, #0369a1 70%, #0ea5e9);
    filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.35));
}

html.dark-mode .cos-name-ice {
    background-image: linear-gradient(90deg, #7fd6ff, #e3f8ff 45%, #5ab8f0 70%, #b6ecff);
    filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.55));
}

.cos-name-fire {
    background-image: linear-gradient(90deg, #ff3d00, #ff9100, #ffd600, #ff9100, #ff3d00);
    background-size: 200px 100%;
    animation: cos-slide 1.6s linear infinite;
    filter: drop-shadow(0 0 5px rgba(255, 120, 0, 0.45));
}

.cos-name-rainbow {
    background-image: linear-gradient(90deg, #ff004c, #ff8a00, #ffe600, #2bd92b, #00c2ff, #6b5bff, #d400ff, #ff004c);
    background-size: 200px 100%;
    animation: cos-slide 2.5s linear infinite;
}

.cos-name-enchanted {
    background-image:
        linear-gradient(100deg, transparent 40%, #fff 50%, transparent 60%),
        linear-gradient(90deg, #8b2cf5, #d946ef 50%, #8b2cf5);
    background-size: 250% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: cos-shine 3s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(190, 90, 255, 0.55));
}

/* --- Titles ------------------------------------------------------------- */

.cos-title {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--rarity-color) 45%, transparent);
    background: color-mix(in srgb, var(--rarity-color) 12%, transparent);
    color: var(--rarity-color);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}

.cos-title.cos-rarity-legendary {
    border-color: transparent;
    background:
        linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.7) 50%, transparent 60%) no-repeat,
        linear-gradient(90deg, #b45309, #f59e0b 40%, #fde68a 55%, #f59e0b 70%, #b45309);
    background-size: 250% 100%, 100% 100%;
    color: #3b2300;
    animation: cos-shine 3.2s ease-in-out infinite;
}

/* --- Emblems ------------------------------------------------------------ */

.cos-emblem {
    --emblem-color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--emblem-color) 15%, transparent);
    color: var(--emblem-color);
}

.cos-emblem svg {
    width: 62%;
    height: 62%;
}

.cos-emblem-sword { --emblem-color: #78909c; }
.cos-emblem-pickaxe { --emblem-color: #8d6e63; }
.cos-emblem-heart { --emblem-color: #e53935; }
.cos-emblem-star { --emblem-color: #f5b400; }
.cos-emblem-creeper { --emblem-color: #2e9e3f; }
.cos-emblem-shield { --emblem-color: #3f51b5; }
.cos-emblem-potion { --emblem-color: #c2185b; }
.cos-emblem-bolt { --emblem-color: #f59e0b; box-shadow: 0 0 12px rgba(245, 158, 11, 0.35); }
.cos-emblem-diamond { --emblem-color: #1cb5c4; box-shadow: 0 0 12px rgba(28, 181, 196, 0.4); }
.cos-emblem-flame { --emblem-color: #ff5a1f; box-shadow: 0 0 12px rgba(255, 90, 31, 0.4); }

.cos-emblem-crown,
.cos-emblem-dragon-egg {
    position: relative;
}

.cos-emblem-crown::before,
.cos-emblem-dragon-egg::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 20px var(--emblem-glow);
    pointer-events: none;
    --glow-min: 0.3;
    animation: cos-glow 1.2s ease-in-out infinite alternate;
}

.cos-emblem-crown {
    --emblem-color: #d99a00;
    --emblem-glow: rgba(255, 190, 0, 0.75);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 170, 0, 0.12));
}

.cos-emblem-dragon-egg {
    --emblem-color: #a034e0;
    --emblem-glow: rgba(180, 60, 255, 0.75);
    background: linear-gradient(135deg, rgba(40, 10, 60, 0.85), rgba(110, 30, 160, 0.6));
    color: #e9b8ff;
}

/* --- Profile page backgrounds ------------------------------------------ */

.profile-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.cos-bg-dots { background: radial-gradient(var(--cos-ink) 2px, transparent 2.4px) 0 0 / 22px 22px; }

.cos-bg-grid {
    background:
        linear-gradient(var(--cos-ink) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, var(--cos-ink) 1px, transparent 1px) 0 0 / 32px 32px;
}

.cos-bg-stripes { background: repeating-linear-gradient(45deg, var(--cos-ink) 0 2px, transparent 2px 16px); }

.cos-bg-blocks {
    background:
        conic-gradient(var(--cos-ink) 25%, transparent 0 50%, var(--cos-ink) 0 75%, transparent 0) 0 0 / 48px 48px,
        linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 7%, transparent), transparent 70%);
}

.cos-bg-waves {
    background:
        radial-gradient(circle at 50% 100%, transparent 13px, color-mix(in srgb, var(--primary-color) 20%, transparent) 14px 16px, transparent 17px) 0 0 / 40px 20px,
        radial-gradient(circle at 50% 100%, transparent 13px, color-mix(in srgb, var(--primary-color) 12%, transparent) 14px 16px, transparent 17px) 20px 10px / 40px 20px;
}

.cos-bg-sunrise {
    background:
        radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255, 196, 107, 0.3), transparent 70%),
        linear-gradient(180deg, rgba(255, 122, 89, 0.2), rgba(255, 196, 107, 0.12) 40%, transparent 75%);
}

.cos-bg-stars {
    background: linear-gradient(180deg, rgba(26, 35, 126, 0.14), transparent 70%);
}

.cos-bg-stars { --twinkle-duration: 3.2s; }

.cos-bg-stars::before {
    background:
        radial-gradient(circle at 20px 30px, var(--cos-star) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 160px 70px, var(--cos-star) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 90px 150px, var(--cos-star) 0 0.9px, transparent 1.4px);
    background-size: 200px 220px;
}

.cos-bg-stars::after {
    background:
        radial-gradient(circle at 60px 100px, var(--cos-star) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 130px 190px, var(--cos-star) 0 0.9px, transparent 1.4px),
        radial-gradient(circle at 185px 20px, var(--cos-star) 0 0.9px, transparent 1.4px);
    background-size: 200px 220px;
}

.cos-bg-bubbles {
    background: linear-gradient(0deg, rgba(30, 136, 229, 0.14), transparent 70%);
}

.cos-bg-bubbles::before {
    inset: 0 0 -240px;
    background:
        radial-gradient(circle at 30px 60px, transparent 6px, rgba(64, 164, 223, 0.3) 7px 8px, transparent 9px),
        radial-gradient(circle at 120px 150px, transparent 9px, rgba(64, 164, 223, 0.25) 10px 11px, transparent 12px),
        radial-gradient(circle at 80px 200px, transparent 4px, rgba(64, 164, 223, 0.3) 5px 6px, transparent 7px);
    background-size: 160px 240px;
    animation: cos-rise-240 9s linear infinite;
}

@keyframes cos-rise-240 {
    to { transform: translateY(-240px); }
}

.cos-bg-embers {
    background: linear-gradient(0deg, rgba(255, 90, 0, 0.16), transparent 55%);
}

.cos-bg-embers::before {
    inset: 0 0 -240px;
    background:
        radial-gradient(2px 2px at 30px 40px, rgba(255, 120, 0, 0.75), transparent),
        radial-gradient(1.5px 1.5px at 110px 130px, rgba(255, 190, 0, 0.7), transparent),
        radial-gradient(2px 2px at 150px 210px, rgba(255, 70, 0, 0.7), transparent);
    background-size: 180px 240px;
    animation: cos-rise-240 6s linear infinite;
}

.cos-bg-aurora {
    background:
        linear-gradient(120deg, rgba(0, 255, 170, 0.16), rgba(0, 170, 255, 0.13), rgba(170, 0, 255, 0.16), rgba(0, 255, 170, 0.16)) 0 0 / 300% 300%;
    animation: cos-aurora 22s ease-in-out infinite alternate;
}

@keyframes cos-aurora {
    to { background-position: 100% 100%; }
}

.cos-bg-void {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(76, 29, 149, 0.25), transparent 70%),
        radial-gradient(ellipse 60% 50% at 90% 100%, rgba(190, 24, 93, 0.14), transparent 70%);
}

.cos-bg-void { --twinkle-duration: 3.6s; }

.cos-bg-void::before {
    background:
        radial-gradient(circle at 40px 50px, var(--cos-star) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 150px 110px, var(--cos-star) 0 0.9px, transparent 1.4px);
    background-size: 210px 230px;
}

.cos-bg-void::after {
    background:
        radial-gradient(circle at 90px 180px, var(--cos-star) 0 0.9px, transparent 1.4px),
        radial-gradient(circle at 180px 30px, var(--cos-star) 0 1.2px, transparent 1.8px);
    background-size: 210px 230px;
}

html.dark-mode .cos-bg-void {
    background-color: rgba(8, 2, 20, 0.55);
}


/* --- Player cards (the row in the players list) ------------------------
   Pattern layers over the card colour, faint enough to keep the row's text
   readable; the row's colour scheme (cos-theme-*) tints the themed ones. */

.cos-card-mist {
    background:
        linear-gradient(100deg, color-mix(in srgb, var(--primary-color) 16%, transparent), transparent 70%),
        var(--card-bg);
}

.cos-card-dots {
    background:
        radial-gradient(var(--cos-ink) 1.6px, transparent 2px) 0 0 / 14px 14px,
        var(--card-bg);
}

.cos-card-stripes {
    background:
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 9%, transparent) 0 8px, transparent 8px 18px),
        var(--card-bg);
}

.cos-card-grid {
    background:
        linear-gradient(var(--cos-ink) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(90deg, var(--cos-ink) 1px, transparent 1px) 0 0 / 18px 18px,
        var(--card-bg);
}

.cos-card-ocean {
    background:
        radial-gradient(circle at 50% 100%, transparent 9px, rgba(30, 136, 229, 0.22) 10px 11px, transparent 12px) 0 100% / 28px 14px repeat-x,
        linear-gradient(90deg, rgba(30, 136, 229, 0.16), rgba(0, 188, 212, 0.08) 60%, transparent),
        var(--card-bg);
}

.cos-card-forest {
    background:
        linear-gradient(135deg, transparent 75%, rgba(46, 125, 50, 0.16) 75%) 0 100% / 22px 22px repeat-x,
        linear-gradient(90deg, rgba(46, 125, 50, 0.18), rgba(139, 195, 74, 0.08) 60%, transparent),
        var(--card-bg);
}

.cos-card-sunset {
    background:
        radial-gradient(ellipse 40% 120% at 100% 50%, rgba(255, 179, 71, 0.28), transparent 70%),
        linear-gradient(90deg, rgba(176, 48, 107, 0.14), rgba(240, 86, 74, 0.14) 50%, rgba(255, 179, 71, 0.1)),
        var(--card-bg);
}

.cos-card-nether {
    background:
        linear-gradient(90deg, rgba(183, 28, 28, 0.2), rgba(255, 87, 34, 0.1) 60%, transparent),
        var(--card-bg);
}

.cos-card-nether::before {
    inset: 0 0 -60px;
    background:
        radial-gradient(1.5px 1.5px at 20px 18px, rgba(255, 120, 0, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 70px 44px, rgba(255, 190, 0, 0.7), transparent),
        radial-gradient(2px 2px at 110px 10px, rgba(255, 70, 0, 0.7), transparent);
    background-size: 130px 60px;
    animation: cos-card-rise 2.5s linear infinite;
}

.cos-card-end {
    background:
        radial-gradient(1.5px 1.5px at 24px 20px, var(--cos-star), transparent),
        radial-gradient(1px 1px at 90px 48px, var(--cos-star), transparent),
        linear-gradient(90deg, rgba(126, 34, 206, 0.2), rgba(233, 213, 160, 0.1) 70%, transparent);
    background-size: 120px 64px, 120px 64px, 100% 100%;
    background-color: var(--card-bg);
}

.cos-card-starry {
    background:
        linear-gradient(90deg, rgba(26, 35, 126, 0.22), rgba(26, 35, 126, 0.06) 70%, transparent),
        var(--card-bg);
}

.cos-card-starry::before {
    background:
        radial-gradient(circle at 20px 16px, var(--cos-star) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 130px 34px, var(--cos-star) 0 1.2px, transparent 1.8px);
    background-size: 160px 64px;
}

.cos-card-starry::after {
    background:
        radial-gradient(circle at 76px 48px, var(--cos-star) 0 0.9px, transparent 1.4px),
        radial-gradient(circle at 104px 12px, var(--cos-star) 0 1.2px, transparent 1.8px);
    background-size: 160px 64px;
}

/* Aurora and enchanted rows: the moving layer is a pseudo-element that
   slides by transform (the players list shows many rows at once, and an
   animated background-position would repaint each of them every frame).
   Aurora: the three-times-wide gradient slides from its left to its right
   third and back. Enchanted: the 60%-wide shine band crosses the row from
   just outside its left edge to just outside its right edge. */
.cos-card-aurora,
.cos-card-enchanted {
    overflow: hidden;
    isolation: isolate;
}

.cos-card-aurora::before,
.cos-card-enchanted::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    will-change: transform;
}

.cos-card-aurora {
    background: var(--card-bg);
}

.cos-card-aurora::before {
    width: 300%;
    background: linear-gradient(110deg, rgba(0, 255, 170, 0.2), rgba(0, 170, 255, 0.16), rgba(170, 0, 255, 0.2), rgba(0, 255, 170, 0.2));
    animation: cos-card-aurora 12s ease-in-out infinite alternate;
}

.cos-card-enchanted {
    background:
        linear-gradient(90deg, rgba(126, 34, 206, 0.18), rgba(79, 70, 229, 0.12) 60%, rgba(126, 34, 206, 0.08)),
        var(--card-bg);
}

.cos-card-enchanted::before {
    width: 60%;
    background: linear-gradient(105deg, transparent 40%, rgba(214, 170, 255, 0.35) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: cos-card-shine 4.5s ease-in-out infinite;
}

@keyframes cos-card-rise {
    to { transform: translateY(-60px); }
}


@keyframes cos-card-aurora {
    to { transform: translateX(-66.6667%); }
}

@keyframes cos-card-shine {
    0%, 50% { transform: translateX(-100%); }
    100% { transform: translateX(166.6667%); }
}

@media (prefers-reduced-motion: reduce) {
    [class*="cos-"],
    [class*="cos-"]::before,
    [class*="cos-"]::after,
    [class*="cos-"] svg {
        animation: none !important;
    }
}

/* ==========================================================================
   Second collection: synthwave, lava lamp, mother-of-pearl, honeycomb,
   sculk, crying obsidian, candy, coffee, mint/lavender, glitch, hologram,
   confetti, rain, falling petals, ender eye. Same rules as above: moving
   layers live on pseudo-elements and animate transform/opacity only.
   ========================================================================== */

.cos-banner-synthwave,
.cos-banner-lava-lamp,
.cos-banner-pearl,
.cos-bg-rain,
.cos-bg-synthwave,
.cos-bg-petals,
.cos-card-synthwave,
.cos-card-lava,
.cos-card-pearl {
    overflow: hidden;
    isolation: isolate;
}

.cos-banner-synthwave::before, .cos-banner-synthwave::after,
.cos-banner-lava-lamp::before, .cos-banner-lava-lamp::after,
.cos-banner-pearl::before, .cos-banner-pearl::after,
.cos-bg-rain::before,
.cos-bg-synthwave::before,
.cos-bg-petals::before,
.cos-card-synthwave::before,
.cos-card-lava::before,
.cos-card-pearl::before {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

/* Pastel bands one host-width apart: sliding the layer by one band width
   (a third of its own width) loops seamlessly. */
@keyframes cos-flow-third {
    to { transform: translateX(-33.3333%); }
}

@keyframes cos-lava-a {
    to { transform: translate(-6%, -18%) scale(1.08); }
}

@keyframes cos-lava-b {
    to { transform: translate(7%, 16%) scale(0.94); }
}

/* Perspective floor: one grid row (24px) per loop, towards the viewer. */
@keyframes cos-grid-floor {
    from { transform: perspective(80px) rotateX(58deg) translateY(0); }
    to { transform: perspective(80px) rotateX(58deg) translateY(24px); }
}

@keyframes cos-grid-slide {
    to { transform: translateX(-24px); }
}

@keyframes cos-rain {
    to { transform: translateY(200px); }
}

@keyframes cos-petals {
    to { transform: translate(-220px, 220px); }
}

@keyframes cos-ripple {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(1.4); opacity: 0; }
}

@keyframes cos-turn {
    to { transform: rotate(360deg); }
}

/* --- Banners ------------------------------------------------------------ */

.cos-banner-lavender {
    background:
        radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.45) 0 10px, transparent 26px),
        radial-gradient(circle at 64% 22%, rgba(255, 255, 255, 0.35) 0 6px, transparent 18px),
        repeating-linear-gradient(100deg, rgba(126, 87, 194, 0.28) 0 3px, transparent 3px 14px) 0 100% / 100% 42% no-repeat,
        linear-gradient(180deg, #f8d9e6, #d9c8f5 55%, #a98bdc);
}

.cos-banner-mushroom {
    background:
        radial-gradient(circle at 20% 34%, #fff 0 7px, transparent 7.5px),
        radial-gradient(circle at 34% 58%, #fff 0 5px, transparent 5.5px),
        radial-gradient(circle at 52% 28%, #fff 0 9px, transparent 9.5px),
        radial-gradient(circle at 71% 52%, #fff 0 6px, transparent 6.5px),
        radial-gradient(circle at 88% 26%, #fff 0 5px, transparent 5.5px),
        linear-gradient(0deg, #6d5a7a 0 16%, #8a7596 16% 20%, transparent 20%),
        linear-gradient(180deg, #e53935, #c62828 70%, #a61e1e);
}

/* Pointy-top honeycomb (radius 16px): one hexagon plus the edge below it
   per 27.713 x 48 tile. */
.cos-banner-honey {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48'%3E%3Cpath d='M13.856 0 27.713 8v16L13.856 32 0 24V8zM13.856 32v16' fill='none' stroke='%23fff3c4' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 27.713px 48px,
        radial-gradient(ellipse 60% 90% at 30% 20%, rgba(255, 244, 196, 0.55), transparent 70%),
        linear-gradient(135deg, #f6b73c, #e08e0b 55%, #b8650a);
}

/* Retro sunset: the sky with its sun sits on ::after, above the scrolling
   grid floor on ::before, so the grid never shows above the horizon. */
.cos-banner-synthwave {
    background: linear-gradient(180deg, #2a0845, #140022);
}

.cos-banner-synthwave::before {
    left: -60%;
    right: -60%;
    top: 58%;
    height: 120%;
    background:
        linear-gradient(#ff3bd4 1.5px, transparent 1.5px) 0 0 / 24px 24px,
        linear-gradient(90deg, #ff3bd4 1.5px, transparent 1.5px) 0 0 / 24px 24px;
    transform-origin: 50% 0;
    animation: cos-grid-floor 1.1s linear infinite;
}

.cos-banner-synthwave::after {
    inset: 0 0 42% 0;
    z-index: -1;
    background:
        radial-gradient(circle 30px at 50% 100%, #ffe27a 0 45%, #ff7eb6 100%, transparent 101%),
        radial-gradient(ellipse 45% 70% at 50% 100%, rgba(255, 110, 199, 0.55), transparent 70%),
        linear-gradient(180deg, #12002b, #3b0764 55%, #a21caf);
    box-shadow: 0 1px 0 #ff7eb6, 0 2px 14px rgba(255, 110, 199, 0.8);
}

.cos-banner-lava-lamp {
    background: linear-gradient(180deg, #ffb347, #ff6b6b 60%, #d9366f);
}

.cos-banner-lava-lamp::before,
.cos-banner-lava-lamp::after {
    inset: -30%;
    animation: cos-lava-a 7s ease-in-out infinite alternate;
}

.cos-banner-lava-lamp::before {
    background:
        radial-gradient(circle 46px at 22% 62%, #b3124f 0 62%, transparent 72%),
        radial-gradient(circle 30px at 58% 40%, #c2185b 0 62%, transparent 72%),
        radial-gradient(circle 52px at 84% 70%, #9c0f45 0 62%, transparent 72%);
}

.cos-banner-lava-lamp::after {
    background:
        radial-gradient(circle 26px at 38% 36%, #ffd180 0 60%, transparent 72%),
        radial-gradient(circle 38px at 70% 58%, #ff8a65 0 60%, transparent 72%),
        radial-gradient(circle 18px at 12% 34%, #ffe0a3 0 60%, transparent 72%);
    animation-name: cos-lava-b;
    animation-duration: 9s;
}

.cos-banner-pearl {
    background: linear-gradient(135deg, #fff1f7, #eef0ff 50%, #e9fbff);
}

.cos-banner-pearl::before {
    top: 0;
    bottom: 0;
    left: 0;
    width: 300%;
    background: linear-gradient(100deg, #ffd6ec, #d7d4ff 20%, #c6f3ff 40%, #d5ffe4 60%, #fff1c9 80%, #ffd6ec) 0 0 / 33.3334% 100%;
    opacity: 0.9;
    animation: cos-flow-third 9s linear infinite;
}

.cos-banner-pearl::after {
    inset: 0;
    background:
        radial-gradient(ellipse 30% 60% at 25% 30%, rgba(255, 255, 255, 0.8), transparent 70%),
        radial-gradient(ellipse 25% 50% at 78% 70%, rgba(255, 255, 255, 0.6), transparent 70%);
}

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

.cos-frame-rose-gold { --frame-paint: linear-gradient(135deg, #fde2e4, #e8a598 30%, #b76e79 55%, #f6c6c1 80%, #c98b8b); }
.cos-frame-candy { --frame-paint: repeating-conic-gradient(#e11d48 0 15deg, #ffd5dc 15deg 30deg); }

.cos-frame-obsidian {
    --frame-paint: linear-gradient(135deg, #1a0b2e, #4c1d95 40%, #0d0418 60%, #8b5cf6 85%, #1a0b2e);
    --frame-glow: 0 0 22px rgba(139, 92, 246, 0.85);
    --glow-min: 0.25;
    --glow-duration: 1.8s;
}

.cos-frame-obsidian::before {
    content: '';
    position: absolute;
    inset: var(--frame-inset, -3px);
    border-radius: var(--frame-radius, 50%);
    box-shadow: var(--frame-glow);
    pointer-events: none;
    animation: cos-glow var(--glow-duration) ease-in-out infinite alternate;
}

/* A sensor pulse: a thin ring leaves the frame and fades out. */
.cos-frame-sculk {
    --frame-paint: linear-gradient(135deg, #0b3a44, #0f5c68 40%, #1de9f6 60%, #0b3a44);
}

.cos-frame-sculk::before {
    content: '';
    position: absolute;
    inset: var(--frame-inset, -3px);
    border: 2px solid #22e4f5;
    border-radius: var(--frame-radius, 50%);
    pointer-events: none;
    will-change: transform, opacity;
    animation: cos-ripple 2.2s ease-out infinite;
}

.cos-frame-pearl {
    --frame-width-boost: 1px;
    box-shadow: 0 0 16px rgba(200, 190, 255, 0.55);
}

.cos-frame-pearl::after {
    padding: calc(var(--frame-width, 3px) + var(--frame-width-boost));
    inset: calc(var(--frame-inset, -3px) - var(--frame-width-boost));
    --frame-paint: conic-gradient(from var(--cos-angle), #ffd6ec, #ffffff, #c6f3ff, #d7d4ff, #fff1c9, #d5ffe4, #ffd6ec);
    animation: cos-spin 5s linear infinite;
}

/* --- Profile colour schemes -------------------------------------------- */

.cos-theme-mint { --primary-color: #1fae84; --primary-hover: #199a74; --primary-dark: #117a5b; --primary-light: #7ee2c0; --primary-ink: #157558; --on-primary: #1a1a1a; }
.cos-theme-lavender { --primary-color: #9575cd; --primary-hover: #8563c4; --primary-dark: #5e35b1; --primary-light: #c5b3ec; --primary-ink: #735a9e; --on-primary: #000000; }
.cos-theme-coffee { --primary-color: #9c6440; --primary-hover: #8a5534; --primary-dark: #6b3f22; --primary-light: #d4a27a; --primary-ink: #8b5939; --on-primary: #ffffff; }
.cos-theme-synthwave { --primary-color: #d946ef; --primary-hover: #c936df; --primary-dark: #7e22ce; --primary-light: #22d3ee; --primary-ink: #a134b1; --on-primary: #000000; }
.cos-theme-sculk { --primary-color: #0fb5c9; --primary-hover: #0ca2b4; --primary-dark: #0b4f5c; --primary-light: #6ff3ff; --primary-ink: #09727f; --on-primary: #1a1a1a; }

.cos-theme-synthwave .profile-progress-fill,
.cos-theme-synthwave .profile-block-bar span,
.cos-theme-synthwave .cos-palette-bar {
    background: linear-gradient(90deg, #22d3ee, #a855f7 50%, #f472b6);
}

.cos-theme-coffee .profile-progress-fill,
.cos-theme-coffee .profile-block-bar span {
    background: linear-gradient(90deg, #e8c39e, #9c6440 60%, #5b3419);
}

.cos-theme-sculk .profile-hero {
    box-shadow: inset 0 -50px 60px -50px color-mix(in srgb, #0fb5c9 55%, transparent);
}

.cos-theme-sculk .profile-progress-fill,
.cos-theme-sculk .profile-block-bar span,
.cos-theme-sculk .cos-palette-bar {
    background: linear-gradient(90deg, #0b3a44, #0fb5c9 60%, #6ff3ff);
}

/* --- Name effects ------------------------------------------------------- */

.cos-name-pink { color: #d6368a; }
.cos-name-purple { color: #7b3fb3; }
html.dark-mode .cos-name-pink { color: #ff7ac6; }
html.dark-mode .cos-name-purple { color: #c99bff; }

.cos-name-candy,
.cos-name-synthwave,
.cos-name-holo {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cos-name-candy { background-image: linear-gradient(90deg, #f472b6, #a78bfa 50%, #38bdf8); }

/* Chrome lettering: warm top half, cool bottom half. */
.cos-name-synthwave {
    background-image: linear-gradient(180deg, #ff4fc8 0%, #c774e8 48%, #7b61ff 52%, #2fb8ff 100%);
    filter: drop-shadow(0 0 4px rgba(255, 90, 210, 0.5));
}

/* Mostly still; a short burst of channel-split jitter every few seconds.
   steps() keeps the repaints to a handful per cycle. */
.cos-name-glitch {
    text-shadow: 1px 0 rgba(255, 0, 90, 0.6), -1px 0 rgba(0, 210, 255, 0.6);
    animation: cos-glitch 3.2s steps(1) infinite;
}

@keyframes cos-glitch {
    0%, 86%, 100% { text-shadow: 1px 0 rgba(255, 0, 90, 0.6), -1px 0 rgba(0, 210, 255, 0.6); }
    88% { text-shadow: -3px 1px rgba(255, 0, 90, 0.8), 3px -1px rgba(0, 210, 255, 0.8); }
    90% { text-shadow: 3px 0 rgba(255, 0, 90, 0.8), -2px 1px rgba(0, 210, 255, 0.8); }
    92% { text-shadow: -1px -1px rgba(255, 0, 90, 0.8), 2px 0 rgba(0, 210, 255, 0.8); }
    94% { text-shadow: 2px 1px rgba(255, 0, 90, 0.7), -3px 0 rgba(0, 210, 255, 0.7); }
}

.cos-name-holo {
    background-image: linear-gradient(90deg, #d633c0, #0aa5c2, #4d9e1f, #d633c0);
    background-size: 200px 100%;
    animation: cos-slide 4s linear infinite;
    filter: drop-shadow(0 0 5px rgba(10, 165, 194, 0.3));
}

html.dark-mode .cos-name-holo {
    background-image: linear-gradient(90deg, #ff77e9, #7afcff, #b4ff9f, #ffe56f, #ff77e9);
    filter: drop-shadow(0 0 6px rgba(122, 252, 255, 0.35));
}

/* --- Emblems ------------------------------------------------------------ */

.cos-emblem-leaf { --emblem-color: #43a047; }
.cos-emblem-moon { --emblem-color: #5c6bc0; }
.cos-emblem-compass { --emblem-color: #b7791f; }
.cos-emblem-anchor { --emblem-color: #0277bd; }

/* Dark mode: the darker emblem colours, lightened to stay visible on the
   dark cards (>= 3:1 like any icon). */
html.dark-mode .cos-emblem-sword { --emblem-color: #b0bec5; }
html.dark-mode .cos-emblem-pickaxe { --emblem-color: #bcaaa4; }
html.dark-mode .cos-emblem-shield { --emblem-color: #8c9eff; }
html.dark-mode .cos-emblem-potion { --emblem-color: #f06292; }
html.dark-mode .cos-emblem-moon { --emblem-color: #9fa8da; }
html.dark-mode .cos-emblem-anchor { --emblem-color: #4fc3f7; }

.cos-emblem-snowflake {
    --emblem-color: #29b6f6;
    box-shadow: 0 0 12px rgba(41, 182, 246, 0.4);
}

.cos-emblem-snowflake svg {
    animation: cos-turn 12s linear infinite;
}

.cos-emblem-ender-eye {
    position: relative;
    --emblem-color: #2dd4bf;
    --emblem-glow: rgba(45, 212, 191, 0.75);
    background: linear-gradient(135deg, rgba(4, 40, 36, 0.92), rgba(12, 90, 78, 0.7));
    color: #7fffe7;
}

.cos-emblem-ender-eye::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 20px var(--emblem-glow);
    pointer-events: none;
    --glow-min: 0.25;
    animation: cos-glow 1.6s ease-in-out infinite alternate;
}

/* --- Profile page backgrounds ------------------------------------------ */

.cos-bg-zigzag {
    background:
        linear-gradient(135deg, var(--cos-ink) 25%, transparent 25%) -16px 0 / 32px 32px,
        linear-gradient(225deg, var(--cos-ink) 25%, transparent 25%) -16px 0 / 32px 32px,
        linear-gradient(315deg, var(--cos-ink) 25%, transparent 25%) 0 0 / 32px 32px,
        linear-gradient(45deg, var(--cos-ink) 25%, transparent 25%) 0 0 / 32px 32px;
}

.cos-bg-confetti {
    background:
        radial-gradient(4px 4px at 20px 30px, rgba(244, 114, 182, 0.55), transparent),
        radial-gradient(4px 3px at 90px 70px, rgba(56, 189, 248, 0.55), transparent),
        radial-gradient(3px 4.5px at 150px 20px, rgba(250, 204, 21, 0.6), transparent),
        radial-gradient(4px 4px at 60px 140px, rgba(74, 222, 128, 0.55), transparent),
        radial-gradient(4.5px 3px at 130px 120px, rgba(167, 139, 250, 0.55), transparent),
        radial-gradient(3.5px 3.5px at 170px 170px, rgba(251, 146, 60, 0.6), transparent);
    background-size: 190px 190px;
}

.cos-bg-hex {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48'%3E%3Cpath d='M13.856 0 27.713 8v16L13.856 32 0 24V8zM13.856 32v16' fill='none' stroke='%23000' stroke-opacity='.09' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 41.57px 72px;
}

html.dark-mode .cos-bg-hex {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48'%3E%3Cpath d='M13.856 0 27.713 8v16L13.856 32 0 24V8zM13.856 32v16' fill='none' stroke='%23fff' stroke-opacity='.1' stroke-width='1.2'/%3E%3C/svg%3E");
}

.cos-bg-rain {
    background: linear-gradient(180deg, rgba(84, 110, 140, 0.16), transparent 70%);
}

.cos-bg-rain::before {
    inset: -200px 0 0 0;
    background:
        radial-gradient(1px 11px at 20px 30px, rgba(100, 150, 215, 0.55), transparent),
        radial-gradient(1px 9px at 75px 120px, rgba(100, 150, 215, 0.45), transparent),
        radial-gradient(1px 13px at 120px 60px, rgba(100, 150, 215, 0.55), transparent),
        radial-gradient(1px 8px at 150px 170px, rgba(100, 150, 215, 0.45), transparent),
        radial-gradient(1px 10px at 45px 180px, rgba(100, 150, 215, 0.5), transparent);
    background-size: 170px 200px;
    animation: cos-rain 0.9s linear infinite;
}

.cos-bg-synthwave {
    background: linear-gradient(180deg, rgba(126, 34, 206, 0.12), transparent 45%, rgba(236, 72, 153, 0.12));
}

.cos-bg-synthwave::before {
    left: -50%;
    right: -50%;
    top: 55%;
    height: 90%;
    background:
        linear-gradient(rgba(236, 72, 153, 0.3) 1.5px, transparent 1.5px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(236, 72, 153, 0.3) 1.5px, transparent 1.5px) 0 0 / 24px 24px;
    transform-origin: 50% 0;
    -webkit-mask-image: linear-gradient(transparent, #000 35%);
    mask-image: linear-gradient(transparent, #000 35%);
    animation: cos-grid-floor 1.4s linear infinite;
}

.cos-bg-petals {
    background: linear-gradient(180deg, rgba(244, 143, 177, 0.14), transparent 65%);
}

.cos-bg-petals::before {
    inset: -220px -220px 0 0;
    background:
        radial-gradient(8px 5px at 30px 40px, rgba(236, 110, 160, 0.7), transparent),
        radial-gradient(5px 8px at 120px 90px, rgba(244, 143, 177, 0.7), transparent),
        radial-gradient(7px 4px at 190px 160px, rgba(240, 98, 146, 0.6), transparent),
        radial-gradient(5px 7px at 70px 180px, rgba(244, 143, 177, 0.65), transparent),
        radial-gradient(7px 5px at 170px 20px, rgba(236, 110, 160, 0.6), transparent);
    background-size: 220px 220px;
    animation: cos-petals 16s linear infinite;
}

/* --- Player cards ------------------------------------------------------- */

.cos-card-lavender {
    background:
        repeating-linear-gradient(95deg, rgba(149, 117, 205, 0.12) 0 2px, transparent 2px 12px) 100% 0 / 40% 100% no-repeat,
        linear-gradient(90deg, rgba(197, 179, 236, 0.3), rgba(248, 217, 230, 0.18) 60%, transparent),
        var(--card-bg);
}

.cos-card-confetti {
    background:
        radial-gradient(2.5px 2.5px at 12px 14px, rgba(244, 114, 182, 0.6), transparent),
        radial-gradient(2.5px 2px at 48px 40px, rgba(56, 189, 248, 0.6), transparent),
        radial-gradient(2px 3px at 74px 16px, rgba(250, 204, 21, 0.65), transparent),
        radial-gradient(2.5px 2.5px at 30px 52px, rgba(74, 222, 128, 0.6), transparent),
        radial-gradient(3px 2px at 84px 48px, rgba(167, 139, 250, 0.6), transparent);
    background-size: 96px 64px;
    background-color: var(--card-bg);
}

.cos-card-honey {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48'%3E%3Cpath d='M13.856 0 27.713 8v16L13.856 32 0 24V8zM13.856 32v16' fill='none' stroke='%23e08e0b' stroke-opacity='.3' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 20.78px 36px,
        linear-gradient(90deg, rgba(246, 183, 60, 0.26), rgba(246, 183, 60, 0.06) 70%, transparent),
        var(--card-bg);
}

html.dark-mode .cos-card-honey {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.713' height='48' viewBox='0 0 27.713 48'%3E%3Cpath d='M13.856 0 27.713 8v16L13.856 32 0 24V8zM13.856 32v16' fill='none' stroke='%23f6b73c' stroke-opacity='.14' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 20.78px 36px,
        linear-gradient(90deg, rgba(246, 183, 60, 0.16), rgba(246, 183, 60, 0.04) 70%, transparent),
        var(--card-bg);
}

.cos-card-synthwave {
    background:
        linear-gradient(90deg, rgba(217, 70, 239, 0.22), rgba(34, 211, 238, 0.1) 65%, transparent),
        var(--card-bg);
}

.cos-card-synthwave::before {
    top: 0;
    bottom: 0;
    left: 45%;
    right: -24px;
    background:
        linear-gradient(rgba(217, 70, 239, 0.28) 1px, transparent 1px) 0 0 / 24px 12px,
        linear-gradient(90deg, rgba(34, 211, 238, 0.3) 1px, transparent 1px) 0 0 / 24px 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
    mask-image: linear-gradient(90deg, transparent, #000 45%);
    animation: cos-grid-slide 1.6s linear infinite;
}

.cos-card-lava {
    background:
        linear-gradient(90deg, rgba(255, 107, 107, 0.2), rgba(255, 179, 71, 0.1) 60%, transparent),
        var(--card-bg);
}

.cos-card-lava::before {
    inset: -40% -20%;
    background:
        radial-gradient(circle 40px at 18% 60%, rgba(217, 54, 111, 0.28) 0 30%, transparent 80%),
        radial-gradient(circle 30px at 52% 35%, rgba(255, 138, 101, 0.3) 0 30%, transparent 80%),
        radial-gradient(circle 46px at 86% 65%, rgba(255, 179, 71, 0.28) 0 30%, transparent 80%);
    animation: cos-lava-a 6s ease-in-out infinite alternate;
}

.cos-card-pearl {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent 60%),
        var(--card-bg);
}

.cos-card-pearl::before {
    top: 0;
    bottom: 0;
    left: 0;
    width: 300%;
    background: linear-gradient(100deg, #ffd6ec, #d7d4ff 20%, #c6f3ff 40%, #d5ffe4 60%, #fff1c9 80%, #ffd6ec) 0 0 / 33.3334% 100%;
    opacity: 0.4;
    animation: cos-flow-third 10s linear infinite;
}

html.dark-mode .cos-card-pearl {
    background: linear-gradient(90deg, rgba(199, 190, 255, 0.1), transparent 60%), var(--card-bg);
}

html.dark-mode .cos-card-pearl::before {
    opacity: 0.14;
}

html.dark-mode .cos-card-lavender {
    background:
        repeating-linear-gradient(95deg, rgba(179, 157, 219, 0.14) 0 2px, transparent 2px 12px) 100% 0 / 40% 100% no-repeat,
        linear-gradient(90deg, rgba(149, 117, 205, 0.22), rgba(240, 150, 190, 0.08) 60%, transparent),
        var(--card-bg);
}

/* --- Site themes -------------------------------------------------------- */

html[data-site-theme="site_mint"], .cos-site-mint {
    --primary-color: #1fae84; --primary-hover: #199a74; --primary-dark: #117a5b; --primary-light: #7ee2c0;
    --primary-ink: #15765a; --on-primary: #1a1a1a;
    --bg-color: #f0faf6;
}
html.dark-mode[data-site-theme="site_mint"], html.dark-mode .cos-site-mint {
    --bg-color: #0b1512; --card-bg: #12201b; --white: #12201b; --card-hover-bg: #182a24; --ip-bg: #1b2e27;
}
html[data-site-theme="site_coffee"], .cos-site-coffee {
    --primary-color: #9c6440; --primary-hover: #8a5534; --primary-dark: #6b3f22; --primary-light: #d4a27a;
    --primary-ink: #895838; --on-primary: #ffffff;
    --bg-color: #f7f1ea;
}
html.dark-mode[data-site-theme="site_coffee"], html.dark-mode .cos-site-coffee {
    --bg-color: #15100c; --card-bg: #1f1813; --white: #1f1813; --card-hover-bg: #29201a; --ip-bg: #2d231c;
}
html[data-site-theme="site_synthwave"], .cos-site-synthwave {
    --primary-color: #d946ef; --primary-hover: #c936df; --primary-dark: #7e22ce; --primary-light: #22d3ee;
    --primary-ink: #9e33ae; --on-primary: #000000;
    --bg-color: #fbf2ff;
}
html.dark-mode[data-site-theme="site_synthwave"], html.dark-mode .cos-site-synthwave {
    --bg-color: #120522; --card-bg: #1c0a33; --white: #1c0a33; --card-hover-bg: #251042;
    --ip-bg: #2a1248; --ip-hover-bg: #34185a; --footer-bg: #0c0318;
}
html[data-site-theme="site_synthwave"] body::before {
    background-image: linear-gradient(0deg, color-mix(in srgb, var(--primary-color) 12%, transparent), transparent 40%);
}
html[data-site-theme="site_sculk"], .cos-site-sculk {
    --primary-color: #0fb5c9; --primary-hover: #0ca2b4; --primary-dark: #0b4f5c; --primary-light: #6ff3ff;
    --primary-ink: #09727f; --on-primary: #1a1a1a;
    --bg-color: #eef8f9;
}
html.dark-mode[data-site-theme="site_sculk"], html.dark-mode .cos-site-sculk {
    --bg-color: #041113; --card-bg: #0a1c20; --white: #0a1c20; --card-hover-bg: #0f262b;
    --ip-bg: #112a30; --ip-hover-bg: #16353c; --footer-bg: #030c0e;
}
html[data-site-theme="site_sculk"] body::before {
    background-image: radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--primary-color) 14%, transparent), transparent 55%);
}