.pk-intro { --pki-ink: #f6f1fb; --pki-mute: #b9a9cd; --pki-accent: #d9a6ff; --pki-deep: #1b0f2b; --pki-halo: rgba(178, 96, 255, .55); --pki-edge: rgba(217, 166, 255, .34); --pki-btn-1: #a634e0; --pki-btn-2: #6a12a0; position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px 16px 26px; background: radial-gradient(120% 90% at 50% 0%, rgba(72, 32, 110, .55) 0%, rgba(10, 6, 16, .88) 62%), rgba(8, 5, 13, .86); -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); animation: pk-intro-fade .28s ease both; overscroll-behavior: contain; } .pk-intro--guard { --pki-ink: #fdf6e6; --pki-mute: #c9b48a; --pki-accent: #f3c76a; --pki-deep: #1a1206; --pki-halo: rgba(243, 199, 106, .5); --pki-edge: rgba(243, 199, 106, .38); --pki-btn-1: #d9a53c; --pki-btn-2: #8a5f14; } @keyframes pk-intro-fade { from { opacity: 0; } to { opacity: 1; } } .pk-intro__box { position: relative; isolation: isolate; width: 100%; max-width: 520px; max-height: min(94dvh, 860px); overflow: hidden auto; -webkit-overflow-scrolling: touch; padding: 30px 30px 22px; border-radius: 22px; background: radial-gradient(78% 40% at 50% 5%, var(--pki-halo) 0%, transparent 68%), linear-gradient(180deg, color-mix(in srgb, var(--pki-deep) 82%, #fff 18%) 0%, var(--pki-deep) 58%); color: var(--pki-ink); text-align: center; box-shadow: 0 0 0 1px var(--pki-edge), 0 34px 90px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .14); animation: pk-intro-rise .46s cubic-bezier(.18, .84, .28, 1.06) both; } .pk-intro__box::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: .16; pointer-events: none; z-index: 0; } .pk-intro__box > * { position: relative; z-index: 1; } @keyframes pk-intro-rise { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } } .pk-intro__deck { position: relative; overflow: hidden; transition: height .38s cubic-bezier(.3, .8, .35, 1); } .pk-intro__slide { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateX(26px); pointer-events: none; transition: opacity .3s ease, transform .34s cubic-bezier(.3, .8, .35, 1); } .pk-intro__slide:focus { outline: none; } .pk-intro__slide.is-left { transform: translateX(-26px); } .pk-intro__slide.is-right { transform: translateX(26px); } .pk-intro__slide.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; } .pk-intro__slide.is-active > * { animation: pk-intro-line .42s both; } .pk-intro__slide.is-active > *:nth-child(1) { animation-delay: .04s; } .pk-intro__slide.is-active > *:nth-child(2) { animation-delay: .10s; } .pk-intro__slide.is-active > *:nth-child(3) { animation-delay: .16s; } .pk-intro__slide.is-active > *:nth-child(4) { animation-delay: .22s; } .pk-intro__slide.is-active > *:nth-child(5) { animation-delay: .28s; } @keyframes pk-intro-line { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } .pk-intro__hero { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 126px; margin-bottom: 12px; } .pk-intro__hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side circle at 50% 48%, var(--pki-halo) 0%, transparent 72%); background-size: 86% 168%; background-position: center; background-repeat: no-repeat; will-change: opacity; animation: pk-intro-bloom 3.8s ease-in-out infinite alternate; } .pk-intro__hero .pk-badge, .pk-intro__hero .pk-rank { --pk-size: 122px; } @keyframes pk-intro-bloom { from { opacity: .55; } to { opacity: 1; } } .pk-intro__fan { position: relative; display: flex; align-items: flex-end; justify-content: center; } .pk-intro__fan-img { display: block; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); } .pk-intro__fan-img--l, .pk-intro__fan-img--r { width: 72px; height: 72px; } .pk-intro__fan-img--l { transform: rotate(-14deg) translate(9px, 8px); z-index: 1; } .pk-intro__fan-img--r { transform: rotate( 14deg) translate(-9px, 8px); z-index: 1; } .pk-intro__fan-img--c { width: 112px; height: 112px; z-index: 2; } .pk-intro__coins { display: block; width: 88px; height: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)); } .pk-intro__hero--coins { min-height: 100px; } .pk-intro__hero:has(.pk-badge__pill) { margin-bottom: 26px; } .pk-intro__title { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-indent: .22em; text-transform: uppercase; color: var(--pki-accent); opacity: .9; } .pk-intro__rankname { margin: 6px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; color: var(--pki-ink); background: linear-gradient(180deg, #fff 0%, var(--pki-ink) 42%, var(--pki-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @supports not (background-clip: text) { .pk-intro__rankname { -webkit-text-fill-color: currentColor; } } .pk-intro__rankname--sm { font-family: inherit; font-size: 25px; font-weight: 800; line-height: 1.22; letter-spacing: -.005em; } .pk-intro__was { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pki-mute); text-wrap: balance; } .pk-intro__list { margin: 16px 0 0; padding: 0; list-style: none; text-align: left; } .pk-intro__list li { position: relative; padding: 0 0 0 24px; font-size: 15px; line-height: 1.5; color: var(--pki-mute); } .pk-intro__list li + li { margin-top: 11px; } .pk-intro__list li::before { content: ""; position: absolute; left: 4px; top: .58em; width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1px; background: var(--pki-accent); opacity: .85; } .pk-intro__list b { color: var(--pki-ink); font-weight: 700; } .pk-intro__plate { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--pki-edge) 60%, transparent); border-radius: 16px; background: rgba(255, 255, 255, .05); text-align: left; } .pk-intro__plate--solo { justify-content: center; text-align: center; } .pk-intro__plate-text { font-size: 15px; line-height: 1.4; color: var(--pki-ink); text-wrap: pretty; } .pk-intro__coin { vertical-align: -3px; margin-left: 2px; } .pk-intro__plate-text b { color: var(--pki-accent); } .pk-intro__medal { position: relative; flex: 0 0 auto; width: 62px; height: 62px; } .pk-intro__medal img { display: block; width: 100%; height: 100%; object-fit: contain; } .pk-intro__medal b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 2px; font-size: 20px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } .pk-intro__note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--pki-mute); opacity: .85; text-wrap: balance; } .pk-intro__note .pk-intro__more { text-decoration: underline; } .pk-intro__foot { margin-top: 22px; } .pk-intro__dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 16px; } .pk-intro__dot { appearance: none; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--pki-ink) 26%, transparent); cursor: pointer; transition: width .3s cubic-bezier(.3, .8, .35, 1), background-color .3s ease; } .pk-intro__dot.is-active { width: 20px; background: var(--pki-accent); } .pk-intro__ok { appearance: none; display: block; width: 100%; border: 0; padding: 14px 22px; border-radius: 13px; background: linear-gradient(135deg, var(--pki-btn-1), var(--pki-btn-2)); color: #fff; font: inherit; font-weight: 700; font-size: 16px; letter-spacing: .01em; cursor: pointer; box-shadow: 0 10px 26px -10px var(--pki-halo), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .18s cubic-bezier(.2, .9, .3, 1.2), filter .18s ease; } .pk-intro__ok:hover { transform: translateY(-1px); filter: brightness(1.09); } .pk-intro__ok:active { transform: translateY(0); } .pk-intro--guard .pk-intro__ok { color: #2a1c02; text-shadow: 0 1px 0 rgba(255, 255, 255, .25); } .pk-intro__back { appearance: none; display: block; margin: 10px auto 0; padding: 2px 6px; border: 0; background: none; color: var(--pki-mute); font: inherit; font-size: 12.5px; opacity: .7; cursor: pointer; transition: opacity .18s ease; } .pk-intro__back:hover { opacity: 1; text-decoration: underline; } .pk-intro__back[hidden] { display: none; } .pk-intro__more { color: var(--pki-accent); font-weight: 600; text-decoration: none; } .pk-intro__more:hover { text-decoration: underline; } .pk-intro__ok:focus-visible, .pk-intro__back:focus-visible, .pk-intro__dot:focus-visible, .pk-intro__more:focus-visible { outline: 2px solid var(--pki-accent); outline-offset: 3px; } @media (max-width: 560px) { .pk-intro { padding: 12px 12px 20px; } .pk-intro__box { padding: 24px 18px 16px; border-radius: 20px; } .pk-intro__hero { min-height: 108px; } .pk-intro__hero .pk-badge, .pk-intro__hero .pk-rank { --pk-size: 104px; } .pk-intro__coins { width: 78px; } .pk-intro__hero--coins { min-height: 90px; } .pk-intro__fan-img--c { width: 96px; height: 96px; } .pk-intro__fan-img--l, .pk-intro__fan-img--r { width: 62px; height: 62px; } .pk-intro__fan-img--l { transform: rotate(-14deg) translate(8px, 7px); } .pk-intro__fan-img--r { transform: rotate( 14deg) translate(-8px, 7px); } .pk-intro__rankname { font-size: 25px; } .pk-intro__rankname--sm { font-size: 21px; } .pk-intro__list li { font-size: 14px; } .pk-intro__plate { gap: 11px; padding: 11px 12px; } .pk-intro__medal { width: 54px; height: 54px; } .pk-intro__medal b { font-size: 18px; } .pk-intro__ok { font-size: 15px; padding: 13px 18px; } } @media (max-height: 740px) { .pk-intro__box { padding: 22px 24px 16px; } .pk-intro__hero { min-height: 104px; margin-bottom: 10px; } .pk-intro__hero .pk-badge, .pk-intro__hero .pk-rank { --pk-size: 100px; } .pk-intro__fan-img--c { width: 90px; height: 90px; } .pk-intro__fan-img--l, .pk-intro__fan-img--r { width: 64px; height: 64px; } .pk-intro__rankname { font-size: 26px; margin: 4px 0 6px; } .pk-intro__rankname--sm { font-size: 22px; } .pk-intro__list { margin-top: 12px; } .pk-intro__list li { font-size: 14px; line-height: 1.45; } .pk-intro__list li + li { margin-top: 8px; } .pk-intro__plate { margin-top: 13px; padding: 10px 12px; } .pk-intro__note { margin-top: 11px; } .pk-intro__foot { margin-top: 16px; } .pk-intro__dots { margin-bottom: 12px; } .pk-intro__ok { padding: 12px 20px; } } @media (max-height: 680px) { .pk-intro__hero { min-height: 92px; margin-bottom: 8px; } .pk-intro__hero .pk-badge, .pk-intro__hero .pk-rank { --pk-size: 88px; } .pk-intro__coins { width: 68px; } .pk-intro__hero--coins { min-height: 78px; } .pk-intro__fan-img--c { width: 84px; height: 84px; } .pk-intro__fan-img--l, .pk-intro__fan-img--r { width: 56px; height: 56px; } .pk-intro__rankname { font-size: 23px; } .pk-intro__rankname--sm { font-size: 20px; } .pk-intro__list { margin-top: 10px; } .pk-intro__list li { font-size: 13.5px; line-height: 1.45; } .pk-intro__list li + li { margin-top: 6px; } .pk-intro__plate { margin-top: 11px; padding: 9px 11px; } .pk-intro__note { margin-top: 9px; font-size: 12px; } .pk-intro__foot { margin-top: 13px; } .pk-intro__dots { margin-bottom: 10px; } .pk-intro__ok { padding: 11px 18px; } } @media (max-height: 560px) { .pk-intro { align-items: flex-start; padding: 8px; } .pk-intro__box { max-height: 98dvh; padding: 16px 18px 12px; } .pk-intro__hero { min-height: 76px; margin-bottom: 8px; } .pk-intro__hero .pk-badge, .pk-intro__hero .pk-rank { --pk-size: 72px; } .pk-intro__fan-img--c { width: 66px; height: 66px; } .pk-intro__fan-img--l, .pk-intro__fan-img--r { width: 48px; height: 48px; } .pk-intro__rankname, .pk-intro__rankname--sm { font-size: 20px; margin: 3px 0 5px; } .pk-intro__was { font-size: 12.5px; } .pk-intro__list { margin-top: 9px; } .pk-intro__list li { font-size: 13px; line-height: 1.4; } .pk-intro__list li + li { margin-top: 6px; } .pk-intro__plate { margin-top: 10px; padding: 8px 10px; gap: 10px; } .pk-intro__medal { width: 46px; height: 46px; } .pk-intro__medal b { font-size: 16px; } .pk-intro__note { margin-top: 8px; font-size: 12px; } .pk-intro__foot { margin-top: 11px; } .pk-intro__dots { margin-bottom: 9px; } .pk-intro__ok { padding: 10px 16px; font-size: 15px; } .pk-intro__back { margin-top: 7px; } } @media (max-height: 600px) { .pk-intro__hero--fan { display: none; } .pk-intro__list li { line-height: 1.35; } .pk-intro__list li + li { margin-top: 5px; } } @media (max-width: 340px) { .pk-intro__hero--fan { display: none; } .pk-intro__box { padding-left: 14px; padding-right: 14px; } .pk-intro__list li { line-height: 1.4; } } @media (max-height: 430px) { .pk-intro__hero { min-height: 62px; margin-bottom: 6px; } .pk-intro__hero .pk-badge, .pk-intro__hero .pk-rank { --pk-size: 58px; } } @media (prefers-reduced-motion: reduce) { .pk-intro, .pk-intro__box, .pk-intro__slide.is-active > * { animation: none; } .pk-intro__hero::before { animation: none; opacity: .8; } .pk-intro__deck, .pk-intro__slide, .pk-intro__dot, .pk-intro__ok { transition: none; } } .pk-fw { position: fixed; inset: 0; z-index: 100002; overflow: hidden; pointer-events: none; contain: strict; opacity: 1; transition: opacity .9s ease; } .pk-fw.is-out { opacity: 0; } .pk-fw__rocket { position: absolute; bottom: -12px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: hsl(var(--hue) 100% 78%); box-shadow: 0 0 8px 2px hsl(var(--hue) 100% 65% / .8); animation: pk-fw-rise var(--rise) cubic-bezier(.15, .62, .32, 1) forwards; } .pk-fw__rocket::after { content: ""; position: absolute; left: 1px; bottom: 2px; width: 2px; height: 34px; border-radius: 2px; background: linear-gradient(to top, transparent, hsl(var(--hue) 100% 70% / .75)); } @keyframes pk-fw-rise { from { transform: translateY(0) scale(1); opacity: 1; } 80% { opacity: 1; } to { transform: translateY(calc(var(--to) - 100vh)) scale(.6); opacity: .2; } } .pk-fw__burst { position: absolute; width: 0; height: 0; } .pk-fw__flash { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, hsl(var(--hue) 100% 75%) 38%, hsl(var(--hue) 100% 60% / 0) 70%); animation: pk-fw-flash .34s ease-out forwards; } @keyframes pk-fw-flash { from { transform: scale(1); opacity: 1; } to { transform: scale(16); opacity: 0; } } .pk-fw__spark { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, hsl(var(--hue) 100% 78%) 16%, hsl(var(--hue) 100% 58% / .55) 32%, hsl(var(--hue) 100% 50% / 0) 68%); opacity: 0; animation: pk-fw-spark var(--life) cubic-bezier(.12, .68, .28, 1) var(--delay) forwards; } @keyframes pk-fw-spark { 0% { transform: translate(0, 0) scale(1.25); opacity: 1; } 62% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 110px)) scale(.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pk-fw { display: none; } } .pk-intro__hero--row { min-height: 96px; } .pk-intro__row { display: flex; justify-content: center; align-items: center; } .pk-intro__cell { position: relative; display: flex; line-height: 0; height: 68px; margin-left: -16px; } .pk-intro__cell:first-child { margin-left: 0; } .pk-intro__cell .pk-badge { --pk-size: 68px; display: flex; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); } .pk-intro__cell--more { width: 68px; height: 68px; } .pk-intro__cell--more img { display: block; width: 100%; height: 100%; object-fit: contain; } .pk-intro__cell--more b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 2px; font-size: 21px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } @media (max-width: 560px) { .pk-intro__hero--row { min-height: 82px; } .pk-intro__cell .pk-badge { --pk-size: 56px; } .pk-intro__cell { margin-left: -13px; height: 56px; } .pk-intro__cell--more { width: 56px; height: 56px; } .pk-intro__cell--more b { font-size: 18px; } } @media (max-height: 600px) { .pk-intro__hero--row { min-height: 72px; } .pk-intro__cell .pk-badge { --pk-size: 50px; } .pk-intro__cell { height: 50px; } .pk-intro__cell--more { width: 50px; height: 50px; } .pk-intro__cell--more b { font-size: 16px; } }