body {
    margin: 0;
    background: #f8f5f0;
    font-family: sans-serif;
    overflow: hidden;
}

.hidden {
    display: none;
}

#titleScreen {
    width: 100vw;
    height: 100vh;

    display: flex;
    flex-direction: column;

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

    gap: 2vh;
}

.titleImage {
    width: 60vw;
    max-height: 60vh;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .titleImage {
        width: 85vw;
    }
}

#startButton {
    padding: 1.8vh 3vw;

    font-size: 2.6vh;

    border: none;

    background: #222;
    color: white;

    cursor: pointer;

    border-radius: 999px;
}

.audioOptions {
    position: fixed;

    bottom: 2vh;
    right: 2vw;

    display: flex;
    align-items: center;

    gap: 1vw;

    z-index: 9999;

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

    padding: 1vh 1vw;

    border-radius: 999px;
}

#gameContainer {
    width: 100vw;
    height: 100vh;

    position: relative;
}

#timerBarContainer {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2vh;

    background: #ccc;

    z-index: 50;
}

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

    background: #444;

    transition: width 1s linear;
}

#scoreArea {
    position: absolute;

    top: 4vh;
    left: 2vw;

    font-size: clamp(2.5vh, 3.5vw, 4.2vh);

    z-index: 50;
}

#characterArea {
    position: absolute;

    top: 13vh;
    right: 8vw;

    display: flex;
    align-items: flex-end;
}

@media (max-width: 768px) {
    #characterArea {
        transform: translateY(15vh);
    }
}

.character {
    user-select: none;
    pointer-events: none;
}

.targetArea {
    display: flex;
    flex-direction: row;

    align-items: flex-end;

    gap: 6vw;
}

.target {
    display: flex;
    flex-direction: column;

    align-items: center;
}

.rightChar {
    height: clamp(14vh, 16vw, 28vh);
}

@media (max-width: 768px) {
    .rightChar {
        height: 10vh;
    }
}

.hitBar {
    width: 6vw;
    height: 1.8vh;

    margin-top: 1.5vh;

    border-radius: 999px;

    border: 0.4vh solid #444;

    box-sizing: border-box;
}

@media (max-width: 768px) {
    .hitBar {
        width: 8vw;
    }
}

.target[data-color="pink"] .hitBar {
    background: #fac3ea;
}

.target[data-color="green"] .hitBar {
    background: #afc49d;
}

.target[data-color="white"] .hitBar {
    background: #f2f2f2;
}

#lane {
    position: absolute;

    bottom: 30vh;

    left: 5vw;
    right: 5vw;

    height: 15vh;

    display: flex;
    align-items: flex-end;

    gap: 2vw;
}

@media (max-width: 768px) {
    #lane {
        transform: translateY(-10vh);
    }
}

#laneAutumn {
    height: clamp(18vh, 20vw, 34vh);
    width: auto;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    #laneAutumn {
        height: 14vh;
        width: auto;
    }
}

#track {
    position: relative;

    flex: 1;

    height: 100%;

    border-bottom: 0.6vh solid #444;
}

@media (max-width: 768px) {
    #track {
        border-bottom: 0.3vh solid #444;
    }
}

.dango {
    position: absolute;

    width: clamp(3.5vw, 2.8vh, 5.2vw);
    height: clamp(3.5vw, 2.8vh, 5.2vw);

    bottom: 1vh;
}

#judgement {
    position: absolute;

    top: 40%;
    left: 50%;

    transform: translateX(-50%);

    width: 25vw;

    opacity: 0;

    transition: opacity 0.2s;

    z-index: 100;

    pointer-events: none;
}

.judgeShow {
    opacity: 1 !important;
}

#endingScreen.showEnding {
    display: flex;
}

#endingScreen {
    position: fixed;

    inset: 0;

    background: #f8f5f0;

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

    z-index: 999;
}

#endingImage {
    width: 60vw;
    max-height: 60vh;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    #endingImage {
        width: 80vw;
    }
}

#endingContent {
    display: flex;
    flex-direction: column;

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

    gap: 2.5vh;
}

#endingText {
    font-size: clamp(2.5vh, 4vw, 4.5vh);
    font-weight: bold;

    color: #222;

    text-align: left;
    align-self: flex-start;
}

.resetButton {
    padding: 1.8vh 3vw;

    font-size: 2.6vh;

    border: none;

    background: #222;
    color: white;

    cursor: pointer;

    border-radius: 999px;
}

#spaceGuide {
    position: absolute;

    bottom: 2vh;
    left: 50%;

    transform: translateX(-50%);

    font-size: clamp(2.2vh, 3.2vw, 3.5vh);
    font-weight: bold;

    color: #444;

    letter-spacing: 0.2vw;
    opacity: 0.85;

    z-index: 100;

    user-select: none;
    pointer-events: none;
}