:root {
    --animation-color: rgb(144, 249, 227);
    --background-color: rgb(224, 223, 209);
    --background-color-hover1: rgb(144, 249, 227);
    --background-color-hover2: rgba(144, 249, 227, 0.8);
    --box-shadow-color1: rgb(212, 212, 196);
    --box-shadow-color2: rgb(223, 223, 198);
    --note-color: rgb(88, 153, 144);
    
}

.key {
    border: 0px;
    min-width: 5vw;
    min-height: 5vw;
    border-radius: 999px;
    background-color: var(--background-color);
    box-shadow: 0 0 0.1vw 0.4vw var(--box-shadow-color1),
    0 0 0.1vw 0.7vw var(--box-shadow-color2);
}

.orientation-warning-content p {
    margin: 0;
    margin-top: 3vw;
}

.close-orientation-warning {
    position: absolute;
    top: 59%;
    right: 20%;
    background: transparent;
    border: none;
    color: green;
    font-size: 6.5vw;
    font-family: 'genshin impact', Fallback, sans-serif;
    cursor: pointer;
    width: 55vw;
    height: 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}

.text {
    font-size: 1.2vw;
    margin-top: 3.2vw;
    display: inline-block;
    color: rgb(150, 148, 120);
    font-family: 'genshin impact', Fallback, sans-serif;
}

.triangle {
    padding: 1vw 2vw;
    position: relative;
}

.triangle::before,
.triangle::after,
.triangleTop,
.triangleBottom {
    width: 0;
    height: 0;
    content: "";
    display: inherit;
    position: absolute;
    border-style: solid;
}

.triangle::before {
    top: calc(50% - 0.5vw);
    right: calc(100% - 2.2vw);
    border-width: 0.5vw 0.5vw 0.5vw 0;
    border-color: transparent var(--background-color) transparent transparent;
}

.triangle::after {
    top: calc(50% - 0.5vw);
    left: calc(100% - 2.2vw);
    border-width: 0.5vw 0 0.5vw 0.5vw;
    border-color: transparent transparent transparent var(--background-color);
}

.triangleTop {
    left: calc(50% - 0.5vw);
    bottom: calc(100% - 2.2vw);
    border-width: 0 0.5vw 0.5vw 0.5vw;
    border-color: transparent transparent var(--background-color) transparent;
}

.triangleBottom {
    left: calc(50% - 0.5vw);
    top: calc(100% - 2.2vw);
    border-width: 0.5vw 0.5vw 0 0.5vw;
    border-color: var(--background-color) transparent transparent transparent;
}

.triangle:active .key,
.key-press .key {
    background-color: var(--background-color-hover1);
    box-shadow: 0 0 0.1vw 0.5vw var(--background-color-hover2);
}

.triangle:active .text, .key-press .text,
.triangle:active .note1, .key-press .note1,
.triangle:active .note2, .key-press .note2,
.triangle:active .note3, .key-press .note3,
.triangle:active .note4, .key-press .note4,
.triangle:active .note5, .key-press .note5,
.triangle:active .note6, .key-press .note6,
.triangle:active .note7, .key-press .note7,
.triangle:active .note8, .key-press .note8,
.triangle:active .note9, .key-press .note9 {
    color:rgba(255, 255, 255, 0.8);
}

.triangle:active::after,
.key-press::after {
    border-color: transparent transparent transparent var(--background-color-hover1);
}

.triangle:active::before,
.key-press::before {
    border-color: transparent var(--background-color-hover1) transparent transparent;
}

.triangle:active .triangleTop,
.key-press .triangleTop {
    border-color: transparent transparent var(--background-color-hover1) transparent;
}

.triangle:active .triangleBottom,
.key-press .triangleBottom {
    border-color: var(--background-color-hover1) transparent transparent transparent;
}

.IDspread {
    top: 1.75vw;
    left: 1.78vw;
    min-width: 5vw;
    min-height: 5vw;
    position: absolute;
    border-radius: 100%;
    pointer-events: none;
}

#spread1 {
    animation: animation1 0.5s ease-out 0s 1 normal;
}

#spread2 {
    animation: animation2 0.5s ease-out 0s 1 normal;
}

#keyboard {
    bottom: 5vh;
    position: fixed;
    width: min-content;
}

.location {
    display: flex;
    justify-content: center;
}

.clef,
.clef0 {
    font-size: 5vw;
    min-width: 5vw;
    min-height: 5vw;
    text-align: center;
    display: inline-block;
    color: rgba(255, 255, 255, 0.7);
}

.clef {
    margin: 1vw;
}

.clef0 {
    margin: 0.2vw 1vw 1.8vw 1vw;
}

.line1-1, .line1-2, .line1-3, .line1-4, .line1-5,
.line2-1, .line2-2, .line2-3, .line2-4, .line2-5,
.line3-1, .line3-2, .line3-3, .line3-4, .line3-5 {
    left: 7vw;
    z-index: -1;
    width: 64.2vw;
    height: 0.05vw;
    position: absolute;
    display: inline-block;
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(255, 255, 255, 0.1);
}

.line1-1 {bottom: calc(100% - 3.2vw);}
.line1-2 {bottom: calc(100% - 4.0vw);}
.line1-3 {bottom: calc(100% - 4.8vw);}
.line1-4 {bottom: calc(100% - 5.6vw);}
.line1-5 {bottom: calc(100% - 6.4vw);}

.line2-1 {bottom: calc(66.6% - 3.2vw);}
.line2-2 {bottom: calc(66.6% - 4.0vw);}
.line2-3 {bottom: calc(66.6% - 4.8vw);}
.line2-4 {bottom: calc(66.6% - 5.6vw);}
.line2-5 {bottom: calc(66.6% - 6.4vw);}

.line3-1 {bottom: calc(33.3% - 3.2vw);}
.line3-2 {bottom: calc(33.3% - 4.0vw);}
.line3-3 {bottom: calc(33.3% - 4.8vw);}
.line3-4 {bottom: calc(33.3% - 5.6vw);}
.line3-5 {bottom: calc(33.3% - 6.4vw);}

.note1, .note2, .note3, .note4,
.note5, .note6, .note7, .note8, .note9 {
    position: absolute;
    pointer-events: none;
    display: inline-block;
    transform: scale(1, 1.2);
    text-shadow: 0 0 0.1vw, 0 0 0.1vw;
}
.note1, .note2, .note3,
.note5, .note6, .note7, .note8 {
    left: 3.1vw;
    font-size: 3.4vw;
    font-weight: 900;
}

.note4, .note9 {
    left: 3.2vw;
    font-size: 6vw;
}

.note1 {top: 0.85vw;}
.note2 {top: 1.65vw;}
.note3 {top: 2.45vw;}
.note4 {top: -2.05vw;}
.note5 {top: 0.6vw;}
.note6 {top: 1.4vw;}
.note7 {top: 2.2vw;}
.note8 {top: 2.75vw;}
.note9 {top: -2.3vw;}

#loadDiv {
    width: 100vw;
    height: 100vh;
    background-color: var(--dialog-background-color);
    color: var(--background-text1);
    font-family: 'genshin impact', Fallback, sans-serif;
    font-size: 3vw;
    text-align: center;
    line-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

/* 横屏提醒弹窗样式 */
.orientation-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.orientation-warning-content {
    text-align: center;
    color: white;
    font-family: 'genshin impact', Fallback, sans-serif;
    font-size: 5vw;
    padding: 2vw;
}

.orientation-warning-content p {
    margin: 0;
    margin-top: 3vw;
}

/* 旋转图标样式 */
.rotate-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rotate-icon img {
    width: 15vw;
    height: 15vw;
    animation: rotateAnimation 2s ease-in-out infinite;
}

/* 旋转动画 */
@keyframes rotateAnimation {
    0% {
        transform: rotate(230deg);
    }
    50% {
        transform: rotate(140deg);
    }
    100% {
        transform: rotate(230deg);
    }
}
/* 音量控制样式 */

.volume-control {
    position: relative;
    z-index: 99;
    top: 8vh;
    left: 50%;
    width: 300px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8vw;
    z-index: 9981;
    padding: 0vw;
}

/* 确保不被工具栏遮挡 */
.toolbar {
    z-index: 100 !important;
}

.volume-label {
    font-size: 1.8vw;
    color: rgb(150, 148, 120);
    font-family: 'genshin impact', Fallback, sans-serif;
    margin-right: 0.5vw;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 20vw;
    height: 0.4vw;
    background: rgba(144,249,227,0.3);
    border-radius: 0.5vw;
    outline: none;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.volume-slider:hover {
    opacity: 1;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.6vw;
    height: 1.6vw;
    background: rgb(144,249,227);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 0.5vw rgba(144,249,227,0.5);
}

.volume-slider::-moz-range-thumb {
    width: 1.2vw;
    height: 1.2vw;
    background: var(--note-color);
    cursor: pointer;
    border-radius: 50%;
    border: none;
}