/* VL Matching Game v5.3.1 - Production Optimized */
.matching-game-container *{margin:0;padding:0;box-sizing:border-box}
.matching-game-container{font-family:Arial,sans-serif;max-width:600px;margin:15px auto;border:2px solid #f0f0f0;border-radius:8px;padding:8px;position:relative}
.matching-game-container .matching-game-title{text-align:center;font-size:1.3em;font-weight:bold;margin-bottom:12px;color:#333;display:flex;align-items:center;justify-content:center;gap:8px}

/* TTS Toggle Icon */
.matching-game-container .tts-toggle-icon{cursor:pointer;font-size:1.2em;transition:all .2s ease;user-select:none;display:inline-block}
.matching-game-container .tts-toggle-icon:hover{transform:scale(1.15)}
.matching-game-container .tts-toggle-icon:active{transform:scale(.95)}
.matching-game-container .tts-toggle-icon.tts-disabled{opacity:.4}

.matching-game-container .game-login-notice{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:8px 16px;border-radius:8px;margin-bottom:10px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.matching-game-container .game-login-notice a{color:#fff;text-decoration:none;font-weight:bold;font-size:.95em;transition:opacity .3s ease}
.matching-game-container .game-login-notice a:hover{opacity:.9;text-decoration:underline}
.matching-game-container .game-stats{display:flex;justify-content:center;align-items:center;gap:15px;margin-bottom:12px;font-size:.95em;padding:10px;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);flex-wrap:wrap}
.matching-game-container .game-stats span{font-weight:600}
.matching-game-container .game-stats strong{font-size:1.2em;margin-left:4px}

/* v5.0: Compact layout for better screen fit */
.matching-game-container .matching-game-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    align-items:start;
}
.matching-game-container .matching-game-column{
    display:flex;
    flex-direction:column;
    gap:6px;
}

/* v5.0: Compact match items - reduced size */
.matching-game-container .match-item{
    display:flex;
    align-items:stretch;
    justify-content:flex-start;
    min-height:60px;
    background:#fff;
    border:2px solid #ddd;
    border-radius:6px;
    padding:6px 8px;
    position:relative;
    cursor:pointer;
    transition:all .2s ease;
}
.matching-game-container .match-item:not(.matched):hover{
    background:#f8f9fa;
    border-color:#3498db;
    transform:translateY(-2px);
    box-shadow:0 4px 8px rgba(52,152,219,.2);
}

/* v5.0: Content wrapper - fills entire item */
.matching-game-container .match-content{
    display:flex;
    width:100%;
    min-height:100%;
}

/* LEFT COLUMN: Vertical layout with question on top */
.matching-game-container .matching-game-column.left .match-content{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:4px;
}

/* RIGHT COLUMN: Horizontal/vertical based on content type */
.matching-game-container .matching-game-column.right .match-content{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
}

/* v5.0: Image + Text combination layout (RIGHT SIDE) - compact */
.matching-game-container .match-content-img-text{
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    width:100%;
}
.matching-game-container .match-content-img-text img{
    max-height:40px;
    max-width:90%;
    object-fit:contain;
    display:block;
}
.matching-game-container .match-content-img-text .match-text-content{
    font-size:.88em;
    font-weight:600;
    text-align:center;
    word-break:break-word;
    line-height:1.25;
    width:100%;
}

/* Standard images - compact size */
.matching-game-container .match-content img{
    max-height:45px;
    max-width:45px;
    object-fit:contain;
    display:block;
    flex-shrink:0;
}

/* v5.0: Question text (LEFT SIDE - top part) - compact */
.matching-game-container .match-text{
    font-size:1em;
    font-weight:700;
    word-break:break-word;
    color:#333;
    line-height:1.2;
    width:100%;
    flex-shrink:0;
    margin-bottom:2px;
}

/* v5.0: Answer text content - compact */
.matching-game-container .match-text-content{
    font-size:.88em;
    font-weight:500;
    color:#333;
    line-height:1.3;
    word-break:break-word;
    flex:1;
}

/* v5.0: LEFT COLUMN PLACEHOLDER - compact */
.matching-game-container .matching-game-column.left .match-content-placeholder{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    gap:5px;
    flex:1;
    min-height:35px;
}

/* v5.0: Placeholder with just text - compact */
.matching-game-container .match-content-placeholder .match-text-content{
    font-size:.88em;
    font-weight:500;
    line-height:1.25;
    margin:0;
    padding:0;
}

/* v5.0: Placeholder with image only - compact */
.matching-game-container .match-content-placeholder img{
    max-height:38px;
    max-width:38px;
    object-fit:contain;
    flex-shrink:0;
}

/* v5.0: Placeholder with Image+Text (LEFT SIDE after match) - compact */
.matching-game-container .match-content-placeholder.has-img-text{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
}
.matching-game-container .match-content-placeholder.has-img-text img{
    max-height:35px;
    max-width:75%;
}
.matching-game-container .match-content-placeholder.has-img-text .match-text-content{
    font-size:.85em;
    text-align:center;
    width:100%;
    line-height:1.2;
}

.matching-game-container .match-item.selected{
    border-color:#3498db;
    background:#e3f2fd;
    box-shadow:0 0 12px rgba(52,152,219,.6);
}
.matching-game-container .match-item.matched{
    background:#fff;
    border-color:#ddd;
}
.matching-game-container .match-item.correct{
    border-color:#2ecc71;
    background:#d4edda;
    cursor:default;
}
.matching-game-container .match-item.wrong{
    border-color:#e74c3c;
    background:#f8d7da;
    cursor:default;
}
.matching-game-container .wrong-marker{
    position:absolute;
    top:8px;
    right:10px;
    font-size:1.6em;
    font-weight:bold;
    color:#e74c3c;
    animation:wrongPop .3s ease;
    line-height:1;
    z-index:10;
}
.matching-game-container .correct-marker{
    position:absolute;
    top:8px;
    right:10px;
    font-size:1.6em;
    font-weight:bold;
    color:#2ecc71;
    animation:correctPop .3s ease;
    line-height:1;
    z-index:10;
}
.matching-game-container .submit-container{text-align:center;margin-top:15px}
.matching-game-container .submit-btn{
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:#fff;
    border:none;
    padding:12px 35px;
    border-radius:30px;
    font-size:1.05em;
    font-weight:bold;
    cursor:pointer;
    transition:all .3s ease;
    box-shadow:0 4px 15px rgba(102,126,234,.4);
}
.matching-game-container .submit-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(102,126,234,.6);
}
.matching-game-container .submit-btn:active{transform:translateY(0)}
.matching-game-container .matching-game-results{
    text-align:center;
    margin-top:15px;
    padding:15px;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:#fff;
    border-radius:10px;
    box-shadow:0 4px 15px rgba(0,0,0,.2);
}
.matching-game-container .matching-game-results .result-title{
    margin:0 0 8px 0;
    font-size:1.6em;
    color:#fff;
    text-shadow:2px 2px 4px rgba(0,0,0,.3);
    font-weight:bold;
}
.matching-game-container .matching-game-results .game-score{margin:12px 0}
.matching-game-container .matching-game-results .game-score p{
    font-size:1em;
    margin:4px 0;
    color:#fff;
    text-shadow:1px 1px 2px rgba(0,0,0,.2);
}
.matching-game-container .matching-game-results .game-score strong{color:#fff}
.matching-game-container .game-message{
    background:rgba(255,255,255,.95);
    padding:12px 16px;
    border-radius:8px;
    margin:15px 0;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.matching-game-container .game-message p{margin:6px 0;font-size:1em}
.matching-game-container .game-message-success{border-left:5px solid #27ae60;color:#27ae60}
.matching-game-container .game-message-success strong{color:#27ae60}
.matching-game-container .game-message-try{border-left:5px solid #e67e22;color:#d35400}
.matching-game-container .game-message-try strong{color:#d35400}
.matching-game-container .game-message-practice{border-left:5px solid #3498db;color:#2980b9}
.matching-game-container .game-message-practice strong{color:#2980b9}
.matching-game-container .game-message-login{border-left:5px solid #9b59b6;color:#8e44ad}
.matching-game-container .game-message-login strong{color:#8e44ad}
.matching-game-container .login-btn{
    display:inline-block;
    background:#667eea;
    color:#fff;
    padding:6px 18px;
    border-radius:20px;
    text-decoration:none;
    font-weight:bold;
    transition:all .3s ease;
    margin:4px 0;
    font-size:.95em;
}
.matching-game-container .login-btn:hover{
    background:#5568d3;
    transform:scale(1.05);
    box-shadow:0 2px 8px rgba(102,126,234,.4);
}
.matching-game-container .reset-btn{
    background:#fff;
    color:#667eea;
    border:none;
    padding:10px 28px;
    border-radius:25px;
    font-size:.95em;
    font-weight:bold;
    cursor:pointer;
    transition:all .3s ease;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.matching-game-container .reset-btn:hover{
    transform:scale(1.05);
    box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.vl-game-wrapper{margin:20px 0;transition:opacity .3s ease}
.vl-game-hidden{display:none}
.vl-game-visible{display:block;animation:fadeIn .5s ease}
.vl-show-game-btn-container{text-align:center;margin:15px 0}
.vl-show-game-btn{
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:#fff;
    border:none;
    padding:12px 40px;
    border-radius:30px;
    font-size:1em;
    font-weight:bold;
    cursor:pointer;
    transition:all .3s ease;
    box-shadow:0 4px 15px rgba(102,126,234,.4);
}
.vl-show-game-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(102,126,234,.6);
}
@keyframes fadeIn{
    0%{opacity:0;transform:translateY(10px)}
    100%{opacity:1;transform:translateY(0)}
}
@keyframes wrongPop{
    0%{transform:scale(0)}
    50%{transform:scale(1.2)}
    100%{transform:scale(1)}
}
@keyframes correctPop{
    0%{transform:scale(0)}
    50%{transform:scale(1.2)}
    100%{transform:scale(1)}
}
@keyframes shake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-8px)}
    75%{transform:translateX(8px)}
}
.matching-game-container .shake{animation:shake .4s ease}

/* v5.0: Mobile Responsive - compact */
@media (max-width:600px){
.matching-game-container{max-width:100%;margin:10px;padding:6px}
.matching-game-container .matching-game-title{font-size:1.1em;margin-bottom:8px}
.matching-game-container .tts-toggle-icon{font-size:1em}
.matching-game-container .match-item{min-height:55px;padding:5px 6px}
.matching-game-container .match-content img{max-height:40px;max-width:40px}
.matching-game-container .match-content-img-text img{max-height:35px;max-width:85%}
.matching-game-container .match-content-img-text .match-text-content{font-size:.82em;line-height:1.2}
.matching-game-container .match-content-placeholder img{max-height:35px;max-width:35px}
.matching-game-container .match-content-placeholder.has-img-text img{max-height:32px;max-width:70%}
.matching-game-container .match-content-placeholder.has-img-text .match-text-content{font-size:.8em;line-height:1.15}
.matching-game-container .match-text{font-size:.95em;line-height:1.15;margin-bottom:1px}
.matching-game-container .match-text-content{font-size:.85em;line-height:1.25}
.matching-game-container .match-content-placeholder .match-text-content{font-size:.82em;line-height:1.2}
.matching-game-container .submit-btn{padding:10px 28px;font-size:.95em}
.matching-game-container .matching-game-columns{gap:6px}
.matching-game-container .matching-game-column{gap:5px}
.matching-game-container .matching-game-results .result-title{font-size:1.3em}
.matching-game-container .game-stats{padding:8px;margin-bottom:8px;gap:8px;font-size:.88em}
.matching-game-container .game-stats strong{font-size:1.1em}
.matching-game-container .wrong-marker,.matching-game-container .correct-marker{font-size:1.4em;right:6px;top:4px}
.vl-show-game-btn{padding:10px 30px;font-size:.95em}
}