/* --- Main Layout --- */
.intro-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Fill remaining height */
    height: 100%; 
    width: 100%;
    /* No padding-top needed as main handles gap */
    justify-content: center; 
}

/* --- Slideshow Stage --- */
.stage-container {
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: var(--border-width) solid var(--border-subtle);
    box-shadow: 0 8px 0 var(--border-subtle); 
    
    width: 100%;
    max-width: 500px;
    
    /* Dynamic height based on screen, but keep square-ish */
    height: 50vh; 
    max-height: 500px;
    min-height: 300px;
    
    display: flex;
    flex-direction: column; /* Stack Title and Content */
    align-items: center;
    justify-content: center;
    position: relative;
    margin: auto; 
    padding: 1rem;
}

.stage-container.hidden { display: none; }

/* Static Title Area */
.stage-title {
    min-height: 2em; /* Reserve space */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    z-index: 2;
}

.stage-content {
    text-align: center;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease-out;
    width: 100%;
    /* Remove padding here, controlled by container */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stage-content.visible {
    opacity: 1;
    transform: scale(1);
}

/* Instruction Text */
.intro-instruction {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.4;
    text-align: center;
}

.intro-syllabic {
    font-family: 'Noto Sans Canadian Aboriginal', sans-serif;
    font-size: var(--fs-syl-mega);
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
    margin-bottom: 1rem;
}

.intro-phonetic {
    font-family: 'Nunito', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: var(--c-blue);
}

/* --- Matching Game Stage --- */
.matching-container {
    width: 100%;
    max-width: 800px; 
    height: 100%; 
    
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: var(--border-width) solid var(--border-subtle);
    box-shadow: 0 8px 0 var(--border-subtle); 
    
    padding: 1rem;
    position: relative;
    
    display: flex;
    flex-direction: column;
}

.matching-container.hidden { display: none; }

.match-columns-wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
    
    flex-grow: 1; 
    width: 100%;
    
    gap: 1rem; 
    padding: 1rem 0;
}

.match-svg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.match-line {
    stroke: var(--c-blue);
    stroke-width: 6px; 
    stroke-linecap: round;
}

.match-line.correct { stroke: var(--c-green); }
.match-line.wrong { stroke: #E12D39; }

.match-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    z-index: 20;
    align-items: center; 
    
    justify-content: space-around; 
}

/* Match Item CIRCLES - 3D Physics Update */
.match-item {
    background: var(--bg-surface);
    border: var(--border-width) solid var(--border-subtle);
    
    /* Sizing */
    width: clamp(48px, 10vh, 80px);
    height: clamp(48px, 10vh, 80px);
    
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    
    /* 3D Physics Base State */
    transform: translateY(var(--lift-rest));
    box-shadow: 0 var(--shadow-rest) 0 var(--border-subtle);
    
    transition: transform 0.1s cubic-bezier(0.3, 0, 0.5, 1), 
                box-shadow 0.1s cubic-bezier(0.3, 0, 0.5, 1),
                background-color 0.1s, border-color 0.1s, color 0.1s;
}

/* 
   INTERACTION STATES 
*/

/* 1. Hover: Lift Up (only on devices that support hover) */
@media (hover: hover) {
    .match-item:hover:not(.correct):not(.wrong):not(.selected):not(.connected) {
        border-color: var(--c-blue);
        transform: translateY(var(--lift-hover));
        box-shadow: 0 var(--shadow-hover) 0 var(--c-blue);
    }
}

/* 2. Selected: Blue Fill, Dark Blue Stroke/Shadow (Two distinct shades) */
.match-item.selected {
    background-color: var(--c-blue);      /* Lighter Blue */
    border-color: var(--c-blue-dark);     /* Darker Blue */
    color: white;
    
    /* Maintain 3D Depth */
    transform: translateY(var(--lift-rest)); 
    box-shadow: 0 var(--shadow-rest) 0 var(--c-blue-dark);
}

/* 3. Connected: White Fill, Regular Blue Stroke & Shadow (Same shade) */
.match-item.connected {
    background-color: white;
    border-color: var(--c-blue);
    color: var(--c-blue);
    
    /* Stroke and Shadow match exact color */
    box-shadow: 0 var(--shadow-rest) 0 var(--c-blue); 
    transform: translateY(var(--lift-rest));
}

/* 4. Active (Clicking): FLATTEN IT */
.match-item:active:not(.correct) {
    transform: translateY(var(--lift-active)) !important;
    box-shadow: 0 var(--shadow-active) 0 var(--c-blue-dark) !important;
}

/* 5. Correct: FLATTEN IT (Green) */
.match-item.correct {
    background-color: var(--c-green);
    border-color: var(--c-green-dark); 
    color: white;
    cursor: default;
    pointer-events: none;
    
    transform: translateY(var(--lift-active));
    box-shadow: 0 var(--shadow-active) 0 var(--c-green-dark);
}

/* 6. Wrong: FLATTEN IT (Red) */
.match-item.wrong {
    background-color: #E12D39;
    border-color: #8a1c23; 
    color: white;
    
    transform: translateY(var(--lift-active));
    box-shadow: 0 var(--shadow-active) 0 #8a1c23;
}

/* Text Sizes */
.match-item.left {
    font-family: 'Noto Sans Canadian Aboriginal', sans-serif;
    font-size: 1.5rem; 
    font-weight: 700;
    padding-bottom: 2px; 
}

.match-item.right {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
}

.match-footer {
    margin-top: 0.5rem;
    text-align: center;
    flex-shrink: 0;
}

/* End Screen */
.controls-container {
    text-align: center;
    margin: auto; /* Center in screen */
}

.controls-container.hidden { display: none; }

.complete-msg {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 1.5rem;
}

.action-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
}