/* =========================================================
   HAVEN & HELL
   THE HAVEN GATEWAY
   MASTER VISUAL SYSTEM
========================================================= */

:root {

    --haven-blue: #42cfff;
    --haven-deep: #061b2d;

    --gold: #f5c76b;
    --gold-bright: #fff0b0;

    --hell-red: #ff3b22;
    --hell-dark: #2a0502;

    --void: #020305;
    --glass: rgba(8, 16, 25, 0.72);

    --text: #f7f4e9;
    --muted: #a9b4bd;

}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {

    margin: 0;
    width: 100%;
    min-height: 100%;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    background: var(--void);

    color: var(--text);

    overflow-x: hidden;
}

button {
    font: inherit;
}


/* =========================================================
   ATMOSPHERE
========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(50, 130, 180, 0.12),
            transparent 35%
        );

    z-index: 0;
}


.realm-glow {

    position: fixed;

    width: 55vw;
    height: 80vh;

    filter: blur(100px);

    opacity: .32;

    pointer-events: none;

    z-index: 0;
}

.haven-glow {

    left: -20vw;
    top: 10vh;

    background:
        radial-gradient(
            circle,
            rgba(0, 140, 255, .45),
            transparent 65%
        );
}

.hell-glow {

    right: -20vw;
    top: 10vh;

    background:
        radial-gradient(
            circle,
            rgba(255, 40, 10, .35),
            transparent 65%
        );
}


/* =========================================================
   STAR FIELD
========================================================= */

.stars {

    position: fixed;

    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            1px 1px at 20% 30%,
            rgba(255,255,255,.8),
            transparent
        ),
        radial-gradient(
            1px 1px at 70% 20%,
            rgba(255,255,255,.6),
            transparent
        ),
        radial-gradient(
            1px 1px at 40% 75%,
            rgba(255,255,255,.7),
            transparent
        ),
        radial-gradient(
            2px 2px at 80% 70%,
            rgba(255,255,255,.5),
            transparent
        );

    background-size:
        320px 320px,
        420px 420px,
        500px 500px,
        600px 600px;

    opacity: .6;

    z-index: 0;
}


/* =========================================================
   AWAKENING
========================================================= */

.portal {

    min-height: 100vh;

    display: flex;

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

    text-align: center;

    position: relative;

    z-index: 2;

    padding: 40px 20px;

    transition:
        opacity 1s ease,
        transform 1s ease;

}


.portal-content {

    width: min(700px, 100%);

    display: flex;

    flex-direction: column;

    align-items: center;

    animation: portalAppear 1.8s ease forwards;

}


/* =========================================================
   CREST
========================================================= */

.crest-ring {

    width: min(430px, 75vw);
    aspect-ratio: 1;

    position: relative;

    display: flex;

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

    margin-bottom: 10px;

}


.crest-ring::before {

    content: "";

    position: absolute;

    inset: 7%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,190,60,.12),
            transparent 65%
        );

    box-shadow:

        0 0 35px rgba(255,190,60,.18),
        0 0 100px rgba(40,170,255,.12);

}


#logo {

    position: relative;

    width: 82%;

    max-width: 430px;

    filter:
        drop-shadow(0 0 10px rgba(255,205,90,.75))
        drop-shadow(0 0 35px rgba(255,160,40,.25));

    animation:
        logoFloat 5s ease-in-out infinite,
        logoPulse 4s ease-in-out infinite;

    z-index: 3;
}


/* =========================================================
   RINGS
========================================================= */

.ring {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(245,199,107,.25);

    pointer-events: none;
}

.ring-one {

    inset: 3%;

    animation:
        rotateRing 30s linear infinite;

    border-top-color: rgba(66,207,255,.7);
}

.ring-two {

    inset: 10%;

    animation:
        rotateRingReverse 20s linear infinite;

    border-bottom-color: rgba(255,59,34,.7);
}


/* =========================================================
   TITLE
========================================================= */

.portal-title {

    margin-top: -20px;

    position: relative;

    z-index: 5;
}

.small-title {

    font-size: 11px;

    letter-spacing: 5px;

    color: var(--muted);

    margin-bottom: 8px;
}

.portal-title h1 {

    margin: 0;

    font-size:
        clamp(42px, 8vw, 78px);

    letter-spacing: 7px;

    font-weight: 600;

    text-shadow:
        0 0 15px rgba(255,210,110,.5),
        0 0 40px rgba(255,150,30,.18);
}

.portal-title h1 span {

    color: var(--gold);

    padding: 0 8px;

    font-style: italic;
}


.title-line {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 12px;

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 4px;
}

.title-line i {

    width: 70px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );
}

.title-line i:last-child {

    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}


/* =========================================================
   ORACLE
========================================================= */

.oracle-box {

    margin-top: 42px;

    width: min(560px, 92vw);

    padding: 25px 30px;

    background:
        linear-gradient(
            135deg,
            rgba(8,20,32,.78),
            rgba(4,8,14,.82)
        );

    border:

        1px solid rgba(245,199,107,.22);

    border-radius: 4px;

    box-shadow:

        inset 0 0 35px rgba(50,150,200,.06),
        0 0 35px rgba(0,0,0,.6);

    backdrop-filter: blur(12px);

    position: relative;
}

.oracle-symbol {

    color: var(--gold-bright);

    font-size: 20px;

    margin-bottom: 8px;

    text-shadow:
        0 0 15px var(--gold);
}

.oracle-label {

    font-size: 10px;

    letter-spacing: 4px;

    color: var(--gold);

    margin-bottom: 12px;
}

.oracle-box p {

    margin: 0;

    color: #dbe5eb;

    font-size: 17px;

    font-style: italic;

    min-height: 25px;

    transition: opacity .6s ease;
}


/* =========================================================
   ENTER BUTTON
========================================================= */

.enter {

    margin-top: 35px;

    min-width: 310px;

    padding: 17px 25px;

    border:

        1px solid rgba(245,199,107,.65);

    border-radius: 3px;

    background:
        linear-gradient(
            135deg,
            rgba(15,49,66,.95),
            rgba(22,12,8,.95)
        );

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    cursor: pointer;

    letter-spacing: 3px;

    font-size: 12px;

    box-shadow:

        0 0 15px rgba(66,207,255,.12),
        inset 0 0 20px rgba(245,199,107,.05);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.enter:hover {

    transform:
        translateY(-3px)
        scale(1.02);

    border-color: var(--gold-bright);

    box-shadow:

        0 0 25px rgba(66,207,255,.25),
        0 0 55px rgba(245,199,107,.12),
        inset 0 0 25px rgba(245,199,107,.08);
}

.button-icon {

    font-size: 17px;

    filter:
        drop-shadow(0 0 8px var(--haven-blue));
}

.button-arrow {

    color: var(--gold);

    font-size: 20px;

    transition: transform .3s ease;
}

.enter:hover .button-arrow {

    transform:
        translateX(5px);
}


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

.portal-footer {

    margin-top: 25px;

    color: #65727c;

    font-size: 9px;

    letter-spacing: 4px;
}

.portal-footer span {

    color: var(--gold);

    margin: 0 8px;
}


/* =========================================================
   GREAT HALL
========================================================= */

.dashboard {

    min-height: 100vh;

    padding: 35px 5vw 25px;

    position: relative;

    z-index: 3;

    opacity: 0;

    transform: scale(1.04);

    pointer-events: none;

    transition:
        opacity 1s ease,
        transform 1s ease;
}

.dashboard.active {

    opacity: 1;

    transform: scale(1);

    pointer-events: auto;
}


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

.hall-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 1400px;

    margin: auto;

    padding-bottom: 25px;

    border-bottom:
        1px solid rgba(245,199,107,.15);
}

.header-brand {

    display: flex;

    align-items: center;

    gap: 15px;
}

.header-brand img {

    width: 55px;

    height: 55px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 12px rgba(40,180,255,.55));
}

.header-small {

    color: var(--muted);

    font-size: 9px;

    letter-spacing: 3px;
}

.header-brand h2 {

    margin: 3px 0 0;

    font-size: 24px;

    letter-spacing: 4px;

    color: var(--gold-bright);
}

.header-status {

    color: #8aa5a9;

    font-size: 9px;

    letter-spacing: 2px;
}

.status-dot {

    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 7px;

    border-radius: 50%;

    background: #54d68b;

    box-shadow:
        0 0 10px #54d68b;
}


/* =========================================================
   WELCOME
========================================================= */

.hall-welcome {

    max-width: 900px;

    margin: 45px auto 35px;

    text-align: center;

    padding: 25px;

    background:
        radial-gradient(
            ellipse,
            rgba(20,80,110,.12),
            transparent 70%
        );
}

.hall-welcome h3 {

    margin: 5px 0;

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

    font-weight: normal;

    color: var(--gold-bright);
}

.hall-welcome p {

    margin: 8px;

    color: var(--muted);

    font-style: italic;
}

.welcome-decoration {

    color: var(--gold);

    font-size: 22px;
}


/* =========================================================
   CARDS
========================================================= */

.hall-grid {

    max-width: 1400px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}

.hall-card {

    min-height: 185px;

    text-align: left;

    padding: 28px;

    display: flex;

    align-items: flex-start;

    gap: 20px;

    position: relative;

    overflow: hidden;

    cursor: pointer;

    border:
        1px solid rgba(245,199,107,.12);

    border-radius: 5px;

    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(10,20,29,.88),
            rgba(4,8,13,.94)
        );

    box-shadow:
        inset 0 0 35px rgba(255,255,255,.015),
        0 12px 30px rgba(0,0,0,.35);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.hall-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(66,207,255,.12),
            transparent 50%
        );

    opacity: 0;

    transition: opacity .3s ease;
}

.hall-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(245,199,107,.4);

    box-shadow:

        0 15px 40px rgba(0,0,0,.55),
        0 0 25px rgba(50,170,220,.08);
}

.hall-card:hover::before {

    opacity: 1;
}

.card-icon {

    font-size: 34px;

    position: relative;

    z-index: 2;

    filter:
        drop-shadow(0 0 8px rgba(255,200,100,.35));
}

.card-content {

    position: relative;

    z-index: 2;

    flex: 1;
}

.card-category {

    font-size: 8px;

    letter-spacing: 2px;

    color: var(--gold);

    display: block;

    margin-bottom: 7px;
}

.card-content h3 {

    margin: 0 0 8px;

    font-size: 22px;

    font-weight: normal;
}

.card-content p {

    margin: 0;

    color: #89969e;

    font-size: 13px;

    line-height: 1.5;
}

.card-arrow {

    position: absolute;

    right: 22px;

    bottom: 18px;

    color: var(--gold);

    font-size: 20px;

    transition:
        transform .3s ease;
}

.hall-card:hover .card-arrow {

    transform:
        translateX(5px);
}


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

.hall-footer {

    max-width: 1400px;

    margin: 40px auto 0;

    padding-top: 20px;

    border-top:
        1px solid rgba(245,199,107,.1);

    display: flex;

    justify-content: space-between;

    color: #59656d;

    font-size: 8px;

    letter-spacing: 2px;
}

.hall-footer span:first-child {

    color: var(--gold);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes portalAppear {

    from {

        opacity: 0;

        transform:
            translateY(25px)
            scale(.97);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes logoFloat {

    0%,100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-8px);
    }
}

@keyframes logoPulse {

    0%,100% {

        filter:
            drop-shadow(0 0 10px rgba(255,205,90,.75))
            drop-shadow(0 0 35px rgba(255,160,40,.25));
    }

    50% {

        filter:
            drop-shadow(0 0 18px rgba(255,225,130,.95))
            drop-shadow(0 0 60px rgba(50,170,255,.25));
    }
}

@keyframes rotateRing {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateRingReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


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

@media (max-width: 850px) {

    .hall-grid {

        grid-template-columns:
            1fr;
    }

    .hall-card {

        min-height: 150px;
    }

    .hall-header {

        align-items: flex-start;
    }

    .header-status {

        display: none;
    }

    .hall-footer {

        flex-direction: column;

        gap: 8px;

        text-align: center;
    }
}

@media (max-width: 500px) {

    .portal {

        padding: 20px 15px;
    }

    .crest-ring {

        width: 90vw;

        max-width: 360px;
    }

    .portal-title h1 {

        font-size: 38px;

        letter-spacing: 4px;
    }

    .title-line i {

        width: 35px;
    }

    .oracle-box {

        margin-top: 30px;

        padding: 20px;
    }

    .oracle-box p {

        font-size: 15px;
    }

    .enter {

        width: 90vw;

        min-width: 0;
    }

    .dashboard {

        padding:
            20px 15px;
    }

    .header-brand h2 {

        font-size: 18px;

        letter-spacing: 2px;
    }
}
/* =========================================================
   HAVEN CHAMBERS
========================================================= */

.haven-chamber {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        radial-gradient(
            circle at center,
            rgba(30, 80, 70, 0.35),
            rgba(3, 5, 10, 0.97) 70%
        );

    backdrop-filter: blur(18px);

    opacity: 0;

    visibility: hidden;

    transform: scale(1.05);

    transition:
        opacity 0.5s ease,
        transform 0.5s ease,
        visibility 0.5s ease;
}


.haven-chamber.active {

    opacity: 1;

    visibility: visible;

    transform: scale(1);

}


.chamber-inner {

    width: min(900px, 100%);

    min-height: 450px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 60px 30px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.02)
        );

    box-shadow:
        0 0 60px rgba(0,0,0,0.65),
        inset 0 0 40px rgba(255,255,255,0.02);

}


.chamber-symbol {

    font-size: 52px;

    margin-bottom: 15px;

    animation:
        chamberPulse 3s infinite ease-in-out;
}


.chamber-inner h2 {

    margin: 15px 0;

    font-size: clamp(32px, 6vw, 64px);

    letter-spacing: 4px;

}


.chamber-message {

    max-width: 600px;

    margin: 10px auto 40px;

    opacity: 0.75;

}


.chamber-back {

    padding: 14px 24px;

    border-radius: 12px;

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

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

    color: inherit;

    cursor: pointer;

    font-size: 15px;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.chamber-back:hover {

    transform: translateY(-2px);

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

    box-shadow:
        0 0 25px rgba(255,255,255,0.08);

}


@keyframes chamberPulse {

    0%,
    100% {

        transform: scale(1);

        opacity: 0.75;

    }

    50% {

        transform: scale(1.12);

        opacity: 1;

    }

}


/* MOBILE */

@media (max-width: 600px) {

    .haven-chamber {

        padding: 15px;

    }

    .chamber-inner {

        min-height: 400px;

        padding: 40px 20px;

        border-radius: 18px;

    }

    .chamber-inner h2 {

        letter-spacing: 2px;

    }

    .chamber-back {

        width: 100%;

        max-width: 320px;

    }

}
/* =========================================================
   HAVEN MENAGERIE
   GRAND MARKETPLACE
========================================================= */

.marketplace-chamber .chamber-inner {
    width: min(1400px, 96vw);
    height: min(92vh, 1000px);
    min-height: 0;
    padding: 35px 35px 25px;
    justify-content: flex-start;
    overflow: hidden;
}


/* =========================================================
   MENAGERIE MAIN AREA
========================================================= */

.menagerie-marketplace {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    text-align: left;
}


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

.menagerie-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 20px;
}

.menagerie-title-block {
    flex: 1;
}

.menagerie-title-block h3 {
    margin: 4px 0 6px;
    color: var(--gold-bright);
    font-size: clamp(25px, 4vw, 38px);
    font-weight: normal;
    letter-spacing: 2px;
}

.menagerie-title-block p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    font-style: italic;
}


/* =========================================================
   JEWEL BALANCE
========================================================= */

.menagerie-balance {
    flex-shrink: 0;
    min-width: 180px;
    padding: 15px 20px;
    text-align: center;
    border: 1px solid rgba(245,199,107,.28);
    border-radius: 8px;
    background:
        linear-gradient(
            145deg,
            rgba(30,55,70,.55),
            rgba(5,10,16,.8)
        );
    box-shadow:
        0 0 25px rgba(66,207,255,.06),
        inset 0 0 20px rgba(245,199,107,.04);
}

.menagerie-balance span {
    display: block;
    color: var(--muted);
    font-size: 8px;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.menagerie-balance strong {
    display: block;
    color: var(--gold-bright);
    font-size: 22px;
    letter-spacing: 1px;
}


/* =========================================================
   DIVIDER
========================================================= */

.menagerie-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 5px 0 15px;
    color: var(--gold);
    font-size: 9px;
    letter-spacing: 3px;
}

.menagerie-divider::before,
.menagerie-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(245,199,107,.25)
        );
}

.menagerie-divider::after {
    background:
        linear-gradient(
            90deg,
            rgba(245,199,107,.25),
            transparent
        );
}


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

.menagerie-collections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    flex-shrink: 0;
    margin-bottom: 20px;
}

.menagerie-category {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 11px 14px;
    text-align: left;
    color: var(--text);
    cursor: pointer;

    border: 1px solid rgba(245,199,107,.12);
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(12,28,40,.88),
            rgba(4,9,15,.92)
        );

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.menagerie-category:hover {
    transform: translateY(-2px);
    border-color: rgba(245,199,107,.35);
    box-shadow:
        0 8px 25px rgba(0,0,0,.4),
        0 0 20px rgba(66,207,255,.06);
}

.menagerie-category.active {
    border-color: rgba(245,199,107,.65);
    background:
        linear-gradient(
            135deg,
            rgba(35,65,78,.9),
            rgba(12,20,27,.95)
        );
    box-shadow:
        inset 0 0 25px rgba(245,199,107,.05),
        0 0 20px rgba(245,199,107,.08);
}

.menagerie-category-icon {
    width: 38px;
    flex-shrink: 0;
    font-size: 25px;
    text-align: center;
}

.menagerie-category-text {
    min-width: 0;
    flex: 1;
}

.menagerie-category-text strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: normal;
    color: var(--gold-bright);
}

.menagerie-category-text small {
    display: block;
    color: #7f909a;
    font-size: 9px;
    line-height: 1.3;
}

.menagerie-category-arrow {
    color: var(--gold);
    font-size: 17px;
    transition: transform .2s ease;
}

.menagerie-category:hover .menagerie-category-arrow {
    transform: translateX(4px);
}


/* =========================================================
   CREATURE SHELF
========================================================= */

.menagerie-shelf {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px 8px 25px 3px;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(245,199,107,.45)
        rgba(255,255,255,.04);
}

.menagerie-shelf::-webkit-scrollbar {
    width: 9px;
}

.menagerie-shelf::-webkit-scrollbar-track {
    background: rgba(255,255,255,.025);
    border-radius: 10px;
}

.menagerie-shelf::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            rgba(245,199,107,.65),
            rgba(66,207,255,.35)
        );
    border-radius: 10px;
}


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

.menagerie-shelf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
    padding: 5px 5px 12px;
    border-bottom: 1px solid rgba(245,199,107,.12);
}

.menagerie-shelf-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menagerie-shelf-icon {
    font-size: 28px;
}

.menagerie-shelf-subtitle {
    margin: 3px 0 0;
    color: #788791;
    font-size: 12px;
    font-style: italic;
}

.menagerie-shelf-count {
    flex-shrink: 0;
    color: #71818a;
    font-size: 9px;
    letter-spacing: 1px;
}


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

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


/* =========================================================
   CREATURE CARD
========================================================= */

.menagerie-creature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(245,199,107,.13);
    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(13,27,38,.95),
            rgba(3,8,13,.97)
        );

    box-shadow:
        0 8px 25px rgba(0,0,0,.35),
        inset 0 0 30px rgba(255,255,255,.012);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.menagerie-creature-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(245,199,107,.42);

    box-shadow:
        0 14px 35px rgba(0,0,0,.55),
        0 0 25px rgba(66,207,255,.07);
}


/* =========================================================
   CREATURE ART AREA
========================================================= */

.creature-card-art {
    position: relative;
    height: 125px;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(66,207,255,.10),
            transparent 62%
        );

    border-bottom:
        1px solid rgba(245,199,107,.09);
}

.creature-card-glow {
    position: absolute;
    width: 100px;
    height: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(66,207,255,.16),
            transparent 70%
        );

    filter: blur(10px);
}

.creature-tier-icon {
    position: relative;
    z-index: 2;
    font-size: 55px;

    filter:
        drop-shadow(
            0 0 15px
            rgba(66,207,255,.25)
        );
}

.creature-price-badge {
    position: absolute;
    right: 10px;
    top: 10px;

    z-index: 3;

    padding: 6px 9px;

    border-radius: 20px;

    color: var(--gold-bright);

    font-size: 10px;
    font-weight: bold;

    background:
        rgba(3,8,13,.88);

    border:
        1px solid rgba(245,199,107,.35);

    box-shadow:
        0 3px 10px rgba(0,0,0,.4);
}


/* =========================================================
   CREATURE CARD BODY
========================================================= */

.creature-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 15px;
}

.creature-category {
    display: block;

    margin-bottom: 5px;

    color: var(--gold);

    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.creature-card-body h3 {
    margin: 0 0 7px;

    color: var(--gold-bright);

    font-size: 19px;
    font-weight: normal;

    letter-spacing: 1px;
}

.creature-card-body p {
    flex: 1;

    margin: 0 0 14px;

    color: #84939c;

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   CARD META
========================================================= */

.creature-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    margin-bottom: 10px;
    padding-top: 10px;

    border-top:
        1px solid rgba(255,255,255,.06);

    color: #73838c;

    font-size: 8px;
}

.creature-card-meta strong {
    color: var(--gold-bright);
    font-size: 10px;
    white-space: nowrap;
}


/* =========================================================
   REDEEM BUTTON
========================================================= */

.menagerie-purchase {
    width: 100%;
    min-height: 40px;

    padding: 10px 12px;

    border:
        1px solid rgba(245,199,107,.35);

    border-radius: 5px;

    background:
        linear-gradient(
            135deg,
            rgba(21,63,77,.9),
            rgba(35,20,10,.9)
        );

    color: var(--gold-bright);

    cursor: pointer;

    font-size: 9px;
    letter-spacing: 2px;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.menagerie-purchase:hover:not(:disabled) {
    transform: translateY(-2px);

    border-color:
        var(--gold-bright);

    box-shadow:
        0 0 20px rgba(245,199,107,.12);
}

.menagerie-purchase:disabled {
    cursor: not-allowed;
    opacity: .4;
}


/* =========================================================
   MARKETPLACE SUCCESS
========================================================= */

.marketplace-success {
    width: 100%;
    max-width: 700px;
    margin: auto;
    text-align: center;
}

.marketplace-success h3 {
    margin: 10px 0;
    color: var(--gold-bright);
    font-size: 28px;
    font-weight: normal;
}

.marketplace-success > p {
    color: var(--muted);
}


/* =========================================================
   PURCHASE RECEIPT
========================================================= */

.purchase-receipt {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    margin: 25px 0;

    padding: 20px;

    border:
        1px solid rgba(245,199,107,.18);

    border-radius: 10px;

    background:
        rgba(4,10,16,.7);
}

.purchase-receipt div {
    padding: 12px;

    border:
        1px solid rgba(255,255,255,.05);

    border-radius: 6px;
}

.purchase-receipt span {
    display: block;

    margin-bottom: 5px;

    color: #71818a;

    font-size: 8px;
    letter-spacing: 2px;
}

.purchase-receipt strong {
    color: var(--gold-bright);
    font-size: 15px;
}


/* =========================================================
   LOADING / EMPTY / ERROR
========================================================= */

.marketplace-loading,
.marketplace-empty,
.marketplace-error {
    width: 100%;
    min-height: 300px;

    display: flex;
    flex-direction: column;

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

    text-align: center;
}

.marketplace-empty h3,
.marketplace-error h3 {
    color: var(--gold-bright);
    font-size: 24px;
    font-weight: normal;
}

.marketplace-empty p,
.marketplace-error p {
    max-width: 550px;
    color: var(--muted);
    line-height: 1.6;
}


/* =========================================================
   MARKETPLACE CHAMBER BACK BUTTON
========================================================= */

.marketplace-chamber .chamber-back {
    flex-shrink: 0;
    margin-top: 15px;
}


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

@media (max-width: 1100px) {

    .marketplace-chamber .chamber-inner {
        width: 96vw;
        height: 94vh;
        padding: 25px;
    }

    .menagerie-collections {
        grid-template-columns: repeat(3, 1fr);
    }

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

}


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

@media (max-width: 700px) {

    .marketplace-chamber {
        padding: 10px;
    }

    .marketplace-chamber .chamber-inner {
        width: 100%;
        height: 96vh;
        padding: 20px 15px 15px;
        border-radius: 15px;
    }

    .menagerie-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .menagerie-balance {
        width: 100%;
    }

    .menagerie-collections {
        grid-template-columns: repeat(2, 1fr);
        gap: 7px;
    }

    .menagerie-category {
        min-height: 58px;
        padding: 8px;
        gap: 7px;
    }

    .menagerie-category-icon {
        width: 28px;
        font-size: 20px;
    }

    .menagerie-category-text strong {
        font-size: 10px;
    }

    .menagerie-category-text small {
        font-size: 7px;
    }

    .menagerie-category-arrow {
        display: none;
    }

    .menagerie-items {
        grid-template-columns: 1fr;
    }

    .creature-card-art {
        height: 105px;
    }

    .purchase-receipt {
        grid-template-columns: 1fr;
    }

    .menagerie-shelf-header {
        align-items: flex-start;
    }

    .menagerie-shelf-count {
        display: none;
    }

}


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

@media (max-width: 430px) {

    .menagerie-collections {
        grid-template-columns: 1fr;
    }

    .menagerie-title-block h3 {
        font-size: 25px;
    }

    .creature-card-body h3 {
        font-size: 17px;
    }

}
/* =====================================================
   MARKETPLACE SCROLL FIX
===================================================== */

.haven-chamber.marketplace-chamber {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start !important;
}

.haven-chamber.marketplace-chamber .chamber-inner.marketplace-inner {
    max-height: none !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    margin: 20px auto !important;
}

/* Give the Marketplace room to extend below the screen */
.haven-chamber.marketplace-chamber #chamberContent {
    overflow: visible !important;
}

/* Smaller screens */
@media (max-width: 700px) {
    .haven-chamber.marketplace-chamber {
        padding: 10px !important;
    }

    .haven-chamber.marketplace-chamber .chamber-inner.marketplace-inner {
        width: 100% !important;
        margin: 10px auto !important;
        padding: 20px 14px !important;
    }
}
/* =========================================================
   GREAT HALL — DISCORD ACCOUNT
   ========================================================= */

.header-account {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-status {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 12px;

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

    background: rgba(0, 0, 0, 0.18);

    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.65);

    white-space: nowrap;
}

.account-status .status-dot {
    width: 7px;
    height: 7px;
    min-width: 7px;

    border-radius: 50%;

    background: #777;

    box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

.discord-login,
.discord-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 15px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;

    background: rgba(88, 101, 242, 0.18);

    color: #fff;
    text-decoration: none;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.discord-login:hover,
.discord-logout:hover {
    background: rgba(88, 101, 242, 0.32);
    border-color: rgba(255, 255, 255, 0.35);

    transform: translateY(-1px);
}

.discord-logout {
    background: rgba(120, 30, 30, 0.18);
}

.discord-logout:hover {
    background: rgba(150, 40, 40, 0.30);
}


/* =========================================================
   ACCOUNT — MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .header-account {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .account-status {
        font-size: 9px;
        padding: 6px 9px;
    }

    .discord-login,
    .discord-logout {
        padding: 8px 10px;
        font-size: 9px;
    }

}
/* =========================================================
   TREASURY SCROLL FIX
========================================================= */

.haven-chamber.treasury-chamber {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start !important;
}

.haven-chamber.treasury-chamber .chamber-inner.treasury-inner {
    max-height: none !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    margin: 20px auto !important;
}

.haven-chamber.treasury-chamber #chamberContent {
    overflow: visible !important;
}

@media (max-width: 700px) {

    .haven-chamber.treasury-chamber {
        padding: 10px !important;
    }

    .haven-chamber.treasury-chamber .chamber-inner.treasury-inner {
        width: 100% !important;
        margin: 10px auto !important;
        padding: 20px 14px !important;
    }
}

/* =========================================================
   HAVEN ORDERS
========================================================= */

.haven-orders {
    margin-top: 35px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.16);
}

.orders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.orders-header h3 {
    margin: 6px 0 0;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.haven-order {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.15);
}

.order-main {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 0;
}

.order-number {
    font-weight: 700;
    opacity: 0.55;
    min-width: 45px;
}

.order-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.order-details strong {
    font-size: 15px;
}

.order-details small {
    opacity: 0.55;
    font-size: 11px;
}

.order-cost {
    white-space: nowrap;
    font-weight: 700;
}

.order-status {
    min-width: 150px;
    text-align: center;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.order-status-pending {
    background: rgba(210, 160, 40, 0.15);
    border: 1px solid rgba(210, 160, 40, 0.25);
}

.order-status-fulfilled {
    background: rgba(50, 150, 80, 0.15);
    border: 1px solid rgba(50, 150, 80, 0.25);
}

.order-status-cancelled {
    background: rgba(150, 50, 50, 0.15);
    border: 1px solid rgba(150, 50, 50, 0.25);
}

.orders-loading,
.orders-empty,
.orders-error {
    padding: 25px;
    text-align: center;
}

.orders-empty p,
.orders-error p {
    opacity: 0.7;
}

@media (max-width: 700px) {

    .haven-orders {
        padding: 18px 14px;
    }

    .haven-order {
        flex-wrap: wrap;
        gap: 10px;
    }

    .order-main {
        width: 100%;
    }

    .order-cost {
        margin-left: 60px;
    }

    .order-status {
        margin-left: auto;
        min-width: auto;
    }
}
/* =========================================================
   GUARDIAN GUILD
========================================================= */

.haven-chamber.guardian-chamber {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start !important;
}

.haven-chamber.guardian-chamber .chamber-inner {
    width: min(1100px, 96vw);
    max-height: none !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    margin: 20px auto !important;
    justify-content: flex-start;
}

.guardian-guild {
    width: 100%;
    text-align: left;
}

.guardian-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 30px;
}

.guardian-crown {
    font-size: 48px;
    margin-bottom: 10px;
}

.guardian-intro h3 {
    margin: 8px 0;
    color: var(--gold-bright);
    font-size: 28px;
    font-weight: normal;
    letter-spacing: 2px;
}

.guardian-intro p {
    color: var(--muted);
    line-height: 1.6;
}

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

.guardian-section-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 105px;
    padding: 20px;
    text-align: left;
    color: var(--text);
    cursor: pointer;

    border: 1px solid rgba(245,199,107,.13);
    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(13,27,38,.95),
            rgba(3,8,13,.97)
        );

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.guardian-section-card:hover {
    transform: translateY(-3px);
    border-color: rgba(245,199,107,.42);

    box-shadow:
        0 12px 30px rgba(0,0,0,.5),
        0 0 20px rgba(66,207,255,.07);
}

.guardian-section-icon {
    flex-shrink: 0;
    width: 48px;
    font-size: 32px;
    text-align: center;
}

.guardian-section-content {
    flex: 1;
    min-width: 0;
}

.guardian-section-content strong {
    display: block;
    margin-bottom: 7px;
    color: var(--gold-bright);
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 1px;
}

.guardian-section-content small {
    display: block;
    color: #7f909a;
    font-size: 11px;
    line-height: 1.5;
}

.guardian-section-arrow {
    flex-shrink: 0;
    color: var(--gold);
    font-size: 22px;
    transition: transform .2s ease;
}

.guardian-section-card:hover .guardian-section-arrow {
    transform: translateX(5px);
}

.guardian-coming-soon {
    width: 100%;
    max-width: 650px;
    margin: 30px auto;
    text-align: center;
}

.guardian-coming-soon h3 {
    color: var(--gold-bright);
    font-size: 28px;
    font-weight: normal;
}

.guardian-coming-soon p {
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 30px;
}

.guardian-back-guild {
    padding: 12px 22px;
    border: 1px solid rgba(245,199,107,.3);
    border-radius: 6px;
    background: rgba(255,255,255,.05);
    color: var(--gold-bright);
    cursor: pointer;
}

.guardian-back-guild:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(245,199,107,.6);
}

@media (max-width: 700px) {

    .haven-chamber.guardian-chamber {
        padding: 10px !important;
    }

    .haven-chamber.guardian-chamber .chamber-inner {
        width: 100%;
        margin: 10px auto !important;
        padding: 25px 15px !important;
    }

    .guardian-sections {
        grid-template-columns: 1fr;
    }

    .guardian-section-card {
        min-height: 90px;
    }
}
/* =========================================================
   HAVEN LEGAL — HALL OF RECORDS
========================================================= */

.legal-page {

    position: relative;

    z-index: 2;

    width: min(1100px, 92%);

    margin: 0 auto;

    padding: 70px 0 50px;

}


.legal-header {

    text-align: center;

    margin-bottom: 50px;

}


.legal-header h1 {

    margin: 8px 0 15px;

    color: var(--gold-bright);

    font-size: clamp(32px, 5vw, 52px);

    font-weight: normal;

    letter-spacing: 4px;

}


.legal-header p {

    max-width: 720px;

    margin: 0 auto;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   LEGAL NAVIGATION
========================================================= */

.legal-navigation {

    display: grid;

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

    gap: 18px;

}


.legal-navigation a {

    position: relative;

    display: grid;

    grid-template-columns: 50px 1fr;

    column-gap: 15px;

    align-items: center;

    padding: 22px;

    min-height: 120px;

    text-decoration: none;

    color: var(--text);

    background:
        linear-gradient(
            145deg,
            rgba(20, 50, 70, .55),
            rgba(5, 12, 20, .78)
        );

    border:
        1px solid rgba(245,199,107,.14);

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;

}


.legal-navigation a:hover {

    transform: translateY(-3px);

    border-color:
        rgba(245,199,107,.45);

    background:
        linear-gradient(
            145deg,
            rgba(25, 70, 95, .68),
            rgba(7, 17, 28, .9)
        );

}


.legal-navigation a span {

    grid-row: 1 / span 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    font-size: 24px;

    border:
        1px solid rgba(245,199,107,.2);

    background:
        rgba(2,3,5,.45);

    box-shadow:
        0 0 18px rgba(245,199,107,.08);

}


.legal-navigation strong {

    display: block;

    color: var(--gold-bright);

    font-size: 18px;

    font-weight: normal;

    letter-spacing: 1px;

}


.legal-navigation small {

    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.5;

}


/* =========================================================
   CONTACT
========================================================= */

.legal-contact {

    max-width: 760px;

    margin: 55px auto 0;

    padding: 35px;

    text-align: center;

    background:
        radial-gradient(
            ellipse at center,
            rgba(20,80,110,.16),
            transparent 75%
        );

    border-top:
        1px solid rgba(245,199,107,.12);

    border-bottom:
        1px solid rgba(245,199,107,.12);

}


.legal-contact h2 {

    margin: 8px 0 15px;

    color: var(--gold-bright);

    font-size: 28px;

    font-weight: normal;

}


.legal-contact p {

    margin: 0 auto 20px;

    max-width: 650px;

    color: var(--muted);

    line-height: 1.7;

    font-size: 14px;

}


.legal-email {

    display: inline-block;

    color: var(--gold);

    font-size: 16px;

    letter-spacing: .5px;

    text-decoration: none;

    transition:
        color .2s ease,
        text-shadow .2s ease;

}


.legal-email:hover {

    color: var(--gold-bright);

    text-shadow:
        0 0 12px rgba(245,199,107,.45);

}


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

.legal-footer {

    margin-top: 45px;

    padding-top: 22px;

    text-align: center;

    border-top:
        1px solid rgba(245,199,107,.1);

}


.legal-footer a {

    color: var(--gold);

    text-decoration: none;

    font-size: 13px;

    letter-spacing: 1px;

}


.legal-footer a:hover {

    color: var(--gold-bright);

}


.legal-footer p {

    margin-top: 25px;

    color: #59656d;

    font-size: 8px;

    line-height: 1.8;

    letter-spacing: 2px;

}


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

@media (max-width: 700px) {

    .legal-page {

        padding-top: 40px;

    }


    .legal-navigation {

        grid-template-columns: 1fr;

    }


    .legal-navigation a {

        min-height: 105px;

    }


    .legal-contact {

        padding: 25px 18px;

    }

}
/* =========================================================
   LEGAL DOCUMENTS
========================================================= */

.legal-document {

    max-width: 900px;

    margin: 0 auto;

    padding: 35px 45px;

    background:
        linear-gradient(
            145deg,
            rgba(8,20,30,.72),
            rgba(3,8,14,.82)
        );

    border:
        1px solid rgba(245,199,107,.14);

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);

}


.legal-meta {

    padding-bottom: 20px;

    margin-bottom: 30px;

    border-bottom:
        1px solid rgba(245,199,107,.1);

    color: var(--muted);

    font-size: 12px;

    letter-spacing: .5px;

}


.legal-document section {

    margin-bottom: 38px;

}


.legal-document h2 {

    margin: 0 0 14px;

    color: var(--gold-bright);

    font-size: 23px;

    font-weight: normal;

    letter-spacing: 1px;

}


.legal-document p {

    margin: 0 0 14px;

    color: #c1c9ce;

    font-size: 14px;

    line-height: 1.8;

}


.legal-document ul {

    margin: 12px 0 18px;

    padding-left: 25px;

    color: #c1c9ce;

}


.legal-document li {

    margin-bottom: 8px;

    font-size: 14px;

    line-height: 1.6;

}


@media (max-width: 700px) {

    .legal-document {

        padding: 25px 20px;

    }

    .legal-document h2 {

        font-size: 20px;

    }

}