body {
    color: #ffffff;
    background-color: #444444;
    width: 100vw; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    margin: 0; line-height: 1;
    image-rendering: pixelated; font-smooth: never;
} main > p { text-align: center; }
main { height: fit-content; }

@media (width < 1082px) { body { justify-content: left; } }
@media (height < 862px) { body { align-items: baseline; } }

span { display: inline-block; transform-origin: left; }



#menu {
    left: 50%; translate: -50%;
    width: 1082px; height: 682px; position: relative;
    font-family: "Determination Sans"; font-size: 64px;
} #menu.s { background-image: url(/assets/media/stats.webp); background-size: cover; }
#menu.e { background-image: url(/assets/media/equip.webp); background-size: cover; }
#menu > section { position: absolute; margin: 0; }
#menu > section div { position: relative; }

#menu.s #char { width: 1026px; height: 244px; top: 28px; left: 28px; }
#menu.s #stats { width: 460px; height: 370px; top: 284px; left: 28px; }
#menu.s #spells { width: 554px; height: 370px; top: 284px; left: 500px; }
#menu.s #equipped, #menu.s #weapons { display: none; }

#menu.e #char { width: 412px; height: 254px; top: 28px; left: 28px; }
#menu.e #equipped { width: 602px; height: 254px; top: 28px; left: 452px; }
#menu.e #stats { width: 518px; height: 360px; top: 294px; left: 28px; }
#menu.e #weapons { width: 496px; height: 360px; top: 294px; left: 558px; }
#menu.e #spells, #menu.e #title { display: none; }

.empty { opacity: 0.25; }



#name {
    position: absolute;
    top: 22px; left: 132px;
    display: block;
    width: fit-content;
}



#charlist {
    top: 132px; left: 58px;
    width: fit-content;
    display: flex;
} .char {
    margin: 0 6px;
    width: fit-content;
    display: flex; justify-content: center;
    opacity: 0.4;
} .char img { height: 80px; }
.char.selected { opacity: 1; }
.char.selected::before {
    width: 64px; height: 32px;
    background-image: url(/assets/media/menu-icons/heart-arrowed.webp); background-size: cover;
    position: absolute;
    top: -38px; margin: 0 auto;
    translate: 2px;
    content: "";
}



#title {
    position: absolute;
    top: 22px; left: 512px;
    display: inline-block;
} #title > p { margin: 0; }



.stat {
    position: absolute;
    top: 22px; left: 72px;
    width: fit-content; margin-bottom: -1px;
    line-height: 0.8;
} .statvalue {
    position: absolute;
    width: 128px;
    left: 260px;
} .stat img { height: 48px; }
.stat::before {
    position: absolute;
    width: 36px; height: 48px;
    top: 50%;
    translate: -52px -50%;
    transform: translateY(4px);
    content: "";
} #menu.e .stat { line-height: 0.86; top: 10px; }
#atk::before { background-image: url(/assets/media/menu-icons/stat-1.webp); background-size: cover; }
#def::before { background-image: url(/assets/media/menu-icons/stat-4.webp); background-size: cover; }
#mag::before { background-image: url(/assets/media/menu-icons/stat-5.webp); background-size: cover; }
.s #stats > .stat:last-child::before { background-image: url(/assets/media/menu-icons/stat-9.webp); background-size: cover; }

.s #stats > .stat:last-child { translate: 0 -1px; }
.s #stats > .stat:last-child > .statvalue {
    position: absolute;
    top: 50%; left: 180px;
    translate: -2px -50%;
    transform: translateY(4px);
    display: flex;
} .s #stats > .stat:last-child > span > img {
    display: inline-block;
    margin: 0 2px;
}



.spell {
    position: absolute;
    top: 22px; left: 80px;
    width: fit-content;
    line-height: 0.8;
    opacity: 0.5;
} .spellname {
    position: absolute;
    width: 334px; left: 140px;
}



.equip::before, .eitem::before, .stat::before {
    background-size: cover; mask-size: cover;
    position: absolute; display: inline-block;
    content: "";
} .equip::before {
    width: 52px; height: 72px;
    top: -2px; left: -126px;
} .eitem::before {
    width: 40px; height: 48px;
    top: 10px; left: -44px;
}
.equip.selected::before, .eitem.selected::before {
    width: 2px; height: 2px;
    background-image: url(/assets/media/poisoned.png);
} .equip {
    position: absolute;
    top: 38px; left: 178px;
    width: 424px; line-height: 0.94;
}

.equip.krs::before { background-image: url(/assets/media/menu-icons/equip-1.webp); }
.equip.ass::before { background-image: url(/assets/media/menu-icons/equip-2.webp); }
.equip.ral::before { background-image: url(/assets/media/menu-icons/equip-3.webp); }
.equip.nol::before { background-image: url(/assets/media/menu-icons/equip-4.webp); }
.equip:first-child::before { top: -10px; }
.equip:nth-child(2)::before { background-image: url(/assets/media/menu-icons/equip-4.webp); }

.equip:last-child::before { background-image: url(/assets/media/menu-icons/equip-5.webp); }

.i-1::before { background-image: url(/assets/media/menu-icons/stat-1.webp); mask-image: url(/assets/media/menu-icons/stat-1.webp); }
.i-2::before { background-image: url(/assets/media/menu-icons/stat-2.webp); mask-image: url(/assets/media/menu-icons/stat-2.webp); }
.i-3::before { background-image: url(/assets/media/menu-icons/stat-3.webp); mask-image: url(/assets/media/menu-icons/stat-3.webp); }
.i-4::before { background-image: url(/assets/media/menu-icons/stat-4.webp); mask-image: url(/assets/media/menu-icons/stat-4.webp); }
.i-5::before { background-image: url(/assets/media/menu-icons/stat-5.webp); mask-image: url(/assets/media/menu-icons/stat-5.webp); }
.i-6::before { background-image: url(/assets/media/menu-icons/stat-6.webp); mask-image: url(/assets/media/menu-icons/stat-6.webp); }
.i-7::before { background-image: url(/assets/media/menu-icons/stat-7.webp); mask-image: url(/assets/media/menu-icons/stat-7.webp); }
.i-8::before { background-image: url(/assets/media/menu-icons/stat-8.webp); mask-image: url(/assets/media/menu-icons/stat-8.webp); }
.i-9::before { background-image: url(/assets/media/menu-icons/stat-9.webp); mask-image: url(/assets/media/menu-icons/stat-9.webp); }
.i-10::before { background-image: url(/assets/media/menu-icons/stat-10.webp); mask-image: url(/assets/media/menu-icons/stat-10.webp); }
.i-11::before { background-image: url(/assets/media/menu-icons/stat-11.webp); mask-image: url(/assets/media/menu-icons/stat-11.webp); }
.i-12::before { background-image: url(/assets/media/menu-icons/stat-12.webp); mask-image: url(/assets/media/menu-icons/stat-12.webp); }
.i-13::before { background-image: url(/assets/media/menu-icons/stat-13.webp); mask-image: url(/assets/media/menu-icons/stat-13.webp); }
.i-14::before { background-image: url(/assets/media/menu-icons/stat-14.webp); mask-image: url(/assets/media/menu-icons/stat-14.webp); }
.i-15::before { background-image: url(/assets/media/menu-icons/stat-15.webp); mask-image: url(/assets/media/menu-icons/stat-15.webp); }
.i-16::before { background-image: url(/assets/media/menu-icons/stat-16.webp); mask-image: url(/assets/media/menu-icons/stat-16.webp); }
.i-17::before { background-image: url(/assets/media/menu-icons/stat-17.webp); mask-image: url(/assets/media/menu-icons/stat-17.webp); }
.i-18::before { background-image: url(/assets/media/menu-icons/stat-18.webp); mask-image: url(/assets/media/menu-icons/stat-18.webp); }
.i-19::before { background-image: url(/assets/media/menu-icons/stat-19.webp); mask-image: url(/assets/media/menu-icons/stat-19.webp); }

.e .stat:nth-child(4)::before, .e .stat:nth-child(5)::before, .e .stat:nth-child(6)::before {
    background-color: #ffa040; background-blend-mode: multiply; top: 32px;
} .stat:nth-child(4).empty::before, .stat:nth-child(5).empty::before, .stat:nth-child(6).empty::before { background: none; }





#settings {
    display: none;
}