@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');

html {
    height: var(--mc-vvh, 100svh);
    max-height: var(--mc-vvh, 100svh);
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--mc-vvh, 100svh);
    margin: 0;
    background-color: #ffffff;
    padding: 0;
    overflow: hidden;
}

#game-container {
    text-align: center;
    width: 600px;
    margin: auto;
    color: #222;
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    box-sizing: border-box;
}

#title-section { margin-bottom: 10px; }
#subtitle { text-transform: uppercase; font-size: 10pt; letter-spacing: 2px; font-weight: normal; margin: 0; color: #999; }
#title { font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 3.5em; margin: 0; color: #22b4be; }
#instructions { font-size: 10pt; font-style: italic; margin: 10px 0 20px 0; color: #777; }

#grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 12px;
    margin: 0 auto 20px auto;
}

.cell {
    background-color: #fcfcfc;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
    color: #333;
    font-family: 'PT Sans Narrow', sans-serif;
    cursor: pointer;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.03);
    padding: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

.cell.selected { 
    background-color: #e0f7fa;
    color: #006064;
    border-color: #22b4be;
    font-weight: bold;
}

.cell p { margin: 0; font-size: 0.9em; pointer-events: none; line-height: 1.1; }

/* --- HINT ANIMATIONS --- */

/* The pulsing blue border for the hinted tile */
.cell.hint-active {
    border-color: #4dd0e1;
    box-shadow: 0 0 15px rgba(77, 208, 225, 0.6);
    animation: pulseBorder 1.5s infinite;
    z-index: 5;
}

@keyframes pulseBorder {
    0% { border-color: #4dd0e1; box-shadow: 0 0 0 0 rgba(77, 208, 225, 0.7); }
    70% { border-color: #26c6da; box-shadow: 0 0 0 6px rgba(77, 208, 225, 0); }
    100% { border-color: #4dd0e1; box-shadow: 0 0 0 0 rgba(77, 208, 225, 0); }
}

/* The Hint Button styles */
#hint-button {
    background-color: transparent;
    color: #22b4be;
    border: 2px solid #22b4be;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    margin: 0 auto 10px auto;
    transition: all 0.2s;
}

#hint-button:hover {
    background-color: #e0f7fa;
    transform: translateY(-2px);
}

/* Float Up Animation for the button */
.float-up {
    animation: floatUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes floatUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- END HINT ANIMATIONS --- */

.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.validation-cell {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
    animation: popIn 0.4s forwards;
    background-color: #eee;
    display: flex;
    min-height: 85px;
}

.link-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    text-align: center;
}

.composer { font-weight: bold; font-size: 1.1em; line-height: 1.1; margin: 0; }
.songs { font-style: italic; font-size: 0.85em; line-height: 1.2; margin: 4px 0 0 0; }

.validation-cell:nth-child(1) { background-color: #f4d35e; color: #222; } 
.validation-cell:nth-child(2) { background-color: #ee964b; color: #222; } 
.validation-cell:nth-child(3) { background-color: #6a4c93; color: #fff; } 
.validation-cell:nth-child(4) { background-color: #1982c4; color: #fff; } 

#submit-button, #new-game-button {
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    margin: 15px auto;
    display: block; 
    background-color: #22b4be;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
}

#try-again-message { font-size: 18px; color: #f95738; min-height: 24px; font-weight: bold; margin: 5px 0; }
#chances { display: flex; justify-content: center; align-items: center; color: #22b4be; }
.note { font-size: 28px; margin: 0 5px; }

@keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (max-width: 600px) {
    #game-container {
        width: 100%;
        height: auto;
        max-height: 98dvh;
        padding: 12px 15px;
        box-shadow: none;
        border: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: auto;
    }
    #title { font-size: 1.8rem; margin: 0; }
    #instructions { font-size: 0.75rem; margin: 5px 0 10px 0; }
    #grid {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 5px;
        margin: 0 0 10px 0;
    }
    .cell { height: 52px; padding: 4px; }
    .validation-cell { min-height: 55px; margin-bottom: 6px; }
    .link-button { padding: 6px 10px; }
    .composer { font-size: 0.85rem; margin-bottom: 2px; }
    .songs { font-size: 0.65rem; margin-top: 0; }
    #submit-button, #new-game-button { 
        width: 80%; max-width: 280px; padding: 10px 0; 
        font-size: 0.95rem; margin: 5px auto; 
    }
    #try-again-message { font-size: 0.9rem; min-height: 20px; margin: 2px 0; }
    .note { font-size: 20px; margin: 0 2px; }
    #chances { margin-top: 5px; }
    
    /* Ensure hint button fits mobile */
    #hint-button { margin-bottom: 5px; font-size: 0.85rem; padding: 6px 12px; }
}