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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #050504;
    color: #d8d0bd;
    font-family: "Bahnschrift", "DIN Condensed", "Arial Narrow", "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
    user-select: none;
    -webkit-user-select: none;
}

#container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 48% 40%, rgba(120, 112, 94, 0.16), transparent 46%),
        linear-gradient(180deg, #171512 0%, #080807 78%);
}

#container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 50%, rgba(0, 0, 0, 0.08) 50%),
        radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, 0.55) 100%);
    background-size: 100% 3px, 100% 100%;
    mix-blend-mode: screen;
    opacity: 0.42;
    z-index: 3;
}

#gameCanvas {
    display: block;
    image-rendering: auto;
    background: #090907;
    border: 3px solid #070604;
    outline: 1px solid rgba(214, 198, 164, 0.18);
    box-shadow:
        0 0 0 10px rgba(0, 0, 0, 0.55),
        0 28px 90px rgba(0, 0, 0, 0.82),
        inset 0 0 60px rgba(0, 0, 0, 0.65);
}

#ui-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.screen {
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
}

.screen.active {
    display: flex;
    pointer-events: all;
}

#menu-screen {
    align-items: flex-start;
    justify-content: space-between;
    padding: min(5vh, 44px) min(5vw, 56px) 34px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.48) 42%, rgba(0, 0, 0, 0.82) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.78) 100%),
        url("../01.jpeg") center / cover no-repeat;
    overflow: hidden;
}

#menu-screen::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(209, 197, 173, 0.19);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.72);
    pointer-events: none;
}

#menu-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0 32%, rgba(0, 0, 0, 0.42) 32% 32.4%, transparent 32.4% 64%, rgba(0, 0, 0, 0.44) 64% 64.4%, transparent 64.4%),
        linear-gradient(180deg, transparent 0 33%, rgba(0, 0, 0, 0.5) 33% 33.6%, transparent 33.6% 66%, rgba(0, 0, 0, 0.5) 66% 66.6%, transparent 66.6%);
    opacity: 0.8;
    pointer-events: none;
}

.menu-panel-grid {
    position: absolute;
    inset: 22px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    opacity: 0.58;
    pointer-events: none;
}

.menu-panel-grid span {
    border: 1px solid rgba(230, 220, 190, 0.08);
    box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.5);
}

.menu-title {
    position: relative;
    z-index: 2;
    max-width: 480px;
    text-transform: uppercase;
}

.menu-title h1 {
    margin-top: -8px;
    color: #d7cdb8;
    font-size: clamp(68px, 11vw, 142px);
    line-height: 0.82;
    font-weight: 900;
    letter-spacing: 3px;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.95),
        0 0 18px rgba(221, 210, 184, 0.18);
    filter: contrast(1.08);
}

.subtitle {
    margin-top: 10px;
    color: #d7cdb8;
    font-size: clamp(12px, 1.5vw, 18px);
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.menu-fog {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 45% 66%, rgba(197, 188, 166, 0.18) 0%, transparent 46%),
        radial-gradient(ellipse at 80% 20%, rgba(108, 177, 190, 0.13) 0%, transparent 32%);
    animation: fogPulse 5s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes fogPulse {
    from { opacity: 0.55; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(8px); }
}

.menu-status {
    position: absolute;
    z-index: 2;
    right: min(6vw, 72px);
    top: min(7vh, 72px);
    width: min(360px, 42vw);
    padding: 14px 18px;
    color: #d7cdb8;
    text-align: right;
    text-transform: uppercase;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.66));
    border-top: 1px solid rgba(215, 205, 184, 0.18);
    border-bottom: 1px solid rgba(215, 205, 184, 0.12);
}

.menu-status span,
.menu-status strong {
    display: block;
}

.menu-status span {
    font-size: 13px;
    color: #8bbcc6;
}

.menu-status strong {
    margin-top: 4px;
    font-size: 21px;
    font-weight: 800;
}

.menu-options {
    position: absolute;
    z-index: 3;
    left: min(5vw, 60px);
    bottom: 86px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(360px, calc(100vw - 48px));
}

.menu-btn {
    position: relative;
    min-height: 48px;
    padding: 13px 22px;
    border: 1px solid rgba(215, 205, 184, 0.28);
    border-left: 5px solid rgba(118, 189, 207, 0.72);
    background:
        linear-gradient(90deg, rgba(17, 16, 14, 0.94), rgba(39, 35, 29, 0.78)),
        repeating-linear-gradient(90deg, transparent 0 10px, rgba(255, 255, 255, 0.025) 10px 11px);
    color: #e2d7bf;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: all;
    transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.menu-btn::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0.62;
}

.menu-btn:hover {
    transform: translateX(6px);
    border-color: rgba(226, 215, 191, 0.6);
    color: #ffffff;
    box-shadow: 0 0 26px rgba(83, 184, 218, 0.18);
}

.menu-footer {
    position: absolute;
    z-index: 3;
    left: min(5vw, 60px);
    right: min(5vw, 60px);
    bottom: 28px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: rgba(215, 205, 184, 0.68);
    font-size: 12px;
    text-transform: uppercase;
}

.menu-footer span {
    padding: 5px 9px;
    background: rgba(0, 0, 0, 0.44);
    border: 1px solid rgba(215, 205, 184, 0.12);
}

#hud {
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 22px;
}

#hud-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    color: #d7cdb8;
    text-transform: uppercase;
    pointer-events: none;
}

#hud-left {
    min-width: 240px;
    padding: 10px 14px 12px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.08));
    border-left: 4px solid rgba(118, 189, 207, 0.5);
    border-top: 1px solid rgba(215, 205, 184, 0.14);
}

#hud-act {
    display: block;
    font-size: 23px;
    font-weight: 900;
    line-height: 1;
}

#hud-area,
#hud-checkpoint {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: rgba(215, 205, 184, 0.72);
}

#hud-hearts {
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(215, 205, 184, 0.12);
}

.heart {
    width: 21px;
    height: 21px;
    color: rgba(215, 205, 184, 0.22);
    font-size: 21px;
    line-height: 19px;
    text-shadow: 0 2px 0 #000;
    transition: color 0.22s ease, text-shadow 0.22s ease;
}

.heart.active {
    color: #d9c7a9;
    text-shadow: 0 0 10px rgba(214, 75, 55, 0.5), 0 2px 0 #000;
}

#hud-score {
    min-width: 92px;
    padding: 7px 11px;
    color: #d7cdb8;
    text-align: right;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(215, 205, 184, 0.12);
    text-transform: uppercase;
}

#hud-score span {
    display: block;
    color: rgba(215, 205, 184, 0.58);
    font-size: 10px;
    font-weight: 800;
}

#hud-score strong {
    display: block;
    color: #8ee8ff;
    font-size: 20px;
    line-height: 1;
    text-shadow: 0 0 12px rgba(142, 232, 255, 0.28);
}

#hud-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    pointer-events: none;
}

#hud-meters {
    width: min(330px, 70vw);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px 12px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.04));
    border-left: 4px solid rgba(215, 205, 184, 0.18);
}

#fog-meter-container,
#shield-meter-container {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 11px;
}

#fog-meter-label,
#shield-meter-label {
    color: rgba(215, 205, 184, 0.72);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

#fog-meter-track,
#shield-meter-track {
    position: relative;
    height: 7px;
    background: rgba(6, 6, 5, 0.88);
    border: 1px solid rgba(215, 205, 184, 0.22);
    overflow: hidden;
}

#fog-meter-fill,
#shield-meter-fill {
    height: 100%;
    width: 0%;
    transition: width 0.22s ease;
}

#fog-meter-fill {
    background: linear-gradient(90deg, #7d786b, #e1d5be);
}

#shield-meter-fill {
    background: linear-gradient(90deg, #2f6d84, #8ee8ff);
    box-shadow: 0 0 12px rgba(100, 210, 255, 0.4);
}

#route-map {
    width: min(390px, 46vw);
    padding: 10px 12px 12px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.62), rgba(20, 18, 14, 0.42));
    border: 1px solid rgba(215, 205, 184, 0.16);
    border-right: 4px solid rgba(118, 189, 207, 0.45);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.42);
}

#route-map-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: rgba(215, 205, 184, 0.72);
    text-transform: uppercase;
}

#route-map-head span {
    font-size: 11px;
    font-weight: 900;
}

#route-map-head strong {
    color: #d7cdb8;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

#route-map-stage {
    position: relative;
    height: 92px;
    overflow: hidden;
    background:
        linear-gradient(rgba(215, 205, 184, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(215, 205, 184, 0.05) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(94, 180, 205, 0.08), transparent 58%),
        rgba(4, 4, 3, 0.62);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    border: 1px solid rgba(215, 205, 184, 0.12);
}

#route-map-path,
#route-map-player {
    position: absolute;
    inset: 0;
}

.route-node {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border: 1px solid rgba(215, 205, 184, 0.82);
    background: rgba(31, 28, 22, 0.95);
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(118, 210, 235, 0.16);
}

.route-node.done {
    background: #6fcce3;
    border-color: #dff8ff;
    box-shadow: 0 0 12px rgba(118, 210, 235, 0.68);
}

.route-node.exit {
    width: 12px;
    height: 12px;
    border-color: #e2d7bf;
}

.route-node.save {
    background: #d7cdb8;
    border-color: #ffffff;
}

.route-node.reward {
    background: #d3aa5c;
    border-color: #ffe3a3;
}

.route-node.life {
    border-radius: 50%;
    background: #c8665a;
    border-color: #ffd0c8;
}

.route-node.hazard {
    background: #9a4638;
    border-color: #ff927f;
}

.route-node.item,
.route-node.console,
.route-node.gravity {
    background: #2f6d84;
    border-color: #8ee8ff;
}

.route-link {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, rgba(215, 205, 184, 0.18), rgba(118, 210, 235, 0.36));
    transform-origin: left center;
}

#route-map-player::before {
    content: "";
    position: absolute;
    left: var(--map-x, 0%);
    top: var(--map-y, 100%);
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: #8ee8ff;
    box-shadow: 0 0 14px rgba(142, 232, 255, 0.95), 0 0 0 4px rgba(142, 232, 255, 0.12);
}

#route-map-legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    color: rgba(215, 205, 184, 0.62);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

#route-map-legend span {
    padding: 3px 6px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(215, 205, 184, 0.1);
}

#death-screen,
#complete-screen {
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, rgba(90, 82, 70, 0.16), transparent 42%),
        rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(5px);
}

.death-content,
.complete-content {
    width: min(560px, calc(100vw - 48px));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 28px;
    background: linear-gradient(135deg, rgba(20, 18, 15, 0.92), rgba(5, 5, 4, 0.92));
    border: 1px solid rgba(215, 205, 184, 0.22);
    border-left: 5px solid rgba(118, 189, 207, 0.55);
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.7);
}

.death-text {
    color: #e2d7bf;
    font-size: clamp(25px, 4vw, 42px);
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
}

.complete-sub {
    color: rgba(215, 205, 184, 0.72);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
}

#complete-next-act-text {
    color: #8ccfe1;
    font-size: 14px;
}

.complete-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

#death-screen .menu-btn {
    opacity: 0;
    pointer-events: none;
}

#death-screen.can-respawn .menu-btn {
    opacity: 1;
    pointer-events: all;
}

@media (max-width: 768px) {
    #menu-screen {
        padding: 30px 24px;
    }

    .menu-status {
        display: none;
    }

    .menu-options {
        left: 24px;
        right: 24px;
        bottom: 112px;
    }

    .menu-footer {
        left: 24px;
        right: 24px;
    }

    #hud {
        padding: 12px;
    }

    #hud-left {
        min-width: 0;
    }

    #hud-act {
        font-size: 18px;
    }

    #hud-area,
    #hud-checkpoint {
        font-size: 10px;
    }

    #hud-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    #route-map {
        width: min(360px, 92vw);
    }
}