/* ==========================================================================
   NEXTBALL — mini profile card + profile cosmetics (shop / inventory tab)
   profile-card.js · cosmetics.js. Flat tiles, one orange accent; glow only
   where the cosmetic itself is the effect (developer core, gold shimmer).
   Loaded after arena.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Popover layer
   -------------------------------------------------------------------------- */
.pc-layer { position: fixed; left: 0; top: 0; z-index: 12000; pointer-events: none; opacity: 0; transition: opacity 120ms ease-out; will-change: transform; }
.pc-layer.is-open { pointer-events: auto; opacity: 1; }
.pc-layer .pc-card { animation: pc-in 140ms ease-out; }
@keyframes pc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.pc-card {
    --pc-accent: var(--orange, #FF6A13);
    position: relative; width: 328px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
    overflow: hidden auto; overscroll-behavior: contain;
    background: var(--bg-1, #15181D); color: var(--fg-0, #fff);
    border-radius: var(--r-lg, 6px); border: 1px solid var(--line-strong, rgba(255,255,255,.14));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
    font: 500 13px/1.35 var(--f-body, system-ui, sans-serif); text-align: left;
    scrollbar-width: thin;
}
.pc-card--preview { box-shadow: none; max-height: none; }
.pc-card--developer { border-color: rgba(255, 106, 19, .55); }
.pc-card--moderator { border-color: rgba(43, 217, 181, .4); }

.pc-banner { position: relative; height: 104px; overflow: hidden; background: var(--bg-3, #242932); }
.pc-banner::after { content: ''; position: absolute; inset: auto 0 0 0; height: 36px; background: linear-gradient(to top, rgba(21, 24, 29, .75), transparent); pointer-events: none; }

/* DEVELOPER ribbon (corner) */
.pc-ribbon { position: absolute; top: 0; right: 0; width: 120px; height: 104px; overflow: hidden; pointer-events: none; z-index: 2; }
.pc-ribbon span {
    position: absolute; top: 27px; right: -44px; width: 176px; transform: rotate(38deg);
    background: linear-gradient(90deg, #FF6A13, #FF9A4D 50%, #FF6A13); color: #1A0900; text-align: center;
    font: 800 10.5px/20px var(--f-display, sans-serif); letter-spacing: .22em; text-transform: uppercase;
    box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 14px rgba(255, 106, 19, .55);
}
.pc-ribbon span::before { content: '</>'; letter-spacing: 0; margin-right: 6px; font-weight: 800; }

.pc-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 0 14px; margin-top: -38px; z-index: 1; }

/* avatar + frame (shared with the shop art) */
.cos-av-wrap { position: relative; width: 76px; height: 76px; flex: 0 0 auto; border-radius: 50%; }
.cos-av-wrap::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--bg-1, #15181D); }
.cos-av { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--av-bg, var(--bg-3)); }
.cos-av svg { width: 100%; height: 100%; display: block; }
.cos-av--initials { background: var(--bg-3, #242932); color: var(--fg-1, #DDE0E6); font: 700 26px/1 var(--f-display, sans-serif); letter-spacing: .02em; }

.cos-frame { position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
.cos-frame--steel { background: conic-gradient(from 30deg, #8C96A1, #E8ECF0, #7B848E, #D0D5DA, #8C96A1, #EEF1F4, #8C96A1); }
.cos-frame--captain { background: var(--orange, #FF6A13); }
.cos-frame-tab { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); min-width: 20px; height: 16px; padding: 0 5px; border-radius: 3px;
    background: var(--orange, #FF6A13); color: #1A0900; font: 800 10px/16px var(--f-display, sans-serif); text-align: center; border: 2px solid var(--bg-1, #15181D); box-sizing: content-box; }
.cos-frame--pulse { background: repeating-conic-gradient(from 0deg, #FF6A13 0 22deg, transparent 22deg 30deg); animation: cos-spin 6s linear infinite; }
.cos-frame--laurel { background: conic-gradient(from 0deg, #B8860B, #F2CB6A, #C8961F, #FFE08A, #B8860B); }
.cos-frame--laurel-shine { background: conic-gradient(from 0deg, transparent 0 300deg, rgba(255, 255, 255, .95) 330deg, transparent 360deg); animation: cos-spin 3.2s linear infinite; }
.cos-frame--legend { background: conic-gradient(from 0deg, #CFd6E6, #FFFFFF, #9AA6BF, #FFFFFF, #CFD6E6); }
.cos-frame--mod { background: radial-gradient(farthest-side, transparent calc(100% - 4px), #2BD9B5 calc(100% - 4px) calc(100% - 2.6px), transparent calc(100% - 2.6px) calc(100% - 1.4px), #2BD9B5 calc(100% - 1.4px)); -webkit-mask: none; mask: none; }
.cos-frame--fw { background: repeating-conic-gradient(from 0deg, #FF8A2A 0 15deg, #1B1F26 15deg 30deg); }
.cos-frame--dev { inset: -6px; background: conic-gradient(from 0deg, #FF3D00, #FF6A13, #FFC46B, #FF6A13, #FF3D00, #FF8A45, #FFE0B0, #FF3D00);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
    animation: cos-spin 4s linear infinite; }
.cos-frame--dev-glow { inset: -7px; background: transparent; -webkit-mask: none; mask: none; box-shadow: 0 0 14px 2px rgba(255, 106, 19, .55), inset 0 0 8px rgba(255, 106, 19, .45); animation: cos-breathe 2.4s ease-in-out infinite; }
.cos-frame-tab--dev { background: #0A0A0C; color: #FF8A45; border-color: #FF6A13; font-size: 9px; letter-spacing: 0; bottom: -9px; }
@keyframes cos-spin { to { transform: rotate(360deg); } }
@keyframes cos-breathe { 50% { opacity: .45; } }

/* rank block (right of the avatar) */
.pc-rank { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 7px; margin-bottom: 2px; border-radius: var(--r, 4px); background: var(--bg-2, #1B1F26); border: 1px solid var(--line, rgba(255,255,255,.07)); }
.pc-rank-badge { display: inline-flex; width: 30px; height: 30px; }
.pc-rank-badge svg { width: 30px; height: 30px; }
.pc-rank-txt { display: grid; line-height: 1.15; }
.pc-rank-txt b { font: 700 13px var(--f-display, sans-serif); text-transform: uppercase; letter-spacing: .03em; color: var(--rank-c, var(--fg-0)); white-space: nowrap; }
.pc-rank-txt span { font: 600 11px var(--f-body, sans-serif); color: var(--fg-2, #9BA1AC); white-space: nowrap; }

.pc-id { padding: 10px 14px 0; }
.pc-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pc-name { font: 700 21px/1.1 var(--f-display, sans-serif); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--fg-0, #fff); }
.pc-verified { flex: 0 0 auto; display: inline-flex; width: 18px; height: 18px; color: var(--orange, #FF6A13); }
.pc-verified svg { width: 18px; height: 18px; }
.pc-verified--mod { color: #2BD9B5; }
.pc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 7px; }
.pc-sub .nb-title, .pc-title { font-size: 10.5px !important; }
/* selected prestige title, directly under the name */
.pc-title-row { display: flex; align-items: center; min-width: 0; margin-top: 6px; }
.pc-title-row .nb-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pc-title--season { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 3px; background: color-mix(in srgb, var(--title-color) 16%, transparent); color: var(--title-color); font: 700 10.5px var(--f-display, sans-serif); letter-spacing: .08em; text-transform: uppercase; }
.pc-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 3px; background: var(--bg-3, #242932); color: var(--fg-1); font: 700 10px var(--f-display, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.pc-pill--mod { background: rgba(43, 217, 181, .14); color: #2BD9B5; }
.pc-joined { font: 600 11px var(--f-body, sans-serif); color: var(--fg-3, #666D79); }

.pc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 12px 14px 0; border-radius: var(--r, 4px); overflow: hidden; }
.pc-stat { display: grid; justify-items: center; gap: 2px; padding: 8px 2px 7px; background: var(--bg-2, #1B1F26); }
.pc-stat b { font: 700 16px/1 var(--f-display, sans-serif); color: var(--fg-0); font-variant-numeric: tabular-nums; }
.pc-stat span { font: 700 9px var(--f-body, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2, #9BA1AC); }

.pc-label { font: 700 9.5px var(--f-body, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2, #9BA1AC); margin-bottom: 6px; }

/* developer card privacy (own card, gear) */
.pc-privacy { margin-top: 10px; padding: 10px 10px 4px; border-radius: var(--r, 4px); background: var(--bg-2, #1B1F26); }
.pc-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; font: 600 12.5px var(--f-body, sans-serif); color: var(--fg-1, #DDE0E6); cursor: pointer; }
.pc-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pc-switch i { position: relative; flex: 0 0 auto; width: 30px; height: 16px; border-radius: 8px; background: var(--bg-4, #2F3641); transition: background 120ms ease-out; }
.pc-switch i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--fg-2, #9BA1AC); transition: transform 120ms ease-out, background 120ms ease-out; }
.pc-switch input:checked + i { background: var(--orange, #FF6A13); }
.pc-switch input:checked + i::after { transform: translateX(14px); background: #1A0900; }
.pc-switch input:focus-visible + i { outline: 2px solid var(--fg-0, #fff); outline-offset: 2px; }
.pc-switch.is-busy { opacity: .6; cursor: progress; }
.pc-btn--icon.is-on { color: var(--orange, #FF6A13); background: var(--bg-4, #2F3641); }

.pc-live { padding: 12px 14px 14px; }
.pc-status { display: flex; align-items: center; gap: 8px; min-height: 28px; font: 600 12px var(--f-body, sans-serif); color: var(--fg-1, #DDE0E6); }
.pc-status-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-status.is-offline { color: var(--fg-3, #666D79); }
.pc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #38D66B); flex: 0 0 auto; }
.pc-dot.is-busy { background: var(--gold, #E4B13A); }
.pc-status.is-offline .pc-dot { background: var(--fg-3, #666D79); }
.pc-actions { display: flex; gap: 6px; margin-top: 10px; }
.pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r, 4px); cursor: pointer;
    background: var(--bg-3, #242932); color: var(--fg-0, #fff); font: 700 11.5px var(--f-display, sans-serif); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: background 120ms ease-out; }
.pc-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.pc-btn:hover { background: var(--bg-4, #2F3641); }
.pc-btn:disabled, .pc-btn.is-disabled { opacity: .5; cursor: default; }
.pc-btn--main { flex: 1; background: var(--orange, #FF6A13); color: var(--orange-ink, #1A0900); }
.pc-btn--main:hover { background: var(--orange-hi, #FF8A45); }
.pc-btn--icon { width: 32px; padding: 0; flex: 0 0 auto; color: var(--fg-2); }
.pc-btn--icon:hover { color: var(--fg-0); }
.pc-btn--join { height: 26px; padding: 0 10px; background: var(--orange, #FF6A13); color: var(--orange-ink, #1A0900); }
.pc-btn--join:hover { background: var(--orange-hi, #FF8A45); }
.pc-actions .pc-btn:not(.pc-btn--main):not(.pc-btn--icon) { flex: 1; }
.pc-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--fg-2); }

.pc-skel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 12px 14px 0; }
.pc-skel i { height: 40px; background: var(--bg-2); border-radius: 2px; animation: pc-skel 1s ease-in-out infinite alternate; }
@keyframes pc-skel { to { opacity: .45; } }

/* developer card: the name + panel details */
.pc-card--developer .pc-banner::after { background: linear-gradient(to top, rgba(10, 10, 12, .85), transparent); }
.pc-card--developer .pc-stat { background: #17120E; }
.pc-card--developer .pc-stat b { color: #FFE3C8; }
.pc-card--developer .pc-rank { background: #17120E; border-color: rgba(255, 106, 19, .25); }
@property --pc-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pc-card--developer {
    border: 1px solid transparent;
    background: linear-gradient(180deg, #121014 0, #15181D 70%) padding-box,
                conic-gradient(from var(--pc-ang), #FF3D00, #FFC46B 10%, #FF6A13 22%, rgba(255, 106, 19, .18) 45%, rgba(255, 106, 19, .18) 60%, #FF6A13 78%, #FF3D00) border-box;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 28px rgba(255, 106, 19, .16);
    animation: pc-ang 6s linear infinite;
}
.pc-layer .pc-card--developer { animation: pc-in 140ms ease-out, pc-ang 6s linear infinite; }
@keyframes pc-ang { to { --pc-ang: 360deg; } }
.pc-card--developer .cos-av--initials { background: #140B05; color: #FF8A45; }
.pc-card--developer .pc-joined { color: #9A6A4A; }
.pc-card--moderator .pc-stat, .pc-card--moderator .pc-rank { background: #152220; }

/* --------------------------------------------------------------------------
   Name colours
   -------------------------------------------------------------------------- */
.cos-nc--sky { color: #74C4FF !important; }
.cos-nc--lime { color: #86E676 !important; }
.cos-nc--rose { color: #FF86AE !important; }
.cos-nc--gold { background: linear-gradient(100deg, #D9A21F 0%, #FFE9A6 22%, #E4B13A 40%, #FFF4CC 50%, #E4B13A 62%, #C8961F 100%); background-size: 240% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: cos-slide 3.2s linear infinite; }
.cos-nc--dev { background: linear-gradient(100deg, #FF4A10 0%, #FF8A45 18%, #FFE0B0 32%, #FF8A45 46%, #FF4A10 64%, #FF9A4D 82%, #FF4A10 100%); background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(255, 106, 19, .45)); animation: cos-slide 2.8s linear infinite; }
.cos-nc--mod { color: #2BD9B5 !important; }
@keyframes cos-slide { from { background-position: 100% 0; } to { background-position: -40% 0; } }

/* --------------------------------------------------------------------------
   Backgrounds
   -------------------------------------------------------------------------- */
.cos-bg { position: absolute; inset: 0; overflow: hidden; background: var(--bg-3, #242932); }
.cos-bg-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cos-bg--default { background: linear-gradient(135deg, #20252D, #1B1F26); }
.cos-bg--pitch { background: repeating-linear-gradient(90deg, #3F6B3A 0 32px, #487844 32px 64px); }
.cos-bg--night { background: linear-gradient(180deg, #0A1024 0%, #15224A 60%, #1B2C57 100%); }
.cos-bg--carbon {
    background:
        linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
        linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0,
        linear-gradient(27deg, #222 5px, transparent 5px) 0 10px,
        linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
        linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
        linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
    background-color: #131313; background-size: 20px 20px; }
.cos-bg--carbon::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .07) 45%, transparent 60%); }
.cos-carbon-stripe { position: absolute; left: 0; right: 0; top: 58%; height: 5px; background: var(--orange, #FF6A13); box-shadow: 0 8px 0 -3px rgba(255, 106, 19, .45); }
.cos-bg--sunset { background: linear-gradient(180deg, #2B1A3D 0%, #6B2A4A 35%, #C2452D 68%, #F59E3B 100%); }
.cos-bg--derby { background: #1E4FB0; }
.cos-bg--flood { background: radial-gradient(120% 90% at 50% 120%, #2C4A2E 0%, #16261A 45%, #0B1410 100%); }
.cos-beam { position: absolute; top: -8px; width: 150px; height: 230px; transform-origin: 50% 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(240, 247, 255, .55), rgba(240, 247, 255, .16) 55%, rgba(240, 247, 255, 0));
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); }
.cos-beam--l { left: -60px; transform: rotate(-40deg); animation: cos-sweep-l 5.5s ease-in-out infinite alternate; }
.cos-beam--r { right: -60px; transform: rotate(40deg); animation: cos-sweep-r 6.5s ease-in-out infinite alternate; }
@keyframes cos-sweep-l { from { transform: rotate(-62deg); } to { transform: rotate(-22deg); } }
@keyframes cos-sweep-r { from { transform: rotate(24deg); } to { transform: rotate(64deg); } }
.cos-bg--confetti { background: radial-gradient(70% 90% at 50% 110%, #33306A 0%, #151B45 55%, #0C1030 100%); }
.cos-confetti { position: absolute; inset: 0; }
.cos-confetti i { position: absolute; top: -14px; border-radius: 1px; opacity: .9; animation: cos-fall var(--d) linear var(--dl) infinite; }
@keyframes cos-fall { from { transform: translate(0, -10px) rotate(0); } 50% { transform: translate(var(--sw), 60px) rotate(calc(var(--rot) / 2)); } to { transform: translate(0, 132px) rotate(var(--rot)); } }
.cos-bg--aurora { background: linear-gradient(180deg, #03080F 0%, #07182A 100%); }
.cos-aur { position: absolute; border-radius: 50%; filter: blur(18px); opacity: .75; mix-blend-mode: screen; }
.cos-aur--a { width: 70%; height: 90%; left: -10%; top: -30%; background: radial-gradient(closest-side, #2BF0A0, transparent); animation: cos-aur-a 9s ease-in-out infinite alternate; }
.cos-aur--b { width: 60%; height: 80%; left: 35%; top: -40%; background: radial-gradient(closest-side, #29C6FF, transparent); animation: cos-aur-b 11s ease-in-out infinite alternate; }
.cos-aur--c { width: 50%; height: 70%; right: -10%; top: -20%; background: radial-gradient(closest-side, #9A5CFF, transparent); animation: cos-aur-c 13s ease-in-out infinite alternate; }
@keyframes cos-aur-a { to { transform: translate(40%, 15%) scale(1.1); } }
@keyframes cos-aur-b { to { transform: translate(-35%, 20%) scale(.9); } }
@keyframes cos-aur-c { to { transform: translate(-30%, 10%) scale(1.2); } }

/* developer core */
.cos-bg--dev { background: radial-gradient(140% 120% at 85% 120%, #3A1504 0%, #140905 45%, #09090B 100%); }
.cos-dev-heat { position: absolute; inset: auto -10% -40% -10%; height: 90%; background: radial-gradient(70% 70% at 30% 100%, rgba(255, 90, 10, .6), rgba(255, 90, 10, 0) 70%), radial-gradient(40% 50% at 85% 0%, rgba(255, 120, 30, .28), transparent 70%); animation: cos-breathe 3.6s ease-in-out infinite; }
.cos-pulses { filter: drop-shadow(0 0 3px #FF6A13) drop-shadow(0 0 6px rgba(255, 106, 19, .6)); }
.cos-pulse { stroke-dasharray: 16 440; stroke-dashoffset: 456; animation: cos-trace var(--pd) linear var(--pl) infinite; }
@keyframes cos-trace { to { stroke-dashoffset: 0; } }
.cos-dev-glyph { font: 800 44px var(--f-display, monospace); fill: #FF6A13; fill-opacity: .12; letter-spacing: -2px; }
.cos-dev-scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 170, 110, .10) 50%, transparent); width: 40%; animation: cos-scan 4.5s ease-in-out infinite; }
@keyframes cos-scan { from { transform: translateX(-120%); } to { transform: translateX(320%); } }

/* moderator */
.cos-bg--mod { background: linear-gradient(135deg, #07201D 0%, #0C2E2A 60%, #0A1F1C 100%); }
.cos-sheen { position: absolute; inset: 0; width: 35%; background: linear-gradient(100deg, transparent, rgba(43, 217, 181, .12) 50%, transparent); animation: cos-scan 7s ease-in-out infinite; }
.cos-sheen--gold { background: linear-gradient(100deg, transparent, rgba(255, 224, 138, .16) 50%, transparent); }

/* FIRST WHISTLE */
.cos-bg--fw { background: linear-gradient(135deg, #1C140D 0%, #24190F 100%); }
.cos-fw-text { font: 700 10px var(--f-display, sans-serif); letter-spacing: .3em; fill: #FF8A2A; fill-opacity: .8; }
.cos-bg--champ { background: radial-gradient(90% 120% at 50% 30%, #3A2A08 0%, #140F05 100%); }

/* level rewards (src/levels.ts): 10 frame · 25 bg · 50 animated frame · 75 animated bg · 99 MAX set */
.cos-bg--lv25 { background: linear-gradient(135deg, #2A3038 0%, #1E232A 60%, #171B21 100%); }
.cos-lv-text { font: 800 30px var(--f-display, sans-serif); fill: #E6EBF0; fill-opacity: .8; letter-spacing: .02em; }
.cos-lv-text--plat { fill: #CFF7F2; }
.cos-lv-text--max { font-size: 20px; fill: #FFD27A; fill-opacity: 1; letter-spacing: .06em; }
.cos-bg--lv75 { background: linear-gradient(160deg, #0B2226 0%, #0E2E33 50%, #0A1B20 100%); }
.cos-wave { position: absolute; left: -30%; width: 160%; height: 70%; border-radius: 50%; pointer-events: none; }
.cos-wave--a { top: 38%; border-top: 2px solid rgba(159, 232, 224, .35); animation: cos-wave 7s ease-in-out infinite alternate; }
.cos-wave--b { top: 52%; border-top: 2px solid rgba(207, 247, 242, .22); animation: cos-wave 9s ease-in-out -3s infinite alternate-reverse; }
@keyframes cos-wave { from { transform: translateX(-8%) rotate(-3deg); } to { transform: translateX(8%) rotate(3deg); } }
.cos-sheen--plat { background: linear-gradient(100deg, transparent, rgba(207, 247, 242, .14) 50%, transparent); }
.cos-bg--lv99 { background: radial-gradient(120% 130% at 50% 110%, #3A1A04 0%, #1A0C04 45%, #0A0604 100%); }
.cos-max-glow { position: absolute; left: 20%; right: 20%; bottom: -40%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 138, 42, .55), transparent); animation: cos-breathe 3.2s ease-in-out infinite; }
.cos-max-rays { transform-box: view-box; transform-origin: 50% 107%; animation: cos-rays 14s linear infinite alternate; }
@keyframes cos-rays { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

.cos-frame--lv10 { background: conic-gradient(from 0deg, #8A4F22, #D99A5E, #A5652F, #E7B07A, #8A4F22); }
.cos-frame--lv50 { background: conic-gradient(from 0deg, #B8860B, #F2CB6A, #C8961F, #FFE08A, #B8860B); }
.cos-frame--lv50-orbit { inset: -7px; -webkit-mask: none; mask: none; background: none; animation: cos-spin 5s linear infinite; }
.cos-frame--lv50-orbit::before, .cos-frame--lv50-orbit::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #FFE9A6; box-shadow: 0 0 6px rgba(255, 214, 110, .9); }
.cos-frame--lv50-orbit::before { top: -1px; left: calc(50% - 3.5px); }
.cos-frame--lv50-orbit::after { bottom: -1px; left: calc(50% - 3.5px); }
.cos-frame--lv99 { inset: -6px; background: conic-gradient(from 0deg, #FF6A13, #FFD27A, #FFF4CC, #E4B13A, #FF6A13, #FF8A45, #FFE9A6, #FF6A13);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
    animation: cos-spin 3.6s linear infinite; }
.cos-frame--lv99-glow { inset: -8px; background: transparent; -webkit-mask: none; mask: none; box-shadow: 0 0 16px 3px rgba(255, 170, 60, .55), inset 0 0 8px rgba(255, 170, 60, .4); animation: cos-breathe 2.2s ease-in-out infinite; }
.cos-frame-tab--hex { min-width: 18px; height: 17px; padding: 0 6px; border-radius: 0; border: 0; font-size: 10px; line-height: 17px; bottom: -9px;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.cos-frame-tab--bronze { background: #B8733A; color: #1E0F04; }
.cos-frame-tab--gold { background: #E4B13A; color: #2A1A00; }
.cos-frame-tab--max { background: linear-gradient(90deg, #FF6A13, #FFD27A); color: #1A0900; font-size: 9px; letter-spacing: .04em; }
.cos-nc--max { background: linear-gradient(100deg, #FF6A13 0%, #FFB347 18%, #FFF4CC 32%, #FFD27A 46%, #FF6A13 64%, #FFE9A6 82%, #FF6A13 100%); background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(255, 170, 60, .5)); animation: cos-slide 2.6s linear infinite; }

/* --------------------------------------------------------------------------
   Avatar motion
   -------------------------------------------------------------------------- */
.cos-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.cos-flame--a { animation: cos-flick 1.1s ease-in-out infinite alternate; }
.cos-flame--b { animation: cos-flick 0.8s ease-in-out -.3s infinite alternate; }
.cos-flame--c { animation: cos-flick 0.6s ease-in-out -.1s infinite alternate; }
@keyframes cos-flick { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(.96, 1.06) skewX(-2deg); } 100% { transform: scale(1.03, .95) skewX(2deg); } }
.cos-glint { animation: cos-glint 3s ease-in-out infinite; }
@keyframes cos-glint { 0%, 55% { transform: skewX(-20deg) translateX(0); } 100% { transform: skewX(-20deg) translateX(92px); } }

/* shop tiles: animated art sleeps until hovered / tried on */
.cos-still, .cos-still * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    /* cosmetics keep their animation (see arena.css); only the card's own transitions calm down */
    .pc-card, .pc-card .pc-layer { transition: none !important; }
    .pc-layer { transition: none; }
}

/* --------------------------------------------------------------------------
   Short screens (phones in landscape)
   -------------------------------------------------------------------------- */
@media (max-height: 520px) {
    .pc-layer .pc-banner { height: 70px; }
    .pc-layer .pc-head { margin-top: -30px; }
    .pc-layer .cos-av-wrap { width: 60px; height: 60px; }
    .pc-layer .cos-av--initials { font-size: 21px; }
    .pc-layer .pc-name { font-size: 18px; }
    .pc-layer .pc-id { padding-top: 6px; }
    .pc-layer .pc-stats, .pc-layer .pc-skel { margin-top: 8px; }
    .pc-layer .pc-stat { padding: 6px 2px 5px; }
    .pc-layer .pc-live { padding: 8px 14px 12px; }
    .pc-layer .pc-actions { margin-top: 6px; }
    .pc-layer .pc-card { width: 360px; }
}

/* --------------------------------------------------------------------------
   Shop / inventory "Profile" tab
   -------------------------------------------------------------------------- */
#shop-modal .shop-tabs.pc-tabs-on { display: flex !important; }
.cos-panel { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.cos-preview { position: sticky; top: 0; display: grid; gap: 10px; }
.cos-preview-card .pc-card { width: 100%; max-width: 340px; }
.cos-preview-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; font-size: 12px; color: var(--fg-2); }
.cos-preview-foot b { color: var(--fg-0); font-weight: 700; }
.cos-guest-note { margin: 0; padding: 10px 12px; border-radius: var(--r); background: var(--bg-2); color: var(--fg-1); font-size: 12.5px; }
.cos-link { background: none; border: 0; padding: 0; color: var(--orange, #FF6A13); font: 700 11px var(--f-display, sans-serif); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.cos-link:hover { color: var(--orange-hi, #FF8A45); }
.cos-main { min-width: 0; }
.cos-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cos-chip { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r); background: var(--bg-2); color: var(--fg-2); font: 700 11.5px var(--f-display, sans-serif); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.cos-chip:hover { color: var(--fg-0); background: var(--bg-3); }
.cos-chip.is-on { background: var(--fg-0); color: var(--bg-0); }
.cos-sec { margin-bottom: 22px; }
.cos-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.cos-sec-head h3 { margin: 0; font: 700 13px var(--f-display, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-0); }
.cos-sec-sub { font-size: 11.5px; color: var(--fg-2); flex: 1; }
.cos-empty { margin: 8px 0 0; font-size: 12.5px; color: var(--fg-2); }
.cos-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cos-grid--card_bg, .cos-grid--mixed { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.cos-tile { --rar: #9BA1AC; position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-2); outline: 2px solid transparent; outline-offset: -2px; transition: outline-color 120ms ease-out; }
.cos-tile[data-rarity="rare"] { --rar: #4C8FE8; }
.cos-tile[data-rarity="epic"] { --rar: #A77BE8; }
.cos-tile[data-rarity="legendary"] { --rar: var(--gold, #E4B13A); }
.cos-tile[data-rarity="exclusive"] { --rar: var(--orange, #FF6A13); }
.cos-tile[data-rarity="mythic"] { --rar: #FF4FB0; }
.cos-tile[data-rarity="mythic"]::before { background: linear-gradient(90deg, #FF4FB0, #8B5CFF, #2EC5FF, #FFD24A, #FF4FB0); background-size: 300% 100%; animation: gx-myth 4s linear infinite; }
.cos-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rar); z-index: 2; }
.cos-tile:hover { outline-color: rgba(255, 255, 255, .45); }
.cos-tile.is-trying { outline-color: var(--orange, #FF6A13); }
.cos-tile.is-equipped:not(.is-trying) { outline-color: var(--fg-0); }
.cos-tile-hit { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--bg-1); cursor: pointer; text-align: center; color: inherit; }
.cos-tile-hit--static { cursor: default; }
.cos-tag { position: absolute; right: 6px; top: 8px; z-index: 2; height: 16px; padding: 0 6px; border-radius: 2px; background: rgba(15, 17, 21, .8); color: var(--fg-1); font: 700 9px/16px var(--f-body, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.cos-tile-info { padding: 9px 11px 2px; }
.cos-tile-name { font: 700 13.5px/1.15 var(--f-display, sans-serif); text-transform: uppercase; letter-spacing: .02em; color: var(--fg-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cos-tile-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font: 700 9.5px var(--f-body, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--rar); }
.cos-rar { width: 6px; height: 6px; border-radius: 1px; background: var(--rar); }
.cos-tile--none .cos-tile-meta { color: var(--fg-3); }
.cos-tile-act { padding: 8px 11px 11px; margin-top: auto; }
.cos-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 32px; border: 0; border-radius: var(--r); background: var(--bg-3); color: var(--fg-0); font: 700 12.5px var(--f-display, sans-serif); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.cos-btn:hover { background: var(--bg-4); }
.cos-btn--buy { background: var(--orange, #FF6A13); color: var(--orange-ink, #1A0900); }
.cos-btn--buy:hover { background: var(--orange-hi, #FF8A45); }
.cos-btn--buy.is-short { background: var(--bg-3); color: var(--fg-2); }
.cos-btn--equip { background: var(--fg-0); color: var(--bg-0); }
.cos-btn--equip:hover { background: var(--fg-1); }
.cos-btn--on { background: transparent; color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cos-btn--on:hover { background: var(--bg-3); }
.cos-btn.is-static { cursor: default; }
.cos-coin { display: inline-block; width: 13px; height: 13px; background: var(--nb-coin, var(--gold, #FFC83D)) center / contain no-repeat; flex: 0 0 auto; }  /* the NextBall coin (icons.css --nb-coin), same as the balance */
.cos-btn--buy .cos-coin { opacity: 1; }
.cos-lock { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: var(--r); background: var(--bg-1); color: var(--fg-2); font: 700 10.5px var(--f-body, sans-serif); letter-spacing: .1em; text-transform: uppercase; }

/* tile art */
.cos-art { position: relative; display: flex; align-items: center; justify-content: center; height: 92px; overflow: hidden; }
.cos-art--bg { height: 84px; }
.cos-art--bg .cos-bg { inset: 0; }
.cos-art--av .cos-av { position: relative; inset: auto; width: 62px; height: 62px; }
.cos-art--fr .cos-av-wrap { width: 56px; height: 56px; }
.cos-art--fr .cos-av-wrap::before { background: var(--bg-1); }
.cos-art--fr .cos-av--initials { font-size: 19px; }
.cos-art--nc .cos-nc { font: 700 19px var(--f-display, sans-serif); letter-spacing: .01em; color: var(--fg-0); padding: 0 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-art--none { color: var(--fg-3); font: 700 11px var(--f-display, sans-serif); letter-spacing: .14em; text-transform: uppercase; }

/* developer card privacy (inventory Profile tab) */
.cos-priv { display: grid; gap: 8px; max-width: 520px; }
.cos-priv .pc-switch { padding: 10px 12px; border-radius: var(--r); background: var(--bg-2); min-height: 44px; }
.cos-priv .pc-switch small { display: block; margin-top: 2px; font: 500 11.5px var(--f-body, sans-serif); color: var(--fg-2); }

@media (max-width: 860px) {
    .cos-panel { grid-template-columns: minmax(0, 1fr); }
    .cos-preview { position: relative; justify-items: center; }
    .cos-preview-foot { width: 100%; max-width: 340px; }
    .cos-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
    .cos-grid--card_bg, .cos-grid--mixed { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Names that open the card; data-pc-zone = the whole row / name block around a name */
[data-pc-user], [data-pc-zone] { cursor: pointer; }
[data-pc-zone] button, [data-pc-zone] a[href], [data-pc-zone] input, [data-pc-zone] select { cursor: pointer; }
.player-item[data-pc-zone][draggable="true"] { cursor: grab; }
[data-pc-user]:hover, [data-pc-zone]:hover [data-pc-user] { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.chat-who { display: inline; padding: 2px 3px; margin: -2px -3px; border-radius: 3px; }
.chat-who:hover { background: rgba(255, 255, 255, .05); }
.sp-row-name[data-pc-zone] { align-self: stretch; }

/* developer: molten seam under the banner */
.pc-card--developer .pc-banner::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
    background: linear-gradient(90deg, rgba(255, 106, 19, .2), #FF6A13 30%, #FFE0B0 50%, #FF6A13 70%, rgba(255, 106, 19, .2)); background-size: 200% 100%;
    box-shadow: 0 0 10px rgba(255, 106, 19, .7); animation: cos-slide 3s linear infinite; }
.cos-av--guest { color: var(--fg-3, #666D79); }
.cos-av--guest svg { width: 70%; height: 70%; margin-top: 12%; }

/* ---- Season challenge sets (bg_ch_<season> / fr_ch_<season>, cosmetics.js chBgHTML / chFrameHTML) ---- */
.cos-bg--ch { background: linear-gradient(120deg, #1D2129 0%, #15181D 55%, #101217 100%); }
.cos-ch-text { font: 800 26px var(--f-display, sans-serif); letter-spacing: .02em; }
.cos-ch-kicker { font: 700 9px var(--f-display, sans-serif); letter-spacing: .2em; fill-opacity: .8; }
.cos-sheen--ch { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .10) 50%, transparent); }
.cos-frame--ch { background: conic-gradient(from -90deg, var(--ch-a) 0 114deg, transparent 114deg 120deg, var(--ch-b) 120deg 234deg, transparent 234deg 240deg, var(--ch-a) 240deg 354deg, transparent 354deg); }
.cos-frame-tab--ch { background: var(--ch-a); color: #0E1014; font-size: 9px; letter-spacing: .04em; }
.pc-mranks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pc-mrank { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 4px; border-radius: 3px; background: rgba(255,255,255,.06); font-size: 11px; color: var(--fg-1, #ddd); }
.pc-mrank i { font-style: normal; }

/* the developer's line under his name (profile-card.js titleHTML) */
.pc-title--creator { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 3px; max-width: 100%;
    font: 700 11px/1 var(--f-display, sans-serif) !important; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #EAFBEF; background: linear-gradient(90deg, rgba(56, 214, 107, .22), rgba(228, 177, 58, .2));
    box-shadow: inset 0 0 0 1px rgba(56, 214, 107, .55), 0 0 12px -2px rgba(56, 214, 107, .45); text-shadow: 0 0 8px rgba(56, 214, 107, .5); }

/* Community partner (src/partners): violet line under the name + the community's Discord */
.pc-card--partner { border-color: rgba(180, 140, 255, .45); }
.pc-partner-row { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 6px; }
.pc-partner { display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: 22px; padding: 0 9px; border-radius: 3px;
    background: linear-gradient(90deg, rgba(180, 140, 255, .2), rgba(120, 160, 255, .12)); box-shadow: inset 0 0 0 1px rgba(180, 140, 255, .5);
    color: #E6DAFF; font: 700 11px/1 var(--f-display, sans-serif); letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.pc-partner-k { flex: none; }
.pc-partner-dot { flex: none; color: #B48CFF; }
.pc-partner-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.pc-discord { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 3px;
    background: #5865F2; color: #fff; font: 700 10.5px/1 var(--f-display, sans-serif); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.pc-discord:hover { background: #4752C4; }
.pc-discord:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ==================================================================================
   October 2026 set (cosmetics.js): animated avatars, frames and card backgrounds
   ================================================================================== */
/* -- avatars -- */
.cos-wing { transform-box: fill-box; }
.cos-wing--l { transform-origin: 100% 100%; animation: cos-flap-l 1.1s ease-in-out infinite; }
.cos-wing--r { transform-origin: 0% 100%; animation: cos-flap-r 1.1s ease-in-out infinite; }
@keyframes cos-flap-l { 50% { transform: rotate(14deg) scaleY(.92); } }
@keyframes cos-flap-r { 50% { transform: rotate(-14deg) scaleY(.92); } }
.cos-pulse-glow { transform-box: fill-box; transform-origin: center; animation: cos-pglow 1.8s ease-in-out infinite; }
@keyframes cos-pglow { 50% { transform: scale(1.18); opacity: .55; } }
.cos-eye-glow { animation: cos-eye 2.4s ease-in-out infinite; }
@keyframes cos-eye { 0%, 70%, 100% { fill: #FFD23A; } 80% { fill: #FFF6C0; filter: drop-shadow(0 0 2px #FFD23A); } }
.cos-smoke { animation: cos-smoke 2.6s ease-out infinite; }
@keyframes cos-smoke { from { transform: translate(-4px, 4px); opacity: 0; } 30% { opacity: 1; } to { transform: translate(3px, -6px); opacity: 0; } }
.cos-blink { animation: cos-blink 1.2s steps(2, end) infinite; }
@keyframes cos-blink { 50% { fill: #5A1018; } }
.cos-visor { animation: cos-visor 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px #2EE6FF); }
@keyframes cos-visor { to { transform: translateX(28px); } }
.cos-visor-shine { animation: cos-vshine 3.2s ease-in-out infinite; }
@keyframes cos-vshine { 0%, 50% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(44px); } }
.cos-tw { transform-box: fill-box; transform-origin: center; animation: cos-tw 2.2s ease-in-out infinite; }
.cos-tw--b { animation-duration: 3.1s; animation-delay: -1.2s; }
@keyframes cos-tw { 50% { opacity: .2; transform: scale(.6); } }
.cos-orbit { transform-origin: 32px 32px; animation: cos-orbit 5s linear infinite; }
@keyframes cos-orbit { from { transform: rotate(0deg) scaleY(.4) rotate(0deg); } to { transform: rotate(360deg) scaleY(.4) rotate(-360deg); } }
.cos-sparkle { transform-box: fill-box; transform-origin: center; animation: cos-sparkle 1.9s ease-in-out infinite; }
.cos-sparkle--b { animation-delay: -.9s; animation-duration: 2.3s; }
@keyframes cos-sparkle { 0%, 100% { transform: scale(.2) rotate(0deg); opacity: 0; } 40% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { transform: scale(.4) rotate(90deg); opacity: .2; } }
.cos-bolt { animation: cos-boltf 1.6s steps(1, end) infinite; filter: drop-shadow(0 0 3px #FFB020); }
@keyframes cos-boltf { 0%, 60%, 74%, 100% { opacity: 1; } 64%, 70% { opacity: .55; } }
.cos-bob { animation: cos-bob 2.4s ease-in-out infinite; }
.cos-bob-shadow { transform-box: fill-box; transform-origin: center; animation: cos-bobs 2.4s ease-in-out infinite; }
@keyframes cos-bob { 50% { transform: translateY(-4px); } }
@keyframes cos-bobs { 50% { transform: scaleX(.75); opacity: .18; } }

/* -- frames -- */
.cos-frame-svg { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); pointer-events: none; overflow: visible; }
.cos-frame--inferno { background: conic-gradient(from 0deg, #8B0E04, #FF5A14, #FFC46B, #FF5A14, #B81606, #FF8A2A, #FFE3A0, #8B0E04); animation: cos-spin 4s linear infinite; }
.cos-frame--inferno-glow { inset: -8px; background: transparent; -webkit-mask: none; mask: none; box-shadow: 0 0 14px 2px rgba(255, 90, 20, .6), inset 0 0 8px rgba(255, 140, 40, .45); animation: cos-breathe 1.3s ease-in-out infinite; }
.cos-tongue { transform-box: fill-box; transform-origin: 50% 100%; animation: cos-tongue var(--fd, .6s) ease-in-out var(--fl, 0s) infinite alternate; filter: drop-shadow(0 0 1.5px rgba(255, 120, 30, .9)); }
@keyframes cos-tongue { from { transform: scaleY(.55) scaleX(.9); opacity: .8; } to { transform: scaleY(1.15) scaleX(1.05); opacity: 1; } }
.cos-frame--electric { background: conic-gradient(from 0deg, #0B2A55, #2EA8FF, #0B2A55, #7FE4FF, #0B2A55); box-shadow: 0 0 10px rgba(46, 168, 255, .55); }
.cos-zap { filter: drop-shadow(0 0 2px #2EA8FF); }
.cos-zap--a { animation: cos-zap 0.32s steps(2, end) infinite; }
.cos-zap--b { animation: cos-zap 0.27s steps(2, end) -.1s infinite reverse; }
@keyframes cos-zap { 0% { opacity: 1; transform: rotate(0deg); } 50% { opacity: .35; transform: rotate(6deg); } 100% { opacity: 1; transform: rotate(12deg); } }
.cos-zap { transform-origin: 50px 50px; }
.cos-spark { transform-origin: 50px 50px; animation: cos-spark-run var(--sd, 1s) linear infinite; filter: drop-shadow(0 0 2px #7FE4FF); }
@keyframes cos-spark-run { to { transform: rotate(360deg); } }
.cos-frame--frost { background: conic-gradient(from 20deg, #E8F7FF, #8FDCFF, #FFFFFF, #5BC0F2, #E8F7FF, #B8E8FF, #E8F7FF); box-shadow: 0 0 10px rgba(143, 220, 255, .55); }
.cos-frame--galaxy { background: conic-gradient(from 0deg, #1B0B45, #7B3FE4, #FF7AD9, #2B1E8F, #4FB3FF, #1B0B45); animation: cos-spin 9s linear infinite; box-shadow: 0 0 12px rgba(123, 63, 228, .5); }
.cos-spin-slow { transform-origin: 50px 50px; animation: cos-spin 14s linear infinite; }
.cos-spin-rev { transform-origin: 50px 50px; animation: cos-spin 7s linear infinite reverse; }
.cos-frame--neon-a { background: #FF3DD4; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.8px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.8px)); box-shadow: 0 0 10px #FF3DD4; animation: cos-neon 2s ease-in-out infinite; }
.cos-frame--neon-b { inset: -9px; background: #2EE6FF; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.8px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.8px)); animation: cos-neon 2s ease-in-out -1s infinite; }
@keyframes cos-neon { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px currentColor); } 50% { opacity: .45; } }
.cos-frame--prism { background: conic-gradient(from 0deg, #FF3B3B, #FF9A2E, #FFE53B, #3BFF7A, #2EC5FF, #6A4BFF, #E43BFF, #FF3B3B); animation: cos-spin 3s linear infinite; }
.cos-frame--royal { background: conic-gradient(from 0deg, #8A5A0B, #F2CB6A, #FFF1C4, #C8961F, #8A5A0B, #F2CB6A, #FFE08A, #8A5A0B); }
.cos-frame-tab--crown { min-width: 28px; height: 16px; padding: 1px 4px 0; background: linear-gradient(180deg, #FFE08A, #E4B13A); border: 0; border-radius: 3px; bottom: -9px; display: flex; align-items: center; justify-content: center; }
.cos-frame-tab--crown svg { width: 20px; height: 12px; display: block; }
.cos-frame--void { background: conic-gradient(from 0deg, #000, #3B0A6E, #B07CFF, #120326, #000, #5A1AA8, #E3CCFF, #000); animation: cos-spin 2.4s linear infinite; }
.cos-frame--void-glow { inset: -9px; background: transparent; -webkit-mask: none; mask: none; box-shadow: 0 0 18px 4px rgba(120, 40, 220, .55), inset 0 0 10px rgba(0, 0, 0, .9); animation: cos-breathe 2.8s ease-in-out infinite; }
.cos-infall { transform-origin: 50px 50px; animation: cos-infall var(--id, 2s) ease-in var(--il, 0s) infinite; }
@keyframes cos-infall { from { transform: scale(1.06); opacity: 0; } 30% { opacity: 1; } to { transform: scale(.86) rotate(40deg); opacity: 0; } }

/* -- card backgrounds -- */
.cos-bg--supernova { background: radial-gradient(120% 140% at 72% 50%, #2A0B3E 0%, #0B0618 55%, #04030A 100%); }
.cos-sn-rays { transform-origin: 230px 55px; animation: cos-spin 40s linear infinite; }
.cos-sn-ring { transform-box: fill-box; transform-origin: center; animation: cos-snring 2.8s ease-out infinite; }
.cos-sn-ring--b { animation-delay: -1.4s; }
@keyframes cos-snring { from { transform: scale(.4); opacity: .9; } to { transform: scale(4.2); opacity: 0; } }
.cos-bg--abyss { background: #031018; }
.cos-shafts { animation: cos-shafts 6s ease-in-out infinite alternate; }
@keyframes cos-shafts { to { transform: translateX(14px); opacity: .55; } }
.cos-tentacle { transform-origin: 320px 110px; animation: cos-tent 4.5s ease-in-out infinite alternate; }
@keyframes cos-tent { to { transform: rotate(-4deg); } }
.cos-eyes { animation: cos-eyes 5s ease-in-out infinite; }
@keyframes cos-eyes { 0%, 40%, 100% { opacity: .9; } 45%, 55% { opacity: .1; } }
.cos-bubble { animation: cos-bubble var(--bd, 5s) linear var(--bl, 0s) infinite; }
@keyframes cos-bubble { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-130px) translateX(6px); opacity: 0; } }
.cos-bg--storm { background: linear-gradient(180deg, #161C29 0%, #0C1018 100%); }
.cos-clouds { animation: cos-clouds 12s ease-in-out infinite alternate; }
@keyframes cos-clouds { to { transform: translateX(-16px); } }
.cos-rain { animation: cos-rain .5s linear infinite; }
@keyframes cos-rain { to { transform: translate(-6px, 20px); } }
.cos-bolt-strike { opacity: 0; animation: cos-strike 4.2s steps(1, end) infinite; filter: drop-shadow(0 0 4px #9FC4FF); }
@keyframes cos-strike { 0%, 61%, 66%, 100% { opacity: 0; } 62%, 65% { opacity: 1; } }
.cos-storm-flash { position: absolute; inset: 0; background: radial-gradient(60% 90% at 60% 20%, rgba(200, 220, 255, .55), transparent 70%); opacity: 0; animation: cos-sflash 4.2s steps(1, end) infinite; pointer-events: none; }
@keyframes cos-sflash { 0%, 61%, 63%, 64%, 66%, 100% { opacity: 0; } 62%, 65% { opacity: 1; } }
.cos-cglow { opacity: .08; animation: cos-cglow var(--cg, 3s) steps(1, end) var(--cl, 0s) infinite; }
@keyframes cos-cglow { 0%, 30%, 33%, 100% { opacity: .08; } 31% { opacity: .55; } 32% { opacity: .25; } }
.cos-bolt-far, .cos-bolt-far2 { opacity: .16; filter: drop-shadow(0 0 2px #9FC4FF); animation: cos-farbolt 5.3s steps(1, end) infinite; }
.cos-bolt-far2 { animation-duration: 6.1s; animation-delay: -2.2s; }
@keyframes cos-farbolt { 0%, 20%, 23%, 100% { opacity: .16; } 21% { opacity: .95; } 22% { opacity: .5; } }
.cos-ground-lit { opacity: .25; animation: cos-strike 4.2s steps(1, end) infinite; }
.cos-bg--lava { background: radial-gradient(140% 120% at 50% 100%, #3A0C04 0%, #1A0806 50%, #0C0505 100%); }
.cos-lava-glow { animation: cos-lavag 2.4s ease-in-out infinite alternate; filter: blur(1.5px); }
.cos-lava-core { animation: cos-lavac 1.7s ease-in-out infinite alternate; }
@keyframes cos-lavag { to { opacity: .7; } }
@keyframes cos-lavac { to { stroke: #FFF0B8; } }
.cos-ember { animation: cos-ember var(--ed, 3s) ease-out var(--el, 0s) infinite; }
@keyframes cos-ember { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translate(8px, -100px); opacity: 0; } }
.cos-heat { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255, 90, 20, .22), transparent 60%); animation: cos-breathe 3s ease-in-out infinite; pointer-events: none; }
.cos-bg--synth { background: linear-gradient(180deg, #12052A 0%, #3A0A5A 55%, #14031F 64%); }
.cos-grid-scroll { animation: cos-gridscroll 1.2s linear infinite; }
@keyframes cos-gridscroll { to { transform: translateY(6px); } }
.cos-bg--galaxy { background: radial-gradient(130% 160% at 62% 50%, #1A0E3A 0%, #07051A 60%, #020108 100%); }
.cos-galaxy-spin { transform-origin: 200px 55px; animation: cos-gspin 30s linear infinite; }
@keyframes cos-gspin { to { transform: rotate(360deg); } }
.cos-galaxy-spin { transform-box: view-box; }
.cos-bg--sakura { background: linear-gradient(180deg, #2B1438 0%, #6A2E58 60%, #A0507A 100%); }
.cos-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cos-petals i { position: absolute; top: -10px; width: 7px; height: 5px; border-radius: 70% 0 70% 0; background: #FFB8CF; opacity: .9; animation: cos-fall var(--d) linear var(--dl) infinite; }
.cos-bg--glacier { background: linear-gradient(180deg, #0E2A4A 0%, #3C7FB0 60%, #A8DCF5 100%); }
.cos-glacier-sheen { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(180, 255, 230, .18) 45%, rgba(140, 200, 255, .12) 55%, transparent 70%); background-size: 260% 100%; animation: cos-slide 7s ease-in-out infinite; pointer-events: none; }
.cos-snow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cos-snow i { position: absolute; top: -6px; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .85; animation: cos-fall var(--d) linear var(--dl) infinite; }
/* (reduced motion: animated cosmetics keep moving: players bought them to move) */

@keyframes gx-myth { to { background-position: 300% 0; } }

/* BETA PLAYER title (id founding_100: the first 100 players, owners of the Founding 100 banner) — gold foil plate with a glint */
.title-founding {
    position: relative; overflow: hidden;
    color: #F6ECD2 !important;
    background: linear-gradient(180deg, rgba(233, 199, 123, .22), rgba(233, 199, 123, .06)) !important;
    border: 1px solid rgba(233, 199, 123, .85) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 8px rgba(233, 199, 123, .55);
    box-shadow: 0 0 10px -2px rgba(233, 199, 123, .55), inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.title-founding::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 246, 220, .5) 50%, transparent 65%);
    transform: translateX(-120%); animation: nb-title-founding-glint 3.8s ease-in-out infinite;
}
.title-card .title-founding { background: none !important; border: 0 !important; box-shadow: none; }
@keyframes nb-title-founding-glint { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Custom titles (admin panel › Titles): neon / foil looks in the title's own colour (--title-color) */
.title-c-neon {
    color: color-mix(in srgb, var(--title-color) 30%, #fff) !important;
    background: color-mix(in srgb, var(--title-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--title-color) 75%, transparent);
    text-shadow: 0 0 3px color-mix(in srgb, var(--title-color) 40%, #fff), 0 0 8px var(--title-color), 0 0 16px color-mix(in srgb, var(--title-color) 70%, transparent);
    box-shadow: 0 0 12px -2px color-mix(in srgb, var(--title-color) 65%, transparent), inset 0 0 6px color-mix(in srgb, var(--title-color) 15%, transparent);
    animation: nb-title-c-flicker 4.5s ease-in-out infinite;
}
@keyframes nb-title-c-flicker { 0%, 100% { filter: none; } 50% { filter: brightness(.85); } }
.title-c-foil {
    position: relative; overflow: hidden;
    color: color-mix(in srgb, var(--title-color) 25%, #fff) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--title-color) 24%, transparent), color-mix(in srgb, var(--title-color) 7%, transparent)) !important;
    border: 1px solid color-mix(in srgb, var(--title-color) 85%, transparent) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 0 8px color-mix(in srgb, var(--title-color) 55%, transparent);
    box-shadow: 0 0 10px -2px color-mix(in srgb, var(--title-color) 55%, transparent), inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.title-c-foil::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    transform: translateX(-120%); animation: nb-title-c-glint 3.8s ease-in-out infinite;
}
@keyframes nb-title-c-glint { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.title-card .title-c-neon, .title-card .title-c-foil { background: none !important; border: 0 !important; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .title-c-neon, .title-c-foil::after { animation: none; } }