.pk-badge { --pk-ink: #4a2c10; --pk-pill-bg: #7d4e24; --pk-pill-fg: #ffeedd; --pk-frame: none; position: relative; display: inline-block; flex: 0 0 auto; width: var(--pk-size, 64px); height: var(--pk-size, 64px); background: center / contain no-repeat var(--pk-frame); color: var(--pk-ink); line-height: 1; user-select: none; } .pk-badge--t1 { --pk-ink: #3a1e08; --pk-pill-bg: #7d4e24; --pk-pill-fg: #ffeedd; --pk-medal-1: #d9a05f; --pk-medal-2: #7d4e24; } .pk-badge--t2 { --pk-ink: #23364a; --pk-pill-bg: #6b757e; --pk-pill-fg: #ffffff; --pk-medal-1: #d7dee5; --pk-medal-2: #78838d; } .pk-badge--t3 { --pk-ink: #4a2f04; --pk-pill-bg: #9a6c0c; --pk-pill-fg: #fff8e2; --pk-medal-1: #f4cf6b; --pk-medal-2: #a8791b; } .pk-badge--t4 { --pk-ink: #0e3a22; --pk-pill-bg: #2f7a45; --pk-pill-fg: #f2fff6; --pk-medal-1: #7ed6a0; --pk-medal-2: #2f7a45; } .pk-badge--t5 { --pk-ink: #4d0f19; --pk-pill-bg: #a32234; --pk-pill-fg: #fff0f2; --pk-medal-1: #f08a9c; --pk-medal-2: #a32234; } .pk-badge--themed { --pk-frame: var(--pk-frame-brand, url("/wp-content/plugins/kodoff-user/img/badges/frames/brand.png")); } .pk-badge--themed-cat { --pk-frame: var(--pk-frame-cat, url("/wp-content/plugins/kodoff-user/img/badges/frames/cat.png")); } .pk-badge--noicon { border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .45) 0%, transparent 55%), linear-gradient(150deg, var(--pk-medal-1, #d9a05f) 0%, var(--pk-medal-2, #7d4e24) 100%); box-shadow: inset 0 2px 3px rgba(255, 255, 255, .5), inset 0 -3px 6px rgba(0, 0, 0, .28), 0 2px 6px rgba(15, 11, 22, .22); } .pk-badge__icon, .pk-badge__abbr, .pk-badge__logo { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; } .pk-badge__icon { width: 100%; height: 100%; color: var(--pk-ink); } .pk-badge--themed .pk-badge__logo { top: 48%; width: 52%; height: 49%; } .pk-badge__icon svg { width: 100%; height: 100%; display: block; } .pk-badge__icon img { width: 100%; height: 100%; display: block; object-fit: contain; } .pk-badge__icon--raster { filter: none; } .pk-badge__icon--wide { width: 100%; height: 100%; } .pk-badge__abbr { top: 50%; max-width: 74%; text-align: center; font-weight: 800; font-size: calc(var(--pk-size, 64px) * .17); letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); overflow-wrap: anywhere; hyphens: auto; } .pk-badge__logo { display: flex; align-items: center; justify-content: center; width: 64%; height: 64%; border-radius: 50%; overflow: hidden; } .pk-badge__logo img, .pk-badge__logo svg { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .22)); } .pk-badge__pill { position: absolute; z-index: 3; left: 50%; bottom: -9%; transform: translateX(-50%); max-width: 132%; padding: .18em .55em; border-radius: 999px; background: var(--pk-pill-bg); color: var(--pk-pill-fg); font-weight: 700; font-size: calc(var(--pk-size, 64px) * .115); line-height: 1.25; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .22); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pk-badge--progress::after { --pk-ring: calc(var(--pk-size, 64px) * .075); content: ""; position: absolute; z-index: 0; inset: -3.5%; border-radius: 50%; background: conic-gradient( var(--pk-progress-color, #8d1bbc) calc(var(--pk-progress, 0) * 1%), rgba(141, 27, 188, .16) 0 ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--pk-ring)), #000 calc(100% - var(--pk-ring) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--pk-ring)), #000 calc(100% - var(--pk-ring) + 1px)); pointer-events: none; } .pk-badge--locked { opacity: .5; } .pk-badge--locked .pk-badge__pill { opacity: .8; } .pk-badge--locked::before { content: ""; position: absolute; z-index: 4; right: 2%; top: 2%; width: 30%; height: 30%; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232a2337' fill-opacity='.86'/%3E%3Cpath fill='%23fff' d='M12 5.6a3.5 3.5 0 0 0-3.5 3.5v1.3h-.4c-.6 0-1.1.5-1.1 1.1v4.8c0 .6.5 1.1 1.1 1.1h7.8c.6 0 1.1-.5 1.1-1.1v-4.8c0-.6-.5-1.1-1.1-1.1h-.4V9.1A3.5 3.5 0 0 0 12 5.6Zm0 1.6c1 0 1.9.8 1.9 1.9v1.3h-3.8V9.1c0-1 .8-1.9 1.9-1.9Z'/%3E%3C/svg%3E"); pointer-events: none; } .pk-badge--sm.pk-badge--locked::before { display: none; } .pk-badge--sm { --pk-size: 32px; } .pk-badge--md { --pk-size: 64px; } .pk-badge--lg { --pk-size: 96px; } .pk-badge--xl { --pk-size: 128px; } .pk-badge--sm .pk-badge__pill { display: none; } .pk-badge--sm .pk-badge__abbr { font-size: 9px; line-height: 1.05; } .pk-badge-card { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 132px; padding: 14px 8px 12px; border-radius: 14px; background: #fff; border: 1px solid #ece6f3; text-align: center; } .pk-badge-card__name { font-size: 13px; font-weight: 700; color: #2a2337; line-height: 1.25; } .pk-badge-card__meta { font-size: 11px; color: #6b6577; line-height: 1.3; } .pk-badge-card__rarity { font-size: 11px; color: #8d1bbc; font-weight: 600; } .pk-badge-card--locked .pk-badge-card__name { color: #6b6577; } .pk-badge-card__bar { width: 100%; height: 4px; border-radius: 999px; background: #ece6f3; overflow: hidden; } .pk-badge-card__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8d1bbc, #b95ae0); } .pk-on-dark .pk-badge-card { background: #161024; border-color: #2a2140; } .pk-on-dark .pk-badge-card__name { color: #eae6f2; } .pk-on-dark .pk-badge-card__meta { color: #bfb6d4; } .pk-on-dark .pk-badge-card__rarity { color: #c98af0; } .pk-on-dark .pk-badge-card__bar { background: #2a2140; } .pk-rank { --pk-size: 64px; position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--pk-size); height: var(--pk-size); color: #fff; font-weight: 800; font-size: calc(var(--pk-size) * .34); user-select: none; -webkit-user-select: none; } .pk-rank__img { width: 100%; height: 100%; display: block; object-fit: contain; } .pk-rank--noicon { border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5) 0%, transparent 55%), linear-gradient(150deg, var(--pk-rank-1, #b98cf0) 0%, var(--pk-rank-2, #5a0f83) 100%); box-shadow: inset 0 2px 3px rgba(255, 255, 255, .4), inset 0 -3px 6px rgba(0, 0, 0, .3), 0 2px 8px rgba(15, 11, 22, .3); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); } .pk-rank--sm { --pk-size: 32px; } .pk-rank--lg { --pk-size: 96px; } .pk-rank--r1 { --pk-rank-1: #cfc6dd; --pk-rank-2: #8d84a0; } .pk-rank--r2 { --pk-rank-1: #b9cfe8; --pk-rank-2: #6b8fb5; } .pk-rank--r3 { --pk-rank-1: #a8d8c8; --pk-rank-2: #4f8f78; } .pk-rank--r4 { --pk-rank-1: #a9dca0; --pk-rank-2: #4e8a41; } .pk-rank--r5 { --pk-rank-1: #d9dd8e; --pk-rank-2: #8a8f31; } .pk-rank--r6 { --pk-rank-1: #f0d488; --pk-rank-2: #a8791b; } .pk-rank--r7 { --pk-rank-1: #f3b877; --pk-rank-2: #b2600f; } .pk-rank--r8 { --pk-rank-1: #ef9b8e; --pk-rank-2: #a83c2a; } .pk-rank--r9 { --pk-rank-1: #e08fc0; --pk-rank-2: #93206b; } .pk-rank--r10 { --pk-rank-1: #c08bf0; --pk-rank-2: #6a15a1; } .pk-rank--r11 { --pk-rank-1: #9d9bf5; --pk-rank-2: #3a2fc0; } .pk-rank--r12 { --pk-rank-1: #8ee6ff; --pk-rank-2: #1f56c9; } .pk-rank--r13 { --pk-rank-1: #ffe595; --pk-rank-2: #b07d13; } .pk-rank__prestige { position: absolute; right: -4%; bottom: -4%; min-width: 34%; padding: 0 .3em; border-radius: 999px; background: #0f0b16; color: #ffe595; font-size: calc(var(--pk-size) * .24); line-height: 1.6; text-align: center; } .pk-chip { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; line-height: 1.2; } .pk-chip__link, .pk-chip__link:link, .pk-chip__link:visited { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .pk-chip__link--action { cursor: pointer; } .pk-chip__name { font-weight: 600; } .pk-chip__ava { position: relative; display: inline-block; flex: 0 0 auto; width: var(--pk-chip-ava, 22px); height: var(--pk-chip-ava, 22px); } .pk-chip__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .pk-chip__mark { position: absolute; right: -5px; bottom: -5px; display: block; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff); } .pk-chip__mark .pk-badge, .pk-chip__mark .pk-rank { --pk-size: var(--pk-chip-mark, 15px); display: block; } .pk-chip--md { --pk-chip-ava: 34px; --pk-chip-mark: 20px; gap: 10px; } @media (max-width: 480px) { .pk-chip { flex-wrap: wrap; row-gap: 2px; } } .user-level-step { font-size: 12px; color: #6b6577; margin-top: 2px; } .pk-badge--sm .pk-badge__abbr { display: none; } .pk-uawrap { position: fixed; inset: 0; z-index: 99998; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(21, 10, 31, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .pk-uawrap.is-open { display: flex; } body.pk-modal-locked { overflow: hidden; } .pk-uawrap__box { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: 88vh; max-height: 88dvh; overflow: hidden; padding: 0; border-radius: 22px; background: linear-gradient(180deg, #fdfbff 0%, #ffffff 120px); box-shadow: 0 2px 8px rgba(15, 11, 22, .25), 0 24px 70px rgba(15, 11, 22, .45); animation: pk-uaw-in .26s cubic-bezier(.2, .85, .3, 1.08); } @keyframes pk-uaw-in { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pk-uawrap__box { animation: none; } } .pk-uawrap__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 50px 46px 14px 0; padding: 0 0 6px 24px; scrollbar-width: none; -ms-overflow-style: none; } .pk-uawrap__content::-webkit-scrollbar { width: 0; height: 0; } .pk-uawrap__sb { position: absolute; z-index: 2; top: 50px; bottom: 14px; right: 24px; width: 8px; display: none; } .pk-uawrap__sb.is-on { display: block; } .pk-uawrap__sb-thumb { display: block; width: 100%; border-radius: 999px; background: #ded2ee; cursor: pointer; transition: background .15s; } .pk-uawrap__sb:hover .pk-uawrap__sb-thumb, .pk-uawrap__sb-thumb.is-dragging { background: #c2abdd; } body.pk-uaw-dragging { user-select: none; cursor: pointer; } .pk-uawrap__close { position: absolute; z-index: 2; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; font-size: 26px; line-height: 1; color: #9b93aa; cursor: pointer; transition: color .15s ease, background .15s ease; } .pk-uawrap__close:hover { color: #2a2337; background: #f3eefa; } .pk-uawrap__loading { margin: -18px 0 0 22px; padding: 26px 0; text-align: center; color: #6b6577; font-size: 15px; } .pk-uaw__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid #ece6f3; } .pk-uaw__rank { flex: 0 0 auto; display: flex; } .pk-uaw__rank .pk-rank { --pk-size: 84px; } .pk-uaw__who { flex: 1 1 auto; min-width: 0; } .pk-uaw__name { font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: #2a2337; line-height: 1.15; overflow-wrap: anywhere; } .pk-uaw__rankname { font-size: 15px; color: #6b6577; font-weight: 500; margin-top: 3px; } .pk-uaw__rankname b { color: #8d1bbc; font-weight: 700; } .pk-uaw__stars { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.15; } .pk-uaw__head-cap { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9b93aa; } .pk-uaw__star { position: relative; display: block; width: 76px; height: 76px; } .pk-uaw__star-svg { width: 100%; height: 100%; display: block; animation: pk-uaw-star-rotate 15s linear infinite; transform-origin: 50% 50%; filter: drop-shadow(0 6px 14px rgba(141, 27, 188, .35)); } @keyframes pk-uaw-star-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .pk-uaw__star b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(60, 10, 90, .55); } @media (prefers-reduced-motion: reduce) { .pk-uaw__star-svg { animation: none; } } .pk-uaw__group { --uaw-mark: 16px; --uaw-mark-gap: 8px; margin-bottom: 12px; padding: 13px 14px 15px; border-radius: 16px; background: #faf8fd; box-shadow: inset 0 0 0 1px rgba(80, 40, 120, .07), inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(42, 35, 55, .04); } .pk-uaw__group-title { display: flex; align-items: center; gap: var(--uaw-mark-gap, 8px); margin-bottom: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a819a; } .pk-uaw__group-title::before { content: ""; flex: 0 0 auto; width: var(--uaw-mark, 16px); height: 3px; border-radius: 999px; background: linear-gradient(90deg, #a934b4, #6a15a1); box-shadow: 0 1px 3px rgba(141, 27, 188, .35); } .pk-uaw { user-select: none; } .pk-uaw__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(114px, 1fr)); gap: 18px 8px; justify-items: center; } .pk-uaw__cell { width: 100%; text-align: center; cursor: help; } .pk-uaw__cell .pk-badge, .pk-uaw__cell .pk-uaw__chip { transition: transform .15s; } .pk-uaw__cell:hover .pk-badge, .pk-uaw__cell:hover .pk-uaw__chip { transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .pk-uaw__cell .pk-badge, .pk-uaw__cell .pk-uaw__chip { transition: none; } .pk-uaw__cell:hover .pk-badge, .pk-uaw__cell:hover .pk-uaw__chip { transform: none; } } .pk-uaw__cell .pk-badge { --pk-size: 92px; display: block; margin: 0 auto; } .pk-uaw__chip { position: relative; z-index: 2; display: block; width: fit-content; max-width: 100%; margin: 6px auto 0; padding: .3em .8em; border-radius: 12px; background-color: var(--uaw-pill-bg, #6b757e); background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .1)); color: var(--uaw-pill-fg, #fff); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .015em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(15, 11, 22, .16), 0 3px 8px -3px rgba(42, 35, 55, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pk-uaw__chip--t1 { --uaw-pill-bg: #7d4e24; --uaw-pill-fg: #ffeedd; } .pk-uaw__chip--t2 { --uaw-pill-bg: #6b757e; --uaw-pill-fg: #ffffff; } .pk-uaw__chip--t3 { --uaw-pill-bg: #9a6c0c; --uaw-pill-fg: #fff8e2; } .pk-uaw__chip--t4 { --uaw-pill-bg: #2f7a45; --uaw-pill-fg: #f2fff6; } .pk-uaw__chip--t5 { --uaw-pill-bg: #a32234; --uaw-pill-fg: #fff0f2; } .pk-uaw__empty { padding: 16px 14px; border: 1px dashed #ddd3ea; border-radius: 12px; background: #faf7fd; text-align: center; color: #6b6577; font-size: 14px; } .pk-uaw__foot { margin-top: 4px; padding-top: 13px; border-top: 1px solid #ece6f3; font-size: 14px; } .pk-uaw__foot a { display: inline-block; padding: 7px 15px; border-radius: 999px; background: #f4f0f9; box-shadow: inset 0 0 0 1px rgba(141, 27, 188, .12); color: #8d1bbc; font-weight: 700; text-decoration: none; transition: background .25s cubic-bezier(.32, .72, 0, 1), color .25s cubic-bezier(.32, .72, 0, 1), box-shadow .25s cubic-bezier(.32, .72, 0, 1); } .pk-uaw__foot a:hover { text-decoration: none; background: linear-gradient(135deg, #6a15a1, #a934b4); color: #fff; box-shadow: 0 6px 14px -4px rgba(141, 27, 188, .5); } @media (max-width: 480px) { .pk-uaw__head { gap: 12px; padding-bottom: 14px; margin-bottom: 16px; } .pk-uaw__rank .pk-rank { --pk-size: 62px; } .pk-uaw__name { font-size: 20px; } .pk-uaw__stars { flex: 0 0 100%; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; } .pk-uaw__star { order: -1; width: 62px; height: 62px; } .pk-uaw__star b { font-size: 20px; } .pk-uaw__head-cap { flex: 1 1 auto; min-width: 0; } .pk-uaw__group { --uaw-mark: 10px; --uaw-mark-gap: 6px; margin-bottom: 10px; padding: 10px 10px 12px; border-radius: 13px; } .pk-uaw__group-title { margin-bottom: 10px; } .pk-uaw__grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 14px 6px; } .pk-uaw__cell .pk-badge { --pk-size: 74px; } .pk-uaw__chip { font-size: 10px; margin-top: 5px; } } .js-tooltip.js-tooltip--badge { width: min(260px, calc(100vw - 24px)); padding: 10px 12px; text-align: center; } .pk-tip { display: block; } .pk-tip__head { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 4px; } .pk-tip__head b { font-size: 15px; font-weight: 700; color: #2a2337; line-height: 1.25; } .pk-tip__lvl { flex: 0 0 auto; padding: 0 6px; border-radius: 999px; background-color: var(--tip-bg, #6b757e); background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .1)); color: var(--tip-fg, #fff); font-size: 11px; font-weight: 700; font-style: normal; letter-spacing: .04em; line-height: 1.5; box-shadow: inset 0 0 0 1px rgba(15, 11, 22, .18); } .pk-tip--t1 { --tip-bg: #7d4e24; --tip-fg: #ffeedd; } .pk-tip--t2 { --tip-bg: #6b757e; --tip-fg: #ffffff; } .pk-tip--t3 { --tip-bg: #9a6c0c; --tip-fg: #fff8e2; } .pk-tip--t4 { --tip-bg: #2f7a45; --tip-fg: #f2fff6; } .pk-tip--t5 { --tip-bg: #a32234; --tip-fg: #fff0f2; } .pk-tip__about { display: block; font-size: 14px; line-height: 1.4; color: #6b6577; } .pk-tip__done { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid #efeaf5; font-size: 14px; font-weight: 600; line-height: 1.4; color: #2a2337; } .pk-tip__done::before { content: "✓"; margin-right: 5px; font-weight: 700; color: #3f7a2e; }