:root {
    --bg: #070812;
    --panel: rgba(14, 16, 31, .88);
    --line: #313856;
    --text: #eef2ff;
    --muted: #a4afca;
    --purple: #9c6cff;
    --cyan: #63dfff;
    --gold: #f8c45a;
    --red: #ff667a;
    --blue: #52b4ff;
    --green: #6df2b1
}

* {
    box-sizing: border-box
}

body.game-page {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: 'Rajdhani', system-ui, sans-serif;
    overflow-x: hidden
}

body.game-page::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px);
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 30
}

a {
    text-decoration: none;
    color: inherit
}

.game-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(circle at 70% 12%, rgba(98, 109, 255, .16), transparent 18%), linear-gradient(#080915, #0e1326 58%, #111222 100%);
    z-index: 0
}

.aurora {
    position: absolute;
    left: 10vw;
    top: -6vh;
    width: 80vw;
    height: 28vh;
    background: radial-gradient(ellipse, rgba(86, 233, 255, .09), transparent 68%);
    filter: blur(20px);
    animation: auroraMove 10s ease-in-out infinite alternate
}

.silhouette {
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: 0;
    height: 30%;
    clip-path: polygon(0 100%, 0 64%, 12% 40%, 23% 66%, 39% 30%, 51% 66%, 66% 18%, 82% 66%, 100% 42%, 100% 100%)
}

.s-back {
    background: #0f1322;
    opacity: .9
}

.s-front {
    background: #090b14;
    height: 24%;
    bottom: -4%
}

.game-stars {
    position: absolute;
    inset: 0
}

.game-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    box-shadow: 0 0 10px #fff;
    animation: twinkle 2s steps(2) infinite
}

.game-shell {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 22px 20px 34px
}

.glass-panel {
    background: linear-gradient(180deg, rgba(18, 21, 40, .92), rgba(10, 12, 25, .9));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .02);
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px)
}

.topbar {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    margin-bottom: 20px
}

.mini-brand {
    font: 10px 'Press Start 2P';
    color: #fff
}

.mini-brand span {
    color: var(--purple)
}

.top-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.nav-link {
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: #0b0e1c;
    color: #8190b2;
    font: 700 16px 'Rajdhani';
    transition: .2s
}

.nav-link.active,
.nav-link:hover {
    color: #fff;
    border-color: rgba(156, 108, 255, .4);
    box-shadow: inset 0 -3px 0 var(--purple)
}

.player-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0a0c17;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .07)
}

.compact-chip {
    padding: 10px 14px
}

.tiny-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: rgba(156, 108, 255, .18);
    border: 1px solid rgba(156, 108, 255, .5);
    color: #fff
}

.player-chip b {
    display: block
}

.player-chip small {
    display: block;
    color: #97a4c2
}

.top-currency {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #0a0c17;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    font-weight: 700
}

.top-currency span {
    color: var(--gold)
}

.ghost-btn {
    height: 42px;
    padding: 0 16px;
    background: #111628;
    border: 1px solid rgba(255, 255, 255, .1);
    color: #dce4ff;
    cursor: pointer;
    font: 700 15px 'Rajdhani'
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
    gap: 18px
}

.left-stack,
.right-stack {
    display: grid;
    gap: 18px
}

.hero-status {
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: center;
    min-height: 395px;
    position: relative;
    overflow: hidden
}

.hero-status::before,
.profile-hero-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 18%, rgba(87, 138, 255, .12), transparent 20%);
    pointer-events: none
}

.pixel-label {
    margin: 0 0 10px;
    color: var(--cyan);
    font: 8px 'Press Start 2P';
    letter-spacing: 1px
}

.hero-copy-game h1,
.page-title {
    margin: .25rem 0 1rem;
    font-size: 36px;
    line-height: 1.05
}

.hero-copy-game p {
    margin: 0 0 14px;
    color: #a9b4d0;
    font-size: 18px;
    line-height: 1.45
}

.status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.status-badges span,
.rank-meta-box {
    padding: 10px 12px;
    background: #0b0e1b;
    border: 1px solid rgba(255, 255, 255, .06);
    color: #95a1bd
}

.status-badges b {
    color: #fff
}

.streak-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.streak-line strong {
    font: 52px/1 'Press Start 2P';
    letter-spacing: -2px;
    text-shadow: 4px 4px 0 #2b3354
}

.streak-line span:last-child {
    font: 10px 'Press Start 2P';
    color: #b8c4e4
}

.blue-fire {
    font-size: 34px;
    filter: hue-rotate(175deg) saturate(1.3);
    animation: flicker 1.3s ease-in-out infinite
}

.calendar-card,
.action-card,
.reward-card,
.upgrade-card,
.ranking-preview,
.page-card {
    padding: 22px
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px
}

.section-head.compact {
    align-items: center
}

.section-head h2,
.page-card h2 {
    margin: 4px 0 0;
    font-size: 28px
}

.text-link {
    color: var(--cyan);
    font-weight: 700
}

.legend,
.weekdays {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px
}

.legend {
    margin-bottom: 14px;
    color: #a4b0ca
}

.legend span {
    display: flex;
    align-items: center;
    gap: 8px
}

.dot {
    width: 12px;
    height: 12px;
    display: inline-block
}

.dot.blue {
    background: #4cc0ff
}

.dot.red {
    background: #ff687c
}

.dot.gold {
    background: #f1c35a
}

.dot.prior {
    background: #6f7488
}

.dot.future {
    background: #273149
}

.weekdays {
    margin-bottom: 8px
}

.weekdays span {
    padding: 8px 10px;
    background: #0b0e1b;
    color: #8090b4;
    text-align: center;
    font: 8px 'Press Start 2P'
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px
}

.day-cell {
    min-height: 84px;
    padding: 10px;
    position: relative;
    background: #0a0d1a;
    border: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden
}

.day-cell small {
    color: #8d98b8
}

.day-number {
    font-weight: 700;
    font-size: 18px
}

.day-fire {
    font-size: 18px;
    filter: hue-rotate(175deg)
}

.day-cell.clean {
    background: linear-gradient(180deg, rgba(32, 78, 135, .45), rgba(10, 16, 38, .96));
    border-color: rgba(90, 175, 255, .45);
    box-shadow: inset 0 0 24px rgba(76, 172, 255, .18)
}

.day-cell.clean .day-fire {
    animation: flicker 1.2s infinite
}

.day-cell.event {
    background: linear-gradient(180deg, rgba(124, 28, 46, .44), rgba(29, 8, 15, .96));
    border-color: rgba(255, 105, 126, .4)
}

.day-cell.event .day-fire {
    filter: none;
    animation: flicker 1.1s infinite
}

.day-cell.missed {
    background: linear-gradient(180deg, rgba(113, 88, 24, .42), rgba(25, 20, 9, .96));
    border-color: rgba(255, 206, 86, .32)
}

.day-cell.prior {
    background: #141722;
    border-style: dashed;
    border-color: #626a81
}

.day-cell.future,
.day-cell.before-start,
.day-cell.empty {
    background: #090b14;
    opacity: .58
}

.day-cell.before-start {
    opacity: .3
}

.day-cell.today {
    outline: 2px solid rgba(255, 255, 255, .22)
}

.day-cell.account-start::after {
    content: 'Cuenta';
    position: absolute;
    right: 7px;
    top: 7px;
    background: rgba(90, 175, 255, .18);
    border: 1px solid rgba(90, 175, 255, .45);
    padding: 3px 5px;
    font-size: 11px
}

.day-cell.declared-start::before {
    content: 'Inicio';
    position: absolute;
    left: 7px;
    bottom: 7px;
    background: rgba(248, 196, 90, .14);
    border: 1px solid rgba(248, 196, 90, .35);
    padding: 3px 5px;
    font-size: 11px
}

.counter-row {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    gap: 10px;
    align-items: center;
    margin: 18px 0
}

.counter-row button {
    height: 46px;
    background: #0c0f1b;
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 24px;
    cursor: pointer
}

.counter-row strong {
    display: grid;
    place-items: center;
    height: 46px;
    background: #0c0f1b;
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 24px
}

.danger-pixel-btn {
    width: 100%;
    height: 54px;
    border: 0;
    background: linear-gradient(90deg, #a62943, #df4967);
    color: #fff;
    cursor: pointer;
    font: 9px 'Press Start 2P';
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 0 #6d1d30
}

.action-card small,
.reward-card p {
    display: block;
    color: #9ba8c5;
    font-size: 15px;
    line-height: 1.45
}

.reward-top {
    display: flex;
    align-items: center;
    gap: 14px
}

.reward-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: rgba(248, 196, 90, .13);
    border: 1px solid rgba(248, 196, 90, .45);
    color: var(--gold);
    font-size: 22px
}

.reward-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0
}

.reward-kpis span {
    background: #0b0e1b;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .06)
}

.reward-kpis b {
    color: #fff
}

.xp-track {
    position: relative;
    height: 14px;
    background: #0b0e1b;
    border: 1px solid rgba(255, 255, 255, .08);
    margin: 16px 0 10px;
    overflow: hidden
}

.xp-track i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30%;
    background: linear-gradient(90deg, var(--cyan), var(--purple));
    box-shadow: 0 0 16px rgba(99, 223, 255, .35)
}

.xp-meta {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.milestone-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px
}

.milestone-item {
    padding: 12px;
    background: #0a0d19;
    border: 1px solid rgba(255, 255, 255, .08);
    display: grid;
    gap: 4px;
    position: relative;
    overflow: hidden
}

.milestone-item::after {
    content: '';
    position: absolute;
    inset: -50% auto auto -35%;
    width: 70px;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
    transform: rotate(18deg);
    animation: shine 3s linear infinite
}

.milestone-item.claimed {
    border-color: rgba(109, 242, 177, .32)
}

.milestone-item.active {
    box-shadow: inset 0 0 22px rgba(156, 108, 255, .12)
}

.milestone-item b {
    font-size: 18px
}

.milestone-item small {
    color: var(--gold)
}

.milestone-item i {
    font-style: normal;
    color: #8ea0bf;
    font-size: 12px
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
}

.shop-item {
    padding: 14px;
    background: #0a0d19;
    border: 1px solid rgba(255, 255, 255, .08);
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 12px;
    align-items: center;
    color: inherit;
    cursor: pointer;
    transition: .18s
}

.shop-item:hover {
    transform: translateY(-2px);
    border-color: rgba(156, 108, 255, .35)
}

.shop-item.owned {
    border-color: rgba(90, 175, 255, .25)
}

.shop-item.equipped {
    border-color: rgba(109, 242, 177, .38);
    box-shadow: inset 0 0 22px rgba(109, 242, 177, .08)
}

.shop-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: rgba(156, 108, 255, .16);
    border: 1px solid rgba(156, 108, 255, .34)
}

.shop-copy b {
    display: block;
    font-size: 18px
}

.shop-copy small {
    display: block;
    color: #9fadca
}

.shop-item strong {
    font-size: 14px;
    color: #fff
}

.coins-inline {
    background: #0b0e1b;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .06)
}

.mini-ranking,
.ranking-board,
.top-three,
.profile-stats,
.loadout-list,
.mini-calendar {
    display: grid;
    gap: 10px
}

.rank-row,
.ranking-row,
.podium-card,
.loadout-item,
.stat-box,
.mini-day {
    background: #0b0e1b;
    border: 1px solid rgba(255, 255, 255, .06)
}

.rank-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    transition: .18s
}

.rank-row:hover {
    border-color: rgba(156, 108, 255, .35)
}

.rank-pos,
.ranking-pos,
.podium-place {
    font: 10px 'Press Start 2P';
    color: var(--gold)
}

.rank-user b,
.ranking-main b {
    display: block
}

.rank-user small,
.ranking-main small {
    color: #9eabc7
}

.rank-score {
    font: 8px 'Press Start 2P';
    color: var(--cyan)
}

.page-grid.single-page {
    display: grid;
    grid-template-columns: 1fr
}

.page-grid.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px
}

.page-card {
    padding: 24px
}

.top-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px
}

.podium-card {
    padding: 16px;
    display: grid;
    gap: 6px;
    position: relative;
    overflow: hidden
}

.podium-card::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: linear-gradient(90deg, var(--purple), var(--cyan))
}

.podium-card strong {
    font: 9px 'Press Start 2P';
    color: #fff
}

.podium-card em {
    font-style: normal;
    color: #9eadc9
}

.podium-card.p1 {
    transform: translateY(-6px);
    border-color: rgba(248, 196, 90, .35)
}

.ranking-row {
    display: grid;
    grid-template-columns: 70px 1.2fr repeat(2, .9fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px
}

.ranking-stat span {
    display: block;
    color: #9daccc;
    font-size: 13px
}

.ranking-stat strong {
    font-size: 22px
}

.view-profile-btn {
    padding: 12px 14px;
    background: #151a2c;
    border: 1px solid rgba(255, 255, 255, .08);
    font-weight: 700
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(320px, 430px) 1fr;
    gap: 18px
}

.profile-hero-frame {
    position: relative;
    min-height: 420px;
    background: #090d19;
    border: 1px solid rgba(255, 255, 255, .08);
    display: grid;
    place-items: center
}

.profile-data {
    display: grid;
    gap: 16px
}

.profile-header-box {
    padding: 14px 16px;
    background: #0b0e1b;
    border: 1px solid rgba(255, 255, 255, .07)
}

.profile-header-box b {
    display: block;
    font-size: 28px
}

.profile-header-box small {
    color: #a2afd0
}

.profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.stat-box {
    padding: 14px
}

.stat-box span {
    display: block;
    color: #98a6c5;
    font-size: 14px;
    margin-bottom: 4px
}

.stat-box strong {
    font-size: 22px
}

.profile-loadout h3 {
    margin: 0 0 12px;
    font-size: 24px
}

.loadout-list {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.loadout-item {
    padding: 12px
}

.loadout-item span {
    display: block;
    color: #93a3c7;
    font-size: 14px
}

.loadout-item b {
    display: block;
    font-size: 18px
}

.mini-calendar {
    grid-template-columns: repeat(10, minmax(0, 1fr))
}

.mini-day {
    padding: 10px;
    text-align: center
}

.mini-day.clean {
    background: rgba(33, 91, 145, .42);
    border-color: rgba(90, 175, 255, .42)
}

.mini-day.event {
    background: rgba(124, 28, 46, .42);
    border-color: rgba(255, 105, 126, .36)
}

.mini-day.missed {
    background: rgba(113, 88, 24, .42);
    border-color: rgba(255, 206, 86, .32)
}

.mini-day.prior {
    background: #111522
}

.mini-day b {
    display: block;
    font-size: 17px
}

.mini-day small {
    color: #9daac8
}

.hero-character {
    position: relative;
    width: 300px;
    height: 300px;
    justify-self: end
}

.hero-character-large {
    width: 340px;
    height: 340px
}

.char-aura {
    position: absolute;
    left: 42px;
    top: 18px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 2px solid rgba(122, 124, 255, .2);
    background: radial-gradient(circle at 50% 50%, rgba(98, 127, 255, .16), transparent 66%);
    animation: charAuraBreath 2.8s ease-in-out infinite
}

.char-ground {
    position: absolute;
    left: 38px;
    bottom: 26px;
    width: 220px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    filter: blur(8px);
    animation: groundPulse 2.8s ease-in-out infinite
}

.char-runes {
    position: absolute;
    left: 48px;
    top: 26px;
    width: 200px;
    height: 200px;
    animation: runeSpin 18s linear infinite
}

.char-runes i {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #79ddff;
    box-shadow: 0 0 8px #79ddff;
    animation: runeBlink 1.3s infinite steps(2)
}

.char-runes i:nth-child(1) {
    left: 0;
    top: 50%
}

.char-runes i:nth-child(2) {
    right: 0;
    top: 50%
}

.char-runes i:nth-child(3) {
    left: 50%;
    top: 0
}

.char-runes i:nth-child(4) {
    left: 50%;
    bottom: 0
}

.pet-orb {
    position: absolute;
    left: 24px;
    top: 66px;
    width: 0;
    height: 0;
    opacity: 0;
    transition: .25s
}

.pet-orb::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff, #74d8ff 45%, #3656ff);
    box-shadow: 0 0 16px rgba(116, 216, 255, .7)
}

.pixel-knight {
    position: absolute;
    left: 80px;
    top: 34px;
    width: 140px;
    height: 230px;
    animation: heroIdle 2.5s ease-in-out infinite;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .48))
}

.pk-cape {
    position: absolute;
    left: 16px;
    top: 84px;
    width: 58px;
    height: 112px;
    background: linear-gradient(180deg, #4f2f74, #23173d);
    clip-path: polygon(20% 0, 100% 12%, 84% 100%, 0 94%);
    animation: capeWave 2.5s ease-in-out infinite
}

.pk-sword-back {
    display: none
}

.pk-hair-back {
    position: absolute;
    left: 30px;
    top: 16px;
    width: 82px;
    height: 90px;
    background: #22243d;
    clip-path: polygon(18% 0, 88% 4%, 100% 42%, 82% 100%, 69% 58%, 48% 77%, 36% 58%, 18% 85%, 4% 64%, 0 18%);
    animation: hairSway 2.5s ease-in-out infinite
}

.pk-face {
    position: absolute;
    left: 40px;
    top: 34px;
    width: 60px;
    height: 72px;
    background: #f0c7b4;
    clip-path: polygon(10% 0, 90% 0, 100% 82%, 70% 100%, 30% 100%, 0 82%)
}

.pk-ear {
    position: absolute;
    top: 52px;
    width: 8px;
    height: 16px;
    background: #e5b59e
}

.pk-ear.l {
    left: 35px
}

.pk-ear.r {
    left: 97px
}

.pk-eye {
    position: absolute;
    top: 36px;
    width: 8px;
    height: 5px;
    background: #635fff;
    box-shadow: 0 0 8px #7770ff;
    animation: eyeBlink 5s infinite
}

.pk-eye.l {
    left: 14px
}

.pk-eye.r {
    right: 14px
}

.pk-nose {
    position: absolute;
    left: 28px;
    top: 43px;
    width: 4px;
    height: 9px;
    background: #d09b86
}

.pk-hair-front {
    position: absolute;
    left: 31px;
    top: 15px;
    width: 78px;
    height: 42px;
    background: #23243d;
    clip-path: polygon(0 18%, 26% 0, 38% 28%, 55% 5%, 64% 30%, 95% 12%, 76% 65%, 59% 45%, 49% 89%, 34% 48%, 20% 70%);
    animation: hairSway 2.5s ease-in-out infinite reverse
}

.pk-neck {
    position: absolute;
    left: 60px;
    top: 97px;
    width: 22px;
    height: 22px;
    background: #d3a48f
}

.pk-torso {
    position: absolute;
    left: 34px;
    top: 109px;
    width: 76px;
    height: 106px;
    background: linear-gradient(180deg, #2b3150, #161c31);
    clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%)
}

.pk-chest {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 46px;
    height: 24px;
    background: #5f74a1;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%)
}

.pk-belt {
    position: absolute;
    left: 9px;
    top: 58px;
    width: 58px;
    height: 10px;
    background: #754d29;
    border-top: 2px solid #c99b61
}

.pk-shoulder {
    position: absolute;
    top: 112px;
    width: 30px;
    height: 24px;
    background: #526689;
    border: 2px solid #26324d
}

.pk-shoulder.l {
    left: 15px
}

.pk-shoulder.r {
    right: 15px
}

.pk-arm {
    position: absolute;
    top: 124px;
    width: 22px;
    height: 92px;
    background: #1c2339;
    border-left: 2px solid #38496d;
    border-right: 2px solid #111725
}

.pk-arm.l {
    left: 16px;
    transform: rotate(8deg);
    transform-origin: top center;
    animation: leftArmIdle 2.5s ease-in-out infinite
}

.pk-arm.r {
    right: 15px;
    transform: rotate(-10deg);
    transform-origin: top center;
    animation: rightArmIdle 2.5s ease-in-out infinite
}

.pk-glove {
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 22px;
    height: 22px;
    background: #111827;
    border: 2px solid #3b4a67;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 15% 100%)
}

.pk-leg {
    position: absolute;
    top: 176px;
    width: 32px;
    height: 39px;
    background: #181e31
}

.pk-leg.l {
    left: 42px
}

.pk-leg.r {
    right: 30px
}

.pk-boot {
    position: absolute;
    top: 205px;
    width: 38px;
    height: 19px;
    background: #0b0f18;
    border-top: 3px solid #34415e
}

.pk-boot.l {
    left: 35px;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%)
}

.pk-boot.r {
    right: 22px;
    clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%)
}

.pk-sword {
    position: absolute;
    width: 10px;
    height: 132px;
    background: linear-gradient(90deg, #7b9dc1, #eefcff 48%, #75bce9 53%, #365779);
    right: -8px;
    top: 67px;
    transform: rotate(24deg);
    box-shadow: 0 0 8px rgba(99, 195, 255, .6);
    transform-origin: 50% 85%;
    animation: swordIdle 2.5s ease-in-out infinite
}

.pk-sword:before {
    content: '';
    position: absolute;
    left: -6px;
    bottom: 20px;
    width: 22px;
    height: 7px;
    background: #66789a;
    border: 2px solid #1b2237
}

.pk-sword:after {
    content: '';
    position: absolute;
    left: 1px;
    bottom: -20px;
    width: 8px;
    height: 24px;
    background: #151a2b;
    border: 2px solid #4a5c7b
}

.pk-hilt {
    position: absolute;
    left: -5px;
    bottom: 9px;
    width: 20px;
    height: 6px;
    background: #2b3550
}

.pk-gem {
    position: absolute;
    left: 2px;
    bottom: 22px;
    width: 7px;
    height: 7px;
    background: #78eaff;
    box-shadow: 0 0 9px #63dcff;
    transform: rotate(45deg);
    animation: gemPulse 1.3s ease-in-out infinite
}

.level-plate {
    position: absolute;
    left: 94px;
    bottom: 0;
    padding: 10px 14px;
    background: #0b0e1b;
    border: 1px solid rgba(255, 255, 255, .08);
    font: 9px 'Press Start 2P';
    box-shadow: 0 0 16px rgba(75, 179, 255, .12)
}

/* Cosmetics */
.frame-neon {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 0 0 2px rgba(156, 108, 255, .24), 0 0 24px rgba(156, 108, 255, .12), 0 24px 60px rgba(0, 0, 0, .4) !important
}

.frame-royal {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 0 0 2px rgba(248, 196, 90, .28), 0 0 26px rgba(248, 196, 90, .14), 0 24px 60px rgba(0, 0, 0, .4) !important
}

.sword-celestial .pk-sword {
    background: linear-gradient(90deg, #9ddfff, #fff 48%, #91f1ff 53%, #5775ff);
    box-shadow: 0 0 11px #76e6ff, 0 0 24px rgba(102, 125, 255, .75)
}

.sword-phoenix .pk-sword {
    background: linear-gradient(90deg, #ffd38a, #fff2cb 48%, #ff6b6b 53%, #8f2434);
    box-shadow: 0 0 11px #ff856f, 0 0 24px rgba(255, 90, 90, .65)
}

.sword-phoenix .pk-gem {
    background: #ffd59c;
    box-shadow: 0 0 10px #ffd59c, 0 0 18px #ff7b69
}

.armor-shadow .pk-torso,
.armor-shadow .pk-shoulder,
.armor-shadow .pk-arm {
    background: linear-gradient(180deg, #35224e, #171321);
    border-color: #553e7d
}

.armor-crystal .pk-torso,
.armor-crystal .pk-shoulder,
.armor-crystal .pk-arm {
    background: linear-gradient(180deg, #4d79a8, #233b61);
    border-color: #79ceff
}

.armor-crystal .pk-chest {
    background: #9be8ff
}

.hair-silver .pk-hair-back,
.hair-silver .pk-hair-front {
    background: #ccd8f1
}

.hair-crimson .pk-hair-back,
.hair-crimson .pk-hair-front {
    background: #912f4f
}

.aura-blue .char-aura {
    background: radial-gradient(circle at 50% 53%, rgba(81, 224, 255, .34), rgba(83, 101, 255, .14) 43%, transparent 70%);
    border-color: rgba(110, 229, 255, .48);
    box-shadow: 0 0 42px rgba(59, 184, 255, .22), inset 0 0 38px rgba(79, 108, 255, .12)
}

.aura-blue .char-runes i {
    opacity: .92;
    box-shadow: 0 0 13px #5ee7ff, 0 0 25px rgba(86, 146, 255, .65)
}

.aura-gold .char-aura {
    background: radial-gradient(circle at 50% 53%, rgba(255, 220, 113, .34), rgba(255, 170, 70, .16) 43%, transparent 70%);
    border-color: rgba(255, 220, 120, .48);
    box-shadow: 0 0 42px rgba(255, 193, 92, .22), inset 0 0 38px rgba(255, 182, 72, .12)
}

.aura-gold .char-runes i {
    background: #ffd876;
    box-shadow: 0 0 13px #ffd876, 0 0 25px rgba(255, 216, 118, .65)
}

.color-teal .streak-line strong,
.color-teal .pixel-label,
.color-teal .text-link,
.color-teal .rank-score {
    color: var(--cyan)
}

.color-rose .streak-line strong,
.color-rose .pixel-label,
.color-rose .text-link,
.color-rose .rank-score {
    color: #ff82d2
}

.pet-spirit .pet-orb {
    opacity: 1;
    animation: petFloat 2.7s ease-in-out infinite
}

@keyframes twinkle {
    50% {
        opacity: .25
    }
}

@keyframes flicker {

    0%,
    100% {
        transform: translateY(0) scale(1)
    }

    50% {
        transform: translateY(-2px) scale(1.04)
    }
}

@keyframes auroraMove {
    50% {
        transform: translateX(2vw) translateY(8px)
    }
}

@keyframes heroIdle {

    0%,
    100% {
        transform: translateY(0) rotate(-.3deg)
    }

    50% {
        transform: translateY(-7px) rotate(.45deg)
    }
}

@keyframes capeWave {

    0%,
    100% {
        transform: skewX(0deg) translateX(0)
    }

    50% {
        transform: skewX(-4deg) translateX(-4px)
    }
}

@keyframes hairSway {

    0%,
    100% {
        transform: skewX(0deg)
    }

    50% {
        transform: skewX(-2deg) translateX(-1px)
    }
}

@keyframes leftArmIdle {

    0%,
    100% {
        transform: rotate(8deg)
    }

    50% {
        transform: rotate(5deg)
    }
}

@keyframes rightArmIdle {

    0%,
    100% {
        transform: rotate(-10deg)
    }

    50% {
        transform: rotate(-14deg)
    }
}

@keyframes swordIdle {

    0%,
    100% {
        transform: rotate(24deg)
    }

    50% {
        transform: rotate(27deg)
    }
}

@keyframes charAuraBreath {

    0%,
    100% {
        transform: scale(.94);
        opacity: .65
    }

    50% {
        transform: scale(1.04);
        opacity: 1
    }
}

@keyframes groundPulse {

    0%,
    100% {
        transform: scaleX(.92);
        opacity: .68
    }

    50% {
        transform: scaleX(1.03);
        opacity: .95
    }
}

@keyframes runeSpin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes runeBlink {
    50% {
        opacity: .15
    }
}

@keyframes eyeBlink {

    0%,
    46%,
    50%,
    100% {
        transform: scaleY(1)
    }

    48% {
        transform: scaleY(.15)
    }
}

@keyframes gemPulse {
    50% {
        transform: rotate(45deg) scale(1.35);
        filter: brightness(1.4)
    }
}

@keyframes petFloat {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(12px, -10px)
    }
}

@keyframes shine {
    to {
        transform: translateX(220px) rotate(18deg)
    }
}

.toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: #090c17;
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 14px 16px;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: .2s;
    z-index: 60;
    max-width: 420px
}

.toast.show {
    opacity: 1;
    transform: translateY(0)
}

@media(max-width:1180px) {

    .dashboard-grid,
    .profile-layout {
        grid-template-columns: 1fr
    }

    .hero-status {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .hero-character {
        justify-self: center
    }

    .shop-grid,
    .top-three,
    .profile-stats,
    .loadout-list {
        grid-template-columns: 1fr 1fr
    }

    .ranking-row {
        grid-template-columns: 70px 1fr 1fr auto
    }

    .ranking-stat:nth-child(4) {
        display: none
    }
}

@media(max-width:860px) {
    .topbar {
        grid-template-columns: 1fr;
        justify-items: start
    }

    .hero-copy-game h1,
    .page-title {
        font-size: 30px
    }

    .streak-line strong {
        font-size: 40px
    }

    .legend,
    .shop-grid,
    .milestone-grid,
    .profile-stats,
    .loadout-list,
    .mini-calendar,
    .top-three {
        grid-template-columns: 1fr
    }

    .weekdays {
        grid-template-columns: repeat(7, 1fr)
    }

    .dashboard-grid {
        grid-template-columns: 1fr
    }

    .calendar-grid {
        grid-template-columns: repeat(7, 1fr)
    }

    .ranking-row {
        grid-template-columns: 1fr;
        align-items: flex-start
    }

    .view-profile-btn {
        display: inline-block
    }

    .hero-character {
        transform: scale(.92)
    }
}

@media(max-width:620px) {
    .game-shell {
        padding: 12px
    }

    .hero-status,
    .calendar-card,
    .action-card,
    .reward-card,
    .upgrade-card,
    .ranking-preview,
    .page-card {
        padding: 16px
    }

    .pixel-label,
    .mini-brand {
        font-size: 7px
    }

    .status-badges span {
        width: 100%
    }

    .streak-line {
        gap: 8px
    }

    .streak-line strong {
        font-size: 30px
    }

    .top-currency,
    .player-chip,
    .nav-link {
        font-size: 14px
    }

    .hero-character,
    .hero-character-large {
        width: 260px;
        height: 280px
    }

    .pixel-knight {
        left: 61px;
        transform: scale(.88);
        transform-origin: top left
    }

    .char-aura {
        left: 28px;
        width: 200px;
        height: 200px
    }

    .char-ground {
        left: 26px;
        width: 190px
    }

    .level-plate {
        left: 74px
    }
}

/* V5 systems */
.crystal-currency span {
    color: #78efff
}

.camp-card,
.missions-card,
.chests-card,
.achievements-card {
    padding: 22px
}

.camp-stage-label,
.mission-reset,
.achievement-count {
    padding: 8px 10px;
    background: #0b0e1b;
    border: 1px solid rgba(255, 255, 255, .07);
    color: #aab7d4;
    font-size: 13px
}

.camp-scene {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    background: linear-gradient(#080b1b, #13172d 58%, #171322);
    border: 1px solid rgba(255, 255, 255, .07)
}

.camp-moon {
    position: absolute;
    right: 9%;
    top: 10%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #dce7ff;
    box-shadow: 0 0 28px rgba(220, 231, 255, .25);
    animation: moonBob 5s ease-in-out infinite
}

.camp-stars {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 10% 18%, #fff 0 1px, transparent 2px), radial-gradient(circle at 23% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 52% 16%, #fff 0 1px, transparent 2px), radial-gradient(circle at 73% 32%, #fff 0 1px, transparent 2px), radial-gradient(circle at 87% 18%, #fff 0 1px, transparent 2px);
    opacity: .7;
    animation: twinkle 2.3s steps(2) infinite
}

.camp-mountain {
    position: absolute;
    bottom: 62px;
    width: 62%;
    height: 130px;
    clip-path: polygon(0 100%, 0 62%, 18% 20%, 35% 68%, 54% 12%, 70% 66%, 84% 28%, 100% 70%, 100% 100%)
}

.cm1 {
    left: -4%;
    background: #171a30
}

.cm2 {
    right: -10%;
    background: #0f1324;
    transform: scale(.9)
}

.camp-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 78px;
    background: linear-gradient(#171727, #0a0c15)
}

.camp-fire {
    position: absolute;
    left: 42%;
    bottom: 48px;
    width: 54px;
    height: 70px;
    z-index: 5
}

.camp-fire i {
    position: absolute;
    bottom: 12px;
    left: 14px;
    width: 28px;
    height: 42px;
    background: #4fc7ff;
    clip-path: polygon(50% 0, 80% 35%, 100% 68%, 72% 100%, 28% 100%, 0 68%, 20% 35%);
    filter: drop-shadow(0 0 10px #54cfff);
    animation: campFlame .7s ease-in-out infinite alternate
}

.camp-fire i:nth-child(2) {
    left: 20px;
    width: 18px;
    height: 32px;
    background: #94ecff;
    animation-delay: .15s
}

.camp-fire i:nth-child(3) {
    left: 24px;
    width: 10px;
    height: 22px;
    background: #fff;
    animation-delay: .3s
}

.camp-fire span {
    position: absolute;
    left: 4px;
    bottom: 0;
    width: 48px;
    height: 11px;
    background: #5d3523;
    box-shadow: 0 0 0 3px #221915
}

.camp-tent {
    position: absolute;
    left: 17%;
    bottom: 61px;
    width: 110px;
    height: 78px;
    background: #5a3d78;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    opacity: 0;
    transform: translateY(10px);
    transition: .35s
}

.camp-tent:before {
    content: '';
    position: absolute;
    left: 46px;
    bottom: 0;
    width: 22px;
    height: 43px;
    background: #241b35;
    clip-path: polygon(50% 0, 100% 100%, 0 100%)
}

.camp-tent i {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-bottom: 3px solid rgba(255, 255, 255, .16)
}

.camp-tree {
    position: absolute;
    bottom: 61px;
    width: 44px;
    height: 100px;
    opacity: .9
}

.camp-tree:before {
    content: '';
    position: absolute;
    left: 17px;
    bottom: 0;
    width: 10px;
    height: 42px;
    background: #3b2a24
}

.camp-tree:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 75px;
    background: #183a36;
    clip-path: polygon(50% 0, 100% 45%, 72% 45%, 100% 82%, 0 82%, 28% 45%, 0 45%)
}

.tree-a {
    left: 4%
}

.tree-b {
    right: 5%;
    transform: scale(.8)
}

.camp-chest-visual {
    position: absolute;
    right: 24%;
    bottom: 65px;
    width: 48px;
    height: 34px;
    background: #6d4824;
    border: 3px solid #322113;
    opacity: 0;
    transition: .35s
}

.camp-chest-visual:before {
    content: '';
    position: absolute;
    left: -3px;
    right: -3px;
    top: -16px;
    height: 16px;
    background: #81582d;
    border: 3px solid #322113;
    border-bottom: 0
}

.camp-chest-visual:after {
    content: '';
    position: absolute;
    left: 19px;
    top: 9px;
    width: 8px;
    height: 11px;
    background: #f0c36d
}

.camp-banner {
    position: absolute;
    left: 8%;
    bottom: 74px;
    width: 9px;
    height: 100px;
    background: #6b4b31;
    opacity: 0
}

.camp-banner:after {
    content: '✦';
    position: absolute;
    left: 9px;
    top: 6px;
    width: 60px;
    height: 44px;
    background: #433064;
    color: #9fe8ff;
    display: grid;
    place-items: center;
    font-size: 20px;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%)
}

.camp-tower {
    position: absolute;
    right: 8%;
    bottom: 60px;
    width: 72px;
    height: 132px;
    background: #222840;
    border: 3px solid #111526;
    opacity: 0
}

.camp-tower:before {
    content: '';
    position: absolute;
    left: -10px;
    top: -18px;
    width: 86px;
    height: 24px;
    background: #39415f;
    clip-path: polygon(0 100%, 0 35%, 16% 35%, 16% 0, 32% 0, 32% 35%, 68% 35%, 68% 0, 84% 0, 84% 35%, 100% 35%, 100% 100%)
}

.camp-tower:after {
    content: '';
    position: absolute;
    left: 25px;
    bottom: 0;
    width: 22px;
    height: 44px;
    background: #0d1020
}

.camp-progress-copy {
    position: absolute;
    left: 18px;
    bottom: 13px;
    z-index: 8;
    display: grid
}

.camp-progress-copy b {
    font-size: 16px
}

.camp-progress-copy small {
    color: #91a1c4
}

.camp-particles i {
    position: absolute;
    left: 43%;
    bottom: 88px;
    width: 4px;
    height: 4px;
    background: #68dfff;
    box-shadow: 0 0 8px #68dfff;
    animation: emberRise 2s linear infinite
}

.camp-particles i:nth-child(2) {
    left: 46%;
    animation-delay: .4s
}

.camp-particles i:nth-child(3) {
    left: 44%;
    animation-delay: .8s
}

.camp-particles i:nth-child(4) {
    left: 47%;
    animation-delay: 1.2s
}

.camp-particles i:nth-child(5) {
    left: 41%;
    animation-delay: 1.6s
}

.camp-scene[data-stage="1"] .camp-tent,
.camp-scene[data-stage="2"] .camp-tent,
.camp-scene[data-stage="3"] .camp-tent,
.camp-scene[data-stage="4"] .camp-tent,
.camp-scene[data-stage="5"] .camp-tent,
.camp-scene[data-stage="6"] .camp-tent {
    opacity: 1;
    transform: none
}

.camp-scene[data-stage="2"] .camp-chest-visual,
.camp-scene[data-stage="3"] .camp-chest-visual,
.camp-scene[data-stage="4"] .camp-chest-visual,
.camp-scene[data-stage="5"] .camp-chest-visual,
.camp-scene[data-stage="6"] .camp-chest-visual {
    opacity: 1
}

.camp-scene[data-stage="3"] .camp-banner,
.camp-scene[data-stage="4"] .camp-banner,
.camp-scene[data-stage="5"] .camp-banner,
.camp-scene[data-stage="6"] .camp-banner {
    opacity: 1
}

.camp-scene[data-stage="4"] .camp-tower,
.camp-scene[data-stage="5"] .camp-tower,
.camp-scene[data-stage="6"] .camp-tower {
    opacity: 1
}

.camp-scene[data-stage="5"] {
    box-shadow: inset 0 0 55px rgba(100, 147, 255, .12)
}

.camp-scene[data-stage="6"] {
    background: linear-gradient(#100a24, #211b42 58%, #1e162d)
}

.camp-scene[data-stage="6"] .camp-fire {
    filter: drop-shadow(0 0 16px #88ddff)
}

.mission-list {
    display: grid;
    gap: 10px
}

.mission-item {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #0a0d19;
    border: 1px solid rgba(255, 255, 255, .07)
}

.mission-item.done {
    border-color: rgba(83, 196, 255, .28)
}

.mission-item.claimed {
    border-color: rgba(109, 242, 177, .28);
    opacity: .8
}

.mission-check {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: #11172a;
    border: 1px solid rgba(255, 255, 255, .08);
    font-weight: 700
}

.mission-item b,
.mission-item small {
    display: block
}

.mission-item small {
    color: #96a5c5
}

.mission-item button {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #171c31;
    color: #fff;
    cursor: pointer
}

.mission-item button:disabled {
    opacity: .45;
    cursor: default
}

.mission-item.done:not(.claimed) button {
    animation: claimPulse 1.3s ease-in-out infinite
}

.chest-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px
}

.chest-item {
    position: relative;
    padding: 14px 10px;
    background: #090c17;
    border: 1px solid rgba(255, 255, 255, .08);
    color: inherit;
    display: grid;
    gap: 6px;
    text-align: center;
    cursor: pointer;
    overflow: hidden
}

.chest-item:disabled {
    cursor: default;
    opacity: .55
}

.chest-item.unlocked:not(.claimed) {
    opacity: 1;
    animation: chestPulse 1.7s ease-in-out infinite
}

.chest-icon {
    font-size: 28px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .2))
}

.chest-item em {
    font-style: normal;
    color: #9eabc8;
    font-size: 12px
}

.chest-item.opening .chest-icon {
    animation: chestOpen .45s ease-out
}

.rarity-common {
    --rarity: #9ca8bd
}

.rarity-rare {
    --rarity: #55b6ff
}

.rarity-epic {
    --rarity: #b36dff
}

.rarity-legendary {
    --rarity: #ffc861
}

.rarity-mythic {
    --rarity: #ff6ca8
}

.chest-item,
.shop-item {
    border-color: color-mix(in srgb, var(--rarity, #777) 30%, transparent)
}

.chest-item.unlocked:after,
.shop-item:hover:after {
    content: '';
    position: absolute;
    inset: -50% auto auto -30%;
    width: 60px;
    height: 190%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent);
    transform: rotate(18deg);
    animation: shine 2.8s linear infinite;
    pointer-events: none
}

.achievement-grid {
    display: grid;
    gap: 9px
}

.achievement-item {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 11px;
    background: #090c17;
    border: 1px solid rgba(255, 255, 255, .06);
    opacity: .48
}

.achievement-item.unlocked {
    opacity: 1;
    border-color: rgba(248, 196, 90, .26)
}

.achievement-item>span {
    font-size: 24px
}

.achievement-item b,
.achievement-item small {
    display: block
}

.achievement-item small {
    color: #96a4c2
}

.achievement-item i {
    font-style: normal;
    color: #f3c96d;
    font-size: 12px
}

.shop-copy em {
    display: inline-block;
    margin-top: 4px;
    font-style: normal;
    font-size: 10px;
    color: var(--rarity, #9ca8bd)
}

.shop-item {
    position: relative;
    overflow: hidden
}

.pending {
    background: linear-gradient(180deg, rgba(53, 60, 84, .45), rgba(12, 15, 27, .95));
    border-style: dashed !important
}

.reward-burst-particle {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    font-style: normal;
    color: #dff8ff;
    text-shadow: 0 0 10px #8fdcff;
    animation: burstParticle 1s ease-out forwards
}

.frame-void {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 0 0 2px rgba(116, 69, 255, .34), 0 0 35px rgba(86, 45, 255, .2), inset 0 0 30px rgba(70, 28, 130, .12) !important
}

.sword-void .pk-sword {
    background: linear-gradient(90deg, #6c4a99, #f1d8ff 45%, #8e5cff 55%, #2c174e);
    box-shadow: 0 0 10px #b06cff, 0 0 26px rgba(126, 64, 255, .8)
}

.armor-royal .pk-torso,
.armor-royal .pk-shoulder,
.armor-royal .pk-arm {
    background: linear-gradient(180deg, #9c7333, #45301c);
    border-color: #d9b15d
}

.armor-royal .pk-chest {
    background: #e3c171
}

.hair-cyan .pk-hair-back,
.hair-cyan .pk-hair-front {
    background: #52c9df
}

.aura-void .char-aura {
    background: radial-gradient(circle, rgba(127, 66, 255, .28), rgba(50, 18, 100, .18) 48%, transparent 70%);
    border-color: rgba(160, 92, 255, .5);
    box-shadow: 0 0 45px rgba(111, 56, 255, .25)
}

.aura-void .char-runes i {
    background: #ba80ff;
    box-shadow: 0 0 14px #ba80ff
}

.color-gold .pixel-label,
.color-gold .text-link,
.color-gold .rank-score {
    color: #f3c86f
}

.pet-flame .pet-orb {
    opacity: 1
}

.pet-flame .pet-orb:before {
    background: radial-gradient(circle at 50% 70%, #fff, #72dcff 34%, #2879ff 68%, transparent 70%);
    clip-path: polygon(50% 0, 72% 33%, 100% 66%, 72% 100%, 28% 100%, 0 66%, 25% 36%);
    border-radius: 0;
    animation: campFlame .7s ease-in-out infinite alternate
}

.banner-sunset {
    background-image: linear-gradient(180deg, rgba(87, 29, 75, .18), rgba(255, 115, 70, .08))
}

.banner-moon {
    background-image: radial-gradient(circle at 84% 16%, rgba(232, 239, 255, .16), transparent 16%), linear-gradient(180deg, rgba(32, 38, 87, .18), rgba(16, 20, 43, .05))
}

@keyframes moonBob {
    50% {
        transform: translateY(5px)
    }
}

@keyframes campFlame {
    to {
        transform: scaleX(.87) translateY(-3px)
    }
}

@keyframes emberRise {
    0% {
        transform: translate(0, 0);
        opacity: 0
    }

    20% {
        opacity: 1
    }

    100% {
        transform: translate(12px, -85px);
        opacity: 0
    }
}

@keyframes claimPulse {
    50% {
        box-shadow: 0 0 18px rgba(90, 175, 255, .25)
    }
}

@keyframes chestPulse {
    50% {
        transform: translateY(-4px);
        box-shadow: 0 0 22px color-mix(in srgb, var(--rarity) 30%, transparent)
    }
}

@keyframes chestOpen {
    50% {
        transform: scale(1.45) rotate(-7deg)
    }
}

@keyframes burstParticle {
    to {
        transform: translate(var(--dx), var(--dy)) scale(.2) rotate(180deg);
        opacity: 0
    }
}

@media(max-width:1100px) {
    .chest-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:700px) {
    .chest-grid {
        grid-template-columns: 1fr 1fr
    }

    .mission-item {
        grid-template-columns: 38px 1fr
    }

    .mission-item button {
        grid-column: 1/-1
    }

    .camp-scene {
        min-height: 260px
    }
}

.ranking-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px
}

.ranking-tabs button {
    padding: 11px 13px;
    background: #0a0d19;
    border: 1px solid rgba(255, 255, 255, .07);
    color: #94a3c4;
    cursor: pointer;
    font-weight: 700
}

.ranking-tabs button.active {
    color: #fff;
    border-color: rgba(100, 200, 255, .38);
    box-shadow: inset 0 -3px 0 var(--cyan)
}

.profile-achievements {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px
}

.profile-achievement {
    padding: 14px;
    background: #0a0d19;
    border: 1px solid rgba(248, 196, 90, .18);
    display: flex;
    gap: 10px;
    align-items: center
}

.profile-achievement>span {
    font-size: 28px
}

.profile-achievement b,
.profile-achievement small {
    display: block
}

.profile-achievement small {
    color: #9ba9c7
}

.empty-showcase {
    padding: 22px;
    text-align: center;
    background: #0a0d19;
    color: #8f9dbc;
    border: 1px dashed rgba(255, 255, 255, .1)
}

@media(max-width:900px) {
    .profile-achievements {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:620px) {
    .profile-achievements {
        grid-template-columns: 1fr
    }
}

.topbar {
    grid-template-columns: auto 1fr auto auto auto auto
}