/* This SigQuiz-styles-Jan_25-old.css is refered to by file:///C:/SigWizz/SigQuiz-Jan-25-new.html
/* General styles */

/*h1 {color: #cfb53b} */
/*h1 { color: gold; } */


/* Grid layout for cards */
#game-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    justify-items: center;
    margin: 10px 0;
}

/* Prompt */
#game-prompt {
    font-size: 1.2em;
    font-style: italic;
    text-align: center;
    margin: 30px 0;
}
/* Dropdown menu */
select#level-select {
    max-height: 150px; /* Adjust this value to control the dropdown height.  Was 150px */
    overflow-y: auto; /* Adds a scrollbar if the content exceeds max-height */
    font-size: 15px; /* Optional: Adjust the font size for better scaling 12px*/
}
#sound-toggle {
    position: absolute;
    top: 10px; /*10/20*/
    right: 30px; /*10/20*/
}
#sponsor-placeholder {
    position: absolute;
    left: 50px; /* Adjust to align with the flats row */
    bottom: 50px; /* Adjust based on screen layout */
}

/* Tonality card */
.tonality-card {
    position: relative;
    width: 84px;/*84px, then 295*/
    height: 121px;/*121, then 158*/
    border: 2px solid #007bff;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.tonality-card .front, .tonality-card .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
/* Unused & redondunt lines 60-68*/
.tonality-card .back {
    transform: rotateY(180deg);
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Key signature option (Answer cards)*/
.key-signature-option {
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;//* pointer*/
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #f9f9f9;
}
img {
    cursor: pointer; /* Changes pointer to a hand when hovering over the cards */
}
.key-signature-option:hover {
    background-color: #f0f0f0;
    border-color: #007bff;
}
#signature-board {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;// Space between key signature answer cards was 10px originally
}

#signature-board img {
    margin: 5px;
}

.feedback {
    position: fixed;
    top: 600px;
    width: 80%;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    z-index: 1000;
}

#feedback-banner.success {
    background-color: green;
}

#feedback-banner.error {
    background-color: red;
}

#feedback-banner.visible {
    opacity: 1;
}