/* Global Styles */
body {
    margin: 0;
    line-height: normal;
    background-color: #000;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* Index Styles */
.home {
    width: 852px;
    height: 393px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    border-radius: 0;
    background-color: #1a0000;
    overflow: hidden;
    text-align: center;
    font-size: 12px;
    color: #fff;
    font-family: 'Kanit', sans-serif;
    box-shadow: none;
}

.image-2-parent {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #1a0000;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-2-icon {
    position: absolute;
    top: calc(50% - 217.5px);
    left: calc(50% - 388px);
    width: 776px;
    height: 435px;
    object-fit: cover;
    flex-shrink: 0;
}

.frame-child {
    position: absolute;
    top: 4px;
    right: 65px;
    width: 210px;
    height: 150px;
    object-fit: cover;
    flex-shrink: 0;
}

.menu {
    position: absolute;
    top: calc(50% - 177.5px);
    left: 16px;
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
}

.menu-inner {
    align-self: stretch;
    height: 80px;
    position: relative;
    backdrop-filter: blur(34px);
    border-radius: 20px;
    background: transparent;
    border: 4px solid #c9a861;
    box-sizing: border-box;
    flex-shrink: 0;
    display: block;
}

.esports-parent {
    position: absolute;
    top: calc(50% - 33px);
    left: calc(50% - 24px);
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 0px 4px;
    box-sizing: border-box;
}

.esports-icon {
    align-self: stretch;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}

.menu-child {
    align-self: stretch;
    height: 80px;
    position: relative;
    backdrop-filter: blur(34px);
    border-radius: 20px;
    background: transparent;
    border: 4px solid #c9a861;
    box-sizing: border-box;
    flex-shrink: 0;
    display: block;
}

/* Active menu item - when on current page */
.menu-child.menu-active,
.menu-inner.menu-active {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 6px #ad193f inset, 0px 0px 0px 8px #75001e inset;
    background: linear-gradient(180deg, #75001e, #ad193f) padding-box, linear-gradient(180deg, #ffe3aa, #99814f) border-box;
    overflow: hidden;
}

.hourglass-icon {
    width: 48px;
    position: relative;
    max-height: 100%;
}

.history {
    align-self: stretch;
    position: relative;
}

.winner {
    position: relative;
}

.inventory-icon {
    width: 48px;
    position: relative;
    max-height: 100%;
    flex-shrink: 0;
}

.account {
    position: relative;
    flex-shrink: 0;
}

.frame-parent {
    position: absolute;
    top: 19px;
    left: 116px;
    backdrop-filter: blur(24px);
    border-radius: 20px;
    background: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.5)) padding-box, linear-gradient(180deg, #ffe3aa, #99814f) border-box;
    border: 2px solid transparent;
    box-sizing: border-box;
    width: 302px;
    height: 356px;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 32px;
    font-family: Kanit;
}

.medal-parent {
    position: absolute;
    top: 0px;
    left: calc(50% - 101px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0px;
}

.ranking-coin {
    position: relative;
    font-weight: 900;
    text-shadow: 2px 0 0 #000, 0 2px 0 #000, -2px 0 0 #000, 0 -2px 0 #000;
}

.view-ranking-coin {
    position: relative;
    font-size: 12px;
    text-decoration: underline;
    font-family: 'SF Pro';
    color: #b8ff84;
    text-align: left;
}

.frame-group {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 302px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0px;
    box-sizing: border-box;
    gap: 24px;
    text-align: left;
    font-size: 20px;
    font-family: 'SF Pro';
}

.frame-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 20px;
    gap: 12px;
}

.my-play-parent {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 8px;
}

.my-play {
    position: relative;
    font-weight: 900;
}

.frame-item {
    height: 1px;
    flex: 1;
    position: relative;
    border-top: 1px dashed rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
}

.sword-parent {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 32px;
}

.sword-icon {
    width: 40px;
    position: relative;
    max-height: 100%;
}

.my-coins-parent {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 12px;
}

.frame-parent3 {
    position: absolute;
    bottom: 22px;
    left: 562px;
    width: 236.1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    font-size: 32px;
    color: #000;
    font-family: Kanit;
}

.rectangle-parent {
    align-self: stretch;
    height: 60px;
    position: relative;
    box-shadow: -1px -1px 0px #fe5253 inset, 1px 1px 0px #ffe3aa inset;
    border-radius: 12px;
    background-color: #000;
    overflow: hidden;
    flex-shrink: 0;
}

.rectangle-div {
    position: absolute;
    top: calc(50% - 26px);
    left: calc(50% - 114.05px);
    box-shadow: 0px -1px 0px #fff inset, 0px 2px 0px #fff inset;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #e1c59c);
    width: 228px;
    height: 52px;
}

.button-label {
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 63.05px);
    font-weight: 800;
}

.button-label2 {
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 72.05px);
    font-weight: 800;
}

.button-small {
    width: 242.9px;
    height: 81.8px;
    position: relative;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.45);
    border-radius: 13.64px;
    background-color: #9e1838;
    border: 3.4px solid #5a0923;
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 36px;
    color: #fff;
}

.button-small-child {
    position: absolute;
    width: 100%;
    top: 17.05px;
    right: 0%;
    left: 0%;
    background: linear-gradient(90deg, #ff83a9, #ff83a9 28%, rgba(255, 131, 169, 0) 38.05%, #ff83a9 47.5%, #ff83a9 71.36%, rgba(255, 131, 169, 0) 76.72%, #ff83a9 82.21%, #ff83a9);
    height: 1.7px;
    flex-shrink: 0;
}

.button-small-item {
    position: absolute;
    width: 100%;
    top: 57.95px;
    right: 0%;
    left: 0%;
    background: linear-gradient(-90deg, #db2c5a, #db2c5a 31.84%, rgba(219, 44, 90, 0) 35.1%, #db2c5a 38.8%, #db2c5a 65.46%, rgba(219, 44, 90, 0) 71.31%, #db2c5a 77.23%, #db2c5a);
    height: 1.7px;
    flex-shrink: 0;
}

.button-small-inner {
    position: absolute;
    width: 100%;
    top: calc(50% - 37.5px);
    right: 0%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    height: 17px;
    mix-blend-mode: normal;
    flex-shrink: 0;
}

.rectangle-icon {
    position: absolute;
    width: 100%;
    top: calc(50% + 20.45px);
    right: 0%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    height: 17px;
    object-fit: contain;
    mix-blend-mode: normal;
    flex-shrink: 0;
}

.button-small-child2 {
    position: absolute;
    top: calc(50% - 37.5px);
    right: 0.06px;
    width: 13.6px;
    height: 75px;
    mix-blend-mode: normal;
    flex-shrink: 0;
}

.frame-icon {
    position: absolute;
    top: 17.05px;
    left: 13.64px;
    width: 11.1px;
    height: 27.3px;
    object-fit: cover;
    flex-shrink: 0;
}

.button-small-child3 {
    position: absolute;
    top: 17.05px;
    right: 13.64px;
    width: 11.1px;
    height: 13.6px;
    object-fit: contain;
    flex-shrink: 0;
}

.button-small-child4 {
    position: absolute;
    top: calc(50% - 37.5px);
    left: 0px;
    width: 13.6px;
    height: 75px;
    object-fit: contain;
    mix-blend-mode: normal;
    flex-shrink: 0;
}

.button-small-child5 {
    position: absolute;
    top: 57.95px;
    left: 13.64px;
    width: 11.1px;
    height: 13.6px;
    object-fit: cover;
    flex-shrink: 0;
}

.button-small-child6 {
    position: absolute;
    top: 35.8px;
    right: 13.64px;
    width: 11.1px;
    height: 22.2px;
    object-fit: contain;
    flex-shrink: 0;
}

.vector-icon {
    position: absolute;
    bottom: 26.38px;
    left: 26.42px;
    width: 6.8px;
    height: 4.3px;
    flex-shrink: 0;
}

.vector-icon2 {
    position: absolute;
    top: 28.98px;
    right: 31.57px;
    width: 6.8px;
    height: 4.3px;
    flex-shrink: 0;
}

.vector-icon3 {
    position: absolute;
    top: 6.82px;
    left: 69.89px;
    width: 6px;
    height: 3.4px;
    flex-shrink: 0;
}

.vector-icon4 {
    position: absolute;
    right: 56.29px;
    bottom: 5.12px;
    width: 6.8px;
    height: 3.4px;
    flex-shrink: 0;
}

.button-label3 {
    position: absolute;
    top: calc(50% - 28px);
    left: calc(50% - 38.51px);
    font-weight: 800;
    text-shadow: 0.4px 0 0 #000, 0 0.4px 0 #000, -0.4px 0 0 #000, 0 -0.4px 0 #000;
    flex-shrink: 0;
}

.home-barpro-icon {
    position: absolute;
    top: calc(50% - 196.5px);
    right: 0px;
    width: 34px;
    height: 393px;
    object-fit: contain;
}