:root {
    --bg: #040609;
    --panel: rgba(10, 14, 19, 0.97);

    --text: #f5f2e9;
    --muted: #929da7;

    --gold: #dda94e;
    --gold-light: #ffe3a1;

    --cyan: #66f4e5;
    --cyan-dark: #1b8989;

    --red: #ff5966;
    --green: #78df91;

    --line: rgba(255, 255, 255, 0.09);

    --shadow:
        0 28px 75px rgba(0, 0, 0, 0.62);
}


/* RESET */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;

    background: var(--bg);
    color: var(--text);

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

button,
input {
    font: inherit;
}

button {
    border: 1px solid var(--line);
    border-radius: 11px;

    padding: 12px 17px;

    color: var(--text);

    background:
        linear-gradient(
            180deg,
            #212a32,
            #10161c
        );

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 7px 18px rgba(0, 0, 0, 0.3);

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

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

    border-color:
        rgba(221, 169, 78, 0.58);

    background:
        linear-gradient(
            180deg,
            #2a343d,
            #151d24
        );
}

button:active {
    transform:
        translateY(1px)
        scale(0.98);
}

button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.primaryBtn {
    color: #181006;

    border-color:
        rgba(255, 227, 161, 0.7);

    background:
        linear-gradient(
            145deg,
            #ffe099,
            #dba443 60%,
            #96621e
        );

    font-weight: 900;
}

.primaryBtn:hover {
    background:
        linear-gradient(
            145deg,
            #ffebbd,
            #ebb955 60%,
            #a87327
        );
}

.screen {
    position: fixed;
    inset: 0;
    display: none;
}

.screen.active {
    display: block;
}

.hidden {
    display: none !important;
}

.eyebrow {
    color: var(--gold);

    font-size: 0.72rem;

    font-weight: 900;

    letter-spacing: 0.24em;

    text-transform: uppercase;
}


/* MAIN MENU */

#mainMenu {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(102, 244, 229, 0.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(221, 169, 78, 0.09),
            transparent 32%
        ),
        linear-gradient(
            rgba(3, 5, 7, 0.86),
            rgba(2, 3, 5, 0.98)
        ),
        #070a0d;
}

#mainMenu::before,
#mainMenu::after {
    content: "";

    position: absolute;

    top: -4%;
    bottom: -4%;

    width: clamp(130px, 18vw, 290px);

    opacity: 0.55;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.7),
            transparent 20% 80%,
            rgba(0, 0, 0, 0.7)
        ),
        repeating-linear-gradient(
            90deg,
            #11171b 0 15px,
            #253038 15px 28px,
            #141b20 28px 44px
        );

    border:
        1px solid rgba(221, 169, 78, 0.1);
}

#mainMenu::before {
    left: 3%;
}

#mainMenu::after {
    right: 3%;
}

.menuGlow {
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    filter: blur(85px);

    pointer-events: none;
}

.glowOne {
    left: 8%;
    top: 5%;

    background: var(--cyan);

    opacity: 0.14;
}

.glowTwo {
    right: 8%;
    bottom: -10%;

    background: var(--gold);

    opacity: 0.17;
}

.menuCard {
    position: relative;

    z-index: 5;

    width: min(92vw, 700px);

    margin: 6vh auto 0;

    padding:
        clamp(30px, 5vw, 58px);

    text-align: center;

    border:
        1px solid rgba(221, 169, 78, 0.26);

    border-radius: 24px;

    background:
        linear-gradient(
            160deg,
            rgba(23, 31, 38, 0.96),
            rgba(6, 9, 13, 0.98)
        );

    box-shadow:
        0 45px 100px rgba(0, 0, 0, 0.67);
}

.menuCard h1 {
    margin-top: 14px;

    color: #fff0c9;

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

    font-size:
        clamp(3rem, 8vw, 5.6rem);

    line-height: 0.95;

    letter-spacing: -0.055em;

    text-shadow:
        0 3px 0 #74501d,
        0 0 30px rgba(221, 169, 78, 0.14);
}

.menuTagline {
    max-width: 540px;

    margin: 24px auto 0;

    color: #aeb6bc;

    line-height: 1.75;
}

.menuButtons {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top: 30px;
}

.menuButtons button {
    min-height: 52px;
}

.menuButtons .primaryBtn {
    grid-column: 1 / -1;
}

.menuFooter {
    display: flex;

    justify-content: space-between;

    gap: 12px;

    margin-top: 28px;

    padding-top: 18px;

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

    color: #6c7680;

    font-size: 0.74rem;
}


/* HUD */

#gameScreen {
    background: #040608;
}

#hud {
    position: absolute;

    z-index: 60;

    top: 0;
    left: 0;
    right: 0;

    min-height: 82px;

    display: grid;

    grid-template-columns:
        1fr 1.25fr 1fr;

    align-items: center;

    gap: 14px;

    padding: 10px 16px;

    border-bottom:
        1px solid rgba(221, 169, 78, 0.13);

    background:
        linear-gradient(
            180deg,
            rgba(4, 7, 10, 0.99),
            rgba(8, 12, 16, 0.95)
        );

    backdrop-filter: blur(18px);
}

.hudGroup {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.hudCenter {
    justify-content: center;
}

.hudRight {
    justify-content: flex-end;
}

.iconBtn {
    min-width: 44px;
    height: 44px;

    padding: 0 12px;
}

.wideBtn {
    min-width: 120px;
}

.healthWrap {
    width: min(230px, 20vw);
}

.healthLabel,
.bossBarTop {
    display: flex;

    justify-content: space-between;

    gap: 8px;

    margin-bottom: 6px;

    color: #9aa4ad;

    font-size: 0.69rem;
}

.healthBar,
.bossHealthTrack {
    height: 11px;

    overflow: hidden;

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

    border-radius: 999px;

    background: #090c0e;
}

#healthFill {
    width: 100%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #38a85e,
            #7add91,
            #b9ee9f
        );

    box-shadow:
        0 0 14px rgba(120, 223, 145, 0.34);

    transition: width 0.2s ease;
}

.hudStat {
    display: inline-flex;

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

    gap: 6px;

    min-width: 52px;
    height: 42px;

    padding: 0 11px;

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

    border-radius: 10px;

    background:
        rgba(35, 44, 52, 0.72);
}

.hudStat span {
    color: var(--gold-light);
}

.roomBadge,
.questBadge {
    min-width: 0;

    padding: 7px 12px;

    border-left:
        2px solid rgba(221, 169, 78, 0.72);
}

.roomBadge small,
.questBadge small {
    display: block;

    color: #6e7983;

    font-size: 0.59rem;

    font-weight: 800;

    letter-spacing: 0.15em;
}

.roomBadge strong,
.questBadge strong {
    display: block;

    max-width: 230px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    margin-top: 2px;

    font-size: 0.86rem;
}


/* WORLD */

#gameViewport {
    position: absolute;

    inset: 82px 0 0;

    overflow: hidden;

    background: #050709;
}

#roomBackdrop {
    position: absolute;
    inset: 0;
}

#roomBackdrop::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 25%,
            rgba(0, 0, 0, 0.16) 58%,
            rgba(0, 0, 0, 0.65) 100%
        );

    pointer-events: none;
}

#gameWorld {
    position: absolute;

    inset: 3.2%;

    overflow: hidden;

    border:
        2px solid rgba(221, 169, 78, 0.22);

    border-radius: 22px;

    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.65),
        0 30px 70px rgba(0, 0, 0, 0.6);
}

#gameWorld::before,
#gameWorld::after {
    content: "";

    position: absolute;

    z-index: 3;

    left: 7%;
    right: 7%;

    height: 22px;

    border:
        1px solid rgba(221, 169, 78, 0.17);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(221, 169, 78, 0.1),
            transparent
        );

    pointer-events: none;
}

#gameWorld::before {
    top: 3%;
}

#gameWorld::after {
    bottom: 3%;
}

#floorPattern,
#objectLayer,
#enemyLayer,
#particleLayer {
    position: absolute;
    inset: 0;
}

#floorPattern {
    pointer-events: none;
}

#gameWorld.shake {
    animation:
        worldShake 0.28s linear;
}

@keyframes worldShake {
    0%,
    100% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-5px, 2px);
    }

    40% {
        transform: translate(5px, -2px);
    }

    60% {
        transform: translate(-4px, -1px);
    }

    80% {
        transform: translate(3px, 2px);
    }
}


/* PLAYER */

#player {
    position: absolute;

    z-index: 24;

    width: 44px;
    height: 52px;

    transform:
        translate(-50%, -50%);

    pointer-events: none;
}

.playerGlow {
    position: absolute;

    left: -18px;
    top: -12px;

    width: 80px;
    height: 80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(102, 244, 229, 0.26),
            transparent 70%
        );

    animation:
        explorerAura 1.8s ease-in-out infinite;
}

@keyframes explorerAura {
    50% {
        transform: scale(1.13);
        opacity: 0.58;
    }
}

.playerBody {
    position: absolute;

    left: 9px;
    top: 15px;

    width: 27px;
    height: 31px;

    border:
        2px solid #93b9b8;

    border-radius:
        8px 8px 11px 11px;

    background:
        linear-gradient(
            90deg,
            #34494d 0 18%,
            #7fa4a3 18% 48%,
            #567476 48% 78%,
            #293b3e 78%
        );
}

.playerBody::before {
    content: "";

    position: absolute;

    left: 3px;
    top: -17px;

    width: 17px;
    height: 17px;

    border:
        2px solid #d2e5df;

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #f1e3c4,
            #c6aa82
        );
}

.playerBody::after {
    content: "";

    position: absolute;

    left: 3px;
    bottom: -10px;

    width: 17px;
    height: 13px;

    clip-path:
        polygon(
            0 0,
            100% 0,
            84% 100%,
            57% 70%,
            37% 100%,
            14% 72%
        );

    background:
        #32494b;
}

.playerCore {
    position: absolute;

    z-index: 5;

    left: 18px;
    top: 25px;

    width: 9px;
    height: 9px;

    transform: rotate(45deg);

    background: var(--cyan);

    box-shadow:
        0 0 7px var(--cyan),
        0 0 15px rgba(102, 244, 229, 0.8);
}


/* OBJECTS */

.gameObject,
.enemy {
    position: absolute;

    transform:
        translate(-50%, -50%);

    user-select: none;
}

.gameObject {
    z-index: 10;
}

.enemy {
    z-index: 16;
}

.objectLabel,
.enemyLabel {
    position: absolute;

    left: 50%;
    top: calc(100% + 9px);

    transform:
        translateX(-50%);

    padding: 3px 7px;

    white-space: nowrap;

    color:
        rgba(243, 244, 238, 0.82);

    border-radius: 5px;

    background:
        rgba(2, 4, 6, 0.68);

    font-size: 0.63rem;

    pointer-events: none;
}

.keyObject,
.switchObject {
    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    border-radius: 12px;
}

.keyObject {
    color: #ffe09a;

    border:
        1px solid rgba(221, 169, 78, 0.45);

    background:
        radial-gradient(
            circle,
            #684b20,
            #271c0c 75%
        );
}

.coinObject {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border:
        2px solid #f2cb73;

    border-radius: 50%;

    color: #fff4b4;

    background:
        radial-gradient(
            circle at 35% 28%,
            #fff3aa,
            #dbac43 28%,
            #8d5515 75%
        );
}

.potionObject {
    width: 34px;
    height: 43px;

    display: grid;

    place-items: center;

    border:
        2px solid rgba(255, 186, 214, 0.6);

    border-radius:
        8px 8px 15px 15px;

    background:
        linear-gradient(
            180deg,
            #d4dde0 0 16%,
            #222a30 17% 26%,
            #ef5e9e 27% 100%
        );
}

.crystalObject {
    width: 42px;
    height: 42px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        2px solid rgba(218, 255, 251, 0.86);

    border-radius:
        5px 15px 5px 15px;

    background:
        linear-gradient(
            135deg,
            #f1ffff,
            #86fff2 20%,
            #2fc3bc 52%,
            #106e73
        );

    box-shadow:
        0 0 14px rgba(102, 244, 229, 0.72),
        0 0 38px rgba(102, 244, 229, 0.38);

    animation:
        crystalFloat 1.7s ease-in-out infinite;
}

.crystalObject .objectLabel {
    transform:
        translateX(-50%)
        rotate(-45deg);
}

@keyframes crystalFloat {
    50% {
        margin-top: -7px;
    }
}

.treasureObject {
    width: 52px;
    height: 42px;

    display: grid;
    place-items: center;

    color: transparent;

    border:
        2px solid #d39c43;

    border-radius:
        9px 9px 12px 12px;

    background:
        linear-gradient(
            #9e6a26 0 39%,
            #6c4218 40% 52%,
            #4e2e0f 53%
        );
}

.treasureObject::before {
    content: "";

    position: absolute;

    left: 19px;
    top: 16px;

    width: 10px;
    height: 14px;

    background: #e9b652;

    border-radius: 3px;
}

.doorObject {
    width: 84px;
    height: 118px;

    overflow: hidden;

    border:
        3px solid #4d585a;

    border-radius:
        44px 44px 12px 12px;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 18px,
            rgba(0,0,0,0.3) 18px 21px
        ),
        #252d30;
}

.doorObject::before {
    content: "◇";

    position: absolute;

    left: 50%;
    top: 34%;

    transform:
        translate(-50%, -50%);

    color: var(--gold);

    font-size: 1.6rem;
}

.doorObject.open {
    animation:
        doorOpen 0.58s ease forwards;
}

@keyframes doorOpen {
    100% {
        transform:
            translate(-50%, -50%)
            scaleX(0.08);

        opacity: 0.16;
    }
}


/* NPC */

.npcObject {
    width: 48px;
    height: 58px;

    border:
        2px solid rgba(221,169,78,0.3);

    border-radius:
        17px 17px 10px 10px;

    background:
        #52656e;
}

.npcObject::before {
    content: "";

    position: absolute;

    left: 12px;
    top: -11px;

    width: 20px;
    height: 20px;

    border:
        2px solid #d5bd92;

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #e1c99e,
            #a98458
        );
}

.merchantNpc {
    background:
        #814c68;
}

.guardianNpc {
    background:
        #555b5a;

    border-color:
        rgba(255,89,102,0.35);
}


/* PUZZLES */

.plateObject {
    width: 70px;
    height: 35px;

    border:
        2px solid #5c6668;

    border-radius: 50%;

    background:
        #343d40;
}

.plateObject.active {
    border-color: var(--gold);

    background:
        #715d2d;

    box-shadow:
        0 0 20px rgba(221,169,78,0.4);
}

.switchObject {
    color: #c8d3d3;

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

    background:
        #263033;
}

.switchObject.active {
    border-color: var(--cyan);

    background:
        #1f5552;

    box-shadow:
        0 0 23px rgba(102,244,229,0.35);
}

.lightNode {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border:
        2px solid rgba(255,239,183,0.3);

    border-radius: 50%;

    background:
        #454538;
}

.lightNode.active {
    border-color: var(--cyan);

    background:
        radial-gradient(
            circle,
            #8afff5,
            #287f7b 48%,
            #102526 80%
        );

    box-shadow:
        0 0 38px rgba(102,244,229,0.36);
}

.movingBlock {
    width: 70px;
    height: 70px;

    border:
        2px solid #626c6d;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #465052,
            #282f31 45%,
            #151a1c
        );

    transition:
        left 0.7s ease,
        top 0.7s ease;
}

.exitObject {
    width: 56px;
    height: 74px;

    display: grid;

    place-items: center;

    border:
        2px solid rgba(221,169,78,0.35);

    border-radius:
        28px 28px 8px 8px;

    color: var(--gold-light);

    background:
        #17181a;
}


/* ENEMIES */

.enemy {
    width: 52px;
    height: 56px;

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

    border-radius:
        12px 12px 8px 8px;

    background:
        #566367;

    box-shadow:
        0 14px 25px rgba(0,0,0,0.52);
}

.enemy::before {
    content: "";

    position: absolute;

    left: 9px;
    top: -8px;

    width: 30px;
    height: 27px;

    border:
        2px solid #758083;

    border-radius:
        9px 9px 5px 5px;

    background:
        #414b4e;
}

.enemy::after {
    content: "";

    position: absolute;

    left: 15px;
    top: 1px;

    width: 6px;
    height: 5px;

    border-radius: 3px;

    background: #ff5360;

    box-shadow:
        15px 0 0 #ff5360,
        0 0 9px rgba(255,83,96,0.95),
        15px 0 9px rgba(255,83,96,0.95);
}

.enemy.spirit {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #91fff5,
            #3da39d 46%,
            #183e40 74%
        );

    box-shadow:
        0 0 42px rgba(102,244,229,0.25);

    animation:
        spiritFloat 1.55s ease-in-out infinite;
}

@keyframes spiritFloat {
    50% {
        margin-top: -10px;
    }
}

.enemy.golem {
    width: 70px;
    height: 68px;

    border:
        3px solid #70766e;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #888b80,
            #596058 38%,
            #373d38 70%,
            #202520
        );
}

.enemy.boss {
    width: 92px;
    height: 94px;

    border:
        3px solid rgba(221,169,78,0.58);

    border-radius:
        18px 18px 12px 12px;

    background:
        linear-gradient(
            90deg,
            #463830,
            #74604d 15% 85%,
            #382d29
        );

    box-shadow:
        0 0 28px rgba(221,169,78,0.3),
        0 0 62px rgba(255,89,102,0.13);

    animation:
        bossPulse 1.7s ease-in-out infinite;
}

@keyframes bossPulse {
    50% {
        filter: brightness(1.15);
    }
}

.enemyHealth {
    position: absolute;

    z-index: 10;

    left: 2px;
    right: 2px;

    top: -17px;

    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(0,0,0,0.78);
}

.enemyHealth > span {
    display: block;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #bd283b,
            #ff5966
        );
}


/* COMBAT */

.attackFlash {
    position: absolute;

    z-index: 35;

    width: 82px;
    height: 82px;

    border:
        3px solid rgba(255,219,147,0.88);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    pointer-events: none;

    animation:
        slashFlash 0.28s ease-out forwards;
}

@keyframes slashFlash {
    from {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(0.25);
    }

    to {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.3);
    }
}

.particle {
    position: absolute;

    z-index: 40;

    width: 7px;
    height: 7px;

    border-radius: 2px;

    background: var(--cyan);

    pointer-events: none;

    animation:
        particlePop 0.72s ease-out forwards;
}

@keyframes particlePop {
    to {
        transform:
            translate(
                var(--dx),
                var(--dy)
            )
            scale(0);

        opacity: 0;
    }
}


/* INTERACTION */

#interactionHint {
    position: absolute;

    z-index: 55;

    left: 50%;
    bottom: 18px;

    transform:
        translateX(-50%);

    padding: 10px 15px;

    border:
        1px solid rgba(221,169,78,0.34);

    border-radius: 9px;

    background:
        rgba(6,9,12,0.95);

    opacity: 0;

    pointer-events: none;
}

#interactionHint.show {
    opacity: 1;
}


/* DIALOGUE */

.dialogueBox {
    position: absolute;

    z-index: 80;

    left: 50%;
    bottom: 34px;

    width: min(90%, 780px);

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 22px;

    padding: 20px 22px;

    border:
        1px solid rgba(221,169,78,0.32);

    border-radius: 16px;

    background:
        rgba(8,12,16,0.98);

    box-shadow: var(--shadow);
}

#dialogueSpeaker {
    margin-bottom: 6px;

    color: var(--gold);

    font-size: 0.7rem;

    font-weight: 900;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

#dialogueText {
    line-height: 1.5;

    font-size: 0.98rem;
}


/* ROOM BANNER */

.roomBanner {
    position: absolute;

    z-index: 70;

    top: 24px;
    left: 50%;

    min-width: 290px;

    padding: 14px 25px;

    transform:
        translateX(-50%);

    text-align: center;

    border:
        1px solid rgba(221,169,78,0.3);

    border-radius: 11px;

    background:
        rgba(6,9,12,0.96);

    animation:
        bannerIn 1.9s ease forwards;
}

.roomBanner small {
    display: block;

    color: #737e86;

    font-size: 0.61rem;

    letter-spacing: 0.2em;
}

.roomBanner strong {
    color: #ffe7b0;

    font-family:
        Georgia,
        serif;

    font-size: 1.45rem;
}

@keyframes bannerIn {
    0%,
    100% {
        opacity: 0;
    }

    20%,
    80% {
        opacity: 1;
    }
}


/* TOAST */

#toastContainer {
    position: absolute;

    z-index: 90;

    top: 18px;
    right: 20px;

    display: grid;

    gap: 9px;

    pointer-events: none;
}

.toast {
    min-width: 240px;
    max-width: 330px;

    padding: 12px 14px;

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

    border-left:
        3px solid var(--gold);

    border-radius: 9px;

    background:
        rgba(7,10,13,0.97);

    animation:
        toastIn 2.8s ease forwards;
}

@keyframes toastIn {
    0%,
    100% {
        opacity: 0;
        transform: translateX(24px);
    }

    10%,
    82% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* BOSS BAR */

.bossBar {
    position: absolute;

    z-index: 70;

    left: 50%;
    bottom: 18px;

    width: min(70%, 640px);

    transform:
        translateX(-50%);

    padding: 11px 15px;

    border:
        1px solid rgba(255,89,102,0.3);

    border-radius: 11px;

    background:
        rgba(9,7,9,0.96);
}

#bossHealthFill {
    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #a82034,
            #ff4f5d,
            #ff8a74
        );

    transition: width 0.2s ease;
}


/* PANELS */

.overlay {
    position: fixed;

    z-index: 200;

    inset: 0;

    display: grid;

    place-items: center;

    padding: 20px;

    background:
        rgba(1,2,3,0.88);

    backdrop-filter: blur(9px);
}

.panel {
    width:
        min(92vw, 770px);

    max-height: 86vh;

    overflow: auto;

    padding: 26px;

    border:
        1px solid rgba(221,169,78,0.25);

    border-radius: 20px;

    background:
        linear-gradient(
            155deg,
            rgba(24,32,39,0.99),
            rgba(7,10,14,0.99)
        );

    box-shadow: var(--shadow);
}

.compactPanel {
    width:
        min(92vw, 470px);

    text-align: center;
}

.panelHeader {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 23px;
}

.panel h2 {
    margin-top: 5px;

    color: #fff0cf;

    font-family:
        Georgia,
        serif;

    font-size: 2rem;
}

.closePanelBtn {
    width: 42px;
    height: 42px;

    padding: 0;
}

.panelGrid,
.achievementList,
.inventoryGrid,
.endingStats {
    display: grid;

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

    gap: 12px;
}

.panelGrid article,
.achievementCard,
.inventoryCard,
.endingStats article {
    padding: 17px;

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

    border-radius: 13px;

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

.panelGrid article b,
.inventoryCard b {
    display: block;

    margin-bottom: 6px;

    color: #fff0c9;
}

.panelGrid article p,
.achievementCard p,
.inventoryCard p,
.compactPanel p,
.endingLead {
    color: var(--muted);

    line-height: 1.55;
}

.settingRow {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 17px 3px;

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

.settingRow span {
    display: grid;

    gap: 4px;
}

.settingRow small {
    color: var(--muted);
}

.settingRow input {
    width: 23px;
    height: 23px;

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

.achievementCard {
    opacity: 0.45;
}

.achievementCard.unlocked {
    opacity: 1;

    border-color:
        rgba(221,169,78,0.34);
}

.achievementIcon {
    margin-bottom: 8px;

    color: var(--gold-light);

    font-size: 1.7rem;
}

.inventoryCard .count {
    margin: 7px 0;

    color: var(--gold-light);

    font-size: 1.55rem;

    font-weight: 900;
}

.inventoryActions {
    display: flex;

    justify-content: flex-end;

    margin-top: 19px;
}

.stackButtons {
    display: grid;

    gap: 10px;

    margin-top: 22px;
}

.dangerText {
    color: var(--red);
}


/* ENDING */

.endingPanel {
    width:
        min(94vw, 840px);

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(221,169,78,0.16),
            transparent 34%
        ),
        #11171a;
}

.endingPanel h2 {
    color: #ffe6a6;

    font-size:
        clamp(2.7rem, 7vw, 4.6rem);
}

.endingLead {
    max-width: 580px;

    margin: 13px auto 23px;
}

.endingStats article span {
    display: block;

    margin-bottom: 7px;

    color: var(--muted);

    font-size: 0.73rem;
}

.endingStats article b {
    color: #fff0c9;

    font-size: 1.5rem;
}

.endingPanel .primaryBtn {
    margin-top: 24px;
}


/* MOBILE CONTROLS */

#mobileControls {
    position: absolute;

    z-index: 90;

    left: 0;
    right: 0;

    bottom:
        max(
            14px,
            env(safe-area-inset-bottom)
        );

    display: none;

    justify-content: space-between;

    align-items: flex-end;

    padding: 0 18px;

    pointer-events: none;
}

.dpad,
.actionPad {
    pointer-events: auto;
}

.dpad {
    position: relative;

    width: 158px;
    height: 158px;
}

.controlBtn {
    position: absolute;

    width: 50px;
    height: 50px;

    padding: 0;

    border-radius: 14px;

    background:
        rgba(20,27,32,0.88);

    touch-action: none;
}

.dpad .up {
    top: 0;
    left: 54px;
}

.dpad .left {
    top: 54px;
    left: 0;
}

.dpad .down {
    top: 54px;
    left: 54px;
}

.dpad .right {
    top: 54px;
    right: 0;
}

.actionPad {
    display: flex;

    gap: 13px;
}

.actionPad .controlBtn {
    position: static;

    width: 66px;
    height: 66px;

    border-radius: 50%;

    font-weight: 900;
}

.actionPad .action {
    color: var(--gold-light);
}

.actionPad .attack {
    color: white;

    background:
        rgba(119,38,49,0.92);
}


/* TABLET */

@media (max-width: 980px) {

    #hud {
        grid-template-columns:
            1fr 1fr;

        min-height: 114px;
    }

    .hudCenter {
        grid-column: 1 / -1;

        grid-row: 2;

        justify-content: space-between;
    }

    .hudRight {
        grid-column: 2;

        grid-row: 1;
    }

    #gameViewport {
        inset:
            114px 0 0;
    }

    .roomBadge,
    .questBadge {
        width: 50%;
    }

}


/* MOBILE */

@media (max-width: 760px) {

    .menuCard {
        margin-top: 3vh;

        max-height: 94vh;

        overflow-y: auto;

        padding:
            28px 22px;
    }

    .menuButtons {
        grid-template-columns: 1fr;
    }

    .menuButtons .primaryBtn {
        grid-column: auto;
    }

    .menuFooter {
        flex-direction: column;

        align-items: center;
    }

    #hud {
        min-height: 126px;

        gap: 6px;

        padding: 8px;
    }

    .healthWrap {
        width: 35vw;
    }

    .wideBtn {
        width: 44px;
        min-width: 44px;

        overflow: hidden;

        text-indent: -9999px;
    }

    .wideBtn::after {
        content: "🎒";

        position: absolute;

        inset: 0;

        display: grid;

        place-items: center;

        text-indent: 0;
    }

    #gameViewport {
        inset:
            126px 0 0;
    }

    #gameWorld {
        inset: 2%;

        border-radius: 15px;
    }

    #mobileControls {
        display: flex;
    }

    #interactionHint {
        bottom: 170px;
    }

    .dialogueBox {
        bottom: 184px;

        width: 94%;

        flex-direction: column;

        align-items: stretch;
    }

    .bossBar {
        bottom: 184px;

        width: 88%;
    }

    .panelGrid,
    .achievementList,
    .inventoryGrid,
    .endingStats {
        grid-template-columns: 1fr;
    }

    .panel {
        max-height: 91vh;
    }

}


/* SMALL MOBILE */

@media (max-width: 520px) {

    .menuCard h1 {
        font-size:
            clamp(2.7rem, 15vw, 4rem);
    }

    .hudStat {
        min-width: 44px;

        height: 37px;

        padding: 0 7px;
    }

    .healthLabel {
        display: none;
    }

    .dpad {
        transform: scale(0.87);

        transform-origin:
            left bottom;
    }

    .actionPad {
        transform: scale(0.9);

        transform-origin:
            right bottom;
    }

}