* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

:root {
    --bg-main: #08090d;
    --bg-panel: rgba(14, 16, 23, 0.82);

    --text-main: #f5f5f5;
    --text-soft: #a9abb5;
    --text-muted: #6f727d;

    --vareyon-red: #ff2438;
    --vareyon-blue: #18bfff;

    --border-soft: rgba(255, 255, 255, 0.09);

    --common: #a6a6a6;
    --uncommon: #55aaff;
    --rare: #59e87c;
    --epic: #b36cff;
    --legendary: #ffb13b;
}


/* =========================================================
   BODY
   ========================================================= */

body {
    margin: 0;

    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;

    color: var(--text-main);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(
            circle at 0% 18%,
            rgba(180, 5, 25, 0.25) 0%,
            rgba(120, 0, 18, 0.08) 28%,
            transparent 52%
        ),
        radial-gradient(
            circle at 100% 18%,
            rgba(0, 132, 255, 0.23) 0%,
            rgba(0, 76, 140, 0.08) 28%,
            transparent 52%
        ),
        linear-gradient(
            135deg,
            #0d090c 0%,
            #08090d 45%,
            #080b12 63%,
            #06101a 100%
        );

    background-attachment: fixed;
}


/* =========================================================
   HINTERGRUND GLOW
   ========================================================= */

.background-glow {
    position: fixed;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(130px);

    opacity: 0.12;

    pointer-events: none;

    z-index: -1;
}

.background-glow-red {
    left: -220px;
    top: 20%;

    background: var(--vareyon-red);
}

.background-glow-blue {
    right: -220px;
    top: 18%;

    background: var(--vareyon-blue);
}


/* =========================================================
   HEADER
   ========================================================= */

#main-header {
    width: 100%;

    text-align: center;

    padding: 48px 20px 28px;
}

.header-text {
    margin: 0 auto;
}

.header-text h1 {
    margin: 0;

    font-size: 38px;

    font-weight: 800;

    letter-spacing: 6px;
}

.header-text p {
    margin: 8px 0 0;

    color: var(--text-soft);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 5px;

    text-transform: uppercase;
}


/* =========================================================
   MAIN
   ========================================================= */

main {
    display: block;

    width: 100%;

    margin: 0 auto;

    padding: 10px 36px 90px;
}


/* =========================================================
   STARTSCREEN
   ========================================================= */

#start-screen {
    width: 100%;

    min-height: calc(100vh - 150px);

    display: grid;

    place-items: center;

    margin: 0 auto;

    padding: 20px 20px 80px;
}


/* =========================================================
   STARTSCREEN BOX
   ========================================================= */

.start-screen-content {
    width: min(680px, 100%);

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    text-align: center;

    padding: 58px 58px 56px;

    border-radius: 24px;

    border: 1px solid transparent;

    background:
        linear-gradient(
            rgba(10, 11, 16, 0.94),
            rgba(10, 11, 16, 0.94)
        ) padding-box,

        linear-gradient(
            115deg,
            rgba(255, 36, 56, 0.42),
            rgba(255, 255, 255, 0.06) 45%,
            rgba(24, 191, 255, 0.42)
        ) border-box;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        -30px 0 90px rgba(255, 36, 56, 0.035),
        30px 0 90px rgba(24, 191, 255, 0.035);

    backdrop-filter: blur(18px);
}

.start-screen-content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;
    right: 15%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--vareyon-red),
            rgba(255, 255, 255, 0.5),
            var(--vareyon-blue),
            transparent
        );

    opacity: 0.75;
}


/* =========================================================
   START LOGO
   ========================================================= */

.start-main-logo {
    width: min(540px, 96%);
    height: auto;

    display: block;

    margin: 0 auto 24px;

    transform: scale(1.42);
    transform-origin: center center;

    opacity: 0.86;

    filter:
        drop-shadow(-8px 0 18px rgba(255, 36, 56, 0.06))
        drop-shadow(8px 0 18px rgba(24, 191, 255, 0.06));
}


/* =========================================================
   AKZENTLINIE
   ========================================================= */

.start-title-line {
    width: 110px;
    height: 2px;

    margin: 4px auto 30px;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            var(--vareyon-red),
            var(--vareyon-blue)
        );

    box-shadow:
        -10px 0 18px rgba(255, 36, 56, 0.18),
        10px 0 18px rgba(24, 191, 255, 0.18);
}


/* =========================================================
   USERNAME
   ========================================================= */

.username-search {
    width: 100%;

    display: flex;

    justify-content: center;

    gap: 12px;
}

#username-input {
    flex: 1;

    min-width: 0;

    height: 52px;

    padding: 0 18px;

    color: white;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    border-radius: 11px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(255, 255, 255, 0.045);
}

#username-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

#username-input:focus {
    border-color: rgba(24, 191, 255, 0.48);

    box-shadow:
        -5px 0 18px rgba(255, 36, 56, 0.05),
        5px 0 18px rgba(24, 191, 255, 0.11);
}


/* =========================================================
   LOAD BUTTON
   ========================================================= */

#load-user-button {
    min-width: 180px;

    height: 52px;

    padding: 0 23px;

    border: 0;

    border-radius: 11px;

    cursor: pointer;

    color: white;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    background:
        linear-gradient(
            105deg,
            rgba(198, 14, 34, 0.95),
            rgba(21, 104, 162, 0.95)
        );

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

#load-user-button:hover {
    transform: translateY(-2px);

    filter: brightness(1.12);
}

#load-user-button:disabled {
    opacity: 0.6;

    cursor: wait;
}

#username-error {
    min-height: 22px;

    margin: 15px 0 0;

    color: #ff6070;

    font-size: 13px;
}


/* =========================================================
   COLLECTION
   ========================================================= */

#collection-screen {
    width: min(1500px, 100%);

    margin: 0 auto;
}


/* =========================================================
   COLLECTION HEADER
   ========================================================= */

.collection-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 35px;

    margin-bottom: 40px;
}


/* LINKER BRANDING-BEREICH */

.collection-title-block {
    display: flex;

    align-items: center;

    gap: 18px;
}

.collection-symbol {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    object-fit: contain;

    opacity: 0.58;

    filter:
        drop-shadow(-4px 0 11px rgba(255, 36, 56, 0.08))
        drop-shadow(4px 0 11px rgba(24, 191, 255, 0.08));
}

.collection-label {
    margin: 0 0 8px;

    color: var(--text-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 4px;
}

#collection-username {
    margin: 0;

    font-size: clamp(27px, 4vw, 38px);

    line-height: 1.15;
}


/* =========================================================
   COLLECTION RECHTS
   ========================================================= */

.collection-header-actions {
    display: flex;

    align-items: center;

    gap: 30px;
}

.collection-signature {
    width: 145px;
    height: auto;

    display: block;

    opacity: 0.34;

    filter:
        drop-shadow(-5px 0 12px rgba(255, 36, 56, 0.04))
        drop-shadow(5px 0 12px rgba(24, 191, 255, 0.04));
}


/* =========================================================
   ZURÜCK
   ========================================================= */

#change-user-button {
    min-height: 42px;

    padding: 0 18px;

    cursor: pointer;

    color: var(--text-soft);

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    border: 1px solid rgba(255, 255, 255, 0.11);

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.035);
}

#change-user-button:hover {
    color: white;

    border-color: rgba(24, 191, 255, 0.38);
}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress-section {
    margin-bottom: 42px;

    padding: 28px 30px;

    border: 1px solid var(--border-soft);

    border-radius: 18px;

    background:
        linear-gradient(
            120deg,
            rgba(255, 36, 56, 0.035),
            rgba(255, 255, 255, 0.025) 45%,
            rgba(24, 191, 255, 0.035)
        );
}

.progress-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 20px;

    margin-bottom: 20px;
}

.progress-label {
    margin: 0 0 8px;

    color: var(--text-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;
}

#collection-progress {
    margin: 0;

    font-size: 20px;

    font-weight: 700;
}

#collection-percentage {
    margin: 0;

    font-size: 25px;

    font-weight: 800;

    background:
        linear-gradient(
            90deg,
            #ff4352,
            #29c6ff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


/* =========================================================
   PROGRESS BAR
   ========================================================= */

.progress-bar-wrapper {
    margin-bottom: 27px;
}

#collection-progress-bar {
    width: 100%;

    height: 9px;

    appearance: none;

    border: 0;

    border-radius: 50px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.07);
}

#collection-progress-bar::-webkit-progress-bar {
    background: rgba(255, 255, 255, 0.07);

    border-radius: 50px;
}

#collection-progress-bar::-webkit-progress-value {
    background:
        linear-gradient(
            90deg,
            var(--vareyon-red),
            #885172,
            var(--vareyon-blue)
        );

    border-radius: 50px;
}

#collection-progress-bar::-moz-progress-bar {
    background:
        linear-gradient(
            90deg,
            var(--vareyon-red),
            var(--vareyon-blue)
        );

    border-radius: 50px;
}


/* =========================================================
   RARITY PROGRESS
   ========================================================= */

#rarity-progress {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 10px;
}

.rarity-progress-item {
    min-height: 64px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 5px;

    padding: 12px 15px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.025);

    color: var(--text-soft);

    font-size: 13px;
}

.rarity-progress-name {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}

.rarity-progress-item span:last-child {
    color: white;

    font-weight: 700;
}

.rarity-progress-common .rarity-progress-name {
    color: var(--common);
}

.rarity-progress-uncommon .rarity-progress-name {
    color: var(--uncommon);
}

.rarity-progress-rare .rarity-progress-name {
    color: var(--rare);
}

.rarity-progress-epic .rarity-progress-name {
    color: var(--epic);
}

.rarity-progress-legendary .rarity-progress-name {
    color: var(--legendary);
}


/* =========================================================
   TOOLS
   ========================================================= */

.collection-tools {
    display: grid;

    grid-template-columns: 1.6fr 0.9fr 1fr;

    gap: 28px;

    align-items: end;

    margin-bottom: 55px;

    padding: 25px 28px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.018);
}

.tool-label {
    margin: 0 0 11px;

    color: var(--text-muted);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;
}

.filter-group {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.rarity-filter,
.ownership-filter {
    min-height: 38px;

    padding: 0 15px;

    cursor: pointer;

    color: var(--text-soft);

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.025);
}

.rarity-filter:hover,
.ownership-filter:hover {
    color: white;

    background: rgba(255, 255, 255, 0.05);
}

.rarity-filter.active,
.ownership-filter.active {
    color: white;

    border-color: transparent;

    background:
        linear-gradient(
            105deg,
            rgba(185, 14, 33, 0.88),
            rgba(22, 111, 169, 0.88)
        );
}


/* =========================================================
   SEARCH
   ========================================================= */

#soul-search {
    width: 100%;

    height: 40px;

    padding: 0 14px;

    color: white;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.028);
}

#soul-search::placeholder {
    color: rgba(255, 255, 255, 0.32);
}

#soul-search:focus {
    border-color: rgba(24, 191, 255, 0.42);
}


/* =========================================================
   SOUL GRID
   ========================================================= */

#soul-grid {
    width: 100%;

    max-width: 1500px;

    margin: 0 auto;
}

.rarity-section {
    margin-bottom: 90px;
}


/* =========================================================
   NEUE RARITY-TYPOGRAFIE
   ========================================================= */

.rarity-title {
    margin: 0 0 28px;

    padding-bottom: 14px;

    font-family:
        "Barlow Condensed",
        "Arial Narrow",
        sans-serif;

    font-size: 31px;

    font-weight: 800;

    font-style: italic;

    letter-spacing: 4px;

    line-height: 1;

    text-transform: uppercase;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    text-shadow:
        0 0 16px currentColor;
}

.rarity-common .rarity-title {
    color: var(--common);
}

.rarity-uncommon .rarity-title {
    color: var(--uncommon);
}

.rarity-rare .rarity-title {
    color: var(--rare);
}

.rarity-epic .rarity-title {
    color: var(--epic);
}

.rarity-legendary .rarity-title {
    color: var(--legendary);
}


/* =========================================================
   GRID
   ========================================================= */

.rarity-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(185px, 1fr));

    gap: 24px;
}


/* =========================================================
   SOUL KARTE – BASIS
   ========================================================= */

.soul-card {
    position: relative;

    overflow: hidden;

    padding: 10px;

    text-align: center;

    cursor: pointer;

    border: 1px solid transparent;

    border-radius: 14px;

    background:
        linear-gradient(
            rgba(15, 16, 22, 0.94),
            rgba(15, 16, 22, 0.94)
        ) padding-box,

        linear-gradient(
            145deg,
            rgba(255, 36, 56, 0.19),
            rgba(255, 255, 255, 0.04) 46%,
            rgba(24, 191, 255, 0.19)
        ) border-box;

    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        filter 0.24s ease;
}


/* =========================================================
   GEZOGENE / FREIGESCHALTETE SOUL
   ========================================================= */

.soul-card.owned {
    border: 2px solid transparent;

    padding: 9px;

    background:
        linear-gradient(
            rgba(14, 15, 21, 0.97),
            rgba(14, 15, 21, 0.97)
        ) padding-box,

        linear-gradient(
            135deg,
            #ff253a 0%,
            #ff4152 18%,
            rgba(255,255,255,0.42) 48%,
            #25c7ff 76%,
            #00aaff 100%
        ) border-box;

    box-shadow:
        -7px 0 18px rgba(255, 36, 56, 0.16),
        7px 0 18px rgba(24, 191, 255, 0.16),
        0 10px 30px rgba(0, 0, 0, 0.30);
}


/* zusätzlicher subtiler Glow */

.soul-card.owned::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    box-shadow:
        inset 1px 0 8px rgba(255, 36, 56, 0.14),
        inset -1px 0 8px rgba(24, 191, 255, 0.14);
}


.soul-card.owned:hover {
    transform:
        translateY(-7px)
        scale(1.015);

    box-shadow:
        -12px 4px 30px rgba(255, 36, 56, 0.25),
        12px 4px 30px rgba(24, 191, 255, 0.25),
        0 18px 38px rgba(0, 0, 0, 0.42);

    filter:
        brightness(1.07);
}


/* =========================================================
   NORMALE HOVER
   ========================================================= */

.soul-card:not(.locked):not(.owned):hover {
    transform: translateY(-6px);
}


/* =========================================================
   IMAGE
   ========================================================= */

.soul-image-wrapper {
    position: relative;
}

.soul-card img {
    width: 100%;

    height: auto;

    display: block;

    border-radius: 9px;
}


/* =========================================================
   QUANTITY
   ========================================================= */

.soul-quantity {
    position: absolute;

    right: 9px;
    top: 9px;

    z-index: 2;

    min-width: 34px;

    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0 8px;

    font-size: 12px;

    font-weight: 800;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 7px;

    background: rgba(5, 7, 11, 0.82);
}


/* =========================================================
   NAME
   ========================================================= */

.soul-card h3 {
    margin: 14px 0 6px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.8px;
}

.soul-card p {
    margin: 0 0 5px;

    color: var(--text-soft);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   LOCKED
   ========================================================= */

.soul-card.locked {
    cursor: default;

    opacity: 0.58;
}

.soul-card.locked:hover {
    transform: none;

    filter: none;
}

.locked-soul {
    width: 100%;

    aspect-ratio: 1 / 1.35;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid transparent;

    border-radius: 9px;

    background:
        linear-gradient(
            rgba(18, 19, 25, 0.96),
            rgba(12, 13, 18, 0.96)
        ) padding-box,

        linear-gradient(
            145deg,
            rgba(255, 36, 56, 0.20),
            rgba(255, 255, 255, 0.025) 48%,
            rgba(24, 191, 255, 0.20)
        ) border-box;
}

.locked-soul span {
    font-size: 68px;

    font-weight: 900;

    color: rgba(255, 255, 255, 0.17);

    user-select: none;
}

.soul-card.locked h3 {
    opacity: 0.4;
}

.soul-card.locked p {
    opacity: 0.32;
}


/* =========================================================
   MODAL
   ========================================================= */

#soul-modal {
    display: none;

    position: fixed;

    inset: 0;

    z-index: 9999;

    align-items: center;
    justify-content: center;

    padding: 35px;

    cursor: pointer;

    background: rgba(3, 4, 7, 0.9);

    backdrop-filter: blur(14px);
}

#soul-modal.active {
    display: flex;
}

#soul-modal img {
    max-width: 90vw;

    max-height: 88vh;

    object-fit: contain;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    padding: 25px 20px 50px;

    text-align: center;

    opacity: 0.32;
}

footer p {
    margin: 0;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

    color: var(--text-soft);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .collection-tools {
        grid-template-columns: 1fr 1fr;
    }

    .search-tool-section {
        grid-column: 1 / -1;
    }

    #rarity-progress {
        grid-template-columns: repeat(3, 1fr);
    }

    .collection-signature {
        width: 110px;

        opacity: 0.28;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    #main-header {
        padding: 26px 15px 14px;
    }

    .header-text h1 {
        font-size: 24px;

        letter-spacing: 3px;
    }

    .header-text p {
        font-size: 8px;

        letter-spacing: 3px;
    }

    main {
        padding: 8px 14px 60px;
    }

    #start-screen {
        width: 100%;

        padding: 8px 0 45px;
    }

    .start-screen-content {
        width: 100%;

        padding: 40px 20px 36px;

        border-radius: 18px;
    }

    .start-main-logo {
        width: min(390px, 96%);

        margin-bottom: 20px;

        transform: scale(1.25);
    }

    .start-title-line {
        margin-bottom: 24px;
    }

    .username-search {
        flex-direction: column;
    }

    #username-input,
    #load-user-button {
        width: 100%;

        min-width: 0;
    }


    /* COLLECTION HEADER MOBILE */

    .collection-header {
        flex-direction: column;

        align-items: stretch;

        gap: 22px;

        margin-bottom: 28px;
    }

    .collection-title-block {
        gap: 12px;
    }

    .collection-symbol {
        width: 38px;
        height: 38px;
    }

    .collection-header-actions {
        width: 100%;

        justify-content: space-between;

        gap: 20px;
    }

    .collection-signature {
        width: 105px;

        opacity: 0.30;
    }


    .progress-section {
        padding: 22px 17px;
    }

    #rarity-progress {
        grid-template-columns: repeat(2, 1fr);
    }

    .collection-tools {
        grid-template-columns: 1fr;

        gap: 24px;

        padding: 20px 17px;
    }

    .search-tool-section {
        grid-column: auto;
    }

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

        gap: 12px;
    }

    .rarity-title {
        font-size: 25px;

        letter-spacing: 2.5px;
    }

    .soul-card {
        padding: 7px;
    }

    .soul-card.owned {
        padding: 6px;
    }

    .soul-card h3 {
        font-size: 11px;
    }

    .locked-soul span {
        font-size: 48px;
    }
}