:root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #f6f7fb;
    background: #0b0d14;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 0%, rgba(109, 82, 255, .18), transparent 30rem),
        #0b0d14;
}

a { color: inherit; }

.community-header {
    width: min(1120px, calc(100% - 36px));
    min-height: 78px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.community-header > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.community-header strong,
.community-header span {
    display: block;
}

.community-header span {
    color: #929cad;
    font-size: .84rem;
}

.pixel-logo {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: #7657ff;
    border: 3px solid #d8d2ff;
    box-shadow: 4px 4px 0 #2e245c;
    font-family: "Courier New", monospace;
    font-weight: 950;
}

.viewer-search {
    display: flex;
    gap: 8px;
}

.viewer-search input {
    width: min(260px, 45vw);
    color: white;
    background: #121621;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;
    padding: 10px 12px;
}

.viewer-search button {
    border: 0;
    border-radius: 9px;
    padding: 10px 14px;
    color: white;
    background: #7657ff;
    font-weight: 800;
    cursor: pointer;
}

.community-shell {
    width: min(1120px, calc(100% - 36px));
    margin: 0 auto;
    padding: 34px 0 70px;
}

.community-hero {
    max-width: 720px;
    padding: 28px 0 46px;
}

.community-hero h1,
.profile-hero h1 {
    margin: 8px 0 12px;
    font-size: clamp(2.1rem, 6vw, 4.2rem);
    line-height: 1;
}

.community-hero p {
    color: #aab2c1;
    line-height: 1.6;
}

.eyebrow {
    color: #9f88ff;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .13em;
}

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

.community-card {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(18, 22, 33, .90);
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
    padding: 22px;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.card-head h2 {
    margin: 5px 0 0;
}

.pixel-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: #262039;
    border: 2px solid #7557ae;
    box-shadow: 3px 3px 0 #100e18;
}

.ranking-list {
    display: grid;
    gap: 7px;
}

.ranking-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 9px 11px;
    text-decoration: none;
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    border: 1px solid transparent;
}

.ranking-row:hover {
    border-color: rgba(159,136,255,.35);
    background: rgba(118,87,255,.08);
}

.rank {
    color: #9f88ff;
    font-family: "Courier New", monospace;
    font-weight: 900;
}

.viewer-name {
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-stat {
    font-weight: 850;
}

.ranking-stat.wide {
    grid-column: span 2;
}

.ranking-sub {
    color: #8f98aa;
    font-size: .82rem;
}

.back-link {
    color: #c6b8ff;
    text-decoration: none;
    font-weight: 800;
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 18px;
}

.pixel-avatar {
    position: relative;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    background: #7657ff;
    border: 5px solid #1b172a;
    box-shadow:
        0 -16px 0 -8px #d6ae89,
        8px 8px 0 -4px #4937ac,
        -8px 8px 0 -4px #4937ac,
        6px 6px 0 #2e245c;
}

.pixel-avatar::before {
    content: "";
    position: absolute;
    width: 38px;
    height: 22px;
    left: 12px;
    top: -17px;
    background: #47388f;
    border: 5px solid #1b172a;
}

.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-stats span {
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(255,255,255,.055);
    color: #b8c0cf;
    font-size: .82rem;
}

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

.gear-card {
    position: relative;
    min-height: 210px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-radius: 13px;
    background: #0d111a;
    border: 1px solid rgba(255,255,255,.08);
}

.gear-card.equipped {
    border-color: rgba(109,229,180,.45);
    box-shadow: inset 0 0 0 1px rgba(109,229,180,.12);
}

.gear-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.rarity {
    font-size: .65rem;
    font-weight: 950;
    letter-spacing: .08em;
}

.rarity[data-rarity="COMMON"] { color: #c3c7cf; }
.rarity[data-rarity="RARE"] { color: #74a9ff; }
.rarity[data-rarity="EPIC"] { color: #b983ff; }
.rarity[data-rarity="LEGENDARY"] { color: #ffca67; }

.equipped-badge {
    color: #6de5b4;
    font-size: .65rem;
    font-weight: 950;
}

.weapon-pixel {
    height: 64px;
    display: grid;
    place-items: center;
    font-size: 38px;
    image-rendering: pixelated;
    filter: drop-shadow(4px 4px 0 rgba(0,0,0,.35));
}

.gear-code {
    color: #707a8e;
    font-size: .72rem;
}

.gear-stats {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.gear-stats span {
    padding: 5px 6px;
    background: rgba(255,255,255,.045);
    border-radius: 6px;
    color: #aeb7c7;
    font-size: .72rem;
}

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

.inventory-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    background: #0d111a;
    border: 1px solid rgba(255,255,255,.07);
}

.item-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #b9a6ff;
    background: #201a35;
    border: 2px solid #503f83;
    box-shadow: 3px 3px 0 #080a0f;
}

.inventory-card p {
    margin: 4px 0;
    color: #8f98aa;
    font-size: .82rem;
}

.inventory-card code {
    color: #6f7990;
    font-size: .72rem;
}

.quantity {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
}

.empty {
    color: #727c8f;
}

@media (max-width: 850px) {
    .leaderboard-grid,
    .gear-grid {
        grid-template-columns: 1fr;
    }

    .community-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px 0;
    }

    .viewer-search,
    .viewer-search input {
        width: 100%;
    }

    .ranking-row {
        grid-template-columns: 42px minmax(0, 1fr) auto;
    }

    .ranking-sub {
        display: none;
    }

    .profile-hero {
        align-items: flex-start;
    }
}


.brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.community-nav {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.community-nav a {
    color: #aeb6c7;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: .85rem;
    font-weight: 750;
}

.community-nav a:hover,
.community-nav a.active {
    color: #fff;
    background: rgba(118, 87, 255, .12);
}

.viewer-auth {
    display: flex;
    align-items: center;
    gap: 10px;
}

.viewer-auth-signed {
    display: flex;
    align-items: center;
    gap: 10px;
}

.viewer-logout {
    color: #8f98aa;
    text-decoration: none;
    font-size: .8rem;
}

.community-button {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 9px;
    padding: 9px 12px;
    color: #e8ebf2;
    background: rgba(255, 255, 255, .055);
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.community-button:hover {
    background: rgba(255, 255, 255, .09);
}

.community-button.primary {
    border-color: rgba(118, 87, 255, .55);
    background: #7657ff;
    color: white;
}

.community-button.danger {
    border-color: rgba(255, 98, 120, .25);
    color: #ff8c9d;
}

.community-button.full {
    width: 100%;
}

.coin-pill {
    padding: 7px 9px;
    border-radius: 999px;
    color: #ffd36a !important;
    background: rgba(255, 203, 85, .08);
    font-size: .78rem !important;
    font-weight: 850;
}

.action-message,
.login-hint {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid rgba(109, 229, 180, .2);
    color: #c8f7e3;
    background: rgba(109, 229, 180, .07);
}

.quick-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}

.quick-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 14px;
    text-decoration: none;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(18, 22, 33, .82);
}

.quick-links a:hover {
    border-color: rgba(118, 87, 255, .35);
    transform: translateY(-1px);
}

.quick-links > a > span {
    font-size: 1.7rem;
}

.quick-links strong,
.quick-links small {
    display: block;
}

.quick-links small {
    margin-top: 4px;
    color: #7f899c;
}

.page-title {
    max-width: 760px;
    margin-bottom: 26px;
}

.page-title h1 {
    margin: 7px 0 10px;
    font-size: clamp(2rem, 5vw, 3.6rem);
}

.page-title p {
    color: #aab2c1;
    line-height: 1.6;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(420px, 1.1fr) minmax(0, .9fr);
    gap: 18px;
    margin-bottom: 18px;
}

.character-card {
    overflow: hidden;
}

.character-stage {
    position: relative;
    min-height: 360px;
    margin-top: 12px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 42%, rgba(118,87,255,.14), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
    border: 1px solid rgba(255,255,255,.05);
}

.character-pixel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92px;
    height: 150px;
    transform: translate(-50%, -44%);
    image-rendering: pixelated;
}

.character-pixel .pixel-head {
    position: absolute;
    left: 28px;
    top: 0;
    width: 38px;
    height: 38px;
    background: #d4a985;
    border: 5px solid #171522;
    box-shadow: inset 0 8px 0 #4d3c86;
}

.character-pixel .pixel-body {
    position: absolute;
    left: 21px;
    top: 37px;
    width: 52px;
    height: 66px;
    background: #7657ff;
    border: 5px solid #171522;
    box-shadow: inset 0 -12px 0 #4c3cb1;
}

.character-pixel .pixel-arm,
.character-pixel .pixel-leg {
    position: absolute;
    background: #6550d0;
    border: 5px solid #171522;
}

.character-pixel .pixel-arm {
    width: 20px;
    height: 64px;
    top: 42px;
}

.character-pixel .pixel-arm.left { left: 5px; transform: rotate(7deg); }
.character-pixel .pixel-arm.right { right: 5px; transform: rotate(-7deg); }

.character-pixel .pixel-leg {
    width: 22px;
    height: 55px;
    top: 98px;
}

.character-pixel .pixel-leg.left { left: 23px; }
.character-pixel .pixel-leg.right { right: 23px; }

.character-slot {
    position: absolute;
    width: 150px;
    min-height: 48px;
    padding: 7px 9px;
    border-radius: 9px;
    background: rgba(10, 13, 20, .82);
    border: 1px solid rgba(255,255,255,.08);
}

.character-slot span,
.character-slot strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.character-slot span {
    color: #7d8799;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.character-slot strong {
    margin-top: 3px;
    font-size: .72rem;
}

.slot-helmet { top: 18px; left: 50%; transform: translateX(-50%); }
.slot-weapon { left: 15px; top: 92px; }
.slot-chest { right: 15px; top: 92px; }
.slot-gloves { left: 15px; top: 165px; }
.slot-ring { right: 15px; top: 165px; }
.slot-boots { left: 15px; bottom: 20px; }
.slot-amulet { right: 15px; bottom: 20px; }

.combat-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.combat-stat-grid > div {
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
}

.combat-stat-grid span,
.combat-stat-grid strong {
    display: block;
}

.combat-stat-grid span {
    color: #7d8799;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.combat-stat-grid strong {
    margin-top: 4px;
    font-size: 1.15rem;
}

.ownership-note {
    margin-top: 16px;
    color: #9da7b8;
    line-height: 1.5;
}

.quest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.quest-card {
    position: relative;
    overflow: hidden;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.07);
    background: #0d111a;
}

.quest-card.completed {
    border-color: rgba(109,229,180,.26);
    background: rgba(109,229,180,.05);
}

.quest-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.quest-head span {
    color: #9f88ff;
    font-weight: 900;
}

.quest-card p {
    min-height: 40px;
    color: #8f98aa;
    font-size: .82rem;
    line-height: 1.45;
}

.quest-card small {
    color: #c7cddd;
}

.quest-progress {
    height: 5px;
    margin-top: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
}

.quest-progress span {
    display: block;
    height: 100%;
    background: #7657ff;
}

.slot-badge {
    display: inline-block !important;
    margin-left: 5px;
    color: #8f98aa !important;
    font-size: .62rem !important;
    font-weight: 850;
    letter-spacing: .05em;
}

.gear-description {
    margin: 0;
    min-height: 34px;
    color: #7f899b;
    font-size: .76rem;
    line-height: 1.4;
}

.gear-actions,
.inventory-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.gear-actions form,
.inventory-actions form {
    margin: 0;
}

.item-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
}

.inventory-actions {
    grid-column: 2 / -1;
}

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

.shop-card,
.catalog-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 245px;
    padding: 15px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(18, 22, 33, .9);
}

.shop-card p,
.catalog-item p {
    color: #8f98aa;
    font-size: .8rem;
    line-height: 1.45;
}

.shop-card code,
.catalog-item code {
    color: #737e92;
    font-size: .72rem;
}

.shop-icon {
    height: 48px;
    display: grid;
    place-items: center;
    font-size: 2rem;
}

.shop-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: auto;
    padding: 9px 10px;
    border-radius: 9px;
    background: rgba(255,203,85,.055);
}

.shop-price span {
    color: #9a8859;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.shop-price strong {
    color: #ffd36a;
    font-size: 1.1rem;
}

.catalog-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.catalog-stats span {
    padding: 4px 6px;
    border-radius: 6px;
    color: #aeb7c7;
    background: rgba(255,255,255,.045);
    font-size: .68rem;
}

.catalog-item small {
    margin-top: auto;
    color: #687386;
}

.loot-pool-list {
    display: grid;
    gap: 18px;
}

.loot-pool-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.loot-pool-head h2 {
    margin: 8px 0 0;
}

.loot-pool-head > span {
    color: #7f899b;
    font-size: .82rem;
}

.difficulty-pill {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 999px;
    color: #c9adff;
    background: rgba(151, 99, 255, .14);
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.loot-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.loot-item {
    display: grid;
    gap: 5px;
    padding: 10px;
    border-radius: 9px;
    background: #0d111a;
    border: 1px solid rgba(255,255,255,.055);
}

.loot-item strong {
    font-size: .78rem;
}

.loot-item small {
    color: #717c8f;
    font-size: .66rem;
}

@media (max-width: 1080px) {
    .community-header {
        flex-wrap: wrap;
        padding: 14px 0;
    }

    .community-nav {
        order: 3;
        width: 100%;
    }

    .shop-grid,
    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loot-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 850px) {
    .quick-links,
    .quest-grid {
        grid-template-columns: 1fr;
    }

    .viewer-auth {
        width: 100%;
    }

    .viewer-auth-signed {
        width: 100%;
        justify-content: space-between;
    }

    .character-stage {
        min-height: 430px;
    }

    .slot-weapon,
    .slot-chest,
    .slot-gloves,
    .slot-ring,
    .slot-boots,
    .slot-amulet {
        width: 130px;
    }

    .shop-grid,
    .catalog-grid,
    .loot-grid {
        grid-template-columns: 1fr;
    }
}


.button-link {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.auth-shell {
    display: grid;
    place-items: start center;
}

.login-card {
    width: min(460px, 100%);
}

.login-card h1,
.claim-card h2 {
    margin: 8px 0 10px;
}

.login-card p,
.claim-card p {
    color: #9ca6b8;
    line-height: 1.55;
}

.claim-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr);
    gap: 24px;
    margin-bottom: 18px;
    border-color: rgba(118, 87, 255, .28);
}

.claim-form {
    display: grid;
    gap: 12px;
}

.claim-form label {
    display: grid;
    gap: 6px;
    color: #b9c1d0;
    font-size: .8rem;
    font-weight: 800;
}

.claim-form input {
    width: 100%;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 9px;
    padding: 11px 12px;
    color: #fff;
    background: #0d111a;
    font: inherit;
}

.claim-form input:focus {
    outline: 2px solid rgba(118, 87, 255, .45);
    outline-offset: 1px;
}

.login-hint a {
    color: #d2c8ff;
    font-weight: 850;
}

@media (max-width: 850px) {
    .claim-card {
        grid-template-columns: 1fr;
    }
}