/****************
* general stuff *
*****************/

@font-face {
    font-family: "Apple SD Gothic Neo Thin";
    src: 
        local("Apple SD Gothic Neo Thin"),
        url("fonts/AppleSDGothicNeoThin.woff2") format("woff2"),
        url("fonts/AppleSDGothicNeoThin.woff") format("woff"),
        url("fonts/AppleSDGothicNeoThin.otf") format("opentype"),
        url("fonts/AppleSDGothicNeoThin.ttf") format("truetype");
}

html, body {
    overflow:           hidden;
    /* no scrolling */
}

body {
    background-color:   var(--bg2);
    font-size:          14pt;

    /* no text marking by user */
    user-select:        none;
    -webkit-user-select: none;

    /* for touch */
    overscroll-behavior: none;
}

#appscaler {
    /* this one scales the app to the current screen size  */
    position:           absolute;
    top:                0;
    left:               0;

    transform-origin:   top left;
}

.appspacer {
    /* this one stretches the plane to the space needed */
    width:              1240px;
    height:             820px;
}

.curtain {
    /* a dark gray layer that covers everything below an opened window */ 
    position:           fixed;
    inset:              0;

    background-color:   rgba(1, 1, 1, 0.8);
    z-index:            100;
}



/************
* Klaviatur *
*************/

#keyboardContainer {
    touch-action:       none;
}

.key { /* common key class */
    position:           absolute;
    top:                150px;

    border:             solid 2px var(--bg1);
    border-bottom-left-radius:  7px;
    border-bottom-right-radius: 7px;

    text-align:         center;
    cursor:             pointer;
    touch-action:       none;
}

.white {
    background-color:   var(--light);
    width:              98px;
    height:             550px;
    color:              var(--bg1);
    z-index:            1;
}

.black {
    background-color:   var(--bg1);
    width:              42px;
    height:             350px;
    color:              var(--light);
    z-index:            3;
}

.quarter {
    background-color:   var(--c1light);
    width:              20px;
    height:             270px;
    color:              var(--bg1);
    z-index:            2;
}



/*********
* labels *
**********/

.label { /* common label class */ 
    position:           absolute;
    left:               50%;
    transform:          translateX(-50%);
    white-space:        nowrap;

    /* for Glissando */
    pointer-events:     none;
    user-select:        none;
    pointer-events:     none;

}


/* frequency labels */
.freq {
    transform:          translateX(-50%) rotate(-90deg);
}
.white .freq {  bottom: 135px; }
.black .freq, .quarter .freq { top: 100px; }


/* Tastatur-Shortcut as little squares */
.shortcut {
    bottom:             50px;

    display:            inline-flex;
    align-items:        center;
    justify-content:    center;

    width:              21px;
    height:             21px;
    border:             1px solid var(--bg1);
    border-radius:      3px;

    line-height:        1.4;
}
.black .shortcut { border-color: var(--light); }
.quarter .shortcut { width: 16px; height: 16px; }


/* tone name labels */
.tone {
    bottom:             10px;
    letter-spacing:     0.0em;
}
.quarter .tone {
    transform:          translateX(-50%) rotate(-90deg);
    transform-origin:   center;
}
.hochstrich {
    letter-spacing: -0.2em;  /* deutlich enger */
}

/* kleinere Shrift */
.quarter .shortcut, .quarter .tone, .freq { font-size: 66%; }



/*************************
* other keys and buttons *
**************************/

#startButton {
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
    z-index:            101; 
    width:              350px;
}

.function {
    background-color:   var(--c2strong);
    width:              66px;
    height:             40px;

    text-align:         center;
    font-size:          1rem;
    line-height:        2;
    color:              var(--light);
}

.function:active, .pressed {
    background-color:   var(--c2light);
}

.pedal {
    top:                730px; 
    left:               400px;
    width:              500px;
    height:             40px;
    border-radius:      7px;

    box-sizing:         border-box;
    line-height:        1;
    display:            flex;
    align-items:        flex-end;
    justify-content:    flex-end;
    padding:            2px 2px;

    font-size: 0.6em;
    color: rgba(0,0,0,0.5);
}

.pedal.pressed {
    background:         var(--c2light);
}



/***********************
* quarter tone symbols *
************************/

.musical_b, .mirrored_b {
    display: inline-block;
    transform: scaleY(1.3);
    font-style: normal;
}

.mirrored_b {
    transform: scaleX(-1) scaleY(1.3);
}

/* Viertelton Halfsharp */
.halfsharp {
    display: inline-block;
    overflow: hidden;
    width: 0.5em;          /* nur halbes Zeichen sichtbar */
    vertical-align: middle;
}

.halfsharp span {
    display: inline-block;
    transform: scaleX(1.2) translateX(-40%); 
}



/*****************
* settings panel *
******************/

/* panel itself */
#settings {
    position:           fixed;

    top:                50%;
    left:               50%;

    width:              min(850px, 90vw);
    max-height:         90vh;

    transform:          translate(-50%, -50%);

    overflow-y:         auto;

    z-index:            101;

    background:         var(--bg2);
    border:             2px solid var(--bg1);
    border-radius:      7px;
    box-shadow:         0 10px 35px rgba(0, 0, 0, 1);

    padding:            10px;
}

/* fieldsets */
#settings fieldset {
    border:             1px solid var(--c1strong);
    border-radius:      7px;
    padding:            0px 18px 18px 18px;
    margin-bottom:      15px;
}

/* fieldset headings */
#settings legend {
    color:              var(--light);
    margin-bottom:      0px;
}

/* column layout for checkboxes */
.setting-row {
    display:            flex;
    justify-content:    space-between;
    margin-top:         0px;
}

@media (max-width: 600px) {
    .setting-row {
        flex-direction: column;
        gap: 5px;
    }
}

.setting-row label {
    display:            block;
    margin-bottom:      3px;
}

.settings-footer {
    display:            flex;
    justify-content:    flex-end;
    margin-top:         20px;
}

/**********************
* several input types *
***********************/

#settings input[type="range"] {
    width:              200px;
}